BAB IV HASIL DAN IMPLEMENTASI

Transkripsi

1 BAB IV HASIL DAN IMPLEMENTASI 4.1 Hasil Hasil penelitian berupa sebuah website forum diskusi untuk mendukung kegiatan belajar dan bertukar ilmu dilingkungan fakultas teknik UMY. Halamanhalaman website secara umum terbagi menjadi 2 (dua) bagian, yaitu: 1. Halaman untuk member dan pengunjung untuk melakukan proses diskusi. 2. Halaman untuk admin untuk mengelola topik, subtopik dan member serta mengelola Thread. 4.2 Pembahasan Sistem Pembahasan sistem bertujuan untuk memaparkan bagaimana cara kerja sistem secara terperinci untuk menjelaskan setiap proses yang berjalan pada sistem informasi forum diskusi. Hal-hal yang akan dijelaskan meliputi koneksi database, proses pada halaman utama bagian publik, proses pada halaman utama bagian admin beserta menunjukan potongan-potongan source code pada setiap proses yang berjalan Koneksi Database Database yang digunakan pada sistem ini adalah MySQL. MySQL memberikan fasilitas pengolahan database dengan menggunakan standar SQL (Structure Query Language). Database pada website forum diskusi terdiri dari beberapa tabel. Berikut adalah tabel tabel pada database website forum diskusi yang digunakan untuk menyimpan data. 49

2 50 Gambar 4. 1 Tabel Database db_forum Koneksi pada sistem ini digunakan untuk menghubungkan database dengan program. Source code koneksi ini terdapat pada file koneksi.php. Potongan source code koneksi: <?php $server = "localhost"; $username = "root"; $password = ""; $database = "db_forum";?> // Koneksi dan memilih database di server mysql_connect($server,$username,$password) or die("koneksi gagal"); mysql_select_db($database) or die("database tidak bisa dibuka"); Gambar 4. 2 Source Code Koneksi Halaman Utama Bagian Publik Halaman ini merupakan halaman pertama yang akan muncul ketika pengguna menjalankan aplikasi ini. Pada bagian halaman pengunjung terdiri dari 3 bagian yaitu header, content dan footer. Pada bagian halaman utama publik akan menampilkan 5 artikel terbaru dan 5 artikel yang paling banyak dibaca.

3 51 Gambar 4. 3 Halaman Utama Halaman Detail Artikel/Topik Pada halaman ini pengunjung bisa melihat detail artikel seperti user yang memposting artikel, tanggal input, judul, gambar dan keterangan. Pada bagian bawah artikel terdapat kolom komentar namun hanya pengunjung yang sudah terdaftar oleh sistem (anggota) saja yang dapat memberikan komentar.

4 52 Gambar 4. 4 Halaman Detail Artikel/Topik Potongan source code detail data artikel: $detail=mysql_query("select * FROM artikel,users WHERE users.id_user=artikel.id_user AND id_artikel='$_get[id]'"); $d = mysql_fetch_array($detail); $tgl = tgl_indo($d[tanggal]); $tgl_daftar = tgl_indo($d[tgl_daftar]); $baca = $d[dibaca]+1;

5 53 // Apabila detail artikel dilihat, maka tambahkan berapa kali dibacanya mysql_query("update artikel SET dibaca=$d[dibaca]+1 WHERE id_artikel='$_get[id]'"); if ($d['gambar']!=''){ echo" <img src='foto_artikel/$d[gambar]' class='imgresponsive' alt=''/>"; echo" <div class='article_desc'> <p>$d[isi_artikel].</p> </div>"; // Komentar artikel $sql = mysql_query("select * FROM komentar,users WHERE komentar.id_user=users.id_user AND id_artikel='$_get[id]' AND aktif='y' "); $jml = mysql_num_rows($sql); // Apabila sudah ada komentar, tampilkan if ($jml > 0){ while ($s = mysql_fetch_array($sql)){ $tanggal = tgl_indo($s[tgl]); echo" <div class='author-detail'>"; echo" <img src='foto_users/small_$s[foto]' class='img-responsive' alt=''/>"; echo" <div class='author_details-right'> <div class='authortitle'>$s[username]</div> <p class='author-description'>"; $isian=nl2br($s[isi_komentar]); // membuat paragraf pada isi komentar $isikan=sensor($isian); echo autolink($isikan); echo"</p> Halaman Login Gambar 4. 5 Source Code Detail Topik Halaman ini digunakan untuk login ke sistem bagi anggota. Jika username dan password yang diisikan benar maka akan diarahkan ke halaman beranda namun jika username dan password yang dimasukkan salah maka akan muncul peringatan.

6 54 Form login anggota ditunjukkan pada gambar 4.6: Gambar 4. 6 Halaman Form Login Anggota Potongan source code cek login anggota: $username = $_POST['username']; $pass = md5($_post['password']); $login=mysql_query("select * FROM users WHERE username='$username' AND password='$pass' AND blokir='n'"); $ketemu=mysql_num_rows($login); $r=mysql_fetch_array($login); // Apabila username dan password ditemukan if ($ketemu > 0){ session_start(); $_SESSION[user_id] = $r[id_user]; $_SESSION[namauser] = $r[username]; $_SESSION[namalengkap] = $r[nama_lengkap]; $_SESSION[passuser] = $r[password]; $_SESSION[leveluser] = $r[level]; echo "<script>alert('selamat Datang $_SESSION[namalengkap]'); window.location = 'index.php'</script>"; else{ echo "<script>alert('login Gagal, username atau password anda salah'); window.location = 'index.php'</script>"; Gambar 4. 7 Source Code Cek Login Anggota

7 Halaman Form Pendaftaran Halaman ini digunakan untuk pengunjung web yang ingin mendaftar sebagai anggota. Pada halaman ini pengunjung hanya bisa mendaftar melalui admin adapun form isian untuk mendaftar terdapat username, password, , jurusan asal, no telepon dan lain-lain. Halaman form pendaftaran ditunjukkan pada gambar 4.8: Gambar 4. 8 Halaman Form Pendaftaran Member Melalui Admin Potongan source code aksi pendaftaran anggota: // Input user $pass=md5($_post[password]); mysql_query("insert INTO users(username, password, nama_lengkap, , level, id_jurusan, no_telp) VALUES('$_POST[username]', '$pass', '$_POST[nama_lengkap]', '$_POST[ ]', 'member', '$_POST[jurusan]', '$_POST[no_telp]')");

8 56 echo "<script>window.alert('pendaftaran Berhasil'); window.location=('index.php')</script>"; Gambar 4. 9 Source Code Halaman Form Pendaftaran Halaman Aturan Forum Pada halaman ini berisikan peraturan forum yang harus dipatuhi oleh semua member. Jika ada member yang diketahui melanggar forum maka admin berhak memberikan sanksi seperti me-nonaktifkan akun ataupun sanksi yang lain. Gambar Halaman Aturan Forum Halaman Kategori Halaman ini digunakan oleh pengunjung untuk menampilkan data artikel atau topik berdasarkan kategori yang dipilih. Jika pengunjung memilih salah satu

9 57 kategori yang sudah ada topiknya maka akan muncul data topik sesuai kategori yang dipilih. Berikut tampilannya: Gambar Tampilan Halaman Detail Kategori Potongan source code Halaman detail kategori: <div id='mytabcontent' class='tab-content'> <div role='tabpanel' class='tab-pane fade in active' id='home' aria-labelledby='home-tab'> <div class='panel-body'>"; $sebelum=mysql_query("select * FROM artikel WHERE id_kategori='$_get[id]' ORDER BY id_artikel DESC LIMIT 5"); while($t=mysql_fetch_array($sebelum)){ $tgl = tgl_indo($t['tanggal']); $isi_artikel = htmlentities(strip_tags($t['isi_artikel'])); // membuat paragraf pada isi artikel dan mengabaikan tag html

10 58 $isi = substr($isi_artikel,0,100); // ambil sebanyak 220 karakter $isi = substr($isi_artikel,0,strrpos($isi," ")); // potong per spasi kalimat echo" <div class='panel-body_1'> <h3> <a href='media.php?module=detailartikel&id=$t[id_artikel]'> $t[judul] </a><div class='pullright'>$tgl <i class='fa fa-refresh refresh_1'></i></div> </h3> <h4> <a href='index_detail.html'>$isi...</a> </h4> </div> <div class='clearfix'></div><hr>"; Halaman Olah Data Topik Gambar Source Code Detail Kategori Halaman ini digunakan anggota untuk mengolah data topik. Pada halaman ini anggota dapat menambah, mengedit dan menghapus topik. Hanya pengunjung yang sudah mendaftar sebagai anggota yang bisa mengakses halaman ini.

11 59 Halaman olah data topik ditunjukkan pada gambar 4.13: Gambar Halaman Olah Data Topik Halaman Update Profil Halaman update profil adalah halaman yang digunakan oleh anggoa untuk mealkukan perubahan data anggota jika diperlukan seperti , password ataupun yang lain. Tampilan halaman update profil dapat dilihat pada gambar 4.14.

12 60 Gambar Halaman Update Profil Halaman Login Admin Sebelum dapat mengolah data website maka admin terlebih dahulu melakukan login dengan akunnya yang sudah terdaftar. Tampilan halaman form login admin dapat dilihat pada gambar Gambar Halaman Form Login Admin

13 61 Potongan script form login admin: <div class="login-logo"> <a href="index2.html"><b>login ADMINISTRATOR</b></a> </div>  <div class="login-box-body"> <p class="login-box-msg">sign in to start your session</p> <form action="cek_login.php" method="post"> <div class="form-group has-feedback"> <input type="text" class="form-control" name="username" placeholder="username"> <span class="glyphicon glyphicon-envelope form-controlfeedback"></span> </div> <div class="form-group has-feedback"> <input type="password" class="form-control" name="password" placeholder="password"> <span class="glyphicon glyphicon-lock form-controlfeedback"></span> </div> <div class="row"> <div class="col-xs-8"> <div class="checkbox icheck"> </div> </div>  <div class="col-xs-4"> <button type="submit" class="btn btn-primary btn-block btn-flat">sign In</button> </div>  </div> </form> Gambar Source Code Form Login Potongan script cek_login yang digunakan untuk mengetahui apakah username dan password yang dimasukkan oleh user admin tersebut bernilai benar atau salah. Berikut potongan source code form login: login=mysql_query("select * FROM user WHERE username='$username' AND password='$pass' AND blokir='n'"); $ketemu=mysql_num_rows($login); $r=mysql_fetch_array($login); // Apabila username dan password ditemukan if ($ketemu > 0){ session_start(); $_SESSION[namauser] = $r[username];

14 62 $_SESSION[namalengkap] = $r[nama_lengkap]; $_SESSION[passuser] = $r[password]; $_SESSION[leveluser] = $r[level]; header('location:media.php?module=home'); else{ echo " <link href='css/zalstyle.css' rel='stylesheet' type='text/css'>"; echo " </head> <body class='special-page'> <div id='container'> <section id='error-number'> <img src='img/lock.png'> <h1>login GAGAL</h1> <p><span class style=\"font-size:14px; color:#ccc;\">username atau Password anda tidak sesuai.<br> Atau akun anda sedang diblokir.</p></span><br/> </section> <section id='error-text'> <p><a class='button' href='index.php'> <b>ulangi LAGI</b> </a></p> </section> </div>"; Halaman Anggota Gambar Source Code Cek Login Halaman ini dapat digunakan oleh admin untuk mengolah data anggota (member). Pada halaman ini admin bisa menghapus data member yang tidak diperlukan atau yang melanggar peraturan forum diskusi. Tampilan halaman data anggota dapat dilihat pada gambar 4.18.

15 63 Potongan script halaman data member: Gambar Halaman Data Anggota echo " <thead> <tr><th>no</th><th>username</th><th>nama lengkap</th><th> </th><th>no.telp/hp</th><th>blokir</th><th> aksi</th></tr></thead> <thead> <tbody>"; $tampil = mysql_query("select * FROM users WHERE level='member' ORDER BY id_user DESC"); $no=1; while ($r=mysql_fetch_array($tampil)){ echo "<tr><td>$no</td> <td>$r[username]</td> <td>$r[nama_lengkap]</td> <td><a href=mailto:$r[ ]>$r[ ]</a></td> <td>$r[no_telp]</td> <td align=center>$r[blokir]</td> <td><a href=?module=member&act=editmember&id=$r[id_user]>edit</a> <a href=$aksi?module=member&act=hapus&id=$r[id_user] onclick=\"return confirm('apakah Anda Yakin Untuk Menghapus Data Ini?')\">Hapus</a></td></tr>"; $no++; Gambar Source Code Data Member Potongan script aksi_member.php yang digunakan untuk mengolah data member seperti tambah, data, edit data dan hapus data.

16 64 Berikut script potongan aksi_member.php: // Input user if ($module=='admin' AND $act=='input'){ $pass=md5($_post[password]); $lokasi_file = $_FILES['fupload']['tmp_name']; $tipe_file = $_FILES['fupload']['type']; $nama_file = $_FILES['fupload']['name']; $acak = rand(1,99); $nama_file_unik = $acak.$nama_file; if (!empty($lokasi_file)){ if ($tipe_file!= "image/jpeg" AND $tipe_file!= "image/pjpeg"){ echo "<script>window.alert('upload Gagal, Pastikan File yang di Upload bertipe *.JPG'); window.location=('../../media.php?module=admin)</script>"; else{ UploadUsers($nama_file_unik); mysql_query("insert INTO users(username, password, nama_lengkap, , no_telp, level, foto) VALUES('$_POST[username]', '$pass', '$_POST[nama_lengkap]', '$_POST[ ]', '$_POST[no_telp]', 'member', '$nama_file_unik')"); else { mysql_query("insert INTO users(username, password, nama_lengkap, , level, no_telp) VALUES('$_POST[username]', '$pass', '$_POST[nama_lengkap]', '$_POST[ ]', 'member', '$_POST[no_telp]')"); header('location:../../media.php?module='.$module); elseif ($module=='member' AND $act=='update'){

17 65 mysql_query("update users SET '$_POST[blokir]' blokir = WHERE id_user = '$_POST[id]'"); header('location:../../media.php?module='.$module); Gambar Source Code Aksi Member Halaman Data Kategori Bagian Admin Halaman ini dapat digunakan oleh admin untuk mengolah data kategori artikel atau topik. Pada halaman ini admin bisa menambahkan, mengubah ataupun menghapus data kategori yang telah diinputkan. Tampilan halaman data kategori topik dapat dilihat pada gambar Gambar Halaman Data Kategori Topik Bagian Admin Potongan script halaman data kategori: <table id='example1' class='table table-bordered table-striped'> <thead> <tr><th>no</th><th>nama kategori</th><th>status</th><th>aksi</th></tr></thead> <tbody>"; $tampil=mysql_query("select * FROM kategori ORDER BY id_kategori DESC"); $no=1; while ($r=mysql_fetch_array($tampil)){ echo "<tr><td>$no</td> <td>$r[nama_kategori]</td> <td align=center>$r[aktif]</td>

18 66 <td><a href=?module=kategori&act=editkategori&id=$r[id_kategori]>edit</ a> <a href=$aksi?module=kategori&act=hapus&id=$r[id_kategori] onclick=\"return confirm('apakah Anda Yakin Untuk Menghapus Data Ini?')\">Hapus</a> </td></tr>"; $no++; echo "</tbody></table></div> Gambar Source Code Data Kategori Halaman Data Artikel/Topik Bagian Admin Halaman ini dapat digunakan oleh admin untuk mengolah data topik artiekl yang diinputkan oleh anggota forum. Pada halaman ini admin bisa menambahkan, mengubah ataupun menghapus data topik yang telah diinputkan. Tampilan halaman data topik dapat dilihat pada gambar Gambar Halaman Data Topik Bagian Admin Potongan script halaman data topik: <div class='box-body'> <table id='example1' class='table table-bordered table-striped'> <thead> <tr><th>no</th><th>judul</th><th>tgl. posting</th><th>aksi</th></tr></thead> <tbody>";

19 67 $tampil=mysql_query("select * FROM artikel ORDER BY id_artikel DESC"); $no=1; while ($r=mysql_fetch_array($tampil)){ $tgl_posting=tgl_indo($r[tanggal]); echo "<tr><td>$no</td> <td>$r[judul]</td> <td>$tgl_posting</td> <td><a href=?module=artikel&act=editartikel&id=$r[id_artikel]>edit</a> <a href='$aksi?module=artikel&act=hapus&id=$r[id_artikel]&namafile= $r[gambar]' onclick=\"return confirm('apakah Anda Yakin Untuk Menghapus Data Ini?')\">Hapus</a></td> </tr>"; $no++; echo "</tbody></table></div>  </div>  </div>"; Gambar Source Code Data Topik Halaman Data Komentar Bagian Admin Halaman ini berisi seluruh data komentar yang telah diinputkan oleh anggota forum. Pada halaman ini admin dapat mengedit ataupun menghapus data komentar yang telah diinputkan. Tampilan halaman data komentar dapat dilihat pada gambar Gambar Halaman Data Komentar Bagian Admin

20 68 Potongan script halaman data komentar: <div class='box-body'> <table id='example1' class='table table-bordered table-striped'> <thead> <tr><th>no</th><th>nama</th><th>komentar</th><th>aktif</th><th>a ksi</th></tr></thead> <tbody>"; $tampil=mysql_query("select * FROM komentar ORDER BY id_komentar DESC"); $no = $posisi+1; while ($r=mysql_fetch_array($tampil)){ echo "<tr><td>$no</td> <td width=80>$r[id_user]</td> <td width=290>$r[isi_komentar]</td> <td width=5 align=center>$r[aktif]</td> <td><a href=?module=komentar&act=editkomentar&id=$r[id_komentar]>edit</ a> <a href=$aksi?module=komentar&act=hapus&id=$r[id_komentar] onclick=\"return confirm('apakah Anda Yakin Untuk Menghapus Data Ini?')\">Hapus</a> </tr>"; $no++; echo "</tbody></table></div>  </div>  </div>"; Halaman Statis Gambar Source Code Data Komentar Halaman statis ini berisikan halaman yang datanya bersifat statis seperti aturan forum dan profil forum diskusi. Pada halaman ini admin dapat menginputkan judul beserta keterangannya. Tampilan halaman statis pada bagian admin dapat dilihat pada gambar 4.26.

21 69 Gambar Halaman Data Statis Bagian Admin Halaman Hubungi Kami Halaman hubungi kami berisi tentang informasi mengenai pengunjung web yang ingin memberikan pesan kepada pihak pengelola. Berikut tampilan halaman hubungi kami. Gambar Halaman Data Hubungi Kami 4.3. Pengujian Tahap ini bertujuan untuk mengevaluasi sistem, mengurangi adanya kesalahan dan memastikan sistem dapat dipakai. Pengujian sistem pada penelitian ini berfokus pada pengujian fungsional sistem. Pengujian sistem dibagi menjadi dua bagian yaitu skenario pengujian dan uji kasus hasil pengujian.

22 70 Tabel 4. 1 Pengujian Fungsi Dasar Sistem No Kasus Uji Hasil Yang Diharapkan Hasil 1 Pengujian Fungsi daftar member 2 Pengujian Fungsi daftar topic 3 Pengujian fungsi penambahan komentar 4 Pengujian fungsi penambahan Kategori 5 Pengujian fungsi penambahan sub kategori 6 Pengujian fungsi penambahan admin Sistem dapat menyimpan Berhasil data member yang ditambahkan Sistem dapat menyimpan Berhasil data topik yang ditambahkan Sistem dapat menyimpan Berhasil data komentar yang ditambahkan Sistem dapat menyimpan Berhasil data kategori yang ditambahkan Sistem dapat menyimpan Berhasil data sub kategori yang ditambahkan Sistem dapat menyimpan Berhasil data admin yang ditambahkan 7 Pengujian pencarian kata Sistem dapat mencari Berhasil kata yang di-input oleh member 8 Pengujian edit dan hapus Sistem dapat mengupdate Berhasil member data yang di-edit dan menghapus member 9 Pengujian edit dan hapus kategori Sistem dapat mengupdate data yang di-edit dan menghapus kategori Berhasil

23 71 10 Pengujian edit dan hapus sub Kategori Sistem dapat mengupdate data yang di-edit dan menghapus sub kategori Berhasil Tabel 4. 2 Pengujian Validasi No Kasus Uji Hasil Yang Diharapkan Hasil 1 Validasi jika username Sistem dapat Berhasil dan/atau password dihalaman login tidak sesuai atau tidak diisi menampilkan pesan dan peringatan bahwa username dan/atau password yang di-input salah atau tidak diisi. 2 Validasi data tidak Sistem akan Berhasil kosong dihalaman pendaftaran menampilkan pesan kalau ada data yang tidak diisi. 3 Validasi jika salah memasukkan format pada halaman register Sistem akan menampilkan pesan kalau format yang diisikan salah. Berhasil