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

[กฎพื้นฐานของ PHP] มาสร้างการ์ดโปรไฟล์ด้วยตัวแปรและอาร์เรย์เชื่อมโยงกันเถอะ!

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

ในครั้งนี้ เราจะมาเรียนรู้หัวใจสำคัญของการเขียนโปรแกรม PHP นั่นก็คือ "วิธีการจัดการกับข้อมูล" ครับ โดยเราจะได้รับอาวุธสำคัญ 2 ชิ้น คือ "ตัวแปร (Variable)" สำหรับเก็บข้อมูลหนึ่งชิ้น และ "อาร์เรย์เชื่อมโยง (Associative Array)" สำหรับจัดการข้อมูลที่เกี่ยวข้องกันหลายๆ ชิ้นพร้อมกัน

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

เตรียมพร้อมสำหรับรัน PHP แล้วหรือยัง?

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

【PHP入門】คู่มือฉบับสมบูรณ์สำหรับดาวน์โหลดและติดตั้ง XAMPP!

สำหรับคนที่พร้อมแล้ว เราไปสู่ขั้นตอนต่อไปกันเลยครับ!

1. ตัวแปร (Variable): "กล่อง" สำหรับเก็บข้อมูล

ในโลกของการเขียนโปรแกรม "ตัวแปร" ก็เปรียบเสมือน "กล่องที่มีชื่อ" สำหรับเก็บข้อมูลต่างๆ เช่น ตัวเลข หรือข้อความ ในภาษา PHP ชื่อตัวแปรจะต้องขึ้นต้นด้วยเครื่องหมายดอลลาร์ ($) เสมอครับ

ตัวอย่างเช่น หากเราต้องการจัดการกับชื่อเว็บไซต์หรือชื่อของคุณใน PHP เราจะเขียนได้ดังนี้ 


<?php
// เก็บข้อความในตัวแปร $site_title
$site_title = "หน้าโปรไฟล์ของฉัน";

// เก็บข้อความในตัวแปร $my_name
$my_name = "สมหญิง ใจดี";

// เก็บตัวเลขในตัวแปร $age
$age = 28;
?>
<!DOCTYPE html>
<html lang="th">
<head>
    <title><?php echo $site_title; ?></title>
</head>
<body>
    <p>สวัสดีค่ะ, ฉันชื่อ <?php echo $my_name; ?> อายุ <?php echo $age; ?> ปีค่ะ</p>
</body>
</html>

บรรทัดที่ว่า $my_name = "สมหญิง ใจดี"; มีความหมายว่า "จงนำข้อความ 'สมหญิง ใจดี' ไปใส่ในกล่องที่ชื่อว่า `$my_name`" ครับ เมื่อเราเก็บข้อมูลไว้ในตัวแปรแล้ว เราสามารถใช้ echo เพื่อเรียกข้อมูลข้างในออกมาแสดงที่ไหนก็ได้และกี่ครั้งก็ได้ตามต้องการ

2. อาร์เรย์เชื่อมโยง (Associative Array): "ชั้นวางของมีป้ายชื่อ" สำหรับจัดเก็บข้อมูลที่เกี่ยวข้องกัน

ข้อมูลโปรไฟล์มักจะมีข้อมูลที่เกี่ยวข้องกันหลายอย่างใช่ไหมครับ เช่น ชื่อ, ตำแหน่ง, งานอดิเรก เป็นต้น การจะจัดการข้อมูลเหล่านี้ด้วยตัวแปรแยกกันทีละตัว (`$name`, `$role`, `$hobby`...) คงจะลำบากน่าดูถ้ามีข้อมูลเยอะๆ

ตรงนี้เองที่ "อาร์เรย์ (Array)" จะเข้ามามีบทบาทครับ อาร์เรย์เป็นเหมือนกล่องที่ใหญ่ขึ้นมาอีกขั้น ใช้สำหรับจัดการข้อมูลหลายๆ ชิ้นพร้อมกัน โดยเฉพาะใน PHP เรามักจะใช้ "อาร์เรย์เชื่อมโยง" ซึ่งเป็นเหมือน "ชั้นวางของที่มีป้ายชื่อ" ทำให้เราสามารถจัดการข้อมูลโดยใช้ "ชื่อ (คีย์)" แทนการใช้ตัวเลขได้

วิธีสร้างและใช้งานอาร์เรย์เชื่อมโยง

หากต้องการจัดการข้อมูลโปรไฟล์ด้วยอาร์เรย์เชื่อมโยง เราสามารถเขียนได้ดังนี้ครับ 


<?php
// จัดเก็บข้อมูลโปรไฟล์ในอาร์เรย์เชื่อมโยงชื่อ $profile
$profile = [
    'name'    => 'สมชาย มั่นคง',
    'role'    => 'นักออกแบบเว็บไซต์',
    'hobby'   => 'ท่องคาเฟ่ในวันหยุดสุดสัปดาห์',
    'comment' => 'ตั้งใจออกแบบเว็บที่เรียบง่ายและใช้งานสะดวกครับ'
];
?>

'name' และ 'role' ก็คือ "คีย์ (ป้ายชื่อ)" ส่วนข้อมูลที่อยู่ทางขวาของ => ก็คือ "ค่า (ของที่อยู่ข้างใน)" ครับ

การจะดึงข้อมูลชิ้นใดชิ้นหนึ่งออกจากอาร์เรย์ เราจะใช้รูปแบบ ชื่ออาร์เรย์['คีย์'] ในการระบุ 


<?php
$profile = [
    'name'    => 'สมชาย มั่นคง',
    'role'    => 'นักออกแบบเว็บไซต์',
    'hobby'   => 'ท่องคาเฟ่ในวันหยุดสุดสัปดาห์',
    'comment' => 'ตั้งใจออกแบบเว็บที่เรียบง่ายและใช้งานสะดวกครับ'
];

// ระบุคีย์ 'name' เพื่อดึงค่าออกมาแสดงผล
echo $profile['name']; // ผลลัพธ์: สมชาย มั่นคง

echo '<br>'; // สำหรับขึ้นบรรทัดใหม่

// ระบุคีย์ 'comment' เพื่อดึงค่าออกมาแสดงผล
echo $profile['comment']; // ผลลัพธ์: ตั้งใจออกแบบเว็บที่เรียบง่ายและใช้งานสะดวกครับ
?>

จะเห็นได้ว่า การใช้อาร์เรย์เชื่อมโยงช่วยให้เราสามารถจัดการข้อมูลที่มีความเกี่ยวข้องกันสูงอย่างข้อมูลโปรไฟล์ให้เป็นกลุ่มก้อนเดียวกัน ทำให้เข้าใจและจัดการได้ง่ายมากครับ

ฉบับสมบูรณ์: "การ์ดโปรไฟล์" ที่คัดลอกไปใช้ได้เลย

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

【สำคัญ】โปรดคัดลอกโค้ดทั้งหมดด้านล่าง แล้วสร้างไฟล์ชื่อ profile.php จากนั้นนำไฟล์ไปวางในโฟลเดอร์ `htdocs` ของ XAMPP แล้วเปิดดูผ่านเบราว์เซอร์ด้วย URL อย่างเช่น http://localhost/profile.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; min-height: 100vh; margin: 0; background-color: #eef2f7; padding: 2rem; }
        .profile-card {
            background-color: white;
            border-radius: 15px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            max-width: 400px;
            width: 100%;
            text-align: center;
            padding: 2.5rem;
            border-top: 5px solid #007bff;
        }
        .profile-img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: 0 4px 15px rgba(0,0,0,0.15); margin-bottom: 1rem; }
        .profile-name { font-size: 1.8rem; font-weight: 600; color: #333; margin: 0; }
        .profile-role { font-size: 1.1rem; font-weight: 300; color: #777; margin-top: 0.25rem; }
        .profile-divider { border: 0; height: 1px; background-color: #eee; margin: 1.5rem 0; }
        .profile-info p { font-size: 1rem; color: #555; line-height: 1.6; text-align: left; margin: 0.5rem 0; }
        .profile-info p strong { color: #333; margin-right: 0.5em; }
    </style>
</head>
<body>
<?php
// จัดการข้อมูลโปรไฟล์ทั้งหมดในอาร์เรย์เชื่อมโยงเดียว
$profile = [
    'name'        => 'สมหญิง ใจดี',
    'role'        => 'วิศวกรฟรอนต์เอนด์',
    'hobby'       => 'ถ่ายภาพ, ท่องเที่ยว',
    'comment'     => 'มุ่งมั่นสร้างสรรค์ UI/UX ที่ใช้งานง่ายและน่าจดจำสำหรับผู้ใช้ค่ะ',
    'image_url'   => 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=300' // ใส่ URL รูปภาพของคุณที่นี่
];
?>
    <div class="profile-card">
        <img src="<?php echo $profile['image_url']; ?>" alt="รูปโปรไฟล์" class="profile-img">
        <h2 class="profile-name"><?php echo $profile['name']; ?></h2>
        <p class="profile-role"><?php echo $profile['role']; ?></p>
        <hr class="profile-divider">
        <div class="profile-info">
            <p><strong>งานอดิเรก:</strong><?php echo $profile['hobby']; ?></p>
            <p><strong>คติประจำใจ:</strong><?php echo $profile['comment']; ?></p>
        </div>
    </div>

</body>
</html>

แสดงการ์ดโปรไฟล์สวยๆ บนเบราว์เซอร์ได้ไหมครับ? เพียงแค่แก้ไขข้อมูลในอาร์เรย์ $profile ในส่วนของ PHP เป็นข้อมูลของคุณเอง ก็สามารถสร้างการ์ดแนะนำตัวได้อย่างง่ายดาย ลองเปลี่ยน URL ของรูปภาพแล้วเล่นดูได้เลยครับ

ขั้นประยุกต์: การสร้างการ์ดแนะนำทีมงานหลายคนโดยอัตโนมัติ

ถ้าหากเราต้องการแนะนำทีมงานหลายๆ คนล่ะ จะทำอย่างไรดี? การคัดลอกโค้ดการ์ดโปรไฟล์มาวางซ้ำๆ ตามจำนวนคนคงจะเหนื่อยแย่เลยใช่ไหมครับ ใน럴 때 바로 프로그래밍이 등장합니다.

เราสามารถใช้โครงสร้างแบบซ้อนกัน ("อาร์เรย์ซ้อนอาร์เรย์" หรืออาร์เรย์หลายมิติ) ร่วมกับการ "วนซ้ำ (foreach)" ที่เคยเกริ่นไปในบทความที่แล้ว เพื่อสร้างการ์ดของทีมงานทุกคนขึ้นมาโดยอัตโนมัติได้ 


<?php
// เก็บข้อมูลโปรไฟล์ของทีมงานหลายคนในรูปแบบอาร์เรย์ซ้อนอาร์เรย์
$staff_list = [
    [
        'name' => 'สมชาย มั่นคง', 'role' => 'ผู้กำกับ', 'comment' => 'นำพาโปรเจกต์ทั้งหมดไปสู่ความสำเร็จ', 'image_url' => 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=300'
    ],
    [
        'name' => 'สมหญิง ใจดี', 'role' => 'ดีไซเนอร์', 'comment' => 'สร้างสรรค์งานดีไซน์ที่น่าจดจำ', 'image_url' => 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&w=300'
    ],
    [
        'name' => 'สมศักดิ์ ขยัน', 'role' => 'วิศวกร', 'comment' => 'สร้างระบบที่เสถียรและเชื่อถือได้', 'image_url' => 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=300'
    ]
];
?>

<!-- ส่วนแสดงผล HTML จะอยู่นอกลูป -->
<div class="staff-container">
    <h1>ทีมของเรา</h1>
    <div class="card-grid">
        <?php foreach ($staff_list as $staff_member): ?>
            <div class="profile-card">
                <img src="<?php echo $staff_member['image_url']; ?>" class="profile-img">
                <h2 class="profile-name"><?php echo $staff_member['name']; ?></h2>
                <p class="profile-role"><?php echo $staff_member['role']; ?></p>
                <p><?php echo $staff_member['comment']; ?></p>
            </div>
        <?php endforeach; ?>
    </div>
</div>

ลูป foreach จะดึงข้อมูลแต่ละชิ้น (อาร์เรย์โปรไฟล์ของพนักงานแต่ละคน) จากอาร์เรย์ $staff_list ออกมาทีละคน แล้วสร้างการ์ด HTML ขึ้นมาทุกครั้ง ไม่ว่าทีมงานจะเพิ่มขึ้นกี่คน เราก็แค่เพิ่มข้อมูลลงในอาร์เรย์ PHP เท่านั้นเอง ซึ่งสะดวกและมีประสิทธิภาพมากครับ

สรุป

ยอดเยี่ยมมากครับ! ในครั้งนี้เราได้เรียนรู้วิธีการจัดการข้อมูลพื้นฐานที่สุดใน PHP กันไปแล้ว

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

ในครั้งต่อไป เราจะมาเรียนรู้เกี่ยวกับ "โครงสร้างควบคุม (Control Structures)" เช่น `if` statement ซึ่งจะทำให้โปรแกรมของเราสามารถตัดสินใจได้ว่า "ถ้าเป็นแบบนี้ จะทำแบบนั้น" กันครับ!