Archive for the ‘Computers and Internet’ Category

ในบทความนี้เราจะพูดถึงการเปลี่ยน .net framework ที่รันสำหรับ web app ที่เราได้สร้างขึ้น
ใน IIS สามารถใช้ .net fw ได้หลายรุ่นบน server ตัวเดียวกัน
และเลือกรัน web app ที่ใช้ .net fw ได้แตกต่างกันไปได้

หากต้องการทราบว่าภายใน iis มี .net fw ใดทำงานอยู่ให้..

 

1.เปิด iis manager

image

2. คลิกที่ Application Pools

image

 

3. จะแสดงรายละเอียดดังนี้

image

 

การเปลี่ยนรุ่น .Net Framework สำหรับ Web App

 

1.คลิกที่ Web App ที่ได้ติดตั้งใน ตย ผมใช้ชื่อว่า sample ต้องการเปลี่ยนจาก .net fw 2 เป็น .net fw 4

image

 

2.ดูที่เมนู Actions ทางขวาคลิกเลือก Basic Settings

image

 

3.คลิกปุ่ม Select แล้วเลือกเป็น asp.net 4.0

image

 

image

เปลี่ยนเป็น .net 4 แล้วคลิก Ok

image

 

เป็ฯอันเสร็จพิธีกรรมครับ

 

สำหรับตอนที่ 3 จะสาธิต

  1. การกรองข้อมูล
  2. จัดเรียงข้อมูล
  3. การใช้คอนโทรลร่วมกันเพื่อการค้นหา
  4. การจัดกลุ่มข้อมูล
  5. การใช้ QueryExtender
  6. การใช้ Like เพื่อการค้นหาข้อมูล

1.การกรองผูู้เรียนและแสดงผล

ในบทนี้คู่มือได้สอนการกรองข้อมูล Student จาก Person ทั้งหมด ซึ่ง Student จะมี่ค่าขอมูลวันลงทะเบียน (ดูจากข้อมูลใน database)

 

1.1 เปิดเพจ Student.aspx แล้วคลิกที่คอนโทรล entity datasouce

image

 

 

 

 

 

 

 

 

 

 

 

 

1.2 แล้วดูที่หน้าต่าง properties ไปที่ Where แล้วพิมพ์ตามนี้

image

 

1.3 จากนั้นให้ทดลองรันเพจ จะได้ผลดังนี้

image

 

2.การเรียงข้อมูลก่อนแสดงผล

เราจะเรียงข้อมูล Student จาก LastName  สามารถทำได้ดังนี้

 

2.1 ที่เพจ Student.aspx เดิมนี้ให้คลิกที่ entity datasource control ไปที่หน้าต่าง properties แล้วดูที่คุณสมบัติ OrderBy แล้วกรอกตามนี้

image

 

2.2 รันเพจจะได้ผลตามนี้

image

 

3. การใช้คอนโทรลร่วมกันเพื่อการค้นหาข้อมูล

การค้นหาข้อมุลแบบนี้เรียกว่าใช้ control parameter เพื่อส่งค่าแล้วนำไปค้นหาด้วยคุณสมบัติ Where

 

3.1 ให้เปิดเพจ Course.aspx แล้วคลิกที่คอนโทรล CourseEntityDataSource แล้วดูที่หน้าต่าง properties แล้วคลิกที่จุด …  ในช่อง Where

image

 

3.2 เมื่อปรากฏหน้าต่าง Expression ให้คลิกเพื่อเลือกที่ช่อง Auto gen the where expression…

image

 

3.3 แล้วคลิกปุ่ม Add Parameter ที่ช่อง Name พิมพ์ฟิล์ดที่เราต้องการนำค่าไปเปรียบเทียบคือ DepartmentID

image

 

3.4 ที่ช่อง Parameter Source ให้เลือก Control จากนั้นที่ช่อง ControlID ให้เลือกเป็นชื่อของ dropdownlist คือ dropDepartment

image

 

3.5 คลิกที่ Show advance.. จะปรากฏคุณสมบัติเพิ่มเติมให้มองหา Type แล้วเปลี่ยนให้เป็น Int32 แล้วคลิก OK เพื่อปิดหน้าต่างการกำหนดค่า

image

 

3.6 จากนั้นให้แก้ไขคอนโทรล CourseGridView ในหน้า Source ดังนี้

<asp:GridView ID=”CoursesGridView” runat=”server” AutoGenerateColumns=”False”
DataKeyNames=”CourseID” DataSourceID=”CoursesEntityDataSource”>
<Columns>
<asp:BoundField DataField=”CourseID” HeaderText=”ID” ReadOnly=”True”
SortExpression=”CourseID” />
<asp:BoundField DataField=”Title” HeaderText=”Title” SortExpression=”Title” />
<asp:BoundField DataField=”Credits” HeaderText=”Credits”
SortExpression=”Credits” />
</Columns>
</asp:GridView>

 

สำหรับ Gridview นี้จะแสดงเพียง 3 คอลัมเท่านั้น คือรหัสวิชา ชื่อวิชา และหน่วยกิต

 

3.7 จากนั้นกลับไปดุที่คอนโทรล dropdownlist  ให้เรา Enable ที่ AutoPostBack โดยเปลี่ยนให้เป็น True เพื่อให้ส่งค่าทันทีที่เลือกข้อมูลจากคอนโทรลนี้

image

 

3.8 ทดลองรันเพจและเปลี่ยนสาขาวิชาจะพบว่าภายใน gridview มีการแสดงผลรายวิชาตามไปด้วย

image

image

 

4. การจัดกลุ่มข้อมูล

ระบบต้องการให้แสดงจำนวนนิสิตที่หน้า About.aspx  โดยจัดกลุ่มจากวันที่ Student ลงทะเบียน

 

4.1 ให้เปิดเพจ About.aspx แล้วแทนที่ข้อความเดิมด้วย

image

 

4.2 จากนั้นให้เพิ่ม entity datasource control ลงไป โดยมีเงื่อนไขดังนี้

  • เราจะกรองมาเฉพาะ Student เท่านั้น ดูที่ Where
  • เราจะจัดกลุ่มจากวันที่ลงทะเบียนเรียน ดูที่ GroupBy
  • เราจะจัดกลุ่มและนับจำนวน Student ดูที่ Select
  • เราจะจัดเรียนตามวันที่การลงทะเบียน ดูที่ OrderBy

เราจะโค้ดที่หน้า source ได้ดังนี้

image

 

4.3 จากนั้นลาก gridview มาวางในเพจและโค้ดตามดังนี้

image

 

4.4 จากนั้นลองรันเพจจะได้ผลดังนี้

image

 

5.การใช้ QueryExtender

 

ส่วนนี้เป็นการสาธิตการใช้คอนโทรล QueryExtender เพื่อช่วยการกรองข้อมูล จัดเรียงข้อมูลจาก eds อีกต่อหนึ่ง

 

5.1 กลับไปที่เพจ Course.aspx แล้วเพิ่มโค้ดเข้าไปส่วนท้ายดังนี้

image

 

เมื่อลองคลิก View จะได้ผลดังนี้

image

 

5.2 จากนั้นให้เพิ่มคอนโทรล QueryExtender ลงไป โดยระบให้ติดต่อกับคอนโทรล SearchEntityDataSource (บรรทัดที่ 49)

การค้นหาให้ค้นจากอักษรนำหน้า ในฟิลด์ Title (ดูบรรทัดที่ 51)

โดยรับค่าที่ป้อนจากคอนโทรลคือ SearchTextbox (บรรทัดที่ 52)

นอกจากนี้ยังจัดเรียงจากฟิลด์ชื่อสาขาวิชา และมีทิศทางจากน้อยไปมาก (56)

นอกจากนั้นยังเรียงตามชือวิชาอีกด้วย (57)

จากที่กลาวมานี่คือโค้ดใน source view

image

 

5.3 สุดท้ายให้เพิ่ม gridview ลงไป

image

จากโค้ดเราจะแสดงชื่อสาขาวิชา รหัสวิชา ชื่อวิชา หน่วยกิต

 

5.4 ให้ลองรันเพจนี้ดู

image

เมื่อไม่ได้ค้นหาวิชาอะไร

 

 

 

 

 

 

 

 

 

 

 

 

 

 

image

เมื่อลองพิมพ์ค่าเพื่อค้นหาลงไป

 

 

 

 

 

 

 

 

 

 

 

 

6. การใช้ Like เพื่อการค้นหาข้อมูล

ส่วนนี้จะสาธิตการใช้ LIkE เพื่อค้นห้าข้อมูล ซึ่งมีลักษณะคล้ายกับการใช้ QueryExtender คอนโทรลดังหัวข้อที่ 5

แต่สำหรับหัวข้อนี้เป็นการแสดงการค้นหาข้อมูลในอีกรูปแบบหนึ่ง ที่สามารถให้ผลการทำงานได้เหมือนกัน หากท่านถนัดแบบใดก็เลือกใช้ตามความต้องการ

สำหรับตอนนี้เราจะสาธิตการค้นหาจากชื่อ หรือสกุลของ Student

 

6.1 ให้เปิดเพจ Student.aspx และเพิ่มโค้ดนี้ลงไปต่อจากโค้ดเดิม

image

 

6.2 และเพิม eds ลงไปโดยให้ติดต่อกับ entity People และที่สำคัญจะต้องระบุเงื่อนไข Where เพื่อกรองคนที่มีวันลงทะเบียนเรียนเท่านั้น และใช้ operator การค้นหา % กับฟิลด์ชื่อ รวมทั้งนามสกุลด้วย

การใช้ % นำหน้าข้อความที่ต้องการค้นหา  หมายถึง จะมีอักษรนำหน้าอะไรก็ตามแต่ต้องมีข้อความที่เราระบุลงไป

และในทางกลับกันหากใชั้ % ตามหลังข้อความที่เราระบุ หมายถึง ค้นห้าอักษรที่มีคำตามเป็นอะไรก็ได้ แต่ต้องมีอักษรนำหน้าตามที่เราระบุ

สำหรับตัวอย่างนี้จะใช้ % ทั้งหน้าและหลังข้อความที่เราระบุ (บรรทัด 60)

image

 

6.3 จากนั้นสร้าง Gridview และระบุฟิลด์ที่ต้องการแสดงผลตามนี้

image

 

6.4 ทดลองรันเพจนี้

image

 

image

 

สำหรับบทที่ 3 จบเพียงเท่านี้ครับ หวัดดี

 

 

 

สาธิตการเพิ่มผู้เรียนลงในรายวิชา
วิดีโอสอนการใช้ระบบ LMS Moodle
วิทยาลัยนานาชาติ มหาวิทยาลัยนเรศวร
หน่วยเทคโนโลยีสารสนเทศ

 

สำหรับคลิปนี้เป็นเนื้อหาสำหรับผู้สอนที่ได้รับรายวิชาที่สอนแล้ว หากไม่มีสามารถติดต่อได้จากผู้ดูแลระบบ Moodle ครับ

 

หากภาพมีขนาดเล็กขอให้คลิกขยายเต็มจอครับ

 

บทความนี้สาธิตการพัฒนาระบบเว็บแอพพลิเคชั่น Contoso University ซึ่งผมได้ศึกษาจากเว็บไซท์ http://asp.net/

หากต้องการอ่านบทความต้นฉบับจะอยู่ที่

http://www.asp.net/entity-framework/tutorials/the-entity-framework-and-aspnet-–-getting-started-part-1

ผมได้ศึกษา และทดลองทำตามแล้วนำมาเล่าให้ท่านอ่านกันอีกครั้ง อรรถรสอาจมาก น้อยไปกราบขออภัยมา ณ โอกาสนี้ด้วยครับ

ในตอนที่ 2 เราจะสร้างเพจข้อมูลนักเรียน และจัดการข้อมูลนักเรียนก และเพจการแสดงรายวิชาของสาขาที่ระบุ

 

จุดประสงค์

สร้างเพจการจัดการข้อมูลนักเรียน และเพจการแสดงรายวิชา

image

 

ดำเนินการ

1.ให้เพิ่มเว็บฟอร์มใน Project ตั้งชื่อว่า Students.aspx และเลือกใช้ MasterPage แล้วคลิก Add

Image23

 

2. เลือก Master page  แล้วคลิกปุ่ม OK

Image24

 

3. เมื่อเพจ Student.aspx ได้ถูก Load ขึ้นมาให้ เพิ่ม Code ลงไปในหน้า html code ในบรรทัดที่ 8 – 9

image

 

4. หลังจากที่เราได้สร้าง EDM เอาไว้ในตอนที่ 1 เราจำเป็นต้อง Build Project ก่อนใช้งาน
ด้วยการคลิกขวาที่ชื่อ Project ใน Solution Explorer แล้วเลือก Build

image

 

5. คลิกที่ EntityDatasource เพื่อกำหนดค่า ด้วยการเลือก Configure Data Source

Image01

 

5. ระบุ Named Connection ชื่อ SchoolEntities และ ContainerName ดังตัวอย่าง แล้วคลิก Next

image

 

6. ที่ช่อง EntitySetname เลือก People และเลือกใช้ทุกฟิลด์ และให้ EDS สามารถแก้ไข และสามารถลบข้อมูลได้ แล้วคลิก Finish

image

 

7. เราต้องกำหนดค่าให้ database สามารถลบข้อมูลได้ เนื่องจาก ตาราง Person มี คสพ กับตารางอื่นๆ หากไม่กำหนดค่านี้จะเกิด Error เมื่อสั่งลบข้อมูล (!!! หมายเหตุ ให้เราสร้าง Database Diagram ที่ฐานข้อมูล School )

ให้คลิกที่หน้าต่าง Database Explorer  และคลิกสองครั้งที่ Diagram_0

image

 

8. VS 2010 จะเปิดหน้าต่างแสดง คสพ ของ  Database ขึ้นมา ให้คลิกขวาที่เส้น คสพ ของ Person และ StudentGrade

image

 

9. ที่หน้าต่าง Properties ทางด้านขวา ให้คลิกกำหนดค่า Delete เป็น Cascade

image

เสร็จแล้วให้บันทึก

 

10. การเปลี่ยนแปลงข้อมูลที่ระดับ Database เราต้องปรับปรุงข้อมูลที่ EDM ด้วย

ด้วยการคลิกขวาที่ Entity Data Model  แล้วเลือก Update Model from database

image

 

11.ที่หน้าการ refresh ให้คลิก Person แล้วคลิกปุ่ม Finish

image

 

12. เมื่อการปรับปรุง EDM เสร็จสิ้นแล้วให้สร้างเพจการแสดงรายชื่อผู้เรียน

ด้วยการลาก GridView วางในเพจ Students.aspx แล้วกำหนดค่าแหล่งข้อมูลให้เป็น EDS ที่ได้สร้างไว้ก่อนหน้า

 

Image06

ให้ Enable ตามตัวอย่างนี้

 

Image10

 

13.เลือก Field ที่ต้องการแสดงดังนี้

image

 

14.และเปลี่ยนทั้งสองฟิลด์ให้เป็น Template Field ด้วยการคลิกที่ Convert to template…. ทั้งสองฟิลด์

แล้วคลิกปุ่ม OK

 

15. ที่หน้าเพจ Source View ที่ Template FirstName ให้เปลี่ยน Code ดังนี้

image

อธิบาย ที่เทมเพลต Item ใช้เพื่อแสดงข้อมูล เราได้นำคอนโทรลลาเบลมาวางสองตัวและผูกกับข้อมูล LastName และ FirstName

ส่วนเทมเพลต Edititem ให้แสดงกล่องข้อความ FirstName , LastName เพื่อให้ป้อนข้อมูลใหม่ลงไป

 

16. การเพิ่มประสิทธิภาพของ EntityDatasource

ในเอกสารได้แนะนำให้เราลบ Attrubute Connection String และ DefaultContainerName แล้วเปลี่ยนไปใช้ ContextTypeName=”…” แทน มีข้อดีคือมีประสิทธิภาพสูงกว่าแบบเดิมเพราะเราชี้ไปยังแหล่งข้อมูลที่ต้องการทำงานด้วย โดยตรง

 

image

 

17. แล้วทดลองรันเพจนี้ด้วยการกด F5 จะได้ผลดังนี้

image

 

หากลองคลิกลิ้ง Edit จะแสดงหน้าการแก้ไขดังนี้

image

 

18.ต้องการเพิ่มคอลัมน์การแสดงรายวิชาที่ผู้เรียนได้เรียน ให้คลิกที่ EntityDatasource แล้วไปเพิ่ม Entity ชื่อ StudentGrade ลงไปที่คุณสมบัต Include

Image19

และแก้ไขที่ gridview ก่อนแล้วเพิ่ม Template Field ต่อท้ายลงไปดังนี้

image

 

แล้วทดลองรันเพจดูจะแสดงจำนวนรายวิชาออกมาดังนี้

image

 

19.จากนั้นเราจะมาสร้าง ฟอร์มกรอกข้อมูลนักเรียนกัน โดยการใช้ Detailview 

ก่อนอื่นให้เพิ่ม WebForm เข้าไปใน Project ตั้งชื่อว่า StudentAdd.aspx แล้วลากคอนโทรล DetailView ไปวางในฟอร์ม และลาก Entity Data control เข้ามาด้วย

และกำหนดค่าดังนี้

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2>Add New Students</h2>
    <asp:EntityDataSource ID="StudentsEntityDataSource" runat="server"
        ContextTypeName="ContosoUniversity.DAL.SchoolEntities" EnableFlattening="False"
        EnableInsert="True" EntitySetName="People">
    </asp:EntityDataSource>
    <asp:DetailsView ID="StudentsDetailsView" runat="server"
        DataSourceID="StudentsEntityDataSource" AutoGenerateRows="False"
        DefaultMode="Insert">
        <Fields>
            <asp:BoundField DataField="FirstMidName" HeaderText="First Name"
                SortExpression="FirstMidName" />
            <asp:BoundField DataField="LastName" HeaderText="Last Name"
                SortExpression="LastName" />
            <asp:BoundField DataField="EnrollmentDate" HeaderText="Enrollment Date"
                SortExpression="EnrollmentDate" />
             <asp:CommandField ShowInsertButton="True" />
       </Fields>
    </asp:DetailsView>
</asp:Content>

 

จาก Tag ข้างต้น ที่ EDS เป็นการรุะบุแหล่งข้อมูลที่ใช้งาน นั้นคือ person และ tag Detailview ใช้เชื่อมต่อกับ EDS ที่ได้สร้างไว้แล้ว โดยระบุ attrib ว่าไม่ต้องสร้างแถวให้ เพราะเราจะสร้างเองในแท็ก Field  ภายใน tag field จะประกอบไปด้วย 3 แถวคือชื่อ สกุล วันที่ลงเรียน และแถวสุดท้ายเป็นปุ่มแทรกข้อมูล

เมื่อโค้ดแล้วให้ลองรันเพจดู แล้วทดสอบโค้ดดูนะครับ

image

 

20. ต่อไปเราจะสร้างเพจการแสดงงรายวิชาจากสาขาวิชา

ให้เราสร้างเพจขึ้นใหม่ชื่อว่า Courses.aspx แล้วลากคอนโทรล EntityDatasouce และ Dropdownlist ลงไป และระบุโค้ดลงใน source view ดังนี้

image

จะเห็นว่าที่ EDS ระบุุให้เชื่อมต่อไปยัง Departments

และที่ Dropdownlist ให้เรียกใช้ EDS และเรียกฟิลด Name ออกไปแสดง และให้ Value เป็นค่า ID ของ Department ทดลองรันเพจนี้จะได้ดังนี้

image

 

สำหรับบทที่ 2 ตัดจบเพียงเท่านี้ก่อนนะครับ

Happy Coding Smile

 

บทความนี้สาธิตการพัฒนาระบบเว็บแอพพลิเคชั่น Contoso University ซึ่งผมได้ศึกษาจากเว็บไซท์ http://asp.net/

หากต้องการอ่านบทความต้นฉบับจะอยู่ที่

http://www.asp.net/entity-framework/tutorials/the-entity-framework-and-aspnet-–-getting-started-part-1

ผมได้ศึกษา และทดลองทำตามแล้วนำมาเล่าให้ท่านอ่านกันอีกครั้ง อรรถรสอาจมาก น้อยไปกราบขออภัยมา ณ โอกาสนี้ด้วยครับ

สำหรับตอนแรกนี้ เป็นการกล่าวเรื่องทั่วไปของระบบที่เราจะได้ทดลองทำกัน

 

จุดประสงค์

พัฒนาระบบเว็บแอพพลิเคชั่น เพื่อสนับสนุนการบริหารจัดการมหาวิทยาลัย Contoso

ผู้ใช้ระบบสามารถจัดการกับข้อมูลนักเรียน วิชา ผู้สอน ได้

แสดงภาพตัวอย่างดังนี้ครับ

 

image

 

สิ่งที่ต้องเตรียม

 

1. image
Microsoft Visual Studio Express 2010 หรือเป็นรุ่นที่สูงกว่านี้ ต้องการคลิกที่นี่

 

2. image
ระบบจัดการฐานข้อมูล Microsoft SQL Server 2008  Express หรือรุ่นที่สูงกว่า

 

3. ให้ดาวโหลดตัวอย่างระบบฐานข้อมูลจากที่นี่ ส่วนวิธีการติดตั้งขอให้อ่านจากเว็บที่ให้ดาวน์โหลดเอาเอง

 

4. บทความนี้ใช้ภาษา C# และ LINQ ในการพัฒนา

 

วัตถุุประสงค์

เราจะสร้าง Webapp และสร้าง Emtity DataModel จากฐานข้อมูลที่มี

 

ดำเนินการ

1.เมื่อได้สร้างฐานข้อมูลเสร็จแล้ว ให้สร้าง Web App ขึ้นมา ตั้งชื่อว่า ContosoUniversity

image

 

2.ที่ Solution Explorer ทางขวาให้เปิด Site.Master ขึ้นมาแก้ไขชื่อเว็บ

image

 

เปิด Site.Master ที่ไฮไลท์ไว้

 

 

 

 

 

 

 

 

 

แล้วเปลี่ยนข้อความที่ด้านบนจาก

image ให้เป็น

 

image

 

3. แก้ไขแท้ก <asp:Menu.. ด้วยการก้อบโค้ดนี้ลงไปแทนที่เดิม

image

 

4. แก้ไข default.aspx ด้วยการเพิ่มข้อความ Welcome to Contoso… ดังนี้

image

 

5. กำหนดค่าการติดต่อกับฐานข้อมูล โดยการเปิด Server Explorer คลิกที่ไอคอน image แล้วติดต่อกับฐานข้อมูลที่ได้สร้างเอาไว้แล้ว เมื่อการเชื่อมต่อกับฐานข้อมูลเสร็จแล้วจะได้ผลดังนี้

image

 

6. จากนั้นเราจะสร้าง Entity Data Model ด้วยการสร้างโฟลเดอร์ขึ้นมาตั้งชื่อว่า DAL แล้วคลิกขวาเลือก Add //New Item

image

ตั้งชื่อโมเดลว่า SchoolModel แล้วคลิกปุ่ม Add

image

 

หากปรากฏหน้าต่างนี้ให้เลือก No

image

 

ให้คลิก Generate from database แล้วคลิก Next

image

 

หน้าการเชื่อมต่อข้อมูลให้เลือก School ตัวเลือกด้านล่างให้เลือกตามนี้ และคลิก Next

image

 

ที่หน้า database object ให้เลือกตารางทุกอันยกเว้น sysdiagram และตัวเลือกอื่นๆตามนี้ แล้วคลิก Finish

image

 

เมื่อการสร้าง Data model เสร็จแล้วจะปรากฏดังนี้

image

 

7.อธิบาย Data Model

จากเอกสารต้นฉบับ มีการอธิบายองค์ประกอบของความสัมพันธ์ของ EDM เอาไว้โดยสรุปดังนี้

อธิบาย คสพ แบบ 1 ต่อ 0 หรือ 1

image

 

 

Entity person จะมี คสพ กับ Entity OfficeAssignment กันแบบ 1 : 0..1

 

หมายถึงบุคคลใดๆ ในระบบอาจจะไม่มี หรือมีอย่างมากเพียง 1 ชุดข้อมูลทีเกี่ยวข้องกับห้องทำงาน

สำหรับระบบนี้ออกแบบให้อาจารย์ผู้สอนแต่ละคนหรือบางคนมีห้องทำงานเป็นของตนเอง

 

 

 

 

 

 

 

 

 

อธิบาย คสพ แบบ 1 ต่อ หลากหลาย

 

 

imageEntity StudentGrade จะมี คสพ กับ Person แบบ 1 ต่อ *

หมายถึงบุคคลในระบบสามารถมีเกรดหรือผลการศึกษา ได้หลายตัว เพราะเรียนหลายวิชา  ซึ่งในระบบนี้ออกแบบให้นักเรียนเท่านั้นที่มีผลการศึกษา

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

อธิบาย คสพ แบบ หลาก ต่อ หลากหลาย

 

image

 

สำหรับ คสพ แบบนี้ อาจดูสับสนสักหน่อย พูดให้ง่ายขึ้นคือ ผู้สอนสอนได้หลายวิชา และแต่ละวิชาก็สามารถสอนได้โดยผู้สอนหลายๆคน สำหรับระบบนี้ได้ระบุว่าเฉพาะผู้สอนเท่านั้นที่มี คสพ กับรายวิชา

 

อธิบาย Navigation Properties

ที่แต่ละ Entities จะมี Navigation เพื่อชี้ไปยัง Entity อื่นๆที่มีความเกี่ยวข้องกับ Entity นั้นๆ

 

image

 

ดังภาพนี้ เห็นได้ว่า Entity Person มีการเชื่อมโยงไปหา CourseGrade, OfficeAssignment, Course.. เป็นต้น

 

นอกจากนี้ คสพ แบบหลากหลาย ต่อ หลากหลาย จะไม่มีการสร้าง Entity ขึ้นแบบใช้ Key ร่วมกันแบบในฐานข้อมูล แต่ใช้ Navigation Properties ระบุ คสพ ลงไป

 

8.อธิบายการแก้ไขชื่อใน Entity

 

เราสามารถแก้ไข Field ใน Entity ได้ ในตย นี้จะเปลี่ยนชื่อ Person.FirstName ให้เป็น FirstMidName ด้วยการคลิกขวาที่ FirstName แล้วเลือก Rename

image

 

แล้วป้อน FirstMidName ลงไป จะได้ผลดังนี้

 

image

 

 

9.อธิบายการใช้ Model Browser

Model Browser เป็นเครื่องมือที่ใช้เข้าถึงโครงสร้างข้อมูล

หากแถบเครื่องมือของเราไม่มี Model Browser ปรากฏขึ้นมา ให้คลิกขวาภายใน EDM แล้วเลือก Model Browser

image

 

ที่แถบเครื่องมือทางขวา จะปรากฏ Model Browser ขึ้นมา

ภายใน จะมี

image

  • School Model ซึ่งใช้แสดงโครงสร้างของDataModel
  • SchoolModel.Store ใช้แสดงโครงสร้างของฐานข้อมูล

 

ลองคลิกที่ SchoolModel เลือก Entity Type เลือก person แล้วคลิกขวาที่ FirstMidName เลือก Table Mapping

image

 

จะเห็นการเชื่อมโยงกันระหว่าง Entity Data Model กับ Database ถึงแม้ชื่อฟิลด์ใน EDM จะเปลี่ยนเป็น FirstMidName แล้ว แต่ใน Database ก็ยังคงเป็น FirstName เช่นเดิม

 

image

 

ส่วนรายละเอียดภายใน EDM ที่จริงเป็น XML ทั้งหมดเราสามารถแกะดูได้ โดยคลิกขวาที่ SchoolModel.edmx แล้วเลือก XML Text Editor จะได้ผลแบบนี้

image

 

สำหรับบทที่ 1 ขอจบเพียงเท่านี้ครับ

ต่อจากบทความที่แล้ว เราได้สร้าง Database , Entity Data Model และในบทความนี้จะสร้างเพจการเรียกข้อมูล Employee ออกมาแสดง โดยผ่าน Control TreeView กันต่อไป

การดำเนินงาน (ต่อจากตอนที่แล้ว)

1. เรียกเพจ Default.aspx จาก Solution Explorer ด้วยการคลิกสองครั้ง

image

2.ให้ลบข้อความที่ส่วนที่เลือกเอาไว้ทิ้ง

image

3.

imageแล้วลาก Treeview control มาจาก ToolBox ทางด้านซ้าย ไปวางบนเพจที่ว่าง

imageจะได้ผลดังนี้

4. ที่ source View ให้ระบุ Code ดังนี้

image

5.ให้คลิกสองครั้งที่ WebForm ของ Default.aspx นี้ จะปรากฏหน้าต่างการเขียน  Code ขึ้นมา (หากไม่ปรากฏให้กดปุ่ม F7 แทนก็ได้ )

image

6. จากนั้นให้ using Entity Data Model โดยเขียนเพิ่มไปที่ส่วนต้นของ Code
เมื่อเพจเริ่มโหลดขึ้น เราต้องการให้ค้นหาข้อมูลของประธานของบริษัท ซึ่งหมายถึง Employee ที่มี Field ชื่อ ReportsTo มีค่าเท่ากับ Null

ให้เพิ่มโค้ดลงไปดังนี้

image

ที่บรรทัดที่ 7 ให้เพิ่มการเรียกใช้ EDM

#13 ประกาศตัวแปรเชื่อมต่อกับ EDM

# 15-21 ที่เหตุการณ์ Page_Load จะทำการตรวจสอบว่าเพจถูกรันขึ้นมาครั้งแรก หากใช่ก็จะไปทำงานที่ Function การค้นหา Employee ที่เป็นประธานบริษัท

#23-30 Function เข้าถึงประธานบริษัท
ผมใช้ LINQ เพื่อการเรียกข้อมูล โดยเรียกจาก Entity.Employee และกำหนดเงื่อนไขว่าจะต้องเป็นประธานบริษัทเท่านั้น

#29 โยนค่าข้อมูลของประธานบริษัทไปยัง Function ที่เราจะสร้างขึ้นชื่อว่าAccessNodes

7. ให้เพิ่ม Function ลงไปดังนี้

image

จากโค้ดเป็น Function เพื่อการวนลูปเรียกค่าเพื่อแสดงใน Treeview Control

#34 – 52 เป็นการประกาศลูปเพื่อการเข้าถึง Collection และนำค่าไปใช้ภายในบล็อคโค้ด

#36 ประกาศตัวแปรให้เป็นโหนดย่อยของ TreeView

#38 นำชื่อและสกุลไปแสดงเป็นข้อความของโหนดย่อย

#39 นำ Id ของพนง. ไปใช้เป็นค่าอ้างอิงในโหนดย่อย

#40 เพิ่มค่าโหนดที่ได้จากขั้นตอนที่ผ่านมาเข้าสู่ Treeview Control

#42 นับจำนวนโหนดลูกของ Id ที่กำลังทำงานอยู่นี้ (ส่วนนี้ผมใช้ LINQ เพื่อการค้นหาและส่งข้อมูลออกมาให้นับจำนวน)

#44-51 ผมได้ตรวจสอบเงือ่นไขว่ามีโหนดลูกของ พนง คนที่กำลังทำงานในลูปรอบนี้หรือไม่ หากมีก็ให้กำหนดค่าคุณสมบัติ populateondemand กับ Treeview เป็นจริง หากไม่มีก็ไม่เซ็ทค่านี้

8. เราต้องการให้คลิกที่ลิ้งของ control และแสดงแยกย่อยรายชื่อ พนง ที่เป็นลูกน้องออกมา เราจะต้องเพิ่ม Function เข้าไปนั่นคือ…

image

ผมใช้ LINQ ช่วยการเรียกข้อมูลของพนงที่ขึ้นตรงกับ Id ของพนงที่ได้ระบุเข้ามา แล้วโยนค่ากลับไปให้ Function AccessNodes เพื่อวนลูปและแสดงผลอีกครั้ง

9. และสุดท้ายสำหรับเหตุการของคอนโทรล Treeview ให้กลับไปที่หน้า Design แล้วคลิกที่คอนโทรล Treeview แล้วดูที่หน้าต่าง properties ทางด้านขวา ให้คลิกที่ปุ่ม Event ที่แสดงเป็นรูปสายฟ้า

image

image

แล้วให้คลิกสองครั้งที่เหตุการณ์ชื่อ TreeNodePupulate

จะปรากฏหน้า code behind อีกครั้งพร้อมกับ event ที่ vs ได้สร้างให้เรา ให้เพิ่มโค้ดลงไปดังนี้

image

เมื่อมีการคลิกที่ลิ้งของคอนโทรลจะมีการส่งค่า id ของโหนดที่ได้คลิกลงไปใน Function AccessNodesSub

เมื่อเสร็จสิ้นพิธีกรรมกันแล้ว ให้กด F5 บนคีย์บอร์ดเพื่อทดลองรันกันครับ

ทดสอบ ๆ 123

image

เมื่อรันขึ้นมาครั้งแรกปรากฏชื่อประธานบริษัท เมื่อคลิกที่เครื่องหมาย + ด้านหน้าจะแสดงผลดังนี้

image

สุดท้ายนี้..

ผมขอขอบคุณ Internet ที่ช่วยให้ผมเข้าถึงแหล่งข้อมูลดีๆ สำหรับบทความนี้ผมประยุกตร์มาจากคุณ

Teemu Keiski

ซึ่งได้เขียนไว้ที่… http://aspalliance.com/732

แต่เนื้อหาที่เค้าเขียนเป็นการใช้ ADO.net นะครับ ส่วนบทความที่ผมเขียนนี้ใช้ LINQ

Happy coding !! Open-mouthed smile

By Kwanchai !!!

การนำข้อมูลมาแสดงผลแบบลำดับชั้นหรือภาษาอังกฤษใช้คำว่า Hierarchy โดยข้อมูลที่มีในฐานนั้น อาจดูยุ่งยากวุ่นวาย แต่ไม่ยากจนเกินไปนักเมื่อทีมพัฒนา ASP.Net ได้ออกคอนโทรล TreeView เพื่อช่วยนำเสนอการแสดงผลดังกล่าว

สิ่งที่ต้องเตรียม

1. เครื่องมือพัฒนา MS Visual Studio 2010 สำหรับตัวอย่างนี้ผมใช้รุ่น Express

2.ระบบฐานข้อมูล MS SQLServer 2008 Express

3.ฐานข้อมูล Northwind หากไม่มีให้โหลดจาก www.codeplex.com

จุดประสงค์

เราจะแสดงผลข้อมูลของลูกจ้างในบริษัท โดยที่แสดงชื่อของพนักงานที่เป็นหัวหน้างาน และสามารถแสดลงรายชื่อของลูกน้องที่ดูแล โดยใช้ Control TreeView

image

ดำเนินการ

1.สร้าง WebSite ขึ้นใหม่ คลิกเลือกที่ Visual C# เลือก ASP.Net Web Site และตั้งชื่อว่า TreeView_CS แล้วคลิก OK

image

 

2.จากนั้นเชื่อมต่อไปยัง Database Northwind ด้วยการคลิกที่ Database Explorer

image

 

3. คลิกที่ปุ่ม Connect to database

image

 

4.ระบุชื่อเครื่อง db server ในบทความนี้ผมใช้เครื่องเดียวกันนี้เป็น db server และใส่เพียง . เท่านั้น ส่วน database เลือก Northwind แล้วคลิก OK

image

 

5.เมื่อการเชื่อมต่อเสร็จสิ้น จะปรากฏตารางและวิวดังนี้

image

 

6.สร้าง Entity Data Model โดยการคลิกที่เมนู Website แล้วเลือก Addn new item

image

 

7.

image

เลือก ADO.NET Entity Data Model

 

image

ตั้งชื่อ DataModel ดังนี้

แล้วคลิก Add

 

 

8. เมื่อคลิก Add แล้ว จะปรากฏกล่องข้อความดังนี้

image 

นั่นคือ EDM ที่ได้สร้างขึ้นจะถูกนำไปเก็บที่ Folder App_Code ให้ตอบ Yes

 

9.image

จากนั้นเราจะสร้าง DataModel กัน เมื่อปรากฏหน้าต่างนี้ขึ้นให้เลือก Generate From Database แล้วคลิก Next

 

 

 

 

 

 

10. image

หน้าต่างการเชื่อมต่อกับฐานข้อมูล ให้เลือกการเชื่อมต่อกับ Northwind ตามที่ได้สร้างไว้แล้ว

 

และคลิกเลือกที่ Save Entity connection ลงใน Web.config

แล้วคลิก Next

 

 

11.

image

สำหรับบทความนี้ต้องการเพียงตาราง Employees เท่านั้น

และให้คลิกเลือก Pluralize …

แล้วคลิก Finish

 

 

 

 

12. รอสักครู่การสร้าง EDM จะเสร็จสิ้นและได้ผลดังนี้

image

 

เสร็จสิ้นการจัดเตรียมสภาพแวดล้อมการพัฒนาแล้วครับ ต่อไปเราจะเริ่มลงมือพัฒนากันจริงๆ ซะที ทั้งนี้ผมขอเอาไว้บทความถัดไปดีกว่า เพื่อไม่ให้ยาวเกินไป

ขอขอบคุณทุกท่านที่เข้ามาอ่าน และจะขอบคุณมากหากบอกเล่าให้ผมรู้บ้างว่าสิ่งที่ผมทำไปนี้เป็นประโยชน์กับผู้อ่านมากเพียงใด

 

เจอกันใหม่บทความหน้าครับ