Published May 04, 2020 by RIT with 0 comment

PENCARIAN DATA DENGAN AJAX PHP DAN DATABASE

Assalamualaikum warohmatullohi wabarokatuh,
Wa alaikum salama warohmatullohi wabarokatuh,

cara membuat kotak pencarian dengan ajax dean php dari database
live searching with ajax jquery



pertama-tama buat lah table dengan nama users, dengan strutur seperti gambar di bawah ini



1 - buatlah file index.php
2 - buat file lagi dengan nama cari_proses.php
3 - copy script dibawah ini sesuaikan dengan file index.php dan cari_proses.php
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html>
  <head>
    <script src="jquery.min.js" charset="utf-8"></script>
  </head>
  <body>
 
      <input type="text" id="cari" placeholder="cari nama kamu ...">
      <br/>
      <br/>
 
        <table border="1">
          <thead>
            <tr>
              <th>#</th>
              <th>Nama</th>
              <th>Username</th>
              <th>Email</th>
            </tr>
          </thead>
          <tbody id="tampil">
            <?php
              require_once 'koneksi.php';
              $no = 1;
              $query = mysqli_query($koneksi, "SELECT * FROM users");
              while ($row = mysqli_fetch_object($query)) {
             ?>
            <tr>
              <td><?= $no++; ?></td>
              <td><?= $row->name; ?></td>
              <td><?= $row->username; ?></td>
              <td><?= $row->email; ?></td>
            </tr>
          <?php } ?>
          </tbody>
        </table>
 
  </body>
  <script type="text/javascript">
    $(document).ready( function() {
      $('#cari').on('keyup', function() {
        $.ajax({
          type: 'POST',
          url: 'cari_proses.php',
          data: {
            cari: $(this).val()
          },
          cache: false,
          success: function(data) {
            $('#tampil').html(data);
          }
        });
      });
    });
  </script>
</html>
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
if (isset($_POST['cari'])) {
  $koneksi = mysqli_connect('localhost', 'root', '', 'test');
 
  $no = 1;
  $cari = $_POST['cari'];
  $query = mysqli_query($koneksi, "SELECT * FROM users WHERE name LIKE '%".$cari."%'");
  while ($row = mysqli_fetch_object($query)) {
 ?>
 
<tr>
  <td><?= $no++; ?></td>
  <td><?= $row->name; ?></td>
  <td><?= $row->username; ?></td>
  <td><?= $row->email; ?></td>
</tr>
 
<?php } 
    }
?>

Terima Kasih
Thank's

TAG TAGS :
cara membuat kotak pencarian data dari database dengan ajax | cara pencarian dengan ajax php dan mysqli | kotak pencarian data dengan ajax di php | pencarian Data dengan table dari Database dengan AJAX jQuery | PENCARIAN DATA DENGAN AJAX PHP DAN DATABASE


BACA JUGA :


, , ,

      edit

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)