8

khazanah Jurnal Ilmu Komputer dan Informatika

informatika

Perancangan Aplikasi Chatting Berbasis Web di

PT. Pura Barutama Kudus Menggunakan Socket.IO
dan Framework Foundation
Ramos Somya*
Program Studi S1 Teknik Informatika, Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
Salatiga
*[email protected]

Abstrak-Aplikasi chatting merupakan aplikasi yang penting pada sebuah perusahaan besar karena dapat dipastikan antara
divisi satu dengan divisi yang lain berada di lokasi yang berjauhan. EDP Keuangan PT. Pura Barutama Kudus bertugas dalam
pembuatan program aplikasi yang terkait dengan pengolahan data keuangan dan faktur di semua unit di PT. Pura Barutama.
Aplikasi keuangan yang telah ada akan selalu berkembang sesuai dengan kebutuhan user. Kendala yang dihadapi adalah aktivitas
komunikasi dan penyebaran informasi pada PT. Pura Barutama dilakukan dengan menggunakan layanan email maupun
aplikasi messenger. Untuk menggunakan layanan tersebut, perangkat yang digunakan harus selalu terkoneksi dengan internet.
Apabila internet mati maka komunikasi tidak dapat dilakukan. Jalan satu-satunya untuk menyebarkan informasi adalah dengan
menelepon satu per satu ke tiap-tiap unit. Hal ini menimbulkan ketidakefisienan pekerjaan dan produktivitas perusahaan
menjadi terganggu. Pada penelitian ini dilakukan perancangan aplikasi chatting dengan menggunakan Framework CodeIgniter,
Socket.IO dan Framework Foundation untuk mengatasi masalah yang ada. Hasil dari penelitian ini adalah aplikasi chatting berbasis
web yang dibangun menggunakan Framework CodeIgniter, Socket.IO dan Framework Foundation terbukti dapat membantu user
untuk saling berkomunikasi atau melakukan attach file, serta mempermudah melakukan penyebaran informasi atau pengumuman
baik dalam kondisi terhubung internet maupun tidak.

Kata Kunci: Aplikasi Chatting, Web, Socket.IO, Framework Foundation, Framework CodeIgniter

1. Pendahuluan ketidakefisienan pekerjaan dan produktivitas menjadi

terganggu.
Aplikasi chatting merupakan aplikasi yang penting Berdasarkan permasalahan tersebut, maka dapat
pada sebuah perusahaan besar karena dapat dipastikan diketahui rumusan masalah dalam penelitian ini adalah
antara divisi satu dan divisi yang lainnya berada di tempat bagaimana membuat aplikasi chatting berbasis web
yang berjauhan. Divisi keuangan PT. Pura Barutama selalu menggunakan Framework CodeIgniter, Socket.IO dan
mengontrol dan berkomunikasi dengan seluruh unit yang Framework Foundation dengan memanfaatkan jaringan
ada di PT. Pura Barutama. Penggunaan aplikasi chatting komputer lokal yang ada di PT. Pura Barutama. Aplikasi
akan meningkatkan produktivitas dan efisiensi kerja. chatting tersebut hanya membutuhkan sebuah browser
Misalnya sebagai sarana berkomunikasi, attach file dan yang digunakan untuk mengakses aplikasi chatting
sebagai media pengumuman. selama perangkat terkoneksi dengan jaringan lokal baik
EDP Keuangan adalah salah satu sub divisi dari divisi menggunakan kabel maupun wireless tanpa terkoneksi
keuangan di PT. Pura Barutama selalu beinteraksi dengan dengan internet. Selain itu, aplikasi berbasis web tergolong
berbagai macam divisi yang ada. Selain itu EDP Keuangan ringan, sehingga spesifikasi komputer yang digunakan
bertugas dalam pembuatan program yang terkait dengan oleh user tidak berat.
pengolahan data keuangan, faktur di semua unit PT. Pura Aplikasi chatting dibangun menggunakan Framework
Barutama. Aplikasi keuangan yang telah ada akan selalu CodeIgniter (CI) dan Socket.IO sebagai back-end.
berkembang sesuai kebutuhan user. Framework CodeIgniter mendukung konsep Model
Aktivitas komunikasi dan penyebaran informasi View Controller (MVC) sehingga dalam pengembangan
pada PT. Pura Barutama dilakukan dengan menggunakan aplikasi chatting akan menjadi lebih terstruktur dan
layanan email maupun aplikasi messenger, untuk menggunakan terorganisasi. Sedangkan untuk interface (front-end) aplikasi
layanan tersebut, perangkat yang digunakan harus selalu chatting menggunakan Framework Foundation untuk
terkoneksi dengan internet. Apabila internet mati maka membuat aplikasi chatting ini menjadi responsive dan untuk
komunikasi tidak dapat dilakukan. Jalan satu-satunya penyimpanan data menggunakan database Oracle karena
untuk menyebarkan informasi adalah dengan menelepon menyesuaikan dengan database yang digunakan PT. Pura
satu per satu ke tiap-tiap unit. Hal ini menimbulkan Barutama.

Vol. 4 No. 1 | Juni 2018 KHAZANAH INFORMATIKA |ISSN: 2621-038X, Online ISSN: 2477-698X
 Perancangan Aplikasi Chatting Berbasis Web... 9

Mengingat begitu luasnya ruang lingkup pembuatan

aplikasi chatting dan terbatasnya kemampuan dan identifikasi
maka diperlukan batasan agar sistem yang dibangun tidak
menyimpang dari permasalahan dalam sistem aplikasi
chatting. Adapun batasan masalah yang dilakukan adalah
aplikasi hanya dapat dipergunakan untuk perorangan (Private
Chat), dikarenakan aplikasi chatting ini bersifat rahasia. Selain
digunakan untuk melakukan private chat, aplikasi ini juga
dapat memberikan informasi berupa pengumuman kepada
user maupun unit yang lain apabila ada pembaruan aplikasi
yang dibuat oleh EDP Keuangan PT. Pura Barutama.
Diharapkan dengan dibangunnya aplikasi ini, dapat
mempermudah para penggunanya untuk berkomunikasi Gambar 1. Tahapan Penelitian
dan bertukar informasi. Sehingga dapat meningkatkan
produktivitas kerja dan mengefisienkan waktu

2. Kajian Pustaka

a. Penelitian Terdahulu
Terdapat beberapa penelitian terdahulu yang digunakan
sebagai acuan dalam penelitian ini. Penelitian pertama
menghasilkan aplikasi yang dapat melakukan pembuatan
suatu room yang dapat dilakukan oleh semua pengguna baik
itu pengguna telepon seluler maupun pengguna komputer.
Apabila melakukan mengirim dengan ukuran file yang besar
Gambar 2. Model prototyping [10]
maka proses pengiriman akan menjadi lama [1].
Penelitian kedua menghasilkan aplikasi yang dibangun
dengan menggunakan Visual Basic 6.0. Aplikasi yang c. Framework
dilengkapi dengan menu send file untuk mengirimkan Framework adalah kumpulan perintah atau fungsi
text yang mempermudah komunikasi antar pengguna dasar yang membentuk aturan-aturan tertentu dan saling
yang berada dalam sebuah jaringan. Aplikasi chatting yang berinteraksi satu sama lain sehingga dalam pembuatan
dikembangkan tidak adanya pemisahan form antara private aplikasi website, programmer harus mengikuti aturan dari
dengan group. Model pengiriman text melalui menu send file framework tersebut. CodeIgniter dilengkapi dengan
harus memasukkan alamat IP tujuan pengguna sehingga berbagai pustaka siap pakai untuk berbagai kebutuhan.
dinilai tidak efektif dan efisien. Program aplikasi hanya Misalnya saja koneksi database, email, session dan cookies,
dapat berjalan pada sistem operasi Windows [2]. keamanan, manipulasi gambar dan banyak lagi sehingga
Penelitian ketiga mengimplementasi Algoritma Rijndeal mempermudah pekerjaan [5].
128 pada aplikasi chatting berbasis HTML5 webSocket.
Pada penelitian tersebut menghasilkan aplikasi group chatting. d. Socket.IO
Pesan yang dikirim akan dienkripsi dengan menggunakan Socket.IO adalah lapisan komunikasi berbasis event
algoritma Rijndeal 128, sehingga pesan menjadi aman [3]. untuk aplikasi web realtime, yang dibangun di atas Engine.
Berdasarkan penelitian yang telah dilakukan IO. Hal ini memungkinkan pengembang untuk mengirim
sebelumnya yang menjadi pembeda antara penelitian ini dan menerima data tanpa khawatir tentang kompatibilitas
dan penelitian terdahulu adalah aplikasi chatting dibuat browser yang berbeda [6].
dengan menggunakan Framework CodeIgniter, Socket.
IO dan Framework Foundation. Penggunaan Framework e. Framework Foundation
CodeIgniter penulisan kode akan menjadi terstruktur dan Framework Foundation adalah framework yang
terorganisir karena Framework CodeIgniter menerapkan dibangun dengan HTML, CSS, dan Javascript, sebagai
konsep MVC (Model View Controller). Socket.IO komponen utama dari web. Framework Foundation
memungkinkan pembuatan aplikasi komunikasi realtime mengunakan teknologi JQuery, HTML 5 dan Normalizer
antara client dan server. Penggunaan Framework Foundation [7]. Framework Foundation digunakan untuk membuat web
membuat halaman web menjadi responsive sehingga dapat dapat menyesuaikan resolusi layar yang digunakan.
menyesuaikan di perangkat manapun saat aplikasi diakses.
f. Basis Data Oracle
b. Chatting Oracle adalah sistem basis data yang memiliki banyak
Chatting adalah pecakapan dua orang atau lebih secara fitur yang memungkinkan administrator basis data dapat
real time melalui komputer yang terhubung dengan jaringan. mengelola data secara lebih akurat sehingga Oracle lebih
Layanan untuk chatting di internet antara lain Yahoo, sesuai digunakan sebagai sistem basis data untuk aplikasi
Skype, mIRC, Windows Live Messenger. Adanya layanan yang berkuran besar dan kompleks [8].
chat memungkinkan untuk dapat berkomunikasi melalui
internet dengan orang-orang yang berada di seluruh dunia
[4].

Vol. 4 No. 1 | Juni 2018 KHAZANAH INFORMATIKA |ISSN: 2621-038X, Online ISSN: 2477-698X
 10 Perancangan Aplikasi Chatting Berbasis Web...

3. Perancangan Sistem

Pada penelitian ini dilakukan beberapa tahapan

yang saling berkaitan dengan tahapan selanjutnya, yaitu:
1) Analisis kebutuhan dan pengumpulan data yang
diperlukan. 2) Perancangan sistem. 3) Perancangan
aplikasi/program. 4) Implementasi dan pengujian sistem,
serta analisis hasil pengujian. 5) Penulisan laporan hasil
penelitian [9]. Tahapan-tahapan yang dilakukan dalam
penelitian ini dapat dilihat pada Gambar 1.
Berdasarkan Gambar 1 dapat dijelaskan tahapan
penelitian yang dilakukan adalah sebagai berikut: 1)
Tahapan pertama: analisis dan pengumpulan data, di mana
peneliti melakukan wawancara dengan karyawan EDP
Keuangan tentang aplikasi yang akan dibuat. Berdasarkan
hasil wawancara dengan karyawan EDP Keuangan bahwa
selama ini belum ada media yang menghubungkan unit satu
ke unit yang lainnya dalam menyebarkan informasi atau
attach file tanpa menggunakan internet. Selama ini hanya
menggunakan telepon dan email untuk berkomunikasi.
Email sendiri memiliki kekurangan yaitu membutuhkan
koneksi internet. Jika koneksi internet mati, maka tidak
bisa terjadi komunikasi. Jika melalui telepon akan terasa
Gambar 3. Diagram Use Case
tidak efisien karena karyawan EDP Keuangan harus
menghubungi satu per satu unit yang banyak di PT. Pura
Barutama jika terjadi perubahan program. Sehingga
dibutuhkan aplikasi yang dapat menyediakan fasilitas
chatting, attach file, dan penyebaran pengumuman dengan
memanfaatkan jaringan lokal. Tahap kedua, ketiga,
dan keempat dilakukan perancangan aplikasi chatting
menggunakan metode Prototype. Sedangkan tahap kelima
dilakukan penulisan artikel ilmiah atau laporan penelitian.
Metode perancangan yang dipakai dalam pembuatan
aplikasi chatting adalah metode Prototyping. Metode
Prototyping adalah metode dalam pengembangan
rekayasa software yang bertahap dan berulang serta
Gambar 4. Diagram Activity Mengirim Pesan mementingkan sisi user sistem. Penggunaan metode
Prototyping, pengembang dan karyawan EDP Keuangan
dapat saling berinteraksi selama proses pembuatan sistem
sampai aplikasi sesuai dengan kebutuhan pengguna.
Tahap pengumpulan kebutuhan dilakukan untuk
mengetahui permasalahan dan kebutuhan sistem. Pada
tahap ini juga dilakukan pencarian data yang dibutuhkan
oleh sistem. Agar aplikasi chatting yang dibagun dapat
memenuhi kebutuhan pengguna. Analisis kebutuhan
sistem dilakukan bersama dengan karyawan EDP
Keuangan. Berdasarkan analisis kebutuhan sistem yang
Gambar 5. Diagram Sequence Proses Kirim Pesan dilakukan bahwa selain untuk melakukan chatting dengan
user lain, dibutuhkan juga fasilitas untuk attach file, dan
melakukan pengumuman. Pada aplikasi chatting yang
dibangun dibagi menjadi dua hak akses yaitu administrator
dan user biasa. Kebutuhan adminstrator mencakup:
chatting dengan pengguna lain dengan fasilitas attach file,
posting pengumuman, hapus pengumuman, mengubah
pengumuman jika terjadi kesalahan, mengelola user,
mengelola user di sini maksudnya adalah memberikan hak
akses administrator kepada user biasa jika user tersebut ini
memposting pengumuman. Sedangkan kebutuhan user biasa
hanya melakukan chatting dengan pengguna lain dengan
fasilitas attach file. Data user sendiri menggunakan data yang
sudah dimiliki oleh PT Pura Barutama, sehingga pada
Gambar 6. Diagram Class aplikasi chatting ini tidak perlu menambahkan data user
baru, karena diambil dari database yang sudah ada.

Vol. 4 No. 1 | Juni 2018 KHAZANAH INFORMATIKA |ISSN: 2621-038X, Online ISSN: 2477-698X
 Perancangan Aplikasi Chatting Berbasis Web... 11

Analisis kebutuhan hardware dan spesifikasi software Kode Program 1. Konfigurasi NodeJS
yang digunakan dalam membangun aplikasi chatting ini 1. {
yaitu: analisis perangkat keras yang akan digunakan adalah 2. "name": "puramessenger",
3. "version": "1.0.0",
Prosesor Intel Core i3, 2.3 GHz, RAM 6 GB dan Harddisk 4. "description": "puramessenger",
500 GB. Sedangkan perangkat lunak yang digunakan 5. "main": "server.js",
adalah sistem Operasi Windows 7 Ultimate, Sublime 6. "scripts": {
7. "test": "echo \"Error: no test specified\" &&
sebagai text editor, web server (Apache), web browser (dalam exit 1"
penelitian ini menggunakan Google Chrome), Oracle 8. },
sebagai database, dan Rational Rose untuk membuat UML 9. "author": "ridvandani672012078",
10. "license": "ISC",
diagram sistem. 11. "dependencies":{
Sebelum dilakukan pengkodean, dilakukan 12. "Socket.IO":"*",
perancangan UML diagram untuk memvisualisasikan alur 13. "express":"*"
proses dan kebutuhan data. UML dibuat dalam diagram 14. }
15. }
Use Case, diagram Activity, diagram Sequence dan
diagram Class yang akan dijelaskan satu per satu.
Gambar 3 menunjukkan diagram Use Case dari Kode Program 2. Konfigurasi Server
aplikasi chatting. Aplikasi yang dibuat dibedakan menjadi 1. var express = require('express');
dua jenis user yaitu administrator dan guest (user biasa). 2. var app = express();
3. var server =
Aktor dengan hak akses admin dapat mengirimkan require('http').createServer(app);
dan menerima pesan, attach file, melihat pengumuman, 4. var io =
require('Socket.IO').listen(server);
mengelola data user dengan memberikan hak akses 5. var port = process.env.PORT || 3001;
administrator kepada user biasa, memposting pengumuman, 6. var users = {};
menghapus pengumuman, mengubah pengumuman jika 7.
8.
server.listen(port, function(){
console.log("Server bejalan pada port %d",
terjadi kesalahan. Sedangkan aktor dengan hak akses port);
guest (user biasa) hanya dapat mengirimkan dan menerima 9. });
pesan, attach file, melihat pengumuman, dan mengatur
akunnya sendiri. Kode Program 3. Konfigurasi Koneksi Database
Gambar 4 menunjukkan diagram Activity ketika Framework CodeIgniter
pengirim mengirimkan pesan. Hal pertama yang dilakukan 1. $db['default']['hostname'] = 'localhost/XE';
adalah pengirim menentukan tujuan dan pesan yang akan 2. $db['default']['username'] = 'pura_m';
dikirim. Kemudian data yang sudah diinputkan akan 3. $db['default']['password'] = 'pura_m';
4. $db['default']['database'] = '';
diproses melalui Socket kemudian ditampilkan pada 5. $db['default']['dbdriver'] = 'oci8';
panerima. Data pesan yang dikirim akan disimpan ke 6. $db['default']['dbprefix'] = '';
7. $db['default']['pconnect'] = TRUE;
dalam database, sehingga histori percakapan masih bisa 8. $db['default']['db_debug'] = TRUE;
dilihat. 9. $db['default']['cache_on'] = FALSE;
Gambar 5 merupakan diagram Sequence dari proses 10. $db['default']['cachedir'] = '';
11. $db['default']['char_set'] = 'utf8';
pengiriman pesan. Pertama user menginputkan pesan pada 12. $db['default']['dbcollat'] =
halaman view. Kemudian data diproses oleh server socket 'utf8_general_ci';
dan data menjadi parameter di controller kirim pesan. Setelah 13. $db['default']['swap_pre'] = '';
14. $db['default']['autoinit'] = TRUE;
itu controller akan memanggil fungsi pada model dengan 15. $db['default']['stricton'] = FALSE;
parameter yang dikirimkan controller kemudian model akan
berhubungan dengan database untuk menyimpan data.
Gambar 6 merupakan diagram Class dari aplikasi Kode Program 4. Konfigurasi Route Framework
chatting yang menunjukkan model dan controller. Pada CodeIgniter
aplikasi chatting dibuat dalam 4 model class yaitu user class, 1. $route['default_controller'] = "user_con";
user status class, pesan class dan pengumuman class. Model 2.
3.
$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;
class ini yang nantinya akan berhubungan dengan database.
Sedangkan controller class akan menghubungkan antara
view dan model class. Pada aplikasi chatting dibuat dalam 3 Kode Program 5. Menampilkan User yang Online atau
controller class yaitu user status controller, pesan controller, dan Offline
pengumuman controller. 1. function cek_userlist() {
Perulangan dari proses pada metode Prototyping 2. $.ajax({
3. url: "<?php echo
terus berlangsung hingga semua kebutuhan terpenuhi. base_url('index.php/user_con/userList');?>",
Proses evaluasi dilakukan sebanyak 3 kali, evaluasi 4. cache: false,
pertama adalah menunjukkan kepada karyawan EDP 5.
6.
success: function(msg) {
$('#userList').load("<?php echo
Keuangan bagaimana aplikasi bekerja. Evaluasi kedua 7. base_url('index.php/user_con/userList');?>");
dilakukan penambahan fitur untuk user yang memiliki hak 8. }});
9. var waktu = setTimeout("cek_userlist()",
akses sebagai administrator agar dapat melakukan posting 10000);
pengumuman, dan setiap pesan yang masuk mendapatkan 10. }
notifikasi. Evaluasi ketiga dilakukan perbaikan beberapa
fungsi yang masih memiliki bug di dalamnya.

Vol. 4 No. 1 | Juni 2018 KHAZANAH INFORMATIKA |ISSN: 2621-038X, Online ISSN: 2477-698X
 12 Perancangan Aplikasi Chatting Berbasis Web...

Gambar 7. Respon Server Ketika User Log in Gambar 12. Notifikasi Pesan yang Belum Dibaca

Gambar 13. Form Posting Pengumuman

Gambar 8. Halaman Utama

Gambar 9. Perbedaan Hak Akses Adminstrator dan User

Biasa

Gambar 14. Daftar Pengumuman

Gambar 10. Respon Server Ketika User Mengirim Pesan

Gambar 15. Tampilan Responsive

Gambar 11. Proses Chatting

Gambar 16. Grafik Performance Aplikasi

Vol. 4 No. 1 | Juni 2018 KHAZANAH INFORMATIKA |ISSN: 2621-038X, Online ISSN: 2477-698X
 Perancangan Aplikasi Chatting Berbasis Web... 13

Kode Program 6. Mengirim Pesan Melalui Socket tidak terdapat dalam database, akan kembali ke halaman
1. $('#form-kirim-pesan').submit(function(e) { log in. Jika cocok akan maka user berhasil log in. Gambar 7
2. e.preventDefault();
3. var url = $(this).attr('action'); adalah respons server ketika ada user yang log in. Gambar 8
4. var data = new FormData(this); merupakan halaman yang akan muncul ketika user berhasil
5. var pesan = '/w ' + $inp_tujuan.val() + " " +
$inp_pesan.val();
log in.
6. var filename = Gambar 8 menunjukkan halaman yang ditampilkan
$('input[type=file]').val().replace(/C:\\fakep
ath\\/i, '');
ketika user berhasil log in. Pada bagian header sebelah kanan
7. var pData = {pesan: pesan, file: filename, terdapat menu untuk user. User dibagi menjadi 2 hak akses
gambar: $inp_gambar.val()} dengan menu yang berbeda. Hak akses yang pertama
8.
9. Socket.emit('send message', pData); adalah adminstrator dan hak akses yang kedua adalah user
10.
11.
...
});
biasa. Perbedaan menu dapat dilihat pada Gambar 9.
Gambar 9 menunjukkan perbedaan hak akses pada
tiap-tiap user. User yang mendapat hak akses sebagai
Kode Program 7. Media Query adminstrator terdapat label “administrator” sedangkan
1. @media (max-width: 700px){ untuk user yang tidak mendapat hak akses administrator
tidak terdapat label “administrator”. User yang mendapat
2. .userListContainer {display:none;}
hak administrator terdapat menu panel administrator,
3. .announcementContainer {display: none;} pengumuman, settings, dan log out. Sedangkan user biasa
hanya terdapat menu settings dan log out. Kedua hak akses
4. .chatbox{height: 67% !important;}
tersebut bisa melakukan chatting dengan sesama user.
5. } Pada bagian di bawah header dibagi lagi menjadi 3 bagian
yaitu bagian sebelah kiri untuk menampilkan user yang
6. @media (min-width: 700px) {
online maupun yang sedang offline. Bagian tengah untuk
melakukan chatting, dan bagian kanan untuk menampilkan
4. Hasil dan Pembahasan
pengumuman. Untuk menampilkan user yang sedang
online maupun offline aplikasi akan mereload secara berkala
Sebelum melakukan pengkodean. Hal pertama yang halaman userlist.
harus dilakukan adalah meng-install NodeJS. Tujuan dari Kode Program 5 menunjukkan fungsi untuk
intalasi NodeJS karena Socket.IO berjalan di atas NodeJS menampilkan user yang online maupun offline dengan
sebagai modul. Kemudian dilakukan inisialisasi project memanfaatkan Jquery Ajax, setiap 10000 millisecond class
NodeJS dengan perintah npm init. Perintah ini akan controller userList akan direload secara terus menerus
menghasilkan file package.json yang terlihat pada Kode tanpa merefresh keseluruhan halaman. Proses chatting pada
Program 1. penelitian ini memanfaatkan library Javascript Socket.
Kode Program 1 menujukkan deskripsi mengenai IO. Penggunaan Socket.IO memungkinkan komunikasi
aplikasi yang dibuat. Kemudian melakukan penambahan secara realtime antara client dan server. Socket.IO berjalan
dependencies untuk menambahkan Socket.IO dan Express. pada web browser dan berjalan pada server. Kode Program 6
Setelah konfigurasi package.json, selanjutnya penginstallan merupakan fungsi pada sisi client untuk mengirimkan data
Socket.IO dan Express dengan menjalankan perintah dari client ke server.
npm install pada command line. Setelah proses instalasi, Kode Program 6 menunjukkan fungsi untuk
selanjutnya membuatan server untuk aplikasi chatting yang mengirimkan data dari client ke server. Data yang diinputkan
ditunjukkan pada Kode Program 2. akan menjadi parameter pada fungsi ‘send message’ pada
Kode Program 2 menunjukkan inisialisasi Socket dan komputer client dan diterima oleh server.
port. Pada baris 5 diinisialisasikan bahwa aplikasi chatting Gambar 10 menunjukkan aktivitas server. Pesan
akan berjalan pada port 3001. Selanjutnya dilakukan yang masuk akan ditampilkan ke dalam console. Server
konfigurasi pada Framework CodeIgniter agar aplikasi mengirim nilai pengembalian data pada client dalam fungsi
dapat terhubung dengan database yang ditunjukkan pada ‘whisper’ dan “kirim”. Gambar 11 merupakan hasil data
Kode Program 3. yang ditampilkan di web browser. Gambar 12 merupakan
Kode Program 3 menunjukan konfigurasi database notifikasi ketika ada pesan yang belum dibaca.
yang berisi hostname, username, password, dan driver. Pada Gambar 12 menunjukkan notifikasi pesan yang
penelitian ini database yang digunakan adalah Oracle, maka belum dibaca. Ketika ada pesan yang baru saja masuk
driver yang digunakan adalah OCI8. Sedangkan untuk atau pesan yang belum dibaca, pada header akan muncul
pengaturan route terlihat pada Kode Program 4. notifikasi yang berisi jumlah pesan dan siapa pengirim
Kode Program 4 menunjukkan controller mana yang pesan tersebut. User dengan hak akses administrator juga
akan dipanggil pertama kali saat aplikasi dijalankan. bisa melakukan posting pengumuman. Posting pengumuman
Pengubahan dilakukan pada baris 1 yaitu saat aplikasi juga dilakukan melalui Socket.
dijalankan akan memanggil kelas controller user_con yang Gambar 13 menunjukkan form untuk menulis
mengarah pada halaman log in. Pada halaman log in terdapat pengumuman. Data inputan akan dikirimkan ke server.
dua text field dan satu tombol. Text field pertama adalah Kemudian server mengolah data dan mengirimkan kembali
tempat user untuk memasukkan user id user. Text field kedua ke client untuk ditampilkan yang terlihat pada Gambar 14.
adalah tempat user memasukkan password, dan tombol log Aplikasi chatting yang dibangun dapat menyesuaikan
in yang digunakan untuk memproses inputan dari user. dengan resolusi layar ketika aplikasi diakses dengan
Username dan password kemudian diproses untuk dilakukan memanfaatkan Framework Foundation. Pemanfaatan
pengecekan ke database. Apabila username dan password Framework Foundation aplikasi web akan menjadi responsive.

Vol. 4 No. 1 | Juni 2018 KHAZANAH INFORMATIKA |ISSN: 2621-038X, Online ISSN: 2477-698X
 14 Perancangan Aplikasi Chatting Berbasis Web...

Grid dalam framework Foundation digunakan untuk terlihat pada grafik pada Gambar 16 di mana untuk tiap
mengaktifkan fitur responsive. Maksimum penggunaan interval waktu tertentu tidak terjadi perubahan pages
grid pada Framework Foundation adalah 12 kolom. Grid per second yang besar. Didapatkan 0.1 halaman tiap detik
dikelompokkan menjadi 3 properti yaitu small, medium, (paling sedikit) dan 0.3 halaman tiap detik (paling banyak).
large. Properti small digunakan untuk menyesuaikan Pengujian beta dilakukan dengan melakukan
resolusi layar yang kecil, properti medium digunakan untuk presentasi dengan EDP Keuangan. Presentasi dilakukan
menyesuaikan resolusi layar yang lebih besar dari properti dengan melakukan demo program yang telah di-upload ke
small dan properti large untuk resolusi layar yang lebih server untuk mengetahui apakah aplikasi chatting berfungsi
besar lagi. Kode Program 7 menunjukkan pengaturan dengan baik dan sesuai kebutuhan pengguna. Berdasarkan
media query yang digunakan untuk menampilkan layout hasil presentasi dengan karyawan EDP Keuangan, aplikasi
yang berbeda berdasarkan media yang digunakan. berfungi dengan baik dan sesuai dengan kebutuhan
Gambar 15 menunjukkan tampilan aplikasi ketika pengguna.
diakses pada resolusi layar yang lebih kecil. Dilakukan
penambahan menu pada sisi bawah layar untuk mengakses 5. Kesimpulan
menu melihat daftar user dan melihat pengumuman.
Pengujian sistem dilakukan untuk mencari kesalahan Berdasarkan penelitian yang telah dilakukan maka
pada aplikasi chatting yang dibuat. Pengujian dilakukan dapat diambil kesimpulan bahwa pembuatan aplikasi
untuk mengetahui apakah aplikasi yang sudah dibuat chatting dapat dibuat dengan menggunakan Framework
berjalan dengan baik dan sesuai dengan kebutuhan CodeIgniter, Socket.IO dan Framework Foundation.
user. Pengujian alpha menggunakan metode blackbox Pemanfaatan Framework CodeIgniter dapat diterapkan
yaitu pengujian fungsi-fungsi aplikasi secara langsung konsep MVC (Model View Controller) sehingga penulisan
tanpa memperhatikan alur eksekusi program. Pengujian kode menjadi lebih terstruktur dan terorganisir.
ini dilakukan dengan memeriksa setiap fitur aplikasi. Pemanfaatan Socket.IO cocok untuk pembuatan aplikasi
Berdasarkan pengujian yang dilakukan pada aplikasi realtime seperti aplikasi chatting dan Framework Foundation
chatting, setiap fungsi dapat berjalan dengan baik, termasuk membuat tampilan aplikasi menjadi responsive yang dapat
dapat mengirimkan dan menerima file attacthment dengan menyesuaikan diberbagai resolusi layar.
ukuran maksimum 25 MB. Berdasarkan hal ini, maka Berdasarkan hasil pengujian, aplikasi chatting dapat
disimpulkan bahwa aplikasi ini berfungsi dengan baik dan membantu karyawan EDP Keuangan atau user lainnya
sesuai yang diharapkan. untuk berkomunikasi, attach file dengan ukuran maksimum
Pengujian lainnya juga dilakukan untuk menguji 25 MB, dan menyebarkan informasi jika sewaktu-waktu
performa aplikasi chatting ini ketika digunakan oleh banyak terjadi penambahan atau perubahan program yang
user. Pengujian dilakukan dengan bantuan aplikasi Web dikembangkan oleh karyawan EDP Keuangan. Spesifikasi
Application Testing (WAPT), yaitu melibatkan 110 user. hardware maupun software aplikasi chatting ini tergolong
Hasil pengujian ditunjukkan oleh Gambar 16. aplikasi yang ringan karena merupakan aplikasi berbasis
Berdasarkan grafik pada Gambar 16, dapat dijelaskan web, user hanya membutuhkan web browser kemudian
tentang performance aplikasi yang meliputi waktu response mengakses aplikasi chatting yang sudah diupload ke server
yang dibutuhkan oleh seorang user untuk menunggu dan dengan memanfaatkan jaringan lokal maka untuk
response dari server, waktu download yang dibutuhkan oleh mengakses aplikasi chatting tidak membutuhkan koneksi
user dan banyaknya halaman web yang dapat dieksekusi tiap internet.
detik. Hasil pada grafik menunjukkan bahwa waktu response Saran pengembangan yang dapat dilakukan
aplikasi cenderung tidak stabil. Karena pada interval waktu adalah dengan menambahkan fitur keamanan pada
tertentu terjadi waktu response yang singkat yaitu 0 detik aplikasi chatting. Fitur keamanan ini digunakan untuk
dan kadang terjadi waktu response yang cenderung lama mengenkripsi pesan chat yang dikirimkan. Aplikasi chatting
yaitu 3.03 detik. Dalam analisis waktu response terdapat 3 juga bisa dikembangkan untuk versi aplikasi mobile yang
(tiga) batasan, yaitu waktu response 0.1 detik merupakan tersinkronisasi ke aplikasi chatting web ini, sehingga user
batas ideal bagi user dalam menunggu response dari server, experience menjadi lebih baik.
1.0 detik merupakan batas yang masih bisa ditoleransi dan
untuk batas 10 detik merupakan batas yang tidak dapat 6. Daftar Pustaka
ditoleransi lagi, karena menurut survey waktu response yang
memasuki detik ke 8.0 akan membuat user meninggalkan [1] M. Z. Teddy, dan D. W. Surya, “Aplikasi Chat
sistem. Dari grafik dapat disimpulkan bahwa waktu pada Handphone dan Komputer dengan Media
response masih dapat ditoleransi, karena berada dalam batas Bluetooth (Bluetooth Chat),” Jurnal Teknologi
0.0 - 3.0 detik. Informasi - Aiti, vol. 4, no. 1, pp. 60-74, 2009.
Download time yang dimaksud di sini adalah waktu yang
dibutuhkan pada saat user melihat web title (pada browser title [2] S. Roni, dan S. Edhy, “Membangun Aplikasi
bar) hingga user dapat melihat halaman web yang meliputi Chatting Berbasis Multiuser,” Jurnal Dasi, vol. 10,
frame, tabel dan HTML text. Dari grafik pada Gambar 16 no. 1, pp.3-22, 2009.
terlihat bahwa download time dapat dikatakan stabil (waktu [3] E. Sularso, W. S. Raharjo, & Y. Lukito, “Implementsi
download tidak berubah untuk tiap periode waktu) dan Algoritma RijnDeal 128 pada Aplikasi Chatting
singkat (waktu download hanya 0 detik). Berbasis HTML WebSocket,” Jurnal Infromatika,
Pages per second yang dimaksud adalah banyaknya vol. 10, no. 2, pp. 66-79, 2014.
halaman web yang dapat dieksekusi tiap detik. Hal ini

Vol. 4 No. 1 | Juni 2018 KHAZANAH INFORMATIKA |ISSN: 2621-038X, Online ISSN: 2477-698X
 Perancangan Aplikasi Chatting Berbasis Web... 15

[4] Priyanto, D. Mahir Komputer Tanpa Kursus. [8] Nugroho, A. Mengembangkan Aplikasi Basis Data
Belajar Mudah Internet. Yogyakarta: MediaKom, Menggunakan C# dan SQL Server. Yogyakarta:
2009. Andi, 2010.
[5] Wardana. Menjadi Master PHP dengen Framework [9] Hasibuan, Z. A. Metodologi Penelitian Pada Bidang
CodeIgniter. Jakarta: Elex Media Komputindo, Ilmu Komputer dan Teknologi Informasi: Konsep,
2010. Teknik, dan Aplikasi. Jakarta: Ilmu Komputer
[6] Anonymous. Nodesource. [Online], https:// Univesitas Indonesia, 2007.
nodesource.com/blog/understanding-socketio/, [10] Pressman, R. S. Software Engineering: A
tanggal akses 6 Juli 2016. Practitioner’s Approach, 2001.
[7] Anonymous. Foundation Zurb. [Online], http://
foundation.zurb.com/learn/why-foundation.
html/, tanggal akses 6 Juli 2016.

Vol. 4 No. 1 | Juni 2018 KHAZANAH INFORMATIKA |ISSN: 2621-038X, Online ISSN: 2477-698X