การค้นหาข้อมูลเป็นfeatureหนึ่งที่ต้องมีเกือบทุกเว็บ เพื่อให้ผู้เข้าชมเว็บไซต่ได้รับข้อมูลโดยตรงตามที่เขาต้องการเพียงแค่ใช้ช่องค้นหาครับ
บทความนี้แนะนำเกี่ยวกับการค้นหาข้อมูล
MySQL แล้วดึงข้อมูลออกมาโชว์ไม่ต้อง Refresh โดยใช้เทคนิค
AJAX ในการทำงาน และใช้ป้อปอัพ modal ของ
bootstrap4 สร้างความน่าสนใจมากขึ้น โดยตัวอย่าง source code เป็นตัวอย่างแบบง่ายๆ สามารถเข้าใจได้ไม่ยาก และนำไปประยุกต์ใช้ได้ทันที
- search modal2.jpg (18.46 KiB) Viewed 5073 times
ก่อนอื่นเรามาสร้าง 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">×</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 (4.09 KiB) Viewed 5073 times
สร้างไฟล์ 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 (5.34 KiB) Viewed 5073 times
เมื่อเราคลิกปุ่ม ป๊อปอัพ modal จะปรากฎขึ้น
- modal.jpg (18.34 KiB) Viewed 5073 times
เมื่อเราพิมอะไรบางอย่างในช่องค้นหา ก็จะได้ผลลัพธ์แบบ realtime เลยโดยไม่ต้องรีเฟรช
- search modal.jpg (20.92 KiB) Viewed 5073 times
ผลลัพธ์ที่ได้จะเป็นข้อมูลที่มีอยู่ในฐานข้อมูลและตรงกับข้อความที่ผู้ใช้ป้อนหรือเป็นส่วนใดส่วนหนึ่ง เช่น จากตัวอย่าง เมื่อพิม p ระบบก็จะข้อมูลที่มีตัวอักษร p อย่าง php หรือ python เป็นต้น
หวังว่าผู้อ่านจะเข้าใจและนำไปประยุกต์เพิ่มเติมต่อให้เข้ากับโปรเจ็คได้ครับ
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : jQuery/Ajax
-
แลกเปลี่ยนความรู้ jQuery/Ajax
-
สอนการใช้งาน HTML & CSS
-
ถามตอบ HTML CSS
-
บทเรียน CSS
-
บทเรียน HTML5
-
แลกเปลี่ยนความรู้ PHP
การค้นหาข้อมูลเป็นfeatureหนึ่งที่ต้องมีเกือบทุกเว็บ เพื่อให้ผู้เข้าชมเว็บไซต่ได้รับข้อมูลโดยตรงตามที่เขาต้องการเพียงแค่ใช้ช่องค้นหาครับ
บทความนี้แนะนำเกี่ยวกับการค้นหาข้อมูล [url=https://www.mindphp.com/developer/21-sql-mysql/4458-what-is-mysqli-qualified-for.html]MySQL[/url] แล้วดึงข้อมูลออกมาโชว์ไม่ต้อง Refresh โดยใช้เทคนิค [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%AA%E0%B8%AD%E0%B8%99-ajax/44-%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%97%E0%B8%B3%E0%B8%87%E0%B8%B2%E0%B8%99%E0%B8%82%E0%B8%AD%E0%B8%87-ajax.html]AJAX[/url] ในการทำงาน และใช้ป้อปอัพ modal ของ [url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/3963-bootstrap.html]bootstrap4[/url] สร้างความน่าสนใจมากขึ้น โดยตัวอย่าง source code เป็นตัวอย่างแบบง่ายๆ สามารถเข้าใจได้ไม่ยาก และนำไปประยุกต์ใช้ได้ทันที
[attachment=1]search modal2.jpg[/attachment]
ก่อนอื่นเรามาสร้าง modal โดยใช้ bootstrap ก่อน โดยการสร้างไฟล์ชื่อ index.php และใช้โค้ดดังนี้
[code]<!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">×</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> [/code]
เขียนโค้ด [url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/3863-what-is-jquery.html]Jquery[/url] โดยกำหนดไว้ว่า เมื่อมีการใส่ข้อมูลในช่องค้นหา ระบบจะดึงข้อมูลจาก serach.php มาแสดงทันที โดยใช้เทคนิคของ AJAX
[code]
$(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...!!");
}
});
}
});
}); [/code]
ต่อไปสร้างไฟล์ชื่อว่า connect.php ซึ่งเป็นส่วนของการติดต่อฐานข้อมูล
[code]<?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;
}
?>[/code]
เรามีข้อมูลตัวอย่างในตารางของฐานข้อมูลดังนี้
[attachment=0]mydb.jpg[/attachment]
สร้างไฟล์ search.php เพื่อใช้ select ข้อมูลจากฐานข้อมูลให้ตรงกับข้อความของผู้ใช้กรอกในช่องค้นหา
เมื่อไฟล์ search.php ดึงข้อมูลมาเรียบร้อยแล้วจะส่งค่าข้อมูลกลับไปให้กับไฟล์ index.php โดยใช้ $.ajax
[code]<?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;
?>[/code]
ผลลัพธ์ที่ได้
[attachment=4]btn modal.jpg[/attachment]
เมื่อเราคลิกปุ่ม ป๊อปอัพ modal จะปรากฎขึ้น
[attachment=3]modal.jpg[/attachment]
เมื่อเราพิมอะไรบางอย่างในช่องค้นหา ก็จะได้ผลลัพธ์แบบ realtime เลยโดยไม่ต้องรีเฟรช
[attachment=2]search modal.jpg[/attachment]
ผลลัพธ์ที่ได้จะเป็นข้อมูลที่มีอยู่ในฐานข้อมูลและตรงกับข้อความที่ผู้ใช้ป้อนหรือเป็นส่วนใดส่วนหนึ่ง เช่น จากตัวอย่าง เมื่อพิม p ระบบก็จะข้อมูลที่มีตัวอักษร p อย่าง php หรือ python เป็นต้น
หวังว่าผู้อ่านจะเข้าใจและนำไปประยุกต์เพิ่มเติมต่อให้เข้ากับโปรเจ็คได้ครับ
[b]ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : jQuery/Ajax [/b]
-[url=https://www.mindphp.com/forums/viewforum.php?f=78]แลกเปลี่ยนความรู้ jQuery/Ajax[/url]
-[url=https://www.mindphp.com/forums/viewforum.php?f=73]สอนการใช้งาน HTML & CSS[/url]
-[url=https://www.mindphp.com/forums/viewforum.php?f=20]ถามตอบ HTML CSS[/url]
-[url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-css.html]บทเรียน CSS[/url]
-[url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-html5.html]บทเรียน HTML5[/url]
-[url=https://www.mindphp.com/forums/viewforum.php?f=6]แลกเปลี่ยนความรู้ PHP[/url]