บทท 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 หนารายชอนสต