ประกาศ : การเอาบทความไปเผยแพร่

    เรายินดีที่จะให้คุณนำบทความไปเผยแพร่ได้แต่ท่านจะต้องให้ credit เราโดยแสดงที่มาของบทความหรือส่วนของดังกล่าวกลับมาที่เรา
ตัวอย่างการให้ credit
   credits: http://easy-code-examples.blogspot.com/

ขอบคุณครับสำหรับความร่วมมือแล้วผมจะพยายามนำสิ่งดีๆ มาแบ่งปันต่อไป หากมีข้อแนะนำ ติชม ใดสามารถ comment ไว้ได้ที่นี่หรือ ถาม-ตอบ ด้วย user Facebook เพื่อนำไปปรับปรุงให้ดีขึ้นต่อไปครับ

..อ่านต่อ..

เริ่มต้นใช้งาน JQuery

   จากที่ได้เคยเล่าไปแล้วคร่าวๆ เรื่อง JQuery ในหัวข้อมารู้จัก jQuery กันในคราวก่อน ผมจะขอมาสืบสานต่อโดยจะมาแนะนำวิธีเริ่มต้นใช้งาน Step By Step เพื่อเป็นประโยชน์กับผู้ที่สนใจนะครับ
   หากจะคิดให้ดูง่ายก็คิดซะว่า JQuery ก็เป็น Javascript Library ตัวหนึ่งที่ช่วยให้เราเขียนโปรแกรมได้ง่ายโดยไม่ต้องเขียน Hard Code (เขียน code เองทุกอย่างเองส่วนตัวเรียก code เถือก) เองให้มากมาย ซึ่งผมจะสรุปการทำ Hello JQuery มาเป็นขั้นๆ ดังนี้

1. เราต้องโหลด JQuery มาจาก http://jquery.com/ โดยคลิกที่ปุ่ม Download
   Production คือ code ถูกบีบอัดโดยเอาช่องว่างระหว่าง code ที่ไม่จำเป็นออก
   Development หากเปิดดู code จะสามารถอ่าน code ได้ง่าย (เพราะมีการขึ้นบรรทัดใหม่ เว้นวรรค และ tabให้ดู code ได้สะดวกขึ้น)

2. จากนั้นเราจะเห็น Code เถือก คลิกขวาเลือก Save as... แล้วเลือกที่ Save ไฟล์ไปไว้ที่เดียวกับโปรแกรมของเรา โดยใช้ชื่อเดิมที่เค้าตั้งมาให้ (อย่าเปลี่ยนชื่อไฟล์ถ้าเป็นผู้เริ่มต้น)

3. จากนั้นเราได้ Library มาแล้วเราก็มาดูวีธี Load มาใช้งานกันดัง Code
   

   <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
   

   (src นั้นจำเป็นต้องอ้างที่ตั้งของ  JQuery ให้ถูกนะครับแล้วแต่ว่าเราเอาไปวางไว้ตรงไหน)
4. แล้วเราก็มาสร้างไฟล์ HelloJQuery.html แล้วใส่ Code ข้างล่างลงไป
   
   
   

   <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <script src="jquery-1.4.4.min.js" type="text/javascript"></script>
      <script type="text/javascript">
        $(document).ready(function(){
          $("a").click(function(){
            alert("Hello JQuery");
          });
        });
      </script>
    </head>
    <body>
      <a href="http://jquery.com/">jQuery</a>
    </body>
    </html>

5. ทดลองรันโดยคลิกที่ link เลยครับ
   
   

..อ่านต่อ..

อะเรย์ (Arrays)

    อะเรย์ คือชุดของตัวแปรที่แสดงในรูปของลำดับ เพื่อเก็บข้อมูลกลุ่มเดียวกัน ซึ่งมีความแตกต่างจากตัวแปรทั่วไป เพราะตัวแปรทั่วไปจะถูกเก็บในหน่วยความจำแบบไม่ต่อเนื่องกัน ส่วนตัวแปรชนิดอะเรย์ จะถูกเก็บในหน่วยความจำในตำแหน่งที่ต่อเนื่องกัน ขนาดของอะเรย์ขึ้นอยู่กับจำนวนมิติ (Dimension) ที่กำหนดให้มัน และข้อมูลในอะเรย์จะต้องเป็นชนิดเดียวกัน
   ตัวแปรที่เก็บอยู่ในอะเรย์นั้นเราเรียกว่า element แต่ละ element ในอะเรย์จะมี index เพื่อใช้ระบุค่าที่อยู่ภายในแต่ละ element ของอะเรย์ ซึ่งจำนวน index ของอะเรย์ผู้ใช้สามารถกำหนดได้เอง
Index ของ array
    index ใช้สำหรับอ้างถึงแต่ละ element ในอะเรย์ ซึ่งในแต่ละภาษาค่าเริ่มต้นของ index จะมีค่าไม่เท่ากัน หากเป็นภาษา PHP ค่าเริ่มต้นของ index จะเริ่มที่ 0 และสามารถกำหนด index ของอะเรย์เป็นตัวอักษรได้ด้วย ซึ่งจะสามารถแบ่งการสร้างอะเรย์ได้เป็น 2 แบบ

• การกำหนด index ของ array เป็นตัวเลข

Code :

$animal = array("Dog","Cat","Rat"); for($i=0; $i<3; $i++) {     echo "animal[$i] = ".$animal[$i]."<br/>"; }

Output :

animal[0] = Dog animal[1] = Cat animal[2] = Rat

• การกำหนด index ของ array เป็นตัวอักษร

Code :

$animal = array("Dog"=>10,"Cat"=>20,"Rat"=>30); while($element = each($animal)) {     echo "animal[$element['key']] = ".$element['value']."<br/>"; }

Output :

animal[Dog] = 10 animal[Cat] = 20 animal[Rat] = 30

..อ่านต่อ..

เจาะลึกตัวแปร (Variables) ใน PHP

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

• กฏการตั้งชื่อตัวแปร

1. ต้องขึ้นต้นด้วย $ (dollar sign) เสมอ
   Example.
       $val 
2. สามารถใช้ได้ทั้งตัวเลขและตัวอักษร และใช้ _(underscores) ได้
   Example.
       $_val
3. ตัวอักษรแรกหลัง $ ห้ามขึ้นต้นด้วยตัวเลข
4. การใช้ตัวพิมพ์เล็ก ตัวพิมพ์ใหญ่จะไม่เหมือนกัน
   Example.
       $Val จะถือว่าเป็นคนละตัวแปรกับ $val  เพราะฉะนั้นระวังให้ดีหากเอาตัวแปรชื่อเดียวกันแต่ตัวพิมพ์เล็ก ตัวพิมพ์ใหญ่ ต่างกันจะทำให้เกิดความผิดพลาดขึ้นได้
5. ไม่ควรตั้งชื่อตัวแปรซ้ำกับฟังก์มาตรฐาน (build-in function) เพราะ PHP จะไม่สนใจชื่อที่ตั้งใหม่แต่จะทำงานตามฟังก์ชั้นมาตรฐาน

• การกำหนดค่าให้ตัวแปร

    กำหนดค่าให้ตัวแปรได้โดยใช้ Assignment Operator คือเครื่องหมาย = (เท่ากับ) 

Example.
    $val = 0;
    $val1 = $val2;

    จากตัวอย่างตัวแปรสามารถรับค่าได้ทั้งที่เป็นตัวเลข ตัวอักษร และตัวแปร

• การแสดงค่าตัวแปร

Code :

<?     $val = 10     echo 'ตัวแปรมีค่า ';     echo $val; ?>

อธิบายจาก Code
- บรรทัดที่ 2 เป็นการกำหนดค่าให้ตัวแปร $val มีค่าเป็น 10
- บรรทัดที่ 3 เป็นการแสดงข้อความ "ตัวแปรมีค่า " ออกทางหน้า web
- บรรทัดที่ 4 แสดงค่าของตัวแปร $val ออกทางหน้า web แสดงผลดัง output ด้านล่าง
Output :

ตัวแปรมีค่า 10

• ชนิดของตัวแปร (variable types)

1. Integer คือตัวเลขจำนวนเต็ม
   Example 1, 2, 3, 777 
2. Double คือตัวเลขจำนวนจริง
   Example 1.00, 1.25, 55.9843434
3. String คือตัวอักษร แต่ต้องอยู่ระหว่างเครื่องหมาย double quotes ( " ) หรือ single quotes ( ' )
   Example "str" , 'abc def g'
4. Array คือชุดของข้อมูลที่เป็นชนิดเดียวกัน (ตัวนี้ Advance นิดนึง จะมาอธิบายเพิ่มในภายหลังอย่างละเอียด)
5. Object คือการกำหนดให้ตัวแปรนั้นเก็ฐคุณสมบัติของ object ไว้ โดยใช้ชื่อคลาสเป็นตัวกำหนด (ตัวนี้ก็ Advance หน่อยนะ จะมาอธิบายเพิ่มในภายหลังอย่างละเอียดเช่นกัน)

• Type strength

    ชนิดของตัวแปรภาษา PHP สามารถกำหนดได้โดยไม่ต้องประกาศชนิดตัวแปร และเมื่อกำหนดค่าใหม่ที่มีค่าชนิดแตกต่างจากชนิดเดิม ชนิดตัวแปรนั้นจะถูกเปลี่ยนไปตามชนิดตัวแปรที่กำหนดใหม่ให้เอง

• การกำหนดชนิดให้ตัวแปร

    กำหนดชนิดตัวแปรได้โดยใส่ชนิดตัวแปรไว้ใน วงเล็บ หน้าตัวแปร ขณะที่กำหนดค่าให้ตัวแปรนั้น

Code :

<?     $a = 10.1;     $b = 10.2;     $sum = $a + $b;     echo $sum.'<br>';     $a = (integer)$a;     $b = (integer)$b;     $sum = $a + $b;     echo $sum.'<br>'; ?>

Output :

20.3 20

    จะเห็นว่าครั้งแรกเราใส่ค่าให้ $a และ $b เป็นค่าชนิดที่เป็น Double การรวมค่าออกมาจึงได้ค่าจำนวนจริง แต่หลังจากที่เรากำหนดชนิดให้ $a และ $b ใหม่เป็น Integer แล้วรวมค่า ผลที่ออกมาได้ค่ามาเป็นจำนวนเต็ม

..อ่านต่อ..

การ Redirect / Refresh web page

    การ redirect สามารถทำได้ด้วยการใช้ meta tag ของ html code สามารถกำหนดช่วงเวลาและ URL ที่ต้องการ Redirect ไปได้ ใน attribute CONTENT มีรูปแบบดังนี้
     CONTENT="[ช่วงเวลาให้รอก่อนทำการ Redirect หน่วยเป็นวินาที];URL=[ใส่ URL ที่ต้องการ Link ไปหาที่นี่]"
    หากต้องการให้ web page ของเรา Refresh หน้าทุกๆ 1 นาทีก็สามารถเซตได้ตามตัวอย่าง code ข้างล่าง code ต้องวางอยู่ระหว่าง tag <head> กับ </head> นะครับ

Code :

<META HTTP-EQUIV="Refresh" CONTENT="60;URL=http://www.yourname.com">

    การ Redirect ด้วย Javascript เพียงแค่ใส่ URL ให้ถูกต้องหน้า web ของเราก็จะ Link ไปสู่ URL ที่เรากำหนดเอง

Code :

<html> <head> <script langquage='javascript'>     window.location="http://www.yourdomain.com/"; </script> </head></html>

     ยังมีรูปแบบ code javascript การ Redirect URL อื่นอีกซึ่งให้ผลการทำงานเหมือนกัน

Code :

<html> <head> <script langquage='javascript'>     window.location.href = "http://www.yourdomain.com/"; </script></head></html>

..อ่านต่อ..

มารู้จัก jQuery กัน

jQuery คือไลบรารีของโค้ดจาวาสคริปต์ ซึ่งเป็นส่วนหนึ่งของการสร้างเว็บไซต์ jQuery ช่วยให้เราเรียกเขียนหรือ ใช้งานจาวาสคริปต์ และ Ajax ให้ง่ายขึ้น jQuery เปิดตัวครั้งแรกในงานบาร์แคมป์นิวยอร์ก โดย จอห์น เรซิก (John Resig) เมื่อ 14 มกราคม พ.ศ. 2549 ตัวโค้ดของ jQuery มีลิขสิทธิ์และสัญญาอนุญาตแบบ open source โดยใช้สัญญาอนุญาตของ GFDL และ MIT License





ความสามารถของ Jquery
* ใช้งาน DOM element โดยการเขียนไม่จำเป็นต้องยึดติดกับ browser
* จัดการกับ Event เพิ่ม Event ลงในหน้าเว็บตามแต่ใจต้องการ
* การจัดการ CSS สามารถเพิ่ม ลบ class ,id ของ CSS
* Effects and animations ลูกเล่นบนหน้าเว็บ
* Ajax ช่วยให้เขียน Ajax ได้ง่ายขึ้นประหยัดเว็บเวลาในการเขียน Ajax และทำให้โค้ดสั้นลง
* สามารถสืบทอดคุณสมบัติของ Jquery ไปใช้งานต่อได้
* สามารถทำ UI ใหม่ บน Browser ได้
* Utilities

ใครที่นำ Jquery ไปใช้งานได้บ้าง
* Web Programmer
* Web design
* Jquery สามารถใช้งาน ร่วมกับ server-side scripting languages ได้ทุกภาษา ไม่ว่าจะเป็น PHP,JSP,Perl,ASP หรือ .net
* ใช้งานกับ html,CSS ได้เป็นอย่างดี รวมทั้ง xml ด้วย

เว็บไซต์ของ Jquery
http://www.jquery.com/

Code :

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"> </script> <script type="text/javascript"> $(function(){ $("#btn").click(function(){ $('#idDiv').toggle(1000); }); }); </script> <style type="text/css"> #idDiv{ width: 200px; height: 100px; border: solid 1px black; background-color:LightGrey; text-align:center; display:none; } </style> <div id="idDiv">JQuery Example</div> <button id="btn">Click</button>

Output :

JQuery Example

..อ่านต่อ..

HTML เบื้องต้น

โครงสร้างพื้นฐานของ HTML
    โครงสร้าง HTML 4 แบ่งหลักๆ เป็น 2 ส่วน คือ ส่วนหัว (Head) และส่วนที่เป็นเนื้อหา (Body) ดังนี้

Code :

<HTML>     <HEAD>         <TITLE> ชื่อ web </TITLE>     </HEAD>     <BODY>         คำสั่ง/ข้อความที่ต้องการให้แสดง     </BODY> </HTML>

HTML Code จะต้อง save ใน file นามสกุล .htm หรือ .html ด้วย

---

HTML Headings
     HTML headings เป็นการกำหนดข้อความที่เราต้องการให้เป็นรูปแบบ Header มีตั้งแต่ tags <h1> ถึง <h6>

Code :

<h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3>

Output :

This is a heading

This is a heading

This is a heading

---

HTML Paragraphs
HTML Paragraphs เป็นการแบ่งย่อหน้าโดยใช้ tag <p>

Code :

<p>This is a paragraph 1.</p> <p>This is a paragraph 2.</p>

Output :
This is a paragraph 1.
This is a paragraph 2.

..อ่านต่อ..

เริ่มเขียนโปรแกรมภาษา PHP [Beginner ภาค2]

Comments Code
    การ comment code ในภาษา PHP ทำได้ 2 แบบ คือใช้ // comment ได้บรรทัดเดียวหรือ /* comment */ ได้หลายบรรทัดดังตัวอย่าง
     <html>
     <body>
     <?php
         // This is a comment
         /*
         This is
         a comment block
         */
     ?>
     </body>
     </html>

Variables ใน PHP
     Variables(ตัวแปร) ใช้สำหรับเก็บค่าต่างๆ พวก text , ตัวเลข , array(จะอธิบายในภายหลัง) เมื่อประกาศ Variables ครั้งแรกแล้วมันสามารถที่จะใช้เก็บค่าทับไปทับมาใน code ของคุณได้ Variables ทุกตัวจะต้องเริ่มต้นด้วยตัว $ เสมอ เรามาดูตัวอย่างการประกาศ Variables ที่ถูกต้องกัน
     <?php
         $txt="Hello World!";
         $x=16;
     ?>

String Variables ใน PHP
string variables เป็นตัวแปรที่เก็บ characters(ตัวอักษร) หลายๆตัวได้ในตัวแปรเดียว ซึ่งหมายความว่าสามารถเก็บเป็นคำ วลี ประโยคได้ดูตัวอย่างการประกาศ String Variables
     <?php
         $txt="Hello World";
         echo $txt;
     ?>
output ที่ได้ก็จะเป็น
     Hello World


PHP Operators
   ตัวดำเนินการ(Operator)ใน PHP มีอยู่ 4 ประเภท
Arithmetic Operators

Assignment Operators

Comparison Operators

Logical Operators

IF condition
    การใช้ if condition เป็นการกำหนดทางเลือกให้ทำงานตามกำหนด หากเงื่อนไขถูกต้องก็จะเข้าไปทำงานภายในวงเล็บ
    <?php
        if($a  > $b)
        {
             echo "a is bigger than b";
        }
    ?>
     จากตัวอย่างเป็นการเปรียบเทียบระหว่างตัวแปร $a กับ $b หาก $a มากกว่า $b ก็จะทำการแสดง "a is bigger than b" แต่ถ้า $a น้อยกว่า $b ก็จะข้ามไปทำงานต่อหลัง } (วงเล็บปีกกาปิด)

While loop
     เป็นการทำงานวนซ้ำหากเงื่อนไขยังคงถูกต้องหรือเป็นจริงอยู่โดยส่วนใหญ่จะใช้ในการทำงานที่รูปแบบซ้ำๆเดิม
    <?php
        while(true)
        {
            echo "loop infinity";
        }
    ?>
    ตัวอย่างข้างบนเป็นการทำ loop วนซ้ำไม่มีวันจบคือจะทำการแสดงข้อความ loop infinity ต่อกันไปเรื่อยๆไม่มีจบ


For loop
การวนโดยใช้ for loop นั้นจะใช้ก็ต่อเมื่อเรารู้จำนวนครั้งในการวน loop ดังตัวอย่าง
    <?php
        for ($i=1; $i<=5; $i++)
       {
           echo "The number is " . $i . "<br />";
       }
    ?>

..อ่านต่อ..

เริ่มเขียนโปรแกรมภาษา PHP [Beginner]

     การเขียน code ในภาษา PHP นั้นจะมีรูปแบบ (ในวงการเค้าเรียกกันว่า syntax) ไม่มากหากตั้งใจศึกษาจริง สามารถทำความเข้าใจได้ภายใน 1 วันเท่านั้นแต่เดี๋ยวก่อนหากคุณลองศึกษาจากที่นี่ Easy Code Examples อาจใช้เวลาเพียง 1 ชม.เท่านั้น ก่อนที่จะเริ่มเขียนโปรแกรมขอให้เตรียม Environment ให้พร้อมสำหรับ Run โปรแกรมเสียก่อนนะครับ ศึกษาได้จาก >> การเตรียม Environment (สภาพแวดล้อม) ให้ทำงานภาษา PHP ได้

    หลังจากเตรียมอะไรๆ มามากมายเรามาเริ่มกันเลยเปิด Editor ขึ้นมาในการเขียน PHP นั้นจะต้องอยู่ระหว่าง <? code PHP ?> และ save ลงไฟล์นามสกุล .php เช่น easyCode.php เป็นต้น การเปิด-ปิดส่วนที่เป็น PHP code มีหลายรูปแบบดังนี้

•   <? code PHP ?> (รูปแบบภาษา SGML)
•   <?php code PHP ?> (แนะนำ)
•   <Script Language="php"> code PHP </Script> (รูปแบบ JavaScript)
•   <% code PHP %> (รูปแบบ ASP)

     การเขียนสคริปต์ PHP ในรูปแบบใดก็ตามจะต้องมีเครื่องหมาย semicolon ( ; ) ลงท้ายคำสั่งเสมอ ลองเขียน code ด้านล่างลงไปในไฟล์ easyCode.php ที่สร้างไปก่อนหน้านี้แล้ว

<?php

echo "Hello, Easy Code Examples";

?>

     จากนั้น save file แล้วย้ายไฟล์ไปไว้ที่ C:\AppServ\www เปิด browser (Internet Explorer ก็ได้) ใส่ Url http://localhost/easyCode.php แล้ว Enter หากมีคำว่า Hello, Easy Code Examples แสดงว่าที่ทำมาถูกต้องหากไม่ขึ้นให้ลองไปดูการเตรียม Environment ใหม่
     การวาง code ผสมกับ HTML สามารถทำได้ตามตัวอย่าง

<html>

<head>

<title>Example</title>

</head>

<body>

<?php 

        echo "Hi, I'm a PHP script!"; 

?>

</body>

</html> 

..อ่านต่อ..

การเตรียม Environment (สภาพแวดล้อม) ให้ทำงานภาษา PHP ได้

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

• Apache (ทำหน้าที่เป็น web server)
• PHP (ตัวที่เรากำลังศึกษากันอยู่)
• MySQL (ตัวระบบจัดการฐานข้อมูล)
• phpMyAdmin (สคริบ php ใช้สำหรับจัดการฐานข้อมูล MySQL ได้ผ่านเว็บ)

เราสามารถโหลด Appserv ที่เป็นโปรแกรมที่รวบรวมเอา Open Source Software ข้างต้น "มารวมกัน" เพียงแค่เข้าไปโหลดที่ http://www.appservnetwork.com/ 

ดูวิธีวิธีการลงโปรแกรม Appserv ได้ที่ http://www.appservnetwork.com/modules.php?name=Content&pa=showpage&pid=4 เท่านี้เราก็จะได้ environment เตรียมพร้อมสำหรับการพัฒนาเว็บ

..อ่านต่อ..