เขียน PHP ด้วยการค้นหาข้อมูล MySQL โดยใช้เทคนิค Ajax

Posted by Onmobile 02/04/2015 in Ajax

บทความนี้แนะนำเกี่ยวกับการค้นหาข้อมูล MySQL แล้วดึงข้อมูลออกมาโชว์ไม่ต้อง Refresh โดยใช้เทคนิค AJAX ในการทำงาน โดยตัวอย่าง source code เป็นตัวอย่างแบบง่ายๆ สามารถเข้าใจได้ไม่ยาก และนำไปประยุกต์ใช้ได้ทันที

demo ทดสอบคลิกที่นี้

ดาวน์โหลดไฟล์ทั้งหมด ที่นี้

1. สร้างตารางและ import ข้อมูล

CREATE TABLE IF NOT EXISTS `items` (
`id` int(11) NOT NULL,
`codename` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
`itemname` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
`detail` text COLLATE utf8_unicode_ci NOT NULL,
`unit` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
`price` decimal(10,2) NOT NULL,
`img` varchar(100) COLLATE utf8_unicode_ci NOT NULL DEFAULT 'noimage.jpg',
`created` datetime NOT NULL DEFAULT '0000-00-00 00:00:00',
`modified` datetime NOT NULL DEFAULT '0000-00-00 00:00:00',
`created_by` int(11) NOT NULL,
`modified_by` int(11) NOT NULL,
`status` tinyint(1) NOT NULL DEFAULT '1',
`item_type_id` int(11) NOT NULL
) ENGINE=MyISAM AUTO_INCREMENT=12 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
INSERT INTO `items` (`id`, `codename`, `itemname`, `detail`, `unit`, `price`, `img`, `created`, `modified`, `created_by`, `modified_by`, `status`, `item_type_id`) VALUES
(2, 'CM00002', 'iPhone 6 Plus', '', 'เครื่อง', '25000.00', 'ecimage.jpg', '2015-03-30 18:38:43', '2015-03-30 18:38:43', 1, 1, 1, 6),
(3, 'CM00003', 'Macbook Pro mini', '', 'เครื่อง', '45000.00', 'ecimage.jpg', '2015-03-30 18:39:53', '2015-03-30 18:39:53', 1, 1, 1, 1),
(4, 'CM00004', 'Macbook Pro 4', '', 'เครื่อง', '60400.00', 'ecimage.jpg', '2015-03-30 18:40:33', '2015-03-30 18:40:33', 1, 1, 1, 1),
(5, 'CM00005', 'กระดาษ A4', '', 'รีม', '120.00', 'ecimage.jpg', '2015-03-30 18:41:14', '2015-03-30 18:41:14', 1, 1, 1, 2),
(6, 'CM00006', 'ปากกา', '', 'แท่ง', '5.00', 'ecimage.jpg', '2015-03-30 18:41:47', '2015-03-30 18:41:47', 1, 1, 1, 2),
(7, 'CM00007', 'ดินสอ', '', 'แท่ง', '1.00', 'ecimage.jpg', '2015-03-30 18:42:28', '2015-03-30 18:42:28', 1, 1, 1, 2),
(8, 'CM00008', 'ยางลบ', '', 'ก้อน', '2.00', 'ecimage.jpg', '2015-03-30 18:43:04', '2015-03-30 18:43:04', 1, 1, 1, 2),
(9, 'CM00009', 'Epson T320 Printer Laser', '', 'เครื่อง', '2300.00', 'ecimage.jpg', '2015-03-30 18:45:48', '2015-03-30 18:45:48', 1, 1, 1, 1),
(10, 'CM00001', 'Lenovo ThinkPad E203', '', 'เครื่อง', '21000.00', 'ecimage.jpg', '2015-03-30 18:47:38', '2015-03-30 18:47:38', 1, 1, 1, 1),
(11, 'CM00010', 'Microsoft Lumia 1043', '', 'เครื่อง', '23000.00', 'ecimage.jpg', '2015-03-30 18:49:22', '2015-03-30 18:49:22', 1, 1, 1, 6);
ALTER TABLE `items`
ADD PRIMARY KEY (`id`);
ALTER TABLE `items`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=12;

CREATE TABLE IF NOT EXISTS `items` (

`id` int(11) NOT NULL,

`codename` varchar(50) COLLATE utf8_unicode_ci NOT NULL,

`itemname` varchar(50) COLLATE utf8_unicode_ci NOT NULL,

`detail` text COLLATE utf8_unicode_ci NOT NULL,

`unit` varchar(50) COLLATE utf8_unicode_ci NOT NULL,

`price` decimal(10,2) NOT NULL,

`img` varchar(100) COLLATE utf8_unicode_ci NOT NULL DEFAULT 'noimage.jpg',

`created` datetime NOT NULL DEFAULT '0000-00-00 00:00:00',

`modified` datetime NOT NULL DEFAULT '0000-00-00 00:00:00',

`created_by` int(11) NOT NULL,

`modified_by` int(11) NOT NULL,

`status` tinyint(1) NOT NULL DEFAULT '1',

`item_type_id` int(11) NOT NULL

) ENGINE=MyISAM AUTO_INCREMENT=12 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

INSERT INTO `items` (`id`, `codename`, `itemname`, `detail`, `unit`, `price`, `img`, `created`, `modified`, `created_by`, `modified_by`, `status`, `item_type_id`) VALUES

(2, 'CM00002', 'iPhone 6 Plus', '', 'เครื่อง', '25000.00', 'ecimage.jpg', '2015-03-30 18:38:43', '2015-03-30 18:38:43', 1, 1, 1, 6),

(3, 'CM00003', 'Macbook Pro mini', '', 'เครื่อง', '45000.00', 'ecimage.jpg', '2015-03-30 18:39:53', '2015-03-30 18:39:53', 1, 1, 1, 1),

(4, 'CM00004', 'Macbook Pro 4', '', 'เครื่อง', '60400.00', 'ecimage.jpg', '2015-03-30 18:40:33', '2015-03-30 18:40:33', 1, 1, 1, 1),

(5, 'CM00005', 'กระดาษ A4', '', 'รีม', '120.00', 'ecimage.jpg', '2015-03-30 18:41:14', '2015-03-30 18:41:14', 1, 1, 1, 2),

(6, 'CM00006', 'ปากกา', '', 'แท่ง', '5.00', 'ecimage.jpg', '2015-03-30 18:41:47', '2015-03-30 18:41:47', 1, 1, 1, 2),

(7, 'CM00007', 'ดินสอ', '', 'แท่ง', '1.00', 'ecimage.jpg', '2015-03-30 18:42:28', '2015-03-30 18:42:28', 1, 1, 1, 2),

(8, 'CM00008', 'ยางลบ', '', 'ก้อน', '2.00', 'ecimage.jpg', '2015-03-30 18:43:04', '2015-03-30 18:43:04', 1, 1, 1, 2),

(9, 'CM00009', 'Epson T320 Printer Laser', '', 'เครื่อง', '2300.00', 'ecimage.jpg', '2015-03-30 18:45:48', '2015-03-30 18:45:48', 1, 1, 1, 1),

(10, 'CM00001', 'Lenovo ThinkPad E203', '', 'เครื่อง', '21000.00', 'ecimage.jpg', '2015-03-30 18:47:38', '2015-03-30 18:47:38', 1, 1, 1, 1),

(11, 'CM00010', 'Microsoft Lumia 1043', '', 'เครื่อง', '23000.00', 'ecimage.jpg', '2015-03-30 18:49:22', '2015-03-30 18:49:22', 1, 1, 1, 6);

ALTER TABLE `items`

ADD PRIMARY KEY (`id`);

ALTER TABLE `items`

MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=12;

2. สร้างไฟล์ connect.php แล้วนำ code ด้านล่างนี้ใส่ลงไป

<?php
$host = 'localhost';
$user = 'root';
$password = '';
$database = 'equipment';
mysql_connect($host, $user, $password);
mysql_select_db($database);
mysql_query("SET NAMES UTF8");

<?php

$host = 'localhost';

$user = 'root';

$password = '';

$database = 'equipment';

mysql_connect($host, $user, $password);

mysql_select_db($database);

mysql_query("SET NAMES UTF8");

3. สร้างไฟล์ index.php แล้วนำ code? ด้านล่างใส่

<!DOCTYPE html>
<?php
include 'connect.php';
?>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ค้นหาข้อมูล : itoffside.com</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<style>
body{
margin-top: 20px;
}
.loading{
background-image: url("ajax-loader.gif");
background-repeat: no-repeat;
display: none;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<form class="form-inline" name="searchform" id="searchform">
<div class="form-group">
<label for="textsearch" >ชื่อสินค้า</label>
<input type="text" name="itemname" id="itemname" class="form-control" placeholder="ข้อความ คำค้นหา!" autocomplete="off">
</div>
<button type="button" class="btn btn-primary" id="btnSearch">
<span class="glyphicon glyphicon-search"></span>
ค้นหา
</button>
</form>
</div>
</div>
<div class="loading"></div>
<div class="row" id="list-data" style="margin-top: 10px;">
</div>
</div>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnSearch").click(function () {
$.ajax({
url: "search.php",
type: "post",
data: {itemname: $("#itemname").val()},
beforeSend: function () {
$(".loading").show();
},
complete: function () {
$(".loading").hide();
},
success: function (data) {
$("#list-data").html(data);
}
});
});
$("#searchform").on("keyup keypress",function(e){
var code = e.keycode || e.which;
if(code==13){
$("#btnSearch").click();
return false;
}
});
});
</script>
</body>
</html>

<!DOCTYPE html>

<?php

include 'connect.php';

<head>

<title>ค้นหาข้อมูล : itoffside.com</title>

<style>

body{

margin-top: 20px;

}

.loading{

background-image: url("ajax-loader.gif");

background-repeat: no-repeat;

display: none;

height: 100px;

width: 100px;

}

</style>

</head>

<body>

<label for="textsearch" >ชื่อสินค้า</label>

</div>

ค้นหา

</button>

</form>

</div>

</div>

$(function () {

$("#btnSearch").click(function () {

$.ajax({

url: "search.php",

type: "post",

data: {itemname: $("#itemname").val()},

beforeSend: function () {

$(".loading").show();

complete: function () {

$(".loading").hide();

success: function (data) {

$("#list-data").html(data);

}

});

$("#searchform").on("keyup keypress",function(e){

var code = e.keycode || e.which;

if(code==13){

$("#btnSearch").click();

return false;

}

});

</script>

</body>

</html>

การทำงานของไฟล์ index.php คือแสดงหน้าจอการกรอกคำค้นหา เมื่อมีการใส่ข้อมูลค้นหา ระบบจะดึกข้อมูลจาก serach.php มาแสดงโดยใช้เทคนิคของ AJAX นั้นเอง ซึ่งเมื่อมีการคลิกปุ่มค้นหา javascript ทำงานโดยเรียกไฟล์ search.php ซึ่งไฟล์ search.php เป็นไฟล์ที่ดึงข้อมูลจากฐานข้อมูล เมื่อไฟล์ search.php ดึงข้อมูลมาเรียบร้อยแล้วจะส่งค่าข้อมูลกลับไปให้กับไฟล์ index.php โดยใช้ $.ajax

4. สร้างไฟล์ search.php

<?php
include 'connect.php';
$sql = "select * from items where itemname like '%{$_POST['itemname']}%'";
$query = mysql_query($sql);
?>
<div class="col-md-12">
<table class="table table-bordered">
<thead>
<tr>
<th>ลำดับ</th>
<th>รหัสสินค้า</th>
<th>ชื่อสินค้า</th>
<th>ราคาสินค้า</th>
<th>หน่วยนับ</th>
</tr>
</thead>
<tbody>
<?php $i=1; while ($result = mysql_fetch_assoc($query)) { ?>
<tr>
<td><?php echo $i;?></td>
<td><?php echo $result['codename'];?></td>
<td><?php echo $result['itemname'];?></td>
<td><?php echo number_format($result['price']);?></td>
<td><?php echo $result['unit'];?></td>
</tr>
<?php $i++; } ?>
</tbody>
</table>
</div>

<?php

include 'connect.php';

$sql = "select * from items where itemname like '%{$_POST['itemname']}%'";

$query = mysql_query($sql);

<thead>

<tr>

<th>ลำดับ</th>

<th>รหัสสินค้า</th>

<th>ชื่อสินค้า</th>

<th>ราคาสินค้า</th>

<th>หน่วยนับ</th>

</tr>

</thead>

<tbody>

<?php $i=1; while ($result = mysql_fetch_assoc($query)) { ?>

<tr>

</tr>

<?php $i++; } ?>

</tbody>

</table>

</div>

5. ผลลัพธ์

จบแล้วสำหรับบทความนี้หากผู้อ่านมีคำถามสามารถเขียนคำถามไว้ใต้ Comment เลยครับ

About the Author: Onmobile

โปรแกรมเมอร์

This site uses Akismet to reduce spam. Learn how your comment data is processed.

32 Comments

Oldest

Newest Most Voted

Inline Feedbacks

View all comments

manee

9 years ago

ถ้าอยาก search แบบ dropdown list + คำค้นด้วย ต้องแก้ไขอย่างไรค่ะ

Onmobile

Author

Reply to manee

9 years ago

javascript ตอน event คลิกเลือก dropdown list เสร็จแล้วให้ดึงข้อมูล ทำลักษณะคล้าย text box เลยครับ

artzja

9 years ago

ถ้าอยาก search แบบ radio button check + คำค้นด้วย ต้องแก้ไขเพิ่มเติม code อย่างไรบ้างครับ มีตัวอย่างมั้ยครับ

Onmobile

Author

Reply to artzja

9 years ago

เพิ่ม radio และเพิ่มคำสั่งในการค้นหาในไฟล์ search.php ไปครับ

Mint

8 years ago

ทำแล้วแต่ไม่แสดงผลน่ะค่ะ มันทำในฟังก์ชัน sucess แต่ไม่ยอมโชว์ข้อมูลจากไฟล์ search.php

Onmobile

Author

Reply to Mint

8 years ago

หมายถึงว่า ทำแล้วไม่แสดงข้อมูลเหรอครับ ลอง F12 เพื่อดีบั๊กดูครับ

M_Project

8 years ago

ถ้าผมอยาก ให้ ค้นหาได้หลาย ฟิลด์ ต้องทำยังไง ครับ ??

ฺBHC

Reply to M_Project

8 years ago

select * from items where itemname1 like ‘%{$_POST[‘itemname’]}%’ or itemname2 like ‘%{$_POST[‘itemname’]}%’

wichai

7 years ago

select * from items where itemname1 like ‘%{$_POST[‘itemname’]}%’ or itemname2 like ‘%{$_POST[‘itemname’]}%’

ลองแล้วไม่ได้คับ กรณีต้องการค้นหาหลายๆ ฟิวส์คับ

deeg

7 years ago

ถ้าจะแบ่งหน้าต่อทำยังไงครับ

Onmobile

Author

Reply to deeg

7 years ago

ดูเพิ่มเติมที่ลิงค์นี้ครับ
https://www.itoffside.com/php-pagination-example-using-mysqli-database/

Jump

7 years ago

รบกวนหน่อยครับ ถ้าจะคนหาหลายฟิลดิ์อ่ะครับ ต้องเขียนประมาณไหนอ่ะครับ
SELECT tbl_stud.stud_name, tbl_stud.stud_nickname, tbl_timestud.time_wrktime, tbl_timestud.time_outtime, tbl_stud.stud_id FROM tbl_stud, tbl_timestud WHERE tbl_timestud.stud_id=tbl_stud.stud_id and tbl_stud.stud_nickname or tbl_stud.stud_name like ‘%{$_POST[‘itemname’]}%’;
อันนี้ คือที่ผมเขียนไว้อ่ะครับ แต่มันแสดงข้อมูลซ้อนกันไปมา จาก 10 เพิ่มเป็น 30

Jump

Reply to Jump

7 years ago

เป็น ดาต้าเบส ของผมเองนะครับ

Onmobile

Author

Reply to Jump

7 years ago

ใช้เงื่อนไข or ครับ ตาม ตย. ด้านล่าง
select * from tbname where name like '%{$data}%' or email like '%{$data}%' tel like '%{$data}%'

Jump

Reply to Onmobile

7 years ago

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

Jump

Reply to Onmobile

7 years ago

รบกวนอีกนิดนึงนะครับ พอดีผมอยากจะให้แสดงตารางก่อนกดค้นกาด้วย ต้องทำยังไงอ่ะครับ

Onmobile

Author

Reply to Jump

7 years ago

คุณต้อง เขียน $.ajax({...}); ไว้ในฟังก์ชั่น แล้ว call function ตอนโหลด กับ ตอนคลิกปุ่ม ครับ

AOD

7 years ago

text ตรวจสอบค่าว่างไม่ได้ครับ ไม่กรอกคำค้นหา กด submit มันแสดงข้อมูลทั้งหมดเลย แก้ยังไงให้ครับให้ text ไม่รับค่าว่าง

หนึ่ง

6 years ago

ถ้า search หลาย input ต้องทำยังไงอ่ะครับ ? ขอความกรุณาด้วยครับ!

king

6 years ago

Fatal error: Uncaught Error: Call to undefined function mysql_query() in C:\xampp\htdocs\databind\search.php:4 Stack trace: #0 {main} thrown in C:\xampp\htdocs\databind\search.php on line 4
แก้ยังไง

Somsak

6 years ago

แสดงรายการมาแล้ว กดเลือกอย่างไรครับ

Onmobile

Author

Reply to Somsak

6 years ago

อย่างไรครับไม่เข้าใจ คำถาม

kru

6 years ago

สามารถแสดงผลตาม “คำ” ที่ต้องการค้นหาได้แล้วครับ แต่หลังจากที่ผมค้นหาได้แล้ว ผมต้องการให้สามารถคลิกที่ข้อความชื่อของคำที่ค้นหาไปหาตามลิ้งที่เราต้องการได้ไหมอ่ะครับ ขอบคุณครับ

Onmobile

Author

Reply to kru

6 years ago

คุณต้องทำ คำค้น กับ ลิงค์ ให้มีความสัมพันธ์กันก่อนครับ ถึงจะทำได้

ธีระชัย ใจใส

5 years ago

ขอบคุณครับ ราบรื่น ^^

Jeng

5 years ago

search ตอนนี้ เปลี่ยนเป็น mysqli รันแล้ว error ครับ

Onmobile

Author

Reply to Jeng

5 years ago

ตอน query select ต้องเปลี่ยนฟังก์ชั่นด้วยครับ

่jeng

Reply to Onmobile

5 years ago

รบกวนท่านชี้แนะเพิ่มเติม ครับ ลองทำแล้วครับ มือใหม่สด ๆ

jeng

Reply to Onmobile

5 years ago

รบกวนชี้แนะเพิ่มเติมครับ

jeng

Reply to jeng

5 years ago

รบกวนชีแนะ search.php แบบ Mysqli ทีครับ ขอบคุณครับ

aon

5 years ago

ผมติดตรง connect.php บรรทัดที่ 7 อ่าครับ
ตรงหน้า
<?php
$host = 'localhost';
$user = 'root';
$password = '';
$database = 'equipment';

mysql_connect($host, $user, $password);
mysql_select_db($database);
mysql_query("SET NAMES UTF8");

-1

Onmobile

Author

Reply to aon

5 years ago

เปลี่ยนมาใช้ฟังก์ชั่น mysqli ครับ

itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี

ข้อมูลข่าวสารและเรื่องราวบนโลกของไอทีที่ ล้ำหน้า พร้อมสาระการเขียนโปรแกรมคอมพิวเตอร์

เขียน PHP ด้วยการค้นหาข้อมูล MySQL โดยใช้เทคนิค Ajax

About the Author: Onmobile

You May Also Like

PHP Workshop Register+Login ระบบสมัครสมาชิก+Login [Full Course] สอนละเอียด ฟรี!

PHP Workshop Shoppingcart จัดการสินค้า, ตะกร้าสินค้า, สั่งซื้อสินค้า [Full Course] สอนละเอียด ฟรี!

About the Author: Onmobile