สุรีย์พร อังสุภานิช – Page 2

Remote Debugging ASP.NET application

January 11, 2017 14:24

ในการพัฒนาเว็บแอพพลิเคชัน การที่จะ publish เว็บขึ้น server ผู้พัฒนาย่อมมีการทดสอบการทำงานของแต่ละฟังก์ชันแต่ละ process ผ่าน localhost ก่อนอยู่แล้ว ว่าสามารถทำงานได้ถูกต้อง ไม่พบ error หรือปัญหาใดๆ แต่ในบางครั้งพบว่า เมื่อ publish เว็บไปแล้ว กลับพบ error ในบางฟังก์ชัน ทั้งที่ฟังก์ชันนั้นผ่านการทดสอบบน localhost ว่าทำงานถูกต้องแล้ว ซึ่งอาจเกิดจาก Environment ในตอนที่เรา run ที่ localhost กับบน server ไม่เหมือนกัน หรือฐานข้อมูลที่ทดสอบกับฐานข้อมูลที่ใช้งานจริงมีข้อมูลที่ conflict กันอยู่ เป็นต้น ซึ่งบทความนี้ผู้เขียนจะมาแนะนำ Remote Debugging Tool สำหรับผู้พัฒนาเว็บด้วย ASP.NET Remote Debugging Tool คือ เครื่องมือที่ใช้ในการ remote debug สำหรับ ASP.NET แอพพลิเคชัน ซึ่งเป็นเครื่องมือขนาดเล็กที่มีชื่อว่า “Msvsmon.exe” ที่ให้เราสามารถ debug code เพื่อหา error โดยการ remote จาก Visual Studio ไปยัง IIS server ติดตั้ง Remote Debugging Tool บน Windows Server download ตัวติดตั้ง Remote tools ตาม version ของ Visual Studio ที่เราใช้งาน เมื่อ download มาเรียบร้อยแล้วให้ทำการติดตั้ง โดยคลิกขวาที่ไฟล์ติดตั้ง เลือก Run as administrator จะปรากฎหน้าต่างดังรูป ให้เลือก Configure remote debugging จะเสร็จสิ้นขั้นตอนการติดตั้งและจะปรากฏหน้าต่าง Remote Debugger ซึ่งตอนนี้ Remote debugger ทำงานแล้ว โดยรอการเชื่อมต่อจากฝั่ง Visual Studio (ภายหลัง สามารถเรียกใช้งาน Remote Debugger ได้จาก Start menu) Attach Process จาก Visual Studio เครื่องพัฒนา เปิด Visual Studio ขึ้นมา และเลือก project ที่จะใช้งาน ที่แถบเมนูด้านบน เลือก Debug >> Attach to Process ปรากฎหน้าต่าง Attach to Process ดังรูป ในส่วนของ Qualifier ให้ระบุชื่อหรือ IP ของเครื่อง server ที่ web เราวางอยู่ และกดปุ่ม Refresh ด้านล่างเพื่อ connect ไปยังเครื่อง server ดังรูป 4. เลือก process ที่ชื่อ w3wp.exe โดยสังเกตที่คอลัมน์ User Name เป็น path ของ site ที่เราต้องการทดสอบ หลังจากนั้นกดปุ่ม Attach ดังรูป 5. เปิด browser และพิมพ์ url ไซต์ของเรา http://<remote computer name> 6. เลือกมาร์กจุด breakpoint ที่จะ debug code ตามต้องการ เราก็จะสามารถ debug code โดยการ remote ไปยังเครื่อง server ที่เราได้ deploy เว็บของเราไปแล้วได้เหมือนการ debug บนเครื่อง

เชื่อมต่อ GitHub Repository ด้วย Visual Studio 2015

July 15, 2016 11:15

ในการพัฒนาแอปพลิเคชันหรือระบบงานหนึ่งขึ้นมา การจัดการ File source code ไม่ว่าจะเป็นการสร้าง การแก้ไข การควบคุม file version ต่างๆ ถือเป็นเรื่องสำคัญ ซึ่งในบทความนี้นำเสนอการใช้งาน Visual Studio 2015 ในการเชื่อมต่อไปยัง GitHub Server Git คือ Version Control ตัวหนึ่ง มีหน้าที่ในการจัดเก็บการเปลี่ยนแปลงของ file source code มีการ backup code ให้เรา สามารถที่จะเรียกดูหรือย้อนกลับไปดูเวอร์ชั่นต่างๆของ project เรา รวมถึงสามารถ track ได้ว่าไฟล์นั้นๆใครเป็นคนเพิ่มหรือแก้ไข ถูกสร้างโดยใคร ถูกปรับปรุงโดยใคร GitHub คือ web open source ที่ให้บริการพื้นที่จัดเก็บ source code ของ project ที่เราได้พัฒนา โดยมีระบบควบคุม (version control) แบบ Git ซึ่งทำให้การพัฒนา project ต่างๆ สามารถแชร์ file source code ได้ง่ายขึ้น เครื่องมือที่ใช้ในการเชื่อมต่อ GitHub Repository ด้วย Visual Studio 2015 Microsoft Visual Studio 2015 GitHub Extension for Visual Studio สามารถ download ได้จาก link ของ github โดยตรง >> Download Now Account ที่ใช้ในการเข้าถึง web GitHub ขั้นตอนการเชื่อมต่อ GitHub Repository ด้วย Visual Studio 2015 1.ติดตั้ง GitHub Extension for Visual Studio ที่ได้ดาวน์โหลดจากลิงค์ข้างบน 2. เมื่อติดตั้งเสร็จจะขึ้นดังรูป 3.เปิด Visual Studio 2015 ขึ้นมา ไปยังแท็บ Team Explorer แล้วกด Manage Connections ที่ไอคอนรูปปลั๊ก ดังรูป 4.ที่เมนู GitHub ให้คลิก Login 5.กรอกข้อมูล GitHub Account ที่จะเชื่อมต่อ แล้วกดปุ่ม Login 6.เมื่อ Login สำเร็จ จะแสดง GitHub repository ทั้งบน GitHub server และ repository บนเครื่อง local ของเราเองดังรูป 7.เข้าไปที่ https://github.com/ แล้ว Login ด้วย GitHub Account ของเราแล้วไป tab>> Repository เพื่อสร้าง Repository ที่จะเก็บ Project ที่เราต้องการจะเพิ่มเข้าไปจาก Visual Studio โดยกรอก repository name และกดปุ่ม Create repository 8. เราจะได้ repository เปล่าๆ ที่เราสร้างขึ้นดังรูป 9. เปิด project ที่ต้องการเพิ่มเข้า repository ขึ้นมา คลิกขวาที่ solution เลือก add solution to source control ดังรูป 10.จะปรากฎหน้าต่างให้เราเลือก Source Control ที่เราเลือก Git แล้วกดปุ่ม OK 11.ให้เรากรอก Commit Message

ASP.NET MVC Part 4: ทำความรู้จักกับ ViewData, ViewBag และ TempData

July 13, 2016 00:14

การส่งผ่านข้อมูลระหว่างกันใน ASP.NET MVC จะมีการส่งผ่านกันด้วย objects ซึ่งใน ASP.NET MVC จะมี object ที่ชื่อ ViewData, ViewBag และ TempData เป็น object ที่่ใช้ในการส่งผ่านข้อมูลในลักษณะที่แตกต่างกันออกไป โดยในการส่งผ่านข้อมูลจะแบ่งได้เป็น 3 กรณี คือ การส่งผ่านค่าจาก Controller ไปยัง View การส่งผ่านค่าจาก Controller หนึ่ง ไปยัง Controller อื่น การส่งค่าระหว่าง Action หนึ่ง ไปยัง Action อื่น โดยทั้ง 3 objects จะมีคุณสมบัติที่แตกต่างกัน ดังนี้ ViewBag เป็น dynamic object ในการส่งค่าจาก controller ไปยัง view ViewData เป็น dictionary object ในการส่งค่าจาก controller ไปยัง view TempData เป็น dictionary object ในการส่งค่าข้ามกันระหว่าง controller และ action การส่งผ่านข้อมูลจาก controller ไปยัง View การส่งผ่านข้อมูลจาก Controller ไปยัง View สามารถทำได้ 3 รูปแบบ ขึ้นอยู่กับลักษณะของข้อมูลที่ต้องการส่งว่าเป็นข้อมูลลักษณะไหน มีความซับซ้อนเพียงใด แต่ละรูปแบบสามารถเขียนได้ดังนี้ ส่งผ่าน Model การส่งผ่านข้อมูลผ่านตัว model เป็นการส่งผ่านข้อมูลผ่านตัว model ตรงๆ โดยที่ข้อมูลจะมี property ตามที่มีอยู่ใน model ที่สร้างไว้ ดังตัวอย่าง สร้าง model ของ Book และ set ค่าให้กับ property ต่างๆ และ return model Book ไปยังหน้า View ฝั่ง Controller public ActionResult Index() { List<ฺBook> b = new List<Book>() { new Book{ Id = 1, Title = “Harry Potter”, Author= “JK. Rolling”}, new Book{ Id = 2, Title = “Inferno”, Author= “Dan Brown”} }; return View(b); } ฝั่งแสดงผล View ประกาศ type ของ model เป็น Book หลังจากนั้นใช้ตัวแปร model ในการเข้าถึง property ต่างๆของ Model @model MvcBook.Models.Book <table class=”table”> <tr> <th> @Html.DisplayNameFor(model => model.Title) th> <th> @Html.DisplayNameFor(model => model.Author) th> <th>th> tr> @foreach (var item in Model) { <tr> <td> @Html.DisplayFor(modelItem => item.Title) td> <td> @Html.DisplayFor(modelItem => item.Author) td> tr> }

ASP.NET MVC Part3: สร้าง Model ด้วย Entity Framework

January 15, 2016 14:00

จากบทความก่อนหน้า ซึ่งอาจจะนานมากพอสมควรที่ได้แนะนำ MVC ไปไว้แล้วในเบื้องต้น (ASP.NET MVC Part 1 : ทำความรู้จักกับ ASP.NET MVC และ ASP.NET MVC Part2: เริ่มต้นสร้างเว็บด้วย MVC with Bootstrap) บทความนี้จะมาแนะนำในส่วนของการสร้าง Model ในการเชื่อมต่อกับฐานข้อมูล ในการ query และจัดการกับข้อมูล เพื่อส่งให้กับ Controller และ View เรียกใช้ในลำดับต่อไป Model คือ ส่วนหนึ่งในองค์ประกอบของการพัฒนาเว็บแอพพลิเคชันตามรูปแบบ MVC Framework (Model-View-Controller) โดยจะเป็นส่วนที่ทำหน้าที่ Business Model หรือส่วนที่ติดต่อกับฐานข้อมูล โดยบทความนี้นำเสนอการนำเครื่องมือ Entity Framework มาใช้ในการสร้างและจัดการ Model ในการเชื่อมต่อกับฐานข้อมูล สำหรับการพัฒนาเว็บแอพพลิเคชันตามรูปแบบ MVC Framework Entity Framework Entity Framework คือ tools ที่ทำหน้าที่จัดการกับฐานข้อมูล โดยแนวคิดของ Entity Framework อยู่ในรูปแบบของ O/RM (Object/Relational Mapping) คือ Entity Framework จะสร้าง Layer ทำหน้าที่เป็น Database Model ขึ้นมาเป็น Class ใน Project ของเรา โดยจะทำหน้าที่ Mapping ตัว Class ที่จะสร้างขึ้น กับ Table , View และ Stored Procedure จากฐานข้อมูบ มาไว้บน Project ซึ่งทำให้เราเราสามารถเรียกใช้มันผ่าน Class ที่อยู่ใน Project เราได้เลย ส่วนการเขียน Query หรือจัดการกับข้อมูลผ่านตัว Entity Model จะใช้ Syntax ของ LINQ to Entities ซึ่งเป็น syntax ที่สามารถเข้าใจได้ง่ายตามรูปแบบของภาษาเช่น VB.Net หรือ C# วิธีการใช้งาน Entity Framework เบื้องต้น 1. เปิด solution ที่ต้องการใช้ขึ้นมา (ในบทความนี้เป็น project แบบ MVC Framework) 2. คลิกขวาที่โฟลเดอร์ Model แล้วเลือก Add =>New Item 3. ที่ tab ด้านซ้ายมือ เลือก Data จากนั้นเลือก ADO.NET Entity Data Model และทำการตั้งชื่อ และกดปุ่ม Add 4. เมื่อเข้าสู่หน้าจอให้เลือก Model Content ให้เลือก EF Desiner from DataBase และกด Next จะเข้าสู่ขั้นตอนต่อไป 5.ขั้นตอนถัดมาคือการเลือก Data Connection เป็นการเลือกการติดต่อกับฐานข้อมูลว่าจะให้ Entity ติดต่อกับฐานข้อมูลไหน โดยครั้งแรกหากยังไม่มี ฐานข้อมูลมาให้เลือกใน comboBox จะต้อง New Connection ขึ้นมาก่อน และทำตามขั้นตอนไปได้เลย แต่ถ้ามีแล้วให้เลือก Connection จาก ComboBox หลังจากนั้นให้กดเลือก Yes,include the sensitive data in connection string และเลือก Checkbox ให้ Save Connection string เข้าสู่ Web.Config และตั้งชื่อให้กับ Conection string โดย default ชื่อจะเป็น “Entities” และกดปุ่ม Next

การ Encrypt/Decrypt ข้อมูลในไฟล์ Web.config

January 13, 2016 13:46

การเข้ารหัส (Encrypt) ไฟล์ Web.config ถือเป็นวิธีการหนึ่งในการช่วยเพิ่มความปลอดภัยและช่วยป้องกันการถูกโจมตีจากผู้บุกรุกในการเชื่อมต่อกับฐานข้อมูล เนื่องจากไฟล์ web.config เป็นที่รวมการ config ค่าต่างๆ ของ web application ของเราไว้ เช่น ข้อมูลรหัสผ่านสำหรับการเชื่อมต่อฐานข้อมูล (ConnectionString), AppSetting, คีย์ API หรือข้อมูลสำคัญอื่นๆ ที่เกี่ยวกับการตั้งค่าต่างๆ โดยบทความนี้นำเสนอการเข้ารหัสและการถอดรหัส (Encrypt/Decrypt) ไฟล์ Web.config ด้วยคำสั่งผ่าน Command line โดยใช้ tools ที่มากับ .NET Framework ดังนั้นเครื่องคอมพิวเตอร์ของเราจะต้องมีการติดตั้ง .NET Framework ไว้อยู่ก่อนแล้ว สำหรับข้อมูลในไฟล์ Web.config จะถูกแบ่งออกเป็น section หลายๆ section ด้วยกัน โดยผู้เขียนจะขอยกตัวอย่างการ Encrypt/Decrypt ข้อมูลในส่วนของ section<connectionString>ดังนี้ ก่อนทำการ Encrypt Web.config ที่ section <connectionStrings> ซึ่งเก็บข้อมูล config ค่าต่างๆ ของ Database sever ไว้ เช่น user/password เป็นต้น <configuration> <connectionStrings> <add name=”SqlServices” connectionString=”Data Source=localhost;PASSWORD=1234;Integrated Security=SSPI;Initial Catalog=Northwind;” /> </connectionStrings> </configuration> Encrypt Web.config 1.เปิด Command Prompt ขึ้นมา (อย่าลืมเปิดแบบ Run as administrator ด้วยนะคะ) 2.พิมพ์คำสั่ง ดังนี้(Version ของ.NET Framework ขึ้นอยู่กับที่ลงไว้ที่เครื่อง) : cd C:\Windows\Microsoft.NET\Framework\v4.0.30319 3.เข้าไปที่ directory path ที่เก็บไฟล์ web.config แล้วพิมพ์คำสั่ง ดังนี้ aspnet_regiis.exe -pef connectionStrings C:\inetpub\wwwroot หมายเหตุ: “connectionString” เป็น case sensitive ตัวพิมพ์เล็ก พิมพ์ใหญ่ ต้องพิมพ์ให้ถูกต้อง หลังทำการ Encrypt Web.config หลังจากทำการ Encrypt แล้วจะเห็นว่า ที่ section connectionString จะเป็นรหัสที่ไม่สามารถอ่านเข้าใจได้ <connectionStrings configProtectionProvider=”RsaProtectedConfigurationProvider”> <EncryptedData Type=”http://www.w3.org/2001/04/xmlenc#Element” xmlns=”http://www.w3.org/2001/04/xmlenc#”> <EncryptionMethod Algorithm=”http://www.w3.org/2001/04/xmlenc#tripledes-cbc” /> <KeyInfo xmlns=”http://www.w3.org/2000/09/xmldsig#”> <EncryptedKey xmlns=”http://www.w3.org/2001/04/xmlenc#”> <EncryptionMethod Algorithm=”http://www.w3.org/2001/04/xmlenc#rsa-1_5″ /> <KeyInfo xmlns=”http://www.w3.org/2000/09/xmldsig#”> <KeyName>Rsa Key</KeyName> </KeyInfo> <CipherData> <CipherValue>SryXAF+wpnIpZ8P3HMP8ffMDBorz9j08/oX2vXDA+9LkMHY1i50qeCqYmOYnQXK4C6iNhyIZx9R+AcE7yY7AQeHzzPhZ/bZ04NPuOpd7wD+NL82CWeec/fToTIBbHvE6zNBgenUSE+8zTv9II357tsqpjH1xaII+zmZbgo5+fnhjAD8nVffqd+NQ0x+IXDwyBraeT50TlEXx4lJlAph7jqdglg1Xf/yjSTfwrOB2NcVIHVaVWN3CrelWgQKASftGXdDVingbRn2RXphyooTuVsZgJdzbFMpd7H6fJHggORSPwOud1ZU5vE4aNAMHDa4fb6FOA3I8R0urWD4sT34YRg==</CipherValue> </CipherData> </EncryptedKey> </KeyInfo> <CipherData> <CipherValue>iKttnP9CEMRfq+mhcHqN8f5GiwsySBLw0CWeiAxSQVIfoEQMNutubrRFruoNIb+m0XJnPL5FIypqqQ72dqZ4DSeQdUJwAVyO4HSlM5F3b+Jnogz9aMAuwdoww5QKdI94yH9fx8RwxhAzq1a9eApjLglAwTmKY84Wg/Lqpcn9wfvKyIZJyQaJCaLCEteGhB9bopjT9z+nmMZVQ2LrDEtKMEe1oltPoR8EvTel2/2jJ/gwvJK+vTw9sL2GMPJIoA/NZQWjR2CWaCGlEFIjmgqT8BjTwiSS6hEp90CEQVN14U9A71vXquH73X6ZAyIFScf2XJS1Y+iCaEFo6r8qIIiGdrAGUTgfa8r9EwHzb5emCzlQzEDWgzno5IUDxuMBNzJinFudgwPFkA/xhdAHcHnB+quFOGGKVZJw72o5Ix7IeWI1Frs2n8+JZMrpPNW5r4SHHLrMD/iPR5FSfDz/sQqR5f+3/N3i3aq0LX8NfthfYtS9N4oCdPBPbIReP1w05we1Q+PJMO4KVG4w3x8k9O7aT0zoi+5CuPgKR30IgbE0sL8fOeki5OKYfsscNMzV/6T23axh9Ky+axI9fAMarjjL5aeYfa8n6jeevpA4f2SmlkbvW6P72292Ihk3bD1HMghn7ibjZ2q6hLwTb9QWyQvSDjHPsqeoiuKBTNJZgsCqBA4QK8j6/9exufTsOe/SgTclHPfiXpSI7CgbaGd6JQ2P5QSDVwQNQPuaf4qFKsZdPWfdEGcCgxLVZtcU0Cd12AnpaWIpiVUjCz6pWl4YygEXsvntLQfLSQ7XX2Q8lA1DjqBOcDQXY9mMo6PvZi3IsqcdF/DEn931nwBPO09T2AqWJWuAaK/Vh4+olkVYFWuj/Eerp2UkG2ItJduUaRNWzXV9s1hQ/q/36S0RTxN0DgXPII6CowQWIV2d5ZYwSUKVgsiDM43GBPF4SFFJOUec37yzYv6XT3/BmDmNpq32a+VAUB/OP23k4mnTvm/Nay1Iy6E8sUOYSpCY1up6XAcFL1XsacpNKLpMTmH6LsROX9BhmdTNaWgCQaDNVNeAISoJ8HZ5lw/EX1f6Rtz4uWyvBfSOPPAWPkNQawexjVKl0FtR6fRSnAGMkgflURH5QNX5xm+y0sfZsNz9sAFZofoJLQ3rdV7ToFJE+JlEvPKRHFDVbxDCURQ5CynXFnqlLj+2LhBbyX0n6oHQwMgTTTIf/+PNcjOx3zBn6/V3T0PdD6fnjVtTDnbJzN7ct7SOuifW0OfCfyeKSs0IOzPm8BucZ4CODaTwjY1bz2kgGRTjuenCp1N1GIRhMJBIBJhWOs3nee6Y9DgtlpWc3SZRZeYkmOffT5xNwQeTLrIXvTZCByHZcN3+g8OG0HqlodUCbPgf8jK45dMeT8piyFwZem8Dotjz7mXOaJxF7C66SQKvFVfuJjXDmTbmdzqwt33z+w39TV8ueXGyB/5S1kpV/ul+c7LwTwked7bMJtFJpVwdFKFiUxMebDuu3vINlVSZJfo43SSmTD3rM2UXV8ol65KzlmacBhgCwXtLFg7/8uGQrrUVq9gqHsoPyEgt</CipherValue> </CipherData> </EncryptedData> </connectionStrings> Decrypt Web.config การถอดรหัส (Decrypt) ไฟล์ Web.config สามารถใช้คำสั่งเช่นเดียวกันกับการ Encrypt แต่เปลี่ยนจาก -pef เป็น -pdf ดังคำสั่งต่อไปนี้ : aspnet_regiis.exe -pdf connectionStrings C:\inetpub\wwwroot หมายเหตุ: “connectionString” เป็น case sensitive ตัวพิมพ์เล็ก พิมพ์ใหญ่ ต้องพิมพ์ให้ถูกต้อง การ Decrypt จะทำได้เฉพาะที่เครื่องที่ทำการ encrypt เท่านั้น จะไม่สามารถ decrypt ไฟล์ web.config นี้จากเครื่องอื่นได้ หากเรานำไฟล์ไป Decrypt จากเครื่องอื่นก็จะพบ message Failed ดังรูป โดยการ Encrypt/Decrypt ด้วยการใช้คำสั่งผ่าน command line สามารถทำได้กับทุก section (ไม่เฉพาะ connectionString)ในไฟล์ Web.confog เพียงแต่เปลี่ยนคำสั่งในส่วนของ section ตามที่ต้องการ แหล่งข้อมูลอ้างอิง : https://msdn.microsoft.com/en-us/library/ff647398.aspx