P H P

PHP นั้นเป็นภาษาสำหรับใช้ในการเขียนโปรแกรมบนเว็บไซต์ สามารถเขียนได้หลากหลายโปรแกรมเช่นเดียวกับภาษาทั่วไป อาจมีข้อสงสัยว่า ต่างจาก HTML อย่างไร คำตอบคือ HTML นั้นเป็นภาษาที่ใช้ในการจัดรูปแบบของเว็บไซต์ จัดตำแหน่งรูป จัดรูปแบบตัวอักษร หรือใส่สีสันให้กับ เว็บไซต์ของเรา แต่ PHP นั้นเป็นส่วนที่ใช้ในการคำนวน ประมวลผล เก็บค่า และทำตามคำสั่งต่างๆ อย่างเช่น รับค่าจากแบบ form ที่เราทำ รับค่าจากช่องคำตอบของเว็บบอร์ดและเก็บไว้เพื่อนำมาแสดงผลต่อไป แม้แต่กระทั่งใช้ในการเขียน CMS ยอดนิยมเช่น Drupal , Joomla พูดง่ายๆคือเว็บไซต์จะโต้ตอบกับผู้ใช้ได้ ต้องมีภาษา PHP ส่วน HTML หรือ Javascript ใช้เป็นเพียงแค่ตัวควบคุมการแสดงผลเท่านั้น

นอกจากภาษา PHP แล้วยังมีภาษาอื่นอีกหรือไม่

คำตอบคือมีครับ เช่น ASP , JSP แต่ที่นิยมมาก คือ PHP เพราะเป็นภาษาที่สามารถศึกษาได้ง่าย ทำงานได้มีประสิทธิภาพ ทำให้เป็นที่นิยมอย่างยิ่งในปัจจุบัน รวมทั้งมีชุมชนคนใช้งาน และคู่มือที่ ดีมาก และสำคัญสุดคือฟรีครับ การใช้งานภาษา PHP ไม่ต้องมีค่าใช้จ่ายใดๆทั้งสิ้น ทุกคนสามารถเข้าถึงได้

การจะเขียน PHP ต้องมีอะไรบ้าง

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

การพัฒนาเว็บไซต์ด้วย PHP

สำหรับผู้พัฒนาเว็บไซต์ด้วย PHP นั้นปรกติจะทำการจำลองเครื่องของตัวเองให้เป็น Web Serverระหว่างการพัฒนาเพื่อดูการทำงาน ของโปรแกรมที่เขียนขึ้นมาครับ จากนั้นจึงจะอัพไฟล์ทั้งหมดลงใน Web Server จริงครับ ในส่วนของ Web Server นั้นทาง Hellomyweb ก็มีให้บริการอยู่นะครับ สนใจคลิกที่นี่ครับ ถามว่าเราจะให้เครื่องคอมพิวเตอร์ของเรานั้นทำงานได้เหมือนกับ Web server จริงได้หรือไม่ คำตอบคือได้ครับ แต่มันออกจะไม่คุ่มค่า ทางการเงินนะครับ เพราะเราต้องเสียค่าไฟ ค่าอินเตอร์เน็ต เครื่องคอมก็ต้องเปิดไว้ตลอดปิดไม่ได้ เวลาผู้ใช้งานจากภายนอกมาเรียกใช้ก็รองรับไม่ได้ไม่มาก ดังนั้นการเช่า Web Server ภายนอกจะคุ่มค่ามากกว่าครับ หากต้องการจะพัฒนาเว็บไซต์เพื่อใช้งานจริงๆ

M A K E W E B P A G E

การที่เราจะทำให้คนทั่วไปได้เห็นเว็บของเรานั้น เราจำเป็นต้องนำเว็บเพจที่เราสร้างขี้นมาไปเก็บไว้ที่ web server ซึ่ง web server จะทำหน้าที่คอยส่งไฟล์ที่เราทำขึ้นมาไปให้คนทั่วไปได้เห็น เหมือนกับที่เราเรียกไฟล์จากเครื่องของเรามาดูนั่นเอง 

             ซึ่งเครื่องของคุณก็สามารถทำเป็น web server ได้ แต่คุณต้องเปิดเครื่อง 24 ชั่วโมง และ ต่ออินเทอร์เน็ต 24 ชั่วโมง เพราะจะต้องรองรับกับคนทั่วไปที่ต้องการเปิดเว็บของคุณตลอดเวลา ซึ่งจะทำให้สิ้นเปลืองมา ดังนั้นในบทความนี้เราจะมาหา web server ที่ให้บริการฟรีกัน ซึ่งเราอาจต้องเสียพื้นที่ในเว็บไซต์ของเราให้กับโฆษณาเพื่อแลกกับการใช้ของฟรี (ตามปรกติจะมีผู้ให้บริการเช่า web server อยู่ ราคาขึ้นอยุ่กับคุณภาพของ web server นั้น)

             ในบทนี้จะเกี่ยวกับการใช้บริการ web server ฟรี ซึ่งในบทความนี้จะใช้บริการ free web server ของ http://www.freewebhostingarea.com/

เราจะมาดูรายละเอียดการสมัครเข้าใช้ web server ฟรีของที่นี้กัน

        1. ให้พื้นที่ในการจัดเก็บไฟล์ของคุณถึง 200 MB แต่ไฟล์ที่คุณจะนำไปเก็บไว้ที่ server ตัวนี้นั้น จะต้องมีขนาดเล็กว่า 10 MB (การดูขนาดไฟล์ของคุณทำได้โดยคลิกขวาที่ไฟล์นั้น เลือก Properties ดูที่ size จะบอกขนาดของไฟล์เอาไว้) 

        2. ให้คุณสามารถส่งไฟล์ไปที่ web server ด้วยระบบ FTP ได้

        3. และอื่นๆอีกมากมายซึ่งถ้าเขียนใส่ในบทความนี้อาจทำให้บทความนี้ยาวเกินไป

เริ่มต้นของใช้บริการฟรี

1. หลังจากที่คุณเปิด http://www.freewebhostingarea.com/ แล้วเลื่อนลงมาดูด้านล่างของเว็บจะเห็นช่องให้เราใช่ชื่อเว็บของเราซึ่งมีด้วยกัน 3 ช่องด้วยกัน คือ

             1. www.ชื่อเว็บของคุณ.6te.net

             2. www.ชื่อเว็บของคุณ.ueuo.com

             3. www.ชื่อเว็บของคุณ.orgfree.com

ซึ่งในบทความนี้เราจะใช้ http://hellomyweb.6te.netตามรูปด้านล่าง

2. กรอกรายละเอียด

           บางครั้งคุณอาจเจอปัญหาแบบด้านล่าง เกิดจากว่าเครื่องของคุณเคยสมัครของใช้บริการกับเว็บไซต์นี้ไว้แล้ว ซึ่งผู้ให้บริการให้ใช้ฟรีแค่เครื่องละ 1 account เท่านั้น ถ้าคุณต้องการจะใช้บริการก็แนะนำให้คุณเลือกชื่อเว็บใหม่ อาจเป็น www.hellmyweb.ueuo.com หรือ hellomyweb.orgfree.com แทน 

3. เมื่อสมัครเสร็จแล้วจะมีหน้าจอดังภาพ ซึ่งคุณต้องคลิกที่ลิงค์ด้านล่างเพื่อยืนยันการสมัครเข้าใช้งาน

4. เมื่อคลิกที่ลิงค์แล้วจะมีหน้าจอดังรูปข้างล่าง ซึ่งเป็นข้อมูลที่เราจะต้องจดเอาไว้ให้ดี อาจ save หน้านี้เก็บไว้ดูภายหลังกันลืม และเป็นความลับ

5. เมื่อสมัครขอใช้บริการเรียบร้อยแล้ว เราก็จะเริ่มนำไฟล์ไปเก็บไว้ที่ web server กัน ซึ่งการนำไฟล์ไปเก็บไว้ใน web server ก็ให้เราเปิด My Computer ขึ้นมาแล้วพิมพ์ ftp://ชื่อเว็บของคุณ ซึ่งในบทความนี้ก็เป็น ftp://hellomyweb.6te.net จะมีหน้าจอถาม username และ password ขึ้นมาให้คุณใส่ username และ password ที่ได้จากภาพด้านบน เมื่อกรอกเสร็จก็เป็นดังรูปด้านล่าง

6. ให้คุณลบไฟล์ที่มีอยู่ ทั้งหมดแล้วนำไฟล์ของคุณไปใส่แทน โดยลากไฟล์จากในเครื่องลงใน My computer ได้เลย 

            โดยที่ เมื่อคุณเปิดเว็บของคุณ เช่น www.hellomyweb.6te.net ตัว web server จะหาไฟล์ที่ชื่อ index.html มาแสดงเป็นหน้าแรก (home page) ของคุณถ้าคุณไม่มี file ที่ชื่อ index.html ก็ไม่สามารถเปิดเว็บไซต์ของคุณได้ และ web browser จะแสดง error ออกมา 

A B O U T W E B B L O G

 1. ภาษา HTML
    เว็บเพจนั้นสร้างมาจากภาษา HTML ซึ่งจะใช้ในการจัดรูปแบบของเว็บเพจว่าต้องการให้ ตัวอักษรมีขนาเท่าไหร่ จัดวางอยู่นะตำแหน่งไหน ให้รูปภาพอยู่ที่ตำแหน่งใด ซึ่งจำเป็นมากในการสร้างเว็บ ดังนั้นเราจึงควรรู้พื้นฐานของ HTML บ้าง ถึงแม้ว่าจะมีโปรแกรมอย่าง Dreamwerver ที่เข้ามาอำนวยความสำดวกในการเขียน HTML ให้เราแต่ตัวของ Dreamweaver เองก็ยังมีข้อจำกัดอยู่ ดังนั้นถ้าเรารู้ภาษา HTML ก็จะทำให้ข้อจำกัดนั้นหายไป

    2. รูปภาพ
    ภาพเพียงภาพเดียว อาจแทนคำพูด หลายล้านคำ ด้วยเหตุนี้การทำเว็บจึงไม่ขาดรูปภาพได้ เพราะนอกจากจะบรรยายเรื่องราวได้ดีแล้ว ยังทำให้เว็บของเราดูสวยงามขึ้นอีกด้วย
ถึงแม้ว่าภาพจะบรรยายคำพูดได้ดี แต่ด้วยขนาดของมันก็ใหญ่กว่าตัวอักษรมากเช่นเดียวกัน ซึ่งถ้าเราใส่รูปในเว็บของเรามากก็จะทำให้เว็บของเราเปิดได้ช้าลง การเปิดเว็บไซต์ได้ช้าหรือเร็วเป็นเรื่องที่สำคัญมาก ดังนั้นเราจึงควรเลือกรูปภาพที่สามารถสื่อความหมายได้ดี ตกแต่งให้รูปสวยงาม และมีขนาดเล็กลงโดยไม่ทำให้คุณภาพของรูปเสียไป ซึ่งปัจจุบันมีโปรแกรมมากมายที่เข้ามาจัดการรูปภาพเช่น Photoshop , Gimp ดังนั้นเราจึงควรศึกษาข้อมูลเกี่ยวกับโปรแกรมพวกนี้เอาไว้ด้วยเพื่อเว็บของเราจะได้มีประสิทธิภาพ และความสวยงาม

    3. การใช้โปรแกรมสร้างเว็บเพจ
    โปรแกรมที่ใช้ในการสร้างเว็บเพจอย่าง Dreamwerver เป็นโปรแกรมที่ใช้งานได้ง่าย และทำให้เราสร้างเว็บเพจได้เร็วขึ้น นอกจากนั้นยังมีตัวช่วยและเครื่องมือต่างคอยอำนวยความสำดวกเรา เช่น FTP ซึ่งเป็นการดีที่เราจะเรียนรู้โปรแกรมพวกนี้เอาไว้ สำหรับผู้เริ่มต้น เราอาจศึกษาจากตัวของ Dreamwerver เองก็จะทำให้เราเรียนรู้ได้เร็วขึ้น และรู้วิธีการเขียน HTML ที่ดี เพราะ Dreamwerver นั้นจะแสดง HTML ที่โปรแกรมสร้างขึ้นมา ซึ่งเป็นการเขียนที่เรียบร้อยละดูง่าย

    4. web server
    web server ก็คือเครื่องคอมพิวเตอร์เครื่องหนึ่งซึ่งเชื่อมต่ออยู่กับอินเทอร์เน็ต เพื่อให้ทุกคนเข้าถึงได้ มีความสำคัญคือเอาไว้เก็บไฟล์(เว็บเพจ) ของเรา เพื่อให้คนอื่นเปิดเข้ามาดูนั่นเอง ถ้าเราต้องการจะทำให้เครื่องของเราเป็น web server ก็แต่ แต่ก็ได้กล่าวไปแล้วว่าเป็นเรื่องที่สิ้นเปลืองและ web server ที่ได้ก็จะไม่มีประสิทธิภาพ ซึ่งปัจจุบันนั้นมี web server (hosting) ให้เช่าพื้นที่ในการเก็บเว็บเพจ มากมายหลายที่แต่ละที่ก็จะมีประสิทธิภาพ และราคาต่างกันไป ซึ่งราคาในปัจจุบันก็ถือว่าไม่แพงมาก สำหรับผู้เริ่มต้นอาจใช้บริการฟรีไปก่อนก็ได้ พอเว็บเริ่มเป็นที่นิยมก็ค่อยมาใช้แบบที่ต้องเสียค่าบริการ

    5. Domain name
    Domain name คือชื่อของเว็บของคุณ เช่น www.hellomyweb.com ตัวของ Domain name นั้นเหมือนกับทะเบียนบ้านที่จะจดซ้ำกันไม่ได้ดังนั้นเราจึงต้องมีผู้รับผิดชอบ ถ้าเราต้องการจะมี Domain name เป็นของตัวเองก็จะต้องติดต่อกับผู้รับผิดชอบและเสียค่าบริการรายปี

L I N K I N G

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

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

    ให้เราสร้างไฟล์มา 3 ไฟล์มีชื่อและ source code ดังนี้

1.index.html เป็นไฟล์ที่เทียบได้กับสารบัญของเว็บไซต์ของเรา ซึ่ง source code มีดังนี้

<html>     <head>         <title>ทดลองสร้าง link ให้กับเว็บไซต์</title>     </head>     <body>              เว็บไซต์นี้ประกอบด้วย 3 เว็บเพจซึ่งคุณสามารถคลิกที่ link ข้างล่างเพื่ออ่านหน้าอื่นได้              <br>              <a href = "page1.html">หน้า 1</a>              <a href = "page2.html">หน้า 2</a>              <br>              <h1>คุณอยู่ที่ หน้าสารบัญ</h1>     </body> </html>

2.page1.html เป็นไฟล์ที่เทียบได้กับ หน้าที่ 1 ของหนังสือ

<html>     <head>         <title>ทดลองสร้าง link ให้กับเว็บไซต์</title>     </head>     <body>              เว็บไซต์นี้ประกอบด้วย 3 เว็บเพจซึ่งคุณสามารถคลิกที่ link ข้างล่างเพื่ออ่านหน้าอื่นได้              <br>              <a href = "index.html">หน้าสารบัญ</a>              <a href = "page2.html">หน้า 2</a>              <br>              <h1>คุณอยู่ที่ หน้า 1</h1>     </body> </html>

3.page2.html เป็นไฟล์ที่เทียบได้กับ หน้าที่ 2 ของหนังสือ

<html>     <head>         <title>ทดลองสร้าง link ให้กับเว็บไซต์</title>     </head>     <body>              เว็บไซต์นี้ประกอบด้วย 3 เว็บเพจซึ่งคุณสามารถคลิกที่ link ข้างล่างเพื่ออ่านหน้าอื่นได้              <br>              <a href = "index.html">หน้าสารบัญ</a>              <a href = "page1.html">หน้า 1</a>              <br>              <h1>คุณอยู่ที่ หน้า 2</h1>     </body> </html>

ให้เราลอง เปิดไฟล์ดูจะเห็นดังรูปด้านล่าง



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

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

เราจะเห็นได้ว่ามี source code ใหม่เพิ่มขึ้นมาคือ

    <a href = "index.html">หน้าสารบัญ</a>    เป็นส่วนที่ใช้แสดง link ของเราซึ่งมีรายละเอียดดังนี้

<a href="ชื่อไฟล์ที่เราต้องการเปิดเมื่อคลิกที่ลิ้งค์นี้">ชื่อลิ้งค์ของเราที่แสดงใน web browser</a>

    <h1>หน้า 1</h1>    เป็นส่วนที่เปลี่ยนขนาดของข้อความของเราที่แสดงใน web browser ซึ่งเราสามารถลองเปลี่ยนขนาดโดยเปลี่ยนตัวเลขเป็น h2 , h3 ขนาดของตัวอักษรที่แสดงก็จะเปลี่ยนแปลง

P U T I N I M A G E

            ในบทความนี้จะเป็นการลองใส่รูปในเว็บเพจดู โดยให้เราหารูปอะไรก็ได้ในเครื่อง และ copy ให้ไปอยู่ใน folder เดียวกับไฟล์ index.html ที่เราได้ลองสร้างมาจากบทความแรก โดยรูปที่บทความนี้ใช้เป็นรูปในงานราชพฤกษ์ ที่จัดขึ้นที่เชียงใหม่ และมีชื่อรูปว่า 1.jpg



ให้เราเปิด notepad โดยไปที่ file > open และเลือกไฟล์ index.html ที่เราทำไว้จากบทความที่ผ่านมา



              พิมพ์ข้อความตามด้านล่างนี้ โดยในส่วนของ <img src = "1.jpg"> ชื่อรูปที่นำมาใช้เป็น 1.jpg แต่ในส่วนของคุณก็เปลี่ยนเป็นชื่อรูปของคุณเอง

<html>     <head>         <title>ทดลองใส่รูปในเว็บไซต์</title>     </head>     <body>              เที่ยวงาน ราชพฤกษ์              <br>              บรรยากาศภายในงาน              <br>              <img src = "1.jpg">     </body> </html>

ซึ่งจะได้ผลตามรูปด้านล่าง


เราจะเห็นได้ว่ามี source code ใหม่เพิ่มขึ้นมาคือ

    <img src = "1.jpg">    เป็น code ที่ใช้ในการแสดงภาพ

    <br>    เป็น code ที่ใช้ในสั่งให้ขึ้นบรรทัดใหม่

                ซึ่งเราอาจทดลองเอา <br> ที่อยู่ระหว่างประโยค เที่ยวงาน ราชพฤกษ์ และประโยค บรรยากาศภายในงาน ออกและกด save ที่ notepad

              จากนั้นเราก็ไปดูผลที่ internet explorer (Web browser) ของเรา และทำการกด F5 หรือ กด Refresh เพราะ Web browser ยังแสดงผลที่เกิดจากการเปิดไฟล์ index.html ครั้งแรกอยู่ จากรูปจะเห็นว่าผลที่แสดงต่างจากเดิม โดยจะไม่มีการเว้นบรรทัดระหว่าง เที่ยวงาน ราชพฤกษ์ และ บรรยากาศภายในงาน


             web browser ไม่ได้แสดงผลในครั้งแรกที่เราเปลี่ยนแปลงไฟล์ index.html ก็เพราะว่า web browser เปิดไฟล์ index.html และแสดงผลค้างไว้ จะไม่มีการเรียกไฟล์ index.html มาอ่านซ้ำระหว่างที่มีการแสดงผล ดังนั้นเราต้องทำการกด Refresh หรือ F5 เพื่อให้ web browser ทำการเรียกไฟล์ index.html มาแสดงผลใหม่

           เราอาจลองเพิ่มรูปโดย การเพิ่มบรรทัดของ <img src = "ชือรูปของคุณ"> เข้าไปอีกก็ได้ บทความนี้ก็จบเพียงแค่นี้ บทความต่อไปจะเป็นเรื่องของการเชื่อมโยงไฟล์เข้าด้วยกัน ( การสร้าง LINK )