web analytics

เขียนเว็บด้วยภาษา php แบบพื้นฐาน ตอนที่ 2 – HTML

ตุลาคม 28, 2018 benznest
Off
php
Post Views: 14,597

cover

สวัสดีครับ มาต่อกับตอนที่สองของ ตอนก่อนหน้านี้เป็นเรื่อง php พื้นฐานครับ บทความนี้ก็ยังพื้นฐานเหมือนเดิม เพิ่มเติมคือเรื่อง HTML ซึ่งผมคิดว่าจำเป็นมากที่ต้องรู้ ดังนั้นบทความนี้จะพาไปเขียน HTML ครับ แล้วเราค่อยเอา HTML + php อีกที

ติดตั้งโปรแกรม WAMP + VS code อยู่ในตอนที่ 1

ตอนก่อนหน้านี้

เขียนเว็บด้วยภาษา php แบบพื้นฐาน ตอนที่ 1 – Basic

 

รู้จัก HTML

สรุปแบบง่ายๆ คือ เป็นภาษาเอาไว้ให้ browser แสดงผล เช่น ตัวใหญ่ ตัวเล็ก  ขึ้นบรรทัดใหม่ ทำลิงค์ แสดงรูปภาพ ล้วนใช้ภาษานี้

คำสั่งของมันจะเป็นรูปแบบแท็ก <a> …. </a> คือมี <> เปิด แล้วก็ </> ปิด
โครงสร้างของมันจะเป็นแบบนี้

<html>
    <heade>
        <title>My web</title>
    </head>
    <body>
        <h1>Hello word</h1>
        <!-- Comment -->
    </body>
</html>

 

ที่สนใจคือ <body> เราจะเขียนเนื้อหาของเว็บที่นี่นั่นเอง ส่วนหัวเว็บก็เขียนที่ <title>
<h1> คือ การทำหัวข้อ ดังนั้นตัวหนังสือก็จะใหญ่
1

 

เราจะเขียนแค่ แท็กที่เราต้องการก็ได้ เพราะ browser มันฉลาด

<title>My web</title>
<h1>Hello word</h1>

ผลลัพธ์ก็ยังแสดงแบบเขียนแบบเต็มตอนแรก

 

รู้จักแท็กที่จำเป็นของ HTML

จะเห็นว่า HTML มันก็เป็นภาษาง่ายๆ แค่เราต้องจำแท็ก กับลูกเล่นของมันนิดหน่อย ที่เรารูก่อนหน้านี้ไปแล้วคือ <br> ขึ้นบรรทัดใหม่ , <h1> คือทำหัวข้อ ต่อไปผมจะแนะนำอันที่ควรรู้ ใช้งานบ่อยๆ

แท็ก <h> ใช้สำหรับทำหัวข้อ

มีตั้งแต่ <h1> ถึง <h6> โดย <h1> จะเป็นหัวข้อใหญ่ที่สุด

<h1>H1 Hello word</h1>
<h2>H2 Hello word</h2>
<h3>H3 Hello word</h3>
<h4>H4 Hello word</h4>
<h5>H5 Hello word</h5>
<h6>H6 Hello word</h6>
<h7>H7 Hello word</h7>

ลลองใช้ <h7> ซึ่งมันไม่มีคำสั่งนี้ มันจะแสดงเป็นข้อความธรรมดาแทน

2

 

แท็ก <font> สำหรับใส่สี ขนาดตัวหนังสือ

ใส่สีตัวอักษร กำหนดขนาดได้ โดยใช้คำสั่ง <font>

<font size="2" color="red">My</font>
<font size="4" color="orange"> Name</font>
<font size="8" color="blue"> is</font>
<font size="12" color="green"> Benz</font>

9

 

แท็ก <a> สำหรับทำข้อความลิงค์

โดยจะเขียน url ไว้ที่ attribute ที่ชื่อว่า href ของ <a>

<a href="https://google.com">เปิดเว็บไซต์ google.com</a>

3

 

การทำตาราง

การทำตารางจะใช้ <table> <th> <tr> <td>
<tr> คือ แถว
<td> คือ คอลัม

<table border="1">
    <tr>
        <th>ลำดับ</thh>
        <th>ชื่อ</th>
        <th>คะแนน</th>
    <tr>
    <tr>
        <td>1</td>
        <td>นาย กอไก่</td>
        <td>80</td>
    <tr>
    <tr>
        <td>2</td>
        <td>นาย ขอไข่</td>
        <td>67</td>
    <tr>
</table>

ลองรัน

4

 

แท็ก <u> <i> <b>

<u> ขีดเส้นใต้
<i> ตัวเอียง
<b> ตัวหนา

<u>ขีดเส้นใต้</u>
<i>ตัวเอียง</i>
<b>ตัวหนา</b>
<b><i><u>รวม</u></i></b>

5

 

แท็ก <img> รูปภาพ

ก่อนอื่นหารูปภาพมารูปนึง เอาไปใส่ไว้ในโฟลเดอร์โปรเจคของเรา และเพื่อเป็นสัดส่วน ให้สร้างโฟลเดอร์ชื่อ image เอาไว้เก็บรูปภาพด้วยเลย

6

 

การกำหนดรูปก็คือ ใส่ path ไว้ใน src ของ <img>

<img src="image/food.jpg" width="300">

7

 

หรือจะกำหนด เป็น URL ก็ได้ กำหนดขนาดเป็น % ก็ได้เช่นกัน

<img src="https://images.pexels.com/photos/70497/pexels-photo-70497.jpeg" width="50%">

8

 

นอกจากนี้ที่ใช้บ่อยๆก็ยังมีเรื่องของ Form เช่นช่องกรอกข้อความ ปุ่ม Checkbox , Select เดี๋ยวค่อยๆใช้งานกันในตอนถัดๆไปครับ

 

ทำเว็บรายการอาหาร

ลองใช้แท็กที่ได้เรียนมาของ HTML มาสร้างเป็นเว็บง่ายๆดูครับ

10
เฉลยโค้ด

<h2>รายการอาหาร</h2>
<table border="1">
    <tr>
        <th>ลำดับ</thh>
        <th>รูปภาพ</th>
        <th>ชื่อ</th>
        <th>ราคา</th>
        <th>เหลือ</th>
    <tr>
    <tr>
        <td>1</td>
        <td><img src="https://images.pexels.com/photos/70497/pexels-photo-70497.jpeg" width="200"></td>
        <td>เบอร์เก้อ</td>
        <td>180 บาท</td>
        <td>1 จาน</td>
    <tr>
    <tr>
        <td>2</td>
        <td><img src="https://images.pexels.com/photos/46239/salmon-dish-food-meal-46239.jpeg" width="200"></td>
        <td>แซลมอน</td>
        <td>180 บาท</td>
        <td><font color="red"><b>หมด</b></font></td>
    <tr>
        <td>3</td>
        <td><img src="https://images.pexels.com/photos/8500/food-dinner-pasta-spaghetti-8500.jpg" width="200"></td>
        <td>สปาเก็ตตี้</td>
        <td>80 บาท</td>
        <td><font color="red"><b>หมด</b></font></td>
    <tr>
</table>

 

การใช้ php + HTML

ทีนี้มาลองใช้ ข้อมูลในตัวแปร php แล้วมาปริ้นแสดงใน Table ของ HTML ครับ

มีตัวแปร data เป็น array เก็บข้อมูลของอาหารอยู่ เราก็สามารถนำมา loop ปริ้นแถวใส่ table ได้
และนี่คือศาสตร์การใช้ php + HTML ครับ คือมันจะมีโค้ดของสองอย่างนี้ปนกันไปมา

<?php
    $data = [
                ["img"=>"https://images.pexels.com/photos/70497/pexels-photo-70497.jpeg",
                "name"=>"เบอร์เก้อ",
                "price"=>180,
                "available"=> 1],
                ["img"=>"https://images.pexels.com/photos/8500/food-dinner-pasta-spaghetti-8500.jpg",
                "name"=>"สปาเก็ตตี้",
                "price"=>80,
                "available"=> 0]
            ]
?>


<h2>รายการอาหาร</h2>
<table border="1">
    <tr>
        <th>ลำดับ</thh>
        <th>รูปภาพ</th>
        <th>ชื่อ</th>
        <th>ราคา</th>
        <th>เหลือ</th>
    <tr>
    <?php 
        $count = 1;
        foreach($data as $row){ ?>
    <tr>
        <td><?php echo $count ?></td>
        <td><img src="<?php echo $row['img'] ?>" width="200"></td>
        <td><?php echo $row['name'] ?></td>
        <td><?php echo $row['price'] ?> บาท</td>
        <td><?php echo $row['available'] ?> จาน</td>
    <tr>
    <?php 
        $count++;
        } 
    ?>

</table>

 

ลอง refresh

11

ทีนี้จะเห็นว่าตรงเหลือของสปาเก็ตตี้มันเป็น 0 จาน ไม่สวยเลย จะให้ขึ้นคำว่า หมด แทน

ก็แค่เพิ่มเงื่อนไข if ตรงคอลัมของคงเหลือ

<?php
    $data = [
                ["img"=>"https://images.pexels.com/photos/70497/pexels-photo-70497.jpeg",
                "name"=>"เบอร์เก้อ",
                "price"=>180,
                "available"=> 1],
                ["img"=>"https://images.pexels.com/photos/8500/food-dinner-pasta-spaghetti-8500.jpg",
                "name"=>"สปาเก็ตตี้",
                "price"=>80,
                "available"=> 0]
            ]
?>

<table border="1">
    <tr>
        <th>ลำดับ</thh>
        <th>รูปภาพ</th>
        <th>ชื่อ</th>
        <th>ราคา</th>
        <th>เหลือ</th>
    <tr>
    <?php 
        $count = 1;
        foreach($data as $row){ ?>
    <tr>
        <td><?php echo $count ?></td>
        <td><img src="<?php echo $row['img'] ?>" width="200"></td>
        <td><?php echo $row['name'] ?></td>
        <td><?php echo $row['price'] ?> บาท</td>
        <td><?php 
            if($row['available'] == 0){
                echo "<b><font color='red'>หมด</font></b>";
            }else{
                echo $row['available']." จาน";
            } 
        ?></td>
    <tr>
    <?php 
        $count++;
        } 
    ?>

</table>

12

 

 

มือใหม่จะ งงการใช้ “ กับ ‘ ปนกันระหว่าง HTML กับ php

คือทั้ง HTML และ php จะใช้ ” หรือ ‘ ก็ได้
แต่พอเอาไปอยู่ใน php echo ตัวของ HTML จะต้องใช้แบบที่ไม่ซ้ำกับ php

คือใช้สลับกันนั่นเอง ใช้อันไหนก็ได้

    echo '<font color="red">Hello</font>';
    echo "<font color='red'>Hello</font>";

 

ซึ่ง ตัวแปร array ที่มีการเรียก key จะต้องใช้วิธีต่อ string ไม่สามารถเขียนรวมใน echo ได้
ต้องเขียนแบบนี้

echo "My name is <font color='red'>".$data["name"]."</font>";
echo 'My name is <font color="red">'.$data['name'].'</font>';

 

จบแล้ว

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

 

php