CARA MEMBUAT SHUTBOX DENGAN AJAX-JQUERY PHP MYSQL



Hallo pembaca, kita akan belajar membuat shutbox menggunakan PHP dan MySQL, untuk mempermudah dalam pemahaman langsung saja, pertama kita buat dulu databasenya


CREATE DATABASE `dbshutbox`;

CREATE TABLE `dbshutbox`.`tblpesan` (

`idpesan` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`nama` VARCHAR( 50 ) NOT NULL ,
`pesan` TEXT NOT NULL ,
`tanggal` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP

) ENGINE = InnoDB;



Gambar struktur tabelnya

Setelah kita buat tabelnya kita akan pelajari bagaimana cara Ajax jQuery dalam melakukan proses dalam inputan ke database, oke langsung saja kita buat skripnya.

Yang pertama kita buat skrip "shutbox.php"
---------------------------------------------------------------------------------------------------------------------------------
<html>

<head>

<link rel="stylesheet" href="main.css" type="text/css" />

<script src="jquery-1.4.js"></script>

<script>   

$(document).ready(function(){

                var loading = $("#loading");

                var viewer = $("#viewer");



                function viewdata(){

                                viewer.hide();

                                loading.fadeIn();



                                $.ajax({

                type:"POST",

                url:"proses.php",   

                data: "act=view",

                success: function(data){                

                                                loading.fadeOut();

                               viewer.html(data);

                               viewer.fadeIn(2000);

                } 

                                });

                }



                viewdata();



                $("#simpan").click(function(){

                var nama  = $("#nama").val();

                var pesan = $("#pesan").val();



                $.ajax({

               type:"POST",

               url:"proses.php",   

               data: "act=add&nama=" + nama + "&pesan=" + pesan,

               success: function(data){                

                               $("#info").html(data);

                               viewdata();

                               } 

                });

                });

});

</script>



</head>

<body>

                <left>

                                <div class="demo" style="width: 350px;">

                                                <div><label>Nama </label><input type="text" id="nama"></div><br />

                                                <div><label>Pesan </label><textarea type="text" id="pesan"></textarea></div><br />

                                                <div><input type="submit" value="Simpan" id="simpan"></div>

                                </div>

                                <div id="info"></div>

                </left>

 

                <div id="container">

                                <span class="clear"></span>

                                <div class="content">

                                                <h2>PESAN TERKINI </h2>

                                                <div id="loading"><img src="loading.gif" /></div>

                               <ul id="viewer"></ul>

                                </div>

                </div>

</body>

</html>
---------------------------------------------------------------------------------------------------------------------------------
Yang kedua kita buat skrip proses.php
---------------------------------------------------------------------------------------------------------------------------------
<?php

                mysql_connect("localhost","root","");

                mysql_select_db("dbshutbox");



                if ($_POST['act']=='view'){

                                $view=mysql_query("SELECT * FROM tblpesan ORDER BY idpesan DESC");

                                while($data=mysql_fetch_array($view)){

                               echo "<li><b>$data[nama]</b> : $data[pesan] (<i>$data[tanggal]</i>)</li>";

                                }

                }elseif ($_POST['act']=='add'){

                                $nama  = $_POST['nama'];

                                $pesan = $_POST['pesan'];

                                $input=mysql_query("INSERT INTO tblpesan(nama,pesan) VALUES('$nama','$pesan')");

                                if ($input){

                                                echo "Data berhasil disimpan";

                                }else{

                                                echo "Data gagal disimpan";

                                }

                }

?>
----------------------------------------------------------------------------------------------------------------------------------


Hasil tampilannya seperti dibawah ini :


Pada file shutbox.php kita menambahkan fungsi yaitu viewdata() yang berfungsi untuk menampilkan data lebih dari satu kali yaitu pada saat program pertama kali dijalankan data yang ada langsung ditampilkan, lalu setelah selesai proses input data, datanya juga langsung ditampilkan hasilnya.

Kalau kita perhatikan ada 2 aksi yang dikirimkan pada file proses.php, yaitu act=view dan act=add, hal tersebut dimaksudkan agar file proses.php bisa dibuat sua query yang berbeda dengan perintah IF, yaitu untuk query input data ke database yaitu act=add dan menampilkan data dari database yaitu act=view

Pada file shutbox.php juga sudah dilengkapi dengan animasi jquery pada saat loading, anda bisa lihat di skrip loading.fadeIn(); dan loading.fadeOut();
Jika kalian ingin mencoba skrip sudah sudah jadi bisa diambil disini,
Selamat belajar

 

0 Response to "CARA MEMBUAT SHUTBOX DENGAN AJAX-JQUERY PHP MYSQL"

Post a Comment