BAB I

PENDAHULUAN
1.1.

Latar Belakang

Penyebaran Informasi pada saat ini sangat cepat, mudah dan

praktis. Segala informasi didapatkan dengan mudah dalam waktu yang
singkat. Seperti contoh penyabaran informasi dalam dunia sepakbola,
baik itu informasi mengenai pertandingan pada masing-masing liga,
transfer pemain, kabar seputar profil pemain sepakbola, berita hangat
seputar club sepakbola, dan lain-lain. Namun informasi yang
disebarkan tersebut hanyalah sebuah berita saja yang disampaikan
kepada user, tanpa adanya sebuah forum diskusi sebagai tempat
untuk menyampaikan pendapat masing-masing.
Untuk itu kelompok kami ingin membuat sebuah forum seperti
social networking, dimana informasi mengenai persepakbolaan
digabung dengan forum diskusi sehingga nantinya dapat menampung
pendapat-pendapat
dari
user
yang
gemar
dengan
dunia
persepakbolaan nasional maupun internasional.
Latar belakang
lainnya yakni karena kelompok kami menyukai dunia persepakbolaan
dan memiliki hasrat untuk membuat sebuah komunitas pencinta
sepakbola.

1.2.
a.
b.
c.
d.
e.

Tujuan
Deskripsi singkat tentang forum soccer addict
Proses bisnis dari forum soccer addict
Sistem database dari forum soccer addict
CSS untuk desain sketsa halaman forum
Fitur-fitur user dan admin beserta screenshot.

Laporan Pemrograman Web-F| Forum Soccer Addict

BAB II
PEMBAHASAN
2.1.

Deskripsi Singkat tentang Forum Soccer Addict

Forum ini adalah forum yang digunakan sebagai tempat untuk
penyebaran informasi mengenai dunia persepakbolaan nasional
maupun internasional.
Informasi di sini dapat berupa informasi
mengenai pertandingan pada masing-masing liga, transfer pemain,
kabar seputar profil pemain sepakbola maupun pelatihnya, berita
hangat seputar club sepakbola, dan lain-lain.
Informasi dapat disampaikan oleh admin maupun dari member.
Informasi tersebut selanjutnya akan ditampilkan pada halaman utama
website, sehingga semua member dapat mengetahuinya. Jika member
ingin memberikan komentar atau tanggapan seputar informasi yang
ada, yakni dengan cara meng-klik judul informasi tersebut baru
kemudian mengisi komentar atau tanggapan pada kolom yang
disediakan.
Forum umumnya hanya monoton, tidak menampilkan foto dari
admin atau user yang memberikan informasi berita, tampilannya
terkesan rumit, sehingga kami membuat forum hampir seperti social
networking(facebook) dimana tampilannya sederhana dan menarik
untuk dilihat. Sederhananya dilihat dari halaman utama yang hanya
menampilkan posting informasi yang ada, jika dibandingkan dengan
forum pada umumnya di halaman utama terdapat macam-macam hal
yang tidak penting ditampilkan seperti iklan, tampilan menu yang
tidak penting, dll. Menarik untuk dilihat karena di dalam posting berita
tersebut ditampilkan foto profil dari user, kemudian juga tampilannya
yang stylish.
Member juga dapat melihat profil member lain jika foto atau
gambar dari member tersebut di-klik. Kemudian juga dapat
mengirimkan pesan kepada member tersebut jika di-klik tulisan kirim
pesan. Member dapat mengirimkan pesan kepada member lain
maupun admin yakni dengan cara memasukkan nama username dari
admin ataupun member tersebut, kemudian mengisi kolom pesan dan
mengirimkannya. Untuk dapat melihat pesan masuk dan keluar hanya
dengan meng-klik Message pada menu bar.
Admin pada forum ini bisa disebut sebagai super user, karena
mempunyai hak yang lebih tinggi dari member biasa. Hak-hak yang
dimiliki oleh admin antara lain meng-edit dan menghapus posting

berita yang berbau sara atau menimbulkan pro dan kontra, melihat
daftar member yang ada dan mempunyai wewenang untuk
menghapus member dari daftar keanggotaan, dan melihat daftar
pesan dari seluruh member serta menghapus pesan tersebut. Admin
juga mempunyai hak yang sama seperti member lain yaitu
memposting berita, mengedit profil, mengirim pesan kepada member
dan melihat profil dari member.
2.2.

Proses Bisnis dari Forum Soccer Addict

2.2.1. Secara umum yang dilakukan sistem terhadap user

Sistem ini menyimpan data user yang melakukan pendaftaran pada

database, sehingga menjadi member dalam forum.

Sistem memberikan informasi kepada member-member lain melalui

posting yang disimpan kemudian ditampilkan, informasi tersebut dapat
berupa pemberitahuan/berita dunia seputar sepak bola.

Sistem memberikan ruang bagi member untuk berdiskusi/

menanggapi/ memberikan komentar dari posting member lain.

Sistem memberikan akses untuk melihat profil member lain.

Sistem memberikan akses bagi member untuk dapat mengirim dan

menerima pesan.

2.2.2. Secara umum yang dilakukan sistem terhadap admin

Sistem memberikan akses kepada admin untuk mengecek seluruh

posting member yang tersimpan pada database.

Sistem memberikan akses kepada admin untuk mengecek data

member.

Sistem memberikan akses bagi admin untuk dapat mengirim dan

menerima pesan.

Sistem memberikan akses bagi admin untuk dapat posting berita dan
memberikan komentar.

2.2.3. Diagram Proses Bisnis User

Diagram 1 User Login

Diagram 2 Posting Informasi

Diagram 3 Komentar Posting

Diagram 4 Kirim pesan

Diagram 5 Baca pesan

Diagram 6 Lihat profil member lain

2.2.4. Diagram Proses Bisnis Admin

Diagram 7 Cek posting member

Diagram 8 Cek daftar member

2.3.

Sistem Database dari Forum Soccer Addict

Dalam projek akhir ini database yang digunakan terdir dari 4 buah
table. Table pertama yaitu table data_user. Pada table data_user terdiri
dari field iduser yang menjadi primary key, namalengkap, email,
username, passwordasli, password, sex, dan avatar.
Kedua adalah table posting. Table posting terdiri dari field id_post,
judul, content, waktu, iduser, dan jml_comment. id_post menjadi primary
key dalam table posting. Sedangkan foreign key yang ada pada table
posting yaitu iduser, yang merupakan hasil reference dari table posting
terhadap primary key table data_user.
Sedangkan table ketiga yaitu table comment yang terdiri dari field
id_comment, id_post, content, dan id_commenter. Yang menjadi primary
key pada table ini yaitu id_comment. Sedangkan foreign key yang ada
pada table comment yaitu id_post dan id_commenter. id_post di dapatkan
dari reference table comment pada primary key table posting yaitu
id_post. Sedangkan id_commenter di dapatkan dari reference table
comment pada primary key table data_user yaitu iduser.

Table keempat yaitu table pesan. Table pesan terdiri dari id_pesan,
content, id_pengirim, id_penerima, dan waktu. Primary key pada table ini
yaitu id_pesan. Sedangkan foreign key nya yaitu id_pengirim dan
id_penerima. id_pengirim dan id_penerima sama-sama melakukan
reference terhadap primary key table data_user, yaitu iduser. Berikut ER
diagram dari sistem:

Berikut ER Mapping dari database sistem:

Diagram 9 ER-Mapping

2.4.

Desain Sketsa Halaman Forum

2.4.1.Desain sketsa login

Tampilan login seperti sketsa di atas menggunakan 960_24_col.css dan

johan.css. Pada css 960_24_col.css digunakan untuk pemanggilan grid
yang diinginkan pada tampilannya, sedangkan johan.css digunakan
dalam pengaturan grid untuk menjadi sebuah tampilan seperti pada
sketsa diatas. Untuk membuat suatu image slider menggunakan
javascript, yang mana pada javascript di identifikasikan dengan
pemanggilan fungsi pada source code.

Fungsi pemanggilan javascript

<script src="js/slider.js"></script>
<script type="text/javascript">
$(function() {
$('.fadein img:gt(0)').hide();
setInterval(function () {
$('.fadein :first-child').fadeOut()
.next('img')
.fadeIn()
.end()
.appendTo('.fadein');

}, 4000); // 4 seconds
});
</script>

2.4.2.Desain sketsa untuk halaman user

Untuk membuat tampilan sketsa user area seperti diatas menggunakan

960_24_col.css dan johan.css. Pada css 960_24_col.css digunakan untuk
pemanggilan grid yang diinginkan pada tampilannya, sedangkan johan.css
digunakan dalam pengaturan grid untuk menjadi sebuah tampilan seperti
pada sketsa diatas, sama dalam proses pembuatan tampilan admin area.
Untuk membuat suatu image slider menggunakan javascript, yang mana
pada javascript di identifikasikan dengan pemanggilan fungsi pada source
code.

Fungsi pemanggilan javascript

<script src="js/slider.js"></script>
<script type="text/javascript">
$(function() {
$('.fadein img:gt(0)').hide();
setInterval(function () {
$('.fadein :first-child').fadeOut()
.next('img')
.fadeIn()
.end()
.appendTo('.fadein');
}, 4000); // 4 seconds
});
</script>

2.4.3.Desain sketsa untuk halaman admin

Untuk membuat tampilan sketsa admin area seperti di atas

menggunakan 960_24_col.css dan johan.css. Pada css 960_24_col.css
digunakan untuk pemanggilan grid yang diinginkan pada tampilannya,

sedangkan johan.css digunakan dalam pengaturan grid untuk menjadi

sebuah tampilan seperti pada sketsa diatas. Untuk membuat suatu
image slider menggunakan javascript, yang mana pada javascript di
identifikasikan dengan pemanggilan fungsi pada source code.

Fungsi pemanggilan javascript

<script src="js/slider.js"></script>
<script type="text/javascript">
$(function() {
$('.fadein img:gt(0)').hide();
setInterval(function () {
$('.fadein :first-child').fadeOut()
.next('img')
.fadeIn()
.end()
.appendTo('.fadein');
}, 4000); // 4 seconds
});
</script>

2.5.

Fitur User dan Admin Beserta Screenshot

2.5.1. Fitur User

Login
Login dengan memasukkan username dan password.

Screenshot 1 Form Login

Pendaftaran menjadi member

User memberikan detail pribadi seperti nama lengkap, email,
username, password, jenis kelamin, dan gambar pada form yang
disediakan. Setelah itu mengirimkan untuk disimpan ke dalam
database. Jika username yang terfdapat pada database sama, maka
user tersebut mau tidak mau harus mengganti dengan username yang
lain.

Screenshot 2 Form Pendaftaran

Home dan Posting Berita

Home di sini adalah untuk menampilkan seluruh postingan dari
member yang tersimpan dalam database. Untuk dapat posting berita
dilakukan dengan cara mengisi Judul posting, kemudian Isi posting
tersebut, kemudian klik Post. Posting tersebut akan ditampilkan pada
halaman utama(home).

Screenshot 3 Tampilan Home Member serta tempat Posting

Profil
Fitur ini digunakan untuk melihat detail profil pribadi dari user sendiri.
Jika user ingin mengedit data profil tersebut, klik edit profil.
Selanjutnya jika user ingin mengganti foto profil, klik ganti foto profil
lalu pilih file gambar mana yang dipilih.

Screenshot 4 Fitur Profil

Screenshot 5 Tampilan Untuk Pengeditan Data Member

Screenshot 6 Tampilan untuk mengganti foto Profil

Profil Member Lain

Fitur ini digunakan untuk melihat detail profil dari member lain. Untuk
dapat melihat detail profil tersebut, user harus meng-klik foto dari
member lain tersebut. Dari foto tersebutlah id_user didapatkan dan
digunakan sistem untuk memilih detail profil mana yang ditampilkan.
User juga dapat mengirim pesan langsung melalui fitur ini sehingga
lebih mudah dalam mengisi nama username yang menjadi alamat
tujuan pesan, caranya dengan klik kirim pesan setelah itu sistem
terhubung dengan fitur pesan. Nilai yang dikirimkan ketika meng-klik
Kirim Pesan adalah username dari profil member yang dilihat,
sehingga username akan terisi otomatis pada form tujuan pesan.

Screenshot 7 Tampilan untuk melihat detail profil dari member lain, jika
Kirim Pesan di-klik maka terhubung ke message dan mengirim username
dari member tersebut.

Screenshot 8 Tampilan jika "Kirim Pesan" pada detail profil member lain di-klik

Posting
Fitur ini digunakan untuk melihat daftar posting yang telah
dilakukan. Selain itu juga sebagai cara untuk mengedit posting yang
telah ditampilkan atau juga untuk menghapus posting tertentu.

Screenshot 9 Daftar Postingan pribadi yang telah dibuat jika menubar

Posting di-klik

Comment postingan pribadi maupun member lain

Fitur ini digunakan untuk melihat sekaligus untuk tempat
memberikan komentar bagi user. Untuk dapat melihat/ memberikan
komentar pada posting, user harus terlebih dahulu meng-klik judul
postingan yang bercetak tebal dan bergaris bawah pada postingan
tersebut. Dari judul posting inilah id_postingan didapatkan dan
digunakan sistem untuk memilih posting mana yang ditampilkan.
Fitur ini juga akan terhubung untuk melihat profil user lain, yakni
dengan cara meng-klik foto yang ada.

Screenshot 10 Tampilan untuk memberikan dan melihat seluruh komentar

Message
Fitur ini digunakan untuk mengirim maupun melihat pesan
kepada/dari member lain. Untuk dapat mengirim pesan dilakukan
dengan cara meng-klik Tulis Pesan, lalu ketikkan alamat tujuan pesan
(dalam hal ini username),kemudian baru ketik isi pesan yang ingin
disampaikan, setelah selesai maka akan masuk ke dalam kotak keluar
yang berisi pesan yang berhasil dikirimkan. Untuk dapat melihat pesan
yang masuk, klik Kotak masuk ataupun klik Message pada menu
bar.Ada dua pilihan yang ada pada kotak masuk, yaitu balas atapun
hapus. Balas yaitu mengirimkan pesan kembali kepada member lain
tersebut sedangkan hapus untuk menghapus pesan tersebut.

Screenshot 11 Fitur Message sekaligus sebagai tempat pesan masuk

Screenshot 12 Pengiriman pesan

Screenshot 13 Daftar Pesan yang telah berhasil dikirim

2.5.2. Fitur Admin

2.5.3.
Fitur admin hampir sama dengan member, yaitu untuk login,
melihat maupun mengganti detail profil, melihat profil member lain,
dan menghapus meng-edit posting pribadi. Hal yang membedakan
dengan member adalah bahwa admin memiliki akses yang lebih(super
user) untuk mengatur postingan dari member, pesan dari user, dan
data user yang ada.

Login
2.5.4.
Metodenya sama dengan member yaitu memasukkan
username dan password. Setelah itu sistem akan mencocokan apakah
user yang login adalah admin atau member biasa. Jika iduser dari
username sama dengan 1 maka akan masuk ke dalam home
adminarea.

Profil
2.5.5.
Fitur ini sama dengan fitur profil member. Tujuan dibuat profil
admin ini adalah agar admin dapat mengganti password secara
berkala.

Profil member lain

2.5.6.
Sama dengan fitur pada member yaitu untuk melihat profil
dari member lain jika meng-klik gambar dari member tersebut. Selain
itu juga sebagai sarana untuk pengiriman pesan.

Posting
2.5.7.
Sama dengan fitur posting pada member, yakni untuk
melihat daftar posting yang telah dibuat.

Comment postingan pribadi maupun member lain

2.5.8.
Sama dengan fitur comment pada member, yakni untuk
memberikan tanggapan atau komentar terhadap postingan yang ada.

Message
2.5.9.
Sama dengan fitur message pada member yakni untuk
mengirim maupun menerima pesan kepada member lain.

Posting Berita dan Mengelola Postingan Seluruh Member

2.5.10. Posting berita untuk admin metodenya sama pada fitur user.
Tetapi disini fitur posting digabung dengan fitur pengelolaan postingan
dari seluruh member. Latar belakang nya supaya lebih efisien

sehingga admin tidak repot untuk mencari pilihan di dalam menu bar
juga agar menu bar tidak terlalu banyak.
2.5.11.

2.5.12.Screenshot 14 Tampilan Home dan tempat posting berita bagi Admin

Daftar User
2.5.13. Fitur ini digunakan untuk melihat daftar user yang tergabung
ke dalam forum, serta mengedit, menghapus, dan menambah user
baru.

2.5.14.
2.5.15.Screenshot 15 Fitur Daftar User

Pesan User
2.5.16. Fitur ini digunakan untuk melihat semua pesan masuk
maupun terkirim oleh semua user, kemudian mengedit, dan
menghapus pesan user yang diinginkan.

2.5.17.

2.5.18.

2.5.19.Screenshot 16 Fitur Pesan User

2.5.20.
2.5.21.

BAB III
PENUTUP

2.5.22.
2.5.23.

KESIMPULAN

2.5.24.
Program yang kelompok kami buat adalah sebuah
forum komunitas sejenis social network bagi pencinta sepak bola, yang
menyajikan informasi seputar dunia persepakbolaan juga sebagai wadah
untuk berdiskusi. Layaknya social network forum ini juga menyediakan
fitur pesan bagi member juga untuk melihat profil dari member lain.
2.5.25.

Alamat Webiste:http://socceraddict.pusku.com

2.5.26.
2.5.27.

SARAN

2.5.28.
Kelompok kami menyadari bahwa program aplikasi
yang kami buat sangat sederhana, masih banyak kekurangan dan
kesalahan yang kami buat. Untuk itu kami memohon maaf yang sebesarbesarnya atas kekurangan kami dan juga meminta saran untuk
pengembangan selanjutnya. Terima kasih.
2.5.29.
2.5.30.