Published May 12, 2020 by RIT with 0 comment

PENCARIAN DATA DENGAN PHP DAN DATABASE BAGIAN KE 2

Assalamualaikum warohmatullohi wabarokatuh,
Wa alaikum salam warohmatullohi wabarokatuh,

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



pada postingan sebelumnya adalah menampilkan data dengan dengan user memasukkan kata atau kalimat ke dalam kolom maka akan tampil data yg dicari, untuk postingan kali ini kita menambahkn 4 kolom yaitu : id, name, username,email. Saat user memasukkan kata, program menampilkan isi data dari database seperti postingan sebelumnya, namun setelah menampilkan data, saat user klik data yg di inginkan, maka kolom yg yg kosong akan terisi otomatis. 


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



0 - download dulu plugin jquery ui (isi nya jquery.ui.css dan jquery.ui.js) di sini scroll hingga kebawah lalu tekan tombol download.
1 - letakkan jquery ui yg telah didownload folder dalam satu folder.
2 - buatlah file index.php
3 - buat file lagi dengan nama cari_proses.php
4 - 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
57
58
59
60
61
62
63
64
65
66
67
<!doctype html>
<html>
<head>
    <title>Langsung Koding</title>
     
    <!-- jQuery -->
    <script src='jquery.min.js' type='text/javascript'></script>
 
    <!-- jQuery UI -->
    <link href='jquery-ui.min.css' rel='stylesheet' type='text/css'>
    <script src='jquery-ui.min.js' type='text/javascript'></script>
     
</head>
<body>
 
    Nama : 
    <input type='text' class='nama_user'> <br><br>
 
    Id     :
    <input type='text' class='id_user'> <br><br>
            
    Email:
    <input type='text' class='email_user'><br><br>
 
    Username :
    <input type='text' class='username'><br><br>
 
</body>
</html>
    <!-- Script -->
<script type='text/javascript' >
    $( function() {
   
        $( ".nama_user" ).autocomplete({
            source: function( request, response ) {
                 
                $.ajax({
                    url: "fetchData.php",
                    type: 'post',
                    dataType: "json",
                    data: {
                        cari: request.term
                    },
                    success: function( data ) {
                        response( data );
                    }
                });
            },
            select: function (event, ui) {
                $('.nama_user').val(ui.item.label); // menampilkan data dari inputan
                $('.id_user').val(ui.item.isi_id); // menyimpan id yg telah terpilih sesuai dengan
                $('.email_user').val(ui.item.isi_email);
                $('.username').val(ui.item.isi_username);
                 
                return false;
            }
        });
    });
 
    function split( val ) {
      return val.split( /,\s*/ );
    }
    function extractLast( term ) {
      return split( term ).pop();
    }
 
</script>
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?php 
 
include "koneksi.php";
 
if(isset($_POST['cari'])){
    $cari = $_POST['cari'];
 
    $query = "SELECT * FROM users WHERE name like'%".$cari."%'";
    $result = mysqli_query($con,$query);
     
    while($row = mysqli_fetch_array($result) ){
        $response[] = array(
                             
                            "label"=>$row['name'],
                            "isi_id"=>$row['id'],
                            "isi_email"=>$row['email'],
                            "isi_username"=>$row['username']
                            );
    }
 
    echo json_encode($response);
}
 
exit;

setelah user klik nama yg diinginkan maka kolom yang yang kosong akan terisi otomatis


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 BAGIAN KE 2 | AUTOMPELETE WITH JQUERY UI | HOW TO AUTOCOMPLETE DATA JQUERY |


BACA JUGA :


Read More

,

      edit
Published May 05, 2020 by RIT with 0 comment

HOW TO DISPLAY MODAL IN BULMA


Assalamualaikum warohmatullohi wabarokatuh.
Wa alaikum salam warohmatullohi wabarokatuh.

Terima kasih telah berkunjung di media pembelajaran bahasa program online langsungkoding.blogspot.com ,

This is post writing only in my blog and my solved problem when building website.
and now, my problem on modal with framework bulma, because in doc web bulma I do not Understand :) hehehe, at last, I Have code from stackoverflow and google, this is above code :


?
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
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 
<button class="button is-success has-background-primary" id="open_modal"> OPEN MY MODAL </button>
 
<div id="myModal584" class ="modal">
  <div class = "modal-background"></div>
  <div class = "modal-content">
    <div class="box has-background-primary">
      <section class="hero">
      <h1 id='jdl_a' class=" title has-text-centered"></h1>
        <div class="hero-body has-background-light ">
          <div class="container">
 
                <form method='post' class="">
                  <div class='hiddden' >
                      <div class="field">
                        <label for="" class="label">Your Name :</label>
                          <input type="text" class="input" >
                          <div id="results" ></div>
                          <input type="hidden" class="input">
                      </div>
                      <div class="field">
                        <label for="" class="label">Your Address :</label>
                          <input type="text" class="input" >
                      </div>
                      <div class="field">
                        <button class="button is-success has-background-danger " id="close_modal">
                          Close
                        </button>
                      </div>
                  </div> 
                </form>
 
          </div>
        </div>
      </section>
    </div>
  </div>
</div>
 
<script type="text/javascript">
$(document).ready(function() {
        $("#open_modal").click(function(e) {
            e.preventDefault();
            $("#myModal").addClass("is-active");
          });
        $("#close_modal").click(function(e) {
            e.preventDefault();
            $("#myModal").removeClass("is-active");
          });
      });
</script>

Thank's
Terima Kasih.

Tag :
Bulma css | Framework css | Modal in bulma| How to open modal in bulma | open modal in bulma | HOW TO DISPLAY MODAL IN BULMA | open modal with jquery | cara membuka modal pada bulma | cara modal pada bulma | cara membuat modal pada bulma


Read More

      edit
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 :


Read More

, , ,

      edit
Subscribe to: Posts (Atom)