BAB 4 IMPLEMENTASI DAN EVALUASI. implementasi layar yang diadopsi dari perancangan layar sebelumnya. sosial Bee-Friend adalah sebagai berikut :

Transkripsi

1 BAB 4 IMPLEMENTASI DAN EVALUASI 4.1 Implementasi Implementasi aplikasi jejaring sosial Bee-Friend ini sudah dilakukan selama 2 sampai 3 bulan kepada komunitas Binusian. Data data pendukung dalam pengimplementasian antara lain seperti spesifikasi server, cara instalasi, serta implementasi layar yang diadopsi dari perancangan layar sebelumnya Spesifikasi Yang Diperlukan a. Spesifikasi Piranti Keras Spesifikasi piranti keras yang digunakan saat pengujian aplikasi jejaring sosial Bee-Friend adalah sebagai berikut : Tabel 4.1 Tabel Spesifikasi Piranti Keras. Server Processor : Dual Core 2,3 GHz Memory : 4 GB Hosting Space : 90 MB (untuk satu tahun pertama) Perangkat Jaringan Koneksi Traffic per bulan : : : Redundant Network Connections, Cisco Guard Ddos Mitigation IIX (Indonesia Internet Exchange) 3 GB Hosting : RumahWeb.com User ( Minimum Spesifikasi ) Processor : Pentium III 733 MHz Memory : 128 MB Harddisk Space : 20 MB Perangkat Jaringan : Ethernet Card / Modem, Koneksi Internet b. Spesifikasi Piranti Lunak. 298

2 299 Spesifikasi piranti lunak minimum dalam implementasi aplikasi jejarin sosial Bee-Friend adalah sebagia berikut : Tabel 4.2 Tabel Spesifikasi Piranti Lunak. Server Sistem Operasi : Linux Perangkat Lunak : Cpanel version Release Apache version (Unix) PHP version MySQL version community User Sistem Operasi : Windows / Linux Perangkat Lunak : Web Browser Cara Instalasi di Local Server (Offline) 1. Instalasi ini berlaku untuk sistem operasi windows, Admin diharuskan untuk menginstall XAMPP yang berfungsi sebagai local web server terlebih dahulu. 2. Install XAMPP dengan mengunakan setting dasar, ini dapat dilakukan dengan menekan tombol next berulang kali sampai proses instalasi berjalan.

3 300 Gambar 4.1 Penginstallan XAMPP 3. Setelah XAMPP terinstall, maka admin dapat memasukan data dari aplikasi ke dalam root folder dari Apache di C:\Program Files\xampp\htdocs 4. Servis Apache dan mysql dapat diaktifkan dengan menekan tombol start pada XAMPP control panel yang dapat diakses dari Start -> All Programs -> Apache Friend -> XAMPP Control Panel

4 301 Gambar 4.2 XAMPP Control Panel 5. Setelah itu admin diharuskan untuk membuat sebuah database kosong melalui phpmyadmin yang dapat diakses melalui browser dengan url : 6. Masukan nama database pada kolom Create New Database dan tekan Create

5 302 Gambar 4.3 Membuat database di PHPMyAdmin 7. Buka file connection.php di root folder dan ubah isi file tersebut dengan nama database, username dan password yang digunakan kemudian simpan. Gambar 4.4 Mengubah file connection

6 Jalankan file install.php di browser. File ini berfungsi untuk membuat tabel dan mengisi data awal pada database. File ini berisi query dari database yang akan digunakan beserta data-datanya. 9. Setelah melalui semua proses di atas, aplikasi jejaring sosial Bee-Friend siap untuk dijalankan. Layar login sudah dapat diakses melalui URL Cara Instalasi di Web Server (Online) 1. Admin masuk ke halaman Cpanel yang merupakan fasilitas control panel yang disediakan oleh jasa web hosting. Gambar 4.5 Halaman Cpanel Web Hosting.

7 Membuka file manager pada Cpanel, melalui file manager ini, file dapat di-upload, download dan dapat diatur penempatannya di root server. Gambar 4.6 Halaman Cpanel File Manager. 3. Upload file aplikasi dalam bentuk.zip file ke server. File aplikasi ini berisi semua source code dan gambar-gambar yang digunakan untuk aplikasi. Gambar 4.7 Halaman Cpanel Upload.

8 Ekstrak file aplikasi yang terlah ter-upload di file manager. File aplikasi.zip sudah dapat dihapus setelah selesai diekstrak. 5. Keluar dari file manager dan masuk ke domain redirection, memilih untuk meredirect domain ke URL Ini bertujuan agar semua orang yang mengakses URL akan langsung diteruskan ke halaman login. Gambar 4.8 Halaman Cpanel Domain Redirection.

9 Keluar dari domain redirection dan masuk ke database manager untuk membuat database dan username yang dapat mengakses database tersebut. Pertama-tama create database, lalu dilanjutkan dengan create user. Setelah keduanya selesai, isi add user to database dengan database dan user yang telah dibuat. Nama database, username dan password-nya akan dipakai untuk melakukan koneksi ke database server di dalam aplikasi.

10 307 Gambar 4.9 Halaman Cpanel Database Manager 7. Keluar dari database manager dan kembali masuk ke file manager, ubah isi file connection.php dengan nama database, username dan password yang digunakan dengan menggunakan code editor yang telah disiapkan di file manager Cpanel. Dengan mengubah connection.php maka semua file dan modul dalam aplikasi akan terhubung dengan database yang telahdibuat. Gambar 4.10 Halaman Cpanel Code Editor. 8. Jalankan file install.php di browser. File ini berfungsi untuk membuat tabel dan mengisinya data awal pada database. File ini berisi query dari database yang akan digunakan beserta data-datanya. Demi alasan keamanan lebih baik untuk menghapus file install.php setelah selesai menginstall. 9. Setelah melalui semua proses di atas, aplikasi jejaring sosial Bee-Friend siap untuk dijalankan. Layar login sudah dapat diakses melalui URL

11 Cara Penggunaan Aplikasi Untuk User a. Daftar User membuka login.php, kemudian user mengklik tombol registrasi. User diminta untuk mengisi semua field yang tersedia kemudian mencentang pilihan agree untuk menyetujui persetujuan yang ada dan yang terakhir user memilih tombol submit untuk mengirim data registrasi. Gambar 4.11 Gambar Registrasi. b. User Login User membuka halaman login.php kemudian memasukkan loginname dan password yang sesuai dengan data dalam database kemudian mengklik tombol submit untuk masuk ke layar halaman utama.

12 309 Gambar 4.12 Gambar Login c. Profile dan Kustomisasinya User dapat mengisi data-data pribadinya di dalam tab_cp.php pada halaman home tab control panel. Dan untuk memilih model tampilan user profile, user dapat memilihnya di halaman tab_profiletheme.php pada halaman profile tab theme. Setelah mengatur kedua halaman tersebut user dapat melihat hasil profile pribadinya pada halaman profile tab profile.

13 310 Gambar 4.13 Gambar kustomisasi data profile Gambar 4.14 Gambar kustomisasi profile theme d. Blog dan Kustomisasinya User dapat membuat posting dalam blog pribadi user melalui tab_compose.php pada halaman blog tab compose. Dan untuk memilih model tampilan user blog, user dapat memilihnya di halaman tab_blogtheme.php pada halaman blog tab theme. Setelah mengatur kedua halaman tersebut user dapat melihat hasil blog pribadinya pada halaman blog tab post.

14 311 Gambar 4.15 Gambar membuat blog post baru Gambar 4.16 Gambar kustomisasi blog theme e. Sistem Avatar User dapat menggunakan berbagai jenis avatar item yang dapat dibeli di market melalui tab_avatar.php yang terbagi di dalamnya menjadi 6 tab yaitu

15 312 diantaranya hat, upper, bottom, shoes, background, dan my inventory. Ketika sudah digunakan, avatar ini akan muncul pada pojok kiri atas di halaman blog. Avatar item yang sudah dibeli juga dapat dihapus dan dikirim ke user lain melalui tab my inventory di dalam tab avatar. Gambar 4.17 Gambar pemakaian avatar item Gambar 4.18 Gambar pengiriman avatar item

16 313 f. Sistem Widget User dapat memainkan widget yang sudah dibelinya lewat market melalui tab_widget.php. Gambar 4.19 Gambar memainkan avatar g. Forum Pada layar forum, user dapat saling berkomunikasi satu sama lain sesuai dengan subject-subject yang disediakan. User masuk ke main_forum.php untuk menjalankan fungsi forum tersebut. Di dalam forum, user dapat membuat topic baru dengan memilih create new topic dan membuat reply pada topic tertentu dengan memilih reply this topic di halaman topic tersebut.

17 314 Gambar 4.20 Gambar membuat topic baru Gambar 4.21 Gambar membuat reply dalam forum

18 315 h. Chat User dapat berkomunikasi secara langsung dengan user lain melalui fasilitas chat yang disiapkan di halaman chat.php Gambar 4.22 Gambar melakukan chatting i. Sistem Group User dapat membuat grup sendiri melalui tab_group.php pada halaman home tab group. Di dalamnya terdapat 4 tab diantaranya my groups, create group, browse group, dan search groups. Dengan adanya fitur ini, user dapat menemui teman teman yang mempunyai hobi atau minat yang sama.

19 316 Gambar 4.23 Gambar sistem groups j. Sistem Friend User dapat menjadi teman dari user lain melalui friendlist.php dalam halaman friends. Di dalamnya terdapat 5 tab diantaranya friends list, pending request, need approval, ignore list, dan search friends. User dapat mengkategorikan temannya di dalam friends list sesuai dengan keinginan user. User juga dapat menambah teman dan memasukkan teman ke dalam ignore list melalui halaman profile user yang bersangkutan. Gambar 4.24 Gambar pengkategorian dalam friend

20 317 Gambar 4.25 Gambar mencari user k. Sistem Pesan User dapat saling mengirim pesan secara pribadi di mess.php pada halaman messages. Di dalam halaman messages terdapat 3 tab yaitu inbox list, create new message, dan sent messages. User dapat melihat pesanpesan yang masuk melalui tab inbox list dan pesan terkirim melalui tab sent messages serta dapat membuat pesan baru di tab create new message.

21 318 Gambar 4.26 Gambar melihat inbox dan sent item Gambar 4.27 Gambar membuat pesan baru l. Sistem Ranking dan Event User saling bersaing satu dengan lainnya untuk memperoleh kedudukan peringkat 1 dalam beberapa kategori yang sudah disiapkan sebelumnya di venrank.php pada halaman event & ranking tab ranking. Semua user juga dapat mengikuti event yang diselenggarakan oleh admin hingga batas waktu yang ditentukan di venrank.php pada halaman event & ranking tab event.

22 319 Gambar 4.28 Gambar melihat ranking Gambar 4.29 Gambar melihat event yang sedang berlangsung m. Sistem Feed dan Notification

23 320 User dapat mengetahui apa saja yang terjadi pada teman-temannya dan beberapa hal yang membutuhkan aksi dari user di tab_home.php pada halaman home tab home. User juga dapat melakukan subscribe RSS feed dari aplikasi bee-friend ini sehingga user dapat mendapatkan update terbaru dari teman-temannya tanpa harus masuk ke dalam aplikasi bee-friend melalui tombol subscribe pada tab_home.php. Gambar 4.30 Gambar melihat notifikasi dan feed

24 321 Gambar 4.31 Gambar berlangganan RSS feed n. Avatar Item dan Widget Creation Pada aplikasi bee-friend terdapat fitur yang memungkinkan user untuk membuat avatar item dan widget kreasi user sendiri. Avatar item dan widget ini akan diseleksi oleh admin. Dan apabila lolos tahap penyeleksian maka avatar item dan widget tersebut dapat dibeli oleh user lainnya dan user pembuat memperoleh keuntungan dengan adanya pembelian tersebut.

25 322 Gambar 4.32 Gambar membuat avatar item Gambar 4.33 Gambar membuat widget o. Sistem Ekonomi Pada aplikasi bee-friend terdapat fitur yang memungkinkan user untuk menerima honey dan mengirimkan honey. User dapat mengirimkan honey di tab_market_honey.php pada halaman market tab honey dimana akan dikenakan biaya pengiriman yang fluktuatif tergantung berapa banyak honey yang beredar di dalam aplikasi bee-friend. User dapat memperoleh honey

26 323 melalui beberapa cara diantaranya login aplikasi bee-friend untuk 50 honey setiap harinya, posting blog untuk 20 honey tiap post, melakukan rating pada blog post user lain untuk 2 honey, menerima rating dari user lain untuk 1 sampai dengan 5 honey dan melalui penjualan avatar item dan widget buatan user di market. Gambar 4.34 Gambar mentransfer honey Cara Penggunaan Aplikasi Untuk Admin a. Admin Login Admin membuka halaman login_admin.php kemudian memasukkan admin id dan password yang sesuai dengan data dalam database kemudian mengklik tombol submit untuk masuk ke layar halaman utama admin.

27 324 Gambar 4.35 Gambar Login Admin b. Create Event Admin dapat membuat event event di tab_admin_home.php pada halaman home tab event. Kemudian di halaman tersebut admin juga dapat membatalkan event maupun menentukan pemenang event tersebut. Gambar 4.36 Gambar membuat event baru

28 325 c. Avatar Item Approval Admin dapat menyetujui avatar item yang sudah di-upload oleh user sebelumnya atau menolak avatar item yang sudah di-upload tersebut pada halaman home tab avatar approval. Admin juga dapat mencoba avatar item tersebut terlebih dahulu. Gambar 4.37 Gambar melihat avatar kreasi user d. Widget Approval Admin dapat menyetujui widget yang sudah di-upload oleh user sebelumnya atau menolak widget yang sudah diupload tersebut pada halaman home tab widget approval. Di sini admin juga dapat mendownload file-file yang digunakan user untuk membuat widget yang bersangkutan.

29 326 Gambar 4.38 Gambar melihat widget kreasi user e. Pesan Laporan User Admin dapat menerima laporan laporan dari user melalui pesan pribadi di mess_admin.php pada halaman messages. f. Chat Admin juga dapat berkomunikasi langsung dengan user melalui fasilitas chat pada chat_admin.php. g. Forum Admin dapat membaur dengan user di dalam forum forum untuk menjaga ketertiban user di dalam forum sehingga stabilitas aplikasi tetap terjaga pada halaman admin_main_forum.php Implementasi Perancangan Layar a. Layar Login

30 327 Gambar 4.39 Halaman Login b. Layar Registrasi Gambar 4.40 Halaman Registrasi

31 328 c. Layar Home i. Layar Home dengan Tab Home Gambar 4.41 Halaman Home Dengan Tab Home

32 329 ii. Layar Home dengan Tab Avatar Gambar 4.42 Halaman Home Dengan Tab Avatar iii. Layar Home dengan Tab Widget Gambar 4.43 Halaman Home Dengan Tab Widget