วันเสาร์ที่ 10 พฤศจิกายน พ.ศ. 2555

CSS - ตัวอย่างการทำฟอร์มกรอกข้อมูล

ในไฟล์ XHTML (ไฟล์ formtest.htm)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
          <meta http-equiv="Content-Type" content="text/html; charset=windows-874">
          <title>แบบฟอร์ม</title>
          <link rel="stylesheet" type="text/css" href="formtestcss.css">
</head>

<body>
          การจัดหน้าตาของฟอร์มจะใช้ label แสดงข้อความ และใช้แท็ก p แทนการใช้ตาราง ซึ่ง p ทำหน้าที่เหมือนแท็ก tr ต่อไปเป็นโค้ดของฟอร์ม

          <form action="#" method="post" enctype="multipart/form-data">
          <p>
                    <label for="name">ชื่อ : </label>
                    <input type="text" name="name" id="name" />
          </p>
          <p>
                    <label for="mail"> อีเมลล์ : </label>
                    <input type="text" name="mail" id="mail" />
          </p>
          <p>
                    <label for="note">รายละเอียด : </label>
                    <textarea name="note" id="note" cols="50" rows="10"></textarea>
          </p>
          <p class="sub">
                    <input type="submit" name="submit" class="submit" value="ส่งข้อมูล" />
          </p>
          </form>
</body>
</html>


ในไฟล์ CSS (ไฟล์ formtestcss.css)

p {
          padding: 0;
          margin: 4px 0;
  }

label {
          float: left;
          position: relative;
          width: 145px;
          line-height: 20px;
          text-align: right;
          padding-right: 5px;
      }

p.sub {
          padding-left: 150px;
      }





CSS - เรื่องของ SEO


          การทำ SEO ที่มีประสิทธิภาพมีหลายวิธี เช่น การจัดการหน้าเวปให้มีขนาดย่อมลง จัดการกับ content ให้เป็นระเบียบเรียบร้อย รวมไปถึงตัว code เองด้วย และ เนื้อหาที่ตรง ถูกต้องตามวัตถุประสงค์ของเวปไซท์ พยายามแทนที่ภาพด้วย text ให้มากที่สุด โดย text เหล่านั้นไม่ใช่การ spaming กับ search engine spiders

ความสัมพันธ์ ระหว่าง code และ เนื้อหา

          Search Engine Spider นั้นทำงานค่อนข้างจะคล้าย ๆ กันทุกตัว ซึ่งก็คือ เหมือนกับตาของมนุษย์ และถ้ามันมี text ที่มันไม่มีประโยชน์มากๆ มันจะเป็นการยากที่จะทำให้มันหาเนื้อหา หรือ สรุปใจความบนหน้าเวปนั้นว่ากล่าวถึงอะไร ควรจะนำลงไปจัดในหมวดหมู่ใด เพราะฉะนั้นสรุปง่าย ๆ ว่า ต้องทำให้มันง่ายที่ผู้ใช้จะอ่าน และ ง่ายต่อเจ้า Search Engine Spider ที่จะเข้ามาอ่านด้วยเช่นกัน

ตัวอย่าง

          <strong> <font color=”red” size=”20px”> CSS </font></strong>

ถ้าเป็น XHTML

          <h1> CSS </h1>

และใน CSS

          h1 {font-famaily: Arial; font-size: 24px; font-weight: bold; color: green;}

          จากตัวอย่าง ใช้ H1 เพื่อที่จะบอกให้รู้ว่าเจ้า text ที่ตัวมันครอบอยู่นั้นหมายถึงหัวข้อที่สำคัญที่สุด โดยเจ้า Search Engine Spider ก็จะเข้าใจตามความหมายของ tag นั้น แล้วไปกำหนดคุณลักษณะของการแสดงผลของ H1 ด้วย CSS ในที่นี้ไม่ได้หมายความว่า จะต้องใช้ H1 กับหัวข้อเสมอไป ใน XHTML นั้นสามารถเรียกมาใช้ได้ตั้งแต่ H1 ไปจนถึง H6 ลำดับความสำคัญก็จะลดน้อยลงไปตามตัวเลขที่มากขึ้น เพราะฉะนั้นต้องเลือกใช้ให้เหมาะสม

การใช้รูปภาพ

          สามารถใช้รูปภาพนั้นให้เป็น background picture แทนได้ ด้วยการใช้ CSS ตกแต่ง ข้อมูลที่อยู่ใน code จะต้องเหมือนกับสิ่งที่ตาของ user เห็น และ Search Engine Spider เห็น ไม่เช่นนั้นจะเข้าข่าย Black Hat และได้รับโทษแบนเวปได้

ตัวอย่าง ใน XHTML

          <h1><span> TEST </span></h1>

และ ใน CSS

          h1 {
                    width: 316px;
                    height: 158px;
                    background: url(../images/bg/h1_inner_logo.jpg) no-repeat;
          }

          h1 span {visibility: hidden;}

          รูปภาพของคุณก็จะต้องมีคำว่า TEST ไม่ใช่รูปภาพอีกคำ ใน code เป็นอีกคำ ส่วนอื่น ๆ ก็เช่นกัน ไม่ใ่ช่จงใจซ่อนเนื้อหาบางอย่างไว้ เพื่อผลลัพธ์ทาง SEO ถ้าโดนจับได้ Search Engine ก็จะแบนเวปไซท์ที่กระทำการแบบนี้โดยทันที



CSS - เรื่องของตาราง

กำหนดในส่วนของแท็ก table

          รูปแบบ  table-layout: value

          เป็นการกำหนดขนาดของตารางให้เปลี่ยนแปลงตามเนื้อหา หรือไม่เปลี่ยนแปลงตามเนื้อหา โดยที่ค่า value มี

          automatic คือ ให้เปลี่ยนขนาดตามความยาวของเนื้อหา
          fixed คือ ให้ขนาดคงตัวไม่เปลี่ยนแปลง

กำหนดในส่วนของแท็ก td

          รูปแบบ  align : value;     (value มี left, right,center, justify)
                       vertical-align : value;     (value มี baseline, top, middle, bottom)

          ใช้จัดรูปแบบเนื้อหาในตาราง จะมีผลกับรูปภาพและข้อความเท่านั้น

<thead>, <tfoot> และ <tbody>

          เป็นแท็กที่ใช้ในแท็ก table เพื่อแบ่งส่วนของตาราง โดย <thead> </thead> เป็นส่วนหัวของตาราง <tbody> </tbody> เป็นส่วนเนื้อหาของตาราง และ <tfoot> </tfoot> เป็นส่วนท้ายของตาราง



CSS - การกำหนดรูปแบบตัวอักษร

มี property ดังต่อไปนี้

font-family : font_name ฟอนท์ ใส่เป็นชื่อฟอนต์ กรณีที่มีมากกว่า 1 ฟอนต์ ต้องคั่นด้วย ,
font-size : value ขนาดตัวอักษร มีค่า small, medium, large, 1-7, ตัวเลขความสูงพร้อมหน่วย เช่น px (pixel), pt (point)
font-weight : value ความหนาของตัวอักษร มีค่า normal, extra-light (บางพิเศษ), light (ตัวบาง), medium, bold (หนา), extra-bold (หนาพิเศษ)
font-style : value รูปทรงของตัวอักษร มีค่า normal, italic (ตัวเอียง), smallcaps (ตัวพิมพ์เล็ก)
font-height : value ความสูงของบรรทัด มีค่า 1-7 หรือตัวเลขความสูงพร้อมหน่วย

color : value สีของตัวอักษร ใส่ชื่อสี หรือ ตัวเลขฐานสิบหกต่อหลังเครื่องหมาย #
background : value พื้นหลังของตัวอักษร ใส่ชื่อสี หรือ ตัวเลขฐานสิบหกต่อหลังเครื่องหมาย #
word-spacing : length ระยะห่างระหว่างคำ ใส่ค่าตัวเลขความห่างพร้อมหน่วย
letter-spacing : length ระยะห่างระหว่างตัวอักษร ใส่ค่าตัวเลขความห่างพร้อมหน่วย

text-decoration : value การขีดเส้นข้อความ มีค่า underline (ขีดเส้นใต้), none (ไม่ขีดเส้นใต้), line-through (ขีดเส้นพาดกลางข้อความ)
text-align : value จัดย่อหน้าข้อความ มีค่า left (ชิดซ้าย), right (ชิดขวา), center (กึ่งกลาง), justify (เท่ากันทั้งสองด้าน)
text-transform: value แปลงอักษรภาษาอังกฤษ มีค่า uppercase (ตัวพิมพ์ใหญ่), lowercase (ตัวพิมพ์เล็ก), capitalize (ให้ตัวแรกของประโยคเป็นตัวใหญ่)
text-indent: value การจัดย่อหน้า ค่าคือตัวเลขพร้อมหน่วย (บอกระยะย่อหน้า)

หน่วยของตัวอักษร มี  in (นิ้ว) , cm (เซ็นติเมตร) , mm (มิลลิเมตร) , pt (พอยท์) , pc (ไพก้า)   (1 ไพก้า = 12 พอยท์)

การขึ้นบรรทัดใหม่ ที่ไม่ใช่ย่อหน้าใหม่

แท็ก br จะทำให้ขึ้นบรรทัดใหม่ โดยระยะห่างระหว่างบรรทัดจะกว้างตามปกติเหมือนตัวหนังสือสองบรรทัด พิมพ์ <br /> ในตำแหน่งที่ต้องการขึ้นบรรทัดใหม่ โดยไม่ต้องมี tag ปิด

เพิ่มเติม
  - เครื่องหมาย slash ( / ) จำเป็นเฉพาะใน XHTML เท่านั้น และจะต้องไม่ลืมว่าต้องเว้นช่องว่างระหว่างคำว่า br และเครื่องหมาย / โดยการเคาะ spacebar 1 ทีด้วย
- สามารถใช้ br ได้หลายครั้ง ถ้าต้องการเว้นหลายๆบรรทัด




CSS - div กับ span


          แท็ก div และ span เป็นแท็กที่ใช้ในการแบ่งกลุ่มข้อมูล เพื่อกำหนดการแสดงผลบนหน้าเว็บเพจ ทั้งสองมีความแตกต่างกันตรงที่ผลลัพธ์ของการแสดงผลบนเว็บเพจ ซึ่งแตกต่างกันดังต่อไปนี้

          div เป็นแท็กที่ใช้กำหนดรูปแบบข้อความให้แตกต่างจากข้อความอื่นๆ ในบรรทัดนั้น โดยที่แท็ก div จะแบ่งกลุ่มข้อมูลออกจากกัน โดยขึ้นบรรทัดใหม่ทุกครั้งที่โปรแกรมพบแท็กดังกล่าว

          span ใช้เพื่อกำหนดรูปแบบข้อความให้มีรูปแบบที่แตกต่างจากข้อความอื่นๆ ในบรรทัดนั้น โดยไม่ขึ้นบรรทัดใหม่




CSS - float และ clear


float
          float แปลว่า ลอย มีคุณสมบัติทำให้ element กลายสภาพจากสถานะปกติให้สามารถลอยไป ณ ตำแหน่งที่เรากำหนด และอนุญาติให้ text หรือ element อื่น ๆ ล้อมรอบมันได้ แต่ส่วนมากแล้วมักถูกใช้กำหนดกับรูปภาพ มันก็คือคำสั่ง css ที่สร้างมาเพื่อแทน align="left" กับ align="right"

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

          ตัวอย่างการนำไปใช้

                 body { font-family: Arial, Helvetica, sans-serif;  font-size: 100%; }
                 .contentStyle01 { width: 550px;  font-size: 0.75em; }
                 .contentStyle01 img {float: left; margin: 0.625em; border: 1px solid #666;}


จัดตำแหน่งด้วย float และ clear

          การวางตำแหน่ง layout ของ div แต่ละอัน จะใช้ float และ clear เป็นประจำ ทำให้วางตำแหน่งได้อิสระมากขึ้น ในกรณีที่ต้องการมีหลายคอลัมน์ ใน 1 หน้า

          float นั้นจะคล้าย align ที่เราใส่ใน table เมื่อต้องการให้อยู่ชิดซ้ายก็ใส่ float: left ถ้าชิดขวาใส่ float: right

          clear นั้น clear: left คือ ไม่ยอมให้มีอะไรอยู่ด้านซ้าย clear: right คือ ไม่ยอมให้มีอะไรอยู่ด้านขวา ที่มักใช้เป็นประจำคือ clear: both คือไม่ยอมให้มีอะไรอยู่ทั้ง 2 ด้าน มักใช้กับส่วน footer





CSS - Position

รูปแบบ position : value

คือ การวางเลย์เอาท์หน้าเว็บ ด้วยการกำหนดให้วัตถุย้ายไปในตำแหน่งต่างๆ

ค่า value มีดังนี้

static
เป็นค่าปกติของ position คือ ถ้าในกรณีที่เราไม่ได้กำหนด position ให้ element ใดๆ css จะเลือกค่า static ให้โดยปริยาย และการใช้ static คือไม่สามารถสั่งได้ว่าให้ห่างจาก ซ้าย ขวา หน้า หลัง ได้เท่าไหร่

fixed
ทำให้ element ที่ถูกกำหนดอยู่กับที่ มันจะไม่ย้ายไปไหน แม้ว่าหน้าต่างจะเลื่อนไป โดยหากจะกำหนดตำแหน่งของวัตถุบนจอภาพก็ให้ใช้กับ top bottom left และ right เช่น
position: fixed;
top: 30px;
left: 100px;

relative
ถ้ากำหนด position ให้เป็น relative สามารถจะให้ element นี้ อยู่ถัดจาก element ก่อนหน้า โดยกำหนด กับคำสั่ง top bottom left right เช่น position: relative; top: 20px; left: -50px; หมายความว่า element ที่ถูกกำหนดนี้ ให้ด้านบนอยู่ห่างจาก element ก่อนหน้านี้ 20px และ เขยื้อนไปทางซ้าย 50px เมื่อเทียบกับ element ก่อนหน้านี้

absolute
ถ้า position ของ element ใดๆ โดนสั่งแบบ absolute การทำงานคือ ไม่ว่าจะสั่งให้ไปอยู่ที่ไหนในหน้า absolute จะไปตามสั่งโดยไม่ได้มีการอ้างอิงค่าจาก element ก่อนหน้านี้ คือแยกออกไปเลย โดยการอ้างอิงตำแหน่ง แกน x,y ตามหน้าจอ เช่น position: absolute; top: 20px; left: 80px; ตำแหน่งของวัตถุจะอยู่ห่างจากขอบจอของบราวเซอร์ด้านบน 20px ด้านซ้าย 80px

การซ้อน position แบบซ้อน absolute ใน relative ซึ่งค่า absolute อยู่ใน element ของ relative ค่า absolute แบบนี้ จะอ้างอิงค่า x,y ของ element ที่ถูกสั่ง position เป็น relative แทนที่การอ้างค่า x,y ของหน้าเว็บแทน

เช่น

.box1 {
position: relative;
left: 100px;
top: 30px;
background: #ff9900;
height: 150px;
width: 700px;
}

.box2 {
position: absolute;
top: 20px;
right: 5px;
background: #FFFFFF;
}

โดย

<div class="box1">
<div class="box2">
</div>
</div>

คลาส box2 จะอ้างค่า x,y จาก คลาส box1 แทนการอ้างค่าจากหน้าจอ





CSS - Display

คุณสมบัติ display จะระบุว่า element นั้นๆ ควรจะมองเห็น หรือซ่อนไว้

การซ่อน element ใช้คำสั่งดังนี้

visibility: hidden; ซ่อนวัตถุไม่ให้มองเห็น และวัตถุอื่นที่อยู่ถัดไปจะไม่เลื่อนมาแทนที่

display: none; เอาวัตถุออกไป และวัตถุอื่นที่อยู่ถัดไปจะเลื่อนมาแทนที่

display: inline; ทำให้ element นั้นๆ กลายเป็นแบบ inline คือ ทำให้ข้อความในแท็กนั้นจะไม่ขึ้นบรรทัดใหม่ ความกว้างของแท็กจะยาวเท่ากับความยาวของข้อความ และค่าอื่นๆ จากคำสั่ง margin-top, margin-bottom, padding-top หรือ padding-bottom จะไม่มีผลใดๆทั้งสิ้น

display: block; ทำให้ element นั้นๆ กลายเป็นแบบ block คือ ทำให้ข้อความในแท็กนั้น จะขึ้นบรรทัดใหม่ทันที ความกว้างและความสูงในตอนแรกจะยังเหมือนเดิม แต่สามารถใช้คำสั่ง width และ height เพื่อระบุขนาดของกล่องข้อความได้ และคำสั่งใดๆที่เกี่ยวกับ margin-top, margin-bottom, padding-top และ padding-bottom จะเริ่มมีผลทันที




CSS - รูปแบบของ Box


margin และ padding

margin คือ ระยะห่างระหว่างวัตถุ กับ วัตถุ
padding คือ ระยะห่างระหว่างขอบวัตถุ กับ ข้อความที่อยู่ในวัตถุนั้น

margin-top ใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านบน กับวัตถุอื่นๆ มีค่าเป็น auto length เช่น 5px, 5pt,5cm
margin-bottom ใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านล่าง กับวัตถุอื่นๆ
margin-left ใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านซ้าย กับวัตถุอื่นๆ
margin-right ใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านขวา กับวัตถุอื่นๆ
margin ใช้กำหนดระยะห่างระหว่างขอบของวัตถุที่ต้องการ ทั้ง 4 ด้าน กับวัตถุอื่น ๆ ในคำสั่งเดียว
padding-top ใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านในเส้นบน กับ ข้อความที่อยู่ในกรอบ
padding-bottom ใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านในเส้นล่าง กับ ข้อความที่อยู่ในกรอบ
padding-left ใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านในเส้นซ้าย กับ ข้อความที่อยู่ในกรอบ
padding-right ใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านในเส้นขวา กับ ข้อความที่อยู่ในกรอบ
padding ใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านใน กับ ข้อความที่อยู่ในกรอบ (ไม่เกี่ยวข้องกับวัตถุด้านนอก)

การเขียนแบบย่อจะจัดเรียงตาม บน ขวา ล่าง ซ้าย เช่น margin: 10px 20px 10px 30px;

เรื่องของ border

เป็นการกำหนดรูปแบบของเส้นขอบ โดยใช้คำสั่งต่อไปนี้

border-style: ชื่อลักษณะของเส้นขอบ จะมีดังนี้
dotted (แบบจุด), dashed (แบบเส้นประ), solid (แบบทึบ), double (แบบเส้นคู่), groove (แบบร่อง 3D), ridge (แบบ ridged 3D), inset (แบบใบเสริม 3D), outset (แบบเริ่มแรก 3D)
border-width: ค่าความกว้างของเส้นขอบพร้อมหน่วย เช่น border-width: 5px;
border-color: ค่าสีของเส้นขอบ เป็นชื่อสีเช่น red หรือค่า #เลขฐานสิบหกก็ได้ เช่น border-color: red;

border: ใส่เส้นขอบของวัตถุ โดยเอาคำสั่งหลายคำสั่งมารวมกัน เช่น
border: 2px solid #FFFFFF; หมายความว่า กำหนดเส้นขอบความกว้าง 2px เป็นเส้นทึบสีขาว

border-bottom: ใส่กรอบด้านล่าง ตัวอย่างเช่น border-bottom: solid 1px #000000;
border-left: ใส่กรอบด้านซ้าย ตัวอย่างเช่น border-left: solid 1px #F8F8F8;
border-right: ใส่กรอบด้านขวา ตัวอย่างเช่น border-right: solid 1px #000000;
border-top: ใส่กรอบด้านบน ตัวอย่างเช่น border-top: solid 1px #FFFFFF;

ความกว้างและความสูงของวัตถุ

รูปแบบ
width: value กำหนดความกว้าง
height: value กำหนดความสูง

ค่า value มีดังนี้
- auto คือให้บราวเซอร์คำนวณความสูงให้ โดยค่านี้เป็นค่าปกติ
- ค่าตัวเลขพร้อมหน่วย เช่น width: 100px;
- % คือค่าตัวเลขเป็นเปอร์เซ็นต์
- inherit คือ ใช้ค่าเดียวกับ element หลัก

ความกว้างและความสูงที่มากที่สุดของวัตถุ

รูปแบบ
max-height: value กำหนดความสูง
max-width: value กำหนดความกว้าง

ค่า value มีดังนี้
- none คือไม่กำหนดค่านี้ โดยค่านี้เป็นค่าปกติ
- ค่าตัวเลขพร้อมหน่วย เป็น in, px, cm เป็นต้น
- % คือค่าตัวเลขเป็นเปอร์เซ็นต์
- inherit  คือ ใช้ค่าเดียวกับ element หลัก

ความกว้างและความสูงที่ต่ำที่สุดของวัตถุ

รูปแบบ
min-width: value
min-heith: value

ค่า value มีดังนี้
- none  คือไม่กำหนดค่านี้ โดยค่านี้เป็นค่าปกติ
- ค่าตัวเลขพร้อมหน่วย เป็น in, px, cm เป็นต้น (มีเฉพาะ max-width)
- % คือค่าตัวเลขเป็นเปอร์เซ็นต์
- inherit  คือ ใช้ค่าเดียวกับ element หลัก





CSS - block และ inline


แท็ก html นั้น ถูกแบ่งออกเป็น 2 แบบ ด้วยกันคือ block และ inline

ตัวอย่างแท็กแบบ Block คือ <h1> ถึง <h6>, <p>, <ul>, <ol>, <dl>, <table>, <form> และ <div>
ตัวอย่างแท็กแบบ Inline คือ <strong>, <em>, <img>, <a>, <sub>, <sup>, <cite> และ <span>

แท็กแบบ Block ออกแบบมาเพื่อสร้างโครงสร้างหลักของหน้า
แท็กแบบ Inline ออกแบบมาเพื่อเพิ่มรายละเอียดภายในโครงสร้างนั้น

การแสดงผลบนหน้าเว็บมีความแตกต่างกันดังนี้คือ

แท็กแบบ Block จะมีความกว้างเต็มบรรทัดเต็มพื้นที่
แท็กแบบ Inline จะมีความกว้างเท่ากับข้อความที่อยู่ในนั้น

แท็กแบบ Block จะขึ้นบรรทัดใหม่เสมอ
แท็กแบบ Inline จะเกาะกลุ่มเรียงกันอยู่บนบรรทัดเดียวกัน

การสั่ง margin-top, margin-bottom, padding-top, padding-bottom, width และ height กับแท็กแบบ inline จะไม่มีผลใดๆทั้งสิ้น

แทนที่จะเขียนโค้ต HTML แบบนี้

<div>
<ul>
<li>ข้อความที่หนึ่ง</li>
<li>ข้อความที่สอง</li>
<li>ข้อความที่สาม</li>
</ul>
</div>

แต่เรารู้ว่า <ul> เป็นแท็กแบบ Block อยู่แล้ว ก็ไม่จำเป็นต้องเขียน <div> ซึ่งเป็นแท็กแบบ Block เหมือนกันให้ซ้ำซ้อน แล้วตัดให้เหลือเพียง

<ul>
<li>ข้อความที่หนึ่ง</li>
<li>ข้อความที่สอง</li>
<li>ข้อความที่สาม</li>
</ul>

หรือแทนที่เราจะเขียนคำสั่ง CSS แบบนี้

ul {
display: block;
width: 400px;
padding: 10px;
}

แต่ในเมื่อ <ul> เป็นแท็กแบบ Block การเขียนคำสั่ง display: block จึงไม่มีความจำเป็นใดๆทั้งสิ้น จึงสามารถตัดคำสั่งดังกล่าวให้เหลือเพียง

ul {
width: 400px;
padding: 10px;
}






CSS - background

การกำหนดสีให้กับพื้นหลัง หรือรูปพื้นหลังของเว็บไซต์

Property หลักๆ ของพื้นหลังมีดังนี้

background ใช้กำหนดคุณสมบัติรวมได้ทั้งหมด ในกรณีที่ต้องการเขียนคำสั่งแบบสั้น

background-color ใช้ใส่สีให้พื้นหลัง โดยค่าจะเป็น ชื่อของสี เช่น red, blue, green หรือเป็นค่าเลขฐานสิบหก เช่น #FF0000

background-image ใช้ใส่รูปให้กับพื้นหลัง โดยค่าเป็น url("ที่อยู่ของรูปภาพ") โดยค่าเริ่มต้นจะเป็น none

background-repeat ใช้กับ background-image เป็นการกำหนดว่าจะให้รูปของพื้นหลังแสดงซ้ำหรือไม่ โดยค่าจะมี
repeat คือให้แสดงซ้ำ (ค่าปกติจะเป็นค่านี้)
no-repeat คือไม่แสดงซ้ำ
repeat-x คือแสดงซ้ำในแนวนอน
repeat-y คือแสดงซ้ำในแนวตั้ง

background-attachment ใช้กับ background-image โดยค่าจะมี
scroll คือรูปจะเลื่อนถ้าเลื่อนหน้าเว็บลง (ค่าปกติจะเป็นค่านี้)
fixed คือรูปของพื้นหลังจะอยู่กับที่ไม่เลื่อนไปไหน

background-position กำหนดตำแหน่งของรูปภาพพื้นหลัง ถ้าใส่เป็นค่าตัวเลข จะเป็นการกำหนดจุดเริ่มต้นของการใส่สี หรือรูปพื้นหลัง เช่น ถ้ากำหนดเป็น 10px 20px จะเป็นการเริ่มตำแหน่งของพื้นหลัง x=10px, y=20px หรือจะใส่เป็นการตั้ง alignment เช่น right top, center bottom

ตัวอย่างการใส่ค่า Property

background-color: #d4ddb0;
background-image: url(background.jpg);
background-position: 50px 100px;
background-position: center top;
background-repeat: no-repeat;

จากค่าทั้งหมดด้านบน สามารถนำมาเขียนค่า background ที่อยู่บนสุดอันเดียว แล้วแสดงผลเหมือนกันได้เลย เช่น

background: #d4ddb0 url(background.jpg) no-repeat bottom;

#d4ddb0 คือสีที่ใช้เป็นพื้นหลัง
url(background.jpg) คือรูปภาพที่ใช้เป็นพื้นหลัง
no-repeat คือการสั่งห้ามทำซ้ำ
bottom คือการวางตำแหน่งให้รูปภาพพื้นหลังอยู่ bottom ตำแหน่งนี้จะอยู่ด้านล่างและจัดกลาง แต่ถ้าจะให้รูปภาพอยู่มุมขวาล่าง เราก็เพิ่ม right เข้าไปหลัง bottom เช่น background: #d4ddb0 url(background.jpg) no-repeat bottom right;

ตัวอย่างการเขียน Class เพื่อควบคุมการแสดงผลของพื้นหลัง

.maincoll {
width: 800px; position: relative; float: none;
margin: 0px auto 0px; border:0px; height: 150px;
background: #d4ddb0 url(background.jpg) bottom right no-repeat;
}


วิธีทำภาพพื้นหลังเล็กๆ ให้อยู่กับที่ ร่วมกับสีพื้นหลังทั้งหน้า ทำได้ดังนี้

background: #fff9fb url(ชื่อและที่อยู่ไฟล์รูปภาพ) no-repeat fixed right bottom; 

หมายความว่า

background: [สีพื้น] [url ของรูปที่จะอยู่กับที่] [ให้ใช้รูปเดียว] [ให้รูปอยู่กับที่] [ให้รูปอยู่ทางขวา] [ให้รูปอยู่ล่างสุดของหน้าเว็บ] 

ตรง right bottom สามารถกำหนดได้หลายค่า ดังนี้

top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right 
x% y% ถ้าใส่เป็น 0% 0% คือ top left ถ้าใส่ 100% 100% คือ right bottom
xpos ypos คือตำแหน่งของรูป เช่น 15px 20px






CSS - เริ่มต้นเขียน CSS


รูปแบบในการเขียน CSS

ชื่อคลาส ชื่อไอดี หรือแท็ก HTML { Property: Value;}

คลาส ใช้ . (จุด) ในการบ่งบอกว่าเป็นคลาส
ไอดี ใช้ # (ชาร์พ) ในการบ่งบอกว่าเป็นไอดี
แท็ก html เช่น body หรือ img
Property คือชื่อคุณสมบัติของ css เช่น width, height
Values คือค่าของ property เช่น 500px

ตัวอย่าง
.CSS {width:500px;}
#CSS {width:500px;}
body {width:500px;}


การเขียน CSS มี 3 ลักษณะคือ

1.แบบ Inline  คือการเขียนแทรกลงไปในแท็ก HTML นั้นๆ เลย เช่น

<body>
<p style=”font-size: 0.9em; width: 200px; border: solid 1px #000000”>สีดำ</p>
</body>

2. แบบ Internal โดยแทรก css เอาไว้ที่ส่วน <head></head> เช่น

<head>
<style type="text/css">
p {font-size: 0.9em; width: 200px; border: solid 1px #000000;}
</style>
</head>
<body>
<p>ข้อความ</p>
</body>

3. แบบ External คือการเขียนแยก css ออกมาเป็นไฟล์ .css ต่างหาก


ไฟล์ CSS

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


การใช้ CSS ในไฟล์เว็บเพจ

ทำได้โดยใช้คำสั่งข้างล่างนี้ แทรกไว้ที่ส่วน <head> </head>

<link rel="stylesheet" href="ชื่อไฟล์.css" type="text/css" />

ใช้สำหรับเว็บไซต์ที่มีจำนวนเว็บเพจมากๆ เพราะสามารถกำหนดค่าเพียงครั้งเดียวไว้ในไฟล์ .css แต่สามารถนำไปใช้ได้ทุกๆเว็บเพจ

ตัวอย่างไฟล์ CSS

ในไฟล์ css

body, td, textarea, input, form, blockquote, p, center, div, pre, select, button, font, b, i, u{font-family:ms sans serif;}
body{font-size: 14px;}

#textred { color:red; }
#textblue { color:blue; }

วิธีใช้งานก็ทำดังนี้

<HTML>
<HEAD>
<TITLE>ทดลองใช้</TITLE>
<META  HTTP-EQUIV=content-type  CONTENT="text/html; charset=windows-874">
<link rel="stylesheet" type="text/css" href="doremon.css">
</HEAD>
<BODY>
<div id="textred"><p>ข้อความสีแดง</p></div>
<div id="textblue"><p>ข้อความสีน้ำเงิน</p></div>
</BODY>
</HTML>


การ Import ไฟล์ CSS (คือการรวมไฟล์ css มากกว่า 1 ไฟล์เข้าด้วยกัน)

หากมีไฟล์หลักชื่อ main.css แต่มีไฟล์ย่อยๆ เช่น form.css และ board.css
สามารถ import โดยใช้คำสั่ง @import url(xxx.css);

ตัวอย่าง ใน main.css บรรทัดบนสุดให้ใช้

@import url(form.css);
@import url(board.css);

เวลาเรียกใช้ ให้เรียกไฟล์ main.css ไฟล์เดียวพอ


การใช้คอมเม้นท์ใน css

ทำได้โดยการใช้สัญลักษณ์ / และ *

ตัวอย่าง
body {
background: #FFFFFF;
/*สีพื้นเป็นสีขาว*/
}


กฏการเขียน CSS

1. มีการสืบทอด property บางตัว จะมีผลกับสิ่งที่อยู่ข้างในทั้งหมด เช่น body { color:green; margin:5px; } สิ่งที่อยู่ใน body จะมีฟอนต์เป็นสีเขียวทั้งหมด แต่ margin จะทำเฉพาะ body เท่านั้น ไม่สืบทอดต่อไป

2. ลำดับความสำคัญ ไฟล์ CSS จะถูกอ่านจากบนลงล่าง หากเขียนซ้ำ class เดิม อันที่อยู่ด้านล่างจะถูกทำเป็นลำดับสุดท้าย

3. Pseudo-classes and Pseudo-elements คือ class และ element พิเศษ มีวิธีเขียนได้ 2 รูปแบบดังนี้

selector:Pseudo-class {property:value}
selector:Pseudo-element {property:value}

หรือ

selector.class:Pseudo-class {property:value}
selector.class:Pseudo-element {property:value}

เช่น

a:hover {color:black; text-decoration:underline;}

ทำบรรทัดแรกตัวหนา ใหญ่ P:first-line { font-variant: small-caps; font-weight:bold }
ทำการควบคุมตัวหนังสือตัวแรก P:first-letter { font-size: 300%;  float: left }

4. การรวมกลุ่ม เป็นการเขียนส่วนที่มีคุณสมบัติซ้ำๆ กัน เพื่อลดปริมาณโค้ด หากมีคุณสมบัติอื่นๆ ค่อยกำหนดแต่ละอันไว้ด้านล่างอีกที เช่น

H1, H2, H3, H4, H5, H6 { color:red; font-family:sans-serif}

5. การประกาศ class หรือ ID ซ้อนกัน โดยเคาะ spacebar ดังตัวอย่าง

p ul { background:#000000;}   แปลว่า ul ที่อยู่ใน p จะมีแบ็คกราวด์ เป็นสีดำ ส่วน ul อื่น ถ้าไม่อยู่ใน p ก็จะเป็น ปกติ

ในกรณี ต้องการให้รูปในกล่องมี border 2 px สีเทา โดยไม่ไปกระทบรูปอื่นๆ ทั้งหมดจะเขียนได้ดังนี้
#contentbox img { border-width:2px; border-color:grey;}

ใช้ได้เฉพาะแท็ก img ที่อยู่ใน <div id="contentbox"> </div> แท็กที่อยู่นอกจากนั้นไม่ได้รับผลอะไร ทำให้โค้ดจะเล็กลงกว่าเดิมเพราะไม่ต้องสร้างคลาสแล้วใส่คลาสเข้าไปใน <img> ทุกอัน

6. หลักการใช้ ID, Class

ID จะใช้กับสิ่งที่มีเพียงอันเดียว มักใช้กับส่วนที่เป็น layout เช่น #header #content #footer
Class จะใช้เมื่อ มีการทำซ้ำหลายๆ ครั้ง เช่น .boxcontent

การตั้งชื่อ class และ id ควรเป็นตัวพิมพ์เล็กทั้งหมด ไม่ควรใช้ _ และตัวเลข นำหน้าชื่อ class และ id เพราะอาจมีปัญหากับเบราเซอร์รุ่นเก่า

7. เริ่มต้นด้วย Selectors ก็คือ tag ที่ใช้ๆ กันใน html นั่นเอง เช่น

body { color:#000000; font-size:14px; }
หรือ p { color:red; font-size:16px; }





CSS - การสร้างไฟล์ XHTML

DOCTYPE

ในการเขียน CSS ในขั้นตอนแรกของ XHTML ก็คือการประกาศคุณลักษณะของหน้าเว็บก่อน DOCTYPE สำหรับ XHTML มีที่ใช้บ่อย 3 ประเภท 4 ลักษณะ ไม่รวม XHTML Mobile 1.0 คือ

1. XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

แบบ XHTML 1.0 Strict นี้ เหมาะสมจะใช้เมื่อ หน้าเว็บที่เขียนนั้น เป็นโครงส้รางภาษาแบบ XHTML ทั้งหมด และอนุญาตให้ จัดรูปแบบเว็บด้วย CSS เท่านั้น

XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

คล้ายกับ XHTML 1.0 Strict คือใช้ XHTML คู่กับ CSS แต่ควรใช้เมื่อต้องการ เขียนโครงสร้างเว็บแบบใหม่ทั้งหมด (XML)

2. XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

แบบนี้ อนุญาตให้ใช้ HTML 4.0 ร่วมกับ CSS และ XHTML ข้อดีของ XHTML 1.0 Transitional คือจะช่วยให้บราวเซอร์เก่าๆ เช่น IE6 นั้นสามารถเข้าใจภาษาได้ และใช้ในกรณีที่ XHTML บาง tag ไม่สามารถใช้กับ บราวเซอร์เก่าๆ ได้

3. XHTML 1.0 Frameset

สำหรับใช้กับเฟรม กรณีเอาหน้าเว็บมาแบบเฟรม

html, head, title, style, body

html จะมีแอทริบิวของ xmlns ดังนี้

<html xmlns="http://www.w3.org/1999/xhtml"> ... </html>

head
ส่วนนี้คือส่วนหัวของเว็บ มีคำสั่ง เช่น <meta> พวก description ต่างๆ

<head> ... </head>

title
เอาไว้ใส่ชื่อหน้าเว็บ ให้มันแสดงที่ไตเติลบาร์

<title>………</title>

style
ใช้ในกรณีที่ต้องการกำหนดรูปแบบ CSS ในไฟล์นั้นเลย เช่น

<style type="text/css" > 
p {
color: #000000;

</style>

Body
<body>………</body>

DIV
Div หรือ division คือ Element ของ XHTML เป็นการนำมาใช้แบ่งส่วนต่างๆ ของข้อมูลออกจากกัน






PHP - การรวมไฟล์ PHP เข้าด้วยกัน


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



ฟังก์ชัน include()

เมื่อใช้ ถ้าไม่เจอไฟล์ตามที่ระบุ มันจะรายงาน error แค่ Warning เท่านั้นแล้วก็ข้ามไปส่วนอื่นต่อได้ จึงนิยมใช้เรียกไฟล์พวกข้อความ หรือ html ธรรมดา


ฟังก์ชั่น Include_once()

จะเป็นการทำงานที่เหมือน include() เพียงแต่ว่า มันจะเรียกเข้ามาครั้งเดียวเท่านั้น สมมุติว่าเราใส่ Include_once() ไว้ใน Loop แล้วให้มันใช้ฟังก์ชั่นนี้ซ้ำ ๆ มันจะเรียกไฟล์มาครั้งเดียวเท่านั้น


ฟังก์ชั่น require()

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



ฟังก์ชั่น Require_once()

การทำงานเหมือน ๆ กับ include_once() ผสมกัน คือการทำงานจะเหมือน Require() เพียงแต่ว่ามันจะเรียกไฟล์เ้ข้ามาในสคริปต์แค่ครั้งเดียว



การแก้ปัญหาการใช้ไฟล์ร่วม 

ในการใช้การรวมไฟล์ด้วยคำสั่ง require() และ include() ถ้าการอ้างอิงของสคริปต์ตั้งแต่ 2 ไฟล์ขึ้นไปอ้างถึงไฟล์ไลบรารีเดียวกัน การกระจายของ PHP จะทำซ้ำกัน จึงเกิดปัญหาที่ PHP เข้าใจว่ามีการประกาศฟังก์ชันซ้ำกัน การหลีกเลี่ยงปัญหานี้ให้ใช้ require_once() และ include_once()




การสร้างเว็บเพจต้นแบบ 

ถ้าเว็บไซต์มีเพจจำนวนมาก ในแต่ละหน้าจะมีส่วนหัวและส่วนล่างเหมือนกัน สามารถใช้การรวมไฟล์เพื่อเรียกไฟล์ไลบรารีต้นแบบมาสร้างส่วนที่ใช้งานร่วมกัน



การระบุตำแหน่งไฟล์รวม

สำหรับ Unix
require("../../lib/db_fns.inc");
require("home/httpd/lib/output/heder.inc");

สำหรับ Windows 

require("..\..\Libs\Database\connections.inc");
require("D:WebApps\Libs\MathFunctions\area.inc");

ถ้าไม่ได้ระบุพาร์ท PHP จะมองหาในไดเรคทอรีปัจจุบัน ตามด้วยรายการไดเรคทอรีจากการตั้งค่า include_path ในไฟล์ php.ini ภายใต้ Unix ตัวอักษรแบ่งคือ colon (:)

สำหรับ Windows ตัวอักษรแบ่งคือ semicolon (;)

ตัวอย่างการตั้งค่าภายใต้ระบบ Unix 

include_path=".:/usr/local/lib/php:/home/httpd/globalincs"

ภายใต้ Windows การตั้งค่าคือ

include_path=".;C\PHP\include;D:\WebApps\Libs "




ตัวอย่างการใช้ require ()

ไฟล์ wel.inc
<p align="center">
<?php
echo "<h1>Welcome</h1>";
?>
</p>

ไฟล์ main.php
<html>
<head>
<title>File Include Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-11">
</head>
<body>
<?php
echo "<b>หน้าหลัก </b><br/>";
require("wel.inc");
echo "<b>จบ</b><br/>";
?>
</body>
</html>


ตัวอย่างการใช้ include () 

<?php
include("welcome.inc");
?>








PHP - การใช้ MySQL


ในภาษา PHP มี function ที่เกี่ยวข้องกับ MySQL โดยตรง รายละเอียดของแต่ละ function นั้น มีดังนี้

1. mysql_close

ใช้เมื่อต้องการยกเลิกการติดต่อกับ MySQL โดยจะมีรูปแบบดังนี้

int mysql_close(int [link_identifier]);

โดย  function  นี้ต้องการ  argument  หนึ่งตังคือ  link  ldentifier   ซึ่งจะได้จากคำสั่ง mysql_connect และ ถ้าสามารถยกเลิกได้สำเร็จ function นี้จะ return ค่า TURE ออก ถ้ายกเลิกไม่สำเร็จ จะ return ค่า FALSE

2. mysql_connect

ใช้เมื่อต้องการเชื่อมต่อสู่ MySQL โดยจะมีรูปแบบคำสั่งดังนี้

int mysql_connect(string [hostname] [:port], string [username] ,string [password]);

function นี้ต้องการ argument 3 ตัว ที่เกี่ยวข้องกับการเชื่อมต่อกับ MySQL คือ hostname คือ ชื่อเครื่องที่มี MySQL ทำงานอยู่ (MySQL Server) ซึ่งเราต้องการเชื่อมต่อด้วย port คือหมายเลขของ port ที่ให้บริการ MySQL บนเครื่อง MySQL Server ซึ่งจะใส่หรือไม่ใส่ก็ได้  ถ้าไม่ใส่  ก็จะใช้ค่ามาตรฐาน
username คือ ชื่อผู้ใช้ที่มีสิทธิ์ใช้ MySQL
password คือ รหัสผ่านสำหรับผู้ใช้คนนั้น
ถ้าทำการเชื่อมต่อได้ function นี้จะ return ค่า link ldentifier ออกมา (เพื่อนำไปใช้ในการจัดการกับฐานข้อมูล MySQL ต่อไป) แต่ถ้าเชื่อมต่อไม่ได้  ก็จะ return ค่า FALSE ออกมา

ตัวอย่าง
// create connection
$connection = mysql_connect("servername","username","password");

// test connection
if (!$connection) {
echo "Couldn't make a connection!";
exit;
}

3. mysql_create-db

  ใช้เมื่อต้องการสร้าง Database ใหม่ขึ้นมา มีรูปแบบคือ

                             int mysql_create_db(string database name, int [link_identifier]);

  โดยต้องการ argument คือ ชื่อ Database ที่ต้องงการสร้างขึ้นมาใหม่  และ Link Identifier ของ MySQL ที่ ต้องการสร้าง database

4. mysql_db_query

  ใช้เมื่อต้องการส่ง SQL message ไปยัง MySQL เพื่อ query ข้อมูล มีรูปแบบคือ

                             int mysql_db_query(string database, string query, int [link_identifier]);

  มี argument คือ ชื่อ Database ที่ต้องการ query, SQL message ที่ใช้ในการ query และ Link Identifier ของ MySQL ที่มี Database นั้นอยู่ ในกรณีที่ query เป็นผลสำเร็จก็จะ Return ค่าเป็น result Identifier ที่ใช้ไปยัง result set ที่เก็บผลการทำงาน ออกมา  แต่ถ้า query ไม่สำเร็จ ก็จะ return FALSE ออกมา

5. mysql_drop_db

              ใช้ในกรณีที่ต้องการลบ Database ทิ้งจาก MySQL มีรูปแบบคือ

                             int mysql_drop_db(string database_name, int [link_identifier]);

  โดยมี  argument คือ ขื่อ Database ที่ต้องการลบ และ Link Identifier ของ MySQL ที่ต้องการติดต่อได้ ถ้าลบได้สำเร็จ  ก็จะ Retrun  TRUE  ออกมา  ถ้าลบไม่สำเร็จ  ก็จะ return FALSE ออกมา

6. mysql_errno

  แสดง error number ของคำสั่งก่อนหน้าที่ มีรูปแบบคือ

                             int mysql_errno(int [link_identifier]);

7. musql_error

         แสดง error message ของ คำสั่งก่อนหน้านี้ มีรูปแบบคือ

                             string mysql_error(int [link_identifier]);

8. mysql_fetch_array

              อ่านข้อมูลผลลัพธ์ในรูปของ Associative Array มีรูปแบบคือ

                             array myssql_fetch_array(int result, int [result_type]);

  ต้องการ argument คือ ชื่อ result  identifier และ ค่า  result type ในกรณีที่มีผลลัพธ์ที่ต้องการ ก็จะ return ค่า  array  ของผลลัพธ์ออกมา  ซึ่งสามารถดึงค่าข้อมูลออกมาได้  โดยอาศัย field name นั่นเอง  ในกรณีที่เกิดปัญหา  ก็จะ return  FALSE  ออกมาแทน

9. mysql_fetch_length

  ใช้ในการดูขนาดของข้อมูลที่ใหญ่ที่สุดของผลลัพธ์แต่ละตัว ใน result set มีรูปแบบคือ

                             array mysql_fetch_length(int result);

  โดยจะ return ค่า array ของ ขนาดข้อมูลในแต่ละ field ของ row สุดท้ายที่ ถูก fetch ออกมา หรือไม่ ค่า FALSE  ถ้าเกิดปัญหาขึ้น

10. mysql_fetch_row

  ดึงข้อมูลออกมาหนึ่ง row จาก result set ในรูปของ array มีรูปแบบคือ

                            array mysql_fetch_row(int result);

  ต้องการ argument คือ result  identifier และ return ค่า array ที่เก็บข้อมูลของ row แรก (ถ้าเรียก mysqll_fetch_row อีกครั้ง ก็จะเป็นการเรียก row ถัดๆ  ไปเรื่อยๆ)  ออกมา หรือ retrun FALE ถ้าเกิดปัญหาขึ้น array ที่เก็บข้อมูลนั้น เป็น Scalar Array ซึ่งจะอ้างอิงข้อมูลเรียงลำดับตาม field และมี Index เริ่มต้นเป็น 0

11. mysql_field_name

  อ่านชื่อของ field จาก result set มีรูปแบบคือ

                             string mysql_field_name(int result, int field_index);
 
  เมื่อ argument คือ result identifier และ field index ที่ต้องการอ่านชื่อออกมา

12. mysql_field_table

  อ่านชื่อ table จาก result set ที่ field ที่กำหนด อยู่ด้านในมีรูปแบบคือ

                             string mysql_field_table(int result, int field_offset);

  เมื่อ argument คือ result identifier และ field offset ของ table ที่ต้องการอ่านชื่อออกมา

13. mysql_field_type

  อ่านชนิดของ field จาก result set ตามที่ต้องการ มีรูปแบบคือ

                             string mysql_field_type(int result, int field_offset);

  ต้องการ argument คือ result identifier และ field offset ที่ต้องการหาชนิด

14. mysql_field_len

  อ่านความยาของ field จาก result set ตามที่ต้องการ มีรูปแบบ คือ

                            string mysql_field_len(int result, int field_offset );

  ต้องการ argument คือ result identifier และ field offset ที่ต้องการหาความยาว

15. mysql_ free_result

  ลบ result set ทิ้ง มีรูปแบบคือ

                            int mysql_free_result(int result);

  ต้องการ argument คือ result identifier ของ result set ที่ต้องการลบทิ้ง  ซึ่งการลบ result set  ที่ไม่ต้องการใช้ทิ้งนั้น  จะช่วยประหยัด memory  ของระบบได้มาก

16. mysql_list_fileds

  แสดงรายชื่อ field ของ Table ใน Database ที่ต้องการออกมา มีรูปแบบคือ

                            int mysql_list_fields(string database_name, string table_name, int[link_identifer]);

  ต้องการ argument คือ ชื่อ Database  และ ชื่อ Table ที่ต้องการแสดง Field ออกมา โดยจะ
return ค่า result identifier ของ result set ออกมา ซึ่งต้องเอาไปใช้กับ function ในกลุ่ม mysql_field_*() ทั้งหลาย

17. mysql_list_dbs

  แสดงรายการของ Database ใน MySQL ที่ติดต่อด้วย มีรูปแบบคือ

                            int mysql_list_dbs(int [link_identifier]);

  มี argrment คือ Link Identifier และจะ return  ค่า result identifier ออกมา  และต้องใช้ function  mysql_tablename() เพื่ออ่านค่าใน result set นี้ออกมา

18. mysql_listK_tables

  แสดงรายการของ Tables ของ Database ใน MySQL ที่ติดต่อด้วย มีรูปแบบคือ

                             int mysql_list_tables(string database, int [link_identifier]);

  มี argument คือ Link Identifier และ Database name และ จะ return ค่า result identifier ออกมา และต้องใช้ function mysql_tablename() เพื่ออ่านค่าใน result set นี้ออกมา

19. mysql_num_fields

  อ่านจำนวน fields จาก result set มีรูปแบบคือ

                             int mysql_num_fields(int result);

  โดย function นี้ จะ return ค่า จำนวน fields ใน result set ที่ชี้โดย result identifier ที่กำหนดให้ออกมา

20. mysql_num_rows

  อ่านจำนวน rows จาก result set มีรูปแบบคือ

                            int mysql_num_rows(int result);

  โดย function นี้จะ return ค่าจำนวน rows ใน result set ที่ชี้โดย result identifier ที่กำหนดให้ออกมา

21. mysql_query

  ส่ง SQL Query Message ไปยัง MySQL มีรูปแบบคือ

                            int mysql_query(string query, int [link_identifier]);

  โดย function นี้จะ return TRUE เมื่อ Query เป็นผลสำเร็จ สำหรับกรณีที่ Query  Message เป็นแบบ UPDATE, INSERT หรือ DELETE หรือ Result Set สำหรับ Query  Message แบบ SELECT

22. mysql_result

  อ่านข้อมูลใน field ที่ต้องการ  ออกจาก result set มีรูปแบบคือ

                             int mysql_result(int result, int row, mixed field);
 
  ต้องการ qrgument คือ result identifier, row และ field offset หรือว่า field name หรือว่า
field table.field name หรือว่า aliased ของ  field นั้น ก็ได้

23. mysql_select_db

  เลือก Databse ใน MySQL มีรูปแบบคือ

                            int mysql_select_db(string database_name, int [link_identifier]);

  โดย argument คือ ชื่อ Database ที่ต้องการเลือก และ Link Identifier โดยจะ return TRUE ถ้าเลือกได้ สำเร็จ และ FALSE เมื่อเกิด Error

ตัวอย่างใช้งาน PHP ติดต่อกับฐานข้อมูลของ MySQL

วิธีที่1

<?php

// create connection
$connection = mysql_connect("servername","username","password");

// test connection
if (!$connectiion) {
echo "Couldn't make a connection!";
exit;
}

// select database named "myDB"
$db = mysql_select_db("myDB", $connection);

// test selection
if (!$db) {
echo "couldn't select database!";
exit;
}

// create SQL statement
$sql = "SELECT COFFEE_NAME, ROAST_TYPE, QUANTITY
FROM COOEE_INVENTORY
ORDER BY QUANTITY DESC";

// execute SQL query and get result
$sql_result = mysql_query($sql, $connection);

// start results formatiion
echo "<TABLE BORDER=1>";
echo "<TR><TH>Coffee Naem</TH><TH>Roast Type</TH><TH>Quantity</TH>";

// format results by row
while ($row = mysql_fetch_array($sql_result)) {
$coffee_name = $row["COFFEE_NAME"];
$roast_type = $row["ROAST_TYPE"];
$quantity = $row["QUANTITY"];
echo "<TR><TD>$coffee_name</TD><TD>$roast_type</TD><TD>$quantity</TD></TD>";
}

echo "</TABLE>";

// free resources and close connectiion
mysql_free_result($sql_result);
mysql_close($connection);
?>


วิธี 2
<?
include("mydb.inc");
mysql_connect(localhost,$user,$password);

$databse = "mydb";
@mysql_select_db("$database") or die("Unable to select database");

/*Search database for name*/
$table="contact";

$query="select * from $table group by name";

$result=mysql_query($query);

mysql_close();

/*Display Results*/

$num=mysql_numrows($result);

$i=0;
while($i < $num) {
   
    $name=mysql_result($result,$i,"name");
    $email=mysql_result($result,$i,"email");
    $ext=mysql_result($result,$i,"extension");
    $nick=mysql_result($result,$i,"nick");
    $id=mysql_result($result,$i,"id");

     //Alternate row colors in our table
     print ($i % 2) ? "<tr bgcolor=\"D7DEFF\">" : "<tr bgcolor =\"C2CCFF\">";

     print "<td align=middle><b>$name</b></td><td align=middle><$email</b></td>";
     print "<td align=middle><b>$ext</b></td><td align=middle><b>$nick</b></td>";
     print "<td align=middle><a
href='update_db.phtml?id=$id'><b>Update</b> </a></td></tr>";

     ++$i;
}
?>




PHP - ฟังก์ชั่นที่ใช้จัดการไฟล์


1. file_exists

ใช้ตรวจสอบไฟล์ที่ต้องทราบว่ามีอยู่แล้วไม่ ซึ่งหากมีอยู่จะ return ค่าเป็นจริง หากไม่มี return ค่าเป็นเท็จ มีรูปแบบคือ

Int file_exists(string  filename);

2. fileatime แสดงเวลาการแข้ไข file ครั้งสุดท้าย มีรูปแบบ คือ

Int fileatime(string filename);

3. filesize แสดงขนาดของ file มีหน่วยเป็น byte

Int filesize (string filename)

4. file

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

Array file(string filename)

5. fopen เปิด File หรือ URL มีรูปแบบ คือ

int fopen(string filename, string mode)

file จะถูกเปิดจาก filesystem และจะมีการ retrun file pointer กลับมา  หากไม่สามารถเปิด file ได้ function จะ return เท็จ mode ทั้งหมด  มีดังนี้

'r' เปิดเพื่ออ่านอย่างเดียว, file pointer ชี้ไปยังตำแหน่งเริ่มต้นของ file
'r+' เปิดเพื่ออ่านและเขียน, file pointer ชี้ไปยังตำแหน่งเริ่มต้นของ file
'w' เปิดเพื่อเขียนอย่างเดียว, file pointer ชี้ไปยังตำแหน่งเริ่มต้นของ file และทำการลบข้อมูลใน file ทั้งหมด หาก file ไม่มีอยู่จริง จะพยายามสร้าง file ใหม่ขึ้นมา
'w+' เปิดเพื่ออ่านและเขียน, file pointer ชี้ไปยังตำแหน่งเริ่มต้นของ file และทำการลบข้อมูลใน file ทั้งหมด หาก file ไม่มีอยู่จริง  จะพยายามสร้าง file ใหม่ขึ้นมา
'a' เปิดเพื่อเขียนอย่างเดียว, file pointer ชี้ไปยังตำแหน่งสุดท้ายของ file (EOF:end of file) หาก file ไม่มีอยู่จริง จะพยายามสร้าง file ใหม่ขึ้นมา
'a+' เปิดเพื่ออ่านและเขียน, file pointer ชี้ไปยังตำแหน่งสุดท้ายของ file (EOF:end of file) หาก file ใหม่ขึ้นมา

ตัวอย่าง

$fp = fopen("/home/rasmus/file.txt","r");
$fp = fopen("/http://www.php.net/","r");
$fp = fopen("/ftp://user:password@example.com/","w");

6. fclose ปิด file pointer ที่เปิดอยู่ ซึ่งจะ return ค่าเป็นจริงหากสามารถเปิด file pointer ได้

int fclose(int fp)

7. fgetc

retrun ตัวอักษรครั้งละ 1 ตัว จากตำแหน่งที่ file ชี้อยู่  หาก file pointer ชี้ที่ EOF จะ reutrn ค่าเป็นเท็จ

string fgetc(int fp)

8. fgets

return ตัวอักษรครั้งละ length-1 bytes ที่อ่านจากตำแหน่งที่ file pointer ชี้อยู่  ซึ่งการอ่านตัวอักษรอาจสิ้นสุดลง
หาก PHP สามารถอ่านได้  length-1 หรือ file pointer ชี้ไปยัง new file หรือ EOF รูปแบบคือ
string fgets(ing fp, int length)

ตัวอย่าง

$fd = fopen("/tmp/inputfile.txt","r");
while ($buffer = fgets($fd, 4096)) {
echo $buffer;
}
fclose($fd); 

9. fread

อ่านข้อความใน file ซึ่งการอ่านจะสิ้นสุดหาก PHP สามารถอ่านได้ตาม length (ความยาว) ที่กำหนด หรือ file pointer ชี้ไปยัง EOF มีรูปแบบคือ

string fread(int fp, string length)

ตัวอย่าง

$filename = "/usr/local/something.txt"
$fd = fopen($filename, "r");
$contents = fread($fd, filesize($filename));
fclose($fd);

10. fwrite เขียนข้อความลง file มีรูปแบบคือ

int fwrite(int fp, string string,int[length])






PHP - Date/Time Function


1. checkdate

  สำหรับตรวจสอบ วัน เดือน ปี ที่กำหนดว่าอยู่ในช่วงหรือไม่  จะอยู่ในช่วงก็จะ return ค่า 1 กลับ มีรูปแบบคือ

Int checkdate (int month, int date, int year).

2. Date

จะแสดงค่าวันที่เวลาตามที่กำหนดตาม formal ไป ส่วน timestamp จะเอาไว้สำหรับแสดงเวลาของสถานที่ต่าง ๆ  บนโลก  ถ้าไม่กำหนดจะแสดง locatime มีรูปแบบคือ

String date(string format, int timestamp)

Format string ใช้สำหรับแสดงเวลาแบบต่าง ๆ

U – seconds since the epoch
  Y – year, numeric, 4 digits
y -  year, numeric, 2 digits
F – month, textual, long; i.e. “January”
M – month, textual, 3 letters; i.e. “Jan”
m - month, unmeric
  z – day of the year, numeric
l (lowercase ‘L’) – day of the week, textual, long; i.e. “Friday”
D – day of the week, textual, 3 letters; i.e. “Fri”
      w - day of the week, numeric, 1 digit
H – hour, numeric, 24 hour format
h - hour, numeric, 12 hour format
i - minutes, numeric
  s - seconds, uumeric
  A – “AM” or “PM”
  a - “am”or”pm”
S – English ordinal suffix, textual, 2 characters; i.e. “th”, “nd”

ตัวอย่าง
                            Print(date(“I dS of F Y h:I:s A”));

จะได้ Saturday  12 th February 2000 01:15:23 AM

3. mktime

แสดงวินาที่นับตั้งแต่เวลาของ UNIX Epoch(January 1, 1970) จนถึงวันที่กำหนด มีรูปแบบ

Int mktime(int hour, int minute, int second, int month, int day, int year);

4. time

แสดงวินาที่ที่นับตั้งแต่เวลาของ UNIX Epoch(January 1, 1970). มีรูปแบบคือ

Int time()

5. Set_time_limit

กำหนดเวลาที่ script ทำงานอยู่ เช่น set_time_limit(30) หลังจากนั้น scripts ก็จะ fatal error มีรูปแบบคือ

Void set_time_limit (int seconds);




PHP - Array Function

Array Function มีดังต่อไปนี้

1. array ใช้สำหรับสร้าง array

รูปแบบคือ   Array array(….);

  ตัวอย่าง

$a=array(1,2,3,4,5);
echo $a[1];  //แสดงค่า array ตำแหน่งที่ 1 จะได้ ‘2’

2. arsort ใช้สำหรับเรียงลำดับ array แบบถอยหลัง

รูปแบบคือ Void arsort (array array);

  ตัวอย่าง

$friuts = array(1=>”lemon”,2=>”orange”,3=>”banano”,4=>”apple”);
arsort($fruits);
for(reset($fruits); $key = key($fruits); next($fruits)){
echo “fruits[$key] = “.$fruits[$key].”\n”;
}

  จะได้

fruits[2] = orange fruits[1] = lemon fruits[3] = banana fruits[4] = apple

3. asort ใช้สำหรับเรียงลำดับ array แบบเรียงลำดับ

รูปแบบ คือ Void asort (array array);

ตัวอย่าง

$fruits = array(1 => “emon”,2=>”orange”,3=>”banana”,4=>”apple”);
arsort($fruits);
for(reset($fruits); $key = key($fruits); next($fruits)) {
echo “fruits[$key] = “.$fruits[$key].”\n”;
}

จะได้

  fruits[4] = apple fruits[3] = banana fruits[1] = lemon fruits[2] = orange

4. current

ในแต่ละ array จะมีคล้าย ๆ  กับ pointer เราเรียกว่า internal pointer ที่ใช้สำหรับชี้ค่าปัจจุบันที่ชี้อยู่ ซึ่ง current() จะทำหน้าที่แสดงค่าปัจจุบันออกมา

รูปแบบคือ Mixed current (array array):

mixed หมายถึง return ค่าได้หลายประเภท ใช้ร่วมกันกับ ฟังก์ชั่น end(), prev(), next(), reset()

ตัวอย่าง

$fruits = arrayf(1=>”lemon”, 2=>”orange”,3=>”banano”,4=>”apple”);
end($fruits);
echo current($fruits);

จะได้ผลเป็น apple ออกมา นั้นแสดงว่า internal pointer เลื่อนไปอยู่ที่ตำแหน่งสุดท้ายแล้ว

5. end() ใช้สำหรับ เลื่อน internal  pointer ไปตำแหน่งสุดท้าย

รูปแบบคือ Mixed end (array array)

6. next() ใช้สำหรับ เลื่อน internal pointer ไปตำแหน่งถัดไปจากตำแหน่งปัจจุบัน

รูปแบบคือ Mixed next(array array)

7. prev() ใช้สำหรับ เลื่อน  internal pointer ไปตำแหน่งก่อนหน้าตำแหน่งปัจจุบัน

รูปแบบคือ Mixed prev(array array)

8. reset() ใช้สำหรับ reset ค่า internal pointer ให้ไปอยู่ตำแหน่งแรก

รูปแบบคือ Reset(array array)

9. sizeof() ใช้สำหรับ แสดงจำนวน element ทั้งหมดที่มีอยู่ใน array

รูปแบบคือ Int zizeof(array array)




PHP - String Function

String Function ใน PHP ก็คือ zero indexed array of character  ซึ่งหมายความว่า ตัวอักษรตัวแรกของ string อยู่ที่ตำแหน่งที่ 0  ของ array นั่นเอง ซึ่ง ทุก string function จะใช้ตำแหน่งที่ 0 เป็น index ของ ตัวอักษรตัวแรก

1. AddSlashes ใช้สำหรับเพิ่มอักษร “/” เอาไว้ข้างหน้าตัวอักษรเพื่อที่จะได้เอาไว้อ้างอิงเวลาที่จะต้องการแยก String
รูปแบบคือ String AddSlashes(string str);

2. Chop ทำการตัดช่องว่างข้างหลังตัวอักษร
รูปแบบคือ String Chop(string)

3. Chr แสดงค่าตัวอักษรตามรหัส ascii
รูปแบบคือ String chr(int ascii)

4. echo แสดงผลที่หน้าจอทุก ๆ  parameter
รูปแบบคือ String echo(string agr1, …)

5. explode ทำการแบ่งสตริง ด้วย สตริงที่กำหนดให้
รูปแบบคือ Array  explode(string separator, string string);
  ตัวอย่าง
$pizza=”piece1 piece2 piece3”;
$piece=explode(“ “,$pizza);

6. implode สำหรับเชื่อม array ให้เป็น string โดยที่มีตัวเชื่อมคือ string glue
รูปแบบคือ String implode(array piece, string glue);
ตัวอย่าง
$a=array(1, 2, 3, 4);
echo implode($a, “:”);
จะได้
1:2:3:4

7. print พิมพ์ output string คล้ายๆ กับ echo(string arg….);
รูปแบบคือ Print(string agr);

8. strchr ค้นหาอักษรหรือคำที่ต้องการ
รูปแบบคือ String strchr(string tofind, string toneed)
ตัวอย่าง
echo (strchr(“I am a boy”, “am”));

9. strcmp ทำการเปรียบเทียบ sting ทั้งสอง
รูปแบบคือ  Int strcmp(string str1, string str2);
ตัวอย่าง
0 – str1 = str2
1 – str1 > str2
-1 – str1 < str2

10. strlen แสดงความยาวของ string
รูปแบบคือ  Int strlen (string str1)

11. strrpos แสดงตำแหน่งของตัวอักษรที่หาโดยที่ตัวอักษรตัวนั้นเป็นตัวสุดท้ายในประโยค
รูปแบบคือ  String strrpos(string haystack, char needle);
ตัวอย่างการใช้งาน
echo (strrpos(“I am a boy”,”a”));
  จะได้
5

12. strops แสดงตำแหน่งของตัวอักษรที่หาได้เป็นตัวแรกในประโยค
รูปแบบคือ String strpos(string haystack, char needle);
ตัวอย่าง
echo (strrrpos(“I am a boy”,”a”));
จะได้
3

13. strstr ค้นหาคำที่ต้องการใน string
รูปแบบคือ String strst(string haystack, string needle)
ตัวอย่าง
echo (strstr(“I am a boy”,”am”));
จะได้
am a boy

14. strtolower ทำการเปลี่ยนตัวอักษรให้เป็นตัวเล็กทั้งหมด
รูปแบบคือ string strtolower(string str1)

15. strtoupper ทำการเปลี่ยนตัวอักษรให้เป็นตัวใหญ่ทั้งหมด
รูปแบบคือ string strtoupper(string str1)

16. substr ทำการส่งค่าอักษรที่กำหนดให้
รูปแบบคือ String substr (string string, int start, int length);
ตัวอย่าง
echo (substr(“I am a boy”,2,4));
จะได้
am a



วันศุกร์ที่ 9 พฤศจิกายน พ.ศ. 2555

PHP - String

        String เป็นข้อมูลชนิดข้อความ การกำหนดค่าสตริงจะใช้เครื่องหมาย quotes ( ‘ หรือ “ ) การสร้าง string จะต้องขึ้นต้นและปิดท้ายด้วยเครื่องหมายที่เหมือนกัน

        หากต้องการแทรกเครื่องหมาย quotes ใน string ต้องใช้เครื่องหมาย backslash (\) นำหน้า เพื่อบอก PHP ว่า quotes เป็นเพียงส่วนหนึ่งของ string ซึ่งการใช้เครื่องหมาย backslash ในการแทรกเครื่องหมาย quotes ลงในไป string นั้นทำให้ backslash กลายเป็นเครื่องหมายพิเศษ ซึ่งหากต้องการแทรกลงใน string ก็ต้องใช้เครื่องหมาย backslash นำหน้าเช่นกัน ตัวอย่างคือ

        $file = “c:\windows\system.int”;      //ค่าที่เก็บอยู่ในตัวแปร $file คือ c:windowssystem.ini
        $file = “c:\\windows\\syostem.ini”;     //ค่าที่เก็บอยู่ในตัวแปร $file คือ c:\windows\system.ini

ยังมีตัวอักขระกลุ่มหนึ่งเช่นกัน ที่ใช้บ่อย เป็นตัวอักขระพิเศษ ดังนี้

        \n       ใช้ขึ้นบรรทัดใหม่
        \\       Backslash
        \$       เครื่องหมาย Dollar
        \”       เครื่องหมาย "

การใช้ตัวแปรใน String

        String ที่อยู่ในเครื่องหมาย " และ ' นั้นแตกต่างกัน คือ " จะถูกตีความ ในขณะที่ ' จะไม่มีการตีความใดๆ ทั้งสิ้น ดังตัวอย่างต่อไปนี้

        $foo = 2;     จะได้ foo is 2
        echo “foo is $foo”;     จะได้ foo is $foo
        echo “foo is $foo\n”;     จะได้ foo is 2 (พร้อมกับการขึ้นบรรทัดใหม่)
        echo 'foo is $foo\n';     จะได้ foo is $foo\n

การใช้อักขระพิเศษใน ' สามารถใช้ได้เพียงแค่  \\  และ \’ เท่านั้น



PHP - Control Statement

        เป็นคำสั่งที่ทำหน้าที่ควบคุมการทำงานของแต่ละ statement ในโปรแกรม โดยปกติแล้ว statement จะถูกประมวลผลตามลำดับจากบรรทัดแรกจนถึงบรรทัดสุดท้าย Control statement  ถูกสร้างขึ้นมาเพื่อใช้ควบคุมและเปลี่ยนแปลงลำดับของการประมวลผล statement เหล่านี้ เช่นอาจให้มีการประมวลผลบาง statement ในบางกรณีเท่านั้น

Control Statement ทั้งหมดใน PHP มีดังนี้

1. IF

        ตรวจสอบเงื่อนไขการทำงาน ซึ่งโครงสร้างของ if ก็เป็นเช่นเดียวกับภาษา C คือ

        if (condition expression)
           statement

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

        if ($a > $b)
           echo “ a is bigger than b”;

        if ($b > $c) {
           echo “b is bigger than c”;
           $c = $b;
        }

ELSE

        ในกรณีที่ต้องการให้มีทางเลือกมากกว่าหนึ่งทาง โดยถ้าเงื่อนไขเป็นจริง ก็ให้ทำทางเลือกหนึ่ง ถ้าไม่เป็นจริงก็ให้ทำอีกทางเลือกหนึ่ง สามารถทำได้โดยใช้ else เข้ามาช่วยใน if ดังนี้

        if (expression)
           true-statement;
        else
           false-statement;

ELSEIF

        เป็นการนำเอา else มารวมกับ if โดยเมื่อ เงื่อนไขแรกไม่เป็นจริง และต้องมาทำคำสั่งใน else ก็จะทำการตรวจสอบเงื่อนไขใน if ที่อยู่กับ else ทันที ซึ่งจะมีรูปแบบดังนี้

        If (expression–1)
           statement-1;
        elseif (expression-2)
           statement-2;
        else
           statement-3;

        การใช้ elseif นั้น จะใช้ซ้อนกันกี่ชั้นก็ได้ ซึ่งการตรวจสอบเงื่อนไข ก็จะทำไล่มาเรื่อย ๆ

2. WHILE

        เป็นคำสั่งที่ทำให้เกิดการทำงานวนรอบ โดยจะตรวจสอบเงื่อนไขการทำงานว่าเป็นจริงหรือไม่ ถ้าเป็นจริง ก็จะวนทำชุดคำสั่งที่กำหนดไว้ไปเรื่อย ๆ จนกว่าเงื่อนไขการทำงานจะเป็นเท็จ โครงสร้างของ while เป็นดังนี้

        while (expression)
           statement

        ตัวอย่าง
           $i = 1;
           while ($i <= 10) {
              print $i;
              $i++;
           }

3. DO…WHILE

        do ..while จะคล้ายๆ กับ while แต่จะต่างกันตรงที่ว่า while นั้น จะตรวจสอบเงื่อนไขก่อนเข้าไปทำงาน แต่ว่า do..while จะทำงานก่อนแล้วค่อยตรวจสอบเงื่อนไข มีรูปแบบดังนี้

        do
           statement
        while (expression)

4. FOR

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

        for (expr1; expr2; expr3)
          statement;

        โดย expr1 จะถูกเรียกมาทำงาน เมื่อ for เริ่มทำงาน และจะทำงานแค่ครั้งเดียว และทุกครั้งก่อนที่เกิด loop ก็จะทำการตรวจสอบเงื่อนไขใน expr2 ว่าเป็นจริงหรือไม่ ถ้าเป็นจริง ก็จะเข้าไปทำคำสั่งใน statement แต่ถ้าไม่เป็นจริง ก็จะออกจากการทำงานใน for ไป และหลังจากทำงานใน statement เสร็จแล้ว ก็จะมาทำงานใน expr3 ก่อนที่จะไปตรวจสอบเงื่อนไขใน expr2 อีกครั้ง

5. BREAK

        ใช้หยุดการทำงานใน loop while, do..while และ for โดยที่ไม่ต้องทำการตรวจสอบเงื่อนไขของ loop เหล่านั้น ดูตัวอย่าง

        $I = 0;
        while ( $i < 10) {
           if ($arr[$i] == “stop”) {
           break;
           }
           $i++;
        }

ไม่ว่าค่า  $i จะเป็นค่าเท่าไหร่ ถ้าข้อมูลใน array $arr[] เป็น stop เมื่อไหร่ ก็จะหยุดทำงานใน loop ทันที

6. CONTINUE

        จะคล้ายๆ กับ break นั่นคือ จะหยุดการทำงานใน loop ปัจจุบันเอาไว้ก่อน แต่จะต่างจาก break ตรงที่ว่า continue จะกลับไปเริ่มต้นทำงานใหม่ ที่ต้นของ loop แทนที่จะออกจาก loop ไปเลย

7. SWITCH

        จะทำการตรวจสอบเงื่อนไข ที่ไม่เฉพาะ ถูกและผิด ได้ ซึ่งจะทำงานคล้ายๆ กับชุดของ if / elseif นั่นเอง ต่างกันตรงที่ว่า switch จะเป็นการกำหนดตำแหน่งที่จะทำงานมากกว่าจะกำหนดชุดคำสั่งที่จะทำงาน มีรูปแบบดังนี้

        switch (expression) {
           case expr1 :
           ...
           case expr2 :
           ...
          


        ตัวอย่าง

        switch($I) {
           case 0 :
              echo “$i equals 0”;
              break;
           case 2 :
              echo “$i equals 2”;
              break;
        }

8. REQUIRE

        จะแทนที่ตัวเองด้วยคำสั่งที่อยู่ใน file ที่กำหนดไว้ ซึ่ง require จะทำงานเพียงแค่ครั้งเดียว เมื่อโปรแกรมถูก load เท่านั้น

9. INCLUDE

        จะคล้ายกับ require แต่จะต่างกันตรงที่ว่า include จะทำงานเมื่อถูกเรียก ไม่ใช่ทำงานเมื่อโปรแกรมถูก load ดังนั้น file ที่ include อาจจะเปลี่ยนไปเรื่อยๆ ได้ (เช่น การใส่ include ไว้ใน loop ต่างๆ ) แต่ว่า file ที่ require จะเป็นได้แค่ file เดียวที่กำหนดไว้ตอนแรก

10. FUNCTION

        เป็นการรวมชุดคำสั่งต่างๆ ไว้ด้วยกัน เพื่อให้สะดวกต่อการเรียกใช้ โดยจะมีโครงสร้างดังนี้

        Function foo ($arg_1, $arg_2, …., $arg_n) {
           Echo “Example function.\n”;
           Return $retval;
        }

        มีส่วนประกอบดังนี้

        Function Name
           เป็นชื่อที่จะถูกใช้ในการอ้างอิงถึง function นั้น

        Arguments ($arg)
           คือค่าข้อมูลที่ส่งให้กับ function เพื่อใช้ในการประมวลผล

        Return Value
           คือค่าผลลัพธ์ที่ได้จากการทำงาน ซึ่ง function จะคืนย้อนกลับออกมา