บทความนี้เป็นส่วนหนึ่งของซีรีส์ Full-Stack PHP 8 + Bootstrap 5 + MySQL — สร้างเว็บไซต์แบบ Full Stack ตั้งแต่พื้นฐานจนใช้งานได้จริง พร้อมสร้างและเผยแพร่เว็บไซต์ Portfolio ของตนเอง (เรียบเรียงจากคู่มืออบรมของ Wutthiphon Tassana — Wirabyte CO., LTD.) — ตอนที่ 6/10
PHP เป็นภาษาโปรแกรมที่ทำงานฝั่งเซิร์ฟเวอร์ หน้าที่หลักคือประมวลผลข้อมูลแล้วสร้างหน้า HTML ส่งกลับไปให้เบราว์เซอร์ โค้ด PHP เขียนแทรกในไฟล์เดียวกับ HTML ได้เลย โดยเขียนไว้ภายในเครื่องหมาย <?php … ?> และตั้งนามสกุลไฟล์เป็น .php
- ไฟล์ .php ต้องรันผ่านเว็บเซิร์ฟเวอร์ ให้นำไฟล์ไปไว้ในโฟลเดอร์ C:\xampp\htdocs แล้วเปิดผ่าน http://localhost/ชื่อไฟล์.php จะดับเบิลคลิกเปิดตรง ๆ แบบไฟล์ HTML ไม่ได้
- คำสั่ง echo ใช้พิมพ์ข้อความหรือค่าออกไปแสดงบนหน้าเว็บ
- ทุกคำสั่งต้องจบด้วยเครื่องหมาย ; เสมอ
- คอมเมนต์คือข้อความที่โปรแกรมไม่ประมวลผล ใช้เขียนอธิบายโค้ด ขึ้นต้นด้วย //
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<h1>
<?php echo "สวัสดีชาวโลก"; ?>
</h1>
<?php
// นี่คือคอมเมนต์ โปรแกรมจะข้ามบรรทัดนี้ไป
echo "วันนี้วันที่ " . date("d/m/Y");
?>
</body>
</html>
การทำ Layout กลางของเว็บ (header.php / footer.php) ด้วย include
สังเกตว่าทุกหน้าของเว็บเรามีส่วนหัวเหมือนกันหมด (head, การเรียก Bootstrap, แถบเมนู) และส่วนท้ายก็เหมือนกันทุกหน้า ถ้าคัดลอกโค้ดชุดนี้ไปวางทุกไฟล์ เวลาแก้เมนูหนึ่งครั้งจะต้องไล่แก้ทุกไฟล์ให้ตรงกัน PHP จึงมีคำสั่งสำหรับดึงไฟล์อื่นเข้ามาแสดงแทรกตรงจุดนั้น เราจึงแยกส่วนหัวไว้ในไฟล์ header.php และส่วนท้ายไว้ในไฟล์ footer.php แล้วให้ทุกหน้าเรียกใช้ด้วยโค้ดเพียงบรรทัดเดียว
- include ‘ชื่อไฟล์’ ดึงไฟล์นั้นเข้ามา ถ้าหาไฟล์ไม่เจอจะแจ้งเตือนแล้วทำงานส่วนอื่นต่อ
- require ‘ชื่อไฟล์’ เหมือน include แต่ถ้าหาไฟล์ไม่เจอจะหยุดการทำงานทันที เหมาะกับไฟล์ที่ขาดไม่ได้
- เติม _once ต่อท้ายได้ (include_once / require_once) เพื่อกันการดึงไฟล์เดิมซ้ำสองรอบ
ตัวอย่าง ไฟล์ header.php (ส่วนหัว เปิด body ค้างไว้)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Portfolio</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="index.php">My Portfolio</a>
</div>
</nav>ตัวอย่าง ไฟล์ footer.php (ส่วนท้าย ปิด body ให้ครบ)
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>ตัวอย่าง ไฟล์ index.php ที่เรียกใช้ Layout กลาง
<?php include 'header.php'; ?>
<div class="container my-3">
<h1>สวัสดีครับ นี่คือหน้าแรกของผม</h1>
</div>
<?php include 'footer.php'; ?>
จากนี้ไปไม่ว่าจะสร้างหน้าใหม่อีกกี่หน้า ก็เพียงเริ่มไฟล์ด้วย include ‘header.php’ และจบด้วย include ‘footer.php’ เนื้อหาที่ต่างกันของแต่ละหน้าอยู่ตรงกลาง เมื่อแก้เมนูหรือส่วนหัวครั้งเดียวก็มีผลทุกหน้าทันที (ไฟล์ .html เดิมที่ทำไว้ สามารถเปลี่ยนนามสกุลเป็น .php แล้วปรับมาใช้วิธีนี้ได้เลย)
การสร้างตัวแปร
ตัวแปร (Variable) คือกล่องเก็บข้อมูลไว้ใช้งานต่อ ใน PHP ชื่อตัวแปรขึ้นต้นด้วยเครื่องหมาย $ เสมอ กำหนดค่าด้วยเครื่องหมาย = เก็บได้ทั้งข้อความ (ต้องอยู่ในเครื่องหมายคำพูด) และตัวเลข ส่วนการต่อข้อความเข้าด้วยกันใช้เครื่องหมายจุด .
ตัวอย่าง
<?php
$name = "สมชาย";
$age = 16;
echo "ผมชื่อ " . $name;
echo "อายุ " . $age . " ปี";
// ถ้าใช้เครื่องหมายคำพูดคู่ สามารถแทรกตัวแปรลงในข้อความได้เลย
echo "ผมชื่อ $name อายุ $age ปี";
?>การทำงานตามเงื่อนไข if else
if ใช้สั่งให้โปรแกรมเลือกทำงานตามเงื่อนไข ถ้าเงื่อนไขเป็นจริงจะทำงานในวงเล็บปีกกาแรก ถ้าไม่จริงจะทำในส่วน else และเพิ่ม elseif ได้เมื่อมีหลายเงื่อนไขต่อกัน
| เครื่องหมาย | ความหมาย |
|---|---|
| == , != | เท่ากัน , ไม่เท่ากัน |
| > , < | มากกว่า , น้อยกว่า |
| >= , <= | มากกว่าหรือเท่ากับ , น้อยกว่าหรือเท่ากับ |
| && | และ (ต้องจริงทั้งสองฝั่ง) |
| | | หรือ (จริงเพียงฝั่งเดียวก็ผ่าน) |
ตัวอย่าง
<?php
$score = 75;
if ($score >= 80) {
echo "ได้เกรด 4";
} elseif ($score >= 70) {
echo "ได้เกรด 3";
} else {
echo "ตั้งใจอีกนิดนะ";
}
?>การวนซ้ำ for while
คำสั่งวนซ้ำ (Loop) ใช้สั่งให้โปรแกรมทำงานเดิมซ้ำหลายรอบโดยไม่ต้องเขียนโค้ดซ้ำเอง for เหมาะกับกรณีที่รู้จำนวนรอบแน่นอน ส่วน while จะวนต่อไปเรื่อย ๆ ตราบใดที่เงื่อนไขยังเป็นจริง
ตัวอย่าง
<?php
// พิมพ์เลข 1 ถึง 5 ด้วย for
for ($i = 1; $i <= 5; $i++) {
echo $i . "<br>";
}
// แบบเดียวกันเขียนด้วย while
$i = 1;
while ($i <= 5) {
echo $i . "<br>";
$i++;
}
?>นอกจากนี้ยังมี foreach ใช้วนอ่านข้อมูลทีละรายการจากชุดข้อมูล ซึ่งจะได้ใช้จริงตอนดึงข้อมูลจากฐานข้อมูลมาแสดงผลในบทท้าย ๆ
🧪 Workshop 4: มาเปลี่ยนจาก .html เป็น .php กันเถาะ
จากไฟล์หน้าแรกเว็บ Portfolio ที่ทำเสร็จแล้วมาแปลงเป็น PHP และเปลี่ยนมาทำ Shared Layout จากนั้นให้สร้างหน้าผลงานและรางวัล โดยเรียก Shared Layout มาใช้งาน
วิธีทำ
- เปิดโปรแกรม XAMPP ด้วย Run as administrator
- Start Module Apache และ MySQL
- ย้าย Folder Workshop ไปไว้ภายใต้ C:\xampp\htdocs
- เปิด Web Browser แล้วเข้า URL: http://localhost/Workshop
- เปลี่ยนนามสกุลไฟล์จาก .html เป็น .php
- ทดสอบ Refresh (F5) หน้าเว็บอีกครั้ง
- ทำ Shared Layout โดยสร้าง Folder ./assets/layout แล้วสร้างไฟล์ header.php กับ footer.php
- จากไฟล์ index.php เดิมให้ย้าย html จนถึงปิด navbar ไปใส่ header
- จากไฟล์ index.php เดิมให้ย้าย html ส่วน script ก่อนปิด body จนถึงปิด html ไปใส่ footer
- ที่ไฟล์ index.php ให้ include header.php ที่ด้านบน และ footer.php ที่ด้านล่าง
- ดูผลลัพธ์การแสดงผลต้องคงเดิม
- สร้างหน้าผลงานและรางวัลขึ้นมาเป็นไฟล์ต่อจาก index.php ชื่อ awards.php และ guest_book.php
- ที่ awards.php และ guest_book.php ให้สร้าง container เปล่าและเรียกใช้ Shared Layout รอ
- เปลี่ยน Link ที่ navbar เมนู ผลงานและรางวัลให้เปิดหน้า awards.php และสมุดเยี่ยมให้เปิดหน้า guest_book.php
