Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming

7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming

1/90

0

WEBSITE TOKO ONLINE TRADINGCARDGAME.COM

Oleh:

ADI GUNA SODIKIN

4311010017

SERVER SIDE PROGRAMMING

TEKNIK INFORMATIKA

TEKNIK ELEKTRO

POLITEKNIK NEGERI JAKARTA

2013


2/90

1

Daftar Isi

Daftar Isi ............................................................................................................. 1

Overview System ................................................................................................ 2

Perancangan ........................................................................................................ 3

Tampilan User Interface ...................................................................................... 8

Program ............................................................................................................... 13


3/90

2

Overview

Sistem ini dimulai saat client masuk kedalam web, setelah itu user tanpa log in dapatmelihat-lihat katalog yang tersedia dan proses output ketika data katalog dimunculkan ,aplikasi web mengambil data yang berada di dalam database dan hasilnya akan di tampilkandata yang berupa gambar, harga dan keterangan barang. user memilih log in jika sudahmemiliki akun dan bisa memilih sign up jika belum menjadi anggota, jika sign up maka userharus memasukkan data yang diminta pada kolom-kolom yang disediakan. setelah itu, sistemmengolah 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 paswordakan 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 danproses output ketika data katalog dimunculkan dengan cara aplikasi web mengambil datayang 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 padabarang yang diinginkan untuk dimasukkan kekeranjang. Dan ketika ingin benar-benarmembeli, user dapat Klik checkout untuk melihat total yang harus dibayar ke rekening yangtelah tersedia, dan ketika sudah mengirim ke rekening tersebut, buyer dapat chat kepadaAdmin untuk konfirmasi bahwa uang telah dikirim dan admin telah menerima. Lalu ketikasudah selesai, barang yang ada di shopping cart akan hilang dan masuk kedalam historypembelian member. Dan stok pada catalog akan berkurang sesuai dengan item yang telahdibeli oleh buyer. Setelah itu barang akan dikirim oleh seller.

Pada website ini memiliki halaman admin, dan admin diwajibkan login terlebih dahuludihalaman depan admin terdapat notifikasi member baru dan pembeli baru yang butuhkonfirmasi dalam pembayaran ataupun member yang ingin bergabung, admin juga bisamenghapus data member, admin juga bisa menggunakan fasilitas search, pada halamanadmin juga menampilkan banyak data dengan menggunakan pages number yang bergunauntuk 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 yangmenyimpan data member, ketiga adalah tabel data yang menyimpan data catalog, keempatadalah tabel data yang menyimpan history dari pembelian semua member, serta tableshoutbox yang menyimpan data fitur chat dalam website halaman admin dan member yangtelah melakukan login.


4/90

3

Perancangan Sistem

Activity Diagram Admin

Use Case Diagram


5/90

4


6/90

5

Activity Diagram Member


7/90

6

Deployment Diagram


8/90

7

Schema database Diagram


9/90

8

ScreenShot User Interface

Catalog member

Input Data


10/90

9

View Member

Index Admin


11/90

10

Shopping Cart

Catalog Member


12/90

11

Index Member

Index Login


13/90

12

Contact Us

How To Buy


14/90

13

Catalog Non Member

Index Non Member


15/90

14

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;


16/90

15

} . 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 {


}

. 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;


17/90

16

}

. 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; }


18/90

17

/*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;


} . 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 {


19/90

18


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;



opacity :0.6; background-color :white;

}

# product_show_2 {


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-color :blue;

}

# product_show_3 {


overflow :hidden;

float :left;


20/90

19

background : url( "../img/4.gif" ) no-repeat center center ; -webkit-background-size : cover; -moz-background-size : cover; -o-background-size : cover;


background-color :yellow;

}

# product_show_4 {


overflow :hidden;

float :left; background : url( "../img/5.gif" ) no-repeat center center ;



background-color :green;

}

#slide_product_1 {

float :left;


background-color :#979797; }

#slide_product_2 { float :left;


background-color :#860a00; }

#slide_product_3 { float :left;


background-color :black; }

#slide_product_4 {


21/90

20

float :right;


background-color :orange;

} #contactus {

width :100%; height :auto;

}

Connect.php

appvars.php

Sessionstart.php


22/90

21

include 'connect.php' ; ?>


23/90

22

?>

Trading Card Game

Menu.php

Catalog How To

Buy Contact

Us Search

Log Out Welcome,

History

Log In Sign Up


24/90

23

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

Foot.php

Copyright 2013

Left.php


25/90

24

Shopping Cart

Shopping Cart

You must login First


26/90

25

} echo '' ;

?>

$ ( "#f" ). hide (); $ ( "#s" ). click ( function (){

$ ( "#f" ). toggle ( "slow" );

$ ( "#s" ). toggle (); });

Right.php


27/90

26

// Confirm the successful log-in //echo('

You are logged in as ' . $_SESSION['nama'] .

'.
'); ?>
Log In

You are logged in as

$ ( "#fieldset" ). hide (); $ ( "#login" ). click ( function (){

$ ( "#fieldset" ). toggle ( "slow" ); });

index.php

Introducing New More Eficient
Sistem

Information

The Brand New

HAHAI

HAHAI A


28/90

27

HAHAI

Catalog.php


29/90

28

for ( $i = 1 ; $i


30/90

29

echo "" ; echo "" ; echo "Rarity: " ; echo "" . $data [ 'rarity' ] . "

" ; echo "" ;

echo "" ; echo "Stok: " ; echo "" . $data [ 'stok' ] . " " ; echo "" ; echo "" ; echo "Harga: " ; echo "Rp." . $data [ 'harga' ] . "

" ; if ( isset ( $_SESSION [ 'nama' ]) && $data [ 'stok' ] ==

0 ){ echo "Stok Kosong" ; } else if ( isset ( $_SESSION [ 'nama' ]) && $data [ 'stok' ]

how to buy.php


31/90

30

Cara membeli di situsini :

1. daftarkan diri anda menjadi member tradingcardgame.com

2. masukkan biodata anda dengan benarterutama alamat(karena akan otomatis akan dipakai untuk alamat

pengiriman). 3. pilih kartu yang ingin di beli pada

catalog dan Add To Cart untuk menambahkan kartu yang ingin dimasukanShopping Cart.

4. jika sudah selesai, kliktombol Checkout pada Shopping cart untuk melihat berapa total yang akandibeli.

5. setalah yakin akan membelikartu tersebut, lalu transfer uang anda ke rekening kami (Mandiri Rec:1000000000000 a.n Tradingcardgameshop) sesuai dengan total harga yangtercantum.

6. setelah mentransfer, harapchat pada admin untuk confirmasi pembayaran.

7. setelah uang dicek danditerima oleh tradingcardgame shop, barang akan dikirim sesuai denganalamat yang anda masukan ke dalam biodata anda.

Contact.php


32/90

31

?>

Mailling address :

[email protected] Created By.

GooseSoft Corp.

Search.php


33/90

32

} $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 .= '' ;

} 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 ;


34/90

33

$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 '

Ada ' . $total . ' data yang sesuai.
' ;
echo "

Gambar KartuDetail Kartu" ;

while ( $data = mysql_fetch_array ( $result )) { echo "" ; echo "" ;

echo "ID Kartu: " ; echo "" . $data [ 'idkartu' ] . "" ; echo "" ; echo "" ;

echo "Nama: " ; echo "" . $data [ 'namakartu' ] . " " ; echo "" ; echo "" ; echo "Jenis Kartu: " ; echo "" . $data [ 'jeniskartu' ] . " " ; echo "" ; echo "" ; echo "Rarity: " ; echo "" . $data [ 'rarity' ] . " " ; echo "" ; echo "" ; echo "Stok: " ; echo "" . $data [ 'stok' ] . " " ; echo "" ; echo "" ; echo "Harga: " ; echo "" . $data [ 'harga' ] . " " ; if ( isset ( $_SESSION [ 'nama' ]) && $data [ 'stok' ] ==

0 ){ echo "Stok Kosong" ; } else if ( isset ( $_SESSION [ 'nama' ]) && $data [ 'stok' ]


35/90

34

echo "" ; }

echo "" ; }

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 ); ?>

History.php


36/90

35

}

// Loop through the pages generating the page number links for ( $i = 1 ; $i


37/90

36

echo "" ;

echo "" . $data [ 'jumlah' ] . "" ;

echo "Rp." . $data [ 'harga_kartu' ]

. "" ; echo "" ; }

echo "" ; echo " Total Yang Telah

Anda Bayar = " ; if ( $data1 = mysql_fetch_array ( $bayar )){

echo "Rp." . $data1 [ 'total' ]. "" ;

} echo "" ;

echo "" ; }

else { echo "" ; echo "Anda belum pernah membeli di TradingCardGame Shop" ; echo '' ; echo "Trima Kasih" ;

} echo "" ;

?>

Signup.php


38/90

37


39/90

38

else { echo '

Sorry, there was a problem uploading

your screen shot image.
' ; }
} }

else { echo '

The screen shot must be a GIF, JPEG, orPNG image file no greater than ' . ( GW_MAXFILESIZE / 1024 ) . ' KB insize.
' ;
}

// Try to delete the temporary screen shot image file @unlink ( $_FILES [ 'avatar' ][ 'tmp_name' ]);

echo 'alert("Pendaftaran sukses. \n terima kasih' . $nama . '")' ;

} else {

echo 'alert("Please enter all of the information to add

your data")' ; }

} else {

echo 'alert("captcha salah")' ; }

}

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 ();


40/90

39

} 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


41/90

40


42/90

41

echo 'Laki-laki' ; echo 'Perempuan' ; } ?>

Tempat Lahir


43/90

42

Pendaftaran Member Baru

avatar

Nama

Password Confirm your Password

Alamat e-mail


44/90

43

Jenis Kelamin Laki-lakiPerempuan

Tempat Lahir Tanggal Lahir

Tanggal

bulan Januari Februari Maret April

Mei Juni Juli Agustus September Oktober November December

Tahun

Telepon Verification


45/90

44

Logout.php


46/90

45

// Redirect to the home page $home_url = 'http://' . $_SERVER [ 'HTTP_HOST' ] .

dirname ( $_SERVER [ 'PHP_SELF' ]) . '/index.php' ; header ( 'Location: ' . $home_url );

?>

Captcha.php


47/90

46

?>

Checkout.php


48/90

47

// 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 ' andbayar 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 "No.GambarJumlahHarga" ;

$b =1 ; while ( $data = mysql_fetch_array ( $result )) {

echo "" ; echo "" . $b ++ . "" ; echo "" ;

echo "" . $data [ 'jumlah' ] . "" ;

echo "Rp." . $data [ 'harga_kartu' ] . "" ;

echo "" ; }

echo "" ; echo " Total Yang Harus

di Bayar = " ; if ( $data1 = mysql_fetch_array ( $bayar )){

echo "Rp." . $data1 [ 'total' ]. "" ;

} echo "" ;

echo "" ; } else { echo "" ;

echo "Anda belum memilih barang yang ingin dibeli" ; } echo "" ;


49/90

48

?>

Shoutbox/Shoutbox.php


50/90

49

':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 ( "

Koneksi Gagal!
error: " . mysql_error (). '' );
else { $db = mysql_select_db ( DATABASE); if (! $db )

die ( "

Nama DATABASE salah!
error: " . mysql_error (). '' );
else return $link ; }

}

function getContent ( $link , $num ){ $res = @ mysql_query ( "SELECT date, user, message FROM shoutbox ORDERBY 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' ]){


51/90

50

case "update" : $res = getContent ( $link , 60 ); //Ubah angka 60 menjadi

lebih besar atau lebih kecil untuk menampilkan isi shoutbox lebih banyakatau sedikit.

while ( $row = mysql_fetch_array ( $res )){ foreach ( $smileys as $smiley => $image ) {

$row [ 'message' ] = str_replace ( $smiley , '' , $row [ 'message' ]); } $result .= "" . $row [ 'user' ]. "

" . $row [ 'message' ]. "" ;

} echo $result ;

break ; case "insert" :

echo insertMessage ( $_POST [ 'nick' ], $_POST [ 'message' ]); break ;

} mysql_close ( $link ); }

?>

Shoutbox/index.php

Shoutbox

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 ); };


52/90

51


53/90

52

style ="cursor:pointer;margin:1px;border:none" >

Nama


54/90

53

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; }


55/90

54

#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;

}


56/90

55

#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 {}


57/90

56

#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 {


}

. 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;


58/90

57

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;


59/90

58

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;


} . pagination {

margin :26px auto 0; width :100px;


60/90

59

}

. 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


61/90

60

mysql_query ( $query , $connect ) or die ( 'Error queryingdatabase.' );

$home_url = 'http://' . $_SERVER [ 'HTTP_HOST' ] . dirname ( $_SERVER [ 'PHP_SELF' ]) . '/index.php' ;

header ( 'Location: ' . $home_url );

}

?>

Admin/appvars.php

Admin/catalog.php


62/90

61

$page_links .= ' ' . $i . '' ;

} }

// If this page is not the last page, generate the "next" link

if ( $cur_page < $num_pages ) { $page_links .= ' ->' ;

} else {

$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 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 "Gambar KartuDetail Kartu" ;

while ( $data = mysql_fetch_array ( $result )) { echo "" ; echo "" ;

echo "" ; echo "" ; echo "Nama: " ; echo "" . $data [ 'namakartu' ] . "

" ; echo "" ; echo "" ; echo "Jenis Kartu: " ; echo "" . $data [ 'jeniskartu' ] . "

" ; echo "" ; echo "" ; echo "Rarity: " ; echo "" . $data [ 'rarity' ] . "

" ;


63/90


64/90

63


65/90


66/90

65


67/90

66

Gambar Kartu : Jenis Kartu : -

Pilih- Monster Spell Trap Nama Kartu : Rarity : -Pilih- Common Rare SuperRare

Ultra Rare UltimateRare

Secret Rare GhostRare Ghost/Gold Rare

Stok : Harga :

Admin/foot.php


68/90

67

Copyright 2013

Admin/header.php


69/90

68

//$_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.' ;

} } }

?>

Trading Card Game

Admin/index.php

$ ( 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 slidenumber

console.log ( 'animationStart on slide:' , current );

}; }, animationComplete : function ( current ){

$ ( '.caption' ). animate ({ bottom : 0

}, 200 ); if ( window.console && console.log ) {


70/90

69

// example return of current slidenumber

console.log ( 'animationComplete onslide: ' , current );

}; },

slidesLoaded : function () { $ ( '.caption' ). animate ({ bottom : 0

}, 200 ); }

}); });


71/90

70


// 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 ){ ?> Notification New Members

No. Avatar Nama Alamat Email Jenis kelamin Tempat lahir

Tanggal lahir No telepon Tanggal mendaftar Waktu mendaftar Approvement


72/90

71

else { echo " Not Notification New Members

" ; }

?>


73/90

72

// 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 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 ){ ?> Notification New Buyer

No. Email Gambar Kartu Jumlah Harga Total Harga Status Bayar


74/90

73

} ?>

Admin/left.php

Admin/logout.php

Admin/menu.php


75/90

74

Catalog Edit Catalog Member Search

Log Out Welcome, Admin

Log In Sign Up

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

Admin/right.php


76/90

75

// Insert the page header $page_title = 'Log In' ;

// If the session var is empty, show any error message and the log-inform; otherwise confirm the log-in

if ( empty ( $_SESSION [ 'nama_admin' ])) {

echo '

' . $error_msg . '
' ; ?>
Log In

You are logged in as

$ ( "#fieldset" ). hide (); $ ( "#login" ). click ( function (){

$ ( "#fieldset" ). toggle ( "slow" ); });

Admin/search.php


77/90


78/90


79/90

78

echo "Jenis Kartu: " ; echo "" . $data [ 'jeniskartu' ] . " " ; echo "" ; echo "" ; echo "Rarity: " ; echo "" . $data [ 'rarity' ] . " " ;

echo "" ; echo "" ; echo "Stok: " ; echo "" . $data [ 'stok' ] . " " ; echo "" ; echo "" ; echo "Harga: " ; echo "" . $data [ 'harga' ] . " " ; echo "Update / Hapus" ;

echo "" ; }

echo "" ; } 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 ); ?>

Admin/sessionstart.php


80/90


81/90

80

if ( $cur_page < $num_pages ) { $page_links .= ' ->' ; } else {

$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 "" ;

echo '' ; echo 'No.' ; echo 'Delete' ; echo 'Avatar' ; echo 'nama' ; echo 'alamat' ; echo 'email' ; echo 'jenis kelamin' ; echo 'tempat lahir' ; echo 'tanggal lahir' ; echo 'nomor telepon' ;


82/90


83/90

82

Admin/shoutbox/shoutbox.php


84/90

83

if (! $link ) die ( "

Koneksi Gagal!
error: " . mysql_error (). '' ); else {
$db = mysql_select_db ( DATABASE); if (! $db )

die ( "

Nama DATABASE salah!
error: " . mysql_error (). '' ); else return $link ;
} } function getContent ( $link , $num ){

$res = @ mysql_query ( "SELECT date, user, message FROM shoutbox ORDERBY 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 atausedikit.

while ( $row = mysql_fetch_array ( $res )){ foreach ( $smileys as $smiley =>$image ) { $row [ 'message' ] = str_replace ( $smiley , '' , $row [ 'message' ]); } $result .= "" . $row [ 'user' ]. "

" . $row [ 'message' ]. "" ;

} echo $result ;

break ; case "insert" :

echo insertMessage ( $_POST [ 'nick' ], $_POST [ 'message' ]); break ;

} mysql_close ( $link );


85/90

84

}

?>

Admin/shoutbox/index.php

Shoutbox

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 ); };


86/90

85


87/90

86

Nama

Pesan

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; }


88/90

87

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%; }


89/90

88

. 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;


90/90

} #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 */

}

Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming

Documents

Transcript of Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming