javascript autoload div dan database
oke langsung aja nih, kali ini saya akan share tentang javascript autoload. sebelumnya apasih itu javascript autoload, mungkin sedikit saya ulas ya bagi yang belum tau, tapi bagi yang udah tau mungkin bisa dikoreksi lewat komenta :)
mungkin dari namanya juga udah menjawab yah, javascript autoload adalah sebuah program script dimana pada script ini membuat sebuah halaman atau div dapat meload diri sendiri secara otomatis dengan interval yang dapat kita tentukan sendiri.
trus apa gunanya si javascript autoload ini???
hmm apa yah?? hehehe
klo buat diri pribadi saya yang sekarang lagi menggeluti dunia iot, ini sangat berguna sekali, karna pengiriman dan penerimaan data dari sebuah mikrokontroler terutama arduino yang sekarang ini sering saya pake.
dulu saya sering menggunakan javascript autoload yang refresh page, tapi cara ini menurut saya kurang efektif. karna membutuhkan waktu yang cukup lama dalam pengambilan data, sehingga data tersebut terkadang tidak realtime karena load yang melebihi waktu yang ditentukan.
dan akhirnya setelah searching sana sini, saya menemukan juga caranya agar saat meload tidak memakan waktu yang terlalu lama, yaa dengan menggukan metode load pada div maka proses pengambilan data akan jauh lebih cepat.
sebelumnya terima kasih kepada web http://www.9lessons.info/ yang telah menjadi refrensi saya untuk menemukan kode ini heheee
oke langsung aja, untuk membuatnya pertama kita buat file
index.php
<script src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script> var auto_refresh = setInterval( function() { $('#load_tweets').fadeOut('slow').load('load.php').fadeIn("slow"); }, 3000); </script>
<body> </div></div> <center><div id="load_tweets"> </div></center> </body>
<script> var auto_refresh = setInterval( function() { $('#load_tweets').fadeOut('slow').load('load.php').fadeIn("slow"); }, 3000); </script>
<body> </div></div> <center><div id="load_tweets"> </div></center> </body>
load.php
Hii selamat belajar javascript autoload div
maka hasilnya tulisan pada file load.php akan di load oleh index.php dengan interval 3 detik.
selanjutnya ialah kita mencoba autoload dengan database, dimana saat kita menginput data ke database maka pada tampilan data akan menampilkan data terbaru tanpa harus kita klik tombol refresh
pada file load.php kita ganti isi nya sebagai berikut
include 'koneksi.php';
$sql = "select*from pesan order by id_pesan desc";
$query = mysqli_query($connection,$sql);
$data=mysqli_fetch_array($query);
echo $data['pesan'];
$sql = "select*from pesan order by id_pesan desc";
$query = mysqli_query($connection,$sql);
$data=mysqli_fetch_array($query);
echo $data['pesan'];
lalu kita buat file koneksi dengan isi sebagai berikut
$server = "localhost"; //isi sesuai server kalian
$user = "root"; //isi sesuai username kalian
$password = ""; // isi sesuai password kalian kosongkan jika tidak ada
$db = "db_autoload"; //isi sesuai dengan nama database kalian
$connection = mysqli_connect($server,$user,$password,$db);
$user = "root"; //isi sesuai username kalian
$password = ""; // isi sesuai password kalian kosongkan jika tidak ada
$db = "db_autoload"; //isi sesuai dengan nama database kalian
$connection = mysqli_connect($server,$user,$password,$db);
dan terakhir buat database untuk menampilkan data
dalam hal ini saya membuat database dengan nama db_autoload
tabel name = pesan
coloumn
id_pesan
pesan
berikut demo live dari kode diatas
tampilan javascript autoload div klik
dan ini halaman untuk memasukan data ke database klik
saat kita menyimpan data ke database, maka secara otomatis halaman pertama akan menampilkan data tersebut tanpa harus merefresh.
keren kan, keren lah....
heeheee
oke cukup sekian dulu yah....
bagi kamu yang ingin mendapatkan source kode nya, bisa komentar dibawah dan saya akan mengirimkan via email,,
terima kasih..
Comments
Post a Comment