รายงาน

รายงาน

วชิ าการพฒั นาเว็บไซต์ในงานธุรกิจ

จัดทาโดย

นางสาวฐานติ า พรหมสวรรณ เลขที่ 1
นางสาวธัญชนก สวัสดิภ์ กั ดี เลขที่ 4
นางสาวนัฐญา เนียมสุวรรณ เลขท่ี 5
นางสาวปรัญตญิ า แผลงเดชา เลขที่ 6
ระดับชน้ั ปวส.2/1 แผนกวิชาคอมพิวเตอร์ธุรกิจ

เสนอ
อาจารย์จิราพร ศิรภิ ิรมย์

รายงานฉบับนเ้ี ปน็ ส่วนหน่งึ ของรายวชิ าการพัฒนาเว็บไซตใ์ นงานธรุ กิจ
วทิ ยาลัยอาชวี ศกึ ษาชมุ พร

ภาคเรียนที่ 2 ปกี ารศึกษา 2563

ขัน้ ตอนการตดิ ตง้ั AppServ แบบออฟไลน์

1. ดบั เบล้ิ คลกิ ไฟล์ appserv-win32-x.x.x.exe เพื่อทาการตดิ ตงั้ จะปรากฏหนา้ จอตามรูป

2. เข้าส่ขู ัน้ ตอนเง่อื นไขการใชง้ านโปรแกรม โดยโปรแกรม AppServ ไดแ้ จกจา่ ยในรูปแบบ GNU
License หากผู้ติดตง้ั อ่านเงื่อนไขตา่ งๆ เสร็จสิน้ แลว้ หากยอมรับเงื่อนไขใหก้ ด Next เพื่อเขา้ สูก่ าร
ตดิ ต้งั ในขั้นต่อไป แตห่ ากว่าไมย่ อมรบั เง่อื นไขให้กด Cancel เพื่อออกจากการติดตงั้ โปรแกรม
AppServ ดงั รปู

3. เขา้ สู่ขัน้ ตอนการเลือกปลายทางทีต่ อ้ งการตดิ ตัง้ โดยคา่ เริ่มต้นปลายทางที่ติดตง้ั จะเปน็ C:AppServ
หากตอ้ งการเปลีย่ นปลายทางที่ตดิ ตั้ง ใหก้ ด Browse แลว้ เลอื กปลายทางทต่ี ้องการ เมื่อเลือกปลายทางเสรจ็

ส้นิ ให้กดปมุ่ Next เพื่อเขา้ สู่ข้ันตอนการติดตัง้ ขั้นต่อไป

4. เลือก Package Components ท่ตี อ้ งการติดตั้ง โดยค่าเริม่ ตน้ นนั้ จะให้เลอื กลงทุก Package แต่หาก
วา่ ผ้ใู ชง้ าน ตอ้ งการเลือกลงเฉพาะบาง Package กส็ ามารถเลอื กตามข้อทตี่ ้องการออก โดย
รายละเอยี ดแต่ละ Package มดี งั นี้
– Apache HTTP Server คือ โปรแกรมท่ีทาหน้าเปน็ Web Server
– MySQL Database คือ โปรแกรมท่ีทาหนา้ เป็น Database Server

– PHP Hypertext Preprocessor คือ โปรแกรมที่ทาหน้าประมวลผลการทางานของภาษา PHP
– phpMyAdmin คอื โปรแกรมทใี่ ช้ในการบรหิ ารจัดการฐานขอ้ มลู MySQL ผ่านเว็บไซต์เมอ่ื ทาการ

เลือก Package ตามรูป เรยี บร้อยแล้ว ให้กด Next เพื่อเขา้ สขู่ ้ันตอนการติดต้งั ต่อไป

5. กาหนดค่าคอนฟิกของ Apache Web Server มีอยู่ด้วยกันท้ังหมด 3 ส่วน ตามรูป คือ
Server Name คอื ช่องสาหรับปอ้ นข้อมูลชื่อ Web Server ของทา่ นเชน่ www.appserv.org

Admin Email คอื ชอ่ งสาหรับปอ้ นข้อมลู อีเมล์ผู้ดแู ลระบบ เชน่ [email protected]
HTTP Port คือชอ่ งสาหรบั ระบุ Port ทจ่ี ะเรยี กใชง้ าน Apache Web Server โดยทว่ั ไปแล้ว
Protocol HTTP นน้ั จะมีคา่ หลักคอื 80 หากว่าท่านต้องการหลีกเลยี่ งการใช้ Port 80 ก็สามารถ
แกไ้ ขได้ หากมกี ารเปล่ียนแปลง Port การเข้าใชง้ าน Web Server แลว้ ทุกครง้ั ทเ่ี รยี กใช้งานเวบ็ ไซต์
จาเป็นทต่ี ้องระบุหมายเลข Port ดว้ ย เช่น หากเลอื กใช้ Port 99 ในการเขา้ เว็บไซต์ทุกคร้ังต้องใช้

http://www.appserv.org:99 จึงจะสามารถเข้าใช้งานได้

6. กาหนดค่าคอนฟกิ ของ MySQL Database มีอยดู่ ว้ ยกนั ทั้งหมด 3 สว่ น ตามรูปที่ 6 คอื
Root Password คอื ช่องสาหรบั ปอ้ น รหัสผ่านการเข้าใช้งานฐานขอ้ มลู ของ Root หรอื ผดู้ ูแลระบบ

ทุกครั้งท่เี ข้าใชง้ านฐานขอ้ มลู ในลักษณะทเี่ ป็นผู้ดูแลระบบ ใหร้ ะบุ user คือ root Character
Sets ใชใ้ นการกาหนดคา่ ระบบภาษาทีใ่ ช้ในการจัดเก็บฐานขอ้ มูล, เรยี งลาดับฐานขอ้ มลู ,Import
ฐานข้อมูล, Export ฐานข้อมูล, ตดิ ตอ่ ฐานข้อมูล Old Password หากทา่ นมปี ัญหาเกย่ี วกับการใช้
งาน PHP กบั MySQL API เวอรช์ ่ันเกา่ โดยเจอ Error Client does not support authentication
protocol requested by server consider upgrading MySQL client ใหเ้ ลอื กในส่วนของ Old
Password เพื่อหลกี เลย่ี งปัญหานี้ Enable MyISAM หากทา่ นต้องการใชง้ านฐานข้อมูลในรูปแบบ

MyISAM ใหเ้ ลอื กในสว่ นน้ีด้วย

7. สนิ้ สดุ ขนั้ ตอนการตดิ ตั้งโปรแกรม AppServ สาหรับข้นั ตอนสดุ ท้ายนี้จะมีใหเ้ ลือกว่าต้องการส่งั ให้มี
การรนั Apache และ MySQL ทันทีหรือไม่ จากนน้ั กดปุม่ Finish เพ่ือเสรจ็ สิน้ การตดิ ตง้ั โปรแกรม
AppServ

การขอเชา่ พ้ืนทเ่ี พ่ืออพั โหลด Web Site

การท่ีเราจะทาให้คนทว่ั ไปไดเ้ ห็นเวบ็ ของเรานัน้ เราจาเป็นตอ้ งนาเวบ็ เพจทีเ่ ราสรา้ งขนี้ มาไปเกบ็ ไว้ท่ี
web server ซง่ึ web server จะทาหน้าที่คอยสง่ ไฟล์ท่ีเราทาขึ้นมาไปให้คนทว่ั ไปไดเ้ หน็ เหมอื นกับทเ่ี ราเรียก

ไฟลจ์ ากเคร่ืองของเรามาดูนน่ั เอง
ซ่ึงเครอ่ื งของคุณก็สามารถทาเป็น web server ได้ แต่คุณตอ้ งเปดิ เครอื่ ง 24 ชั่วโมง และ ตอ่ อนิ เทอร์เนต็ 24
ช่ัวโมง เพราะจะต้องรองรบั กับคนท่ัวไปที่ต้องการเปดิ เวบ็ ของคุณตลอดเวลา ซ่งึ จะทาให้สน้ิ เปลืองมา ดังนนั้ ใน
บทความน้เี ราจะมาหา web server ทีใ่ หบ้ รกิ ารฟรีกัน ซ่งึ เราอาจตอ้ งเสยี พนื้ ทใ่ี นเว็บไซตข์ องเราให้กับโฆษณา
เพอื่ แลกกับการใช้ของฟรี (ตามปรกตจิ ะมีผใู้ หบ้ รกิ ารเช่า web server อยู่ ราคาขึ้นอยู่กับคณุ ภาพของ web

server นัน้ )
ในบทนจี้ ะเกยี่ วกบั การใช้บริการ web server ฟรี ซ่ึงในบทความน้จี ะใช้บริการ free web serve

ของ http://www.freewebhostingarea.com/
เราจะมาดูรายละเอยี ดการสมัครเข้าใช้ web server ฟรีของทีน่ กี้ ัน
1. ใหพ้ ้ืนทีใ่ นการจดั เก็บไฟลข์ องคุณถึง 200 MB แตไ่ ฟลท์ ี่คุณจะนาไปเก็บไว้ที่ server ตวั นนี้ ั้น จะต้องมี
ขนาดเลก็ ว่า 10 MB (การดูขนาดไฟล์ของคณุ ทาได้โดยคลกิ ขวาที่ไฟล์น้นั เลอื ก Properties ดูที่ size จะบอก

ขนาดของไฟล์เอาไว)้
2. ใหค้ ณุ สามารถส่งไฟล์ไปที่ web server ดว้ ยระบบ FTP ได้
3. และอ่ืนๆอีกมากมายซึ่งถ้าเขียนใส่ในบทความน้ีอาจทาใหบ้ ทความนี้ยาวเกินไป

เริม่ ตน้ ของใช้บรกิ ารฟรี
1. หลังจากท่ีคุณเปิด http://www.freewebhostingarea.com/ แลว้ เล่อื นลงมาดดู ้านล่างของเวบ็ จะเห็น

ชอ่ งใหเ้ ราใช่ชอื่ เวบ็ ของเราซ่ึงมีดว้ ยกัน 3 ชอ่ งด้วยกนั คือ
1. www.ช่ือเว็บของคุณ.6te.net
2. www.ช่ือเวบ็ ของคุณ.ueuo.com

3. www.ช่อื เว็บของคุณ.orgfree.com
ซงึ่ ในบทความน้เี ราจะใช้ http://hellomyweb.6te.net ตามรปู ดา้ นล่าง

2. กรอกรายละเอยี ด

บางครงั้ คุณอาจเจอปัญหาแบบดา้ นลา่ ง เกดิ จากวา่ เครื่องของคุณเคยสมัครของใช้บรกิ ารกบั เว็บไซต์นี้ไว้แลว้
ซงึ่ ผใู้ หบ้ ริการใหใ้ ช้ฟรแี คเ่ ครอื่ งละ 1 account เทา่ นั้น ถ้าคุณต้องการจะใช้บริการก็แนะนาใหค้ ุณเลือกชือ่ เวบ็

ใหม่ อาจเปน็ www.hellmyweb.ueuo.com หรือ hellomyweb.orgfree.com แทน
3. เมื่อสมคั รเสรจ็ แลว้ จะมหี น้าจอดงั ภาพ ซ่ึงคณุ ตอ้ งคลกิ ท่ีลงิ คด์ ้านล่างเพ่ือยนื ยนั การสมัครเขา้ ใช้งาน

4. เม่อื คลกิ ทลี่ ิงคแ์ ลว้ จะมีหน้าจอดงั รปู ข้างล่าง ซงึ่ เปน็ ข้อมูลทเี่ ราจะต้องจดเอาไวใ้ หด้ ี อาจ save หนา้ นี้เกบ็ ไว้
ดภู ายหลังกันลืม และเปน็ ความลบั

5. เม่อื สมัครขอใชบ้ ริการเรียบร้อยแลว้ เราก็จะเร่ิมนาไฟล์ไปเก็บไว้ท่ี web server กนั ซึง่ การนาไฟล์ไปเก็บไว้
ใน web server กใ็ ห้เราเปิด My Computer ขนึ้ มาแล้วพิมพ์ ftp://ชอื่ เว็บของคณุ ซึง่ ในบทความนก้ี เ็ ป็น

ftp://hellomyweb.6te.net จะมีหน้าจอถาม username และ password ข้นึ มาใหค้ ุณใส่ username และ
password ที่ได้จากภาพด้านบน เมือ่ กรอกเสรจ็ ก็เปน็ ดงั รูปด้านลา่ ง

6. ใหค้ ณุ ลบไฟล์ท่มี ีอยู่ ท้งั หมดแล้วนาไฟล์ของคณุ ไปใสแ่ ทน โดยลากไฟลจ์ ากในเครื่องลงใน My computer
ไดเ้ ลย

โดยที่ เม่ือคุณเปิดเว็บของคุณ เชน่ www.hellomyweb.6te.net ตัว web server จะหาไฟลท์ ่ีชื่อ
index.html มาแสดงเป็นหน้าแรก (home page) ของคุณถ้าคณุ ไมม่ ี file ทชี่ ื่อ index.html ก็ไม่

สามารถเปิดเว็บไซต์ของคณุ ได้ และ web browser จะแสดง error ออกมา

สาหรบั บทความนีก้ ็จบเพยี งเทา่ นแี้ ละยินดีกบั ทุกท่านท่ีสามารถทาเว็บไซต์ของตัวเองเว็บแรกได้สาเรจ็
**หากไม่เข้าใจวิธีอัพไฟลข์ ึน้ web sever สามารถอ่านต่อได้ในบทความนี้ครับ การใชง้ าน FTP ผ่าน My

computer ของ window

การอัพโหลดไฟล์ขึ้น Server ด้วย โปรแกรม File Zilla

1. Download โปรแกรม File Zilla ได้ฟรี ที่ http://filezilla-project.org/download.php โดยคลกิ
เลือก Version ลา่ สดุ มาตดิ ต้ัง

2. ดาวน์โหลดมาเรียบรอ้ ยแลว้ ทาการติดตัง้ โดยการคลก๊ิ Next ไปเร่อื ยๆ จนเสร็จ
3. เปิดโปรแกรม File Zilla ข้ึนมา แล้วกดปุ่มดังภาพ

4. กดปุ่ม สรา้ งทต่ี งั้ ใหม่

5. ระบุชือ่ เว็บไซต์ของคณุ เพ่ือสะดวกในการจา และเรียกใชง้ าน

6. ระบโุ ดเมนเนมของคุณในช่องโฮสต์
7. ในช่อง Logontype ให้เลอื กเป็นแบบปกติ
8. ระบุ Username และ Password ในการเข้าใช้งาน FTP แลว้ กดเช่อื มต่อ ดงั ภาพ

9. เม่ือเชอื่ มต่อสาเรจ็ แลว้ จะเห็นขอ้ มลู ดังภาพ ดา้ นซา้ ยจะเป็นไฟล์ในเคร่ืองของคุณ สว่ นด้านขวาจะ
เปน็ ไฟล์บน Server

10. ทาการดบั เบลิ คลก๊ิ ที่โฟลเดอร์ public_html ทางฝั่งขวา (ฝ่งั Server) ซง่ึ ไฟลท์ ั้งหมดของ
เว็บไซต์คุณต้อง อพั โหลดเข้ามาไว้ในน้ี

11. เมื่อเข้ามาแลว้ จะเหน็ ไฟล์ที่ระบบสรา้ งให้ ดังภาพ ซ่ึงคุณสามารถลบท้ิงได้ทง้ั หมด และทาการอัพ
โหลดไฟล์เว็บไซตท์ ่ีทา่ นไดจ้ ัดทาไวเ้ ข้ามาแทน

12. ทาการลากไฟลเ์ วบ็ ไซตข์ องท่าน ที่ทา่ นไดจ้ ัดเตรยี มไว้ ไปทางฝั่งขวา (Server) ดงั ภาพ
13. หรือทาการคลิกขวาที่ไฟล์ที่ตอ้ งการอัพโหลด แล้วเลอื ก อัพโหลด ดงั ภาพ
14. ไฟลย์ า้ ยมาฝ่ัง Server เรียบร้อยแลว้ ดังภาพ

15. ลบ หรอื เปลยี่ นช่อื ไฟล์ index.html ที่ระบบสร้างไวใ้ ห้ เป็นชอ่ื อ่ืน
16. เพียงเทา่ นี้ไฟล์ index.php ก็สามารถทางานไดแ้ ล้ว ลองทดสอบเข้าเว็บไซต์ของคณุ ไดเ้ ลย

การติดต้ังเว็บไซต์แบบออนไลน์

1.คลกิ เปดิ เบราวเ์ ซอร์ Internet explorer จากนน้ั คลิกลิงนเี้ ลย Google Chrome

2. เมื่อเขา้ มาแลว้ คลิกป่มุ ดาวโหลด Chrome

3. ต่อด้วย คลิกปมุ่ ยอมรับ และตดิ ตั้ง
4. เขา้ ไปยงั โฟลเดอรท์ ี่ดาวโหลดโปรแกรมเกบ็ ไว้ จากนั้นคลกิ เพื่อติดตั้งโปรแกรม Google Chrome

5. เมื่อตดิ ตัง้ เสรจ็ จะมีการต้ังคา่ ตวั โปรแกรม โดยเริ่มจากกดปุม่ เรมิ่ ตน้ ใช้งาน
6. เลือกเพ่ิมแอป Google ในบุ๊กมารก์ จากนนั้ กดปุ่ม ถัดไป

7. ต่อด้วยเลือกพนื้ หลงั แล้ว กดป่มุ ถดั ไป
8.ตั้งคา่ เบราวเ์ ซอร์ Chrome ใหเ้ ป็นเบราว์เซอรเ์ ร่ิมต้น คลกิ ป่มุ ตั้งเป็นคา่ เริ่มตน้

9. เลอื กโปรแกรม Google Chrome > จากน้ันปิดหนา้ นี้ลง

10. สาหรบั ใครทีม่ ี Gmail สามารถซงิ ค์เขา้ ตดิ ตั้งบุ๊กมาร์ก (Bookmark) รหัสผา่ น (Password) และบรกิ าร
ต่างๆ จากทาง Google ได้อัติโนมัติ โดย คลกิ ปุ่ม ตอ่ ไป

12. เม่อื ล็อคอนิ ผา่ นระบบจาการซิงก์ขอ้ มลู บน Chrome ทั้งหมด ไมว่ ่าเราจะใชค้ อมฯ ท่ไี หนเมื่อซิงค์แลว้ หนา้
เบราวเ์ ซอรท์ ต่ี ง้ั ไว้, บุก๊ มาร์ก หรอื แมแ้ ตส่ ่วนขยายกจ็ ะถูกติดต้งั เข้าไปใหเ้ ลย

เพียงเท่านเี้ ราก็ได้เบราว์เซอร์ Google Chrome มาใช้งานแลว้