HTML Dinamik - Pemrograman Web IGA Widagda Fisika FMIPA UNUD 2012

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 uptodate (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 script. 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 Form. 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 1.8. Pertam kiat klik file : xampp-win32-1.8.1-VC9-installer

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 server Apache dengan jalan : Klik Start>All Program>PHPTriad>Apache

12.HTML Dinamik Pemrograman Web

67 2.Jalankan salah satu browser web misalnya : mozilla firefox, setelah itu pada bagian

address ketikkan alamat : http://localhost/phpmyadmin, maka akan muncul tampilan

seperti gambar 13.1

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

12.HTML Dinamik Pemrograman Web

68 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

5.Pada kolom -kolom ketikkan :

Field Type Length/values Primary

Nik Varchar 4 Nama Varchar 30 Alamat Varchar 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.

12.HTML Dinamik Pemrograman Web

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>

<tr>

<tr>

<tr>

<td>Alamat</td>

<tr>

</table> </form> </body> </html>

Gambar 13.4 Rancangan Form

12.HTML Dinamik Pemrograman Web

Ingat, simpanlah file forminputpegawai.htm tersebut di directori : c:\apache\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 isi_pegawai.php 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=mysql_connect($host,$userdb,$passdb); mysql_select_db($namadb,$sambung); $nik1=$_POST[nik]; $nama1=$_POST[nama]; $alamat1=$_POST[alamat]; $sql="insert into karyawan ( nik ,nama,alamat

) values('$nik1','$nama1','$alamat1')"; $hasil=mysql_query($sql);

if ($hasil) {

echo "tabel berhasil diisi"; }

else {

echo "tabel gagal diisi"; }

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

Jalankan listing 13.1 (forminputpegawai.htm) dalam browser Internet Explorer maka 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.

12.HTML Dinamik Pemrograman Web

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.

2.Klik database karyawan (lihat gambar 13.6), maka akan muncul tampilan seperti diperlihatkan dalam gambar 13.7.

Gambar 13.5 Hasil eksekusi forminputpegawai.htm

Gambar 13.6 Buka database Klik database

12.HTML Dinamik Pemrograman Web

2.Klik browse (lihat gambar 13.7) maka akan muncul tampilan isi record dari tabel karyawan seperti diperlihatkan dalam tabel 13.8

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.

Gambar 13.7 Lihat isi tabel karyawan Klik browse

12.HTML Dinamik Pemrograman Web

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>

<tr>

<tr>

</table> </form> </body> </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 diperlihatkan dalam listing 13.4 di bawah ini.

<?php

$host="localhost"; $userdb="root"; $passdb="";

Gambar 13.9 Rancangan form edit

12.HTML Dinamik Pemrograman Web 74 $namadb="karyawan"; $sambung=mysql_connect($host,$userdb,$passdb); mysql_select_db($namadb,$sambung); $nik1=$_POST[nik];

$sql="select * from karyawan where nik=$nik1"; $hasil=mysql_query($sql); while ($row=mysql_fetch_array($hasil)) { $nik=$row['nik']; $nama=$row['nama']; $alamat=$row['alamat']; } ?> <html> <head>

<title>Form Edit Data Pegawai</title> </head>

<body>

<tr>

<tr>

</tr> <tr>

<td>Alamat</td>

</tr> <tr>

</table> </form> </body> </html>

Dalam listing 13.4 (edit_pegawai.php) dapat dilihat bahwa jika tombol simpan diklik maka akan menjalankan file : simpan_edit_pegawai.php. Adapun listing dari file tersebut adalah sebagai berikut :

<?php $host="localhost"; $userdb="root"; $passdb=""; $namadb="karyawan"; $sambung=mysql_connect($host,$userdb,$passdb); mysql_select_db($namadb,$sambung); $nik1=$_POST[nik]; Listing 13.4 edit_pegawai.php

12.HTML Dinamik Pemrograman Web

$sql="update karyawan set nama='$_POST[nama]', alamat='$_POST[alamat]' where nik=$nik1"; $hasil=mysql_query($sql); if ($hasil) {

echo"data berhasil diedit"; }

else {

echo"data gagal diedit"; }

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.

Pada text box NIK coba masukkan : 0001. Kemudian klik tombol edit, maka akan muncul tampilan seperti gambar 13.11

Listing 13.4 simpan_edit_pegawai.php

12.HTML Dinamik Pemrograman Web

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.11 Hasil ketika tombol edit diklik

12.HTML Dinamik Pemrograman Web

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.

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

<html>

<head>

<title> Form Hapus data pegawai</title> </head>

<body>

<h1>Form Hapus Data Pegawai</h1>

<tr>

<tr>

</table> </form> </body> </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 diperlihatkan dalam listing 13.6 di bawah ini.

<?php

$host="localhost"; $userdb="root";

Gambar 13.13 Rancangan Form Hapus tabel karyawan

12.HTML Dinamik Pemrograman Web 78 $passdb=""; $namadb="karyawan"; $sambung=mysql_connect($host,$userdb,$passdb); mysql_select_db($namadb,$sambung); $nik1=$_POST[nik];

$sql="select * from karyawan where nik=$nik1"; $hasil=mysql_query($sql); while ($row=mysql_fetch_array($hasil)) { $nik=$row['nik']; $nama=$row['nama']; $alamat=$row['alamat']; } ?> <html> <head>

<title>Form Hapus Data Pegawai</title> </head>

<body>

<tr>

<tr>

</tr> <tr>

<td>Alamat</td>

</tr> <tr>

</table> </form> </body> </html>

Dalam listing 13.6 (hapus_pegawai.php) dapat dilihat bahwa jika tombol simpan diklik maka akan menjalankan file : simpan_hapus_pegawai.php. Adapun listing dari file tersebut adalah sebagai berikut :

<?php

$host="localhost"; $userdb="root"; $passdb="";

12.HTML Dinamik Pemrograman Web 79 $namadb="karyawan"; $sambung=mysql_connect($host,$userdb,$passdb); mysql_select_db($namadb,$sambung); $nik1=$_POST[nik];

$sql="delete from karyawan where nik=$nik1";

$hasil=mysql_query($sql); if ($hasil)

{

echo"data berhasil dihapus"; }

else {

echo"data gagal dihapus"; }

?>?>

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.

Pada text box NIK coba masukkan : 0001. Kemudian klik tombol lihat, maka akan muncul tampilan seperti gambar 13.15

Listing 13.7 simpan_hapus_pegawai.php

12.HTML Dinamik Pemrograman Web

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.

Dalam dokumen Pemrograman Web IGA Widagda Fisika FMIPA UNUD 2012 (Halaman 70-84)