การวิเคราะห์และออกแบบระบบresearch-system.siam.edu/images/coop/web_based_instruction_english_for... ·...
TRANSCRIPT
บทท 3
การวเคราะหและออกแบบระบบ
3.1 การวเคราะหขอมลเบองตน สบเนองจากการศกษาของนกเรยนชนประถมศกษาปท 1 ในปจจบนน น
นอกเหนอจากการศกษา ภายในหองเรยนแลว ตองมการศกษาจากนอกหองเรยนเพอเปนการ
ทบทวนหรอเพมเตมความร เนองมาจากการศกษาในยคปจจบนนน มความจ าเปนทจะตอง
แขงขนกน เพออนาคตของแตละคนในการศกษาตอในระดบมธยมและมหาวทยาลย ดงนนทาง
ผจดท าจงไดคดจดท าเวบชวยสอนภาษาองกฤษส าหรบฝกเรยนส าหรบเดกชนประถมศกษาปท
1 ขนมาเพอใหนกเรยนมความสนใจและเขาใจในภาษาองกฤษมากขน เพราะการน าเสนอจะอย
ในรปแบบ Web based instruction จงท าใหเรยนรไดงายและมความสนใจมากกวาการเรยนใน
หองเรยน หรอในหนงสอ โดยมาตรฐานทวไปจะใชหลกสตรการสอนภาษาองกฤษระดบ
ประถมศกษาตอนตน ทจะพฒนาเดกๆทงการ ฟง พด อาน เขยน จะเนนการสอนการสนทนา
โตตอบงายๆ การพดโดยใชส าเนยงถกตอง การรจกค าศพทเรยกสงตางๆรอบตว การฟงค าสง
ผานแบบฝกหดทสนกสนานหลากหลาย เดกจะไดรบการพฒนา แตเวบชวยสอนในรปแบบ
HTML5นจะเนนไปทเนอหาและค าศพทภาษาองกฤษพนฐานทควรรและการออกเสยงค าศพท
พนฐานแตละค า ตอไปนจะเปนการแสดงขนตอนการด าเนนงาน ของการพฒนาเวบชวยสอน
ภาษาองกฤษ
46
3.2 Site map
รปท 3.1 Site map แผนผงเวบไซต
3.3 Story Board
รปท 3.2 Story Board แสดงเนอหาหนา index
รปท 3.3 Story Board แสดงเนอหาหนา Register
รปท 3.4 Story Board แสดงเนอหาหนา Login
รปท 3.5 Story Board แสดงเนอหาหนา Instruction
รปท 3.6 Story Board แสดงเนอหาหนา เมนของแตละบท
รปท 3.7 Story Board แสดงเนอหาหนา บทเรยนบทท 1
รปท 3.8 Story Board แสดงเนอหาหนา บทเรยนบทท 2
รปท 3.9 Story Board แสดงเนอหาหนา บทเรยนบทท 3
รปท 3.10 Story Board แสดงเนอหาหนา บทเรยนบทท 4
รปท 3.11 Story Board แสดงเนอหาหนา บทเรยนบทท 5
รปท 3.12 Story Board แสดงเนอหาหนา Final Test
รปท 3.13 Story Board แสดงเนอหาหนา Score
รปท 3.14 Story Board แสดงเนอหาหนา Exercise บทท 1
รปท 3.15 Story Board แสดงเนอหาหนา Exercise บทท 2
รปท 3.16 Story Board แสดงเนอหาหนา Exercise บทท 3
รปท 3.17 Story Board แสดงเนอหาหนา Exercise บทท 4
รปท 3.18 Story Board แสดงเนอหาหนา Exercise บทท 5
Start
Username,Password
Decision Login Correct
Menu
Y
RegisterN
N
Username Password Name
Lastname
Y Decision Register Correct
Unit 1 = 1 Unit 2 = 1Unit 3 = 1 Unit 4 = 1
Unit 5 = 1Unit 1 = 1 Unit 2 = 1 Unit 3 = 1 Unit 4 = 1 Unit 5 = 1
Y Y Y Y
N N N N
Final Test
Y
Stop
Score
Y
N
3.4 Flow Chart
รปท 3.19 Flow Chart เวบชวยสอนภาษาองกฤษพนฐาน
3.5 Context Diagram
รปท 3.20 Context Diagram เวบชวยสอนภาษาองกฤษพนฐาน
User
ผลการสมครสมาชก
ผลการเขาสระบบ
ผลการท าแบบทดสอบ
แสดงคะแนนแบบทดสอบ
Username, Password
ขอมลสมครสมาชก
ขอมลแบบทดสอบ
คะแนนการทดสอบ
0
เวบชวยสอนภาษาองกฤษ
พนฐาน
3.6 Data Flow Diagram Level 1
รปท 3.21 Data Flow Diagram Level 1 เวบชวยสอนภาษาองกฤษพนฐาน
แบบทดสอบ D2
D1 ขอมลสมาชก
ประมวลผลคะแนน
1
สมครสมาชก
D1 ขอมลสมาชก
2
เขาสระบบ
3
เนอหาบทเรยน
4
แบบฝกหด
5
User
User
ขอมลผใช
ผลการสมคร
Username , Password
ผลการเขาสระบบ
User ขอมลแบบทดสอบ
ท าแบบทดสอบ
แสดงคะแนน,ชอผใช
เกบผลการท าแบบทดสอบ
แสดงชอผท าแบบทดสอบ
เกบขอมลสมาชก
แสดงขอมลสมาชก
question
PK Qno
Qgroup Qname Qans1 Qans2 Qans3 Qansabc Qpic
member
PK member_ID
username password name lastname cap_1 cap_2 cap_3 cap_4 cap_5
quserans
PK qus_id
user_no group_Q a1 a2 a3 a4 a5 a6 a7 a8 a9 a10 a11 a12 a13 a14 a15 a16 a17 a18 a19 a20
3.7 Entity Relationship Diagram
รปท 3.22 แสดงความสมพนธระหวางเอนทต ( Entity Relationship Diagram )
1
1
M M FK
FK
3.8 Data Dictionary
ตารางท 3.8.1 รายละเอยดตารางขอมล member
Table Name : member
Attribute Description Attribute Domain Type
member_ID รหสสมาชก int(4)
username ชอผใช varchar(100)
password รหสผใช varchar(20)
name ชอ varchar(100)
lastname นามสกล varchar(100)
Cap_1 เกบสถานะ การใชงาน tinyint(1)
Cap_2 เกบสถานะ การใชงาน tinyint(1)
Cap_3 เกบสถานะ การใชงาน tinyint(1)
Cap_4 เกบสถานะ การใชงาน tinyint(1)
Cap_5 เกบสถานะ การใชงาน tinyint(1)
Primary Key : member_ID
ตารางท 3.8.2 รายละเอยดตารางขอมล question
Table Name : question
Attribute Description Attribute Domain Type
Qno รหสขอสอบ int(2)
Qgroup กลมของค าถาม varchar(1)
Qname ค าถามของขอสอบ varchar(250)
Qans1 ค าตอบท 1 varchar(250)
Qans2 ค าตอบท 2 varchar(250)
Qans3 ค าตอบท 3 varchar(250)
Qansabc ค าตอบทถกตอง varchar(1)
Qpic รป varchar(250)
Primary Key : Qno
ตารางท 3.8.3 รายละเอยดตารางขอมล quserans
Table Name : quserans
Attribute Description Attribute Domain Type
qus_id รหสของค าตอบ int(2)
user_no รหสผเลอกค าตอบ varchar(1)
group_Q กลมของค าตอบ varchar(250)
a1 ค าตอบขอท 1 varchar(250)
a2 ค าตอบขอท 2 varchar(250)
a3 ค าตอบขอท 3 varchar(250)
a4 ค าตอบขอท 4 varchar(250)
a5 ค าตอบขอท 5 varchar(250)
a6 ค าตอบขอท 6 varchar(250)
a7 ค าตอบขอท 7 varchar(250)
a8 ค าตอบขอท 8 varchar(250)
a9 ค าตอบขอท 9 varchar(250)
a10 ค าตอบขอท 10 varchar(250)
a11 ค าตอบขอท 11 varchar(250)
a12 ค าตอบขอท 12 varchar(250)
a13 ค าตอบขอท 13 varchar(250)
a14 ค าตอบขอท 14 varchar(250)
ตารางท 3.8.4 รายละเอยดตารางขอมล quserans (ตอ)
Table Name : quserans
Attribute Description Attribute Domain Type
a15 ค าตอบท 15 varchar(250)
a16 ค าตอบท 16 varchar(250)
a17 ค าตอบท 17 varchar(250)
a18 ค าตอบท 18 varchar(250)
a19 ค าตอบท 19 varchar(250)
a20 ค าตอบท 20 varchar(250)
Primary Key : qus_id Foreign key: user_no , group_Q
3.9 การศกษาขอมล
3.9.1 ขอมลผใช
ขอมลผใชสามารถแบงออกเปน 2 ทางดวยกนดงนคอ
(1) การศกษาเนอหาในสวนของเนอหาทน ามาเสนอในเวบชวยสอนคอ ค าศพทจาก
หนงสอตางๆ ซงขอมลหนงสอตางๆเหลานจะถกน ามาวเคราะหแลวดงเอาเนอหาสวนทส าคญๆ
ออกมาสรปและน าไปลงในเวบชวยสอน
(2) ขอมลทางดานคอมพวเตอร ขอมลทางดานคอมพวเตอรคอสวนของโปรแกรมการ
สรางเวบชวยสอนซงโปรแกรมทใชคอ Marcromedia Flash 8, Adobe Photoshop CS5, PhotoScape
และ Macromedia Dreamweaver 8
3.9.2 กลมเปาหมาย
กลมเปาหมายคอบคคลทวไปทตองการศกษาหาความรเกยวกบค าศพทพนฐานทควรรจก
แตจะเจาะจงไปทเดกๆหรอนกเรยนระดบประถมตน เพอชวยในการทองจ าค าศพทและเขาใจใน
บทเรยนใหงายขนดวยการท าแบบฝกหดและแบบทดสอบ