BAB I. HTML (Hypertext Markup Language)

(1)

BAB I

HTML

(Hypertext Markup Language)

Pendahuluan

World Wide Web

Internet merupakan jaringan global yang menghubungkan suatu network

dengan network 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.

(2)

 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

(3)

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.

(4)

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

(5)

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>

(6)

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

(7)

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.

(8)

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

(9)

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

(10)

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>

(11)

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

(12)

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

(13)

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

(14)

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

(15)

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 (

(16)

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.

(17)

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;

(18)

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 { margin: 0px; padding: 10px 0px 0px 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;

(19)

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;

(20)

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

(21)

} #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) no-repeat; } #kotak .bawahnya{ width: 195px; padding: 10px; color: #FFFFFF;

(22)

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

(23)

#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

(24)

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

(25)

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

</form>

</div> </div>

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

(26)

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>

<title>****PK&M Online Shop****</title> </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()">

(27)

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

(28)

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

<title>****PK&M Online Shop****</title> </head> <body> <div id="header1"> <div id="logo"></div> <div id="header"></div> </div> <div id="amenu">

</form> </div>

</body> </html>

Hasil dari script diatas :

(29)

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>

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

(30)

<? 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> </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>

(31)

<li><a href="about.php">About Us</a></li> </ul> </div> </div> <div id="isi"> <? include "boxkiri.php"; ?> <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>";

(32)

}} echo"</table>"; ?> </div> <?php include "boxkanan.php"; ?> </div> <div id="footer">

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

(33)

<li><a href="about.php">About Us</a></li> </ul> </div> </div> <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 {

(34)

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

<tr> <td colspan="2"><center><font face="verdana" color="#003300"><h3>ISI BUKU TAMU</h3></font></center></td> </tr> <tr> <td>Judul :</td>

<tr>

<tr>

<td>Email :</td>

<tr>

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

</tr> <tr>

(35)

(36)

 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>

Untuk informasi, pertanyaan dan pemesanan lebih lanjut 0341 417636 atau fax 1341 417 634.

(37)

Atau kirim email di <a href = "mailto :[email protected]">sini</a>. </pre> </div> <?php include "boxkanan.php"; ?> </div> <div id="footer">

Tampilan hasil penulisan script diatas :

(38)

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>

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

(39)

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

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.

(40)

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

} ?>

(41)

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

(42)

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.

(43)

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 :

<title>Access Denied</title>

<body>

<h4 align="center"><font color="#FFCC00">Anda<br /> Tidak Mempunyai Akses Di Sini.

(44)

<br />

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

<title>****PK&M Online Shop****</title> </head> <body> <div id="kiri"> <div id="kotak"> <div class="atasnya"> <h2>Status</h2> </div> <div class="bawahnya">

(45)

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.

(46)

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

</head> <body>

(47)

<? 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> </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>

</tr> <tr>

<td>Harga </td>

</tr> <tr>

(48)

<tr>

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

</tr> <tr>

</tr> </table> </form> </div> <?php include "boxkanan.php"; ?> </div> <div id="footer">

<? } else {

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

?> </body> </html>

(49)

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

(50)

<?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> </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>";

(51)

} echo"</table>"; ?> </div> <?php include "boxkanan.php"; ?> </div> <div id="footer">

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

(52)

$query=mysql_query("select * from produk where id='$id'");

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

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

(53)

<td colspan=2><center>FORM EDIT PRODUK</center></td>

</tr> <tr>

</tr> <tr>

<td>Harga </td>

</tr> <tr>

</tr> <tr>

<td>Keterangan </td>

<td><textarea cols='40' rows='4' name='keterangan'>".$r[keterangan]."</textarea></td>

</tr> <tr>

(54)

</div>

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'");

(55)

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!”

(56)

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>

(57)

<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; ?> </div> <?php include "boxkanan.php"; ?> </div> <div id="footer">