Assalamu 'alaikum wr.wb.
Selamat apa saja bagi para pecandu internet dan penikmat coding, jumpa lagi di blog ini. Kali ini akan membahas mengenai membuat pop modal dinamis. Seberapa penting pop up modal ? Penting bagi anda yang menginginkan website lebih menarik, interaktif dan lebih entertainment. Ada banyak library untuk membuat pop up modal, tapi sebagai contoh saya menggunakan library pop modal mike-modal dan bisa anda download disini, untuk library lain silahkan searching sendiri.
Lanjut ke implementasinya,
1. Buat database dengan nama misalkan modal, dan buat tabel misalkan produk.
2. Buat koneksi ke database dengan nama misalkan koneksi.php
<?php
$host="127.0.0.1";
$user="root";
$pass="";
$database="modal";
$koneksi=new mysqli($host,$user,$pass,$database);
if (mysqli_connect_errno()) {
trigger_error('Koneksi ke database gagal: ' . mysqli_connect_error(), E_USER_ERROR);
}
?>
3. Buat file index.php nya, seperti dibawah ini :
<!doctype html>
<html lang="en">
<head>
<title>Contoh</title>
<link href="bootstrap.css" media="all" rel="stylesheet" type="text/css">
<link type="text/css" rel="stylesheet" media="all" href="lib/mikes-modal.css">
<meta content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" name="viewport" />
<meta content="Mike Silvis" name="author" /><meta content="!" name="fragment" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="lib/mikes-modal.min.js" type="text/javascript"></script>
</head>
<body>
<p>
<?php
include"koneksi.php";
$produk=mysqli_query($koneksi,"SELECT * FROM produk");
while($p=mysqli_fetch_array($produk))
{
echo"<a class='open-mikes-modal' id='".$p['produk_id']." '>$p[produk_name]</a>";
}
?>
</p>
<div class="mikes-modal" id="myModal">
</div>
</body>
</html>
4. Untuk mengirim variabel ditambahkan script ajax dan diletakkan di bawah </div> dan diatas </body>. script nya seperti berikut :
<script>
$(document).ready(function () {
$(".open-mikes-modal").click(function(e) {
var x = $(this).attr("id");
$.ajax({
url: "produk_detail.php",
type: "GET",
data : {data1: x,},
success: function (ajaxData){
$("#myModal").html(ajaxData);
$("#myModal").modal('show');
}
});
});
});
</script>
5. Lalu buat file sesuai url yang ditulis di script yang di nomor 4 yaitu produk_detail.php untuk menampilkan datanya.
<?php
include"koneksi.php";
$data1=$_GET['data1'];
$detail_produk=mysqli_query($koneksi,"SELECT * FROM produk WHERE produk_id='$data1'");
$dp=mysqli_fetch_array($detail_produk);
echo"<img src='images/cover/".$dp['produk_cover_image']."'/>
<div class='description'>
<div class='title-area'>
<h4>".$dp['produk_name']."</h4>
</div>
</div>";
?>
Nah.cukup mudahkan. silahkan dicoba dan lihat hasilnya. Insya Allah bisa.. mohon maaf jika ada kesalahan, mohon sarannya jika masih ada yang perlu diperbaiki, silahkan bertanya jika ada pertanyaan, akan dijawab semaksimal mungkin yang saya bisa, dan jangan menghujat.
Wassalamu 'alaikum Wr. wb.
5 komentar:
bermanfaat sekali :)
sip
Ingin beruntung seperti temen-temen kamu?
Langsung saja kamu mendaftar di AsliBandar dan rasakan permainan yang akan membuat hidupmu berwarna.
Dengan Deposit yang terjangkau kamu berkesempatan menangkan Jackpot setiap harinya.
Ingin beruntung seperti temen-temen kamu?
Langsung saja kamu mendaftar di www.AsliBandar.net dan rasakan permainan yang akan membuat hidupmu berwarna.
Dengan Deposit yang terjangkau kamu berkesempatan menangkan Jackpot setiap harinya.
Untuk Info lebih lanjut silahkan menghubungi kami melalui :
Pin BB : 2B3C34F4
YM : Aslibandar_CS
Skype : AsliBandar
Telp : +855882388666
FB : AsliBandar
ga nongol apa2... posting jgn setengah2 dong bro
Halo Bossku ^^
Segera Daftarkan ID di skb288,com
Menyediakan 7 Permain Hanya Dengan 1 ID
Serta Tersedia Promo Menarik
Bonus Turn Over Terbesar
Bonus Refferal Seumur Hidup
Minimal Deposit Hanya 20Rb
BBM : D8E87241
WA : +62 878 8707 6927
Di Tunggu Kehadirannya Bossku ^^
Posting Komentar