Tugas Praktikum Basis DataDesain Website Message Center dengan PHP dan MySQL

Harindra Wisnu Pradhana (L2F004481)Teknik Elektro Universitas Diponegoro

harindrawisnu@yahoo.com

Abstrak

Web server merupakan suatu hal yang tidak asing lagi di telinga. Gambaran singkat web  server merupakan sebuah mesin yang diakses beberapa terminal melalui suatu jaringan yang menyediakan   layanan   informasi   melalui   halaman­halaman   web.   Halaman­halaman   ini  ditampilkan   dengan   protokol   hypertext   sehingga   format   penulisannya   dapat   diatur   sesuai  keinginan perancang. Perkembangan teknologi web server memungkinkan mesin tersebut tidak  hanya menerima request  dan  menampilkannya,  melainkan memberikan   layanan  yang   lebih  interaktif  dan  dinamis.  Pengunjung website   tak   lagi  hanya dapat  menerima halaman demi  halaman web tersebut melainkan juga dapat melakukan sesuatu dengan server tersebut dalam hal   ini  mengirim dan menerima pesan.  Pesan yang dikirimkan akan disimpan server untuk  ditampilkan penerimanya.

I. PendahuluanSitus web yang telah lama kita kenal 

merupakan suatu server yang menyediakan layanan   hosting   atau   penyimpanan halaman­halaman web.  Server   inilah yang disebut   Web   Server.   Web   server menyediakan   alokasi   tertentu   mulai   dari kapasitas   penyimpanan   di   dalamnya, bandwidth   maksimal   arus   data   masuk maupun   keluar,   dan   batas   maksimal bandwidth secara komulatif.

Suatu   web   server   dapat   dibangun untuk melayani jaringan lokal saja atau bisa juga   diluncurkan   ke   internet   untuk   dapat diakses oleh semua pihak. Suatu web server memiliki   engine   tertentu   yang   memilah­milah data di  dalamnya menjadi  halaman­halaman   yang   akan   ditampilkan   sesuai permintaan dari client.

Suatu   halaman   web   diakses   dengan suatu perintah standard yang disebut URL (Universal   Resource   Locator).   URL   ini terdiri dari beberapa bagian antara lain:

1. Protokol   yang   digunakan.   Bisa   http, https, dan lain­lain.

2. Mesin   letak   informasi.   Berisi   domain name atau alamat IPnya

3. Port.   Berisi   port   dari   protokol   yang digunakan

4. Sub directory dan nama file yang kita inginkan

Misalnya   kita   berikan   contoh   suatu URL sebagai berikut.http://sia.ft.undip.ac.id:80/elektro

URL   diatas   menggunakan   protokol http dengan port 80. Data yang dicari ada di mesin   sia.ft.undip.ac.id   tepatnya   pada direktori   elektro.   Bila   tidak   disebutkan nama   filenya   maka   akan   dicari   file   yang mengandung   nama   index   misalnya index.php, index.htmp, dan lain­lain,

Pembangunan   web   server   pada umumnya dilakukan dengan menggunakan program   Apache.   Apache   merupakan Engine web server open source yang sangat populer   di   kalangan   programer   karena kemudahan   installasi   dan   keandalan   serta banyaknya layanan yang didukung. Proses installasi Apache pada sistem operasi Linux diawali   dengan   melakukan   dekompresi paket installasi Apache. Lalu pada terminal pindah ke folder tempat paket installasi tadi berada. Lalu sebagai root ketikkan perintah berikut.

# ./configure# make# make install

Setelah proses installasi selesai, maka apache   siap   diaktifkan   dengan   perintah sebagai berikut.

# apache [-d directory] [-f file][start|restart|stop|shutdown]

Direktori   diatas   merupakan   tempat data­data   halaman   web   disimpan, sedangkan   opsi   selanjutnya   adalah penentuan   layanan   dari   Apache.   Apakah layanan   itu   akan   dimulai,   direstart, dihentikan,   ataupun   keluar   dari   program Apache.   Program   Apache   pada   windows memiliki   cara   perintah­perintah   aktifasi yang sama, hanya saja proses installasinya berbeda.

II. Sekilas PHP dan MySQLAplikasi   internet   berbasis   web 

merupakan salah satu penerapan multi  tier application yaitu suatu aplikasi yang dibagi menjadi beberapa bagian yang menjalankan fungsi masing­masing. Dalam hal ini dibagi menjadi tiga yaitu:

Client side presentation Server side business logic Backend storage

Client side presentation menampilkan presentasi  halaman web pada pengunjung. Disini   diatur   bagaimana   halaman   web berinteraksi   dengan   user   termasuk didalamnya   bagaimana   data   ditampilkan, bagaimana   fungsi   dan   fitur   aplikasi ditampilkan. Dalam aplikasi  berbasis  web, presentasi   dapat   dibuat   dengan   bahasa HTML,   CSS,   Javascript,   dan   lain­lain. Pembuatannya dapat dengan menggunakan program   aplikasi   pembantu   seperti   MS Frontpage, atau Macromedia Dreamweaver yang keduanya berbasis windows.

Server   side   business   logic   sering disebut   middle   tier   karena   bertanggung jawab   menangani   cara   kerja   aplikasi.   Di dalamnya diatur bagaimana fungsi dan fitur aplikasi   dapat   bekerja   dengan   baik termasuk   di   dalamnya   layanan­layanan yang   diberikan   oleh   webserver   pada pengunjung. Server side engine yang sering digunakan   adalah   PHP   yang   merupakan kependekan dari Personal Home Page.

Back   end   storage   mengatur penyimpanan  data   di  mesin   server.  Suatu basis data dapat dibangun pada stand alone 

machine   atau   mesin   terpisah,   dan   dapat juga dibuat pada mesin yang sama dengan server web kita. Basis data ini mendukung layanan yang diberikan oleh halaman web yang kita bangun. Layanan dari basis data ini   mulai   dari   penyimpanan,   pengolahan dan   penampilan   kembali   termasuk   di dalamnya   pengubahan   isi   data   dan pencarian data. database engine yang sering digunakan   dan   populer   di   kalangan mahasiswa adalah MySQL suatu basis data yang gratis dan dapat dikembangkan secara bebas.

III. Message CenterPada   makalah   kali   ini   penulis 

mencoba   membangun   suatu   message center.   Message   center   yang   dibuat   pada dasarnya   difungsikan   untuk   menyimpan pesan   dengan   atribut   pengirim   dan tujuannya.   Nantinya   data­data   pesan   ini akan  disimpan dalam basis  data  di  mesin yang sama dengan web servernya. Atribut­atribut   ini   diperlukan   untuk   memastikan pesan   sampai   di   orang   yang   dituju   dan orang   tersebut   mengetahui   siapa pengirimnya.  Untuk   memastikan   pesan tersebut   hanya   dibaca   oleh   orang   yang dituju, maka diberikan fitur tambahan pada web ini  untuk melakukan verifikasi  untuk setiap pengguna yang mengakses web ini. Dalam   hal   ini   penulis   menggunakan cookies.   Cookies   merupakan   fitur penyimpanan variabel pada suatu browser. Dengan   demikian   pengguna   dapat   sekali melakukan   login   untuk   mengakses   menu­menu   di   website   dengan   browser   yang sama.  Setelah usai  pengguna dapat   logout untuk menghapus isi variabel tadi sehingga tidak dapat diakses orang lain.

Penulis   juga   menggunakan   URL embedding untuk menyimpan variabel yang diperlukan   selama   perpindahan   halaman. Namun tetap tidak menggunakannya untuk proses   login   karena   URL   embedding   ini masih   dapat   terbaca   di   browser   sehingga memungkinkan  orang   lain   untuk mengaksesnya.   Untuk   lebih   memahami konsep   message   center   ini   dapat   dilihat flowchart sebagai berikut.

2

MULAI

BACACOOKIES

USERNAMEDITEMUKAN

MENUUTAMA

INPUTLOGIN

LOGINBENAR

T

Y

Y

T

PILIH MENU

INPUTPESAN

TAMPILKANISI INBOX

TAMPILKANISI OUTBOX

COMPOSE

INBOXOUTBOX

HAPUSCOOKIES

LOGOUT

SELESAI

INBOXMENU

OUTBOXMENU

TAMPILKANPESAN

HAPUSPESAN

HAPUSPESAN

TAMPILKANPESAN

VIEW

DEL

VIEWDEL

Gambar 1 Flowchart

3

IV. Analisa Source CodeHalaman web ini terdiri dari beberapa 

bagian.   Bagian   utama   adalah   index.php yang ditampilkan pada senarai berikut.

<style type="text/css">.judul {

width: 30%;font-size: 16px;font-weight: bold;height: 10px;color: #FFFFFF;text-align: center;padding-top: 5px;background-color: #B9CAC0;font-family: Geneva,

Arial, Helvetica, sans-serif;border: 2 px;border-color:#FFFFFF;

}.isi {

padding: 10px;border: 1px solid #B9CAC0;background-color: #FFFFFF;font-size: 16px;font-weight: bold;height: 10px;color: #B9CAC0;

}a:link, a:active, a:visited {

color: #90A797;text-decoration: none;

}a:hover {

text-decoration: underline;

color: #A0B7A7;}textarea, input, select, option, button {

font-family: Tahoma, Verdana, Arial;

background-color : #F3F5F4;

color : #7B9685;font-size : 12px;border: 1px solid #B9CAC0;

}</style><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr valign="middle"> <td width="449" colspan="2"><img src="gb1.jpg" width="449" height="150"></td>

<td width="100%" background="gb2.jpg"></td> </tr> <tr>

<td class="judul" width="449" height="30%">

<?if (!$mail_username){include "login.php";echo "<br><br>";}else{echo "<p>welcome

$mail_username</p>";include "out.php";echo "<br><br>";}?></td>

<td class="isi" rowspan="2" colspan="2"><? include "isi.php" ;?></td> </tr> <tr> <td class="judul" height="30%"><? include "menu.php"; ?></td> </tr> <tr align="center" valign="middle"> <td class="judul" height="20%" colspan="3"><? include "foot.php"; ?></td> </tr></table>

Senarai   diatas   menampilkan index.php.   Di   awal   program   diatur   style dari halaman dengan menggunakan bahasa CSS.   Setelah   itu   halaman   utama   dibagi menjadi kolom­kolom dan baris. Satu baris pertama digunakan untuk header. Lalu dua baris di kolom sebelah kiri digunakan untuk verifikasi login dan menu utama lalu kolom di sebelah kanannya untuk menampilkan isi web.   Bagian   bawah   merupakan   footer. Bagian   login   akan   selalu   memeriksa cookies   apakah  nama  anda   terdaftar.  Bila tidak akan menampilkan login.php dengan isi sebagai berikut.

<?if ($daftar==yes)include "daftar.php";elseinclude "logon.php";?>

Status   default   akan   menampilkan logon.php dengan senarai berikut.<form name="form1" method="post" action="cek.php">

4

<p> Username <input type="text" name="user"></p> <p> Password<input type="password" name="pass"> </p> <p><a href="index.php?daftar=yes">daftar</a> <input type="submit" name="Submit" value="login"> </p></form>

dan bila variabel daftar memiliki data maka akan menampilkan daftar.php dengan senarai berikut.

<form name="form1" method="post" action="baru.php"> <p> Username <input type="text" name="user"> </p> <p> Password <input type="password" name="pass"> </p> <p><a href="index.php">telah terdaftar</a><input type="submit" name="Submit" value="daftar">  </p></form>

Untuk  lebih  jelas  dapat  dilihat  pada gambar berikut.

Gambar 2 Halaman index

Gambar   diatas   menunjukkan   kita diminta melakukan login ke dalam sistem. Ada   pilihan   lain   yaitu   melakukan pendaftaran   username   baru.   Kita   coba mendaftar   dengan   menekan   hyperlink 

daftar  di   samping   tombol   login.  Dan  kita masukkan   nama   dan   password   seperti gambar berikut.

Gambar 3 Pendaftaran username

Setelah  tombol  daftar  ditekan,  maka nama dan password kita telah disimpan di basis   data   dan   secara   otomatis   kita   telah login  dan  dapat   mengakses   sistem.   Menu utama   dan   bagian   login   akan   berubah seperti gambar berikut.

Gambar 4 Menu utama

Pada gambar diatas nampak halaman login   menyebutkan   username   anda   dan memberikan opsi untuk logout,  sedangkan menu utama ada  home yang sedang anda akses   sekarang,   compose   untuk   membuat pesan, inbox untuk membaca pesan masuk dan  outbox untuk  membaca pesan  keluar. Kita coba membuat username lain dengan sebelumnya menekan logout dan mendaftar dengan nama berbeda. Lalu kita buat pesan untuk  user   pertama   tadi   dengan   menekan compose pada menu seperti gambar berikut.

5

Gambar 5 Halaman compose

Disini   ditampilkan   satu   halaman berisi   tujuan,   judul   pesan,   dan   isi   pesan. Dibawah kata   tujuan terdapat   scroll  down menu   yang   berisi   nama­nama   yang   telah terdaftar   dalam   basis   data   sehingga   kita tinggal   memilih   siapa   yang   hendak   kita kirim   pesan.   Lalu   bagian   judul   pesan berupa   text   field   yang   dapat   diisi   data hingga   20   karakter.   Dan   di   bawahnya terdapat text field isi pesan dengan batasan hingga 255 karakter sesuai batas maksimal panjang karakter  dengan tipe data varchar pada   program   MySQL.   Isi   compose.php ditunjukkan dengan senarai berikut.

<form name="form1" method="post" action="send.php"> <p> Tujuan :<br> <select name="tujuan">

<? include "db.php"; $query =

mysql_query("select * from user");

while($data = mysql_fetch_array($query))

{ $nama = $data[0]; include "option.php"; } ?>

</select></p> <p>Judul Pesan :<br> <input name="judul" type="text" value="masukkan judul pesan" maxlength="20"></p> <p>Isi Pesan :<br> <textarea name="pesan" cols="20" id="pesan">Silahkan Masukkan Pesan Anda</textarea> <br> <input type="submit" name="Submit" value="Kirim">

</p> </form>

Sedangkan   untuk   menu   Inbox   dan outbox,   ditampilkan   tabel   berisi   tanggal pesan sebagai index pengurut pesan, judul pesan   dan   nama   tujuan   atau   penerima pesan. Seperti ditunjukkan gambar berikut.

Gambar 6 Tampilan inbox

Pada kolom pesan, tiap­tiap barisnya memuat  dua  tombol.  Yang pertama berisi judul pesan digunakan untuk menampilkan pesan, sedangkan yang kedua berisi delete yang   digunakan   untuk   menghapus   pesan. Senarai   halaman   inbox   adalah   sebagai berikut.

<table width="100%" border="1"><tr><td>Waktu</td><td>Pesan</td><td>Pengirim</td></tr><?include "db.php";$query = mysql_query("select * from message_in where tujuan='$mail_username'");while($data = mysql_fetch_array($query)){echo "<tr><td>$data[0]</td><td>";include "link_view.php";echo "</td><td>$data[3]</td></tr>";}?></table>

Kita   coba   menampilkan   salah   satu pesan seperti gambar berikut.

6

Gambar 7 Tampilan pesan

Pada   gambar   diatas   ditampilkan waktu pesan diterima, judul pesan, dan isi pesan.   Di   akhir   pesan   terdapat   tombol kembali   untuk   kembali   ke   inbox   atau outbox   dimana   pesan   tersebut   berada. Senarai   penampilan   pesan   ini   adalah sebagai berikut.

<?include "db.php";$query = mysql_query("select * from message_in where waktu ='$pesan'");$data = mysql_fetch_array($query);echo "Pesan diterima server pada $data[0] dari $data[3] sebagai berikut : <br><br>";echo "$data[1]<br><br>$data[2]<br><br>";?><form name="form1" method="post" action=""><input name="isi" type="hidden" value="in"><input type="submit" name="Submit" value="kembali"></form>

Inti   dari   penampilan   pesan   adalah pengambilan   data   dari   basis   data   yang masih   berupa   larik.   Lalu   komponen   larik tersebut ditampilkan satu demi satu dengan susunan seperti diatas.

Untuk   mengakhiri   sesi,   kita   dapat menekan   logout   yang   mengantar   kita   ke logout.php dengan senarai berikut.

<?setcookie("variabel_cookie");header("location: index.php");?>

Senarai   diatas   berfungsi   menghapus cookie   dan   mengembalikan   ke   halaman utama.

V. PenutupDari   ulasan   diatas,   penulis   menarik 

beberapa kesimpulan sebagai berikut.Pembuatan halaman web dengan PHP dapat dipisah   menjadi   beberapa   bagian   untuk dipanggil   sewaktu­waktu   dengan   perintah include.   Hal   ini   memudahkan   bila diperlukan perubahan di satu bagian.Pengaksesan basis data menggunakan satu bagian   tersendiri   yaitu   db.php.   Hal   ini memudahkan   pembuatan   karena dimungkinkan   terjadi   berulang   kali   akses terhadap   basis   data.   dengan   adanya   file db.php maka setiap akses basis data dapat memanggil file ini.Cookie   merupakan   salah   satu   cara   yang efektif untuk pembuatan session mengingat letaknya   di   browser   maka   tidak   dapat dibaca   seperti   URL   embedding   dan   akan tetap   ada   hingga   dihapus   sehingga   cukup sekali login selama session.

Penulis   juga   memberikan   beberapa saran diantaranya:Perlu   adanya   pengujian   langsung   dengan eksekusi   untuk   memastikan   senarai program berjalan sesuai keinginan.Halaman sebaiknya dibuat menarik dengan memanfaatkan CSS dan  hypertext   lainnya bila perlu.Perhatikan batasan­batasan  yang ada pada basis   data   yang   digunakan   mengingat kemungkinan data  tidak  tersimpan dengan baik karena melampaui kapasitas.

Daftar Pustaka

[1.]DuBois,   Paul,  MySQL,   New   Riders, 2000

[2.]Mata­Toledo, Ramon A, Fundamentals  of   SQL   Programming,   Schaum’s Outlines, 2000

[3.]Muhardin,   Endy,  PHP   Programming Fundamental   dan   MySQL Fundamental,

[4.]Wisnu,   Harindra,  Dasar­dasar   Web Design   dan   Akses   Database   dengan 

7

PHP   dan   MySQL,   Teknik   Elektro Universitas Diponegoro, 2006

[5.]_____,  Modul   Praktikum   Basis   Data 2007,   Laboratorium   Komputer   dan Informatika   Jurusan   Teknik   Elektro Fakultas   Teknik   Universitas Diponegoro, 2007

8

HARINDRA WISNU P  (L2F004481).Dilahirkan   di   Blora  23 Nopember   1986   lalu. Menempuh   pendidikan dari   sekolah   dasar sampai   sekolah menengah   pertama   di Blora   dan   memutuskan 

untuk melanjutkan sekolah menengah atas di Semarang. Sejak tahun 2004 sampai saat ini sedang menyelesaikan studi Strata­1 di 

Jurusan   Teknik   Elektro   Fakultas   Teknik Universitas   Diponegoro   Semarang, konsentrasi   Informatika   dan   Komputer. Pemuda   yang   nampak   lugu   namun penuh ambisi ini bercita­cita suatu saat nanti   akan   menghubungkan   nusantara dalam satu jaringan Wide Area Network yang   independen   sehingga   setiap penduduk   Indonesia   dapat   menikmati jaringan tersebut dengan mudah murah dan bermanfaat.

9