Anda di halaman 1dari 9

Tugas Praktikum Basis Data

Desain 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. Pendahuluan Misalnya   kita   berikan   contoh   suatu 


Situs web yang telah lama kita kenal  URL sebagai berikut.
merupakan suatu server yang menyediakan  http://sia.ft.undip.ac.id:80/ele
ktro
layanan   hosting   atau   penyimpanan 
URL   diatas   menggunakan   protokol 
halaman­halaman  web.   Server   inilah   yang 
http dengan port 80. Data yang dicari ada di 
disebut   Web   Server.   Web   server 
mesin   sia.ft.undip.ac.id   tepatnya   pada 
menyediakan   alokasi   tertentu   mulai   dari 
direktori   elektro.   Bila   tidak   disebutkan 
kapasitas   penyimpanan   di   dalamnya, 
nama   filenya   maka   akan   dicari   file   yang 
bandwidth   maksimal   arus   data   masuk 
mengandung   nama   index   misalnya 
maupun   keluar,   dan   batas   maksimal 
index.php, index.htmp, dan lain­lain,
bandwidth secara komulatif.
Pembangunan   web   server   pada 
Suatu   web   server   dapat   dibangun 
umumnya dilakukan dengan menggunakan 
untuk melayani jaringan lokal saja atau bisa 
program   Apache.   Apache   merupakan 
juga   diluncurkan   ke   internet   untuk   dapat 
Engine web server open source yang sangat 
diakses oleh semua pihak. Suatu web server 
populer   di   kalangan   programer   karena 
memiliki   engine   tertentu   yang   memilah­
kemudahan   installasi   dan   keandalan   serta 
milah data di dalamnya menjadi halaman­
banyaknya layanan yang didukung. Proses 
halaman   yang   akan   ditampilkan   sesuai 
installasi Apache pada sistem operasi Linux 
permintaan dari client.
diawali   dengan   melakukan   dekompresi 
Suatu   halaman   web   diakses   dengan 
paket installasi Apache. Lalu pada terminal 
suatu perintah standard yang disebut URL 
pindah ke folder tempat paket installasi tadi 
(Universal   Resource   Locator).   URL   ini 
berada. Lalu sebagai root ketikkan perintah 
terdiri dari beberapa bagian antara lain:
berikut.
1. Protokol   yang   digunakan.   Bisa   http, 
# ./configure
https, dan lain­lain. # make
2. Mesin   letak   informasi.   Berisi   domain  # make install
name atau alamat IPnya
3. Port.   Berisi   port   dari   protokol   yang  Setelah proses installasi selesai, maka 
digunakan apache   siap   diaktifkan   dengan   perintah 
4. Sub directory dan nama file yang kita  sebagai berikut.
inginkan
# apache [-d directory] [-f machine   atau   mesin   terpisah,   dan   dapat 
file][start|restart|stop| juga dibuat pada mesin yang sama dengan 
shutdown]
server web kita. Basis data ini mendukung 
Direktori   diatas   merupakan   tempat 
layanan yang diberikan oleh halaman web 
data­data   halaman   web   disimpan, 
yang kita bangun. Layanan dari basis data 
sedangkan   opsi   selanjutnya   adalah 
ini   mulai   dari   penyimpanan,   pengolahan 
penentuan   layanan   dari   Apache.   Apakah 
dan   penampilan   kembali   termasuk   di 
layanan   itu   akan   dimulai,   direstart, 
dalamnya   pengubahan   isi   data   dan 
dihentikan,   ataupun   keluar   dari   program 
pencarian data. database engine yang sering 
Apache.   Program   Apache   pada   windows 
digunakan   dan   populer   di   kalangan 
memiliki   cara   perintah­perintah   aktifasi 
mahasiswa adalah MySQL suatu basis data 
yang sama, hanya saja proses installasinya 
yang gratis dan dapat dikembangkan secara 
berbeda.
bebas.
II. Sekilas PHP dan MySQL
III. Message Center
Aplikasi   internet   berbasis   web 
Pada   makalah   kali   ini   penulis 
merupakan salah satu penerapan multi tier 
mencoba   membangun   suatu   message 
application yaitu suatu aplikasi yang dibagi 
center.   Message   center   yang   dibuat   pada 
menjadi beberapa bagian yang menjalankan 
dasarnya   difungsikan   untuk   menyimpan 
fungsi masing­masing. Dalam hal ini dibagi 
pesan   dengan   atribut   pengirim   dan 
menjadi tiga yaitu:
tujuannya.   Nantinya   data­data   pesan   ini 
 Client side presentation akan   disimpan   dalam   basis   data   di   mesin 
 Server side business logic yang sama dengan web servernya. Atribut­
 Backend storage atribut   ini   diperlukan   untuk   memastikan 
Client side presentation menampilkan  pesan   sampai   di   orang   yang   dituju   dan 
presentasi  halaman web  pada  pengunjung.  orang   tersebut   mengetahui   siapa 
Disini   diatur   bagaimana   halaman   web  pengirimnya.  Untuk   memastikan   pesan 
berinteraksi   dengan   user   termasuk  tersebut   hanya   dibaca   oleh   orang   yang 
didalamnya   bagaimana   data   ditampilkan,  dituju, maka diberikan fitur tambahan pada 
bagaimana   fungsi   dan   fitur   aplikasi  web  ini  untuk  melakukan  verifikasi  untuk 
ditampilkan. Dalam aplikasi berbasis web,  setiap pengguna yang mengakses web  ini. 
presentasi   dapat   dibuat   dengan   bahasa  Dalam   hal   ini   penulis   menggunakan 
HTML,   CSS,   Javascript,   dan   lain­lain.  cookies.   Cookies   merupakan   fitur 
Pembuatannya dapat dengan menggunakan  penyimpanan variabel pada suatu browser. 
program   aplikasi   pembantu   seperti   MS  Dengan   demikian   pengguna   dapat   sekali 
Frontpage, atau Macromedia Dreamweaver  melakukan   login   untuk   mengakses   menu­
yang keduanya berbasis windows. menu   di   website   dengan   browser   yang 
Server   side   business   logic   sering  sama.  Setelah usai  pengguna  dapat  logout 
disebut   middle   tier   karena   bertanggung  untuk menghapus isi variabel tadi sehingga 
jawab   menangani   cara   kerja   aplikasi.   Di  tidak dapat diakses orang lain.
dalamnya diatur bagaimana fungsi dan fitur  Penulis   juga   menggunakan   URL 
aplikasi   dapat   bekerja   dengan   baik  embedding untuk menyimpan variabel yang 
termasuk   di   dalamnya   layanan­layanan  diperlukan   selama   perpindahan   halaman. 
yang   diberikan   oleh   webserver   pada  Namun tetap tidak menggunakannya untuk 
pengunjung. Server side engine yang sering  proses   login   karena   URL   embedding   ini 
digunakan   adalah   PHP   yang   merupakan  masih   dapat   terbaca   di   browser   sehingga 
kependekan dari Personal Home Page. memungkinkan  orang   lain   untuk 
Back   end   storage   mengatur  mengaksesnya.   Untuk   lebih   memahami 
penyimpanan   data   di   mesin   server.   Suatu  konsep   message   center   ini   dapat   dilihat 
basis data dapat dibangun pada stand alone  flowchart sebagai berikut.

2
MULAI

BACA
COOKIES

USERNAME
T
DITEMUKAN

INPUT
LOGIN

Y
T

MENU LOGIN
Y
UTAMA BENAR

COMPOSE PILIH MENU

INPUT LOGOUT
OUTBOX
PESAN INBOX

TAMPILKAN
ISI OUTBOX

TAMPILKAN
ISI INBOX

OUTBOX HAPUS
DEL
MENU PESAN
HAPUS INBOX
DEL
PESAN MENU VIEW

VIEW TAMPILKAN
PESAN
TAMPILKAN
PESAN

HAPUS
COOKIES

SELESAI

Gambar 1 Flowchart

3
IV. Analisa Source Code <?
if (!$mail_username)
Halaman web ini terdiri dari beberapa 
{
bagian.   Bagian   utama   adalah   index.php  include "login.php";
yang ditampilkan pada senarai berikut. echo "<br><br>";
}
<style type="text/css"> else
.judul { {
width: 30%; echo "<p>welcome
font-size: 16px; $mail_username</p>";
font-weight: bold; include "out.php";
height: 10px; echo "<br><br>";
color: #FFFFFF; }
text-align: center; ?>
padding-top: 5px; </td>
background-color: #B9CAC0; <td class="isi" rowspan="2"
font-family: Geneva, colspan="2"><? include "isi.php"
Arial, Helvetica, sans-serif; ;?></td>
border: 2 px; </tr>
border-color:#FFFFFF; <tr>
} <td class="judul"
.isi { height="30%"><? include
padding: 10px; "menu.php"; ?></td>
border: 1px solid #B9CAC0; </tr>
background-color: #FFFFFF; <tr align="center"
font-size: 16px; valign="middle">
font-weight: bold; <td class="judul"
height: 10px; height="20%" colspan="3"><?
color: #B9CAC0; include "foot.php"; ?></td>
} </tr>
a:link, a:active, a:visited { </table>
color: #90A797;
text-decoration: none; Senarai   diatas   menampilkan 
} index.php.   Di   awal   program   diatur   style 
a:hover {
text-decoration: dari halaman dengan menggunakan bahasa 
underline; CSS.   Setelah   itu   halaman   utama   dibagi 
color: #A0B7A7; menjadi kolom­kolom dan baris. Satu baris 
} pertama digunakan untuk header. Lalu dua 
textarea, input, select, option,
baris di kolom sebelah kiri digunakan untuk 
button {
font-family: Tahoma, verifikasi login dan menu utama lalu kolom 
Verdana, Arial; di sebelah kanannya untuk menampilkan isi 
background-color : web.   Bagian   bawah   merupakan   footer. 
#F3F5F4; Bagian   login   akan   selalu   memeriksa 
color : #7B9685;
font-size : 12px; cookies   apakah   nama   anda   terdaftar.   Bila 
border: 1px solid #B9CAC0; tidak akan menampilkan login.php dengan 
} isi sebagai berikut.
</style>
<table width="100%" border="0" <?
cellspacing="0" cellpadding="0"> if ($daftar==yes)
<tr valign="middle"> include "daftar.php";
<td width="449" else
colspan="2"><img src="gb1.jpg" include "logon.php";
width="449" height="150"></td> ?>
<td width="100%"
background="gb2.jpg"></td> Status   default   akan   menampilkan 
</tr>
<tr> logon.php dengan senarai berikut.
<td class="judul" <form name="form1" method="post"
width="449" height="30%"> action="cek.php">

4
<p> daftar   di   samping   tombol   login.   Dan   kita 
Username masukkan   nama   dan   password   seperti 
<input type="text"
name="user"> gambar berikut.
</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> Gambar 3 Pendaftaran username

dan bila variabel daftar memiliki data  Setelah  tombol  daftar  ditekan,  maka 


maka akan menampilkan daftar.php dengan  nama dan password kita telah disimpan di 
senarai berikut. basis   data   dan   secara   otomatis   kita   telah 
login   dan   dapat   mengakses   sistem.   Menu 
<form name="form1" method="post" utama   dan   bagian   login   akan   berubah 
action="baru.php"> seperti gambar berikut.
<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> Gambar 4 Menu utama
</form>
Pada gambar diatas nampak halaman 
Untuk   lebih  jelas   dapat   dilihat   pada 
login   menyebutkan   username   anda   dan 
gambar berikut.
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.
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 

5
</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 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  Gambar 6 Tampilan inbox
hingga   20   karakter.   Dan   di   bawahnya 
terdapat text field isi pesan dengan batasan  Pada kolom pesan, tiap­tiap barisnya 
hingga 255 karakter sesuai batas maksimal  memuat   dua   tombol.   Yang   pertama   berisi 
panjang karakter dengan tipe data varchar  judul pesan digunakan untuk menampilkan 
pada   program   MySQL.   Isi   compose.php  pesan, sedangkan yang kedua berisi delete 
ditunjukkan dengan senarai berikut. yang   digunakan   untuk   menghapus   pesan. 
Senarai   halaman   inbox   adalah   sebagai 
<form name="form1" method="post"
berikut.
action="send.php">
<p>
Tujuan :<br> <table width="100%"
<select name="tujuan"> border="1"><tr><td>Waktu</td><td
<? >Pesan</td><td>Pengirim</td></tr
include "db.php"; >
$query = <?
mysql_query("select * from include "db.php";
user"); $query = mysql_query("select *
while($data = from message_in where
mysql_fetch_array($query)) tujuan='$mail_username'");
{ while($data =
$nama = $data[0]; mysql_fetch_array($query))
include "option.php"; {
} echo
?> "<tr><td>$data[0]</td><td>";
</select> include "link_view.php";
</p> echo
<p>Judul Pesan :<br> "</td><td>$data[3]</td></tr>";
<input name="judul" }
type="text" value="masukkan ?>
judul pesan" maxlength="20"> </table>
</p>
<p>Isi Pesan :<br> Kita   coba   menampilkan   salah   satu 
<textarea name="pesan" pesan seperti gambar berikut.
cols="20" id="pesan">Silahkan
Masukkan Pesan Anda</textarea>
<br>
<input type="submit"
name="Submit" value="Kirim">

6
Senarai   diatas   berfungsi   menghapus 
cookie   dan   mengembalikan   ke   halaman 
utama.

V. Penutup
Dari   ulasan   diatas,   penulis   menarik 
beberapa kesimpulan sebagai berikut.
Pembuatan halaman web dengan PHP dapat 
dipisah   menjadi   beberapa   bagian   untuk 
Gambar 7 Tampilan pesan dipanggil   sewaktu­waktu   dengan   perintah 
include.   Hal   ini   memudahkan   bila 
Pada   gambar   diatas   ditampilkan  diperlukan perubahan di satu bagian.
waktu pesan diterima, judul pesan, dan isi  Pengaksesan basis data menggunakan satu 
pesan.   Di   akhir   pesan   terdapat   tombol  bagian   tersendiri   yaitu   db.php.   Hal   ini 
kembali   untuk   kembali   ke   inbox   atau  memudahkan   pembuatan   karena 
outbox   dimana   pesan   tersebut   berada.  dimungkinkan   terjadi   berulang   kali   akses 
Senarai   penampilan   pesan   ini   adalah  terhadap   basis   data.   dengan   adanya   file 
sebagai berikut. db.php maka setiap akses basis data dapat 
memanggil file ini.
<? Cookie   merupakan   salah   satu   cara   yang 
include "db.php"; efektif untuk pembuatan session mengingat 
$query = mysql_query("select * letaknya   di   browser   maka   tidak   dapat 
from message_in where waktu
dibaca   seperti   URL   embedding   dan   akan 
='$pesan'");
$data = tetap   ada   hingga   dihapus   sehingga   cukup 
mysql_fetch_array($query); sekali login selama session.
echo "Pesan diterima server pada Penulis   juga   memberikan   beberapa 
$data[0] dari $data[3] sebagai saran diantaranya:
berikut : <br><br>";
echo Perlu   adanya   pengujian   langsung   dengan 
"$data[1]<br><br>$data[2]<br><br eksekusi   untuk   memastikan   senarai 
>"; program berjalan sesuai keinginan.
?> Halaman sebaiknya dibuat menarik dengan 
<form name="form1" method="post" memanfaatkan   CSS   dan   hypertext   lainnya 
action=""><input name="isi"
type="hidden" value="in"><input bila perlu.
type="submit" name="Submit" Perhatikan   batasan­batasan   yang   ada   pada 
value="kembali"></form> basis   data   yang   digunakan   mengingat 
kemungkinan data tidak tersimpan dengan 
Inti   dari   penampilan   pesan   adalah  baik karena melampaui kapasitas.
pengambilan   data   dari   basis   data   yang 
masih   berupa   larik.   Lalu   komponen   larik 
tersebut ditampilkan satu demi satu dengan  Daftar Pustaka
susunan seperti diatas.
Untuk   mengakhiri   sesi,   kita   dapat  [1.] DuBois,   Paul,  MySQL,   New   Riders, 
menekan   logout   yang   mengantar   kita   ke  2000
logout.php dengan senarai berikut. [2.] Mata­Toledo, Ramon A, Fundamentals  
of   SQL   Programming,   Schaum’s 
<? Outlines, 2000
setcookie("variabel_cookie");
header("location: index.php"); [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  Jurusan   Teknik   Elektro   Fakultas   Teknik 
P  (L2F004481). Universitas   Diponegoro   Semarang, 
Dilahirkan   di   Blora  23  konsentrasi   Informatika   dan   Komputer. 
Nopember   1986   lalu.  Pemuda   yang   nampak   lugu   namun 
Menempuh   pendidikan  penuh ambisi ini bercita­cita suatu saat 
dari   sekolah   dasar  nanti   akan   menghubungkan   nusantara 
sampai   sekolah  dalam satu jaringan Wide Area Network 
menengah   pertama   di  yang   independen   sehingga   setiap 
Blora   dan   memutuskan  penduduk   Indonesia   dapat   menikmati 
untuk melanjutkan sekolah menengah atas 
jaringan tersebut dengan mudah murah 
di Semarang. Sejak tahun 2004 sampai saat 
dan bermanfaat.
ini sedang menyelesaikan studi Strata­1 di