บทท 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 กลมเปาหมาย

กลมเปาหมายคอบคคลทวไปทตองการศกษาหาความรเกยวกบค าศพทพนฐานทควรรจก

แตจะเจาะจงไปทเดกๆหรอนกเรยนระดบประถมตน เพอชวยในการทองจ าค าศพทและเขาใจใน

บทเรยนใหงายขนดวยการท าแบบฝกหดและแบบทดสอบ