รูปเล่มวิชาโครงงาน

1

เว็บไซต์ออกแบบโปสการ์ด

PostcardDesign

โดย

1. นางสาวเกศรา อาไพรัตน์ รหัส 52013971
2. นางสาวสิ ริธรณ์ เดชะพันธ์ รหัส 52027300

โครงงานนี้เป็ นส่ วนหนึ่งของการศึกษาตามหลักสู ตรวิทยาศาสตรบัณฑิต
สาขาวิชาเทคโนโลยีสารสนเทศและการสื่ อสาร คณะเทคโนโลยีสารสนเทศ
มหาวิทยาลัยศรี ปทุม
พ.ศ. 2555

ก

กิตติกรรมประกาศ

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

ข

คานา

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

นางสาวเกศรา อาไพรัตน์

นางสาวสิ ริธรณ์ เดชะพันธ์

21 กันยายน 2555

ค

สารบัญ

หน้ า

กิตติกรรมประกาศ ก

คานา ข

สารบัญ ค

สารบัญรู ป ฉ

สารบัญตาราง ฌ

บทที่ 1 บทนา

1.1 ความเป็ นมาและความสาคัญของปั ญหา 1

1.2 วัตถุประสงค์การศึกษา 2

1.3 ขอบเขตการศึกษา 3

1.4 นิยายศัพท์เฉพาะ 3

1.5 ประโยชน์ที่คาดว่าจะได้รับ 4

1.6 แผนการดาเนินงาน 5

1.7 เครื่ องมืที่คาดว่าจะต้องใช้ 6

บทที่ 2 แนวคิด ทฤษฎีและเอกสารที่เกี่ยวข้อง

2.1 ทฤษฎีเทคโนโลยีที่เกี่ยวข้อง 7

ง

บทที่ 3 ขั้นตอนการศึกษา

3.1 ขั้นตอนการศึกษาตัวแบบ 16

ขั้นตอนที่ 1 การระบุปัญหา 17

ขั้นตอนที่ 2 การรวบรวมข้อมูลและการจัดการข้อมูล 20

ขั้นตอนที่ 3 การวิเคราะห์ขอมูล
้ 21

ขั้นตอนที่ 4 การสร้างตัวแบบ 26

ขั้นตอนที่ 5 การนาตัวแบบมาใช้และประเมินผล 44

บทที่ 4 ผลการศึกษา

4.1 อุปกรณ์และโปรแกรมที่ใช้ 48

4.2 กระบวนการทางานทั้งหมดของโปรแกรม 50

4.3 การทางานทั้งหมดของโปรแกรม 51

บทที่ 5 สรุ ปผลการศึกษา การอภิปราย และข้อเสนอแนะ

5.1 ปัญหาและอุปสรรคในการดาเนินงาน 60

5.2 การวิเคราะห์โครงงาน 60

5.3 ข้อเสนอแนะเกี่ยวกับโครงงาน 61

5.4 สรุ ปผลการทาโครงงาน 61

บรรณานุกรม 62

ภาคผนวก

ภาคผนวก ก 64

จ

ประวัติผจดทาโครงงาน
ู้ ั 70

ฉ

สารบัญรู ป

หน้ า

รู ปภาพที่ 2.1 แสดงโค้ดในการเรี ยกใช้ฟังก์ชน
ั 7

รู ปภาพที่ 2.2 แสดงโค้ดคาสั่งในการตรวจสอบการเชื่ อมต่อฐานข้อมูล 9

รู ปภาพที่ 2.3 แสดงโค้ดสสาสั่งในการกาหนดรู ปแบบ Style Sheet 10

รู ปภาพที่ 2.4 แสดงโค้ดการใช้งาน HTML ร่ วมกับ PHP 12

รู ปภาพที่ 2.5 แสดงโค้ดในการเรี ยนใช้ JavaScript 13

รู ปภาพที่ 2.6 แสดงโค้ดการทางานของ JavaScript 14

รู ปภาพที่ 2.7 แสดงโค้ดการใช้งาน ActionScript 3.0 15

รู ปภาพที่ 3.1 ขั้นตอนการศึกษาตัวแบบ 16

รู ปภาพที่ 3.2 ภาพตัวอย่างโดยรวมของระบบที่ตองการพัฒนา
้ 20

รู ปภาพที่ 3.3 แผนภาพบริ บท(Context Diagram) 21

รู ปภาพที่ 3.4 การสมัครสมาชิก 21

รู ปภาพที่ 3.5 การเข้าสู่ ระบบสมาชิก 22

รู ปภาพที่ 3.6 แสดงการแก้ไขข้อมูลของสมาชิก (Data Flow Diagram Level 1) 22

รู ปภาพที่ 3.6 การเข้าสู่ ระบบผูดูแลระบบ
้ 23

รู ปภาพที่ 3.8 แสดงการแก้ไขข้อมูลของผูดูแลระบบ (Data Flow Diagram Level 1)
้ 23

รู ปภาพที่ 3.9 แสดงการลืมรหัสผ่าน 23

รู ปภาพที่ 3.10 แผนภาพแสดงความสัมพันธ์ระหว่างเอนทิตีและแอททริ บิวต์ 24

ช

รู ปภาพที่ 3.11 Use Case Diagram 25

รู ปภาพที่ 3.12 รู ปแสดงตัวแบบหน้าต้อนรับ 30

รู ปภาพที่ 3.13 รู ปแสดงตัวแบบหน้าสมัครสมาชิก 31

รู ปภาพที่ 3.14 รู ปแสดงตัวแบบหน้าแก้ไขข้อมูลสมาชิก 32

รู ปภาพที่ 3.15 รู ปแสดงตัวแบบหน้าแก้ไขรหัสผ่านของสมาชิก 33

รู ปภาพที่ 3.16 รู ปแสดงตัวแบบหน้าการอัพโหลดรู ป 34

รู ปภาพที่ 3.17 รู ปแสดงตัวแบบหน้าแกลเลอรี่ 35

รู ปภาพที่ 3.18 รู ปแสดงตัวแบบหน้าออกแบบโปสการ์ ด 36

รู ปภาพที่ 3.19 รู ปแสดงตัวแบบหน้าแก้ไขข้อมูลของผูดูแลระบบ
้ 37

รู ปภาพที่ 3.20 รู ปแสดงตัวแบบหน้าแก้ไขรหัสผ่านของผูดูแลระบบ
้ 38

รู ปภาพที่ 3.21 รู ปแสดงตัวแบบหน้ารายชื่อสมาชิก 39

รู ปภาพที่ 3.22 รู ปแสดงตัวแบบหน้าค้นหาสมาชิก 40

รู ปภาพที่ 3.23 รู ปแสดงตัวแบบหน้าแสดงข้อมูลสมาชิก 41

รู ปภาพที่ 3.24 รู ปแสดงตัวแบบหน้าลืมรหัสผ่าน 42

รู ปภาพที่ 3.25 รู ปแสดงตัวแบบหน้ากาหนดรหัสผ่านใหม่ 43

รู ปภาพที่ 3.26 แผนภาพเส้นและสัญลักษณ์ของหน้าต้อนรับ โดยให้สมาชิกเลือกที่

จะสมัครสมาชิก, เข้าระบบ หรื อแจ้งลืมรหัสผ่าน 44

รู ปภาพที่ 3.27 แผนภาพเส้นและสัญลักษณ์ของระบบสมัครสมาชิก 45

รู ปภาพที่ 3.28 แผนภาพเส้นและสัญลักษณ์ของระบบแจ้งลืมรหัสผ่าน 46

ซ

รู ปภาพที่ 3.29 แผนภาพเส้นและสัญลักษณ์ของระบบออกแบบโปสการ์ด 47

รู ปภาพที่ 4.1 แสดงหน้าต้อนรับของเว็บไซต์ 52

รู ปภาพที่ 4.2 แสดงหน้าการสมัครสมาชิก 53

รู ปภาพที่ 4.3 แสดงหน้าลืมรหัสผ่าน 54

รู ปภาพที่ 4.4 แสดงการกรอกรหัสผ่านใหม่ 54

รู ปภาพที่ 4.5 แสดงหน้าการอัพโหลดรู ปภาพ 55

รู ปภาพที่ 4.6 แสดงหน้าแกลเลอรี่ 56

รู ปภาพที่ 4.7 แสดงหน้าแก้ไขข้อมูลสมาชิก 57

รู ปภาพที่ 4.8 แสดงหน้าแก้ไขรหัสผ่านของสมาชิก 58

รู ปภาพที่ 4.9 แสดงหน้าออกแบบโปสการ์ด 59

ฌ

สารบัญตาราง

หน้ า

ตารางที่ 1.1 ตารางนิยามศัพท์เฉพาะ 3

ตารางที่ 1.2 ตารางเวลาในการดาเนินงาน 5

ตารางที่ 3.1 ตารางแสดงแฟ้ มข้อมูลผูดูแลระบบ
้ 26

ตารางที่ 3.2 ตารางแสดงแฟ้ มข้อมูลสมาชิก 27

ตารางที่ 3.3 ตารางแสดงแฟ้ มการเก็บข้อมูลรู ปภาพของสมาชิก 28

ตารางที่ 3.4 ตารางแสดงการเก็บข้อมูลการล็อกอินของสมาชิก 29

ตารางที่ 4.1 อุปกรณ์ที่ใช้ในการพัฒนาระบบ 48

ตารางที่ 4.2 โปรแกรมที่ใช้ในการพัฒนาระบบ 49

ตารางที่ 4.3 แสดงวิธีการทางาน การสมัครสมาชิก การเข้าสู่ ระบบ 50

ตารางที่ 4.4 แสดงวิธีการทางานการเข้าสู่ ระบบ 50

ตารางที่ 4.5 การเข้าสู่ ระบบของผูดูแลระบบ
้ 51

ตารางที่ 4.6 แสดงวิธีการลืมรหัสผ่าน 51

1

บทนา

1.1 ความเป็ นมาและความสาคัญของปัญหา

จากอดีตที่ผ่านมาได้มีการนาเอาเทคโนโลยีทางคอมพิวเตอร์ เข้ามาใช้อย่างแพร่ หลาย และ
ได้มี การเอาเทคโนโลยีต่างๆเข้ามามี บทบาทในชี วิตประจาวันของมนุ ษย์ เพื่อช่ วยอานวยความ
ั ้
สะดวกสบายให้กบผูใช้มากยิงขึ้น เทคโนโลยีจึงเป็ นอีกหนึ่งปัจจัยที่จาเป็ นต่อมนุษย์
่

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

ระบบโปสการ์ดดีไซน์ สามารถออกแบบโปสการ์ ดได้เอง ซึ่งโปสการ์ดที่ได้ จะมีภาพความ
ประความประทับใจและมีคุณค่าทางจิตใจมากยิ่งขึ้น และทาให้บุคคลต่างๆไม่ลืมที่จะส่ งโปสการ์ ด
หรื อภาพความประทับใจดีๆหากัน

2

1.2 วัตถุประสงค์ การศึกษา
1.2.1 เพื่อพัฒนาเว็บไซต์ให้บริ การออกแบบโปสการ์ด
1.2.2 เพื่อพัฒนาระบบโปสการ์ ด ให้สามารถออกแบบการตกแต่งโปสการ์ ดให้ตรงตาม
ความต้องการของผูใช้ได้
้
1.2.3 เพื่ อให้ผูใ ช้ไ ม่ ต้องการติ ดตั้ง ซอฟต์แ วร์ เกี่ ย วกับ การออกแบบโปสการ์ ด และ
้
สามารถใช้งานได้สะดวกมากยิงขึ้นโดยเข้าใช้งานผ่านเว็บไซต์ของเราได้ทนที
่ ั

1.3 ขอบเขตการศึกษา
1.3.1 ระบบผูใช้ที่เป็ นผูใช้งานทัวไป
้ ้ ่
1.3.1.1 ผูใช้งานสามารถสมัครสมาชิกได้
้
1.3.2 ระบบสมัครสมาชิก
1.3.2.1 สามารถตรวจสอบว่าข้อมูลซ้ ากันหรื อไม่
1.3.3 ระบบผูใช้งานที่เป็ นสมาชิก
้
1.3.3.1 สามารถล็อกอินเข้าสู่ ระบบได้
1.3.3.2 สามารถแก้ไขข้อมูลได้
1.3.3.3 สามารถแก้ไขรหัสผ่านได้
1.3.3.4 สามารถใช้งานระบบจัดการระบบโปสการ์ดได้
1.3.4 ระบบผูดูแลระบบ
้
1.3.4.1 สามารถเข้าถึงข้อมูลสมาชิกได้
1.3.4.2 สามารถระงับและยกเลิกการใช้งานของสมาชิกได้
1.3.5 ระบบแกลเลอรี่
1.3.5.1 สามารถอัพโหลดรู ปจากเครื่ องได้
1.3.5.2 สามารถแสดงรู ปได้

3

1.3.6 ระบบจัดการระบบโปสการ์ดดีไซน์1
1.3.6.1 สามารถลากรู ปเล่นมาตกแต่งได้ (Drag ang Drop)
1.3.6.2 สามารถย่อขยายลูกเล่นได้ (Resize)
1.3.6.3 สามารถหมุนลูกเล่นได้ (Rotate)
1.3.7.1 สาสามารถลบลูกเล่นได้ (Remove )
1.3.7.2 สามารถวาดรู ปได้อย่างอิสระ
1.3.7.3 สามารถเลือกฟอนต์ ขนาด และปรับสี ตวอักษรได้ (Font)
ั
1.3.7.4 สามารถเปลี่ยนสี พ้ืนหลังได้ (Background)
1.3.8.1 สามารถเลือกกรอบได้ (Frame)
1.3.8.2 สามารถ save ลงแกลเลอรี่ ได้
1.3.8.3 สามารถส่ งเข้าเมลได้
1.3.8.4 สามารถแชร์บน facebook ได้
1.3.9 ระบบลืมรหัสผ่าน
1.3.10 ระบบล็อกอินเข้าสู ระบบ

1.4 นิยามศัพท์เฉพาะ

ศัพท์ คานาม
Drag ang Drop การลากมาวาง
Remove ลบ
Background พื้นหลัง
Resize ย่อขยาย
Rotate การหมุน
Font ตัวอักษร
Frame กรอบ
ตารางที่ 1.1 ตารางนิยามศัพท์เฉพาะ

4

1.5 ประโยชน์ ทคาดว่าจะได้ รับ
ี่
1.5.1 ได้ พ ัฒ นาเว็ บ ไซต์ ใ ห้ มี ป ระสิ ทธิ ภ าพยิ่ ง ขึ้ น และลดต้น ทุ น ในการจ้า ง
โปรแกรมเมอร์
1.5.2 ได้ระบบโปสการ์ดที่ตรงตามความต้องการของผูใช้
้
1.5.3 ช่วยลดปั ญหาของการติดตั้งซอฟต์แวร์
1.5.4 ช่วยให้ผใช้งานสามารถสร้างโลโก้ของตัวเองได้อย่างง่ายดาย
ู้

5

1.6 แผนการดาเนินงาน

หมายเหตุ แทนระยะเวลาดาเนินการ

ตารางที่ 1.2 ตารางเวลาในการดาเนินงาน

6

1.7 เครื่องมือทีคาดว่าจะต้ องใช้
่
1.7.1 อุปกรณ์ที่ใช้ในโครงงาน
1.7.1.1 แล็ปท็อป
1.7.1.2 เครื่ องพิมพ์เอกสาร
1.7.2 โปรแกรมที่ใช้ในโครงงาน
1.7.2.1 Adobe Photoshop
1.7.2.2 Adobe Flash (ActionScript)
1.7.2.3 Dreamweaver
1.7.2.4 Microsoft Word 2010
1.7.2.5 Microsoft Excel 2010
1.7.2.6 Microsoft Visio 2007
1.7.2.7 CSS
1.7.2.8 JavaScript
1.7.2.9 MySQL
1.7.2.10 PHP
1.7.2.11 HTML

7

บทที่ 2

แนวคิด ทฤษฎีและเอกสารที่เกียวข้ อง
่

2.1 ทฤษฎีเทคโนโลยีที่เกี่ยวข้อง
2.1.1 PHP
PHP เป็ นภาษาที่มีการทางานที่เรี ยกว่า Server Side Script คือมีการทางานที่ฝั่งของ
เว็บเซิ ร์ฟเวอร์ (Web Server) โดยเครื่ องไคล์เอ็นต์(Client) มีการร้องขอที่จะดูเว็บไซต์ไปที่
ฝั่ งของเว็บ เซิ ร์ฟเวอร์ และไฟล์ PHP ต่า งๆ จะถู ก เก็บ ไว้ที่ฝั่ งของเว็บ เซิ ร์ฟ เวอร์ โดยเว็บ
เซิ ร์ฟเวอร์ จะมีการติดตั้ง PHP Interpreter ที่จะแปลคาสั่งต่างๆของไฟล์ PHP ที่มี และจะส่ ง
ข้อมูลกลับมาให้ผใช้ ในรู ปแบบของภาษา HTML โดย PHP Interpreter จะแปลไฟล์ PHP
ู้
Script ต่างๆที่ถูกเรี ยกดู ก่อนจะส่ งข้อมูลกลับไปให้เครื่ องไคล์เอ็นต์ในรู ปแบบของคาสั่ง
HTML (เจริ ญศักดิ์ รัตนวราห และคณะ , 2552)
เนื่องจาก PHP เป็ นภาษาแบบสคริ ปต์ที่ตองอาศัยการเขียนแทรกโค้ดคาสั่งลงไป
้
ในเอกสาร HTML ดังนั้นภายในเว็บเพจเดียวกันจึงอาจจะมีท้ งโค้ดส่ วนที่เป็ นสคริ ปต์ของ
ั
PHP และโค้ดของ HTML ทั้งนี้ ก็เนื่ องจากว่า โครงสร้างหรื อรู ปแบบของเอกสารเว็บเพจ
นั้น ต้องถูกกาหนดด้วยแท็กของ HTML เป็ นหลัก ถึงแม้จะสร้างเว็บเพจด้วย PHP แต่ก็ยง
ั
ต้องใช้ HTML เป็ นตัวกาหนดรู ปแบบของเอกสารเสมอ ดังนั้นเพื่ อเป็ นการแยกความ
แตกต่างของทั้งส่ วนนี้ โค้ดของส่ วนที่เป็ น HTML ก็เขียนไปตามปกติ แต่โค้ดส่ วนของ
PHP จะต้องเขียนไว้ในแท็ก <?php … ?> ซึ่ งถือเป็ นแท็กแบบมาตรฐานขของ PHP ที่นิยม
ั
ใช้กนมากที่ สุด และสามารถใช้ได้เลยโดยไม่ตองปรับเซตค่าใดๆ (บัญชา ปะสี ละเตสัง ,
้
2553)

รู ปภาพที่ 2.1 แสดงโค้ดในการเรี ยกใช้ฟังก์ชน
ั

8

โดยการทางานจะมีการสร้ างฟั งก์ชนขึ้นมา เวลาที่จะใช้งาน ก็จะทาการเรี ยกใช้
ั
ฟั งก์ชนขึ้นมาใช้ ซึ่ งในตัวอย่างโค้ดจะมีการเรี ยกใช้ฟังก์ชนอยู่ 4 ตัว คือ show_header(),
ั ั
show(), show_slide() และ show_footer() ในการสร้างฟั งก์ชนจะทาให้การเขียนโปรแกรม
ั
สะดวกขึ้น เพราะจะสร้างฟั งก์ชนเพียงครั้งเดียว ก็สามารถนาไปใช้งานได้ทุกที่ และนามา
ั
แก้ไขได้ภายหลัง

2.1.2 MySQL

เนื่ องจากฐานข้อมูล MySQL ติดต่อกับผูใช้งานผ่านทางคอมมานด์ไลน์ ซึ่ งผูใช้
้ ้
ต้องพิมพ์คาสังต่างๆลงไปเอง จึงทาให้ไม่สะดวกต่อการใช้งานเท่าที่ควร ซึ่ งจากปั ญหานี้ ทา
่
ให้ มี ผูคิ ด สร้ า งเครื่ อ งมื อ ขึ้ น มาช่ ว ยให้บ รรดาโปรแกรมเมอร์ PHP สามารถจัดการกับ
้
ฐานข้ อ มู ล MySQL ได้ ง่ า ยขึ้ น โดยเครื่ องมื อ มี ชื่ อว่ า phpMyAdmin ซึ่ งเป็ นเว็ บ
แอพพลิเคชันที่เขียนนด้วย PHP แต่มีความสามารถในการจัดการกับ MySQL ได้เกือบทุก
่
อย่าง โดยจะติดต่อกับผูใช้แบบ Graphic ทาให้ใช้งานง่าย ประหยัดเวลาในการพิมพ์คาสั่ง
้
และช่วยลดข้อผิดพลาดลงได้ค่อนข้างมาก (บัญชา ปะสี ละเตสัง , 2553)

ในการนาข้อมูลจากฐานข้อมูลมาแสดงผลบนหน้าเว็บเพจ จะต้องใช้ฟังก์ชนเข้ามา
ั
ช่วยในการทางาน โดยมีข้ นตอนดังนี้
ั

1. เชื่อมต่อเซิ ร์ฟเวอร์ MySQL
2. เลือกฐานข้อมูลที่ตองการใช้งาน
้
3. นาคาสั่ง SQL ไปประมวลผลที่ฐานข้อมูล
4. นับจานวนข้อมูลที่เรี ยกขึ้นมาจากฐานข้อมูล
5. นาข้อมูลมาแสดงผลบนหน้าเว็บเพจ
6. ปิ ดการเชื่อมต่อ
(ฐิสันต์ ทิพย์ศุภธนนท์ , 2552)

9

รู ปภาพที่ 2.2 แสดงโค้ดคาสั่งในการตรวจสอบการเชื่ อมต่อฐานข้อมูล

เป็ นการสร้างฟั งก์ชนที่ชื่อ connect_db() ในการตรวจสอบการเชื่ อมต่อฐานข้อมูล
ั
ด้วยฟั งก์ชน mysqli_connect() โดยการทางานจะทาการตรวจสอบการเชื่ อมต่อฐานข้อมูล
ั
ถ้าเชื่อมต่อไม่สาเร็ จจะคืนค่า false

2.1.3 CSS
CSS (Cascading Style Sheet) เป็ นเทคโนโลยีที่ถูกนามาใช้ในการจัดรู ปแบบและ
ควบคุมการแสดงผลของเว็บเพจให้มีประสิ ทธิ ภาพมากยิ่งขึ้น อีกทั้งช่ วยให้นกพัฒนาเว็บ
ั
สามารถกาหนดรู ปแบบและโครงสร้างของเว็บเพจได้ง่าย และช่ วยลดปั ญหาเกี่ยวกับการ
เขียนโปรแกรมในส่ วนของการกาหนดรู ปแบบของเว็บที่ซ้ ากันได้ เนื่ องจากไม่ตองกาหนด
้
รู ปแบบสาหรับการแสดงผลทุกแท็กเช่ นเดี ยวกับ HTML โดยหลักการของ CSS คือ การ
ั
แยกสไตล์ (Style) ซึ่ งเป็ นการกาหนดคาสั่ง CSS เพื่อจัดรู ปแบบให้กบแท็ก HTML ใน
เอกสารออกจากโครงสร้ างของเนื้ อหา (Content) ที่จะแสดงบนเว็บเพจ ทาให้คาสั่งของ
ั
CSS ไม่ถูกนาออกมาแสดงผลด้วย แต่จะใช้เป็ นตัวกาหนดรู ปแบบให้กบเนื้ อหาบนเว็บเพจ
แทน ถ้ามีการแก้ไขคาสั่ง CSS ที่ส่วนใดก็จะมีผลกับเว็บเพจที่อางอิงถึงคาสั่ง CSS ในส่ วน
้
นั้นด้วย โดยเอกสารที่ จะบรรจุ โค้ดค าสั่ง CSS ไว้ เรี ยกว่า “สไตล์ชีท (Style Sheet)”
(อัจจิมา เลี้ยงอยู่ , 2553)
การก าหนดสไตล์ใ ห้ก ับ Element ต่ า งๆบนเอกสาร HTML จะช่ ว ยให้เว็บ
ั
บราวเซอร์ สามารถแสดงผลเว็บเพจได้สวยงามมากยิ่งขึ้น เช่น การกาหนดสี ให้กบข้อความ
ในพารากราฟให้มีสีแดง ซึ่ งข้อความจะต่างจากส่ วนที่ใช้เป็ นเนื้อหาทัวไป เป็ นต้น โดยกลุ่ม
่

10

ั
คาสั่งของ CSS ที่ใช้ในการกาหนดสไตล์ให้กบเว็บเพจเรี ยกว่า “สไตล์ชีท (Style Sheet)”
ซึ่ งสามารถกาหนดได้ 3 วิธี ได้แก่ Inline Style Sheet, Internal Style Sheet และ External
Style Sheet แต่ในที่น้ ี นิยมใช้งานสไตล์ชีทแบบ Internal Style Sheet และ External Style
่ ั
Sheet ซึ่งเป็ นการเลือกรู ปแบบใดรู ปแบบหนึ่ งไปใช้งาน จะขึ้นอยูกบข้อมูลของสไตล์ชีทที่
ต้องการใช้งานบนเว็บ เพจ หรื ออาจแยกเป็ นไฟล์ไว้ภายนอกเอกสาร HTML ที่ มีก าร
เชื่อมโยงกับเว็บเพจที่ตองการเรี ยกใช้งานสไตล์ชีทก็ได้ (สมชาย มโนธรารักษ์ , 2553)
้

รู ปภาพที่ 2.3 แสดงโค้ดคาสั่งในการกาหนดรู ปแบบ Style Sheet

ในโครงงานจะมีการใช้งาน CSS แบบ External ในการกาหนดรู ปแบบต่างๆ เช่น
การกาหนดคัวอักษรเป็ น Courier New , ขนาดตัวอักษรเท่ากับ 18 px., กาหนดรหัสสี ลิงค์
#599100 และกาหนดให้เมื่อมีเม้าส์ไปชี้ที่ลิงค์จะเกิดเส้นใต้

11

2.1.4 HTML
HTML ย่อมาจากคาว่า Hypertext Markup Language เป็ นภาษาหลักที่ใช้ในการ
สร้างเว็บเพจ โดยมีแนวคิดจากการสร้ างเอกสารไฮเปอร์ เท็กซ์ (Hypertext Document :
ข้อความในเอกสารที่ เชื่ อมโยงถึ ง ข้อมู ล ต่ า งๆได้) ซึ่ ง พัฒ นาขึ้ น มาจากภาษา SGML
(Standard Generalized Markup Language) โดย Tim Berners-Lee ในปี ค.ศ. 1990 ซึ่ งใช้
ระบบของ CERN (Conseil Europeen pour la Recherche Nucleaire) เบื้องต้นได้ เริ่ มใช้ที่
สวิตเซอร์ แลนด์ จากนั้นก็ได้แพร่ ขยายออกไป ระบบนี้ ได้ถูกตั้งชื่ อว่า World Wide Web
:WWW ที่เรารู ้จกกันมาจนถึงยุคปั จจุบน (ประชา พฤกษ์ประเสริ ฐ , 2552)
ั ั
โครงสร้างของภาษา HTML ประกอบด้วย 3 ส่ วน คือ
1. ส่ วนที่กาหนดให้เว็บเบราว์เซอร์ ทราบว่าเป็ นแฟ้ มข้อมูลชนิ ด HTML ซึ่ งจะมี
่
แท็ก <html>…</html> กากับอยูที่จุดเริ่ มต้นและจุดสิ้ นสุ ดของแฟ้ มข้อมูล
2. ส่ วนหัวเรื่ อง (Head) เป็ นส่ วนที่กาหนดให้แสดงข้อความที่แถบหัวเรื่ องของ
หน้าเว็บเพจนั้น ๆ เช่น แท็ก <title>....</title> และเก็บแท็กพิเศษอื่น ๆ
3. ส่ ว นเนื้ อ หา (Body) เป็ นส่ ว นที่ แ สดงเนื้ อ หาของเว็ บ เพจทั้ง หมดซึ่ ง
ประกอบด้วย ข้อความและแท็กต่าง ๆ เช่น แท็กสาหรับจัดการกับรู ปแบบของ
ข้อความ ตาราง รู ปภาพ กราฟิ กต่างๆ สี ของตัวอักษร สี พ้ืน เป็ นต้น

(http://school.obec.go.th/pp_school/html/html_stu.html , 8/4/2555)

12

รู ปภาพที่ 2.4 แสดงโค้ดการใช้งาน HTML ร่ วมกับ PHP

การทางานจะมีการเรี ยกใช้ สไตล์ชีท Admin.css เพื่อใช้ในการจัด รู ปแบบการ
ทางานของส่ วนต่างๆ และยังมีการใช้งานร่ วมกับ PHP เพื่อเรี ยกใช้ฟังก์ชนขึ้นมาทางาน
ั

2.1.5 JavaScript

ภาษาจาวาสคริ ป ต์ (JavaScript) เป็ นภาษายุค ใหม่ ส าหรั บ การออกแบบเขี ย น
ั
โปรแกรมบนระบบอินเตอร์ เน็ต ช่วยเพิ่มลูกเล่นแพรวพราวให้กบเว็บเพจ สร้างจินตนาการ
ั ้
และจุดประกายความคิดให้กบผูสร้างเว็บเพจ นอกจากนี้ ยงมีความสามารถในงานด้านการ
ั
คานวน, การเปรี ยบเทียบ, การแสดงผลทั้งทางข้อความ, รู ปภาพ, เสี ยงในรระบบมัลติมีเดีย,
การสร้ า งแบบฟอร์ ม ให้ส ามารถโต้ตอบกับ ผูใ ช้ง านได้ท น ที , การสร้ า งปุ่ มค าสั่ ง , การ
้ ั
ตอบสนองต่ อเหตุ การณ์ การเปลี่ ยนแปลงต่า งๆ เช่ น วันที่ เวลา จานวนผูเ้ ข้า ชมเว็บเพจ
นอกจากนี้ แล้วยังสามารถสนับสนุ นคุ ณสมบัติและพื้นฐานของภาษาจาวาได้เป็ นอย่างดี
(วันชัย แซ่เตีย , 2543)

13

จาวาสคริ ปต์เป็ นภาษาสคริ ปต์เชิ งวัตถุ หรื อเรี ยกว่า อ็อบเจ็คโอเรี ยลเต็ด (Object
Oriented Programming) ที่มีเป้ าหมายในการออกแบบและพัฒนาโปรแกรมในระบบ
อินเตอร์ เน็ต สาหรับผูเ้ ขียนเอกสารด้วยภาษา HTML สามารถทางานข้ามแพลตฟอร์ มได้
ทางานร่ วมกับภาษา HTML และภาษาจาวาได้ท้ งฝั่ งไคลเอนต์ (Client) และ ทางฝั่ ง
ั
เซิร์ฟเวอร์ (Server) โดยมีลกษณะการทางานดังนี้
ั

1. Navigator JavaScript
เป็ นภาษา JavaScript ที่ถูกแปลทางฝั่งไคลเอนต์ (Client)
2. LiveWire JavaScript
เป็ นภาษา JavaScript ที่ถูกแปลทางฝั่งเซิ ร์ฟเวอร์ (Server)
่
ด้วยลักษณะการทางานของภาษาจาวาสคริ ปต์ซ่ ึ งฝั งตัวอยูในเอกสาร HTML จึง
สามารถสั่งทางานได้เลยในฝั่งไคลเอนต์โดยไม่ตองคอมไพล์ดงจาวา กล่าวคือ ภาษาจาวา
้ ่ั
สคริ ปต์จะทางานไปพร้อมร่ วมกันกับเอกสาร HTML ในแบบอินเตอร์ พรี เตอร์ (Interpreter)
คือแปลไปทีละบรรทัด จึงเป็ นภาษาที่ง่ายต่อการเข้าใจและง่ายต่อการใช้งานสาหรับผูที่มี
้
ความรู้ภาษา HTML มาบ้างแล้ว (สิ ทธิชย ประสารวงศ์ , 2543)
ั

รู ปภาพที่ 2.5 แสดงโค้ดในการเรี ยกใช้ JavaScript

เป็ นการทางานของ HTML ที่เรี ยกไฟล์ JavaScript ที่ชื่อ slide.js ขึ้นมาทางาน

14

รู ปภาพที่ 2.6 แสดงโค้ดการทางานของ JavaScript

โค้ด JavaScript นี้ เป็ นการเขียนคาสั่งใช้ในการแสดงการทางานของสไลด์ ในการ
โชว์ตวอย่างรู ปภาพ
ั

2.1.6 Adobe Flash (ActionScript)

Flash จะใช้ ActionScript เป็ นภาษาในการเพิ่ ม ความสามารถเชิ ง โต้ต อบ
ั
(Interactive) ให้กบ Movie สิ่ งที่ ActionScript จะทาได้ การควบคุมหัวอ่านเฟรมของมูฟวี่,
ั
การสร้างเว็บไซต์เชิ งโต้ตอบ, การเพิ่มเทคนิ คพิเศษให้กบการเคลื่อนไหว, การสร้างฟอร์ ม,
การติดต่อกับฐานข้อมูล(กาพล ลีลาภรณ์ , 2551)

ActionScript จัดเป็ นภาษาแบบ Script Language มี ลก ษณะในเชิ งออปเจ็ค
ั
(Object-Oriented Programming Language) เหมือนกับ JavaScript ซึ่ งจัดเป็ นมาตรฐาน
ชนิ ดเดียวกัน เรี ยกว่า ECMA-262 ถูกกาหนดขึ้นโดย European Computers Manufacturers
Association (ECMA) เพื่อใช้เป็ นมาตรฐานของภาษา JavaScript (กาพล ลีลาภรณ์ , 2544)

15

รู ปภาพที่ 2.7 แสดงโค้ดการใช้งาน ActionScript 3.0

เป็ นการทางานของ ActionScript 3.0 จะมีการประกาศตัวแปรของชื่ อปุ่ ม ใน
ฟังก์ชนจะมีการทางานโดยการเปลี่ยนหน้าเพจเมื่อมีการคลิกปุ่ ม
ั

16

บทที่ 3

ขั้นตอนการศึกษา

ขั้นตอนการศึกษาโครงงานสามารถแบ่งขั้นตอนการศึกษาออกเป็ น 5 ขั้นตอนดังรู ปภาพที่
3.1 ขั้นตอนการศึกษาตัวแบบ คือ

ขั้นตอนที่ 1 การระบุปัญหา

ขั้นตอนที่ 2 การรวบรวมข้อมูลและการจัดการข้อมูล

ขั้นตอนที่ 3 การวิเคราะห์ขอมูล
้

ขั้นตอนที่ 4 การสร้างตัวแบบ

ขั้นตอนที่ 5 การนาตัวแบบมาใช้ และประเมินผล

การระบุปัญหา

การรวบรวมข้อมูลและการ
จัดการข้อมูล
ปรับตัวแบบและเก็บข้อมูลเพิ่ม การวิเคราะห์ขอมูล
้

การสร้างตัวแบบ

ทดสอบตัวแบบ

ไม่พอใจคาตอบ
วิเคราะห์
พอใจคาตอบ
การนาตัวแบบมาใช้และการ
รู ปภาพที่ 3.1 ขั้นตอนการศึกษาตัวแบบ นผล
ประเมิ

17

ขั้นตอนที่ 1 การระบุปัญหา

ความเป็ นมาและความสาคัญของปัญหา

จากอดี ต ที่ ผ่า นมาได้มี ก ารน าเอาเทคโนโลยี ท างคอมพิ ว เตอร์ เ ข้า มาใช้ อ ย่ า ง
แพร่ หลาย และได้มีการเอาเทคโนโลยีต่างๆเข้ามามีบทบาทในชี วิตประจาวันของมนุ ษย์ เพื่อช่ วย
ั ้
อานวยความสะดวกสบายให้กบผูใช้มากยิงขึ้น เทคโนโลยีจึงเป็ นอีกหนึ่งปั จจัยที่จาเป็ นต่อมนุษย์
่

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

ระบบโปสการ์ดดีไซน์ สามารถออกแบบโปสการ์ดได้เอง ซึ่งโปสการ์ดที่ได้ จะมีภาพความ
ประความประทับใจและมีคุณค่าทางจิตใจมากยิ่งขึ้น และทาให้บุคคลต่างๆไม่ลืมที่จะส่ งโปสการ์ ด
หรื อภาพความประทับใจดีๆหากัน

ปัญหาทีพบ
่

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

18

แนวทางการแก้ปัญหา

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

1.8 วัตถุประสงค์ การศึกษา
1.8.1 เพื่อพัฒนาเว็บไซต์ให้บริ การออกแบบโปสการ์ด
1.8.2 เพื่อพัฒนาระบบโปสการ์ ด ให้สามารถออกแบบการตกแต่งโปสการ์ ดให้ตรงตาม
ความต้องการของผูใช้ได้
้
1.8.3 เพื่ อให้ผูใ ช้ไ ม่ ต้องการติ ดตั้ง ซอฟต์แ วร์ เกี่ ย วกับ การออกแบบโปสการ์ ด และ
้
สามารถใช้งานได้สะดวกมากยิงขึ้นโดยเข้าใช้งานผ่านเว็บไซต์ของเราได้ทนที
่ ั
1.9 ผลทีคาดว่าจะได้ รับ
่
1. ได้พฒนาเว็บไซต์ให้มีประสิ ทธิ ภาพยิงขึ้น และลดต้นทุนในการจ้างโปรแกรมเมอร์
ั ่
2. ได้ระบบโปสการ์ดที่ตรงตามความต้องการของผูใช้
้
3. ช่วยลดปั ญหาของการติดตั้งซอฟต์แวร์
4. ช่วยให้ผใช้งานสามารถสร้างโลโก้ของตัวเองได้อย่างง่ายดาย
ู้
1.10 ขอบเขตการศึกษา
1.10.1 ระบบผูใช้ที่เป็ นผูใช้งานทัวไป
้ ้ ่
1.10.1.1 ผูใช้งานสามารถสมัครสมาชิกได้
้
1.10.2 ระบบสมัครสมาชิก
1.10.2.1 สามารถตรวจสอบว่าข้อมูลซ้ ากันหรื อไม่
1.10.3 ระบบผูใช้งานที่เป็ นสมาชิก
้
1.10.3.1 สามารถล็อกอินเข้าสู่ ระบบได้
1.10.3.2 สามารถแก้ไขข้อมูลได้

19

1.10.3.3 สามารถแก้ไขรหัสผ่านได้
1.10.3.4 สามารถใช้งานระบบจัดการระบบโปสการ์ดได้
1.10.4 ระบบผูดูแลระบบ
้
1.10.4.1 สามารถเข้าถึงข้อมูลสมาชิกได้
1.10.4.2 สามารถระงับและยกเลิกการใช้งานของสมาชิกได้
1.10.5 ระบบแกลเลอรี่
1.10.5.1 สามารถอัพโหลดรู ปจากเครื่ องได้
1.10.5.2 สามารถแสดงรู ปได้
1.10.6.1 สามารถลากรู ปเล่นมาตกแต่งได้ (Drag ang Drop)
1.10.6.2 สามารถย่อขยายลูกเล่นได้ (Resize)
1.10.6.3 สามารถหมุนลูกเล่นได้ (Rotate)
1.10.7.1 สาสามารถลบลูกเล่นได้ (Remove )
1.10.7.2 สามารถวาดรู ปได้อย่างอิสระ
1.10.7.3 สามารถเลือกฟอนต์ ขนาด และปรับสี ตวอักษรได้ (Font)
ั
1.10.7.4 สามารถเปลี่ยนสี พ้ืนหลังได้ (Background)
1.10.8.1 สามารถเลือกกรอบได้ (Frame)
1.10.8.2 สามารถ save ลงแกลเลอรี่ ได้
1.10.8.3 สามารถส่ งเข้าเมลได้
1.10.8.4 สามารถแชร์บน facebook ได้
1.10.9 ระบบลืมรหัสผ่าน
1.10.10 ระบบล็อกอินเข้าสู ระบบ

20

ขั้นตอนที่ 2 การรวบรวมข้ อมูลและการจัดการข้ อมูล

รู ปภาพที่ 3.2 ภาพตัวอย่างโดยรวมของระบบที่ตองการพัฒนา
้

การวิ เ คราะห์ ร ะบบมี จุ ด ประสงค์ใ นการท าความเข้า ใจกับ ระบบงานปั จ จุ บ ัน เพื่ อ เป็ น
แนวทางในการออกแบบใหม่ โดยนักวิเคราะห์ระบบทาการศึกษาระบบปั จจุบนอย่างละเอียด และ
ั
หาความต้องการของระบบใหม่ที่จะพัฒนา ในขั้นตอนนี้ จะเกี่ ยวข้องกับระบบการเก็บรวบรวม
ข้อมูล การวิเคราะห์ ขอมูลที่ รวบรวมมา การวิเคราะห์ กระบวนการต่างๆในระบบ การวิเคราะห์
้
ลัก ษณะของผลลัพ ธ์ และสิ่ ง ที่ น าเข้า เพื่ อศึ ก ษาถึ ง ขั้น ตอนการท างานของระบบปั จจุ บ ัน และ
่
วิเคราะห์วามีงานใดบ้างที่มีปัญหาเกิดขึ้นควรปรับปรุ งหรื อจะมีแนวทางในการแก้ปัญหาอย่างไร

เป็ นกระบวนการในการเก็บ รวบรวมข้อมู ล ข้อเท็จจริ ง และสารสนเทศของระบบแบบ
ดั้งเดิมที่ยงนิ ยมใช้กนอยู่ เช่ น การศึกษาจากเอกสาร แบบฟอร์ ม และฐานข้อมูลที่ใช้อยู่ในปั จจุบน
ั ั ั
การค้นคว้า การสังเกตการณ์ การจัดทาแบบสอบถาม และการสัมภาษณ์ เป็ นต้น

21

ขั้นตอนที่ 3 การวิเคราะห์ ข้อมูล

แผนภาพบริบท ( Context Diagram )

แสดงให้เห็ นถึ งการติ ดต่อการใช้ขอมูล ระหว่างผูใช้ที่เป็ นสมาชิ กกับเว็บไซต์ใ ห้บริ การ
้ ้
ตกแต่งรู ปภาพและการเรี ยกใช้ขอมูลต่างๆ บนเว็บไซต์
้

รู ปภาพที่ 3.3 แผนภาพบริ บท(Context Diagram)

แผนภาพกระแสข้ อมูล ( Data Flow Diagram)

แผนภาพกระแสข้อมูลแสดงรายละเอียดต่างๆ ของการทางานของ ระบบเว็บไซต์ให้บริ การ
ตกแต่งรู ปภาพ

รู ปภาพที่ 3.4 การสมัครสมาชิก

22

รู ปภาพที่ 3.5 การเข้าสู่ ระบบของสมาชิก

รู ปภาพที่ 3.6 แสดงการแก้ไขข้อมูลของสมาชิก (Data Flow Diagram Level 1)

23

รู ปภาพที่ 3.7 แสดงการเข้าสู่ ระบบของผูดูแลระบบ
้

รู ปภาพที่ 3.8 แสดงการแก้ไขข้อมูลของผูดูแลระบบ (Data Flow Diagram Level 1)
้

รู ปภาพที่ 3.9 แสดงการลืมรหัสผ่าน

24

ขั้นตอนที่ 3 การวิเคราะห์ ข้อมูล

แผนภาพแสดงความสัมพันธ์ระหว่างเอนทิตี ( Entity-Relationship Diagrams: ERD )

รู ปภาพที่ 3.10 แผนภาพแสดงความสัมพันธ์ระหว่างเอนทิตีและแอททริบิวต์

25

รู ปภาพที่ 3.11 Use Case Diagram

26

ขั้นตอนที่ 4 การสร้ างตัวแบบ

ตารางฐานข้อมูลของเว็บไซต์ตกแต่งรู ป เป็ นตารางแสดงการรวมกลุ่มของคุ ณสมบัติใน
ฐานข้อมูล หรื อ ไฟล์ชื่อของตารางต่างๆ ดังนี้

ชื่อตาราง admin
วัตถุประสงค์ เพื่อเก็บข้อมูลการของผูดูแลระบบ
้
แฟ้ มที่เกี่ยวข้อง -
ตารางที่ 3.1 ตารางแสดงแฟ้ มข้อมูลผูดูแลระบบ
้
คุณสมบัติ (Attribute)

(Default)

ตรวจสอบความถูกต้ อง
(Validation Check)
(Sequence No)

(Description)

(Key Type)
ประเภทคีย์
คาอธิบาย

(Width)

ประเภท
(Type)
ขนาด
ลาดับ

1. Auser ชื่อผูใช้ระบบ
้ 30 varchar ค่ าเบืองต้ น
- ้ NOT NULL PK
2. apasswd รหัสผ่าน 20 varchar - NOT NULL -
3. aname ชื่อ 30 varchar - NOT NULL -
4. asurname นามสกุล 30 varchar - NOT NULL -
5. amail อีเมล์ 50 varchar - NOT NULL -
6. Atel เบอร์โทรศัพท์ 10 varchar - NOT NULL -
7. astatus สถานะผูใช้
้ ‘ADMIN’, Enum - NOT NULL -
’ROOT’
8 Ative การยืนยันตัวตน ‘Yes’,’No’ Enum - NOT NULL -

27

ชื่อตาราง member
วัตถุประสงค์ เพื่อเก็บข้อมูลการของสมาชิก
แฟ้ มที่เกี่ยวข้อง admin
ตารางที่ 3.2 ตารางแสดงแฟ้ มข้อมูลสมาชิก

(Validation Check)
(Sequence No)

(Description)

(Key Type)
(Attribute)

ค่ าเบืองต้ น
คุณสมบัติ

คาอธิบาย

(Default)
(Width)

ประเภท
(Type)
ขนาด
ลาดับ

้
1. Muser ชื่อสมาชิก 30 varchar - NOT NULL PK
2. mpasswd รหัสผ่าน 20 varchar - NOT NULL -
3. Mname ชื่อ 30 varchar - NOT NULL -
4. msurname นามสกุล 30 varchar - NOT NULL -
5. Mmail อีเมล์ 50 varchar - NOT NULL -
6. Mid การตรวจสอบ 32 varchar - NOT NULL -
Session ID

7. Active การยืนยันตัวตน ‘Yes’,’No’ Enum ‘Yes’ NOT NULL -
8. Mblock สถานะผูใช้
้ 1 int ‘0’ NOT NULL -

28

ชื่อตาราง tblimagesblob
วัตถุประสงค์ เพื่อเก็บข้อมูลรู ปภาพของสมาชิก
แฟ้ มที่เกี่ยวข้อง member
ตารางที่ 3.3 ตารางแสดงแฟ้ มการเก็บข้อมูลรู ปภาพของสมาชิก

คาอธิบาย (Description)

(Key
(Width)

(Default)
(Attribute)

(Type)
(Sequence

(Validation Check)

Type)
No)


ประเภท
ขนาด
ลาดับ

้
1. image_id รหัสรู ป 11 int - NOT NULL PK
2. image_data รู ปภาพที่ถูกแปลง - longBlob - NOT NULL -
เป็ นไบนารี แล้ว

3. image_type ชนิดขอไฟล์ขอมูล
้ 50 varchar - NOT NULL -
4. image_size ขนาดของไฟล์รูป 50 varchar - NOT NULL -
5. Caption คาบรรยายรู ป 100 varchar - NULL -
6. Muser ชื่อสมาชิก 30 varchar - NOT NULL FK

29

ชื่อตาราง user
วัตถุประสงค์ เพื่อเก็บข้อมูลการล็อกอินของสมาชิก
แฟ้ มที่เกี่ยวข้อง member, admin
ตารางที่ 3.4 ตารางแสดงการเก็บข้อมูลการล็อกอินของสมาชิก

คาอธิบาย (Description)

(Key
(Width)

(Default)
(Attribute)

(Type)
(Sequence

(Validation Check)

Type)
No)


ประเภท
ขนาด
ลาดับ

้
1. Id รหัสผูใช้
้ 11 Int - NOT PK
NULL
2. Email รู ปภาพที่ถูกแปลง 70 longBlob - NULL -
เป็ นไบนารี แล้ว

3. oauth_uid ่
รหัสผูใช้ที่อยูใน
้ 200 Varchar - NULL -
เฟสบุค ๊
4. oauth_provider ชื่อผูให้บริ การ
้ 200 Varchar - NULL -
5. username ชื่อผูใช้งาน
้ 100 varchar - NULL -

30

แผนภาพแสดงเรื่องราว (Story Board)

Code PostcardDesign 1

Name หน้ าต้ อนรับ

รู ปภาพที่ 3.12 รู ปแสดงตัวแบบหน้าต้อนรับ

Sound ไม่ มี

Picture มี

Vidio หรือ Animation ไม่ มี

Link to มีการเข้ าระบบ, ลืมรหัสผ่ าน และมีปุ่มเพือทาการเชื่อมไปหน้ าเว็บเพจ
่
ต่ างๆภายในเว็บไซต์

Description เป็ นหน้ าแสดงการต้ อนรับให้ กบบุคคลทัวไป และสมาชิ กที่เข้ ามาเยีม
ั ่ ่
ชมเว็บไซต์

31


Name หน้ าสมัครสมาชิก

รู ปภาพที่ 3.13 รู ปแสดงตัวแบบสมัครสมาชิก


Picture มี


Link to มีการเข้ าระบบ, ลืมรหัสผ่ าน และมีปุ่มเพือทาการเชื่ อมไปหน้ าเว็บเพจ
่
ต่ างๆภายในเว็บไซต์

Description เป็ นเว็บแสดงการสมัครสมาชิ กของผู้ใช้ งานทัวไป
่

32


Name หน้ าแก้ ไขข้ อมูลส่ วนตัวของสมาชิ ก

รู ปภาพที่ 3.14 รู ปแสดงตัวแบบแก้ไขข้อมูลของสมาชิก


Picture มี


Link to มีการล็อกเอ้ าท์ ออกจากระบบ และมีปุ่มเพือทาการเชื่ อมไปหน้ าเว็บ
่
เพจต่ างๆภายในเว็บไซต์

Description เป็ นหน้ าแสดงการปรับปรุ งข้ อมูลส่ วนตัวของสมาชิ ก

33


Name หน้ าแก้ ไขรหัสผ่านของสมาชิก

รู ปภาพที่ 3.15 รู ปแสดงตัวแบบแก้ไขรหัสผ่านของสมาชิก


Picture มี


่

Description เป็ นหน้ าแสดงการปรับปรุ งรหัสผ่านของสมาชิก

34


Name หน้ าอัพโหลดรู ปภาพ

รู ปภาพที่ 3.16 รู ปแสดงตัวแบบหน้าการอัพโหลดรู ป


Picture มี


่

Description เป็ นหน้ าแสดงการอัพโหลดรู ปภาพของสมาชิ ก โดยสมาชิ กสามารถ
พิมพ์คาบรรยายของแต่ ละภาพได้

35


Name หน้ าแกลเลอรี่

รู ปภาพที่ 3.17 รู ปแสดงตัวแบบหน้าแกลเลอรี่


Picture มี


่

Description เป็ นหน้ าแสดงรู ปภาพทีของสมาชิ กทีได้ จากการอัพโหลด และสมาชิ ก
่ ่
ยังสามารถรถภาพได้

36


Name หน้ าออกแบบโปสการ์ ด

รู ปภาพที่ 3.18 รู ปแสดงตัวแบบหน้าออกแบบโปสการ์ ด


Picture มี

Vidio หรือ Animation มี

่

Description เป็ นหน้ าแสดงการออกแบบโปสการ์ ดสาหรับสมาชิก

37


Name หน้ าแก้ ไขข้ อมูลส่ วนตัวของผู้ดูแลระบบ

รู ปภาพที่ 3.19 รู ปแสดงตัวแบบหน้าแก้ไขข้อมูลของผูดูแลระบบ
้


Picture มี


่

Description เป็ นหน้ าแสดงการปรับปรุ งข้ อมูลส่ วนตัวของผู้ดูแลระบบ

38


Name หน้ าแก้ ไขรหัสผ่ านของผู้ดูแลระบบ

รู ปภาพที่ 3.20 รู ปแสดงตัวแบบหน้าแก้ไขรหัสผ่านของผูดูแลระบบ
้


Picture มี


่

Description เป็ นหน้ าแสดงการปรับปรุ งรหัสผ่ านของผู้ดูแลระบบ

39


Name หน้ าแสดงรายชื่อสมาชิก

รู ปภาพที่ 3.21 รู ปแสดงตัวแบบหน้าแสดงรายชื่อสมาชิก


Picture มี


่

Description เป็ นหน้ าแสดงรายชื่อของสมาชิกทั้งหมด

รูปเล่มวิชาโครงงาน

รูปเล่มวิชาโครงงาน

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to รูปเล่มวิชาโครงงาน

Similar to รูปเล่มวิชาโครงงาน (20)

More from AjBenny Pong

More from AjBenny Pong (6)

รูปเล่มวิชาโครงงาน