Page 1 of 1

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

Posted: 05/04/2019 3:44 pm
by abdkode
การค้นหาข้อมูลเป็นfeatureหนึ่งที่ต้องมีเกือบทุกเว็บ เพื่อให้ผู้เข้าชมเว็บไซต่ได้รับข้อมูลโดยตรงตามที่เขาต้องการเพียงแค่ใช้ช่องค้นหาครับ
บทความนี้แนะนำเกี่ยวกับการค้นหาข้อมูล MySQL แล้วดึงข้อมูลออกมาโชว์ไม่ต้อง Refresh โดยใช้เทคนิค AJAX ในการทำงาน และใช้ป้อปอัพ modal ของ bootstrap4 สร้างความน่าสนใจมากขึ้น โดยตัวอย่าง source code เป็นตัวอย่างแบบง่ายๆ สามารถเข้าใจได้ไม่ยาก และนำไปประยุกต์ใช้ได้ทันที
search modal2.jpg
search modal2.jpg (18.46 KiB) Viewed 1329 times
ก่อนอื่นเรามาสร้าง modal โดยใช้ bootstrap ก่อน โดยการสร้างไฟล์ชื่อ index.php และใช้โค้ดดังนี้

Code: Select all

<!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

Code: Select all

$(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 ซึ่งเป็นส่วนของการติดต่อฐานข้อมูล

Code: Select all

<?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) Viewed 1329 times
สร้างไฟล์ search.php เพื่อใช้ select ข้อมูลจากฐานข้อมูลให้ตรงกับข้อความของผู้ใช้กรอกในช่องค้นหา
เมื่อไฟล์ search.php ดึงข้อมูลมาเรียบร้อยแล้วจะส่งค่าข้อมูลกลับไปให้กับไฟล์ index.php โดยใช้ $.ajax

Code: Select all

<?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) Viewed 1329 times
เมื่อเราคลิกปุ่ม ป๊อปอัพ modal จะปรากฎขึ้น
modal.jpg
modal.jpg (18.34 KiB) Viewed 1329 times
เมื่อเราพิมอะไรบางอย่างในช่องค้นหา ก็จะได้ผลลัพธ์แบบ realtime เลยโดยไม่ต้องรีเฟรช
search modal.jpg
search modal.jpg (20.92 KiB) Viewed 1329 times
ผลลัพธ์ที่ได้จะเป็นข้อมูลที่มีอยู่ในฐานข้อมูลและตรงกับข้อความที่ผู้ใช้ป้อนหรือเป็นส่วนใดส่วนหนึ่ง เช่น จากตัวอย่าง เมื่อพิม p ระบบก็จะข้อมูลที่มีตัวอักษร p อย่าง php หรือ python เป็นต้น
หวังว่าผู้อ่านจะเข้าใจและนำไปประยุกต์เพิ่มเติมต่อให้เข้ากับโปรเจ็คได้ครับ

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