บทท 3
วธการดำาเนนงาน
วธการดำาเนนงานของการออกแบบและพฒนาแอพพลเคชนระบบเชคชอนกศกษา บนระบบปฏบตการ Android โดยมรายละเอยดดงน
3.1 การศกษาและรวบรวมขอมล
ระบบงานเดม
ในสวนของระบบเดมของการเชคชอนสตนนภายในมหาลยยงไมมโปรแกรมเฉพาะทออกแบบมาในการเชคเวลาเขาเรยนของนสตนกศกษา การเชคเวลาเขาเรยนจะทำาโดยการบนทกลงใน word หรอ excel โดยบางทานกจะใหเซนชอใสกระดาษหรอขานชอแลวนำาไปคยลง word หรอ excel ทไดทำาไว เพอทจะนำาไปใชงานตอไป
จากการศกษาและเกบรวบรวมขอมลเรองการออกแบบและพฒนาแอพพลเคชนระบบเชคชอนกศกษา บนระบบปฏบตการ Android โดยไดศกษาขอมลจากหลายแหลง คอ ทางอาจารยทปรกษาโปรเจค ทางหนงสอตางๆ ทางเวบไซต และจากการสอบถามผรหลาย ๆ ทาน โดยไดเรมศกษาตงแต
- การเขยนแอพพลเคชน บน Android - การออกแบบหนาจอผใช - การใชงานฐานขอมล
38
- รปแบบการเกบขอมลการเขาเรยน- รปแบบการทำางานแอพพลเคชน
จากการศกษาและรวบรวมขอมลขางตนดงทกลาวไปเมอเกบรวบรวมขอมลไดครบถวนแลวจงนำามาเรยบเรยงเพอใชวเคราะหขอมลและจดทำาเอกสารในโครงงาน
3.2 การวเคราะหและออกแบบระบบ
3.2.1 System Flow Chart - Application
- Flow Chart การสมครสมาชก
39
ภาพประกอบท 3 - 1 : Flowchart แสดงการทำางานของการสมครสมาชก
อธบายการทำางาน Flow Chart การสมครสมาชก
1. เรมตนการทำางาน
40
2. กรอกขอมลการทำางาน3. ตรวจสอบขอมลสมาชก
3.1 ถาใช ไปขนตอนท 43.2 ถาไมใช แสดงขอความ "มชอนอยแลว" และ
กลบไปขนตอนท 24. ทำาการบนทกขอมลสมาชก5. แสดงขอความ "สมครสมาชกเรยบรอยแลว"6. จบการทำางาน
- Flow Chart การเขาสระบบ
41
ภาพประกอบท 3 - 2 : Flowchart แสดงการทำางานของการเขาสระบบ
อธบายการทำางาน Flow Chart การเขาสระบบ
1. เรมตนการทำางาน2. กรอก Username และ Password3. ตรวจสอบ Username และ Password
3.1. ถาใช แสดงขอความ "Login Success" และไปขนตอนท 4
3.2. ถาไมใช แสดงขอความ "Login Fail" และกลบไปขนตอนท 2
4. จบการทำางาน
- Flow Chart บนทกการเขาเรยน
42
ภาพประกอบท 3 - 3 : Flowchart แสดงการทำางานของบนทกการเขาเรยน
อธบายการทำางาน Flow Chart บนทกการเขาเรยน
1. เรมตนการทำางาน2. แสดงขอมลวชา3. เลอกวชา4. แสดงขอมลกลมเรยน5. เลอกกลมเรยน
43
6. แสดงขอมลนสตในวชาและกลมเรยนทเลอก7. เลอกสถานะการเขาเรยน8. ยนยนการบนทกขอมลการเขาเรยน
8.1. ถาใช ไปขนตอนท 98.2. ถาไมใช กลบไปขนตอนท 7
9. บนทกการเขาเรยน10. แสดงขอความ "บนทกขอมลแลว"11. จบการทำางาน
- Flow Chart ประวตการเขาเรยน
44
ภาพประกอบท 3 - 4 : Flowchart แสดงการทำางานการแสดงประวตการเขาเรยน
อธบายการทำางาน Flow Chart ประวตการเขาเรยน
1. เรมตนการทำางาน2. แสดงขอมลวชา3. เลอกวชา4. แสดงกลมเรยน5. เลอกกลมเรยน
45
6. แสดงขอมลนสตในวชาและกลมเรยนทเลอก7. จบการทำางาน
- Flow Chart การเพม, ลบ, แกไขขอมลนสต
46
ภาพประกอบท 3 - 5 : Flowchart แสดงการทำางานการเพม, ลบ, แกไขขอมลนสต
อธบายการทำางาน Flow Chart การเพม ลบ แกไขขอมลนสต
1. เรมตนการทำางาน2. เลอกเพม ลบ แกไขขอมลนสต3. ตรวจสอบการเพมขอมลนสต
3.1. ถาใช3.1.1. กรอกขอมลนสต 3.1.2. บนทกขอมลนสต และไปขนตอนท 6
3.2. ถาไมใช ไปขนตอนท 44. ตรวจสอบการลบขอมลนสต
4.1. ถาใช 4.1.1. แสดงรายชอนสต 4.1.2. เลอกนสต4.1.3. ยนยนการลบขอมลนสต
- ถาใช ทำาการลบขอมลนสต และไปขนตอนท 6
- ถาไมใช กลบไปขนตอนท 4 .14.2. ถาไมใช ไปขนตอนท 5
5. ตรวจสอบการแกไขขอมลนสต5.1. ถาใช
5.1.1. แสดงขอมลนสต
47
5.1.2. เลอกนสตทตองการแกไข5.1.3. กรอกขอมลนสต 5.1.4. บนทกการแกไขขอมลนสต
5.2. ถาไมใช กลบไปขนท 26. จบการทำางาน
- Flow Chart การเพม, ลบ, แกไขขอมลนสต
48
ภาพประกอบท 3 - 6 : Flowchart แสดงการทำางานการเพม, ลบ, แกไขขอมลวชาและกลมเรยน
49
อธบายการทำางาน Flow Chart การเพม ลบ แกไขขอมลวชาและกลมเรยน
1. เรมตนการทำางาน2. เลอกเพม ลบ แกไขขอมลวชาและกลมเรยน3. ตรวจสอบการเพมขอมลวชาและกลมเรยน
3.1. ถาใช 3.1.1. กรอกขอมลวชาและกลมเรยน3.1.2. บนทกขอมลวชาและกลมเรยน และไป
ขนตอนท 63.2. ถาไมใช ไปขนตอนท 4
4. ตรวจสอบการลบขอมลวชาและกลมเรยน4.1. ถาใช แสดงรายชอวชา
4.1.1. ตรวจสอบการแตะทหนาจอ- ถาแตะคาง เลอกลบวชา และไปขน
ตอนท 4.1.2- ถาไมใช
- แสดงรายชอกลมเรยน- เลอกกลมเรยน และไปขนตอน
ท 4.1.24.1.2. ยนยนการลบขอมลนสต
- ถาใช ทำาการลบขอมลนสต และไปขนตอนท 6
50
- ถาไมใช กลบไปขนตอนท 4 .14.2. ถาไมใช ไปขนตอนท 5
5. ตรวจสอบการแกไขขอมลวชาและกลมเรยน5.1. ถาใช กรอกขอมลวชาและกลมเรยน
5.1.1. บนทกการแกไขขอมลวชาและกลมเรยน
5.2. ถาไมใช กลบไปขนท 26. จบการทำางาน
- web site
- Flow Chart การสมครสมาชก
51
ภาพประกอบท 3 - 7 : Flowchart สมครสมาชก
คำาอธบายการทำางาน Flow Chart การสมครสมาชก
1. เรมตนการทำางาน2. กรอกขอมลการทำางาน3. ตรวจสอบขอมลสมาชก
3.1 ถาใช ไปขนตอนท 4
52
3.2 ถาไมใช แสดงขอความ "มชอนอยแลว" และกลบไปขนตอนท 2
4. ทำาการบนทกขอมลสมาชก5. แสดงขอความ "สมครสมาชกเรยบรอยแลว"6. จบการทำางาน
- Flow Chart นำาเขาขอมลนสต
ภาพประกอบท 3 - 8 : Flowchart นำาเขาขอมลนสต
อธบายการทำางาน Flow Chart การนำาเขาขอมลนสต
1. เรมตนการทำางาน2. เลอกไฟลขอมลนสต
53
3. บนทกขอมลนสต4. จบการทำางาน
3.2.2 แผนภาพ Data Flow Diagram
- Context Diagram
ภาพประกอบท 3 - 9 : Context Diagram ระบบเชคชอนสต
- DFD Level 11. สมครสมาชก
ภาพประกอบท 3 - 10 : DFD Level 1 สมครสมาชก
2. เขาสระบบ
54
ภาพประกอบท 3 - 11 : DFD Level 1 เขาสระบบ3. เชคชอ
ภาพประกอบท 3 - 12 : DFD Level 1 เชคชอ
4. ประวตการเขาเรยน
55
ภาพประกอบท 3 - 13 : DFD Level 1 ประวตการเขาเรยน
5. เพม ลบ แกไขขอมลนสต
ภาพประกอบท 3 - 14 : DFD Level 1 เพม ลบ แกไข ขอมลนสต
6. เพม ลบ แกไขขอมลวชาและกลมเรยน
56
ภาพประกอบท 3 - 15 : DFD Level 1 เพม ลบ แกไข ขอมลวชาและกลมเรยน
- DFD Level 2
1.สมครสมาชก
57
ภาพประกอบท 3 - 16 : DFD Level 2 Process 1 สมครสมาชก
2.เขาสระบบ
ภาพประกอบท 3 - 17 : DFD Level 2 Process 2 เขาสระบบ
58
3.เชคชอ
ภาพประกอบท 3 - 18 : DFD Level 2 Process 3 เชคชอ
4.ประวตการเขาเรยน
59
ภาพประกอบท 3 - 19 : DFD Level 2 Process 4 ประวตการเขาเรยน
5.เพม ลบ แกไขขอมลนสต
60
ภาพประกอบท 3 - 20 : DFD Level 2 Process 5 เพม ลบ แกไขขอมลนสต
61
6.เพม ลบ แกไขขอมลวชาและกลมเรยน
ภาพประกอบท 3 - 21 : DFD Level 2 Process 6 เพม ลบ แกไขขอมลวชาและกลมเรยน
62
3.2.3 ER Model
ภาพประกอบท 3 - 22 : ER Model ระบบเชคชอนสต
63
3.2.4 อธบายความสมพนธ ER Model
อาจารยหนงคนสามารถสอนไดหลายวชา
ภาพประกอบท 3 - 23 : แสดงความสมพนธระหวางอาจารยกบวชา
อาจารยหนงคนสารมารถบนทกขอมลการเขาเรยนไดหลายครง
ภาพประกอบท 3 - 24 : แสดงความสมพนธระหวางอาจารยกบขอมลการเขาเรยน
อาจารยหนงคนสามารถทำาการสมครสมาชกไดหนงครง
64
ภาพประกอบท 3 - 25 : แสดงความสมพนธระหวางอาจารยกบสมครสมาชก
อาจารยหนงคนสามารถทำาการเขาสระบบไดหลายครง
ภาพประกอบท 3 - 26 : แสดงความสมพนธระหวางอาจารยกบเขาสระบบ
นสตหนงคนสามารถเรยนไดหลายวชา
ภาพประกอบท 3 - 27 : แสดงความสมพนธระหวางนสตกบวชา
นสตหนงคนสามารถดขอมลการเรยนไดหลายครง
ภาพประกอบท 3 - 28 : แสดงความสมพนธระหวางนสตกบขอมลการเขาเรยน
65
วชาหนงวชามกลมเรยนหลายกลม
ภาพประกอบท 3 - 29 : แสดงความสมพนธระหวางวชากบกลมเรยน
กลมเรยนหนงกลมมนสตหลายคน
ภาพประกอบท 3 - 30 : แสดงความสมพนธระหวางกลมเรยนกบนสต
กลมเรยนหนงกลมมอาจารยหนงคน
ภาพประกอบท 3 - 31 : แสดงความสมพนธระหวางกลมเรยนกบอาจารย
3.2.5 Data Table Description
1.ตารางขอมลนสต (Student)
66
Attribute Name
Description
Constraint
Key Type Reference
Std_id รหสนสต Not null PK
Std_fname ชอนสต
major สาขา
faculty คณะ
sec_idรหสกลม
เรยนFK
ตารางประวตการเขาเรยน
subj_no เลขวชา FK ตารางวชาเรยน
ตารางประกอบท 3 – 1 : ตารางขอมลนสต
2.ตารางขอมลอาจารย (Teacher)
Attribute
NameDescription Const
raintKey Type
Reference
teac_id รหสอาจารย Not
null PK
67
Username ชอผเขาใช
Password รหสผเขาใช
ตารางประกอบท 3 - 2 : ตารางขอมลอาจารย
3.ตารางขอมลวชาเรยน (Subject)
Attribute
NameDescriptio
nConstraint
Key Type Reference
subj_id รหสวชา Not
null PKSubj_name ชอวชา
Std_id รหสนสต FK ตารางขอมลนสต
Teac_id รหสอาจารย FK ตารางขอมล
อาจารย
Sec_id รหสกลมเรยน PK ตารางกลมเรยน
ตารางประกอบท 3 - 3 : ขอมลวชาเรยน
68
4.ตารางขอมลกลมเรยน(Sec)
Attribute Name Description Const
raintKey Type Reference
Sec_id รหสกลมเรยน Not null PK
Sec_name ชอกลม
Std_no เลขนสต FK ตารางขอมลนสต
username ชอผใช FK ตารางขอมล
อาจารยsubj_n
o เลขวชา FK ตารางวชาเรยน
ตารางประกอบท 3 - 4 : ตารางขอมลกลมเรยน
5.ตารางขอมลเชคชอ (mycheck)
Attribute
NameDescriptio
nConstraint
Key Type Reference
check_id รหสเชคชอ Not
null PK
69
date วนท
sec_id รหสกลม FK ตารางกลมเรยน
username ชอผใช FK ตารางขอมล
อาจารย
his_id รหสสถานะ FK ตารางสถานะเขาเรยน
std_no เลขนสต FK ตารางขอมล
นสตsubj_n
o เลขวชา FK ตารางวชาเรยน
check_time ครงทเรยน
ตารางประกอบท 3 – 5 : ตารางขอมลเชคชอ
6.ตารางสถานะเขาเรยน
Attribute
NameDescription Const
raintKey Type
Reference
his_idรหสประวตการ
เขาเรยนNot null PK
status สถานะตารางประกอบท 3 - 6 : ตารางสถานะเขาเรยน
3.2. Graphic User Interface
70
Application
ภาพประกอบท 3 – 32 : GUI Application ระบบเชคชอนสต
- หนา Logo
71
ภาพประกอบท 3 - 33 : GUI Application Logo
- หนาหลก
ภาพประกอบท 3 - 34 : GUI Application หนาหลก
72
- หนาเลอกวชา
ภาพประกอบท 3 - 35 : GUI Application หนาเลอกวชา
- หนาเลอกกลม
73
ภาพประกอบท 3 - 36 : GUI Application หนาเลอกกลม- หนารายชอนสต
ภาพประกอบท 3 - 37 : GUI Application หนารายชอนสต
- หนาขอมลการเขาเรยน
74
ภาพประกอบท 3 - 38 : GUI Application หนาขอมลการเขาเรยน
- หนาเขาสระบบ
ภาพประกอบท 3 - 39 : GUI Application หนาเขาสระบบ
75
- หนาสมครสมาชก
ภาพประกอบท 3 - 40 : GUI Application หนาสมครสมาชก
- หนาเลอกวชา
76
ภาพประกอบท 3 - 41 : GUI Application หนาเลอกวชา
ภาพประกอบท 3 - 42 : GUI Application หนาเลอกวชา > กดคาง
ภาพประกอบท 3 - 43 : GUI Application หนาเลอกวชา > กดคาง > เลอกลบ
77
ภาพประกอบท 3 - 44 : GUI Application เลอกวชา > หลงยนยนลบ
ภาพประกอบท 3 - 45 : GUI Application หนาเลอกวชา กดคาง > เลอกแกไข
78
- หนาเพมวชา
ภาพประกอบท 3 - 46 : GUI Application หนาเพมวชา
- หนากลมเรยน
79
ภาพประกอบท 3 - 47 : GUI Application หนากลมเรยน
ภาพประกอบท 3 - 48 : GUI Application หนาเลอกวชา > กดคาง
- หนาเพมกลมเรยน
80
ภาพประกอบท 3 - 49 : GUI Application หนาเพมกลมเรยน
- หนารายชอนสต
ภาพประกอบท 3 - 50 : GUI Application หนารายชอนสต
81
ภาพประกอบท 3 - 51 : GUI Application หนารายชอนสต > เลอกชอนสตทตองการ
ภาพประกอบท 3 - 52 : GUI Application หนารายชอนสต > *สฟา=มา *สเทาเขา=ไมมา
82
ภาพประกอบท 3 – 53 : GUI Application หนารายชอ > กดคาง
- หนาเพมราชอนสต
83
ภาพประกอบท 3 - 54 : GUI Application หนาเพมรายชอนสต
Web
- หนาแรก
ภาพประกอบท 3 – 55 : GUI Web หนาแรก
- หนา Login
84
ภาพประกอบท 3 - 56 : GUI Web หนา Login
- หนาสมครสมาชก
ภาพประกอบท 3 - 57 : GUI Web หนาสมครสมาชก
- หนาเลอกวชา / Import
85
ภาพประกอบท 3 - 58 : GUI Web หนาเลอกวชา / Import
- หนา Import
ภาพประกอบท 3 - 59 : GUI Web หนา Import
86
- หนารายชอนสต
ภาพประกอบท 3 - 60 : GUI Web หนารายชอนสต
