ข้ามไปยังเนื้อหาหลัก
itOffside
Onmobile อ่าน 7 นาที 32 ความเห็น

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

Ajax
เขียน PHP ด้วยการค้นหาข้อมูล MySQL โดยใช้เทคนิค 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;

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");

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>

การทำงานของไฟล์ 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>

5. ผลลัพธ์
ajax-php

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

#php #php5 #MySQL #database #php workshop #ajax #jquery

แชร์บทความนี้

แชร์ไปยัง Facebook แชร์ไปยัง X แชร์ไปยัง LINE
Onmobile

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

ความเห็น (32)

  • manee
    ถ้าอยาก search แบบ dropdown list + คำค้นด้วย ต้องแก้ไขอย่างไรค่ะ
    • Onmobile ผู้เขียน
      javascript ตอน event คลิกเลือก dropdown list เสร็จแล้วให้ดึงข้อมูล ทำลักษณะคล้าย text box เลยครับ
  • artzja
    ถ้าอยาก search แบบ radio button check + คำค้นด้วย ต้องแก้ไขเพิ่มเติม code อย่างไรบ้างครับ มีตัวอย่างมั้ยครับ
    • Onmobile ผู้เขียน
      เพิ่ม radio และเพิ่มคำสั่งในการค้นหาในไฟล์ search.php ไปครับ
  • Mint
    ทำแล้วแต่ไม่แสดงผลน่ะค่ะ มันทำในฟังก์ชัน sucess แต่ไม่ยอมโชว์ข้อมูลจากไฟล์ search.php
    • Onmobile ผู้เขียน
      หมายถึงว่า ทำแล้วไม่แสดงข้อมูลเหรอครับ ลอง F12 เพื่อดีบั๊กดูครับ
  • M_Project
    ถ้าผมอยาก ให้ ค้นหาได้หลาย ฟิลด์ ต้องทำยังไง ครับ ??
    • ฺBHC
      select * from items where itemname1 like '%{$_POST['itemname']}%' or itemname2 like '%{$_POST['itemname']}%'
  • wichai
    select * from items where itemname1 like ‘%{$_POST[‘itemname’]}%’ or itemname2 like ‘%{$_POST[‘itemname’]}%’ ลองแล้วไม่ได้คับ กรณีต้องการค้นหาหลายๆ ฟิวส์คับ
  • deeg
    ถ้าจะแบ่งหน้าต่อทำยังไงครับ
    • Onmobile ผู้เขียน
      ดูเพิ่มเติมที่ลิงค์นี้ครับ https://www.itoffside.com/php-pagination-example-using-mysqli-database/
  • Jump
    รบกวนหน่อยครับ ถ้าจะคนหาหลายฟิลดิ์อ่ะครับ ต้องเขียนประมาณไหนอ่ะครับ 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
      เป็น ดาต้าเบส ของผมเองนะครับ
    • Onmobile ผู้เขียน
      ใช้เงื่อนไข or ครับ ตาม ตย. ด้านล่าง <code>select * from tbname where name like '%{$data}%' or email like '%{$data}%' tel like '%{$data}%'</code>
      • Jump
        รบกวนอีกนิดนึงนะครับ ถ้าจะให้มันแสดงตารางข้อมูลไว้ก่อนกดค้นหาได้มั้ยครับ เพราะปกติ จะไม่มีตารางแสดงอยู่ก่อน ผมอยากให้ตารางมันแสดงอยู่ก่อนด้วยอ่ะครับ
      • Jump
        รบกวนอีกนิดนึงนะครับ พอดีผมอยากจะให้แสดงตารางก่อนกดค้นกาด้วย ต้องทำยังไงอ่ะครับ
        • Onmobile ผู้เขียน
          คุณต้อง เขียน <code>$.ajax({...});</code> ไว้ในฟังก์ชั่น แล้ว call function ตอนโหลด กับ ตอนคลิกปุ่ม ครับ
  • AOD
    text ตรวจสอบค่าว่างไม่ได้ครับ ไม่กรอกคำค้นหา กด submit มันแสดงข้อมูลทั้งหมดเลย แก้ยังไงให้ครับให้ text ไม่รับค่าว่าง
  • หนึ่ง
    ถ้า search หลาย input ต้องทำยังไงอ่ะครับ ? ขอความกรุณาด้วยครับ!
  • king
    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
    แสดงรายการมาแล้ว กดเลือกอย่างไรครับ
    • Onmobile ผู้เขียน
      อย่างไรครับไม่เข้าใจ คำถาม
  • kru
    สามารถแสดงผลตาม "คำ" ที่ต้องการค้นหาได้แล้วครับ แต่หลังจากที่ผมค้นหาได้แล้ว ผมต้องการให้สามารถคลิกที่ข้อความชื่อของคำที่ค้นหาไปหาตามลิ้งที่เราต้องการได้ไหมอ่ะครับ ขอบคุณครับ
    • Onmobile ผู้เขียน
      คุณต้องทำ คำค้น กับ ลิงค์ ให้มีความสัมพันธ์กันก่อนครับ ถึงจะทำได้
  • Jeng
    search ตอนนี้ เปลี่ยนเป็น mysqli รันแล้ว error ครับ
    • Onmobile ผู้เขียน
      ตอน query select ต้องเปลี่ยนฟังก์ชั่นด้วยครับ
      • ่jeng
        รบกวนท่านชี้แนะเพิ่มเติม ครับ ลองทำแล้วครับ มือใหม่สด ๆ
      • jeng
        รบกวนชี้แนะเพิ่มเติมครับ
        • jeng
          รบกวนชีแนะ search.php แบบ Mysqli ทีครับ ขอบคุณครับ
  • aon
    ผมติดตรง connect.php บรรทัดที่ 7 อ่าครับ ตรงหน้า &lt;?php $host = &#039;localhost&#039;; $user = &#039;root&#039;; $password = &#039;&#039;; $database = &#039;equipment&#039;; mysql_connect($host, $user, $password); mysql_select_db($database); mysql_query(&quot;SET NAMES UTF8&quot;);
    • Onmobile ผู้เขียน
      เปลี่ยนมาใช้ฟังก์ชั่น mysqli ครับ

แสดงความเห็น

ไม่แสดงบนหน้าเว็บ

บทความที่เกี่ยวข้อง