การพฒนาเวบไซต 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 : preecha.p@aleph-labs.com

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 ผลงำนทไดรบกำรตพมพ ไมม