Mini Shoutbox sederhana dengan Jquery

Related Articles

Cara Menggunakan Vlookup Lengkap disertai dengan Contohnya

Desember 12, 2022

Penambahan AMP HTML di Blogspot Blogger

Juni 2, 2018

Debug Mode WordPress

Mei 11, 2018

Artikel kali ini kita mencoba membuat Shoutbox (Blok Untuk Testimonial) Sederhana. Shoutbox yang akan kita buat berkolabirasi dengan jquery untuk penanganan Ajax, dan dibuat sesimple mungkin agar teman – teman dapat mengubah dan menampilkan website atau Blog.

Mengapa membuat Shoutbox? bukannya bukutamu (Guestbook) sudah mewakili!, akan tetapi tujuan Shoutbox berbeda dengan Guestbook. Shoutbox ditujukan tidak untuk menampung jumlah karakter yang panjang melainkan hanya tulisan – tulisan pendek pada website/Blog kalian, Untuk itulah kita buat Shoutbox untk artikel kali ini. Apakah susah? Jawabnya tidak terlalu susah asalkan kalian mengerti sedikit bahasa pemrograman

OK Kita mulai dengan pembuatan Tabel database (kita beri nama tbl_shoutbox):

CREATE TABLE IF NOT EXISTS `tbl_shoutbox` (
  `SOUT_ID` int(11) NOT NULL AUTO_INCREMENT,
  `SOUT_NAMA` varchar(20) NOT NULL,
  `SOUT_URL` varchar(150) NOT NULL,
  `SOUT_PESAN` varchar(255) NOT NULL,
  `TANGGAL` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`SOUT_ID`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Saya anggap kalian mengerti cara import tabel diatas, kita lanjutkan dengan membuat 1 file index.html berikut potongan kode dari file tersebut

      <div id=”wrap”>
            <div id=”listdata”></div> <!– Data yang akan diampilkan –>
            <form id=”frm_shoutbox” method=”post” action=””>
                <table>
                    <tr>
                        <td>Nama</td>
                        <td><input name=”nama” id=”nama” type=”text” size=”25″ /></td>
                    </tr>
                    <tr>
                        <td>Website</td>
                        <td><input name=”url” id=”url” type=”text” size=”25″ /></td>
                    </tr>
                    <tr>
                        <td>Message</td>
                        <td><textarea name=”pesan” id=”pesan” cols=”28″ rows=”2″></textarea></td>
                    </tr>
                    <tr>
                        <td colspan=”2″ id=”msg”></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <input type=”submit” value=”Submit” />
                            <input type=”reset” value=”Reset” />
                            <span id=”loading” class=”hidden”><img src=”asset/loading.gif” alt=”loading…” /></span>
                        </td>
                    </tr>
                </table>
            </form>
        </div>

Lalu Buat File untuk memproses data yg di input dan data yang akan di tampilkan, Berikut potongan kode :

//Potongan kode untuk menampilkan data Shoutbox

        require_once(“pagination.class.php”); // include class pagination [silahkan lihat Artikel ini untuk cara penggunaan class pagination]
        $page = new Pagination(); //pendeklarasian class pagination

        $page->lnk = “http://”.$_SERVER[‘SERVER_NAME’].”/sinau/shoutbox/proses.php”; //ubah sesuai path server

        $sql = “SELECT SOUT_ID AS ID, SOUT_NAMA AS NAMA, SOUT_URL AS URL, SOUT_PESAN AS PESAN, DATE_FORMAT(TANGGAL,’%d %b %Y’) AS TGL FROM tbl_shoutbox ORDER BY SOUT_ID DESC”; // variabel query
        $page->paging($sql,5);
        $query    = mysql_query($page->query); //query ke tabel shoutbox
        while($data = mysql_fetch_assoc($query)){
            $row[] = $data;
        }

        if(count($row)>0){
            $data = array(“list”        => $row, “valid”        => TRUE, “paging”       => $page->anchor);
        }else{
            $data = array(“message”     => “Belum ada data.”, “valid”      => FALSE);
        }

        echo json_encode($data); //hasil dari json

 

//Potongan kode untuk input data

if(!empty($_POST[‘nama’])){ // cek nama kosong atau tidak
            if(!empty($_POST[‘pesan’])){ // cek pesan kosong atau tidak
                if(!empty($_POST[‘url’])){ // cek url kosong atau tidak
                    if(filter_var($_POST[‘url’], FILTER_VALIDATE_URL) === FALSE){ // cek validasi URL
                        $data = array(“message”     => “URL tidak Valid.”, “valid” => FALSE);
                    }else{
                        $result = mysql_query(“INSERT INTO tbl_shoutbox (`SOUT_NAMA`,`SOUT_URL`,`SOUT_PESAN`)VALUES(‘”.htmlentities($_POST[‘nama’]).”‘,'”.$_POST[‘url’].”‘,'”.htmlentities($_POST[‘pesan’]).”‘)”); // Input ke sql data yang telah di inputkan
                    }
                }else{
                    $result = mysql_query(“INSERT INTO tbl_shoutbox (`SOUT_NAMA`,`SOUT_PESAN`)VALUES(‘”.htmlentities($_POST[‘nama’]).”‘,'”.htmlentities($_POST[‘pesan’]).”‘)”); // bila URL tidak disini akan menginput ke sql dengan query ini
                }

                if($result){
                    $data = array(“valid” => TRUE);
                }else{
                    $data = array(“message”     => “Gagal Input data.”, “valid” => FALSE);
                }
            }else{
                $data = array(“message”     => “Pesan masih kosong.”, “valid” => FALSE);
            }
        }else{
            $data = array(“message”     => “Nama masih kosong.”, “valid” => FALSE);
        }

        echo json_encode($data); //hasil json

 

DEMO DOWNLOAD