Facebook Ilmuwebsite

Cara Membuat Popup Yang Memanggil Konten via Ajax

Baik, pembahasan dunia Web Development memang sangat mengasyikan, terlebih lagi jika sudah bertemu dengan ajax-ajax-an. Meski Anda tidak pernah meng-ajax-saya untuk mentraktir saya makan di restoran tapi ya sudahlah.

Baiklah, tutorial kali ini diperuntukkan kepada Anda yang sudah mempelajari Jquery dasar, sampai masuk materi AJAX, php, dan tentunya HTML & CSS. Jika Anda yang belum sampai ke tingkat ini maka silahkan mempelajari dulu. Oke, saya akan promosi dulu. Bagi Anda yang ingin mempelajarinya secara terstruktur dan beraturan kami menyediakan modul pembelajaran dan video tutorial secara lengkap dan berurutan yakni Ilmuwebsite Offline version. Untuk pemesanan silahkan masuk ke http://store.ilmuwebsite.com/produk/koleksi/ilmuwebsite_offline_-_pelajari_web_development_jauh_lebih_mudah. Terima kasih.

Sebelum masuk ke teknis, perlu saya jelaskan konsepnya terlebih dahulu. Popup itu terdiri dari div yang berisi absolute, dia berada di atas sebuah wrapper yang width dan heightnya adalah 100%. Ketika di berikan effect oleh jquery seperti fadeIn maka popup terlihat muncul layaknya popup, padahal itu sebetulnya hanya div yang diberi akal-akalan saja. Begitu juga ketika diberikan fadeout oleh jquery menutuplah popupnya. Lagi-lagi sebetulnya ini menuntut logika seorang web designer maupun seorang web developer.

Nah bagaimana dengan proses mengambil konten via ajax kemudian di masukkan ke dalam popup? Beginilah teknisnya. Sebelumnya silahkan review mengenai bagaimana membuat popup menggunakan jquery tanpa menggunakan plugin, murni menggunakan css dan bantuan jquery. Anda bisa lihat tutorial mengenai pembuatan popupnya di sini http://www.ilmuwebsite.com/membuat-popup-dengan-html-css3-dan-jquery-tanpa-plugin.

Oke ya? Kita akan mempelajari bagaimana popup mampu memanggil konten via ajax, kemudian menyisipkan hasil dari pemanggilannya ke dalam popup. Sebagai contohnya pada kasus kali ini adalah, saya memiliki dua daftar mahasiswa, yang mana hanya muncul NIMnya saja. Sedangkan jika NIM tersebut diklik baru muncul detilnya. Begitu.

Hanya dua script, yakni index.php dan file daftarmahasiswa.php.  Kita akan menggunakan library jquery jquery-1.11.1.min.js.

Untuk index.php skrip lengkapnya adalah sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<title>JQuery Ilmuwebsite</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
  $('a.close').click(function(eve){   
   eve.preventDefault();
   $(this).parents('div.popup').fadeOut('slow');
  });
  
  $('a.linknim').click(function(eve){
   eve.preventDefault();
   $('div.popup').fadeIn('slow');   
   var atr_href = $(this).attr('name');
   
   $.ajax({
    url: "daftarmahasiswa.php",
    type: "POST",
    dataType: "json",
    data: {nim:atr_href},
    beforeSend: function(){
    },
    success: function(data){
     $('em.nimstudent').text(atr_href);
     $('em.namastudent').text(data.nama);
     $('em.tempatstudent').text(data.tempat_lahir);
     $('em.tanggalstudent').text(data.tanggal_lahir);
    }
   });
 
  });
 });
</script>

<style type="text/css">
 body{
  width:100%;
  height:100%;
  font-family:arial;
  margin:0;
  padding:0;
 }
 div.popup{
  position:fixed;
  display:none;
  top:0;
  bottom:0;
  left:0;
  right:0;
  width:100%;
  height:100%;
  background: rgba(0,0,0,.8);
 }
 
 div#box{
  margin:5% auto;
  background:#fff;
  width:50%;
  height:50%;
  -webkit-box-shadow:0 0 15px #000;
  -moz-box-shadow:0 0 15px #000;
  box-shadow:0 0 15px #000;
 }
 
 a.close{
  text-decoration:none;
  color:#000;
  margin:10px 15px 0 0;
  float:right;
  font-family:tahoma;
  font-size:20px;
 }
 
 #listmahasiswa{
  width:60%;
  margin:100px auto ;
  border:1px solid #000;
  height:auto;
  padding:20px;
 }
 
 .linknim{
  display:block;
  padding:10px 20px;
  text-decoration:none;
  border:1px dashed #999;
  color:#000;
  margin:10px 0 10px 0;
 }
 
 .boxdetail{
  padding:20px;
 }
 
 label{
  display:block;
  margin:0 0 10px 0;
 }
 
 em{
  font-style:normal;
 }
</style>

</head>
<body>
 <div class="popup">
  <div id="box">
   <a class="close" href="#">X</a>
   
   
   <div class="boxdetail">
    <h1>Detil Mahasiswa Nim <em class="nimstudent">111</em></h1>
    <label>Nama : <em class="namastudent"></em></label>
    <label>Tempat Lahir : <em class="tempatstudent"></em></label>
    <label>Tanggal Lahir : <em class="tanggalstudent"></em></label>
   </div>
  </div>
  
 </div>
 
 <?php 
  $mahasiswanim = array(1105004,1105096);
 ?>
 
 <div id="listmahasiswa">
  <h1>Daftar Mahasiswa</h1>
  <p>Berikut adalah daftar NIM Mahasiwa, silahkan klik untuk melihat detilnya</p>
  
  <?php foreach($mahasiswanim as $record):?>
   <a href="#" name="<?php echo $record;?>" class="linknim"><?php echo $record;?></a>
  <?php endforeach;?>
  
 </div>
 
</body>
</html>

<!-- Script ini dibuat oleh Loka Dwiartara, Staff Ilmuwebsite.com -->

Untuk daftarmahasiswa.php skrip lengkapnya adalah sebagai berikut :
<?php
 $nim = $_POST['nim'];
 
 $student = array(
     1105004 => array( "nama" => "Dwi", "tempat_lahir" => "Jawa Barat", "tanggal_lahir" => "24-01-1987"),
     1105096 => array( "nama" => "Ria", "tempat_lahir" => "Bali", "tanggal_lahir" => "29-10-1987")
    );
      
 echo json_encode($student[$nim]);
?>

Untuk melihat demonya silahkan klik link di bawah ini

http://www.ilmuwebsite.com/tutorial/jquery/ajaxpopup/

Saya tidak akan menjelaskan kepada Anda perihal source codenya, tapi silahkan ikuti alur logikanya. Semangat. Semoga bermanfaat.


Loka Dwiartara
Admin ilmuwebsite.com
Founder kaffah.biz


Tags

Posting Komentar

2 Komentar

  1. Anonim10 Januari 2015 pukul 13.03

    gagal gan, di klik gk keluar popupnya

    BalasHapus
  2. Anonim10 Januari 2015 pukul 13.05

    Komentar ini telah dihapus oleh pengarang.

    BalasHapus