design website of insurance brokerage...
TRANSCRIPT
รายงานการปฏบตงานสหกจศกษา
ออกแบบเวบไซตของส านกงานนายหนาประกนวนาศภย Design Website of Insurance Brokerage Commission
บรษท ออเรนจ เทคโนโลย โซลชน จ ากด
โดย
นายภมศกด ภมรนทร 5804800071
รายงานนเปนสวนหนงของรายวชาสหกจศกษาส าหรบนกวทยาการคอมพวเตอร
ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร มหาวทยาลยสยาม
ภาคการศกษาท 3 ปการศกษา 2560
ก
จดหมายน าสงรายงาน
วนท 31 สงหาคม พ.ศ. 2561
เรอง ขอสงรายงานการปฏบตงานสหกจศกษา
เรยน อาจารยทปรกษาสหกจศกษา ภาควชาวทยาการคอมพวเตอร
อาจารยจรรยา แหยมเจรญ
ตามทผจดท า นายภมศกด ภมรนทร รหสนกศกษา 5804800071 นกศกษาภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร มหาวทยาลยสยาม ไดไปปฏบตงานสหกจศกษา ระหวางวนท 14 พฤษภาคม พ.ศ. 2561 ถงวนท 31 สงหาคม พ.ศ. 2561 ในต าแหนง Web Designer ณ บรษท ออเรนจ เทคโนโลย โซลชน จ ากด และไดรบมอบหมายจากพนกงานทปรกษาใหออกแบบเวบไซตส านกงานนายหนาประกนวนาศภย บดน การปฏบตงานสหกจศกษาไดสนสดแลว ผจดท าขอสงรายงานดงกลาวมาพรอมกนน จ านวน 1 เลม เพอขอรบค าปรกษาตอไป จงเรยนมาเพอโปรดพจารณา
ขอแสดงความนบถอ
นาย ภมศกด ภมรนทร
นกศกษาสหกจศกษาภาควชาวทยาการคอมพวเตอร
ข
กตตกรรมประกาศ
(Acknowledgment)
การทผจดท า ไดมาปฏบตงานในโครงการสหกจศกษา ณ บรษท ออเรนจ เทคโนโลย โซลชน
จ ากด ตงแต วนท 14 พฤษภาคม พ.ศ. 2561 ถงวนท 31 สงหาคม พ.ศ. 2561 สงผลใหไดรบความรและ
ประสบการณตางๆ ทมคามากมาย ส าหรบรายงานสหกจศกษาฉบบนส าเรจลงไดดวยด จากการรวมมอ
และสนบสนนจาก หลายฝาย ดงน
1. นายฉลมวฒ เทยงตรง ต าแหนง : Programmer 2. นางสาวกลมวรรณ บตรพนธ ต าแหนง : Designer
รวมไปถงพนกงานภายในบรษท บรษท น าพลส จ ากด และบคคลอนๆ ทไมไดกลาวนาม ทก
ทานทไดใหค าแนะน าชวยเหลอในการจดท ารายงาน
ผจดท า ใครขอขอบพระคณผทมสวนเกยวของทกทานทมสวนรวมในการใหขอมลและเปนท
ปรกษาในการท ารายงานฉบบนจนเสรจสมบรณ ตลอดจนใหการดแลและใหความเขาใจในการท างาน
จรง ซงผจดท า ขอขอบพระคณเปนอยางสงไว ณ ทนดวย
ผจดท า
28 สงหาคม 2561
ค
ชอโครงงาน : ออกแบบเวบไซตของส ำนกงำนนำยหนำประกนวนำศภย
ชอนกศกษา : นำยภมศกด ภมรนทร 5804800071
อาจารยทปรกษา : อำจำรยจรรยำ แหยมเจรญ
ระดบการศกษา : ปรญญำตร
ภาควชา : วทยำกำรคอมพวเตอร
คณะ : วทยำศำสตร
ภาคการศกษา/ ปการศกษา : 3/2560
บทคดยอ
จำกกำรทผจดท ำไดไปปฏบตงำนสหกจศกษำ ณ บรษท ออเรนจ เทคโนโลย โซลชน จ ำกดซงเปนบรษทประกอบธรกจเกยวกบใหบรกำรพฒนำเวบไซตและระบบไอทใหกบหนวยงำนและองคกรตำงๆ ผจดท ำไดไปปฏบตงำนในต ำแหนงออกแบบเวบไซตจงไดรบมอบหมำยใหด ำเนนกำรในสวนของกำรออกแบบเวบไซตใหกบส ำนกงำนนำยหนำประกนวนำศภย ซงเปนสวนตดตอกบผใช (User Interface) ทงหมด ผจ ดท ำจงไดเกบรวบรวมควำมตองกำรจำกส ำนงำนนำยหนำประกนวนำศภยประยกต และท ำกำรออกแบบหนำเวบโดยยดหลกกำรออกแบบใหผใชใชงำนงำย หรอ UX/UI และพฒนำหนำเพจตำงๆ โดยใชเครองมอ Atom เปนโปรแกรมเขยนชดค ำสง ดวยภำษำ HTML5, CSS, PHP และ Bootstrap Framework ซงผลจำกกำรทดสอบของผใช ผใชมควำมพงพอใจในรปแบบทไดท ำกำรออกแบบ ค าส าคญ : ออกแบบเวบไซต, ส ำนงำนนำยหนำประกนวนำศภย
สารบญ
หนา
จดหมายน าสงรายงาน ................................................................................................................ ก กตตกรรมประกาศ ..................................................................................................................... ข บทคดยอ .................................................................................................................................... ค
Abstract ...................................................................................................................................................ง
บทท 1 บทน า
1.1ความเปนมาและความส าคญของปญหา ............................................................................... 1
1.1วตถประสงคของโครงงาน .................................................................................................. 1
1.3ขอบเขตของโครงงาน ........................................................................................................... 1 1.4ประโยชนทไดรบ ................................................................................................................. 2 1.5ขนตอนและวธด าเนนงาน .................................................................................................... 2
1.6อปกรณและเครองมอทใช .................................................................................................... 3
บทท 2 แนวคดและทฤษฎทเกยวของ
2.1 JavaScript ........................................................................................................................... 4
2.2 ATOM EDITOR ................................................................................................................. 5
2.3 Adobe Photoshop ................................................................................................................ 6
2.4 Bootstrap Framework .......................................................................................................... 7
2.5 Cascade Style Sheet (CSS) .................................................................................................. 8
บทท 3 รายละเอยดการปฏบตงาน
3.1. ชอและสถานทตงของสถานประกอบการ ................................................................................ 9 3.2. ลกษณะการประกอบการ ผลตภณฑ การใหบรการหลกขององคกร ...................................... 10 3.3. ต าแหนงงานและลกษณะงานทไดรบมอบหมาย .................................................................... 10
สารบญ (ตอ)
หนา
3.4 ชอและต าแหนงของพนกงานทปรกษา .................................................................................... 10 3.5 ระยะเวลาทปฏบตงาน .............................................................................................................. 10
บทท 4 ผลปฏบตงานตามโครงงาน 4.1. รายละเอยดของโครงงาน ........................................................................................................ 11 4.2. การท างานของระบบ .............................................................................................................. 12
บทท 5 สรปผลและขอเสนอแนะ 5.1. สรปผลโครงงาน .................................................................................................................... 18 5.2. สรปผลการปฏบตงานสหกจศกษา ......................................................................................... 18
บรรณานกรม ........................................................................................................................... 20
ประวตผจดท า ........................................................................................................................................ 21
สารบญรปภาพ หนา
รปท 2.1 ตวอยางหนาจอทใช JavaScript ในการจดการตาราง ................................................... 4 รปท 2.2 ตวอยางหนาจอโปรแกรม Atom ................................................................................. 5 รปท 2.3 ตวอยางหนาหนาเวบทใชโปรแกรม Photoshop จดท า ................................................ 6 รปท 2.4 ตวอยางหนาจอโปรแกรม Bootstrap Framework ....................................................... 7 รปท 2.5 ตวอยางหนาจอการเขยน CSS ..................................................................................... 8 รปท 3.1 แผนทตงบรษท ออเรนจ เทคโนโลย โซลชน จ ากด .................................................... 9 รปท 4.1 โครงสรางเวบไซตส านกงานประกนวนาศภย ........................................................... 12 รปท 4.2หนาแรก ..................................................................................................................... 13 รปท 4.3 เลอกประกนทง 7 ประเภท ........................................................................................ 13 รปท 4.4 โปรโมชนตวอยางในประกนประเภทตางๆ .............................................................. 14 รปท 4.5 สวนสงแบบฟอรมส าหรบผทสนใจ .......................................................................... 15 รปท 4.6 ตวอยางหนาในของประกนประเภทตางๆ ................................................................. 16 รปท 4.7 ตารางรายละเอยดของประกนประเภทตางๆ ............................................................ 16
สารบญตาราง
หนา
ตารางท 1.1 ขนตอนและระยะเวลาในการด าเนนโครงงาน ....................................................... 3
1
บทท 1 บทน ำ
1.1 ควำมเปนมำและควำมส ำคญของปญหำ
บรษท ออเรนจ เทคโนโลย โซลชน จ ำกด เปนผใหบรกำรพฒนำเวบไซตและระบบไอทใหกบหนวยงำนและองคกรตำงๆ โดยส ำนกงำนนำยหนำประกนวนำศภย ซงเปนลกคำรำยหนงไดวำจำงใหบรษทฯ พฒนำเวบไซตให รวมถงกำรออกแบบเวบไซตและจดท ำระบบบรหำรจดกำรเวบไซตผจดท ำไดมำปฏบตงำนสหกจศกษำกบบรษทในต ำแหนง นกออกแบบเวบไซต (Web Designer) จงไดรบมอบหมำยใหด ำเนนกำรในสวนของกำรออกแบบเวบไซตใหกบส ำนกงำนนำยหนำประกนวนำศภยซงเปนสวนตดตอกบผใช (User Interface) ทงหมด ผจดท ำจงไดประยกตหลกกำรออกแบบโดยยดควำมพงพอใจของผใชเปนหลก (UX Design Concept) เพอใหผใช ใชงำนไดงำย มควำมพงพอใจในกำรท ำงำน เมอออกแบบเวบไซตทกเพจแลวผจดท ำไดท ำกำรสรำงแตละเพจโดยใชเครองมอ Atom เปนโปรแกรมเขยนชดค ำสง โดยใชภำษำ HTML, CSS, PHP และ Bootstrap Framework ซงหลงจำกทไปเสนอลกคำและปรบแกตำมค ำแนะน ำของลกคำลกคำมควำมพงพอใจ
1.2 วตถประสงคของโครงงำน
เพอ ออกแบบเวบไซต ของส ำนกงำนนำยหนำประกนวนำศภย
1.3 ขอบเขตของโครงงำน 1.3.1 ออกแบบหนำเวบเพจตอไปน 1.3.1.1 หนำเสนอขอมลประกน 7 ประเภท 1.3.1.2 หนำตดตอส ำหนกงำน 1.3.1.3 หนำแจงกำรช ำระเงน 1.3.1.4 หนำเชคเบย / สงซอ 1.3.1.5 หนำวธกำรช ำระเงน 1.3.1.6 หนำตดตอเรำ 1.3.1.7 หนำผอน 0% 1.3.2 พฒนำเปน Responsive webpage ทสำมำรถแสดงผลบนอปกรณไดทกแพลตฟอรม
2
1.4 ประโยชนทไดรบ 1.4.1 เวบไซตของส ำนกงำนนำยหนำประกนวนำศภยมควำมสวยงำมและทนสมยมำก
ขน 1.4.2 สำมำรถเขำถงเวบไซตไดจำกอปกรณทกแพลตฟอรมโดยมแหลงขอมลเดยวกน
1.5 ขนตอนและวธด ำเนนงำน 1.5.1 รวบรวมควำมตองกำร
ผจดท ำไดท ำกำรรวบรวมขอมลและควำมตองกำรเพอท ำกำรออกแบบและจดท ำรปแบบของเวบไซตจำกส ำนกงำนนำยหนำประกนวนำศภย ซงเปนลกคำโดยตรง
1.5.2 วเครำะหควำมตองกำร น ำขอมลและควำมตองกำรทรวบรวมมำได มำท ำกำรวเครำะห เพอใหสำมำรถออกแบบหนำเวบไซตไดตรงควำมตองกำรของลกคำ โดยไดท ำกำรวเครำะหรวมกบพนกงำนทปรกษำและทมงำนทเกยวของ
1.5.3 ออกแบบหนำเวบไซต หลงจำกท ำกำรวเครำะหควำมตองกำรแลว ไดท ำกำรออกแบบตนแบบหนำ
เวบไซตดวยโปรแกรม Photoshop และน ำเสนอตอลกคำเพอรบค ำแนะน ำมำปรบปรงแกไขใหไดตนแบบทสมบรณกอนลงมอสรำงหนำเวบไซตตอไป
1.5.4 พฒนำหนำเวบไซต ท ำกำรพฒนำหนำเวบไซตตำมตนแบบทผำนกำรเหนชอบจำกลกคำแลว โดยใช
Atom เปนเครองมอในกำรออกแบบและเขยนชดค ำสงสรำงหนำเวบ
1.5.5 น ำเสนองำน เมอท ำกำรพฒนำเวบไซตครบท งเวบแลว ไดน ำเสนอตอทมงำนเพอรวมกนพจำรณำปรบปรงแกไข แลวจงน ำเสนอตอลกคำ
1.5.6 จดท ำเอกสำร จดท ำเอกสำรประกอบโครงงำน เพอน ำเสนอรำยละเอยดกำรด ำเนนงำนของโครงงำน และกำรปฏบตงำนสหกจศกษำ
3
ตำรำงท 1.1 ขนตอนและระยะเวลำในกำรด ำเนนโครงงำน
ขนตอนกำรด ำเนนงำน ม.ย. 61 ก.ค. 61 ส.ค. 61 ก.ย. 61 1. รวบรวมควำมตองกำร 2. วเครำะหควำมตองกำร 3. ออกแบบหนำเวบไซต 4. พฒนำหนำเวบไซต 5. น ำเสนองำน 6. จดท ำเอกสำร
1.6 อปกรณและเครองมอทใช
1.6.1 ฮำรดแวร 1.6.1.1 Notebook ASUS(FX550vd)
1.6.2 ซอฟตแวร 1.6.2.1 ระบบบปฏบตกำร Microsoft Windows 10 Home
1.6.2.2 โปรแกรม Photoshop
1.6.2.3 โปรแกรม Atom
4
บทท 2 การทบทวนเอกสารและวรรณกรรมทเกยวของ
ในการจดท าโครงงานน ผจดท าไดท าการศกษาแนวคด ทฤษฎ และเทคโนโลย ทเกยวของเพอ
ใชเปนแนวทางในการพฒนาโครงงาน ดงตอไปน
2.2 JavaScript1
JavaScript เปนภาษาสครปตทท างานทางฝงไคลเอนท (Client Side Script) ท าใหเวบเพจ
สามารถตอบโตกบผใชได และยงชวยลดภาระงานของฝงเซรฟเวอรอกดวย รองรบการเขยนโปรแกรม
แบบ Event-Driven เชน เมอมการคลกทปมแลวการกระท าทตอบสนองการท างาน มวธการท างานใน
ลกษณะ แปล Script และด าเนนการไปทละค าสง โดยค าสงจะอยใน แทคของ <script>…</script>
ในโครงงานนไดมการน า JavaScript มาใช เนองจากเวบไซตส านกงานนายหนาประกนภยนน
มตารางขอมลหลากหลายตารางตอกนลงมาเรอยๆ ท าใหเนอหาของเวบดยาวเกนไป จงใช Script โดย
การซอนตารางทงหมดและโชวครงละ 1 ตาราง และสรางปมเอาไวดานบนและเมอคลกตารางถดๆ มา
จงแสดงขนมาและซอนตารางเกาไว
1
มายดพเอชพ. (2561) . จาวา สครปต คอ. เขาถงไดจาก https://www.mindphp.com
5
รปท 2.1 ตวอยางหนาจอทใช JavaScript ในการจดการตาราง
2.1 ATOM EDITOR2 ATOM Editor เปนโปรแกรม Text Editor ทใชในการเขยนโปรแกรมภาษาตางๆ เชน HTML ,
CSS , Bootstrap , JavaScript และ PHP เปนตนโดยจะมเครองมอตางๆ เพออ านวยความสะดวกในการเขยน เชน การใสสประเภทตางๆ ของโคด เชน Tag DIV , TR , TH , TD จะเปนสแดง ในเครองหลายค าถกในการประกาศ C l a s s จะเปนสเขยว การไฮไลทสของ แทคเปดแทคปด การเดาค าท าใหการเขยน
ชดค าสงสะดวกและงายขน
ในโปรแกรม Atom ไดน ามาพฒนาในโครงงาน ในสวนของการเขยนหนาเวบโดยโปรแกรมนมขอดคอเปนโปรแกรมทใชพนทหนวยความจ านอยและท างานไดรวดเรว มการแบงสระหวางชดค าสง และเครองมอ ท าใหการชวยเขยนท าไดงายยงขน
รปท 2. 2 ตวอยางหนาจอโปรแกรม Atom
2
Atom. (2018). atom. Retrieved from https://atom.io/
6
2.3 Adobe Photoshop3
Adobe Photoshop เปนโปรแกรมส าหรบสรางและตกแตงภาพ โดยมเครองมอตางๆ ในการ
ปรบแตงท าไดต งแตตดตอ แตงภาพ รทชภาพ โดยสวนใหญจะเปนการออกแบบงานตางๆ ใน
Photoshop กอนทจะด าเนนงานจรง ปจจบน Photoshop มเวอรชนลาสดคอ Photoshop cc2018
ในโครงงานน Photoshop มความส าคญเปนอยางมากในการท าโครงงานในครงน เนองจากใน
การออกแบบหนาเวบไซตจ าเปนตองมโปรแกรม ในการท ารปแบบจ าลองหนาแวบขนมาน าเสนอลกคา
กอนทจะเรมตนสรางขนมาจรงๆ Photoshop เปนโปรแกรมทใชในการตดตอ ออกแบบ ไดครบถวน จง
น ามาใชในโครงงานน
รปท 2.3 ตวอยางหนาหนาเวบทใชโปรแกรม Photoshop จดท า
3
adobe. (2018). adobe photoshop. Retrieved from https://www.adobe.com
7
2.4 Bootstrap Framework4
Bootstrap เปน Front-end Framework ทรวม HTML , CSS และ JavaScript เขาดวยกนเปน
Class ตางๆ ใหเรยกใช เชน Class “text-center” จะก าหนดใหตวอกษร ใน DIV นนอยตรงกลางของ
หนาจอโดยไมตองไปสสราง Class ใน CSS สามารถเรยกใชงานไดทนท
ในโครงงานนไดมการน า Bootstrap Framework มาใชในการก าหนดรปแบบและลกษณะของ
หนาเวบใหสวยงาม โดย Bootstrap คอ CSS ท ถกจดเรยงเปน Class ตางๆ ใหไดเรยกใชงานโดยการ
เรยกใชงานนนตองน าลงกไปไวใน Header จงจะเรยกใชงานได
รปท 2.4 ตวอยางหนาจอโปรแกรม Bootstrap Framework
4
getbootstrap. (2018). bootstrap 4. Retrieved from http://www.getbootstrap.com
8
2.5 Cascade Style Sheet (CSS)5
Cascade Style Sheet หรอ CSS เสมอนเปน Back-end ของหนา HTML โดยการก าหนด Style
ผานไฟล CSS ก าหนดลกษณะให Class ตางๆ โดยการน า Class ทตองการไปใสใน HTML Tag ท
ตองการจะก าหนดลกษณะ และแกไขใหเขาไปแกไขในไฟล CSS เพยงทเดยว ทกททเรยกใช Class ของ
CSS จะไดรบการเปลยนแปลงเชนกน
ในโครงงานนใช CSS ในการก าหนดลกษณะของหนาเวบ ใหสวยงาม จะแตกตางกบ Bootstrap
คอ CSS จะเปนการก าหนดขนดวยตวผเขยนเอง โดยผเขยนไมม Class ส าเรจรปใหใช ใหสรางและ
เรยกใชเอง และ CSS กสามารถ แก Style ของ Bootstrap ไดบางสวนโดยการเขยน Class ของ Bootstrap
และก าหนดลกษณะทตองการเปลยนลงไปและเรยกใชผาน Class ของ Bootstrap
รปท 2.5 ตวอยางหนาจอการเขยน CSS
5
w3schools. (2018). CSS / w3school. Retrieved from https://www.w3schools.com
9
บทท 3
รายละเอยดการปฏบตงาน
3.1 ชอและสถานทตงของสถานทประกอบการ
บรษท ออเรนจ เทคโนโลย โซลชน จ ำกด
ทอย 90/16 ถ.ศรอยธยำ แขวง วชรพยำบำล เขต ดสต กรงเทพมหำนคร 101300
โทร: 02-218-0931, 08-0100-0047 (24 ชวโมง)
แฟกส: 02-218-0931 #105
Email: [email protected]
รปท 3.1 แผนทตงบรษท ออเรนจ เทคโนโลย โซลชน จ ำกด
10
3.2 ลกษณะงานการประกอบการ ผลตภณฑการใหบรการหลกขององคกร
บรษท ออเรนจ เทคโนโลย โซลชน จ ำกด ใหบรกำรโซลชนตำงๆในดำน บรกำรเวบไซต และ
ออกแบบเวบไซตตำงๆ รวมไปถงในดำนแอปพลเคชนบนโทรศพทมอถอ และอปกรณตำงๆ และยงม
ประสทธภำพทงในเรองกำรจดวำง Layout ใหมควำมเขำใจและสำมำรถใชงำนไดงำย และ บรษท ออ
เรนจ เทคโนโลย โซลชน จ ำกด เปนบรษททใหบรกำรมบรกำรใหเชำพนทเวบโฮสตงหรอจดทะเบยน
โดเมน และรบเขยนโปรแกรม รบท ำเวบไซต ออกแบบเวบไซต รบโปรโมทเวบไซต หรอรบเขยน
แอปพลเคชน ซงมผลงำนตำงๆมำกมำยตอเนองมำเปนระยะเวลำมำกกวำ 10 ป
3.3 ต าแหนงงานและลกษณะงานทไดรบมอบหมาย
ต ำแหนงงำนทไดรบมอบหมำยจำกบรษท คอ นกออกแบบเวบไซต โดยในระหวำงทไป
ปฏบตงำนสหกจศกษำมผลงำนตำงๆ ดงน
• ออกแบบพฒนำเวบไซต ส ำนกงำนนำยหนำประกนวนำศภย
• ออกแบบพฒนำเวบไซตของ MTEC เปนเวบไซตจองเครองมอ วทยำศำสตร
• ออกแบบพฒนำเวบไซต SCG Contractor เปนเวบไซตเกยวกบกำรของหองประชมอบรม
• ออกแบบพฒนำเวบไซต SCG DOW Waste เปนเวบไซตเกยวกบกำรสงก ำจดของเสย
• ออกแบบ Mock up ระบบกำรจดกำรทวรของ มำบญครอง
3.4 ชอและต าแหนงของพนกงานทปรกษา
นำงสำวกลมวรรณ บตรพนธ ต ำแหนง Designer 3.5 ระยะเวลาทปฏบตงาน
เขำมำปฏบตงำนท บรษท ออเรนจ เทคโนโลย โซลชน จ ำกด ตงแตวนท 14 พฤษภำคม 2561
ถงวนท 31 สงหำคม 2561 รวมเปนระยะเวลำ 3 เดอน 15 วน
11
บทท 4 ผลการปฏบตงานตามโครงงาน
4.1 รายละเอยดของโครงงาน
เวบไซตส ำนกงำนนำยหนำประกนวนำศภย เปนเวบแอปพลเคชน ผจดท ำด ำเนนกำรในสวนของกำรออกแบบและพฒนำหนำเวบไซต และเนองจำกปจจบนผใชสวนใหญใชมอถอ หรออปกรณเคลอนทในกำรเขำเวบไซต จงพฒนำเวบใหสำมำรถแสดงผลแบบ Responsive ทสำมำรถแสดงผลไดบนอปกรณทกแพลตฟอรมดวย ซงในกำรจดท ำไดเนนกำรออกแบบใหผใชใชงำนงำย (UX Design Concept) โดยใชภำษำ HTML5, CSS และ JavaScript และ Bootstrap Framework ซงประกอบดวยหนำจอดงตอไปน
- หนำตดตอส ำหนกงำน - หนำแจงกำรช ำระเงน - หนำเชคเบย / สงซอ - หนำวธกำรช ำระเงน - หนำตดตอเรำ - หนำผอน 0%
12
4.2 การท างานของระบบ 4.2.1 โครงสรางของเวบไซต (Sitemap)
รปท 4.1 โครงสรำงเวบไซตส ำนกงำนประกนวนำศภย
13
4.2.2 การออกแบบสวนตดตอกบผใช
รปท 4.2หนำแรก
HOME เปนหนำแรกของเวบไซตทเขำมำแลวจะเจอกบไสลดทมโปรโมชนตำงๆของเวบน
รปท 4.3 เลอกประกนทง 7 ประเภท
เลอกประเภทประกน เลอนลงมำจะมหวขอใหเลอกประกนประเภทตำงๆ เมอคลกเขำไปจะมรำยละเอยดของประกนประเภทตำงๆ
14
รปท 4.4 โปรโมชนตวอยำงในประกนประเภทตำงๆ Category Promotion เปนโปรโมชนของประกนบำงสวนทถกหยบยกมำโชว
15
รปท 4.5 สวนสงแบบฟอรมส ำหรบผทสนใจ
สงแบบฟอรมถงเจาหนาท เมอมผสนใจจะมใหกรอกแบบฟอรมตำงๆถงเจำของเวบไซต เพอด ำเนนกำรจดซอตอไป
16
รปท 4.6 ตวอยำงหนำในของประกนประเภทตำงๆ
รายละเอยดของประกนแตละประเภท
รปท 4.7 ตำรำงรำยละเอยดของประกนประเภทตำงๆ
17
รายละเอยดของประกนประเภทตางๆ จะมรำยละเอยดของประกนประเภทตำงๆใหกบผชมไดศกษำกอนตดสนใจ พวกเบยผอนตำงๆ ประกนชนตำงๆและบรกำรตำงๆดงน
1. ประกนรถยนต ประเภท 1 ส ำเรจรป 2. ประกนรถยนต ประเภท 2+ 3. ประกนรถยนต ประเภท 3+ 4. ประกนรถยนต ประเภท 3 5. ประกนรถยนต แทกซ,รถตรบจำง 6. ประกนรถยนต ประเภท พรบ. 7. ประกน ประเภท อคคภย
18
บทท 5
สรปผลและขอเสนอแนะ
5.1 สรปผลโครงงาน
จากการออกแบบและพฒนาหนาจอเวบไซตของส านกงานนายหนาประกนวนาศภย ไดตรงกบ
ความตองการของลกคาอยางครบถวนและสามารถใชงานไดจรง โดยผานการพจารณาจากลกคาเปนท
เรยบรอยแลว
5.1.2 ขอจ ากดโครงงาน
5.1.2.1 ขอมลมเปนจ านวนมากท าใหใสขอมลไดลาชา
5.1.2.2 รปภาพทใชในเวบไซตนนหาคอนขางยาก สวนใหญจะมลขสทธ จงตองท า
เรองในการซอภาพ
5.1.3 ขอเสนอแนะ
5.1.3.1 ถาลกคา เจาของเวบไซต หรอ ผทเกยวของ ท าการเตรยมขอมลมาใหครบถวน
จะท าใหการท างานเรวขน
5.1.3.2 ควรมการพบปะกบลกคาบอยครง เพอทงานจะไดถกตองสมบรณและใชเวลา
ในการปรบแกนอย
5.2 สรปผลการปฏบตงานสหกจศกษา
5.2.1 ขอดของการปฏบตสหกจ
5.2.1.1 ไดศกษาการเขยนหนาเวบในรปแบบตางๆ ทเปนแบบ Scroll แบบปกต หรอ
เปนเวบแบบ Full-page , Parallax
5.2.1.2 ไดพบกบลกคาจรง ตอตอกบคนทมาตดตองานจรงๆ เดนทางไปทหนางาน
จรงๆ
19
5.2.1.3 ไดรจกการเขยน CSS , Bootstrap , Java Script
5.2.2 ปญหาทพบของการปฏบตงานสหกจศกษา
ในการเขยนหนาเวบบางครงจะพบกบการออกแบบใหมๆ ทตองใชเวลาในการศกษา
และจะเสยเวลาและจะเกนเวลาทก าหนดท าใหสงงานลาชา
5.2.3 ขอเสนอแนะ
5.2.3.1 ควรเกบขอมลของลกคาวาลกคาตองการอะไรและท าความเขาใจกบลกคาให
ตรงกบผทพฒนาจะไดไมเกดปญหาทหลง
5.2.3.2 เนนการพบปะกบลกคาใหบอยขน เพอทจะน าความคบหนาใหลกคาด
5.2.3.3 กอนไปฝกสหกจ นกศคกษาควรมการศกษาในดานทเราไปสหกจ
5.2.3.4 ในการอยทสถายประกอบการนนควรปรบตวใหเขากบบคคลกรในสถาน
ประกอบการใหได
20
บรรณานกรม
มายดพเอชพ. (2561) . จาวา สครปต คอ. เขาถงไดจาก https://www.mindphp.com
Atom. (2018). atom. Retrieved from https://atom.io/
adobe. (2018). adobe photoshop. Retrieved from https://www.adobe.com
getbootstrap. (2018). bootstrap 4. Retrieved from http://www.getbootstrap.com
w3schools. (2018). CSS / w3school. Retrieved from https://www.w3schools.com
21
ประวตผจดท ำ
นำยภมศกด ภมรนทร 5804800071
ทอย : 145/2 ซอยเทอดไท59 ถนนกลปพฤกษ
แขวงบางหวา เขตภาษเจรญ 10160
อเมล : [email protected]
เบอรโทรศพท : 086-453-5031
22