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


DVD Video Tutorial : Kursus Web Development Komplit Bangun 5 Project Aplikasi Website - Membuat CMS Sendiri Dari Nol, Blog, Portal Berita, Ecommerce, Web Komunitas dengan CodeIgniter 3 JQuery AJAX Bootstrap

Video Tutorial Kursus Web Development Komplit Bangun 5 Project Website ini merupakan ‘penunjuk arah’ agar Anda yang sedang maupun baru akan terjun ke dalam dunia web development yang lebih mendalam memiliki peta perjalanan pembelajaran yang lebih terarah menuju web developer professional. (Disertai pembelajaran dasar HTML CSS, JQuery, PHP & MySQL, CodeIgniter) Dibuat oleh praktisi yang memiliki pengalaman lebih dari 10 tahun di bidang web development (Pemesanan bisa SMS/WA ke 0838 1157 5876, atau bisa pesan secara online di sini)

Admin Ilmuwebsitecom

Phasellus facilisis convallis metus, ut imperdiet augue auctor nec. Duis at velit id augue lobortis porta. Sed varius, enim accumsan aliquam tincidunt, tortor urna vulputate quam, eget finibus urna est in augue.

2 komentar:

  1. gagal gan, di klik gk keluar popupnya

    BalasHapus
  2. Komentar ini telah dihapus oleh pengarang.

    BalasHapus