BAB I. HTML (Hypertext Markup Language)

1 BAB I HTML (Hypertext Markup Language) Pendahuluan World Wide Web Internet merupakan jaringan global yang menghubungkan suatu network dengan network...
Author:  Liani Jayadi
28 downloads 418 Views 1MB Size
Report
DOWNLOAD PDF

Recommend Documents



Gambar 3.6. Tampilan halaman Buku Tamu

by

crew

 untuk halaman About Us ketikkan script dibawah ini dan beri nama about.php:
html

Transitional//EN"

PUBLIC

"-//W3C//DTD

XHTML

1.0

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd"> <meta

http-equiv="Content-Type"

content="text/html;

charset=utf-8" /> ****PK&M Online Shop****
rel="shortcut

icon"

href="images/cdr.ico"

type="image/ico">

PRODUCT PAGE

<pre> Copyright © Crew Lab PK&M 2009 Untuk

informasi,

pertanyaan

dan

0341 417636 atau fax 1341 417 634.

pemesanan

lebih

lanjut

Atau

kirim

email

di


href

=

"mailto

:[email protected]">sini.


Tampilan hasil penulisan script diatas :

Gambar 3.7. Tampilan Halaman About Us

by

crew

Halaman-halaman link sudah dibuat, yaitu halaman utama, halaman produk, halaman bukutamu dan halaman about us. Kemudian potongan-potongan yang sudah dibuat adalah box kiri, box kanan, dan header. Sedangkan box yang ada ditengah diisi dengan script yang sudah diketikkan pada halaman link.

Proses_search.php Pada potongan halaman header, terdapat fasilitas search dimana dapat digunakan untuk mencari data dengan kata kunci berdasarkan produk, maka ketikkan kode dibawah ini untuk mengeksekusi form pada search yaitu proses_search.php: CARI
rel="shortcut

icon"

href="images/home.ico"

type="image/ico">
href="style.css"

rel="stylesheet"

type="text/css"> "; $tampil=mysql_query("select

nama,

keterangan,harga from produk where nama like '%$judul%' order by id desc LIMIT $posisi, $batas"); while($r=mysql_fetch_array($tampil)){ echo"$r[nama]

$r[keterangan] $r[harga]
width=400

color=#ff9900

/>"; } $tampil2 = mysql_query("SELECT * FROM produk"); $jml_data = mysql_num_rows($tampil2); $jml_halaman = ceil($jml_data/$batas); echo "
Halaman : "; for ($i=1; $i<=$jml_halaman; $i++) if ($i != $halaman){ echo "$i | "; } else{ echo " $i | "; } echo "

Jumlah Hasil Pencarian : $jml_data data

"; echo""; ?> Back to Home

Proses pencarian diatas menghubungkan file php dengan mySQL, yaitu menghubungkan dengan tabel produk dimana tabel tersebut menyimpan datadata tentang produk yang dimiliki, dengan menggunakan kata kunci judul produk. Jika ditemukan, maka data akan ditampilkan namun jika tidak maka data tidak ditampilkan. Jika terdapat lebih dari satu hasil pencarian maka tampilan akan dibatasi dengan menggunakan metode paging yang sering digunakan oleh banyak pengguna php saat ini. Pada file diatas, jika hasil pencarian adalah 5, maka akan dibagi menjadi 3 halaman, yaitu 2 data pada halaman 1, 2 data berikutnya pada halaman 2 dan terakhir 1 data pada halaman 3.

Gbook.php Pada halaman buku tamu terdapat form yang dapat menuliskan komentar dengan memasukkan judul, nama, email serta komentar yang dapat secara otomatis tersimpan pada tabel bukutamu yang telah dibuat di MySQL. Untuk mengeksekusi form buku tamu tersebut ketikkan script dibawah ini dan beri nama gbook.php :
into

bukutamu

(judul,nama,email,komentar)

values ('$judul','$nama','$email','$komentar')"); if($result=mysql_query($qry)) { echo

"
Buku

Tamu

berhasil ditambahkan
"; include "bukutamu.php"; } else { echo

"
data

disimpan
"; include "bukutamu.php"; } } ?>

gagal

Dari script yang telah diketikkan diatas, input berupa text pada judul dan nama harus diisikan, jika kosong maka akan muncul pesan “Masukkan judul” jika judul kosong dan “Masukkan nama Anda” jika nama dikosongkan. Jika form telah diisi maka akan muncul pesan “Buku tamu berhasil ditambahkan” serta data tersimpan pada database dan akan tampil pada halaman bukutamu dengan posisi paling atas. Namun jika tidak dapat tersimpanmaka akan muncul pesan “data gagal disimpan”.

Proses_Login.php Pada potongan halaman box kiri terdapat fasilitas login dimana kita yang mempunyai username dan password yang telah terdaftar pada database dapat melakukan login, kemudian untuk melakukan eksekusi dari form login tersebut ketikkan script dibawah ini dan beri nama proses_login.php:
username,password,level

FROM

username='$username' AND password='$password'"; $result=mysql_query($qry); $res=mysql_fetch_array($result); if($res[level]=='customer') { header ("location: index_customer.php"); $_SESSION['SESS_NAME'] = $username; $_SESSION['SESS_PASS'] = $password; } else if($res[level]=='admin') { header ("location: produka.php"); $_SESSION['SESS_NAME'] = $username; $_SESSION['SESS_PASS'] = $password; }

user

WHERE

else { header("location: login_gagal.php"); exit(); } ?>

3.2. Halaman Admin Untuk membuat halaman admin, juga dibagi menjadi beberapa file. Komponen utamanya adalah boxkiria dimana hanya username yang mempunyai level admin saja yang dapat melihat komponen tersebut. Kemudian boxkanan, yaitu yang berisi testimonial dimana sudah dibuat pada modul bab sebelumnya. Boxkiria terdapat 2 box yaitu status login anda, dan link untuk menambah produk dan logout.  Link-link yang ada pada halaman admin adalah Produk, User dan Logout. Halaman produk memperbolehkan admin untuk mengelola produk yaitu menambah, mengedit dan menghapus record pada tabel produk dalam database yang telah dibuat.  Sedangkan halaman User memperbolehkan admin untuk mengedit informasi / field pada record account user yang telah dibuat, serta dapat menghapus account user yang telah dipilih.  Link Logout digunakan untuk keluar dari halaman admin, dan halaman di-direct ke halaman index.php. Langkah pertama yang dilakukan adalah membuat autentikasi untuk mengetahui apakah user berhak mengakses halaman tertentu. Jika benar user mempunyai hak akses terhadap halaman yang akan dibuka maka halaman yang dimaksud akan muncul, namun jika user tidak berhak mengaksesnya maka secara otomatis halaman di-direct ke akses_ditolak.php.

Autentikasi.php
||

(trim($_SESSION['SESS_PASS']) == '')) { header("location: akses_ditolak.php"); exit(); } ?>

Autentikasi digunakan untuk keamanan pengaksesan halaman. Script diatas menanyakan apakah user berhak mengakses halaman yang akan dibuka dengan menggunakan variable session. Kondisi lainnya adalah jika password yang diambil dari variable session kosong, maka halaman akan direct ke halaman akses_ditolak.php.

Akses_ditolak.php Halaman ini digunakan untuk pengaksesan halaman dilindungi yang tidak disertai dengan username dan password. Scriptnya dibawah ini :
html

Transitional//EN"

PUBLIC

"-//W3C//DTD

XHTML

1.0

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd"> <meta

http-equiv="Content-Type"

content="text/html;

charset=iso-8859-1" /> Access Denied

 

Anda
Tidak Mempunyai Akses Di Sini.


<



Tampilannya adalah sebagai berikut :

Gambar 3.8. tampilan akses_ditolak.php

Boxkiria.php Ketikkan script dibawah ini untuk membuat komponen boxkiria yang akan tampil pada halaman dengan user level= admin.
HTML

PUBLIC

"-//W3C//DTD

HTML

4.01

Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <meta

http-equiv="Content-Type"

content="text/html;

charset=iso-8859-1"> ****PK&M Online Shop****

Status




src="images/user.ico"

width="60"

align="texttop"/> Selamat

datang


echo

$_SESSION['SESS_NAME']; ?>

href="ymsgr:sendIM?idin135">
src="http://opi.yahoo.com/online?u=idin135&m=g&t=1"

border=0

width="100" height="50" >


Dari program diatas, di-include-kan file koneksi.php untuk melakukan koneksi terhadap database dan file autentikasi.php dimana file ini digunakan untuk keamanan halaman yang dilindungi, yaitu dengan mencocokkan inputan username serta password dengan data yang ada pada database yang dikoneksikan. Pada script diatas terdapat link ke opi.yahoo.com, hal ini adalah fasilitas tambahan untuk aplikasi yahoo messenger, yaitu chat melalui messenger dengan orang yang mempunyai alamat email yang tertera diatas. Gambar link messenger diatas diambil dari server provider(misalnya Yahoo!), dan untuk mengetahui apakah user sedang online atatu offline.

Hasil dari script diatas adalah sebagai berikut :

Gambar 3.9. Tampilan boxkiria.php Dari tampilan diatas terdapat link Add produk, untuk memprosesnya ketikkan kode dibawah ini dan beri nama add.php :
html

PUBLIC

"-//W3C//DTD

XHTML

1.0

Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> ****PK&M Online Shop****


colspan="2">

FORM

ADD

PRODUK



Nama
name="nama"

type="text"

size="50"

name="harga"

size="15"

/>
Harga
type="text"

/>
Stok
Keterangan
cols="40"

rows="4"

name="keterangan">

type="submit"

name="submit"

value="Tambah" />
Maaf.. Anda Bukan Admin"; } ?>

Hasilnya dari kode diatas adalah :

Gambar 3.10. tampilan add.php Halaman Utama Admin Halaman utama admin pada modul ini diberi nama produka.php, scriptnya adalah dibawah ini :
html

PUBLIC

"-//W3C//DTD

XHTML

1.0

Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <meta

http-equiv="Content-Type"

content="text/html;

charset=utf-8" /> ****PK&M Online Shop****
rel="shortcut

icon"

href="images/cdr.ico"

type="image/ico">

Produk


id,

nama,harga,

stok,

keterangan from produk"); echo""; while($tampil=mysql_fetch_row($sql)) { $id=$tampil[0];$nama=$tampil[1]; $harga=$tampil[2]; $stok=$tampil[3]; $keterangan=$tampil[4]; echo""; echo""; echo""; echo""; echo"";

} echo"
"; echo"$nama
"; echo"Harga: Rp.$harga
"; echo"Stok : $stok
"; echo"$keterangan
"; echo"Edit|
href=

hapus.php?id=$id>Hapus
"; ?>


Hasil tampilan dari script diatas adalah :

Gambar 3.11. Tampilan halaman utaman untuk admin Dari tampilan diatas terdapat link edit dan hapus, untuk edit ketikkan script berikut ini dan beri nama file tersebut edit.php :


html

Transitional//EN"

PUBLIC

"-//W3C//DTD

XHTML

1.0

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd"> <meta

http-equiv="Content-Type"

content="text/html;

charset=utf-8" /> ****PK&M Online Shop****
rel="shortcut

icon"

href="images/cdr.ico"

type="image/ico">

Selamat Datang


*

from

produk

where

id='$id'"); while($r=mysql_fetch_array($query)){ echo "



colspan=2>
FORM

EDIT

PRODUK




Nama
/>
Harga
/>
Stok
Keterangan
cols='40'

rows='4'

name='keterangan'>".$r[keterangan]."

type='submit'

name='submit'

value='Edit' />
type='hidden'

value=".$r[id]." />
";} ?>


name='id'



Hasilnya :

Gambar 3.12. tampilan edit.php Kemudian untuk memproses form diatas, ketikkan kode dibawah ini :
produk

set

nama='$nama',harga='$harga',stok='$stok',keterangan='$keteranga n' where id='$id'"); if ($query){

echo "berhasil Edit"; include "produka.php"; } else { echo "Edit Tidak Berhasil"; include "produka.php"; } ?>

Jika proses edit berhasil maka akan muncul pesan di jendela browser pojok kiri atas “berhasil Edit” dan halaman direct ke halaman utama admin, namun jika proses edit tidak berhasil maka muncul pesan “Edit Tidak Berhasil” dengan halaman yang terbuka adalah halaman utama admin. Untuk link hapus, ketikkan kode dibawah ini :
"
color='#ff0000'

face='verdana'

size='3'>Data

produk dengan nomor id $no berhasil dihapus!"; include "produka.php"; } ?>

Jika record yang dimaksud tidak ada/ tidak berhasil menghapus data maka muncul pesan “data tidak ada”, namun jika proses hapus berhasil maka pesan yang muncul adalah “Data produk dengan nomor id (no_id) berhasil dihapus!”

Halaman User Halaman produk mempunyai fasilitas umum yaitu add, edit dan delete produk, yang sudah ditampilkan pada halaman utama admin. Link selanjutnya adalah link User yang mempunyai fasilitas edit dan delete, sedangkan untuk penambahan user tidak diberikan. Untuk lebih jelasnya ketikkan script dibawah ini :
html

Transitional//EN"

PUBLIC

"-//W3C//DTD

XHTML

1.0

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd"> <meta

http-equiv="Content-Type"

content="text/html;

charset=utf-8" /> ****PK&M Online Shop****
rel="shortcut

icon"

href="images/cdr.ico"

type="image/ico">


USER


id_user,

username,

level,

password from user order by id_user "); $msg=''; echo ""; echo

"
width='55px'

align='center'

valign='middle'>NO "; echo "
colspan=2

align='center'>STATUS"; $no=1; while($r=mysql_fetch_array($tampil)){ echo"
width='70'

align='center'>
href='edit_user_admin.php?no=$r[id_user]'>Edit
width='70'

align='center'>
href='delete_user_admin.php?no=$r[id_user]'>Hapus "; $no++; } echo "
User LevelPassword
$no $r[username] $r[level] $r[password]
"; echo $msg; ?>


Tampilan dari script yang sudah diketikkan diatas adalah sebagai berikut :

Gambar 3.13. tampilan halaman user.php Untuk link edit yang ada pada kolom status, ketikkan kode dibawah ini dan beri nama edit_user_admin.php :
html

Transitional//EN"

PUBLIC

"-//W3C//DTD

XHTML

1.0

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd"> <meta

http-equiv="Content-Type"

content="text/html;

charset=utf-8" /> ****PK&M Online Shop****


rel="shortcut

icon"

href="images/cdr.ico"

type="image/ico">

Edit User

"; $query=mysql_query("select

id_user,

username,

password, level from user where id_user='$id'"); while ($r=mysql_fetch_array($query)){ echo "

  User
  Password
type='password'

name='password'

size='35' value='".$r[password]."'/>
  Level <select name='level'>
selected='selected'

value='Admin'>Admin
 
 
type='reset'

/>
name='Reset'

value='Batal'

type='hidden'

name='id'

value='".$r[id_user]."'/>
 


";

} ?>


©

2009

|

Designed

by

crew

Tampilan yang didapat dari script diatas adalah :

Gambar 3.14. tampilan edit_user_admin.php Setelah itu, form action yang dituju adalah edit_user_act.php, scriptnya dibawah ini :
user

SET

username='$username',

password='$password', level='$level' WHERE id_user='$id'"); if ($edit1){ header ("location: user.php"); } else { echo "Edit Gagal"; } ?>

Kemudian untuk link hapus pada tab User, scriptnya adalah dibawah ini dan beri nama file delete_user_admin.php :
"
color='#ff0000'

face='verdana'

size='3'>Data

user dengan nomor id $id berhasil dihapus!"; include "user.php"; } ?>

Halaman Logout Untuk membuat halaman logout, ketikkan script dibawah ini dan beri nama Logout.php :
html

Transitional//EN"

PUBLIC

"-//W3C//DTD

XHTML

1.0

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd"> <meta

http-equiv="Content-Type"

charset=iso-8859-1" /> Logged Out

content="text/html;


align="right">
Logout

color="#FF9900">Anda

Telah