Membuat Simple Popup Jquery

HTML (popup.html)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Popup</title>
</head>
<script type="text/javascript" src="jquery-latest.js"></script>
<style>

.container{
position:absolute;
width:100%;
left:0;
height:100%;
top:0;
background:#000;
opacity:0.5;
filter:alpha(opacity=50);
z-index:2;
display:none;}

.popup{
position:absolute;
width:50%;
height:50%;
background:#000;
left:50%;
top:20%;
color:#FFF;
margin-left:-400px;
z-index:3;
display:none;}

</style>
<body>

<button class="show">Show Popup</button>
<div class="container"></div>
<div class="popup" align="center"><h2>This is your Popup</h2><br />
<button class="close">Close</button></div>

<script>
$(".show").click(function(){
$(".container").fadeIn(1600);
$(".popup").fadeIn(1600);
});

$(".container").click(function(){
$(".container").fadeOut("slow");
$(".popup").fadeOut("slow");
});

$(".close").click(function(){
$(".container").fadeOut("slow");
$(".popup").fadeOut("slow");
});
</script>

</body>
</html>



Membuat Simple Cart Online / Belanja Online dengan PHP

1. Membuat Database

- Tabel Untuk Barang
CREATE TABLE IF NOT EXISTS `barang` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `namabarang` varchar(200) NOT NULL,
  `harga` varchar(100) NOT NULL,
  `stok` int(10) NOT NULL,
  `gambar` mediumblob NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ;

-Tabel Untuk Pesan
CREATE TABLE IF NOT EXISTS `pesan` (
  `nomor` int(10) NOT NULL AUTO_INCREMENT,
  `idtransaksi` varchar(500) NOT NULL,
  `idproduk` int(10) NOT NULL,
  `jumlah` int(10) NOT NULL,
  `harga` double NOT NULL,
  PRIMARY KEY (`nomor`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=10 ;

-Tambahkan Produk anda Pada tabel Barang


2. Membuat Config.php / api database


PHP (php/Config.php) \\Dalam folder php

<?php
mysql_connect('localhost','root','');
mysql_select_db('blog');
?>

3. Membuat Halaman Home Page / List Barang


PHP (index.php)

<?php
session_start();
if(!isset($_SESSION['cart'])){
    $idt = date("ymdHis");
    $_SESSION['cart'] = $idt;
}
include 'php/config.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Cart</title>
</head>
<body>
<?php
$sql='select * from barang';
$query=mysql_query($sql);
echo '<table><tr><td><strong>No</strong></td><td><strong>Nama Barang</strong></td><td><strong>Harga</strong></td><td><strong>Stok</strong></td><td><strong>Gambar</strong></td><td>Pesan</td></tr>';
$i=1;
while($rows=mysql_fetch_array($query)){
echo '<tr>
    <td>'.$i.'</td>
    <td>'.$rows['namabarang'].'</td>
    <td>'.$rows['harga'].'</td>
    <td>'.$rows['stok'].'</td>
    <td><img src="php/gambar.php?id='.$rows['id'].'" width="50"></td>
<td><a href="php/pesan.php?id='.$rows['id'].'">Add to cart</a></td>
  </tr>';
  $i++;
  }
echo '</table>';
?>
</body>
</html>

4. Membuat Halaman Cart


PHP (php/cart.php) \\dalam folder php

<?php
session_start();
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script>
var ajaxku;
var idnya;
function update(id){
    idnya = id;
    ajaxku = buatajax();
    idinput = "jumlah"+id;
    idloading = "loading"+id;
    jumlah = document.getElementById(idinput).value;
    var url="update.php";
    url=url+"?id="+id;
    url=url+"&jml="+jumlah
    url=url+"&sid="+Math.random();
    ajaxku.onreadystatechange=stateChanged;
    ajaxku.open("GET",url,true);
    ajaxku.send(null);
    document.getElementById(idloading).innerHTML = "<img src=ajax-loader.gif>";
}
function buatajax(){
    if (window.XMLHttpRequest){
        return new XMLHttpRequest();
    }
    if (window.ActiveXObject){
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
    return null;
}
function stateChanged(){
var data;
    if (ajaxku.readyState==4){
        data=ajaxku.responseText;
        subtotalx = document.getElementById("subtotal").innerHTML;
        sub = parseFloat(subtotalx);
        idharga = "harga"+idnya;
        idloading = "loading"+idnya;
        harganya = document.getElementById(idharga).innerHTML;
        hrg = parseFloat(harganya);
        if(data.length>0){
            hargabaru = parseFloat(data);
            subtotalbaru = sub-hrg+hargabaru;
            document.getElementById(idloading).innerHTML = "";
            document.getElementById(idharga).innerHTML = data
            document.getElementById("subtotal").innerHTML = subtotalbaru;
        }
    }
}
function update_cart(){
document.form1.command.value='update';
document.form1.submit();
}
</script>
<body><table border="0" cellpadding="4" cellspacing="0" width="100%">
  <tr>
    <td></td>
    <td><b>No</b></td>
    <td><b>Barang</b></td>
    <td><b>Jumlah</b></td>
    <td><b>Total</b></td>
    <td><b>Action</b></td>
  </tr>
<?php
include 'config.php';
$idtransaksi = $_SESSION['cart'];
$keranjang = mysql_query("select pesan.*, barang.namabarang, barang.id, barang.harga, pesan.nomor from pesan, barang
where pesan.idtransaksi='".$idtransaksi."' and pesan.idproduk=barang.id");
$subtotal = 0;
while($k = mysql_fetch_array($keranjang)){
    echo "<tr><td><img src='gambar.php?id=".$k['id']."' width=50 height=50></td>
    <td>".$k['idproduk']."</td><td class=keranjang>".$k['namabarang']."</td>";
    echo "<td><input type=text size=1 value='".$k['jumlah']."' id=jumlah".$k['nomor'].">
<a href=\"javascript:update(".$k['nomor'].")\">Update</a> <span id=\"loading".$k['nomor']."\"></span></td>
    <td class=keranjang>Rp. <span id=\"harga".$k['nomor']."\">".$k['harga']."</span> &nbsp;</td>
<td><a href='delete.php?no=".$k['nomor']."'>Delete</a></td></tr>";
    $subtotal = $subtotal + $k['harga'];
}
echo "<tr><td colspan=4 align=right><b>Total</b> &nbsp;</td>
<td><b>Rp. <span id=subtotal>$subtotal</span></b></td></tr>";
?>
</table><br />
<a href="../">Terus Belanja</a>
</body>
</html>


5. Membuat Program Untuk Pemesanan


PHP (php/pesan.php) \\dalam folder php

<?php
session_start();
if(!isset($_SESSION['cart'])){
    $idt = date("ymdHis");
    $_SESSION['cart'] = $idt;
}
include 'config.php';
$kode=$_GET['id'];
$barang = mysql_query("select * from tabelbarang where id=$kode");
$barangsql = mysql_fetch_array($barang);
$harga = $barangsql['harga'];

$sql='insert into pesan values(null,"'.$_SESSION['cart'].'","'.$kode.'",1,"'.$harga.'")';
$query=mysql_query($sql);
if($query){
header ("location:cart.php");
}
else{
echo 'gagal, Periksa database';}
?>

6. Menampilkan Gambar Dengan file gambar.php


PHP (php/Gambar.php) \\ Dalam Folder PHP

<?php
include "config.php";
$idFile = $_GET['id'];

$dataGambar = mysql_fetch_array(mysql_query("select * from barang where id='$idFile'"));
$filedata = $dataGambar['gambar'];
header("content-length: ".strlen($filedata));
echo ($filedata);
?>

7. Membuat Program Update Jumlah

PHP (php/update.php) \\dalam folder PHP

<?php
include "config.php";
$id = $_GET['id'];
$jml = $_GET['jml'];
$harga = mysql_query("select barang.harga from barang, pesan
where barang.id=pesan.idproduk and pesan.nomor=$id");
$h = mysql_fetch_array($harga);
$harganya = $h['harga'];
$hargabaru = $harganya*$jml;
$update = mysql_query("update pesan set jumlah=$jml, harga=$hargabaru where nomor=$id");
if($update){
    $ambil = mysql_query("select harga from pesan where nomor=$id");
    $a = mysql_fetch_array($ambil);
    echo $a['harga'];
}else{
    echo "error";
}
?>

8. Membuat Program Delete Pesanan

PHP (php/delete.php) \\ dalam folder PHP

<?php
include 'config.php';
$no=$_GET['no'];
$sql='delete from pesan where nomor='.$no.'';
$query=mysql_query($sql);
if($query){
header ("location:cart.php");
}
else{
echo 'gagal';}
?>




Jquery bagian 23 Traversing .hasClass()

HTML (jquery.html)

<!DOCTYPE html>
<html>
<head>
<style>
p { margin: 8px; font-size:16px; }
.selected { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>This paragraph is black and is the first paragraph.</p>
<p class="selected">This paragraph is red and is the second paragraph.</p>
<div id="result1">First paragraph has selected class: </div>
<div id="result2">Second paragraph has selected class: </div>
<div id="result3">At least one paragraph has selected class: </div>
<script>
$("div#result1").append($("p:first").hasClass("selected").toString());
$("div#result2").append($("p:last").hasClass("selected").toString());
$("div#result3").append($("p").hasClass("selected").toString());
</script>
</body>
</html>

Jquery bagian 22 Traversing .next()

HTML (jquery.html)

<!DOCTYPE html>
<html>
<head>
<style>
span { color:blue; font-weight:bold; }
button { width:100px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div><button disabled="disabled">First</button> - <span></span></div>
<div><button>Second</button> - <span></span></div>
<div><button disabled="disabled">Third</button> - <span></span></div>
<script>$("button[disabled]").next().text("this button is disabled");</script>
</body>
</html>


Jquery bagian 21 Traversing .prevAll()

HTML (jquery.html)

<!DOCTYPE html>
<html>
<head>
<style>
div { width:70px; height:70px; background:#abc;
border:2px solid black; margin:10px; float:left; }
div.before { border-color: red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<script>$("div:last").prevAll().addClass("before");</script>
</body>
</html>

Jquery bagian 20 Traversing .is()

HTML (jquery.html)

<!DOCTYPE html>
<html>
<head>
<style>li { cursor:pointer; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<ul id="browsers">
<li>Chrome</li>
<li>Safari</li>
<li>Firefox</li>
<li>Opera</li>
</ul>
<script>
var $alt = $("#browsers li:nth-child(2n)").css("background", "#00FFFF");
$('li').click(function() {
if ( $alt.is( this ) ) {
$(this).slideUp();
} else {
$(this).css("background", "red");
}
});
</script>
</body>
</html>

Jquery bagian 19 Traversing .find()

HTML (jquery.html)

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p><span>Hello</span>, how are you?</p>
<p>Me? I'm <span>good</span>.</p>
<script>
$("p").find("span").css('color','red');
</script>
</body>
</html>

Hasil : 

Hello, how are you?
Me? I'm good.

Jquery bagian 18 Effect .toggle()

HTML (jquery.html)

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button>Toggle</button>
<p>Hello</p>
<p style="display: none">Good Bye</p>
<script>
$("button").click(function () {
$("p").toggle();
});
</script>
</body>
</html>

Hasil :



Hello

Jquery bagian 17 Effect .animate()

HTML (jquery.html)


<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script></head>
<style>
.navigate{
position:relative;
width:200px;
height:30px;
background:#666;
}
.position{
position:relative;
left:50%;
margin-left:-100px;
width:200px;
height:30px;
top:350px;}
</style>
<body class="body">
<button class="up" style="margin-left:29px;">up</button><br>
<button class="left">left</button>
<button class="right">right</button><br>
<button class="down" style="margin-left:19px;">down</button>
<div class="position"><div class="navigate"></div></div>
<script>
$('.down').click(function(){
$('.navigate').animate({
'top':'+=50px'}, "slow");
});
$('.right').click(function(){
$('.navigate').animate({
'left':'+=50px'}, "slow");
});
$('.up').click(function(){
$('.navigate').animate({
'top':'-=50px'}, "slow");
});
$('.left').click(function(){
$('.navigate').animate({
'left':'-=50px'}, "slow");
});
</script>
</body>
</html>



Jquery bagian 16 Events .unbind()

HTML (unbind.html)

<!DOCTYPE html>
<html>
<head>
  <style>
.bind { margin:5px; }
</style>
  <script src="jquery-latest.js"></script>
</head>
<body>
  <button id="theone">Tombol Tidak Berfungsi</button>
<button id="bind" class="bind">Bind klik</button>
<button id="unbind" class="unbind">Unbind klik</button>
<div style="display:none;" class="respon">Fungsi Bind, FadeOut!</div>
<script>
function aClick() {
$(".respon").show().fadeOut(1900);
}
$("#bind").click(function () {
$("#theone").click(aClick)
  .text("Fungsi Bind");
});
$("#unbind").click(function () {
$("#theone").unbind('click', aClick)
  .text("Fungsi Unbind!");
});
</script>
</body>
</html>


Jquery bagian 15 Events .bind()


HTML (bind.html)

<!DOCTYPE html>
<html>
<head>
  <style>
.bind { color:red; }
.butt { color:blue; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p class="bind">Custom event, menyimpan fungsi dengan bind !</p>
<button>Tombol ini menggunakan fungsi trigger</button>
<span style="display:none;" class="butt"></span>
<script>

$(".bind").bind("myCustomEvent", function(e, Nama, myValue){
$(this).text("Halo, " + Nama +"!");
$(".butt").stop().css("opacity", 1)
.text("Nama anda adalah = " + Nama)
.fadeIn(30).fadeOut(1000);
});
$("button").click(function () {
$(".bind").trigger("myCustomEvent", [ "Anonymous" ]);
});
</script>
</body>
</html>


Download File

Jquery bagian 14 Events .trigger()

HTML (jquery.html)

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("input").select(function(){
    $("input").after("Text selected ");
  });
  $("button").click(function(){
    $("input").trigger("select");
  });
});
</script>
</head>
<body>
<input type="text" name="FirstName" value="http://www.qwebsite.blogspot.com" />
<br />
<button>Highlight value http://www.qwebsite.blogspot.com</button>
</body>
</html>



Jquery bagian 13 Events .live()


HTML (live.html)

<!DOCTYPE html>
<html>
<head>
  <style>
  .deep {font-weight:bold; cursor:pointer; padding:1px; }
  .deep.over {color: #ccc; }
  .pan { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p class="deep">Klik disini !</p>
  <span class="pan"></span>
<script>
$(".deep").live({
  click: function() {
    $(this).after("<p class='deep'>Paragrap lain!</p>");
  },
  mouseover: function() {
    $(this).addClass("over");
  },
  mouseout: function() {
    $(this).removeClass("over");
  }
});
</script>
</body>
</html>


Jquery bagian 12 Events .click()

HTML (jquery.html)

<!DOCTYPE html>
<html>
<head>
<style>
p { color:blue; margin:5px; cursor:pointer; }
p.onhover { background:white; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>Klik disini</p>
<p>Klik disini</p>
<p>Klik disini</p>
<script>
$("p").click(function () {
$(this).slideUp();
});
$("p").hover(function () {
$(this).addClass("onhover");
}, function () {
$(this).removeClass("onhover");
});
</script>
</body>
</html>

Hasil : 

Klik disini
Klik disini
Klik disini

Download File