perancangan dan pembuatan server blogger pens-its

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 :

24


Gambar 3.1 UML

25


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

26


Gambar 3.3 DFD LEVEL SATU

27


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


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

29


Gambar 3.5 Flowchart Registrasi

30


3.1.5.2 Diagram Alir Aktivasi User


31


3.1.5.3 Diagram Alir login User


32


3.1.5.4 Diagram Alir Forget Password


33


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


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


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


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


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


38


3.2.7 Tampilan Halaman Utama Modul


Halaman utama modul adalah halaman bagi administrator untuk

mengelola content website.

3.2.8 Tampilan Halaman Tambah/ Edit Modul


39


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


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


3.2.10 Tampilan Halaman Tambah/ Edit Modul


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


3.2.11 Tampilan Halaman Utama Media


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


3.2.12 Tampilan Halaman Tambah Media

Gambar 3.20 Tampilan Halaman Tambah/ Edit Media


43


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


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


3.2.14 Tampilan Halaman Pesan


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


3.2.15 Tampilan Halaman Buku Tamu


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


3.2.16 Tampilan Halaman Utama User/ Pengguna


3.2.17 Tampilan Halaman Tambah/ Edit User


47


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


Halaman profil untuk Administrator adalah halaman khusus bagi

admin untuk mengelola profil semua user. Adminstrator dapat

melakukan pencarian user berdasarkan username.

48


3.2.19 Tampilan Halaman Edit Profil Untuk User Dan Administrator


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


3.2.20 Tampilan Halaman Teman


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


3.2.21 Tampilan Halaman Utama Link


3.2.22 Tampilan halaman Tambah/ Edit Link


51


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


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


3.2.24 Tampilan Halaman Tambah/ Edit Banner


Halaman tambah / edit banner adalah halaman untuk melakukan

penambahan atau perubahan banner.

3.2.25 Tampilan Halaman Tampilan / Template


53


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


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


3.2.27 Tampilan Halaman Group


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


3.2.28 Tampilan Halaman Utama Web-Blog User


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


3.2.29 Tampilan Halaman Profil Web-Blog User


Halaman profil web-blog adalah halaman yang berisi tentang

informasi tentang data diri pengguna.

3.2.30 Tampilan Halaman Guestbook Web-Blog User


57


Halaman guestbook adalah halaman tempat pengunjung

memberikan komentar atau pesan terhadap web-blog pengguna.

3.2.31 Tampilan Halaman Detail Post


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


3.2.32 Tampilan Halaman Download Media/ Galeri



59


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


Halaman group adalah halaman daftar group dari pengguna.

Pengunjung dapat melihat web-blog dari anggota group yang ada.

60


perancangan dan pembuatan server blogger pens-its

Documents