Dibuatnya artikel ini untuk melanjutkan artikel sebelumnya (klik disini bila kalia beum baca), dimana pada shoutbox yang sebelumnya tidak mempunyai fasilitas untuk menghapus testimoni yang dianggap SPAM. Beberapa dari sobat isoweb juga request fasilitas ini untuk mempermudah maintenance website mereka, Tidak banyak perubahan pada code - code lama tapi ada sedikit tambahan code untuk halaman admin.

Berikut beberapa tambahan:

1. Tambahkan css berikut pada file style.css 

.table{width:200px;}

.admin{display:block;width:200px;text-align:right;text-decoration:none;}

.del{position:absolute;right:5px;top:0;background:url(delete.png) no-repeat;width:16px;height:16px;}

.group_list{position:relative;}

input.text_input{width:150px;}

textarea.textarea{width:150px;}

untuk tombol delete.png kalian bisa mencari disini ukuran icon 16x16 pixel dan paste pada folder asset.

 

2. Pada file isoweb-dev.js tambahkan js seperti dibawah

$('#frm_login').submit(function() { // ketika event submit login diklik

 $.ajax({

             type: 'POST'

            ,url: 'proses.php?show=login' //panggil url untuk proses login

            ,data: $(this).serialize()

            ,dataType: 'json'

            ,success: function(data) {

                if(data.valid == true){

                    show_data();

                    $("#admin").hide();

                    $("#frm_login").hide();

                    $("#frm_shoutbox").show();                    

                }else{

                    $("#msg").html("<font color=\"red\">"+data.message+"</font>"); // pesan error yang keluar

                }

            }

            ,error: function(){

                alert('Kesalahan input data.'); // kesalahan proses ajax

            }

        });

        return false;

    });

 

    $('#logout').live("click",function(e){ // ketika tombol logout diklik

        e.preventDefault();

        $.ajax({

             type: 'GET'

            ,dataType : 'json'

            ,url: 'proses.php?show=logout'  //panggil url untuk proses logout

            ,success: function(data) {

                if(data.valid == true){

                    show_data();

                    $("#logout").hide();

                    $("#admin").show();

                }else{

                    $("#msg").html("<font color=\"red\">"+data.message+"</font>"); // Pesan error yang keluar

                }

            }

            ,error: function(){

                alert('Kesalahan delete data.'); // kesalahan proses ajax

            }

        });        

    });

 

    $('.del').live("click",function(e){ // ketika tombol delete diklik

        e.preventDefault();

        var id = $(this).attr("key");

        $.ajax({

             type: 'POST'

            ,url: 'proses.php?show=delete' //panggil url untuk proses delete

            ,data: ({id:id})

            ,dataType: 'json'

            ,success: function(data) {

                if(data.valid == true){

                    show_data();   

                    $("#msg").html("<font color=\"green\">"+data.message+"</font>"); //Pesan sukses yang keluar

                }else{

                    $("#msg").html("<font color=\"red\">"+data.message+"</font>"); //Pesan error yang keluar

                }

            }

            ,error: function(){

                alert('Kesalahan delete data.'); // kesalahan proses ajax

            }

        });        

    }); 

 

3. Tambahan pada file index.html 

<a href="#" class="admin" id="admin">Admin</a>

<a href="#" class="admin" id="logout">Logout</a>

Tambahkan diatas id="list_data "

<form id="frm_login" name="frm_login" method="post" action="" class="hidden">

<table class="table">

<tr>

<td>Username</td>

<td><input name="username" id="username" type="text" class="text_input" /></td>

</tr>

<tr>

<td>Password</td>

<td><input name="password" id="password" type="password" class="text_input" /></td>

</tr>

<tr>

<td></td>

<td>

<input type="submit" value="Submit" />

<input type="reset" value="Cancel" id="cancel" />

<span id="loading" class="hidden"><img src="asset/loading.gif" alt="loading..." /></span>

</td>

</tr>

</table>

</form>

tambahkan dibawah form input testimonial

 

4. Tambahan pada file proses.php 

pada baris kedua pada file proses tambahkan untuk mendeklarasikan pada file tersebut menjalankan session

session_start();

Proses penghapusan testimonial

case 'delete':

if(!empty($_SESSION['username'])): // cek apakah sudah login atau belum

$id = (int)$_POST['id']; //data yang dikirim

$result = mysql_query("DELETE FROM tbl_shoutbox WHERE SOUT_ID = '".$id."'");

if($result):

$msg = array("message"  => "Berhasil menghapus data.", "valid" => TRUE);

else:

$msg = array("message"  => "Gagal menghapus data.", "valid" => FALSE);

endif;            

else:

$msg = array("message"     => "Silahkan login terlebih dahulu.", "valid" => FALSE);

endif;

echo json_encode($msg);

break;

 

Proses logout

case 'logout':

if(!empty($_SESSION['username'])):  // cek apakah sudah login atau belum

session_destroy(); //menghapus semua session

$msg = array("valid" => TRUE);

else:

$msg = array("message"     => "Silahkan login terlebih dahulu.", "valid" => FALSE);

endif;

echo json_encode($msg);

break;

Proses login admin

 

case 'login':

        $username = "admin"; // username

        $password = md5('admin');  //password

        if(empty($_SESSION['username'])): // cek sudah login atau belum

            if(!empty($_POST['username'])): // cek username kosong atau tidak

                if(!empty($_POST['password'])): // cek password kosong atau tidak

                    if($username == htmlentities($_POST['username']) && $password == htmlentities(md5($_POST['password']))): // cek username dan password

                        $_SESSION['username']   = $_POST['username']; // sesuaikan dengan session pada code kalian

                        $msg = array("valid" => TRUE);

                    else:

                        $msg = array("message"     => "Username/Password masih salah.", "valid" => FALSE); // error login

                    endif;

                else:

                    $msg = array("message"     => "Password belum diisi.", "valid" => FALSE); // error password kosong

                endif;

            else:

                $msg = array("message"     => "Username belum diisi.", "valid" => FALSE); //error username kosong

            endif;

        else:

            $msg = array("message"     => "Saat ini anda telah login sebagai administrator.", "valid" => FALSE); //error karena telah login admin

        endif;

        echo json_encode($msg); 

    break;

Penampakan setelah login.

 

untuk mencoba admin 

username/password : admin


DEMO