Tugas Praktikum Basis DataDesain Website Message Center dengan PHP dan MySQL
Harindra Wisnu Pradhana (L2F004481)Teknik Elektro Universitas Diponegoro
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 halamanhalaman web. Halamanhalaman 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 halamanhalaman 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 memilahmilah data di dalamnya menjadi halamanhalaman 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 lainlain.
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 lainlain,
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 datadata 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 perintahperintah 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 masingmasing. 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 lainlain. 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 layananlayanan 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 datadata pesan ini akan disimpan dalam basis data di mesin yang sama dengan web servernya. Atributatribut 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 menumenu 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 kolomkolom 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 namanama 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, tiaptiap 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 sewaktuwaktu 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 batasanbatasan 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.]MataToledo, Ramon A, Fundamentals of SQL Programming, Schaum’s Outlines, 2000
[3.]Muhardin, Endy, PHP Programming Fundamental dan MySQL Fundamental,
[4.]Wisnu, Harindra, Dasardasar 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 Strata1 di
Jurusan Teknik Elektro Fakultas Teknik Universitas Diponegoro Semarang, konsentrasi Informatika dan Komputer. Pemuda yang nampak lugu namun penuh ambisi ini bercitacita 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