i
โครงงานวิศวกรรมคอมพิวเตอร์
ภาควิชาวิศวกรรมคอมพิวเตอร์
คณะวิศวกรรมศาสตร์
มหาวิทยาลัยเกษตรศาสตร์
เรื่อง
พัฒนาเว็บไซต์โครงการเปิดสอนปริญญาตรีนานาชาติ
คณะวิศวกรรมศาสตร์ มหาวิทยาลัยเกษตรศาสตร์
International Undergraduate Program
Website Development
Faculty of Engineering, Kasetsart University
โดย
นายอัครพงษ์ กาญจนอ าพล
5210502694
ii
ใบรับรองโครงงานวิศวกรรม
ภาควิชาวิศวกรรมคอมพิวเตอร์
เรื่อง
พัฒนาเว็บไซต์โครงการเปิดสอนปริญญาตรีนานาชาติ
โดยนาย อัครพงษ์ กาญจนอ าพล เลขประจ าตัว 52105
02694
พิจารณาเห็นชอบโดย อาจารย์ที่ปรึกษาโครงงาน ... (ผศ.อินทิราภรณ์ มูลศาสตร์) วันที่...เดือน...พ.ศ... หัวหน้าภาควิชาวิศวกรรมคอมพิวเตอร์ ... (ผศ.ดร. ภุชงค์ อุทโยภาศ) วันที่...เดือน...พ.ศ...iii นายอัครพงษ์ กาญจนอ าพล เว็บแอปพลิเคชันส าหรับโครงการปริญญาตรีนานาชาติ ปริญญาวิศวกรรมศาสตรบัณฑิต (สาขาวิศวกรรมคอมพิวเตอร์) ภาควิชาวิศวกรรมคอมพิวเตอร์ คณะวิศวกรรมศาสตร์ มหาวิทยาลัยเกษตรศาสตร์ บทคัดย่อ โครงงานพัฒนาเว็บไซต์โครงการเปิดสอนปริญญาตรีนานาชาติ เป็นการสร้างเว็บไซต์ของโครงการ IUP มหาวิทยาลัยเกษตรศาสตร์เพื่อน าเสนอข่าวสารของภาควิชา ข้อมูลเกี่ยวกับสาขาวิชา เช่น ข้อมูลบุคลากร ข้อมูล หลักสูตรการศึกษา ข้อมูลใบค าร้องต่างๆ และเอกสารที่เกี่ยวข้องต่างๆ เป็นต้น เว็บไซต์แบ่งออกเป็น 2 ส่วนการ ท างาน คือ เว็บไซต์ของโครงการเพื่อประชาสัมพันธ์ข่าวสารต่างๆ ทั่วไป และระบบสมัครเรียนออนไลน์เพื่อใช้ใน การรับสมัครนิสิตใหม่ ซึ่งเป็นระบบที่โครงการยังไม่มี เพื่ออ านวยความสะดวกในการสมัครเรียน ค าส าคัญ Wordpress, PHP
iv Akarapong Kanchana-ampol
Web Application for International Undergraduate Program
Bachelor Degree in Engineering Department Computer Engineering Faculty of Engineering, Kasetsart University
Abstract
International Undergraduate Program development project is implemented for IUP, Kasetsart University to present IUP’s news, information and information such as managerial board, course scheme, petition form, relevant document, etc. This website is divided into two parts, the first part is website sharing information and Online admission system which IUP do not have for facilitating in applying for studying
v
กิตติกรรมประกาศ
การด าเนินโครงงาน “พัฒนาเว็บไซต์โครงการเปิดสอนปริญญาตรีนานาชาติ” เริ่มจากการที่เว็บไซต์เก่า ของ IUP นั้นยังไม่มีระบบการสมัครเรียนออนไลน์ อีกทั้งยังมีแนวคิดในการเปลี่ยนหน้าตาเว็บไซต์กระผมจึงได้ จัดท าโครงงานนี้ขึ้นมา ขอกราบขอบคุณ ผศ. อินทิราภรณ์ มูลศาสตร์ อาจารย์ที่ปรึกษาโครงงานที่คอยให้ค าปรึกษา คอยชี้แนะ ให้โครงงานส าเร็จลุล่วงไปด้วยดี ขอขอบคุณเพื่อน CPE 23 ทุกคนที่คอยช่วยเหลือในการท าโครงงานนี้ ทุกค าถาม ที่คอยอธิบายและคอยช่วยแก้ปัญหา อัครพงษ์ กาญจนอ าพล ผู้จัดท าvi
สารบัญ
สารบัญ ... vi สารบัญภาพ ... viii สารบัญตาราง ... xi 1. บทน า ... 1 1.1 วัตถุประสงค์ของโครงงาน ... 1 1.2 ขอบเขตของโครงงาน ... 1 1.3 ประโยชน์ที่ได้รับ ... 2 2. ทฤษฎีที่เกี่ยวข้อง ... 3 2.1 HTML ... 3 2.2 PHP ... 3 2.3 CSS ... 4 2.4 SQL ... 4 2.5 Wordpress ... 52.6 ระบบการจัดการฐานข้อมูล (DBMS: Database Management System) ... 6
3. เครื่องมือที่ใช้ในการท าโครงงาน ... 8 3.1 Software ... 8 4. วิธีการด าเนินโครงงาน ... 9 4.1 องค์ประกอบโดยรวมของระบบ ... 9 4.2 กระบวรการท างานของระบบ ... 10 4.2.1 Web Site ... 10 4.2.2 ระบบสมัครออนไลน์ ... 12 4.3 ขั้นตอนการพัฒนา ... 16 4.3.1 การออกแบบฐานข้อมูล ... 16 4.3.2 พจนานุกรมฐานข้อมูล ... 17
vii 4.3.3 E-R Diagram ... 20 4.3.4 การเชื่อมความสัมพันธ์ (Relationship) ... 20 5. ผลการด าเนินโครงงานและวิจารณ์ ... 23 5.1 ส่วนแสดงข่าวสารของเว็บไซต์ ... 23 5.2 ส่วนของการ Search ... 23 5.3 Menu ... 24 5.4 ส่วนของระบบสมัครเรียน ... 25 5.4.1 การ login ดูข้อมูลในส่วนของ admin ... 25 5.4.2 การสมัครส่วนของ user ... 26 6. สรุปผลการด าเนินงานและข้อเสนอแนะ ... 27 6.1 ข้อสรุป ... 27 6.2 ปัญหาและอุปสรรค ... 27 6.3 6.3 แนวการการพัฒนาต่อ ... 27 7. บรรณานุกรม ... 28 8. ภาคผนวก ... 29 8.1 การติดตั้งและใช้งาน Appserv เบื้องต้น ... 29 8.2 การติดตั้ง Wordpress ... 37 9. ประวัตินิสิต ... 44
viii
สารบัญภาพ
รูปที่ 2-1 การท างานของ PHP ... 3 รูปที่ 2-2 Wordpress ... 5 รูปที่ 4-1 รูปแบบการเชื่อมต่อของระบบ ... 9 รูปที่ 4-2 หน้าเว็บไซต์ ... 10 รูปที่ 4-3 Flowchart การรับสมัครเรียน ... 12 รูปที่ 4-4 Flowchart การสมัครออนไลน์ในส่วน User ... 14 รูปที่ 4-5 Flowchart ส่วนของ Admin ... 15 รูปที่ 4-6 แผนภาพ E-R Diagram ... 20 รูปที่ 4-7 แผนภาพแสดงความสัมพันธ์ระหว่าง student กับ member ... 20 รูปที่ 4-8 แผนภาพแสดงความสัมพันธ์ระหว่าง student กับ passport ... 21 รูปที่ 4-9 แผนภาพแสดงความสัมพันธ์ระหว่าง student กับ acadequal ... 21 รูปที่ 4-10 แผนภาพแสดงความสัมพันธ์ระหว่าง student กับ acadeaward ... 21 รูปที่ 4-11 แผนภาพแสดงความสัมพันธ์ระหว่าง student กับ stat ... 21 รูปที่ 4-12 แผนภาพแสดงความสัมพันธ์ระหว่าง student กับ program ... 22 รูปที่ 4-13 แผนภาพแสดงความสัมพันธ์ระหว่าง student กับ upload ... 22 รูปที่ 4-14 แผนภาพแสดงความสัมพันธ์ระหว่าง upload กับ doctype ... 22 รูปที่ 5-1 ส่วนแสดงข่าวสาร ... 23 รูปที่ 5-2 ส่วนการ search ข้อมูล ... 23 รูปที่ 5-3 Menu ... 24 รูปที่ 5-4 child-page ... 24 รูปที่ 5-5 หน้า login ... 25 รูปที่ 5-6 หน้า admin ... 25 รูปที่ 8-1 ... 29 รูปที่ 8-2 ... 29ix รูปที่ 8-3 ... 30 รูปที่ 8-4 ... 30 รูปที่ 8-5 ... 31 รูปที่ 8-6 ... 31 รูปที่ 8-7 ... 32 รูปที่ 8-8 ... 32 รูปที่ 8-9 ... 33 รูปที่ 8-10 ... 33 รูปที่ 8-11 ... 34 รูปที่ 8-12 ... 34 รูปที่ 8-13 ... 34 รูปที่ 8-14 ... 35 รูปที่ 8-15 ... 35 รูปที่ 8-16 ... 35 รูปที่ 8-17 ... 36 รูปที่ 8-18 ... 36 รูปที่ 8-19 ... 37 รูปที่ 8-20 ... 37 รูปที่ 8-21 ... 38 รูปที่ 8-22 ... 38 รูปที่ 8-23 ... 39 รูปที่ 8-24 ... 40 รูปที่ 8-25 ... 40 รูปที่ 8-26 ... 41 รูปที่ 8-27 ... 41 รูปที่ 8-28 ... 42
x รูปที่ 8-29 ... 42 รูปที่ 8-30 ... 43
xi
สารบัญตาราง
ตารางที่ 4-1 member ... 17 ตารางที่ 4-2 student ... 17 ตารางที่ 4-3 program ... 18 ตารางที่ 4-4 choose ... 18 ตารางที่ 4-5 acadequal ... 18 ตารางที่ 4-6 acadeaward... 18 ตารางที่ 4-7 upload ... 19 ตารางที่ 4-8 doctype ... 19 ตารางที่ 4-9 passport ... 19 ตารางที่ 4-10 stat ... 191
1.
บทน า
โครงการเปิดสอนปริญญาตรีนานาชาติ (IUP) คณะวิศวกรรมศาสตร์ มหาวิทยาลัยเกษตรศาสตร์ นั้น ปัจจุบันมีเว็บไซต์ แต่ไม่ได้ใช้ประโยชน์สูงสุดเนื่องด้วยการจัดรูปแบบหน้าเว็บไซต์ยังไม่สวยงาม การจัดข้อมูลของ เว็บไซต์ยังไม่เป็นระบบและไม่มีความเป็นระเบียบท าให้ยากต่อการค้นหาข้อมูลเกี่ยวกับสาขาวิชา การค้นหา เอกสารที่เกี่ยวข้องกับการสมัครในเว็บไซต์ เช่น เอกสารการรับสมัครหรือเอกสารอื่นๆ ท าได้ยาก การจัดการเมนู ต่างๆ ในเว็บไซต์ยังไม่เป็นสากล ยังไม่มีข้อมูลเกี่ยวกับวิธีการยื่นค าร้องต่างๆ นอกจากนี้โครงการเปิดสอนปริญญาตรีนานาชาติ (IUP) ต้องการรับสมัครนิสิตที่สนใจด้วยระบบออนไลน์ เพื่อความสะดวกในการสมัครและการด าเนินงานดังนั้นจึงต้องการระบบล็อกอินและระบบฐานข้อมูลที่ดีเพื่อให้การ ใช้งานได้อย่างมีประสิทธิภาพ จากปัญหาที่กล่าวมาข้างต้นนั้นสามารถแก้ไขโดยการสร้างเว็บไซต์ส าหรับโครงการเปิดสอนปริญญาตรี นานาชาติ (IUP) ขึ้นมาใหม่โดยมีการจัดหน้าเว็บไซต์เป็นสากลและมีความสวยงาม มีระบบที่ใช้ในการรับสมัครนิสิต แบบออนไลน์จึงต้องใช้ระบบฐานข้อมูลที่มีประสิทธิภาพและมีก าหนดสิทธิ์ให้กับผู้ที่สามารถเข้าถึงข้อมูลได้โดยสิทธิ์ ของผู้ที่สามารถเข้าถึงฐานข้อมูลนั้นมีความแตกต่างกันเพื่อให้ทราบถึงความรับผิดชอบว่าใครบ้างที่มีสิทธิ์ในการ เปลี่ยนแปลงข้อมูลภายในฐานข้อมูลนั้น และใครบ้างที่สามารถจะมองเห็นข้อมูลและน าข้อมูลไปใช้เท่านั้น 1.1 วัตถุประสงค์ของโครงงาน เพื่อพัฒนาโปรแกรมประยุกต์ที่ใช้งานบนอินเตอร์เน็ต 1) เพื่อให้นักเรียนที่สนใจสมัครเข้าเรียนโครงการ IUP และนิสิตแต่ละคนสามารถเข้ามาอ่านข่าวสาร ของทางโครงการ IUP ผ่านเว็บไซต์ภาควิชาอย่างถูกต้อง 2) เพื่ออ านวยความสะดวกให้ผู้ที่มีความเกี่ยวข้องกับการรับสมัครนิสิตของสาขาวิชาทั้งการรับสมัคร ออนไลน์และออฟไลน์ 3) เพื่ออ านวยความสะดวกให้กับบุคลากรที่เกี่ยวข้องในการรับสมัคร 1.2 ขอบเขตของโครงงาน ออกแบบและพัฒนาระบบในส่วนของ 1) เว็บไซท์โครงการ IUP คณะวิศวกรรมศาสตร์ มหาวิทยาลัยเกษตรศาสตร์ 2) การกรอกแบบฟอร์มการสมัครโครงการ IUP แบบออนไลน์ 3) ระบบสมาชิกที่มีการแบ่งระดับการเข้าถึงข้อมูลโดยมีการล็อกอิน2 1.3 ประโยชน์ที่ได้รับ 1) ให้ความสะดวกนักเรียนที่ต้องการสมัครเข้าโครงการ IUP ซึ่งอาจอยู่ต่างจังหวัดหรือต่างประเทศ ไม่ต้องเดินทางมาที่มหาวิทยาลัยเกษตรศาสตร์ 2) นิสิตปัจจุบันของโครงการ IUP สามารถดูข่าวสารและข้อมูลได้สะดวก 3) ท าให้เจ้าหน้าที่และนิสิตมีความสะดวกในการเข้าถึงข้อมูลที่สนใจ 4) ท าให้มีแหล่งเผยแพร่ข่าวสารของโครงการ IUP ได้ถูกต้อง
3
2.
ทฤษฎีที่เกี่ยวข้อง
2.1 HTML
HTML (Hypertext Markup Language) HTML คือ ภาษาที่ใช้ในการเขียนเว็บเพจ ย่อมาจากค าว่า Hypertext Markup Language โดย Hypertext หมายถึง ข้อความที่เชื่อมต่อกันผ่านลิ้ง (Hyperlink) Markup หมายถึง วิธีในการเขียนข้อความ language หมายถึงภาษา ดังนั้น HTML ก็คือ ภาษาที่ใช้ในการเขียนข้อความ ลง บนเอกสารที่ต่างก็เชื่อมถึงกันใน cyberspace ผ่าน Hyperlink ท าให้สามารถน าข้อความหรือรูปภาพต่างๆ มา แสดงลงบนเว็บไซต์ได้ [1]
2.2 PHP
PHP (Professional Home Page) คือ ภาษาจ าพวก Script Language ค าสั่งต่างๆ จะเก็บอยู่ในไฟล์ที่ เรียกว่า สคริปต์ (Script) และเวลาใช้งานต้องอาศัยตัวแปรชุดค าสั่ง ซึ่งท างานโดยการสั่งงานจากเว็บเพจ แต่ไป ประมวลผลที่ Web Server ส าหรับแสดงเว็บเพจอย่างหนึ่ง ที่จัดอยู่ในกลุ่ม Server Side Script และจะท างานใน ฝั่ง Server แล้วส่งการแสดงผลมายัง Browser ของตัว Client นอกจากนี้มันยังเป็น Script ที่ Embed บน HTML อีกด้วย ส่วนเลขที่ต่อท้ายก็หมายถึงรุ่น (version) นั่นเอง และก าลังเป็นที่นิยมกันมากในหมู่นักสร้างเว็บทั่วโลก ตัวอย่างของภาษาสคริปต์ก็ เช่น Java Script, Perl, ASP (Active Server Page) เป็นต้น
PHP เป็นภาษาสคริปต์ที่มีความสามารถสูง ส าหรับการพัฒนา Web Site และความสามารถที่โดดเด่นอีก ประการหนึ่งของ PHP คือ database enabled web page ท าให้เอกสารของ HTML สามารถที่จะเชื่อมต่อกับ ระบบฐานข้อมูล (database) ได้อย่างมีประสิทธิภาพและรวดเร็ว จึงท าให้การจัดเก็บ ข้อมูลต่างๆ ที่ส าคัญผ่านทาง Internet เป็นไปได้อย่างง่ายดาย [2]
4
2.3 CSS
CSS (Cascading Style Sheets) มักเรียกโดยย่อว่า "สไตล์ชีต" คือภาษาที่ใช้เป็นส่วนของการจัดรูปแบบ การแสดงผลเอกสาร HTML โดยที่ CSS ก าหนดกฎเกณฑ์ในการระบุรูปแบบ (หรือ "Style") ของเนื้อหาในเอกสาร เช่น สีของข้อความ สีพื้นหลัง ประเภทตัวอักษร และการจัดวางข้อความ ซึ่งการก าหนดรูปแบบ หรือ Style นี้ใช้ หลักการของการแยกเนื้อหาเอกสาร HTML ออกจากค าสั่งที่ใช้ในการจัดรูปแบบการแสดงผล ก าหนดให้รูปแบบ ของการแสดงผลเอกสาร ไม่ขึ้นอยู่กับเนื้อหาของเอกสาร เพื่อให้ง่ายต่อการจัดรูปแบบการแสดงผลลัพธ์ของเอกสาร HTML โดยเฉพาะในกรณีที่มีการเปลี่ยนแปลงเนื้อหาเอกสารบ่อยครั้ง หรือต้องการควบคุมให้รูปแบบการแสดงผล เอกสาร HTML มีลักษณะของความสม่ าเสมอทั่วกันทุกหน้าเอกสารภายในเว็บไซต์เดียวกัน ความสามารถของ CSS CSS มีคุณสมบัติมากกว่า tag ของ html เช่น การก าหนดกรอบให้ข้อความ รวมทั้งสี รูปแบบ ของข้อความที่กล่าวมาแล้ว CSS นั้นก าหนดที่ต้นของไฟล์ html หรือต าแหน่งอื่น ๆ ก็ได้ และสามารถมีผล กับเอกสาร ทั้งหมด หมายถึงก าหนด ครั้งเดียวจุดเดียวก็มีผลกับการแสดงผลทั้งหมด ท าให้เวลาแก้ไขหรือ ปรับปรุงท าได้สะดวก ไม่ต้องไล่ตามแก้ tag ต่างๆ ทั่วทั้งเอกสาร CSS สามารถก าหนดแยกไว้ต่างหากจาก ไฟล์เอกสาร html และสามารถน ามาใช้ร่วม กับ เอกสารหลายไฟล์ได้ การแก้ไขก็แก้เพียง จุดเดียวก็มีผลกับเอกสารทั้งหมด CSS กับ HTML / XHTML นั้นท าหน้าที่คนละอย่างกัน โดย HTML / XHTML จะท าหน้าที่ ในการวางโครงร่างเอกสารอย่างเป็นรูปแบบ ถูกต้อง เข้าใจง่าย ไม่เกี่ยวข้องกับการ แสดงผล ส่วน CSS จะท าหน้าที่ในการตกแต่งเอกสารให้สวยงาม เรียกได้ว่า HTML /XHTML คือส่วน coding ส่วน CSS คือส่วน design [3] 2.4 SQL
sql เป็นภาษาที่ใช้ในส าหรับการเรียกใช้ฐานข้อมูล ซึ่งย่อมาจาก "structured query language" โดยที่ sql เป็นภาษาที่มีมาตรฐานและเป็นระบบเปิด (open system) หมายถึงเราสามารถใช้ค าสั่ง sql กับฐานข้อมูล ชนิดใดก็ได้ และ ค าสั่งงานเดียวกันเมื่อสั่งงานผ่าน ระบบฐานข้อมูลที่แตกต่างกันจะได้ ผลลัพธ์เหมือนกัน ท าให้ เราสามารถเลือกใช้ฐานข้อมูล ชนิดใดก็ได้โดยไม่ติดยึดกับฐานข้อมูลใดฐานข้อมูลหนึ่ง ประโยชน์ของ sql นอกเหนือจากที่กล่าวข้างต้นแล้ว คือการท างานของโปรแกรมฐานข้อมูลบน server เมื่อเราใช้ sql โปรแกรมจะ ท างานได้เร็วกว่าการใช้ table ความสามารถของภาษา sql ยังมีมากกว่าการจัดการ table เราสามารถใช้ sql
5 ท างานอื่น ๆ เช่นการใช้ stored procedure เพื่อให้การท างานกับฐานข้อมูลเกิดขึ้นภายใน server เท่านั้น ไม่ต้อง ส่งข้อมูลกลับไปมากับเครื่อง client ซึ่งจะมีผลให้การท างานเร็วขึ้น
ภาษา sql จะมีค าสั่งหลัก ๆ อยู่ 2 ประเภท คือ
DDL - data definition language ใช้ในการจัดการโครงสร้างของ table, view แลindex เช่น ค าสั่ง create, alter เป็นต้น
DML - data manipulation language ใช้ในการปรับปรุงข้อมูลภายใน table เช่น ค าสั่ง select, insert, update, delete [4]
2.5 Wordpress
WordPress เป็น open source web software ที่เราสามารถติดตั้งบนเว็บ server ของเราเพื่อสร้าง เว็บไซต์, blog หรือ community ตอนเริ่มแรก WordPress เป็นเครื่องมือไว้ส าหรับสร้าง blog แต่ได้รับการ พัฒนามาเรื่อย ๆ จนสามารถสร้างเป็นเว็บไซต์ หรือ เว็บ community ได้แล้ว โดยมีระบบจัดการบทความ หรือ Content Management System (CMS) ท าให้ง่ายต่อการใช้งาน ซึ่ง WordPress สร้างขึ้นโดย Matt
Mullenweg และ Mike Little ในปี 2003 นับว่ามีการพัฒนามาถึง 9 ปีแล้ว WordPress ได้รับความนิยมเป็น อย่างมากจากบล็อกเกอร์ทั่วโลก เนื่องจากเป็นระบบที่มีความยืดหยุ่นในการใช้งาน อีกทั้งยังมีผู้ที่สร้างปลั๊กอิน (โปรแกรมเสริม) , ธีม (รูปแบบการแสดงผล) , รวมทั้งระบบอื่นๆ ที่สามารถใช้งานร่วมกับ WordPress ได้เป็น จ านวนมาก จึงท าให้ เวิร์ดเพรสส์ได้รับความนิยมอย่างยิ่ง [5]
6
2.6 ระบบการจัดการฐานข้อมูล (DBMS: Database Management System)
ระบบฐานข้อมูล (Database) หมายถึง กลุ่มของข้อมูลที่มีความสัมพันธ์กันและถูกน ามาจัดเก็บในที่ เดียวกัน โดยข้อมูลอาจเก็บไว้ในแฟ้มข้อมูลเดียวกันหรือแยกเก็บหลาย ๆ แฟ้มข้อมูล แต่ต้องมีการสร้าง
ความสัมพันธ์ระหว่างข้อมูลเพื่อประสิทธิภาพในการจัดการข้อมูลในการจัดเก็บข้อมูลในระบบฐานข้อมูลมีข้อดีกว่า การจัดเก็บข้อมูลในระบบแฟ้มข้อมูลพอสรุปประเด็นหลัก ๆ ได้ดังนี้
มีการใช้ข้อมูลร่วมกัน (data sharing)
ลดความซ้ าซ้อนของข้อมูล (reduce data redundancy) ข้อมูลมีความถูกต้องมากขึ้น (improved data integrity) เพิ่มความปลอดภัยให้กับข้อมูล (increased security) มีความเป็นอิสระของข้อมูล (data independency) องค์ประกอบของ DBMS
DBMS หรือ Database Management System คือ โปรแกรมที่ท าหน้าเป็นตัวกลางระหว่างผู้ใช้ (user) กับ ฐานข้อมูลเพื่อจัดการและควบคุมความถูกต้อง ความซ้ าซ้อน และความสัมพันธ์ระหว่างข้อมูลต่างๆ ภายใน ฐานข้อมูล ซึ่งต่าง ไปจากระบบแฟ้มข้อมูลคือ หน้าที่เหล่านี้จะเป็นของโปรแกรมเมอร์ ในการต่อฐานข้อมูลไม่ว่าจะ ด้วยการใช้ค าสั่งในกลุ่ม DML หรือ DDLหรือจะด้วยโปรแกรมต่าง ๆ ทุกค าสั่งที่ ใช้กระท ากับฐานข้อมูลจะถูก โปรแกรม DBMS น าไปแปล (Compile) เป็นการกระท า (Operation) ต่างๆภายใต้ค าสั่งนั้นๆ เพื่อน าไปกระท า กับตัวข้อมูลในฐานข้อมูลต่อไปส่วนการท างานต่าง ๆ ภายในโปรแกรม DBMS ที่ท าหน้าที่ในการแปลค าสั่งไปเป็น การ กระท าต่าง ๆ ดังนี้
1) Database Manager เป็นส่วนที่ท าหน้าที่ก าหนดการกระท าต่าง ๆ ให้กับส่วน File Manager เพื่อไป กระท ากับข้อมูลที่เก็บอยู่ในฐานข้อมูล File Manager เป็นส่วนที่ท าหน้าที่บริหาร และจัดการกับข้อมูลที่เก็บอยู่ใน ฐานข้อมูลในระดับกายภาพ
2) Query Process เป็นส่วนที่ท าหน้าที่แปลงประโยคค าสั่งของ Query Language ให้อยู่ในรูปแบบของค าสั่ง ที่ Database Manager เข้าใจ
3) Data Manipulation Language Precompiler เป็นส่วนที่ท าหน้าที่แปลประโยคค าสั่งของกลุ่มค าสั่ง DML ให้อยู่ในรูปแบบที่ส่วน Application Programs Object Code จะน าไปเข้ารหัสเพื่อส่งต่อไปยังส่วน Database Manager ในการแปลประโยคค าสั่งของกลุ่มค าสั่ง DML ของ Data Manipulation Language Precompiler นี้ จะต้องท างานร่วมกับส่วน Query Processor
7 4) Data Definition Language Precompiler เป็นส่วนที่ท าหน้าที่แปลประโยคค าสั่งของกลุ่มค าสั่ง DDL ให้ อยู่ในรูปแบบของ Meta Data (รายละเอียดที่บอกถึงโครงสร้างต่าง ๆ ของข้อมูล) ที่เก็บอยู่ในส่วน Data
Dictionary ของฐานข้อมูล
5) Application Programs Object Code เป็นส่วนที่ท าหน้าที่แปลงค าสั่งต่าง ๆ ของโปรแกรมรวมทั้งค าสั่ง ในกลุ่มค าสั่ง DML ที่ส่งต่อมาจากส่วน Data Manipulation Language Precompiler ให้อยู่ในรูปของ Object Code ที่จะส่งต่อไปให้ Database manager เพื่อกระท ากับข้อมูลในฐานข้อมูล
โปรแกรม DBMS ถูกพัฒนาขึ้นเพื่อแก้ไขปัญหาด้าน Data Independence ที่ไม่มีในระบบแฟ้มข้อมูล ท า ให้มีความเป็นอิสระจากทั้งส่วนของฮาร์ดแวร์ และข้อมูลภายในฐานข้อมูลกล่าวคือโปรแกรม DBMS นี้จะมีการ ท างานที่ไม่ขึ้นอยู่กับรูปแบบ (Platform) ของตัวฮาร์ดแวร์ ที่น ามาใช้กับระบบฐานข้อมูลรวมทั้งมีรูปแบบในการ อ้างถึงข้อมูลที่ไม่ขึ้นอยู่กับโครงสร้างทางกายภาพของข้อมูลด้วยการใช้ Query Language ในการติดต่อกับข้อมูล ในฐานข้อมูลแทนค าสั่งภาษาคอมพิวเตอร์ในยุคที่ 3 ส่งผลให้ผู้ใช้สามารถเรียกใช้ข้อมูลจากฐานข้อมูลได้โดยไม่ จ าเป็นต้องทราบถึงประเภทหรือขนาดของข้อมูลนั้นหรือสามารถก าหนดล าดับที่ของฟิลด์ ในการก าหนดการ แสดงผลได้โดยไม่ต้องค านึงถึงล าดับที่จริงของฟิลด์ นั้น
8
3.
เครื่องมือที่ใช้ในการท าโครงงาน
3.1 Software
1) window7 ระบบปฏิบัติการของบริษัท Microsoft ใช้ส าหรับ personal computer 2) wordpress 3.4.2 โปรแกรมมีระบบในการช่วยจัดการเนื้อหาบนเว็บหรือ CMS
(Content Management System)
3) MySQL คือระบบจัดการฐานข้อมูลโดยใช้ภาษา SQL เป็นซอฟต์แวร์โอเพนซอร์ส
4) phpMyAdmin โปรแกรมที่ถูกพัฒนาโดยใช้ภาษา PHP เพื่อใช้ในการบริหารจัดการฐานข้อมูล Mysql แทนการ คีย์ค าสั่ง
5) Notepad++ ใช้ในการเขียนโค้ดภาษาต่างๆ เช่น PHP, HTML
6) Appserv คือโปรแกรมที่รวบรวมเอา Open Source Software หลายๆ อย่างมารวมกัน โดยมี Package หลัก 4 อย่าง Apache PHP MySQL phpMyAdmin
9
4.
วิธีการด าเนินโครงงาน
4.1 องค์ประกอบโดยรวมของระบบ
1) Web Application เป็นหน้าเว็บของโครงการ IUP คอยแสดงข้อมูลข่าวสารต่างๆ ให้นิสิต นักเรียน หรือบุคคลทั่วไปสามารถเข้ามาดูได้
2) Database Server ส่วนฐานข้อมูลท าหน้าที่เก็บข้อมูลต่างๆ เช่น ข้อมูลประจ าตัวผู้สมัครเรียน ข้อมูลอาจารย์ ข้อมูลสมาชิกของเว็บไซต์
รูปที่ 4-1 รูปแบบการเชื่อมต่อของระบบ
Client ติดต่อ Server ด้วย HTTP เพื่อน าข้อมูลในส่วน Web site มาแสดงผลและ Server ติดต่อ Database เพื่อน าข้อมูลในฐานข้อมูลมาแสดงผล
10 4.2 กระบวรการท างานของระบบ โดยส่วนหลักของระบบแบ่งการท างานออกเป็น 2 ส่วนด้วยกันคือ 4.2.1 Web Site รูปที่ 4-2 หน้าเว็บไซต์ เว็บไซต์นี้มี Site map ดังนี้ News Study Undergraduate EMME ME SKE Postgraduate
Teaching & Learning Teaching Approach Learning Facilities
11 Flexible Study Cooperative Study Educational Trip Exchange Program Funding Admission How to apply Tuition Fee Scholarship Q & A Contact US Managerial Board Staff Map Make an inquiry Current Student Life at IUP
Wellbeing & Support Clubs & Societies Our City & Countryside Accommodation Culture on Campus Sport at IUP
Living in Thailand
Visit Days & Campus Tours Undergraduate Visit Days Postgraduate Visit Days Undergraduate Campus Tours Visit Days & Campus Tours Calendar Departmental Open Days
12 Achievement 4.2.2 ระบบสมัครออนไลน์ ระบบสมัครออนไลน์เป็นส่วนที่อ านวยความสะดวกให้ผู้สมัครสามารถสมัครเรียนผ่านระบบนี้โดย การกรอกข้อมูลและการส่งเอกสารการสมัครต่างๆ เช่น Transcript ใบรับรองต่างๆ เป็นต้น ทั้งนี้ระบบ การสมัครออนไลน์นั้นมีขั้นตอนการสมัครดังรูป รูปที่ 4-3 Flowchart การรับสมัครเรียน
13 อธิบายขั้นตอนการรับสมัคร ประกาศรับสมัคร ส่งใบสมัครและเอกสารต่างๆ ตรวจสอบใบสมัคร ตรวจสอบจ านวนคนรับสมัคร สอบสัมภาษณ์ ลงทะเบียนยืนยันสิทธิ์ มอบตัว ปิดรับสมัคร
14 รูปที่ 4-4 Flowchart การสมัครออนไลน์ในส่วน User
15
อธิบายขั้นตอนการสมัครส่วน User
Login เข้าสู่ระบบโดยการกรอก Username และ Password ระบบท าการตรวจสอบการ login สมัครเรียนและกรอกข้อมูลการสมัคร ท าการดู เพิ่ม ลบ แก้ไขข้อมูล บันทึกข้อมูล จบการท างานออกจากระบบ รูปที่ 4-5 Flowchart ส่วนของ Admin
16
อธิบายขั้นตอนในส่วนของ Admin
Login เข้าสู่ระบบโดยการกรอก Username และ Password ระบบท าการตรวจสอบการ login ดูข้อมูลการสมัครของผู้สมัคร ท าการดู เพิ่ม ลบ แก้ไขสถานะการสมัคร บันทึกข้อมูล จบการท างานออกจากระบบ 4.3 ขั้นตอนการพัฒนา 4.3.1 การออกแบบฐานข้อมูล รูปแบบฐานข้อมูลที่ใช้ในการจัดเก็บข้อมูลเกี่ยวกับ นักเรียน ประเภทโครงการ และเอกสารต่างๆ ที่ใช้ใน การสมัครเรียน ซึ่งประกอบด้วยตารางทั้งหมด 10 ตาราง 1. member 2. student 3. program 4. choose 5. acadeaward 6. acadequal 7. upload 8. doctype 9. passport 10. stat
17
4.3.2 พจนานุกรมฐานข้อมูล
Field_name Data type UserID (PK) int(5) not null
Username varchar(20) Password varchar(20)
Name varchar(100)
Status enum(‘ADMIN’, ‘USER’) ตารางที่ 4-1 member
เก็บข้อมูล user account ของทั้ง admin และ user
Field_name Data type stdid(PK) int(5) not null
fname varchar(50) lname varchar(50) birthdate varchar(10) birthcountry varchar(20) sex varchar(5) nation varchar(20) telephone varchar(15) mobile varchar(15) email varchar(30) address varchar(15) road varchar(20) suburb varchar(20) district varvchar(20) province varchar(20) country varchar(15) postcode varchar(15) statid int(2) ตารางที่ 4-2 student เก็บข้อมูลต่างๆ ของนักเรียน
18 Field_name Data type
proid(PK) int(2) not null proname varchar(10)
ตารางที่ 4-3 program เก็บข้อมูลชนิดหลักสูตร
Field_name Data type cid(PK) bigint(20) not null
proid int(2)
stdid bigint(20)
ตารางที่ 4-4 choose
เป็นตารางที่เชื่อมความสัมพันธ์แบบ many to many ของ student กับ program Field_name Data type
qualid(PK) int(5) not null
school varchar(20) country varchar(20) year varchar(5) gpa float ตารางที่ 4-5 acadequal เก็บข้อมูลเกี่ยวกับโรงเรียน ปีที่จบการศึกษา
Field_name Data type awardid(PK) int(5) not null
awardname text
ตารางที่ 4-6 acadeaward เก็บข้อมูลเกี่ยวกับรางวัลที่ได้รีบระหว่างศึกษา
19 Field_name Data type
docid (PK) int(11) not null
stdid int(5)
typeid int(3)
path varchar(50)
ตารางที่ 4-7 upload เก็บต าแหน่งของเอกสารการสมัครเรียน
Field_name Data type typeid(PK) int(3) not null
typename varchar(20) ตารางที่ 4-8 doctype เก็บชนิดของเอกสารที่ใช้ในการสมัคร
Field_name Data type stdid(PK) int(5) not null
pname varchar(40) pnumber int(20) pcountry varchar(20) pissue date pexpire date ตารางที่ 4-9 passport เก็บข้อมูล passport (ถ้ามี)
Field_name Data type statid(PK) int(2) not null
statname varchar(25) ตารางที่ 4-10 stat
20 4.3.3 E-R Diagram รูปที่ 4-6 แผนภาพ E-R Diagram 4.3.4 การเชื่อมความสัมพันธ์ (Relationship) 1 1 รูปที่ 4-7 แผนภาพแสดงความสัมพันธ์ระหว่าง student กับ member นักเรียน 1 คนมี account ได้ 1 member Member 1 member เป็นของนักเรียน 1 คน student is member
21 1 1 รูปที่ 4-8 แผนภาพแสดงความสัมพันธ์ระหว่าง student กับ passport นักเรียน 1 คนมีได้ 1 passport Passport 1 อัน เป็นของนักเรียน 1 คน 1 1 รูปที่ 4-9 แผนภาพแสดงความสัมพันธ์ระหว่าง student กับ acadequal นักเรียน 1 คนมี 1 academic qualification Academic qualification 1 อันเป็นของนักเรียน 1 คน 1 1 รูปที่ 4-10 แผนภาพแสดงความสัมพันธ์ระหว่าง student กับ acadeaward นักเรียน 1 คนมีได้ 1 academic award Academic award 1 อัน เป็นของนักเรียน 1 คน 1 1 รูปที่ 4-11 แผนภาพแสดงความสัมพันธ์ระหว่าง student กับ stat นักเรียน 1 คนมีได้ 1 สถานะการสมัคร สถานะสมัคร 1 สถานะ เป็นของนักเรียน 1 คน student passport student acadequal student acadeaward have have
student have stat
22 M M รูปที่ 4-12 แผนภาพแสดงความสัมพันธ์ระหว่าง student กับ program นักเรียน 1 คนสมัครเรียนได้หลาย program Program 1 หลักสูตร ถูกสมัครโดยนักเรียนหลายคน 1 1 รูปที่ 4-13 แผนภาพแสดงความสัมพันธ์ระหว่าง student กับ upload นักเรียน 1 คนมีได้ 1 upload document upload document 1 อัน เป็นของนักเรียน 1 คน 1 M รูปที่ 4-14 แผนภาพแสดงความสัมพันธ์ระหว่าง upload กับ doctype Upload document 1 เอกสาร มีหลายชนิด ชนิดของเอกสารหลายชนิดอยู่ในเอกสารต่อ 1 upload student program student upload
upload type doctype
manage choose
23
5.
ผลการด าเนินโครงงานและวิจารณ์
5.1 ส่วนแสดงข่าวสารของเว็บไซต์ เนื่องจากโครงการ IUP ต้องมีข่าวสารต่างๆ และหน้าเว็บสามารถแสดงข่าวสารทั้งหัวข้อ รูปภาพ และ ข้อความได้ รูปที่ 5-1 ส่วนแสดงข่าวสาร 5.2 ส่วนของการ Searchในเว็บไซต์ประกอบไปด้วยหลาย Page ดังนั้นการมี search box จึงเป็นประโยชน์อย่างมาก ทดสอบโดย การใส่ค าว่า Admission
รูปที่ 5-2 ส่วนการ search ข้อมูล
ผลการทดสอบการใส่ค าว่า Admission ลงใน search box เป็นไปตามต้องการได้ข้อมูลที่มีความเกี่ยวข้องกับ Admission
24
5.3 Menu
รูปที่ 5-3 Menu
เว็บไซต์นี้เป็นเว็บที่มีเมนูอยู่ด้านซ้ายเท่านั้นเป็น menu แนวตั้งและสามารถแสดง child-page ในเมนูได้โดย ทดสอบจากการคลิกที่ study จะเห็นว่ามี child-page และขึ้นต่อไปจะเป็นการคลิกที่ Undergraduate เพื่อ ทดสอบว่าสามารถแสดง child-page ได้หรือไม่
รูปที่ 5-4 child-page ผลประกฎว่าสามารถแสดง child-page ได้อย่างถูกต้อง
25 5.4 ส่วนของระบบสมัครเรียน 5.4.1 การ login ดูข้อมูลในส่วนของ admin รูปที่ 5-5 หน้า login รูปที่ 5-6 หน้า admin การท างานของระบบสมัครเรียนในส่วนของ admin ท างานได้อย่างถูกต้อง
26
5.4.2 การสมัครส่วนของ user
ในส่วนของการสมัครเรียน กรอกข้อมูลและอัพโหลดเอกสารและน่าพอใจสามารถสมัครและใช้ งานได้ถูกต้อง
27
6.
สรุปผลการด าเนินงานและข้อเสนอแนะ
6.1 ข้อสรุป โครงงานนี้จัดท าขึ้นเพื่อน าไปใช้ประโยชน์ให้กับโครงการ IUP คณะวิศวกรรมศาสตร์ มหาวิทยาลัยเกษตรศาสตร์ ในการอัพเดทข่าวสารของโครงการและการรับสมัครนิสิตในระบบออนไลน์เนื่องจาก เว็บไซต์ของโครงการ IUP เว็บไซต์เก่านั้นยังไม่มีระบบที่ทันสมัยและยังไม่สวยงามเท่าที่ควร ผู้จัดท าโครงงานจึงได้สร้างเว็บไซต์ขึ้นมาใหม่เพราะสามารถท าได้ง่ายกว่าการแก้ไขเว็บไซต์เก่าอีกทั้งยัง ต้องเพิ่มระบบการสมัครเรียนออนไลน์ จากการทดลองระบบต่างๆ เว็บไซต์ท างานได้อย่างถูกต้องและรวดเร็วสามารถน าไปใช้ได้จริงเพื่ออ านวย ความสะดวกให้กับโครงการ IUP ทั้งบุคคลภายนอกที่ต้องการมาติดต่อและบุคลาการภายใน ในการใช้เว็บไซต์นี้ 6.2 ปัญหาและอุปสรรค เนื่องจากการเขียนเว็บไซต์นั้นต้องสามารถให้อุปกรณ์หรือโปรแกรมแสดงผลต่างๆนั้น สามารถแสดงผล ออกมาได้อย่างถูกต้อง ต้องท าให้เปิดได้ทั้งใน Tablet และ SmartPhone หรือโปรแกรม Web Browser ต่างๆ ให้แสดงผลตรงกันจึงต้องมีความรอบคอบในการท าเว็บไซต์ 6.3 แนวการการพัฒนาต่อ การพัฒนาต่อสามารถพัฒนาในส่วนของ User Interface ให้มีความสวยงาม ทันสมัย และ ถูกต้อง สามารถเพิ่มระบบกระจายข้อมูลข่าวสารผ่าน โปรแกรม Line ซึ่งเป็นโปรแกรม Chat ที่นิยมที่สุด ณ เวลาที่ท าโครงงานนี้28
7.
บรรณานุกรม
1) http://www.codingbasic.com/html.html [1] 2) http://www.gotoknow.org/posts/428663? [2] 3) http://www.mindphp.com/คู่มือ/73-คืออะไร/2193-css-คืออะไร.html [3] 4) http://www.softwaresiam.com/index.php/access/11-sql [4] 5) http://www.wordpress.in.th/wordpress-article/wordpress-คืออะไร [5] 6) http://bombik.com/node/81/%E0%B8%A7%E0%B8%B4%E0%B8%98%E0%B8%B5%E 0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%A5%E0%B8%87%E0%B9%82%E0%B8 %9B%E0%B8%A3%E0%B9%81%E0%B8%81%E0%B8%A3%E0%B8%A1-appserv-%E0%B9%81%E0%B8%A5%E0%B8%B0-wordpress [6]29
8.
ภาคผนวก
ภาคผนวก ก คู่มือการติดตั้ง
การติดตั้งเครื่องมือ
โดยปรกติแล้วเว็บไซต์จะท างานได้นั้นต้องถูกสร้างขึ้นมาและอัพโหลดขึ้นไปที่ server และจด domain name ในโครงงานนี้ใช้ server ของมหาวิทยาลัยเกษตรศาสตร์เนื่องจากเป็นเว็บไซต์ของภาควิชาดั้งนั้นการสร้างเว็บไซต์ ให้ใช้งานได้ต้องมีโปรแกรมช่วยในการสร้างเว็บไซต์และโปรแกรมส าหรับน าเว็บไซต์และข้อมูลต่างๆ ไปที่ server 8.1 การติดตั้งและใช้งาน Appserv เบื้องต้น 1) ดับเบิ้ลคลิกที่ไฟล์เพื่อ Install โปรแกรม รูปที่ 8-1 2) คลิก Next รูปที่ 8-2
30 3) คลิก I Agree
รูปที่ 8-3 4) เลือกโฟลเดอร์ที่จะเก็บโปรแกรมดังนั้นคลิก Next
31 5) เลือก package ทั้งหมดจากนั้น คลิก Next
รูปที่ 8-5
6) พิมพ์ Server Name ตอนนี้เราท าในเครื่องใส่ localhost พิมพ์ Email ของ Admin Port 80 เป็นค่า Default อยู่แล้ว จากนั้นคลิก Next
32 7) พิมพ์ Password ของ root (ตั้งเอง) และใส่ซ้ าอีกรอบด้านล่าง
Character Sets and Collations เป็น UTF-8-Unicode จากนั้นคลิก Install
รูปที่ 8-7 8) รอจนกว่าจะลงโปรแกรมเสร็จ
33 9) จากนั้นเมื่อลงโปรแกรมเสร็จ จะ Start Apache กับ Start MySQL เมื่อคลิก Finish
รูปที่ 8-9
10) ในการใช้งานครั้งต่อๆ ไปการ Start Apache กับ Start MySQL ท าได้โดยการไปที่
Start > All Programes > AppServ > Control Server by Service
34
11) จากนั้นเปิดหน้าต่าง Browser พิมพ์ Localhost แล้ว Enter จะเข้ามาหน้าดังภาพ คลิกที่ลิ้งค์ phpMyAdmin Database Manager Version... เพื่อเข้าไปสร้าง Database
รูปที่ 8-11
12) เมื่อคลิกตามลิ้งค์ด้านบน จะให้ใส่ User Name(ใส่ root) และ Password(ที่เราตั้งไว้) แล้วคลิก OK
รูปที่ 8-12
13) เมื่อเข้ามาแล้วให้ ไปที่ Create new database
35
14) ใส่ชื่อ Database ที่ต้องการ (แล้วแต่เราจะตั้ง) เลือก utf8_unicode_ci แล้วคลิก Create
รูปที่ 8-14
รูปที่ 8-15
15) จากนั้นไปเปิดโฟลเดอร์ AppServ ในไดร์ฟ C:
36
16) เข้าโฟลเดอร์ www
รูปที่ 8-17
17) ในโฟลเดอร์จะมีไฟล์ index.php อยู่ ให้ rename เพื่อป้องกันการเขียนทับ เวลาเรา Copy ไฟล์มา จากโฟลเดอร์ Wordpress
37
8.2 การติดตั้ง Wordpress
1) wordpress เวอร์ชั่นล่าสุด คือ wordpress 2.7.1 ไฟล์ที่ Download มาจะเป็นไฟล์ .zip
Extract ไฟล์ zip จะได้โฟลเดอร์ wordpress
รูปที่ 8-19
2) เปิดโฟลเดอร์ wordpress และ Copy ทุกไฟล์ในโฟลเดอร์ไปใส่ในโฟลเดอร์ C:\AppServ\www
38
3) ย้ายไฟล์ทุกไฟล์มาที่โฟลเดอร์ www
รูปที่ 8-21
4) ในโฟลเดอร์จะมีไฟล์ readme.html ให้อ่าน หากต้องการความช่วยเหลือ ในภาพเป็นวิธีการ Install
39
5) ในโฟลเดอร์ www จะมีไฟล์ wp-config-sample.php เปิดไฟล์ขึ้นมาแก้ไข (อาจจะเปิดด้วย Notepad)
40
6) แก้ไข 4 จุดคือ ใส่ชื่อ Database ที่เข้าไปสร้างไว้ ใส่ username เป็น root ใส่ password ที่ตั้งไว้ ใส่ hostname เป็น localhost(ตามที่ได้ตั้งไว้ตั้งแต่ต้น)
รูปที่ 8-24
7) กรอกข้อมูลต่างๆ ให้ครบ
41
8) จากนั้น Save as ไฟล์เปลี่ยนชื่อเป็น wp-config.php
รูปที่ 8-26
9) จากนั้นเปิดหน้าต่าง Browser พิมพ์ Localhost แล้ว Enter จะเข้ามาหน้าดังภาพ
42
10) พิมพ์ชื่อ Blog ตามแต่จะตั้ง(แก้ไขได้ในภายหลัง) พิมพ์ Email Address (อะไรก็ได้ตามรูปแบบอีเมล์) แค่ทดลองไม่ต้องใช่เมล์จริงก็ได้ จากนั้นคลิก Install Wordpress
รูปที่ 8-28
11) เมื่อลงเสร็จ (มันจะเร็วมาก) จะขึ้นหน้า username password มา ให้ copy password ไว้ แล้ว คลิก Log In
43
12) เมื่อเข้ามาหน้านี้ กรอก username และ password ที่ copy มาแล้วคลิก Log in
รูปที่ 8-30 ที่มา [6]
44