WEBSITE TOKO ONLINE TRADINGCARDGAME.

COM

Oleh: ADI GUNA SODIKIN 4311010017

SERVER SIDE PROGRAMMING TEKNIK INFORMATIKA TEKNIK ELEKTRO POLITEKNIK NEGERI JAKARTA 2013

Daftar Isi

Daftar Isi ............................................................................................................. 1 Overview System ................................................................................................ 2 Perancangan ........................................................................................................ 3 Tampilan User Interface ...................................................................................... 8 Program ............................................................................................................... 13

Overview
Sistem ini dimulai saat client masuk kedalam web, setelah itu user tanpa log in dapat

melihat-lihat katalog yang tersedia dan proses output ketika data katalog dimunculkan , aplikasi web mengambil data yang berada di dalam database dan hasilnya akan di tampilkan data yang berupa gambar, harga dan keterangan barang. user memilih log in jika sudah memiliki akun dan bisa memilih sign up jika belum menjadi anggota, jika sign up maka user harus memasukkan data yang diminta pada kolom-kolom yang disediakan. setelah itu, sistem mengolah data dan menyimpan di database dan mengirim konfirmasi ke halaman admin lalu jika admin telah approve, maka client dapat log in. jika log in maka data user dan pasword akan di cek melalui database, jika sama akan dapat masuk dan jika tidak sama, diminta untuk mengulang kembali. Setelah itu client/anggota dapat melihat-lihat katalog yang tersedia dan proses output ketika data katalog dimunculkan dengan cara aplikasi web mengambil data yang berada di dalam database dan hasilnya akan di tampilkan data yang berupa gambar, harga dan keterangan barang. dan jika berminat, buyer hanya tinggal klik Add To Cart pada barang yang diinginkan untuk dimasukkan kekeranjang. Dan ketika ingin benar-benar membeli, user dapat Klik checkout untuk melihat total yang harus dibayar ke rekening yang telah tersedia, dan ketika sudah mengirim ke rekening tersebut, buyer dapat chat kepada Admin untuk konfirmasi bahwa uang telah dikirim dan admin telah menerima. Lalu ketika sudah selesai, barang yang ada di shopping cart akan hilang dan masuk kedalam history pembelian member. Dan stok pada catalog akan berkurang sesuai dengan item yang telah dibeli oleh buyer. Setelah itu barang akan dikirim oleh seller. Pada website ini memiliki halaman admin, dan admin diwajibkan login terlebih dahulu dihalaman depan admin terdapat notifikasi member baru dan pembeli baru yang butuh konfirmasi dalam pembayaran ataupun member yang ingin bergabung, admin juga bisa menghapus data member, admin juga bisa menggunakan fasilitas search, pada halaman admin juga menampilkan banyak data dengan menggunakan pages number yang berguna untuk menampilkan beberapa data saja pada satu halaman. Pada website ini menggunakan satu database yang memiliki lima table, pertama table admin yang menyimpan username, email dan password admin, kedua adalah table data yang menyimpan data member, ketiga adalah tabel data yang menyimpan data catalog, keempat adalah tabel data yang menyimpan history dari pembelian semua member, serta table shoutbox yang menyimpan data fitur chat dalam website halaman admin dan member yang telah melakukan login.

Perancangan Sistem
Activity Diagram Admin Use Case Diagram

Activity Diagram Member

Deployment Diagram

Schema database Diagram

ScreenShot User Interface

Catalog member

Input Data

View Member

Index Admin

Shopping Cart

Catalog Member

10

Index Member

Index Login

11

Contact Us

How To Buy

12

Catalog Non Member

Index Non Member

13

Script Program PHP

Css/index.css
body { padding:0; margin:0; } .header{ margin:0; padding:0; height:55px; width:100%; background-color:#000000; position:fixed; z-index:104; } .menui li { float:left; display: block; } .logo{ vertical-align: top; float:left; } #cari{} #fieldset{} #m{ padding-left:30px; } .menui li a{ text-decoration:none; display: block; text-transform: uppercase; text-shadow: 0px 0px 2px #ffffff; color: #ffffff; margin: 3px; padding-left:30px; letter-spacing: 1px; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; } .menui:hover li a{ text-decoration:none; text-shadow: 0px 0px 3px #ffffff; color: transparent;

14

} .menui li a:hover{ text-decoration:none; color:#fff; text-shadow: 0px 0px 2px #ffffff; } .login li { float:right; display: block; } .login li a{ text-decoration:none; text-transform: uppercase; text-shadow: 0px 0px 2px #ffffff; color: #ffffff; padding-right: 30px; margin: 3px; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; } .login:hover li a{ text-decoration:none; text-shadow: 0px 0px 3px #ffffff; color: transparent; } .login li a:hover{ text-decoration:none; color:#fff; text-shadow: 0px 0px 2px #ffffff; } .footer { font-size:16px; padding-top:10px; position:fixed; left:0; bottom:0; width:100%; height:30px; display:block; background:rgba(0,0,0,0.9); color:white; } .footerRight{ font-size:16px; padding-top:10px; position:fixed; left:1220px; bottom:0; width:100%; height:30px; display:block; color:white;

15

} .left{ float:left; height:745px; padding-top:100px; width:25%; background-attachment: fixed; } .center{ opacity:0.9; float:left; height:auto; padding-top:50px; width:50%; } .isi{ padding:100px 60px 80px 80px; height:auto; } .isi1{ padding:100px 60px 80px 10px; height:auto; } .right{ float:right; height:745px; padding-top:100px; width:25%; background-attachment: fixed; } #slides { position:absolute; width:882px; height:307.2px; z-index:100; } .slides_container { margin-top:10px; width:670px; height:307.2px; overflow:hidden; position:absolute; left: 100px; } .slides_container div.slide { width:670px; height:307.2px; padding-right:60px; padding-top:3px; display:block; }

16

/* Next/prev buttons */ #slides .prev { position:absolute; top: 130px; left: 76px; right:90px; width:0px; height:47px; display:block; z-index:101; } #slides .next { position:absolute; top: 130px; right: 112px; width:0px; height:47px; display:block; z-index:101; } .pagination { margin:26px auto 0; width:100px; } .pagination li { float:left; margin:0 1px; list-style:none; } .pagination li a { display:block; width:12px; height:0; padding-top:12px; background-image:url(img/pagination.png); background-position:0 0; float:left; overflow:hidden; } .pagination li.current a { background-position:0 -12px; } #product_show { width:100%; height:400px; overflow:hidden; } #product_show_1 {

17

width:100%; height:400px; float:center; overflow:hidden; background: url("../img/2.gif") no-repeat center center ; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #product_show_1_description { padding:10px; margin-top:100px; margin-right:50px; float:right; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; opacity:0.6; background-color:white; } #product_show_2 { width:100%; height:400px; overflow:hidden; float:left; background: url("../img/3.gif") no-repeat center center ; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-color:blue; } #product_show_3 { width:100%; height:400px; overflow:hidden; float:left;

18

background: url("../img/4.gif") no-repeat center center ; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-color:yellow; } #product_show_4 { width:100%; height:400px; overflow:hidden; float:left; background: url("../img/5.gif") no-repeat center center ; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-color:green; } #slide_product_1 { float:left; width:25%; height:20px; background-color:#979797; } #slide_product_2 { float:left; width:25%; height:20px; background-color:#860a00; } #slide_product_3 { float:left; width:25%; height:20px; background-color:black; } #slide_product_4 {

19

float:right; width:25%; height:20px; background-color:orange; } #contactus{ width:100%; height:auto; }

Connect.php
<?php $connect = mysql_connect("localhost","root","root"); if (!$connect) { die('Could not connect: ' . mysql_error()); } mysql_select_db("tradingcardgame", $connect); ?>

appvars.php
<?php define('GW_UPLOADPATH', 'images/'); define('GW_MAXFILESIZE', 10240000); define('MM_MAXIMGWIDTH', 5000); define('MM_MAXIMGHEIGHT', 5000); ?> // 100 KB // 120 pixels // 120 pixels

Sessionstart.php
<?php session_start(); // If the session vars aren't set, try to set them with a cookie if (!isset($_SESSION['email']) || !isset($_SESSION['username'])) { if (isset($_COOKIE['email'])) { //$_SESSION['Password'] = $_COOKIE['Password']; $_SESSION['email'] = $_COOKIE['email']; } } ?>

Header.php
<?php include'sessionstart.php';

20

include'connect.php'; ?> <?php // If the user isn't logged in, try to log them in if (!isset($_SESSION['nama'])) { if (isset($_POST['submit'])) { // Connect to the database // Grab the user-entered log-in data $user_email = $_POST['email']; $user_password = $_POST['password']; if (!empty($user_email) && !empty($user_password)) { // Look up the email and password in the database $query = "SELECT nama, email FROM member WHERE email = '$user_email' AND password_n = SHA1('$user_password') and approve= 'y'"; $hasil=mysql_query($query); $cek=mysql_num_rows($hasil); $querya = "SELECT nama_admin, username FROM admin WHERE username = '$user_email' AND password = SHA1('$user_password') "; $hasila=mysql_query($querya); $ceka=mysql_num_rows($hasila); if ( $cek == 1) { // The log-in is OK so set the user ID and email session vars (and cookies), and redirect to the home page $row = mysql_fetch_array($hasil); $_SESSION['nama'] = $row['nama']; $_SESSION['email'] = $row['email']; setcookie('nama', $row['nama'], time() + (60 * 60 * 24 * 30)); // expires in 30 days setcookie('email', $row['email'], time() + (60 * 60 * 24 * 30)); // expires in 30 days $home_url = 'http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['PHP_SELF']) . '/index.php'; header('Location: ' . $home_url); } else if ($ceka == 1) { $row = mysql_fetch_array($hasila); $_SESSION['nama_admin'] = $row['nama_admin']; //$_SESSION['username'] = $row['username']; //setcookie('nama_admin', $row['nama_admin'], time() + (60 * 60 * 24 * 30)); // expires in 30 days //setcookie('username', $row['username'], time() + (60 * 60 * 24 * 30)); // expires in 30 days $home_url = 'http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['PHP_SELF']) . '/admin/index.php'; header('Location: ' . $home_url); } else { // The email/password are incorrect so set an error message $error_msg = 'Sorry, you must enter a valid email and password to log in.'; } } else { // The email/password weren't entered so set an error message $error_msg = 'Sorry, you must enter your email and password to log in.'; } } }

21

?> <html> <head> <title> Trading Card Game</title> <script src="js/jquery.min.js"></script> <script src="js/slides.min.jquery.js"></script> <link rel="stylesheet" type="text/css" href="css/index.css" />

Menu.php
<body> <div> <div class="header"> <div class="logo" > <a href="index.php"><img id="logo1" src="images/logo.png" height="56.875px" width="157,5px" title="Logo YuGi-Oh!"/></a> </div> <div> <ul class="menui"> <li><a href="catalog.php">Catalog</a></li> <li><a href="howtobuy.php">How To Buy</a></li> <li><a href="contact.php">Contact Us</a></li> <li id="cari"><a href="#">Search</a></li> <li id="m"><form method="post" action="search.php" ><table> <input type="text" name="cari" id="cari" title="masukkan nama kartu yang anda ingin cari"><input type="submit" value="search"> </table></form> </li> </ul> </div> <div> <ul class="login"> <?php if (isset($_SESSION['nama'])) { ?> <li><a href="logout.php">Log Out</a></li> <li><a>Welcome,</a><a href="signup.php" ><?php if(isset($_SESSION['nama'])){echo $_SESSION['nama'];}else{echo $_SESSION['nama_admin'];}?></a></li> <li><a href="history.php">History</a></li> <?php } else{ ?> <li id="login"><a href="#">Log In</a></li> <li><a href="signup.php">Sign Up</a></li> <?php } ?> </ul> </div> </div>

22

<script> $("#m").hide(); $("#cari").click(function(){ $("#m").toggle("slow"); $("#cari").hide(); }); </script>

Foot.php
<div class="footer"> <div> <center> <font>Copyright &copy; 2013</font> </center> </div> <div class="footerRight"> <img src="img/fb.png" height="21px" width="21,5px" title="TradingCardGame"/> <img src="img/twit.png" height="21px" width="21,5px" title="@TradingCardGame"/> <img src="img/word.png" height="21px" width="21,5px" title="Yugioh.wikia.com"/> </div> </div> </div> </body> </html>

Left.php
<div class="left"> <?php if (isset($_POST['clear']) == true) { if (isset($_POST['todelete']) == true ){ foreach ($_POST['todelete'] as $delete_id) { $query = "DELETE FROM history WHERE Id = $delete_id"; mysql_query($query, $connect) or die('Error querying database.'); } $home_url = 'http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['PHP_SELF']) . '/catalog.php'; header('Location: ' . $home_url); }else{ echo"<script>alert('silahkan pilih data yang ingin dibatalkan')</script>"; } } else if (isset($_POST['checkout']) == true) { $home_url = 'http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['PHP_SELF']) . '/checkout.php'; header('Location: ' . $home_url); } ?>

23

<?php // Clear the error message $error_msg = ""; // Insert the page header $page_title = 'Log In'; // If the session var is empty, show any error message and the login form; otherwise confirm the log-in if (empty($_SESSION['email'])) { echo '<p class="error">' . $error_msg . '</p>'; ?> <h1 id="s"> Shopping Cart</h1> <fieldset id="f"> <legend><h1> Shopping Cart</h1></legend> <p id="cart">You must login First</p> </fieldset> <?php } else { // Confirm the successful log-in //echo('<p class="login">You are logged in as ' . $_SESSION['nama'] . '.</p>'); // Retrieve data from database $id = $_SESSION['email']; $sql="SELECT * FROM history WHERE email = '$id' and bayar is null"; //$sql="select idkartu,namakartu,gambarkartu,rarity,stok,harga,jeniskartu from kartu "; $result = mysql_query($sql,$connect); ?> <fieldset > <legend><h1> Shopping Cart</h1></legend> <form align="center"action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data" > <?php echo "<table align='center' width='100%'> <tr> <th>No.</th> <th>cancel</th> <th>Gambar</th> <th>Jumlah</th> <th>Harga</th> </tr>"; $a=1; while ($data = mysql_fetch_array($result)) { echo "<tr>"; echo "<td>". $a++ ."</td>"; echo "<td ><center>" . '<input type="checkbox" value="' . $data['Id'] . '" name="todelete[]" />' . "</center></td>"; echo "<td><center><img src='".$data['gambarkartu']; echo" ' width='70' height='100' /></center></td>"; echo "<td><center>".$data['jumlah'] ."</center></td>"; echo "<td><center>Rp.".$data['harga_kartu'] ."</center></td>"; echo "</tr>";

24

} echo'</table>'; ?> <input type="submit" name="checkout" value ="Checkout" > <input type="submit" name="clear" value ="Cancel" > </fieldset> </form> <?php } ?> </div> <script> $("#f").hide(); $("#s").click(function(){ $("#f").toggle("slow"); $("#s").toggle(); }); </script>

Right.php
<div class="right"> <?php // Clear the error message $error_msg = ""; // Insert the page header $page_title = 'Log In'; // If the session var is empty, show any error message and the log-in form; otherwise confirm the log-in if (empty($_SESSION['nama'])) { echo '<p class="error">' . $error_msg . '</p>'; ?> <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>"> <fieldset id="fieldset"> <legend>Log In</legend> <table> <tr><td><label for="email">Email:</label></td> <td><input type="text" name="email" value="<?php if (!empty($user_email)) echo $user_email; ?>" /></td> </tr> <tr><td><label for="password">Password:</label></td> <td><input type="password" name="password" /></td> </tr> </table> <input type="submit" value="Log In" name="submit" /> </fieldset> </form> <?php } else {

25

// Confirm the successful log-in //echo('<p class="login">You are logged in as ' . $_SESSION['nama'] . '.</p>'); ?> <fieldset> <legend>Log In</legend> <p class="login">You are logged in as <?php echo $_SESSION['nama'];?></p> <iframe id="shoutbox" style="width: 100%; height: 450px; overflow: hidden;" src="shoutbox/shoutbox.php" height="240" width="320" frameborder="0" scrolling="no"></iframe> </fieldset> <?php } ?> </div> <script> $("#fieldset").hide(); $("#login").click(function(){ $("#fieldset").toggle("slow"); }); </script>

index.php
<?php include'header.php'; ?> </head> <?php include'menu.php'; ?> <div> <?php include'left.php'; ?> <div class="center"> <div id="product_show"> <div id="product_show_1"> <span id="product_show_1_description"> <h3>Introducing New More Eficient <br>Sistem Information<br></h3> The Brand New </span> </div> <div id="product_show_2"> <span id="product_show_1_description">HAHAI</span> </div> <div id="product_show_3"> <span id="product_show_1_description">HAHAI</span> </div> <div id="product_show_4">A

26

<span id="product_show_1_description">HAHAI</span> </div> </div> <div id="slide_controler"> <div id="slide_product_1"></div> <div id="slide_product_2"></div> <div id="slide_product_3"></div> <div id="slide_product_4"></div> </div> <script src="js/index.js"></script> </div> <?php include'right.php'; ?> </div> <?php include'foot.php'; ?>

Catalog.php
<?php include('header.php'); ?> </head> <?php include_once('menu.php'); ?> <?php include'left.php'; ?> <div class="center"> <div class="isi1"> <?php function generate_page_links( $cur_page, $num_pages) { $page_links = ''; // If this page is not the first page, generate the "previous" link if ($cur_page > 1) { $page_links .= '<a href="' . $_SERVER['PHP_SELF'] . '?page=' . ($cur_page - 1) . '"><-</a> '; } else { $page_links .= '<- '; } // Loop through the pages generating the page number links

27

for ($i = 1; $i <= $num_pages; $i++) { if ($cur_page == $i) { $page_links .= ' ' . $i; } else { $page_links .= ' <a href="' . $_SERVER['PHP_SELF'] . '?page=' . $i . '"> ' . $i . '</a>'; } } // If this page is not the last page, generate the "next" link if ($cur_page < $num_pages) { $page_links .= ' <a href="' . $_SERVER['PHP_SELF'] .'?page=' . ($cur_page + 1) . '">-></a>'; } else { $page_links .= ' ->'; } return $page_links; } // Calculate pagination information $cur_page = isset($_GET['page']) ? $_GET['page'] : 1; $results_per_page = 2; // number of results per page $skip = (($cur_page - 1) * $results_per_page); $queryList = "SELECT * FROM kartu ORDER BY idkartu"; // Query to get the total results $result = mysql_query($queryList,$connect); $total = mysql_num_rows($result); $num_pages = ceil($total / $results_per_page); // Query again to get just the subset of results $query = $queryList . " LIMIT $skip, $results_per_page"; $result = mysql_query($query,$connect); // Generate navigational page links if we have more than one page echo "<table > <tr> <th width='400'>Gambar Kartu</th> <th colspan='3' width='800'>Detail Kartu</th> </tr>"; while ($data = mysql_fetch_array($result)) { echo "<tr>"; echo "<td rowspan='6' ><center><img src='".$data['gambarkartu']; echo" ' width='140' height='200' /></center></td>"; echo "</tr>"; echo "<tr>"; echo "<td>Nama: </td>"; echo "<td colspan='2'>".$data['namakartu'] ." </td>"; echo "</tr>"; echo "<tr>"; echo "<td>Jenis Kartu: </td>"; echo "<td colspan='2'>".$data['jeniskartu'] ." </td>";

28

echo echo echo echo </td>"; echo echo echo echo echo echo echo echo </td>"; 0){

"</tr>"; "<tr>"; "<td>Rarity: </td>"; "<td colspan='2'>".$data['rarity'] ." "</tr>"; "<tr>"; "<td>Stok: </td>"; "<td colspan='2'>".$data['stok'] ." </td>"; "</tr>"; "<tr>"; "<td>Harga: </td>"; "<td colspan='1'>Rp.".$data['harga'] ."

if ( isset($_SESSION['nama']) && $data['stok'] == echo "<td><center>Stok Kosong</center></td>"; } else if(isset($_SESSION['nama']) && $data['stok'] << 1){ echo "<td><a href='beli.php?id=" . $data['idkartu'] . "'><p align='center'>Add To Cart</p></a></td>"; } else { } echo "</tr>"; } echo "</table>"; ?> <center> <?php if ($num_pages > 1) { echo generate_page_links($cur_page, $num_pages); } mysql_close($connect); ?> </center> </div> </div> <?php include'right.php'; ?> </div> <?php include'foot.php'; ?>

how to buy.php
<?php include'header.php'; ?> <?php include'menu.php'; ?>

29

<div> <?php include'left.php'; ?> <div class="center"> <div class="isi" > <p><font ><h1>Cara membeli di situs ini :</h1> <h3>1. daftarkan diri anda menjadi member tradingcardgame.com</h3> <h3>2. masukkan biodata anda dengan benar terutama alamat(karena akan otomatis akan dipakai untuk alamat pengiriman).</h3> <h3>3. pilih kartu yang ingin di beli pada catalog dan Add To Cart untuk menambahkan kartu yang ingin dimasukan Shopping Cart.</h3> <h3>4. jika sudah selesai, klik tombol Checkout pada Shopping cart untuk melihat berapa total yang akan dibeli.</h3> <h3>5. setalah yakin akan membeli kartu tersebut, lalu transfer uang anda ke rekening kami (Mandiri Rec: 1000000000000 a.n Tradingcardgameshop) sesuai dengan total harga yang tercantum.</h3> <h3>6. setelah mentransfer, harap chat pada admin untuk confirmasi pembayaran.</h3> <h3>7. setelah uang dicek dan diterima oleh tradingcardgame shop, barang akan dikirim sesuai dengan alamat yang anda masukan ke dalam biodata anda.</h3></font></p> </div> </div> <?php include'right.php'; ?> </div> <?php include'foot.php'; ?>

Contact.php
<?php include'header.php'; ?> <?php include'menu.php'; ?> <div> <?php include'left.php';

30

?> <div class="center"> <div class="isi" > <center> <font> <img id="contactus" src="images/logo.png" title="Logo Yu-Gi-Oh!"/> <h1 id="contactus">Mailling address : tradingcardgame@gmail.com</h1> <h1 id="contactus">Created By. GooseSoft Corp.</h1> </font> </center> </div> </div> <?php include'right.php'; ?> </div> <?php include'foot.php'; ?>

Search.php
<?php include'header.php'; ?> </head> <?php include'menu.php'; ?> <div> <?php include'left.php'; ?> <div class="center"> <?php function build_query($katakunci) { $search_query = "SELECT * FROM kartu"; // Extract the search keywords into an array $clean_search = str_replace(',', ' ', $katakunci); $search_words = explode(' ', $clean_search); $final_search_words = array(); if (count($search_words) > 0) { foreach ($search_words as $word) { if (!empty($word)) { $final_search_words[] = $word; } }

31

} $where_list = array(); if (count($final_search_words) > 0) { foreach($final_search_words as $word) { $where_list[] = "namakartu LIKE '%$word%'"; } } $where_clause = implode(' OR ', $where_list); if (!empty($where_clause)) { $search_query .= " WHERE $where_clause"; } return $search_query; } function generate_page_links($katakunci,$cur_page, $num_pages) { $page_links = ''; // If this page is not the first page, generate the "previous" link if ($cur_page > 1) { $page_links .= '<a href="' . $_SERVER['PHP_SELF'] . '?cari=' . $katakunci . '&page=' . ($cur_page - 1) . '"><-</a> '; } else { $page_links .= '<- '; } // Loop through the pages generating the page number links for ($i = 1; $i <= $num_pages; $i++) { if ($cur_page == $i) { $page_links .= ' ' . $i; } else { $page_links .= ' <a href="' . $_SERVER['PHP_SELF'] . '?cari=' . $katakunci . '&page=' . $i . '"> ' . $i . '</a>'; } } // If this page is not the last page, generate the "next" link if ($cur_page < $num_pages) { $page_links .= ' <a href="' . $_SERVER['PHP_SELF'] . '?cari=' . $katakunci . '&page=' . ($cur_page + 1) . '">-></a>'; } else { $page_links .= ' ->'; } return $page_links; } // Grab the sort setting and search keywords from the URL using GET if(isset($_GET['cari'])) $katakunci = $_GET['cari']; elseif(isset($_POST['cari'])) $katakunci = $_POST['cari']; else $katakunci =""; // Calculate pagination information $cur_page = isset($_GET['page']) ? $_GET['page'] : 1;

32

$results_per_page = 2; // number of results per page $skip = (($cur_page - 1) * $results_per_page); $query = build_query($katakunci); $result = mysql_query($query,$connect); if($result) $total = mysql_num_rows($result); else $total=0; $num_pages = ceil($total / $results_per_page); // Query again to get just the subset of results $query = $query . " LIMIT $skip, $results_per_page"; $result = mysql_query($query,$connect); // Generate navigational page links if we have more than one page if ($total > 0) { echo '<p>Ada '.$total.' data yang sesuai.</p>'; echo "<table > <tr> <th width='400'>Gambar Kartu</th> <th colspan='2' width='800'>Detail Kartu</th> </tr>"; while ($data = mysql_fetch_array($result)) { echo "<tr>"; echo "<td rowspan='6'><center><img src='".$data['gambarkartu']; echo" ' width='140' height='200' /></center></td>"; echo "<td>ID Kartu: </td>"; echo "<td>".$data['idkartu'] . "</td>"; echo "</tr>"; echo "<tr>"; echo "<td>Nama: </td>"; echo "<td>".$data['namakartu'] ." </td>"; echo "</tr>"; echo "<tr>"; echo "<td>Jenis Kartu: </td>"; echo "<td>".$data['jeniskartu'] ." </td>"; echo "</tr>"; echo "<tr>"; echo "<td>Rarity: </td>"; echo "<td>".$data['rarity'] ." </td>"; echo "</tr>"; echo "<tr>"; echo "<td>Stok: </td>"; echo "<td>".$data['stok'] ." </td>"; echo "</tr>"; echo "<tr>"; echo "<td>Harga: </td>"; echo "<td>".$data['harga'] ." </td>"; if ( isset($_SESSION['nama']) && $data['stok'] == 0){ echo "<td><center>Stok Kosong</center></td>"; } else if(isset($_SESSION['nama']) && $data['stok'] << 1){ echo "<td><a href='beli.php?user_id=" . $data['idkartu'] . "'><p align='center'>Beli</p></a></td>"; } else { }

33

echo "</tr>"; } echo "</table>"; } else { // menampilkan pesan zero data echo 'Maaf, hasil pencarian tidak ditemukan.'; } if ($num_pages > 1) { echo generate_page_links($katakunci, $cur_page, $num_pages); } mysql_close($connect); ?> </div> <?php include'right.php'; ?> </div> <?php include'foot.php'; ?>

History.php

<?php include('header.php'); ?> </head> <?php include_once'menu.php'; ?> <?php include'left.php'; ?> <div class="center"> <div class="isi1"> <?php function generate_page_links( $cur_page, $num_pages) { $page_links = ''; // If this page is not the first page, generate the "previous" link if ($cur_page > 1) { $page_links .= '<a href="' . $_SERVER['PHP_SELF'] . '?page=' . ($cur_page - 1) . '"><-</a> '; } else { $page_links .= '<- ';

34

} // Loop through the pages generating the page number links for ($i = 1; $i <= $num_pages; $i++) { if ($cur_page == $i) { $page_links .= ' ' . $i; } else { $page_links .= ' <a href="' . $_SERVER['PHP_SELF'] . '?page=' . $i . '"> ' . $i . '</a>'; } } // If this page is not the last page, generate the "next" link if ($cur_page < $num_pages) { $page_links .= ' <a href="' . $_SERVER['PHP_SELF'] .'?page=' . ($cur_page + 1) . '">-></a>'; } else { $page_links .= ' ->'; } return $page_links; } // Calculate pagination information $cur_page = isset($_GET['page']) ? $_GET['page'] : 1; $results_per_page = 2; // number of results per page $skip = (($cur_page - 1) * $results_per_page); $email = $_SESSION['email']; $queryList = "SELECT * FROM history where email = '$email' and bayar ='y'"; $sql = "select sum(total_harga) as total from history where email = '$email' AND bayar ='y'"; // Query to get the total results $result = mysql_query($queryList,$connect); $total = mysql_num_rows($result); $num_pages = ceil($total / $results_per_page); // Query again to get just the subset of results $query = $queryList . " LIMIT $skip, $results_per_page"; $result = mysql_query($query,$connect); $bayar = mysql_query($sql,$connect); // Generate navigational page links if we have more than one page if ($data = mysql_num_rows($result)){ echo "<table align='center' width='100%'> <tr> <th>No.</th> <th>Gambar</th> <th>Jumlah</th> <th>Harga</th> </tr>"; $b=1; while ($data = mysql_fetch_array($result)) { echo "<tr>"; echo "<td><center>". $b++ ."</center></td>";

35

echo "<td><center><img src='".$data['gambarkartu']; echo" ' width='70' height='100' /></center></td>"; echo "<td><center>".$data['jumlah'] ."</center></td>"; echo "<td><center>Rp.".$data['harga_kartu'] ."</center></td>"; echo "</tr>"; } echo "<tr>"; echo "<td colspan='3' align='right'> Total Yang Telah Anda Bayar = </td>"; if($data1 = mysql_fetch_array($bayar)){ echo "<td><center> Rp.".$data1['total']."</center></td>"; } echo "</tr>"; echo "</table>"; } else{ echo"<center>"; echo"<h1>Anda belum pernah membeli di TradingCardGame Shop</h1>"; echo'<img id="logo1" src="images/logo.png" height="227.5px" width="630px" title="Logo Yu-Gi-Oh!"/>'; echo"<h1>Trima Kasih</h1>"; } echo"</center>"; ?> <center> <?php if ($num_pages > 1) { echo generate_page_links($cur_page, $num_pages); } mysql_close($connect); ?> </center> </div> </div> <?php include'right.php'; ?> </div> <?php include'foot.php'; ?>

Signup.php
<?php include('header.php'); if(isset($_SESSION['email'])){ $id = $_SESSION['email'] ; $sql="SELECT * FROM member WHERE email = '$id' AND approve = 'y'"; $result=mysql_query($sql); $data=mysql_fetch_array($result); } ?>

36

</head> <?php include_once('menu.php'); if (isset($_POST['Daftar'])) { require_once ('appvars.php'); $avatar = $_FILES['avatar']['name']; $avatar_type = $_FILES['avatar']['type']; $avatar_size = $_FILES['avatar']['size']; $password_n =$_POST['password']; $password =$_POST['password1']; $nama = $_POST['nama']; $alamat = $_POST['alamat']; $email = $_POST['email']; $sex = $_POST['sex']; $tempat = $_POST['tempat']; $tgl = $_POST['tgl']; $bln = $_POST['bln']; $thn = $_POST['thn']; $telepon = $_POST['telepon']; if (!preg_match('/^[a-zA-Z0-9][a-zA-Z0-9\._\-&!?=#]*@/', $email)) { echo"<script>alert('Email Invalid')</script>"; $output_form = 'yes'; } $user_pass_phrase = SHA1($_POST['verify']); if ($_SESSION['pass_phrase'] == $user_pass_phrase) { // Grab the score data from the POST if ( !empty($avatar) && !empty($password) && !empty($password_n) && !empty($nama) && !empty($alamat) && !empty($email) && !empty($sex) && !empty($tempat) && !empty($tgl) && !empty($bln) && !empty($thn) && !empty($telepon) &&($password_n == $password)){ if ((($avatar_type == 'image/gif') || ($avatar_type == 'image/jpg') || ($avatar_type == 'image/jpeg') || ($avatar_type == 'image/pjpeg') || ($avatar_type == 'image/png')) && ($avatar_size > 0) && ($avatar_size <= GW_MAXFILESIZE)) { if ($_FILES['avatar']['error'] == 0) { // Move the file to the target upload folder $target = GW_UPLOADPATH . $avatar; if (move_uploaded_file($_FILES['avatar']['tmp_name'], $target)) { $tanggal= date('Y-m-d'); $waktu= date("H:i:s"); $query = "INSERT INTO member(avatar,password_n,password,nama,alamat,email,sex,tempat_lahir,tang gal_lahir,no_tlp,tanggal,waktu) values('$target',SHA1('$password_n'),'$password','$nama','$alamat','$emai l','$sex','$tempat','$thn-$bln-$tgl','$telepon','$tanggal','$waktu')"; //echo 'Customer added.'; mysql_query($query); mysql_close(); }

37

else { echo '<p class="error">Sorry, there was a problem uploading your screen shot image.</p>'; } } } else { echo '<p class="error">The screen shot must be a GIF, JPEG, or PNG image file no greater than ' . (GW_MAXFILESIZE / 1024) . ' KB in size.</p>'; } // Try to delete the temporary screen shot image file @unlink($_FILES['avatar']['tmp_name']); echo '<script>alert("Pendaftaran sukses. \n terima kasih '.$nama.'")</script>'; } else { echo '<script>alert("Please enter all of the information to add your data")</script>'; } } else{ echo '<script>alert("captcha salah")</script>'; } } else if (isset($_POST['Update'])){ require_once ('appvars.php'); $user_id =$_POST['user_id']; $avatar = $_FILES['avatar']['name']; $avatar_type = $_FILES['avatar']['type']; $avatar_size = $_FILES['avatar']['size']; $nama = $_POST['nama']; $alamat = $_POST['alamat']; $email = $_SESSION['email']; $sex = $_POST['sex']; $tempat = $_POST['tempat']; $telepon = $_POST['telepon']; $user_pass_phrase = SHA1($_POST['verify']); if ($_SESSION['pass_phrase'] == $user_pass_phrase) { // Grab the score data from the POST if ( !empty($nama) && !empty($alamat) && !empty($sex) && !empty($tempat) && !empty($telepon)){ if (empty($avatar) == true){ $query="UPDATE member Set nama='$nama', alamat='$alamat', sex='$sex', tempat_lahir='$tempat', no_tlp='$telepon' where email = '$email'"; //echo 'Customer added.'; mysql_query($query,$connect); mysql_close();

38

} else if(empty($avatar) == false){ if ((($avatar_type == 'image/gif') || ($avatar_type == 'image/jpg') || ($avatar_type == 'image/jpeg') || ($avatar_type == 'image/pjpeg') || ($avatar_type == 'image/png')) && ($avatar_size > 0) && ($avatar_size <= GW_MAXFILESIZE)) { if ($_FILES['avatar']['error'] == 0) { // Move the file to the target upload folder $target = GW_UPLOADPATH . $avatar; if (move_uploaded_file($_FILES['avatar']['tmp_name'], $target)) { $query="UPDATE member Set avatar= '$target', nama='$nama', alamat='$alamat', sex='$sex', tempat_lahir='$tempat', tanggal_lahir='$thn-$bln-$tgl', no_tlp='$telepon' where email = '$email'"; //echo 'Customer added.'; mysql_query($query,$connect); mysql_close(); } } } else { echo '<p class="error">The screen shot must be a GIF, JPEG, or PNG image file no greater than ' . (GW_MAXFILESIZE / 1024) . ' KB in size.</p>'; } } // Try to delete the temporary screen shot image file @unlink($_FILES['avatar']['tmp_name']); echo '<script>alert("Update sukses. \n terima kasih '.$nama.'")</script>'; } else { echo '<script>alert("Please enter all of the information to add your data")</script>'; } } else{ echo '<script>alert("captcha salah")</script>'; } } ?> <?php include'left.php'; ?> <div class="center"> <div class="isi" >

39

<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data" > <input type="hidden" name="MAX_FILE_SIZE" value="<?php echo GW_MAXFILESIZE; ?>" /> <?php if (isset($_SESSION['nama'])) { $id = $_SESSION['email']; $sql="SELECT * FROM member WHERE email='$id'"; //$sql="select idkartu,namakartu,gambarkartu,rarity,stok,harga,jeniskartu from kartu "; $result = mysql_query($sql,$connect); $data = mysql_fetch_array($result); ?> <table border="0" cellspacing="3" cellpadding="3"> <tr> <input type="hidden" name="user_id" value="<?php echo $data['user_id']; ?>"> <td colspan="2"> <b><font size="5">Edit Profile</font> </b></td> </tr> <tr> <td rowspan="9"><img src="<?php echo $data['avatar'];?>" width="240" height="300"></td> <td>Nama</td> <td> <input name="nama" type="text" id="nama" size="35" maxlength="40" value="<?php echo $data['nama']; ?>"> </td> </tr> <tr> <td>avatar</td> <td><input type="file" name="avatar" id="avatar" value="<?php echo $data['avatar']; ?>" /> </td> </tr> <tr> <td>Alamat</td> <td> <input name="alamat" type="text" id="alamat" size="35" maxlength="100" value="<?php echo $data['alamat']; ?>"> </td> </tr> <tr> <td>e-mail</td> <td> <input name="email" type="email" id="email" size="35" maxlength="40" value="<?php echo $data['email']; ?>" disabled="true"> </td> </tr> <tr> <td>Jenis Kelamin</td> <td> <?php if($data['sex'] == 'L' ){ echo '<input name="sex" id="sex" type="radio" value="L" checked >Lakilaki'; echo'<input name="sex" id="sex" type="radio" value="P">Perempuan'; } else {

40

echo '<input name="sex" id="sex" type="radio" value="L">Laki-laki'; echo'<input name="sex" id="sex" type="radio" value="P" checked >Perempuan'; } ?> </td> </tr> <tr> <td>Tempat Lahir</td> <td> <input name="tempat" type="text" id="tempat" size="35" maxlength="40" value="<?php echo $data['tempat_lahir']; ?>"> </td> </tr> <tr> <td>Tanggal Lahir</td> <td> <select name="tgl" id="tgl" disabled="true"> <option value="tgl" >Tanggal</option> <?php for($tgl=01;$tgl<=30;$tgl++) {echo" <option value=$tgl> $tgl</option>";} ?> </select> <select name="bln" id="bln" disabled="true"> <option value="bln">bulan</option> <option value="01">Januari</option> <option value="02">Februari</option> <option value="03">Maret</option> <option value="04">April</option> <option value="05">Mei</option> <option value="06">Juni</option> <option value="07">Juli</option> <option value="08">Agustus</option> <option value="09">September</option> <option value="10">Oktober</option> <option value="11">November</option> <option value="12">December</option> </select> <select name="thn" id="thn" disabled="true"> <option value="thn" disabled="true">Tahun</option> <?php $tahun=date('Y'); for($thn=1980; $thn<=$tahun;$thn++) {echo" <option value=$thn> $thn</option>";} ?> </select> </td> </tr> <tr> <td>Telepon</td> <td> <input name="telepon" type="text" id="telepon" size="35" maxlength="14" value="<?php echo $data['no_tlp']; ?>"> </td> </tr> <tr> <td for="verify">Verification</td>

41

<td><input type="text" id="verify" name="verify" size="35" /> </td><td><img src="captcha.php" alt="Verification pass-phrase" /></td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td> <input name="Update" type="submit" id="update" value="Update Profile"></td> </tr> </table> <?php } else{ ?> <table border="0" cellspacing="2" cellpadding="0"> <tr> <td colspan="2"> <b><font size="5">Pendaftaran Member Baru</font> </b></td> </tr> <tr> <td>avatar</td> <td><input type="file" name="avatar" id="avatar" /> </td> </tr> <tr> <td>Nama</td> <td> <input name="nama" type="text" id="nama" size="35" maxlength="40" title="masukan nama" > </td> </tr> <tr> <td>Password</td> <td> <input name="password" type="password" id="password" size="35" maxlength="100" title="masukan password"> </td> </tr> <tr> <td>Confirm your Password</td> <td> <input name="password1" type="password" id="password1" size="35" maxlength="100" title="ulangi password"> </td> </tr> <tr> <td>Alamat</td> <td> <input name="alamat" type="text" id="alamat" size="35" maxlength="100" title="masukan alamat lengkap"> </td> </tr> <tr> <td>e-mail</td> <td> <input name="email" type="email" id="email" size="35" maxlength="40"> </td>

42

</tr> <tr> <td>Jenis Kelamin</td> <td> <input name="sex" id="sex" type="radio" value="L">Laki-laki <input name="sex" id="sex" type="radio" value="P">Perempuan </td> </tr> <tr> <td>Tempat Lahir</td> <td> <input name="tempat" type="text" id="tempat" size="35" maxlength="40" title="masukan tempat lahir" > </td> </tr> <tr> <td>Tanggal Lahir</td> <td> <select name="tgl" id="tgl"> <option value="tgl">Tanggal</option> <?php for($tgl=01;$tgl<=30;$tgl++) {echo" <option value=$tgl> $tgl</option>";} ?> </select> <select name="bln" id="bln"> <option value="bln">bulan</option> <option value="01">Januari</option> <option value="02">Februari</option> <option value="03">Maret</option> <option value="04">April</option> <option value="05">Mei</option> <option value="06">Juni</option> <option value="07">Juli</option> <option value="08">Agustus</option> <option value="09">September</option> <option value="10">Oktober</option> <option value="11">November</option> <option value="12">December</option> </select> <select name="thn" id="thn"> <option value="thn">Tahun</option> <?php $tahun=date('Y'); for($thn=1980; $thn<=$tahun;$thn++) {echo" <option value=$thn> $thn</option>";} ?> </select> </td> </tr> <tr> <td>Telepon</td> <td> <input name="telepon" type="text" id="telepon" size="35" maxlength="14" title="masukan nomor telepon" > </td> </tr> <tr> <td for="verify">Verification</td>

43

<td><input type="text" id="verify" name="verify" size="35" /> </td><td><img src="captcha.php" alt="Verification pass-phrase" /></td> </tr> <tr> <td>&nbsp;</td> <td> <input name="Daftar" type="submit" id="daftar" value="Daftar" ></td> </tr> </table> <?php } ?> </form> </div> </div> <?php include'right.php'; ?> </div> <?php include'foot.php'; ?>

Logout.php
<?php // If the user is logged in, delete the session vars to log them out session_start(); include'connect.php'; if (isset($_SESSION['nama']) || isset($_SESSION['nama_admin']) ) { // Delete the session vars by clearing the $_SESSION array $_SESSION = array(); // Delete the session cookie by setting its expiration to an hour ago (3600) if (isset($_COOKIE[session_name()])) { setcookie(session_name(), '', time() - 3600); } // Destroy the session session_destroy(); } // Delete the user ID and email cookies by setting their expirations to an hour ago (3600) setcookie('nama', '', time() - 3600); setcookie('email', '', time() - 3600); $email = $_COOKIE['email']; $query = "DELETE FROM history WHERE email = '$email' AND bayar is NULL"; mysql_query($query, $connect) or die('Error querying database.');

44

// Redirect to the home page $home_url = 'http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['PHP_SELF']) . '/index.php'; header('Location: ' . $home_url); ?>

Captcha.php
<?php session_start(); // Set some important CAPTCHA constants define('CAPTCHA_NUMCHARS', 6); // number of characters in pass-phrase define('CAPTCHA_WIDTH', 100); // width of image define('CAPTCHA_HEIGHT', 25); // height of image // Generate the random pass-phrase $pass_phrase = ""; for ($i = 0; $i < CAPTCHA_NUMCHARS; $i++) { $pass_phrase .= chr(rand(97, 122)); } // Store the encrypted pass-phrase in a session variable $_SESSION['pass_phrase'] = sha1($pass_phrase); // Create the image $img = imagecreatetruecolor(CAPTCHA_WIDTH, CAPTCHA_HEIGHT); // Set a white background with black text $bg_color = imagecolorallocate($img, 255, $text_color = imagecolorallocate($img, 0, $graphic_color = imagecolorallocate($img, and gray graphics 255, 255); // white 0, 0); // black 64, 64, 64); // dark gray

// Fill the background imagefilledrectangle($img, 0, 0, CAPTCHA_WIDTH, CAPTCHA_HEIGHT, $bg_color); // Draw some random lines for ($i = 0; $i < 5; $i++) { imageline($img, 0, rand() % CAPTCHA_HEIGHT, CAPTCHA_WIDTH, rand() % CAPTCHA_HEIGHT, $graphic_color); } // Sprinkle in some random dots for ($i = 0; $i < 50; $i++) { imagesetpixel($img, rand() % CAPTCHA_WIDTH, rand() % CAPTCHA_HEIGHT, $graphic_color); } // Draw the pass-phrase string imagettftext($img, 18, 0, 5, CAPTCHA_HEIGHT - 5, $text_color, 'Courier New Bold.ttf', $pass_phrase); // Output the image as a PNG using a header header("Content-type: image/png"); imagepng($img); // Clean up imagedestroy($img);

45

?>

Checkout.php

<?php include('header.php'); ?> </head> <?php include_once'menu.php'; ?> <?php include'left.php'; ?> <div class="center"> <div class="isi1"> <?php function generate_page_links( $cur_page, $num_pages) { $page_links = ''; // If this page is not the first page, generate the "previous" link if ($cur_page > 1) { $page_links .= '<a href="' . $_SERVER['PHP_SELF'] . '?page=' . ($cur_page - 1) . '"><-</a> '; } else { $page_links .= '<- '; } // Loop through the pages generating the page number links for ($i = 1; $i <= $num_pages; $i++) { if ($cur_page == $i) { $page_links .= ' ' . $i; } else { $page_links .= ' <a href="' . $_SERVER['PHP_SELF'] . '?page=' . $i . '"> ' . $i . '</a>'; } } // If this page is not the last page, generate the "next" link if ($cur_page < $num_pages) { $page_links .= ' <a href="' . $_SERVER['PHP_SELF'] .'?page=' . ($cur_page + 1) . '">-></a>'; } else { $page_links .= ' ->'; } return $page_links; }

46

// Calculate pagination information $cur_page = isset($_GET['page']) ? $_GET['page'] : 1; $results_per_page = 2; // number of results per page $skip = (($cur_page - 1) * $results_per_page); $email = $_SESSION['email']; $queryList = "SELECT * FROM history where email = '$email' and bayar is null"; $sql = "select sum(total_harga) as total from history where email = '$email' AND bayar is null"; // Query to get the total results $result = mysql_query($queryList,$connect); $total = mysql_num_rows($result); $num_pages = ceil($total / $results_per_page); // Query again to get just the subset of results $query = $queryList . " LIMIT $skip, $results_per_page"; $result = mysql_query($query,$connect); $bayar = mysql_query($sql,$connect); // Generate navigational page links if we have more than one page if ($data = mysql_num_rows($result)){ echo "<table align='center' width='100%'> <tr> <th>No.</th> <th>Gambar</th> <th>Jumlah</th> <th>Harga</th> </tr>"; $b=1; while ($data = mysql_fetch_array($result)) { echo "<tr>"; echo "<td><center>". $b++ ."</center></td>"; echo "<td><center><img src='".$data['gambarkartu']; echo" ' width='70' height='100' /></center></td>"; echo "<td><center>".$data['jumlah'] ."</center></td>"; echo "<td><center>Rp.".$data['harga_kartu'] ."</center></td>"; echo "</tr>"; } echo "<tr>"; echo "<td colspan='3' align='right'> Total Yang Harus di Bayar = </td>"; if($data1 = mysql_fetch_array($bayar)){ echo "<td><center> Rp.".$data1['total']."</center></td>"; } echo "</tr>"; echo "</table>"; } else{ echo"<center>"; echo"<h1>Anda belum memilih barang yang ingin dibeli</h1>"; } echo"</center>";

47

?> <center> <?php if ($num_pages > 1) { echo generate_page_links($cur_page, $num_pages); } mysql_close($connect); ?> </center> </div> </div> <?php include'right.php'; ?> </div> <?php include'foot.php'; ?>

Shoutbox/Shoutbox.php
<?php session_start(); error_reporting(0); $id = $_SESSION['nama']; /************************ KONFIGURASI DATABASE /************************/ /****************************************************/ define("HOST", "localhost"); /***** HOSTNAME *****/ define("USER", "root"); /***** USERNAME *****/ define("PASSWORD", "root"); /***** PASSWORD *****/ define("DATABASE", "tradingcardgame"); /***** DATABASE *****/ /****************************************************/ /************************ EMOTICONS /************************/ $smileys = array( ':merana:' => 'merana.gif', ':like:' => 'like.gif', ':putnam:' => 'putnam.gif', ':sad:' => 'nangis.gif', ':love:' => 'cinta.gif', ':/:' => 'merana.gif', ':like' => 'like.gif', ':putnam' => 'putnam.gif', ':sad' => 'nangis.gif', ':love' => 'cinta.gif', ':;):' => 'alay.gif', ':O:):' => 'ded.gif', ':0):' => 'ded.gif', ':^_^:' => 'hihihi.gif', ':3:D:' => 'hoho.gif', ':O.o:' => 'kecewa.gif', ':8:):' => 'keren.gif',

48

':8:D:' => 'kull.gif', ':D:' => 'nyengir.gif', ':-*:' => 'kiss.gif', ':3:' => 'kucing.gif', ':p:' => 'meled.gif', ':(:' => 'mencu.gif', ':):' => 'senyum.gif', ':oo:' => 'oo.gif', ':`(:' => 'nangis.gif', ':v:' => 'pac.gif', ':>o:' => 'sengit.gif', ':>_:' => 'sumpek.gif', ':-_-:' => 'tidur.gif', ':|]:' => 'robot.gif' ); /************************ FUNCTIONS /************************/ function connect($db, $user, $password){ $link = @mysql_connect($db, $user, $password); if (!$link) die("<p><b>Koneksi Gagal!</b></p><i>error:</i> <span style='color:red'>".mysql_error().'</span>'); else{ $db = mysql_select_db(DATABASE); if(!$db) die("<p><b>Nama DATABASE salah!</b></p><i>error:</i> <span style='color:red'> ".mysql_error().'</span>'); else return $link; } } function getContent($link, $num){ $res = @mysql_query("SELECT date, user, message FROM shoutbox ORDER BY date ASC LIMIT ".$num, $link); if(!$res) die("Error: ".mysql_error()); else return $res; } function insertMessage($user, $message){ $query = sprintf("INSERT INTO shoutbox(user, message) VALUES('%s', '%s');", mysql_real_escape_string(strip_tags($user)), mysql_real_escape_string(strip_tags($message))); $res = @mysql_query($query); if(!$res) die("Error: ".mysql_error()); else return $res; } /****************************** REQUESTS /******************************/ if(!$_POST['action']){ header ("Location: index.php"); } else{ $link = connect(HOST, USER, PASSWORD); switch($_POST['action']){

49

case "update": $res = getContent($link, 60); //Ubah angka 60 menjadi lebih besar atau lebih kecil untuk menampilkan isi shoutbox lebih banyak atau sedikit. while($row = mysql_fetch_array($res)){ foreach($smileys as $smiley=>$image) { $row['message'] = str_replace($smiley, '<img src="smileys/'.$image.'">', $row['message']); } $result .= "<li><strong>".$row['user']."</strong> ".$row['message']."</li>"; } echo $result; break; case "insert": echo insertMessage($_POST['nick'], $_POST['message']); break; } mysql_close($link); } ?>

Shoutbox/index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <?php session_start(); ?> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"> <head> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/shoutbox.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> <title>Shoutbox</title> <script language="javascript"> var gOI = function(id){ return document.getElementById(id); }; var emoticonsclick = function(tag){ var d = gOI("message"); var b = d.selectionStart, a = d.selectionEnd; d.value = d.value.substring(0, b) + " " + tag + " " + d.value.substring(a, d.value.length); }; </script> </head> <body> <div id="shoutbox" class="container_shoutbox"> <div class="content_shoutbox"> <div id="smiley_image_shoutbox"> <div id="smiley_image_content">

50

<img title="close" id="smiley_image_close" src="images/close.gif" alt="close"/> <a title=":)" class="emoticon" href="javascript:emoticonsclick(':):')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/senyum.gif" style="border:none;background:none;"/></a> <a title=":D" class="emoticon" href="javascript:emoticonsclick(':D:')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/nyengir.gif" style="border:none;background:none;"/></a> <a title=":p" class="emoticon" href="javascript:emoticonsclick(':p:')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/meled.gif" style="border:none;background:none;"/></a> <a title=":(" class="emoticon" href="javascript:emoticonsclick(':(:')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/mencu.gif" style="border:none;background:none;"/></a> <a title=":/" class="emoticon" href="javascript:emoticonsclick(':/:')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/merana.gif" style="border:none;background:none;"/></a> <a title=":`(" class="emoticon" href="javascript:emoticonsclick(':`(:')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/nangis.gif" style="border:none;background:none;"/></a> <a title="0:)" class="emoticon" href="javascript:emoticonsclick(':0):')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/ded.gif" style="border:none;background:none;"/></a> <a title="^_^" class="emoticon" href="javascript:emoticonsclick(':^_^:')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/hihihi.gif" style="border:none;background:none;"/></a> <a title="3:D" class="emoticon" href="javascript:emoticonsclick(':3:D:')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/hoho.gif" style="border:none;background:none;"/></a> <a title="O.o" class="emoticon" href="javascript:emoticonsclick(':O.o:')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/kecewa.gif" style="border:none;background:none;"/></a> <a title="8:)" class="emoticon" href="javascript:emoticonsclick(':8:):')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/keren.gif" style="border:none;background:none;"/></a> <a title=":-*" class="emoticon" href="javascript:emoticonsclick(':-*:')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/kiss.gif" style="border:none;background:none;"/></a> <a title=":3" class="emoticon" href="javascript:emoticonsclick(':3:')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/kucing.gif" style="border:none;background:none;"/></a> <a title="8:D" class="emoticon" href="javascript:emoticonsclick(':8:D:')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/kull.gif" style="border:none;background:none;"/></a> <a title=":like:" class="emoticon" href="javascript:emoticonsclick(':like:')"

51

style="cursor:pointer;margin:1px;border:none"><img src="smileys/like.gif" style="border:none;background:none;"/></a> <a title=":oo" class="emoticon" href="javascript:emoticonsclick(':oo:')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/oo.gif" style="border:none;background:none;"/></a> <a title=":v" class="emoticon" href="javascript:emoticonsclick(':v:')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/pac.gif" style="border:none;background:none;"/></a> <a title=":putnam:" class="emoticon" href="javascript:emoticonsclick(':putnam:')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/putnam.gif" style="border:none;background:none;"/></a> <a title=":|]" class="emoticon" href="javascript:emoticonsclick(':|]:')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/robot.gif" style="border:none;background:none;"/></a> <a title=":>o" class="emoticon" href="javascript:emoticonsclick(':>o:')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/sengit.gif" style="border:none;background:none;"/></a> <a title=":><:" class="emoticon" href="javascript:emoticonsclick(':>_:')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/sumpek.gif" style="border:none;background:none;"/></a> <a title=":-_-:" class="emoticon" href="javascript:emoticonsclick(':-_-:')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/tidur.gif" style="border:none;background:none;"/></a></td> </div> </div> <div id="loading_shoutbox"><img src="images/loading.gif" alt="Loading..."></div> <ul></ul> </div> <div id="form"> <form method="post" id="form_input_shoutbox"> <table> <tr> <td><label>Nama</label></td> <td><input class="text user" id="nick" type="text" MAXLENGTH="15" value="<?php echo $_SESSION['nama'];?>" readonly /></td> </tr> <tr> <td><label>Pesan</label></td> <td><input class="text" id="message" type="text" MAXLENGTH="255"/></td> </tr> <tr> <td></td> <td><input style="cursor:pointer;" id="send" type="submit" value="Kirim" /></td> </tr> </table> </form> </div> </div> </body> </html>

52

Shoutbox/style.css
@CHARSET "UTF-8"; /******* GENERAL RESET *******/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { border:0pt none; font-family:inherit; font-size: 100%; font-style:inherit; font-weight:inherit; margin:0pt; padding:0pt; vertical-align:baseline; } body{ background: #fff center top; line-height:12px; font-size: 11px; font-family: Arial; margin:0pt; overflow: auto; } html,body{ height:100%; text-align: center; background:transparent; } .clear{ clear: both; height: 0; display: block; } a:link, a img{ text-decoration: none; outline:none; } img{ border:none; } strong{ font-weight: 700; color:#005ab6; } #form_input_shoutbox{ width:99%; text-align: left; border-top:1px solid #999; background:#f0f0f0; position:relative; margin:0; padding:2px; font-size: 11px; }

53

#form_input_shoutbox label{ font-weight: 600; } #form_input_shoutbox input{ border: 1px solid #999; background-color: #fff; color: #5f95ef; font-size: 11px; font-weight: 700; } #form_input_shoutbox input.text{ font-weight: normal; color: #555; padding: 2px; margin-bottom: 5px; text-align: left; margin:1px; width:100%; } .container_shoutbox{ margin:0; width: 98%; /*overflow:hidden;*/ border:1px solid #999; position:relative; } .container_shoutbox ul, .container_shoutbox ul li{ list-style: none !important; list-style-position: outside; } .content_shoutbox{ background: #fff; text-align: left; /*padding-left:10px;*/ font-size: 12px; min-height:220px; height:250px; width:100%; overflow:auto; overflow-x:hidden; color:#232323; position:relative; } .content_shoutbox ul{ /**/ background-color:#f6f6f6; } .content_shoutbox li{ margin:0; border-bottom:1px inset #fff; padding:3px 3px 3px 5px; } .date_shoutbox{ font-weight: normal; font-size: 9px; color: #aeaeae; }

54

#loading_shoutbox{ position:absolute; left:140px; bottom:45px; } #smiley_image_shoutbox{ display:none; position:absolute; bottom:0 !important; height:40px; width:100%; text-align:left; padding:5px; } #smiley_image_content{ position:fixed; width:280px; background-color:#fff; border:1px solid #999; padding:5px; left:0; } #smiley_image_close{ position:absolute; right:0; top:0; cursor:pointer; opacity:0.5; filter:alpha(opacity=50); /* For IE8 and earlier */ } #smiley_image_close:hover{ opacity:1; filter:alpha(opacity=100); /* For IE8 and earlier */ }

Admin/css/index.css
.header{ margin:0; padding:0; height:auto; width:100%; background-color:#000000; position:fixed; } .menui li { float:left; display: block; } .logo{ vertical-align: top; float:left; } #cari{}

55

#fieldset{} #m{ padding-left:30px; } .menui li a{ text-decoration:none; display: block; text-transform: uppercase; text-shadow: 0px 0px 2px #ffffff; color: #ffffff; margin: 3px; padding-left:30px; letter-spacing: 1px; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; } .menui:hover li a{ text-decoration:none; text-shadow: 0px 0px 3px #ffffff; color: transparent; } .menui li a:hover{ text-decoration:none; color:#fff; text-shadow: 0px 0px 2px #ffffff; } .login li { float:right; display: block; } .login li a{ text-decoration:none; text-transform: uppercase; text-shadow: 0px 0px 2px #ffffff; color: #ffffff; padding-right: 30px; margin: 3px; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; } .login:hover li a{ text-decoration:none; text-shadow: 0px 0px 3px #ffffff; color: transparent; } .login li a:hover{ text-decoration:none; color:#fff;

56

text-shadow: 0px 0px 2px #ffffff; } .footer { font-size:16px; padding-top:10px; position:fixed; left:0; bottom:0; width:100%; height:30px; display:block; background:rgba(0,0,0,0.9); color:white; } .footerRight{ font-size:16px; padding-top:10px; position:fixed; left:1220px; bottom:0; width:100%; height:30px; display:block; color:white; } .left{ float:left; background-color: grey; height:845px; width:25%; background-attachment: fixed; margin:0; padding:0; } .center{ float:left; height:745px; padding-top:100px; width:50%; background-color: red; } .center1{ float:left; height:745px; padding-top:100px; width:75%; background-color: red; } .isi{ padding:100px 60px 80px 80px; background:rgba(50, 50, 50, 0.7); } .right{ float:right;

57

background-color: grey; height:745px; padding-top:100px; width:25%; background-attachment: fixed; } #slides { position:absolute; width:882px; height:307.2px; z-index:100; } .slides_container { margin-top:10px; width:670px; height:307.2px; overflow:hidden; position:absolute; left: 100px; } .slides_container div.slide { width:670px; height:307.2px; padding-left:5px; padding-right:60px; padding-top:3px; background-color:white; display:block; } /* Next/prev buttons */ #slides .prev { position:absolute; top: 130px; left: 76px; right:90px; width:0px; height:47px; display:block; z-index:101; } #slides .next { position:absolute; top: 130px; right: 112px; width:0px; height:47px; display:block; z-index:101; } .pagination { margin:26px auto 0; width:100px;

58

} .pagination li { float:left; margin:0 1px; list-style:none; } .pagination li a { display:block; width:12px; height:0; padding-top:12px; background-image:url(img/pagination.png); background-position:0 0; float:left; overflow:hidden; } .pagination li.current a { background-position:0 -12px; }

Admin/approve.php
<?php require_once "connect.php"; $user_id = $_GET['user_id']; $query = "update member set approve = 'y' where user_id = " . $user_id; mysql_query($query,$connect) or die('Error querying database.'); $home_url = 'http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['PHP_SELF']) . '/index.php'; header('Location: ' . $home_url); ?>

Admin/bayar.php
<?php require_once "connect.php"; $id = $_GET['id']; $jumlah = $_GET['jumlah']; $gambar = $_GET['gambarkartu']; $query = "update kartu set stok = (stok - '$jumlah') where gambarkartu ='$gambar'"; $data = mysql_query($query,$connect) or die('Error querying database.'); if ($data){ $query = "update history set bayar = 'y' where id = '$id'";

59

mysql_query($query,$connect) or die('Error querying database.'); $home_url = 'http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['PHP_SELF']) . '/index.php'; header('Location: ' . $home_url); } ?>

Admin/appvars.php
<?php define('GW_UPLOADPATH', 'images/'); define('GW_MAXFILESIZE', 10240000); define('MM_MAXIMGWIDTH', 5000); define('MM_MAXIMGHEIGHT', 5000); ?> // 100 KB // 120 pixels // 120 pixels

Admin/catalog.php
<?php include('header.php'); ?> </head> <?php include_once'menu.php'; ?> <?php include'left.php'; ?> <div class="center"> <?php function generate_page_links( $cur_page, $num_pages) { $page_links = ''; // If this page is not the first page, generate the "previous" link if ($cur_page > 1) { $page_links .= '<a href="' . $_SERVER['PHP_SELF'] . '?page=' . ($cur_page - 1) . '"><-</a> '; } else { $page_links .= '<- '; } // Loop through for ($i = 1; $i if ($cur_page $page_links } else { the pages generating the page number links <= $num_pages; $i++) { == $i) { .= ' ' . $i;

60

$page_links .= ' <a href="' . $_SERVER['PHP_SELF'] . '?page=' . $i . '"> ' . $i . '</a>'; } } // If this page is not the last page, generate the "next" link if ($cur_page < $num_pages) { $page_links .= ' <a href="' . $_SERVER['PHP_SELF'] .'?page=' . ($cur_page + 1) . '">-></a>'; } else { $page_links .= ' ->'; } return $page_links; } // Calculate pagination information $cur_page = isset($_GET['page']) ? $_GET['page'] : 1; $results_per_page = 2; // number of results per page $skip = (($cur_page - 1) * $results_per_page); $queryList = "SELECT * FROM kartu ORDER BY idkartu"; // Query to get the total results $result = mysql_query($queryList,$connect); $total = mysql_num_rows($result); $num_pages = ceil($total / $results_per_page); // Query again to get just the subset of results $query = $queryList . " LIMIT $skip, $results_per_page"; $result = mysql_query($query,$connect); // Generate navigational page links if we have more than one page echo "<table> <tr> <th width='400'>Gambar Kartu</th> <th colspan='3' width='800'>Detail Kartu</th> </tr>"; while ($data = mysql_fetch_array($result)) { echo "<tr>"; echo "<td rowspan='6' ><center><img src='../".$data['gambarkartu']; echo" ' width='140' height='200' /></center></td>"; echo "</tr>"; echo "<tr>"; echo "<td>Nama: </td>"; echo "<td colspan='2'>".$data['namakartu'] ." </td>"; echo "</tr>"; echo "<tr>"; echo "<td>Jenis Kartu: </td>"; echo "<td colspan='2'>".$data['jeniskartu'] ." </td>"; echo "</tr>"; echo "<tr>"; echo "<td>Rarity: </td>"; echo "<td colspan='2'>".$data['rarity'] ." </td>";

61

echo echo echo echo echo echo echo echo </td>";

"</tr>"; "<tr>"; "<td>Stok: </td>"; "<td colspan='2'>".$data['stok'] ." </td>"; "</tr>"; "<tr>"; "<td>Harga: </td>"; "<td colspan='1'>Rp.".$data['harga'] ."

echo "<td><a href=editcatalog.php?page=update&id=$data[idkartu]>Update</a> / <a href=delete.php?page=delete&id=$data[idkartu]>Hapus</a></td>"; echo "</tr>"; } echo "</table>"; ?> <center> <?php if ($num_pages > 1) { echo generate_page_links($cur_page, $num_pages); } mysql_close($connect); ?> </center> </div> <?php include'right.php'; ?> </div> <?php include'foot.php'; ?>

Admin/connect.php
<?php $connect = mysql_connect("localhost","root","root"); if (!$connect) { die('Could not connect: ' . mysql_error()); } mysql_select_db("tradingcardgame", $connect); ?>

Admin/editcatalog.php
<?php include'header.php'; ?> </head> <?php include'menu.php'; ?>

62

<?php $tbl_name="kartu"; $namafolder="images/"; // Get values from form if (isset($_POST['updatedata'])){ include('appvars.php'); $idkartu=$_POST['idkartu']; $namakartu=$_POST['namakartu']; $stok=$_POST['stok']; $harga=$_POST['harga']; if (!empty($idkartu) && !empty($namakartu) && !empty($harga)) { !empty($stok) &&

$sql="Update kartu Set namakartu='$namakartu', stok='$stok', harga='$harga' where idkartu='$idkartu'"; mysql_query($sql); mysql_close(); echo "<script>alert('Update data Berhasil')</script> "; } else { echo '<p class="error">Sorry, there was a problem updating data.</p>'; } } else if (isset($_POST['inputdata'])){ include('appvars.php'); $idkartu=$_POST['idkartu']; $gambarkartu = $_FILES['gambarkartu']['name']; $gambarkartu_type = $_FILES['gambarkartu']['type']; $gambarkartu_size = $_FILES['gambarkartu']['size']; $jeniskartu=$_POST['jeniskartu']; $namakartu=$_POST['namakartu']; $rarity=$_POST['rarity']; $stok=$_POST['stok']; $harga=$_POST['harga']; if (!empty($idkartu) && !empty($gambarkartu) && !empty($jeniskartu) && !empty($namakartu) && !empty($rarity) && !empty($stok) && !empty($harga)) { if ((($gambarkartu_type == 'image/gif') || ($gambarkartu_type == 'image/jpeg') || ($gambarkartu_type == 'image/pjpeg') || ($gambarkartu_type == 'image/png')) && ($gambarkartu_size > 0) && ($gambarkartu_size <= GW_MAXFILESIZE)) { if ($_FILES['gambarkartu']['error'] == 0) { // Move the file to the target upload folder $gambar = GW_UPLOADPATH . $gambarkartu; if (move_uploaded_file($_FILES['gambarkartu']['tmp_name'], $gambar)) { $sql="INSERT INTO kartu VALUES('$idkartu', '$gambar', '$jeniskartu', '$namakartu', '$rarity', '$stok', '$harga')";

63

mysql_query($sql); mysql_close(); echo "<script>alert('Gambar berhasil dikirim')</script> "; } else { echo '<p class="error">Sorry, there was a problem uploading your image.</p>'; } } } else { echo '<p class="error">The screen shot must be a GIF, JPEG, or PNG image file no greater than ' . (GW_MAXFILESIZE / 1024) . ' KB in size.</p>'; } // Try to delete the temporary screen shot image file @unlink($_FILES['gambarkartu']['tmp_name']); } else { echo "<script>alert('Please enter all of the information ')</script>"; } // if successfully insert data into database, displays message "Successful". } include'left.php'; ?> <div> <div class="center"> <center> <?php if(isset($_GET['id'])){ $id=$_GET['id']; // Retrieve data from database $sql="SELECT * FROM kartu WHERE idkartu='$id'"; //$sql="select idkartu,namakartu,gambarkartu,rarity,stok,harga,jeniskartu from kartu "; $result=mysql_query($sql); $data=mysql_fetch_array($result); ?> <table> <form enctype="multipart/form-data" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>"> <tr> <td colspan="2"> <b><font size="5">Update data Kartu</font> </b></td>

64

</tr> <tr> <td rowspan="7"><img src="../<?php echo $data['gambarkartu'];?>" width="140" height="200"></td> <td>ID Kartu :</td> <td><input type="text" name="idkartu" value="<?php echo $data['idkartu'];?>"><td> </tr> <tr> <td>Jenis Kartu :</td> <td><select name="jeniskartu" disabled="true"><option>-Pilih</option><option>Monster</option><option>Spell</option><option>Trap</opti on></select></td> </tr> <tr> <td>Nama Kartu :</td> <td><input type="text" name="namakartu" value="<?php echo $data['namakartu']; ?>"></td> </tr> <tr> <td>Rarity :</td> <td><select name="rarity" disabled="true"><option>-Pilih</option><option>Common</option><option>Rare</option><option>Super Rare</option> <option>Ultra Rare</option><option>Ultimate Rare</option> <option>Secret Rare</option><option>Ghost Rare</option> <option>Ghost/Gold Rare</option></select></td> </tr> <tr> <td>Stok :</td> <td><input type="number" name="stok" value="<?php echo $data['stok']; ?>"></td> </tr> <tr> <td>Harga :</td> <td><input type="text" name="harga" value="<?php echo $data['harga']; ?>"></td> </tr> <tr> <td><input type="submit" name="updatedata" value="update Data"></td> <td><input type="reset" name="reset" value="reset" onclick="confirm('Anda yakin ingin Reset ?')"></td> </tr> </form> </table> <?php } else { ?> <table> <form enctype="multipart/form-data" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>"> <tr> <td colspan="2"> <b><font size="5">Input Data Kartu</font> </b></td> </tr> <tr> <td>ID Kartu :</td> <td><input type="text" name="idkartu"><td> </tr>

65

<tr> <td>Gambar Kartu :</td> <td><input type="file" name="gambarkartu"></td> </tr> <tr> <td>Jenis Kartu :</td> <td><select name="jeniskartu"><option>Pilih</option><option>Monster</option><option>Spell</option><option>Trap</opti on></select></td> </tr> <tr> <td>Nama Kartu :</td> <td><input type="text" name="namakartu"></td> </tr> <tr> <td>Rarity :</td> <td><select name="rarity"><option>-Pilih</option><option>Common</option><option>Rare</option><option>Super Rare</option> <option>Ultra Rare</option><option>Ultimate Rare</option> <option>Secret Rare</option><option>Ghost Rare</option> <option>Ghost/Gold Rare</option></select></td> </tr> <tr> <td>Stok :</td> <td><input type="number" name="stok"></td> </tr> <tr> <td>Harga :</td> <td><input type="text" name="harga"></td> </tr> <tr> <td><input type="submit" name="inputdata" value="Input Data"></td> <td><input type="reset" name="reset" value="reset" onclick="confirm('Anda yakin ingin Reset ?')"></td> </tr> </form> </table> <?php } ?> </center> </div> <?php include'right.php'; ?> </div> <?php include'foot.php'; ?>

Admin/foot.php
<div class="footer"> <div> <center>

66

<font>Copyright &copy; 2013</font> </center> </div> <div class="footerRight"> <img src="../img/fb.png" height="21px" width="21,5px" title="TradingCardGame"/> <img src="../img/twit.png" height="21px" width="21,5px" title="@TradingCardGame"/> <img src="../img/word.png" height="21px" width="21,5px" title="Yugioh.wikia.com"/> </div> </div> </div> </body> </html>

Admin/header.php
<?php include'sessionstart.php'; include'connect.php'; ?> <?php // If the user isn't logged in, try to log them in if (!isset($_SESSION['nama']) || !isset($_SESSION['nama_admin'])) { if (isset($_POST['submit'])) { // Connect to the database // Grab the user-entered log-in data $user_email = $_POST['email']; $user_password = $_POST['password']; if (!empty($user_email) && !empty($user_password)) { // Look up the email and password in the database $query = "SELECT nama, email FROM member WHERE email = '$user_email' AND password_n = SHA1('$user_password') and approve= 'y'"; $hasil=mysql_query($query); $cek=mysql_num_rows($hasil); $querya = "SELECT nama_admin, username FROM admin WHERE username = '$user_email' AND password = SHA1('$user_password') "; $hasila=mysql_query($querya); $ceka=mysql_num_rows($hasila); if ( $cek == 1) { // The log-in is OK so set the user ID and email session vars (and cookies), and redirect to the home page $row = mysql_fetch_array($hasil); $_SESSION['nama'] = $row['nama']; $_SESSION['email'] = $row['email']; setcookie('nama', $row['nama'], time() + (60 * 60 * 24 * 30)); // expires in 30 days setcookie('email', $row['email'], time() + (60 * 60 * 24 * 30)); // expires in 30 days $home_url = 'http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['PHP_SELF']) . '/index.php'; header('Location: ' . $home_url); } else if ($ceka == 1) { $row = mysql_fetch_array($hasila); $_SESSION['nama_admin'] = $row['nama_admin'];

67

//$_SESSION['username'] = $row['username']; //setcookie('nama_admin', $row['nama_admin'], time() + (60 * 60 * 24 * 30)); // expires in 30 days //setcookie('username', $row['username'], time() + (60 * 60 * 24 * 30)); // expires in 30 days $home_url = 'http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['PHP_SELF']) . '/index.php'; header('Location: ' . $home_url); } else { // The email/password are incorrect so set an error message $error_msg = 'Sorry, you must enter a valid email and password to log in.'; } } else { // The email/password weren't entered so set an error message $error_msg = 'Sorry, you must enter your email and password to log in.'; } } } ?> <html> <head> <title> Trading Card Game</title> <script src="js/jquery.min.js"></script> <script src="js/slides.min.jquery.js"></script> <link rel="stylesheet" type="text/css" href="css/index.css" />

Admin/index.php
<?php include'header.php'; ?> <script> $(function(){ $('#slides').slides({ preload: true, preloadImage: 'img/loading.gif', play: 5000, pause: 2500, hoverPause: true, animationStart: function(current){ $('.caption').animate({ bottom:-35 },100); if (window.console && console.log) { // example return of current slide number console.log('animationStart on slide: ', current); }; }, animationComplete: function(current){ $('.caption').animate({ bottom:0 },200); if (window.console && console.log) {

68

// example return of current slide number console.log('animationComplete on slide: ', current); }; }, slidesLoaded: function() { $('.caption').animate({ bottom:0 },200); } }); }); </script> </head> <?php include'menu.php'; ?> <div> <div class="center1"> <center> <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>"> <?php function generate_page_links( $cur_page, $num_pages) { $page_links = ''; // If this page is not the first page, generate the "previous" link if ($cur_page > 1) { $page_links .= '<a href="' . $_SERVER['PHP_SELF'] . '?page=' . ($cur_page - 1) . '"><-</a> '; } else { $page_links .= '<- '; } // Loop through the pages generating the page number links for ($i = 1; $i <= $num_pages; $i++) { if ($cur_page == $i) { $page_links .= ' ' . $i; } else { $page_links .= ' <a href="' . $_SERVER['PHP_SELF'] . '?page=' . $i . '"> ' . $i . '</a>'; } } // If this page is not the last page, generate the "next" link if ($cur_page < $num_pages) { $page_links .= ' <a href="' . $_SERVER['PHP_SELF'] .'?page=' . ($cur_page + 1) . '">-></a>'; } else { $page_links .= ' ->'; }

69

return $page_links; } // Calculate pagination information $cur_page = isset($_GET['page']) ? $_GET['page'] : 1; $results_per_page = 2; // number of results per page $skip = (($cur_page - 1) * $results_per_page); $queryList = "SELECT * FROM member where approve =''"; // Query to get the total results $result = mysql_query($queryList,$connect); $total = mysql_num_rows($result); $num_pages = ceil($total / $results_per_page); // Query again to get just the subset of results $query = $queryList . " LIMIT $skip, $results_per_page"; $result = mysql_query($query,$connect); $data = mysql_num_rows($result); if ($data >= 1){ ?> <b><h1 align="left" > Notification New Members </h1></b> <table border = "3" cellpadding = "5" cellspacing="3" width="100%"> <tr> <th>No.</th> <th>Avatar</th> <th>Nama</th> <th>Alamat</th> <th>Email</th> <th>Jenis kelamin</th> <th>Tempat lahir</th> <th>Tanggal lahir</th> <th>No telepon</th> <th>Tanggal mendaftar</th> <th>Waktu mendaftar</th> <th>Approvement</th> </tr> <?php $a=1; if ($data = mysql_fetch_array($result)) { echo "<tr>"; echo "<td>". $a++ ."</td>"; echo "<td><center><img src='../".$data['avatar']; echo" ' width='140' height='200' /></center></td>"; echo "<td>". $data['nama'] ." </td>"; echo "<td>". $data['alamat'] ." </td>"; echo "<td>". $data['email'] ." </td>"; echo "<td>". $data['sex'] ." </td>"; echo "<td>". $data['tempat_lahir'] ." </td>"; echo "<td>". $data['tanggal_lahir'] ." </td>"; echo "<td>". $data['no_tlp'] ." </td>"; echo "<td>". $data['tanggal'] ." </td>"; echo "<td>". $data['waktu'] ." </td>"; echo "<td><a href='approve.php?user_id=" . $data['user_id'] . "'>Approve ". $data["nama"] . "<a/></td>"; echo '</td>'; } }

70

else{ echo"<b><h1 align='left' > Not Notification New Members </h1></b>"; } ?> </table> <center> <?php if ($num_pages > 1) { echo generate_page_links($cur_page, $num_pages); } mysql_close(); ?> </center> </form> </center> <center> <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>"> <?php function generate_page_links1( $cur_page, $num_pages) { $page_links = ''; // If this page is not the first page, generate the "previous" link if ($cur_page > 1) { $page_links .= '<a href="' . $_SERVER['PHP_SELF'] . '?pages=' . ($cur_page - 1) . '"><-</a> '; } else { $page_links .= '<- '; } // Loop through the pages generating the page number links for ($i = 1; $i <= $num_pages; $i++) { if ($cur_page == $i) { $page_links .= ' ' . $i; } else { $page_links .= ' <a href="' . $_SERVER['PHP_SELF'] . '?pages=' . $i . '"> ' . $i . '</a>'; } } // If this page is not the last page, generate the "next" link if ($cur_page < $num_pages) { $page_links .= ' <a href="' . $_SERVER['PHP_SELF'] .'?pages=' . ($cur_page + 1) . '">-></a>'; } else { $page_links .= ' ->'; } return $page_links; }

71

// Calculate pagination information $cur_page = isset($_GET['pages']) ? $_GET['pages'] : 1; $results_per_page = 2; // number of results per page $skip = (($cur_page - 1) * $results_per_page); $queryList = "SELECT * FROM history where bayar is null"; // Query to get the total results $result = mysql_query($queryList,$connect); $total = mysql_num_rows($result); $num_pages = ceil($total / $results_per_page); // Query again to get just the subset of results $query = $queryList . " LIMIT $skip, $results_per_page"; $result = mysql_query($query,$connect); $data = mysql_num_rows($result); if ($data >= 1){ ?> <b><h1 align="left" > Notification New Buyer </h1></b> <table border = "3" cellpadding = "5" cellspacing="3" width="100%"> <tr> <th>No.</th> <th>Email</th> <th>Gambar Kartu</th> <th>Jumlah</th> <th>Harga</th> <th>Total Harga</th> <th>Status Bayar</th> </tr> <?php $a=1; while ($data = mysql_fetch_array($result)){ echo "<tr>"; echo "<td>". $a++ ."</td>"; echo "<td>". $data['email'] ." </td>"; echo "<td><center><img src='".$data['gambarkartu']; echo" ' width='140' height='200' /></center></td>"; echo "<td>". $data['jumlah'] ." </td>"; echo "<td>". $data['harga_kartu'] ." </td>"; echo "<td>". $data['total_harga'] ." </td>"; echo "<td><a href='bayar.php?id=" . $data['Id'] ."&gambarkartu=" .$data['gambarkartu'] ."&jumlah=" .$data['jumlah'] ."'>Telah Bayar". "<a/></td>"; } } else{ echo"<b><h1 align='left' > Not Notification New Buyer </h1></b>"; } ?> </table> <center> <?php if ($num_pages > 1) { echo generate_page_links1($cur_page, $num_pages);

72

} ?> </center> </form> </center> </div> <?php include'right.php'; ?> </div> <?php include'foot.php'; ?>

Admin/left.php
<div class="left"> </div>

Admin/logout.php
<?php // If the user is logged in, delete the session vars to log them out session_start(); if (isset($_SESSION['nama_admin'])) { // Delete the session vars by clearing the $_SESSION array $_SESSION = array(); // Delete the session cookie by setting its expiration to an hour ago (3600) if (isset($_COOKIE[session_name()])) { setcookie(session_name(), '', time() - 3600); } // Destroy the session session_destroy(); } // Delete the user ID and email cookies by setting their expirations to an hour ago (3600) setcookie('nama', '', time() - 3600); setcookie('email', '', time() - 3600); // Redirect to the home page header('Location: ../index.php'); ?>

Admin/menu.php
<body>

73

<div> <div class="header"> <div class="logo" > <a href="index.php"><img id="logo1" src="../images/logo.png" height="56.875px" width="157,5px" title="Logo Yu-Gi-Oh!"/></a> </div> <div> <ul class="menui"> <li><a href="catalog.php">Catalog</a></li> <li><a href="editcatalog.php">Edit Catalog</a></li> <li><a href="viewmember.php">Member</a></li> <li id="cari"><a href="#">Search</a></li> <li id="m"><form method="post" action="search.php" ><table> <input type="text" name="cari" id="cari" title="masukkan nama kartu yang anda ingin cari"><input type="submit" value="search"> </table></form> </li> </ul> </div> <div> <ul class="login"> <?php if (isset($_SESSION['nama_admin'])) { ?> <li><a href="logout.php">Log Out</a></li> <li><a>Welcome,</a><a href="#" >Admin</a></li> <?php } else{ ?> <li id="login"><a href="#">Log In</a></li> <li><a href="signup.php">Sign Up</a></li> <?php } ?> </ul> </div> </div> <script> $("#m").hide(); $("#cari").click(function(){ $("#m").toggle("slow"); $("#cari").hide(); }); </script>

Admin/right.php
<div class="right"> <?php // Clear the error message $error_msg = "";

74

// Insert the page header $page_title = 'Log In'; // If the session var is empty, show any error message and the log-in form; otherwise confirm the log-in if (empty($_SESSION['nama_admin'])) { echo '<p class="error">' . $error_msg . '</p>'; ?> <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>"> <fieldset id="fieldset"> <legend>Log In</legend> <table> <tr><td><label for="email">Email:</label></td> <td><input type="text" name="email" value="<?php if (!empty($user_email)) echo $user_email; ?>" /></td> </tr> <tr><td><label for="password">Password:</label></td> <td><input type="password" name="password" /></td> </tr> </table> <input type="submit" value="Log In" name="submit" /> </fieldset> </form> <?php } else { // Confirm the successful log-in //echo('<p class="login">You are logged in as ' . $_SESSION['nama'] . '.</p>'); ?> <fieldset> <legend>Log In</legend> <p class="login">You are logged in as <?php echo $_SESSION['nama_admin'];?></p> <iframe id="shoutbox" style="width: 100%; height: 450px; overflow: hidden;" src="shoutbox/shoutbox.php" height="240px" width="100%" frameborder="0" scrolling="no"></iframe> </fieldset> <?php } ?> </div> <script> $("#fieldset").hide(); $("#login").click(function(){ $("#fieldset").toggle("slow"); }); </script>

Admin/search.php
<?php include'header.php';

75

?> </head> <?php include'menu.php'; ?> <div> <?php include'left.php'; ?> <div class="center"> <?php function build_query($katakunci) { $search_query = "SELECT * FROM kartu"; // Extract the search keywords into an array $clean_search = str_replace(',', ' ', $katakunci); $search_words = explode(' ', $clean_search); $final_search_words = array(); if (count($search_words) > 0) { foreach ($search_words as $word) { if (!empty($word)) { $final_search_words[] = $word; } } } $where_list = array(); if (count($final_search_words) > 0) { foreach($final_search_words as $word) { $where_list[] = "namakartu LIKE '%$word%'"; } } $where_clause = implode(' OR ', $where_list); if (!empty($where_clause)) { $search_query .= " WHERE $where_clause"; } return $search_query; } function generate_page_links($katakunci,$cur_page, $num_pages) { $page_links = ''; // If this page is not the first page, generate the "previous" link if ($cur_page > 1) { $page_links .= '<a href="' . $_SERVER['PHP_SELF'] . '?cari=' . $katakunci . '&page=' . ($cur_page - 1) . '"><-</a> '; } else { $page_links .= '<- '; } // Loop through for ($i = 1; $i if ($cur_page $page_links } the pages generating the page number links <= $num_pages; $i++) { == $i) { .= ' ' . $i;

76

else { $page_links .= ' <a href="' . $_SERVER['PHP_SELF'] . '?cari=' . $katakunci . '&page=' . $i . '"> ' . $i . '</a>'; } } // If this page is not the last page, generate the "next" link if ($cur_page < $num_pages) { $page_links .= ' <a href="' . $_SERVER['PHP_SELF'] . '?cari=' . $katakunci . '&page=' . ($cur_page + 1) . '">-></a>'; } else { $page_links .= ' ->'; } return $page_links; } // Grab the sort setting and search keywords from the URL using GET if(isset($_GET['cari'])) $katakunci = $_GET['cari']; elseif(isset($_POST['cari'])) $katakunci = $_POST['cari']; else $katakunci =""; // Calculate pagination information $cur_page = isset($_GET['page']) ? $_GET['page'] : 1; $results_per_page = 2; // number of results per page $skip = (($cur_page - 1) * $results_per_page); $query = build_query($katakunci); $result = mysql_query($query,$connect); if($result) $total = mysql_num_rows($result); else $total=0; $num_pages = ceil($total / $results_per_page); // Query again to get just the subset of results $query = $query . " LIMIT $skip, $results_per_page"; $result = mysql_query($query,$connect); // Generate navigational page links if we have more than one page if ($total > 0) { echo '<p>Ada '.$total.' data yang sesuai.</p>'; echo "<table> <tr> <th width='400'>Gambar Kartu</th> <th colspan='3' width='800'>Detail Kartu</th> </tr>"; while ($data = mysql_fetch_array($result)) { echo "<tr>"; echo "<td rowspan='6' ><center><img src='../".$data['gambarkartu']; echo" ' width='140' height='200' /></center></td>"; echo "</tr>"; echo "<tr>"; echo "<td>Nama: </td>"; echo "<td colspan='2'>".$data['namakartu'] ." </td>"; echo "</tr>"; echo "<tr>";

77

echo "<td>Jenis Kartu: </td>"; echo "<td colspan='2'>".$data['jeniskartu'] ." </td>"; echo "</tr>"; echo "<tr>"; echo "<td>Rarity: </td>"; echo "<td colspan='2'>".$data['rarity'] ." </td>"; echo "</tr>"; echo "<tr>"; echo "<td>Stok: </td>"; echo "<td colspan='2'>".$data['stok'] ." </td>"; echo "</tr>"; echo "<tr>"; echo "<td>Harga: </td>"; echo "<td colspan='1'>".$data['harga'] ." </td>"; echo "<td><a href=editcatalog.php?page=update&id=$data[idkartu]>Update</a> / <a href=delete.php?page=delete&id=$data[idkartu]>Hapus</a></td>"; echo "</tr>"; } echo "</table>"; } else { // menampilkan pesan zero data echo 'Maaf, hasil pencarian tidak ditemukan.'; } if ($num_pages > 1) { echo generate_page_links($katakunci, $cur_page, $num_pages); } mysql_close($connect); ?> </div> <?php include'right.php'; ?> </div> <?php include'foot.php'; ?>

Admin/sessionstart.php
<?php session_start(); // If the session vars aren't set, try to set them with a cookie if (!isset($_SESSION['email'])) { if (isset($_COOKIE['email'])) { //$_SESSION['Password'] = $_COOKIE['Password']; $_SESSION['email'] = $_COOKIE['email']; } } ?>

78

Admin/viewmember.php
<?php include'header.php'; ?> </head> <?php include'menu.php'; ?> <div> <div class="center1"> <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>"> <?php if (isset($_POST['submit']) == true) { if (isset($_POST['todelete']) == true ){ foreach ($_POST['todelete'] as $delete_id) { $query = "DELETE FROM member WHERE user_id = $delete_id"; mysql_query($query, $connect) or die('Error querying database.'); } echo "<script>alert('Customer(s) removed.')</script>"; $home_url = 'http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['PHP_SELF']) . '/viewmember.php'; header('Location: ' . $home_url); }else{ echo"<script>alert('silahkan pilih data yang ingin dihapus')</script>"; } } ?> <?php function generate_page_links( $cur_page, $num_pages) { $page_links = ''; // If this page is not the first page, generate the "previous" link if ($cur_page > 1) { $page_links .= '<a href="' . $_SERVER['PHP_SELF'] . '?page=' . ($cur_page - 1) . '"><-</a> '; } else { $page_links .= '<- '; } // Loop through the pages generating the page number links for ($i = 1; $i <= $num_pages; $i++) { if ($cur_page == $i) { $page_links .= ' ' . $i; } else { $page_links .= ' <a href="' . $_SERVER['PHP_SELF'] . '?page=' . $i . '"> ' . $i . '</a>'; } } // If this page is not the last page, generate the "next" link

79

if ($cur_page $page_links ($cur_page + 1) . } else { $page_links } }

< $num_pages) { .= ' <a href="' . $_SERVER['PHP_SELF'] .'?page=' . '">-></a>'; .= ' ->';

return $page_links; // Calculate pagination information $cur_page = isset($_GET['page']) ? $_GET['page'] : 1; $results_per_page = 2; // number of results per page $skip = (($cur_page - 1) * $results_per_page); $queryList = "SELECT * FROM member where approve ='y'"; // Query to get the total results $result = mysql_query($queryList,$connect); $total = mysql_num_rows($result); $num_pages = ceil($total / $results_per_page); // Query again to get just the subset of results $query = $queryList . " LIMIT $skip, $results_per_page"; $result = mysql_query($query,$connect); $pola = 'asc'; $polabaru = 'asc'; if(isset($_GET['orderby'])){ $orderby = $_GET['orderby']; $pola = $_GET['pola']; $queryList = "select * from member order by $orderby $pola"; if($pola=='asc'){ $polabaru = 'desc'; } else { $polabaru = 'asc'; } } echo "<table border = '3' cellpadding = '5' cellspacing='3' >"; echo '<tr>'; echo '<th>No.</th>'; echo '<th>Delete</th>'; echo '<th>Avatar</th>'; echo '<th><a href="viewmember.php?orderby=nama&pola=' . $polabaru . '">nama</th>'; echo '<th><a href="viewmember.php?orderby=alamat&pola=' . $polabaru . '">alamat</th>'; echo '<th><a href="viewmember.php?orderby=email&pola=' . $polabaru . '">email</th>'; echo '<th><a href="viewmember.php?orderby=sex&pola=' . $polabaru . '">jenis kelamin</th>'; echo '<th><a href="viewmember.php?orderby=tempat_lahir&pola=' . $polabaru . '">tempat lahir</th>'; echo '<th><a href="viewmember.php?orderby=tanggal_lahir&pola=' . $polabaru . '">tanggal lahir</th>'; echo '<th><a href="viewmember.php?orderby=no_tlp&pola=' . $polabaru . '">nomor telepon</th>';

80

echo '<th><a href="viewmember.php?orderby=tanggal&pola=' . $polabaru . '">tanggal mendaftar</th>'; echo '<th><a href="viewmember.php?orderby=waktu&pola=' . $polabaru . '">waktu mendaftar</th>'; //echo '<td>hapus</td>'; echo '</tr>';

//$result = mysql_query($queryList) or die ("Error on Query listregister : ".mysql_error()); //$hasil = mysql_query($queryList,$connect); $a=1; while ($data = mysql_fetch_array($result)) { $approve = $data['approve']; if ($approve == 'y'){ echo "<tr>"; echo "<td>". $a++ ."</td>"; echo "<td >" . '<input type="checkbox" value="' . $data['user_id'] . '" name="todelete[]" />' . "</td>"; echo "<td><center><img src='../".$data['avatar']; echo" ' width='140' height='200' /></center></td>"; echo "<td>". $data['nama']. " </td>"; echo "<td>". $data['alamat'] ." </td>"; echo "<td>". $data['email'] ." </td>"; echo "<td>". $data['sex'] ." </td>"; echo "<td>". $data['tempat_lahir'] ." </td>"; echo "<td>". $data['tanggal_lahir'] ." </td>"; echo "<td>". $data['no_tlp'] ." </td>"; echo "<td>". $data['tanggal'] ." </td>"; echo "<td>". $data['waktu'] ." </td>"; echo "</tr>"; } } ?> </table> <input type="submit" name="submit" value="Remove" onclick="return confirm('Apakah Anda yakin akan menghapus file member?')" /> <center> <?php if ($num_pages > 1) { echo generate_page_links($cur_page, $num_pages); } mysql_close($connect); ?> </center> </form> </div> <?php include'right.php'; ?> </div>

81

<?php include'foot.php'; ?>

Admin/shoutbox/shoutbox.php
<?php error_reporting(0); /************************ KONFIGURASI DATABASE /************************/ /****************************************************/ define("HOST", "localhost"); /***** HOSTNAME *****/ define("USER", "root"); /***** USERNAME *****/ define("PASSWORD", "root"); /***** PASSWORD *****/ define("DATABASE", "tradingcardgame"); /***** DATABASE *****/ /****************************************************/ /************************ EMOTICONS /************************/ $smileys = array( ':merana:' => 'merana.gif', ':like:' => 'like.gif', ':putnam:' => 'putnam.gif', ':sad:' => 'nangis.gif', ':love:' => 'cinta.gif', ':/:' => 'merana.gif', ':like' => 'like.gif', ':putnam' => 'putnam.gif', ':sad' => 'nangis.gif', ':love' => 'cinta.gif', ':;):' => 'alay.gif', ':O:):' => 'ded.gif', ':0):' => 'ded.gif', ':^_^:' => 'hihihi.gif', ':3:D:' => 'hoho.gif', ':O.o:' => 'kecewa.gif', ':8:):' => 'keren.gif', ':8:D:' => 'kull.gif', ':D:' => 'nyengir.gif', ':-*:' => 'kiss.gif', ':3:' => 'kucing.gif', ':p:' => 'meled.gif', ':(:' => 'mencu.gif', ':):' => 'senyum.gif', ':oo:' => 'oo.gif', ':`(:' => 'nangis.gif', ':v:' => 'pac.gif', ':>o:' => 'sengit.gif', ':>_:' => 'sumpek.gif', ':-_-:' => 'tidur.gif', ':|]:' => 'robot.gif' ); /************************ FUNCTIONS /************************/ function connect($db, $user, $password){ $link = @mysql_connect($db, $user, $password);

82

if (!$link) die("<p><b>Koneksi Gagal!</b></p><i>error:</i> <span style='color:red'>".mysql_error().'</span>'); else{ $db = mysql_select_db(DATABASE); if(!$db) die("<p><b>Nama DATABASE salah!</b></p><i>error:</i> <span style='color:red'> ".mysql_error().'</span>'); else return $link; } } function getContent($link, $num){ $res = @mysql_query("SELECT date, user, message FROM shoutbox ORDER BY date ASC LIMIT ".$num, $link); if(!$res) die("Error: ".mysql_error()); else return $res; } function insertMessage($user, $message){ $query = sprintf("INSERT INTO shoutbox(user, message) VALUES('%s', '%s');", mysql_real_escape_string(strip_tags($user)), mysql_real_escape_string(strip_tags($message))); $res = @mysql_query($query); if(!$res) die("Error: ".mysql_error()); else return $res; } /****************************** REQUESTS /******************************/ if(!$_POST['action']){ header ("Location: index.php"); } else{ $link = connect(HOST, USER, PASSWORD); switch($_POST['action']){ case "update": $res = getContent($link, 60); //Ubah angka 60 menjadi lebih besar atau lebih kecil untuk menampilkan isi shoutbox lebih banyak atau sedikit. while($row = mysql_fetch_array($res)){ foreach($smileys as $smiley=>$image) { $row['message'] = str_replace($smiley, '<img src="smileys/'.$image.'">', $row['message']); } $result .= "<li><strong>".$row['user']."</strong> ".$row['message']."</li>"; } echo $result; break; case "insert": echo insertMessage($_POST['nick'], $_POST['message']); break; } mysql_close($link);

83

} ?>

Admin/shoutbox/index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <?php session_start(); ?> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"> <head> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/shoutbox.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> <title>Shoutbox</title> <script language="javascript"> var gOI = function(id){ return document.getElementById(id); }; var emoticonsclick = function(tag){ var d = gOI("message"); var b = d.selectionStart, a = d.selectionEnd; d.value = d.value.substring(0, b) + " " + tag + " " + d.value.substring(a, d.value.length); }; </script> </head> <body> <div id="shoutbox" class="container_shoutbox"> <div class="content_shoutbox"> <div id="smiley_image_shoutbox"> <div id="smiley_image_content"> <img title="close" id="smiley_image_close" src="images/close.gif" alt="close"/> <a title=":)" class="emoticon" href="javascript:emoticonsclick(':):')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/senyum.gif" style="border:none;background:none;"/></a> <a title=":D" class="emoticon" href="javascript:emoticonsclick(':D:')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/nyengir.gif" style="border:none;background:none;"/></a> <a title=":p" class="emoticon" href="javascript:emoticonsclick(':p:')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/meled.gif" style="border:none;background:none;"/></a> <a title=":(" class="emoticon" href="javascript:emoticonsclick(':(:')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/mencu.gif" style="border:none;background:none;"/></a> <a title=":/" class="emoticon" href="javascript:emoticonsclick(':/:')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/merana.gif" style="border:none;background:none;"/></a>

84

<a title=":`(" class="emoticon" href="javascript:emoticonsclick(':`(:')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/nangis.gif" style="border:none;background:none;"/></a> <a title="0:)" class="emoticon" href="javascript:emoticonsclick(':0):')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/ded.gif" style="border:none;background:none;"/></a> <a title="^_^" class="emoticon" href="javascript:emoticonsclick(':^_^:')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/hihihi.gif" style="border:none;background:none;"/></a> <a title="3:D" class="emoticon" href="javascript:emoticonsclick(':3:D:')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/hoho.gif" style="border:none;background:none;"/></a> <a title="O.o" class="emoticon" href="javascript:emoticonsclick(':O.o:')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/kecewa.gif" style="border:none;background:none;"/></a> <a title="8:)" class="emoticon" href="javascript:emoticonsclick(':8:):')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/keren.gif" style="border:none;background:none;"/></a> <a title=":-*" class="emoticon" href="javascript:emoticonsclick(':-*:')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/kiss.gif" style="border:none;background:none;"/></a> <a title=":3" class="emoticon" href="javascript:emoticonsclick(':3:')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/kucing.gif" style="border:none;background:none;"/></a> <a title="8:D" class="emoticon" href="javascript:emoticonsclick(':8:D:')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/kull.gif" style="border:none;background:none;"/></a> <a title=":like:" class="emoticon" href="javascript:emoticonsclick(':like:')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/like.gif" style="border:none;background:none;"/></a> <a title=":oo" class="emoticon" href="javascript:emoticonsclick(':oo:')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/oo.gif" style="border:none;background:none;"/></a> <a title=":v" class="emoticon" href="javascript:emoticonsclick(':v:')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/pac.gif" style="border:none;background:none;"/></a> <a title=":putnam:" class="emoticon" href="javascript:emoticonsclick(':putnam:')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/putnam.gif" style="border:none;background:none;"/></a> <a title=":|]" class="emoticon" href="javascript:emoticonsclick(':|]:')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/robot.gif" style="border:none;background:none;"/></a> <a title=":>o" class="emoticon" href="javascript:emoticonsclick(':>o:')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/sengit.gif" style="border:none;background:none;"/></a>

85

<a title=":><:" class="emoticon" href="javascript:emoticonsclick(':>_:')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/sumpek.gif" style="border:none;background:none;"/></a> <a title=":-_-:" class="emoticon" href="javascript:emoticonsclick(':-_-:')" style="cursor:pointer;margin:1px;border:none"><img src="smileys/tidur.gif" style="border:none;background:none;"/></a></td> </div> </div> <div id="loading_shoutbox"><img src="images/loading.gif" alt="Loading..."></div> <ul></ul> </div> <div id="form"> <form method="post" id="form_input_shoutbox"> <table> <tr> <td><label>Nama</label></td> <td><input class="text user" id="nick" type="text" MAXLENGTH="15" value="Admin" readonly /></td> </tr> <tr> <td><label>Pesan</label></td> <td><input class="text" id="message" type="text" MAXLENGTH="255"/></td> </tr> <tr> <td></td> <td><input style="cursor:pointer;" id="send" type="submit" value="Kirim" /></td> </tr> </table> </form> </div> </div> </body> </html>

Admin/shoutbox/style.css
@CHARSET "UTF-8"; /******* GENERAL RESET *******/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { border:0pt none; font-family:inherit; font-size: 100%; font-style:inherit; font-weight:inherit; margin:0pt; padding:0pt; vertical-align:baseline; }

86

body{ background: #fff center top; line-height:12px; font-size: 11px; font-family: Arial; margin:0pt; overflow: auto; } html,body{ height:100%; text-align: center; background:transparent; } .clear{ clear: both; height: 0; display: block; } a:link, a img{ text-decoration: none; outline:none; } img{ border:none; } strong{ font-weight: 700; color:#005ab6; } #form_input_shoutbox{ width:99%; text-align: left; border-top:1px solid #999; background:#f0f0f0; position:relative; margin:0; padding:2px; font-size: 11px; } #form_input_shoutbox label{ font-weight: 600; } #form_input_shoutbox input{ border: 1px solid #999; background-color: #fff; color: #5f95ef; font-size: 11px; font-weight: 700; } #form_input_shoutbox input.text{ font-weight: normal; color: #555; padding: 2px; margin-bottom: 5px; text-align: left; margin:1px; width:100%; }

87

.container_shoutbox{ margin:0; width: 98%; /*overflow:hidden;*/ border:1px solid #999; position:relative; } .container_shoutbox ul, .container_shoutbox ul li{ list-style: none !important; list-style-position: outside; } .content_shoutbox{ background: #fff; text-align: left; /*padding-left:10px;*/ font-size: 12px; min-height:220px; height:250px; width:100%; overflow:auto; overflow-x:hidden; color:#232323; position:relative; } .content_shoutbox ul{ /**/ background-color:#f6f6f6; } .content_shoutbox li{ margin:0; border-bottom:1px inset #fff; padding:3px 3px 3px 5px; } .date_shoutbox{ font-weight: normal; font-size: 9px; color: #aeaeae; } #loading_shoutbox{ position:absolute; left:140px; bottom:45px; } #smiley_image_shoutbox{ display:none; position:absolute; bottom:0 !important; height:40px; width:100%; text-align:left; padding:5px; } #smiley_image_content{ position:fixed; width:280px; background-color:#fff; border:1px solid #999; padding:5px; left:0;

88

} #smiley_image_close{ position:absolute; right:0; top:0; cursor:pointer; opacity:0.5; filter:alpha(opacity=50); /* For IE8 and earlier */ } #smiley_image_close:hover{ opacity:1; filter:alpha(opacity=100); /* For IE8 and earlier */ }

89