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

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

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

4. ค
สารบัญ
หน้ า
กิตติกรรมประกาศ ก
คานา ข
สารบัญ ค
สารบัญรู ปภาพ จ
สารบัญตาราง ช
บทที่ 1 บทนา 1
1.1 ความเป็ นมาและความสาคัญของปัญหา 1
1.2 วัตถุประสงค์ 1
1.3 ขอบเขตการศึกษา 1
1.4 นิยามศัพท์เฉพาะ 2
1.5 ประโยชน์ที่คาดว่าจะได้รับ 3
1.6 แผนการดาเนินงาน 3
1.7 ตารางแผนการดาเนินงาน 4
1.8 เครื่ องมือที่คาดว่าจะต้องใช้ 4
บทที่ 2 แนวคิด ทฤษฎีและเทคโนโลยีทเี่ กี่ยวข้ อง 5
2.1 ทฤษฎี เทคโนโลยีท่ีเกี่ยวข้อง 5
บทที่ 3 ขั้นตอนการศึกษา 13
3.2 การระบุปัญหา 14
3.3 การรวบรวมข้อมูลและการจัดการข้อมูล 17
3.4 การวิเคราะห์ขอมูล
้ 21
3.5 การสร้างตัวแบบ 30
บทที่ 4 ผลการศึกษา 36
4.1 ฮาร์ดแวร์ที่ใช้ในระบบ 36
4.2 โปรแกรมและอุปกรณ์ที่ใช้ 36
4.3 สรุ ปกระบวนการทางานทั้งหมดของเว็บไซต์ 38

5. ง
4.4. การออกแบบส่ วนเชื่ อมประสานกับผูใช้ (User Interface)
้ 40
บทที่ 5 สรุ ปผลการศึกษา การอภิปรายผล และข้ อเสนอแนะ 51
5.1 ปัญหาและอุปสรรคในการดาเนินงาน 51
5.2 การสรุ ปผลการศึกษา 51
5.3 ข้อเสนอแนะ 52
บรรณานุกรม 53
ภาคผนวก 54
ประวัติผ้ ูจัดทา 61

6. จ
สารบัญรู ปภาพ
รู ปภาพ หน้ า
รู ปภาพที่ 2.1 แสดงโค้ดคาสังในการตรวจสอบรู ปแบบอีเมล์
่ 6
รู ปภาพที่ 2.2 แสดงโค้ดคาสั่งในการล๊อกอินเข้าระบบ 7
รู ปภาพที่ 2.3 แสดงโค้ดคาสั่งในการ Activate 8
รู ปภาพที่ 2.4 แสดงโค้ดคาสั่งกาหนดรู ปแบบ stylesheet 10
รู ปภาพที่ 2.5 แสดงโค้ดคาสั่งการสร้างฟอร์ มหน้าลืมรหัสผ่าน 11
รู ปภาพที่ 2.6 แสดงโค้ดคาสังการสร้างแฟลช
่ 12
รู ปภาพที่ 3.1 ขั้นตอนการศึกษาตัวแบบ 13
รู ปภาพที่ 3.2 ภาพตัวอย่างรวมของระบบที่ตองการพัฒนา
้ 17
รู ปภาพที่ 3.3 แผนภาพและบริ บท (Context diagram) 18
รู ปภาพที่ 3.4 แสดงการสมัครสมาชิก 18
รู ปภาพที่ 3.5 แสดงการเข้าสู่ ระบบสมาชิก 18
รู ปภาพที่ 3.6 แสดงการจัดการข้อมูลต่าง ๆ ของสมาชิก 19
รู ปภาพที่ 3.7 แสดงการเข้าสู่ ระบบผูดูแลระบบ
้ 19
รู ปภาพที่ 3.8 แสดงการจัดการข้อมูลต่าง ๆ ของผูดูแลระบบ
้ 20
รู ปภาพที่ 3.9 แสดงการลืมรหัสผ่าน 20
รู ปภาพที่ 3.10 แผนภาพแสดงความสัมพันธ์ระหว่างเอนทิตีและแอททริ บิวต์ 21
รู ปภาพที่ 3.11 Use Case Diagram 22
รู ปภาพที่ 3.12 แผนภาพเส้นและสัญลักษณ์ของหน้าต้อนรับโดยให้ผใช้งาน
ู้
หรื อสมาชิกเลือกที่จะ สมัครสมาชิก เข้าสู่ ระบบ หรื อลืมรหัสผ่าน 26
รู ปภาพที่ 3.13 แผนภาพเส้นและสัญลักษณ์ของระบบสมัครสมาชิก 27
รู ปภาพที่ 3.14 แผนภาพเส้นและสัญลักษณ์ของระบบลืมรหัสผ่าน 28
รู ปภาพที่ 3.15 แผนภาพเส้นและสัญลักษณ์ของการเข้าสู่ ระบบ 29
รู ปภาพที่ 3.16 รู ปภาพแสดงหน้าแรกของเว็บไซต์ 30
รู ปภาพที่ 3.17 รู ปภาพแสดงหน้าสมัครสมาชิก 31
รู ปภาพที่ 3.18 รู ปภาพแสดงหน้าเข้าสู่ ระบบ 32

7. ฉ
รู ปภาพที่ 3.19 รู ปภาพแสดงหน้าลืมรหัสผ่าน 33
รู ปภาพที่ 3.20 รู ปภาพแสดงหน้าแรกของสมาชิก 34
รู ปภาพที่ 3.21 รู ปภาพแสดงหน้าแรกของผูดูแลระบบ
้ 35
รู ปภาพที่ 4.1 แสดงหน้าแรกของเว็บไซต์ 40
รู ปภาพที่ 4.2 แสดงหน้าสมัครสมาชิก 41
รู ปภาพที่ 4.3 แสดงหน้าเข้าสู่ ระบบและหน้าเข้าสู่ ระบบด้วย Facebook 42
รู ปภาพที่ 4.4 แสดงหน้าแก้ไขข้อมูลส่ วนตัว 43
รู ปภาพที่ 4.5 แสดงหน้าเปลี่ยนรหัสผ่าน 44
รู ปภาพที่ 4.6 แสดงหน้าสร้างโลโก้ 45
รู ปภาพที่ 4.7 แสดงหน้าห้องแสดงรู ปภาพ 47
รู ปภาพที่ 4.8 แสดงหน้าการจัดการอัลบัมรู ปภาพ 48
รู ปภาพที่ 4.9 แสดงหน้าการจัดการรู ปภาพ 48
รู ปภาพที่ 4.10 แสดงหน้าลืมรหัสผ่าน 49
รู ปภาพที่ 4.11 แสดงหน้าออกจากระบบ 50

8. ช
สารบัญตาราง
ตาราง หน้ า
ตารางที่ 1.1 ตารางแผนการดาเนินงาน 4
ตารางที่ 3.1 แสดงแฟ้ มข้อมูลสมาชิก 23
ตารางที่ 3.2 แสดงแฟ้ มข้อมูลผูดูแลระบบ
้ 24
ตารางที่ 3.3 แสดงแฟ้ มข้อมูลสมาชิกที่ดึงมาจาก facebook 24
ตารางที่ 3.4 แสดงแฟ้ มข้อมูลอัลบัมรู ปภาพ 25
ตารางที่ 3.5 แสดงแฟ้ มข้อมูลรู ปภาพ 25
ตารางที่ 4.1. แสดงฮาร์ ดแวร์ ท้ งหมดที่ใช้ในการสร้างระบบ
ั 36
ตารางที่ 4.2. แสดงรายชื่อซอฟแวร์ที่ใช้ในระบบ 38
ตารางที่ 4.3 แสดงวิธีการทางานการสมัครสมาชิก 38
ตารางที่ 4.4 แสดงวิธีการทางานของสมาชิก 39
ตารางที่ 4.5 แสดงวิธีการทางานของผูดูแลระบบ
้ 39
ตารางที่ 4.6 แสดงวิธีการทางานลืมรหัสผ่าน 39

9. 1
บทที่ 1
บทนา
1.1 ความเป็ นมาและความสาคัญของปัญหา
่
ปั จจุบนการสร้างโลโก้ โดยส่ วนใหญ่จะอยูในรู ปแบบของซอฟต์แวร์ ที่เมื่อต้องการจะใช้
ั
งานจะต้องทาการติดตั้งซอฟต์แวร์ บนเครื่ องคอมพิวเตอร์ ของเราก่อนจึงจะสามารถทาการออกแบบ
่
ได้ ดังนั้นจึงทาให้ผใช้งานหลายคนต้องประสบกับปั ญหาต่างๆ ไม่วาจะเป็ นปั ญหาอันเนื่องมาจาก
ู้
้ ้ ุ่
ผูใช้งาน เช่น ผูใช้งานไม่มีความรู ้ทางด้านซอฟแวร์ ขั้นตอนในการติดตั้งซอฟแวร์ ยงยากเป็ นต้น จึง
เล็งเห็นว่า ถ้ามีเว็บไซต์ท่ีจะช่วยรองรับปั ญหาต่างๆและตอบสนองต่อความต้องการของผูใช้งานจะ ้
ช่วยทาให้การทางานมีประสิ ทธิ ภาพมากยิงขึ้น ่
การสร้ างโลโก้ ควรจะมีระบบที่ จะช่ วยในการจัดการกับปั ญหาที่ เกิ ดขึ้ น จึงคิดที่จะทา
เว็บไซต์ที่ให้บริ การเกี่ ยวกับการสร้ างโลโก้ ที่ จะช่ วยให้ผูใช้งานสามารถสร้ างโลโก้ ผ่านระบบ
้
ออนไลน์ได้ โดยไม่จาเป็ นต้องทาการติดตั้งซอฟแวร์ ใดๆ ซึ่ งเว็บไซต์น้ ี จะเข้ามาช่วยให้การทางาน
้ ั ้
ของผูใช้งานมีประสิ ทธิ ภาพ ทั้งยังช่วยอานวยความสะดวกให้กบผูใช้งานมากยิงขึ้น ่
เว็บไซต์น้ ี ทาขึ้นเพื่อทาให้การสร้ างโลโก้ ที่ ส่วนใหญ่จะอยู่ในรู ปแบบของซอฟต์แวร์ ให้
เปลี่ ยนมาอยู่ในรู ปแบบของเว็บไซต์ โดยไม่จาเป็ นต้องเสี ยเงิ นซื้ อ หรื อติดตั้งซอฟแวร์ ให้เสี ยเวลา
ั ้
และเพื่อสร้างตัวเลือกให้กบผูใช้งานอีกด้วย
1.2 วัตถุประสงค์
1.2.1 เพื่อให้ผใช้ที่ไม่ตองการติดตั้งซอฟต์แวร์ เกี่ยวกับการสร้างโลโก้
ู้ ้
ได้ใช้งานสะดวกมากยิงขึ้โดยเข้าใช้งานผ่านเว็บไซต์ของเราได้ทนที
่ ั
1.2.2 เพือให้ผใช้งานสามารถสร้างโลโก้ ของตัวเองได้อย่างง่ายดาย โดยจะมี
่ ู้
เครื่ องมือต่างๆ ไว้ให้ใช้ตกแต่งได้
1.3 ขอบเขตการศึกษา
1.3.1 ระบบผูใช้งานทัวไป
้ ่
1.3.1.1 ผูใช้งานทัวไปสามารถสมัครสมาชิกได้
้ ่
1.3.2 ระบบสมัครสมาชิก
1.3.2.1 ตรวจสอบความถูกต้องของข้อมูล
1.3.2.2 Activate (การยืนยันการสมัครสมาชิก)
1.3.3 ระบบสมาชิก

10. 2
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.4.3 ้
กูรหัสผ่านได้
1.3.4.4 สามารถ แก้ไข ข้อมูลของสมาชิกได้
1.3.4.5 สามารถลบสมาชิกออกจากระบบได้
1.3.4.6 สามารถ ลบ แก้ไข รู ปภาพของสมาชิกได้
1.3.4.7 สามารถดูขอมูลทั้งหมดของสมาชิกได้
้
1.3.4.8 สามารถ ลบ ข้อมูลของสมาชิกได้
้
1.3.5 ระบบกูรหัสผ่าน
1.3.5.1 ้
สามารถกูรหัสผ่านเดิมเมื่อลืมรหัสผ่านได้ โดยต้องเป็ นสมาชิกหรื อผูดูแล
้
ระบบ
1.3.6 ระบบการออกแบบ(ตัวโปรแกรม) สามารถสร้างโลโก้ได้เองจะมีเครื่ องมือให้เลือกใช้
งาน ดังนี้
1.3.6.1 Shapes
1.3.6.1.1 Symbol สามารถเลือกได้
1.3.6.2 สี
1.3.6.2.1 เลือกใส่ สีได้
1.3.6.3 ข้อความ
1.3.6.3.1 สามารถใส่ ขอความได้
้
1.3.6.4 ขนาด
1.3.6.4.1 สามารถปรับขนาดได้
1.3.6.5 การหมุน
1.3.6.5.1 สามารถหมุนด้านซ้ายหรื อด้านขวาได้
1.3.6.6 สามารถปรับความหนาบางของเส้นได้
1.3.6.7 สามารถนารู ปภาพจากภายนอกมาใช้ในการออกแบบได้
1.3.6.7.1 ไฟล์ นามสกุล .jpg

11. 3
1.3.6.8 สามารถบันทึกไฟล์รูปภาพที่สมาชิกออกแบบได้
1.3.7 ระบบแกลเลอรี่ (ของสมาชิก)
1.3.7.1 สามารถอัพโหลดรู ปภาพมาเก็บในแกลเลอรี่ ได้
1.3.7.2 สามารถแสดงรู ปภาพได้
1.3.7.3 สามารถแชร์รูปภาพไปยัง facebook และกด like page ได้
1.3 นิยามศัพท์เฉพาะ
คาศัพท์ นิยามศัพท์
Symbol เครื่ องหมายสัญลักษณ์เฉพาะ เป็ น
เครื่ องหมายที่ไม่ใช้ตวอักษร
ั
Shapes รู ปทรง , รู ปร่ าง
1.5 ประโยชน์ ทคาดว่าจะได้ รับ
ี่
1.5.1 ช่วยลดค่าใช้จ่ายในการซื้ อซอฟต์แวร์
1.5.2 ช่วยให้ผใช้งานสามารถสร้างโลโก้ของตัวเองได้อย่างง่ายดาย
ู้
1.5.3 ช่วยเพิ่มความสะดวกในการใช้ซอฟต์แวร์ ในการสร้างโลโก้
1.5.4 ช่วยลดปั ญหาของการติดตั้งซอฟต์แวร์
1.6 แผนการดาเนินงาน
โดยแผนการดาเนินงานแบ่ งออกเป็ น 7 ขั้นตอน ดังนี้
1.6.1 ศึกษาแนวคิดและทฤษฎีและเอกสารที่เกี่ยวข้อง
1.6.2 ศึกษาเทคโนโลยีที่จะใช้ ว่ามีความคล่องตัวมากแค่ไหนมีหลักการทางานอย่างไร
และนามาใช้งานอย่างไร
่
1.6.3 การระบุปัญหา ศึกษาจากโปรแกรมเดิมที่มีอยูแล้วและศึกษาจากการรวบรวม
ข้อมูลความต้องการของผูใช้งาน
้
1.6.4 รวบรวมข้อมูลและการจัดการข้อมูล เป็ นการรวบรวมข้อมูลหรื อรายละเอียดต่างๆ
ที่เกี่ยวกับระบบงานที่จะศึกษา เช่น ภูมิหลังความเป็ นมาและปั ญหาที่เกิดขึ้น
1.6.5 การวิเคราะห์ขอมูลหรื อการออกแบบระบบและโปรแกรม
้
1.6.6 การสร้างตัวแบบหรื อการพัฒนาโปรแกรม

12. 4
1.6.7 การทดสอบติดตั้งระบบหรื อการทดสอบตัวแบบ ว่าการทางานของระบบทั้งหมด
ตรงตามขอบเขตหรื อไม่และมีขอบกพร่ องส่ วนไหนบ้างที่จะต้องทาการแก้ไขให้
้
ถูกต้อง
1.6.8 จัดทาเอกสาร เป็ นการจัดทาเอกสารทั้งหมดของระบบ และได้รวบรวมข้อมูลใน
ระหว่างจัดทาโครงงาน
1.7 ตารางแผนการดาเนินงาน
ตารางที่ 1.1 ตารางแผนการดาเนินงาน
1.8 เครื่องมือทีคาดว่าจะต้ องใช้
่
1.8.1 อุปกรณ์ ทใช้ ในโครงงาน
ี่
1.8.1.1 เครื่ องคอมพิวเตอร์ แบบพกพา
1.8.1.2 เครื่ องพิมพ์เอกสาร
1.8.2 โปรแกรมทีใช้ ในโครงงาน
่
1.8.2.1 Apache
1.8.2.2 Adobe Dreamweaver
1.8.2.3 Adobe Flash
1.8.2.4 Microsoft Word 2007
1.8.2.5 Microsoft Visio 2003

13. 5
บทที่ 2
แนวคิด ทฤษฎีและเทคโนโลยีทเี่ กี่ยวข้ อง
2.1 ทฤษฎี เทคโนโลยีที่เกียวข้ อง
่
2.1.1 JavaScript
JavaScript เป็ นภาษาโปรแกรม (Programming language ) ประเภทหนึ่ ง ที่เรี ยกกันว่า
"สคริ ปต์"( Script ) ซึ่ งมีวิธีการทางานในลักษณะ"แปลความและดาเนิ นงานไปทีละคาสั่ง"
(interpret) ภาษานี้ เดิมมีชื่อว่า Live Script ได้รับการพัฒนาขึ้นโดย Netscape ด้วยวัตถุประสงค์
เพื่อที่จะช่ วยให้เว็บเพจสามารถแสดงเนื้ อหา ที่มีการเปลี่ยนแปลงไปได้ ตามเงื่อนไขหรื อ
สภาพแวดล้อมต่างๆ กัน หรื อสามารถโต้ตอบกับผูชมได้มากขึ้น ทั้งนี้ เพราะภาษา HTML แต่
้
เดิมนั้น เหมาะสาหรับใช้แสดงเอกสารที่มีเนื้ อหาคงที่แน่นอนและไม่มีลูกเล่นอะไรมากมายนัก
เนื่องจาก JavaScript ช่วยให้ผพฒนา สามารถสร้างเว็บเพจได้ตรงกับความต้องการ และ มีความ
ู้ ั
น่าสนใจมากขึ้น ประกอบกับเป็ นภาษาเปิ ด ที่ใครก็สามารถนาไปใช้ได้ ดังนั้นจึงได้รับความ
นิ ยมเป็ นอย่างสู ง มีการใช้งานอย่างกว้างขวาง รวมทั้งได้ถูกกาหนดให้เป็ นมาตรฐานโดย
ECMA ซึ่ง
เราจะพบว่าปั จจุบน จะหาเว็บเพจที่ไม่ใช้ JavaScript เลยนั้น ได้ยากเต็มทีการทางานของ
ั
JavaScript จะต้องมี การแปลความคาสั่ง ซึ่ งขั้นตอนนี้ จะถู กจัดการโดยบราวเซอร์ ดังนั้น
JavaScript จึงสามารถทางานได้ เฉพาะบนบราวเซอร์ ที่สนับสนุน ซึ่ งปั จจุบน บราวเซอร์ เกือบ
ั
ทั้งหมดก็สนับสนุน JavaScript แล้ว
การทางานของ JavaScript เกิดขึ้นบนบราวเซอร์ ( เรี ยกว่าเป็ น client-side script ) ดังนั้น ไม่
ว่าคุณจะใช้เซิ ร์ฟเวอร์ อะไร หรื อที่ไหน ก็ยงคงสามารถใช้ JavaScript ในเว็บเพจได้ ต่างกับ
ั
ภาษา สคริ ปต์อื่น เช่น Perl, PHP หรื อ ASP ซึ่งต้องแปลความและทางานที่ตวเครื่ องเซิ ร์ฟเวอร์ (
ั
เรี ยกว่า server-side script ) ดังนั้นจึงต้องใช้บนเซิ ร์ฟเวอร์ ที่สนับสนุ นภาษาเหล่านี้ เท่านั้น
อย่างไรก็ดี จาก ลักษณะดังกล่าวก็ทาให้ JavaScript มีขอจากัด คือไม่สามารถรับและส่ งขอ้ มูล
้
ต่างๆ กับเซิ ร์ฟเวอร์ โดยตรง เช่น การอ่านไฟล์จากเซิ ร์ฟเวอร์ เพื่อนามาแสดงบนเว็บเพจ หรื อ
รับข้อมูลจากผูชม เพื่อ นาไปเก็บบนเซิ ร์ฟเวอร์ เป็ นต้น ดังนั้นงานลักษณะนี้ จึงยังคงต้องอาศัย
้
ภาษา server-side script อยู่ (ความจริ ง JavaScript ที่ทางานบนเซิ ร์ฟเวอร์ ก็มีซ่ ึ งต้องอาศัย
เซิร์ฟเวอร์ที่สนับสนุนโดยเฉพาะ เช่นกันแต่ไม่เป็ นที่นิยมนัก)
การทาางานของ JavaScript จะมีประสิ ทธิ ภาพมาก ถ้ามันสามารถดัดแปลงคุณสมบัติ ของ
องค์ประกอบต่างๆ บนเว็บเพจ (เช่น สี หรื อรู ปแบบของข้อความ) และสามารถรับรู้เหตุการณ์ ที่

14. 6
ผูชมเว็บเพจโต้ตอบกับองค์ประกอบเหล่านั้น (เช่น การคลิก หรื อเลื่อนเมาส์ไปวาง) ได้ ดังนั้น
้
จาก ภาษา HTML เดิม ที่มีลกษณะสถิต ( Static ) ใน HTML เวอร์ ชนใหม่ๆ จึงได้มีการพัฒนา
ั ั่
ให้มี คุณสมบัติบางอย่างเพิมขึ้น และมีลกษณะเป็ นออบเจ็ค "object" มากขึ้น การทางานร่ วมกัน
่ ั
ระหว่าง คุณสมบัติใหม่ของ HTML ร่ วมกับ JavaScript นี้เอง
(ที่มา : http://mixar.exteen.com/20061219/javascript 30/03/2555 )
นามาใช้ : ในส่ วนของการตรวจสอบความถูกต้องของการกรอกข้อมูลต่าง
ตัวอย่างการใช้ งาน
รู ปภาพที่ 2.1 แสดงโค้ ดคาสั่ งในการตรวจสอบรู ปแบบอีเมล์
โดยการทางานจะทาการนาค่าที่รับเข้ามาจากหน้าเว็บ ในส่ วนของการสมัครสมาชิ กมาทา
การตรวจสอบโดยจะเอาตัวแปล elm มาเทียบกับรู ปแบบอีเมล์ที่กาหนดไว้ ในส่ วนของตัวแปล
regex_email ถ้าข้อมูลของทั้งสองตัวแปลไม่ตรงกันจะทาการแจ้งเตือนว่า ‚รู ปแบบ email ไม่
ถูกต้อง‛
2.1.2 MySQL
ภาษาจัดการข้อมูลอย่างมี โครงสร้ าง มีการพัฒนาภาษาคอมพิวเตอร์ และโปรแกรม
ฐานข้อมูลที่รองรับมากมาย เพราะจัดการข้อมูลได้ง่าย เป็ นโปรแกรมฐานข้อมูลที่ได้รับความ
นิยมและเป็ น Open Source ที่ใช้งานได้ท้ งใน Linux และ Windows
ั
MySQL เป็ นภาษาที่ใช้ในการเขียนโปรแกรม เพื่อจัดการกับฐานข้อมูลโดยเฉพาะ สามารถ
แบ่งการทางานได้เป็ น 4 ประเภท ดังนี้
1. Select query ใช้สาหรับดึงข้อมูลที่ตองการ
้
2. Update query ใช้สาหรับแก้ไขข้อมูล

15. 7
3. Insert query ใช้สาหรับการเพิ่มข้อมูล
4. Delete query ใช้สาหรับลบข้อมูลออกไป
ั
การใช้งาน MySQL เป็ นที่นิยมใช้กนมากสาหรับฐานข้อมูลสาหรับเว็บไซต์ นิยมใช้งาน
ร่ วมกับภาษาโปรแกรม PHP
(ที่มา : http://www.yes-order.com/redirect.php?tid=180&goto=lastpost 30/03/2555 )
นามาใช้ : ในส่ วนของฐานข้อมูล
ตัวอย่างการใช้ งาน
รู ปภาพที่ 2.2 แสดงโค้ ดคาสั่ งในการล๊อกอินเข้ าระบบ
โดยการทางานจะทาการนาค่าที่รับเข้ามาจากหน้าเว็บมาทาการตรวจสอบ โดยจะ
เอาตัวแปล $objResult มาเทียบกับข้อมูลตาราง Username ในฐานข้อมูลถ้าข้อมูลไม่ตรง
กับค่าในตัวแปล $objResult จะทาการแจ้งเตือนและกลับไปยังหน้าล็อกอิน แต่ถาข้อมูล
้

16. 8
ตรงกัน ก็จะทาการเช็คใน 2 ส่ วนคือ UserID , Status ถ้า Status เป็ น ADMIN ก็จะเข้าสู่ การ
ทางานในส่ วนของ Admin แต่ถาไม่ใช่ก็จะเข้าสู่ การทางานในส่ วนของสมาชิก
้
2.1.3 เทคโนโลยีการเขียนภาษา PHP ( Personal Home Pages )
PHP ( Personal Home Pages ) เป็ นภาษาจาพวก แปลความและดาเนินงานไปทีละ
คาสั่ง คาสั่งต่างๆ จะเก็บอยู่ในไฟล์ที่เรี ยกว่า สคริ ปต์ และเวลาใช้งานต้องอาศัยตัวแปล
ชุ ดคาสั่ง ตัวอย่างภาษาสคริ ปต์ก็เช่น JavaScript, Perl เป็ นต้น ลักษณะของ PHP ที่แตกต่าง
จากภาษาสคริ ปต์แบบอื่นๆ คือ PHP ได้รับการพัฒนาและออกแบบมาเพื่อใช้งานในการ
สร้างเอกสารแบบ HTML ( Hyper Text Markup Language ) โดยสามารถสอดแทรกหรื อ
แก้ไขเนื้ อหาได้โดยอัตโนมัติ ดังนั้นจึงกล่าวว่า PHP เป็ นภาษาที่เรี ยกว่าสคริ ปต์ที่ทางานที่
ฝั่งเครื่ องแม่ข่ายหรื อ HTML – Embedded Scripting Language เป็ นเครื่ องมือสาคัญชนิด
หนึ่งที่ช่วยให้เราสามารถสร้างเอกสารแบบแรมแบบพลวัต HTML ได้อย่างมีประสิ ทธิ ภาพ
และมีลูกเล่นมากขึ้นทาให้สะดวกรวดเร็ วในการใช้งาน
(ที่มา : http://www.hellomyweb.com/index.php/main/content/135 30/03/2555 )
นามาใช้ : เป็ นภาษาที่ใช้ในการเขียนเว็ปไซต์
ตัวอย่างการใช้ งาน
รู ปภาพที่ 2.3 แสดงโค้ ดคาสั่ งในการ Activate

17. 9
โดยการทางานจะทาการตรวจสอบข้อมูล ในตาราง member ในส่ วนของ SID ,UserID
ก่อนว่าถูกต้องหรื อไม่ แล้วค่อยดี งเอาข้อมูลของผูใช้งานนั้นมาเก็บในตัวแปล $objResult และนา
้
ตัวแปล $objResult มาทาการตรวจสอบ ถ้าข้อมูลในตัวแปล $objResult ไม่ถูกต้องให้ทาการแสดง
การแจ้งเตือนและกลับไปที่หน้าลงทะเบี ยน แต่ถาไม่ใช่ ให้ทาการแก้ไขข้อมูลในตาราง member
้
โดยกาหนดให้ Active เป็ น Yes เพื่อให้ผใช้งานสามารถใช้งานได้และทาการแสดงข้อความที่
ู้
กาหนดและกลับไปยังหน้าล็อคอิน
2.1.4 CSS ( Cascading Style Sheets )
CSS (Cascading Style Sheet) จัดเป็ นภาษาที่ใช้เป็ นส่ วนของการจัดรู ปแบบการ แสดงผล
เอกสาร HTML โดยที่ CSS กาหนดกฎเกณฑ์ในการระบุรูปแบบ (หรื อ "Style") ของเนื้ อหา ใน
เอกสาร อันได้แก่ สี ของข้อความ สี พ้ืนหลัง ประเภทตัวอักษร และการจัดวางข้อความ ซึ่ งการ
กาหนดรู ปแบบ หรื อ Style นี้ ใช้หลักการของการแยกเนื้ อหาเอกสาร HTML ออกจากคาสั่งที่ใช้ใน
การจัดรู ปแบบการแสดงผล กาหนดให้รูปแบบของการแสดงผลเอกสาร ไม่ข้ ึนอยูกบเนื้ อหาของ ่ ั
เอกสาร เพื่อให้ง่ายต่อการจัดรู ปแบบการแสดงผลลัพธ์ของเอกสารHTML โดยเฉพาะในกรณี ที่มี
การเปลี่ ย นแปลงเนื้ อหาเอกสารบ่ อยครั้ งหรื อต้อ งการควบคุ ม ให้รู ป แบบการแสดงผลเอกสาร
HTML มีลกษณะของความสม่าเสมอทัวกันทุกหน้าเอกสารภายในเว็บไซต์เดียวกัน โดย กฎเกณฑ์
ั ่
ในการกาหนดรู ปแบบ (Style) เอกสาร HTML ถูกเพิ่มเข้ามาครั้งแรกใน HTML 4.0 เมื่อปี พ.ศ.
2539 ในรู ปแบบของ CSS level 1 Recommendations ที่กาหนดโดย องค์กร World Wide Web
Consortium หรื อ W3C
(ที่มา : http://www.xvlnw.com/knowledge-readknowledge-id158.html 30/03/2555 )
นามาใช้ : ในส่ วนของการจัดการรู ปแบบเลเอาท์ต่างๆของเว็บไซต์
ตัวอย่างการใช้ งาน

18. 10
รู ปภาพที่ 2.4 แสดงโค้ ดคาสั่ งกาหนดรู ปแบบ stylesheet
โดยในโครงงานจะมีการใช้งานแบบ external ในการกาหนดในส่ วนของ body : แบบ
ตัวอักษร สี และพื้นหลัง , page : ความกว้าง , header : ความยาว ใส่ รูปภาพให้พ้ืนหลัง เป็ นต้น
2.1.5 HTML (Hyper Text Markup Language)
คือภาษาคอมพิวเตอร์ ที่ ใช้ในการแสดงผลของเอกสารบน website หรื อที่เราเรี ยกกันว่าเว็บ
เพจ ถูกพัฒนาและกาหนดมาตรฐานโดยองค์กร World Wide Web Consortium (W3C) และ จาก
การพัฒนาทางด้าน Software ของ Microsoft
HTML เป็ นภาษาประเภท Markup Language สาหรับการการสร้างเว็บเพจ โดยใช้ภาษา
HTML สามารถทาโดยใช้โปรแกรม Text Editor ต่างๆ เช่ น Notepad, EditPlus หรื อจะอาศัย
โปรแกรมที่เป็ นเครื่ องมือช่วยสร้างเว็บเพจ เช่น Microsoft FrontPage, Dream Weaver ซึ่ งอานวย
ความสะดวกในการสร้างหน้า HTML ส่ วนการเรี ยกใช้งานหรื อทดสอบการทางานของเอกสาร
HTML จะใช้โปรแกรม Internet Web Browser เช่น Internet Explorer (IE), Mozilla Firefoxเป็ นต้น
(ที่มา : http://www.xvlnw.com/knowledge-readknowledge-id40.html 9/04/2555 )
นามาใช้ : ในส่ วนของการสร้างฟอร์ มต่างบนเว็บไซต์
ตัวอย่างการใช้ งาน

19. 11
รู ปภาพที่ 2.5 แสดงโค้ ดคาสั่ งการสร้ างฟอร์ มหน้ าลืมรหัสผ่าน
โดยการทางานก็จะมีการเรี ยกใช้สไตล์ชีท cssnongna เพื่อใช้ในการจัดรู ปแบบของข้อความ
่
และส่ วนต่างๆ และมีการสร้างฟอร์ มในการกรอกข้อมูลโดยฟอร์ มจะอยูในรู ปแบบของตาราง
2.1.6 ActionScript 3.0
ActionScript เป็ นภาษาด้าน Programming ที่ใช้ในโปรแกรม Macromedia Flash โดยเป็ น
การเขียนสคิปต์ เพื่อควบคุมการทางาน ด้านต่างๆ ของชิ้นงานที่สร้างขึ้น ActionScript เป็ นเหมือน
่ ั
ตัวเชื่ อมระหว่างสิ่ งที่ผใช้เข้าใจกับสิ่ งที่ Flash เข้าใจ การทางานจะขึ้นอยูกบเหตุการณ์ (Event) ที่
ู้
เกิดขึ้น หากเหตุการณ์น้ นไม่เกิดขึ้นก็ไม่มีการทางาน จึงทาให้งานที่สร้างจากโปรแกรม Flash และมี
ั
การเขียน ActionScript ควบคุ มจะไม่ใช่ Animation ธรรมดาอีกต่อไป แต่จะเป็ นงานที่สามารถ
้ ั
โต้ตอบกับผูใช้กบได้อย่างเต็มรู ปแบบ
ActionScript ได้ พ ัฒ นาให้ มี ค วามง่ า ยในการใช้ ง านขึ้ นเรื่ อ ยๆ ส าหรั บ โปรแกรม
Macromedia Flash ในเวอร์ ชน 8 นี้ โครงสร้างภาษาของ ActionScript มีการเปลี่ยนแปลงจากเวอร์
ั่

20. 12
ชัน 5 หรื อ MX มากย มีการเพิ่มรู ปแบบเพื่อให้ใช้งานได้ง่ายและสะดวกขึ้น แม้จะไม่มีความรู ้ดาน
่ ้
ภาษา Programming มา ก่อน ผูใช้ไม่จาเป็ นต้องเขียนสคริ ปต์ข้ ึนมาเองทั้งหมด สามารถเรี ยกคาสั่ง
้
ต่างๆ ขึ้นมา ใช้งานได้อย่างง่าย โดยคาสั่งถูกจัดเป็ นกลุ่มๆ เมื่อเรี ยกคาสั่งขึ้นมา ผูใช้สามารถกรอก
้
ข้อมูลหรื อเงื่อนไขเพื่อสร้างเป็ นคาสั่งควบคุมการทางานได้ อย่างง่ายดาย นี่ เป็ นเหตุผลหนึ่ งที่ทาให้
โปรแกรม Flash MX ได้รับความนิยมมากในปัจจุบน ั
ที่มา : http://wannapong.wordpress.com/2008/06/07/adhoeooaacoa-actionscript/ 09/04/2555 )
นามาใช้ : ในส่ วนของการสร้าง MovieClip ในการสร้างโลโก้
รู ปภาพที่ 2.6 แสดงโค้ ดคาสั่ งการสร้ างแฟลช

21. 13
บทที่ 3
ขั้นตอนการศึกษา
ขั้นตอนการศึกษาโครงงานสามารถแบ่งขั้นตอนการศึกษาออกเป็ น 5 ขั้นตอนดัง
รู ปภาพที่ 3.1 ขั้นตอนการศึกษาตัวแบบ คือ
ขั้นตอนที่ 1 การระบุปัญหา
ขั้นตอนที่ 2 การรวบรวมข้อมูลและการจัดการข้อมูล
ขั้นตอนที่ 3 การวิเคราะห์ขอมูล
้
ขั้นตอนที่ 4 การสร้างตัวแบบ
ขั้นตอนที่ 5 การนาตัวแบบมาใช้ และประเมิลผล
การระบุปัญหา
การรวบรวมข้อมูลและการจัดการ
ข้อมูล
ปรับตัวแบบและเก็บข้อมูลเพิ่ม การวิเคราะห์ขอมูล
้
การสร้างตัวแบบ
ทดสอบตัว
แบบ
ไม่พอใจคำตอบ
วิเคราะห์
คาตอบ
พอใจคำตอบ
การนาตัวแบบมาใช้และการ
ประเมินผล
รู ปภาพที่ 3.1 ขั้นตอนการศึกษาตัวแบบ

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

23. 15
เกี่ยวกับการสร้ างโลโก้ ที่จะช่วยให้ผูใช้งานสามารถสร้างโลโก้ ผ่านระบบออนไลน์ได้ โดยไม่
้
จาเป็ นต้องท าการติ ด ตั้ง ซอฟแวร์ ใ ดๆ ซึ่ งเว็บ ไซต์น้ ี จ ะเข้า มาช่ วยให้ก ารท างานของผูใ ช้ง านมี
้
ั ้
ประสิ ทธิ ภาพ ทั้งยังช่วยอานวยความสะดวกให้กบผูใช้งานมากยิ่งขึ้นและเพื่อสร้างตัวเลื อกให้กบ ั
ผูใช้งานอีกด้วย
้
วัตถุประสงค์
1. เพื่อให้ผใช้ที่ไม่ตองการติดตั้งซอฟต์แวร์ เกี่ยวกับการสร้างโลโก้ ได้ใช้งานสะดวกมาก
ู้ ้
ยิงขึ้นโดยเข้าใช้งานผ่านเว็บไซต์ของเราได้ทนที
่ ั
2. เพือให้ผใช้งานสามารถสร้างโลโก้ ของตัวเองได้อย่างง่ายดาย โดยจะมีเครื่ องมือต่างๆ
่ ู้
ไว้ให้ใช้ในการสร้างโลโก้ได้
3. เพื่อลดปั ญหาในการละเมิดลิขสิ ทธิ์ ของซอฟต์แวร์
ขอบเขตการศึกษา
3.1 ระบบผูใช้งานทัวไป
้ ่
3.1.1 ผูใช้งานทัวไปสามารถสมัครสมาชิกได้
้ ่
3.2 ระบบสมัครสมาชิก
3.2.1 ตรวจสอบความถูกต้องของข้อมูล
3.2.2 Activate (การยืนยันการสมัครสมาชิก)
3.3 ระบบสมาชิก
3.3.1 สามารถล็อกอินเข้าสู่ ระบบได้
3.3.2 สามารถแก้ไขข้อมูลส่ วนตัวได้
้
3.3.3 กูรหัสผ่านได้
3.3.4 สามารถ ลบ แก้ไข รู ปภาพของสมาชิกได้
3.4 ระบบผูดูแลระบบ
้
3.4.1 สามารถล็อกอินเข้าสู่ ระบบได้
3.4.2 สามารถแก้ไขข้อมูลส่ วนตัวได้
้
3.4.3 กูรหัสผ่านได้
3.4.4 สามารถ แก้ไข ข้อมูลของสมาชิกได้
3.4.5 สามารถลบสมาชิกออกจากระบบได้
3.4.6 สามารถ ลบ แก้ไข รู ปภาพของสมาชิกได้

24. 16
3.4.7 สามารถดูขอมูลทั้งหมดของสมาชิกได้
้
3.4.8 สามารถ ลบ ข้อมูลของสมาชิกได้
้
3.5 ระบบกูรหัสผ่าน
้
3.5.1 สามารถกูรหัสผ่านเดิมเมื่อลืมรหัสผ่านได้ โดยต้องเป็ นสมาชิกหรื อผูดูแลระบบ
้
3.6 ระบบการออกแบบ(ตัวโปรแกรม) สามารถสร้างโลโก้ได้เองจะมีเครื่ องมือให้เลือกใช้งาน
ดังนี้
3.6.1 Shapes
3.6.1.1 Symbol สามารถเลือกได้
3.6.2 สี
3.6.2.1 เลือกใส่ สีได้
3.6.3 ข้อความ
3.6.3.1 เลือกแบบตัวอักษรได้
3.6.4 ขนาด
3.6.4.1 สามารถปรับขนาดดินสอได้
3.6.5 การหมุน
3.6.5.1 สามารถหมุนด้านซ้ายหรื อด้านขวาได้
3.6.6 สามารถวาดและปรับความหนาบางของเส้นได้
3.6.6.1 วาดอิสระ
3.6.7 สามารถนารู ปภาพจากภายนอกมาใช้ในการออกแบบได้
3.6.7.1 ไฟล์ นามสกุล .jpg
3.6.8 สามารถบันทึกไฟล์รูปภาพที่สมาชิกออกแบบได้
3.7 ระบบแกลเลอรี่ (ของสมาชิก)
3.7.1 สามารถอัพโหลดรู ปภาพมาเก็บในแกลเลอรี่ ได้
3.7.2 สามารถแสดงรู ปภาพได้
3.7.3 สามารถแชร์รูปภาพไปยัง facebook ได้
ประโยชน์ ทคาดว่าจะได้ รับ
ี่
1. ช่วยลดค่าใช้จ่ายในการซื้ อซอฟต์แวร์
2. ช่วยให้ผใช้งานสามารถสร้างโลโก้ของตัวเองได้อย่างง่ายดาย
ู้
3. ช่วยเพิ่มความสะดวกในการใช้ซอฟต์แวร์ ในการสร้างโลโก้
4. ช่วยลดปั ญหาของการติดตั้งซอฟต์แวร์
5. ช่วยลดปั ญหาในการละเมิดลิขสิ ทธิ์ ของซอฟต์แวร์

25. 17
3.3 การรวบรวมข้ อมูลและการจัดการข้ อมูล
การวิเคราะห์ ระบบ(System Analysis)
การวิ เ คราะห์ ร ะบบมี จุ ด ประสงค์ใ นการท าความเข้า ใจกับ ระบบงานปั จ จุ บ ัน เพื่ อ เป็ น
แนวทางในการออกแบบใหม่ โดยนักวิเคราะห์ระบบทาการศึกษาระบบปั จจุบนอย่างละเอียด และ
ั
หาความต้องการของระบบใหม่ที่จะพัฒนา ในขั้นตอนนี้ จะเกี่ ยวข้องกับระบบการเก็บรวบรวม
ข้อมูล การวิเคราะห์ ขอมูลที่ รวบรวมมา การวิเคราะห์ กระบวนการต่างๆในระบบ การวิเคราะห์
้
ลัก ษณะของผลลัพ ธ์ และสิ่ ง ที่ น าเข้า เพื่ อศึ ก ษาถึ ง ขั้น ตอนการท างานของระบบปั จจุ บ ัน และ
่
วิเคราะห์วามีงานใดบ้างที่มีปัญหาเกิดขึ้นควรปรับปรุ งหรื อจะมีแนวทางในการแก้ปัญหาอย่างไร
เป็ นกระบวนการในการเก็บ รวบรวมข้อมู ล ข้อเท็จจริ ง และสารสนเทศของระบบแบบ
ดั้งเดิมที่ยงนิ ยมใช้กนอยู่ เช่ น การศึกษาจากเอกสาร แบบฟอร์ ม และฐานข้อมูลที่ใช้อยู่ในปั จจุบน
ั ั ั
การค้นคว้า การสังเกตการณ์ การจัดทาแบบสอบถาม และการสัมภาษณ์ เป็ นต้น
Web Server
Admin
Input Output
User
PC
รู ปภาพที่ 3.2 ภาพตัวอย่างรวมของระบบทีต้องการพัฒนา
่

26. 18
แผนภาพและบริบท (Context diagram)
แสดงให้เห็นถึงการติดต่อการใช้ขอมูลระหว่างผูใช้ที่เป็ นสมาชิกกับเว็บไซต์สร้างโลโก้
้ ้
และการเรี ยกใช้ขอมูลต่างๆ บนเว็บไซต์
้
รู ปภาพที่ 3.3 แผนภาพและบริบท (Context diagram)
แผนภาพกระแสข้ อมูล (Data Flow Diagram)
แผนภาพกระแสข้อมูลแสดงรายละเอียดส่ วนต่างๆ ของการทางานของ ระบบเว็บไซต์
ออกแบบโลโก้
รู ปภาพที่ 3.4 แสดงการสมัครสมาชิก
รู ปภาพที่ 3.5 แสดงการเข้าสู่ ระบบสมาชิก

27. 19
รู ปภาพที่ 3.6 แสดงการจัดการข้อมูลต่าง ๆ ของสมาชิก
รู ปภาพที่ 3.7 แสดงการเข้าสู่ ระบบผูดูแลระบบ
้

28. 20
รู ปภาพที่ 3.8 แสดงการจัดการข้อมูลต่าง ๆ ของผูดูแลระบบ
้
รู ปภาพที่ 3.9 แสดงการลืมรหัสผ่าน

29. 21
3.4 การวิเคราะห์ ข้อมูล
แผนภาพแสดงความสั มพันธ์ ระหว่างเอนทิตี (Entity-Relationship Diagrams: ERD)
รู ปภาพที่ 3.10 แผนภาพแสดงความสั มพันธ์ ระหว่างเอนทิตีและแอททริบิวต์

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

31. 23
ตารางฐานข้ อมูลของเว็บไซต์ สร้ างโลโก้ เป็ นตารางแสดงการรวมกลุ่มของคุณสมบัติใน
ฐานข้ อมูล หรือ ไฟล์ ชื่อของตารางต่ างๆ ดังนี้
ตรวจสอบความถูกต้ อง
ประเภทคีย์ (Key Type)
ลาดับ(Sequence No)
(Validation Check)
ประเภท(Type)
ขนาด(Width)
(Description)
ค่ าเบืองต้ น
(Attribute)
คาอธิบาย
คุณสมบัติ
(Default)
้
1 UserID รหัสสมาชิก 3 Int None NOT NULL PK
2 mUserName ชื่อเข้าใช้งาน 20 Varchar None NOT NULL
3 mPassword รหัสผ่าน 20 Varchar None NOT NULL
4 mEmail อีเมลล์ 50 Varchar None NOT NULL
5 Status สถานะ Enum ’USER’ NOT NULL
6 SID ใช้ในการตรวจสอบ 32 Varchar None NOT NULL
เซสชัน ID ของ
่
ผูใช้งาน
้
7 Active การยืนยันตัวตน Enum ‘Yes’,’No’ NOT NULL
ตารางที่ 3.1 แสดงแฟมข้ อมูลของสมาชิก
้
ชื่อตาราง tblmember
วัตถุประสงค์ เพื่อจัดเก็บข้อมูลของสมาชิก
แฟ้ มที่เกี่ยวข้อง -
ตรวจสอบความถูกต้ อง
ประเภทคีย์ (Key Type)
ลาดับ(Sequence No)
(Validation Check)
ประเภท(Type)
ขนาด(Width)
(Description)
ค่ าเบืองต้ น
(Attribute)
คาอธิบาย
คุณสมบัติ
(Default)
้
1 AdminID รหัสสมาชิก 3 Int None NOT NULL PK
2 mAdminName ชื่อเข้าใช้งาน 20 Varchar None NOT NULL

32. 24
3 mPassword รหัสผ่าน 20 Varchar None NOT NULL
4 mEmail อีเมลล์ 50 Varchar None NOT NULL
ตารางที่ 3.2 แสดงแฟมข้ อมูลผู้ดูแลระบบ
้
ชื่อตาราง admin
วัตถุประสงค์ เพื่อจัดเก็บข้อมูลของผูดูแลระบบ
้
แฟ้ มที่เกี่ยวข้อง -
ตรวจสอบความถูก
ต้ อง(Validation
(Sequence No)
(Description)
(Key Type)
(Attribute)
ประเภทคีย์
ค่ าเบืองต้ น
คุณสมบัติ
คาอธิบาย
(Default)
(Width)
ประเภท
Check)
(Type)
ขนาด
ลาดับ
1 Id รหัสผูใช้งาน
้ 11 ้Int None Not NULL PK
2 Facebook_id รหัส id 20 Int None NULL
facebook
3 Name ชื่อที่ใช้ใน 200 varchar None NULL
facebook
4 Email อีเมลล์ 200 varchar None NULL
5 gender เพศ 10 varchar None NULL
6 birthday วันเดือนปี เกิด date None NULL
7 location สถานที่ 200 varchar None NULL
8 hometown บ้านเกิด 200 varchar None NULL
9 relationship ความสัมพันธ์ 20 varchar None NULL
10 timezone เขตเวลา 10 varchar None NULL
ตารางที่ 3.3 แสดงแฟมการเก็บข้ อมูลของสมาชิกทีดึงมาจาก facebook
้ ่
ชื่อตาราง users
วัตถุประสงค์ เพื่อเก็บข้อมูลของสมาชิก ที่ดึงมาจาก facebook
แฟ้ มที่เกี่ยวข้อง tblmember

33. 25
ตรวจสอบความถูกต้ อง
ประเภทคีย์ (Key Type)
ลาดับ(Sequence No)
(Validation Check)
ประเภท(Type)
ขนาด(Width)
(Description)
ค่ าเบืองต้ น
(Attribute)
คาอธิบาย
คุณสมบัติ
(Default)
้
1 AlbumID รหัสอัลบัมรู ป 4 Int None NOT NULL PK
2 AlbumName ชื่ออัลบัมรู ป 100 Varchar None NOT NULL
3 AlbumShot รู ปภาพอัลบัมขนาดเล็ก 100 Varchar None NOT NULL
ตารางที่ 3.4 แสดงแฟมข้ อมูลอัลบัมรู ปภาพ
้
ชื่อตาราง album
วัตถุประสงค์ เพื่อจัดเก็บข้อมูลอัลบัมรู ปภาพ
แฟ้ มที่เกี่ยวข้อง tblmember
ตรวจสอบความถูกต้ อง
ประเภทคีย์ (Key Type)
ลาดับ(Sequence No)
(Validation Check)
ประเภท(Type)
ขนาด(Width)
(Description)
ค่ าเบืองต้ น
(Attribute)
คาอธิบาย
คุณสมบัติ
(Default)
้
1 GalleryID รหัสรู ปภาพ 4 Int None NOT NULL PK
2 AlbumID รหัสอัลบัมรู ป 4 Varchar None NOT NULL FK
3 GalleryName ชื่อรู ปภาพ 100 Varchar None NOT NULL
4 GalleryShot รู ปภาพขนาดเล็ก 100 Varchar None NOT NULL
ตารางที่ 3.5 แสดงแฟมข้ อมูลรู ปภาพ
้
ชื่อตาราง gallery
วัตถุประสงค์ เพื่อจัดเก็บข้อมูลรู ปภาพ
แฟ้ มที่เกี่ยวข้อง tblmember,album

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

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

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

37. 29
รู ปภาพที่ 3.15 แผนภาพเส้ นและสั ญลักษณ์ ของการเข้ าสู่ ระบบ

38. 30
3.5 การสร้ างตัวแบบ
รู ปภาพที่ 3.16 รู ปภาพแสดงหน้ าแรกของเว็บไซต์
Sound ไม่มี
Picture มี
Video ไม่มี
Animation ไม่มี
Link to ใช้ปุ่มเชื่อมไป ยังหน้าต่างๆ

39. 31
รู ปภาพที่ 3.17 รู ปภาพแสดงหน้ าสมัครสมาชิ ก
Sound ไม่มี
Picture มี
Video ไม่มี
Animation ไม่มี
Link to ใช้ปุ่มเชื่อมไป ยังหน้าต่างๆ

40. 32
รู ปภาพที่ 3.18 รู ปภาพแสดงหน้ าเข้ าสู่ ระบบ
Sound ไม่มี
Picture มี
Video ไม่มี
Animation ไม่มี
Link to ใช้ปุ่มเชื่อมไป ยังหน้าต่างๆ

41. 33
รู ปภาพที่ 3.19 รู ปภาพแสดงหน้ าลืมรหัสผ่ าน
Sound ไม่มี
Picture มี
Video ไม่มี
Animation ไม่มี
Link to ใช้ปุ่มเชื่อมไป ยังหน้าต่างๆ

42. 34
รู ปภาพที่ 3.20 รู ปภาพแสดงหน้ าแรกของสมาชิ ก
Sound ไม่มี
Picture มี
Video ไม่มี
Animation ไม่มี
Link to ใช้ปุ่มเชื่อมไป ยังหน้าต่างๆ

43. 35
รู ปภาพที่ 3.21 รู ปภาพแสดงหน้ าแรกของผู้ดูแลระบบ
Sound ไม่มี
Picture มี
Video ไม่มี
Animation ไม่มี
Link to ใช้ปุ่มเชื่อมไป ยังหน้าต่างๆ