- Download xamp เพื่อจำลอง web server XAMPP download | SourceForge.net
- เมื่อ download เสร็จให้ไปที่ folder download แล้วกด install กด next
- ให้แก้ไขpath ตามภาพ แล้วกด next
- พอ install เสร็จเปิด xamp contronllorขี้น มาและกด apache กับ mysql start ส่วนใหญ่จะติด error กดstart apache ไม่ได้ ดังภาพ (พอกดstart แล้วมันแจ้ง errorสีแดงดังภาพด้านล่าง)
- วิธีแก้ให้กด config ตรง apache แล้วเลือก apache (httd.conf) แล้วกด ctrl+f ค้นหา 80 แล้วแก้ไข LISTEN:80 เป็น LISTEN:8080 ดังภาพแล้วกด save
และกดที่ config อีกรอบแล้วเลือก httpf-ssl.conf แล้วค้นหา 443 แก้เป็น 4433 แล้วเซฟ - หลังจากนั้นกดปุ่ม start ตรง apache อีกรอบจะเห็นว่า web server สามารถให้บริการได้แล้วตามภาพ
- ทดสอบเปิดเว็บ โดยเปิด browser ขั้นมาแล้วพิมพ์ htttp://localhost:8080 จะเข้าหน้าเว็บได้
- download Visual studio code เพื่อเป็น tools ในการแก้ไขไฟล์ เว็บไซต์ text editor/ code editor Visual Studio Code – Code Editing. Redefined หลังจากนั้นกด install จนเสร็จ
- ให้เปิด visual studio code ขึ้นมา แล้วกด open file html ที่สร้างเมื่อวานในโฟลเดอร์ของตนเอง
- แก้ไขไฟล์ index.html แล้วใส่โค้ดตามภาพลงไปแล้วลงแสดงผลบนหน้าเว็บไซต์อีกครั้ง
- แก้ไขโค้ด html ดังนี้
<html> <meta charset="UTF-8"> <title> <!--แสดงบน tab บน browser แสดงว่าหน้านั้นคืออะไรกำลังเปิดหน้าอะไรอยู่--> สวัสดี </title> <head> <!--css เป็นไฟล์สำหรับแสดงผลความสวยงามการจัด object ให้มี design ที่ต้องการ--> <!--java script เป็นไฟล์สำหรับใช้คำสั่งให้เว็บทำงานได้ตามต้องการเช่นการ alert การตรวจสอบ object --> </head> <body> <!--แสดงผลตรง content ในหน้าจอ--> </body> </html>12. การนำภาพและข้อความมาใส่ในเว็บไซต์
12.1 สร้างโฟลเดอร์ image สำหรับเก็บรูปภาพขึ้นมาในhtdocs แล้วโฟลเดอร์ของเราดังภาพ
12.2 ทำการ save รูปภาพลงไปใน folder image ดังภาพ
12.3 แก้ไขโค้ดหน้า index.html ส่วนของ body ให้แสดงผลรูปภาพ ดังโค้ดด้านล่าง
<html> <meta charset="UTF-8"> <title> <!--แสดงบน tab บน browser แสดงว่าหน้านั้นคืออะไรกำลังเปิดหน้าอะไรอยู่--> สวัสดี </title> <head> <!--css เป็นไฟล์สำหรับแสดงผลความสวยงามการจัด object ให้มี design ที่ต้องการ--> <!--java script เป็นไฟล์สำหรับใช้คำสั่งให้เว็บทำงานได้ตามต้องการเช่นการ alert การตรวจสอบ object --> </head> <body> <!--แสดงผลตรง content ในหน้าจอ--> <!--สร้าง tag img แสดงภาพ และ ปรับขนาดโดยใช้ style กำหนด height ความสูง และ width ความกว้าง--> <img src="image/lisa.jpg" style="height: 200px; width: 100px;"> </body> </html>จะได้ผลลัพธ์ดังนี้
สำหรับเพิ่ม link menu เพิืมไฟล์ดาวน์โหลด
<html> <meta charset="UTF-8"> <title> <!--แสดงบน tab บน browser แสดงว่าหน้านั้นคืออะไรกำลังเปิดหน้าอะไรอยู่--> สวัสดี </title> <head> <!--css เป็นไฟล์สำหรับแสดงผลความสวยงามการจัด object ให้มี design ที่ต้องการ--> <!--java script เป็นไฟล์สำหรับใช้คำสั่งให้เว็บทำงานได้ตามต้องการเช่นการ alert การตรวจสอบ object --> </head> <body> <!--แสดงผลตรง content ในหน้าจอ--> <!--สร้าง tag img แสดงภาพ และ ปรับขนาดโดยใช้ style กำหนด height ความสูง และ width ความกว้าง--> <img src="image/lisa.jpg" style="height: 200px; width: 100px;"> <br> <!-- สำหรับเว้นบรรทัด--> ลิซ่า ประวัติ <!-- สำหรับวรรคมากกว่า 1 เคาะ--> หกฟหดหฟดเาำไoGJ ำไฯญเ่ญ"ฎ <!--ถ้าต้องการให้มีการ download file จะต้องเอาไฟล์ไปไว้บน server htdocs แล้วใช้ tag <a href="ตามด้วยไฟล์" >ชื่อไฟล์</a> <a ใช้สำหรับทำเมนู ทำ linkไปยังหน้าอื่นๆ หรือทำเป็น link กด download file ได้ ถ้าอยากให้ tag a link หน้าใหม่(เปิดหน้าใหม่) ใช้ target="_blank" --> <a href="download/vscode.exe" >vs code</a> <a href="http://google.co.th" target="_blank">google.co.th</a> </body> </html>
13. การใช้งาน wordpress
13.1 download Download – WordPress.org
13.2 แตกไฟล์ แล้ว copy folder wordpress ไปวางที่ htdocs
เอาโฟลเดอร์ด้านบนไปวางไว้ที่ htdocs แล้วแก้ไขชื่อโฟลเดอร์เป็น myweb (คลิกขวาที่โฟลเดอร์wordpress แล้ว rename)
13.3 ติดตั้ง wordpress โดยเปิด browserขี้นมาแล้วพิมพ์ http://localhost:8080/myweb
ระบบจะเด้งไปหน้าติดตั้งให้อัตโนมัติตามภาพด้านล่าง
เลือกภาษาอังกฤษ แล้วกด continue เด้งหน้าแจ้งเตือนให้สร้าง database ก็ให้เข้าไปสร้างก่อน
ขั้นตอนการสร้าง database ให้ไปที่ xampp control panel ไปที่ msql กดปุ่ม admin
ถ้ามันเข้าหน้า phpmyadmiืn ไม่ได้ ลองพิมพ์ http://localhost:8080/phpmyadmin/
พอเข้าได้กดที่ new
ตั้งชื่อว่า mywebdb แล้วกด create เราจะได้ database mywebdb ดังภาพ
13.4 กลับมาหน้าติดตั้ง wordpress อีกครั้ง ให้กด let’s go
database name ใส่ mywebdb และ username ใส่root แล้วกด submit ดังภาพ
กด Run the Installation ได้เลย
ระบบจะทำการติดตั้งจนเสร็จ เราสามารถกด login เข้าจัดการเว็บไซต์ได้ดังภาพ
ระบบจะพาไปหลังบ้าน backoffice เป็นหน้าจัดการเว็บไซต์
ถ้าจะดูหน้าเว็บไซต์ ไปหน้าบ้านโดยเลือกที่ไอคอนรูปหน้าบ้านซ้ายบนสุดดังภาพ
ระบบจะพามาหน้าเว็บไซต์ ซึ่งเป็นหน้าสำหรับผู้ที่เข้ามาเยี่ยมชมเว็บไซต์ของเราดังภาพ
13.5 การเปลี่ยนแปลงรูปร่างหน้าตาเว็บไซต์ โดยการปรับเปลี่ยน themes
เลือกtheme ที่ต้องการ แล้วกด install หลังจากนั้นกด activate
ไปดูหน้าเว็บไซต์จะปรากฏหน้าตาของ theme newsup
กลับมาหลังบ้าน แล้วไปที่เมนู post แล้วเลือก hello world แล้วกดปุ่ม edit
หลังจากนั้นกลับไปที่เมนู post แล้วลอง add post หรือแก้ไข post เดิมดู จะเจอหน้าจอแบบ classic ใช่งานง่ายดังภาพ
เลือกรูปCoverหน้าปกที่featured
เลือกหมวดหมู่ เพื่อง่ายต่อการค้นหา
เลือกการแสดงผลตั้งวันเวลา ตั้งรหัสผ่าน หรือความเป็นส่วนตัวได้
การสร้างเมนูไปที่ appearance ไปที่เมนู แล้วสร้าง main manu เป็น main เลือก primary
ผลลัพธ์ที่ได้
พอกดที่เมนู page1 จะมีเมนูย่อยให้เลือก
- แก้ไขโค้ด html ดังนี้
และกดที่ config อีกรอบแล้วเลือก httpf-ssl.conf แล้วค้นหา 443 แก้เป็น 4433 แล้วเซฟ 
กลับมาหลังบ้าน แล้วไปที่เมนู post แล้วเลือก hello world แล้วกดปุ่ม edit
การสร้างเมนูไปที่ appearance ไปที่เมนู แล้วสร้าง main manu เป็น main เลือก primary
