🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

[ก้าวแรกสู่ PHP] Server-side Language คืออะไร? มาสร้างเว็บไซต์แบบไดนามิกด้วย PHP กันเถอะ!

"เว็บไซต์ของฉันมีแต่เนื้อหาเดิมๆ น่าเบื่อจัง..."
"คงจะดีนะถ้าเปลี่ยนข้อความที่แสดงตามเวลาหรือวันในสัปดาห์ได้!"

สำหรับคุณที่คุ้นเคยกับการสร้างหน้าเว็บแบบคงที่ (Static Page) ด้วย HTML และ CSS แล้ว ก้าวต่อไปที่หลีกเลี่ยงไม่ได้ก็คือโลกของ "ภาษาฝั่งเซิร์ฟเวอร์ (Server-side Language)" ครับ และตัวแทนของภาษากลุ่มนี้ที่เราจะเริ่มเรียนกันในครั้งนี้ก็คือ PHP นั่นเอง

แน่นอนว่าหลายคนอาจมีคำถามว่า "Server-side คืออะไร?" "มันต่างจาก JavaScript ยังไง?" พูดง่ายๆ ก็คือ PHP เปรียบเสมือนโปรแกรมเมอร์ที่ทำงานอยู่ "เบื้องหลัง" ของเว็บไซต์ ทุกครั้งที่ผู้ใช้เข้ามาดูหน้าเว็บ PHP จะทำงานบนเซิร์ฟเวอร์เพื่อสร้าง "HTML ฉบับสมบูรณ์" ที่ปรับเปลี่ยนตามสถานการณ์นั้นๆ ขึ้นมาทันที แล้วจึงส่งไปให้เบราว์เซอร์ของผู้ใช้ครับ

ในบทความนี้ เราจะข้ามเรื่องยากๆ ไปก่อน แล้วมาลองสร้างโปรแกรมง่ายๆ ที่ "แสดงคำคมที่แตกต่างกันในแต่ละวัน" ด้วยการคัดลอกโค้ดไปวางได้เลย มาสัมผัสประสบการณ์ "มันทำงานได้! มันเปลี่ยนไป!" เพื่อเรียนรู้ความสนุกของ PHP และก้าวแรกของการเขียนโปรแกรมฝั่งเซิร์ฟเวอร์ไปพร้อมๆ กันนะครับ!

การเตรียมตัวเพื่อรัน PHP (สภาพแวดล้อมในการพัฒนา)

PHP นั้นแตกต่างจาก HTML และ CSS ตรงที่ไม่สามารถดับเบิลคลิกไฟล์เพื่อเปิดในเบราว์เซอร์แล้วจะทำงานได้ทันที แต่ต้องอาศัยสภาพแวดล้อมที่เรียกว่า "เซิร์ฟเวอร์" เพื่อแปลและรันโค้ด PHP ครับ

พอได้ยินคำว่า "เตรียมเซิร์ฟเวอร์" อาจจะรู้สึกว่ายาก แต่ไม่ต้องกังวลไปครับ ปัจจุบันมีโปรแกรมฟรีดีๆ ที่ช่วยติดตั้งทุกอย่างที่จำเป็นให้เราในครั้งเดียว เช่น "XAMPP" หรือ "MAMP" ซึ่งเราสามารถใช้โปรแกรมเหล่านี้สร้างเซิร์ฟเวอร์สำหรับฝึกฝน (Local Development Environment) ขึ้นมาบนคอมพิวเตอร์ของเราได้ด้วยการคลิกเพียงไม่กี่ครั้ง

หากคุณยังไม่ได้ติดตั้ง XAMPP กรุณาอ่าน [พื้นฐาน PHP] คู่มือการดาวน์โหลดและติดตั้ง XAMPP แบบละเอียด หลังจากติดตั้งเสร็จ ให้วางไฟล์ PHP ของคุณในโฟลเดอร์ที่กำหนดไว้ (เช่น `htdocs`) แล้วก็พร้อมใช้งานได้เลย!

พื้นฐาน PHP: มาเริ่มจากการแสดงเวลาปัจจุบันกันก่อน

โค้ด PHP จะถูกเขียนแทรกลงใน HTML โดยมีแท็กพิเศษ <?php ... ?> ครอบอยู่ เฉพาะโค้ดที่อยู่ภายในแท็กนี้เท่านั้นที่จะถูกประมวลผลโดยเซิร์ฟเวอร์

ก่อนอื่น เรามาลองเขียนโปรแกรมที่ง่ายที่สุดอย่าง "การแสดงเวลาปัจจุบัน" กันดูครับ PHP มีคำสั่ง echo สำหรับแสดงผลข้อความ และฟังก์ชันอำนวยความสะดวกอย่าง date() สำหรับดึงวันที่และเวลาปัจจุบันมาใช้งาน 


<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <title>ทดสอบ PHP</title>
</head>
<body>
    <p>เวลาปัจจุบันของเซิร์ฟเวอร์คือ <?php echo date('Y-m-d H:i:s'); ?></p>
</body>
</html>

ลองบันทึกโค้ดนี้เป็นชื่อไฟล์อย่าง test.php แล้วนำไปวางในสภาพแวดล้อมเซิร์ฟเวอร์ของคุณ (เช่น XAMPP) จากนั้นเปิดดูผ่านเบราว์เซอร์ ทุกครั้งที่คุณรีเฟรชหน้าเว็บ ตัวเลขวินาทีจะเปลี่ยนไป นี่คือหลักฐานว่า PHP กำลังสร้าง HTML ขึ้นมาใหม่แบบ "ไดนามิก" นั่นเอง!

หัวข้อหลัก: การแสดง 'คำคมประจำวัน' ที่แตกต่างกันในแต่ละวัน

เมื่อแสดงเวลาสำเร็จแล้ว ก็มาถึงหัวข้อหลักของเราในวันนี้ นั่นคือการสร้างฟังก์ชัน "คำคมประจำวัน"

ขั้นตอนการทำงานที่เราต้องการมีดังนี้ครับ

  1. เตรียมข้อความสำหรับแต่ละวันของสัปดาห์ไว้ในรูปแบบของ "Array" (อาร์เรย์)
  2. ใช้ฟังก์ชัน date() เพื่อดึงข้อมูลวันปัจจุบันของสัปดาห์
  3. ใช้วันที่ดึงมาเป็นคีย์ (key) เพื่อเลือกข้อความประจำวันจากในอาร์เรย์
  4. ใช้ echo เพื่อแสดงข้อความที่เลือกออกมา

"อาร์เรย์" ก็เหมือนกับกล่องสารพัดประโยชน์ที่ใช้เก็บข้อมูลหลายๆ ชิ้นไว้ด้วยกันโดยมีชื่อหรือตัวเลขกำกับอยู่ เรามาดูโค้ดกันเลยครับ 


<?php
// ตั้งค่าโซนเวลาเป็นกรุงเทพฯ
date_default_timezone_set('Asia/Bangkok');

// เก็บข้อความของแต่ละวันไว้ในอาร์เรย์แบบเชื่อมโยง (associative array)
$messages = [
    'Sun' => 'วิธีที่ดีที่สุดในการทำนายอนาคต คือการสร้างมันขึ้นมา - อลัน เคย์',
    'Mon' => 'เส้นทางสู่ความสำเร็จและเส้นทางสู่ความล้มเหลวแทบจะเป็นเส้นทางเดียวกัน - คอลิน อาร์. เดวิส',
    'Tue' => 'การกระทำเท่านั้นที่เป็นเครื่องวัดสติปัญญาที่แท้จริง - นโปเลียน ฮิลล์',
    'Wed' => 'ในท่ามกลางความยากลำบาก มีโอกาสซ่อนอยู่ - อัลเบิร์ต ไอน์สไตน์',
    'Thu' => 'ตราบใดที่ยังเรียนรู้ คนผู้นั้นก็ยังไม่แก่เฒ่า - เฮนรี่ ฟอร์ด',
    'Fri' => 'สิ่งเดียวเท่านั้น คือความหลงใหล ที่จะยกระดับจิตวิญญาณของคุณ - พาโบล ปิกัสโซ',
    'Sat' => 'การพักผ่อนไม่ใช่ความเกียจคร้าน แต่มันคือการฟื้นฟู - แดเนียล ดับเบิลยู. โจเซลิน'
];

// ดึงข้อมูลวันปัจจุบันของสัปดาห์เป็นตัวย่อภาษาอังกฤษ (Sun, Mon...)
$today_weekday_en = date('D');

// ดึงข้อความที่ตรงกับวันปัจจุบัน
$today_message = $messages[$today_weekday_en];
?>

นี่คือส่วนของโค้ด PHP ที่ใช้ในการตัดสินใจเลือกข้อความครับ เราใช้ date('D') เพื่อดึงวันปัจจุบันของสัปดาห์ (เช่น 'Sun', 'Mon') แล้วนำไปใช้เลือกข้อความที่สอดคล้องกันจากในอาร์เรย์

โค้ดฉบับสมบูรณ์: หน้า 'คำคมประจำวัน' ที่คัดลอกไปใช้ได้เลย

ทีนี้ เราจะนำส่วนของ PHP ที่สร้างไว้มารวมกับ HTML เพื่อสร้างเป็นหน้าเว็บที่สมบูรณ์กันครับ

【สำคัญ】โปรดคัดลอกโค้ดทั้งหมดด้านล่าง แล้วสร้างไฟล์ชื่อ quote.php จากนั้นนำไฟล์ไปวางในโฟลเดอร์ที่กำหนดของ XAMPP หรือ MAMP (เช่น htdocs) แล้วเปิดดูผ่านเบราว์เซอร์ด้วย URL อย่างเช่น http://localhost/quote.php นะครับ 


<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <title>คำคมประจำวัน</title>
    <style>
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f2f5; }
        .quote-card { background-color: white; padding: 2rem 3rem; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.12); text-align: center; max-width: 600px; min-width: 500px;}
        .quote-day { font-size: 1.5rem; font-weight: bold; color: #007bff; }
        .quote-message { font-size: 1.2rem; color: #333; margin-top: 1rem; line-height: 1.8; }
    </style>
</head>
<body>
<?php
// ตั้งค่าโซนเวลาเป็นกรุงเทพฯ
date_default_timezone_set('Asia/Bangkok');

// เก็บข้อความของแต่ละวันไว้ในอาร์เรย์
$messages = [
    'Sun' => 'วิธีที่ดีที่สุดในการทำนายอนาคต คือการสร้างมันขึ้นมา - อลัน เคย์',
    'Mon' => 'เส้นทางสู่ความสำเร็จและเส้นทางสู่ความล้มเหลวแทบจะเป็นเส้นทางเดียวกัน - คอลิน อาร์. เดวิส',
    'Tue' => 'การกระทำเท่านั้นที่เป็นเครื่องวัดสติปัญญาที่แท้จริง - นโปเลียน ฮิลล์',
    'Wed' => 'ในท่ามกลางความยากลำบาก มีโอกาสซ่อนอยู่ - อัลเบิร์ต ไอน์สไตน์',
    'Thu' => 'ตราบใดที่ยังเรียนรู้ คนผู้นั้นก็ยังไม่แก่เฒ่า - เฮนรี่ ฟอร์ด',
    'Fri' => 'สิ่งเดียวเท่านั้น คือความหลงใหล ที่จะยกระดับจิตวิญญาณของคุณ - พาโบล ปิกัสโซ',
    'Sat' => 'การพักผ่อนไม่ใช่ความเกียจคร้าน แต่มันคือการฟื้นฟู - แดเนียล ดับเบิลยู. โจเซลิน'
];

// ดึงข้อมูลวันปัจจุบันของสัปดาห์
$today_weekday_en = date('D');

// ดึงข้อความที่ตรงกับวันปัจจุบัน
$today_message = $messages[$today_weekday_en];
?>
    <div class="quote-card">
        <p class="quote-day">สำหรับคุณในวันนี้</p>
        <p class="quote-message">"<?php echo $today_message; ?>"</p>
    </div>

</body>
</html>

แสดงผลบนเบราว์เซอร์ได้ไหมครับ? เมื่อวันเปลี่ยนไป คำคมที่แสดงผลก็จะเปลี่ยนตามไปด้วยอัตโนมัติ นี่คือพลังของภาษาฝั่งเซิร์ฟเวอร์อย่าง PHP!

ข้อควรระวังและการประยุกต์ใช้

การตั้งค่าโซนเวลา (Timezone)

ฟังก์ชัน date() จะคืนค่าวันและเวลาตามที่เซิร์ฟเวอร์ตั้งค่าไว้ หากเป็นเซิร์ฟเวอร์ในประเทศไทยก็ไม่มีปัญหา แต่ถ้าใช้เซิร์ฟเวอร์ต่างประเทศ เวลาอาจจะไม่ตรง เพื่อป้องกันปัญหานี้ การระบุโซนเวลาของประเทศไทยไว้ที่ตอนต้นของไฟล์ PHP อย่างชัดเจน เช่น date_default_timezone_set('Asia/Bangkok'); ถือเป็นวิธีปฏิบัติที่ดีครับ

ปรับแต่งข้อความด้วยตัวเอง

ลองเปลี่ยนเนื้อหาในอาร์เรย์ $messages เป็นคำพูดหรือข้อความที่คุณชื่นชอบดูสิครับ การปรับแต่งดีไซน์ของส่วน HTML ด้วย CSS ก็เป็นความคิดที่ดี การนำโค้ดที่คัดลอกมาไปดัดแปลงเป็นคอนเทนต์ของตัวเอง จะทำให้การเรียนรู้สนุกยิ่งขึ้น

สรุป

ยอดเยี่ยมมากครับ! ในก้าวแรกสู่โลกของ PHP นี้ เราได้เรียนรู้ประเด็นต่างๆ ดังนี้ครับ

ขอให้จดจำความรู้สึกตื่นเต้นที่ได้สร้าง "ความเปลี่ยนแปลง" ด้วยมือของตัวเอง ซึ่งเป็นสิ่งที่ทำไม่ได้ด้วย HTML แบบคงที่เพียงอย่างเดียว ก้าวเล็กๆ นี้จะเปิดประตูสู่โลกอันกว้างใหญ่ของการพัฒนาเว็บแอปพลิเคชันให้กับคุณ

ในครั้งต่อไป เราจะมาเรียนรู้กฎพื้นฐานของ PHP อย่าง "ตัวแปร" และ "ชนิดข้อมูล" ให้ลึกซึ้งยิ่งขึ้นกันครับ!

เทมเพลตที่เกี่ยวข้อง