Kegiatan Belajar 3 : Membuat aplikasi remote data interaktif a. Tujuan Kegiatan Pemelajaran

1) Peserta diklat dapat membuat aplikasi remote data interaktif ber-basiskan pada program webserver GPL dan PHP

2) Peserta diklat mampu mengkonfigurasi batasan-batasan penggu-naan aplikasi remote data interaktif berdasarkan level akses tertentu yang disesuaikan dengan struktur level penggunaan program.

b. Uraian Materi 3

Membuat aplikasi remote data merupakan proses-proses menuliskan kode-kode program pada masing-masing blok diantaranya adalah :

1) Membuat tabel dan database berdasarkan rancangan yang telah diuraikan pada kegiatan belajar sebelumnya ( kegiatan belajar 1 ).

2) Membuat struktur hierarki lokasi dan nama-nama subfolder aplikasi

3) Menulis kode-kode program dari aplikasi remote data berbasiskan bahasa program PHP & HTML

Di bawah ini diuraikan langkah-langkah pokok membuat database dan kode-kode aplikasi tersebut yaitu :

1 ) Membuat database dengan program MySQL

Langkah awal yang harus dilakukan sebelum membangun sistem pengolahan data buku (katalog) adalah mengadakan perancangan database yang akan digunakan. Database ini nantinya akan terbagi kedalam beberapa tabel yang dijadikan sebagai ruang-ruang tempat penyimpanan berbagai informasi mengenai buku dan yang berhu-bungan dengannya.

Bentuk database ini akan diimplementasikan ke dalam sebuah program server basis data bernama MySQL, akan tetapi sebelum mengimplementasikanya ada baiknya Kita membahas mengenai

Gambar 20 : menjalankan MySQL

Gambar 21 : Membuat Tabel MySQL

peranacangan dan atribut-atribut yang akan digunakan. Setelah bentuk bentuk tabel telah Kita tentukan maka kita dapat mene-rapkanya pada Database MySQL. Berikut adalah beberapa langkah perancangan tabelnya. Sebelum membuat table, Anda harus mempersiapkan databasenya terlebih dahulu. Dalam pembahasan buku ini, Kita akan menggu-nakan database perpustakaan, untuk membuatnya ketikanlah perintah “create” seperti gambar di bawah ini :

Kemudian buatlah tabel penulis dengan perintah seperti gambar di bawah ini

Sehingga apabila kita tampilkan hasilnya dengan perintah “DESCRIBE” akan tampak seperti gambar di bawah ini :

Gambar 22: Tampilan Tabel MySQL

Demikian seterusnya kita buat tabel yang lain sesuai dengan uraian di materi 1 seperti perintah-perintah script di bawah ini.

Sehingga pada akhirnya database perpustakaan akan memiliki 7 buah tabel yaitu :

• Tabel Admin

• Tabel Buku

• Tabel Desk_buku

• Tabel Penerbit

• Tabel Penulis

• Tabel Anggota

2 ) Membuat struktur hierarki lokasi dan nama-nama subfolder aplikasi

Sebelum menerapkan desain database di atas ada baiknya Kita ulas terlebih dahulu mengenai fungsi katalog dan Jalannya program ini. Program ini digunakan untuk menampikan dan menginformasikan daftar buku yang ada pada sebuah perpustakaan, sehingga untuk setiap anggota mendapatkan informasi yang valid mengenai kondisi buku-buku yang ada diperpustakaan tersebut.

Pada program ini dibuat dengan dua buah kategori akses, di antaranya adalah:

 Halaman admin yang terletak pada direktori admin, halaman ini digunakan untuk melakukan administrasi sistem katalog secara keseluruhan, program ini dibuat untuk dapat mema-najemen seluruh data yang ada di dalam database perpustakaan. Selain itu juga dapat melakukan pendataan anggota baru pada atau melakukan penghapusan data pada database.

 Halaman pengunjung, digunakan khusus untuk para pengunjung biasa artinya pada halaman ini nantinya dapat diakses oleh siapa saja yang membuka alamat ini secara bebas. Hal lain yang dapat dilakukan user adalah dapat melakukan pencarian buku, pada pencarian ini dapat dikategorikan berdasarkan nama penulis maupun judul buku. Batasan yang dimiliki user biasa tidak dapat mengakses halaman anggota dan halaman administrator.

Dari beberapa fungsi di atas dapat disimpulkan bahwa seorang user hanya bisa melakukan pencarian buku atau melihat informasi buku, dan halaman

Gambar 23: Tampilan Struktur direktori

administrator merupakan halaman yang memiliki hak akses penuh untuk

mengelola sistem perpustakaan tersebut, orang yang berhak dalam halaman admin juga dapat Kita sebut sebagai administrator sistem web. Dari beberapa keterangan di atas, dalam program perpustakaan akan dibuat dengan struktur direktori sebagai berikut.

Untuk memulai menerapkan program ini di dalam komputer Anda, ada baiknya untuk membuat struktur direktori seperti gambar di atas, beberapa direktori yang harus diperhatikan adalah:

 Perpustakaan: Merupakan direktori pusat yang meng-organisir

semua file katalog yang Kita bangun, Anda juga dapat mengganti direktori tersebut dengan nama lain yang sekiranya sesuai dengan instansi yang Anda gunakan sebagai objeknya. Pada direktori inilah halaman utama atau halaman index akan disimpan secara langsung (tidak ada subdirektori lagi), sehingga apabila Kita memanggil direktori ini maka halaman utama/ halaman index akan terbuka.

 Admin : Adalah direktori yang berisi file administrator sis-tem, pada

direktori inilah Kita akan menyimpan seluruh file program yang berhubungan dengan administrasi perpus-takaan.

 Gambar : Berguna untuk menyimpan gambar-gambar yang

dibutuhkan dalam tahap desain interface program.

 Img_buku : Berguna untuk menyimpan gambar buku yang tersedia

dalam informasi buku.

 Include : Merupakan direktori yang berguna untuk menyim-pan

file-file include, file-file ini akan digunakan pada semua halaman program, misalnya file membuka koneksi ke data-base atau sistem session untuk keamanan

 Tpl : tpl atau template digunakan untuk meletakkan file tem-porary,

artinya file ini berupa file yang berguna untuk mela-kukan pengaturan halaman secara global program perpus-takaan. isi dari file ini berupa dokumen CSS (Cascading Style Sheets).

Selain dari direktori yang dibutuhkan di atas dapat juga membuat direktori khusus yang berkaitan dengan gambar atau file lain yang berhubungan dengan program yang sedang kita kerjakan.

3 ) Menulis kode-kode program dari aplikasi remote data berbasiskan bahasa program PHP & HTML

Membuat Halaman Administrasi (Halaman Masukan)

Halaman ini digunakan untuk melakukan pengelolaan data pada sistem perpustaakaan, sehingga dengan menggunakan halaman ini semua data yang berhubungan dengan data buku dapat ter-maintenance. Sebagai halaman yang memiliki fungsi untuk menge-lola semua halaman, maka halaman ini juga dapat dikatakan seba-gai halaman Administrator.

Pada halaman ini terdapat batasan-batasan penggunaan yaitu dimana tidak setiap orang dapat masuk dan mengakses halaman ini, untuk dapat mengakses halaman ini Anda harus izin dengan menggunakan password yang hal itu biasanya hanya akan dipegang oleh orang-orang tertentu saja.

Sebagai pengguna umum ataupun anggota juga tidak diperbo-lehkan untuk mengakses halaman ini, sehingga pada sistem yang ada dapat dijaga keamanannya semaksimal mungkin.

Apabia Anda dapat mengakses halaman ini, maka Anda dapat melakukan banyak hal, yaitu dari memasukan data buku, mem-perbaharui, bahkan menghapus data buku. Selain itu juga dapat melakukan pemasukan data-data anggota baru yang telah men-daftar secara manual.

Membuat Template CSS (Cascade Style Sheet)

Agar pengaturan halaman admnistrasi mempunyai ciri khusus maka perlu kita buatkan cetakan halamannya yang kita namakan filenya

style_admin.css dan disimpan di direktori tpl, scriptnya adalah :

/* CSS Document */ .tb_admin{ border-style: solid; border-width : 1px 1px 1px 1px ; border-color : black; } .table { border-color : red; }

Dimana akan digunakan selalu pada header dari setiap halaman admin dengan dipanggil menggunakan script :

<title>Administrator</title>

...

Atau dengan menggunakan atribut class pada setiap Tag HTML dengan script <TABLE class=”tb_admin”>

Deafult halaman ini index.php yang menghubungkan ke halaman-halaman lain pada saat kita diijinkan mengakses file yang ada di folder admin, scriptnya adalah :

<?php

echo "<div align=center>

<b>SELAMAT DATANG </b> <BR> <font size=+2 color=red >

Halaman ini digunakan untuk mengelola data-data buku </font>

</div> ";

include "administrator.htm"; ?>

Sedangkan script administrator.htm adalah : <html>

<head>

<title>Administrator</title>

<body>

<table width="425" border="0" align="center" cellpadding="2" cellspacing="0" class="tb_admin"> <tr bgcolor="#BFD0EA"> <td height="21" colspan="3"> <strong>Login Administrator</strong></td> </tr> <tr> <td width="36%" align="right">Admin Id </td> <td width="2%"><b>:</b></td>

<td width="62%"> <input name="fm_admin" type="text" id="fm_admin" size="25" maxlength="35"> </td> </tr> <tr> <td align="right">Password</td> <td><b>:</b></td>

</tr> <tr> <td></td> <td></td>

</td> </tr> </table> </form> </body> </html>

Ketika halaman diakses dan tombol login diklik akan menuju ke halaman

cek_admin.php yaitu : <?php session_start(); require("../include/conecsi.inc"); $sql="SELECT admin,passadmin FROM admin WHERE (admin='$fm_admin' AND passadmin=password('$fm_pass') )"; if(!$hasil=mysql_query($sql)) { echo mysql_error(); return 0; } $ada_baris=mysql_num_rows($hasil); if($ada_baris >=1) { $master=$fm_admin; session_register("master"); echo "Password diterima,<br>

Anda berhak mengakses seluruh halaman ini"; include "menu_utama.php";

exit; }

else {

echo "<b>Admin / Password Salah !<b>"; include "administrator.htm";

exit; }

Dimana fungsinya adalah memanfaatkan tabel admin yang kita buat, dan mendeklarasikan fungsi session agar selalu diingat oleh program selama kita menggunakan fasilitas administrator, untuk itu harus kita tambahkan script session.inc untuk menangani hal tersebut.

<?php

session_start();

if(!session_is_registered('master')) {

echo "<center><font color=red size=+3><b>

Anda tidak Berhak atas halaman ini</b></font><br>";

echo "<br>Klik <a href=../>Kembali</a> Ke HOME </center><br>"; exit;

} ?>

Yang diletakkan pada direktori include. Sedangkan untuk koneksi dengan basis data MySQL kita buatkan script conecsi.inc yang isinya adalah :

<?php

// isilah dengan user dan password dari MySQL anda $host ="localhost"; $user = "root"; $passwd = ""; $database= "perpustakaan"; $connect=mysql_connect($host,$user,$passwd); if (! $connect) {

echo " wah nggak bisa tuh "; }

// memilih database pda server mysql_select_db($database)

or die ( " database nggak ada tuh, coba dibuat dulu :) "); ?>

Script di atas diasumsikan akses root tidak menggunakan password untuk mengolah data mysqlnya. Jika otentifikasi kata sandi betul program akan membuka halaman menu_utama.php

<?php

require("../include/session.inc"); require("../include/conecsi.inc"); require_once "menu.htm";

// Dikerjakan apabila menemukan tombol masukan if ($tb_masukan)

{

// memeriksa Form (droplist ) menu if(!isset($fm_menu))$fm_menu=''; switch ($fm_menu)

{

case 'jenis' : include "in_jenis.htm"; break; case 'buku' : include "in_buku.php"; break; case 'anggota' : include "in_anggota.htm"; break; case 'desk' : include "in_deskbuku.php"; break; case 'penulis' : include "in_penulis.htm"; break; case 'penerbit' : include "in_penerbit.htm"; break; }

}

// di kerjakan apabila menemukan tombol penglolaan else if ($tb_penglolaan)

{

// memeriksa Form (droplist ) menu if(!isset($fm_menu))$fm_menu=''; switch ($fm_menu)

{

case 'jenis' : include "olah_jenis.php"; break; case 'buku' : include "olah_buku.php"; break; case 'anggota' : include "olah_anggota.php"; break; case 'desk' : include "olah_deskbuku.php"; break; case 'penulis' : include "olah_penulis.php"; break; case 'penerbit' : include "olah_penerbit.php"; break; }

}

//dikerjakan apabila menemukan tombol laporan else if ($tb_laporan)

{

// memeriksa Form (droplist ) menu if(!isset($fm_menu))$fm_menu=''; switch ($fm_menu)

{

case 'jenis' : include "lap_jenis.php"; break; case 'buku' : include "lap_buku.php"; break; case 'anggota' : include "lap_anggota.php"; break; case 'desk' : include "lap_deskbuku.php"; break; case 'penulis' : include "lap_penulis.php"; break; case 'penerbit' : include "lap_penerbit.php"; break; }

}

// dikerjakan bila menemukan tombol logout else if ($tb_logout)

{

require_once "logout.php"; }

Pada perintah “require_once "menu.htm";” otomatis akan memanggil file

menu.htm dengan script :

<title>Administrator</title>

<body >

<tr>

<td height="20" colspan="4" align="center" bgcolor="#BFD0EA"> <font size="4"><b>Pengelolaan

Halaman Administrator</b></font></td> </tr>

<tr >

<tr >

<option value="not_halaman"> --- Pilih Bagian yang ingin di kelola --- </option>

<option value="not_halaman"> --- </option> <option value="penerbit">Pernerbit</option>

<option value="penulis">Penulis</option> <option value="anggota">Anggota</option> <option value="jenis">Jenis Buku</option> <option value="buku">buku</option>

<option value="desk">Deksripsi Buku</option> </select></td> </tr> <tr > <td align="center"></td> <td align="center"></td> <td align="center"></td> <td align="center"></td> </tr> <tr > <td align="center">

Gambar 24: Tampilan menu admin

</td>

Sehingga dari rangkaian script di atas kita akan dapat mengelola halaman menu dari admin seperti gambar di bawah ini :

Membuat Halaman Input Data

Jumlah halaman adalah 6 yaitu :

 In_penerbit.htm

 In_penulis.htm

 In_jenis.htm

 In_buku.htm

 In_anggota.htm

Semuanya merupakan antarmuka untuk memasukkan data-data, scriptnya adalah :

in_penerbit.htm

<title>Administrator</title>

<body>

<td height="21" colspan="3"><strong>Masukan Data Penerbit</strong></td> </tr>

<tr>

<td width="23%" align="right">Kode Penerbit</td> <td width="2%"><b>:</b></td>

</tr> <tr>

<td align="right">Nama Penerbit</td> <td><b>:</b></td>

</tr> <tr>

<td align="right">No Telpon</td> <td> </td>

<tr>

<td align="right">Email</td> <td><b>:</b></td>

<tr>

<td align="right">Alamat</td> <td><b>:</b></td>

<tr>

<td align="right">Keterangan </td> <td><b>:</b></td>

<td><input name="tb_simpan" type="submit" id="tb_simpan" value=" Simpan "></td> </tr> </table> </form> </body> </html> in_penulis.htm <html> <head> <title>Administrator</title>

<body>

<strong>Masukan Data Penulis</strong> </td> </tr> <tr> <td width="21%" align="right"> Kode Penulis</td> <td width="2%"><b>:</b></td> <td width="77%">

<input name="fm_kdpenulis" type="text" id="fm_kdpenulis" size="6" maxlength="5"> </td> </tr> <tr> <td align="right">Nama Penulis</td> <td><b>:</b></td> <td>

<input name="fm_penulis" type="text" id="fm_penulis" size="35" maxlength="35"> </td> </tr> <tr> <td align="right">Email</td> <td><b>:</b></td> <td>

<tr>

<td align="right">Alamat</td> <td><b>:</b></td>

<td>

<textarea name="fm_alamat" cols="35" rows="2" id="fm_alamat"> </textarea> </td> </tr> <tr> <td align="right">Keterangan </td> <td><b>:</b></td> <td>

<input name="tb_simpan" type="submit" id="tb_simpan" value=" Simpan "> </td> </tr> </table> </form> </body> </html> in_jenis.htm <html> <head> <title>Administrator</title>

Dalam dokumen modul web (Halaman 28-116)