perancangan dan pembuatan server blogger pens-its · aplikasi server blogger pens - its adalah...
TRANSCRIPT
23
Perancangan Dan Pembuatan Server Blogger PENS-ITS
BAB III
PERANCANGAN DAN PEMBUATAN
SISTEM
Pada Bab ini akan dijelaskan mengenai perancangan perangkat lunak
server blogger yang meliputi perancangan sistem, d a n perancangan
desain interface system.
3.1 PERANCANGAN SISTEM
3.1.1 Deskripsi Secara Umum
Aplikasi Server Blogger PENS - ITS adalah suatu aplikasi
web yang dibuat untuk digunakan di PENS-ITS. Aplikasi ini
menyediakan dan membuatkan web secara otomatis kepada
setiap user yang terdaftar. Karena digunakan di PENS – ITS,
maka hanya user yang mempunyai email PENS – ITS yang bisa
melakukan pendaftaran.
Secara konsep, aplikasi ini hampir sama seperti aplikasi server
blogger lainnya, seperti aplikasi Wordpress, Joomla, dan lain
sebagainya. Akan tetapi ada beberapa hal yang berbeda, yang
disesuaikan dengan kebutuhan yang ada di PENS – ITS.
Dalam pembuatan aplikasi ini menggunakan bahasa
pemrograman PHP, dan untuk database menggunakan database
MySQL. Berikut UML Diagram, DFD, ERD, dan Flowchart
dari system aplikasi server blogger :
3.1.2 UML Diagram
Diagram alir sistem merupakan diagram yang
menunjukkan bagaimana cara kerja sistem secara keseluruhan.
Berikut UML Diagram dari sistem server blogger :
25
Perancangan Dan Pembuatan Server Blogger PENS-ITS
3.1.3 Data Flow Diagram
Data flow diagram merupakan aliran dari sistem server
blogger yang dibuat. Dimana proses dimulai dari yang bersifat
global sampai ke aliran penyimpanan data ke database. Berikut
aliran data diagram dari sistem server blogger :
Gambar 3.2 DFD LEVEL NOL
27
Perancangan Dan Pembuatan Server Blogger PENS-ITS
3.1.4 Desain ER Diagram Sistem Server Blogger
ER Diagram merupakan diagram relasi antar tabel pada
database yang sesuai dengan rancangan dari sistem server
blogger. Berikut ER Diagram dari sistem server blogger :
Gambar 3.4 ERD
28
Perancangan Dan Pembuatan Server Blogger PENS-ITS
3.1.5 Diagram Alir System
Diagram alir sistem merupakan diagram yang menunjukkan
bagaimana cara kerja sistem. Diagram alir sistem ini akan
mencakup proses registrasi user, proses aktivasi user, proses
login, dan proses forget password.
3.1.5.1 Diagram Alir Sistem Registrasi User
30
Perancangan Dan Pembuatan Server Blogger PENS-ITS
3.1.5.2 Diagram Alir Aktivasi User
Gambar 3.6 Flowchart Registrasi
31
Perancangan Dan Pembuatan Server Blogger PENS-ITS
3.1.5.3 Diagram Alir login User
Gambar 3.7 Flowchart Registrasi
32
Perancangan Dan Pembuatan Server Blogger PENS-ITS
3.1.5.4 Diagram Alir Forget Password
Gambar 3.8 Flowchart Registrasi
33
Perancangan Dan Pembuatan Server Blogger PENS-ITS
3.2 PERANCANGAN DESAIN INTERFACE SISTEM
Berikut desain interface dari aplikasi server blogger :
3.2.1 Tampilan Halaman Utama
Gambar 3.9 Tampilan Halaman Utama
Halaman utama adalah halaman awal dari aplikasi “Sever blogger
PENS-ITS”. Pada halaman ini ditampilkan satu post terbaru dari
seluruh user, dengan title NEW POST. Untuk melihat keseluruhan
post, pengguna dapat menekan tombol navigasi dengan kata more,
yang berada di pojok kanan bawah dari post terbaru. Selain itu juga
ditampilkan 5 post terbaik dari seluruh user, yang berada di sidebar
sebelah kiri dengan nama title yaitu TOP POST. Serta ditampilkan
juga 4 blog terbaik dari seluruh user, yang berada di bawah post
terbaru. Kata terbaik disini dikategorikan yang sering dikunjungi.
34
Perancangan Dan Pembuatan Server Blogger PENS-ITS
3.2.2 Tampilan Halaman Registrasi
Gambar 3.10 Halaman Registrasi
Halaman registrasi adalah halaman yang digunakan untuk
melakukan registrasi/ pendaftaran bagi user ke sistem. Untuk
membuka halaman ini pengguna dapat memilih menu sign up yang
berada pada sidebar bagian atas, atau juga dapat dengan menekan
tombol join now pada bagian header.. Dalam aplikasi ini yang bisa
melakukan pendaftaran hanya user yang mempunyai email PENS-ITS,
jika tidak akan muncul peringatan. Dalam pengisian data, terdapat
perintah untuk memasukkan jawaban berdasarkan pilihan pertanyaan
yang tersedia. Jawaban itu nantinya akan digunakan untuk pengecekan
data saat melakukan pengisian data pada halaman forger password,
jadi field ini harus diisi, dan untuk jawaban harus diingat baik – baik
oleh pengguna. Untuk aktivasi account user, dilakukan secara
langsung melalui email user yang sesuai dengan alamat email yang
dimasukkan saat melakukan pendaftaran.
35
Perancangan Dan Pembuatan Server Blogger PENS-ITS
3.2.3 Tampilan Halaman Contact Us
Gambar 3.11 Halaman Contact Us
Halaman contactus adalah halaman yang disediakan bagi
pengguna untuk menulis pesan, kritik dan saran kepada administrator
web.
3.2.4 Tampilan Halaman Forget Password
Gambar 3.12 Halaman Forget Password
36
Perancangan Dan Pembuatan Server Blogger PENS-ITS
Halaman forget password adalah halaman yang disediakan bagi
pengguna untuk mengetahui password atau memperoleh password
baru disaat pengguna lupa akan passwordnya. Pengecekan disini
dilakukan berdasarkan jawaban dari pertanyaan yang dimasukkan
pada saat melakukan registrasi. Dan untuk pemberitahuan password
akan dikirimkan ke alamat email pengunjung.
3.2.5 Tampilan Halaman Utama Administrator
Gambar 3.13 Halaman Utama Admin User/ Super Admin
Gambar diatas adalah tampilan dari halaman utama administrator.
Pada halaman ini terdapat tiga buah kotak. Kotak pertama adalah
kotak inbox. Kotak inbox adalah kotak yang berisi tentang informasi
yang masuk, informasi ini berupa pesan masuk, tulisan blog, tulisan
sementara, teman baru, dan komentar baru. Kotak kedua adalah kotak
untuk mengirimkan pesan ke beberapa user lain yang telah menjadi
teman kita. Sedangkan kotak ketiga adalah kotak pengiriman pesan ke
salah satu user yang telah menjadi teman kita. Khusus untuk admin
1
2 3
37
Perancangan Dan Pembuatan Server Blogger PENS-ITS
dapat mengirimkan pesan ke semua user dengan cara memasukkan
kata all pada field tujuan. Pada sebelah kiri adalah sidebar menu yang
berfungsi untuk mengatur content website. User hanya bisa mengatur
content miliknya sendiri. Sedangkan untuk administrator dapat
mengatur semua content dari semua user. Untuk halaman utama user
terdapat beberapa perbedaan, yaitu tidak adanya menu modul dan
menu pengguna. Gambar 3.14 adalah tampilan dari halaman utama
user.
3.2.6 Tampilan Halaman Utama User
Gambar 3.14 Halaman Utama Admin User/ Super Admin
38
Perancangan Dan Pembuatan Server Blogger PENS-ITS
3.2.7 Tampilan Halaman Utama Modul
Gambar 3.15 Halaman Utama Admin User/ Super Admin
Halaman utama modul adalah halaman bagi administrator untuk
mengelola content website.
3.2.8 Tampilan Halaman Tambah/ Edit Modul
Gambar 3.16 Halaman Utama Admin User/ Super Admin
39
Perancangan Dan Pembuatan Server Blogger PENS-ITS
Halaman tambah atau edit modul adalah halaman bagi
administrator untuk menambah atau memperbarui content website.
Content disini diartikan sebagai modul untuk pemanggilan menu.
Menu yang berada pada sidebar sebelah kiri semua itu di atur dengan
halaman modul. Administrator dapat menambahkan, memperbarui,
dan menghapus menu melalui halaman modul ini.
3.2.9 Tampilan Halaman Utama Tulisan
Gambar 3.17 Halaman Utama Admin User/ Super Admin
Halaman utama tulisan adalah halaman yang mengelola tulisan
atau post yang nantinya dapat di tampilkan di web-blog. Pada halaman
ini dapat dilakukan pencarian tulisan berdasarkan judul atau isi tulisan,
dan juga dapat melihat tulisan berdasarkan kategori dan tanggal.
Istilah draft pada halaman ini berarti bahwa tulisan tersebut berstatus
tidak ditampilkan di web-blog. Dan istilah terbit berarti tulisan
tersebut berstatus ditampilkan di web-blog. Untuk menambahkan
tulisan pengguna dapat menekan tombol tambah tulisan, dan untuk
mengedit tulisan, pengguna dapat menekan tombol yang bergambar
pencil. Sedangkan untuk menghapus tulisan, pengguna dapat menekan
tombol yang bersimbol tanda silang.
40
Perancangan Dan Pembuatan Server Blogger PENS-ITS
3.2.10 Tampilan Halaman Tambah/ Edit Modul
Gambar 3.18 Halaman Utama Admin User/ Super Admin
Halaman tambah atau edit tulisan adalah halaman untuk
menambahkan atau memperbarui tulisan. Pada penambahan atau
perubahan tulisan terdapat beberapa option, yaitu option status dan
option tampil. Option status adalah option yang memberikan pilihan
apakah tulisan akan di tampilkan di web-blog atau tidak. Jika tidak di
tampilkan maka tulisan tersebut berstatus draft. Tapi jika tulisan
tersebut ditampilkan maka status tulisan tersebut adalah terbit.
Sedangkan option tampil adalah sebuah option yang memberikan
pilihan apakah tulisan bersifat pribadi atau umum. Jika menginginkan
bersifat pribadi maka akan disuruh untuk memasukkan password pada
field yang disediakan.
Tulisan dengan status pribadi hanya akan tampil dengan judulnya
saja di web-blog, untuk membaca tulisan tersebut pengunjung harus
memaasukkan password pada field yang disediakan. Dalam
penambahan atau perubahan tulisan juga dapat langsung memasukkan
nama kategori baru yang tidak ada dalam daftar kategori.
41
Perancangan Dan Pembuatan Server Blogger PENS-ITS
3.2.11 Tampilan Halaman Utama Media
Gambar 3.19 Halaman Utama Admin User/ Super Admin
Halaman utama media adalah halaman yang mengelola tentang
upload file ke dalam daftar media atau galeri pengguna. File bisa
berupa semua tipe file. Media atau galeri file disini nantinya bisa di
tampilkan di web-blog untuk kemudian dapat di download oleh
pengunjung. Status media file disini sama halnya dengan status pada
tulisan, yaitu bisa berstatus draft atau berstatus terbit. Untuk
menambahkan media dapat dilakukan dengan menekan tombol
tambah media, untuk perubahan dapat dilakukan dengan menekan
tombol yang bergambar pencil. Sedangkan untuk penghapusan dapat
dilakukan dengan menekan tombol yang bersimbol tanda silang. Pada
halaman ini bisa dilakukan pencarian media berdasarkan kategori.
42
Perancangan Dan Pembuatan Server Blogger PENS-ITS
3.2.12 Tampilan Halaman Tambah Media
Gambar 3.20 Tampilan Halaman Tambah/ Edit Media
Gambar 3.21 Halaman Utama Admin User/ Super Admin
43
Perancangan Dan Pembuatan Server Blogger PENS-ITS
Halaman tambah media adalah halaman untuk menambahkan
media atau galeri file. Pada penambahan media di sediakan lima field
untuk upload file. Jadi pengguna dapat langsung melakukan upload
file lima sekaligus. Dalam melakukan penambahan media dapat
langsung memasukkan nama kategori baru yang tidak ada dalam
daftar kategori.
Sedangkan halaman edit media adalah halaman untuk
memperbarui media file.
3.2.13 Tampilan Halaman Komentar
Gambar 3.22 Halaman Utama Admin User/ Super Admin
Halaman Komentar adalah halaman yang mengelola semua
komentar tulisan yang ada pada web-blog pengguna.Pada halaman ini
dapat dilakukan pencarian komentar berdasarkan isi dari komentar,
dan pencarian komentar berdasarkan tanggal. Untuk pengelolaan
komentar, seperti halnya penghapusan caranya sama seperti
penghapusan pada tulisan ataupun seperti penghapusan pada media.
Pengguna dapat langsung membalas komentar dengan menekan kata
balas.
44
Perancangan Dan Pembuatan Server Blogger PENS-ITS
3.2.14 Tampilan Halaman Pesan
Gambar 3.23 Halaman Utama Admin User/ Super Admin
Halaman Pesan adalah halaman yang mengelola pesan pengguna.
Pesan bisa berupa pesan masuk, pesan keluar, dan arsip pesan. Pesan
masuk adalah pesan yang berasal dari user lain yang sudah menjadi
teman. Pengguna dapat langsung membalas pesan yang masuk dengan
menekan kata balas, dan pengguna juga dapat melakukan
penghapusan pesan. Setiap aktifitas dalam mengirim pesan ke user
lain, akan di tampung dalam daftar pesan keluar.
Pada halaman ini dapat dilakukan pencarian pesan berdasarkan isi
atau subjek pesan, dan pengelompokan pesan berdasarkan tanggal.
Untuk pengelolaan pesan, seperti halnya penghapusan caranya sama
seperti penghapusan pada tulisan ataupun seperti penghapusan pada
media.
45
Perancangan Dan Pembuatan Server Blogger PENS-ITS
3.2.15 Tampilan Halaman Buku Tamu
Gambar 3.24 Halaman Utama Admin User/ Super Admin
Halaman Buku tamu adalah halaman yang digunakan untuk
mengelola daftar pesan buku tamu dari pengunjung web-blog. Pada
halaman ini dapat dilakukan pencarian pesan berdasarkan isi atau
subjek pesan, dan pengelompokan pesan berdasarkan tanggal. Untuk
pengelolaan pesan bukutamu, seperti halnya penghapusan caranya
sama seperti penghapusan pada tulisan ataupun seperti penghapusan
pada media. Pengguna dapat langsung membalas pesan bukutamu
dengan menekan kata balas.
46
Perancangan Dan Pembuatan Server Blogger PENS-ITS
3.2.16 Tampilan Halaman Utama User/ Pengguna
Gambar 3.25 Halaman Utama Admin User/ Super Admin
3.2.17 Tampilan Halaman Tambah/ Edit User
Gambar 3.26 Halaman Utama Admin User/ Super Admin
47
Perancangan Dan Pembuatan Server Blogger PENS-ITS
Halaman pengguna adalah halaman khusus bagi admin untuk
mengelola user atau pengguna. Melalui halaman ini admin bisa
melakukan penambahan user, edit user, dan penghapusan user. Pada
halaman ini admin dapat melakukan pencarian user berdasarkan
username, dan admin juga bisa mengelompokkan user berdasarkan
status terdaftar atau belum, dan status web-blog aktif atau terblokir.
Dalam penambahan dan perubahan data user, admin tetap harus
mengikuti aturan yang berlaku di dalam system, antara lain alamat
email user harus alamat email PENS – ITS, dan admin tidak dapat
melakukan duplikat user.
3.2.18 Tampilan Halaman Utama Profil Untuk Administrator
Gambar 3.27 Halaman Utama Admin User/ Super Admin
Halaman profil untuk Administrator adalah halaman khusus bagi
admin untuk mengelola profil semua user. Adminstrator dapat
melakukan pencarian user berdasarkan username.
48
Perancangan Dan Pembuatan Server Blogger PENS-ITS
3.2.19 Tampilan Halaman Edit Profil Untuk User Dan Administrator
Gambar 3.28 Halaman Utama Admin User/ Super Admin
Halaman edit profil adalah halaman yang digunakan untuk
melakukan perubahan terhadap data profil user. Pada perubahan data
profil, data username dan email disetting tidak dapat diubah karena
sebagai penanda atau validasi.
49
Perancangan Dan Pembuatan Server Blogger PENS-ITS
3.2.20 Tampilan Halaman Teman
Gambar 3.29 Halaman Utama Admin User/ Super Admin
Halaman teman adalah halaman yang digunakan untuk mengelola
daftar teman. Daftar teman disini bisa berupa daftar teman baru,
daftar teman. Pada halaman ini disediakan form untuk melakukan
penambahan teman dengan memasukkan username atau email user
yang akan dijadikan teman pada field username / email. Juga
disediakan form untuk pengiriman pesan kepada salah satu teman.
Data yang dimasukkan pada field username / email harus benar, jika
tidak akan muncul peringatan. Pengguna dapat melihat web-blog
teman yang sudah terdaftar dalam daftar teman dengan cara meng-klik
pada foto atau username.
Pengguna dapat melihat daftar teman dari teman yang sudah
terdaftarkan, tapi tidak dapat melihat web-blog yang bersangkutan.
Pengguna dapat menerima atau menolak setiap ada user yang ingin
menjadi teman.
50
Perancangan Dan Pembuatan Server Blogger PENS-ITS
3.2.21 Tampilan Halaman Utama Link
Gambar 3.30 Halaman Utama Admin User/ Super Admin
3.2.22 Tampilan halaman Tambah/ Edit Link
Gambar 3.31 Halaman Utama Admin User/ Super Admin
51
Perancangan Dan Pembuatan Server Blogger PENS-ITS
Halaman link adalah halaman yang digunakan untuk mengelola
link. Link disini yaitu daftar url atau website lain. Seperti misalnya
http://www.google.co.id, http://www.yahoo.com, dan lain sebagainya.
Link disini nantinya dapat ditampilkan atau tidak pada web-blog,
sesuai keperluan.
3.2.23 Tampilan Halaman Utama Banner
Gambar 3.32 Halaman Utama Admin User/ Super Admin
Halaman utama banner adalah halaman yang digunakan untuk
mengelola banner atau iklan pengguna. Banner atau iklan nantinya
dapat ditampilkan atau tidak pada web-blog sesuai keperluan.
52
Perancangan Dan Pembuatan Server Blogger PENS-ITS
3.2.24 Tampilan Halaman Tambah/ Edit Banner
Gambar 3.33 Halaman Utama Admin User/ Super Admin
Halaman tambah / edit banner adalah halaman untuk melakukan
penambahan atau perubahan banner.
3.2.25 Tampilan Halaman Tampilan / Template
Gambar 3.34 Halaman Utama Admin User/ Super Admin
53
Perancangan Dan Pembuatan Server Blogger PENS-ITS
Halaman tampilan atau template adalah halaman yang mengatur
tampilan / template dari web-blog. Pengaturan disini meliputi
pemilihan template, pengaturan menu, dan perubahan slogan.
Pengguna dapat merubah penampilan atau design web-blog sesuai
dengan keinginan dan yang sesuai dengan fitur yang disediakan.
3.2.26 Tampilan Halaman Forum
Gambar 3.35 Halaman Utama Admin User/ Super Admin
Halaman forum adalah halaman yang digunakan untuk pengiriman
pesan atau post kepada semua user yang masuk dalam daftar teman.
Pengguna dapat megirimkan komentar terhadap post yang ada.
54
Perancangan Dan Pembuatan Server Blogger PENS-ITS
3.2.27 Tampilan Halaman Group
Gambar 3.36 Halaman Utama Admin User/ Super Admin
Halaman Group adalah halaman yang digunakan untuk bergabung
kedalam group yang tersedia, dan untuk melihat daftar anggota group.
Pengguna juga dapat keluar dari anggota group. Pengguna dapat
melihat web-blog dari anggota group jika sudah tergabung dalam
group tersebut. Group ini nantinya dapat ditampilkan pada web-blog
yang berfungsi sebagai relasi link antar blog.
55
Perancangan Dan Pembuatan Server Blogger PENS-ITS
3.2.28 Tampilan Halaman Utama Web-Blog User
Gambar 3.37 Halaman Utama Admin User/ Super Admin
Halaman utama web-blog adalah halaman awal dari web-blog
pengguna. Halaman ini akan bisa diakses jika pengguna sudah
melakukan aktivasi. Menu dan template dari halaman web-blog dapat
diatur melalui halaman utama tampilan atau template.
56
Perancangan Dan Pembuatan Server Blogger PENS-ITS
3.2.29 Tampilan Halaman Profil Web-Blog User
Gambar 3.38 Halaman Utama Admin User/ Super Admin
Halaman profil web-blog adalah halaman yang berisi tentang
informasi tentang data diri pengguna.
3.2.30 Tampilan Halaman Guestbook Web-Blog User
Gambar 3.39 Halaman Utama Admin User/ Super Admin
57
Perancangan Dan Pembuatan Server Blogger PENS-ITS
Halaman guestbook adalah halaman tempat pengunjung
memberikan komentar atau pesan terhadap web-blog pengguna.
3.2.31 Tampilan Halaman Detail Post
Gambar 3.40 Halaman Utama Admin User/ Super Admin
Halaman detail post adalah halaman yang berisi detail dari post
yang dibaca atau yang diklik. Di dalam halaman ini pengunjung dapat
memberikan komentar terhadap post yang bersangkutan pada field
yang disediakan.
58
Perancangan Dan Pembuatan Server Blogger PENS-ITS
3.2.32 Tampilan Halaman Download Media/ Galeri
Gambar 3.41 Halaman Utama Admin User/ Super Admin
Gambar 3.42 Halaman Utama Admin User/ Super Admin
59
Perancangan Dan Pembuatan Server Blogger PENS-ITS
Halaman media atau galeri web-blog adalah halaman yang berisi
tentang media atau galeri file yang diterbitkan tau ditampilkan.
Pengunjung dapat mendownload file – file yang tercantum.
3.2.33 Tampilan Halaman Group
Gambar 3.43 Halaman Utama Admin User/ Super Admin
Halaman group adalah halaman daftar group dari pengguna.
Pengunjung dapat melihat web-blog dari anggota group yang ada.