การ mega whey โดยใช้ laravel framework the...
TRANSCRIPT
การพฒนาเวบไซต MEGA WHEY โดยใช LARAVEL FRAMEWORK
THE DEVELOPMENT OF MEGA WHEY WEBSITE
USING LARAVEL FRAMEWORK
น.ส.ดจดาว รงพรยะเดช
โครงงานสหกจศกษานเปนสวนหนงของการศกษาตามหลกสตร
ปรญญาวทยาศาสตรบณฑต สาขาวชาเทคโนโลยสารสนเทศ
คณะเทคโนโลยสารสนเทศ
สถาบนเทคโนโลยไทย – ญปน พ.ศ. 2559
การพฒนาเวบไซต MEGA WHEY โดยใช LARAVEL FRAMEWORK
THE DEVELOPMENT OF MEGA WHEY WEBSITE USING LARAVEL FRAMEWORK
.
น.ส.ดจดาว รงพรยะเดช
โครงงานสหกจศกษานเปนสวนหนงของการศกษาตามหลกสตร
ปรญญาวทยาศาสตรบณฑต สาขาวชาเทคโนโลยสารสนเทศ
คณะเทคโนโลยสารสนเทศ
สถาบนเทคโนโลยไทย – ญป น พ.ศ. 2559
คณะกรรมการสอบ
............................................................. ประธานกรรมการสอบ
(อาจารยนตรตน ตนฑเวช)
............................................................. กรรมการ
(อาจารยโอฬาร รนชน)
............................................................ กรรมการสอบและอาจารยทปรกษา
(ดร.ภาสกร อภรกษวรพนต)
............................................................. ประธานทปรกษาสหกจสาขาวชา IT
(อาจารย อมรพนธ ชมกลน)
ลขสทธของสถาบนเทคโนโลยไทย-ญปน
ข
ชอโครงงาน การพฒนาเวบไซต MEGA WHEY โดยใช LARAVEL FRAMEWORK
THE DEVELOPMENT OF MEGA WHEY WEBSITE USING LARAVEL FRAMEWORK
ผเขยน นางสาวดจดาว รงพรยะเดช
คณะวชา เทคโนโลยสารสนเทศ สาขาวชา เทคโนโลยสารสนเทศ
อาจารยทปรกษา ดร .ภาสกร อภรกษวรพนต
พนกงานทปรกษา นายปรชา พทธสารวงศ
ชอบรษท บรษท อาเลฟ (ไทยแลนด) จ ากด
ประเภทธรกจ / สนคา ใหค าปรกษาดานเทคโนโลย ใหบรการออกแบบและพฒนาระบบ
บทสรป
จากการเขามาปฏบตงานในบรษท อาเลฟ (ไทยแลนด) จ ากด ไดมโอกาสในการศกษางานดานการออกแบบและพฒนาเวบไซตในบรษท ไดเรยนรการท างานและการเขยนเวบไซตของลกคาจรง โดยโครงงานนคอ สวนหนงของโปรเจคพฒนาเวบไซตของสถานประกอบการและเปนงานทไดรบมอบหมายมาจากสถานประกอบการโดยท าตามความตองการของลกคาเปนหลก โดยทางสถานประกอบการตองการใหท าเวบไซต Megawhey โดยใช Laravel Framework ในการพฒนา ผลทไดรบจากการด าเนนงานและประโยชนทไดรบจากการออกแบบและพฒนาเวบไซตใหกบทางบรษทเวบไซตสามารถน าไปใชไดจรงและตรงกบความตองการของลกคา
ค
Project’s name THE DEVELOPMENT OF MEGA WHEY WEBSITE
USING LARAVEL FRAMEWORK
Writer Ms. Dujdao Rungpiriyadech
Faculty Faculty of Information Technology,Information Technology Program
Faculty Advisor Dr.Paskorn Apirukvorapinit
Job Supervisor Mr. Preecha Poottasarawong
Company’s name Aleph (Thailand) Ltd.
Business Type/Product Technological consultant company
Summary
During the cooperative study period at Aleph (Thailand) company, the student had several opportunities to learn more on the design and development of the websites for customers. As a part of cooperative study, the student’s assignment was to develop a corporate website based on the customer’s requirements. The corporate required that the web site, Mega Whey, was to be developed by using Laravel framework. The result of this web development is an actual web site that completely fulfilled the customer’s needs.
ง
กตตกรรมประกาศ
การทไดมโอกาสมาสหกจศกษาทบรษท อาเลฟ (ไทยแลนด) จ ากด นบเปนโอกาสทดทไดมาศกษาหาความร หาประสบการณจากการท างานเพอเตรยมตวกอนทจะเขาท างานจรงในอนาคต การมาสหกจศกษาในครงนสามารถส าเรจลลวงไปดวยด เนองจากความกรณาจากบคคลหลายทานทคอยดแล ใหความรและใหค าปรกษา รวมไปถงบรษท อาเลฟ (ไทยแลนด) จ ากด ทมอบโอกาสใหเขามาศกษาการท างานภายในองคกรและเรยนรชวตในการท างานจรง
ขอขอบพระคณ คณ ปรชา พทธสารวงศ, คณ อาธตตยา ยวงโย, คณ นภาพร จรานกล, คณ ณชา ทองทอศกด, คณ ณชาดา ชาญเสรวทยา, คณ วฑรย แมรา, คณ จกรพนธ ลอแต, คณ ณฐพล ทองทอศกด และ พประดษฐ ทมสวนรวมในการใหความรและประสบการณอนเปนประโยชนตอการมาสหกจศกษาในครงน รวมไปถงบดา มารดา พนอง ของขาพเจา และอาจารยดร .ภาสกร อภรกษวรพนต ซงเปนอาจารยทปรกษาทคอยใหการสนบสนน ใหค าแนะน าและใหความชวยเหลอมาตลอดตงแตตนจนจบสหกจ
ดจดาว รงพรยะเดช
ผจดท า
จ
สารบญ
หนา
บทสรป ข Summary ค กตตกรรมประกาศ ง สารบญ จ สารบญตาราง ฌ สารบญภาพประกอบ ญ บทท 1. บทน า 1
1.1 ชอและทตงของสถานประกอบการ 1
1.2 ลกษณะธรกจของสถานประกอบการ และการใหบรการหลกขององคกร 2 1.2.1 ประวตของบรษท อาเลฟ (ประเทศไทย) จ ากด 2 1.2.2 ประเภทธรกจและการใหบรการลกคาของบรษท อาเลฟ (ประเทศไทย) จ ากด 2 1.3 รปแบบการจดองคกรและการบรหารองคกร 3 1.4 ต าแหนงและหนาทงานทนกศกษาไดรบมอบหมาย 4 1.5 ขอมลพนกงานทปรกษา 4
1.6 ระยะเวลาทปฏบตงาน 4 1.7 ทมาและความส าคญของปญหา 4 1.8 วตถประสงคของการปฏบตงานหรอโครงงานทไดรบมอบหมาย 4 1.9 ผลทคาดวาจะไดรบจากการปฏบตงานหรอโครงงานทไดรบมอบหมาย 5 2. ทฤษฏและเทคโนโลยทใชในการปฏบตงาน 6 2.1 ทฤษฎทใชในการปฏบตงาน 6
ฉ
สารบญ (ตอ)
หนา
2.1.1 Framework 6 2.1.1.1 ขอดของ Framework 6
2.1.1.2 ขอเสยของ Framework 7 2.1.2 แนวคดการพฒนาซอฟตแวรแบบ MVC 7 2.1.2.1 ขนตอนการท างานของ MVC 8 2.1.2.2 ขอดของการออกแบบระบบดวย MVC 8
2.1.2.3 ขอเสยของการออกแบบระบบดวย MVC 8 2.1.3 Responsive Web Design 8
2.1.3.1 หลกการของ Responsive Web Design 9 2.1.3.2 ประโยชนของการท าเวบไซต Responsive Web Design 9
2.2 เทคโนโลยทใชในการปฏบตงาน 10 2.2.1 Laravel Framework 10
2.2.1.1 ลกษณะเดนของ Laravel 10 2.2.2 Sublime Text 11
2.2.2.1 จดเดนของ Sublime Text 11 2.2.3 โปรแกรม XAMPP 11 2.2.4 Bootstrap 12 2.2.5 JavaScript 12 2.2.6 ภาษา PHP 12
2.2.6.1 ขอดของ PHP 14 2.2.7 HTML 14 2.2.8 CSS 16
2.2.8.1 ประโยชนของ CSS 17
ช
สารบญ (ตอ)
หนา 3. แผนการปฏบตงานและขนตอนการด าเนนงาน 18 3.1 แผนการปฏบตงานสหกจศกษา 18 3.2 รายละเอยดโครงงาน 19 3.3 ขนตอนการด าเนนงานทนกศกษาปฏบตงานหรอโครงงาน 20
3.3.1 ตดตงเครองมอทใชงาน 20 3.3.1.1 ตดตง Composer 20 3.3.1.2 ตดตง Laravel Framework 23
3.3.2 ท าสวนหนาบานแบบ MVC 25 3.3.3 ท าสวนหลงบาน 32 3.3.3.1 การเชอมตอฐานขอมล 33 3.3.3.2 การสราง table โดยใช Migration 33 3.3.3.3 การท า Login เขาระบบหลงบาน 35 3.3.3.4 วธการเขยนเวบไซตหนาการจดการสนคา 40 3.3.4 ท าสวนหนาบานใหสมบรณ 45
4. สรปผลการด าเนนงาน การวเคราะห และสรปผลตางๆ 47 4.1 ขนตอนและผลการด าเนนงาน 47 4.1.1 ผลการออกแบบและพฒนาเวบไซต Mega Whey 47
4.1.2 ตวอยางเวบไซตสวนหนาบาน 47 4.1.3 ตวอยางเวบไซตสวนหลงบาน 55
4.2 วเคราะหขอมลตามจดมงหมายในการปฏบตงานและจดท าโครงงาน 63
ซ
สารบญ (ตอ)
หนา 4.2.1 สรปผลของการวเคราะห 63
4.2.1.1 ขอดของเวบไซต 63 4.2.1.2 ขอเสยของเวบไซต 63
4.3 วจารณขอมลโดยเปรยบเทยบผลทไดรบกบวตถประสงค และจดมงหมายใน การปฏบตงานหรอการจดท าโครงการ 64
5. บทสรปและขอเสนอแนะ 65 5.1 สรปการด าเนนงาน 65 5.2 แนวทางการแกปญหา 65 5.3 ขอเสนอแนะจากการด าเนนงาน 65
เอกสารอางอง 66 ภาคผนวก 68 ก.ตวอยางผลงานในบรษท 69 ประวตผจดท าโครงงานสหกจ 75
ฌ
สารบญตาราง
ตารางท หนา 3.1 แผนการปฏบตงานสหกจศกษา 18 4.1 ตารางเปรยบเทยบวตถประสงคกบผลทไดรบ 64
ญ
สารบญภาพประกอบ
ภาพท หนา 1.1 ต าแหนงทตงบรษทอาเลฟ (ประเทศไทย) จ ากด 1 1.2 แผนผงบรษทอาเลฟ (ประเทศไทย)จ ากด 3 2.1 การท างานของ MVC 7 2.2 ตวอยางการเขยนโปรแกรมภาษา PHP แทรกไวใน HTML 13 2.3 ตวอยางการเขยนโปรแกรมภาษา HTML แทรกไวใน PHP 13 2.4 ตวอยาง Code ภาษา HTML 15 2.5 ผลลพธหนาจอแสดงผล 16 2.6 ตวอยางการเขยนโปรแกรม CSS 17 3.1 ไฟล Composer-Setup.exe 20 3.2 ขนตอนการตดตง Composer-Setup 1 21 3.3 ขนตอนการตดตง Composer-Setup 2 21 3.4 ขนตอนการตดตง Composer-Setup 3 22 3.5 ขนตอนการตดตง Composer-Setup 4 22 3.6 ตดตง Composer-Setup ส าเรจ 23 3.7 เปด Command Prompt 23 3.8 ขนตอนการตดตง Laravel 24 3.9 ขนตอนการตดตง Laravel 24 3.10 ตดตงส าเรจ 25 3.11 home.blade.php ใชส าหรบเกบคา template หลกสวน1 26 3.12 home.blade.php ใชส าหรบเกบคา template หลกสวนท2 27 3.13 header.blade.php ไฟลทจะแทรก 28 3.14 footer.blade.php ไฟลทจะแทรก 28 3.15 slide.blade.php ไฟลทจะแทรก 29
ฎ
สารบญภาพประกอบ (ตอ) ภาพท หนา 3.16 TestController.php 30 3.17 .htaccess 30 3.18 สวนของ route 31 3.19 ผลลพธทไดสวนท1 31 3.20 ผลลพธทไดสวนท2 32 3.21 แกไข database.php ทตองการเชอมตอ 33 3.22 การเพม script ใน 2016_08_19_080721_create_table_users.php 34 3.23 การเพม script ใน DatabaseSeeder.php 35 3.24 LoginController.php 36 3.25 LoginRequest.php 36 3.26 Admin.php 37 3.27 แกไขใน Kernel.php 38 3.28 login.blade.php 39 3.29 การเขยนModel ชอ Product.php 40 3.30 allproduct.blade.php 41 3.31 ฟอรมหนาเพมสนคาและแกไขสนคา 42 3.32 ฟอรมหนาแสดงสนคา 42 3.33 ProductBackend.php สวน getindex 43 3.34 ProductBackend.php สวน getForm และ getShow 43 3.35 ProductBackend.php สวน postForm 44 3.36 ProductBackend.php สวน postAction 44 3.37 codeแสดงสนคาตามเปาหมาย 45 3.38 ผลลพธแสดงสนคาตามเปาหมาย 46 3.39 สนคาทงหมด 46
ฏ
สารบญภาพประกอบ (ตอ) ภาพท หนา 4.1 ตวอยางเวบไซตหนา home 48 4.2 ตวอยางเวบไซตสวนสไลด 5 เปาหมาย 48 4.3 ตวอยางเวบไซตหนาเปาหมายสวนทหนง 49 4.4 ตวอยางเวบไซตหนาเปาหมายสวนทสอง 50 4.5 ตวอยางเวบไซตสวนทแสดงสนคาของหนาเปาหมาย 50 4.6 ตวอยางเวบไซตแสดงบทความทเกยวของกบเปาหมาย 51 4.7 ตวอยางเวบไซตสวนของท าไมตอง Mega Whey 51 4.8 ตวอยางเวบไซตสวนแสดงผลตภณฑทงหมด 52 4.9 ตวอยางเวบไซต เมอกดปมดเพมเตม 52 4.10 ตวอยางเวบไซตหนาบทความ 53 4.11 ตวอยางเวบไซตสวนแสดงบทความทงหมด 53 4.12 ตวอยางเวบไซตสวนแสดงรายละเอยดบทความ 54 4.13 ตวอยางเวบไซตสวนของหนาการตดตอ 54 4.14 ตวอยางเวบไซตหนาเพจ Login เพอเขาใชงานระบบ 55 4.15 ตวอยางเวบไซตหนาแรกของหลงบาน 55 4.16 ตวอยางเวบไซตหนาบทความทงหมด 56 4.17 ตวอยางเวบไซตหนาเพมบทความ 56 4.18 ตวอยางเวบไซต แกไขบทความ 57 4.19 ตวอยางเวบไซตตารางแสดงสนคาทงหมด 57 4.20 ตวอยางเวบไซตหนาเพมสนคา 58 4.21 ตวอยางเวบไซตแสดงรายละเอยดสนคาทงหมด 58 4.22 ตวอยางเวบไซตหนาแกไขสนคา 59 4.23 ตวอยางเวบไซตแสดง category product ทงหมด 59
ฐ
สารบญภาพประกอบ (ตอ) ภาพท หนา 4.24 ตวอยางเวบไซต แสดง category ของบทความทงหมด 60 4.25 ตวอยางเวบไซตหนาเพม category บทความ 60 4.26 ตวอยางเวบไซตแสดงผดแลหลงบานทงหมด 61 4.27 ตวอยางเวบไซตหนาเพมผดแล 61 4.28 ตวอยางเวบไซตหนาแกไขผดแล 62 4.29 ตวอยางเวบไซตแสดงการตดตอทงหมด 62 4.30 ตวอยางเวบไซต แสดงรายละเอยดการตดตอของแตละบคคล 63 ก.1 ตวอยางระหวางการด าเนนงาน Doodle Wall ชนท 1 69 ก.2 ตวอยาง การด าเนนงานเสรจสนของ Doodle Wall ชนท 1 70 ก.3 ตวอยางงาน design Doodle Wall ชนท 2 71 ก.4 ตวอยางการด าเนนงานเสรจสนของDoodle Wall ชนท 2 71 ก.5 ตวอยางการด าเนนงานเสรจสนDoodle Wall ชนท 3 72 ก.6 ตวอยางระหวางการด าเนนงาน Post it wall ชนท 1 72 ก.7 ตวอยางรปการด าเนนงานเสรจสน Post it wall ชนท 1 73 ก.8 ตวอยางการด าเนนงานเสรจสน Post it wall ชนท 2 73 ก.9 ตวอยางผลงาน Content Facebook รปท 1 74 ก.10 ตวอยางผลงาน Content Facebook รปท 2 74
บทท 1 บทน ำ
1.1 ชอและทตงของสถำนประกอบกำร ชอสถานประกอบการ : บรษท อาเลฟ (ประเทศไทย)จ ากด ชอสถานประกอบการภาษาองกฤษ : Aleph ThailandCo., Ltd. ทตงของสถานประกอบการ : 33/128 อาคารWall Street Tower ชน 25 ถนนสรวงศ
แขวง สรยวงศเขต เขตบางรก กรงเทพมหานคร โทรศพท : 02- 237- 2737 Website : http://www.aleph-labs.com/
ภำพท 1.1 ต าแหนงทตงบรษทอาเลฟ (ประเทศไทย) จ ากด
2
1.2 ลกษณะธรกจของสถำนประกอบกำรและกำรใหบรกำรหลกขององคกร 1.2.1 ประวตของบรษทอำเลฟ (ประเทศไทย) จ ำกด
บรษท อาเลฟ (ประเทศไทย) จ ากด เรมกอตงเดอนสงหาคม พ.ศ.2558 เปนสาขายอยมาจากบรษท อาเลฟ จ ากด สาขาใหญตงอยประเทศสงคโปร ปจจบนบรษท อาเลฟ (ประเทศไทย) จ ากด ท าธรกจเกยวกบใหค าปรกษาดานเทคโนโลย ใหบรการออกแบบ และ พฒนาระบบ มลกษณะการท างานเปนทมและมท างานแบบ Home Office มการวางแผนในการท างานอยางเปนระบบ แบงการท างานออกเปนสองสวนคอ ฝาย Design และ ฝาย Develop ในสวนของฝาย Design ลกษณะงานจะออกแบบตามความตองการของลกคาเปนหลก และสงไปใหฝาย Develop ตอไป สวนของ Develop จะน างานทดไซนแลวมาท าการ Coding ตอไป
1.2.2 ประเภทธรกจและกำรใหบรกำรลกคำของบรษทอำเลฟ (ประเทศไทย) จ ำกด
Mobile Application ในสวนของ Mobile Application ทางบรษท อาเลฟ (ประเทศไทย)จ ากด ไดมการ design
งานทงในรปแบบทเปน Content และ Template รวมถงโครงสรางระบบการเขาใชงาน Mobile Application ตามความตองการของลกคา และบางสวนอาจจะมการสงงาน Design ไปทางสาขาสงคโปร ท าการ Design เพมเตม
Web design and Develop ในสวนของ Web Design and Develop ไดมการท างานรวมกน ระหวาง ฝาย Design และ
ฝาย Developโดยทางลกคาจะตองสง Requirement มาซงฝาย Design จะท าการออกแบบและสงไปให ฝาย Develop ตอไป
Content Facebook มการคด Concept Product ในรปแบบ Content และ Art Work ใหกบลกคา
3
1.3 รปแบบกำรจดองคกรและกำรบรหำรองคกร
ภำพท 1.2 แผนผงบรษทอาเลฟ (ประเทศไทย)จ ากด
4
1.4 ต ำแหนงและหนำทงำนทนกศกษำไดรบมอบหมำย ต าแหนงงาน : นกศกษาฝกงานดาน IT Development หนาท : ชวยเหลอฝาย Develop เขยนเวบไซตงานใหกบลกคาทบรษท ทางบรษทไดให
เรยนรงานเกยวกบ Code และ Web Design
1.5 ขอมลพนกงำนทปรกษำ ชอ : นายปรชา พทธสารวงศ ต าแหนง : Programmer Email : [email protected]
6.1 ระยะเวลำทปฏบตงำน เรมตนการปฏบตงาน : 31 พฤษภาคม พ.ศ.2559 สนสดการปฏบตงาน : 30 กนยายน พ.ศ.2559
1.7 ทมำและควำมส ำคญของปญหำ โครงงานนเปนสวนหนงของโปรเจคพฒนาเวบแอพพลเคชนของสถานประกอบการและ
เปนงานทไดรบมอบหมายมาจากสถานประกอบโดยท าตามความตองการของลกคาเปนหลก
6.8 วตถประสงคของกำรปฏบตงำนหรอโครงงำนทไดรบมอบหมำย ในการปฏบตงานสหกจศกษาครงนมขนเพอใหนกศกษาไดสามารถลงมอปฏบตงานจรง ในบรษทซงท าใหสามารถมองเหนภาพรวมในการปฏบตงานตงแตขนเรมตนโครงการจนถงเสรจสนโครงการโดยน าความรทไดจากการฝกอบรมมาประยกตใชในการท างานไดจรงอกทงยงเปนการเรยนรในการท างานพฒนาระบบจรงรวมถงขนตอนการพฒนาเพอน าไปเปนประสบการณและพฒนาประยกตใชกบงานในภาคหนาได ซงโครงงานนจะพฒนาเวบแอพพลเคชนใหมประสทธภาพและตรงกบความตองการของลกคาใหมากทสด
5
6.9 ผลทคำดวำจะไดรบจำกกำรปฏบตงำนหรอโครงงำนทไดรบมอบหมำย 1) สามารถท างานรวมกบผอนหรอท างานเปนทมไดอยางด 2) สามารถน าความรหรอทกษะทไดมอบหมายจากงานมาประยกตใชไดด 3) ไดทกษะการแกปญหาทมอบหมายทไดรบน ามาพฒนาไดดขน 4) ไดเรยนรระบบภายในองคกรของบรษททจรง 5) ท าใหมทกษะความช านาญและสายวชาชพทมากขน 6) เวบไซตสามารถน ามาใชงานไดจรง 7) โครงงานนสามารถน าไปพฒนาตอยอดไดอกในอนาคต 8) เขาใจการพฒนาเวบไซตโดยใช Laravel Framework
บทท2 ทฤษฎและเทคโนโลยทใชในการปฎบตงาน
2.1 ทฤษฎทใชในการปฎบตงาน 2.1.1 Framework
Framework หมายถง สงทเขามาชวยก าหนดกรอบของการท างานใหเปนไปในทางเดยวกน ปญหาทพบเปนประจ าในการท างานรวมกนในอดตคอ แตละคนจะเขยน Code ไมเหมอนกนท าใหเวลาแกงานหรอพฒนาตอจะไมสามารถเขาใจได เพราะไมไดมการก าหนดขอตกลงกนไวลวงหนา Framework จะเขามาแกปญหาในจดน โดยมนจะเปนตวก าหนดใหสมาชกในทมเขาใจตรงกนและปฏบตไปในแนวทางเดยวกน [1]
2.1.1.1 ขอดของ Framework [2,3] 1) มความยดหยนและความปลอดภยสง การจดวาง Folder และ File นนไดออกแบบและ
จดหมวดหมเปนอยางด เพอใหทมพฒนาซอฟตแวรสามารถเขาใจโครงสรางโปรแกรม และตอเตมไดงาย รวมทงงายตอการดแลรกษา 2) มการออกแบบโปรแกรมเปนแบบ MVC ดงนนสามารถแบงงานไดชดเจนและแยกจากกนอยางเดดขาด ระหวาง Frontend , Backend และ Database ท าใหการพฒนาโปรเจคเปนไปไดโดยเรว เพราะสามารถท างานทงสามประเภทไปพรอมกนได
3) ลดเวลาในการสราง Create, Read, Update และ Delete หรอ CRUD เพราะ Framewoสวนใหญมระบบ Generator ให ท าใหสามารถลดเวลาในการเขยนสวนน
4) มระบบในการเชอมตอไปยงฐานขอมลไดมากกวา 1 ชนด เชน เชอมตอไปยง MySQL, MS SQL, ProgreSQL, SQLite ไดหลากหลาย (ทงนขนกบความสามารถของแตละ Framework)
5) มเครองมอพนฐานทออกแบบโดยทมผเชยวชาญเรอง Security โดยเฉพาะเตรยมไวใหนกพฒนาใชการปองกน Security พนฐานกเปนไปแบบอตโนมต เชน sql injection, xss filter, cookie encryption ท าใหการจดการเรอง Security เปนไปไดโดยงาย
7
2.1.1.2 ขอเสยของ Framework [2,3] 1) ม Class จ านวนมากมาย เพอใหการท างานอยางเปนระบบ ท าใหตองเขยน Class ทเปนตว
ชวยใหผพฒนาใช แตบาง Class อาจไมจ าเปนตองใช 2) ระยะเวลาการศกษาสง 3) ไมเหมาะกบการเขยนระบบขนาดเลก
2.1.2 แนวคดการพฒนาซอฟตแวรแบบ MVC [4,5]
MVC (Model View Controller) คอ รปแบบการพฒนาซอฟตแวรทมโครงสรางซงแบงออกมาเปน 3 สวนหลก คอ Model View และ Controller รปแบบการพฒนาซอฟตแวรแบบ MVC ถกน าไปใชในขนตอนการพฒนาหลากหลายภาษาเพราะ MVC เปนเพยงหลกการออกแบบโปรแกรม Design Pattern รปแบบหนงเทานน ซงเปนทนยมมากในการน ามาพฒนาแอพพลเคชนซอฟตแวรแตละแพลตฟอรม และประยกตใชในอกหลายดาน 1) Model คอ สวนทใชในการตดตอกบฐานขอมล ซงท าหนาทในการดงขอมลขนมาจากฐานขอมลขนมา และท าการจดการขอมลตางๆไวในรปแบบทเหมาะสม
2) View คอสวนทจะน าขอมลจาก Model ไปใชแสดงผลใหผใชเหนผลลพธออกมาใน User Interface
3) Controller คอสวนทจะคอยรบ Input จาก Client เขามาแลวน าค าสงไประมวลผล เพอสงงาน View และ Model ใหประมวลผลออกมาเปนอยางไร
ภาพท 2.1 การท างานของ MVC
8
2.1.2.1 ขนตอนการท างานของ MVC [5] แสดงดงภาพท 2.1 1) เรมจาก Client สง Request ไปท Web App ซงจะถกสงตอให Controller
ท าการตรวจสอบขอมลทมาให ( Request Method, Request Parameters ) 2) แลว Controller จะเรยก Method ใหท างานเพอจดการ Request นน 3) Model จะท าการค านวณและอาจตดตอกบ Database เพอจดการกบ Request
นน แลวสงผลลพธกลบไปท Controller 4) เมอ Controller ไดผลลพธจาก Model แลวกใชผลลพธนนสงตอให View ท างาน 5) View จะสราง Page ส าหรบแสดงผลลพธนน แลวสง Page กลบไปท Controller 6) Controller สง Page นน (เปน Response) กลบไปยง Client
2.1.2.2 ขอดของการออกแบบระบบดวย MVC [6] 1) การออกแบบทชดเจน เมอก าหนดให Model อยในรปแบบของ Object ในระบบ สงผล
ใหสามารถมองภาพรวมของระบบไดชดเจนมากขนวา Model ใด สมพนธกบ Model ใดในลกษณะใด รวมไปถงค าสงตาง ๆ ใน Object ทสามารถเรยกใชงานได
2) การปรบปรงหรอแกไขไดโดยงาย เมอออกแบบตาม MVC Pattern ท าใหสามารถปรบปรง แกไขไดอยางงายโดยทไมกระทบกบสวนทเหลอ เนองจากทง 3 สวนตางอสระตอกน เพยงก าหนด Interface ของแตละสวนใหชดเจน และท าการพฒนา แกไข หรอ ปรบปรงภายใต Interface ทก าหนด
3) View ทหลากหลาย หลงจากทแยก View กบ Model ออกจากกน ท าใหสามารถออกแบบ View ไดหลายรปแบบ
4) Maintain ระบบไดงาย เพราะไดออกแบบระบบทมโครงสรางชดเจน ท าใหยดหยนตอการเพมเตม รวมไปถงการน ากลบมาใชซ า
2.1.2.3 ขอเสยของการออกแบบระบบดวย MVC [6] 1) การออกแบบระบบดวย MVC ไมเหมาะกบระบบขนาดเลกเนองจากซบซอนเกนไป
2.1.3 Responsive Web Design [7]
Responsive Web Design คอ การออกแบบเวบไซตใหรองรบขนาดหนาจอของอปกรณทกชนด ตงแตคอมพวเตอรทมขนาดหนาจอหลากหลาย ไปจนถงโทรศพทมอถอ Smart Phone และ
9
Tablet ตางๆ ทมมาตรฐานขนาดหนาจอทแตกตางกน ท าใหออกแบบครงเดยวสามารถใชจอไดทกขนาด
Responsive Web Design เปนการออกแบบเวบไซต โดยใชเทคนคของ CSS และ JavaScript ในการออกแบบเพอใหเวบไซตสามารถจดล าดบ เรยงขอมลบนเวบไซตใหรองรบการแสดงผลผานหนาจอทมขนาดแตกตางกนไดโดยอตโนมต โดยผใชงานเวบไซตสามารถเปดใชงานเวบไซตได โดยไมตองค านงถงขนาดของหนาจอหรอชนดของอปกรณสอสาร
2.1.3.1 หลกการของ Responsive Web Design การจะท า Responsive Web Design มกใชเทคนคหลายอยางรวมกน เรมแรกคอการท า
Fluid Grid ซงกคอการออกแบบ Grid ใหเปนแบบ Relative ซงกคอการทไมไดก าหนดขนาดของ Grid แบบตายตว แตจะก าหนดใหสมพนธกบสงอนๆ เชน ก าหนดความกวางแบบเปน % หรอการใช font-size เปนตน ตอมาคอการท า Flexible Images หรอการก าหนดขนาดของ Images ตางๆ ใหมความสมพนธกบขนาดของหนาจอแสดงผล หากรปตนฉบบมขนาดใหญมาก เวลาแสดงในมอถอทมจอขนาดเลก กควรลดขนาดลงมา เพอใหแสดงผลไดอยางสวยงาม เปนตน สดทายคอการใช CSS3 Media Queries ซงจะชวยใหสามารถก าหนด style sheets ส าหรบ Devices ตางๆ ได โดยสวนใหญ จะเขยน Style Sheets พนฐานเอาไว ซงกลมน จะไมขนอยกบ Devices ใดๆ หลงจากนนใหเขยน Style Sheets ส าหรบ Devices ทมขนาดหนาจอทเลกสด เพมขนไปจนถงขนาดใหญสด ซงการเขยนลกษณะนจะชวยลดความซ าซอนของ Code และยงท าใหการแก Code ในภายหลงท าไดงาย
2.1.3.2 ประโยชนของการใช Responsive Web Design [8] 1) การท า Responsive เขยนเวบไซตแบบเดยวกสามารถรองรบทกอปกรณ และไมตองท า
หลายหนา ชวยใหไมหนกเซฟเวอร 2) ประหยดคาใชจายในการจดท าและสามารถลดระยะเวลาในการท างานหลายหนา โดยท
วางแผนครงเดยว สามารถท าเพยงแคหนาเดยว 3) รวดเรวในการดแล จดการเวบไซต ไมยงยาก และไมตองเปลยนแปลงเวบไซตหลาย
หนา 4) เวบไซตไมตอง Redirect หนาไปหาหนา Mobile ชวยใหเซฟเวอรไมท างานหนกและ
ไมวนวาย 5) ชวยท าใหการคนหาผาน Mobile เปนไปไดงายมากยงขน
10
2.2 เทคโนโลยทใชในการปฎบตงาน 2.2.1 Laravel Framework [9,10,11]
Laravel คอ PHP Framework ทสามารถชวยใหการเขยน Code ไปในทางเดยวกน ออกแบบมาเพอพฒนาเวบแอพพลเคชนในรปแบบ MVC พฒนาโดยมผน าทมคอนาย Taylor Otwell ภายใตลขสทธของ MIT และ Source Code ไดถกเกบไวบน Host ของ Github 2.2.1.1 ลกษณะเดนของ Laravel
1) การเรยกใชงาน Class งาย เพราะ Laraval ใช Name Space ในการเรยกใชงาน Class ท าให Code สนและเขาใจงาย
2) สวนขยายของ Laravel ชอวา Bundle ซงมจดเดนคอตดตงงายผาน command prompt โดยค าสง php artisan
3) Restful Controller สามารถก าหนดให Function ใน controller รบคาเฉพาะทมาจาก Method ทตองการไดเพยงแคใส prefix เชน get_ , post_ ไวขางหนา function
4) Laravel ยนยอมใหผใชงานสามารถสราง Unit Test ขนมาเพอทดสอบงานไดโดยผาน Artisan Utility
5) Routing มความยดหยนสง รองรบการท างานไดทกรปแบบ HTTP , GET, POST, PUT, DELETE หรอแบบ RESTFul กรองรบไดทงหมด สามารถก าหนดชอของ URL เพอทจะก าหนดใหไปยงสวนทตองการได
6) มเครองมอ ทชวยให Developer ท างานไดเรวขน เชน มการรองรบ HTTP foundation ดวย Symfony SwiftMailer ส าหรบการสงอเมล Carbon ส าหรบการจดการเรองวนท เวลา การแสดงผลในรปแบบตางๆ Doctrine, Eloquent ทชวยจดการเกยวกบ Database ท างานรวมกบ Composer Dependency Manager ไดเปนอยางด ท าใหการอพเดท เพม ลด Module เปนไปอยางงายดวย
7) Template Engine - Blade ชวยใหการจดเรยง Code หนา HTML งายขน และการดงคาจากตวแปรมาใชในการแสดงผลงายขน อกทงยงรองรบการ Reuse Template เปนอยางด เพราะสามารถ ใชวธการ Extend Template และ Include ไดดวย
11
2.2.2 Sublime Text [12]
Sublime Text เปนโปรแกรมเขยน code ซงสนบสนนภาษาทหลากหลาย C, C++, C#, CSS, D, Erlang, HTML, Groovy, Haskell, HTML, Java, JavaScript, LaTeX, Lisp, Lua, Markdown, Matlab, OCaml, Perl, PHP, Python, R, Ruby, SQL, TCL, Textile และ XML ใชงานงายมความสามารถทหลากหลาย เชน แนะน า Code ทก าลงพมพ
2.2.2.1 จดเดนของ Sublime Text 1) มความเรวสง ทงตอนเปดโปรแกรม เรยกไฟล หรอฟงกชน 2) Multiple Cursors สามารถ แกไข Code หลายทไดในการพมพครงเดยว 3) แตง Theme ได 4) Split Screen สามารถแบงหนาจอการท างานได แบบเปนแถวหรอเปน Grid 5) Sublime Package Control เปน Plugin ทชวยใหควบคม Package ทจะลงเพมใน
Sublime text 2.2.3 โปรแกรม XAMPP [13]
XAMPP คอโปรแกรมส าหรบจ าลองเครองคอมพวเตอรสวนบคคลใหท างานในลกษณะของ WebServer นนคอเครองคอมพวเตอรสามารถเปนทงเครองแมและเครองลกในเครองเดยวกนได ท าใหไมตองเชอมตอกบ Internet กสามารถทดสอบเวบไซตทสรางขนได
XAMPP มาพรอมกบ PHP ภาษาส าหรบพฒนาเวบแอพลเคชนทเปนทนยม , MySQL ฐานขอมล, Apache จะท าหนาทเปนเวบเซรฟเวอร อกทงยงมาพรอมกบ OpenSSL , phpMyAdmin (ระบบบรหารฐานขอมลทพฒนาโดย PHP เพอใชเชอมตอไปยงฐานขอมล สนบสนนฐานขอมล MySQL และ SQLite
ไฟลส าหรบตดตง XAMPP นนมขนาดใหญ เนองจากมชดควบคมการท างานทชวยใหการปรบแตงสวนตาง ๆ งายขน XAMPP นนรองรบระบบปฏบตการหลายตว เชน Windows, Linux, Apple ท างานไดทงบนระบบปฏบตการแบบ 32 bit และ 64 bit ในการใชงานเบองตนใหดบเบลคลก XAMPP Control Panel Application แลวท าการคลกปม start จากนนสามารถใชงานได โดยเปด Browser ขนมาพมพ localhost หรอ 127.0.0.1
12
2.2.4 Bootstrap [14] Bootstrap คอ Front-end Framework ตวหนง ทจะชวยใหการพฒนาเวบไซตของเรวขน
งายขน และเปนระบบมากขน Front-end หมายถง สวนทแสดงผลหนาเวบไซต Bootstrap หมายถง สงทชวยท าใหงายขน ดงนนจงหมายถงสงทชวยใหการตกแตงหนาเวบไซตท าไดงายขน ตว Bootstrap ถกออกแบบมาใหรองรบการท างานแบบ Responsive Web
Bootstrap ถกพฒนาขนดวยกลมนกพฒนาจากทวโลก มการอพเดทอยตลอดเวลา เพอรองรบการท างานไดอยางทนสมยและการแกไขปญหาหรอ Bug กสามารถท าไดเรว
สงท Bootstrap ใหมา ม 4 อยาง 1) Scaffolding ม Grid System จ านวน 12 คอลมน สามารถเลอกใชไดทงแบบ Fixed และ
แบบ Fluid 2) Base CSS ม Style Sheets ส าหรบ HTML Elements พนฐาน เชน typography, tables,
forms และ images 3) Components ม Style Sheets ส าหรบสงทตองใชบอยๆ ไมวาจะเปน navigation,
breadcrumbs รวมไปถง pagination 4) JavaScript ม jQuery plugins
2.2.5 JavaScript [15,16]
JavaScript เปนภาษาสครปตเชงวตถ ซงในการสรางและพฒนาเวบไซต (ใชรวมกบ HTML) เพอใหเวบไซตดมการเคลอนไหว สามารถตอบสนองผใชงานไดมากขน สามารถเปลยนแปลงรปแบบการแสดงผลของเวบไซตได สามารถใชตรวจสอบขอมลได และสามารถสราง Cookies (เกบขอมลของผใชในคอมพวเตอรของผใชเอง) ได ซงมวธการท างานในลกษณะ OOP (Object Oriented Programming) ทมเปาหมายในการ ออกแบบและพฒนาโปรแกรมในระบบอนเทอรเนต ส าหรบผเขยนดวยภาษา HTML สามารถท างานขามแพลตฟอรมได โดยท างานรวมกบ ภาษา HTML และภาษา Java ไดทงทางฝงไคลเอนต (Client) และ ทางฝงเซรฟเวอร (Server) 2.2.6 ภาษา PHP [17] PHP เปนโปรแกรมภาษาทท างานในลกษณะ Server-side Scripting Language คอมลกษณะของการประมวลผลทฝง Server หลงจากนนกจะท าการสงผลลพธในรปแบบ HTML กลบไปยง Web Browser ซงลกษณะเชนนจะท าใหสามารถใชภาษา PHP พฒนาระบบงานใน
13
ลกษณะ Dynamic Web Pages (เวบเพจทมการโตตอบกบผใช) ได ไฟล PHP จะเหมอนกน HTML ทวไป เนองจากสามารถเขยนภาษา PHP ลงไปใน HTML ได ตวอยางการเขยนโปรแกรมภาษา PHP โดยการเขยนค าสง PHP ใหท าการพมพขอความวา Hello World!! และท าการแทรก PHP ไวในไฟล HTML ดงภาพท 2.2
ภาพท 2.2 ตวอยางการเขยนโปรแกรมภาษา PHP แทรกไวใน HTML
ในทางกลบกนสามารถเขยนโปรแกรมภาษา HTML แทรกไวภายในภาษา PHP ไดเชนกนดงภาพท 2.3
ภาพท 2.3 ตวอยางการเขยนโปรแกรมภาษา HTML แทรกไวใน PHP
14
2.2.6.1 ขอดของภาษา PHP 1) PHP เปนโปรแกรมภาษาทสามารถดาวนโหลดไดฟรไมมปญหาเรองลขสทธ 2) PHP มการแปลภาษาและท าการประมวลผลไดอยางรวดเรว 3) เรยนรงายเนองจาก PHP ฝงเขาไปใน HTML 4) ใชงานรวมกบ XML ไดทนท 5) ใชกบระบบแฟมขอมลได 6) PHP สามารถท างานไดทงบนระบบปฏบตการ Windows, Unix, Linux, และMacintosh 7) สามารถกลาวไดวา PHP เปนโปรแกรมภาษาทพฒนาระบบงานบนเวบทไดรบความ
นยมมากทสดในปจจบน 8) PHP เปนผลงานทเตบโตมาจากกลม Open Source ดงนน PHP จงมการพฒนาไปอยางรวดเรว และแพรหลาย 9) ระบบฐานขอมลทสามารถใชรวมกบ PHP ไดคอ Oracle, mSQL, MySQL, PostgreSQL,
FilePro, dbase, Unix dbm เปนตน 2.2.7 HTML ( Hypertext Markup Language )[18]
HTML (ยอมาจาก Hyper Text Markup Language) เปนภาษาประเภท Markup Language ทใชในการสรางเวบเพจ มแมแบบมาจากภาษา SGML (Standard Generalized Markup Language) ทตดความสามารถบางสวนออกไป เพอใหสามารถท าความเขาใจและเรยนรไดงาย ปจจบนมการพฒนาและก าหนดมาตรฐานโดยองคกร World Wide Web Consortium (W3C) HTML มโครงสรางการเขยนโดยอาศย Tag ในการควบคมการแสดงผลของขอความ รปภาพ หรอวตถอน ๆ แตละ Tag อาจจะมสวนขยาย เรยกวา Attribute ส าหรบจดรปแบบเพมเตมการสรางเวบเพจ โดยใชภาษา HTML สามารถท าโดยใชโปรแกรม Text Editor ตางๆ เชน Notepad, EditPlus หรอจะอาศยโปรแกรมทเปนเครองมอชวยสรางเวบเพจ เชน Microsoft FrontPage, Dream Weaver ซงอ านวยความสะดวกในการสรางหนา HTML แตมขอเสยคอ โปรแกรมเหลานมก generate code ทเกนความจ าเปนมากเกนไป ท าใหไฟล HTML มขนาดใหญ และแสดงผลชา ดงนนหากมความเขาใจภาษา HTML จะเปนประโยชนใหสามารถแกไข code ของเวบเพจไดตามความตองการ และยงสามารถน า script มาแทรก ตดตอ สรางลกเลนสสนใหกบเวบเพจไดการเรยกใชงานหรอทดสอบการท างานของเอกสาร HTML จะใชโปรแกรม Internet Web Browser เชน Internet Explorer (IE), Mozilla Firefox, Safari, Opera, และ Google Chrome เปนตน
15
HTML จะอานจากซายไปขวา จากบนลงลาง เมอพมพขอความตวอกษรลงไปแลวท าการบนทกดงภาพท 2.4 พอเปดไฟลมาดผลลพธทจะแสดงผลทหนาจอกจะเปนเหมอนทพมพขอความตวอกษรลงไปดงภาพท 2.5 หากตองการผลลพธทแตกตางตองใช Tag ในการควบคมการแสดงผลภาพ
ภาพท 2.4 ตวอยาง Code ภาษา HTML
จากภาพจะเหนวา HTML มรปแบบการเขยนทชดเจน จะประกอบดวย Tag พนฐาน ดงน
Tag <html>…</html> เปนสวนประกาศทก าหนดหวละทายของเอกสาร เพอให Browser ทราบและแสดงผลไดถกตอง Tag <head>…</head> เปนสวนหวเรองของเอกสาร ภายในจะม Tag <title>…</title> ใชส าหรบการก าหนดชอของเอกสาร Tag <body>…</body> เปนสวนทมรายละเอยดมากทสด จะบรรจขอมลตางๆ ทตองการใหแสดงบนหนาเวบไซตของเรา ทงขอความ รปภาพ เปนตน
16
ภาพท 2.5 ผลลพธหนาจอแสดงผล
2.2.8 CSS (Cascading Style Sheets)[19] CSS ยอมาจาก Cascading Style Sheet คอภาษาทใชเปนสวนของการจดรปแบบการ
แสดงผลเอกสาร HTML จะท าหนาทในการตกแตงเอกสารใหสวยงาม โดยท CSS ก าหนดกฏเกณฑในการระบรปแบบ ของเนอหาในเอกสาร อนไดแก สของขอความ สพนหลง ประเภทตวอกษร และการจดวางขอความ ซงการก าหนดรปแบบนใชหลกการของการแยกเนอหาเอกสาร HTML ออกจากค าสงทใชในการจดรปแบบการแสดงผล ก าหนดใหรปแบบของการแสดงผลเอกสาร ไมขนอยกบเนอหาของเอกสาร เพอใหงายตอการจดรปแบบการแสดงผลลพธของเอกสาร HTML โดยเฉพาะในกรณทมการเปลยนแปลงเนอหาเอกสารบอยครง หรอตองการควบคมใหรปแบบการแสดงผลเอกสาร HTML มลกษณะของความสม าเสมอทวกนทกหนาเอกสารภายในเวบไซตเดยวกน โดยกฏเกณฑในการก าหนดรปแบบ เอกสาร HTML ถกเพมเขามาครงแรกใน HTML 4.0 เมอปพ.ศ. 2539 ในรปแบบของ CSS Level 1 Recommendations ทก าหนดโดย องคกร World Wide Web Consortium หรอ W3C ตวอยางภาษา CSS ดงภาพท 2.6
17
ภาพท 2.6 ตวอยางภาษา CSS
2.2.8.1 ประโยชนของ ภาษา CSS 1) ภาษา CSS จะชวยในการจดรปแบบแสดงผลใหกบภาษา HTML ซงจะชวยลดการใช
ภาษา HTML ใหนอยลง โดยเหลอเพยงแตสวนทเปนเอกสารทเปนภาษา HTML เทานนท าใหมการแกไขและท าความเขาใจไดงายขน
2) ท าใหขนาดไฟล HTML นอยลงเนองจาก ภาษา CSS จะชวยลดการใชภาษา HTML ลง ท าใหขนาดไฟลนนกเลกลงไปดวยเชนกน
3) ภาษา CSS เปนภาษา Style Sheets โดย Style Sheets ชดเดยวสามารถใชก าหนดรปแบบการแสดงผลใหเอกสาร HTML ทงหนา หรอทกหนามผลเหมอนกนได จงท าใหเวลาทมการแกไขกจะแกไขไดงายขนเพยงแกไข Style Sheets ทใชงานเพยงชดเดยวเทานน
4) ท าใหเวบไซตมมาตราฐานเพราะการใชงาน CSS นนจะท าใหการแสดงผลในสอ ถกปรบเปลยนไปไดอยางเหมาะสม เชน การแสดงผลบนหนาจอ และการแสดงผลในมอถอ
5) CSS สามารถทจะใชงานไดหลากหลาย เวบบราวเซอร ท าใหการใชงานนนสะดวกมากยงขน
6) CSS สามารถก าหนดแยกไวตางหากจากไฟลเอกสาร HTML และสามารถน ามาใชรวม กบเอกสารหลายไฟลได การแกไขกแกเพยง จดเดยวกมผลกบเอกสารทงหมด
บทท 3
แผนงานการปฏบตงานและขนตอนการด าเนนงาน
3.1 แผนการปฏบตงานสหกจศกษา
ตารางท3.1 ตารางแสดงแผนการปฎบตงานสหกจศกษา
หวของาน เดอนท 1 เดอนท 2 เดอนท 3 เดอนท 4
ทบทวนความร เชน php, html และ css
ศกษา Bootstrap และ Responsive
ศกษาการใชFramework Laravel
รวบรวมขอมลและตดตงโปรแกรม
วเคราะหความตองการของลกคา
พฒนาเวบไซต
ทดสอบและแกไขขอผดพลาด
จดท ารปเลม
ตรวจสอบเวบไซตลกคาของบรษท
Facebook Content
งานเอกสาร
Doodle Walls
Post it walls
ท าFontend งานลกคา
19
3.2 รายละเอยดโครงงาน โครงงานนเปนสวนหนงของโปรเจคพฒนาเวบไซตของสถานประกอบการและเปนงานท
ไดรบมอบหมายมาจากสถานประกอบโดยท าตามความตองการของลกคาเปนหลก โดยทางสถานประกอบการตองการใหออกแบบและพฒนาเวบไซต Mega Whey พฒนาโดยการใช Laravel Framework โดยจะมขนตอนการออกแบบและพฒนาเวบไซตโดยสงเขปดงน
ศกษาเกยวกบการสรางเวบไซตดวย Laravel Fremework ท าการศกษาวธใชงาน Laraval Fremework เพอใชในการสรางเวบไซต โดยใชโปรแกรม
phpMyAdmin ในการจดเกบขอมลตางๆ
ตดตงโปรแกรมและรวบรวมขอมลทจะน ามาใช หลงจากทไดไปศกษามากเรมท าการตดตงโปรแกรมและทดลองใชงาน โดยท าการโหลด
Laravel Framework, Sublime Text และ XAMPP ตามล าดบ จากนนท าการรวบรวมขอมลความตองการของลกคา
วเคราะหความตองการของลกคา 1) ลกคาตองการจะใหทางบรษทท าเวบไซตแนะน า Mega Whey โดยตองใหแบงตาม
เปาหมาย 5 เปาหมายคอสรางกลามเนอ ลดน าหนก ฟนฟสขภาพ เพมความสงและเตมเตมความรก ตองการทจะใหแบงสนคาและบทความตามเปาหมาย มหนาแนะน า Megawhey หนารวมสนคาและบทความ และหนาการตดตอทลกคาสามารถตดตอกบทางบรษทได
2) ตองการใหเวบไซตมความสวยงามนาใช 3) ตองการโทนสด า-เหลอง 4) มสวนของหลงบานทจดการสวนของหนาบานได สามารถจดการสนคา บทความ ผดแลระบบและสามารถดขอความการตดตอจากลกคาได
พฒนาเวบไซต
เนองจากเพอความรวดเรวจงท าการปรบแตง Template Bootstap3 มาประยกตใชกบ โปรเจคโดยการเขยน Code แบบ Laravel มการใช Javascript เขามาชวยในการพฒนาท าในสวนของหนาตาของหนาบานกอนแตท าไมเสรจสมบรณเนองจากสวนหนาบานจะมการดงขอมลจาก
20
Database เชนสนคาและบทความ จงท าสวนของหลงบานทสามารถจดการกบ database ไดตอ แลวจงท าสวนของหนาบานใหเสรจสมบรณ
ทดสอบระบบและแกไขขอผดพลาด เมอท าจนเสรจสมบรณแลว กท าการทดสอบเวบไซตโดยใหพเลยงลองใชงานเวบไซตเพอ
หาขอผดพลาด เพอน าไปแกไขใหงานมความสมบรณมากยงขน
3.3 ขนตอนการด าเนนงานทนกศกษาปฏบตงานหรอโครงงาน
3.3.1 ตดตงเครองมอทใชงาน
3.3.1.1 ตดตง Composer เนองจาก Laravel Framework จะตองใชวธตดตงผาน Composer เทานน 1) ดาวนโหลด Composer 2) ดาวนโหลดเสรจ ใหดบเบลคลกท ไฟล Composer-Setup.exe ดงภาพท 3.1
ภาพท 3.1 ไฟล Composer-Setup.exe
3) เมอเปดขนมาแลว คลกทปม Next ดงภาพท 3.2
21
ภาพท 3.2 ขนตอนการตดตง Composer-Setup 1
4) จากนนกดทปม Browse.. แลวไปคลกเลอกทอย ของ PHP ทไดท าการตดตงไวจากนน
กดปม Next ดงภาพท 3.3
ภาพท 3.3 ขนตอนการตดตง Composer-Setup 2
22
5) จากนน คลกทปม Next ดงภาพท 3.4
ภาพท 3.4 ขนตอนการตดตง Composer-Setup 3
6) คลกทปม Install ดงภาพท 3.5
ภาพท 3.5 ขนตอนการตดตง Composer-Setup 4
23
7) ตดตงเสรจสนดงภาพท 3.6
ภาพท 3.6 ตดตง Composer-Setup ส าเรจ
3.3.1.2 ตดตง Laravel Framework 1) เปด Command Prompt โดยคลกทปม start แลวพมพ cmd ใน search
ดงภาพท 3.7
ภาพท 3.7 เปด Command Prompt
24
2) ใหไปยง Directory ทตองการตดตง Laravel Projectโดยการพมพ cd xampp/htdocs จากนนกดปม Enter
3) ใหท าการพมพค าสง composer global require "laravel/installer=~1.1" จากนนกดปม Enter ดงภาพท 3.8
ภาพท 3.8 ขนตอนการตดตง Laravel
4) ใหท าการพมพค าสง composer create-project laravel/laravel {directory} “~5.0.0” --
prefer-dist จากนนกดปม Enter ขนตอนนจะใชเวลา ชาหรอเรวขนอยทความเรวของ Internet เพราะเมอท าการกดปม Enter ระบบจะท าการ Download และท าการตดตง Laravel มายง Directory ทท าการเลอกไวดงภาพท 3.9
ภาพท 3.9 ขนตอนการตดตง Laravel
25
5) เมอตดตงเสรจแลว สามารถกดปดหนาจอนไปไดเลย จากนนใหท าการทดสอบ เปด Browser ขนมา ทดสอบเปดหนาเพจ คอ http://localhost/project-name/public หากตดตงส าเรจ จะปรากฎดงภาพท 3.10
ภาพท 3.10 ตดตงส าเรจ
3.3.2 ท าสวนหนาบานแบบ MVC 1) ดาวนโหลด Template Fitness Bootstap3 และตดตง Sublime Text , XAMPP 2) น าไฟล Unzip 3) น าไฟลเขาแฟม laravel-project 4) น า Template มาปรบใชกบ Laravel โดยการเขยนแบบ MVC (Model-View-Controller)
ขนแรกจะเปนแคการตกแตงสวนของหนาบาน สรางหนา 5 เปาหมาย หนารวมสนคา หนารวมบทความ หนาการตดตอ ในสวนนจะใช View โดย Views คอสวนการแสดงผลของเวบไซต ใน Laravel นจะม Template คอ Blade Template ทแนบมากบตว Laravel ท าใหเราเขยน PHP บนหนา HTML ไดงาย และ Controller คอการควบคมการท างานของ View เทานน
26
เรมเขยน View กอน กอนอนสรางแฟม admin ไวท resources/views กอน จากนนใน Template ทโหลดมาจะมไฟล index.html ซงจะคดลอก Code หนา index นมาแบงออกเปน 4 สวน โดยสราง 4 ไฟลคอไฟล home.blade.php ไวเปนหนาหลก ดงภาพท 3.11 , slide.blade.php ไวเปนหนาแทรก Content ในหนาหลก , header.blade.php สวนของ Header , footer.blade.php สวนของ Footer ไวท resources/views/admin
ภาพท 3.11 home.blade.php ใชส าหรบเกบคา template หลกสวน 1
27
ภาพท 3.12 home.blade.php ใชส าหรบเกบคาtemplate หลกสวนท 2
ในสวนของหนาหลกมไวเพอสามารถใช CSS, JavaScript รวมกนในหนาบานได ท าใหถาใช JavaScript นอกเหนอจากใน Template สามารถมาเพม Script และ CSS ไดในหนานโดย Laravel ม Function ทใชในการแทรกตรงใน Blade คอ include โดย Template หลกจะเขยน @include ดงคาไฟลทตองการจะแทรก จากภาพท 3.12 จะดงคาไฟล Header และ Footer มาแทรกในหนาหลก
28
ภาพท 3.13 header.blade.php ไฟลทจะแทรก
จากภาพท 3.13 ตรงสวน Header ทตองการจะแทรกจะเขยน Code แบบ HTML ตรงนสวน
นจะดดแปลงจาก Header ของ Template แกไขแบงเปน Section ออกเปน 5 สวน คอ เปาหมาย ท าไมตองเวย ผลตภณฑ บทความและตดตอเรา
ภาพท 3.14 footer.blade.php ไฟลทจะแทรก
29
จากภาพท 3.14 ตรงสวน Footer ทตองการจะแทรกจะเขยน Code แบบ HTML ตรงนสวนนจะดดแปลงจาก Footer ของ Template แกไขแบงเปน Section ออกเปน 5 สวน คอ เปาหมาย ท าไมตองเวย ผลตภณฑ บทความและตดตอเรา
เมอแทรกส าเรจถาสรางไฟลเพมขนจะมสวน Header และ Footer ขนมาตลอดท าใหเวลาเขยนหนาใหมไมจ าเปนตองเขยน Header และ Footer ขนมาใหม
ภาพท 3.15 slide.blade.php ไฟลทจะแทรก
ในสวนของ slide.blade.php คอไฟลทตองการจะแทรกในหนาหลกแตจะตางกบการแทรกของ Header และ Footer คอจะแทรกไฟลขนมาเปนหนงหนา
จากภาพท 3.15 ตรงสวนแรกจะเหน @extends('admin.home') คอการไปแทรกทไฟล home.blade.php ในแฟม home และ @section('bodybulider') @stop คอการแทรก Content ลงในหนา home.blade.php ในสวนทประกาศ @yield(‘bodybulider’)ในภาพท 3.12
30
ในสวนของ controller สรางไฟลท app/Http/Controllers ชอ TestController.php
ภาพท 3.16 TestController.php
จากภาพท3.16 เขยน Controller สงให View หนา slide.blade.php ทอยในแฟม admin ท างาน แตตรงสวนนจะยงแสดงผลไมไดตองไปก าหนด URL ท Route
Route กเปรยบเสมอนตวจดการ URL ทตองการใหแสดงผล ท าการเปดไฟล app/Http/routes.php โดย Laravel สามารถทดสอบการแสดงผล ดวยการพมพ http://localhost/public/ ลงไปทชอง URL ของ Browser เนองจากในตวLaravel จะใหท างานผาน public ตองแกท .htaccess ดงภาพท 3.17 เมอแกไดแลวจะสามารถท างานนอก publicได
ภาพท 3.17 .htaccess
31
ก าหนดใหหนา slide.blade.php ท างานโดยการ เพมค าสง Route::get('testhome', 'TestController@getindex'); ในไฟล route.php
ดงภาพท 3.18 Route ค าสงนหมายถงพมพ http://localhost/testhome ลงไปทชอง URL ของ Browser สงใหแสดงหนาเวบตามท Controller ชอ TestController.php Method Index สงใหท างาน
ภาพท 3.18 สวนของ route
ภาพท3.19 ผลลพธทไดสวนท1
32
ภาพท 3.20 ผลลพธทไดสวนท 2
จากภาพท3.19 และ ภาพท 3.20 แสดงผลลพธเมอพมพhttp://localhost/testhome ลงไปทชอง URL ของ Browser ตรงสวนสไลดใช JavaScript ชวย จะเหนไดวามทงสวน Header,Footer, หนาแทรกขนมาครบตามทก าหนดไว
5) สรางทกหนาใหครบตามทก าหนดไวในขางตนแตยงท าไมสมบรณเนองจากมสวนของหลงบานในการจดการขอมลไดจงท าสวนหลงบานใหสมบรณกอน
3.3.3 ท าสวนหลงบาน 1) หลงบานจะใชtemplate อกแบบซงเปน Template Bootstap ทไวใชกบ Laravel
โดยเฉพาะ 2) ดาวนโหลด Template SB Admin Laravel 5 3) น าไฟลมา Unzip 4) น าไฟลเขาแฟม laravel-project 5) แบงไฟลแบบหนาบาน สรางหนาเวบขนมา 1 หนา 6) เรมท าสวนหลงบาน
33
3.3.3.1 การเชอมตอฐานขอมล
สวนของหลงบานจะมใช Database ในการเกบขอมล โดย Laravel จะมModel ในจดการสวนของ Database กอนจะสราง Model จะเชอมตอกบฐานขอมลโดยเปดไฟล config/database.php คนหาบรรทด ‘mysql’ => [ แกไขขอมลตามภาพท 3.21
ภาพท 3.21 แกไข database.php ทตองการเชอมตอ
3.3.3.2 การสราง table โดยใช Migration Laravel ม The Eloquent ORM Feature คอ Migration ทสามารถสรางtable ใน Database
ได โดยการสรางตารางนน 1) เปด Command Prompt 2) เขา Directory ทเราไดตดตง Laravel ของเรา C:/xampp/htdocs/Laravel-project\
3) พมพ php artisan make:migration create_table_users เมอเสรจหามปด 4) เขาไปดทแฟม laravel-project เขาไปทแฟม database/migrations จะพบไฟลทท าการสรางเพมขนมาคอ โดยจะมวนทก ากบดานหนาของไฟล เพอปองกนไฟลซ า ไฟลทไดจะเปน 2016_08_19_080721_create_table_users.php กดเขาไฟลจะมscriptตนฉบบทยงไมมคาใสใน up และ down ใหเพม script ท าการสรางตารางชอวา users โดยใช Schema::create() ในการสราง ดงภาพท 3.22
34
ภาพท 3.22 การเพม script ใน 2016_08_19_080721_create_table_users.php
5) เมอแกไขเสรจแลว พมพ php artisan migrate –force ใน Command Prompt ตอ เมอท าการระบบจะสรางตาราง users ขนมา
6) เนองจากท าสวน login จะตองมขอมลในตาราง users จงใสขอมลลงไดโดยเปด
database/seeds ท าการเปดไฟล DatabaseSeeder.php แกไขจาก script ตนฉบบดงภาพท 3.23
35
ภาพท 3.23 การเพม script ใน DatabaseSeeder.php
7) เมอแกไขเสรจแลว พมพ php artisan db:seed ใน Command Prompt ตอ เมอตรวจสอบ
ทตาราง users อกครง จะพบวามการเพมขอมลลงไปเรยบรอยแลว
3.3.3.3 การท า Login เขาระบบหลงบาน เมอสราง table เรยบรอยจะมาท าสวนของloginเขาระบบหลงบานโดย 1) สราง controller ชอวา LoginController.php ไวท /Http/Controller/backend เขยนscript
ดงภาพท 3.24
36
ภาพท 3.24 LoginController.php
โดยในภาพท 3.24 Controller ตรวจสอบวา มการ Login อยหรอไม ถา Login อย ระบบจะท าการ redirect ไปหนา backend ถายง กใหอยในหนา Login และตรวจสอบคาทสงมาจากฟอรม Login แลวเรยกใชการ Validate จาก LoginRequest
2) ท าการสรางฟอรม Request เพอท าการ Validate คาวางของ Input ฟอรม ท าการสรางไวท app/Http/Requests ชอวา LoginRequest.php แกไข script ดงภาพท 3.25 (Request สามารถก าหนดตวอกษรหรอขอความแสดงขนเมอท างานผดพลาด)
ภาพท 3.25 LoginRequest.php
37
3) ก าหนดคา Middleware เพอท าการตรวจสอบคา Login วา หากยงไมได Login จะใหมนวงไปหนาไหน และก าหนดเงอนไขการ Login ซงจาก Script การตรวจสอบอย 2 ล าดบคอ มการ Login อยหรอไม ถาเกดการ Login ขนแลว field type มคาเปน admin หรอไม ถาไมใหท าการ Logout และ Redirect ไปทหนา /login ใหท าการสรางไวท app/Http/Middleware ชอวา Admin.php ดงภาพท 3.26
ภาพท 3.26 Admin.php
4) หลงจากทท าการสราง Middleware Admins แลวใหท าการเปดไฟล app/Http/Kernel.php เพอท าการลงทะเบยนใหกบ Middleware Admins โดยใหแทรก 'admins' => 'App\Http\Middleware\Admin', ไว ภายในหากไมท าการแทรกไว protected $routeMiddleware = [] ดงภาพท 3.27
38
ภาพท 3.27 แกไขใน Kernel.php
จากภาพท3.27 หากไมท าการแทรก ระบบจะแจง Error วาหา Class Admin ไมพบ 5) ท าสวนของ View โดยสรางแฟม backend ขนมาใน resources/views แลวสรางไฟล
login.blade.phpไวท resources/views/backend เขยน Code ดงภาพท 3.28
39
ภาพท 3.28 login.blade.php
จากภาพท 3.28 {!!$errors->first('username', '<span class="control-label color-red" for="username">*:message</span>')!! หากม error ทเกดจาก Validate จาก LoginRequest สงกลบมาใหแสดงคาทสราง tag html ได
6) ก าหนด Route โดยเขยน Code Route::controller('login','backend\LoginController'); Route::group(['middleware'=>'auth'],function() { Route::controller('backend','backend\DashboardController'); }); Route::group() นนคอการก าหนดให Route ภายในท างานหลงจากการตรวจสอบเงอนไข
ของ Middleware แลวซงในทนใชส าหรบการตรวจสอบเงอนไข หลงจากการ Login ถา Login ส าเรจสามารถเปดหนา backend ได
40
3.3.3.4 วธการเขยนเวบไซตหนาการจดการสนคา เนองจากทก Section สามารถดตารางรวม เพม ลบ แกไข Database จงขอยกตวอยาง
Section สนคา 1) สราง Model ใน app ชอ Product.php เขยน script ดงภาพท 3.29 ก าหนดใหดงขอมลใน
Table ของ product
ภาพท 3.29 การเขยนModel ชอ Product.php
2) การดสนคาทงหมดจะแสดงในรปของตาราง สวนของ View สรางไฟล allproduct.blade.phpไวท resources/views/backend เขยน HTML ฟอรม สวนทดงขอมลขนตารางเขยน script ดงภาพท 3.30
41
ภาพท 3.30 allproduct.blade.php
จากภาพท 3.30 คอขนตอนการดงขอมล 2 table โดยสวนทอยใน <? php ?> คอการดงขอมลจาก database ผาน Model โดยตรงแตสวน @foreach จะตองไปก าหนด Model ท Controller ถงจะสามารถดงขอมลขนมาไดใน Laravel Framework การดงขอมลจาก Database ใช {{ $ ชอทก าหนดใน @foreach -> ขอมลทตองการ }} เชน {{$product->name}} ในการดงขอมลชอของตาราง product ออกมา แตในกรณของรปภาพถาเขยนการดงขอมลแบบ{{$product->picture}} จะแสดงเฉพาะชอรปภาพเทานนเนองจาก Database จะเกบขอมลเฉพาะชอรปภาพ เขยน Code ดงน src="{{asset('img/upload/'.$product->picture)}}" จะผลออกมาเปนรปภาพเลย
3) สวนของ View หนาเพมสนคาและแกไขสนคาจะใชฟอรมตวเดยวกน จะใสคา {{ $product ? $product->picture : old('picture') }} จะก าหนดใหดคา id ถาตรวจสอบไมมคาเลข id ฟอรมจะวาง แตถาม id จะแสดงขอมลเกา ดงภาพท 3.31
42
ภาพท 3.31 ฟอรมหนาเพมสนคาและแกไขสนคา
4) สวนของการแสดงสนคาหลงบานจะใชวธเดยวกบการเพมสนคาและแกไขสนคา แตจะใชฟอรมและ Controller แตกตางกนดงภาพท 3.32
ภาพท 3.32 ฟอรมหนาแสดงสนคา
43
5) View ทงหมดของ Section สนคาจะใช Controller ไฟลเดยวกน โดยสรางไฟล ProductBackend.php ไวท /Http/Controller/backend ในหนา ProductBackend.php จะก าหนดการใชงาน Model หรอ Requests สวน Function getindex เปน Function ทแสดงตารางทงหมดของหนา View ชอ allproduct.blade.php ดงภาพท 3.33
ภาพท 3.33 ProductBackend.php สวน getindex
Function ของ controller ตอมาดงภาพท 3.34 getForm คอ function ส าหรบแสดงหนา
ฟอรมเพมและแกไขสนคาหรอ addproduct.blade.php โดยใน Function ถามคา id จะแสดงขอมลเกาตรงทเราก าหนดใน View แตถาเปนคาวางจะเปนหนาวาง ซง getShow การเขยน Function จะลกษณะเหมอนกน
ภาพท 3.34 ProductBackend.php สวน getForm และ getShow
44
Function ของ Controller ตอมาดงภาพท 3.35 postForm คอการเกบขอมลเขาdatabase ตรงสวนทละไวตรงกลางคอ Function Upload รปภาพ
ภาพท 3.35 ProductBackend.php สวน postForm
Function ของ Controller ตอมาดงภาพท 3.36 postAction คอ Function ลบขอมลจากตาราง
หรอ Database
ภาพท 3.36 ProductBackend.php สวน postAction
45
3.3.4 ท าสวนหนาบานใหสมบรณ 1) การแสดงสนคาขนตามหนาเปาหมาย สวนของ Veiw ใช PHP เรยก Database Model
Product ขนกอน แลวใช if ในการก าหนดเงอนไขใหแสดงเฉพาะสนคาCategory ของเปาหมาย ใน Laravel Framework การดงขอมลจาก Database ใช {{$product->name}} ในการดงขอมลชอของตาราง product ดงภาพท 3.37 และ ภาพท 3.38
ภาพท 3.37 ตวอยาง code แสดงสนคาตามเปาหมาย
46
ภาพท 3.38 ผลลพธแสดงสนคาตามเปาหมาย
2 ) การท าหนารวมสนคา ใช JavaScript เขามาชวยดงภาพท 3.39
ภาพท 3.39 สนคาทงหมด
บทท 4
สรปผลการด าเนนงาน การวเคราะหและสรปผลตางๆ
4.1 ขนตอนและผลการด าเนนงาน
4.1.1 ผลการออกแบบและพฒนาเวบไซต Mega Whey
สามารถท าเวบไซตไดตามความตองการของลกคา กอนทจะเสนอลกคาไดนนตองไดรบ
การตรวจสอบความเรยบรอยจากพเลยงในฝายกอนถงจะสามารถน าออกไปใชจรงได โดยเวบไซต
ในสวนของหนาบานสามารถดสนคา บทความ และสามารถตดตอกบผใชงานไดโดยจะแบง
หนาตางๆใหใชงานไดงาย มความสวยงาม และสวนของหลงบานสามารถเพมลบแกไขบทความ
สนคา Category ผดแล และสามารถดการตดตอจากลกคาได จากการปรกษากบพเลยงโดยรวมถอ
วาท าออกมาไดด แตอาจจะตองเพมลกเลนใหเวบไซตมความนาสนใจยงขน
4.1.2 ตวอยางเวบไซตสวนหนาบาน
1) ผใชงานเลอกเปาหมาย เนองจากเปนเวบโปรโมทผลตภณฑ Mega Whey ทางลกคาจง
แบงเปาหมาย 5 อยางทเกยวของกบผลตภณฑเวยโปรตนคอสรางกลามเนอ ฟนฟสขภาพ ลด
น าหนก เพมความสงและเตมเตมความรก หนาแรกจงท าในภาพทแบบสไลดใหดสวยงามและม
ความนาสนใจดงภาพท 4.1 และ ภาพท 4.2
48
ภาพท 4.1 ตวอยางเวบไซตหนาhome
ภาพท 4.2 ตวอยางเวบไซตสวนสไลด 5 เปาหมาย
49
จากภาพท 4.2 จะเปน Auto Slide ถาเลอกเปาหมายไดแลว สามารถกด choose เขาหนา
เปาหมายได
2) ตวอยางหนาเปาหมายดงภาพท 4.3
ภาพท 4.3 ตวอยางเวบไซตหนาเปาหมายสวนทหนง
สามารถเลอกความสนใจเมอกดตรงหวขอยอยจะแสดงบทความทตรงกบหวขอ
นนขนมาดงภาพท 4.4
50
ภาพท 4.4 ตวอยางเวบไซตหนาเปาหมายสวนทสอง
แสดงสนคาทมสวนชวยในการบรรลเปาหมายดงภาพท 4.5
ภาพท 4.5 ตวอยางเวบไซตสวนทแสดงสนคาของหนาเปาหมาย
51
แสดงบทความทเกยวของดงภาพท 4.6
ภาพท 4.6 ตวอยางเวบไซตแสดงบทความทเกยวของกบเปาหมาย
3) สวนท าไมตอง Mega Whey บอกถงขอดของ Mega Whey ดงภาพท 4.7
ภาพท 4.7 ตวอยางเวบไซตสวนของท าไมตอง Mega Whey
52
4) สวนแสดงผลตภณฑทงหมด สามารถดผลตภณฑและสามารถกดทดเพมเตมเพอด
รายละเอยดสนคาภายในได เนองจากเปนเวบโปรโมทสนคาจะไมมบอกราคา ดงภาพท 4.8 และ
ภาพท 4.9
ภาพท 4.8 ตวอยางเวบไซตสวนแสดงผลตภณฑทงหมด
ภาพท 4.9 ตวอยางเวบไซต เมอกดปมดเพมเตม
53
5) บทความ จะแสดงบทความทงหมด เมอกดปม Read more จะแสดงรายละเอยดบทความ
ดงภาพท 4.10 – 4.12
ภาพท 4.10 ตวอยางเวบไซตหนาบทความ
ภาพท 4.11 ตวอยางเวบไซตสวนแสดงบทความทงหมด
54
ภาพท 4.12 ตวอยางเวบไซตสวนแสดงรายละเอยดบทความ
6) การตดตอ สามารถพมพขอความหาบรษทไดโดยทางบรษทจะสงอเมลตอบกลบใน
ภายหลงดงภาพท 4.13
ภาพท 4.13 ตวอยางเวบไซตสวนของหนาการตดตอ
55
4.1.3 ตวอยางเวบไซตสวนหลงบาน
1) หนา Login ผดแลระบบท าการ Login เพอใชงานระบบดงภาพท 4.14
ภาพท 4.14 ตวอยางเวบไซตหนาเพจ Login เพอเขาใชงานระบบ
2) เมอท าการ Login เขามาแลวจะแสดงหนาแรกดงภาพท4.15
ภาพท 4.15 ตวอยางเวบไซตหนาแรกของหลงบาน
56
3) ผดแลสามารถเพมบทความใหขนในเวบไซดไดโดยเมอเขามาสวนของบทความจะ
แสดงบทความทงหมดในรปแบบตาราง สามารถเพมบทความ ลบบทความ และแกไขบทความได
ดงภาพท 4.16 – 4.18
ภาพท 4.16 ตวอยางเวบไซตหนาบทความทงหมด
ภาพท 4.17 ตวอยางเวบไซตหนาเพมบทความ
57
ภาพท 4.18 ตวอยางเวบไซต แกไขบทความ
4) ผดแลสามารถเพมสนคาใหขนในเวบไซดไดโดยเมอเขาหนาแรกของสนคาจะแสดง
สนคาทงหมดในรปแบบตาราง สามารถแสดงรายละเอยดสนคา เพมสนคา ลบสนคา และแกไข
สนคาได ดงภาพท 4.19 - 4.22
ภาพท 4.19 ตวอยางเวบไซตตารางแสดงสนคาทงหมด
58
ภาพท 4.20 ตวอยางเวบไซตหนาเพมสนคา
ภาพท 4.21 ตวอยางเวบไซตแสดงรายละเอยดสนคาทงหมด
59
ภาพท 4.22 ตวอยางเวบไซตหนาแกไขสนคา
5) ผดแลสามารถเพมและลบ category ของสนคาไดโดยจะจะมหนาทแสดง Category
ทงหมดในรปแบบตาราง ดงภาพท 4.23
ภาพท 4.23 ตวอยางเวบไซตแสดงcategory product ทงหมด
60
6) ผดแลสามารถเพมและลบ category ของบทความไดโดยจะจะมหนาทแสดง Category
ในรปแบบตาราง ดงภาพท 4.24 และ 4.25
ภาพท 4.24 ตวอยางเวบไซต แสดง category ของบทความทงหมด
ภาพท 4.25 ตวอยางเวบไซตหนาเพม category บทความ
61
7) ผดแลสามารถก าหนดผเขาใชงานในสวนของหลงบานไดทหนานโดยจะสามารถเพม
แกไข และลบผเขาใชงานได ดงภาพท 4.26 - 4.28
ภาพท 4.26 ตวอยางเวบไซตแสดงผดแลหลงบานทงหมด
ภาพท 4.27 ตวอยางเวบไซตหนาเพมผดแล
62
ภาพท 4.28 ตวอยางเวบไซตหนาแกไขผดแล
8) ผดแลสามารถดขอความทลกคาตดตอจากหนาบานได โดยทางผดแลจะสงอเมลตอบใน
ภายหลง ดงภาพท 4.29 และ ภาพท 4.30
ภาพท 4.29 ตวอยางเวบไซตแสดงการตดตอทงหมด
63
ภาพท 4.30 ตวอยางเวบไซต แสดงรายละเอยดการตดตอของแตละบคคล
4.2 วเคราะหขอมลตามจดมงหมายในการปฏบตงานและจดท าโครงงาน 4.2.1 สรปผลของการวเคราะห
4.2.1.1 ขอดของเวบไซต
เวบไซตมความสวยงาม ท าใหใชงานไดอยางสะดวก ใชงานไดงาย มระบบหลงบานทสามารถจดการกบหนาบานได ผทน าไปพฒนาตอสามารถเขาใจสวนของเวบไดงาย เนองจากLaravel Framework มการแบงสวนของหนาเวบตางๆอยางชดเจน
4.2.1.2 ขอเสยของเวบไซต
ยงตองพฒนาในสวนตางๆเชนเพมในสวนหลงบานในการท าการแจงเตอนเมอมผ
ตดตอ หรอมหนาแจงยอดผเขาใชงานเวบไซต เปนตน เพอใหเวบมลกเลนมากกวาน
หากเปดขนมาใชจรงยงมหลายจดทตองแกไข เชน สวนหนา slide ตกแตงให
สวยงามขน เพมบทความใหครบ เปนตน
64
4.3 วจารณขอมลโดยเปรยบเทยบผลทไดรบกบวตถประสงค และจดมงหมายในการ
ปฏบตงานหรอการจดท าโครงการ ผลทไดรบจากพฒนาเวบไซต Mega Whey ทสามารถตอบสนองความตองการตาม
วตถประสงคดงน
ตารางท 4.1 ตารางเปรยบเทยบวตถประสงคกบผลทไดรบ
วตถประสงค ผลทไดรบ
สรางเวบไซต Mega Whey ใหกบลกคาท
บรษท
สามารถสรางไดจรงและเปนไปตามความตองการของลกคา มประสทธภาพและถกตองแมนย า เวบไซตมการแบงหมวดหมทชดเจน มสวนของหลงบานและหนาบาน
ใช Laravel Framework ในการพฒนา
เวบไซตได สามารถใช Laravel Framework พฒนาเวบไซตไดในระดบพนฐาน
เวบไซตสามารถน าไปใชไดจรง ทางบรษทจะน าไปตอยอดและน าเสนอลกคาจรง
เพอน าความรจากการฝกอบรมมาใชในการ
ท างานไดจรง
จากการท างานในบรษทไดทบทวนความรเรอง HTML CSS และ JavaScript ท าใหน าความรนนมาใชในการตกแตงหนาตาเวบไซต
สรางเวบไซตโดยเนนความตองการของ
ลกคา
ท าใหการพฒนาจะดความตองการของลกคาเปนหลก เชน เวบไซตตองการจะใหโปรโมทผลตภณฑจงไดก าหนดธมสเปนสด า มหนาผลตภณฑ หนาบทความ ตองการแบงตามเปาหมาย มสวนของหลงบานซงไดท าทงหมดตามความตองการของลกคา
บทท 5
บทสรปและขอเสนอแนะ
5.1 สรปผลการด าเนนการ
จากการปฏบตงานสหกจศกษาท บรษท อาเลฟ จ ากดในต าแหนง Developer ระยะเวลา
ทงสน 4 เดอนตงแตเดอนมถนายนถงเดอนกนยายนนน นกศกษาไดความรและประสบการณใหม
ในการท างาน เชน หลกการของการท างาน โครงสรางภายในบรษท วฒนธรรมภายในองคกร การ
รจกเขาสงคมใหม การท างานเปนกลมเปนทม การวางแผนการท างานใหเปนระบบและมขนตอน
การรจกแกไขปญหาเฉพาะหนา การรจกรบผดชอบตองานทไดรบ ในสวนของโครงงานนนถงแม
จะไมสมบรณทงหมดแตกถอเปนทนาพอใจ เพราะสามารถน ามาใชงานไดจรง และถกตองตาม
ความตองการของลกคา แตเวบไซตอาจจะตองเพมฟงคชนหรอลกเลนเพมเตมเพอน ามาเปดใชงาน
จรง
5.2 แนวทางการแกไขปญหา
จากการด าเนนการออกแบบ และพฒนาเวบไซต Mega Whey ปญหาทพบคอการใช
Laravel Framework เนองจากนกศกษาไมเคยเขยนโคดแบบ Framework และเนองจากความ
ซบซอนของ Laravel Framework ท าใหท างานออกมาลาชา มความรพนฐาน เชน PHP ไมเพยงพอ
ท าใหเกดขอผดพลาดในการท างานบอยครง ไมเขาใจการท างานของ JavaScript การแกปญหาคอ
หาขอมลจาก google หรอทเวบไซต https://laravel.com/ และปรกษากบพเลยงถงปญหาทเกดขน
5.3 ขอเสนอแนะ
ควรจะศกษาการใชโดยดจากหลากหลายเวบไซตและหนงสอหลากหลายเลมเนองจากม
การเขยนทหลากหลายแบบ
เอกสารอางอง
[1] Suranart Niamcome , รจกกบ Front-end Framework [online] , Available : http://www.siamhtml.com/bootstrap-คออะไร -อใธ วนอส [2016, June 5]
[2] Atthakorn , Framework คออะไรท าไมเราถงตองใช Framework [online], Available: https://atthakorn.com/ท ำไมเรำถงตสองนอส-framework/ [2016, June 5]
[3] มำใพ กองอใ, เหตผลทควรใช Framework ในการพฒนา Web Application ดวยภาษา PHP [online], Available: https://www.programmerthailand.com/blog/view/ 114/เหตผลทวครนอส-framework-นใกำรพฒใำ-web-application-ดส ยภำษำ-php [2016, June 6]
[4] บรธษท โคดบว จ ำกด, MVC คออะไร ท าความเขาใจรปแบบการเขยนโปรแกรม[online], Available: https://www.codebee.co.th/labs/mvc -คออะไร-ท ำคำมเมสำนจรท/ [2016, June 7]
[5] Supawat Konhan, MVC แนวคดการเขยนโปรแกรม ทหลายคนอาจจะไมรจก [online] , Available : http://sundryanything.blogspot.com/2014/03/mvc.html [2016, June 7]
[6] happyeverytime, MVC Pattern [online] , Available : http://happyeverytime.exteen.com/20090609/mvc-pattern [2016, June 7]
[7] Suranart Niamcome, Responsive Web Design คออะไร [online] , Available : http://www.siamhtml.com/responsive-web-design-คออะไร/ [2016, June 10] [8] Softmelt Co.,Ltd., ท าไมตอง Responsive Web Design [online] ,
Available : http://www.softmelt.com/article.php?id=391[2016, June 10] [9] Bundit Nuntates, LARAVEL ตอนท 1 : รจก LARAVEL [online] ,
Available : http://gunoob.com/laravel-ตอใทว-1-รท สจก-laravel/ [2016, June 12] [10] Taqman , รท สจก Laravel กำรตธดตงและตงคำพใฐำในหส Laravel PHP Framework
LARAVEL [online] , Available : http://www.thaicreate.com/community/laravel-installation-setup.html [2016, June 12]
[11] Kamol Chalermviriya, Laravel ดยงไง เจงยงไง หรอวามขอเสยทตรงไหน [online] , Available : http://kamolcu.blogspot.com/2014/08/laravel-php-web-development-framework.html [2016, June 13]
[12] techguideit, Sublime Text 3 โปรแกรมเขยน Code ขนเทพ [online] , Available : http://www.techguideit.com/sublime-text-3-โปรแกรมเมวยใ-code-มใเทพ/[2016, June 15]
67
[13] Ninetechno.com, XAMPP คออะไร [online] , Available : http://www.ninetechno.com/a/website/873-xampp.html [2016, June 16]
[14] Suranart Niamcome, Bootstrap คออะไร +สอนวใใชแบบเขาใจงาย [online] , Available : http://www.siamhtml.com/bootstrap-คออะไร -อใธ วนอส/ [2016, June 17]
[15] hellomyweb.com, ความรพนฐานเกยวกบ JavaScript [online] , Available : http://www.hellomyweb.com/index.php/main/content/131 [2016, June 17]
[16] CreatorThai.com, สอน html5 ตอนท 6 javascript คออะไร? [online] , Available : https://creatorthai.comอใ-html5-ตอใทว-5-javascript-คออะไร / [2016, June 17]
[17] MODIFY: Technology News, มาท าความรจกกบภาษา PHP [online] , Available : http://www.modify.in.th/9094 [2016, June 17]
[18] Enjoyday.net, HTML คออะไร [online] , Available : http://www.enjoyday.net/webtutorial/html/html_chapter01.html [2016, June 18]
[19] SEO บลอก, CSS คออะไร? มประโยชนอยางไรบาง [online] , Available : http://www.seo-winner.com/CSS_What [2016, June 19]
ภาคผนวก ก.
ตวอยางผลงานในบรษท
69
ตวอยางผลงานในบรษท
1. Doodle Wall and Post It Wall
Doodle WallและPosi It Wall เปนโปรเจคททางบรษทอเลฟ ไทยแลนดคดขนเพอท าใหทศนยภาพในสถานทประกอบการดขน โดยใหนกศกษาสหกจเปนผออกแบบและด าเนนงาน ผลงานดงภาพท ก.1-ก.8
ภาพท ก.1 ตวอยางระหวางการด าเนนงาน Doodle Wall ชนท 1
70
ภาพท ก.2 ตวอยาง การด าเนนงานเสรจสนของ Doodle Wall ชนท 1
71
ภาพท ก.3 ตวอยางงาน design Doodle Wall ชนท 2
ภาพท ก.4 ตวอยางการด าเนนงานเสรจสนของDoodle Wall ชนท 2
72
ภาพท ก.5 ตวอยางการด าเนนงานเสรจสนDoodle Wall ชนท 3
ภาพท ก.6 ตวอยางระหวางการด าเนนงาน Post it wall ชนท 1
73
ภาพท ก.7 ตวอยางรปการด าเนนงานเสรจสน Post it wall ชนท 1
ภาพท ก.8 ตวอยางการด าเนนงานเสรจสน Post it wall ชนท 2
74
2. Content Facebook
ไดไปชวยฝาย design ท า Content Facebook ใหมพลสโดยท าภาพตามความตองการของลกคา ยกตวอยางผลงานดงภาพท ก.9-ก.10
ภาพท ก.9 ตวอยางผลงาน Content Facebook รปท 1
ภาพท ก.10 ตวอยางผลงาน Content Facebook รปท 2
ประวตผจดท ำโครงงำน
ชอ – สกล นางสาวดจดาว รงพรยะเดช
วน เดอน ปเกด 30 สงหาคม 2537
ประวตกำรศกษำ
ระดบประถมศกษา ประถมศกษา พ.ศ. 2543
โรงเรยนปยะจตวทยา
ระดบมธยมศกษา มธยมศกษา พ.ศ. 2549
โรงเรยนเตรยมอดมศกษาพฒนาการ
ระดบอดมศกษา คณะเทคโนโลยสารสนเทศ สาขาเทคโนโลยสารสนเทศ พ.ศ.2556
สถาบนเทคโนโลยไทย – ญปน
ทนกำรศกษำ ไมม
ประวตกำรฝกอบรม 1) The Special Seminar On Space Technology 2) The Special Seminar Microsoft Dreamspark 3) Seminar at Chali Under Water Cable Station 4) Seminar at Tan Land 5) Aso juku camp in fukuoka ผลงำนทไดรบกำรตพมพ ไมม