ตัวอย่าง project

1

Lecture 3

หลกั การออกแบบเว็บฐานขอ มลู อยา งเปน ระบบ

ก า ร พั ฒ น า ร ะ บ บ ส า ร ส น เ ท ศ สํ า ห รั บ ใ ช ง า น ท า ง ธุ ร กิ จ ไ ม ว า จ ะ เ ป น อ อ ฟ ไ ล น ห รื อ อ อ น ไ ล น
เพอื่ ใหการพัฒนาเวบ็ ไซตแ ค็ตตาลอ็ กสินคาไดตรงตามความตองการของผูใชและตรงกับวัตถุประสงคมากที่สุด
ผูพัฒนาจะตองทําการวางแผนโครงการเพ่ือทําการศึกษาและวิเคราะหความเปนไปไดของโครงการในแงมุม
ตางๆ และทําการวเิ คราะหร ะบบเพอ่ื จาํ แนกขอมลู ทจี่ ําเปนและจดั ออกเปนกลมุ และกําหนดเปนความตองการ
ของระบบที่จะพฒั นาใหม

การวางแผนโครงการ

การวางแผนโครงการ ประกอบดว ยกจิ กรรมท่ีตองดาํ เนนิ การ ดงั นี้
1. การกําหนดปญ หา (Problem Definition)

จากการศกึ ษาปญหาของการดําเนินงานในปจ จบุ นั ของรา นขายสินคาแหงหน่ึง พบวาปญหาตางๆ
ของการดําเนินธุรกิจที่ไมมีประสิทธิภาพจนทําใหมีความตองการพัฒนาเว็บไซตแค็ตตาล็อกสินคาข้ึน สามารถ
สรปุ ไดดังนี้

1.1 ทางรานมีชองทางในการนําเสนอสินคาผานทางหนาราน สงโปรชัวรไปตามท่ีอยูลูกคาหรือ
แจกโปรชัวรตามสถานท่ีตางๆ เทาน้ัน ทําใหล ูกคาหรือผูสนใจทั่วไปไมมีชองทางในการศึกษาขอมูลของสินคา
กอ นตดั สนิ ใจเดินทางมาซ้ือทรี่ า น อกี ทั้งสน้ิ เปลืองคา ใชจ า ยในการจดั ทําโปรชัวรเ พ่อื สง ไปใหล ูกคา

1.2 ผูสนใจทั่วไปหรอื ลกู คาไมมีชอ งทางในการติดตอสอบถามขอมูลเก่ียวกับทางรานผานชองทาง
อ่ืน นอกจากการโทรศพั ทเ ขามาสอบถามซ่ึงบางคร้ังอาจทําใหลูกคา ไมไดรับขอมูล เนื่องจากไมมีพนักงานคอย
รับโทรศัพทหรือใหขอมลู ท่ถี กู ตอง

สามารถสรุปใหอยูในรูปแบบของแผนภูมิกางปลา (Cause-and-Effect Diagram) เพ่ือแสดงถึง
ประเดน็ ปญ หาหลักและปญหายอย ดงั ภาพ

ภาพที่ 1 แผนภมู กิ างปลาประเด็นปญ หาหลักและปญ หายอ ยของรา นขายสินคา

1 หลกั การออกแบบเวบ็ ฐานขอ้ มูลอยา่ งเป็ นระบบ | ผศ.ธชั กร วงษค์ าํ ชยั

2

2. การกาํ หนดขอบเขต (Scope Definition)
ก า ร กํ า ห น ด ข อ บ เ ข ต ร ะ บ บ จ ะ ก ร ะ ทํ า ห ลั ง จ า ก ท่ี ท ร า บ ถึ ง ป ญ ห า ดั ง ก ล า ว ม า ข า ง ต น

โดยจัดทําออกมาในรูปแบบเอกสารแสดงขอบเขตระบบ (System Scope Document) เพื่อนํามาใชกําหนด
ขอบเขตของระบบใหม ประกอบดวย รายละเอียดปญหา (Problem Statement) วัตถุประสงค
(Objectives) ขอบเขตของระบบ (System Scope) ผลประโยชนทางธุรกิจ (Business Benefits) และ
ความสามารถของระบบ (System Capabilities) ทั้งน้ีรายละเอียดตางๆ ที่ระบุไวในเอกสารแสดงขอบเขต
ระบบจะตองสอดคลองกับสาเหตุปญหาในแผนภูมิกางปลาท่ีกําหนดไว เอกสารแสดงขอบเขตระบบของราน
ขายสนิ คา ดงั ตารางท่ี 1

ตารางท่ี 1 เอกสารแสดงขอบเขตระบบของรานขายสินคา

เอกสารแสดงขอบเขตระบบ : เวบ็ ไซตแ คต็ ตาล็อกสินคา

1. รายละเอยี ดปญหา
จากการดําเนินงานในปจจุบันของรานขายสินคาแหงหน่ึง ซ่ึงดําเนินธุรกิจการขายสัตวเล้ียง ประกอบดวย

สุนัข แมว และปลา รวมไปถึงมีการขายอุปกรณตางๆ ท่ีเก่ียวกับสัตวเลี้ยงแตละประเภท ปจจุบันทางรานยังมี
รปู แบบการขายแบบเดิมๆ คือ ขายสินคาผานทางหนาราน และมีการทําโปรชัวรแจกเทานั้น ทําใหไมเปนท่ีรูจกั
เทาที่ควรเน่ืองจากไมมีชองทางในการประชาสัมพันธผานชองทางอ่ืน เชน เว็บไซต เปนตน อีกทั้งลูกคาหรือ
ผูสนใจทั่วไปไมมชี อ งทางในการศึกษาขอ มูลของสนิ คา กอ นตดั สนิ ใจเดนิ ทางมาซอื้ ท่รี าน ไมม ชี องทางในการตดิ ตอ
สอบถามขอ มลู เกยี่ วกบั ทางรานผานชองทางอนื่ นอกจากการโทรศัพทเขามาสอบถามซ่ึงบางคร้ังอาจทําใหลูกคา
ไมไ ดรับขอ มลู เนื่องจากไมม พี นักงานคอยรับโทรศพั ทหรอื ใหข อ มูลท่ีถูกตอง

ดังนั้น ทางรา นมีแนวคดิ ที่จะพฒั นาเวบ็ ไซตแ คต็ ตาล็อกสินคาขน้ึ เพอื่ เพิม่ ชองทางในการประชาสัมพันธสินคา
และชองทางในการแลกเปลี่ยนสอบถามขอมูลจากลูกคาและผูสนใจทั่วไป รวมท้ังเพ่ิมโอกาสในการทํายอดขาย
สนิ คา ท่ีเพิม่ ขน้ึ มีคนรจู กั มากขนึ้ และเพม่ิ ความสามารถในการแขงขนั กบั คแู ขง
2. วัตถุประสงค

2.1 เพือ่ เพ่ิมชอ งทางในการประชาสมั พันธส นิ คาของทางรานทม่ี ีจําหนา ย
2.2 เพ่อื เพิม่ ชอ งทางในการแลกเปลย่ี นสอบขอมลู เกยี่ วกบั สินคาระหวา งลูกคากับทางรา น

3. ขอบเขตของระบบ
ระบบเวบ็ ไซตแ ค็ตตาล็อกสนิ คา มกี ารทาํ งานแบบแยกสวนระหวา งผูเขา ชมเวบ็ ไซตก ับผูดแู ลระบบหรือเจาของ

ราน โดยมีขอบเขต ดังน้ี จัดการขอมูลระบบ (ผูดูแลระบบ, ประเภทสินคา, สินคา) แสดงขอมูลสินคา และ
การติดตอสอบถาม ในสวนของผูเขาชมเว็บไซตสามารถเขาใชงานไดผานโทรศัพทมือถือ, เคร่ืองอานพิกัด และ
เดสกทอ็ ปได
4. ผลประโยชนทางธุรกิจ

4.1 ชว ยเพม่ิ โอกาสในการทาํ ยอดขายสนิ คา
4.2 ชวยเพมิ่ ความสามารถในการแขง ขัน
4.3 ชว ยเปน ชอ งทางในการประชาสัมพันธแ ละชอ งทางการตดิ ตอ สอบถามขอมลู สินคา
5. ความสามารถของระบบ
5.1 ระบบมกี ารตรวจสอบขอ มลู ผใู ชก อนเขาจดั การขอมลู ระบบ
5.2 ระบบสามารถแสดงขอมลู สนิ คาแบบทั้งหมดและแสดงแบบแยกประเภทได
5.3 ระบบสามารถคนหาสนิ คา ตามประเภทหรือช่อื สนิ คา ได
5.4 ระบบสามารถตรวจสอบความครบถว นของขอมูลการสอบถามจากลูกคา กอนสง ได
5.5 รองรับการแสดงผลเว็บไซตในสวนของผูเขาชมบนอุปกรณโทรศัพทมือถือ, เครื่องอานพิกัด และ
เดสกท ็อปได

2 หลกั การออกแบบเวบ็ ฐานขอ้ มลู อยา่ งเป็นระบบ | ผศ.ธชั กร วงษค์ าํ ชยั

3

จากรายละเอยี ดตางๆ ภายในเอกสารแสดงขอบเขตของระบบจะถูกนําไปศึกษาความเปนไปไดในการ
พัฒนาระบบใหม ทางเลอื กท่ีจะใชในการพัฒนา ตนทนุ และกาํ หนดกิจกรรมและระยะเวลาในการพฒั นาระบบ
กอ นที่จะเริม่ การวเิ คราะหแ ละออกแบบระบบ

3. การกําหนดเวลาโครงการ (Project Schedule)
การกําหนดเวลาโครงการ เปนการกําหนดกิจกรรมตางๆ ที่ตองดําเนินการตั้งแตเริ่มโครงการ

จนกระท่ังปดโครงการ ซึ่งจะทําใหทราบระยะเวลาในการดําเนินงานในแตละกิจกรรมวามีความเหมาะสม
ห รื อ ไ ม แ ล ะ กิ จ ก ร ร ม ใ ด ค ว ร ทํ า ก อ น ห รื อ ห ลั ง ร ว ม ท้ั ง ทํ า ใ ห ท ร า บ ถึ ง ท รั พ ย า ก ร ต า ง ๆ
คาดการงบประมาณที่ตองใชในการดําเนินโครงการในแตละชวงเวลาของการดําเนินกิจกรรมได
โดยเคร่ืองมือในการกําหนดเวลาโครงการที่นิยม คือ แผนภูมิแกนต (Gantt Chart) และเพิรต/ซีพีเอ็ม
(Program Evaluation and Review Technique : PERT/Critical Path Method : CPM (Rouse, 2007)
มีรายละเอยี ดดังนี้

3.1 แผนภูมิแกนต เปนเครื่องมือที่ใชสําหรับแสดงแผนงานตางๆ ท่ีถูกกําหนดขึ้นและทราบถึง
ความคืบหนาของการดําเนินโครงการ โดยจะประกอบดวยแกนต้ังสําหรับแสดงงานหรือกิจกรรมท่ีกระทําใน
โครงการ และแกนนอนสําหรับแสดงระยะเวลาที่ใชในการดําเนินงานอาจจะแสดงเปนชวงเดือน สัปดาห หรือ
วนั แสดงตัวอยา งไดดงั ภาพที่ 2

ภาพท่ี 2 แผนภมู แิ กนต
ที่มา (Rouse, 2007)

3.2 เพิรต/ซีพีเอ็ม เปนแผนงานท่ีแสดงภาพรวมของโครงการดวยขายงาน แสดงถึงงานหรือ
กิจกรรมตางๆ และชวยในการวางแผนโครงการ ควบคุมโครงการ บริหารทรัพยากร และการบริหารโครงการ
ไดอยา งมีประสทิ ธภิ าพ โดยเพิรตไดรวมเอาคุณสมบัติของเทคนิคซีพีเอ็มมาไวใชงานรวมกันปจจุบันจึงใชคําวา
เพริ ต เพียงอยางเดียว แสดงตวั อยางขายงานเพิรตไดด ังภาพ

3 หลกั การออกแบบเวบ็ ฐานขอ้ มูลอยา่ งเป็ นระบบ | ผศ.ธชั กร วงษค์ าํ ชยั

4

ภาพที่ 3 ขายงานเพิรต
ท่ีมา (Rouse, 2007)

ในที่น้ีการกําหนดเวลาโครงการสําหรับพัฒนาเว็บไซตแค็ตตาล็อกสินคาจะใชแผนภูมิแกนต
ดังตารางท่ี 2
ตารางท่ี 2 กาํ หนดเวลาโครงการพฒั นาเวบ็ ไซตแ ค็ตตาลอ็ กสินคา

เม.ย. 2014 พ. ค. 2014

ลําดับ กจิ กรรม 6/4 13/4 20/ 4 27/4 4/5 11/ 5 18/5 25/5

1 วางแผนโครงการ
2 วิเคราะหร์ ะบบ
3 ออกแบบระบบ
4 พัฒนาระบบ
5 ทดสอบระบบ
6 จัดทาํ คู่มอื
7 ลงทะเบยี นขอพืนทีเว็บไซต์
8 บรรจุขนึ เวบ็ ไซต์แคต็ ตาล็อกสินคา้
9 ประเมินระบบ

จากตารางที่ 2 การพัฒนาเว็บไซตแค็ตตาล็อกสินคาจะกําหนดเวลาโครงการไวท้ังหมด
2 เดือน และแบงชวงเวลาการดําเนินงานออกเปนสัปดาห โดยมีกิจกรรมหลักท่ีตองดาํ เนินการ กิจกรรมเร่ิม
จากการวางแผนโครงการ วิเคราะหร ะบบ ออกแบบระบบ พฒั นาระบบ ทดสอบระบบ จัดทําคูมือ ลงทะเบียน
ขอพืน้ ทเ่ี ว็บไซต บรรจขุ น้ึ เวบ็ ไซตแ คต็ ตาล็อกสินคา และประเมนิ ระบบ ตามลําดับ ในการกําหนดชวงเวลาการ
ดาํ เนินในแตล ะกจิ กรรมก็คาํ นงึ ถงึ ความเหมาะสม

4 หลกั การออกแบบเวบ็ ฐานขอ้ มลู อยา่ งเป็ นระบบ | ผศ.ธชั กร วงษค์ าํ ชยั

5
อยางไรก็ตาม การกําหนดเวลาโครงการถือเปนสวนหน่ึงของการบริหารโครงการซ่ึงสามารถศึกษา
เพม่ิ เตมิ ไดในเอกสารหรอื ตําราท่เี กย่ี วของ

การวิเคราะหเว็บไซตฐ านขอ มลู กรณีศึกษาเวบ็ ไซตแคต็ ตาลอ็ กสนิ คา

ในการพัฒนาเว็บไซตแค็ตตาล็อกสินคามีกิจกรรมท่ีตองดําเนินการ โดยเริ่มตนจากการวิเคราะห
ระบบงานเดิมท่ีมีอยูในปจจุบัน กําหนดความตองการของระบบงานใหม เพื่อจะไดทราบถึงขั้นตอนของการ
ปฏิบัตงิ านปจจบุ นั และนาํ มาสรางแบบจําลองเชิงตรรก ประกอบดวย แผนภาพบริบท แผนภาพกระแสขอมูล
ระดับตางๆ ตามความละเอียดของระบบงาน และการสรางแบบจําลองขอมูลท่ีแสดงถึงความสัมพันธระหวาง
แฟมตารางตางๆ ในระบบ ดงั นี้

1. การวิเคราะหระบบงานปจจบุ ัน
จากรายละเอียดปญหาในเอกสารแสดงขอบเขตระบบรานขายสินคาในตารางที่กลาวถึงขางตน

นํามาวิเคราะหกระบวนการทํางานของระบบงานปจจุบัน โดยเขียนเปนข้ันตอนการทํางานของระบบงาน
ปจ จุบนั ไดดังภาพท่ี 4

ภาพท่ี 4 ขนั้ ตอนการประชาสมั พันธของรานขายสนิ คา (ระบบงานปจ จุบัน)
จากภาพท่ี 4 จะเห็นวาลูกคาตองเดินทางมาเพื่อดูสินคาท่ีราน ซึ่งไมลกู คาหรือผูสนใจท่ัวไปสามารถ
ทราบไดเลยวา ทางรา นมีสนิ คา ที่ตรงตามตอ งการหรอื มสี ินคา อะไรกอ นตดั สินใจเดินทางมาท่รี าน อกี ทงั้ ทางราน

5 หลกั การออกแบบเวบ็ ฐานขอ้ มูลอยา่ งเป็ นระบบ | ผศ.ธชั กร วงษค์ าํ ชยั

6
มกี ารสงโปรชัวรไปตามท่ีอยูลูกคาหรือแจกโปรชัวรตามสถานที่ตางๆ ซ่ึงทําใหสิ้นเปลืองคาใชจายในการจัดทํา
โปรชัวรเพื่อสงไปใหลูกคา รวมทั้งลูกคาหรือผูสนใจท่ัวไปโทรศัพทเขามาสอบถามซ่ึงบางคร้ังอาจทําใหลูกคา
ไมไดรบั ขอ มูล เนอ่ื งจากไมม ีพนักงานคอยรับโทรศพั ทห รือใหขอ มูลท่ถี ูกตอง

2. กาํ หนดความตองการของระบบงานใหม
ทางรานมีแนวคดิ ที่จะพัฒนาเว็บไซตแค็ตตาล็อกสินคาข้ึน เพ่ือแกไขปญ หาดังกลาวขางตน และ

นํามาวเิ คราะหความตองการของระบบงานใหม โดยเขยี นเปนข้นั ตอนการทาํ งานไดดังภาพท่ี 5

ภาพท่ี 5 ขัน้ ตอนการประชาสมั พนั ธของรานขายสนิ คา (ระบบงานใหม)
จากภาพจะเห็นวาลูกคาทั่วไปสามารถเขาชมขอมูลสินคา ดาวนโหลดโปรชัวร และติดตอสอบถามได
ผานทางเว็บไซตแค็ตตาล็อกสินคา เมื่อไดขอมูลสินคาที่ตรงกับความตองการแลวจึงเดินทางมาชมสนิ คาท่ีราน
ซึ่งทําใหลูกคาประหยัดทง้ั เวลาและคาใชจายในการเดินทาง อีกทั้งทางรานยังลดตนทุนการในการจัดทําโปร
ชัวรเพ่ือสงไปตามท่ีอยูลูกคาหรือจางพนักงานไปแจกโปรชัวรตามสถานที่ตางๆ รวมทั้งเพิ่มโอกาสในการทํา
ยอดขายสินคาทเี่ พ่มิ ข้ึน มคี นรูจ ักมากขนึ้ และเพ่ิมความสามารถในการแขง ขันกบั คแู ขง
2. การสรา งแบบจาํ ลองกระบวนการ

แบบจําลองกระบวนการ เปนแผนภาพที่ใชแทนฟงกชันการทํางาน และอธิบายถึงกระบวนการ
ทางธุรกิจ โดยแสดงใหเห็นภาพรวมในระบบในลักษณะแผนภาพหรือไดอะแกรม ซ่ึงแบบจําลองกระบวนการ
ของเว็บไซตแค็ตตาล็อกสินคาท่ีจะกลาวถึงในท่ีน้ีคือ แบบจําลองเชิงตรรกะ ประกอบท่ีดวย แผนภาพบริบท
และแผนภาพกระแสขอ มลู ดังน้ี

6 หลกั การออกแบบเวบ็ ฐานขอ้ มูลอยา่ งเป็ นระบบ | ผศ.ธชั กร วงษค์ าํ ชยั

7
2.1 แผนภาพบรบิ ท

จากการศึกษาปญหาของดังกลาวขางตน สามารถนํามาวิเคราะหเพื่อหารายละเอียดผูที่
เก่ียวของและขอบเขตการทํางานภาพรวมของระบบ ซึ่งจะไมมีหนวยเก็บขอมูล (Data Store) ของเว็บไซต
แคต็ ตาล็อกสินคา แสดงดังภาพท่ี 6

ภาพท่ี 6 แผนภาพบริบทของเวบ็ ไซตแคต็ ตาลอ็ กสินคา
จากภาพแสดงใหเห็นความสัมพันธระหวางลูกคาหรือผูสนใจ และเจาของรานตอเวบ็ ไซตแคต็ ตาล็อก
สินคา โดยลูกคาหรือผูเขาชมจะสามารถคนหา เรียกดูสินคา ดาวนโหลดโปรชัวรสินคา และสอบถามเก่ียวกับ
ขอมูลของสินคาได สวนเจาของรานจะทําหนาท่ีในการจัดการเกี่ยวกับขอมูลหลักของระบบ ประกอบดวย
ขอมลู ประเภทสนิ คา ขอมูลสินคา ขอมูลผูดูแลระบบ และขอมูลการตดิ ตอสอบถาม โดยเจาของรานจะตองทํา
การเขา ระบบ (Login) กอนจึงจะสามารถเขา ไปบรหิ ารจดั การขอ มลู ภายในระบบได

2.2 แผนภาพกระแสขอมลู ระดับที่ 1 (Data Flow Diagram Level 1)
จาก “แผนภาพบริบทระบบเว็บไซตแค็ตตาล็อกสินคา” สามารถนํามาวิเคราะหเพื่อหา

รายละเอียดผูที่เกี่ยวของ แหลงเก็บขอมูล และกระบวนการท่ีตองการทํางานภายในระบบ แสดงได
ดังภาพที่ 7

7 หลกั การออกแบบเวบ็ ฐานขอ้ มลู อยา่ งเป็ นระบบ | ผศ.ธชั กร วงษค์ าํ ชยั

8

ภาพที่ 7 แผนภาพกระแสขอ มลู ระดับที่ 1 ของเว็บไซตแ ค็ตตาลอ็ กสนิ คา
จากภาพท่ี 7 แสดงใหเห็นรายละเอยี ดของกระแสขอมูลประกอบดวย 4 กระบวนการ คอื

กระบวนการที่ 1 จัดการขอมูลระบบ ใชสําหรับจัดการขอมูลผูดแู ลระบบ ขอมูลประเภทสินคา
ขอ มูลสนิ คา ขอ มลู โปรชวั รสนิ คา และขอ มลู การติดตอ โดยเจาของรา นจะมีสิทธใิ นการจัดการขอ มลู ทั้งหมด

กระบวนการที่ 2 แสดงสินคา ใชส ําหรบั เรียกสินคา มาแสดงผลบนหนาเว็บไซต และรวมไปถึงการ
คน หาสนิ คา

กระบวนการท่ี 3 ดาวนโหลดโปรชัวรสินคา ใชสําหรับใหลูกคาหรือผูเขาชมดาวนโหลดโปรชัวร
สนิ คาจากทางราน

8 หลกั การออกแบบเวบ็ ฐานขอ้ มูลอยา่ งเป็ นระบบ | ผศ.ธชั กร วงษค์ าํ ชยั

9
กระบวนการท่ี 4 ตดิ ตอ สอบถาม ใชสําหรบั รบั คาํ ถามจากผูเ ขาชมเว็บไซตก รณีที่ตอ งการสอบถาม
ขอ มลู เก่ยี วกบั ขอมลู สนิ คา และบรกิ าร
2.3 แผนภาพกระแสขอมูลระดบั ที่ 2 (Data Flow Diagram Level 2)

แผนภาพกระแสขอมูลระดับที่ 2 เปนการนําเอากระบวนการยอยของแตละกระบวนการใน
แผนภาพกระแสขอมูลระดับท่ี 1 มากระจาย เพ่ือแสดงใหเห็นถึงรายละเอียดและความเกี่ยวของกันของ
กระบวนการกับขอมลู ภายใน สามารถอธบิ ายการทํางานของแตละกระบวนการยอยไดด ังภาพท่ี 8 – 11

ภาพท่ี 8 แผนภาพกระแสขอมูลระดบั ที่ 2 กระบวนการที่ 1
จากภาพท่ี 8 แสดงรายละเอียดกระแสขอมูลภายในกระบวนการที่ 1 ประกอบดวย 6 กระบวนการ
ยอ ย คอื

กระบวนการที่ 1.1 เขาระบบ ใชสําหรับตรวจสอบขอมูลผูใชสําหรับเขาไปบริหารจัดการขอมูล
ภายในระบบ

9 หลกั การออกแบบเวบ็ ฐานขอ้ มูลอยา่ งเป็ นระบบ | ผศ.ธชั กร วงษค์ าํ ชยั

10
กระบวนการท่ี 1.2 จดั การขอ มลู ผูด แู ลระบบ ใชส ําหรับเพม่ิ ลบและแกไข ขอมลู ผูด แู ลระบบ
กระบวนการท่ี 1.3 จัดการขอมลู ประเภทสินคา ใชสําหรบั เพมิ่ ลบและแกไ ข ขอ มูลประเภทสินคา
กระบวนการท่ี 1.4 จดั การขอ มลู สนิ คา ทใ่ี ชส าํ หรับเพ่ิม ลบและแกไ ข ขอมลู สินคา
กระบวนการที่ 1.5 จดั การขอ มลู โปรชัวรสนิ คา ใชส าํ หรบั เพิม่ และลบขอมูลโปรชวั รสินคา
กระบวนการที่ 1.6 จัดการขอมูลการติดตอสอบถาม ใชสําหรับเรียกดู และลบขอมูลการติดตอ
สอบถาม
ซึ่งผูท ่มี ีสทิ ธ์เิ ขา ใชงานกระบวนการท่ี 1.2, 1.3, 1.4, 1.5 และ 1.6 จะตองผานการตรวจสอบขอมูลผูใช
จากกระบวนการที่ 1.1 กอน

ภาพที่ 9 แผนภาพกระแสขอมูลระดับที่ 2 กระบวนการที่ 2

10 หลกั การออกแบบเวบ็ ฐานขอ้ มูลอยา่ งเป็ นระบบ | ผศ.ธชั กร วงษค์ าํ ชยั

11
จากภาพท่ี 9 แสดงรายละเอยี ดกระแสขอ มลู ภายในกระบวนการ 2 ประกอบดว ย 4 กระบวนการยอย
คือ

กระบวนการที่ 2.1 เลอื กสินคา ใชสําหรับแสดงขอ มูลสินคาทั้งหมด เพื่อใหผ ูเขาชมเว็บไซตเลอื กดู
กระบวนการที่ 2.2 แสดงขอมูลสินคา ใชสําหรับรายละเอียดท้ังหมดของสินคาแตละรายการ
ตามทีผ่ เู ขาชมเวบ็ ไซตค ลกิ เลอื ก
กระบวนการที่ 2.3 คนหาสินคา ใบสําหรับตรวจสอบคําหลัก (Keyword) การคนหาขอมูลสินคา
ตามทผ่ี เู ขาชมเว็บไซตตองการ (กาํ หนดใหค น หาจากช่ือสนิ คา )
กระบวนการท่ี 2.4 แสดงขอมูลที่ไดจ ากการคนหา ใชสําหรับแสดงรายการสินคาท่ีเก่ียวของกับ
คําหลักที่ใชในการคนหาท้ังหมด เม่ือมีการคลิกเลือกดูท่ีรายการสินคาใดก็จะกลับไปทํางานท่ีกระบวนการท่ี
2.2

ภาพท่ี 10 แผนภาพกระแสขอ มูลระดับที่ 2 กระบวนการท่ี 3
จากภาพที่ 10 แสดงรายละเอียดกระแสขอมูลภายในกระบวนการท่ี 3 ประกอบดวย
2 กระบวนการยอ ย คือ

กระบวนการที่ 3.1 แสดงโปรชัวรสินคา ใชสําหรับแสดงขอมูลโปรชัวรสินคาทั้งหมดเพ่ือใหลูกคา
หรอื ผูเขา ชมเลือกดาวนโหลด

กระบวนการท่ี 3.2 ดาวนโหลด ใชสาํ หรับดาวนโหลดรายการโปรชัวรสินคาตามท่ลี ูกคาหรือผูใช
เลือก

11 หลกั การออกแบบเวบ็ ฐานขอ้ มลู อยา่ งเป็ นระบบ | ผศ.ธชั กร วงษค์ าํ ชยั

12

ภาพที่ 11 แผนภาพกระแสขอมูลระดบั ท่ี 2 กระบวนการที่ 4
จากภาพที่ 11 แสดงรายละเอียดกระแสขอมูลภายในกระบวนการท่ี 4 ประกอบดวย
3 กระบวนการยอ ย คอื

กระบวนการที่ 4.1 รับขอมูล ใชสําหรับรับขอมูลการติดตอสอบถามจากลูกคาหรือผูเขาชม
เว็บไซต

กระบวนการที่ 4.2 บันทึกขอมูล ใชสําหรบั สงขอมูลการติดตอสอบถามไปบันทึกท่ีแฟมตารางใน
ฐานขอมูล

กระบวนการที่ 4.3 ยืนยันการสอบถามขอมูล ใชสําหรับแจงผลการสงขอมูลการติดตอสอบถาม
กลับไปยงั ลกู คาหรือผเู ขา ชม

3. การสรา งแบบจาํ ลองขอ มลู
แบบลองขอมลู เปนเทคนิคที่นํามาใชอธิบายถึงโครงสรางและความสัมพันธระหวางขอมูลภายใน

ระบบ รายละเอียดแบบจําลองขอ มูลของเว็บไซตแค็ตตาล็อกสินคา มดี ังนี้
3.1 สรางแบบจาํ ลองอีอาร
แบบจําลองอีอาร (Entity Relationship Diagram) คือ แบบจําลองขอมลู เชงิ แนวคิดทใ่ี ชใน

การนําเสนอรายละเอียดของขอมูลตางๆ ในระบบงานวามแี ฟมตาราง (Table File) และเขตขอมูล (Field) มี
อะไรบา ง มคี วามสัมพันธของขอมูล ความหมายและเง่ือนไขบงั คับความสอดคลองกันของขอมูล อีกท้ังนยิ มใช
กนั อยา งแพรหลายในการออกแบบฐานขอ มลู จากแผนภาพกระแสขอมูลระดับท่ี 1 ของ “เว็บไซตแค็ตตาล็อก
สินคา ” ดงั ภาพท่ี 7 ประกอบดว ยตารางขอ มูลดังแสดงในตารางท่ี 3

12 หลกั การออกแบบเวบ็ ฐานขอ้ มูลอยา่ งเป็ นระบบ | ผศ.ธชั กร วงษค์ าํ ชยั

13

ตารางที่ 3 แฟมตารางท่เี กยี่ วของในเว็บไซตแคต็ ตาลอ็ กสินคา

ลําดับ ชอ่ื แฟมตารางภาษาไทย ชื่อแฟม ตารางภาษาองั กฤษ

1 ผดู แู ลระบบ tbl_admin

2 ประเภทสินคา tbl_protype

3 สินคา tbl_product

4 โปรชัวรส ินคา tbl_brochure

5 การติดตอ tbl_contact

สามารถนํามาเขียนแบบจําลองอีอาร เพอื่ แสดงความสัมพนั ธของแฟม ตารางและเขตขอมูลไดด งั ภาพท่ี 12

admin_img

ภาพที่ 12 แบบจําลองออี ารของเวบ็ ไซตแ คต็ ตาลอ็ กสินคา

3.2 พจนานุกรมขอมลู
พจนานุกรมขอมูล (Data Dictionary) คือ เครื่องมือท่ีชวยในการจัดเก็บรายละเอียดตางๆ

เกย่ี วกับขอมลู ใหเปนหมวดหมู ทําใหสามารถคนหารายละเอียดท่ีตองการไดโดยสะดวก อีกทั้งเปนส่ือกลางให
ผูออกแบบฐานขอมูลและผูพัฒนาระบบฐานขอมูลไดเขาใจตรงกัน สามารถสรางฐานขอมูลไดถูกตองตาม
ผูออกแบบ จากภาพที่ 12 นาํ มาเขยี นพจนานกุ รมขอมลู ไดดงั นี้

13 หลกั การออกแบบเวบ็ ฐานขอ้ มลู อยา่ งเป็นระบบ | ผศ.ธชั กร วงษค์ าํ ชยั

14

3.2.1 แฟมตารางผูดูแลระบบ ใชเก็บขอมูลผูดูแลระบบ ประกอบดวยเขตขอ มูลที่มีชนิด
ขนาดและความหมาย ดังตารางท่ี 4

ตารางที่ 4 รายการเขตขอมูลของแฟม ตารางผูด ูแลระบบ

เขตขอ มูล ชนดิ /ขนาด ความหมาย PK FK หมายเหตุ
Yes auto_increment
admin_id int (11) ลําดบั
admin, user
admin_firstname varchar(50) ชอ่ื
current_timestamp
admin_lastname varchar(50) นามสกุล

admin_username varchar(50) ชอื่ ผใู ช

admin_password varchar(20) รหัสผา น

admin_level varchar(10) ระดับการใชงาน

admin_phone varcahr(20) เบอรโทรศพั ท

admin_email varchar(150) อีเมล

admin_img varchar(200) รูปภาพ

dateinsert timestamp วันท่ีเพิม่ ขอ มลู

3.2.2 แฟมตารางประเภทสินคา ใชเก็บขอมูลประเภทสินคา ประกอบดวยเขตขอมูลที่มี
ชนิด ขนาดและความหมาย ดงั ตารางท่ี 5

ตารางที่ 5 รายการเขตขอ มูลของแฟมตารางประเภทสินคา

เขตขอมลู ชนดิ /ขนาด ความหมาย PK FK หมายเหตุ
Yes auto_increment
pro_typeid int (11) รหัสประเภทสนิ คา
current_timestamp
pro_typename varchar(100) ประเภทสนิ คา

dateinsert timestamp วันที่เพิ่มขอมูล

3.2.3 แฟมตารางสินคา ใชเก็บขอมูลสินคา ประกอบดวยเขตขอมูลท่ีมีชนิด ขนาดและ

ความหมาย ดังตารางที่ 6

ตารางที่ 6 รายการเขตขอ มลู ของแฟม ตารางสินคา

เขตขอ มลู ชนดิ /ขนาด ความหมาย PK FK หมายเหตุ

pro_id int (11) รหัสสนิ คา Yes auto_increment

pro_name varchar(100) ช่ือสนิ คา

pro_detail text รายละเอียดสนิ คา

pro_price_cost float(10,2) ราคาตนทนุ สนิ คา

pro_price_sale float(10,2) ราคาขายสินคา

pro_qty int(11) จาํ นวนสนิ คา

pro_img varchar(200) พาธรูปสินคา หลัก

pro_typeid int(11) รหัสประเภทสนิ คา Yes อางองิ :tbl_protype

14 หลกั การออกแบบเวบ็ ฐานขอ้ มลู อยา่ งเป็นระบบ | ผศ.ธชั กร วงษค์ าํ ชยั

15

dateinsert timestamp วนั ที่เพ่ิมขอมูล current_timestamp

3.2.4 แฟมตารางโปรชวั รส นิ คา ใชเ กบ็ ขอมลู โปรชวั รส ินคา สินคา ประกอบดว ยเขตขอ มูลที่

มชี นิด ขนาดและความหมาย ดงั ตารางที่ 7

ตารางท่ี 7 รายการเขตขอมูลของแฟมตารางโปรชวั รสินคา

เขตขอ มลู ชนิด/ขนาด ความหมาย PK FK หมายเหตุ
Yes auto_increment
brochure_id int (11) รหสั โปรชวั รส ินคา
current_timestamp
brochure_name varchar(100) ชอื่ โปรชัวรส ินคา

brochure_file Varchar(255) ไฟลโปรชวั รส นิ คา

dateinsert timestamp วนั ที่เพ่ิมขอมูล

3.2.5 แฟม ตารางการตดิ ตอ ใชเกบ็ ขอมลู การตดิ ตอ ประกอบดวยเขตขอมูลท่ีมีชนิด ขนาด
และความหมาย ดงั ตารางที่ 8

ตารางท่ี 8 รายการเขตขอมลู ของแฟม ตารางการติดตอ

เขตขอมูล ชนดิ /ขนาด ความหมาย PK FK หมายเหตุ
Yes auto_increment
contact_id int (11) ลําดับการตดิ ตอ
current_timestamp
contact_name varchar(100) ชื่อผูติดตอ

contact_email vachar(150) อีเมลผูตดิ ตอ

contact_topic vachar(200) หวั ขอการตดิ ตอ

contact_detail text รายละเอยี ดติดตอ

dateinsert timestamp วนั ทเ่ี พ่ิมขอ มลู

กลาวโดยสรปุ การเร่ิมตน พฒั นาระบบสารสนเทศเพ่ือใหไดตรงตามความตองการของผูใชและตรงกับ
วัตถุประสงคมากท่ีสุด โดยในระยะท่ี 1 ตองทําการวางแผนโครงการเพื่อทําการศึกษาและวิเคราะหความ
เปนไปไดของโครงการในแงมุมตางๆ ประกอบดวย การกําหนดปญหา การกําหนดขอบเขต และกําหนดเวลา
โครงการ เมื่อไดทราบถึงปญหาและขอบเขตงาน รวมไปถึงกําหนดเวลาในการดําเนินการโครงการเรียบรอย
แลว ก็เขาสูระยะท่ี 2 เพื่อการวิเคราะหระบบเพื่อจําแนกขอมูลท่ีจําเปนและแบงออกเปนกลุม แลวนํามา
กําหนดเปนความตองการของระบบที่จะพฒั นาใหม โดยเขยี นเปน แบบจาํ ลองกระบวนการ เพื่อใชแทนฟงกชัน
การทาํ งาน และอธบิ ายถึงกระบวนการทํางานภาพรวม รวมทั้งอธิบายถึงโครงสรางและความสัมพันธระหวาง
ขอมลู ภายในระบบ ประกอบดวย แผนภาพบริบท แผนภาพกระแสขอ มลู และแบบจาํ ลองขอมลู

การจัดหาระบบ

การจัดหาระบบ (System Acquisition) ถือเปนกิจกรรมท่ีนักวเิ คราะหระบบสามารถคาดการณวา
ระบบท่ที ําการวางแผนและวิเคราะหไวแลว นั้นจะดําเนินการจัดหาระบบดวยวิธีการใด ซึ่งโดยท่ัวไปการจัดหา
ระบบจะมี 3 วิธี คอื การพัฒนาโปรแกรมขนึ้ เอง การซอ้ื ซอฟตแวรสําเรจ็ รูป และการวา จางหนว ยงานภายนอก

15 หลกั การออกแบบเวบ็ ฐานขอ้ มูลอยา่ งเป็นระบบ | ผศ.ธชั กร วงษค์ าํ ชยั

16

โดยแตละวธิ ีตางก็มขี อดีและขอ เสียท่ีแตกตางกันออกไป สามารถเลือกใชไดตามความเหมาะสมของระบบหรอื
ตามสถานการณ ซ่งึ รายละเอียดของการจัดหาระบบทง้ั 3 วิธี สามารถศกึ ษาเพมิ่ ไดจ ากเอกสารทเ่ี กี่ยวของ การ
พฒั นาเวบ็ ไซตแคต็ ตาลอ็ กสนิ คาจะเลอื กใชวธิ ีการพฒั นาโปรแกรมขน้ึ เองดว ยบคุ ลากรภายในหนวยงาน เพื่อให
สามารถควบคมุ การดําเนินงานและพัฒนาโปรแกรมข้ึนใหตอบสนองความตองการขององคก รและผูใชมากที่สุด
อีกท้ังไมตองกังวลกับการเสียคาใชจายเพ่ิมกับการปรับเปล่ียนโปรแกรมเพ่ิมเติมแตอยางใด อีกทั้งหนวยงาน
สามารถจัดหาฮารดแวรที่เหมาะสมและซอฟตแวรท่ีใชใหแกทีมพัฒนาระบบ ในที่นี้จะอธิบายเฉพาะสวนของ
การจัดหาซอฟตแวรท่ีใชสําหรับการพัฒนาเว็บไซตแค็ตตาล็อกสินคา ประกอบดวย โปรแกรมสําหรับพัฒนา
โปรแกรมประยุกตบนเวบ็ และโปรแกรมบริการเวบ็ และจดั การฐานขอมลู

การวิเคราะหเว็บเพจตางๆ ท่เี ก่ียวของ

กอนที่เร่ิมตนกําหนดโครงสรางขอมูล กําหนดการสืบทอดขอมูล สรางแผนท่ีเว็บไซต และ
วางผังหนาเว็บเพจของเว็บไซตน้ัน เพื่อใหสามารถดําเนินการในกิจกรรมตางๆ เหลาน้ีไดงายย่ิงข้ึน ผูพัฒนา
จาํ เปนตอ งทําการวิเคราะหเ วบ็ เพจตางๆ ทเี่ ก่ียวของในแตละกระบวนการดังท่ีไดวิเคราะหระบบไวขางตนวามี
เวบ็ เพจอะไรบา ง ซ่งึ ในการวเิ คราะหเวบ็ เพจทเี่ กยี่ วขอ งในแตก ระบวนการของเว็บไซตแค็ตตาล็อกสินคา แสดง
ไดดงั ตาราง

ตารางท่ี 9 แสดงเวบ็ เพจท่ีเก่ียวของในแตล ะกระบวนการของเว็บไซตแคต็ ตาลอ็ กสินคา

กระบวนการ เวบ็ เพจ หนา ท่ี

1. จดั การขอ มูลระบบ

1.1 เขาระบบ login_admin.php สาํ หรบั ผดู ูแลระบบลงช่อื เขา ใช

menu_admin.php แสดงรายการเมนจู ัดการขอ มลู

ระบบ

1.2 จัดการขอ มูลผูดแู ลระบบ list_admin.php แสดงรายละเอยี ดผดู ูแลระบบ

insert_admin.php เพิม่ ขอ มลู ผูดแู ลระบบ

update_admin.php แกไ ขขอมลู ผดู ูแลระบบ

delete_admin.php ลบขอมูลผูดูแลระบบ

1.3 จัดการขอ มลู ประเภท list_protype.php แสดงรายละเอียดประเภทสินคา

สนิ คา insert_protype.php เพ่มิ ขอมลู ประเภทสนิ คา

update_protype.php แกไ ขขอมลู ประเภทสินคา

delete_protype.php ลบขอมูลประเภทสินคา

16 หลกั การออกแบบเวบ็ ฐานขอ้ มูลอยา่ งเป็นระบบ | ผศ.ธชั กร วงษค์ าํ ชยั

17

1.4 จัดการขอ มูลสนิ คา list_product.php แสดงรายละเอยี ดสนิ คา

insert_product.php เพ่ิมขอมูลสนิ คา

update_product.php แกไ ขขอมลู สินคา

delete_product.php ลบขอมูลสนิ คา

1.5 จัดการขอมลู โปรชัวร list_brochure.php แสดงรายละเอยี ดโปรชวั รส ินคา

สินคา insert_ brochure.php เพิ่มขอมลู โปรชวั รส นิ คา
delete_ brochure.php ลบขอ มลู โปรชวั รสินคา

1.6 จดั การขอ มูลการตดิ ตอ list_contact.php แสดงรายละเอยี ดการตดิ ตอ

delete_contact.php ลบขอ มูลการตดิ ตอ

2. แสดงขอมลู สนิ คา

2.1 เลอื กสินคา index.php แสดงรายการสินคา ท้ังหมด

สาํ หรบั ใหผ ูใชเลือกดูสนิ คา (หนา

โฮมเพจ)

2.2 แสดงขอมูลสินคา product_detail.php แสดงรายละเอยี ดสินคา ในแตล ะ

รายการ

2.3 คนหาสินคา findproduct.php ฟอรม คนหาสนิ คา

2.4 แสดงขอมูลสินคา ทีไ่ ด product_finddetail.php แสดงรายการสินคา ทเ่ี กี่ยวของ

จากการคนหา ท้ังหมดกับคาํ หลักทีใ่ ชค น หา

(กาํ หนดคนหาจากชอื่ สินคา)

3. ดาวนโ หลดโปรชัวรสินคา

3.1 แสดงโปรชวั รส ินคา brochure_downlond.php แสดงรายการโปรชัวรสินคา

3.2 ดาวนโ หลด สําหรบั ใหด าวนโหลด

4. ติดตอ สอบถาม

4.1 รับขอ มลู contact.php ฟอรมรบั ขอ มลู การตดิ ตอจากผเู ขา

4.2 ตรวจสอบขอมลู ชมเวบ็ ไซต โดยทําหนา ทท่ี ง้ั รบั

4.3 บันทกึ ขอมลู ขอ มูล ตรวจสอบขอมูล และ

บนั ทึกขอ มลู

4.4 ยนื ยนั การตดิ ตอ contactfeedback.php สาํ หรับแสดงขอ ความยืนยนั การ

สอบถาม ไดรบั การตดิ ตอจากผูเขา ชม

เว็บไซตห ลงั จากไดทาํ การบันทกึ

ขอ มูลเรยี บรอยแลว

17 หลกั การออกแบบเวบ็ ฐานขอ้ มูลอยา่ งเป็นระบบ | ผศ.ธชั กร วงษค์ าํ ชยั

18

การกาํ หนดโครงสรา งขอ มูล

จากท่ีวิเคราะหเว็บเพจตางๆ ท่ีเกี่ยวของของเว็บไซตแค็ตตาล็อกสินคาดังตารางที่ 9 ขางตนจะพบวา
แตละกระบวนการจะประกอบดวยหลายๆ ไฟลเว็บเพจสําหรับการทํางานรวมกันบนเว็บไซต
ซงึ่ จะพจิ ารณาไฟลเว็บเพจหลักของแตละกระบวนการที่จะทําหนาที่เปนไฟลตนทางในการเช่ือมโยงไปยังไฟล
เวบ็ เพจอืน่ ๆ ในกระบวนการเดียวกนั มากาํ หนดโครงสรางขอมูลของเว็บไซตแค็ตตาลอ็ กสินคา ดังภาพที่ 13

ภาพท่ี 13 โครงสรา งขอมูลเว็บไซตแคต็ ตาล็อกสินคา
จากภาพท่ี 13 จะเห็นวาไฟลเว็บเพจหลักท่ีทําหนาที่เปนตัวกลางในการเช่ือมโยงไปยังไฟลเว็บเพจ

อ่ืนๆ ภายในเว็บไซตแค็ตตาล็อกสินคา คือ ไฟล index.php เชื่อมโยงไปยังไฟลเว็บเพจหลักของแตละ
กระบวนการ ดังนี้ ไฟล index.php เขาใชงานกระบวนการแสดงสินคา login_admin.php เขาใชงาน
กระบวนการจดั การขอมูลระบบ ไฟล brochure_downlond.php เขา ใชง านกระบวนการดาวนโหลดโปรชัวร
สินคา และ contact.php เชื่อมโยงเขาใชงานกระบวนการตดิ ตอสอบถาม

การกําหนดการสืบทอดขอมูล

เมอื่ กําหนดโครงสรางขอมูลเว็บไซตแค็ตตาล็อกสินคาเรียบรอยแลวดังกลาวขางตน ผูพัฒนาจะยังไม
สามารถระบุไดวาแตละเพจควรอยูในสวนใดของเว็บไซตและยังมองไมเห็นความสัมพันธของแตละเพจได
ผูพ ัฒนาจะตอ งทาํ การเปล่ยี นโครงสรางขอมูลไปเปนการสบื ทอดขอ มูล หรือรูปแบบโครงสรา งขอมูลแบบตนไม
ดวยการแบงเนื้อหาท่ีตองการนํามาเสนอบนเว็บไซตออกเปนกลุมหรือหมวดหมู โดยเร่ิมตนกําหนดกลุมหลัก
กอน จากการวิเคราะหเว็บเพจดังตารางที่ 9 และโครงสรางขอมูลดังภาพท่ี 13 สามารถกําหนดการสืบทอด
ขอ มูลของเว็บไซตแค็ตตาลอ็ กสินคา ไดดังภาพที่ 14

18 หลกั การออกแบบเวบ็ ฐานขอ้ มลู อยา่ งเป็ นระบบ | ผศ.ธชั กร วงษค์ าํ ชยั

19

ภาพท่ี 14 การสืบทอดขอมลู ของเว็บเพจแตละกลมุ ในเว็บไซตแ คต็ ตาล็อกสนิ คา

การสรางแผนที่เว็บไซต

เมอ่ื ทาํ การกําหนดการสืบทอดขอ มูลของเว็บไซตแคต็ ตาล็อกสินคาเรียบรอยแลว ลําดับถัดไปผูพัฒนา
ตองนําขอมูลดังกลาวมาพิจารณาในการสรางแผนที่เว็บไซต เพื่อกําหนดโครงสรางการเชื่อมโยงของเว็บเพจ
และนาํ องคประกอบท้ังหมดในเว็บไซตมาจัดลําดับเปนลําดับชนั้ ท่ีเกี่ยวของกัน ซ่ึงจะทําใหเห็นไดชัดเจนย่ิงข้ึน
วาเมนูการเชื่อมโยงและเน้ือหาภายในเว็บไซตมีอะไรบางและมีการเชื่อมโยงไปในทิศทางใด จากการสืบทอด
ขอมูลดังภาพที่ 14 ขางตนสามารถนํามาสรา งแผนทข่ี องเวบ็ ไซตแ ค็ตตาลอ็ กสนิ คา แสดงไดดังภาพที่ 15

19 หลกั การออกแบบเวบ็ ฐานขอ้ มูลอยา่ งเป็ นระบบ | ผศ.ธชั กร วงษค์ าํ ชยั

20

ภาพท่ี 15 การกาํ หนดแผนท่ีของเวบ็ ไซตแ ค็ตตาลอ็ กสินคา

20 หลกั การออกแบบเวบ็ ฐานขอ้ มลู อยา่ งเป็ นระบบ | ผศ.ธชั กร วงษค์ าํ ชยั

21

การวางผงั หนาเว็บเพจ

หลังจากทําการสรา งแผนที่เวบ็ ไซตข างตน แลว ในลําดับถดั ไปผูพฒั นาจะตอ งทาํ การวางผังหนาเว็บเพจ
เพ่อื กาํ หนดพนื้ ท่กี ารแสดงผลของเนอ้ื หาตางๆ ภายในเว็บเพจใหเปน สัดสวนและเหมาะสม ซ่ึงในกิจกรรมนี้ถือ
ไดวาเปนสวนสําคัญท่ีผูพัฒนาเว็บไซตจะกําหนดผังโครงสรางหนาเว็บเพจตางๆ ในเว็บไซตใหสามารถแสดง
ผลไดอยางเหมาะสมบนอุปกรณที่แตกตางกันตามสถาปตยกรรมระบบของเว็บไซตแค็ตตาล็อกสินคาที่
ออกแบบไวขางตน และเปน แนวทางในการเลอื กใชเทคโนโลยใี นการพฒั นาเวบ็ ไซตตอ ไป

โดยการพัฒนาเว็บไซตแค็ตตาล็อกสินคาในคอรสนี้จะออกแบบและพัฒนาในสวนของลูกคาหรือ
ผูส นใจใหรองรบั การใชงานบนโทรศพั ทมอื ถอื โดยใชเทคนิคการออกแบบ Mobile-First Responsive Design
ตามแนวคิดการออกแบบเว็บแบบ Responsive Web Design และวางผังหนาเว็บเพจแบบ Layout Shifter
คือ เปนการวางผังหนาเว็บเพจจะปรับเปลี่ยนลําดับของคอลัมนใหมจากซายไปขวา เม่ือมีการแสดงผลบน
หนา จอท่ีแตกตางกนั กรณีที่เปด ในหนาจอที่เล็กท่ีสุดก็จะเรียงตามลําดับคอลัมนจากซายไปขวาแบบบนลงลาง
สวนการจัดการขอมูลระบบซ่ึงเปน สิทธิ์ของเจาของรานในการปรับปรุงขอมูลระบบยังคงออกแบบใหใชงานได
เฉพาะบนเดสกท ็อปเทานนั้ รายละเอยี ดมดี ังตอไปน้ี

1. การวางผงั หนาเวบ็ เพจในสวนของเจาของรา น
รายละเอียดการวางผังหนาเว็บเพจทเ่ี กี่ยวของภายในเว็บไซตแค็ตตาล็อกสินคา สวนของเจาของ

รา น แยกตามกระบวนการทสี่ ามารถเขา ใชงานได มดี ังน้ี

ภาพท่ี 16 การวางผงั หนา เวบ็ เพจการเขาระบบสาํ หรับเจา ของรา น

ภาพท่ี 17 การวางผงั หนา เว็บเพจเมนูจัดการขอมลู ระบบสําหรับเจาของราน

21 หลกั การออกแบบเวบ็ ฐานขอ้ มลู อยา่ งเป็ นระบบ | ผศ.ธชั กร วงษค์ าํ ชยั

22

ภาพที่ 18 การวางผังหนาเวบ็ เพจของสวนจัดการผูด แู ลระบบ

22 หลกั การออกแบบเวบ็ ฐานขอ้ มูลอยา่ งเป็ นระบบ | ผศ.ธชั กร วงษค์ าํ ชยั

23
ภาพที่ 19 การวางผังหนา เว็บเพจของสวนจัดการประเภทสินคา

23 หลกั การออกแบบเวบ็ ฐานขอ้ มลู อยา่ งเป็ นระบบ | ผศ.ธชั กร วงษค์ าํ ชยั

24

ภาพที่ 20 การวางผงั หนา เว็บเพจของสวนจัดการสินคา

24 หลกั การออกแบบเวบ็ ฐานขอ้ มูลอยา่ งเป็ นระบบ | ผศ.ธชั กร วงษค์ าํ ชยั

25

ภาพที่ 21 การวางผงั หนา เว็บเพจของสวนจัดการโปรชัวรส นิ คา
ภาพที่ 22 การวางผังหนาเวบ็ เพจของสวนจัดการขอมลู การตดิ ตอ

25 หลกั การออกแบบเวบ็ ฐานขอ้ มลู อยา่ งเป็ นระบบ | ผศ.ธชั กร วงษค์ าํ ชยั

26
2. การวางผงั หนาเว็บเพจในสว นของลกู คาหรอื ผูสนใจ

รายละเอยี ดการวางผังหนา เวบ็ เพจทเี่ ก่ยี วของภายในเว็บไซตแคต็ ตาลอ็ กสินคาออกแบบใหรองรับ
การใชงานเฉพาะบนโทรศัพทมือถือที่มีความกวางของหนาจอที่ 320 pixels แยกตามกระบวนการที่สามารถ
เขา ใชงานได มีดงั นี้

2.1 สวนของแสดงขอ มูลสนิ คา มีรายละเอยี ดดังนี้

ภาพที่ 23 การวางผังหนาเว็บเพจของสวนแสดงรายการสนิ คา หรือหนาโฮมเพจ

26 หลกั การออกแบบเวบ็ ฐานขอ้ มูลอยา่ งเป็ นระบบ | ผศ.ธชั กร วงษค์ าํ ชยั

27

ภาพที่ 24 การวางผังหนา เว็บเพจของสว นแสดงรายละเอยี ดสนิ คา

27 หลกั การออกแบบเวบ็ ฐานขอ้ มูลอยา่ งเป็ นระบบ | ผศ.ธชั กร วงษค์ าํ ชยั

28

ภาพที่ 25 การวางผงั หนา เวบ็ เพจของสว นคน หาสินคา

28 หลกั การออกแบบเวบ็ ฐานขอ้ มลู อยา่ งเป็ นระบบ | ผศ.ธชั กร วงษค์ าํ ชยั

29
2.2 สวนของการดาวนโ หลดโปรชวั รสินคา

ภาพท่ี 26 การวางผงั หนาเวบ็ เพจของสวนดาวนโ หลดโปรชวั รส ินคา

29 หลกั การออกแบบเวบ็ ฐานขอ้ มลู อยา่ งเป็ นระบบ | ผศ.ธชั กร วงษค์ าํ ชยั

30
2.3 สว นของการติดตอสอบถาม มรี ายละเอยี ดดังนี้

ภาพที่ 27 การวางผงั หนา เว็บเพจของสว นขอ มูลการตดิ ตอ
เมื่อทําการวิเคราะหและออกแบบระบบดังกลาวขางตนแลว ในลําดับถัดไปเปนข้ันตอนการพัฒนา

ระบบหรอื การพฒั นาโปรแกรมประยกุ ตบนเว็บ โดยใชซอฟตแวรที่จัดเตรียมไว ดังจะกลาวถึงใน Lecture 18-
Lecture 22

30 หลกั การออกแบบเวบ็ ฐานขอ้ มลู อยา่ งเป็ นระบบ | ผศ.ธชั กร วงษค์ าํ ชยั