PHP - ทำเว็บด้วย PHP กันเถอะ ตอนที่ 1 การทำระบบสมาชิก
   Thursday, 09 September 2010 12:44
ตัวอย่างโค้ด PHP ทำเว็บด้วย PHP กันเถอะ ตอนที่ 1  การทำระบบสมาชิก



ระบบสมาชิกมีอะไร ???
  • หน้าลงทะเบียนสมาชิก
  • หน้า Login
  • หน้าแก้ไขข้อมูล (แบบฟอร์มเดียวกับลงทะเบียน)

 

ก่อนอื่นเรามาออกแบบหน้า ลงทะเบียนกันก่อนดีกว่า  เอาแบบง่าย ๆ นะคะ
---------- ตั้งชื่อไฟล์ว่า    register.php    ------------------------------
Code:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>สมัครสมาชิก</TITLE>
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<meta http-equiv="Content-Type" content="text/html; charset=windows-874"></HEAD>

<BODY>
<FORM METHOD=POST ACTION="register.php">
ชื่อ - สกุล : <INPUT TYPE="text" NAME="register_name"><BR>
e-mail : <INPUT TYPE="text" NAME="register_mail"><BR>
โทรศัพท์ : <INPUT TYPE="text" NAME="register_phone"><BR>
บันทึกข้อความ : <INPUT TYPE="text" NAME="register_note"><BR>
<INPUT TYPE="submit" name="submit" value="สมัคร">
<INPUT TYPE="reset" name="reset" value="ล้างข้อความ">
</FORM>
</BODY>
</HTML>

หน้าตา เป็นดังนี้ค่ะ  เอาแบบไม่สวยไปก่อนนะคะ ไว้บทต่อไปค่อยมาทำให้สวยค่ะ ^^  (เขียนโค้ดใน Dreamweaver ค่ะ)





จะสังเกตว่ามีกรอบสีแดง ๆ ครอบอยู่  รู้มัยคะว่ามันคือกรอบอะไร   มันคิด FORM ค่ะ ลองสั่งเกตจากโคัดดูค่ะ


** จะต้องมีคำสั่ง <FORM></FORM> ครอบทุกครั้งเมื่อต้องการส่งข้อมูล  เราเรียกหน้านี้ว่า แบบฟอร์มการสมัครสมาชิก ก็ต้องมี FORM จริงมั้ยคะ  (หลักการง่าย ๆ)


ลองมาดู Attribute ที่อยู่ใน คำสั่ง FORM กันค่ะ  จากตัวอย่าง <FORM METHOD=POST ACTION="register.php">


  • METHOD  คือ รูปแบบการส่ง ค่าที่สามารถใส่ได้ก็จะเป็น POST , GET
  •  
    • การส่งแบบ POST  ส่งข้อมูลได้จำนวนมาก และมีความปลอดภัยมากกว่า เนื่องจากเวลาส่งเราจะไม่เห็นข้อมูล
    • การส่งแบบ GET   ส่งข้อมูลได้จำกัด  (จำไม่ได้ว่าเท่าไหร่)  มีความปลอดภัยน้อย เนื่องจากเวลาส่ง จะเห็นข้อมูลติดอยู่กับ URL เสมอ  เช่น www.domain-name.com/register.php?name=ชื่อ-สกุล&phone=0888888888  อะไรทำนองนี้ค่ะ  สังเกตุได้จาก ตรง Address ค่ะ  แบบ POST จะไม่มีข้อความอะไรต่อจากชื่อไฟล์เลย  ลองเปลี่ยนดูความแตกต่างค่ะ

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


ต่อไปก็จะเป็น  <INPUT TYPE="text" NAME="register_name">  ที่เป็นช่องไว้สำหรับกรอกข้อมูล   ให้ใส่ชื่อให้สื่อความหมายนะคะ จะได้ง่ายกับการเขียนโปรแกรมค่ะ


  •       TYPE   คือ ประเภทของ INPUT   ค่าที่สามารถใส่ได้มี text, hidden, image, button, submit, reset, password   (มีอะไรอีกมั่งหว่า... นึำกไม่ออกแล้วค่ะ)
    • text  คือ ช่องรับข้อความบันทัดเดียว
    • hidden  คือ INPUT ที่ซ่อนไว้ ไม่ให้เห็น  (เผื่อไว้ใช้ประโยชน์ค่ะ)
    • image คือ INPUT ในรูปแบบของ รูปภาพ  ส่วนมากที่เห็นจะเป็น ปุ่มรูปภาพค่ะ
    • submit คือ INPUT ที่ใช้ในการส่งข้อมูลทั้งหมดที่อยู่ภายใน  <FORM></FORM> ส่งไปยังปลายทางที่เรากำหนดไว้
    • reset คือ INPUT ที่ใช้ในการ ล้างข้อความทั้งหมดที่อยู่ภายใน <FORM></FORM>
    • password คือ INPUT ที่ใช้สำหรับรับค่า password เพื่อป้องกันความปลอดภัย
  •       NAME  คือ ชื่อของ INPUT   (ตั้งให้สื่อความหมายนะคะว่าเป็นข้อมูลอะไร)
  •       VALUE คือ ค่าของ INPUT ตัวนั้น


มาถึงตรงนี้เหนื่อยจัง...    (ข้างบนนี้อธิบายโค้ด HTML T_T)

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


---------- ตั้งชื่อไฟล์ว่า    register.php ------------------------------
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>สมัครสมาชิก</TITLE>
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<meta http-equiv="Content-Type" content="text/html; charset=windows-874">
</HEAD>

<BODY>

<?
if(isset($_POST["submit"])){   //  ตรวจสอบว่ามีการกดปุ่ม submit หรือไม่
echo "ชื่อ - สกุล : ".$_POST["register_name"]."<br/>";  // แสดงชื่อที่กรอกในช่อง
echo "e-mail : ".$_POST["register_mail"]."<br/>";  // แสดงอีเมล์
echo "โทรศัพท์ : ".$_POST["register_phone"]."<br/>";  // แสดงเบอร์โทรศัพท์
echo "บันทึกข้อความ : ".$_POST["register_note"]."<br/>";   // แสดงบันทึกข้อความ
echo "<br/><br/><br/><br/>";   // <br/> คือการขึ้นบรรทัดใหม่
}

?>


<FORM METHOD=POST ACTION="register.php">
ชื่อ - สกุล : <INPUT TYPE="text" NAME="register_name"><BR>
e-mail : <INPUT TYPE="text" NAME="register_mail"><BR>
โทรศัพท์ : <INPUT TYPE="text" NAME="register_phone"><BR>
บันทึกข้อความ : <INPUT TYPE="text" NAME="register_note"><BR>
<INPUT TYPE="submit" name="submit" value="สมัคร">
<INPUT TYPE="reset" name="reset" value="ล้างข้อความ">
</FORM>
</BODY>
</HTML> 

ส่วนที่เป็นสีแดง คือส่วนที่เราเพิ่มเข้ามา เพื่อแสดง ข้อความที่ทำการกรอกใน แบบฟอร์ม แล้วส่งไปยังเป้าหมายค่ะ   แต่ละบรรทัดมีคำอธิบายประกอบแล้วค่ะ
$_POST["register_mail"]
เป็นการส่งค่าแบบ POST ใน ["ชื่อของ INPUT ที่เราต้องการ"]
จบบรรทัดอย่าลืม   เครื่องหมาย ";" ด้วยนะคะ
    ผลลัพธ์


login2



เป็นอันเรียบร้อยไปอีก 1 ขั้น 
มาถึงการเก็บลงฐานข้อมูลกันค่ะ
เด้วเราลองไปสร้าง ฐานข้อมูลโดยใช้ phpMyAdmin กันค่ะ

 


ก้อยสร้าง ฐานข้อมูลชื่อว่า account  (ในช่องสร้างฐานข้อมูลใหม่)
      สำหรับคนใช้ คำสั่ง SQL ก็ตามนี้ค่ะ  CREATE DATABASE `account` ;



มาเริ่มสร้างตามรางกันค่ะ


เสร็จแล้วกดปุ่ม ลงมือ   ต่อจากนั้น  Fields ที่ต้องการ  ในที่นี้ ใส่ไป 5 Fields (เก็บข้อมูล 5 ตัว)



คำสั่ง SQL ดังนี้




CREATE TABLE `member` (
`mem_id` TINYINT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`mem_name` VARCHAR( 100 ) NULL ,
`mem_mail` VARCHAR( 50 ) NULL ,
`mem_phone` VARCHAR( 30 ) NULL ,
`mem_note` VARCHAR( 255 ) NULL
) ENGINE = MYISAM COMMENT = 'ตารางสมัครสมาชิก';







คำสั่ง  SQL ของ phpMyAdmin บางตัวอาจไม่เหมือนกัน  ขึ้นอยู่กับ Version ของ MySQL
ตารางที่เราสร้างเรียบร้อยแล้วจะเป็นดังนี้




ข้อไม่อธิบายนะคะ  เพราะบทความจะยาวไป  (ขอข้ามนะคะ)


พอสร้าง ฐานข้อมูลเรียบร้อยแล้ว ก็มาถึงขั้นตอนการ ติดต่อฐานข้อมูล (database)
---------- ตั้งชื่อไฟล์ว่า    register.php ------------------------------
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>สมัครสมาชิก</TITLE>
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<meta http-equiv="Content-Type" content="text/html; charset=windows-874">
</HEAD>

<BODY>

<?

if(isset($_POST["submit"])){
$host_name = "localhost";   // ชื่อโฮส
$database_name = "account"; // ขื่อฐานข้อมูล
$database_username = "root"; // ชื่อ ผู้ใช้ฐานข้อมูล
$database_password = "1234"; // รหัสผ่าน

// เชื่อมต่อฐานข้อมูลโดยใช้ username password
mysql_connect($host_name,$database_username,$database_password)
or die("ไม่สามารถติดต่อเซิร์ฟเวอร์ฐานข้อมูลได้");

//select database เลือกฐานข้อมูล
mysql_select_db($database_name) or die("ไม่สามารถเลือกฐานข้อมูลได้");

// กำหนดภาษา ไทย ต้องตรงกับตอนที่เราติดตั้งโปรแกรม
mysql_db_query($database_name,"SET NAMES tis620");

// คำสั่ง SQL ที่ใช้ในการบันทึกข้อมูล
$sql = "INSERT INTO member ( mem_id , mem_name , mem_mail , mem_phone , mem_note )
VALUES (NULL , '".$_POST["register_name"]."', '".$_POST["register_mail"]."',
'".$_POST["register_phone"]."', '".$_POST["register_note"]."'); ";

// สั่งให้บันทึกข้อมูลทันที
$dbQuery = mysql_query($sql);

// ตรวจสอบว่าการทำงานสมบูรณ์หรือไม่
if($dbQuery){
echo "บันทึกข้อมูลเรียบร้อยแล้วค่ะ";
}else{
echo "ไม่สามารถบันทึกข้อมูลได้";
}

}

?>


<FORM METHOD=POST ACTION="register.php">
ชื่อ - สกุล : <INPUT TYPE="text" NAME="register_name"><BR>
e-mail : <INPUT TYPE="text" NAME="register_mail"><BR>
โทรศัพท์ : <INPUT TYPE="text" NAME="register_phone"><BR>
บันทึกข้อความ : <INPUT TYPE="text" NAME="register_note"><BR>
<INPUT TYPE="submit" name="submit" value="สมัคร">
<INPUT TYPE="reset" name="reset" value="ล้างข้อความ">
</FORM>
</BODY>
</HTML>



เพิ่มโค้ดที่ใช้ในการเชื่อมต่อฐานข้อมูลลงไป  ก้อยอธิบายแต่ละบรรทัดให้แล้วนะคะ


สิ่งสำคัญในการใช้ SQL ในการบันทึกข้อมูล  คือ ลำดับที่ต้องการบันทึกข้อมูล แต่ละส่วนต้องอยู่ตำแหน่งตรงกัน เ่ช่น 



INSERT INTO member ( mem_id , mem_name , mem_mail , mem_phone , mem_note )

VALUES (NULL , '".$_POST["register_name"]."', '".$_POST["register_mail"]."', '".$_POST["register_phone"]."', '".$_POST["register_note"]."');


จะให้ว่า   เราวาง ชื่อ Field mem_name ไว้ตำแหน่งที่ 2  ค่าของชื่อสมาชิกที่ส่งไป ก็ต้องอยูตำแหน่งที่ 2 ให้ตรงกันด้วย


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


เพราะฉะนั้นเวลาเพิ่มข้อมูลในฐานข้อมูล  ก็ไม่จำเป็นต้องใส่ค่าใด ๆ เข้าไป  จึงใส่แทนด้วยคำว่า  "NULL"   ตามตัวอย่างค่ะ


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


ลองทำกันดูนะคะ  เขียน PHP ไม่อยากอย่างที่คิดค่ะ  


วันนี้คงพอแค่นี้ก่อน  ติดตามตอนต่อไปนะคะ     อ้อ .... อ่านไปอ่านมา ก้อยลืมใส่ไปอีกตัวนึง คือ Password เอาไว้บทหน้าแล้วกันนะคะ  เขียนไป ก็ capture ไป  แก้ไม่ทันแล้ว... ^^




     Download โค้ดตัวอย่าง

To view rest of this section, please login or register..
ในการดูส่วนที่เหลือกรุณาเข้าสู่ระบบหรือลงทะเบียน..
Tags:
Share
 

Comments  

 
0 #13 ting 2012-03-06 02:32
เยี่ยม
Quote
 
 
0 #12 สุ 2012-02-18 11:02
:lol: ขอบคุนมาค่ะอ่าน แล้วเข้าใจง่าย
Quote
 
 
0 #11 bank 2012-02-14 21:11
ขอบคุนมากคับ :P
Quote
 
 
0 #10 thavee 2012-02-08 19:10
ว้าง่ายจังเลย ชอบๆอิอิ :lol:
Quote
 
 
+1 #9 replica watches 2011-10-20 08:07
watches replica
Quote
 
 
0 #8 winself 2011-08-21 13:30
ขอบคุณครับพี่
Quote
 
 
0 #7 san 2011-07-02 20:31
ขอบคุณมากๆครับ ท่านผู้มีจิตใจแ บ่งปัน
Quote
 
 
0 #6 amp 2011-06-28 11:35
ขอบคุณค่ะ
Quote
 
 
0 #5 Catadog 2011-05-06 19:18
อ่านเข้าใจง่ายด ีครับ
เดี๋ยวจะไล่อ่าน ให้หมดครับ

ทีแรกว่าจะไม่อ่ าน
อ่านหลายเว็บแล้ ้ว อธิบายเข้าใจยาก
แต่เว็บนี้อ่านง ่ายดี
พออ่านสักหน่อย เออ เจ๋งดี :-)
Quote
 
 
0 #4 เว็บมาสเตอร์ 2011-04-08 10:01
Quoting Bank:
ขอบคุณสำหรับข้อ มูลดีๆ นะครับ
ผมเพิ่งเป็นมือใ หม่นะครับ ยังไงต้องรบกวนเ ยอะครับ

ผมส่งสัยฐานข้อม ูลโดยใช้ phpMyAdmin
เราต้องสร้างใน host เราใช่ไหมครับ
หรือทำในไหนหรอค รับ


ใช่ค่ะ เราต้องจำลอง host ในเครื่องของเรา ค่ะ ลองดูวิธีติดตั้ งในบทความนี้นะค ะ http://www.ban-goi.com/install-appserv-php.html
Quote
 

Add comment


Security code
Refresh

หน้าหลัก บทเรียน PHP PHP - ทำเว็บด้วย PHP กันเถอะ ตอนที่ 1 การทำระบบสมาชิก

โปรแกรม Download

ของฟรี ไม่เสียตัง

Joomla template modify by Ban-Goi.com