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 : 23
Gambar 3.1 UML 24
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 25
Gambar 3.3 DFD LEVEL SATU 26
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 27
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 28
29 Gambar 3.5 Flowchart Registrasi
3.1.5.2 Diagram Alir Aktivasi User Gambar 3.6 Flowchart Registrasi 30
3.1.5.3 Diagram Alir login User 31 Gambar 3.7 Flowchart Registrasi
3.1.5.4 Diagram Alir Forget Password Gambar 3.8 Flowchart Registrasi 32
3.2 PERANCANGAN DESAIN INTERFACE SISTEM Berikut desain interface dari aplikasi server blogger : 3.2.1 Tampilan Halaman Utama 33 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.
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. 34
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 35 Gambar 3.12 Halaman Forget Password
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 1 2 3 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 36
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 37
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 38
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. 39
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. 40
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. 41
3.2.12 Tampilan Halaman Tambah Media Gambar 3.20 Tampilan Halaman Tambah/ Edit Media Gambar 3.21 Halaman Utama Admin User/ Super Admin 42
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. 43
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. 44
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. 45
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 46
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. 47
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. 48
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. 49
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 50
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. 51
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 52
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. 53
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. 54
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. 55
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 56
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. 57
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 58
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. 59
60