Upload
kresnayudha
View
214
Download
0
Embed Size (px)
Citation preview
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
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
2/90
1
Daftar Isi
Daftar Isi ............................................................................................................. 1
Overview System ................................................................................................ 2
Perancangan ........................................................................................................ 3
Tampilan User Interface ...................................................................................... 8
Program ............................................................................................................... 13
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
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.
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
4/90
3
Perancangan Sistem
Activity Diagram Admin
Use Case Diagram
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
5/90
4
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
6/90
5
Activity Diagram Member
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
7/90
6
Deployment Diagram
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
8/90
7
Schema database Diagram
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
9/90
8
ScreenShot User Interface
Catalog member
Input Data
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
10/90
9
View Member
Index Admin
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
11/90
10
Shopping Cart
Catalog Member
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
12/90
11
Index Member
Index Login
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
13/90
12
Contact Us
How To Buy
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
14/90
13
Catalog Non Member
Index Non Member
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
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;
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
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 {
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;
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
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; }
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
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;
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 {
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
19/90
18
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;
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
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-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 {
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
21/90
20
float :right;
width :25%; height :20px;
background-color :orange;
} #contactus {
width :100%; height :auto;
}
Connect.php
appvars.php
Sessionstart.php
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
22/90
21
include 'connect.php' ; ?>
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
23/90
22
?>
Trading Card Game
Menu.php
Catalog How To
Buy Contact
Us Search
Log Out Welcome,
History
Log In Sign Up
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
24/90
23
$ ( "#m" ). hide (); $ ( "#cari" ). click ( function (){ $ ( "#m" ). toggle ( "slow" ); $ ( "#cari" ). hide (); });
Foot.php
Copyright 2013
Left.php
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
25/90
24
Shopping Cart
Shopping Cart
You must login First
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
26/90
25
} echo '' ;
?>
$ ( "#f" ). hide (); $ ( "#s" ). click ( function (){
$ ( "#f" ). toggle ( "slow" );
$ ( "#s" ). toggle (); });
Right.php
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
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
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
28/90
27
HAHAI
Catalog.php
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
29/90
28
for ( $i = 1 ; $i
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
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
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
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
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
32/90
31
?>
Mailling address :
[email protected] Created By.
GooseSoft Corp.
Search.php
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
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 ;
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
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' ]
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
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
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
36/90
35
}
// Loop through the pages generating the page number links for ( $i = 1 ; $i
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
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
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
38/90
37
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
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 ();
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
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
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
41/90
40
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
42/90
41
echo 'Laki-laki' ; echo 'Perempuan' ; } ?>
Tempat Lahir
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
43/90
42
Pendaftaran Member Baru
avatar
Nama
Password Confirm your Password
Alamat e-mail
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
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
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
45/90
44
Logout.php
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
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
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
47/90
46
?>
Checkout.php
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
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 "" ;
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
49/90
48
?>
Shoutbox/Shoutbox.php
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
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' ]){
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
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 ); };
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
52/90
51
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
53/90
52
style ="cursor:pointer;margin:1px;border:none" >
Nama
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
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; }
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
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;
}
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
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 {}
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
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 {
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;
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
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;
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
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;
width :0px; height :47px; display :block; z-index :101;
} . pagination {
margin :26px auto 0; width :100px;
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
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
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
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
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
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 .= ' ->' ; }
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 "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' ] . "
" ;
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
63/90
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
64/90
63
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
65/90
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
66/90
65
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
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
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
68/90
67
Copyright 2013
Admin/header.php
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
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 ) {
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
70/90
69
// example return of current slidenumber
console.log ( 'animationComplete onslide: ' , current );
}; },
slidesLoaded : function () { $ ( '.caption' ). animate ({ bottom : 0
}, 200 ); }
}); });
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
71/90
70
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 ){ ?> Notification New Members
No. Avatar Nama Alamat Email Jenis kelamin Tempat lahir
Tanggal lahir No telepon Tanggal mendaftar Waktu mendaftar Approvement
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
72/90
71
else { echo " Not Notification New Members
" ; }
?>
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
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 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 Buyer
No. Email Gambar Kartu Jumlah Harga Total Harga Status Bayar
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
74/90
73
} ?>
Admin/left.php
Admin/logout.php
Admin/menu.php
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
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
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
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
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
77/90
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
78/90
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
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
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
80/90
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
81/90
80
if ( $cur_page < $num_pages ) { $page_links .= ' ->' ; } 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 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' ;
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
82/90
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
83/90
82
Admin/shoutbox/shoutbox.php
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
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 );
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
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 ); };
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
86/90
85
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
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; }
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
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%; }
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
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;
7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming
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 */
}