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

เป้าหมายที่เราควรจะได้ในโปรเจ็กนี้ คือ

  • รู้ว่าง AJAX ของ jQuery นั้นอย่างกะปอกกล้วย
  • รู้จักคำสั่ง $.post() ของ jquery
  • รู้จัก method live ของ jquery
  • รู้จักคำสั่ง remove() ของ jquery
  • รู้จักคำสั่ง append() ของ jquery

Live Demo | Download Source

โครงสร้างฐานข้อมูล

สร้างฐานข้อมูลขึ้นมาสักตัว ชื่อ db_todo ก็ได้ แล้วก็สร้างตารางขึ้นมา 1 ตาราง มี 2 ฟิลด์พอ

-- ----------------------------
-- Table structure for tbl_todo
-- ----------------------------
CREATE TABLE `tbl_todo` (
  `todo_id` BIGINT(20) UNSIGNED NOT NULL AUTO_INCREMENT,
  `todo_detail` text,
  PRIMARY KEY  (`todo_id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;


ฟิลด์แรก todo_id เป็นไพรมารีคีย์ auto_increment ฟิลด์ที่ 2 todo_detail เป็น text ไว้เก็บรายการ

สร้างหน้าที่ใช้เพิ่ม Todo ลงฐานข้อมูล add_todo.php

<?php
//+ ส่วนการเชื่อมต่อฐานข้อมูล
$hostname_connection = "localhost";
$database_connection = "db_todo";
$username_connection = "root";
$password_connection = "";
$connection = mysql_pconnect($hostname_connection, $username_connection, $password_connection) or trigger_error(mysql_error(),E_USER_ERROR);
mysql_query("SET NAMES UTF8"); 
 
// คำสั่ง SQL	
$insertSQL = sprintf("INSERT INTO tbl_todo (todo_detail) VALUES ('%s')",$_POST['todo_detail'] );
 
//+ execute คำสั่ง SQL ที่ใช้เพิ่มข้อมูลซะ
mysql_select_db($database_connection, $connection);
$Result1 = mysql_query($insertSQL, $connection) or die(mysql_error());
 
//+ ส่ง id ของแถวที่เพิ่งเพิ่มเข้าไป ไปให้ AJAX
echo mysql_insert_id();
?>

หน้านี้ทำเตรียมไว้ให้ AJAX ส่งข้อมูลเข้ามาบันทึก

สร้างหน้าที่ใช้ลบ Todo ออกจากฐานข้อมูล delete_todo.php

<?php
//+ ส่วนการเชื่อมต่อฐานข้อมูล
$hostname_connection = "localhost";
$database_connection = "db_todo";
$username_connection = "root";
$password_connection = "";
$connection = mysql_pconnect($hostname_connection, $username_connection, $password_connection) or trigger_error(mysql_error(),E_USER_ERROR);
mysql_query("SET NAMES UTF8"); 
 
 
//+ คำสั่งลบ Todo ของเรา ซึ่งเราจะให้ AJAX ส่งไพรมารีคีย์มาให้ทางฟอร์ม
$deleteSQL = sprintf("DELETE FROM tbl_todo WHERE todo_id=%s", $_POST['todo_id'] );
 
mysql_select_db($database_connection, $connection);
$Result1 = mysql_query($deleteSQL, $connection) or die(mysql_error());
 
echo 'Complete';
?>

ทำเตรียมไว้ให้ AJAX มาเรียกใช้ โดยให้ AJAX ส่ง todo_id ที่จะลบทิ้งผ่านฟอร์มมาให้

สร้างหน้า Todo

หน้านี้จะมีฟอร์มซ่อนไว้ 1 ฟอร์ม เมื่อกดปุ่มเพิ่มก็ให้ฟอร์มแสดงออกมา พอ user ป้อนข้อมูลเสร็จแล้วกดปุ่ม Save เราก็ให้ AJAX ส่งข้อมูลในฟอร์มไปที่หน้า add_todo.php โดยในหน้า add_todo.php จะส่ง id ของเรคคอร์ดที่เพิ่งเพิ่มเข้าไป กลับมา และเราจะเตรียมปุ่ม Cancel ไว้ในฟอร์มด้วย เผื่อท่านผู้ใช้ไม่อยากจะเพิ่มข้อมูลแล้ว จะได้กด เราก็แค่ ซ่อนฟอร์มซะ

ทีนี้ถ้า user ติ๊กเครื่องหมายถูกในเช็กบ้อกหน้ารายการ เราก็ให้ AJAX ส่ง todo_id (ซึ่งเก็บอยู่ใน value ของเช็กบ็อก) ไปให้หน้า delete_todo.php เพื่อทำการลบทิ้ง

โค้ด

<!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=utf-8" />
<title>Todo List</title>
<!-- โหลด jQuery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 
	//+ เมื่อหน้านี้รันขึ้นมาปุ๊บ ซ่อนฟอร์มป้อนข้อมูลไว้ก่อน
	$('#panel').hide();
 
	//+ user คลิกปุ่ม  Add โชว์ฟอร์ม
	$('#add').click(function(){
 
		$('#panel').show();
 
	});
 
	//+ user คลิกปุ่ม  Cancel ซ่อนฟอร์มซะ
	$('#cancel').click(function(){
 
		$('#panel').hide();
 
	});
 
	//+ เมื่อ user คลิกปุ่ม Save
	$('#save').click(function(){
 
		var post_url = 'add_todo.php';
		var data_set = { todo_detail: $('#todo_detail').val() } ;
 
		//+ คำสั่ง AJAX  $.post( url , data , callback )
		$.post( 
			post_url , 
			data_set , 
			function(resp){
					//+ resp คือข้อมูลที่ส่งกลับมาจาก Server ซึ่งก็ได้แก่ id ของเรคคอร์ดที่เพิ่งเพิ่มเข้าไป
 
					//+ เมื่อเซิฟเวอร์ตอบกลับมา เราก็แสดงผลในหน้าเว็บ ในแท็ก ol todo_list
					$('#todo_list').prepend('<li><input name="todo_id[]" type="checkbox" value="'+resp+'"  />'+$('#todo_detail').val()+ '</li>');
 
					//+ ซ่อนฟอร์มซะด้วย
					$('#panel').hide();
 
					//+ แจ้งให้ยูสเซ่อร์ทราบว่าทุกอย่างไปได้สวย
					alert( 'บันทึกเรียบร้อย' );
 
			  }
 
		);
 
	});
 
 
	//+ เมื่อ user ติ๊กที่ แท็ก input ที่มีชื่อขึ้นต้นด้วย todo_id ซึ่งมันก็คือ checkbox หน้ารายการ
	//+ ท่านจะเห็นว่าผมใช้ method live ของ jQuery
	//+ อ่านเกี่ยวกับ live ได้ที่เว็บคุณตี๋ http://www.jquerytips.com/2008/08/15/jquery-livequery/
	$('input[name^=todo_id]').live( 'click' , function(){
 
		var post_url = 'delete_todo.php';
		var data_set = { todo_id: $('input[name^=todo_id]:checked').val() } ;
 
		$.post( 
			post_url , 
			data_set , 
			function(resp){
					//+ $('input[name^=todo_id]:checked').parent() คือแท็ก li 
					//+ remove มันทิ้งซะ
					$('input[name^=todo_id]:checked').parent().remove();
 
					//+ แจ้งให้ยูสเซ่อร์ทราบว่าทุกอย่างไปได้สวย
					alert( 'ลบเรียบร้อย' );
 
			}
		);
 
	});
 
 
})
 
</script>
</head>
<body>
<p>
  <input type="button" name="add" id="add" value="Add" />
</p>
<div id="panel">
  <textarea name="todo_detail" id="todo_detail" cols="45" rows="5"></textarea>
  <p>
    <input type="submit" name="save" id="save" value="Save" />
    <input type="button" name="cancel" id="cancel" value="Cancel" />
  </p>
</div>
<ol id="todo_list">
</ol>
</body>
</html>
ajax jQuery jQuery tutorial post todo list
Avatar

วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย

Programmer, Blogger

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