BAB I. HTML (Hypertext Markup Language)

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 <B>... </B> <I>... </I> <U>... </U> <BIG>... </BIG> <SMALL>... </SMALL> <STRIKE>... </STRIKE> Description Bold text Italic text Underline Text Untuk ukuran yang lebih besar dari normal Untuk ukuran yang lebih kecil dari normal Untuk memberi garis di tengah text

<SUP>... </SUP> <SUB>... </SUB> <CENTER>... </CENTER> Superscript text Subscript text 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 blocklevel element </p> <div align="right"> Divisi 2 <p> Ini didalam devisi kedua. di tulis dengan alignment kanan </p> 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 Align Valign Value Center justify left right 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 TIPE LENGTH PRIMARY NULL KET VAR DATA 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 : 2.3 Membuat Tabel User Gambar 2.1. Data produk 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; padding: 0px 0px 0px 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 { p { margin: 0px; padding: 10px 0px 0px 0px; font-size: 12px; font-weight: bold; color: #000000; 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; padding: 0px 0px 0px 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; text-decoration: none; border: 1px solid #CCCCCC; #header1 { clear: both; padding: 0px; margin: 0px 0px 5px 0px; width: 930px; height: 147px; #logo { margin: 0px 3px 0px 0px; 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) norepeat; #amenu { clear: both; margin-bottom: 5px; padding: 0px; width: 930px; height: 35px; background: #ffffff; #search { float: left; width: 225px; height: 28px; padding: 7px 0px 0px 10px; 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; padding: 5px 20px 0px 20px; font: 14px arial; color:#000000; text-decoration: none; #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; margin: 0px 10px 5px 0px; padding: 20px 10px; width: 215px; background: #e0e0e0; min-height: 400px; #tengah { float: left; margin: 0px 0px 5px 0px; padding: 20px 5px; width: 465px; min-height: 400px; #kanan { float: right; margin: 0px 0px 5px 10px; padding: 20px 0px 0px 0px; width: 200px; background: #e0e0e0; min-height: 400px; #kotak { width: 215px; padding: 0px; background: #008fc1; margin: 0px 0px 10px 0px; #kotak.atasnya{ width: 195px; height: 15px; padding: 10px; background: url(images/templatemo_leftsection_top.gif) norepeat; #kotak.bawahnya{ width: 195px; padding: 10px; color: #FFFFFF;

#kotak2 { width: 190px; padding: 10px 10px 10px 15px; background: #6ebfdc; border-top: 5px solid #008fc1; margin: 0px 0px 10px 0px; #kotak2 ul { margin: 0px; padding: 10px 0px 0px 5px; list-style: none; #kotak2 ul li{ display: block; margin: 0px 0px 10px 0px; padding: 0px; #kotak2 ul li a{ padding: 0px 0px 0px 15px; margin: 0px; color: #ffffff; text-decoration: none; background: url(images/templatemo_list_icon02.gif) center left no-repeat; #kotak2 ul li a:hover{ text-decoration: none; #kotak3 { clear: both; width: 190px; padding: 0px; margin: 0px 0px 10px 5px; #kotak3.atas{ width: 190px; height: 25px; padding: 10px 0px 0px 0px; background: #008fc1 url(images/templatemo_rightsection_top.gif) no-repeat; #kotak3.bawah{ width: 170px; padding: 15px 10px 10px 10px; background: #cce8f2;

#kotak3.customer_section{ clear: both; margin: 0px 0px 20px 0px; padding: 0px;.form_row{ padding: 3px 0px; form{ margin: 0px 10px 0px 0px; padding: 0px; text-align: right; label { margin-right: 10px; input{ width: 110px; height: 18px;.button{ width: 60px; height: 25px; #footer { clear: both; padding: 10px 0px 0px 0px; 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 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 class="form_row">password <input class="inputfield" name="password" type="password" id="password"/> <input class="button" type="submit" name="submit" value="login" /> </form> <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> <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> </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> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>****pk&m Online Shop****</title> </head> <body> <div id="kanan"> <div id="kotak3"> <div class="atas"> <h2 align="center">testimonial</h2> <div class="bawah"> <div class="customer_section"> <marquee direction="up" scrollamount="2" scrolldelay="50" onmouseover="this.stop()" onmouseout="this.start()">

<?php include "koneksi.inc"; $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> color=blue align=left>"; </body> </html> </marquee> <br/>$r[komentar]<br/> <b>$r[email]</b><br/> <hr width=150?> 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"> <title>****pk&m Online Shop****</title> </head> <body> <div id="header1"> <div id="logo"> <div id="header"> <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> </body> </html> Hasil dari script diatas : Gambar 3.4. Tampilan Header.htm

Langkah selanjutnya adalah membuat halaman-halaman inti dimana potonganpotongan 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> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>****pk&m Online Shop****</title> <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 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 /> <?php include "boxkanan.php";?> <div id="footer"> Copyright 2009 Designed by crew PK&M </body> </html> Hasil dari script diatas dapat dilihat pada gambar 3.1. Untuk halaman produk, ketikkan kode dibawah ini dan beri nama produk.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> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>****pk&m Online Shop****</title>

echo"</table>";?> <?php include "boxkanan.php";?> <div id="footer"> Copyright 2009 Designed by crew PK&M </body> </html> Gambar 3.5. Tampilan halaman produk untuk halaman buku tamu, ketikkan kode dibawah ini dan beri nama bukutamu.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> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>****pk&m Online Shop****</title> <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">home</a></li> <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 id="isi"> <? include "boxkiri.php";?> <div id="tengah"> <h1>halaman Buku Tamu </h1> <? include "koneksi.inc"; 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 { while($r=mysql_fetch_array($tampil)){

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> <?php include "boxkanan.php";?> <div id="footer"> Copyright 2009 Designed by crew PK&M </body> </html> Gambar 3.6. Tampilan halaman Buku Tamu

untuk halaman About Us ketikkan script dibawah ini dan beri nama about.php: <!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> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>****pk&m Online Shop****</title> <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">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" class="current">about Us</a></li> </ul> <div id="isi"> <? include "boxkiri.php";?> <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 :idin135@yahoo.com">sini</a>. </pre> <?php include "boxkanan.php";?> <div id="footer"> Copyright 2009 Designed by crew PK&M </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 include "koneksi.inc"; $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"); while($r=mysql_fetch_array($tampil)){ 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 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 : <?php include "koneksi.inc"; $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 include "koneksi.inc"; 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 : <!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> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>access Denied</title> <link href="style.css" rel="stylesheet" type="text/css" /> </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> <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>status</h2> <div class="bawahnya">

<img src="images/user.ico" width="60" align="texttop"/> Selamat datang<b> <?php echo $_SESSION['SESS_NAME'];?> </b> <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> <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> </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"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>****pk&m Online Shop****</title> <link rel="shortcut icon" href="images/cdr.ico" type="image/ico"> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body>

<? if ($_SESSION['SESS_NAME'] == "admin") {?> <div id="container"> <?php include"header.htm";?> <div id="menu"> <ul> <li><a href="produka.php" class="current">produk</a></li> <li><a href="user.php">user</a></li> <li><a href="logout.php">logout</a></li> </ul> <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> <?php include "boxkanan.php";?> <div id="footer"> Copyright 2009 Designed by crew PK&M <? 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 "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"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>****pk&m Online Shop****</title> <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="produka.php" class= "current">produk</a></li> <li><a href="user.php">user</a></li> <li><a href="logout.php">logout</a></li> </ul> <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>";?> <?php include "boxkanan.php";?> <div id="footer"> Copyright 2009 Designed by crew PK&M </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"; include "autentikasi.php";?>

<!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> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>****pk&m Online Shop****</title> <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="produka.php" class="current">produk</a></li> <li><a href="user.php">user</a></li> <li><a href="logout.php">logout</a></li> </ul> <div id="isi"> <? include "boxkiria.php";?> <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>";?> <?php include "boxkanan.php";?>

<div id="footer"> Copyright 2009 Designed by crew PK&M </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"; 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 : <?php include "koneksi.inc"; include "autentikasi.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>"; 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 : <?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"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>****pk&m Online Shop****</title> <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="produka.php">produk</a></li> <li><a href="user.php" class="current">user</a></li> <li><a href="logout.php">logout</a></li> </ul> <div id="isi"> <? include "boxkiria.php";?>

<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; while($r=mysql_fetch_array($tampil)){ 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;?> <?php include "boxkanan.php";?> <div id="footer">

Copyright 2009 Designed by crew PK&M </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";?> <!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> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>****pk&m Online Shop****</title>

<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> ";?> <?php include "boxkanan.php";?> <div id="footer"> Copyright 2009 Designed by crew PK&M </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 include "koneksi.inc"; include "autentikasi.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']);?> <!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> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>logged Out</title>