BAB III ANALISIS DAN PERANCANGAN 3.1 Rekayasa Sistem Microblogging merupakan sebuah situs yang menampilkan beberapa komentar dari user yang selalu diperbaharui ( update ) secara kontinyu yang berisi beberapa komentar dari user lain. Microblogging juga merupakan media pertukaran informasi yang berguna, sarana aktualisasi pemikiran, sebagai sarana bisnis, menyuarakan protes dan apa saja yang biasa dituliskan pada media website ini. Berikut ini merupakan gambaran sistem dari suatu situs yang menyediakan aplikasi microblogging yang dapat dilihat dari Gambar 3.1 Calon user Microblogging Data base Gambar 3.1 microbologging 36
37 Proses untuk dapat menggunakan atau bergabung dengan situs microblogging ini dapat diurutkan sebagai berikut : 1. Calon pengguna ( user ) mendaftar pada sebuah situs microblogging dengan mengisi form registrasi 2. User yang telah terdaftar dapat memperbahrui pesan. 3. User yang telah terdaftar dapat memberikan komentar kepada user lain yang telah bergabung sebelumnya. 4. User dapat menikmati fasilitas yang terdapat dalam situs microblogging tersebut 3.2 Analisis Pada sebagian sistem microblogging yang telah berjalan terdapat permasalahan yang penulis temukan, seperti seseorang yang terkadang sulit untuk dapat update status mereka untuk memerikan komentar yang bisa dilihat oleh user lain. Dan meminta user lain untuk dapat membalas komentar mereka. Dari permasalahan diatas penulis mencoba membuat aplikasi microblogging yang dapat memecahkan solusi dari permasalahan tersebut. Berikut beberapa kegunaan dan solusi dari aplikasi microblogging yang diantaranya : 1. Pengunjung yang telah terdaftar sebagai user bisa memberikan komentar yang terdapat didalam situs microblogging dengan sangat
38 mudah ketika user yang telah terdaftar dapat langsung membuat update status mereka. 2. User yang telah terdaftar bisa menganti data profilnya sesuai dengan keinginanya. 3.3 Perancangan Aplikasi Berdasarkan hasil analisis, penulis membuat sebuah aplikasi microblogging menggunakan bahasa pemograman PHP dan MySQL sebagai basis data dalam membuat aplikasi tersebut. Agar aplikasi ini mudah dipahami penulis membuat pemodelan Diagram Use Case untuk menunjukan fungsionalitas suatu sistem, Pemodelan Diagram Sequence menggambarkan interaksi antar objek didalam dan disekitar sistem, Pemodelan Diagram Aktifitas untuk mengurutkan aktifitas dalam suatu proses, Entity Relationship Diagram (ERD) untuk mengetahui gambaran terhadap rancangan basis data yang dibuat dan Flow Diagram (DFD) untuk mengetahui arus data yang disertai dengan kamus data. 3.3.1 Pemodelan Diagram Use Case Use Case dapat menjelaskan manfaat sistem jika dilihat menurut pandangan orang yang berada di luar sistem (actor), diagram use case juga menunjukan fungsionalitas suatu sistem atau kelas dan bagaimana sistem berinteraksi dengan dunia luar. Dapat dilihat Gambar 3.2 pemodelan use case
39 Melihat komentar User Menulis komentar Menghapus komentar Mengubah profile Melihat video login <include> Bermain game Gambar 3.2 Pemodelan use case Penjelasan dari masing-masing use case dari gambar 3.2 dapat dilihat pada sekenario terikut ini : Melihat Komentar Deskripsi : Use case ini memungkinkan setiap user yang sudah terdaftar dapat melihat komentar orang lain Aktor : User Skenario : 1. Setiap user terlebih dulu harus login ke dalam menu registrasi
40 2. Sistem akan menampilkan halaman update status yang berisi komentarkomentar dari user lain 3. Sistem juga akan menampilkan nama pengirim, waktu pengiriman serta isi komentar Post kondisi : Sistem menampilkan komentar Penjelasan : Pada halaman ini user hanya dapat melihat komentar user lain tanpa bisa menghapus komentar tersebut dan hanya dapat memberikan komentar dari isi komentar tersebut. Menulis Komentar Deskripsi : Use case ini memungkinkan setiap user yang sudah terdaftar dapat menulis komentar. Aktor : User Skenario : 1. Setiap user terlebih dulu harus login ke dalam menu registrasi 2. Sistem akan menampilkan halaman update status dan user dapat menulis komentar 3. Sistem juga akan menampilkan nama pengirim, waktu pengiriman serta isi komentar user tersebut
41 Post kondisi : Sistem menampilkan komentar Penjelasan : Pada halaman ini user hanya dapat melihat komentar user sendiri dan user orang lain. Dan dapat pula memberikan komentar untuk user lain Menghapus Komentar Deskripsi : Use case ini memungkinkan setiap user yang sudah terdaftar dapat menghapus komentar sendiri Aktor : User Skenario : 1. Setiap user terlebih dulu harus login ke dalam menu registrasi 2. Sistem akan menampilkan halaman update status dan user dapat menghapus komentar user sendiri Penjelasan : Pada halaman ini user dapat menghapus komentar user sendiri,yang telah sebelumnya user tulis. Mengubah Data Profile Deskripsi : Use case ini memungkinkan setiap user yang sudah terdaftar dapat mengubah data profile Aktor : User
42 Skenario : 1. Setiap user terlebih dulu harus login ke dalam menu registrasi 2. User harus menuju link profile yang terdapat dalam halaman update status 3. User dapat memberikan informasi dirinya dengan cara mengisi semua informasi yang berkaitan dengan user Penjelasan : Pada halaman profile ini user dapat mengisi informasi yang berkaitan dengan user sebagai anggota dalam situs ini Melihat Video Deskripsi : Use case ini memungkinkan setiap user yang sudah terdaftar dapat memanfaatkan fasilitas pemutar video yang di sediakan dalam situs ini Aktor : User Skenario : 1. Setiap user terlebih dulu harus login ke dalam menu registrasi 2. User harus menuju link Video yang terdapat dalam halaman update status 3. User dapat mencari video yang ingin dicari karena fasilitas ini terhubung dengan media besar pemutar video yakni youtube Post kondisi : Sistem menampilkan video yang di putar
43 Penjelasan : Pada halaman video ini, user dapat mengetikan video apa yang ingin user lihat karena fasilitar pemutar video ini terhubung dengan media besar yakni youtube dengan catatan harus terhubung dengan internet agar dapat memanfaatkan fasilitas ini. Bermain Game Deskripsi : Use case ini memungkinkan setiap user yang sudah terdaftar dapat memanfaatkan fasilitas game yang di sediakan dalam situs ini Aktor : User Skenario : 1. Setiap user terlebih dulu harus login ke dalam menu registrasi 2. User harus menuju link game yang terdapat dalam halaman update status 3. User dapat bermain game tentunya yang sudah tersedia dalam situs ini Post kondisi : Sistem menampilkan game yang sedang dijalankan Penjelasan : Pada halaman game ini, user dapat memainkan game yang telah tersedia dalam situs ini dan sistem dapat pula memberikan penilaian sejauh mana kita dapat memainkan game tersebut.
44 3.3.2 Pemodelan Diagram Sequence Diagram Sequence menggambarkan interaksi antar objek di dalam dan di sekitar sistem ( termasuk user, tampilan, display, dan sebaginya ) berupa pesan yang digambarkan terhadap waktu. Diagram Sequence terdiri dari dimensi vertical ( waktu) dan dimensi horizontal ( objek-objek yang terkait. Diagram sequence biasa digunakan untuk mengambarkan skenario atau rangkaian langkah-langkah yang dilakukan sebagai respon dari sebuah event (proses) untuk menghasilkan output tertentu (Dharwiyanti dan Wahono, 2003:8). Diagram Sequence Pendaftaran Registrasi account dapat dilakukan oleh user pada halaman registrasi dengan memasukan data diri dari dan mengisi field yang terdapat pada registrasi form. Kemudian user akan diarahkan kedalam halaman registrasi kemudian user dapat masuk ke dalam aplikasi dengan memasukan user name dan password pada layer registrasi tersebut. Setelah itu akan dilakukan verifikasi atas data user name dan password yang dimasukan tadi, apakah sama dengan data user name dan password yang terdapat dalam basis data. Diagram Sequence pendaftaran digambarkan pada Gambar 3.3 berikut ini.
45 Layar daftar Memeriksa Data user Layar login Akses halaman Resgistrasi Masukan username Password Daftar Masukan data Kirim data Salin data user Tampilkan halaman login Gambar 3.3 Diagram Sequence pendaftaran Gambar 3.4 Diagram sequence login Setiap user yang ingin masuk harus terlebih dulu melakukan login dengan memasukan username dan password, setelah itu dilakukan verifikasi atas data user apakah sama dengan data yang ada di dalam database. Jika data yang dimasukan
46 sama maka user mendapatkan status user valid, sedangkan jika data yang user masukan tidak sesuai dengan data yang ada di dalam data base maka akan mendapatkan status user tidak valid sehingga tidak dapat mengakses situs ini. Diagram Sequence login digambarkan pada Gambar 3.4 berikut ini. 1.Akses halaman Layar login memeriksa Data user Layar user 2.Tampilkan halaman login 3. Masukan username Password 4. Login 5. Ambil data user 6. Kirim data Cocokan data Data tidak sesuai Tampilkan layar user Data sesuai Gambar 3.4 Diagram sequence login
47 Dalam menu berikutnya user yang sudah memiliki hak untuk dapat masuk dan mengakses situs ini dapat memberikan komentar yang sebelumnya user sudah buat. Dari hasil proses kelola komentar tersebut akan menghasilkan data yang akan disimpan di dalam basis data tersebut nantinya akan menghasilkan keluaran yang akan ditampiilkan pada halaman update status. Diagram sequence untuk mengakses menu komentar digambarkan pada Gambar 3.5 berikut ini. Layar user Membuat komentar Kategori Data 1. masuk sistem 2. komentar baru 3. jalankan 4. Tampilkan form komentar 5. Masukan komentar 6. Buat komentar 7. Tambahkan komentar Gambar 3.5 Diagram sequence input komentar
48 Seorang user yang telah dapat mengakses situs ini dapat pula untuk mengubah profil user di dalam menu profile. Dari hasil proses ubah profil tersebut akan menghasilkan data yang akan disimpan di dalam data base. Gambar 3.6 memperlihatkan diagram sequence ubah profile Layar user Ubah profile Formulir profile Data profile Masuk sistem 2. Ubah profile 3. Jalankan form profile 4. Tampilkan form profile 5. Masukan isi profile 6. Ubah profile 7. Simpan profile Gambar 3.6 Diagram sequence ubah profile
49 3.3.3 Activity Diagram Activity diagram atau biasa disebut aktifitas diagram adalah contoh pemodelan alur kerja ( workflow ) dengan urutan aktifitas dalam suatu proses ( Suhendra dan Gunadi, 2002:49). Dengan kita menggunakan diagram aktifitas ini kita akan lebih memahami alur dari proses-proses tersebut, atau dengan kata lain diagram ini akan menggambarkan langkah-langkah dari setiap aplikasi yang disediakan dalam sistem. Activity Diagram pendaftaran anggota User harus melakukan registrasi terlebih dahulu untuk dapat menggunakan aplikasi ini. Didalam halaman login, user dapat memilih tombol registrasi. Setelah itu halaman registrasi akan terbuka. Di dalam halaman tersebut user dapat mengisi semua data yang berkaitan dengan user. Apabila user sudah mengisi semua data dengan benar maka user dapat melakukan submit dan data user account akan disimpan dalam data base.
50 User Sistem Halaman login Memilih registrasi Tampilkan halaman registrasi Isi data registrasi Salah Masuk data base Benar Gambar 3.7 Diagram aktifitas pendaftaran Activity Diagram Masuk Untuk masuk ke dalam aplikasi, user harus melakukan identifikasi diri dengan melakukan login setiap kali user ingin masuk. Di halaman login, user diharuskan untuk mengisi login username dan password yang user miliki. Apabila sesuai dengan data di database, maka sistem akan menampilkan halaman update status.
51 User Sistem Halaman login Mengisi username Mengisi password Salah Benar Tampil halaman status Gambar 3.8 Diagram aktifitas login Activity Diagram Update Status User dapat memberikan status yang dapat di share ke semua user lain yang telah bergabung dengan cara mengertikan susuatu infrormasi yang berkaitan dengan apa pun
52 User Sistem Menuliskan status Halaman status update Menampilkan status Gambar 3.9 Diagram update status Di dalam halaman update status user dapat melihat dan memilih status orang lain yang ingin di komentari dan sistem akan menampilkannya. User Sistem Pilih komentar user lain Menampilkan komentar Membuat komentar Tampilkan komentar baru Gambar 3.10 Diagram melihat dan memilih komentar
53 Di dalam halaman update status juga user dapat memilih komentar yang ingin di hapus dan sistem akan menampilkannya User Sistem Menampilkan komentar Memilih komenatar Menghapus komentar Update Data Base Gambar 3.11 Diagram menghapus komentar User juga dapat melakukan navigasi ke halaman-halaman utama lainnya melalui panel kiri, dengan memilih link ke halaman yang di inginkan kemudian sistem akan membuka halaman tersebut
54 User Sistem Tampilkan panel kiri Memilih link panel kiri Tampilkan halaman yg dipilih Gambar 3.12 Diagram navigasi Activity Diagram manipulasi Informasi Profile User dapat memanipulasi data informasi profile dengan memilih link profile pada halaman update status. Setelah itu sistem akan menampilkan halaman profile User Sistem Memilih panel link kiri Tampilkan halaman updatestatus Tampilkan halaman profile Mengubah isi profile Mengubah data di data base Gambar 3.13 Diagram ubah profile
55 3.3.4 Diagram Keterhubungan Entitas Karena terdapat entitas yang saling tergantung dengan entitas lain maka penulis akan menggambarkan diagram hubungan antar entitas ( Entity Relationship Diagram) ERD. Pada gambar tersebut relasi antar hubungan kardinalitas user dengan beberapa hubungan adalah satu-ke-banyak (1:M), yang berarti satu user bisa melihat dan menulis banyak artikel. Drajat kardinalitas kategori dengan artikel adalah satu-kebanyak (1:M) yang berarti satu kategori memiliki banyak artikel. Gambar 3.14 Entity Relationship Tabel Berikut ini dijelaskan definisi objek data ( berupa entitas ), atribut,dan tipe data dari atribut objek yang terdapat dalam sistem aplikasi microblogging, yang di sajikan dalam bentuk table sebagai berikut :
56 1. Member Pada entitas member ini terdapat 4 atribut yaitu : id, nama, email, password Lihat table member berikut ini ; Tabel 3.1 Tabel member Atribut Tipe Panjang Keterangan id bingint 20 Primary key nama varchar 50 email varchar 50 password varchar 8 2. Facebook_post Pada entitas facebook_post memiliki 6 atribut yaitu : p_id, f_name, post, f_images, date_created, userip Table 3.2 Table facebook_post Atribut Tipe Panjang Keterangan p_id Int 11 Primary key f_name varchar 50 post varchar 255 f_images varchar 50 date_created int 11 Foreign key userip varchar 200 Foreign key
57 3. Facebook_post_comments Pada entitas Facebook_post_comments memiliki 5 atribut yaitu : c_id, userip, comments, data_created, post_id Table 3.3 Facebook_post_comments Atribut Tipe Panjang Keterangan c_id int 11 Primary key userip varchar 200 Foreign key comments text data_created int 11 Foreign key post_id int 11 5. Profile Pada entitas Profile memiliki 7 atribut yaitu : id_profile, nama, email, birthday, school, hometown, gender Table 3.4 Table Profile
58 Atribut Tipe Panjang Keterangan id_profile int 11 Primary key nama varchar 20 email varchar 20 birthday date school varchar 20 hometown varchar 20 gender varchar 11 Berikut ini penjelasan dari table-tabel yang telah disebutkan diatas 1. Tabel member Dalam tabel member dibuat dalam menampung user atau member yang bergabung dengan situs ini pada tabel member sendiri memiliki 4 atribut yakni : id, nama, email, password. Field id sendiri yanki Primary key yang memiliki tipe interger dengan panjang 20 ( auto_increment ). Pemberian nilai 20 pada field ini dengan tipe data integer dengan pertimbangan nilai 1 integer = 2 byte = 16 bit = 65536 baris (rows), penulis berasumsi bahwa variable tersebut dapat menampung data hingga mencapai 65536 x 20 = 1310720 rows kebawah. Sedangkan field nama sendiri memiliki tipe varchar dengan panjang 50 dimaksudkan untuk memudahkan user dalam memasukan nama yang panjang. Field email memiliki tipe varchar dengan panjang 50 dimaksudkan agar user dapat memudahkan dalam memasukan alamat email yang panjang. Field password memiliki tipe varchar
59 dengan panjang 8 dimaksudkan agar mempersulit seorang yang ingin menerobos atau ingen merentas password user. 2. Tabel Facebook_post Pada tabel facebook_post memiliki 6 atribut yaitu : p_id, f_name, post, f_images, date_created, userip Field p_id merupakan primery key yang memiliki tipe integer dengan panjang 11 (auto_increment ). Pemberian nilai 11 pada field ini dengan tipe data integer dengan pertimbangan nilai 1 integer = 2 byte = 16 bit = 65536 baris (rows), penulis berasumsi bahwa variable tersebut dapat menampung data hingga mencapai 65536 x 11 = 720896 rows kebawah. Field f_name memiliki tipe data varchar dengan panjang 50 dimaksudkan agar memudahkan user dalam pemberian nama. Field post sendiri memiliki tipe data varchar yang memiliki panjang 255 dimaksudkan agar memudahkan user untuk membuat postingan. Filed f_images memiliki tipe data varchar dengan panjang 50 dimaksudkan agar user mudah dalam memasukan gambar. Field date_created memiliki data integer dengan panjang 11. Pemberian nilai 11 pada field ini dengan tipe data integer dengan pertimbangan nilai 1 integer = 2 byte = 16 bit = 65536 baris (rows), penulis berasumsi bahwa variable tersebut dapat menampung data hingga mencapai 65536 x 11 = 720896 rows kebawah. Sedangkan Field userip memiliki tipe data varchar dengan panjang 200 dimaksudkan agar memudahkan user untuk menulis tulisan yang panjang.
60 3. Tabel Facebook_post_comments Pada tabel facebook_post_comments memiliki 5 atribut yaitu : c_id, userip, comments, data_created, post_id Field c_id merupakan primery key yang memiliki tipe integer dengan panjang 11 (auto_increment ). Pemberian nilai 11 pada field ini dengan tipe data integer dengan pertimbangan nilai 1 integer = 2 byte = 16 bit = 65536 baris (rows), penulis berasumsi bahwa variable tersebut dapat menampung data hingga mencapai 65536 x 11 = 720896 rows kebawah. Field userip sendiri memiliki titipe data varchar dengan panjang 200 dimaksudkan agar memudahkan user untuk menulis tulisan yang panjang. Sedangkan Field comments sendiri memiliki tipe data text sehingga sangat memudahkan user untuk menulis tulisan yang panjang. Filed data_created sendiri memiliki tipe data integer dengan panjang 11 (auto_increment ). Pemberian nilai 11 pada field ini dengan tipe data integer dengan pertimbangan nilai 1 integer = 2 byte = 16 bit = 65536 baris (rows), penulis berasumsi bahwa variable tersebut dapat menampung data hingga mencapai 65536 x 11 = 720896 rows kebawah. Sedangkan Field post_id memiliki tipe data integer dengan panjang 11 (auto_increment ). Pemberian nilai 11 pada field ini dengan tipe data integer dengan pertimbangan nilai 1 integer = 2 byte = 16 bit = 65536 baris (rows), penulis berasumsi bahwa variable tersebut dapat menampung data hingga mencapai 65536 x 11 = 720896 rows kebawah. 4. Tabel profile Pada tabel profile memiliki 7 atribut yaitu : id_profile, nama, email, birthday, school, hometown, gender.
61 Field id_profile merupakan primery key yang memiliki tipe integer dengan panjang 11 (auto_increment ). Pemberian nilai 11 pada field ini dengan tipe data integer dengan pertimbangan nilai 1 integer = 2 byte = 16 bit = 65536 baris (rows), penulis berasumsi bahwa variable tersebut dapat menampung data hingga mencapai 65536 x 11 = 720896 rows kebawah. Filed nama sendiri memiliki tipe data varchar dengan panjang 20 dimaksudkan agar memudahkan user untuk menulis nama yang panjang. Field email sendiri memiliki tipe data varchar dengan panjang 20 dimaksudkan agar memudahkan user untuk menuliskan email yang panjang. Sedangkan Field birthaday memiliki tipe data date. Field school memiliki tipe data varchar dengan panjang 20 agar memudahkan user untuk menuliskan nama sekolah. Sedangkan Field hometown sendiri memiliki tipe data varchar dengan panjang 20 digunakan agar memudahkan user untuk menginput informasi tempat tinggal yang mengandung unsur alamat tempat tinggal yang panjang. Sedangkan Field gander sendiri memiliki tipe data varchar dengan panjang 11 dimaksudkan agar memudahkan user ketika menginput informasi yang sudah di tentukan apakah pria maupun wanita. 3.4 Perancangan Antar Muka Pemakai Pada bab ini penulis menerangkan mengenai rancangan antarmuka agar memberikan gambaran aplikasi yang penulis buat. Berikut ini penulis akan tampilkan beberapa bentuk antarmuka pemakai dengan sistem aplikasi microblogging.
62 1. Halaman depan ( home) Halaman depan dapat dilihat pada Gambar 3. 15 berikut ini : HEADER About Us Contact Foto Register Gambar 3. 15 Rancangan halaman depan Pada gambar rancangan halaman depan (home) ini memiliki beberapa bagian di antaranya adalah tampilan header yang merupakan tampilan atas dari sistem aplikasi microblogging ini kemudian dalam tampilan home ini juga terdapat menu navigator yang terletak di sebelah kiri yang dapat di akses ke halaman yang lain. Menu tersebut diantaranya adalah About us, Contact, dan Register. 2. Rancangan halaman Update Status Pada halaman update status ini, penulis menggambarkan rancangan agar user dapat menuliskan informasi singkat. Berikut Gambar 3. 16 yang mengambarkan rancangan antarmuka dari halaman update status
63 HEADER Profile Update status area Video Game share Update Status Gambar 3. 16 Rancangan halaman update status Pada rancangan halaman update status ini dapat dijelaskan bahwa pada halaman ini setiap user dapat memposting informasi singkat yang berkaitan dengan apapun sehingga informasi tersebut dapat dilihat dan dikomentari oleh user lain. Pada halaman ini juga terdapat beberapa menu yang mengarah ke menu yang lain yakni profile, video, game, dan juga update status. 3. Rancangan halaman profile Pada rancangan halaman profile ini penulis mengambarkan bentuk data yang berisi informasi user. Gambar 3. 17 mengambarkan rancangan halaman profile.
64 HEADER Profile video Game Update status Full name email school hometown Gambar 3. 17 Rancangan halaman profile Pada halaman profile ini dapat di terangkan mengenai form untuk melengkapi informasi biodata user yang isinya antara lain : full name, email, birthday, school, hometown, dan juga gender. 2. Rancangan halaman video Pada rancangan halaman video ini penulis mengambarkan bentuk cara untuk dapat mengakses video. Gambar 3. 18 mengambarkan rancangan halaman video tersebut.
65 HEADER Profile Video Game Update status Gambar 3. 18 Rancangan halaman video Pada rancangan halaman video ini user dapat langsung memasukan kata atau judul video yang ingin diputar karena aplikasi ini dapat langsung terkoneksi ke situs youtube.tentunya harus memiliki koneksi internet. 3. Rancangan halaman game Pada rancangan halaman game ini penulis mengambarkan bentuk aplikasi yang bisa dinikmati user untuk bermain game. Gambar 3. 19 mengambarkan rancangan halaman video tersebut
66 HEADER Profile Video Game Update status Gambar 3. 19 Rancangan halaman game Pada rancangan halaman game ini user dapat memanfaatkan fasilitas yang tersedia pada aplikasi microblogging ini.