GUDANG TUTORIAL: Pencarian Langsung PHP Ajax dengan Banyak Nilai

Pencarian Langsung PHP Ajax dengan Banyak Nilai

cari php mysql, pencarian langsung, php, cari menggunakan ajax di php, cari menggunakan beberapa kriteria di php

Apakah Anda tahu Pencarian Data Langsung diperlukan fitur untuk memfilter Mysql untuk melihat hanya data yang diperlukan yang Anda inginkan. Jadi, Dalam tutorial ini, kita akan belajar cara membuat aplikasi sederhana di mana kita dapat mencari atau memfilter data basis data Mysql dengan permintaan pencarian tunggal dengan nilai ganda. Yang dipertanyakan adalah bagaimana cara mencari data dengan beberapa nilai pencarian dalam satu klik. Untuk ini di sini kita akan menggunakan plugin tag input Bootstrap untuk beberapa nilai pencarian dalam pencarian tunggal dengan Ajax jQuery dan PHP.

Bootstrap Tags Input plugin adalah plugin jQuery untuk mengubah teks input menjadi format tag. Setelah mengkonversi menjadi tag, kita dapat memasukkan teks lain yang juga akan dikonversi menjadi tag. Jadi, dalam teks input tunggal kita akan memasukkan beberapa tag, dan tag ini akan kita gunakan untuk mencari data dalam basis data Mysql menggunakan PHP dengan Ajax. Jadi, ketika kita mengklik tombol pencarian, maka pada saat itu ia akan mengirimkan beberapa permintaan pencarian pada saat yang bersamaan. Jadi, dengan cara ini kita dapat menggunakan plugin Tag Bootstrap untuk mencari data langsung dengan beberapa nilai pencarian dan memfilter data sesuai dengan beberapa nilai pencarian.

Untuk menginisialisasi fungsionalitas plugin ini, kita hanya perlu menambahkan atribut data-role = "tagsinput" di bidang input kami, itu akan secara otomatis mengkonversi bidang input menjadi bidang input tag. Jadi, sangat mudah untuk menggunakan plugin ini di lingkungan pengembangan web kami yang ada.

Di sini kita akan mempelajari langkah demi langkah cara menggunakan plugin Input Tag Bootstrap untuk membuat fitur Pencarian Data Langsung dengan beberapa nilai menggunakan Ajax dengan PHP dan Mysql. Untuk ini di sini kami akan membuat demo langsung di mana kami dapat mencari data pelanggan dengan beberapa nilai.

Di sisi server bagaimana kita dapat menggunakan beberapa nilai pencarian untuk memfilter data atau membuat permintaan pencarian mysql dengan beberapa nilai pencarian input. Untuk, ini di sini kita akan menggunakan operator REGEX, ini adalah tipe lain dari operator berbasis pola yang didasarkan pada ekspresi reguler. Yang akan kami gunakan untuk mencari data dengan beberapa nilai pencarian. Di bawah ini Anda dapat menemukan pencarian PHP Ajax Live Data langkah demi langkah lengkap dengan Beberapa Nilai menggunakan plugin Input Tag Bootstrap.

Langkah 1 - Tabel Database Mysql

Untuk menerapkan Fungsi Pencarian Data Langsung dengan Nilai Pencarian Berganda untuk data filter, untuk ini pertama-tama kami ingin membuat tabel tbl_customer di database mysql. Untuk ini, Anda harus menjalankan query SQL berikut untuk membuat tabel di Database Mysql Anda. Script ini tidak hanya akan membuat tbl_customer tetapi juga akan memasukkan beberapa data juga. Jadi, mudah bagi Anda untuk mengimplementasikan fitur ini.

USE `testing`;

/*Table structure for table `tbl_customer` */

DROP TABLE IF EXISTS `tbl_customer`;

CREATE TABLE `tbl_customer` (

`CustomerID` int(11) NOT NULL AUTO_INCREMENT,

`CustomerName` varchar(250) NOT NULL,

`Gender` varchar(30) NOT NULL,

`Address` text NOT NULL,

`City` varchar(250) NOT NULL,

`PostalCode` varchar(30) NOT NULL,

`Country` varchar(100) NOT NULL,

PRIMARY KEY (`CustomerID`)

) ENGINE=MyISAM AUTO_INCREMENT=146 DEFAULT CHARSET=latin1;

/*Data for the table `tbl_customer` */

insert into `tbl_customer`(`CustomerID`,`CustomerName`,`Gender`,`Address`,`City`,`PostalCode`,`Country`) values

(1,'Maria Anders','Female','Obere Str. 57','Berlin','12209','Germany'),

(2,'Ana Trujillo','Female','Avda. de la Construction 2222','Mexico D.F.','5021','Mexico'),

(3,'Antonio Moreno','Male','Mataderos 2312','Mexico D.F.','5023','Mexico'),

(4,'Thomas Hardy','Male','120 Hanover Sq.','London','WA1 1DP','United Kingdom'),

(5,'Paula Parente','Female','Rua do Mercado, 12','Resende','08737-363','Brazil'),

(6,'Wolski Zbyszek','Male','ul. Filtrowa 68','Walla','01-012','Poland'),

(7,'Matti Karttunen','Male','Keskuskatu 45','Helsinki','21240','Finland'),

(8,'Karl Jablonski','Male','305 - 14th Ave. S. Suite 3B','Seattle','98128','United States'),

(9,'Paula Parente','Female','Rua do Mercado, 12','Resende','08737-363','Brazil'),

(10,'John Koskitalo','Male','Torikatu 38','Oulu','90110','Finland'),

(39,'Ann Devon','Female','35 King George','London','WX3 6FW','United Kingdom'),

(38,'Janine Labrune','Female','67, rue des Cinquante Otages','Nantes','44000','Finland'),

(37,'Kathryn Segal','Female','Augsburger Strabe 40','Ludenscheid Gevelndorf','58513','Germany'),

(36,'Elizabeth Brown','Female','Berkeley Gardens 12 Brewery','London','WX1 6LT','United Kingdom'),

(30,'Trina Davidson','Female','1049 Lockhart Drive','Barrie','ON L4M 3B1','Canada'),

(31,'Jeff Putnam','Male','Industrieweg 56','Bouvignies','7803','Belgium'),

(32,'Joyce Rosenberry','Female','Norra Esplanaden 56','HELSINKI','380','Finland'),

(33,'Ronald Bowne','Male','2343 Shadowmar Drive','New Orleans','70112','United States'),

(34,'Justin Adams','Male','45, rue de Lille','ARMENTIERES','59280','France'),

(35,'Pedro Afonso','Male','Av. dos Lusiadas, 23','Sao Paulo','05432-043','Brazil'),

(100,'Kathryn Segal','Female','Augsburger Strabe 40','Ludenscheid Gevelndorf','58513','Germany'),

(101,'Tonia Sayre','Female','84 Haslemere Road','ECHT','AB32 2DY','United Kingdom'),

(102,'Loretta Harris','Female','Avenida Boavista 71','SANTO AMARO','4920-111','Portugal'),

(103,'Sean Wong','Male','Rua Vito Bovino, 240','Sao Paulo-SP','04677-002','Brazil'),

(104,'Frederick Sears','Male','ul. Marysiuska 64','Warszawa','04-617','Poland'),

(105,'Tammy Cantrell','Female','Lukiokatu 34','HAMEENLINNA','13250','Finland'),

(106,'Megan Kennedy','Female','1210 Post Farm Road','Norcross','30071','United States'),

(107,'Maria Whittaker','Female','Spresstrasse 62','Bielefeld Milse','33729','Germany'),

(108,'Dorothy Parker','Female','32 Lairg Road','NEWCHURCH','HR5 5DR','United Kingdom'),

(109,'Roger Rudolph','Male','Avenida Julio Saul Dias 78','PENAFIEL','4560-470','Portugal'),

(110,'Karen Metivier','Female','Rua Guimaraes Passos, 556','Sao Luis-MA','65025-450','Brazil'),

(111,'Charles Hoover','Male','Al. Tysiaclecia 98','Warszawa','03-851','Poland'),

(112,'Becky Moss','Female','Laivurinkatu 6','MIKKELI','50120','Finland'),

(113,'Frank Kidd','Male','2491 Carson Street','Cincinnati','KY 45202','United States'),

(114,'Donna Wilson','Female','Hallesches Ufer 69','Dettingen','73265','Germany'),

(115,'Lillian Roberson','Female','36 Iolaire Road','NEW BARN','DA3 3FT','United Kingdom'),

(144,'Stephen M. Menzies','Male','577 Hartway Street','Bruie','57325','United States'),

(143,'Nikki G. Pascual','Female','4291 Kinney Street','Agawam','1001','United States'),

(141,'Alpha A. Brookover','Female','3542 Trainer Avenue','Kilbourne','62655','United States'),

(142,'Austin D. Salem','Male','1184 Farland Street','Brockton','2401','United States'),

(140,'Bianca A. Carone','Female','1777 Elkview Drive','Hialeah','33012','United States'),

(139,'Stephen M. Menzies','Male','577 Hartway Street','Bruie','57325','United States'),

(138,'Nikki G. Pascual','Female','4291 Kinney Street','Agawam','1001','United States'),

(136,'Alpha A. Brookover','Female','3542 Trainer Avenue','Kilbourne','62655','United States'),

(137,'Austin D. Salem','Male','1184 Farland Street','Brockton','2401','United States'),

(145,'Bianca A. Carone','Female','1777 Elkview Drive','Hialeah','33012','United States');

index.php

Ini adalah file utama dalam tutorial ini. Pada halaman ini kami telah menyertakan semua pustaka yang diperlukan seperti jQuery, Bootstrap dan pustaka Input Tag Bootstrap. Dalam file ini Anda dapat mengajukan kode HTML dan kode jQuery dari tutorial ini. Untuk menginisialisasi plugin Bootstrap Tag Input pada input textbox, kita harus menambahkan atribut data-role = "tagsinput" di dalamnya. Untuk menampilkan data pelanggan di sini kami telah membuat satu tabel, dan dalam tag ini data akan diisi dengan menggunakan fungsi jquery load_data (). Fungsi ini telah menggunakan permintaan Ajax untuk data pelanggan yang diterima dalam format json dan mengonversi data json itu ke HTML menggunakan kode jQuery.

<html>

<head>

<title>Live Data Search using Multiple Tag in PHP with Ajax</title>

<style>

.bootstrap-tagsinput {

width: 100%;

}

</style>

</head>

<body>

<br />

<h2 align="center">Live Data Search using Multiple Tag in PHP with Ajax</h2><br />

</div>

<button type="button" name="search" class="btn btn-primary" id="search">Search</button>

</div>

<br />

<p><b>Total Records - <span id="total_records"></span></b></p>

</div>

<thead>

<tr>

<th>Customer Name</th>

<th>Gender</th>

<th>Address</th>

<th>Postal Code</th>

<th>Country</th>

</tr>

</thead>

<tbody>

</tbody>

</table>

</div>

<br />

</body>

</html>

$(document).ready(function(){

load_data();

function load_data(query)

{

$.ajax({

url:"fetch.php",

method:"POST",

data:{query:query},

dataType:"json",

success:function(data)

{

$('#total_records').text(data.length);

var html = '';

if(data.length > 0)

{

for(var count = 0; count < data.length; count++)

{

html += '<tr>';

html += '<td>'+data[count].CustomerName+'</td>';

html += '<td>'+data[count].Gender+'</td>';

html += '<td>'+data[count].Address+'</td>';

html += '<td>'+data[count].City+'</td>';

html += '<td>'+data[count].PostalCode+'</td>';

html += '<td>'+data[count].Country+'</td></tr>';

}

else

{

html = '<tr><td colspan="5">No Data Found</td></tr>';

}

$('tbody').html(html);

}

})

}

$('#search').click(function(){

var query = $('#tags').val();

load_data(query);

});

</script>

fetch.php

Ini adalah file skrip PHP, yang telah menangani permintaan ajax untuk mengambil data dari database Mysql. Dalam skrip ini ia memeriksa ada nilai variabel $ _POST ['kueri']. Jika variabel ini memiliki beberapa nilai, maka ia akan membuat permintaan Mysql untuk memfilter data dari tabel tbl_customer, dan untuk permintaan pencarian itu telah menggunakan operator REGEX untuk data pencarian dengan beberapa nilai. Tetapi variabel $ _POST ['kueri'] tidak memiliki nilai apa pun, maka variabel itu akan membuat kueri untuk mengambil semua data dari tabel tbl_customer.

<?php

//fetch.php

$connect = new PDO("mysql:host=localhost;dbname=testing", "root", "");

$output = '';

$query = '';

if(isset($_POST["query"]))

{

$search = str_replace(",", "|", $_POST["query"]);

$query = "

SELECT * FROM tbl_customer

WHERE CustomerName REGEXP '".$search."'

OR Address REGEXP '".$search."'

OR City REGEXP '".$search."'

OR PostalCode REGEXP '".$search."'

OR Country REGEXP '".$search."'

}

else

{

$query = "

SELECT * FROM tbl_customer ORDER BY CustomerID

}

$statement = $connect->prepare($query);

$statement->execute();

while($row = $statement->fetch(PDO::FETCH_ASSOC))

{

$data[] = $row;

}

echo json_encode($data);

Ini adalah kode sumber lengkap pencarian Data Langsung Ajax PHP dengan beberapa nilai dengan menggunakan plugin Input Tag Bootstrap. Jadi, Anda telah mempelajari sesuatu yang baru dari pos ini.

GUDANG TUTORIAL

Search This Blog

Pencarian Langsung PHP Ajax dengan Banyak Nilai

Pencarian Langsung PHP Ajax dengan Banyak Nilai

No comments:

Post a Comment