knowledge sharing for travelling in thailand, ict, sripatum university

เวบไซตสงคมทองเทยว Buddy Travel

โดย

1. นางสาววรรณภา สดศร รหส 51062669

2. นายจกรพนธ ศรเคน รหส 52045031

โครงงานนเปนสวนหนงของการศกษาตามหลกสตรวทยาศาสตรบณฑต สาขาเทคโนโลยสารสนเทศและการสอสาร คณะเทคโนโลยสารสนเทศ

มหาวทยาลยศรปทม พ.ศ. 2553

ก

คณะเทคโนโลยสารสนเทศ

โครงงาน ของ

นางสาววรรณภา สดศร รหส 51062669 นายจกรพนธ ศรเคน รหส 52045031

เรอง

เวบไซตสงคมทองเทยว ไดรบการตรวจสอบและอนมตใหเปนสวนหนงของการศกษาตามหลกสตรวทยาศาสตรบณฑต

สาขาวชาเทคโนโลยสารสนเทศและการสอสาร

เมอ วนท 13 เดอน กมภาพนธ พ.ศ. 2554

ประธานกรรมการ _____________________________ ( อาจารยกญธณ กจฉปครนทร ) กรรมการ _____________________________ ( อาจารยยงยศ แกวพทกษคณ ) กรรมการและอาจารยทปรกษา _____________________________ ( อาจารยประสทธ ชวยเกอ ) กรรมการและเลขานการ _____________________________ ( อาจารยประสทธ ชวยเกอ )

ข

บทคดยอ สงคมทองเทยว(Buddy travel, จ านวนหนา 68) โดย นางสาววรรณภา สดศร รหส 51062669 นายจกรพนธ ศรเคน รหส 52045031 อาจารยทปรกษา อาจารยประสทธ ชวยเกอ

โครงงานเวบไซตสงคมทองเทยว ไดถกพฒนาดานการใหบรการและเพอเผยแพรทาง

ระบบอนเทอรเนต ใหแกผทมความสนใจ โดยใชเทคโนโลย Web 2.0 แกบคคลโดยทวไปไดใช

บรการไดอยางสะดวกและรวดเรวมากขน และระบบสามารถจดการเกบฐานขอมลของสมาชกแต

ละคนและขอมลการทองเทยว อยางเปนระบบเพอความสะดวกสบายในการใชบรการและเพม

ประสทธภาพ ของระบบจดเกบขอมลดานตางๆ

นอกจากนโครงงานเวบไซตสงคมทองเทยว ยงสามารถใหสมาชกไดมสวนรวมกบระบบโดยมใหสมาชกสามารถสรางประวตสวนตวของตวเองไดดวยซงในการจดท าโครงงานนไดน าโปรแกรมส าเรจรป เชน Adobe Dreamweaver CS4, Adobe Photoshop CS4, Oracle, Microsoft Word 2007 เขามาชวยในการพฒนาระบบซงประกอบไปดวย 2 สวนคอ สวนแรก จะน าโปรแกรมส าเรจรปมาชวยในการออกแบบหนาจอ (Webpage) ทใชตดตอกบผใช สวนทสอง ตวโปรแกรมของระบบน าเอาภาษา PHP, AJAX, HTML ซงเปนเทคโนโลยทไดรบความนยมในการเขยนเวบไซตมาชวยในการเขยนโปรแกรมในสวนตางๆ เชน การเขาสระบบ ระบบเพอน ระบบกลม การบรรจรปภาพ การบรรจวดโอ การตดปายชอของรปภาพ การแสดงความคดเหนตางๆ การสงขอความหาผใชดวยกน ซงสามารถท าการตดตอกบฐานขอมลไดอยางสมบรณและมประสทธภาพมากขน จากการพฒนาโครงงานทท าใหไดรบจากเวบไซตสงคมทองเทยว ทสามารถใหบรการดานการใหความรทางดานการทองเทยว ไดอยางสะดวกสบายและรวดเรว ระบบสามารถตอบสนองความตองการของผใชงานได

ค

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

การจดท าโครงงานเวบไซตสงคมทองเทยว สามารถส าเรจลลวงไปไดดวยดนน เนองจากไดรบความอนเคราะหและความชวยเหลอจากบคคลหลายฝายดวยกน ทางคณะผจดท าจงขอขอบคณ อาจารยประสทธ ชวยเกอ อาจารยคณะเทคโนโลยสารสนเทศ มหาวทยาลยศรปทม ทใหความร ค าแนะน า รวมถงแนวทางในการพฒนาระบบและการปรบปรงแกไขใหโครงงานมความสมบรณ จนส าเรจลลวงไปไดดวยด ขอขอบพระคณ บดา มารดา ครอบครว ทใหก าลงใจและงบประมาณสนบสนนในการท าโครงงาน และขอบคณเพอนๆ ทกคนทใหค าแนะน า ขอเสนอแนะ และใหความชวยเหลอดวยดตลอดมา

ง

ค าน า

โครงงานเวบไซตสงคมทองเทยว น เปนสวนหนงของหลกสตร วทยาศาสตรบณฑต ไดจดท าขนเพอใหผใชงานไดรบรขาวสารเกยวกบการทองเทยวมากขน เนองจากปจจบนการใชงานเวบไซตผานระบบอนเทอรเนตเปนทแพรหลาย ทางผจดท าจงเหนความส าคญของการใชงานเวบไซต จงไดจดท าเวบไซตสงคมทองเทยวขน เพออ านวยความสะดวกแกผทตองการใชงานบนเวบไซตไดเขามาศกษาขอมลการทองเทยว คณะผจดท าหวงเปนอยางยงวา เวบไซตสงคมทองเทยว จะตอบสนองความตองการของผใชงาน ทตองการความสะดวกในการใชงานเวบไซตในเทคโนโลยรปแบบใหมๆ และหากเกดขอผดพลาดประการใด ทางคณะผจดท าตองขออภยมา ณ ทนดวย

นางสาววรณภา สดศร นายจกรพนธ ศรเคน

12 มกราคม 2554

จ

สารบญ หนา หนาอนมต ก บทคดยอ ข กตตกรรมประกาศ ค ค าน า ง สารบญ จ สารบญรป ช สารบญตาราง ญ บทท 1 บทน า 1.1 ภมหลงและความเปนมาของปญหา 1 1.2 วตถประสงคของโครงงาน 1 1.3 ขอบเขตการศกษา 1 1.4 ผลทคาดวาจะไดรบ 2 1.5 แผนการด าเนนงาน 2 1.6 อปกรณและโปรแกรมทใชในการท าโครงงาน 3 บทท 2 ระบบปจจบนและทฤษฎทเกยวของ 2.1 เครอขายสงคม 4 2.1 เทคโนโลยทเกยวของ 2.2.1 ความหมายของโปรแกรม Appserv 4 2.2.2 CSS (Cascading Style Sheets) 5 2.2.3 PHP (Personal Home Page) 7 2.2.4 ฐานขอมล (Database) 7 2.2.5 AJAX (Asynchronous JavaScript and XML) 8 2.2.6 jQuery 8 บทท 3 การออกแบบระบบ 3.1 แผนภาพบรบท (Use Case) 9 3.2 แผนภาพกระแสขอมล (Data Flow Diagram) 11

ฉ

สารบญ (ตอ) หนา 3.3 แผนภาพแสดงความสมพนธระหวางเอนทต

(Entity-Relationship Diagrams: ERD) 12 3.4 ตารางฐานขอมล (Data Table) 12 3.5 แผนการท างาน (Flowchart) 17 3.7 การออกแบบสวนเชอมประสานกบผใช (User Interface Design) 25 บทท 4 การพฒนาโปรแกรม 4.1 อปกรณและโปรแกรมทใช 35 4.2 การท างานทงหมดของโปรแกรมมทงหมดดงน 36 4.3 การออกแบบการเขาใชระบบและใชงานของเวบไซต (Screen Design) 40 บทท 5 สรปโครงงาน ปญหาและขอเสนอแนะ 5.1 สรปโครงงาน 49 5.2 ปญหาทเกดขน 49 5.3 ขอเสนอแนะ 49 บทท 6 คมอการใชงาน 6.1 โปรแกรมทตองใชในระบบ 51 6.2 วธการใชงาน 51 บรรณานกรม 59 ภาคผนวก ภาคผนวก ก วธการตดตงโปรแกรม 60 ประวตผจดท าโครงงาน 68

ช

สารบญรป รปท หนา

2.1 แผนภาพแสดงเครอขายสงคม 6 3.1 แผนภาพบรบท 9 3.2 แสดงการสมครสมาชก 10 3.3 แสดงขบวนการลมรหสผานของสมาชก 10 3.4 แสดงการแกไขขอมลของสมาชก 10 3.5 แสดงการรองขอเปนเพอน 11 3.6 แสดงการจดกลมของสมาชก 11 3.7 แสดงการประกาศขาวสารของสมาชก 11 3.8 แผนภาพแสดงความสมพนธระหวางเอนทต 12 3.9 แผนภาพการท างานของทงระบบ 17 3.10แผนภาพการท างานของการของผดแลระบบ 18 3.11 แผนภาพการท างานของการสมครสมาชก 19 3.12 แผนภาพการท างานของสมาชกทวไป 19 3.13 แผนภาพการท างานของการลมรหสผาน 20 3.14 แผนภาพการท างานของการแสดงการท างานของผใช 20 3.15 แผนภาพการท างานของการแสดงขอมลสวนตว 21 3.16 แผนภาพการท างานของจดการเพอน 22 3.17 แผนภาพการท างานของสรางกลม 22 3.18 แผนภาพการท างานของการสรางกลมทองเทยว 23 3.19 แผนภาพการท างานของการเขากลมทองเทยว 23 3.20 แผนภาพการท างานคนหาเพอนทองเทยว 24 3.21 แผนภาพการท างานของการลงคะแนน 24 3.22 แผนภาพการท างานของการของผดแลกลมทองเทยว 25 3.23 แสดงตวอยางขอมลหนาแรก 26 3.24 แสดงตวอยางการลมรหสผาน 27 3.25 แสดงตวอยางขอมลหนาสมครสมาชก 28 3.26 แสดงตวอยางหนาผใชงาน 29 3.27 แสดงตวอยางหนาขอมลสวนตว 30

ซ

สารบญรป(ตอ) รปท หนา

3.28 แสดงตวอยางอลบมรป 31 3.29 แสดงตวอยางหนาเพอน 32 3.30 แสดงตวอยางหนาเพมเพอน 33 3.31 แสดงตวอยางหนาคนหาเพอน 34 4.1 แสดงหนาแรกของเวบไซต 40 4.2 แสดงหนาสมครสมาชก 41 4.3 แสดงหนาลมรหสผาน 41 4.4 แสดงหนาแรกของสมาชก 42 4.5 แสดงหนาขอมลประวตบคคล 42 4.6 แสดงหนาแกไขขอมลสวนตว 43 4.7 แสดงหนารายชอเพอน 43 4.8 แสดงหนาตอบรบเพอน 44 4.9 แสดงหนาคนหาเพอน 44 4.10 แสดงหนากลม 45 4.11 แสดงหนาเพมประวตทองเทยว 45 4.12 แสดงหนาประวตทองเทยว 46 4.13 แสดงหนาสรางกลมทองเทยว 46 4.14 แสดงหนาคนหากลมทองเทยว 47 4.15 แสดงหนากลมเดนทางทองเทยวของเรา 47 4.16 แสดงหนาผดแลระบบ 48 6.1 หนาแรกของเวบไซต 51

6.2 แสดงหนาสมครสมาชก 52 6.3 แสดงหนาแรกของสมาชก 52

6.4 แสดงหนาการบรรจภาพของผใช 53 6.5 แสดงหนาขอมลสวนตว 53 6.6 แสดงหนาเปลยนรหสผาน 54 6.7 แสดงหนาเพมประวตทองเทยว 54 6.8 แสดงหนาประวตทองเทยว 55 6.9 แสดงหนารายชอเพอน 55

ฌ

สารบญรป(ตอ) รปท หนา 6.10 แสดงหนาจดการเพอน 56 6.11 แสดงหนาจดการเพอน 56 6.12 แสดงหนาสรางกลมทองเทยว 57 6.13 แสดงหนาคนหากลมทองเทยว 57 6.14 แสดงหนากลมเดนทางทองเทยวของเรา 58 ก.1 ขนตอนการเรมตดตงโปรแกรม 61 ก.2 เลอกไดรฟเวอร (Driver) ทจะท าการจดเกบโปรแกรม 61 ก.3 หนาการเลอกแบบชดค าสงทจะลง 62 ก.4 แสดงการกรอกขอมลชอเครองแมขาย 62 ก.5 ภาพแสดงก าหนดชอผใช และรหสผานในการเขาใชงาน Mysql 63 ก.6 ภาพแสดงกระบวนการเรมตดตง 63 ก.7 ภาพแสดงการด าเนนการตดตงเสรจสน 64 ก.8 การทดสอบระบบทตดตง 64 ก.9 หนาแรกของโปรแกรม Oracle10g 65 ก.10 หนาสาระส าคญของโปรแกรม Oracle10g 65 ก.11 โปรแกรม Oracle10g ท าการตดตง 66 ก.12 แสดงการตงคาโปแกรม Oracle10g 66 ก.13 แสดงหนาจอขนตอนสนสดการตดตงโปรแกรม Oracle10g 67

ญ

สารบญตาราง ตารางท หนา

1.1 ตารางแสดงแผนด าเนนงาน 3 3.1 แสดงแฟมสมาชก 13 3.2 เกบรายละเอยดของขอความ 13

3.3 แสดงแฟมรายละเอยดขอความยอย 14 3.4 แสดงแฟมรายละเอยดรป 14 3.5 แสดงแฟมรายละเอยดของเพอน 15 3.6 แสดงแฟมรายละเอยดการเขารวมกลมทองเทยว 15 3.7 แสดงแฟมรายละเอยดการทองเทยว 16 3.8 แสดงแฟมรายละเอยดการทองเทยวและตวบงชต าแหนง 17

1

บทท 1 บทน า

1.1 ความเปนมาและความส าคญของโครงการ นกทองเทยวไทยทเดนทางทองเทยวอยภายในประเทศทงๆ ทนกทองเทยวคนไทยเหลานมจ านวนเพมมากขนทกป เพราะการเดนทางทองเทยวอยภายในประเทศเปนการผอนคลายความเครยดพรอมๆ กบการไดรบความรเกยวกบวฒนธรรม ไดเหนภมประเทศทแปลกตาและไดสรางความสมพนธกบคนตางถนดวย เมอการคมนาคมสะดวก การเดนทางทองเทยวอาจเปนความนยม ประเทศไทยมแหลงทองเทยวทนาสนใจอยมากมายในทกจงหวดทวทกภมภาค และเพอความสะดวกรวดเรวในการหาขอมลของนกทองเทยว การทองเทยวแหงประเทศไทย จงไดจดรวบรวมขอมลของสถานททองเทยวในแตละจงหวด เวบไซตนจงท าขนเพอเปนสอกลางในการพดคยแนะน า แสดงความคดเหนเกยวกบ สถานททองเทยวทมอยในประเทศไทยเพอแบงปนความร และสงเสรมการทองเทยวภายในประเทศใหกบผคนทสนใจตามทไดมบคคลตางๆ แนะน ามา 1.2 วตถประสงคของโครงการ 1.2.1 เพอใหเปนสอกลางของสงคมการทองเทยว 1.2.2 เพออ านวยความสะดวกใหนกทองเทยว 1.2.3 เพอใหผใชเขามารวมแสดงความคดเหนเกยวกบททองเทยว 1.2.4 เพอใหบคคลทชอบการทองเทยวไดมาแลกเปลยนความคด 1.2.5 เพออ านวยความสะดวกในการทองเทยวและการเดนทาง 1.3 ขอบเขตของโครงการ

1.3.1 เปนเวบไซตเครอขายสงคม (Social Network) ของคนชอบทองเทยว โดยใชลกษณะแบบเฟสบค (Face book) 1.3.2 ผใชงานทวไป - สามารถสมครสมาชกได - ดขอมลทวไป

2

1.3.3 ระบบสมาชก - สามารถแสดงขอความ - สามารถบรรจขนรปได - สามารถแกไขขอมลสวนตวของสมาชกเองได - สามารถสรางกลมทองเทยว - ลงคะแนน - สามารถคนหากลมทองเทยว - มระบบ แจงตอบรบ เมอมคนตองการเหมอนเรา - สามารถเพมเพอนได - สามารถเขารวมกลมได - สามารถคนหาสมาชกได - บอกต าแหนงทจะเดนทาง 1.3.4 ระบบผดแล - เพมเนอหาขอมลการทองเทยว - ระบบจดการสมาชก 1.4 ประโยชนทคาดวาจะไดรบ 1.4.1 ไดเพอนรวมการเดนทาง 1.4.2 ไดรจกแหลงทองเทยวในประเทศไทย 1.4.3 แบงปนประสบการณในการเดนทาง 1.4.4 เพอใหทราบเสนทางในการเดนทาง 1.5 แผนการด าเนนงานของโครงงาน ในการด าเนนการของระบบเวบไซตทองเทยว จะตองมการศกษาเทคโนโลยทน ามาใชในระบบ การเกบรวบรวมขอมล การวเคราะหระบบงาน การออกแบบงาน พรอมทงการพฒนาและทดสอบโปรแกรม รวมถงการตดตงระบบและการจดท าเอกสารประกอบการใชงาน โดยการด าเนนงานม ดงตารางท 1.1

3

ตารางท 1.1 ตารางแสดงแผนด าเนนงาน

กจกรรม สปดาหท

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 1. การศกษาทฤษฎและเทคโนโลยทใช

2. การรวบรวมขอมล 3. การวเคราะหขอมล 4. เขยนโปรแกรม 5. ทดสอบและแกไขโปรแกรม 6. การทดสอบตดตงระบบ 7. ประเมนผลและจดท าเอกสาร

1.6 อปกรณและโปรแกรมทใช

1.6.1 สวนของอปกรณทใชในโครงงาน 1.6.1.1 เครองคอมพวเตอร 1.6.1.2 เครองพมพ 1.6.2 สวนของโปรแกรมทใชในโครงงาน 1.6.2.1 Microsoft Windows 7 Ultimate 1.6.2.2 Microsoft Office 2007 1.6.2.3 Adobe Photoshop CS4 1.6.2.4 Adobe Dreamweaver cs4 1.6.2.5 PHP Version 5.0 1.6.2.6 Oracle 10g

4

บทท 2

ทฤษฎทเกยวของ

2.1 ความหมายของเครอขายสงคม (Social Network) เครอขายสงคม หมายถง กลมของความสมพนธทบคคลกลมหนงมตอกนและกน ลกษณะของความสมพนธทเกดขนสามารถน าไปใชอธบายพฤตกรรมของบคคลเหลานได หรออกความหมายหนงคอ ชดของการเชอมโยงซงกนและกนระหวางบคคล ทกอใหเกดสายใยผกพนของครอบครว เพอน และคนรจกในชวงชวตของคน เครอขายสงคมอาจเปรยบไดกบภาพของจดตางๆ ทมการเชอมโยงกนดวยเสนตรงหลายๆ เสน จดคอบคคล และเสนตรงคอสายสมพนธ บคคลแตละคนจงเปนเสมอนจดศนยกลางทมสายสมพนธกบจดหรอบคคลอนทมสายสมพนธกบคนอนๆ ตอไปอกทบคคลตรงจดศนยกลางไมรจกแนวทางการวเคราะหเครอขายสามารถน ามาใชอธบายความสมพนธระหวางสรรพสงตางๆ ไดตงแตระดบครอบครวจนถงระดบโลก สรรพสงตางๆ ทอยในเครอขายความสมพนธเราเรยกวา จด (Node) ถามการเชอมโยงระหวางจดตางๆ ความสมพนธของจดเหลานกคอ เครอขาย (network) 2.2 ทฤษฎเครอขายสงคม เครอขายเปนรปแบบความสมพนธทางสงคมอยางหนงทแตกตางไปจากกลม โดยทกลมจะมขอบเขตทชดเจน รวาใครเปนสมาชก ใครไมใชสมาชก มความเปนรปธรรม มองเหนได มโครงสรางทางสงคมในระดบหนง แตเครอขายเปนรปแบบความสมพนธทางสงคมทไมมขอบเขต การเชอมความสมพนธระหวางสมาชกเครอขายอาจจะมองเหนและมองไมเหนเปนรปธรรมกได สาระของการเชอมโยงระหวางกนทจะชวยใหมองเหนรปธรรมของเครอขายม 3 ลกษณะคอ เครอขายการแลกเปลยน เครอขายการตดตอสอสาร และเครอขายความสมพนธในการอยรวมกน เครอขายไมมโครงสรางทแนนอนตายตว อาจมการออกแบบโครงสรางขนมาท าหนาทสานความสมพนธระหวางคนกบกลมองคกรใหตอเนอง แตในเครอขายไมมใครบงคบใหใครกระท าอะไรได แตละคน กลมองคกรตางกเปนศนยกลางของเครอขายได ดงนนรปแบบความสมพนธทางสงคมของเครอขายจงมความซบซอนกวากลมองคกรมากนก 2.3 การวจยเครอขายสงคม ศนยการวจยประเมนวาเวบไซตเครอขายสงคมจะเปนชองทางสรางโอกาสส าคญในการเตบโตของโฆษณาออนไลน โดยมจดแขง คอ สามารถเขาถงกลมเปาหมายไดอยางชดเจนและม

5

ประสทธภาพ โดยสามารถเจาะกลมเปาหมายไดตามลกษณะของกลมเครอขายสงคมทหลากหลายและซบซอน เปนการโฆษณาโดยใชพลงทางเครอขายสงคม ซงเปนลกษณะการบอกตอปากตอปาก (Words of Mouth) โดยจะสรางความนาเชอถอของผลตภณฑผานการบอกเลาของสมาชกในเครอขายสงคม ท าใหลกคาไมรสกถกบงคบใหตองรบฟง ผประกอบการสามารถใชเวบเครอขายสงคมเปนเครองมอการท า CRM (Customer Relationship Management) ในงานประชาสมพนธทางการตลาด เนองจากจะมการแสดงความคดเหนผานเวบ ท าใหผประกอบการรบร การตอบรบ (Feedback) ของกลมเปาหมายไดอยางชดเจน 2.4 ตวชวดในการวเคราะหเครอขายสงคม 1. ตวกลางเชอมตอ (Betweenness) ขอบเขตทจดเชอมตอ หรอบคคลอยระหวาง ความสมพนธกบผ อนในเครอขาย ตวชวดนจะแสดงถงจ านวนทผคนมการตดตอทางออม ผานการตดตอโดยตรงจากบคคลนนๆ 2. สะพาน (Bridge) เปนเสมอนสะพานทเชอมตอบคคลเขาดวยกน ถาถกตดขาดจะท าให จดทเกดการเชอมตอ หลดออกจากสวนประกอบตางๆของความสมพนธ 3. ศนยกลาง (Centrality) แสดงถงความเปนศนยกลางการเชอมตอ ของบคคลภายในเครอขายสงคม 4. การรวบรวม (Centralization) เปนการรวบรวมความแตกตางระหวางจดเชอมตอ ซงมความกระจดกระจายกนในแตละจดเชอมตอ ซงมความเปลยนแปลงไปเพยงเลกนอยระหวางจ านวนของการเชอมโยงกนใน แตละจดเชอมตอ 5. ความสนทสนม (Closeness) เปนตวแปรทน ามาวเคราะหความสนทสนมของ จ านวนบคคลทมการเชอมตอในทางตรง หรอทางออม แสดงถงความสามารถในการเขาถงขอมลผานเครอขายสงคม จากการทมความสมพนธในระดบทใกลทสด ยอมตองมการเขาถงขอมลไดด 6. การตดตอกน (Cohesion) แสดงถงการตดตอซงกนและกนของบคคล เชน การตดตอกนทางตรง และโดยทางออมซงตองผานบคคลอนทเปนจดเชอมตอได 7. ระดบ (Degree) เปนตวชวดโดยนบจ านวนความสมพนธของบคคลหนงตอบคคลอนๆ ในเครอขาย

6

8. ความหนาแนน (Density) ความหนาแนนในเครอขายสงคม ซงวเคราะหจากความสมพนธในระดบบคคล 2.5 ระบบเครอขายสงคม หากพจารณาในรปแบบทง ายขน เครอขายสงคมจะถกมองเปนแผนท ของทกความสมพนธ ทเกยวของกนระหวาง จดเชอมตอ แนวคดเหลานอธบายไดดงรปท 2.1

รปท 2.1 แผนภาพแสดงเครอขายสงคม (Social network diagram) 2.6 เวบเครอขายสงคม (Web social network) ในปจจบนไดมการใชเครอขายสงคมงานผานระบบอนเทอรเนต อยางแพรหลาย เวบเครอขายสงคมนน ใชเทคโนโลย web 2.0 เขามามบทบาทส าคญอยางมาก กบการ ปฎสมพนธทางสงคม และชมชน ในปจจบนบคคลสามารถโตตอบกนผาน เวบไซตทเรยกวาเปน เวบเครอขายสงคม นนกคอเวบไซตทเชอมโยงผคนไวดวยกน ซงสามารถทจะสรางพนทสวนตวขนมา เพอแนะน าตวเองได เชน Hi5, Friendster, My Space, FaceBook เปนตนซงจะมการใชงานแตกตางกนไปยกตวอยางเชน 1. เนนทบคคล (people focus) เปนการมงเนนท บคคล สงเสรมการปฎสมพนธทางสงคม การสรางตวตนออนไลน (Online identity) และ ประวตสวนตว (Profile) ซงจะสรางโดยบคคลทอยในสงคมนนๆ 2. เนนงานอดเรก (hobby focus)

7

มงเนนทความสนใจในงานอดเรก ศลปนทชนชอบ หรอเปนการรวมกลมเพอท างานในแตละแขนง ยกตวอยางเชน Flickr, Kodak Gallery และ Photo bucket. 2.7 เทคโนโลยทเกยวของ 2.7.1 PHP เปนภาษาจ าพวกแปลความและด าเนนงานไปทละค าสง ค าสงตางๆ นนจะเกบอยในเอกสารทเรยกวา สครปต(Script) และเมอใชงานตองอาศยตวแปลชดค าสง ตวอยางของภาษาสครปต เชน JavaScript, Perl เปนตน ลกษณะของ PHP ทแตกตางจากภาษาสครปตแบบอนๆ คอ PHP ไดรบการพฒนาและออกแบบมา เพอใชงานในการสรางเอกสารแบบ HTML(Hypertext Markup Language) โดยสามารถสอดแทรกหรอแกไขเนอหาไดโดยอตโนมต ดงนนจงกลาววา PHP เปนภาษาทม การท างานในสวนของเครองแมขาย (server-side) ซงเปนเครองมอทส าคญชนดหนงทชวยใหสามารถสรางเอกสารโดยไมตองตดตอกบเครองแมขายตลอดเวลา หรอ DHTML (Dynamic Hypertext Markup Language) ไดอยางมประสทธภาพและมลกเลนมากขน 2.7.2 ฐานขอมล ค านยามของฐานขอมลนนมหมายถงการเกบรวบรวมขอมลของผใชและสามารถทจะน าขอมลนนออกมาใชรวมกนไดโดยไมมการซ าซอนของขอมลหรอความขดแยงของขอมล ปจจบนมการกลาวถงมาตรฐานโครงสรางฐานขอมล เพอใหสามารถเชอมโยงฐานขอมลตางระบบ ใหสบคนรวมกนเสมอนเปนฐานขอมลเดยวกน และการสบคนตองแสดงผลตรงตามค าถาม มาตรฐานดงกลาว ไดแก XML (Extensible Markup Language), RDF (Resource Description Framework), Dublin, Core, Metadata เปนตน และสงส าคญอกประการหนงทจะชวยใหการแลกเปลยนขอมลระหวางตางหนวยงานไดด 2.7.3 ระบบจดการฐานขอมล องคกรจะตองมการวางแผนในการจดการบรหารฐาน ขอมลทดจงจะไดประโยชนจากขอมลทจดเรยบเรยงไว โปรแกรมส าหรบจดการฐานขอมลนน โดยทวไปเรยกวา ระบบจดการฐานขอมล หรอ DBMS (Database Management System) สถาปตยกรรมซอฟตแวร (Software architecture) ระบบจดการฐานขอมลนนอาจมไดหลายแบบ เชน ส าหรบฐานขอมลขนาดเลกทมผใชคนเดยว สวนฐานขอมลขนาดใหญทมผใชจ านวนมากนน ปกตจะประกอบดวยโปรแกรมหลายโปรแกรมดวยกน และโดยทวไปสวนใหญจะใชสถาปตยกรรมแบบรบ-ใหบรการ (client-server)

8

โปรแกรมสวนหนา (Front-end) ของระบบจดการฐานขอมล ไดแกโปรแกรมรบ

บรการ จะเกยวของเฉพาะการน าเขาขอมล, การตรวจสอบ, และการรายงานผลเปนส าคญ ในขณะท

โปรแกรมสวนหลง (back-end) ซงไดแก โปรแกรมใหบรการ จะเปนชดของโปรแกรมทด าเนนการ

เกยวกบการควบคม, การเกบขอมลและการตอบสนองการรองขอจากโปรแกรมสวนหนา โดยปกต

แลวการคนหา และการเรยงล าดบ จะด าเนนการโดยโปรแกรมใหบรการ รปแบบของระบบ

ฐานขอมล มหลากหลายรปแบบดวยกน นบตงแตการใชตารางอยางงาย ทเกบในแฟมขอมลแฟม

เดยว ไปจนกระทงฐานขอมลขนาดใหญ

2.7.4 AJAX (Asynchronous JavaScript and XML) เอแจกซ เปนเทคนคในการพฒนาเวบไซต เพอใหโตตอบกบผใชไดดขน โดยการรบสงขอมลในฉากหลง ท าใหไมตองดงหนาเวบไซตทงหนาใหมทกครงทมการเปลยนแปลง ซงชวยท าใหเพมการตอบสนอง ความรวดเรว ในการเขาถงขอมลไดอยางด โดยปกตแลวเมอผใชท าการรองขอขอมลจากเครองแมขาย โดยเครองลกขายจะท าการสงขอมลการรองขอโดย HTTP (Hypertext Transfer Protocol) เพอตดตอกบเครองแมขายเพอใหท าการประมวลผลจากการรองขอทไดรบ และสงผลลพธเปน HTML (Hypertext Markup Language) กลบไปใหผใช วธการขางตนเปนวธการแบบการรองขอและการตอบรบ ซงผใชจะตองรอระหวางทเครองแมขายประมวลผลอยซงเปนหลกการท างานแบบตอเนอง แตการท างานของ เทคนคเอแจกซ จะเปนการท างานแบบทไมตอเนอง โดยเครองแมขายจะท าการสงผลลพธเปนหนาเวบใหผใชทนทโดยไมตองรอใหประมวลผลเสรจกอน หลงจากนนหนาเวบทผใชไดรบจะท าการดงขอมลในสวนตางๆ ทหลง หรอจะดงขอมลกตอเมอผใชตองการเทานน 2.7.5 JQuery JQuery นนเปน JavaScript Library ทบรรจเอาค าสงตางๆ รวมเอาความสามารถของ JavaScript, XML (Extensible Markup Language), CSS(Cascading Style Sheets) และ XHTML(Extensible Hypertext Markup Language) ไวดวยกน โดย JQuery จะท างานในลกษณะของเอแจกซ และยงสามารถรวมการท างานเขาดวยกน คนหาและจดการ องคประกอบรวมถงคณลกษณะดวยตนเองได หรอเขยน JavaScript เพมเตมเพอดกเหตการณตางๆ ทตองการ

9

บทท 3

การออกแบบระบบ

การออกแบบเวบไซตสงคมทองเทยว ตองการใหผใชมสวนรวมกบทางเวบมากขน เพอใหเวบมความนาสนใจ และมประสทธภาพมากขน

3.1 แผนภาพบรบท (Use Case)

แสดงใหเหนถงการตดตอการใชขอมลระหวางผใชงานระบบกบเวบไซตสงคมทองเทยว และผดแลระบบกบเวบไซตสงคมทองเทยว และการเรยกใชขอมลตางๆ บนเวบไซต

, ,

รปท 3.1 แผนภาพบรบท (Use Case)

10

3.2 แผนภาพกระแสขอมล (Data Flow Diagram) แผนภาพกระแสขอมลแสดงรายละเอยดตางๆ ของการท างานของระบบเวบสงคม

ทองเทยว เพอใหรขนตอนการท างานของแตละขนตอ นของระบบเวบสงคมทองเทยว

รปท 3.2 แสดงการสมครสมาชก

2.0

MembersD1

รปท 3.3 แสดงขบวนการลมรหสผานของสมาชก

รปท 3.4 แสดงการแกไขขอมลของสมาชก

11

รปท 3.5 แสดงการรองขอเปนเพอน

5.0

GroupsD4

MessagesD2

MembersD1

MembershipsD3

รปท 3.6 แสดงการจดการกลมของสมาชก

6.0

GroupsD4

NewsTopicsD5

MembersD1

PicturesD6

รปท 3.7 แสดงการประกาศขาวสารของสมาชก

12

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

Tip

Tip

M

M

M

M

Tip

MM

M

M

MM

M

M

M

M

รปท 3.8 แผนภาพแสดงความสมพนธระหวางเอนทต 3.4 ตารางฐานขอมล (Data Table)

น ามาใชในการวเคราะหโครงสรางของระบบ เพอประโยชนในการบ ารงรกษาและปรบปรงแกไขระบบไดถกตอง และแสดงการรวมกลมของคณสมบตในฐานขอมล ระบบเวบไซต สงคมทองเทยวมตารางฐานขอมล ดงน

13

ชอตาราง TB_MEMBER วตถประสงค เกบรายละเอยดของสมาชก แฟมทเกยวของ ไมม ตารางท 3.1 แสดงแฟม Members

ล าดบ(Sequence

No.)

คณสมบต(Attribute)

ค าอธบาย(Descripti

on)

ขนาด(Width)

ประเภท(Type)

ค าเบองตน(Default)

ตรวจสอบความถกตอง(Validation

Check)

ประเภทคย(Key Type)

1 2 3 4 5 6

7 8 9

10

ID M_NAME M_EMAIL M_BIRTH M_SEX M_ADDRESS M_PHONE M_USERNAME M_PASSWORD M_PHOTO

รหสมาชก ชอสมาชก อเมล วนเกด เพศ ทอย โทรศพท ชอผใช รหสผาน รป

- 80 40 -

10 200

10 20 32 50

varchar2 varchar2 varchar2 date varchar2 varchar2 varchar2 varchar2 varchar2 varchar2

ตวเลข ตวอกษร ตวอกษร ตวเลข ตวอกษร ตวเลขและตวอกษร ตวเลข ตวเลขและตวอกษร ตวเลข

PK

ชอตาราง TB_MSG วตถประสงค เกบรายละเอยดขอความ แฟมทเกยวของ ไมม ตารางท 3.2 แสดงแฟม TB_MSG ล าดบ

(Sequence No.)


ค าอธบาย(Description)

ขนาด(Widt

h)




Check)


1 2 3 4

MSG_ID Msg_detail me MSG_DATE Msg_id_user

รหสขอความ หวขอขอความ วนทสง สรางขอความ

- 200

- -

number nvarchar2 date number

ตวเลข ตวอกษร ตวเลข ตวตวเลข

PK

14

ชอตาราง TB_MSG_DETAIL วตถประสงค เกบรายละเอยดขอความยอย แฟมทเกยวของ ไมม ตารางท 3.3 แสดงแฟม TB_MSG_DETAIL


No.)



on)

ขนาด(Width)




Check)


1

2

3

Msg_comm_ Msg_comm_iduser Msg_comm_post

รหสความคดเหน รหสผใช ความคดเหน

- -

200

number number nvarchar2

ตวเลข ตวเลข ตวอกษร

PK

ชอตาราง TB_PHOTO วตถประสงค เกบรายละเอยดรป แฟมทเกยวของ ไมม ตารางท 3.4 แสดงแฟม TB_PHOTO

ล าดบ(Sequenc

e No.)



on)

ขนาด(Width)




Check)


1

2

3

4

PHOTO_ID PHOTO_NAME PHOTO_TYPE PHOTO_SIZE

รหสรป ชอรป รายละเอยด ขนาดรป

50

50

50

50

nvarchar2 nvarchar2 nvarchar2 nvarchar2

ตวเลขและตวอกษร ตวเลขและตวอกษร ตวเลขและตวอกษร ตวอกษร

PK

15

ชอตาราง TB_FRIEND วตถประสงค เกบรายละเอยดเพอน แฟมทเกยวของ ไมม ตารางท 3.5 แสดงแฟม TB_FRIEND


e No.)



on)

ขนาด(Width)




Check)


1 2 3

4

idfriend member_add member_accept member_status

รหสเพอน เพมเพอน รองขอเปนเพอน สถานะ

- - -

10

number number number nvarchar2

ตวเลข ตวเลข ตวเลข ตวเลขและตวอกษร

PK

ชอตาราง TB_JOINTRAVEL วตถประสงค เกบรายละเอยดเขารวมกลมทองเทยว แฟมทเกยวของ ไมม ตารางท 3.6 แสดงแฟม TB_JOINTRAVEL


e No.)



on)

ขนาด(Width)




Check)


1

2

3

4

Jointip_id Jointip_idgtra Jointip_iduser Jointip_status

รวมเดนทาง รหสการสรางกลมทองเทยว รหสของผเขากลม สถานะ

- - - -

number number number varchar2

ตวเลข ตวเลข ตวเลข ตวเลข

PK

16

ชอตาราง TB_GTRAVEL วตถประสงค เกบรายละเอยดการทองเทยว แฟมทเกยวของ ไมม ตารางท 3.7 แสดงแฟม TB_GTRAVEL


No.)


ค าอธบาย(Description

)

ขนาด(Widt

h)




Check)


1

2

3 4 5

6

7

8

9

10

Gtra_id Gtra_loc Gtra_lat Gtra_lon Gtra_count Gtra_detail Gtra_idcreate Gtra_imgtra Gtra_sincetime Gtra_endtime

รหสกลมทองเทยว สถานท พกด พกด จ านวนคนทไปทองเทยว รายละเอยดของการทองเทยว ผสรางกลมทองเทยว รปภาพ เรมการเดนทางทองเทยว สนสดการเดนทางทองเทยว

-

100 - - -

500 -

50 - -

number varchar2 number number number varchar2 number varchar2 date date

ตวเลข ตวเลขและตวอกษร ตวเลข ตวเลข ตวเลข ตวเลขและตวอกษร ตวเลขและตวอกษร ตวเลขและตวอกษร ตวเลขและตวอกษร ตวเลขและตวอกษร

PK

ชอตาราง TB_MARKER_MAP วตถประสงค เกบรายละเอยดเกยวกบการทองเทยวและตวบงชต าแหนง แฟมทเกยวของ ไมม

17

ตารางท 3.8 แสดงแฟม TB_MARKER_MAP


e No.)



on)

ขนาด(Width)




Check)


1

2

3

4 5 6

Marker_id Marker_userid Marker_loc Marker_lat Marker_lon Marker_detail

รหสพกดทองเทยว ชอสถานท เครองบงช เครองบงช เกบรายละเอยดการทองเทยว

- -

50 - -

200

number number varchar2 number number varchar2

ตวเลข ตวเลข ตวเลขและตวอกษร ตวเลข ตวเลข ตวเลขและตวอกษร

PK

3.5 แผนการท างาน (Flowchart)

Start

End

Y

N

Y

Y

N

N

Y

Y

N

N

รปท 3.9 แสดงแผนผงระบบเวบ

18

Star

N

End

Y

N

N

,

Y

Y

Y

N

รปท 3.10 แผนภาพของผดแลระบบ

19

Start

End

N

Y

,

,

รปท 3.11 แผนภาพแสดงการเขาใชงานของสมาชก

Start

End

- , ,

, ,

Y

N

รปท 3.12 แผนภาพแสดงการสมครสมาชก

20

Start

End

N

Y

รปท 3.13 แผนภาพลมรหสผาน

Start

End

N

N

N

N

Y

Y

Y

Y

รปท 3.14 แผนภาพแสดงแผนผงการท างานผใชงาน

21

Start

,

End

N

Y

Y

N

YN

,

N

Y

N Y

รปท 3.15 แผนภาพแสดงการใชงานหนาขอมลสวนตว

22

Start

End

N

Y

Y

Y

NN

N

N

Y

Y

รปท 3.16 แผนภาพแสดงการใชงานหนาจดการเพอน

Start

End

N

Y

N

Y

Y

รปท 3.17 แผนภาพแสดงการใชงานหนาสรางกลมทองเทยว

23

Start

End

Y

N

Y

รปท 3.18 แผนภาพการใชงานหนาสรางกลมเพอนทองเทยว

Start

End

Y

N

รปท 3.19 แผนภาพการใชงานหนาเขากลมเพอนทองเทยว

24

Start

End

Y

N

Y

รปท 3.20 แผนภาพการใชงานหนา คนหาเพอนทองเทยว Start

End

N

Y

Y

,

รปท 3.21 แผนภาพการใชงานหนาลงคะแนน

25

Start

End

N

Y

N

Y

Y

N

รปท 3.22 แผนภาพการใชงานหนาผดแลกลมทองเทยว

3.6 การออกแบบสวนเชอมประสานกบผใช (User Interface Design) การออกแบบการเชอมประสานกบผใชงาน คอ การออกแบบสวนของเวบไซตทเกยวของกบการมองเหน การไดยน หรอการสมผสกบผใช โดยสวนนสรางขนเพอแสดงขอมลทสามารถตดตอกบผใช ดงรปท 3.23

26

Code สงคมทองเทยว 1 Name หนาแรก

&

user

Password

Member Login

Forgot Password Registered

Login

&

Sound ไมม Picture ม Video ไมม Animation ไมม Link to ใชปมเชอมตอ (Link) ไปยงหนาตางๆ

รปท 3.23 หนาแรก Code สงคมทองเทยว 2

27

Name ลมรหสผาน

E-mail

...............................


รปท 3.24 หนาลมรหสผาน Code สงคมทองเทยว 3

28

Name สมครสมาชก

UserName

E-mail

...............................

*

*

*

Logo


รปท 3.25 หนาสมครสมาชก Code สงคมทองเทยว 4

29

Name ผใชงาน

Logo


รปท 3.26 หนาผใชงาน Code สงคมทองเทยว 5

30

Name ขอมลสวนตว

TEXT

TEXT

TEXT

TEXT

TEXT

TEXT

E-mail

Logo

TEXT


รปท 3.27 หนาขอมลสวนตว Code สงคมทองเทยว 6

31

Name อลบมรปภาพ

1 | 2 | 3 >>

Logo


รปท 3.28 หนาอลบมรปภาพ Code สงคมทองเทยว 7

32

Name เพอน

X

X

X

Logo


รปท 3.29 แสดงหนาเพอนเรา Code สงคมทองเทยว 8

33

Name เพมเพอน

Logo


รปท 3.30 หนาเพมเพอน Code สงคมทองเทยว 9

34

Name คนหาเพอน

X

X

X

Logo

Search


รปท 3.31 หนาคนหาเพอน

35

บทท 4 การพฒนาโปรแกรม

บทนจะกลาวถงเครองมอและอปกรณทใชในการพฒนาเวบไซตสงคมทองเทยว การพฒนา

โปรแกรมน จะท าใหเขาใจถงระบบการท างาน วธการประมวลผลและระบบการท างานโดยรวม ซงในการก าหนดรายละเอยดตางๆ ทเปนองคประกอบส าคญในการพฒนาและปรบปรงระบบ ซงจะเปนการพฒนาระบบในอนาคต รวมถงปญหาทอาจเกดขน เพอแกไขไดงาย และสามารถบ ารงรกษาระบบในอนาคต และสามารถบ ารงรกษาระบบงานใหมประสทธภาพเหมาะกบงานทท าดวย ซงผจดท าไดพฒนาเวบไซตสงคมทองเทยว มการใชงานทางดานอปกรณและโปรแกรมตางๆ ดงน

4.1 อปกรณและโปรแกรมทใช 1. อปกรณทใช ไดน าเครองคอมพวเตอรและอปกรณทใชในการพฒนาเวบไซตสงคมทองเทยวประกอบไปดวยอปกรณตางๆ ดงน 1.1 ซพย Intel(R) Core(TM) 2 Duo CPU P7450 @ 2.13GHz 2.13GHz 1.2 แรม (Ram) DDR3 ขนาดหนวยความจ า 4 GB 1.3 ฮารดดสก (Hard disk) ขนาดความจ 500 GB 1.4 การดจอ NVIDIA GeForce GT 130M 2. โปรแกรมทใชในการพฒนาโครงงาน ประกอบดวย โปรแกรมทใชในการพฒนาเวปไซตสงคมทองเทยวประกอบไปดวย โปรแกรมตาง ๆ ดงในตารางท 4.1 ตารางท 4.1 โปรแกรมทใชในการพฒนาโครงงาน

ชอโปรแกรม น ามาใชเพอ เลอกเพราะ Adobe Dreamweaver CS4 ใชในการพฒนาและออกแบบ

หนาจอ, ดง ไฟลแฟชและจดวางหนาเวบ

เปนโปรแกรมทสนบสนนงานทางดานการออกแบบเวบทงายและมเครองมอหลากหลาย

ตารางท 4.1 โปรแกรมทใชในการพฒนาโครงงาน (ตอ)

36

Adobe Photoshop CS4 ใชในการตกแตงภาพ เปนโปรแกรมทมความสามารถในการตกแตง

รปภาพทมประสทธภาพ ท าใหรปภาพมความสวยงามและสมจรงมากขน

Adobe Flash CS4 Professional

ใชสรางปม ตวอกษร และแสดงภาพเคลอนไหว

เปนโปรแกรมทชวยในการเพมลกเลนอยางหลากหลายใหหนาเวบมความนาสนใจมากยงขน

Oracle 10 g ใชจดเกบขอมลลงในฐานขอมล ใชจดเกบเกบขอมลของระบบลงฐานขอมล Microsoft office Word 2007

ใชท าเอกสารโครงงาน ชวยในการจดท าเอกสารโครงงานเพราะเปนโปรแกรมทมประสทธภาพในการท าเอกสารและงายตอการใชงาน

Microsoft office PowerPoint 2007

ใชท าเอกสาร น าเสนอ ชวยในการน าเสนอขอมลเอกสารทมความนาสนใจและมลกเลนมากขน

Microsoft office Visio 2007

ใชท าแผนภาพ ชวยใหการท าเอกสารทเปน แผนภาพ งายขนเพราะมเครองมอทงายตอการสราง

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

ตารางท 4.2 แสดงกระบวนการการท างานของ กระบวนการ 1.0 หนาหลก กระบวนการ 1.0 หนาหลก

ชอ กระบวนการ ค าอธบายการท างาน หมายเหต เขาสระบบ เปนกระบวนการทสมาชกของเวบไซตใชในการ เขาสระบบ

โดยการใส ชอ และ รหสผาน ของตนเอง

ตารางท 4.3 แสดงกระบวนการการท างานของ กระบวนการ 2.0 สมครสมาชก กระบวนการ 2.0 สมครสมาชก

ชอ กระบวนการ ค าอธบายการท างาน หมายเหต การสมครสมาชก เปนกระบวนการทใชส าหรบสมครสมาชก

ตารางท 4.4 แสดงกระบวนการการท างานของ กระบวนการ 3.0 ลมรหสผาน

37

กระบวนการ 3.0 ลมรหสผาน

ชอ กระบวนการ ค าอธบายการท างาน หมายเหต ลมรหสผาน เปนกระบวนการ ทใชส าหรบสมาชก ลมรหสผาของตวเอง

ตารางท 4.5 แสดงกระบวนการการท างานของ กระบวนการ 4.0 กระดานขาว กระบวนการ 4.0 กระดานขาว

ชอ กระบวนการ ค าอธบายการท างาน หมายเหต กระดานขาว เปนกระบวนการทใหสมาชกใชในการแสดงความคดเหน

ตารางท 4.6 แสดงกระบวนการการท างานของ กระบวนการ 5.0 ขอมลสวนตว กระบวนการ 5.0 ขอมลสวนตว

ชอ กระบวนการ ค าอธบายการท างาน หมายเหต ขอมลสวนตว เปนกระบวนการทแสดงขอมลสวนตว

ตารางท 4.7 แสดงกระบวนการการท างานของ กระบวนการ 6.0 แกไขขอมลสวนตว กระบวนการ 6.0 แกไขขอมลสวนตว

ชอ กระบวนการ ค าอธบายการท างาน หมายเหต แกไขขอมลสวนตว เปนกระบวนการทใชส าหรบผใช แกไขขอมลสวนตว เบองตน

ทไมมผลกระทบตอขอมลส าคญหลก เชน รปภาพประจ าตว สทชอบ หรอเพลงทชอบ

http://localhost/web/forgetpassword.html


38

ตารางท 4.8 แสดงกระบวนการการท างานของ กระบวนการ 7.0 เปลยนรหสผาน กระบวนการ 7.0 เปลยนรหสผาน

ชอ กระบวนการ ค าอธบายการท างาน หมายเหต เปลยนรหสผาน เปนกระบวนการ ทใหสมาชกใชในการเปลยนรหสผาน

ใหม ขนมา

ตารางท 4.9 แสดงกระบวนการการท างานของ กระบวนการ 8.0 รปประจ าตว กระบวนการ 8.0 รปประจ าตว

ชอ กระบวนการ ค าอธบายการท างาน หมายเหต รปประจ าตว เปนกระบวนการทสมาชกของเวบไซตใชในการแสดงรป

ตารางท 4.10 แสดงกระบวนการการท างานของ กระบวนการ 9.0 รายชอเพอน กระบวนการ 9.0 รายชอเพอน

ชอ กระบวนการ ค าอธบายการท างาน หมายเหต

รายชอเพอน เปนกระบวนการ ทแสดงราชอของเพอน

ตารางท 4.11 แสดงกระบวนการการท างานของ กระบวนการ 10.0 จดการเพอน กระบวนการ 10.0 จดการเพอน

ชอ กระบวนการ ค าอธบายการท างาน หมายเหต จดการเพอน เปนกระบวนการทสมาชกของเวบไซต การทผใช ท าการตอบรบ

หรอปฎเสธความเปนเพอน ใหกบผทรองขอความเปนเพอนมา

ตารางท 4.12 แสดงกระบวนการการท างานของ กระบวนการ 11.0 คนหาเพอน

39

กระบวนการ 11.0 คนหาเพอน

ชอ กระบวนการ ค าอธบายการท างาน หมายเหต คนหาเพอน เปนกระบวนการทสมาชกของเวบไซตใชในการ คนหารายชอของ

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

ตารางท 4.13 แสดงกระบวนการการท างานของ กระบวนการ 12.0 อลบมรป กระบวนการ 12.0 อลบมรป

ชอ กระบวนการ ค าอธบายการท างาน หมายเหต อลบมรป เปนกระบวนการทสมาชกของเวบไซตใชในการ เพมรป

ตารางท 4.14 แสดงกระบวนการการท างานของ กระบวนการ 13.0 กลม กระบวนการ 13.0 กลม

ชอ กระบวนการ ค าอธบายการท างาน หมายเหต กลม เปนกระบวนการทสมาชกของเวบไซตใชในการสรางกลม

ตารางท 4.15 แสดงกระบวนการการท างานของ กระบวนการ 14.0 ผดแลระบบ กระบวนการ 14.0 ผดแลระบบ

ชอ กระบวนการ ค าอธบายการท างาน หมายเหต จดการเวบบอรด เปนกระบวนการทผดแลระบบใชลบกระทหรอการแสดงความ

คดเหนทไมเหมาะสมในเวบบอรด

จดการสมาชก เปนกระบวนการทผดแลระบบใชส าหรบ คนหา/ลบ /แกไข ขอมลเกยวกบสมาชกในระบบ

4.3 การออกแบบสวนเชอมประสานกบผใช (User Interface Design)

40

การออกแบบหนาจอภาพ คอ การออกแบบสวนของเวบไซตทเกยวของกบการมองเหน การไดยน หรอการสมผสกบผใช โดยมวตถประสงคหลก ดงน - มลกษณะเปนหนาตางและค าสงในการท างานคลายโปรแกรมทท างาน บนระบบปฎบตการทวๆ ไป เพราะผใชงานคอมพวเตอรสวนใหญคนเคยกบการใชอยแลวท าใหผใชสามารถใชโปรแกรมไดสะดวกมากขน - การรบค าสงจากผใชเนนทการกดปมทไดเตรยมไวให โดยปมจะมขอความหรอรปภาพทสอความหมายของค าสงใหไดมากทสด ผใชเพยงแตกดทปมค าสงกสามารถใชงานไดโดยไมตองจดจ าค าสงและพมพค าสงเอง - เพอความสะดวกในการใชงาน สามารถเลอกความเรวในการแสดงจากล าดบรายการ - ผใชจะปอนขอความทจะแสดงออกไดทชองขอความ การเขาใชระบบของเวบไซตสงคมทองเทยว เนองจากเปนระบบภายในองคกร ผใชจะไดรบรหสสมาชก รหสผานทางจดหมายอเลกทรอนกสจากผดแลระบบ จากนนผใชสามารถเขาสระบบโดยรหสสมาชก และรหสผาน ทไดรบทางจดหมายอเลกทรอนกสของผใช

รปท 4.1 แสดงเขาสระบบ

41

การเขาใชระบบของเวบไซตสงคมทองเทยว เนองจากเปนระบบภายในองคกร ผใชจะตองท าการสมครสมาชกกอนเพอทจะเขาระบบได

รปท 4.2 แสดงหนาสมครสมาชก

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

รปท 4.3 แสดงหนาลมรหสผาน



42

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

รปท 4.4 แสดงหนาหนาแรก

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

รปท 4.5 แสดงหนาขอมลประวตบคคล


43

ผใชสามารถแกไขประวตบคคลเบองตน รวมถงขอมลการเขาใช เชน รหสผาน ค าถาม และค าตอบกนลม รวมถงรปภาพประจ าตวของผใชงาน

รปท 4.6 แสดงหนาแกไขขอมลสวนตว

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

รปท 4.7 แสดงหนารายชอเพอน

44

เมอมผรองขอเพอนเขามาผใชสามารถตอบรบเพอนไดโดยการกดยนยนเพอเพมเพอน และสามารถยกเลกไดหากไมตองการเปนเพอนกบผทรองขอมา

รปท 4.8 แสดงหนาตอบรบเพอน

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

รปท 4.9 แสดงหนาคนหาเพอน

45

ผใชสามารถแกไขขอมลไดหรอลบกลม แลวเขาสการจดการกลมบคคล โดยผสรางกลมจะเปนผดแลกลมดวย

รปท 4.10 แสดงหนากลมของเรา

หนาเพมประวตทองเทยวจะเกบรายละเอยดของสถานททองเทยวทเราก าลงจะไปทองเทยว

รปท 4.11 แสดงหนาเพมประวตทองเทยว

46

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

รปท 4.12 แสดงหนาประวตทองเทยว

หนาสรางกลมทองเทยว จะบอกถงสถานททเราจะเดนทางไปทองเทยวสามารถระบวนเดนทางและวนทกลบและยงระบจ านวนคนทจะเดนทางไปกบกลมนได

รปท 4.13 แสดงหนาสรางกลมทองเทยว

47

หนาคนหากลมทองเทยว จะแสดงรายระเอยดของกลมทองเทยวทจดขนหากตองการจะรวมเดนทางใหกดปม เพมเพอน

รปท 4.14 แสดงหนาคนหากลมทองเทยว

หนากลมเดนทางทองเทยวของเรา จะแสดงรายระเอยดของการเดนทางทองเทยววาเราจะเดนทางไปทองเทยวทไหน

รปท 4.15 แสดงหนากลมเดนทางทองเทยวของเรา

48

ในสวนจดการระบบ สามารถเขาใชไดผานผใชทมหนาทดแลระบบเทานน

รปท 4.16 แสดงหนาผดแลระบบ

49

บทท 5

สรปโครงงาน ปญหา และขอเสนอแนะ

5.1 สรปโครงงาน โครงงาน บดดเทรเวล (Buddy Travel) เวบไซตสงคมทองเทยว จดท าขนโดยออกแบบโครงสรางในรปแบบของเวบไซตกบฐานขอมล เพอรองรบการใชงานของผใช โครงงาน บดดเทรเวล (Buddy Travel) เวบไซตสงคมทองเทยว เปนอกชองทางเลอกหนงในการบรการใหผใชทสนใจเขามารบขาวสารการทองเทยว โดยทางเวบไซตจะมสมาชก 2 แบบ ไดแก สมาชกประเภทบคคลทวไป ทสามารถเขามาเยยมชมเวบไซตไดแต ไมสามารถแสดงความคดเหน ตชม ไมสามารถสรางประวตสวนตวได สวนสมาชกสามารถแสดงความคดเหน ตชม สรางประวตสวนตวได การท างานของเวบไซตเนนใหผใชสามารถจดการขอมลไดเองมากขน ผใชสามารถเพม ลบ แกไข ขอมล ไดในสวนทระบบไดจดไวส าหรบการจดการในสวนของสมาชก แตยงมบางสวนทจดท าไดไมสมบรณเนองจากปญหาในดานตางๆ ไมวาจะเปนการขาดประสบการณและความช านาญในการใชโปรแกรม อกทงขาดการวางแผนทดในดานระยะเวลาในการท างาน 5.2 ปญหาทเกดขน 5.2.1 ปญหาเกดจากโปรแกรมฐานขอมล (Oracle10g) มความซบซอนมาก ท าใหมปญหาในการท างาน เนองจากไมคอยมตวอยางใหด 5.2.2 ปญหาในเรองของการสงจดหมายอเลกทรอนกสไปยงผใชงาน เพราะตองใชการเชอมตออนเทอรเนตมอถอในการเชอมตอ เนองจากทางมหาลยไดท าการปดกนก าแพงไฟไวท าใหเกดปญหาในการรนโปรแกรมแตละครง 5.2.3 เมอมการออกแบบระบบแลว ยงไมสามารถรองรบการท างานของผใชเทาทควร จงตองมการออกแบบระบบใหมอยหลายครง ท าใหเสยเวลาในการท างานอยหลายชวง และโปรแกรมทท างานไมตอเนองกน 5.2.4 เกดปญหากบการศกษาใชงานเทคโนโลย Ajax เนองจากทางผจดท ายงไมมพนฐานน จงตองใชเวลาศกษานานพอสมควร 5.3 ขอเสนอแนะ 5.3.1 ควรศกษาภาษาโปรแกรมทใชใหมาก เพอใหเกดความช านาญในการออกแบบระบบ และสามารถใชงานไดอยางเตมประสทธภาพ

50

5.3.2 ควรออกแบบระบบ ใหรองรบการใชงานของผใชใหมากทสด เพอจะไมเสยเวลาในการท างาน และมความตอเนองของตวงานในระบบดวย 5.3.3 การใชงานโปรแกรมฐานขอมล (Oracle10g) ควรมการศกษาโครงสรางใหมากกอน เพอการใชงานของฐานขอมลทมประสทธภาพมากขน 5.3.4 การใชงาน Ajax ควรมการศกษาโครงสรางใหมากกอน เพอการใชงานของภาษาทมประสทธภาพมากขน 5.3.5 การน า Google map มาใชงาน ควรมการศกษาโครงสรางใหมากกอน เพอการใชงานโปรแกรมมประสทธภาพมากขน

51

บทท 6

คมอการใชงาน

6.1 โปรแกรมทตองใชในระบบ เครองคอมพวเตอรและโปรแกรมทใชในระบบการท างาน 6.1.1 คอมพวเตอรแบบพกพา (Computer Notebook)

- หนวยประมวลผล (CPU) อนเทลเซเรลอน 1.5 กกกะเฮรทขนไป - หนวยความจ า (Ram) 512 เมกกะไบตขนไป - ฮารดดสก (Hard disk) 20 กกกะไบตขนไป

6.1.2 อนเทอรเนตเอกซพลอเรอร (Internet Explorer Browser) เวอรชน 7 ขนไป 6.1.3 อนเทอรเนตความเรวสง (Hi-speed Internet)

6.2 วธการใชงาน

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

6.1 หนาแรกของเวบไซต หนาแรกของเวบไซตโดยจะแสดงขาวสารและรปภาพของทางเวบไซตวามขาวหรอขอมลอะไรใหมๆ ททางเวบไดท าการเพมเขาไป เมนขางขวาคอ สวนของการเขาสระบบและสมครสมาชกและการลมรหสผาน ดง รปท 6.1

รปท 6.1 หนาแรกของเวบไซต

52

6.2 หนาสมครสมาชก ผชมทวไปสามารถสมครสมาชกไดจากหนาน เพอไดรบสทธตางๆ ในเวบไซต เชน การมเพอน การสรางกลม การสนทนาระหวางเพอนและอนๆ ดงรปท 6.2

รปท 6.2 แสดงหนาสมครสมาชก 6.3 หนาแรกของสมาชก หลงจากสมาชกท าการสมครสมาชกและมการยนยนตวตนแลวจะเขาสหนาแรกของของสมาชก เมนดานซายจะเปนเมนหลกของระบบ สวนดานขวาจะแสดงรายชอเพอนทางเวบไซต ดงรป 6.3

รปท 6.3 แสดงหนาแรกของสมาชก

53

6.4 หนาการบรรจภาพของผใช หนานเปนการบรรจภาพของผใช ผใชสามารถกดปม Browse เพอบรรจภาพลงเวบไซตไดครงละหลายภาพกดปม Upload เพอบรรจภาพและสามารถกดปม Clear all เพอยกเลกได ดงรป 6.4

รปท 6.4 แสดงหนาการบรรจภาพของผใช

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

รปท 6.5 แสดงหนาขอมลสวนตว

54

6.6 หนาเปลยนรหสผาน หนาเปลยนรหสผานจะบอกถงชอของผใชคนนนๆ ซงสมาชกเทานนทจะมสทธเขาได ดงรป 6.6

รปท 6.6 แสดงหนาเปลยนรหสผาน

6.7 หนาเพมประวตทองเทยว หนาหนาเพมประวตทองเทยวจะเกบรายละเอยดของสถานททองเทยวทเราก าลงจะไปทองเทยว ดงรป 6.7

รปท 6.7 แสดงหนาเพมประวตทองเทยว

55

6.8 หนาแสดงประวตทองเทยว หนาแสดงประวตทองเทยวจะเกบรายละเอยดของสถานททองเทยวทเราเคยเดนทางไปทองเทยวมาแลว ดงรป 6.8

รปท 6.8 แสดงหนาประวตทองเทยว

6.9 หนารายชอเพอน หนารายชอเพอน จะท าการแสดงรายชอของเพอนของเราทอยในระบบ ดงรป 6.9

รปท 6.9 แสดงหนารายชอเพอน

56

6.10 หนาจดการเพอน กดปม ตกลง เพอเปนการเพมผตดตอในระบบเมอเพมผตดตอแลวจะตองรอการตอบรบจากผตดตอคนนนดวย ดงรป 6.10

รปท 6.10 แสดงหนาจดการเพอน

6.11 หนาคนหาเพอน กดปม คนหา เพอเปนการคนหาผตดตอในระบบเมอกดคนหาแลวจะแสดงรายชอของเพอน ดงรป 6.11

รปท 6.11 แสดงหนาคนหาเพอน

57

6.12 หนาสรางกลมทองเทยว หนาสรางกลมทองเทยว จะบอกถงสถานททเราจะเดนทางไปทองเทยวสามารถระวนเดนทางและวนทกลบและยงระบจ านวนคนทจะเดนทางไปกบกลมนได ดงรป 6.12

รปท 6.12 แสดงหนาสรางกลมทองเทยว

6.13 หนาคนหากลมทองเทยว หนาคนหากลมทองเทยว จะแสดงรายระเอยดของกลมทองเทยวทจดขนหากตองการจะรวมเดนทางใหกดปม เพมเพอน ดงรป 6.13

รปท 6.13 แสดงหนาคนหากลมทองเทยว

58

6.14 หนาคนหากลมทองเทยว หนากลมเดนทางทองเทยวของเรา จะแสดงรายระเอยดของการเดนทางทองเทยววาเราจะเดนทางไปทองเทยวทไหนดงรป 6.14

รปท 6.14 แสดงหนากลมเดนทางทองเทยวของเรา

59

บรรณานกรม

ชาญชย ศภอรรถกร. คมอเรยนเขยนเวบดวย PHP+MySQL. กรงเทพฯ : ซคเซส มเดย, 2551. ทวร พานชสมบต. รวมเดดเคลดลบ 101 Tips & Tricks PHP. กรงเทพฯ : ซเอดยเคชน, 2552. พนจนทร ธนวฒนเสถยร. ออกแบบ และสรางเวบไซต. กรงเทพฯ : ซเอดยเคชน, 2551. ภญญ ก าเนดหลม. เขยน Webpage ดวย HTML. กรงเทพฯ : บคเซนเตอร, 2546. ศภชย จวะรงสน. ORACLE DATABASE10G. กรงเทพฯ : เอสเค ซรย, 2551.

60

ภาคผนวก

61

ภาคผนวก ก วธการตดตงโปรแกรม

1 วธการตดตง AppServ

1.1 บรรจลง (Download) โปรแกรม AppServ 1.2 กดปม 2 ครงตดตอกนอยางรวดเรวทโปรแกรมเพอท าการตดตงโปรแกรม AppServ จะปรากฏหนาจอใหกดปม Next เพอไปยงขนตอนตอไป

รปท ก.1 ขนตอนการเรมตดตงโปรแกรม

1.3 เลอกไดรฟเวอร (Driver) ทตองการตดตง

62

รปท ก.2 เลอกไดรฟเวอร (Driver) ทจะท าการจดเกบโปรแกรม 1.4 เลอกชดขอมลทตองการลงโดยจะมใหเลอก 3 แบบคอ แบบชดโปรแกรมทจ าเปน (Typical), แบบทงหมด (Compact), แบบก าหนดเอง (Custom) เมอเลอกเสรจแลวใหท าการกดปม Next

รปท ก.3 หนาการเลอกแบบชดขอมลทจะลง 1.5 กรอกขอมลชอเครองแมขายแนะน าวาคาเรมตนเปน localhost

รปท ก.4 แสดงการกรอกขอมลชอเครองแมขาย

63

1.6 ก าหนดชอผใช และรหสผานในการเขาใชงาน Mysql เสรจแลวใหท าการกดปม Next

รปท ก.5 ภาพแสดงก าหนดชอผใช และรหสผานในการเขาใชงาน Mysql

1.7 โปรแกรมด าเนนการตดตง

รปท ก.6 ภาพแสดงกระบวนการเรมตดตง

64

1.8 ด าเนนการเสรจแลวจะปรากฏดงหนาจอ

รปท ก.7 ภาพแสดงการด าเนนการตดตงเสรจสน

1.9 เมอท าการตดตงแลว สามารถตรวจสอบไดคอ พมพทอยไฟลของเวบ http://localhost จะปรากฏหนาจอดงน

รปท ก.8 การทดสอบระบบทตดตง

http://localhost/

65

2 คมอการตดตง Oracle10g บน Windows Oracle เปนโปรแกรมทไวเกบขอมลตาง ๆ ภายในเวบไซต เชน ขอมลสมาชก ขอมล

ค าถาม ค าตอบ download Oracle 10g Database ไดจาก www.oracle.com และท าการตดตงดงน 2.1 กดตวตดตงโปรแกรม oracle 10g รอสกครจะขนหนาโปรแกรมท าการตงคาท

Installation Type เปน Standard Edition (1.10GB) และในสวนของ Database Password กบ Confirm Password ใหใส tiger แลวกด Next

รปท ก.9 หนาแรกของโปรแกรม Oracle10g 2.2 หลงจากกดท Next แลวใหกด Install

รปท ก.10 หนาสาระส าคญของโปรแกรม Oracle10g

66

2.3 หลงจากกดท Install โปรแกรมจะท าการตดตงรอสกคร

รปท ก.11 โปรแกรม Oracle10g ท าการตดตง

2.4 หลงจากตดตงเสรจแลวกดทปม OK

รปท ก.12 แสดงการตงคาโปแกรม Oracle10g

67

2.5 สนสดขนตอนการตดตงโปรแกรม Oracle10g ส าหรบขนตอนสดทายนกดทปม Exit เพอเสรจสนการตดตงโปรแกรม Oracle10g

รปท ก.13 แสดงหนาจอขนตอนสนสดการตดตงโปรแกรม Oracle10g

68

ประวตผจดท าโครงงาน

นางสาววรรณภา สดศร เกดเมอวนท 27 มถนายน 2530 ทจงหวดนครศรธรรมราช ส าเรจการศกษาระดบ ประกาศนยบตรวชาชพชนสงทโรงเรยนเกษมโปลเทคนค และเขาศกษาในหลกสตรวทยาศาสตรบณฑต หลกสตร 2 ป ตอเนอง ภาคปกต สาขาเทคโนโลยสารสนเทศและการสอสาร คณะเทคโนโลยสารสนเทศ มหาวทยาลยศรปทม เมอ พ.ศ. 2551 ปจจบนอาศยอยบานเลขท 87 หม7 ต าบลปรกอ าเภอทงใหญ จงหวดนครศรธรรมราช 80240

นายจกรพนธ ศรเคน เกดเมอวนท 27 กรกฎาคม 2530 ทจงหวดกรงเทพมหานคร ส าเรจการศกษาระดบ ประกาศนยบตรวชาชพชนสงทโรงเรยนไทยบรหารธรกจและพณชยการ และเขาศกษาในหลกสตรวทยาศาสตรบณฑต หลกสตร 2 ป ตอเนอง ภาคปกต สาขาเทคโนโลยสารสนเทศและการสอสาร คณะเทคโนโลยสารสนเทศ มหาวทยาลยศรปทม เมอ พ.ศ. 2551 ปจจบนอาศยอยบานเลขท 553/243 แขวงสกน เขตดอนเมอง จงหวดกรงเทพมหานคร 10210

knowledge sharing for travelling in thailand, ict, sripatum university

Technology