BAB I HTML (Hypertext Markup Language)Contoh: BLOCKQUOTE untuk indentasi pendek anda bisa gunakan element Q Color merupakan attribute yang kita anda tambahkan pada

BAB I

HTML

(Hypertext Markup Language)

Pendahuluan

World Wide Web

Internet merupakan jaringan global yang menghubungkan suatu network

dengan network lainya di seluruh dunia melalui TCP/IP menjadi protokol penghubung

antara jaringan-jaringan yang beragam di seluruh dunia untuk dapat berkomunikasi,

tukar menukar berbagai macam jenis informasi, dan data tanpa batas Negara dan Benua.

Dalam dunia internet kita sering mendengar kata WWW (World Wide Web)

yang mempunyai definisi adalah salah satu fasilitas dimana kita dapat saling bertukar

informasi di internet. Banyak orang berpendapat bahwa WWW adalah dunianya sedang

internet adalah jaringannya. Protocol standard aturan yang di gunakan untuk

berkomunikasi pada komputer networking, Hypertext Transfer Protocol (HTTP) adalah

protokol untuk WWW.

Address WWW memiliki aturan penamaan alamat web yaitu URL (Uniform

Resource Locator) yang di gunakan sebagai standard alamat internet. HTML adalah

bahasa pemrograman yang digunakan untuk membuat dokumen yang bisa di akses

melalui web. Web/Website adalah kumpulan halaman di internet yang berhubungan

satu sama lain.

HTML (Hypertext Markup Language)

HTML(Hypertext Markup Language) merupakan standard bahasa yang di

gunakan untuk menampilkan dokument web, yang bisa anda lakukan dengan HTML

yaitu:

Mengontrol tampilan dari web page dan contentnya.

Mempublikasikan dokument secara online sehingga bisa di akses dari seluruh

dunia.

Membuat online form yang bisa di gunakan untuk menangani pendaftaran,

transaksi secara online.

Menambahkan object-object seperti image, audio, video dan juga Java applet

dalam dokument HTML.

Browser dan Editor

Browser

Browser merupakan software yang di install di mesin client yang berfungsi

untuk menterjemahkan tag-tag HTML menjadi halaman web. Browser yang sering di

gunakan biasanya Internet Explorer, Netscape Navigator, Opera, Fireworks dan masih

banyak yang lainya.

Editor

Program yang di gunakan untuk membuat dokumen HTML, ada banyak HTML

editor yang bisa anda gunakan diantaranya: Ms FrontPage, Dreamweaver, Notepad.

Basic Tag HTML

Tag-tag HTML

Command HTML biasanya disebut TAG, TAG digunakan untuk menentukan

tampilan dari dokumen HTML.

<BEGIN TAG> </END TAG>

Contoh:

Setiap dokumen HTML di awali dan di akhiri dengan tag HTML.

<HTML>

. . .

</HTML>

Tag tidak case sensitive, jadi bisa digunakan <HTML> atau <html> keduanya

menghasilkan output yang sama. Bentuk dari tag HTML sebagai berikut:

<ELEMENT ATTRIBUTE = value>

Element = nama tag

Attribute = atribut dari tag

Value = nilai dari atribut.

Contoh:

<BODY BGCOLOR=”blue”>

BODY merupakan element, BGCOLOR(Background) merupakan atribut yang

memiliki nilai blue. Untuk memulai bekerja dengan HTML kita bisa gunakan editor

Note Pad atau editor lainya. Caranya:

1. Ketikkan tag-tag berikut di notepad.

<HTML>

<HEAD>

<TITLE>PRAKTIKUM HTML</TITLE>

<BODY BG COLOR=”BLUE”>

<CENTER>LATIHAN WEBSITE</CENTER>

</BODY>

</HEAD>

</HTML>

2. Simpan dengan nama file perdana.htm atau perdana.html

3. Buka dengan browser internet explorer file perdana.htm atau perdana.html maka

outputnya akan di tampilkan seperti gambar di bawah ini.

Struktur HTML Document.

Dokumen HTML bisa di bagi mejadi tiga bagian utama:

HTML

Setiap dokumen HTML harus di awali dan di tutup dengan tag HTML <HTML>

</HTML> tag HTML memberi tahu browser bahawa yang di dalam kedua tag tersebut

adalah dokument HTML.

HEAD

Bagian header dari dokumen HTML di apit oleh tag <HEAD></HEAD> di

dalam bagian ini biasanya dimuat tag <TITLE> yang menampilkan judul dari halaman

pada titel browser.

BODY

Dokument body di gunakan untuk menampilkan text, image link dan semua

yang akan di tampilkan pada web page.

Basic HTML Element

1. List Item(LI)

List item di gunakan untuk mengelompokkan data baik berurutan (ordered list)

maupun yang tidak berurutan (unordered list).

Ada tiga macam list yang bisa anda tambahkan ke dokument HTML:

1.1. Unordered List (Bullet) :

Tag Unordered List (Bullet) berada di dalam tag <body></body> seperti pada

contoh dibawah ini.

Contoh :

<ul>

<li>html</li>

<li>php</li>

</ul>

Tag Attribute Value Description

<UL> TYPE SQUARE

DISC

CIRCLE

Bullet Kotak

Bullet Titik

Bullet

Lingkaran

1.2. Ordered List (Numbering)

Tag Ordered List (Numbering) berada di dalam tag <body></body> seperti pada

contoh dibawah ini.

Contoh:

<ol start="1" type="I">

<li>Hari Pertama</li>

<ol type="a">

<li>Introduction to HTML</li>

</ol>

<li>Hari ke Dua</li>

<ol type="A">

<li>Creating table</li>

</ol>

Tag Attribute Value Description

<OL> TYPE I

i

A

a

Upper Roman

Lower Roman

Upercase

Lowercase

<OL> START n Begin Number

1.3. Definition List

Definition List dinyatakan oleh tag <DL> … </DL> dan <DT> tag menentukan

definition term serta <DD> tag menentukan definition itu sendiri.

Contoh:

<dl>

<dt>HTML

<dd>HyperText Markup Langguage</dd> </dt>

<dt>HTTP

<dd>HyperText Transfer Protocol</dd> </dt>

</dl>

2. Horizontal Rules(HR)

Horizontal Rule tag <HR></HR>digunakan untuk menggambar garis horizontal

dalam dokumen HTML.

Contoh:

<HR>

Horizontal Rule tag digunakan untuk menggambar garis horizontal dalam

document HTML

</HR>

Attribute Description

Position menetukan posisi dari HR, dengan value : center | right

| left.

Width Untuk menentukan panjang HR default 100%

Size Untuk menentukan tebal dari HR dalam pixel

Noshad Efek bayangan

3. Pemformatan Page

3.1 Paragraf (P)

Tag yang digunakan untuk membuat paragraph baru.

Contoh:

<p>

Horizontal Rule tag digunakan untuk menggambar garis horizontal

</p>

3.2. Break

Tag <BR> di gunakan untuk memulai baris baru pada dokumen HTML.

Contoh:

Horizontal Rule tag digunakan untuk menggambar garis horizontal dalam

dokument HTML</ BR>

Dokument body di gunakan untuk menampilkan text, image link dan semua yang

akan di tampilkan pada web page</ BR>

3.3. Font

Dengan tag <FONT> anda bisa menentukan format tampilan font dalam

dokumen HTML seperti color, size, style dan lainya.

Contoh:

<font color="#9966FF" size="5"> Menentukan Format Tampilan Font </font>

Attribute Description

color Untuk menentukan warna font, kita bisa menggunakan

nama font atau hexadecimal (#000000 - #ffffff).

size Untuk menentukan ukuran dari font 1 – 7.

face Untuk menentukan jenis font biasanya dalam satu list

ada beberapa font dan akan di baca mulai dari yang paling

kiri.

3.4. Color

Color merupakan attribute yang kita anda tambahkan pada beberapa element

seperti body, font, link dan lainya. Color di bagi dalam tiga ketegori warna primer yaitu

red, green dan blue. Masing-masing color didefinisikan dalam dua digit hexadecimal

number.

#RRGGBB

Hexadecimal Color

#FF0000 Red

#00FF00 Green

#0000FF Blue

#000000 Black

#FFFFFF White

4. Alignment

Align attribute digunakan untuk menentukan perataan object dalam dokumen

HTML baik berupa text, object, image, paragraph, division dan lain-lain.

Value Description

Left Rata kiri

Right Rata kanan

Center Rata tengah

Justify Rata kanan kiri

5. Format text

5.1 Physical Formatting

Tag Description

<B> ... </B> Bold text

<I> ... </I> Italic text

<U> ... </U> Underline Text

<BIG> ... </BIG> Untuk ukuran yang lebih besar

dari normal

<SMALL> ... </SMALL> Untuk ukuran yang lebih kecil dari

normal

<STRIKE> ... </STRIKE> Untuk memberi garis di tengah

text

<SUP> ... </SUP> Superscript text

<SUB> ... </SUB> Subscript text

<CENTER> ... </CENTER> Center document / text

5.2 Logical Formatting

Tag Description

<EM> ... </EM> Text miring / <I>

<STRONG> ... </STRONG> Text tebal / <B>

<INS> ... </INS> Underline text / <U>

<DEL> ... </DEL> Mencoret text /

<STRIKE>

6. Quotes / Indentasi

Untuk membuat indentasi paragraph kita bisa menggunakan BLOCKQUOTE,

untuk indentasi pendek anda bisa gunakan element Q.

Contoh:

BLOCKQUOTE untuk indentasi pendek anda bisa gunakan element Q

<blockquote>Color merupakan attribute yang kita anda tambahkan pada

beberapa element seperti body, font, link dan lainya </blockquote>

7. Preformatted text

Tag PRE di gunakan untuk menampilkan text sesuai dengan format aslinya.

Contoh:

<pre>

Internet merupkan jaringan global yang menghubungkan suatu network dengan

network lainya di seluruh dunia melalui TCP/IP menjadi protocol penghubung

antara jaringan-jaringan yang beragam di seluruh dunia untuk dapat

berkomunikasi tanpa batas Negara dan Benua.

</pre>

8. Grouping element

Tag DIV dan SPAN di gunakan untuk mengelompokkan element-element

HTML. Span digunakan untuk mendefinisikan inline content sementara <div>

digunakan untuk block-level content.

Contoh:

<div>

Divisi 1 <p>

Div tag digunakan untuk mengelompokkan group element biasanya untuk block-

level element </p> </div>

<div align="right">

Divisi 2 <p>

Ini didalam devisi kedua. di tulis dengan alignment kanan </p> </div>

9. Hyperlink

9.1 Link ke Dokumen Lain

Misalkan ada dua dokumen html link1.htm dan link2.htm untuk membuat link

dari link1.htm ke link2.htm :

Contoh :

<a href="link2.htm"> Click here to view document 2</a>

9.2 Link ke Section tertentu dalam Dokumen

Untuk membuat link ke section tertentu dalam satu dokumen gunakan property

name untuk membuat nama tujuan dari link.

Syntax name anchor:

<A NAME =”nama”>Topic name</A>

untuk membuat link ke name :

<A HREF=”#nama”>menuju ke Topic name</A>

contoh:

<html>

<head>

<title>Anchor Name</title>

</head>

<body>

<b>setting up web server</b>

<p> <pre>

…menukar berbagai macam jenis informasi, dan data tanpa batas Negara dan

Benua. .<a href="#WWW"> WWW (World Wide Web) </a> Dalam dunia

internet kita sering mendengar kata WWW (World Wide Web) yang mempunyai

definisi adalah salah satu fasilitas dimana kita dapat saling bertukar informasi di

internet.<b><a name="WWW"> WWW (World Wide Web)</a></b> Banyak

orang berpendapat bahwa WWW adalah dunianya sedang internet adalah

jaringannya…

</pre>

</body>

</html>

9.3 Link Ke bagian tertentu Dokumen Lain

Untuk membuat link ke bagian tertentu dokumen lain kita bisa gunakan anchor

name didokument yang menjadi tujuan hperlink.

Contoh:

<A HREF=”link3.htm#WWW”>WWW (World Wide Web)</A>

10. Table

10.1 Membuat table

Tag <TABLE> digunaka untuk membuat table dalam dokumen HTML, bagian

pokok dari table adalah cell yang didefinisikan dengan menggunakan tag <TD>.

Contoh :

<table border="1">

<tr>

<td>cell 1a</td>

<td>cell 1b</td>

</tr>

<tr>

<td>cell 2a</td>

<td>cell 2b</td>

</tr> </table>

10.2 Pemformatan table

Untuk memformat perataan text di dalam table anda bisa gunakan attribute

Align dan Valign (vertical Alignment).

Attribute Value

Align Center | justify | left | right

Valign BASELINE | TOP | BOTTOM | MIDDLE

10.3 Merge cell

Tag <TD> memiliki atribut colspan untuk merge column dan rowspan untuk

merge baris.

Contoh:

<table bgcolor=”CCCCFF” width="62%" border="1" cellpadding="0">

<tr>

<td colspan="3" align="center">Quarter 1</td>

<td colspan="3" align="center">Quarter 2</td>

</tr>

</table>

11. Image

11.1 Format Image

Ada banyak format image, tapi ada tiga jenis format yang paling sering di

gunakan :

GIF (Graphical Interchange Format) (.GIF)

JPEG (Joint Photographic Expert Image) (.JPG)

PNG (Portable Network Graphics)

11.2 Insert Image ke Dokumen

Tag IMG di gunakan untuk menginsertkan image ke dokumen HTML. Syntax

nya:

<IMG SRC = “URL”>

Contoh :

<img src=" E:\GAMBAR\wallp baru\ Rainbow_Concepts.jpg">

Attribute Value Description

Align Center | justify | left |

right |

Baseline | top | bottom |

middle

Top, bottom, middle

digunakan untuk menentukan posisi

image terhadap text

Left, right, center untuk menentukan

posisi image di document

12. Text berjalan

Untuk membuat tulisan berjalan kita dapat menggunakan tag <MARQUEE>

seperti pada contoh dibawah ini.

Contoh :

<MARQUEE BEHAVIOR=SCROLL DIRECTION = LEFT> TEXT

</MARQUEE>

Attribute Value Description

MARQUEE

BEHAVIOR

SLIDE

SCROLL

ALTERNATE

Berhenti di

Jalan terus

Bolak-balik

DIRECTION LEFT, RIGHT Dari kiri, dari

kanan

BAB I

PEMBUATAN WEBSITE

Untuk membuat website hendaknya ditentukan dulu rancangan tampilan awal dan

sitemap / peta situs. Pada modul ini akan membuat website toko online dimana akan

menggunakan beberapa bahasa web yaitu html, php, sql, css, javascript serta AJAX

yang dikembangkan dari bahasa Javascript yang dikembangkan oleh Rasmus Lerdorf,

sang pembuat bahasa php.

Pada modul ini akan dijelaskan terlebih dahulu dalam membuat database dengan bahasa

sql. Nama databasenya adalah web_(NIManda). Dalam database tersebut terdiri dari 3

tabel yang akan dibuat yaitu user, produk dan bukutamu.

2.1 Membuat Database

Ketikkan script dibawah ini pada jendela sql :

Create database web_0612628;

Use web_0612628;

Kemudian tekan enter.

Selanjutnya adalah membuat 3 tabel.

2.2 Membuat Tabel Produk

Tabel produk terdiri dari 5 field, yaitu :

NAMA

VAR

TIPE

DATA

LENGTH PRIMARY NULL KET

id Int 4 √ Auto_incremet

nama Varchar 200

Harga Int 7

Stok Int 3

keterangan varchar 200 √

Untuk syntax sql, ketikkan script di bawah ini :

Create table produk ( id int(4) not null primary key

auto_increment, nama varchar(200) not null, harga int(7) not

null, stok int(3) not null, Keterangan varchar(200) );

Kemudian masukkan data dengan menggunakan insert, data tersebut adalah :

Gambar 2.1. Data produk

2.3 Membuat Tabel User

Ketikkan kode dibawah ini pada jendela sql :

CREATE TABLE user (

id_user int(4) NOT NULL primary key auto_increment,

username varchar(30) NOT NULL,

password varchar(30) NOT NULL,

level varchar(10) NOT NULL,

keterangan varchar(100);

kemudian masukkan data pada tabel dibawah ini :

Gambar 2.1. Data produk

Syntaxnya adalah sebagai berikut :

INSERT INTO user VALUES (1, 'Admin', 'admin', 'admin', 'full

akses');

INSERT INTO user VALUES (2, 'customer', '1234', 'customer',

'membeli barang saja.');

2.4 Membuat Tabel Bukutamu

Ketikkan kode dibawah ini untuk membuat tabel buku tamu :

CREATE TABLE bukutamu (

id int(4) NOT NULL primary key auto_increment,

judul varchar(100) NOT NULL default 'Judul',

nama varchar(30) NOT NULL,

email varchar(30) default NULL,

komentar text NOT NULL);

Kemudian masukkan data-data yang anda inginkan.

Setelah membuat databasenya maka langkah selanjutnya adalah membuat

halaman index dimana halaman index merupakan halaman utama atau

homepage dari website yang akan dibuat.

MODUL III

PEMBUATAN HALAMAN WEB

DENGAN PHP, CSS DAN JAVASCRIPT

3.1.Tampilan Web index.php

Website yang akan dibangun adalah dengan tampilan seperti dibawah ini :

Gambar 3.1. Tampilan hompage (index.php)

Untuk membuat tampilan seperti diatas diperlukan script css agar dalam pembuatan

website lebih mudah dan terstruktur dan ketika ingin merubah gaya dari tampilan dapat

merubah syntax css tersebut saja sehingga dapat memaksimalkan waktu dan kinerja.

Syntax css yang digunakan diberi nama style.css adalah sebagai berikut :

body {

margin:0;

padding:0;

line-height: 1.5em;

font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

color: #000000;

background: #ffffff;

}

a:link, a:visited { color: #008fc1; text-decoration: none; }

a:active, a:hover { text-decoration: underline; }

h1 {

margin: 0px;

padding: 0px 0px 0px 0px;

font-size: 18px;

font-weight: bold;

color:#008fc1;

}

h2 {

margin: 0px;


font-size: 15px;

font-weight: bold;

color:#ffffff;

}

h3 {

margin: 0px;

padding: 0px;

font-size: 14px;

font-weight: bold;

color: #37a7ce;

text-decoration: underline;

}

h4 {

margin: 0px;


font-size: 12px;

font-weight: bold;

color: #000000;

}

p {

margin: 10px 0px;

color: #5b5847;

text-align: justify;

}

img {

margin: 0px;

padding: 0px;

}

#container {

margin: 0px auto;

width: 930px;

margin-top: 15px;

}

.send_btn {

margin: 0px;


height: 19px;

width: 27px;

font-size: 14px;

font-weight: bold;

color: #0a8eb8;

text-decoration: none;

background: none;

border: none;

}

.textfield {

margin: 0px 5px 0px 0px;

padding: 0px;

float: left;

height: 19px;

width: 175px;

font: 12px Arial;

font-weight: normal;

color: #333333;


border: 1px solid #CCCCCC;

}

#header1 {

clear: both;

padding: 0px;


width: 930px;

height: 147px;

}

#logo {


float: left;

width: 235px;

height: 147px;

background: url(images/logo.jpg) no-repeat;

}

#header {

margin: 0px;

padding:0px;

float: right;

width: 690px;

height: 147px;

background: url(images/templatemo_heading_background.jpg) no-

repeat;

}

#amenu {

clear: both;

margin-bottom: 5px;

padding: 0px;

width: 930px;

height: 35px;

background: #ffffff;

}

#search {

float: left;

width: 225px;

height: 28px;


background: url(images/templatemo_menu_background.gif) repeat-x;

}

#menu {

float: right;

width: 690px;

height: 35px;

margin: 0px;

background: url(images/templatemo_menu_background.gif) repeat-x;

}

#menu ul {

margin: 0px;

text-align: right;

list-style: none;

}

#menu ul li {

margin: 0px;

display: inline;

}

#amenu ul li a {

margin: 0px;

display:inline-block;

height: 30px;


font: 14px arial;

color:#000000;


}

#menu ul li a:hover, #menu ul li .current {

color: #FFF;

background: url(images/templatemo_menuhover_background.gif)

repeat-x;

}

#isi {

float: left;

margin: 0px;

padding: 0px;

width: 930px;

}

#kiri {

float: left;


padding: 20px 10px;

width: 215px;

background: #e0e0e0;

min-height: 400px;

}

#tengah {

float: left;


padding: 20px 5px;

width: 465px;

min-height: 400px;

}

#kanan {

float: right;



width: 200px;

background: #e0e0e0;

min-height: 400px;

}

#kotak {

width: 215px;

padding: 0px;

background: #008fc1;


}

#kotak .atasnya{

width: 195px;

height: 15px;

padding: 10px;

background: url(images/templatemo_leftsection_top.gif) no-

repeat;

}

#kotak .bawahnya{

width: 195px;

padding: 10px;

color: #FFFFFF;

}

#kotak2 {

width: 190px;


background: #6ebfdc;

border-top: 5px solid #008fc1;


}

#kotak2 ul {

margin: 0px;


list-style: none;

}

#kotak2 ul li{

display: block;


padding: 0px;

}

#kotak2 ul li a{


margin: 0px;

color: #ffffff;


background: url(images/templatemo_list_icon02.gif) center left

no-repeat;

}

#kotak2 ul li a:hover{


}

#kotak3 {

clear: both;

width: 190px;

padding: 0px;


}

#kotak3 .atas{

width: 190px;

height: 25px;


background: #008fc1 url(images/templatemo_rightsection_top.gif)

no-repeat;

}

#kotak3 .bawah{

width: 170px;


background: #cce8f2;

}

#kotak3 .customer_section{

clear: both;


padding: 0px;

}

.form_row{

padding: 3px 0px;

}

form{


padding: 0px;

text-align: right;

}

label {

margin-right: 10px;

}

input{

width: 110px;

height: 18px;

}

.button{

width: 60px;

height: 25px;

}

#footer {

clear: both;


width: 930px;

height: 50px;

text-align: center;

color: #666;

background: #d5d5d5;

text-align: center;

}

#footer a{

color: #666;

}

#footer a:hover{

color: #ffffff;

}

Pada halaman diatas (index.php) terdapat beberapa box tampilan serta link-link yaitu

link produk, buku tamu dan about us. Dan fasilitas lainnya yang ada adalah pada box

kiri :search, login, review produk terbaru. Sedangkan pada box kanan terdapat fasilitas

testimonial, serta informasi utama pada bagian tengah.

Untuk membuatnya dilakukan bertahap, pada langkah awal adalah membuat halaman

index serta style dengan menggunakan css. Kemudian langkah kedua adalah membuat

fasilitas yang berada pada box kiri. Namun sebelum itu yang harus dilakukan adalah

membuat koneksi ke database. Untuk melakukan koneksi dapat dilakukan langsung

pada halaman yang akan menggunakan tabel, atau membuat file dengan ekstensi .php

atau .inc. scriptnya adalah sebagai berikut :

<?php

$konek=mysql_connect("localhost","root","12345678");

$konekdb=mysql_select_db("web_0612628");

if (!$konek)

{

die("KOneksi ke mySQL gagal!");

}

if(!$konekdb)

{

die("Koneksi ke database gagal!");

}

?>

Perhatikan script dibawah ini :

$konek=mysql_connect("localhost","root","12345678");

Script value yang digunakan diatas tergantung pada setting apache/ xampp/ wampp/

lampp yang digunakan. Dimana localhost adalah nama web server yang digunakan, root

adalah nama username, dan 12345678 adalah password yang digunakan.

Pada halaman index.php diatas menggunakan potongan-potongan bagian, yaitu bagian

box kiri, bagian box tengah, bagian box kanan dan bagian header.

Untuk bagian box kiri ketikkan script dibawah ini dan beri nama boxkiri.php:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;

charset=iso-8859-1">

<title>****PK&M Online Shop****</title>

</head>

<body>

<div id="kiri">

<div id="kotak">

<div class="atasnya">

<h2>Login</h2>

</div>

<div class="bawahnya">

<form method="post"

action="proses_login.php">

<div class="form_row">

Username <input class="inputfield"

name="username" type="text" id="email_addremss"/></div>

<div class="form_row">Password <input

class="inputfield" name="password" type="password"

id="password"/></div>

<input class="button" type="submit"

name="Submit" value="Login" />

</form>

</div>

</div>

<div id="kotak2">

<h2>Review Produk Terbaru</h2>

<?php

include "koneksi.inc";

$hasil=mysql_query("select nama,

keterangan, harga from produk order by id desc LIMIT 1");

while($r=mysql_fetch_array($hasil)){

echo"<br><b>$r[nama]</b>

<hr width=150 color=blue align=left>

$r[keterangan]<br/>

Harga : <b>Rp.$r[harga]</b><br/>";

}

?>

</div>

<div>

<a href="ymsgr:sendIM?idin135"><img

src="http://opi.yahoo.com/online?u=idin135&m=g&t=1" border=0

width="100" height="50" >

</a>

</div>

</div>

</body>

</html>

Setelah diketikkan script diatas maka pada jendela browser dapat dilihat hasilnya

adalah sbb :

Gambar 3.2. Tampilan boxkiri

Sedangkan untuk box kanan yaitu untuk testimonial ketikkan script dibawah ini

dan beri nama boxkanan.php:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

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

<html>

<head>




</head>

<body>

<div id="kanan">

<div id="kotak3">

<div class="atas">

<h2 align="center">Testimonial</h2>

</div>

<div class="bawah">

<div class="customer_section">

<marquee direction="up"

scrollamount="2" scrolldelay="50" onMouseOver="this.stop()"

onMouseOut="this.start()">

<?php


$hasil=mysql_query("select nama, email, komentar from

bukutamu order by id desc");

while($r=mysql_fetch_array($hasil)){

echo"<br><b>$r[nama]</b>

<br/>$r[komentar]<br/>

<b>$r[email]</b><br/>

<hr width=150

color=blue align=left>";

}

?>

</marquee>

</div>

</div>

</div> </div>

</body>

</html>

Tampilan dari script diatas adalah :

Gambar 3.3. Tampilan boxkanan

Kemudian untuk headernya ketikkan script dibawah ini dan beri nama

header.htm:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-

8859-1">


</head>

<body>

<div id="header1">

<div id="logo"></div>

<div id="header"></div>

</div>

<div id="amenu">

<div id="search"><form method="post"

action="proses_search.php">

<input class="textfield" type="text"

value="Cari produk..." name="judul"/> <input class="send_btn"

type="submit" value="Go" />

</form>

</div>

</body>

</html>

Hasil dari script diatas :

Gambar 3.4. Tampilan Header.htm

Langkah selanjutnya adalah membuat halaman-halaman inti dimana potongan-

potongan halaman yang sudah dibuat sebelumnya disatukan dengan cara

include.

Untuk halaman index (homepage), ketikkan script dibawah ini dan beri

nama index.php:

<?php include "koneksi.inc"; ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

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

transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>


charset=utf-8" />


<link rel="shortcut icon" href="images/cdr.ico"

type="image/ico">

<link href="style.css" rel="stylesheet"

type="text/css" />

</head>

<body>

<div id="container">

<?php include"header.htm"; ?>

<div id="menu">

<ul>

<li><a href="index.php"

class="current">Home</a></li>

<li><a

href="produk.php">Produk</a></li>

<li><a href="bukutamu.php">Buku

Tamu</a></li>

<li><a href="about.php">About

Us</a></li>

</ul>

</div>

</div>

<div id="isi">

<? include "boxkiri.php"; ?>

<div id="tengah">

<h1>Selamat Datang</h1>

<p>

Selamat datang do Online Shop PK&M.

Kami menawarkan berbagi macam produk software sebagai

solusi permasalahan anda.</p>

<p>

Kami menjual produk software mulai dari bahasa C

sampai dengan .Net framework, dengan tutorial yang dapat

digunakan sebagai media pembelajaran.

</p> <br />

</div>

<?php include "boxkanan.php"; ?>

</div>

<div id="footer">

Copyright © 2009 | Designed by crew

PK&M</div>

</div>

</body>

</html>

Hasil dari script diatas dapat dilihat pada gambar 3.1.

Untuk halaman produk, ketikkan kode dibawah ini dan beri nama

produk.php:




transitional.dtd">


<head>


charset=utf-8" />



type="image/ico">

<link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>



<div id="menu">

<ul>

<li><a href="index.php">Home</a></li>

<li><a href="produk.php"

class="current">Produk</a></li>


Tamu</a></li>

<li><a href="about.php">About Us</a></li>

</ul>

</div>

</div>

<div id="isi">


<div id="tengah">

<h1>PRODUCT PAGE</h1>

<?php

include"koneksi.inc";

echo "<table border=0>";

$tampil=mysql_query("select nama, keterangan, harga, stok

from produk order by id desc");

if($t=mysql_num_rows($tampil)==0)

{echo "<font face='verdana' size='5'><center>Berita

Belum Ada!</center></font>";}

else {

while($r=mysql_fetch_array($tampil)){

echo"<tr><td><b>$r[nama]</b></td></tr>

<tr><td>Harga :Rp.$r[harga]</td></tr>

<tr><td>$r[keterangan]</td></tr>

<tr><td>Stok : $r[stok]</td></tr>";

}}

echo"</table>";

?>

</div>


</div>

<div id="footer">


PK&M</div>

</div>

</body>

</html>

Gambar 3.5. Tampilan halaman produk

untuk halaman buku tamu, ketikkan kode dibawah ini dan beri nama

bukutamu.php :




transitional.dtd">


<head>


charset=utf-8" />



type="image/ico">


</head>

<body>



<div id="menu">

<ul>


<li><a href="produk.php">Produk</a></li>

<li><a href="bukutamu.php"

class="current">Buku Tamu</a></li>

<li><a href="about.php">About Us</a></li>

</ul>

</div>

</div>

<div id="isi">


<div id="tengah">

<h1>Halaman Buku Tamu </h1>

<?


echo "<table border=0 width='80%'>";

$tampil=mysql_query("select * from bukutamu order by

id DESC");

if($t=mysql_num_rows($tampil)==0)

{echo "<font face='verdana' size='5'><center>Buku

tamu Belum Ada!</center></font>";}

else {


echo"<tr><td><b>$r[judul]</b><br></td></tr>

<tr><td><u>$r[email]</u></td></tr>

<tr><td>$r[komentar]</td></tr>

<tr><td>OLEH : <b>$r[nama]</b></td></tr>

<tr><td><hr color='#009900' width='400'

align='left'></td></tr>";

}}

echo"</table>";

?>

<form method="post" action="gbook.php">

<table align="left" width="80%">

<tr>

<td colspan="2"><center><font face="verdana"

color="#003300"><h3>ISI BUKU

TAMU</h3></font></center></td>

</tr>

<tr>

<td>Judul :</td>

<td><input type="text" name="judul"/></td>

</tr>

<tr>

<td>Nama :</td>

<td><input type="text" name="Nama"/></td>

</tr>

<tr>

<td>Email :</td>

<td><input type="text" name="email"/></td>

</tr>

<tr>

<td valign="top">Komentar :</td>

<td><textarea cols="35" rows="8"

name="komentar"></textarea></td>

</tr>

<tr>

<td></td>

<td><input type="submit" value="Kirim" /><input

type="reset" value="ULang" /></td>

</tr>

</table>

</form>

</div>


</div>

<div id="footer">


PK&M</div>

</div>

</body>

</html>

Gambar 3.6. Tampilan halaman Buku Tamu

untuk halaman About Us ketikkan script dibawah ini dan beri nama

about.php:



transitional.dtd">


<head>


charset=utf-8" />



type="image/ico">


</head>

<body>



<div id="menu">

<ul>


<li><a href="produk.php">Produk</a></li>


Tamu</a></li>

<li><a href="about.php"

class="current">About Us</a></li>

</ul>

</div>

</div>

<div id="isi">


<div id="tengah">

<h1>PRODUCT PAGE</h1>

<pre>

Copyright © Crew Lab PK&M 2009

Untuk informasi, pertanyaan dan pemesanan lebih lanjut

0341 417636 atau fax 1341 417 634.

Atau kirim email di <a href = "mailto

:[email protected]">sini</a>.

</pre>

</div>


</div>

<div id="footer">


PK&M</div>

</div>

</body>

</html>

Tampilan hasil penulisan script diatas :

Gambar 3.7. Tampilan Halaman About Us

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:

<html>

<head><title>CARI</title>

<link rel="shortcut icon" href="images/home.ico"

type="image/ico">

<link href="style.css" rel="stylesheet"

type="text/css">

</head><body>

<?php


$judul=$_POST['judul'];

$batas = 2;

$halaman = $_GET['halaman'];

if (!($halaman)) {

$posisi = 0;

$halaman = 1;

}

else{

$posisi=($halaman-1)*$batas;

}

echo "<table border=0>";

$tampil=mysql_query("select nama,

keterangan,harga from produk where nama like '%$judul%'

order by id desc LIMIT $posisi, $batas");


echo"<tr><td><b>$r[nama]</b></td></tr>

<tr><td>$r[keterangan]</td></tr>

<tr><td>$r[harga]</td></tr>

<tr><td><hr width=400 color=#ff9900

/></td></tr>";

}

$tampil2 = mysql_query("SELECT * FROM produk");

$jml_data = mysql_num_rows($tampil2);

$jml_halaman = ceil($jml_data/$batas);

echo "<br>Halaman : ";

for ($i=1; $i<=$jml_halaman; $i++)

if ($i != $halaman){

echo "<a href=$_SERVER[PHP_SELF]?halaman=$i>$i</a>

| ";

}

else{

echo " <b>$i</b> | ";

}

echo "<p>Jumlah Hasil Pencarian : <b>$jml_data</b>

data </p>";

echo"</table>";

?>

<a href="index.php">Back to Home</a>

</body></html>

Proses pencarian diatas menghubungkan file php dengan mySQL, yaitu

menghubungkan dengan tabel produk dimana tabel tersebut menyimpan data-

data 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 :

<?php


$judul=$_POST['judul'];

$nama=$_POST['Nama'];

$email=$_POST['email'];

$komentar=$_POST['komentar'];

if($judul=='')

{echo"Masukkan Judul";}

else if($nama=='')

{echo"Masukkan nama Anda";}

else {

$qry=("insert into bukutamu (judul,nama,email,komentar)

values ('$judul','$nama','$email','$komentar')");

if($result=mysql_query($qry))

{

echo "<center>Buku Tamu

berhasil ditambahkan </center>";

include "bukutamu.php";

}

else

{

echo "<center>data gagal

disimpan</center>";

include "bukutamu.php";

}

}

?>

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:

<?php


session_start();

$username = $_POST['username'];

$password = $_POST['password'];

$qry="SELECT username,password,level FROM user WHERE

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;

}

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

<?php

session_start();

if(!isset($_SESSION['SESS_NAME']) ||

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



transitional.dtd">


<head>


charset=iso-8859-1" />

<title>Access Denied</title>


</head>

<body>

<h1><font color="#FFCC00"Akses Di Tolak</font></h1>

<p align="center"> </p>

<h4 align="center"><font color="#FFCC00">Anda<br />

Tidak Mempunyai Akses Di Sini.

<br />

<a href="index.php"><<Kembali ke Home</a></font></h4>

</body>

</html>

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.

<?php

include"koneksi.php";

include"autentikasi.php";

?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

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

<html>

<head>




</head>

<body>

<div id="kiri">

<div id="kotak">

<div class="atasnya">

<h2>Status</h2>

</div>

<div class="bawahnya">

<img src="images/user.ico" width="60"

align="texttop"/>

Selamat datang<b> <?php echo

$_SESSION['SESS_NAME']; ?> </b>

</div>

</div>

<div id="kotak2">

<h2>Menu Admin</h2>

<ul>

<li><a href="add.php">Add

Produk</a></li>

<li><a href="logout.php">Logout</a></li>

</ul>

</div>

<div>

<a href="ymsgr:sendIM?idin135"><img

src="http://opi.yahoo.com/online?u=idin135&m=g&t=1" border=0

width="100" height="50" >

</a>

</div>

</div>

</body>

</html>

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 :

<?php include "koneksi.inc";

include "autentikasi.php"; ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

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


<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"

/>


<link rel="shortcut icon" href="images/cdr.ico" type="image/ico">


</head>

<body>

<?

if ($_SESSION['SESS_NAME'] == "admin")

{

?>



<div id="menu">

<ul>

<li><a href="produka.php"


<li><a href="user.php">User</a></li>


</ul>

</div>

</div>

<div id="isi">

<? include "boxkiria.php"; ?>

<div id="tengah">

<form method="post" action="proses_add.php">

<table width="80%" align="center" cellpadding="0">

<tr>

<td colspan="2"><h1><center>FORM ADD

PRODUK</center></h1></td>

</tr>

<tr>

<td width="30">Nama </td>

<td><input name="nama" type="text" size="50"

/></td>

</tr>

<tr>

<td>Harga </td>

<td><input type="text" name="harga" size="15"

/></td>

</tr>

<tr>

<td>Stok </td>

<td><input type="text" name="stok" size="10"/></td>

</tr>

<tr>

<td valign="top">Keterangan </td>

<td><textarea cols="40" rows="4"

name="keterangan"></textarea></td>

</tr>

<tr>

<td></td>

<td><input type="submit" name="submit"

value="Tambah" /><input type="reset" value="Ulang" /></td>

</tr>

</table>

</form>

</div>


</div>

<div id="footer">

Copyright © 2009 | Designed by crew PK&M</div>

</div>

<?

}

else

{

echo "<h1>Maaf.. Anda Bukan Admin</h1>";

}

?>

</body>

</html>

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 :

<?php


include "autentikasi.php";

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

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


<head>


charset=utf-8" />



type="image/ico">


</head>

<body>



<div id="menu">

<ul>

<li><a href="produka.php" class=

"current">Produk</a></li>



</ul>

</div>

</div>

<div id="isi">

<?php include "boxkiria.php"; ?>

<div id="tengah">

<h1>Produk</h1>

<?php

$sql=mysql_query("select id, nama,harga, stok,

keterangan from produk");

echo"<table width=70%>";

while($tampil=mysql_fetch_row($sql))

{

$id=$tampil[0];$nama=$tampil[1];

$harga=$tampil[2]; $stok=$tampil[3];

$keterangan=$tampil[4];

echo"<tr><td>";

echo"<b>$nama</b></td></tr>";

echo"<tr><td>";

echo"Harga: Rp.$harga</td></tr>";

echo"<tr><td>";

echo"Stok : $stok</td></tr>";

echo"<tr><td>";

echo"$keterangan<br></td></tr>";

echo"<tr><td>";

echo"<a

href=edit.php?id=$id>Edit</a>|<a href=

hapus.php?id=$id>Hapus</a><br><hr color=#0066ff></td></tr>";

}

echo"</table>";

?>

</div>


</div>

<div id="footer">

Copyright © 2009 | Designed by crew PK&M

</div>

</div>

</body>

</html>

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 :

<?php include "koneksi.inc";




transitional.dtd">


<head>


charset=utf-8" />



type="image/ico">


</head>

<body>



<div id="menu">

<ul>





</ul>

</div>

</div>

<div id="isi">


<div id="tengah">

<h1>Selamat Datang</h1>

<?php

$id=$_GET['id'];

$query=mysql_query("select * from produk where

id='$id'");

while($r=mysql_fetch_array($query)){

echo "<form method='post' action='proses_edit.php'>

<table>

<tr>

<td colspan=2><center>FORM EDIT

PRODUK</center></td>

</tr>

<tr>

<td width='30'>Nama </td>

<td><input name='nama' type='text' size='50'

value='".$r[nama]."' /></td>

</tr>

<tr>

<td>Harga </td>

<td><input type='text' name='harga' size='15'

value='".$r[harga]."' /></td>

</tr>

<tr>

<td>Stok </td>

<td><input type='text' name='stok' size='10'

value='".$r[stok]."' /></td>

</tr>

<tr>

<td>Keterangan </td>

<td><textarea cols='40' rows='4'

name='keterangan'>".$r[keterangan]."</textarea></td>

</tr>

<tr>

<td></td>

<td><input type='submit' name='submit'

value='Edit' />

<input type='reset' value='Ulang' />

<input type='hidden' name='id'

value=".$r[id]." /></td>

</tr>

</table>

</form>";}

?>

</div>


</div>

<div id="footer">


PK&M</div>

</div>

</body>

</html>

Hasilnya :

Gambar 3.12. tampilan edit.php

Kemudian untuk memproses form diatas, ketikkan kode dibawah ini :

<?php

require_once('autentikasi.php');

require_once('koneksi.inc');

$nama=$_POST['nama'];

$harga=$_POST['harga'];

$stok=$_POST['stok'];

$keterangan=$_POST['keterangan'];

$id=$_POST['id'];

$query=mysql_query("Update 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";


}

?>

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 :

<?php



$no=$_GET['id'];

$hapus="DELETE from produk where id='$no'";

$result=mysql_query($hapus);

if($result==0)

{

echo "data tidak ada";

}

else

{

echo "<font color='#ff0000' face='verdana' size='3'>Data

produk dengan nomor id $no berhasil dihapus!</font>";


}

?>

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 :

<?php





transitional.dtd">


<head>


charset=utf-8" />



type="image/ico">


</head>

<body>



<div id="menu">

<ul>

<li><a href="produka.php">Produk</a></li>

<li><a href="user.php"

class="current">User</a></li>


</ul>

</div>

</div>

<div id="isi">


<div id="tengah">

<h1>USER</h1>

<?

$tampil=mysql_query("select id_user, username, level,

password from user order by id_user ");

$msg='';

echo "<table border=1 cellpadding='0' cellspacing='0'>";

echo "<tr><td width='55px' align='center'

valign='middle'><b>NO</b></td>

<td width='200' align='center'><b>User</b></td>

<td width='200' align='center'><b>Level</b></td>";

echo "<td width='100' align='center'><b>Password</b></td>

<td colspan=2

align='center'><b>STATUS</b></td></tr>";

$no=1;


echo"<tr><td align='center' valign='middle'>$no</td>

<td><b>$r[username]</b></td>

<td align='center' valign='middle'>$r[level]</td>

<td align='center' valign='middle'>$r[password]</td>

<td width='70' align='center'><a

href='edit_user_admin.php?no=$r[id_user]'>Edit</a></td>

<td width='70' align='center'><a

href='delete_user_admin.php?no=$r[id_user]'>Hapus</a></td></tr>

";

$no++;

}

echo "</table>";

echo $msg;

?>

</div>


</div>

<div id="footer">


PK&M</div>

</div>

</body>

</html>

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 :

<?php require_once "koneksi.inc";

require_once "autentikasi.php"; ?>



transitional.dtd">


<head>


charset=utf-8" />



type="image/ico">


</head>

<body>



<div id="menu">

<ul>





</ul>

</div>

</div>

<div id="isi">


<div id="tengah">

<h1>Edit User</h1>

<?php

$id=$_GET[no];

echo "<form method='post' action='edit_user_act.php'>

<table border='0' cellpadding='1' cellspacing='1'

align='center'>";

$query=mysql_query("select id_user, username,

password, level from user where id_user='$id'");

while ($r=mysql_fetch_array($query)){

echo "<tr>

<td width='35'> </td>

<td align=left>User</td>

<td><input type='text' name='username' size='35'

value='".$r[username]."'/></td></tr>

<tr>

<td> </td>

<td align=left>Password</td>

<td><input type='password' name='password'

size='35' value='".$r[password]."'/></td></tr>

<tr>

<td> </td>

<td align=left>Level</td>

<td><select name='level'>

<option selected='selected'

value='Admin'>Admin</option>

<option

value='Customer'>Customer</option>

</select>

</td>

</tr>

<tr><td colspan='3'> </td></tr>

<tr><td> </td>

<td align='right'><input type='submit' name='Submit'

value='Edit' /></td>

<td><input type='reset' name='Reset' value='Batal'

/><input type='hidden' name='id'

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

<tr><td colspan='3' height='35' width='50'> </td></tr>

</table></form> ";

}

?>

</div>


</div>

<div id="footer">


PK&M</div>

</div>

</body>

</html>

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 :

<?

require_once('autentikasi.php');

require_once('koneksi.inc');

$id=$_POST['id'];

$nama=$_POST['nama'];

$pass=$_POST['pass'];

$pass1=$_POST['pass1'];

$bidang=$_POST['bidang'];

$edit1=mysql_query("UPDATE 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 :

<?php



$id=$_GET['no'];

$hapus="DELETE from user where id_user='$id'";

$result=mysql_query($hapus);

if($result==0)

{

echo "data tidak ada";

}

else

{

echo "<font color='#ff0000' face='verdana' size='3'>Data

user dengan nomor id $id berhasil dihapus!</font>";

include "user.php";

}

?>

Halaman Logout

Untuk membuat halaman logout, ketikkan script dibawah ini dan beri nama

Logout.php :

<?php

session_start();

unset($_SESSION['SESS_NAME']);

unset($_SESSION['SESS_PASS']);

?>



transitional.dtd">


<head>


charset=iso-8859-1" />

<title>Logged Out</title>


</head>

<body>

<div align="right"><font color="#FF9900">Anda Telah

Logout</font></div>

<?

include'index.php';

?>

</body>

</html>

Documents

BAB I HTML (Hypertext Markup Language)Contoh: BLOCKQUOTE untuk indentasi pendek anda bisa gunakan element Q Color merupakan attribute yang kita anda tambahkan pada