contact
WA: 0822-8846-7823
SMS: 0822-8846-7823
Call: 0822-8846-7823
BBM: D7DB3491
ebsofmail@gmail.com

Cara Menampilkan data di database tanpa Refresh dengan ajax dan jquery

Posted in Javascript Jquery Life at 24 April 2018 With 0 Comments


Ok.. Pada tutorial kali ini kita akan membahas Cara Tampil Data Tanpa Refresh F5 .. Load data tanpa refresh sangat tidak mungkin dilakukan hanya dengan menggunakan php mysql , Untuk mengambil data dari database tanpa refresh halaman kita membutuhkan ajax jquery , Dengan ajax jquery hal ini akan mungkin dilakukan , Berikut cara menampilkan data dari database tanpa refresh halaman dengan menggunakan ajax jquery :

Pada Kasus ini kita akan menampilkan data di database berdasarkan input text nama yang ada dalam database , dengan kata lain jika kita menginputkan nama di database , maka data yang lainya akan terload / tampil sesuai dengan data yang ada di database ,  Tipe text ini dapat di ganti dengan menggunakan combobox :

Secara Garis Besar untuk menampilkan data dari database tanpa refresh halaman dengan ajax jquery ada 2 step :


cara menampilkan data berdasarkan textbox

1. Buat HTML Form untuk menampilkan data
2. Konek ke database dan menampilkan data

 

1. Membuat Form HTML untuk menampilkan data dari database : index.html

<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
    function loaddata()
    {
    var name=document.getElementById( "username" );
    if(name)
    {
    $.ajax({
            type: 'post',
            url: 'tampildata.php',
            data: {
            user_name:name,
            },
            success: function (response) {
            // We get the element having id of display_info and put the response inside it
            $( '#display_info' ).html(response);
            }
           });
    }
    else
    {
    $( '#display_info' ).html("Please Enter Some Words");
    }
    }
</script>
    </head>
    <body>
     <input type="text" name="username" id="username" onkeyup="loaddata();">
     <div id="display_info" >
     </div>
     </body>
</html>

 dan Yang ke 2

2.  Membuat Koneksi ke database dan Menampilkan data tampildata.php

<?php
if( isset( $_POST['user_name'] ) )
{
$name = $_POST['user_name'];
$host = 'localhost';
$user = 'root';
$pass = ' ';
mysql_connect($host, $user, $pass);
mysql_select_db('student');
$selectdata = " SELECT age,course FROM student_info WHERE name LIKE '$name%' ";
$query = mysql_query($selectdata);
while($row = mysql_fetch_array($query))
{
    echo "<p>".$row['age']."</p>";
    echo "<p>".$row['course']."</p>";
}
}
?>

Artikel Rekomendasi

Artikel Terkait

Diskusi