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

Jquery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , Jquery ม Ajax

Moderator: mindphp, ผู้ดูแลกระดาน

abdkode
PHP Super Member
PHP Super Member
โพสต์: 362
ลงทะเบียนเมื่อ: 07/01/2019 9:56 am

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

โพสต์โดย abdkode » 05/04/2019 3:44 pm

การค้นหาข้อมูลเป็นfeatureหนึ่งที่ต้องมีเกือบทุกเว็บ เพื่อให้ผู้เข้าชมเว็บไซต่ได้รับข้อมูลโดยตรงตามที่เขาต้องการเพียงแค่ใช้ช่องค้นหาครับ
บทความนี้แนะนำเกี่ยวกับการค้นหาข้อมูล MySQL แล้วดึงข้อมูลออกมาโชว์ไม่ต้อง Refresh โดยใช้เทคนิค AJAX ในการทำงาน และใช้ป้อปอัพ modal ของ bootstrap4 สร้างความน่าสนใจมากขึ้น โดยตัวอย่าง source code เป็นตัวอย่างแบบง่ายๆ สามารถเข้าใจได้ไม่ยาก และนำไปประยุกต์ใช้ได้ทันที
search modal2.jpg
search modal2.jpg (18.46 KiB) เปิดดู 815 ครั้ง

ก่อนอื่นเรามาสร้าง modal โดยใช้ bootstrap ก่อน โดยการสร้างไฟล์ชื่อ index.php และใช้โค้ดดังนี้

โค้ด: เลือกทั้งหมด

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   </head>
   <body>
   
      <div class="d-flex justify-content-center align-items-center" style="height:100px;">
         <!-- Button trigger modal -->
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
              ค้นหาบางอย่าง
            </button>
         </div>   
      </div>   
      </div>
      <!-- Modal -->
      <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
         <div class="modal-content">
           <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLongTitle">Search Somrthing..by Mindphp</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
           </div>
           <div class="modal-body">
            <input type="text" class="form-control" id="search" placeholder="ค้นหาอะไรดี">
            <hr>
            <div id="display"></div>
           </div>
           <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
           </div>
         </div>
        </div>
      </div>
   </body>
</html>   

เขียนโค้ด Jquery โดยกำหนดไว้ว่า เมื่อมีการใส่ข้อมูลในช่องค้นหา ระบบจะดึงข้อมูลจาก serach.php มาแสดงทันที โดยใช้เทคนิคของ AJAX

โค้ด: เลือกทั้งหมด

$(document).ready(function() {
   $("#search").keyup(function() {
      var text = $('#search').val();
      if(text==""){
         $("#display").html(" ");
      }else{
         $.ajax({
            type: "POST",
            url: "search.php",
            data: {search: text},
            success: function(response) {
               $("#display").html(response);
            },
            error: function () {
               $("#display").html("something wrong with ajax...!!");
            }
         });
      }
   });      
});   

ต่อไปสร้างไฟล์ชื่อว่า connect.php ซึ่งเป็นส่วนของการติดต่อฐานข้อมูล

โค้ด: เลือกทั้งหมด

<?php
//ส่วนของการติดต่อฐานข้อมูล
$host = "localhost";
$user = "root";
$password = "";
$dbname = "mydb";

// open the connection
$conn = new mysqli($host, $user, $password, $dbname);
mysqli_set_charset($conn, "utf8");

// Check connection
if ($conn->connect_errno) {
    echo "Failed to connect to MySQL: (" . $conn ->connect_errno . ") " . $conn ->connect_error;
}
?>

เรามีข้อมูลตัวอย่างในตารางของฐานข้อมูลดังนี้
mydb.jpg
mydb.jpg (4.09 KiB) เปิดดู 815 ครั้ง

สร้างไฟล์ search.php เพื่อใช้ select ข้อมูลจากฐานข้อมูลให้ตรงกับข้อความของผู้ใช้กรอกในช่องค้นหา
เมื่อไฟล์ search.php ดึงข้อมูลมาเรียบร้อยแล้วจะส่งค่าข้อมูลกลับไปให้กับไฟล์ index.php โดยใช้ $.ajax

โค้ด: เลือกทั้งหมด

<?php
include 'connect.php';
$search_item = $_POST['search'];
$query = "select * from mindphp where program like '%".$search_item."%'";
$result = mysqli_query($conn, $query) or die("Query failed");
$output = '';
if(mysqli_num_rows($result) > 0){
   $output .= '<ol>';
   while($row = mysqli_fetch_array($result)){
      $output .= '<li>'.$row["program"].'</li>';
    }
   $output .= '</ol>';
}else{
   $output .= '<p>ไม่พบข้อมูล</p>';
}
echo $output;
?>


ผลลัพธ์ที่ได้
btn modal.jpg
btn modal.jpg (5.34 KiB) เปิดดู 815 ครั้ง

เมื่อเราคลิกปุ่ม ป๊อปอัพ modal จะปรากฎขึ้น
modal.jpg
modal.jpg (18.34 KiB) เปิดดู 815 ครั้ง

เมื่อเราพิมอะไรบางอย่างในช่องค้นหา ก็จะได้ผลลัพธ์แบบ realtime เลยโดยไม่ต้องรีเฟรช
search modal.jpg
search modal.jpg (20.92 KiB) เปิดดู 815 ครั้ง

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

ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : jQuery/Ajax
-แลกเปลี่ยนความรู้ jQuery/Ajax
-สอนการใช้งาน HTML & CSS
-ถามตอบ HTML CSS
-บทเรียน CSS
-บทเรียน HTML5
-แลกเปลี่ยนความรู้ PHP

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 3 และ บุคคลทั่วไป 0 ท่าน