MODUL DESAIN WEB: 2012

Kamis, 13 Desember 2012

MODUL DESAIN WEB (DASAR TEORI)

Modul Desain Web

DASAR TEORI

Struktur Dasar HTML

Hypertext Markup Language (HTML) adalah bahasa yang digunakan untuk menulis

halaman web. Ciri utama dokumen HTML adalah adanya tag dan elemen. Elemen dalam

dokumen HTML dikategorikan menjadi dua yaitu elemen <HEAD> yang berfungsi memberikan

informasi tentang dokumen tersebut dan elemen <BODY> yang menentukan bagaimana isi suatu

dokumen ditampilkan oleh browser, seperti paragraf, list(daftar), tabel dan lain-lain. Sedangkan

tag dinyatakan dengan tanda lebih kecil “ < “ ( tag awal ) dan tanda lebih besar “ > “ (tag akhir).

Dalam penggunaannya sebagian besar kode HTML tersebut harus terletak di antara tag

kontainer. Yaitu diawali dengan <namatag> dan diakhiri dengan </namatag> (terdapat tanda "/").

Dokumen HTML mempunyai tiga buah tag utama yang membentuk struktur dari dokumen

HTML yaitu HTML,HEAD dan BODY.

Tag HTML berfungsi untuk menyatakan suatu dokumen HTML, tag HEAD berfungsi untuk

memberikan informasi tentang dokumen HTML dan tag BODY berfungsi untuk menyimpan

informasi atau data yang akan ditampilkan dalam dokumen HTML.

LISTS

Terdapat lima tipe list yang dapat digunakan, yaitu :

Unordered Lists <UL> :

Untuk membuat daftar item dengan tanda bullet. List entries didefinisikan dengan tag <li>.

Contoh :

<ul>

<li> item nomer 1

<li> item nomer 2

<li> item nomer 3

</ul>

Hasil dari kode di atas adalah:

Item nomer 1

Item nomer 2

Item nomer 3

Ordered Lists <OL> :

Juga digunakan untuk membuat daftar item, dengan tiap item dapat menggunakan angka arab

atau romawi. List entries juga didefinisikan dengan <LI> tag.

Contoh :

<li> item nomer 1

<li> item nomer 2

<li> item nomer 3

</ol>

Hasil dari kode di atas adalah :

1. Item nomer 1

2. Item nomerr 2

3. Item nomerr 3

Definition Lists: <DL>

Contoh :

<dl>

<dt> item pertama.

<dd> penjelasan tentang item pertama.

<dt> item kedua.

<dd> penjelasan tentang item kedua

</dl>

Hasil dari kode di atas adalah :

Item pertama.

Penjelasan tentang item pertama.

Item kedua.

Penjelasan tentang item kedua

Images :

Digunakan untuk menampilkan image atau animasi gif pada halaman web Anda.

Atribut : alt, align=(center, left, right), hspave, vspace, border, width & height

Contoh :

TABEL

Dalam pembuatan homepage, tabel memiliki fungsi yang tidak kalah penting dengan tag-tag

HTML lainnya. Pertama tabel berfungsi untuk menampilkan informasi secara terstruktur, ringkas

dan mudah dibaca, kedua berfungsi untuk mengatur tampilan homepage agar lebih menarik.

Tag utama untuk tabel yaitu <TABLE> </TABLE> dan untuk membuat judul tabel tag-nya

table header <TH></TH> lalu untuk membuat data tabel atau isi tabel menggunakan tag table

Data <TD></TD> dan untuk membuat baris adalah memakai tag Table Rows <TR> </TR>

FORM

Form biasanya digunakan untuk mengumpulkan informasi dari user, sehingga memungkinkan

suatu web server untuk menerima informasi dari pemakai melalui sejumlah elemen yang disebut

kontrol. Kontrol ini bisa berupa suatu textbox, checkbox, radio button, push button, list menu

dan lainnya.

Standart penulisan form :

……..

…….

</form>

Atribut method memiliki dua nilai post dan get. Metode get mengirimkan data pada server

dengan cara meletakan data pada bagian akhir URL yang ditunjuk. Metode post mengirimkan

datanya secara terpisah. Jika data masukan banyak, lebih disarankan untuk menggunakan metode

post. Atribut action berisi URL dari program yang dipanggil oleh form tersebut.

Textbox

Textbox merupakan salah satu jenis kontrol untuk memasukan data. HTML menyediakan tag

<input> dengan atribut type=”text” untuk membuat kotak input. Atribut lain yaitu name untuk

memberi nama input, atribut Value untuk memberi nilai suatu input dan atribut size untuk

menentukan batas terpanjang sebuah masukan.

Dalam textbox kita juga dapat menyembunyikan masukan yang ditulis user dengan memberi

nilai type=”password”. Masukan akan menjadi karakter “*”.

Checkbox

Checkbox digunakan untuk memberi beberapa pilihan kepada user. Dengan checkbox user dapat

memilih salah satu, lebih dari satu pilihan atau tidak sama sekali memilih.

Radio

Pada type Radio, maka user memilih salah satu pilihan yang tersedia, sehingga user tidak bisa

memilih kurang atau lebih dari satu pilihan. Atribut Checked memberi tanda bahwa pilihan

tersebut sedang diaktifkan.

Submit dan Reset

Setiap form harus memiliki minimal tombol submit dan reset. Untuk membuatnya digunakan

atribut type=”submit” dan type=”reset”. Tombol submit digunakan ketika user mengisi formulir

dan ingin mengirimkan ke server. Sedangkan reset digunakan ketika user ingin menghapus

semua masukan yang ditulis.

PERMASALAHAN

1. Contoh HTML sederhana :

<html>

<head>

<title>struktur dokumen html </title>

</head>

<body>

hello,… selamat belajar membuat home page dengan html

</body>

</html>

 Tulislah kode html tersebut diatas dengan program editor notepad, kemudian simpan

kedalam direktori data anda dengan nama file praktik1.html

 Jalankan internet explorer dan buka file praktik1.html

2. Heading dalam HTML :

<html>

<head>

<title> ::heading dokumen html:: </title>

</head>

<body>

<h1>heading tingkat 1 </h1>

<h2>heading tingkat 2 </h2>

<h3>heading tingkat 3 </h3>

<h4>heading tingkat 4 </h4>

<h5>heading tingkat 5 </h5>

<h6>heading tingkat 6 </h6>

</body>

</html>

 Tulislah kode html tersebut diatas dengan program editor notepad, kemudian simpan

kedalam direktori data anda dengan nama file praktik2.html

 Jalankan internet explorer dan buka file praktik2.html

3. Paragraf dalam HTML :

<html>

<head>

<title>paragraf</title>

</head>

<body>

HTTP adalah suatu protokol yang menentukan aturan yang perlu

diikuti oleh web browser dalam meminta atau mengambil suatu dokumen dan

oleh web server dalam menyediakan dokumen yang diminta web browser.

Internet berasal dari kata interconnection networking yang mempunyai

arti hubungan berbagai komputer dan berbagai tipe komputer yang membentuk

sistem jaringan dan mencakup seluruh dunia (jaringan global) dengan

melalui jalur telekomunikasi seperti telepon, wireless dan lainnya.

Web Browser yang bertindak sebagai client memungkinkan anda untuk

menginterpretasikan dan melihat informsi pada Web, sedang web server yang

bertindak sebagai server memungkinkan anda untuk menerima informasi yang

diminta browser

</P>

</body>

</html>

 Tulislah kode html tersebut diatas dengan program editor notepad, kemudian simpan

kedalam direktori data anda dengan nama file praktik3.html

 Jalankan internet explorer dan buka file praktik3.html

4. Preformatted Text dalam HTML :

<html>

<head>

<title>preformatted text</title>

</head>

<body>

<pre>

uniform resource locator (url)

==============================

url adalah suatu sarana yang dipakai untuk menentukan lokasi informasi pada

suatu web server.

url dapat diibaratkan suatu alamat, dimana alamat tersebut terdiri dari :

:) protokol yang digunakan oleh suatu browser untuk mengambil informasi

:) nama komputer ( server ) dimana informasi tersebut berada

:) jalur/path serta nama file dari suatu informasi

</pre>

</body>

</html>

 Tulislah kode html tersebut diatas dengan program editor notepad, kemudian simpan

kedalam direktori data anda dengan nama file praktik4.html

 Jalankan internet explorer dan buka file praktik4.html

5. BLOCKQUOTE dalam HTML :

<html>

<head>

<title>blockquote</title>

</head>

<body>

<h3>sesuatu yang tidak perlu dicoba</h3>

sesuatu yang kelihatan mengasyikkan tapi sebenarnya lebih banyak menambah

masalah pada remaja adalah narkoba, seks, alkohol dan merokok. jangan

sekali-kali mencoba jika tidak ingin membuat masalah baru</blockquote>

</body>

</html>

 Tulislah kode html tersebut diatas dengan program editor notepad, kemudian simpan

kedalam direktori data anda dengan nama file praktik5.html

 Jalankan internet explorer dan buka file praktik5.html

6. Line Break dalam HTML :

<html>

<head>

<title>linebreak</title>

</head>

<body>

<p>banyak cara yang dapat digunakan untuk melakukan instalasi freebsd.

namun ada tiga cara yang paling sering dilakukan , yaitu :

<br>instalasi melalui ftp<br> instalasi melalui cdrom

<br> instalasi melalui partisi dos

</body>

</html>

 Tulislah kode html tersebut diatas dengan program editor notepad, kemudian simpan

kedalam direktori data anda dengan nama file praktik6.html

 Jalankan internet explorer dan buka file praktik6.html

7. Ukuran font dalam HTML :

<html>

<head>

<title>ukuran font</title>

</head>

<body>

<font size=1>ukuran font 1</font><br>

<font size=2>ukuran font 2</font><br>

<font size=3>ukuran font 3</font><br>

<font size=4>ukuran font 4</font><br>

<font size=5>ukuran font 5</font><br>

<font size=6>ukuran font 6</font><br>

<font size=7>ukuran font 7</font><br>

</body>

</html>

 Tulislah kode html tersebut diatas dengan program editor notepad, kemudian simpan

kedalam direktori data anda dengan nama file praktik7.html

 Jalankan internet explorer dan buka file praktik7.html

8. Jenis font dalam HTML :

<html>

<head>

<title>jenis font</title>

</head>

<body>

<font face = "arial">arial , contoh ac milan <p>

<font face = "verdana">verdana , contoh persebaya <p>

<font face = "tahoma">tahoma , contoh indonesia <p>

</body>

</html>

 Tulislah kode html tersebut diatas dengan program editor notepad, kemudian simpan

kedalam direktori data anda dengan nama file praktik8.html

 Jalankan internet explorer dan buka file praktik8.html

9. Warna font dalam HTML :

<html>

<head>

<title>warna font</title>

</head>

<body>

<font color= "red">yogyakarta <p>

<font color = "#ff0000">kota budaya <p>

<font color = "#00ff00">kota pariwisata dan pendidikan<p>

</body>

</html>

 Tulislah kode html tersebut diatas dengan program editor notepad, kemudian simpan

kedalam direktori data anda dengan nama file praktik9.html

 Jalankan internet explorer dan buka file praktik9.html

10. Link dalam HTML :

<html>

<head>

</head>

<body>

<a name="atas">pemain-pemain ac milan menurut abjad</a>

<p>abbiati ,<a href="#info">info lengkap</a>

<p>ayala

<p>ambrosini

<p>albertini

<p>boban

<p>

<a href="contoh_2.html">kalo mau tahu lagi klik disini</a>

</blockquote>

<p><a name="info">abbiati</a>

<p>kiper ketiga timnas italia runner up euro 2000

<br>kiper utama u-21 juara piala eropa u-21

<br>kiper utama ac milan juara seri-a 1998-1999

</blockquote>

<p><a href="#atas">kembali ke atas</a>

</body>

</html>

 Tulislah kode html tersebut diatas dengan program editor notepad, kemudian simpan

kedalam direktori data anda dengan nama file praktik10.html

 Jalankan internet explorer dan buka file praktik10.html

11. Link tujuan dalam HTML :

<html>

<head>

<title>link tujuan</title>

</head>

<body>

<p align="center"> maaf, hanya sedikit

<br>chamot

<br>dida

<br>shevchenko

<br><a href="praktik10.html">kembali</a>

</body>

</html>

 Tulislah kode html tersebut diatas dengan program editor notepad, kemudian simpan

kedalam direktori data anda dengan nama file praktik11.html

 Jalankan internet explorer dan buka file praktik11.html

12. Membuat Tabel

<html>

<head>

<title>:: Tabel ::</title>

</head>

<body>

<tr>

<th>Alamat</th>

<th>No. Telpon</th>

</tr>

<tr>

<td>Dr. Hamzah Haz</td>

</tr>

<tr>

<td>Mega Mendung</td>

</tr>

<tr>

<td>Bejo Sembrono</td>

</tr>

</table>

</body>

</html>

 Tulislah kode html tersebut diatas dengan program editor notepad, kemudian simpan

kedalam direktori data anda dengan nama file praktik12.html

 Jalankan internet explorer dan buka file praktik12.html

13. Membuat Tabel Kompleks

<html>

<head>

<title>:: Tabel yang kompleks ::</title>

</head>

<body>

<table width="750" border="1" cellspacing="1" cellpadding="1"

align="center">

<tr>

<div align="center">Fakultas</div>

</td>

</tr>

<tr>

<div align="center">Bahasa</div>

</td>

<div align="center">Ekonomi</div>

</td>

<div align="center">Teknik</div>

</td>

</tr>

<tr>

<div align="center">Inggris</div>

</td>

<div align="center">Jepang</div>

</td>

<div align="center">Mandarin</div>

</td>

<div align="center">Ekonomi</div>

</td>

<div align="center">Manajemen</div>

</td>

<div align="center">Industri</div>

</td>

<div align="center">Informatika</div>

</td>

<div align="center">Mesin</div>

</td>

</tr>

</table>

</body>

</html>

 Tulislah kode html tersebut diatas dengan program editor notepad, kemudian simpan

kedalam direktori data anda dengan nama file praktik13.html

 Jalankan internet explorer dan buka file praktik13.html

14. Membuat Form Input dengan Text box

<html>

<head>

<title>form input dengan text box</title>

</head>

<body>

<p>rancangan awal buku tamu </p>

<tr>

</tr>

<tr>

<td width="11%">alamat</td>

<td width="86%"><input type="text" value="jember" name="alamat"

size="20"></td>

</tr>

<tr>

<td width="11%">sekolah</td>

</tr>

</table>

</body>

</html>

 Tulislah kode html tersebut diatas dengan program editor notepad, kemudian simpan

kedalam direktori data anda dengan nama file praktik14.html

 Jalankan internet explorer dan buka file praktik14.html

15. Membuat Form Input dengan Check box

<html>

<head>

<title>form input dengan check box</title>

</head>

<body>

<p>pilih yang anda suka </p>

<p>daftar menu masakan</p>

<p>

<input type="checkbox" name="c1" checked>ayam goreng<br>

<input type="checkbox" name="c3">sate kambing<br>

<input type="checkbox" name="c4">nasi goreng

</p>

</body>

</html>

 Tulislah kode html tersebut diatas dengan program editor notepad, kemudian simpan

kedalam direktori data anda dengan nama file praktik15.html

 Jalankan internet explorer dan buka file praktik15.html

16. Membuat Form Input dengan Radio box

<html>

<head>

<title>form input dengan radio box</title>

</head>

<body>

<p>pilih salah satu </p>

<p>

<input type="radio" value="v2" name="r1">15-19 tahun<br>

<input type="radio" value="v3" name="r1">19-25 tahun<br>

<input type="radio" value="v4" name="r1">25-35 tahun<br>

<input type="radio" value="v5" name="r1"> > 35 tahun<br>

</p>

</body>

</html>

 Tulislah kode html tersebut diatas dengan program editor notepad, kemudian simpan

kedalam direktori data anda dengan nama file praktik16.html

 Jalankan internet explorer dan buka file praktik16.html

17. Membuat Formulir Buku Tamu

<html>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

<td width="8%">email</td>

</tr>

<tr>

<td width="8%" valign="top">homepageku</td>

<td width="88%"><input type="radio" value="v1" checked name="r1">bagus

sekali<br>

<input type="radio" value="v2" name="r1">bagus<br>

<input type="radio" value="v3" name="r1">biasa saja<p> </td>

</tr>

</table>

</form>

</body>

</html>

 Tulislah kode html tersebut diatas dengan program editor notepad, kemudian simpan

kedalam direktori data anda dengan nama file praktik17.html

 Jalankan internet explorer dan buka file praktik17.html

18. Membuat Frame

<html>

<head>

<title>contoh frame</title>

</head>

</frameset>

</html>

 Tulislah kode html tersebut diatas dengan program editor notepad, kemudian simpan

kedalam direktori data anda dengan nama file praktik18.html

 Pada frame tersebut memerlukan 3 file yaitu header.html, kiri.html dan kanan.html dan

profil.html maka buatlah file tersebut sebelum dijalankan.

 Misalnya :

Nama File : Header.html

<html>

<head>

<title>:::header:::</title>

</head>

<font face="Georgia" size="4"><i><font size="+2" color="#33842F">Selamat

Datang</font><font size="+2"><b><font color="#009999">di</font>

</b></font></i></font><b><font face="Georgia" size="+4" color="#25611F">

<strong>www.gembus.com</strong> </font> <font face="Georgia"

size="+4"></font></b>

</body>

</html>

Nama File : kiri.html

<html>

<head>

</head>

<p align="center"><font face="verdana" size="2"><a href="profil.html"

target="utama">profil</a><br>

<a href="album.html" target="utama">album</a><br>

<a href="forum.html" target="utama">forum</a> <br>

</body>

</html>

Nama File : kanan.html

<html>

<head>

</head>

<body>

</body>

</html>

Nama File : profil.html

<html>

<head>

</head>

<p><font face="verdana" size="2">profil :<br>

portal web ini adalah hasil karya anak-anak yang suka gembus</font></p>

</body>

</html>

 buatlah atau tulis kode file-file tersebut diatas

 Jalankan internet explorer dan buka file praktik18.html

MODUL PEMBUATAN BIODATA

Modul Pembuatan Aplikasi Biodata dengan

PHP dan MySQL

1. Pengenalan PHP dan MySQL

PHP adalah singkatan dari PHP Hypertext Preprocessor yang merupakan bahasa

pemrogramman berbasis web yang memiliki kemampuan untuk memproses data dinamis.

PHP pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995. PHP adalah bahasa

pemrograman server side. Sehingga dia memerlukan sebuah web server contohnya apache

yang sudah ada didalam software XAMPP untuk menjalankan scriptnya.

Catatan : untuk lebih lanjutnya teman-teman bisa baca materi tentang pengenalan PHP ☺

2. Software yang digunakan belajar PHP

Adapun software yang biasa digunakan dalam belajar ataupun pengembangan web PHP

adalah software XAMPP. Didalam software tersebut sudah terdapat beberapa komponen

software pendukung yaitu :

• Apache untuk webserver yang digunakan untuk menjalankan PHP

• MySQL untuk DMBS(Database Management System) yang digunakan untuk

menyimpan content atau isi web didalam sebuah database.

• PhpMyadmin aplikasi MySQL berbasi web yang digunakan untuk merancang

dan membuat database dan table-table nya.

• Notepad++ yang digunakan sebagai text editor.

3. Langkah untuk memulai belajar PHP

Dalam memulai belajar PHP ada tahapan yang biasa dilakukan. Walaupun tidak baku

harus seperti ini. Adapun langkah-langkahnya adalah sebagai berikut :

• Jalankan software XAMPP dan klik tombol start untuk apache dan mysql

4. Langkah pembuatan database di PhpMyadmin

Pada langkah ini kita akan menjelaskan tentang fungsi dan cara pemakaian aplikasi web

PhpMyadmin.

Adapun yang akan dibahas dalam PhpMyadmin (http://localhost/phpmyadmin) adalah :

1) Fungsi men Browse untuk menampilkan data

2) Fungsi menu Structure untuk melihat struktur tabel

3) Fungsi menu Insert untuk memasukan data ke tabel

4) Fungsi menu Export untuk mengeluarkan query dari database atau tabel

5) Fungsi menu Import untuk memasukan query dari database atau tabel

6) Fungsi menu Empty untuk mengosongkan isi data di tabel

7) Fungsi menu Drop untuk menghapus table tertentu

8) Pembuatan Database

9) Pembuatan Tabel

Setelah database terbentuk, kita akan membuat table nya dengan nama table

biodata dan banyaknya field adalah 4 yaitu (id, nama, alamat, usia). Setelah itu klik

tombol go yang berada di sebelah paling kanan.

Setelah itu masukan nama field nya dengan menyesuaikan type data dan

panjang data (length). Untuk field id ditambah dengan index=PRIMARY dan AI(Auto

Increment) setelah semua diisi, klik tombol Save .

5. Langkah pembuatan modul program

Setelah database dibuat, kita akan membuat file phpnya yang berisi script PHP. Nantinya

script tersebut disimpan di folder C:\xampp\htdocs\koneksi dan disimpan dengan ekstensi

(*.php). adapun file-file yang akan kita buat adalah sebagai berikut :

1) koneksi.php = digunakan untuk koneksi PHP ke database

2) form.php = berisi form yang digunakan untuk menginput data.

3) proses.php = digunakan untuk proses menyimpan data ke database

4) tabel.php = digunakan untuk menampilkan data dalam bentuk tabel

5) delete.php = digunakan untuk menghapus data didatabase

6) update.php = digunakan untuk mengubah data yang diinginkan

7) simpan.php = digunakan untuk menyimpan kembali data hasil perubahan

Adapun syntax dari masing-masing file adalah sebagai berikut :

Koneksi.php

<?php

$host="localhost";

$user="root";

$password="";

$database="db_cc";

$koneksi=mysql_connect($host,$user,$password);

mysql_select_db($database,$koneksi);

//cek koneksi

if($koneksi){

//echo "berhasil koneksi";

}else{

echo "gagal koneksi";

}

Form.php

<html>

<body>

<table>

<tr>

</tr>

<tr>

<td>Alamat</td>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</form>

</body>

</html>

Proses.php

<?php

include "koneksi.php";

$nama=$_POST['nama'];

$alamat=$_POST['alamat'];

$usia=$_POST['usia'];

$query=mysql_query("insert into biodata(nama, alamat, usia) value('$nama','$alamat','$usia')");

if($query){

echo "Berhasil input data ke database ";

?><a href="tabel.php">Lihat data di Tabel</a><?php

}else{

echo "Gagal input data";

echo mysql_error();

}

Tabel.php

<?php

include "koneksi.php";

$query=mysql_query("select * from biodata");

$jumlah=mysql_num_rows($query);

echo "Jumlah data ada : ".$jumlah;

<tr>

<th>Nomor</th><th>Nama</th>

<th>Alamat</th><th>Usia</th>

</tr>

<?php

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

<tr>

<td>

<a href="delete.php?id=<?php echo $row['id']; ?>" onclick="return confirm('Apakah anda

yakin?')">Delete</a>

<a href="update.php?id=<?php echo $row['id']; ?>">Update</a>

</td>

<?php

}

</table><br />

<a href="form.php">Input data form</a>

Delete.php

<?php

include "koneksi.php";

$id=$_GET['id'];

$query=mysql_query("delete from biodata where id='$id'");

if($query){

?><script language="javascript">document.location.href="tabel.php";</script><?php

}else{

echo "gagal hapus data";

}

Update.php

<?php

include "koneksi.php";

$id=$_GET['id'];

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

<?php

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

<tr>

</tr>

<tr>

<td>Alamat</td>

</tr>

</tr>

</tr>

<?php

}

</table>

</form>

Simpan.php

<?php

include "koneksi.php";

$id=$_POST['id'];

$nama=$_POST['nama'];

$alamat=$_POST['alamat'];

$usia=$_POST['usia'];

$query=mysql_query("update biodata set nama='$nama', alamat='$alamat', usia='$usia' where id='$id'");

if($query){

echo "Berhasil update data ke database ";

?><a href="tabel.php">Lihat data di Tabel</a><?php

}else{

echo "Gagal update data";

echo mysql_error();

}

Jika semua script sudah selesai di ketik dan disimpan didalam folder htdocs/koneksi.

Maka untuk menjalankan programnya ketik http://localhost/koneksi/form.php

Tampilan Halaman form.php

Tampilan halaman table.php

Tampilan halaman update.php

Selesai…Alhamdulilah

MODUL PEMBUATAN APLIKASI LOGIN

Modul Pembuatan Aplikasi Login dengan

PHP dan MySQL

1. Membuat form dalam file form_admin.php

<html>

<head><title>Form Login Admin</html></head>

<body>

<table>

<tr>

<td>Username</td>

</tr>

<tr>

<td>Password</td>

</tr>

<tr>

</tr>

</table>

</form>

</body>

</html>

2. Pembuatan Session dalam file login.php

<?php session_start();

include "koneksi.php";

$username=$_POST['username'];

$password=md5($_POST['password']);

$query=mysql_query("select * from admin where username='$username' and password='$password'");

$cek=mysql_num_rows($query);

if($cek){

$_SESSION['username']=$username;

?>Anda berhasil login. silahkan menuju <a href="home.php">Halaman HOME</a><?php

}else{

?>Anda gagal login. silahkan <a href="form_admin.php">Login kembali</a><?php

echo mysql_error();

}

3. Pengecekan Session dalam file home.php

<?php session_start();

if(session_is_registered('username')){

include "koneksi.php";

$query=mysql_query("select * from biodata");

$jumlah=mysql_num_rows($query);

echo "Selamat datang : ".$_SESSION['username'];

echo "<br><br>";

echo "Jumlah data ada : ".$jumlah;

<tr>

<th>Nomor</th><th>Nama</th>

<th>Alamat</th><th>Usia</th>

</tr>

<?php

$no=0;

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

<tr>

<td>

<a href="../koneksi/delete.php?id=<?php echo $row['id']; ?>" onclick="return

confirm('Apakah anda yakin?')">Delete</a>

<a href="../koneksi/update.php?id=<?php echo $row['id']; ?>">Update</a>

</td>

</tr>

<?php

}

</table><br />

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

<?php

}else{

?>Anda tidak boleh mengakses halaman ini. silahkan <a href="form_admin.php">Login

dahulu</a><?php

}

4. Pembuatan Session_destroy (logout) dalam file logout.php

<?php session_start();

session_destroy();

echo "Anda berhasil logout. silahkan menuju <a href='form_admin.php'>Halaman Utama</a>"

Catatan :

Untuk file update, delete, dan simpan.php masih sama dengan yang ada di modul

pertama. Untuk melindungi hak akses dari user yang tidak diinginkan, maka

tambahkan skript PHP untuk cek session seperti pada file home.php

<?php session_start();

if(session_is_registered('username')){

//blok program jika user telah login terlebih dahulu

}else{

//blok program jika user mengakses tanpa login!!!

}

Jika semua script sudah selesai di ketik dan disimpan didalam folder htdocs/admin.

Maka untuk menjalankan programnya ketik http://localhost/admin/form_admin.php

Selesai…Alhamdulilah