Dark Shadows: Tutorial Tugas Akhir (membuat aplikasi forum diskusi sederhana)

Dalam postingan kali ini saya akan mejelaskan langkah-langkah membuat aplikasi forum diskusi menggunakan PHP & MySql. Sebelumnya, software yang perlu di siapkan sebagai berikut :

Dreamwever --> Digunakan untuk mengedit source code aplikasi yang akan di buat.
WebServer(WampServer, Xampp, dll) --> Digunakan sebagai Apache dan Sql server.

Instalasi Dreamwever

Pertama siapkan dulu installer dreamwever. Installer dapat dicari di google. Dalam tutorial ini saya menggunakan Adobe Dreamwever CS5. Jalankan Setup.exe untuk memulai instalasi program.

Setelah menjalankan Setup.exe akan terlihat License Agreement Adobe Dreamwever CS5. Klik "Accept" untuk melanjutkan.

Masukkan serial number jika anda memilikinya atau pilih "Install as a trial" jika anda tidak memiliki serial number. Kemudian klik next.

Setelah itu akan muncul tampilan Instalation Option. Centang "Adobe Dreamwever CS5" dan "All Components". Selanjutnya klik install.

Proses instalasi akan dimulai. tunggu sampai instalasi selesai (100%). Kemudian klik done.

Instalasi Dreamwever telah selesai.

Instalasi WampServer

Sebelum memulai proses instalasi, siapkan terlebih dahulu installer wampserver. Dapat dengan mudah ditemukan dengan google. Jalankan Setup.exe. Akan muncul tampilan instalasi wampserve. Klik next.

Akan Muncul License Agreement. Pilih "I accept the agreement". Klik next.

Setelah itu akan pilih dimana anda akan menginstall wampserver tersebut. default foldernya adalah di "c:\wamp". anda bisa merubahnya dimana pun yang anda mau. Klik next.

Selanjutnya langsung klik next aja.

Klik install untuk memulai proses instalasi.

Proses instalasi akan berjalan. tunggu sampai proses instalasi selesai.

Proses instalasi selesai. centang "Launch WampServer 2 now" untuk langsung menjalankan aplikasi.Klik finish.

Pembuatan Database

Aktifkan program WampServer yang telah diinstall tadi. Pastikan Apache dan Sql server sudah berjalan. Buka phpMyAdmin di browser yang anda gunakan dengan mengetikkan "localhost/phpmyadmin/".

Kemudian create new database dengan nama "forum".

Buka database yang tadi dibuat. Kemudian buat tabel dengan field sebagai berikut :

Tabel "berita"

Tabel "sejarah"

Tabel "t_bidang"

Tabel "t_reply"

Tabel "t_topik"

Tabel "t_user"

Tabel "vimi"

Pembuatan database selesai.

Pembuatan Aplikasi Forum Diskusi

Sebelumnya, buat folder "fd" pada direktori "wamp/www/" dan buat juga folder "admin", "guest", dan "images" di dalam folder "fd". Setelah selesai buka dreamwever untuk mengetikkan coding untuk membuat aplikasi forum diskusi.

Pertama buat tampilan websitenya. saya menggunakan CSS untuk mendesign tampilannya.

buat file css baru dengan nama "style.css". Copy coding CSS berikut :

@charset "utf-8";
/* CSS Document */

a:link {
 text-decoration: none;
 color:#000000;
}
a:visited {
 text-decoration: none;
 color:#000000;
}
a:hover {
 text-decoration: underline;
 color:#000000;
}
a:active {
 text-decoration: none;
 color:#000000;
}
body {
 background-color:#666666;
 }
#header {
 margin:auto;
 width:900px;
 height:150px;
 border:1px solid #999999;
 border-bottom:0px;
 background:url(images/bglogo.JPG) no-repeat;
 }
#logo {
 float:left;
 margin-left:15px;
 width:110px;
 height:150px;
 background:url(images/logo.PNG) no-repeat;
 }
#banner {
 margin-left:136px;
 width:764px;
 height:150px;
 background:url(images/banner.JPG);
 }
#body {
 margin:auto;
 width:900px;
 height:400px;
 border:1px solid #999999;
 border-top:0px;
 background-color:#FFFFFF;
 }
#left {
 float:left;
 width:200px;
 height:400px;
 background-color:#CCCCCC;
 border-right:1px solid #999999;
 }
#time {
 margin:auto;
 width:160px;
 height:30px;
 padding-top:10px;
 padding-left:40px;
 background:url(images/bartime.JPG);
 color:#FFFFFF;
 }
#menu {
 margin:auto;
 width:200px;
 }
#menu ul {
 margin:auto;
 display:block;
 list-style:none;
 background-color:#429bd5;
 }
#menu ul li {
 margin:auto;
 font-size:18px;
 height:30px;
 display:block;
 }
#menu ul li a {
 margin:auto;
 display:block;
 height:25px;
 color:#FFFFFF;
 border-bottom:1px solid #CCCCCC;
 }
#menu ul li a:hover {
 color:#000000;
 text-decoration:none;
 }
#login {
 margin:auto;
 width:200px;
 }
#title {
 font-size:18px;
 text-align:center;
 }
#welcome {
 margin:auto;
 text-align:center;
 }
#center {
 margin:right;
 padding-left:200px;
 width:700px;
 height:auto;
 background:#FFFFFF;
 }
#top {
 margin:auto;
 background-color:#CCCCCC;
 height:35px;
 border-bottom:1px solid #999999;
 padding-top:5px;
 padding-left:10px;
 }
#button {
 width:150px;
 height:30px;
 text-align:center;
 font-size:18px;
 background:url(images/button.JPG) no-repeat;
 color:#FFFFFF;
 font-weight:bold;
 }
#button a {
 color:#FFFFFF;
 display:block;
 height:27px;
 padding-top:3px;
 }
#button a:hover {
 background:url(images/button1.JPG);
 text-decoration:none;
 }
#bar {
 margin-left:2px;
 margin-right:2px;
 width:687px;
 height:25px;
 padding-left:10px;
 padding-top:5px;
 font-weight:bold;
 color:#FFFFFF;
 background:url(images/bar_02.gif) repeat-x;
 }
#bar a:hover {
 text-decoration:none;
 }
#bar2 {
 margin-left:2px;
 margin-right:2px;
 width:687px;
 height:20px;
 padding-left:10px;
 padding-top:1px;
 color:#FFFFFF;
 background:url(images/bar_02.gif) repeat-x;
 }
#bar3 {
 margin-right:2px;
 width:637px;
 height:20px;
 padding-left:10px;
 padding-top:1px;
 color:#FFFFFF;
 background:url(images/bar_02.gif) repeat-x;
 }
#bar4 {
 margin-left:2px;
 margin-right:2px;
 width:687px;
 height:30px;
 padding-left:10px;
 padding-top:10px;
 font-weight:bold;
 color:#FFFFFF;
 background:url(images/bar_02.gif) repeat-x;
 }
#bar4 a:hover {
 text-decoration:none;
 }
#a {
 margin-left:2px;
 margin-right:2px;
 width:695px;
 height:auto;
 border:1px solid #CCCCCC;
 border-top:0px;
 }
#delete {
 float:left;
 padding:5px;
 width:40px;
 text-align:center;
 }
#delete2 {
 float:right;
 width:47px;
 height:20px;
 text-align:center;
 }
#content {
 margin-left:50px;
 padding:5px;
 font-weight:bold;
 border-left:1px solid #CCCCCC;
 text-transform:capitalize;
 }
#content a {
 display:block;
 }
#content2 {
 margin-left:2px;
 margin-right:2px;
 padding:10px;
 width:675px;
 height:auto;
 border:1px solid #CCCCCC;
 text-transform:capitalize;
 font-weight:bold;
 }
#content3 {
 margin-left:50px;
 padding:5px;
 border-left:1px solid #CCCCCC;
 }
#body2 {
 margin-left:2px;
 margin-right:2px;
 padding:10px;
 width:675px;
 height:auto;
 border:1px solid #CCCCCC;
 border-top:0px;
 text-align:justify;
 }
#space {
 margin-left:2px;
 margin-right:2px;
 padding:10px;
 width:675px;
 height:10px;
 border:1px solid #CCCCCC;
 border-top:0px;
 }
#footer {
 margin:auto;
 width:900px;
 padding:5px;
 text-align:center;
 color:#FFFFFF;
 }
#uac {
 border:1px solid #000000;
 border-right:0px;
 }
#head {
 background-color:#429bd5;
 color:#FFFFFF;
 }
.border-right {
 border-right:1px solid #000000;
 }
.border-right-top {
 border-right:1px solid #000000;
 border-top:1px solid #000000;
 }

buat file baru dengan nama "index.php". Copy coding berikut :

<?
date_default_timezone_set('Asia/Jakarta');
session_start();

//cek apakah user sudah login
if(isset($_SESSION['username'])){
?>
<script>alert("Anda sudah login"); document.location="javascript:history.go(-1)";</script>
<?
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LAPAN - Beranda</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">

</style></head>

<body>

<div id="header">
<div id="logo">
</div>
<div id="banner">
</div>
</div>
<div id="body">
<div id="left">
<div id="time">
<? echo date("d-m-Y H:i"); ?></div>
<div id="menu">
  <ul>
<li><a href="index.php">Beranda</a></li>
<li><a href="sejarah.php">Sejarah</a></li>
<li><a href="vimi.php">Visi & Misi</a></li>
<li><a href="forum.php">Forum Diskusi</a></li>
</ul>
</div>
<br />
<form action="log.php?op=in" method="post">
  <div id="login">
    <div id="title">
Masuk</div>
<div id="user">
Nama Pengguna :</div>
<div id="form">
      <input type="text" name="user" />
    </div>
<div id="pass">
Kata Sandi :</div>
<div id="form">
      <input type="password" name="pass" />
    </div>
<div id="submit">
      <input type="submit" value="Masuk" />
    </div>
</div>
</form>
<div>
Belum punya akun? <a href="reg.php">Daftar.</a></div>
</div>
<div id="center">
<div id="center2">
  <div id="top">
</div>
<div id="bar">
Berita ---</div>
<?
include"config.php";

$select = mysql_query("SELECT * FROM berita");
while($a = mysql_fetch_array($select)){
$judul = $a['judul'];
$isi = $a['isi'];
?>
<div id="content2">
<? echo $judul; ?></div>
<div id="body2">
<? echo $isi; ?></div>
<br />
<?
}
?>
</div>
</div>
</div>
</body>
</html>

dan masih banyak lagi coding file yang harus di buat. jadi cape kalo harus saya tulis semuanya di blog. jadi bisa di download semua source codenya. Download dimana? email saya di rachmatsatria@gmail.com . free & fast respon kok.
Maaf kalau link downloadnya tidak saya taruh di blog lagi. Karna sudah hampir 3rb visitor gak pernah ada yang komen. Kan capek tau bikinnya hehehe.

Terimakasih. Semoga berhasil.