XII HTML Dinamik

13.
HTML Dinamik Pemrograman Web
XIII. HTML DINAMIK

Selama ini pada bab-bab sebelumnya kita sudah membahas bagaimana merancang
Web yang sifatnya statik. Yang mana banyak berhubungan dengan masalah desain, layout,
dan seni. Jika ingin mengubah atau memperbaiki desain dan layout web site tersebut maka
akan dilakukan secara manual. Permasalahannya adalah bagaimana meng-update dan
memperbaiki data yang ada di dalam web site tersebut. Dalam hal inilah kita perlu
melakukan pemrograman halaman web sehingga bersifat dinamik. Dalam pemrograman web
dinamik ini kita bisa mengelola data seperti : menambah, mengubah, maupun menghapus.
Sehingga informasi yang disajikan dalam halaman web selalu up-to-date (terbaru)
Ada banyak software pendukung untuk merancang web yang bersifat dinamik
misalnya : ASP, PHP, Java Script, VB script, dan lain-lain. Dalam bab ini kita akan
membahas yaitu : PHP.
Dalam PHP data-data akan disimpan di dalam database server seperti : MySQL.
Selanjutnya dengan PHP kita akan membuat sebuah program untuk mengakses database
dalam server tersebut. Program tersebut sering disebut dengan s cri p t . Script tersebut
kemudian dapat kita panggil dari program atau file HTML.
Dalam file HTML elemen yang dapat kita gunakan untuk memasukkan input dari
user adalah elemen F o r m . Data masukan ini akan dikirim ke server saat melakukan request.
Dan saat server menerima request, maka request tersebut bukanlah suatu file HTML tetapi
suatu aplikasi yang harus dijalankan (script PHP), yang bisa menerima data-data masukan
yang disertakan dalam request sebagai parameter dari aplikasi (script PHP) yang harus
dijalankan tadi. Adapun langkah-langkah pembuatan Web dinamik dengan PHP adalah
seperti berikut ini.
13.1 Instalasi software PHP
Untuk meng-install PHP maka diperlukan program XAMPP. Disini kita akan
memakai xampp versi 7.0.1 Pertama kita klik file i n stal l er xa mpp 7 .0 . 1 Setelah itu ikuti
langkah-langkah selanjutnya selama proses instalasi. Setelah proses instalasi selesai maka
anda tidak saja menginstall PHP tetapi juga secara langsung sudah menginstall APACHE
sebagai web servernya dan MySQL sebagai database servernya.
13.2 Membuat database dan tabel dengan MySQL
Untuk membuat database dengan PHP maka langkah-langkahnya adalah :
1.Jalankan web dan database server dengan jalan mengaklik ikon : xampp control panel
66
13.HTML Dinamik Pemrograman Web
2.Jalankan salah satu browser web misalnya : mozilla firefox atau Google Chrome, setelah
itu pada bagian address ketikkan : http://localhost/phpmyadmin, maka akan muncul
tampilan seperti gambar 13.1
Gambar 13.1 Tampilan phpmyadmin
3.Pada text box create new database ketikkan : karyawan. Kemudian klik tombol Create.
Berarti anda sudah membuat database baru dengan nama : karyawan. Setelah itu akan
muncul tampilan seperti gambar 13.2
Gambar 13.2 Tampilan Phpmyadmin : buat database
67
4.Pada text box Create Table on database karyawan ketiklah pada

name : karyawan.
Fields : 3
Kemudian klik Go. Berarti kita sudah membuat tabel karyawan dengan jumlah field 3
buah. Selanjutnya akan muncul tampilan seperti gambar 13.3
Gambar 13.3 Tampilan Phpmyadmin : buat tabel

5.Pada kolom -kolom ketikkan :
Field T yp e Le ng th / v a lu e s Pr i m ar y
Ni k Va rch a r 4
Nam a Va rch a r 30
Al amat Va rch a r 50
Berarti kita sudah membuat 3 field yaitu : nik, nama, alamat. Dimana field nik sebagai
primary key
Setelah itu klik tombol : Save
Dengan demikian dari 5 langkah tersebut diatas maka kita sudah membuat database yang
bernama karyawan dan tabel yang bernama karyawan.
13.3 Membuat Form untuk memasukkan data ke dalam tabel Karyawan
Untuk mengisi tabel karyawan dalam database karyawan kita perlu membuat form.
Adapun rancangan form yang ingin kita buat adalah seperti gambar 13.4.
68
Gambar 13.4 Rancangan Form Input Data Pegawai
untuk membuat form seperti itu maka kita harus membuat sebuah file HTML seperti listing
13.1 berikut ini :

<html>
<head>
<title> Form entry pegawai</title>
</head>
<body>
<h1>Form Entry Data Pegawai</h1>
<form action="http:\\localhost\isi_pegawai.php" method="post">
<table>
<tr>
<td>NIK</td>
<td><input type="text" name="nik" size="10" maxlength="4"</td>
</tr>
<tr>
<td>Nama</td>
<td><input type="text" name="nama" size="30" maxlength="30"</td>
</tr>
<tr>
<td>Alamat</td>
<td><input type="text" name="alamat" size="50" maxlength="50"</td>
</tr>
<tr>
<td colspan><input type="submit" value="simpan"</td>
</tr>
</table>
</form>
</body>
</html>
Listing 13.1. forminputpegawai.html
69
Ingat, simpanlah file forminputpegawai.html tersebut di directori : c:\xampp\htdocs

Dari listing 13.1 (forminputpegawai.htm) dapat dilihat bahwa ketika tombol simpan
ditekan maka akan memanggil program/script PHP dengan nama : isi_pegawai.php.
Untuk itu terlebih dahulu kita perlu membuat file i si _peg aw ai .ph p tersebut. Untuk itu
buatlah file tersebut pada editor notepad. Dimana isi dari file tersebut adalah seperti listing
13.2 di bawah ini.
<?php
$host="localhost";
$userdb="root";
$passdb="";
$namadb="karyawan";
$sambung=mysqli_connect($host,$userdb,$passdb);
mysqli_select_db($sambung,$namadb);
$nik1=$_POST['nik'];
$nama1=$_POST['nama'];
$alamat1=$_POST['alamat'];
$sql="insert into karyawan
(nik ,nama,alamat) values('$nik1','$nama1','$alamat1')";
$hasil=mysqli_query($sambung,$sql);
if ($hasil)
{
echo "tabel berhasil diisi";
}
else
{
echo "tabel gagal diisi";
}
?>
Listing 13.2. isi_pegawai.php
Ingat! Simpan file : isi_pegawai.php di directori : c:\xampp\htdocs

Jalankan listing 13.1 (forminputpegawai.htm) dalam browser Mozilla Firefox atau Internet
Explorer dengan mengetikkan : localhost/forminputpegawai.html
maka selanjutnya akan muncul tampilan seperti gambar 13.5. Pada text box isikan data –
data berikut ini :
Nik : 0001
Nama : Budi Darmanto
Alamat : Jln Pecenongan 11
Kemudian klik tombol Simpan. Jika data-data tersebut berhasil disimpan maka akan
muncul pesan : ”Tabel berhasil diisi”. Maka data-data tersebut akan disimpan dalam tabel
karyawan.
70
Gambar 13.5 Hasil eksekusi forminputpegawai.htm
Untuk melihat hasil penyimpanan data tersebut dalam tabel karyawan caranya adalah :
1.Dalam Internet Explorer bukalah database karyawan dengan cara mengetikkan
http://localhost/phpmyadmin pada bagian address kemudian klik Go. Sehingga akan
muncul tampilan seperti gambar 13.6.
Klik database
karyawan
Gambar 13.6 Buka database
2.Klik database karyawan (lihat gambar 13.6), maka akan muncul tampilan seperti
diperlihatkan dalam gambar 13.7.
71
Klik browse
Gambar 13.7 Lihat isi tabel karyawan
2.Klik browse (lihat gambar 13.7) maka akan muncul tampilan isi record dari tabel
karyawan seperti diperlihatkan dalam tabel 13.8
Gambar 13.8 Isi record tabel karyawan
Dapat dilihat dalam gambar 13.8 bahwa tabel karyawan telah berisi 1 record.
13.4 Membuat Form untuk mengedit data dalam tabel Karyawan
Untuk mengedit atau mengubah data dalam tabel karyawan maka kita perlu membuat
sebuah form. Adapun rancangan form adalah seperti gambar 13.9.
72
Gambar 13.9 Rancangan Form Edit Data Pegawai

Adapun file HTML untuk menghasilkan rancangan form tersebut adalah seperti
diperlihatkan dalam listing 13.3 di bawah ini.

<html>
<head>
<title> Form edit pegawai</title>
</head>
<body>
<h1>Form Edit Data Pegawai</h1>
<form action="http:\\localhost\edit_pegawai.php" method="post">
<table>
<tr>
<td>NIK </td>
</tr>
<tr>
<td colspan><input type="submit" value="edit"</td>
</tr>
</table>
</form>
</body>
</html>
Listing 13.3 Formeditpegawai.html
Dapat dilihat dalam listing 13.3 bahwa jika tombol edit ditekan maka akan menjalankan
file edit_pegawai.php. Adapun listing dari file edit_pegawai.php adalah seperti
<?php
$host="localhost";
$userdb="root";
$passdb="";
73
$namadb="karyawan";
$sql="select * from karyawan where nik=$nik1";
while ($row=mysqli_fetch_array($hasil))
{
$nik=$row['nik'];
$nama=$row['nama'];
$alamat=$row['alamat'];
}
?>
<html>
<head>
<title>Form Edit Data Pegawai</title>
</head>
<body>
<form action="http:\\localhost\simpan_edit_pegawai.php" method="post">
<table>
<tr>
<td>NIK</td>
<td><input type="text" name="nik" value= "<?php echo "$nik"; ?>"></td>
</tr>
<tr>
<td>Nama</td>
<td><input type="text" name="nama" value= "<?php echo "$nama";
?>"></td>
</tr>
<tr>
<td>Alamat</td>
<td><input type="text" name="alamat" value= "<?php echo "$alamat";
?>"></td>
</tr>
<tr>
<td colspan><input type="submit" value="simpan"</td>
</tr>
</table>
</form>
</body>
</html>
Listing 13.4 edit_pegawai.php
Dalam listing 13.4 (edit_pegawai.php) dapat dilihat bahwa jika tombol simpan diklik
maka akan menjalankan file : si mpan _ edi t_ peg aw ai .ph p . Adapun listing dari file
tersebut adalah sebagai berikut :
<?php
$host="localhost";
$userdb="root";
$passdb="";
$namadb="karyawan";
74
$sql="update karyawan set

nama='".$_POST['nama']."',alamat='".$_POST['alamat']."' where nik='$nik1'";
if ($hasil)
{
echo"data berhasil diedit";
}
else
{
echo"data gagal diedit";
}
?>
Listing 13.4 simpan_edit_pegawai.php

Untuk melihat proses pengeditan data dalam tabel karyawan maka lakukan langkah-
langkah berikut :
1.Jalankan file HTML formeditpegawai.htm, maka akan muncul tampilan seperti gambar
13.10.
Gambar 13.10 hasil eksekusi formeditpegawai.htm

Pada text box NIK coba masukkan : 0001. Kemudian klik tombol edit, maka akan muncul
75
Gambar 13.11 Hasil ketika tombol edit diklik

cobalah untuk mengubah data-data dalam text box nama dan alamat misalnya :
nama : Budi Raharjo
Alamat : Jln Pecenongan 25
Selanjutnya klik tombol simpan. Jika data berhasil diedit maka menampilkan pesan :
”data berhasil diedit ”.
Untuk melihat hasil perubahan yang telah kita lakukan terhadap data dengan nik : 0001
tersebut maka kita dapat membuka tabel karyawan dengan cara seperti yang sama seperti
saat kita melihat isi dari tabel karyawan. Ternyata tabel karyawan sekarang isinya telah
berubah seperti diperlihatkan dalam gambar 13.12.
Gambar 13.12 Isi tabel karyawan setelah proses edit
76
13.5 Membuat Form untuk menghapus data dalam tabel Karyawan

Untuk menghapus data atau record dalam tabel karyawan maka kita perlu membuat
sebuah form. Adapun rancangan form adalah seperti gambar 13.13.
Gambar 13.13 Rancangan Form Hapus Data Pegawai

Adapun file HTML untuk menghasilkan rancangan form tersebut adalah seperti

<html>
<head>
<title> Form Hapus data pegawai</title>
</head>
<body>
<h1>Form Hapus Data Pegawai</h1>
<form action="http:\\localhost\hapus_pegawai.php" method="post">
<table>
<tr>
<td>NIK </td>
</tr>
<tr>
<td colspan><input type="submit" value="lihat"</td>
</tr>
</table>
</form>
</body>
</html>
Listing 13.5 Formhapuspegawai.html

Dapat dilihat dalam listing 13.5 bahwa jika tombol lihat ditekan maka akan menjalankan
file hapus_pegawai.php. Adapun listing dari file hapus_pegawai.php adalah seperti
<?php
$host="localhost";
$userdb="root";
77
$passdb="";
$namadb="karyawan";
$sql="select * from karyawan where nik=$nik1";
{
$nik=$row['nik'];
$nama=$row['nama'];
}
?>
<html>
<head>
<title>Form Hapus Data Pegawai</title>
</head>
<body>
<form action="http:\\localhost\simpan_hapus_pegawai.php" method="post">
<table>
<tr>
<td>NIK</td>
<td><input type="text" name="nik" value= "<?php echo "$nik"; ?>"></td>
</tr>
<tr>
<td>Nama</td>
<td><input type="text" name="nama" value= "<?php echo "$nama";
?>"></td>
</tr>
<tr>
<td>Alamat</td>
<td><input type="text" name="alamat" value= "<?php echo "$alamat";
?>"></td>
</tr>
<tr>
<td colspan><input type="submit" value="hapus"</td>
</tr>
</table>
</form>
</body>
</html>
Listing 13.6 hapus_pegawai.php
Dalam listing 13.6 (hapus_pegawai.php) dapat dilihat bahwa jika tombol simpan diklik
maka akan menjalankan file : si mpan _h apu s _ peg aw ai .ph p . Adapun listing dari file
tersebut adalah sebagai berikut :
<?php
$host="localhost";
$userdb="root";
$passdb="";
78
$namadb="karyawan";
$sql="delete from karyawan
where nik=$nik1";
if ($hasil)
{
echo"data berhasil dihapus";
}
else
{
echo"data gagal dihapus";
}
?>
Listing 13.7 simpan_hapus_pegawai.php
Untuk melihat proses penghapusan data atau record dalam tabel karyawan maka lakukan
langkah-langkah berikut :
1.Jalankan file HTML formhapuspegawai.htm, maka akan muncul tampilan seperti
gambar 13.14.
Gambar 13.14 hasil eksekusi formhapuspegawai.htm
Pada text box NIK coba masukkan : 0001. Kemudian klik tombol lihat, maka akan muncul
79
Gambar 13.15 hasil eksekusi jika tombol lihat diklik
2.Klik tombol hapus. Jika data berhasil dihapus maka akan menghasilkan pesan : ”data
berhasil dihapus ”. Dengan demikian data atau record karyawan dengan nik : 0001
akan terhapus dari tabel karyawan. Untuk membuktikannya coba lihat isi tabel karyawan
dengan cara seperti yang sudah dijelaskan sebelumnya.
13.6 Contoh Kasus : Form Kartu Tanda Mahasiswa (KTM)

Langkah-langkahnya adalah :
1. Buat Database dengan nama : db_mahasiswa
2. Buat tabel di dalam database db_mahasiswa dengan nama : tabel_mahasiswa.
Structure tabel_mahasiswa adalah seperti tabel berikut :
Name T yp e Le ng th / v a lu e s I nd ex
nim va r ch a r 10 primary
n ama va r ch a r 30
al amat va r ch a r 50
j k el varchar 1
agam a varchar 2
wa rga n ega ra varchar 3
3. Buat Rancangan Form input data mahasiswa seperti berikut :
80
Gambar 13.16 Rancanag Form input data Mahasiswa

untuk membuat form input data mahasiswa tersebut maka kita dapat merancangnya di
Dreamweaver. Kode program HTML dari form tersebut seperti listing 13.8 berikut 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>E - KTP</title>
<style type="text/css">

</style>
</head>
<body>
<form action="input_ktm.php" method="post" enctype="multipart/form-data"
name="form1" id="form1">
<table width="732" border="0">
<tr>
<td colspan="2"><div align="center" class="style1">Universitas Udayana
</div></td>
</tr>
<tr>
<td colspan="2"><div align="center" class="style2"></div></td>
</tr>
<tr>
<th width="123" align="left" >N I M </th>
<td align="left"><label>
81
<input name="nim" type="text" size="10" maxlength="10" />

</label></td>
</tr>
<tr>
<th align="left">Nama</th>
<td align="left"><input name="nama" type="text" size="30"
maxlength="30" /></td>
</tr>
<tr>
<th align="left">Alamat</th>
<td align="left"><input name="alamat" type="text" size="50"
</tr>
<tr>
<th align="left" valign="middle">Jenis Kelamin</th>
<td align="left">
<label>
<input name="jkelamin" type="radio" value="L" checked="checked" />
</label>
Laki
<label> <br />
<input name="jkelamin" type="radio" value="P" />
</label>
Perempuan
</p> </td>
</tr>
<tr>
<th align="left">Agama</th>
<td align="left"><p>
<input type="checkbox" name="agama" value="is" />
Islam<br />
<input type="checkbox" name="agama" value="kr" />
Kristen<br />
<input name="agama" type="checkbox" value="hi" checked="checked" />
Hindu<br />
<input type="checkbox" name="agama" value="bu" />
Budha<br />
<br />
</p> </td>
</tr>
<tr>
<th align="left">Kewarganegaraan</th>
<label>
<select name="warganegara">
<option value="wni">WNI</option>
<option value="wna">WNA</option>
</select>
</label>
<br />
</p></td>
</tr>
82
<tr>
<td colspan="2"><label>
<input type="submit" name="Submit" value="save" />
<input type="reset" name="Submit2" value="reset" />
</label></td>
</tr>
</table>
</form>
</body>
</html>
Listing 13.8. form_ktm_input.html
Simpan file html tersebut dengan nama : form_ktm_input.html tersebut di direktori :

c:\xampp\htdocs
Dari listing 13.8 (form_ktm_input.html) dapat dilihat bahwa ketika tombol save ditekan
maka akan memanggil program/script PHP dengan nama : input_ktm.php. Sehingga
terlebih dahulu kita perlu membuat file i n pu t _k tm .p h p tersebut. Dimana kode program
dari file tersebut adalah seperti listing 13.9 .
<?php
$host="localhost";
$userdb="root";
$passdb="";
$namadb="db_mahasiswa";
$nim1=$_POST['nim'];
$nama1=$_POST['nama'];
$alamat1=$_POST['alamat'];
$jkel1=$_POST['jkelamin'];
$agama1=$_POST['agama'];
$warganegara1=$_POST['warganegara'];
$sql="insert into tabel_mahasiswa

(nim,nama,alamat,jkel,agama,warganegara)
values('$nim1','$nama1','$alamat1','$jkel1','$agama1','$warganegara1')";
if ($hasil)
{
echo "tabel berhasil diisi";
}
else
{
echo "tabel gagal diisi";
}
?>
Listing 13.9 Kode program input_ktm.php
83
4. Buat Rancangan Form Edit data mahasiswa seperti berikut :
Gambar 13.17 Rancanag Form Edit data Mahasiswa

Kode program HTML dari form tersebut seperti listing 13.10.

<head>
<title>Edit Mahasiswa</title>

</style>
</head>
<body>
<form action="edit_ktm.php" method="post" enctype="multipart/form-data"
<tr>
</div></td>
</tr>
<tr>
</tr>
<tr>
84

</label></td>
</tr>
<tr>
<td align="left"><input name="nama" type="text" size="30" maxlength="30"
/></td>
</tr>
<tr>
</tr>
<tr>
<td align="left">
<label>
</label>
Laki
<label> <br />
</label>
Perempuan
</p> </td>
</tr>
<tr>
Islam<br />
Kristen<br />
Hindu<br />
Budha<br />
<br />
</p> </td>
</tr>
<tr>
<label>
</select>
</label>
<br />
</p></td>
</tr>
85
<tr>
<input type="submit" name="Submit" value="Edit" />
</label></td>
</tr>
</table>
</form>
</body>
</html>
Listing 13.10. form_ktm_edit.html
Simpan file html tersebut dengan nama : form_ktm_edit.html tersebut di direktori :

c:\xampp\htdocs
Pada Listing 13.10 (form_ktm_edit.html) dapat dilihat bahwa ketika tombol edit diklik
maka akan memanggil program/script PHP dengan nama : edit_ktm.php. Sehingga
terlebih dahulu kita perlu membuat file edi t _ ktm .ph p tersebut. Dimana rancangan
design dari file tersebut diperlihatkan dalam Gambar 13.18.
Gambar 13.18. Form edit data Mahasiswa

Dan kode program dari rancangan form edit tersebtu seperti listing 13.11 .
<?php
$host="localhost";
$userdb="root";
$passdb="";
$sql="select * from tabel_mahasiswa where nim=$nim1";
86
{
$nim=$row['nim'];
$nama=$row['nama'];
$jkel=$row['jkel'];
$agama=$row['agama'];
$warganegara=$row['warganegara'];
}
?>
<head>
<title>Edit Mahasiswa</title>

</style>
</head>
<body>
<form action="save_edit_ktm.php" method="post" enctype="multipart/form-
data" name="form1" id="form1">
<tr>
</div></td>
</tr>
<tr>
</tr>
<tr>
<input name="nim" type="text" size="10" maxlength="10" value= "<?php
echo "$nim"; ?>"/>
</label></td>
</tr>
<tr>
maxlength="30" value= "<?php echo "$nama"; ?>"/></td>
</tr>
<tr>
maxlength="50"value= "<?php echo "$alamat"; ?>" /></td>
</tr>
87
<tr>
<td align="left">
<label>
<input name="jkelamin" type="radio" value="L" <?php if($jkel=="L") echo
"checked" ?>/>
</label>
Laki
<label> <br />
<input name="jkelamin" type="radio" value="P" <?php if($jkel=="P")
echo "checked" ?> />
</label>
Perempuan
</p> </td>
</tr>
<tr>
<input type="checkbox" name="agama" value="is" <?php
if($agama=="is") echo "checked" ?>/>
Islam<br />
<input type="checkbox" name="agama" value="kr" <?php
if($agama=="kr") echo "checked" ?>/>
Kristen<br />
<input name="agama" type="checkbox" value="hi" <?php
if($agama=="hi") echo "checked" ?> />
Hindu<br />
<input type="checkbox" name="agama" value="bu" <?php
if($agama=="bu") echo "checked" ?>/>
Budha<br />
<br />
</p> </td>
</tr>
<tr>
<label>
<option value="wni" <?php if($warganegara=="wni") echo "selected"
?>>WNI</option>
<option value="wna" <?php if($warganegara=="wna") echo "selected"
?>>WNA</option>
</select>
</label>
<br />
</p></td>
</tr>
<tr>
<input type="submit" name="Submit" value="Save" />
</label></td>
</tr>
88
</table>
</form>
</body>
</html>
Listing 13.11 Kode program edit_ktm.php
Dari kode program listing 13.11 dapat dilihat maka ketika tombol save diklik maka akan
memanggil file php yaitu : save_edit_ktm.php. Adapun kode program dari file tersebut
diperlihatkan dalam listing 13.12.

<head>
<title>Save Edit Barang</title>
</head>
<body>
<?php
$host="localhost";
$userdb="root";
$passdb="";
$sql="update tabel_mahasiswa set
nama='".$_POST['nama']."',alamat='".$_POST['alamat']."',jkel='".$_POST['jkela
min']."',agama='".$_POST['agama']."',warganegara='".$_POST['warganegara']."'
where nim='$nim1'";
if ($hasil)
{
echo"data berhasil diedit";
}
else
{
echo"data gagal diedit";
}
?>
</body>
</html>
Listing 13.12 Kode program save_edit_ktm.php
5. Buat Rancangan Form Delete data mahasiswa seperti berikut :
89
Gambar 13.18 Rancangan Form Delete data Mahasiswa

Kode program HTML dari form tersebut seperti listing 13.13.

<head>
<title>Delete Mahasiswa</title>

</style>
</head>
<body>
<form action="delete_ktm.php" method="post" enctype="multipart/form-data"
<tr>
</div></td>
</tr>
<tr>
</tr>
<tr>
</label></td>
90
</tr>
<tr>
<td align="left"><input name="nama" type="text" size="30" maxlength="30"
/></td>
</tr>
<tr>
</tr>
<tr>
<td align="left">
<label>
</label>
Laki
<label> <br />
</label>
Perempuan
</p> </td>
</tr>
<tr>
Islam<br />
Kristen<br />
Hindu<br />
Budha<br />
<br />
</p> </td>
</tr>
<tr>
<label>
</select>
</label>
<br />
</p></td>
</tr>
<tr>
91
<input type="submit" name="Submit" value="Lihat" />

</label></td>
</tr>
</table>
</form>
</body>
</html>
Listing 13.13. form_ktm_delete.html
Simpan file html tersebut dengan nama : form_ktm_delete.html tersebut di direktori :

c:\xampp\htdocs
Pada Listing 13.13 (form_ktm_edit.html) dapat dilihat bahwa ketika tombol lihat diklik
maka akan memanggil program/script PHP dengan nama : delete_ktm.php. Sehingga
terlebih dahulu kita perlu membuat file d el et e _kt m.p h p tersebut. Dimana rancangan
design dari file tersebut diperlihatkan dalam Gambar 13.20.
Gambar 13.20. Form delete data Mahasiswa

Dan kode program dari rancangan form delete tersebut seperti listing 13.14 .
<?php
$host="localhost";
$userdb="root";
$passdb="";
$sql="select * from tabel_mahasiswa where nim=$nim1";
{
92
$nim=$row['nim'];
$nama=$row['nama'];
$jkel=$row['jkel'];
$agama=$row['agama'];
$warganegara=$row['warganegara'];
}
?>
<head>
<title>Delete Mahasiswa</title>

</style>
</head>
<body>
<form action="save_delete_ktm.php" method="post" enctype="multipart/form-
data" name="form1" id="form1">
<tr>
</div></td>
</tr>
<tr>
</tr>
<tr>
<input name="nim" type="text" size="10" maxlength="10" value= "<?php
echo "$nim"; ?>"/>
</label></td>
</tr>
<tr>
maxlength="30" value= "<?php echo "$nama"; ?>"/></td>
</tr>
<tr>
maxlength="50"value= "<?php echo "$alamat"; ?>" /></td>
</tr>
<tr>
93

<td align="left">
<label>
<input name="jkelamin" type="radio" value="L" <?php if($jkel=="L") echo
"checked" ?>/>
</label>
Laki
<label> <br />
<input name="jkelamin" type="radio" value="P" <?php if($jkel=="P")
echo "checked" ?> />
</label>
Perempuan
</p> </td>
</tr>
<tr>
<input type="checkbox" name="agama" value="is" <?php
if($agama=="is") echo "checked" ?>/>
Islam<br />
<input type="checkbox" name="agama" value="kr" <?php
if($agama=="kr") echo "checked" ?>/>
Kristen<br />
<input name="agama" type="checkbox" value="hi" <?php
if($agama=="hi") echo "checked" ?> />
Hindu<br />
<input type="checkbox" name="agama" value="bu" <?php
if($agama=="bu") echo "checked" ?>/>
Budha<br />
<br />
</p> </td>
</tr>
<tr>
<label>
<option value="wni" <?php if($warganegara=="wni") echo "selected"
?>>WNI</option>
<option value="wna" <?php if($warganegara=="wna") echo "selected"
?>>WNA</option>
</select>
</label>
<br />
</p></td>
</tr>
<tr>
<input type="submit" name="Submit" value="Delete" />
</label></td>
</tr>
</table>
</form>
94
</body>
</html>
Listing 13.14 Kode program delete_ktm.php
Dari kode program listing 13.14 dapat dilihat maka ketika tombol Delete diklik maka akan
memanggil file php yaitu : save_delete_ktm.php. Adapun kode program dari file tersebut
diperlihatkan dalam listing 13.15.

<head>
<title>Delete Barang</title>
</head>
<body>
<?php
$host="localhost";
$userdb="root";
$passdb="";
$sql="delete from tabel_mahasiswa
where nim=$nim1";
if ($hasil)
{
echo"data berhasil dihapus";
}
else
{
echo"data gagal dihapus";
}
?>
</body>
</html>
Listing 13.15 Kode program save_delete_ktm.php
95

XII HTML Dinamik

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

XII HTML Dinamik

Diunggah oleh

Hak Cipta:

Format Tersedia

13.

HTML Dinamik Pemrograman Web

XIII. HTML DINAMIK

Gambar 13.1 Tampilan phpmyadmin

Gambar 13.2 Tampilan Phpmyadmin : buat database

4.Pada text box Create Table on database karyawan ketiklah pada

Gambar 13.3 Tampilan Phpmyadmin : buat tabel

Gambar 13.4 Rancangan Form Input Data Pegawai

Listing 13.1. forminputpegawai.html

Ingat, simpanlah file forminputpegawai.html tersebut di directori : c:\xampp\htdocs

Listing 13.2. isi_pegawai.php

Ingat! Simpan file : isi_pegawai.php di directori : c:\xampp\htdocs

Gambar 13.5 Hasil eksekusi forminputpegawai.htm

Gambar 13.6 Buka database

Gambar 13.7 Lihat isi tabel karyawan

Gambar 13.8 Isi record tabel karyawan

Gambar 13.9 Rancangan Form Edit Data Pegawai

Listing 13.3 Formeditpegawai.html

$sql="update karyawan set

Listing 13.4 simpan_edit_pegawai.php

Gambar 13.10 hasil eksekusi formeditpegawai.htm

Gambar 13.11 Hasil ketika tombol edit diklik

Gambar 13.12 Isi tabel karyawan setelah proses edit

13.5 Membuat Form untuk menghapus data dalam tabel Karyawan

Gambar 13.13 Rancangan Form Hapus Data Pegawai

Listing 13.5 Formhapuspegawai.html

Listing 13.6 hapus_pegawai.php

Listing 13.7 simpan_hapus_pegawai.php

Gambar 13.14 hasil eksekusi formhapuspegawai.htm

Gambar 13.15 hasil eksekusi jika tombol lihat diklik

13.6 Contoh Kasus : Form Kartu Tanda Mahasiswa (KTM)

3. Buat Rancangan Form input data mahasiswa seperti berikut :

Gambar 13.16 Rancanag Form input data Mahasiswa

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

<input name="nim" type="text" size="10" maxlength="10" />

Listing 13.8. form_ktm_input.html

Simpan file html tersebut dengan nama : form_ktm_input.html tersebut di direktori :

$sql="insert into tabel_mahasiswa

Listing 13.9 Kode program input_ktm.php

4. Buat Rancangan Form Edit data mahasiswa seperti berikut :

Gambar 13.17 Rancanag Form Edit data Mahasiswa

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

<input name="nim" type="text" size="10" maxlength="10" />

Listing 13.10. form_ktm_edit.html

Simpan file html tersebut dengan nama : form_ktm_edit.html tersebut di direktori :

Gambar 13.18. Form edit data Mahasiswa

Listing 13.11 Kode program edit_ktm.php

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

Listing 13.12 Kode program save_edit_ktm.php

5. Buat Rancangan Form Delete data mahasiswa seperti berikut :

Gambar 13.18 Rancangan Form Delete data Mahasiswa

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

<input type="submit" name="Submit" value="Lihat" />

Listing 13.13. form_ktm_delete.html

Simpan file html tersebut dengan nama : form_ktm_delete.html tersebut di direktori :

Gambar 13.20. Form delete data Mahasiswa

<th align="left" valign="middle">Jenis Kelamin</th>

Listing 13.14 Kode program delete_ktm.php

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

Listing 13.15 Kode program save_delete_ktm.php

Anda mungkin juga menyukai