โครงงานซอฟต์แวร์ระบบจัดการนักเรียน PNTC MS C# @เทคนิคพังงา

ssuser5ffe871 86 views 76 slides Nov 08, 2024
Slide 1
Slide 1 of 76
Slide 1
1
Slide 2
2
Slide 3
3
Slide 4
4
Slide 5
5
Slide 6
6
Slide 7
7
Slide 8
8
Slide 9
9
Slide 10
10
Slide 11
11
Slide 12
12
Slide 13
13
Slide 14
14
Slide 15
15
Slide 16
16
Slide 17
17
Slide 18
18
Slide 19
19
Slide 20
20
Slide 21
21
Slide 22
22
Slide 23
23
Slide 24
24
Slide 25
25
Slide 26
26
Slide 27
27
Slide 28
28
Slide 29
29
Slide 30
30
Slide 31
31
Slide 32
32
Slide 33
33
Slide 34
34
Slide 35
35
Slide 36
36
Slide 37
37
Slide 38
38
Slide 39
39
Slide 40
40
Slide 41
41
Slide 42
42
Slide 43
43
Slide 44
44
Slide 45
45
Slide 46
46
Slide 47
47
Slide 48
48
Slide 49
49
Slide 50
50
Slide 51
51
Slide 52
52
Slide 53
53
Slide 54
54
Slide 55
55
Slide 56
56
Slide 57
57
Slide 58
58
Slide 59
59
Slide 60
60
Slide 61
61
Slide 62
62
Slide 63
63
Slide 64
64
Slide 65
65
Slide 66
66
Slide 67
67
Slide 68
68
Slide 69
69
Slide 70
70
Slide 71
71
Slide 72
72
Slide 73
73
Slide 74
74
Slide 75
75
Slide 76
76

About This Presentation

จัดทำโดย
นาย นาวิน จันทรถ
นายวงศธร พุทธรักษา
นักศึกษา ปวช.3 แผนกเทคโนโลยีสารสนเทศ ปีการศึกษา 2566
ที่ปรึกษาโคร�...


Slide Content

1


ระบบจัดการนักเรียน PNTC MS


โดย
นายนาวิน จันทรถ 64209010008
นายวงศธร พุทธรักษา 64209010014


เสนอ
อาจารย์นันทวัฒน์ ธรรมวราภรณ์


โครงงานนี้เป็นส่วนหนึ่งของการศึกษาตามหลักสูตรประกาศนียบัตรวิชาชีพ
รายงานนี้เป็นส่วนหนึ่งของรายวิชาโครงงาน 20901-8501
ประเภทสาขาวิชาเทคโนโลยีสารสนเทศ
วิทยาลัยเทคนิคพังงา
ภาคเรียนที่ 2 ปีการศึกษา 2566

2

หัวข้อโครงงาน ซอฟต์แวร์โปรแกรม PNTC MS
นักศึกษา 64209010008 นายนาวิน จันทรถ
64209010014 นายวงศธร พุทธรักษา
สาขาวิชา เทคโนโลยีสารสนเทศ หลักสูตรประกาศนียบัตรวิชาชีพ (ปวช)
ปีการศึกษา 2/2566
อาจารย์ผู้ควบคุม นานนันทวัฒน์ ธรรมวราภรณ์

บทคัดย่อ
โครงงานนี้เป็นการนำเสนอ ระบบ PNTC MS ซึ่งเป็นซอฟต์แวร์เสรี (Open source)
เพื่อไว้สำหรับจัดการฐานข้อมูลนักเรียนของสถานศึกษา โดยคณะผู้จัดทำพัฒนาระบบด้วยโปรแกรม
Visual Studio Code ในการพัฒนาระบบ ออกแบบระบบ และบันทึกข้อมูลด้วยโปรแกรม
phpMyAdmin ผลที่ได้จากการพัฒนาคือ สามารถช่วยให้สถานศึกษาต่าง ๆ ที่ไม่มีงบประมาณเพียงพอใน
การจัดหาระบบจัดการสถานศึกษา สามารถเข้าถึงระบบนี้ได้อย่างทั่วถึง ทำให้ระบบงาน ในสถานศึกษา
สามารถมีจัดการข้อมูลที่มีประสิทธิภาพได้ และทำให้เราได้เรียนรู้ที่จะนำเทคโนโลยีมาช่วยให้ระบบงานที่ดี
ยิ่งขึ้น

3

คำนำ
รายงานนี้เป็นส่วนหนึ่งของการศึกษารายวิชาโครงงาน 20901-8501 ซึ่งทางผู้จัดทำมีการ
วิเคราะห์และออกแบบระบบสารสนเทศ โดยได้กล่าวถึงที่มาของปัญหาระบบเดิม และการแก้ปัญหาด้วย
การพัฒนาระบบสารสนเทศของระบบงาน โครงงาน PNTC MS
ระบบ PNTC MS จัดทำโดยคำนึงถึงความทันสมัยของยุคสมัยปัจจุบัน ซึ่งปัจจุบันนั้นมี
อินเตอร์เน็ตใช้กันแพร่หลาย ทำให้ประชาชนส่วนหนึ่งเข้าใช้อินเตอร์เน็ตกันอยู่บ่อย คณะผู้จัดทำโครงงาน
จึงได้จัดทำโครงการโปรแกรม PNTC MS ขึ้นมาเพื่อให้เป็นทางเลือกสำหรับทุกคนที่ต้องการ



คณะผู้จัดทำ

4

สารบัญ
เรื่อง หน้า
บทคัดย่อ ก
คำนำ ข
สารบัญ ค
สารบัญ (ต่อ) ง
สารบัญรูป จ
สารบัญรูป (ต่อ) ฉ
สารบัญรูป (ต่อ) ช
สารบัญรูป (ต่อ) ซ
สารบัญตาราง ณ
บทที่
1. บทที่ 1
1.1 ความเป็นมาและความสำคัญของโครงงาน 1
1.2 วัตถุประสงค์ของโครงงาน 2
1.3 ขอบเขตของโครงงาน 2
1.4 เครื่องมือที่เกี่ยวข้องกับโครงงาน 3
1.5 ตารางการดำเนินโครงงาน 3
1.6 ประโยชน์ที่คาดว่าจะได้รับ 4

2. ทฤษฎีและงานที่เกี่ยวข้อง
2.1 การวิเคราะห์และออกแบบระบบ 5
2.2 การออกแบบส่วนประสานกับผู้ใช้ 6
2.3 ทฤษฎีที่เกี่ยวข้อง 7-27
2.4 งานวิจัยที่เกี่ยวข้อง 28-29

5

สารบัญ (ต่อ)
เรื่อง หน้า
3. การออกแบบระบบ
วิเคราะห์ระบบทางด้านการไหลของข้อมูล 30
3.1 การออกแบบแผนภาพบริบท (Context Diagram) 30
3.2 แผนภาพการไหลของข้อมูล (Data Flow Diagram) 31
3.2.1 Data Flow Diagram Level 1 31
3.2.2 Data Flow Diagram Level 1 process 1 32
3.2.3 Data Flow Diagram Level 1 process 2 33
3.2.4 Data Flow Diagram Level 1 process 3 34
3.2.5 Data Flow Diagram Level 1 process 4 34
3.2.5 Data Flow Diagram Level 1 process 5 35
3.3 Data Dictionary ระบบ PNTC MS 36-40
3.4 ER Diagram 41
4. การทำงานของระบบ
4.1 ส่วนของผู้ดูแลระบบ 42-50
4.2 ส่วนของผู้ใช้งาน 51-59
5. การสรุปผลการพัฒนาโครงงงาน ปัญหา และข้อเสนอแนะ
5.1 สรุปผลการทำงาน 60
5.2 ข้อเสนอแนะ 61
บรรณานุกรม
ภาคผนวก ก
ภาคผนวก ข

6

สารบัญรูป
เรื่อง หน้า
รูปที่ 2.1 วิธีการติดตั้งโปรแกรม Visual Studio 2022 7
รูปที่ 2.2 หน้าสถานการณ์ดาวน์โหลดไฟล์โปรแกรม 8
รูปที่ 2.3 หน้าต่างสถานะการดาวน์โหลด 8
รูปที่ 2.4 เมนูการติดตั้งแพ็คแกจโปรแกรม 8
รูปที่ 2.5 สถานะการติดตั้งโปรแกรม 9
รูปที่ 2.6 หน้าต่าง Login 9
รูปที่ 2.7 หน้าต่างธีมของโปรแกรม 10
รูปที่ 2.8 หน้าแรกของการเข้าโปรแกรม 10
รูปที่ 2.9 หน้าต่างการเลือกภาษาที่ใช้ในการพัฒนา 10
รูปที่ 2.10 แสดงองค์ประกอบของโปรแกรม VS Studio 2022 11
รูปที่ 2.11 ตัวอย่างหน้าการออกแบบแอพพลิเคชั่น 12
รูปที่ 2.12 หน้าเว็บไซต์ Adobe Creative cloud 12
รูปที่ 2.13 หน้าต่างรอการติดตั้งโปรแกรม Adobe Creative cloud 13
รูปที่ 2.14 หน้าต่างการเข้าสู่ระบบ Adobe 13
รูปที่ 2.15 หน้าต่างหลัก Adobe 14
รูปที่ 2.16 หน้าเนื้อหาข้างใน Adobe 14
รูปที่ 2.17 หน้าต่างการติดตั้งโปรแกรม Adobe xd 15
รูปที่ 2.18 ตัวอย่างโปรแกรม VS COD 15
รูปที่ 2.19 หน้าเว็บไซต์ดาวโหลดโปรแกรม VS CODE 16
รูปที่ 2.20 หน้าต่างแสดงข้อกำหนดเงื่อนไข 16
รูปที่ 2.21 หน้าต่างการเลือกพื้นที่ในการติดตั้งโปรแกรม 17
รูปที่ 2.22 หน้าต่างการตั้งค่าในการติดตั้งโปรแกรม 17
รูปที่ 2.23 หน้าต่างแสดงการติดตั้ง 18
รูปที่ 2.24 หน้าต่างแสดงสถานการณ์ติดตั้ง 18
รูปที่ 2.25 หน้าต่างแสดงเมื่อการติดตั้งเสร็จสมบูรณ์ 19

7

สารบัญรูป (ต่อ)
เรื่อง หน้า
รูปที่ 2.26 เมนูการดาวน์โหลดตามOS 20
รูปที่ 2.27 ไฟล์โปรแกรมที่ได้ดาวนืโหลด 20
รูปที่ 2.28 หน้าต่างแรกของการติดตั้ง 20
รูปที่ 2.29 หน้าต่างการตั้งค่าในการติดตั้ง 21
รูปที่ 2.30 หน้าต่างเมื่อเสร็จสิ้นขั้นตอนการติดตั้ง 21
รูปที่ 2.31 ตัวอย่างไอคอนโปรแกรม Word 22
รูปที่ 2.32 หน้าต่างช่องค้นหาโปรแกรม 22
รูปที่ 2.33 ตัวอย่างโปรแกรมทั้งสามที่แสดง 23
รูปที่ 2.34 หน้าต่างการสั่งซื้อโปรแกรม Word 23
รูปที่ 2.35 หน้าต่างแสดงสถานะการดาวน์โหลดโปรแกรม 23
รูปที่ 2.36 หน้าต่างการดาวน์โหลดเสร็จสิ้น 24
รูปที่ 2.37 หน้าการตัดต่อของโปรแกรม Photoshop 24
รูปที่ 2.38 หน้าเว็บไซต์ Adobe Creative cloud 25
รูปที่ 2.39 หน้าต่างรอการติดตั้งโปรแกรม Adobe Creative cloud 25
รูปที่ 2.40 หน้าต่างรอการติดตั้งโปรแกรม Adobe Creative cloud 25
รูปที่ 2.41 หน้าต่างหลักระบบ Adobe 26
รูปที่ 2.42 หน้าต่างการเลือกโปรแกรม 26
รูปที่ 2.43 หน้าต่างการติดตั้งโปรแกรม Adobe xd 26
รูปที่ 2.44 โครงสร้างแสดงกรอบงานของ .NET Framework 27
รูปที่ 2.45 ตัวอย่างหน้าต่างโปรแกรม Mysql 28
รูปที่ 2.46 ตัวอย่างการจัดการฐานข้อมูล 29

8

สารบัญรูป (ต่อ)
เรื่อง หน้า
รูปที่ 3.1 แสดงแผนภาพกระแสข้อมูลระดับสูง (Context Diagram) 32
รูปที่ 3.2 แสดงแผนภาพการไหลของข้อมูล Data Flow Diagram Level 1 33
รูปที่ 3.3 แผนภาพกระแสข้อมูล Data Flow Diagram Level 1 Process 1 34
รูปที่ 3.4 แผนภาพกระแสข้อมูล Data Flow Diagram Level 1 Process 2 35
รูปที่ 3.5 แผนภาพกระแสข้อมูล Data Flow Diagram Level 1 Process 3 36
รูปที่ 3.6 แผนภาพกระแสข้อมูล Data Flow Diagram Level 1 Process 4 36
รูปที่ 3.6 แผนภาพกระแสข้อมูล Data Flow Diagram Level 1 Process 5 37
รูปที่ 4.1 แสดงหน้าจอการเข้าสู่ระบบในฐานะ “ผู้ดูแลระบบ” 44
รูปที่ 4.2 แสดงหน้าต่างเมื่อเข้าสู่ระบบสำเร็จ 45
รูปที่ 4.3 แสดงหน้าต่างเมื่อเข้าสู่ระบบสำเร็จไม่สำเร็จ 45
รูปที่ 4.4 หน้าจอหลักของโปรแกรม 46
รูปที่ 4.5 หน้าจอทะเบียนนักเรียนของผู้ดูแลระบบ 46
รูปที่ 4.6 หน้าจอการเพิ่มข้อมูลนักเรียน ส่วนที่ 1 47
รูปที่ 4.7 หน้าจอการเพิ่มข้อมูลนักเรียน ส่วนที่ 2 47
รูปที่ 4.8 หน้าจอแสดงข้อมูลนักเรียน 48
รูปที่ 4.9 หน้าต่างยืนยันการลบข้อมูล 48
รูปที่ 4.10 หน้าจอการปริ้นบัตรประจำตัวนักศึกษา 49
รูปที่ 4.11 หน้าจอฟอร์มให้กรอกรหัสประจำตัวนักเรียน 49
รูปที่ 4.12 หน้าจอแสดงผลการเรียน 50
รูปที่ 4.13 หน้าจอแสดงรายชื่อผู้ใช้งาน 50
รูปที่ 4.14 หน้าจอเพิ่มข้อมูลผู้ใช้งาน 51
รูปที่ 4.15 หน้าจอแก้ไขข้อมูลผู้ใช้งาน 51
รูปที่ 4.16 หน้าจอยืนยันซ้ำเพื่อลบผู้ใช้งาน 52
รูปที่ 4.17 หน้าจอยืนยันซ้ำเพื่อลบผู้ใช้งาน 52

9

สารบัญรูป (ต่อ)
เรื่อง หน้า
รูปที่ 4.18 หน้าจอกลับหน้าเข้าสู่ระบบ 52
รูปที่ 4.19 แสดงหน้าจอการเข้าสู่ระบบในฐานะ “ผู้ใช้งาน” 53
รูปที่ 4.20 แสดงหน้าต่างเมื่อเข้าสู่ระบบสำเร็จ 53
รูปที่ 4.21 แสดงหน้าต่างเมื่อเข้าสู่ระบบสำเร็จไม่สำเร็จ 54
รูปที่ 4.22 หน้าจอหลักของโปรแกรม 54
รูปที่ 4.23 หน้าจอทะเบียนนักเรียนของผู้ใช้งาน 55
รูปที่ 4.24 หน้าต่างแจ้งเตือน “ผู้ใช้งานไม่มีสิทธิ์เพิ่มข้อมูล” 55
รูปที่ 4.25 หน้าจอการเพิ่มข้อมูลนักเรียน ส่วนที่ 1 56
รูปที่ 4.26 หน้าจอการเพิ่มข้อมูลนักเรียน ส่วนที่ 2 56
รูปที่ 4.27 หน้าต่างแสดงผู้ใช้งานไม่มีสิทธิ์แก้ไขข้อมูล 57
รูปที่ 4.28 หน้าจอแก้ไขข้อมูลนักเรียน 57
รูปที่ 4.29 หน้าจอผู้ใช้งานไม่มีสิทธิ์ลบข้อมูล 58
รูปที่ 4.30 หน้าจอยืนยันการลบข้อมูล 58
รูปที่ 4.31 หน้าจอข้อมูลนักเรียน 59
รูปที่ 4.32 หน้าจอการปริ้นบัตรประจำตัวนักศึกษา 59
รูปที่ 4.33 หน้าจอฟอร์มให้กรอกรหัสประจำตัวนักเรียน 59
รูปที่ 4.34 หน้าจอแสดงผลการเรียน 60
รูปที่ 4.35 หน้าจอยืนยันซ้ำเพื่ออกจากระบบ 61
รูปที่ 4.36 หน้าจอกลับหน้าเข้าสู่ระบบ 61

10

สารบัญตาราง
เรื่อง หน้า
ตารางที่ 3.1 ตารางแฟ้มข้อมูลผู้ดูแลระบบ (db_Admin) 38
ตารางที่ 3.2 ตารางแฟ้มข้อมูลผู้ใช้งานระบบ (db_User) 38
ตารางที่ 3.3 ตารางสิทธิ์การใช้งาน (access_rights) 39
ตารางที่ 3.4 ตารางข้อมูลฐานทะเบียน (student_data) 40
ตารางที่ 3.5 ตารางข้อมูลผู้ปกครอง (guardians_student) 41
ตารางที่ 3.6 ตารางเก็บข้อมูลห้อง (classlevels) 41
ตารางที่ 3.7 ตารางสิทธิ์เก็บชื่อแผนก (department_class) 41
ตารางที่ 3.8 ตารางสาขาวิชา (program_class) 42
ตารางที่ 3.9 ข้อมูลผลการเรียน (grade_student) 42
ตารางที่ 3.10 ข้อมูลทางการศึกษา (education_student_data) 42

11

บรรณานุกรม
ธันยพัฒน์ วงศ์รัตน์. เรียนลัดสร้างเว็บแอพพลิเคชันด้วย PHP & MySQL ฉบับ Workshop.
กรุงเทพฯ : บริษัท สวัสดี ไอที จำกัด, 2554
ลิขิต ยืนบุญ. คู่มือการใช้งาน phpMyAdmin. [Online]. Available:
http://banchiangmai.com/download/phpMyAdmin.pdf, 2555.
ดุลยวัฒน์ มาป้อง. การใช้งานฟอร์มกับ PHP. [Online]. Available:
http://ict.moph.go.th/elearning/phpdwmx/DWMX_CH06_Form_and_PHP.htm, 2555.
ฝ่ายผลิตหนังสือตาราวิชาการคอมพิวเตอร์. การวิเคราะห์และออกแบบระบบ. กรุงเทพฯ : ซีเอ็ด
ยูเคชั่น, 2551
กิตติ ภักดีวัฒนะกุล, และจาลอง ครูอุตสาหะ. (2553). การออกแบบฐานข้อมูล Database
Design (พิมพ์ครั้งที่ 3).กรุงเทพมหานคร : ไทยเจริญการพิมพ์
คะชา ชาญศิลป์. คู่มือเรียน WEB Programming ด้วย PHP,MySQL และ AJAX กรุงเทพฯ :
โปรวิชั่น, 2553
ชาญชัย ศุภอรรถกร. สร้างเว็บแอพพลิเคชัน PHP+MySQL กรุงเทพฯ : รีไวว่า, 2555
พร้อมเลิศ หล่อวิจิตร. คู่มือเรียน PHP และ MySQL สำหรับผู้เริ่มต้น กรุงเทพฯ : โปรวิชั่น, 2555
อนรรฆนงค์ คุณมณี. Basic of C# นนทบุรี : ไอดีซี, 2550
โอภาส เอี่ยมศิริวงศ์. (2551). ระบบฐานข้อมูล (พิมพ์ครั้งที่ 1).กรุงเทพมหานคร : ซีเอ็ดยูเคชั่น
โอภาส เอี่ยมสิริวงศ์ . (2546). การวิเคราะห์และออกแบบระบบ. กรุงเทพฯ : ซีเอ็ดยูเคชั่น
"โค้ด ปฏิทิน Jquery และนำไปใช้รับค่า"[ออนไลน์.]เข้าถึงได้จาก
http://www.thaicreate.com/communit/jquery-datepicker.html. (สืบค้นเมื่อ 30 สิงหาคม 2566)
"โค้ด XAML"[ออนไลน์.]เข้าถึงได้จาก http://www.pantips.com/webthaidd/php/ (สืบค้น
เมื่อ 20 กันยายน 2566)
"C#"(ออนไลน์). เข้าถึงได้จาก : http://www.w3schools.com/php (สืบค้น 9 ตุลาคม 2566) "
php search array จาก dropdown list"[ออนไลน์. เข้าถึงได้จาก : http://www.sunzan-
design.com/2014/03/php-mysql-dropdown-list-ajax.html (สืบค้น เมื่อ 15 พฤศจิกายน 2566)
2550

12

บทที่ 1
บทนำ
1.1 ที่มาและความสำคัญของปัญหา
คอมพิวเตอร์เป็นส่วนสำคัญของการดำเนินชีวิตประจำวันของเราในสมัยนี้ การนำเทคโนโลยีเข้า
มาในชีวิตเรามีผลสร้างความสะดวกและเปลี่ยนแปลงวิถีชีวิตอย่างมาก เช่น การทำงาน การเรียนรู้ การ
สื่อสาร และการเล่นเกม เราเห็นว่าการใช้คอมพิวเตอร์และเทคโนโลยีมีบทบาทที่สำคัญในการพัฒนาด้าน
ทุกด้านของสังคมและการศึกษา ที่สถาบันการศึกษาทุกแห่งให้ความสนใจในการประยุกต์ใช้เทคโนโลยีเพื่อ
เพิ่มประสิทธิภาพในการสอนและการเรียนรู้ และส่งผ่านความรู้และความคิดระหว่างผู้สอนและผู้เรียน
เทคโนโลยีในปัจจุบันเป็นเครื่องมือสำคัญที่ช่วยให้เราสามารถปรับตัวเข้าสอดคล้องกับความ
ต้องการของงานและการเรียนรู้ การเขียนโปรแกรมประยุกต์ใช้กับงานต่าง ๆ มีความสำคัญเนื่องจากเป็น
เครื่องมือที่ช่วยให้งานเกิดประสิทธิภาพมากขึ้น โดยลดความผิดพลาดในการทำงานทุกด้าน และส่งผลให้
สถาบันการศึกษาที่ใช้การบริหารจัดการโดยใช้เทคโนโลยีสารสนเทศและการสื่อสาร (ICT) มีโอกาสในการ
เพิ่มคุณค่าและประสิทธิผลของการศึกษาในสถาบัน การเขียนโปรแกรมประยุกต์เป็นเครื่องมือที่ช่วยให้การ
จัดการงานเป็นไปอย่างรวดเร็วและมีประสิทธิผลทั้งนี้ การใช้เทคโนโลยีเป็นที่ยอมรับว่าเป็นสิ่งจำเป็นและ
สร้างการเปลี่ยนแปลงในการศึกษาและการเรียนรู้อย่างต่อเนื่องและให้ประสิทธิผลมากขึ้นในทุกด้านของ
การทำงาน เนื่องจากเทคโนโลยีสามารถช่วยให้เราตอบสนองความต้องการของงานและการเรียนรู้ได้อย่าง
มีประสิทธิภาพ และเพิ่มคุณค่าในสถาบันการศึกษาของเราในสมัยปัจจุบัน และอนาคต
ผู้จัดทำจึงพัฒนาระบบจัดการงานหลังบ้านด้วยโปรแกรมประยุกต์ที่เขียนด้วยภาษา C# เพื่อเพิ่ม
ความสะดวกในการจัดการข้อมูลในสถาบันการศึกษาเป็นโครงการที่มีความสำคัญและสามารถช่วยเพิ่ม
ความประสิทธิภาพของการทำงานของสถาบันการศึกษาได้อย่างมาก โดยระบบนี้เน้นการพัฒนาด้วยภาษา
C# เป็นการเลือกที่ดีเนื่องจาก C# เป็นภาษาโปรแกรมมิ่งที่มีความยืดหยุ่นและมีสมบัติที่เหมาะสมสำหรับ
การพัฒนาแอปพลิเคชันแบบฝังตัวบนระบบปฏิบัติการ Windows ด้วย Framework .NET7 ระบบที่เปิดให้
โอกาสทุกคนสามารถแก้ไขและพัฒนาต่อยอดเป็นแนวคิดที่ดี เราเรียกแบบนี้ว่า “ซอฟต์แวร์รหัสเปิด"
(Open Source) ซึ่งเป็นแนวคิดที่เสรีในการใช้งานและพัฒนาระบบ ช่วยสร้างชุมชนนักพัฒนาที่สามารถ
ร่วมกันพัฒนาระบบ ยังช่วยเพิ่มความชัดเจนในการพัฒนาและรักษาระบบเพราะมีผู้ร่วมพัฒนาจำนวนมาก
ที่สามารถรับผิดชอบต่อส่วนเฉพาะของระบบและแก้ไขปัญหาต่าง ๆ ที่อาจเกิดขึ้นในอนาคต

13

1.2 วัตถุประสงค์
1.2.1 ช่วยนักศึกษาในการพัฒนาทักษะทางการเขียนโค้ดและการออกแบบซอฟต์แวร์ในสภาพจริง
1.2.2 นักศึกษาได้นำความรู้ทางทฤษฎีเข้ามาใช้ในการออกแบบและพัฒนาระบบจริง จะช่วยในการ
เข้าใจและได้ฝึกประสบการณ์ในการพัฒนาโปรแกรมคอมพิวเตอร์
1.2.3 นักศึกษาจะได้เรียนรู้วิธีการวางแผนและจัดการโปรเจกต์ในแง่มุมทางวิศวกรรมซอฟต์แวร์
รวมถึงการกำหนดรายละเอียดของโครงการ การจัดการเวลา การตรวจสอบและปรับปรุง ซึ่งเป็นทักษะ
ที่มีความสำคัญ
1.3 ขอบเขตของโครงงาน
1.3.1 ขอบเขตชิ้นงาน
1.3.1.1 ผู้ดูแลระบบ
ก) สามารถเข้าสู่ระบบได้
ข) สามารถกำหนดสิทธิให้ผู้ใช้งานได้
ค) สามารถเพิ่ม ลบ แก้ไข และค้นหา ฐานข้อมูลได้
ง) สามารถพิมพ์รายงาน Report
จ) สามารถกำหนดสิทธิ์การใช้งานได้
1.3.1.2 ผู้ใช้งาน
ก) สามารถเข้าสู่ระบบได้
ข) สามารถดูและค้นหาฐานทะเบียนได้
ค) สามารถเพิ่มข้อมูลได้
ง) สามารถพิมพ์รายงาน Report
1.3.2 ประชากรและกลุ่มตัวอย่าง
1.3.2.1 ครูที่ปรึกษา
1.3.2.2 นักศึกษาระดับ ปวช.3 สาขาวิชาเทคโนโลยีสารสนเทศ วิทยาลัยเทคนิคพังงา
1.3.2.3 กลุ่มตัวอย่างคือ นักศึกษา ปวช.2 จำนวน 13 คน สาขาวิชาเทคโนโลยีสารสนเทศ
วิทยาลัยเทคนิคพังงา

14

1.4 เครื่องมือที่ใช้ในการดำเนินงาน
1.4.1 คอมพิวเตอร์ฮาร์ดแวร์ (Hardware) ที่ใช้พัฒนามีดังต่อไปนี้
ก) เครื่องคอมพิวเตอร์พกพา Acer Nitro 5 AMD Ryzen5 4000 series
ข) อุปกรณ์จัดเก็บข้อมูลสำรอง SSD External 2TB
1.4.2 คอมพิวเตอร์ซอฟต์แวร์ (Software) ที่ใช้พัฒนาดังนี้
ก) ระบบปฏิบัติการ Windows 10
ข) ระบบปฏิบัติการ kali linux Server
ค) โปรแกรมที่ใช้ในการพัฒนาระบบ Microsoft Visual Studio 2022
ง) ระบบจัดการฐานข้อมูล Microsoft SQL Server 2019
จ) โปรแกรมที่ใช้ในการตกแต่งภาพ Adobe Photoshop CS6
1.5 ขั้นตอนและแผนดำเนินงาน
ลำดับ
ตุลาคม พฤศจิกายน ธันวาคม มกราคม
1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4
1 ศึกษาปัญหาและความต้องการ
2 กำหนดขอบเขต
3 ศึกษาการใช้งานซอฟต์แวร์
4 ออกแบบการทำงานของระบบ
5 ออกแบบส่วนติดต่อกับผู้ใช้งาน
6 พัฒนาระบบ
7 ติดตั่งโปรแกรมและใช้งาน
8 ปรับปรุงและแก้ไขระบบ
9 จัดทำคู่มือการใช้งาน
10 ทำเอกสารงานวิจัย
11 พบอาจาร์ที่ปรึกษา


หัวข้อการดำเนินโครงงาน

15

1.6 ประโยชน์ที่จะได้รับ
1.6.1 ผู้เรียนมีโอกาสที่จะมีการเรียนรู้เชิงปฏิบัติและมีส่วนร่วมในการพัฒนาโปรแกรมหรือ
แอปพลิเคชั่นการเรียนรู้ตามความสนใจของตนเอง
1.6.2 ได้นําเอาเทคโนโลยีสารสนเทศยุคใหม่มาใช้อย่างมีคุณค่าและสร้างสรรค์
1.6.3 ระบบที่พัฒนาสามารถเป็นกรณีศึกษาในอนาคตได้
1.6.4 ผู้เรียนสามารถพัฒนารูปแบบของโปรแกรม ได้ด้วยตนเองและนํามาประยุกต์ใช้ให้
เข้ากับการเรียนรู้ของตนเองมากยิ่งขึ้น

16

บทที่ 2
ทฤษฎีและงานวิจัยที่เกี่ยวข้อง
ในบทนี้อธิบายถึงทฤษฎีและงานวิจัยที่เกี่ยวข้องกับการออกแบบโปรแกรมระบบบริหารงานเพื่อ
ใช้เป็นแนวทางสำหรับการดำเนินงานวิจัย ประกอบด้วยหัวข้อหลัก ๆ ดังนี้
2.1 การวิเคราะห์และออกแบบระบบ
2.2 การออกแบบส่วนประสานผู้ใช้
2.3 ทฤษฎีที่เกี่ยวข้อง
2.4 งานวิจัยที่เกี่ยวข้อง
2.1 การวิเคราะห์และออกแบบระบบ
การใช้เทคโนโลยีเป็นสิ่งที่มีความสำคัญสำหรับยุคนี้ไม่ว่าจะเป็นการติดต่อสื่อสารและรวมถึง
การค้นหาข้อมูลต่าง ๆ และการใช้เทคโนโลยีเพื่อการทำงานและจัดเก็บข้อมูลให้มีความปลอดภัยระบบ
จัดการข้อมูลเป็นอีกหนึ่งทางเลือกที่สถานศึกษาหรือผู้ประกอบการสามารถเข้าถึงข้อมูลที่สำคัญได้ง่าย
ระบบที่ต้องการติดต่อกับคนหลายคน ได้รู้ถึงการจัดการและการทำงานในองค์กรทำให้มีความรู้เกี่ยวกับ
ระบบคอมพิวเตอร์หลายแบบมากขึ้น ในสถานศึกษาหรือธุรกิจ การใช้เทคโนโลยีในการทำงานทำให้
กระบวนการต่าง ๆ เป็นไปได้มากขึ้น และการจัดเก็บข้อมูลในรูปแบบดิจิทัลทำให้ง่ายต่อการเข้าถึงการใช้
ประโยชน์จากข้อมูลนั้นแบ่งปันและติดตามได้ง่ายขึ้น และเพิ่มความสามารถในการตัดสินใจ
ระบบ คือกลุ่มขององค์ประกอบต่าง ๆ ที่ทำงานร่วมกันเพื่อจุดประสงค์อันเดียวกันระบบการ
จัดการสถานศึกษาเป็นโครงสร้างที่ประกอบด้วยองค์ประกอบต่าง ๆ ที่ทำงานร่วมกันเพื่อสนับสนุนการ
ดำเนินงานของสถานศึกษาให้เป็นไปอย่างมีประสิทธิภาพและบรรลุวัตถุประสงค์ของการศึกษาได้อย่างดี
การออกแบบระบบจะเป็นกระบวนที่นำความต้องการของระบบมาทำเป็นแบบแผนหรือ
โครงสร้างที่สามารถทำให้ระบบสามารถใช้งานได้ตามวัตถุประสงค์ที่ตั้งไว้ การออกแบบระบบการจัดการ
สถานศึกษานั้นต้องคำนึงถึงการจัดการบุคลากร การบริหารทรัพยากร การติดตามและประเมินผลการ
เรียนรู้ของนักเรียน และการเก็บรวบรวมข้อมูลที่สำคัญ การนำเอาความต้องการของระบบมาเป็น
แบบแผนหรือเรียกว่าพิมพ์เขียวในการสร้างระบบสารสนเทศนั้นให้ใช้งานได้จริง

17

2.2 การออกแบบส่วนประสานผู้ใช้
การออกแบบส่วนต่อประสานกับผู้ใช้ไม่ใช่เป็นเพียงการนำเสนอรูปแบบต่าง ๆ เพื่อให้เกิด
ความสวยงามและความน่าสนใจเท่านั้น นักออกแบบจะต้องคำนึงถึงการใช้งานส่วนต่อประสานกับผู้ใช้
โดยมีเป้าหมายหลัก คือ เพื่อให้ผู้ใช้เรียนรู้ง่าย เข้าใจง่าย ไม่สร้างความสับสน ผู้ใช้สามารถใช้งานระบบ
ให้เกิดประโยชน์สูงสุด ดังนั้นเป็นจึงเป็นขั้นตอนที่สำคัญของการเขียนโปรแกรมในลำดับต่อไป
การออกแบบส่วนประสานผู้ใช้เรียกอีกอย่างหนึ่งว่าการออกแบบจอภาพ คือการปฏิสัมพันธ์
ระหว่างผู้ใช้กับระบบ ซึ่งมีหลักการทำงานพื้นฐาน 3 ส่วนได้แก่
1. ส่วนนำเข้าข้อมูล (Input Page) ซึ่งเป็นส่วนนำเข้าข้อมูลต่างๆเข้ามาในฐานข้อมูล ในการ
ออกแบบต้องมีความชัดเจน ไม่ทำให้ผู้ใช้สับสน เพื่อให้ลดความผิดพลาดและมีผลต่อการเลือกใช้ซอฟต์แวร์
เป็นอย่างมากเนื่องจากส่วนต่อประสานกับผู้ใช้จะแสดงรูปหรือสัญลักษณ์ต่าง ๆ บนจอภาพ เพื่อสื่อ
ความหมายให้กับผู้ใช้ หากส่วนนี้สร้างความประทับใจให้ผู้ใช้ จะช่วยโน้มน้าวให้ผู้ใช้ยอมรับซอฟต์แวร์ได้
ง่ายขึ้น
2. ส่วนประมวลผล (Process) เป็นส่วนที่ทำหน้าที่ประมวลผลข้อมูลนำเข้าเพื่อสร้าง
ผลลัพธ์หรือข้อมูลส่งออก ซึ่งเป็นกระบวนการหลักที่ทำให้ซอฟต์แวร์สามารถทำงานได้ตามที่ต้องการ
ประมวลผลที่มีประสิทธิภาพและแม่นยำมีผลต่อประสิทธิภาพของระบบซอฟต์แวร์โดยรวม และส่วนนี้ควร
ถูกปรับแต่งให้เข้ากับความต้องการ การใช้เทคโนโลยีที่เหมาะสมและการจัดการข้อผิดพลาดเป็นสิ่งสำคัญ
ในการทำให้ส่วนประมวลผลทำงานได้อย่างเสถียรและมีประสิทธิภาพ
3. ส่วนข้อมูลส่งออก (Output Page) การทำให้ข้อมูลที่ชัดเจนและง่ายต่อการนำเข้า
ข้อมูลจะช่วยให้ผู้ใช้เข้าใจผลลัพธ์และข้อมูลที่ได้มาจากการใช้งานซอฟต์แวร์ได้ดีขึ้น การให้สิทธิ์ผู้ใช้มี
ทางเลือกในการแสดงผลหรือปรับแต่งการแสดงผลยังเป็นจุดเด่นที่ทำให้ซอฟต์แวร์มีความยืดหยุ่นและ
ตอบสนองต่อความต้องการของผู้ใช้ได้ดี

18

2.3 ทฤษฎีที่เกี่ยวข้อง
2.3.1 ทฤษฎีเกี่ยวกับโปรแกรม Visual Studio 2022 คือ ชุดพัฒนาโปรแกรม (Integrated
Development Environment) ประกอบด้วยโปรแกรมหลายๆ ตัวที่ใช้ในการสร้างโปรแกรมสำเร็จรูปบน
ระบบปฏิบัติการวินโดวส์ หรือใช้สร้างเว็บโปรแกรม สร้างเว็บบริการ จัดการฐานข้อมูล และอื่นๆ อีก
มากมาย Visual Studio ได้รวบรวมเครื่องมือพัฒนาต่างๆ ที่ใช้ในการพัฒนาโปรแกรมตั้งแต่ หน้าจอที่ใช้
พัฒนาโปรแกรม (Development interface) เครื่องมือในการตรวจหาจุดผิดในโปรแกรม (Debugging
tool) ตัวช่วยอัตโนมัติในการเขียนโปรแกรม (Wizard tool) ตัวจัดการฐานข้อมูล (Database
management) และส่วนประกอบอื่นๆที่จำเป็นในการพัฒนาโปรแกรม น ามาประกอบกันเป็นชุด
เรียกว่า Integrated Development Environment (ชุดพัฒนาโปรแกรม) หรือเรียกย่อๆ ว่า IDEสามารถ
เขียนโปรแกรมจากภาษาใดก็ได้ตามที่เราถนัด อาทิเช่น Visual Basic, Visual C++, Visual C#, Python,
Visual F# และ JavaScript
วิธีการติดตั้งโปรแกรม Visual Studio 2022
1. เริ่มต้นเข้าสู่เว็บไซต์ https://visualstudio.microsoft.com/downloads/ เลือกเมนู Visual
Studio IDE เลือก Download Visual Studio > Community 2022 ระบบจะทำการดาวน์โหลดไฟล์
ตามรูปที่ 2.1








รูปที่ 2.1 หน้าเว็บไซต์ดาวน์โหลด Visual Studio IDE

19

2. จะปรากฏแถบแสดงสถานะให้เลือกโฟลเดอร์ที่จะบันทึกโปรแกรมที่ดาวน์โหลดเก็บไว้ในเครื่อง



รูปที่ 2.2 หน้าสถานการณ์ดาวน์โหลดไฟล์โปรแกรม
3. เปิดโฟลเดอร์ที่ทำการบันทึกโปรแกรมไว้ แล้วทำการ Run เพื่อทำการติดตั้ง จะปรากฏหน้าต่างแสดง
สถานะการดาวน์โหลด Visual Studio ขั้นตอนนี้จะใช้เวลานานพอสมควรตามรูปที่ 2.3





รูปที่ 2.3 หน้าต่างสถานะการดาวน์โหลด

4. ขั้นตอนต่อไป เมื่อดาวน์โหลดเสร็จ จะมีหน้าต่าง installing ขึ้นมา ให้ทำการเลือกที่หัวข้อ
.NET desktop development แล้วกดปุ่ม Install ตามรูปที่ 2.4









รูปที่ 2.4 เมนูการติดตั้งแพ็คแกจโปรแกรม

20

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






รูปที่ 2.5 สถานะการติดตั้งโปรแกรม
6. เมื่อติดตั้งโปรแกรมเสร็จเรียบร้อยแล้วทำการเปิดใช้งาน Visual Studio ครั้งแรก ให้ทำการลงทะเบียน
หรือ Sign in เพื่อลงทะเบียนผู้ใช้ใหม่ (จะเหมือนกับการสมัครอีเมลล์ outlook) ตามรูปที่ 2.5 และทำการ
เลือกสภาพแวดล้อมที่ถนัด ถือเป็นว่าการติดตั้งเสร็จสมบูรณ์ ตามรูปที่ 2.6








รูปที่ 2.6 หน้าต่าง Login รูปที่ 2.7 หน้าต่างธีมของโปรแกรม

21

วิธีการสร้างโปรเจคใหม่โปรแกรม Visual Studio 2022
1. เมื่อติดตั้งโปรแกรมเสร็จเรียบร้อยแล้ว สามารถเรียกใช้โปรแกรมได้ผ่าน Icon หน้า Desktop หรือแถบ
เมนู Start Menu ซึ่งเมื่อเปิดโปรแรกมมาแล้ว จะปรากฏหน้าหลัก ดังรูปที่ 2.8







รูปที่ 2.8 หน้าแรกของการเข้าโปรแกรม

2. สามารถสร้างโปรเจคใหม่ได้โดยการเลือกเมนู Crate a new project ฝั่งทางด้านขวามือ







รูปที่ 2.9 หน้าต่างการเลือกภาษาที่ใช้ในการพัฒนา

22

3. ซึ่งจะปรากฏตัวเลือกเมนู ให้เลือก WPF C# เพื่อกำหนดลักษณะของ Project ว่าเป็นการโปรแกรมด้วย
ภาษา C# ที่รันบนระบบปฏิบัติการ Window จากนั้นกดปุ่ม Next จะปรากฏหน้าจอ WPF C# ดังรูปที่ 2.10





รูปที่ 2.10 แสดงองค์ประกอบของโปรแกรม VS Studio 2022
ส่วนประกอบของหน้าต่างการสร้างโปรแกรม ใน VS Studio 2022
1. แถบเมนู (Menu bar) เป็นแถบแสดงรายการคำสั่งต่าง ๆ ของโปรแกรม เช่น สร้าง Project ใหม่ การ
ตั้งค่าโปรแกรม หรือการเรียกใช้เครื่องมือ เป็นต้น
2. พื้นที่สำหรับเขียนโปรแกรม (Workspace) ส่วนประกอบที่สำคัญเพราะเป็นพื้นที่สำหรับการออกแบบ
และเขียนคำสั่งต่าง ๆ ให้โปรแกรม
3. กล่องเครื่องมือ (Toolbox) เป็นกลุ่มของเครื่องมือต่างๆ สำหรับใช้ในการออกแบบ หน้าจอของ
โปรแกรม เช่น Checklist box, Radio button Label, Button เป็นต้น
4. พื้นที่สำหรับเขียนโปรแกรม (Workspace) ด้วยภาษา XAML
5. ส่วนควบคุมการทํางาน (Solution Explorer) คือส่วนสำหรับแสดง Project หรือ ไฟล์งานที่กำลังใช้
งานอยู่และสามารถจัดการกับไฟล์ได้ เช่น การเพิ่ม ลบ เปลี่ยนชื่อ สร้างโฟล์เดอร์ เป็นต้น
6. แสดงคุณสมบัติของเครื่องมือ (Properties) เป็นส่วนที่กำหนดคุณสมบัติต่าง ๆ ให้กับเครื่องมือแต่ละตัว

23

2.3.2 ทฤษฎีเกี่ยวกับ โปรแกรม Adobe Experience Design หรือที่เรียกกันว่า adobe Xd คือ
โปรแกรมบน PC ที่สร้างมาเพื่อการใช้งานของ Digital Designer สามารถใช้ในการออกแบบเว็บไซต์ปละ
แอพพลิเคชั่นในหลากหลายอุปกรณ์ ไม่ว่าจะเป็น Web Design หรือจะเป็นบน Mobile App ก็ตาม ซึ่ง
ฟังก์ชันหลัก ได้แก่ การออกแบบในส่วนของ Prototype ซึ่งเป็นเสมือนแบบจำลองเพื่อเก็บ Feedback
จาก User ก่อนการสร้าง Product จริง และสามารถออกแบบ Graphic UI ได้อีกด้วยมาพร้อมกับฟังก์ชัน
ที่ช่วยอำนวยความสะดวกให้แก่กราฟฟิก ไม่ว่าจะการแบ่งปันงาน หรือการ Export เป็นต้น





รูปที่ 2.11 ตัวอย่างหน้าการออกแบบแอพพลิเคชั่น
วิธีการติดตั้งโปรแกรม Adobe Experience Design
1. เริ่มต้นเข้าสู่เว็บไซต์ https://www.adobe.com/th_th/creativecloud/desktop.app.html
เลือกปุ่ม ดาวน์โหลด Creative cloud ตามรูปที่ 2.12






รูปที่ 2.12 หน้าเว็บไซต์ Adobe Creative cloud

24

2. เปิดโฟลเดอร์ที่ทำการบันทึกโปรแกรมไว้ แล้วทำการ Run เพื่อทำการติดตั้ง จะปรากฏหน้าต่างแสดง
สถานะการดาวน์โหลด ขั้นตอนนี้จะใช้เวลานานพอสมควรตามรูปที่ 2.13



รูปที่ 2.13 หน้าต่างรอการติดตั้งโปรแกรม Adobe Creative cloud
3. เมื่อทำการติดตั้งโปรแกรมสำเร็จ ให้ทำการรันโปรแกรมจะปรากฎหน้า Login เลือกวิธีการเข้าสู่ระบบ
อย่างใดอย่างนึง ตามรูปที่ 2.14







รูปที่ 2.14 หน้าต่างการเข้าสู่ระบบ Adobe
4. เมื่อทำการเข้าสู่ระบบสำเร็จ จะปรากฏหน้าต่างหลัก ตามรูปที่ 2.14







รูปที่ 2.15 หน้าต่างหลัก Adobe

25

5. ให้ทำการเลือกเมนู App ทางแถบขวามือ จะปรากฏรายการโปรแกรมหลากหลายชนิด ให้ค้นหาคำว่า
“Adobe XD” แล้วทำการ Installing







รูปที่ 2.16 หน้าต่างหลักโปรแรกม Adobe
6. รอการดาวน์โลดโปรแกรมจนกว่าจะเสร็จสิ้น ในขั้นตอนนี้ต้องรอนานขึ้นอยู่กับคุณภาพของเครือข่าย
อินเตอร์เน็ตของท่าน และเมื่อทำการดาวน์โหลดโปรแกรมสร็จสมบูรณ์ ระบบจะติดตั้งให้อัตโนมัติถือว่า
เป็นอันเสร็จสิ้น ตามรูปที่ 2.17






รูปที่ 2.17 หน้าต่างการติดตั้งโปรแกรม Adobe xd

26

2.3.3 ทฤษฎีเกี่ยวกับ โปรแกรม Visual Studio Code หรือ VS Code เป็นโปรแกรม
Code Editor ที่ใช้ในการแก้ไขและ ปรับแต่งโค้ด จากค่ายไมโครซอฟท์ มีการพัฒนาออกมาในรูปแบบของ
Open Source จึงสามารถ นำมาใช้งานได้แบบฟรี ๆ ที่ต้องการความเป็นมืออาชีพ ซึ่ง Visual Studio
Code นั้น เหมาะสำหรับ นักพัฒนาโปรแกรมที่ต้องการใช้งานข้ามแพลตฟอร์ม รองรับการใช้งานทั้งบน
Windows, macOS และ Linux สนับสนุนทั้งภาษา JavaScript, TypeScript และ Node.js สามารถ
เชื่อมต่อกับ Git ได้ นำมาใช้งานได้ง่ายไม่ซับซ้อน มีเครื่องมือส่วนขยายต่าง ๆ ให้เลือกใช้อย่างมากมาก
รวมไปถึง 1.การ เปิดใช้งานภาษาโปรแกรมอื่นๆ ทั้ง ภาษา C++, C#, Java, Python, PHP หรือ Go
2.Themes 3.Debugger 4.Commands เป็นต้น ความแตกต่างระหว่าง VS Code และ Visual Studio
คือ VS Code ได้ทำการตัดในส่วนของ GUI designer ออกไป เหลือแต่เพียงตัว Editor เท่านั้น จึงทำให้
ตัวโปรแกรมนั้นค่อนข้างเบากว่า Visual Studio เป็นอย่างมาก VS Code สามาถนำมาใช้งานได้ฟรี
รองรับการทำงานข้ามแพลตฟอร์ม









รูปที่ 2.18 ตัวอย่างโปรแกรม VS CODE

27

วิธีการติดตั้งโปรแกรม Visual Studio Code
1. เข้าไปที่เว็บไซต์ https://code.visualstudio.com/ และ Download โปรแกรม VS Code โดยเลือก
ให้ตรงกับ OS ของเครื่องคอมพิวเตอร์ ทำการดาวน์โหลด จะปรากฏแถบแสดงสถานะให้เลือกโฟลเดอร์ที่จะ
บันทึกโปรแกรมที่ดาวน์โหลดเก็บไว้ในเครื่อง ตามรูปที่ 2.19







รูปที่ 2.19 หน้าเว็บไซต์ดาวโหลดโปรแกรม VS CODE

2. เปิดโฟลเดอร์ที่ทำการบันทึกโปรแกรมไว้ แล้วทำการ Run เพื่อทำการติดตั้ง จะปรากฏหน้าต่างแสดง
ข้อกำหนดเงื่อนไข ในการติดตั้ง Visual Studio ให้เลือก เลือก “I accept the agreement” และคลิก
ปุ่ม “Next >” ตามรูปที่2.20





รูปที่ 2.20 หน้าต่างแสดงข้อกำหนดเงื่อนไข

28

3. เลือกพื้นที่ในการจัดเก็บโปรแกรม (แนะนำให้ใช้ Default ที่ให้มา) และคลิกปุ่ม “Next >”





รูปที่ 2.21 หน้าต่างการเลือกพื้นที่ในการติดตั้งโปรแกรม
4. เลือกส่วนเพิ่มงานให้เลือก Create a desktop icon และ Add to PATH (requires shell restart)
จากนั้นให้คลิกปุ่ม “Next >” ตามรูปที่ 2.19





รูปที่ 2.22 หน้าต่างการตั้งค่าในการติดตั้งโปรแกรม

29

5. จากนั้นคลิกปุ่ม “Install” เพื่อติดตั้งโปรแกรม






รูปที่ 2.23 หน้าต่างแสดงการติดตั้ง
6. จะแสดงหน้าต่างสถานะการติดตั้ง






รูปที่ 2.24 หน้าต่างแสดงสถานะการติดตั้ง

30

7. คลิกปุ่ม “Finish” เสร็จสิ้นการติดตั้งโปรแกรม VS Code





รูปที่ 2.25 หน้าต่างแสดงเมื่อการติดตั้งเสร็จสมบูรณ์
2.3.4 ทฤษฎีเกี่ยวกับโปรแกรม Xampp 3.2.4 (กังวาน อัศวไชยศิน และอรพิน ประวัติบริสุทธิ์,
2556) Xampp คือโปรแกรมที่รวบรวมเอา Open Source Software หลายๆ อย่างมารวมกันโดยมี
Package หลักดังนี้ Apache, MySQL, phpMyAdmin โปรแกรมต่าง ๆ ที่นำมารวบรวมไว้ทั้งหมดนี้ ได้
ทำการดาวน์โหลดจาก Official Release ทั้งสิ้น โดยตัว Xampp จึงให้ความสำคัญว่าทุกสิ่งทุกอย่าง
จะต้องให้เหมือนกับต้นฉบับ เราจึงไม่ได้ตัด ทอนหรือเพิ่มเติมอะไรที่แปลกไปกว่า Official Release แต่
อย่างได้ เพียงแต่มีบางส่วนเท่านั้นที่เราได้ เพิ่มประสิทธิภาพการติดตั้งให้สอดคล้องกับการทำงานแต่ละคน
โดยที่การเพิ่มประสิทธิภาพนี้ไม่ได้ไป ยุ่ง ในส่วนของ Original Package เลยแม้แต่น้อยเพียงแต่เป็นการ
กำหนดค่า Config เท่านั้น เช่น Apache ก็จะเป็นในส่วนของ httpd.conf, PHP ก็จะเป็นในส่วนของ
php.ini, MySQL ก็จะเป็นใน ส่วนของ my.ini ดังนั้นเราจึงรับประกันได้ว่าโปรแกรม Xampp สามารถ
ทำงานและความเสถียรของ ระบบ ได้เหมือนกับ Official Release ทั้งหมด จุดประสงค์หลักของการรวม
รวบ Open Source Software เหล่านี้เพื่อทำให้การติดตั้ง โปรแกรมต่าง ๆ ที่ได้กล่าวมาให้ง่ายขึ้น เพื่อ
ลดขั้นตอนการติดตั้งที่แสนจะยุ่งยากและใช้เวลานาน โดยผู้ใช้งานเพียงดับเบิ้ลคลิก setup ภายในเวลา 1
นาที ทุกอย่างก็ติดตั้งเสร็จสมบูรณ์ระบบต่าง ๆ ก็ พร้อมที่จะทำงานได้ทันทีทั้ง Web Server, Database
Server เหตุผลนี้จึงเป็นเหตุผลหลักที่หลาย ๆ คนทั่วโลก ได้เลือกใช้โปรแกรม Xampp แทนการที่จะต้อง
มาติดตั้งโปรแกรมต่าง ๆ ที่ละส่วน

31

วิธีการติดตั้งโปรแกรม Xampp
1. เริ่มต้นเข้าสู่เว็บไซต์ https://www.apachefriends.org/download.html เลือกดาวโหลด Xampp





รูปที่ 2.26 เมนูการดาวน์โหลดตามOS
2. ดับเบิลคลิกไฟล์ที่เพิ่ง Download มาเพื่อติดตั้งโปรแกรม

รูปที่ 2.27 ไฟล์โปรแกรมที่ได้ดาวนืโหลด
3. ปรากฏหน้าต่าง ให้ทำการกด Next




รูปที่ 2.28 หน้าต่างแรกของการติดตั้ง

32

4. กด Next > ไปจนกว่าจะขึ้นหน้าต่างตั้งค่า ไม่ต้องแก้ไขใดๆ ให้คลิก Next






รูปที่ 2.29 หน้าต่างการตั้งค่าในการติดตั้ง
5. รอจนติดตั้งโปรแกรมเสร็จ ให้คลิกที่ Finish ตัว Control Panel จะถูกเปิดขึ้นมา






รูปที่ 2.30 หน้าต่างเมื่อเสร็จสิ้นขั้นตอนการติดตั้ง

33

2.3.5 ทฤษฎีเกี่ยวกับโปรแกรม Microsoft Word เป็นโปรแกรมประมวลผลคำแบบพิเศษ
ช่วยให้สร้างเอกสารแบบมืออาชีพอย่างมีประสิทธิภาพและประหยัด เช่น เหมาะกับงานด้านการพิมพเ์อก
สารทุกชนิด สามารถพิมพ์เอกสารออกมาเป็นชุด ๆ ซึ่งเอกสารอาจเป็นจดหมาย บันทึกข้อความ รายงาน
บทความ ประวัติย่อและยังสามารถตรวจสอบ ทบทวน แก้ไข ปรับปรุงความถูกต้องในการพิมพ์เอกสารได้
อย่างง่ายดาย สามารถตรวจสอบ สะกดคำ และหลักไวยากรณ์เพิ่มตาราง เพิ่มกราฟิกในเอกสารได้อย่าง
ง่ายดาย หรือเพิ่มเติมข้อมูลได้ตลอดเวลา สามารถใช้ลักษณะของการจัด พิมพ์ด้วยคอมพิวเตอร์แบบตั้งโต๊ะ
(Desktop Publishing) เพื่อสร้างโบชัวร์ (Brochures) ด้านสื่อโฆษณา (Advertisements) และ
จดหมายข่าว (Newsletters) ได้ด้วยโปรแกรมประมวลผลคำ (word Processor)






รูปที่ 2.31 ตัวอย่างไอคอนโปรแกรม Word
วิธีการติดตั้งโปรแกรม Word
1. เริ่มต้นเข้าโปรแกรม Microsoft store เพื่อดาวน์โหลดโปรแกรม ให้ทำการค้นหาคำว่า
Microsoft Word ในช่องค้นหา





รูปที่ 2.32 หน้าต่างช่องค้นหาโปรแกรม

34

2. เมื่อทำการค้นหาจะปรากฏโปรแกรมอยู่สามโปรแกรม ให้ทำการเลือกอันใดอันหนึ่ง



รูปที่ 2.33 ตัวอย่างโปรแกรมทั้งสามที่แสดง
3. เมื่อเลือกเข้ามาในโปรแกรม ให้เลือกการสั่งซื้อปุ่มด้านซ้ายมือและทำการชำระเงินให้เรียบร้อย




รูปที่ 2.34 หน้าต่างการสั่งซื้อโปรแกรม Word
4. เมื่อทำการสั่งซื้อแล้วโปรแกรมจะดาวน์โหลดให้อัตโนมัติ





รูปที่ 2.35 หน้าต่างแสดงสถานะการดาวน์โหลดโปรแกรม

35

5. เมื่อการดาวน์โหลดเสร็จสิ้นจะปรากฏหน้าต่าง ตามรูปที่ 2.36 ถือเป็นการเสร็จสิ้น





รูปที่ 2.36 หน้าต่างการดาวน์โหลดเสร็จสิ้น
2.3.5 ทฤษฎีเกี่ยวกับ โปรแกรม Adobe Photoshop CS6 คุณสมบัติพื้นฐานของโปรแกรม
โปรแกรม Photoshop เป็นโปรแกรมในตระกูล Adobe ที่ ใช้สำหรับตกแต่งภาพถ่ายและภาพกราฟิก ได้
อย่างมีประสิทธิภาพ ไม่ว่าจะเป็นงานด้านสิ่งพิมพ์ นิตยสาร และงานด้านมัลติมีเดีย อีกทั้งยังสามารถ
retouching ตกแต่งภาพและการสร้างภาพ ซึ่ง กำลังเป็นที่นิยมสูงมากในขณะนี้ เราสามารถใช้โปรแกรม
Photoshop ในการตกแต่งภาพ การใส่ Effect ต่าง ๆให้กับภาพ และตัวหนังสือ การทำภาพขาวดำ การ
ทำภาพถ่ายเป็นภาพเขียน การนำ ภาพมารวมกัน การ Retouch ตกแต่งภาพต่าง





รูปที่ 2.37 หน้าการตัดต่อของโปรแกรม Photoshop

36

วิธีการติดตั้งโปรแกรม Adobe Photoshop
1. เริ่มต้นเข้าสู่เว็บไซต์ https://www.adobe.com/th_th/creativecloud/desktop.app.html เลือก
ปุ่ม ดาวน์โหลด Creative cloud จะปรากฏแถบแสดงสถานะให้เลือกโฟลเดอร์ที่จะบันทึกโปรแกรมที่ดาวน์
โหลดเก็บไว้ในเครื่องตามรูปที่ 2.32







รูปที่ 2.38 หน้าเว็บไซต์ Adobe Creative cloud

2. เปิดโฟลเดอร์ที่ทำการบันทึกโปรแกรมไว้ แล้วทำการ Run เพื่อทำการติดตั้ง จะปรากฏหน้าต่างแสดง
สถานะการดาวน์โหลด ขั้นตอนนี้จะใช้เวลานานพอสมควรตามรูปที่ 2.39



รูปที่ 2.39 หน้าต่างรอการติดตั้งโปรแกรม Adobe Creative cloud
3. เมื่อทำการติดตั้งโปรแกรมสำเร็จ ให้ทำการรันโปรแกรมจะปรากฎหน้า Login เลือกวิธีการเข้าสู่ระบบ
อย่างใดอย่างนึง ตามรูปที่ 2.40




รูปที่ 2.40 หน้าต่างการเข้าสู่ระบบ Adobe

37

4. เมื่อทำการเข้าสู่ระบบสำเร็จ จะปรากฏหน้าต่างหลัก ตามรูปที่ 2.41








รูปที่ 2.41 หน้าต่างการเข้าสู่ระบบ Adobe
5. ให้ทำการเลือกเมนู App ทางแถบขวามือ จะปรากฏรายการโปรแกรมหลากหลายชนิด ให้ค้นหาคำว่า
“Photoshop” แล้วทำการ Installing






รูปที่ 2.42 หน้าต่างการเลือกโปรแกรม

6. รอการดาวน์โลดโปรแกรมจนกว่าจะเสร็จสิ้น ในขั้นตอนนี้ต้องรอนานขึ้นอยู่กับคุณภาพของเครือข่าย
อินเตอร์เน็ตของท่าน เมื่อทำการดาวน์โหลดโปรแกรมสร็จสมบูรณ์ ระบบจะติดตั้งให้อัตโนมัติถือว่าเป็นอัน
เสร็จสิ้น ตามรูปที่ 2.38




รูปที่ 2.43 หน้าต่างการติดตั้งโปรแกรม Adobe xd

38

2.3.6 ทฤษฎีเกี่ยวกับ .NET Framework คือแพลตฟอร์มพัฒนาซอฟต์แวร์ที่ถูกสร้างขึ้นโดย
Microsoft เพื่อรองรับและประมวลผลแอปพลิเคชันที่เขียนขึ้นบนระบบปฏิบัติการ Windows โดยทั่วไป,
โปรแกรมที่ถูกพัฒนาด้วย .NET Framework จะถูกคอมไพล์ให้กลายเป็น Intermediate Language (IL)
ที่จะถูกแปลงเป็น native code ขณะที่โปรแกรมถูกทำงาน โดย Common Language Runtime (CLR)
เป็นส่วนสำคัญที่ดูแลด้านการทำงานของ IL และการจัดการทรัพยากรต่าง ๆ ที่โปรแกรมใช้งาน






รูปที่ 2.44 โครงสร้างแสดงกรอบงานของ .NET Framework
.NET Framework มีไว้สำหรับการพัฒนาแอปพลิเคชันที่หลากหลายประเภท เช่น
Windows Forms Applications, ASP.NET Web Applications, WPF Applications,
Console Applications, และอื่น ๆ โดยมีไลบรารีต่าง ๆ ที่สามารถใช้เพิ่มเติมเพื่อการพัฒนาที่
หลากหลาย. ด้วย CLR และ CTS, .NET Framework ช่วยให้โปรแกรมเป็นไปตามหลักการทำงาน
ที่มีประสิทธิภาพและปลอดภัย, ทำให้นักพัฒนาสามารถโฟกัสกับการพัฒนาซอฟต์แวร์ได้โดยไม่ต้อง
กังวลเกี่ยวกับปัญหาพื้นฐานของระบบที่ซ่อนอยู่ที่หลัง
2.3.7 ทฤษฎีเกี่ยวกับ Apache (อะแพช’ชี) หรือ Apache Webserver เป็นซอฟต์แวร์
เซิร์ฟเวอร์ที่ใช้กันอย่างแพร่หลาย Apache พัฒนาและดูแลโดย Apache Software Foundation ซึ่งเป็น
ซอฟต์แวร์โอเพนซอร์สที่สามารถใช้งานได้ฟรี โดยมีการใช้โดยรวมประมาณ 67% ของเว็บเซิร์ฟเวอร์
ทั้งหมดในโลก ซึ่งรวดเร็วเชื่อถือได้และปลอดภัย สามารถปรับแต่งได้เพื่อตอบสนองความต้องการ
ของสภาพแวดล้อมที่หลากหลาย โดย สามารถเพิ่ม function พิเศษที่เป็น module plugin ได้โดยง่าย

39

2.3.8 ทฤษฎีเกี่ยวกับ MySQL จัดเป็นระบบจัดการฐานข้อมูลเชิงสัมพันธ์ (RDBMS: Relational
Database Management System) ตัวหนึ่ง ซึ่งเป็นที่นิยมกันมากในปัจจุบัน โดยเฉพาะอย่างยิ่งในโลกของ
อินเตอร์เน็ต สาเหตุเพราะว่า MySQL เป็นฟรีแวร์ทางด้านฐานข้อมูลที่มีประสิทธิภาพสูง เป็นทางเลือก
ใหม่จากผลิตภัณฑ์ระบบจัดการฐานข้อมูลในปัจจุบัน ที่มักจะเป็นการผูกขาดของผลิตภัณฑ์เพียงไม่กี่ตัว
นักพัฒนาระบบฐานข้อมูลที่เคยใช้ MySQL ในความสามารถความรวดเร็ว การรองรับจำนวนผู้ใช้และ
ขนาดของข้อมูลจำนวนมหาศาล ทั้งยังสนับสนุนการใช้งานบนระบบปฏิบัติการมากมาย ไม่ว่าจะเป็น
Unix, OS/2, Mac OS หรือWindows ก็ตาม นอกจากนี้ MySQL ยังสามารถใช้งานร่วมกับ Web
Development Platform ทั้งหลาย ไม่ว่าจะเป็น C, C++, Java, Perl, PHP, Python, Tel หรือ ASP ก็
ตามทีดังนั้นจึงไม่เป็นที่น่าแปลกใจเลยว่า ทำไม MySQL จึงได้รับความนิยมอย่างมากในปัจจุบันและมี
แนวโน้มสูงยิ่งขึ้นๆ ไปในอนาคตMySQL จัดเป็นซอฟต์แวร์ประเภท Open Source Software สามารถ
ดาวน์โหลด Source Code ต้นฉบับได้จากอินเตอร์เน็ตโดยไม่เสียค่าใช้จ่ายใด ๆ การแก้ไขก็สามารถ
กระทำได้ตามความต้องการ MySQL ยึดถือสิทธิบัตรตาม GPL (GNU General Public License) ซึ่งเป็น
ข้อกำหนดของซอฟต์แวร์ประเภทนี้ส่วนใหญ่โดยจะเป็นการชี้แจงว่า สิ่งใดทำได้หรือทำไม่ได้สำหรับ
การใช้งานในกรณีต่าง ๆ






รูปที่ 2.45 ตัวอย่างหน้าต่างโปรแกรม Mysql

40

2.3.9 ทฤษฎีเกี่ยวกับ phpMyAdmin คือโปรแกรมที่ถูกพัฒนาโดยใช้ภาษา PHP เพื่อใช้ใน
การบริหารจัดการฐานข้อมูล Mysql แทนการคีย์คำสั่ง เนื่องจากถ้าเราจะใช้ฐานข้อมูลที่เป็น
Mysql บางครั้งจะมีความลำบากและยุ่งยากในการใช้งาน ดังนั้นจึงมีเครื่องมือในการจัดการ
ฐานข้อมูล MySQL ขึ้นมาเพื่อให้สามารถจัดการ ตัวDBMS ที่เป็น MySQL ได้ง่ายและสดวก
ยิ่งขึ้น โดย phpMyAdmin ก็ถือเป็นเครื่องมือชนิดหนึ่งในการจัดการนั้นเอง phpMyAdmin เป็น
ส่วนต่อประสานที่สร้างโดยภาษาพีเอชพี ซึ่งใช้จัดการฐานข้อมูล MySQL ผ่านเว็บเบราว์เซอร์ โดย
สามารถที่จะทำการสร้างฐานข้อมูลใหม่ หรือทำการสร้าง TABLE ใหม่ๆ และยังมี function ที่ใช้
สำหรับการทดสอบการ query ข้อมูลด้วยภาษา SQL พร้อมกันนั้น ยังสามารถทำการ insert
delete update หรือแม้กระทั่งใช้ คำสั่งต่าง ๆ เหมือนกับกันการใช้ภาษา SQL ในการสร้าง
ตารางข้อมูล






รูปที่ 2.46 ตัวอย่างการจัดการฐานข้อมูล

41

2.4 งานวิจัยที่เกี่ยวข้อง
2.4.1 ยืน ภู่วรวรรณ (2544) ได้เสนอแนวคิดเกี่ยวกับเทคโนโลยีสารสนเทศเพื่อการศึกษา
ไว้ว่า มีบทบาทโดยตรงกับการสร้างความรู้ (Knowledge Constructor) เทคโนโลยีสารสนเทศ
เป็นเครื่องมือที่ช่วยในการเก็บรวบรวมข้อมูลข่าวสาร ความรอบรู้ การจัดระบบการประมวลผล
การส่งผ่านและสื่อสารด้วยความเร็วสูงที่มีปริมาณมาก การนำเสนอและแสดงผลด้วยระบบสื่อต่าง
ๆ ทั้งในด้านข้อมูล รูปภาพ เสียง ภาพเคลื่อนไหว วีดีโอ ฯลฯ อีกทั้งยังสามารถสร้างระบบการมีขุม
ความรู้ที่เรียกว่า เวิลด์โนว์เล็จ (World Knowledge) ซึ่งมีแหล่งความรู้มากมายกระจายอยู่ทั่วโลก
ผู้เรียนต้องเรียนรู้ได้มากและรวดเร็ว รวมทั้งสามารถแยกแยะค้นหาข่าวสาร ตลอดจนการแสวงหา
สิ่งที่ต้องการได้ตรงความต้องการ
2.4.2 เปรมศิริ สุทธิภูมิ (2549) ได้นำเสนอวิทยานิพนธ์เรื่อง ระบบข้อมูลทะเบียนวิจัยทางด้าน
เกษตรกรรมโดยใช้เทคนิควิธีออปเจครีเลชันแนลแมปปิ้ง (Object Relational Mapping) ซึ่งได้นำเสนอ
แนวคิดไว้ดังต่อไปนี้ ในอดีตที่ผานมาในการเขียนโปรแกรมการบันทึกข้อมูลลงในฐานข้อมูลนั้นจะต้องทำ
การเปิดการเชื่อมต่อเพื่อทำการติดต่อกับฐานข้อมูล จากนั้นทำการโหลดค่าต่างๆ ออกจากออบเจ็กต์
(object) ใส่ลงในภาษาคำสั่งเอสคิวแอล (SQL) และทำการยืนยันการบันทึกข้อมูล การทำงานลักษณะนี้
ไม่มีข้อยุงยากใดๆ ในกรณีที่คำสั่งมีขนาดเล็ก และไม่มีความสัมพันธ์กับออปเจคอื่นๆ แต่ถ้าการทำงานของ
ระบบ ที่มีความซับซ้อนในการดึงข้อมูลสูง จะต้องเสียเวลากับการตรวจสอบความถูกต้องของการคีย์ข้อมูล
ในกรณีเดียวกันการดึงข้อมูลขึ้นมาเก็บในออบเจ็กต์ (object) ก็มีปัญหาเกิดขึ้นเช่นกัน การเขียนโปรแกรม
ลักษณะนี้ การแก้ไขเพียงแค่ชนิดของข้อมูลอาจทำให้ผู้พัฒนาระบบต้องใช้เวลาที่มากใน การแก้ไขโค้ดใน
การแก้ไขส่วนของการเข้าถึงข้อมูลในส่วนนั้น ดังนั้นการเขียนโปรแกรมด้วยภาษาเชิงวัตถุ (Object
Programming) ในรูปแบบของออบเจ็กต์ (object) รีเลชันแนลแมปปิ้ง (Object Relational
Mapping) ด้วยวิธี “เอนไฮเบอร์เนต (Nhibernate) ” ซึ่งเป็นเทคนิควิธีการจับคู่ที่ไม่ทำให้เกิดการ
ปรับเปลี่ยนโครงสร้างของออปเจคได้ถูกคิดค้นขึ้นมาเพื่อแกไข้ ปัญหาดังกล่าว โดยหลักการของออปเจค
รีเลชันแนลแมปปิ้งนั้น จะเป็นการจับคู่ข้อมูลระหว่างข้อมูลในเชิงวัตถุกับฐานข้อมูลเชิงสัมพันธ์
(Relational Database) โดยหลักการนี้จะช่วยให้ระบบมีความยืดหยุน และรองรับต่อการเปลี่ยนแปลงใน
อนาคตได้ง่ายกว่าการเขียนโปรแกรมโดยใช้การจับคู่ข้อมูลกับฐานข้อมูลโดยตรง

42

2.4.3 (โอภาส เอี่ยมศิริวงศ์, 2555) การวิเคราะห์และออกแบบระบบมีความสำคัญเพราะเป็น
ปัจจัยในการสร้างและพัฒนาระบบสารสนเทศ การวิเคราะห์ระบบเป็นเรื่องที่น่าสนใจนักวิเคราะห์ระบบ
ต้องติดต่อกับคนหลายคน ได้รู้ถึงการจัดการและการทำงานในองค์กรทำให้มีความรู้เกี่ยวกับระบบ
คอมพิวเตอร์หลายแบบมากขึ้น ผู้ที่สามารถวิเคราะห์ระบบได้ดี ควรมีประสบการณ์ในการเขียนโปรแกรม
มีความรู้ทางด้านธุรกิจ ความรู้เกี่ยวกับระบบเครือข่ายและฐานข้อมูล ซึ่งใช้เป็นความรู้ในการออกแบบ
ระบบที่มีความแตกต่างกันออกไปตามสภาพของงาน ดังนั้นหน้าที่ของนักวิเคราะห์หคือการศึกษาระบบ
และให้คำแนะนำในการปรับปรุงและพัฒนาระบบนั้นจนเสร็จสมบูรณ์ การทำงานทั้งหมดต้องมีลำดับ
ขั้นตอนและการศึกษาวิธีการวิเคราะห์และการออกแบบระบบในแต่ละขั้นตอน ทำให้เข้าใจการวิเคราะห์
ระบบสามารถออกแบบระบบใหม่โดยสามารถตัดสินใจว่าระบบใหม่ควรใช้คอมพิวเตอร์ประเภทไหน ใช้
โปรแกรมอะไร และออกแบบ input/output เป็นต้น

43

บทที่ 3
การออกแบบระบบ
โครงงานนี้จัดทำขึ้นเพื่อพัฒนาระบบจัดการข้อมูลนักเรียน PNTC MS ทางผู้จัดทำมีแนวคิดที่จะ
พัฒนาโปรแกรมจัดการสถานศึกษา โดยใช้วงจรการพัฒนาระบบสารสนเทศ ประกอบได้ด้วยหลัก ๆ ดังนี้
3.1 การออกแบบแผนภาพบริบท (Context Diagram)
3.2 แผนภาพการไหลของข้อมูล (Data Flow Diagram)
3.3 การออกแบบกระบวนการจัดเก็บข้อมูล (Data Dictionary)
3.4 ER Diagram
วิเคราะระบบทางด้านการไหนของข้อมูล
การวิเคราะห์ระบบทางด้านการไหลของข้อมูลเป็นการแสดงแผนภาพรูปแบบการทำงานภายใน
ระบบจัดการนักเรียน PNTC MS มีผลการวิเคราะห์ดังนี้
3.1 การออกแบบแผนภาพบริบท (Context Diagram)











รูปที่ 3.1 แสดงแผนภาพกระแสข้อมูลระดับสูง (Context Diagram)
USER ADMIN
ข้อมูลนักเรียนทั้งหมด
ข้อมูลบุคลากรทั้งหมด
ข้อมูลการเรียนการสอนทุกระดับชั้น
ข้อมูลสถานะการเข้าระบบ

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

เข้าสู่ระบบ
แก้ไขข้อมูลทุกส่วน
จัดการข้อมูลฐานทะเบียน
จัดการฐานข้อมูลหลัก
จัดการบัญชีผู้ใช้งาน
ยกเลิกสิทธิ์การใช้งาน
เข้าสู่ระบบ
แก้ไขข้อมูลส่วนตัว
ค้นหาข้อมูลฐานทะเบียน
เลือกดูข้อมูลฐานทะเบียน
เพิ่มข้อมูลฐานทะเบียน
ปริ้น Report ข้อมูลต่าง ๆ
รายงานข้อผิดพลาด
ตามสิทธิ์การใช้งาน
0
PNTC MS

44

3.2 แผนภาพการไหลของข้อมูล (Data Flow Diagram)
3.2.1 Data Flow Diagram Level 1






















เข้าสู่ระบบ
ผู้ใช้งาน
กำหนดสิทธิ์
ผู้ใช้งานระบบ
2.0
จัดการ
ข้อมูลพื้นฐาน
3.0
จัดการ
ข้อมูลทางการศึกษา
4.0
รายงาน
Report
5.0
1.0
db_admin D1
db_user D2
ข้อมูลผู้ดูแลระบบ
ข้อมูลผู้ใช้งาน
ข้อมูลการเข้าสู่ระบบ
สิทธิ์การใช้งานระบบ
ข้อมูลการเข้าสู่ระบบ
สิทธิ์การใช้งานระบบ
ข้อมูลผู้ใช้งาน
ข้อมูลผู้ใช้งาน
ตรวจสอบสิทธิ์การใช้งาน
สิทธิ์การใช้งานระบบ
กำหนดสิทธิ์ผู้ใช้งาน
ข้อมูลสิทธิ์ผู้ใช้งาน
D3 student_data
ข้อมูลทะเบียน
ข้อมูลทะเบียน
ข้อมูลทะเบียน
ข้อมูลทะเบียน
ข้อมูลทะเบียน
ข้อมูลทะเบียน
ข้อมูลทางการศึกษา
ข้อมูลทางการศึกษา
ข้อมูลทางการศึกษา
ข้อมูลทางการศึกษา
ผู้ดูแลระบบ
ข้อมูลทะเบียน
education_student_data
grade_student
D4
D5
ข้อมูลทางการศึกษา
ข้อมูลทางการศึกษา
ข้อมูลผลการเรียน
ข้อมูลผลการเรียน
ข้อมูลผลการเรียน
ข้อมูลทางการศึกษา
ข้อมูลทะเบียน
รายงานที่ร้องขอ
ร้องขอรายงาน
ข้อมูลรายงาน
รูปที่ 3.2 แสดงแผนภาพการไหลของข้อมูล Data Flow Diagram Level 1

45

3.2.2 แผนภาพกระแสข้อมูล Data Flow Diagram Level 1 Process 1
ของกระบวนการที่ 1.0 เข้าสู่ระบบ











รูปที่ 3.3 แผนภาพกระแสข้อมูล Data Flow Diagram Level 1 Process 1
ของกระบวนการที่ 1.0 เข้าสู่ระบบ
จากแผนภาพที่ 3.3 เป็นกระบวนการทำงานการเข้าใช้ระบบ อธิบายได้ว่าผู้ดูแลระบบ
และผู้ใช้งานต้องทำการป้อนชื่อผู้ใช้งานและรหัสผ่าน โดยที่ชื่อผู้ใช้งานและรหัสผ่านระบบจะทำการ
ตรวจสอบจากข้อมูลผู้ใช้งาน ถ้าชื่อผู้ใช้งานและรหัสผ่านถูกต้องระบบจะอนุญาตให้เข้าใช้ระบบ





1.1
1.2
1.3
เข้าสู่ระบบ
ตรวจสอบชื่อ
ผู้ใช้งานในระบบ
แสดงรายการ
การเข้าสู่ระบบ
db_admin
db_user

D1 D1
D2
ผู้ดูแลระบบ ผู้ใช้งาน
ข้อมูลการเข้าสู่ระบบ
ข้อมูลการเข้าสู่ระบบ
ข้อมูลผู้ใช้งาน
ข้อมูลผู้ใช้งาน
ข้อมูลผู้ดูแลระบบ
รายการเข้าสู่ระบบ
รายการเข้าสู่ระบบ

46

3.2.3 แผนภาพกระแสข้อมูล Data Flow Diagram Level 1 Process 2
ของกระบวนการที่ 2.0 การกำหนดสิทธิ์ให้ผู้ใช้งาน











รูปที่ 3.4 แผนภาพกระแสข้อมูล Data Flow Diagram Level 1 Process 2
ของกระบวนการที่ 2.0 การกำหนดสิทธิ์ให้ผู้ใช้งาน
จากแผนภาพที่ 3.4 เป็นกระบวนการทำงานการกำหนดสิทธิ์ต่าง ๆ ในการใช้งาน
ระบบให้ผู้ใช้งาน อธิบายได้ว่าผู้ดูแลต้องทำการป้อนสิทธ์ให้ผู้ใช้งาน โดยที่จะทำการตรวจสอบ
จากข้อมูลผู้ใช้งาน ถ้าชื่อผู้ใช้งานมีสิทธิ์ต่าง ๆ ก็อนุญาตให้ใช้สิทธิ์นั้นได้





2.1
2.2
2.3
กำหนดสิทธิ์
ผู้ใช้งานระบบ
ตรวจสอบ
สิทธิ์ผู้ใช้งานระบบ
แสดงรายการที่ได้
จากสิทธิ์การใช้งาน
db_admin
db_user

ผู้ดูแลระบบ ผู้ใช้งาน
กำหนดสิทธิ์
ข้อมูลผู้ใช้งาน
ข้อมูลผู้ดูแลระบบ
แสดงรายการ
D2
D1 กำหนดสิทธิ์
แสดงรายการ
ข้อมูลผู้ใช้งาน

47

3.2.4 แผนภาพกระแสข้อมูล Data Flow Diagram Level 1 Process 3
ของกระบวนการที่ 3.0 การจัดการข้อมูลฐานทะเบียน



รูปที่ 3.5 แผนภาพกระแสข้อมูล Data Flow Diagram Level 1 Process 3
ของกระบวนการที่ 3.0 การจัดการข้อมูลฐานทะเบียน
จากแผนรูปที่ 3.5 เป็นการอธิบายกระบวนการการจัดการและตรวจสอบข้อมูล
พื้นฐานของนักศึกษา ผู้ดูแลระบบจะทำหน้าที่ตรวจสอบกำกับดูแลฐานข้อมูล ผู้ใช้งาน
สามารถตรวจสอบข้ออมูล แก้ไข จัดการข้อมูลได้
3.2.5 แผนภาพกระแสข้อมูล Data Flow Diagram Level 1 Process 4
ของกระบวนการที่ 4.0 การจัดการข้อมูลฐานทะเบียน



รูปที่ 3.6 แผนภาพกระแสข้อมูล Data Flow Diagram Level 1 Process 4
ของกระบวนการที่ 4.0 การจัดการข้อมูลฐานทะเบียน
จากแผนรูปที่ 3.6 เป็นการอธิบายกระบวนการการจัดการและตรวจสอบข้อมูล
การศึกษาของนักศึกษา อาทิเช่น ผลการเรียน ผู้ดูแลระบบจะทำหน้าที่ตรวจสอบกำกับ
ดูแลฐานข้อมูล ผู้ใช้งานสามารถตรวจสอบข้อมูล แก้ไข จัดการข้อมูลได้

3.1 ผู้ใช้งาน
ผู้ดูแลระบบ
student_data

D4
D3
จัดการ
ข้อมูลพื้นฐาน
ข้อมูลพื้นฐาน
จัดการข้อมูลพื้นฐาน
ข้อมูลทะเบียน
education_student_data

ข้อมูลทะเบียน
จัดการข้อมูลพื้นฐาน
ข้อมูลพื้นฐาน
ข้อมูลทางการศึกษา
ข้อมูลทางการศึกษา
4.1 ผู้ใช้งาน
ผู้ดูแลระบบ
student_data

D4
D3
จัดการ
ข้อมูลทางการศึกษา
ข้อมูลทางการศึกษา

จัดการข้อมูลทางการศึกษา

ข้อมูลทะเบียน
education_student_data

ข้อมูลทะเบียน
จัดการข้อมูลทางการศึกษา
ข้อมูลทางการศึกษา
ข้อมูลทางการศึกษา
ข้อมูลทางการศึกษา

48

3.2.6 แผนภาพกระแสข้อมูล Data Flow Diagram Level 1 Process 5
ของกระบวนการที่ 5.0 การออกรายงาน



รูปที่ 3.7 แผนภาพกระแสข้อมูล Data Flow Diagram Level 1 Process 5
ของกระบวนการที่ 5.0 การจัดการข้อมูลฐานทะเบียน
จากแผนรูปที่ 3.7 เป็นการอธิบายกระบวนการการรายงานข้อมูล ผู้ดูแลระบบจะ
ทำหน้าที่ตรวจสอบกำกับดูแลข้อมูลที่รายงานออกไป ผู้ใช้งานสามารถตรวจสอบข้อมูล
และส่งออกข้อมูลได้













5.1 ผู้ใช้งาน
ผู้ดูแลระบบ
student_data

D5
D3
รายงาน
REPORT
ข้อมูลทางการศึกษา

จัดการข้อมูลทางการศึกษา

ข้อมูลทะเบียน
education_student_data

ข้อมูลทะเบียน
จัดการข้อมูลทางการศึกษา
ข้อมูลทางการศึกษา
ข้อมูลทางการศึกษา
ข้อมูลทางการศึกษา D4
ข้อมูลผลการเรียน
ข้อมูลผลการเรียน
grade_student

49

3.3 การออกแบบกระบวนการจัดเก็บข้อมูล (Data Dictionary)
ตารางแฟ้มข้อมูลผู้ดูแลระบบ (db_Admin)
ลำดับ
(Field)
คุณสมบัติ
(Attribute)
คำอธิบาย
(Description)
ขนาด
(Width)
ประเภท
(Type)
ค่าเบื้องต้น
(Default)
ประเภทคีย์
(Key Type)
1 Id_admin รหัสแอดมิน 13 Int - PK
2 username_admin ชื่อบัญชี 50 Varchar - -
3 Password_admin รหัสบัญชี 50 Varchar 1111 -
4 name_admin ชื่อ-นามสกุล 50 Varchar - -
5 Img_admin รูปภาพ - Longblob null -
ตารางที่ 3.1 ตารางแฟ้มข้อมูลผู้ดูแลระบบ (db_Admin)
ตารางแฟ้มข้อมูลผู้ใช้งานระบบ (db_User)
ลำดับ
(Field)
คุณสมบัติ
(Attribute)
คำอธิบาย
(Description)
ขนาด
(Width)
ประเภท
(Type)
ค่าเบื้องต้น
(Default)
ประเภทคีย์
(Key Type)
1 Id_users รหัสแอดมิน 13 Int - PK
2 username_users ชื่อบัญชี 50 Varchar - -
3 Password_users รหัสบัญชี 50 Varchar 1111 -
4 name_users ชื่อ-นามสกุล 50 Varchar - -
5 Img_users รูปภาพ - Longblob null -
ตารางที่ 3.2 ตารางแฟ้มข้อมูลผู้ใช้งานระบบ (db_User)

50

ตารางสิทธิ์การใช้งาน (access_rights)
ลำดับ
(Field)
คุณสมบัติ
(Attribute)
คำอธิบาย
(Description)
ขนาด
(Width)
ประเภท
(Type)
ค่าเบื้องต้น
(Default)
ประเภทคีย์
(Key Type)
1 permission_id รหัสแอดมิน 13 Int - PK
2 Id_users ชื่อบัญชี 13 Int - FK
3 switch_account เปิด/ปิดใช้งาน - BOOLEAN True
4 can_view_personal_info ดูข้อมูลพื้นฐาน - BOOLEAN True -
5 can_edit_personal_info แก้ไขข้อมูลพื้นฐาน - BOOLEAN False -
6 can_delect_personal_info ลบข้อมูลพื้นฐาน - BOOLEAN False -
7 can_view_education_info ดูข้อมูลการศึกษา - BOOLEAN True -
8 can_edit_education_info แก้ไขข้อมูลการศึกษา - BOOLEAN False -
9 can_delect_education_info ลบข้อมูลการศึกษา - BOOLEAN False -
10 can_export_report การส่งออกข้อมูล - BOOLEAN False -
ตารางที่ 3.3 ตารางสิทธิ์การใช้งาน (access_rights)
ตารางข้อมูลฐานทะเบียน (student_data)
ลำดับ
(Field)
คุณสมบัติ
(Attribute)
คำอธิบาย
(Description)
ขนาด
(Width)
ประเภท
(Type)
ค่าเบื้องต้น
(Default)
ประเภทคีย์
(Key Type)
1 student_id รหัสนักเรียน 13 Int - PK
2 student_idc รหัสบัตรปชช. 13 Int - FK
3 name_student ชื่อนักเรียน 50 Varchar -
4 surename_student นามสกุลนักเรียน 50 Varchar - -
5 name_student_eng ชื่อนักเรียน_อังกฤษ 50 Varchar - -
6 surename_student_eng นามสกุล_อังกฤษ 50 Varchar - -
7 student_gender เพศ 10 Varchar - -
8 student_img รูปถ่าย - Longblob null -
9 student_date_of_birth ว.ด.ป. - Varchar - -
9 student_nationality สัญชาติ 25 Varchar - -
10 student_ethnicity เชื้อชาติ 25 Varchar - -

51

11 student_religion ศาสนา 25 Varchar - -
12 student_blood_type กรุ๊ปเลือด 2 Varchar - -
13 Student_medical_condition โรคประจำตัว 50 Varchar - -
14 student_height_cm ส่วนสูง 5 Varchar - -
15 student_weight_cm น้ำหนัก 5 Varchar - -
16 student_phone เบอร์ติดต่อ 11 Varchar - -
17 student_email อีเมล 35 Varchar - -
18 student_address ที่อยู่ 20 Varchar - -
19 student_Province จังหวัด 20 Varchar - -
20 student_tambon ตำบล 30 Varchar
21 student_district อำเภอ 20 Varchar - -
22 student_postal_code รหัสไปรษณีย์ 10 Varchar - -
23 student_facebook เฟสบุ๊ค 50 Varchar - -
24 student_line_id ไอดีไลน์ 50 Varchar - -
25 guardian_id รหัสผู้ปกครอง 13 Int - -
26 created_at วันที่เพิ่ม - TIMESTAMP CURRENT -
27 updated_at วันที่แก้ไขล่าสุด - TIMESTAMP CURRENT -
28 Id_user รหัสผู้ใช้งานที่เพิ่ม
ข้อมูล
13 int null -
29 Id_admin รหัสผู้ดูแลระบบที่เพิ่ม
ข้อมูล
13 int null -
ตารางที่ 3.4 ตารางข้อมูลฐานทะเบียน (student_data)

52

ตารางข้อมูลผู้ปกครอง (guardians_student)
ลำดับ
(Field)
คุณสมบัติ
(Attribute)
คำอธิบาย
(Description)
ขนาด
(Width)
ประเภท
(Type)
ค่าเบื้องต้น
(Default)
ประเภทคีย์
(Key Type)
1 guardian_id รหัสผู้ปกครอง 13 Int - PK
2 student_id รหัสนักเรียน 13 Int - FK
3 guardian_type ประเภทผู้ปกครอง 20 varchar - -
4 guardian_first_name ชื่อผู้ปกครอง 50 varchar - -
5 guardian_last_name นามสกุลผู้ปกครอง 50 varchar - -
6 guardian_phone_number เบอร์โทรผู้ปกครอง 20 varchar - -
7 guardian_email อีเมลผู้ปกครอง 35 varchar - -
8 guardian_address ที่อยู่ผู้ปกครอง 100 varchar - -
9 guardian_img รูปภาพผู้ปกครอง - longblob - -
ตารางที่ 3.5 ตารางข้อมูลผู้ปกครอง (guardians_student)
ตารางเก็บข้อมูลห้อง (classlevels)
ลำดับ
(Field)
คุณสมบัติ
(Attribute)
คำอธิบาย
(Description)
ขนาด
(Width)
ประเภท
(Type)
ค่าเบื้องต้น
(Default)
ประเภทคีย์
(Key Type)
1 ClassLevelID รหัสชั้นเรียน 13 Int - PK
2 ClassLevel_name ชั้นเรียน 13 varchar -
3 department_id รหัสแผนก 13 Int - FK
4 ProgramID รหัสสาขาวิชา 13 varchar - FK
ตารางที่ 3.6 ตารางเก็บข้อมูลห้อง (classlevels)
ตารางสิทธิ์เก็บชื่อแผนก (department_class)
ลำดับ
(Field)
คุณสมบัติ
(Attribute)
คำอธิบาย
(Description)
ขนาด
(Width)
ประเภท
(Type)
ค่าเบื้องต้น
(Default)
ประเภทคีย์
(Key Type)
1 department_id รหัสแผนก 13 Int - PK
2 department _name ชื่อแผนก 50 varchar - -
ตารางที่ 3.7 ตารางสิทธิ์เก็บชื่อแผนก (department_class)

53

ตารางสาขาวิชา (program_class)
ลำดับ
(Field)
คุณสมบัติ
(Attribute)
คำอธิบาย
(Description)
ขนาด
(Width)
ประเภท
(Type)
ค่าเบื้องต้น
(Default)
ประเภทคีย์
(Key Type)
1 ProgramID รหัสสาขาวิชา 13 int PK
2 department_id รหัสแผนก 13 Int - FK
3 program_class _nam สาขาวิชา 13 varchar -
ตารางที่ 3.8 ตารางสาขาวิชา (program_class)
ตารางข้อมูลผลการเรียน (grade_student)
ลำดับ
(Field)
คุณสมบัติ
(Attribute)
คำอธิบาย
(Description)
ขนาด
(Width)
ประเภท
(Type)
ค่าเบื้องต้น
(Default)
ประเภทคีย์
(Key Type)
1 grade_id รหัสผลการเรียน 13 int PK
2 student_id รหัสนักเรียน 13 Int - FK
3 subject_name วิชาเรียน 150 Varchar -
4 score คะแนนเก็บ 20 Int null
5 grade เกรด 5 Int
6 academic_year ปีการศึกษา 6 Int
ตารางที่ 3.9 ข้อมูลผลการเรียน (grade_student)
ตารางข้อมูลทางการศึกษา (education_student_data)
ลำดับ
(Field)
คุณสมบัติ
(Attribute)
คำอธิบาย
(Description)
ขนาด
(Width)
ประเภท
(Type)
ค่าเบื้องต้น
(Default)
ประเภทคีย์
(Key Type)
1 student_id รหัสนักเรียน 13 int PK
2 ClassLevelID รหัสชั้นเรียน 13 Int - FK
3 status_student สถานะการศึกษา 30 BOOLEAN true
4 enrollment_year ปีที่เข้าเรียน 6 Int -
5 graduation_year ปีที่จบการศึกษา 6 Int null
6 grade_id ผลการเรียน 13 Int null
ตารางที่ 3.10 ข้อมูลทางการศึกษา (education_student_data)

54

3.4 ER Diagram ผู้ใช้งาน


-

สิทธิ การใช้งาน





​นักเรียน

-

ข้อมูลการศีกษา





ผู้ปกครอง

-

-





ผู้ดูแลลระบบ
-

m
n
1 1
m
m
1 m
mm


รูปที่ 3.8 แสดงแผนภาพโครงสร้าง ER Diagram

55

บทที่ 4
การทำงานของระบบ
ระบบจัดการข้อมูลนักเรียน PNTC MS ที่ผู้ศึกษาได้วิเคราะห์ออกแบบและพัฒนาระบบจะช่วยใน
การจัดการข้อมูลได้อย่างสะดวกและมีประสิทธิภาพ ประกอบด้วยลักษณะการใช้งาน 2 ส่วน คือ ส่วนของ
ผู้ดูแลระบบและส่วนของผู้ใช้งาน มีรายละเอียดดังต่อไปนี้
4.1 ส่วนของผู้ดูแลระบบ (Admin)
ในส่วนของผู้ดูแลระบบนั้น สามารถทำการ ตรวจสอบ จัดการแก้ไข ลบ เพิ่มข้อมูลได้ในทุกส่วน
ต่าง ๆ ได้
เมื่อต้องการเข้าสู่ระบบในฐานะ ผู้ดูแลระบบ สามารถทำได้โดยการเลือกหมวดหมู่ “ผู้ดูแลระบบ”
ในหน้าเข้าสู่ระบบ






รูปที่ 4.1 แสดงหน้าจอการเข้าสู่ระบบในฐานะ “ผู้ดูแลระบบ”

56

เมื่อทำการกรอกข้อมูลลงในช่อง รหัสผู้ดูแลระบบและรหัสผ่าน ระบบจะทำการตรวจสอบข้อมูล
ในฐานข้อมูล หากข้อมูลตรงกัน ระบบจะแสดงป็อปอัพ “เข้าสู่ระบบสำเร็จ”




รูปที่ 4.2 แสดงหน้าต่างเมื่อเข้าสู่ระบบสำเร็จ
และหากข้อมูลที่กรอกลงไปไม่ตรงกับในฐานข้อมูล ระบบจะแสดงหน้าต่าง “เข้าสู่ระบบไม่
สำเร็จ”ให้ทำการกรอกข้อมูลให้ถูกต้อง



รูปที่ 4.3 แสดงหน้าต่างเมื่อเข้าสู่ระบบสำเร็จไม่สำเร็จ

57

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






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






รูปที่ 4.5 หน้าจอทะเบียนนักเรียนของผู้ดูแลระบบ

58

เมื่อผู้ดูแลระบบต้องการที่จะเพิ่มข้อมูล จะปรากฏหน้าจอแบบฟอร์มให้กรอกข้อมูลลงในช่องให้
ครบถ้วน และให้กดปุ่มเพิ่มข้อมูล เพื่อเป็นการเพิ่มข้อมูลลงในระบบ









รูปที่ 4.6 หน้าจอการเพิ่มข้อมูลนักเรียน ส่วนที่ 1











รูปที่ 4.7 หน้าจอการเพิ่มข้อมูลนักเรียน ส่วนที่ 2

59

เมื่อผู้ดูแลระบบต้องการแก้ไขข้อมูลนักเรียน จะปรากฏหน้าจอแบบฟอร์มแก้ไขข้อมูลนักเรียน
พร้อมข้อมูลปัจจุบัน ให้ทำแก้ไขข้อมูลที่ต้องการเปลี่ยน จากนั้นกดบันทึกเพื่อเป็นการอัพเดตข้อมูล






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



รูปที่ 4.9 หน้าต่างยืนยันการลบข้อมูล

60

เมื่อผู้ดูแลระบบต้องการส่งออกข้อมูลด้วยวิธีการปริ้น เมื่อกดปุ่มปริ้นระบบจะแสดงตัวเลือก
บัตรประจำตัวนักศึกษา
หากผู้ดูแลระบบเลือก ปริ้นบัตรประจำตัวนักศึกษา จะปรากฏหน้าต่างลอยแสดงตัวอย่างการ
ปริ้นของของบัตรประจำตัวนักศึกษา






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






รูปที่ 4.11 หน้าจอฟอร์มให้กรอกรหัสประจำตัวนักเรียน

61

เมื่อกรอกรหัสประจำตัวนักเรียนครบถ้วน แล้วเมื่อทำการกดปุ่มตรวจสอบผลการเรียน หน้า
จอแสดงผลการเรียนจะปรากฏ






รูปที่ 4.12 หน้าจอแสดงผลการเรียน
เมื่อผู้ดูแลระบบต้องการจัดการผู้ใช้งานในระบบ ในหน้าจอนี้จะแสดงรายชื่อผู้ใช้งานทั้งหมดที่มี
อยู่ในระบบ เพื่อให้ผู้ดูแลจัดการ ลบ แก้ไข เพิ่มข้อมูล และกำหนดสิทธิ์ให้แก่ผู้ใช้งาน






รูปที่ 4.13 หน้าจอแสดงรายชื่อผู้ใช้งาน

62

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






รูปที่ 4.14 หน้าจอเพิ่มข้อมูลผู้ใช้งาน
เมื่อผู้ดูแลระบบต้องการแก้ไขข้อมูลผู้ใช้งาน จะปรากฏหน้าจอแบบฟอร์มแก้ไขข้อมูลผู้ใช้งาน
พร้อมข้อมูลปัจจุบัน ให้ทำแก้ไขข้อมูลที่ต้องการเปลี่ยน จากนั้นกดบันทึกเพื่อเป็นการอัพเดตข้อมูล







รูปที่ 4.15 หน้าจอแก้ไขข้อมูลผู้ใช้งาน

63

เมื่อผู้ดูแลระบบต้องการลบข้อมูลผู้ใช้งาน จะปรากฎหน้าต่างแจ้งเตือนให้ยืนยันซ้ำเพื่อให้ทำการ
ลบข้อมูลให้สำเร็จ



รูปที่ 4.16 หน้าจอยืนยันซ้ำเพื่อลบผู้ใช้งาน
เมื่อผู้ดูแลระบบต้องการออกจากระบบ จะปรากฎป็อปอัพยืนยันอีกครั้งเพื่อออกจากระบบ




รูปที่ 4.17 หน้าจอยืนยันซ้ำเพื่อลบผู้ใช้งาน
เมื่อทำการยืนยันออกจากระบบ ระบบจะนำทางกลับไปหน้าจอเข้าสู่ระบบ







รูปที่ 4.18 หน้าจอกลับหน้าเข้าสู่ระบบ

64


4.2 ส่วนของผู้ใช้งาน (User)
ในส่วนของผู้ใช้งานนั้น สามารถทำการ ตรวจสอบ จัดการแก้ไข ลบ เพิ่มข้อมูลได้ในทุกส่วนต่าง ๆ
ได้ ตามสิทธิ์ที่ผู้ดูแลระบบกำหนดให้
เมื่อต้องการเข้าสู่ระบบในฐานะผู้ใช้งาน สามารถทำได้โดยการเลือกหมวดหมู่ “บุคลากร” แล้วทำ
การกรอกชื่อผู้ใช้งานและรหัสผ่านที่ได้รับจากผู้ดูแลระบบที่เป็นผู้กำหนด






รูปที่ 4.19 แสดงหน้าจอการเข้าสู่ระบบในฐานะ “ผู้ใช้งาน”
เมื่อทำการกรอกข้อมูลลงในช่อง รหัสผู้ดูแลระบบและรหัสผ่าน ระบบจะทำการตรวจสอบข้อมูล
ในฐานข้อมูล หากข้อมูลตรงกัน ระบบจะแสดงหน้าต่าง “เข้าสู่ระบบสำเร็จ”




รูปที่ 4.20 แสดงหน้าต่างเมื่อเข้าสู่ระบบสำเร็จ

65


และหากข้อมูลที่กรอกลงไปไม่ตรงกับในฐานข้อมูล ระบบจะแสดงหน้าต่าง “เข้าสู่ระบบไม่
สำเร็จ” ให้ทำการกรอกข้อมูลให้ถูกต้อง



รูปที่ 4.21 แสดงหน้าต่างเมื่อเข้าสู่ระบบสำเร็จไม่สำเร็จ
เมื่อทำการเข้าสู่ระบบสำเร็จระบบจำนำไปหน้าหลักของโปรแกรม เพื่อดูข้อมูลต่าง ๆ ประกอบตัว
ข้อมูลจากทะเบียน ข้อมูลนักเรียน ข้อมูลการศึกษา ข้อมูลบุคลากร






รูปที่ 4.22 หน้าจอหลักของโปรแกรม

66

เมื่อเข้าสู่หน้าจอของทะเบียนนักเรียนของผู้ใช้งาน ในหน้าจอนี้จะแสดงรายชื่อนักเรียนทั้งหมดที่มี
อยู่ในระบบ เพื่อให้ผู้ดูแลจัดการ ลบ แก้ไข และเพิ่มข้อมูลได้







รูปที่ 4.23 หน้าจอทะเบียนนักเรียนของผู้ใช้งาน

เมื่อผู้ใช้งานต้องการที่จะเพิ่มข้อมูล จะปรากฏหน้าจอแบบฟอร์มให้กรอกข้อมูลลงในช่องให้
ครบถ้วน แต่หากผู้ใช้งานไม่มีสิทธิ์เพิ่มข้อมูล จะปรากฏหน้าต่างแจ้งเตือน “ผู้ใช้งานไม่มีสิทธิ์เพิ่มข้อมูล”





รูปที่ 4.24 หน้าต่างแจ้งเตือน “ผู้ใช้งานไม่มีสิทธิ์เพิ่มข้อมูล”

67

แต่ถ้าผู้ใช้งานมีสิทธิ์เพิ่มข้อมูล จะแสดงฟอร์มเพิ่มข้อมูลนักเรียน ทำการกรอกข้อมูลลงในช่อง
ครบถ้วน และกดปุ่มเพิ่มข้อมูล เพื่อเป็นการเพิ่มข้อมูลลงในระบบ









รูปที่ 4.25 หน้าจอการเพิ่มข้อมูลนักเรียน ส่วนที่ 1










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

68

เมื่อผู้ดูแลระบบต้องการแก้ไขข้อมูลนักเรียน แต่หากผู้ใช้งานไม่มีสิทธิ์เพิ่มข้อมูล จะปรากฏ
หน้าต่างแจ้งเตือน “ผู้ใช้งานไม่มีสิทธิ์แก้ไขข้อมูล”




รูปที่ 4.27 หน้าต่างแสดงผู้ใช้งานไม่มีสิทธิ์แก้ไขข้อมูล
แต่หากผู้ใช้งานมีสิทธิ์แก้ไขจะปรากฏหน้าจอแบบฟอร์มแก้ไขข้อมูลนักเรียนพร้อมข้อมูลปัจจุบัน
ให้ทำแก้ไขข้อมูลที่ต้องการเปลี่ยน จากนั้นกดบันทึกเพื่อเป็นการอัพเดตข้อมูล






รูปที่ 4.28 หน้าจอแก้ไขข้อมูลนักเรียน

69

เมื่อผู้ดูแลระบบต้องการลบข้อมูลนักเรียน แต่หากผู้ใช้งานไม่มีสิทธิ์ลบข้อมูล จะปรากฏหน้าต่าง
แจ้งเตือน “ผู้ใช้งานไม่มีสิทธิ์ลบข้อมูล”




รูปที่ 4.29 หน้าจอผู้ใช้งานไม่มีสิทธิ์ลบข้อมูล
แต่หากผู้ใช้งานมีสิทธิ์ลบข้อมูลจะปรากฏหน้าต่างแจ้งเตือนให้ยืนยันซ้ำ เพื่อให้ทำการลบข้อมูลให้
สำเร็จ




รูปที่ 4.30 หน้าจอยืนยันการลบข้อมูล

70

เมื่อต้องการดูข้อมูลนักเรียน จะปรากฏหน้าฟอร์มข้อมูลต่าง ๆ ของนักเรียนที่มีอยู่ในระบบ






รูปที่ 4.31 หน้าจอข้อมูลนักเรียน
เมื่อต้องการส่งออกข้อมูลด้วยการปริ้น เมื่อกดปุ่มปริ้นระบบจะแสดงตัวเลือก ปริ้นบัตรประจำตัว
นักศึกษา
หากเลือก ปริ้นบัตรประจำตัวนักศึกษา จะปรากฏหน้าต่างลอยแสดงตัวอย่างการปริ้นของของ
บัตรประจำตัวนักศึกษา






รูปที่ 4.32 หน้าจอการปริ้นบัตรประจำตัวนักศึกษา

71

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






รูปที่ 4.33 หน้าจอฟอร์มให้กรอกรหัสประจำตัวนักเรียน

เมื่อกรอกรหัสประจำตัวนักเรียนครบถ้วน แล้วเมื่อทำการกดปุ่มตรวจสอบผลการเรียน หน้า
จอแสดงผลการเรียนจะปรากฏ





รูปที่ 4.34 หน้าจอแสดงผลการเรียน

72

เมื่อต้องการออกจากระบบ จะปรากฎหน้าต่างยืนยันอีกครั้งเพื่อออกจากระบบ




รูปที่ 4.35 หน้าจอยืนยันซ้ำเพื่ออกจากระบบ
เมื่อยืนยันออกจากระบบ ระบบจะนำทางกลับไปหน้าจอเข้าสู่ระบบ






รูปที่ 4.36 หน้าจอกลับหน้าเข้าสู่ระบบ

73

บทที่ 5
การสรุปผลการพัฒนาโครงงาน ปัญหา และข้อเสนอแนะ
จากการที่ได้มีการออกแบบและพัฒนาระบบ PNTC MS ซึ่งเป็นระบบการจัดการข้อมูลนักเรียน
เพื่อจัดเก็บข้อมูลต่าง ๆ เช่น ข้อมูลส่วนตัวนักเรียน ข้อมูลผลการเรียน รูปภาพ พัฒนาร่วมกับโดยใช้บน
แพลตฟอร์มวินโดว์ พัฒนาด้วยภาษา C# ภาษา XAML ร่วมกับ .net Framwork โดยใช้ My sql เป็นตัว
จัดการฐานข้อมูล สามารถสรุปผลการดำเนินงาน และปัญหาที่พบ พร้อมข้อเสนอแนะในการพัฒนาระบบ
ภายภาคหน้า เพื่อให้ระบบทำงานบรรลุได้ตามวัตถุประสงค์อย่างมีประสิทธิภาพและมีคุณภาพมากขึ้น
โดยแสดงข้อมูลแบ่งออกเป็น 2 ส่วน ดังนี้
5.1 สรุปผลการดำเนินงาน
จากการออกแบบและพัฒนาระบบ PNTC MS ได้ศึกษาความเป็นมา, วัตถุประสงค์, วิเคราะห์
และออกแบบระบบ, และทดสอบระบบ โดยพัฒนาระบบจัดการข้อมูลนักเรียน PNTC MS และแบ่งการ
ทำงานเป็น ดังนี้
- ระบบการเข้าสู่ระบบ Login
- ระบบการกำหนดสิทธิ์การใช้งาน
- ระบบการจัดการข้อมูลฐานทะเบียน
- ระบบการออกรายงาน Report
โดยมีผู้ใช้งานแบ่งได้ 2 ระดับคือ
1. ผู้ดูแลระบบ
ก) สามารถเข้าสู่ระบบได้
ข) สามารถกำหนดสิทธิให้ผู้ใช้งานได้
ค) สามารถเพิ่ม ลบ แก้ไข และค้นหา ฐานข้อมูลได้
ง) สามารถขายสินค้าและออกใบเสร็จได้
จ) สามารถพิมพ์รายงาน Report
ฉ) สามารถกำหนดสิทธิ์การใช้งานได้

74

2. ผู้ใช้งาน
ก) สามารถเข้าสู่ระบบได้
ข) สามารถดูและค้นหาฐานทะเบียนได้
ค) สามารถเพิ่มข้อมูลได้
ง) สามารถพิมพ์รายงาน Report
จากการดำเนินงานพัฒนาและใช้งานระบบ จะพบว่าประสิทธิภาพของระบบ PNTC MS มีผล 4
ด้านดังนี้
1. ด้านโครงสร้างและรูปแบบของระบบงาน ได้มีการออกแบบให้เป็นมิตรกับผู้ใช้งาน ปุ่มนำทางมี
ความชัดเจน ทำให้ผู้ใช้ที่เข้ามาใช้งานครั้งแรกไม่สับสน การออกแบบสามารถทำออกมาได้ดี
2. ด้านความเสถียรของระบบ สามารถส่งและรับข้อมูลได้อย่างไหลลื่นและรวดเร็ว มีความเสถียร
มั่นคงใช้งานได้นาน มีการออกแบบรองรับเมื่อระบบเกิดทำงานผิดพลาด
3. ด้านการใช้งาน สามารถทำงานได้ดี ไม่มีความซับซ้อน ช่วยให้ผู้ใช้สามารถจัดการข้อมูลได้อย่าง
มีประสิทธิภาพ โดยมีระบบการเก็บรักษาข้อมูลที่มีประสิทธิภาพ การค้นหาข้อมูลที่รวดเร็ว และการเข้าถึง
ข้อมูลที่สะดวกสบาย
4. ด้านประโยชน์ ระบบช่วยให้ข้อมูลที่ถูกต้องและเชื่อถือได้ เนื่องจากมีการควบคุมและการ
ตรวจสอบข้อมูลอย่างเข้มงวด ทำให้ผู้ใช้มั่นใจในความถูกต้องของข้อมูลที่ใช้ในการตัดสินใจ
5.2 ข้อเสนอแนะ
จากการพัฒนาระบบ PNTC MS ยังมีข้อเสนอแนะเพื่อนำไปพัฒนาระบบเพิ่มเติมให้ระบบการ
จัดการมีความสำบูรณ์มากยิ่งขึ้น ดังนี้
- ควรมีการให้นักศึกษาเข้าสู่ระบบเพื่อตรวจสอบและดูข้อมูลของตัวเองเบื้องต้นได้
- ควรมีการเพิ่มให้บุคลากรสามารถแก้ไขข้อมูลในส่วนตัวของตัวเองได้ในเบื้องต้นได้ด้วย

75









ภาคผนวก ข

76

ประวัติส่วนตัว


นายนาวิน จันทรถ
รหัสนักศึกษา 64209010008
เกิดวันที่ 3 มิถุนายน 2548
บ้านเลขที่ 27/3 หมู่ที่ 2 ต.ถ้ำน้ำผุด อ.เมืองพังงา จ.พังงา


นายวงศธร พุทธรักษา
รหัสนักศึกษา 64209010014
เกิดวันที่ 21 พฤษจิกายน 2548
บ้านเลขที่ 39 หมู่ที่ 6 ต. กะไหล อ. ตะกั่วทุ่ง จ. พังงา