pengembangan dan perancangan sistem media chatting, news, and

PENGEMBANGAN DAN PERANCANGAN SISTEM MEDIA
CHATTING, NEWS, AND SHARING ONLINE
BERBASIS WEB PADA KAMPUS
STT HARAPAN MEDAN
1,2
Reza Pohan1
Jurusan Teknik Informatika Sekolah Tinggi Teknik Harapan Medan
Jl. HM Jhoni No. 70 Medan, Indonesia
[email protected]
ABSTRAK
Situs media sosial sangat akrab di telinga kita. Bahkan mungkin setiap orang pasti menggunakan situs media
sosial termasuk juga mahasiswa. Di dalam situs media sosial ini mahasiswa dapat bersosialisasi dengan
temannya di dunia maya. Dari permasalahan tersebut memunculkan gagasan untuk membuat suatu aplikasi
berbasis web yang didalamnya mahasiswa dapat melakukan chatting, mendapatkan informasi, dan juga berbagi
file secara online dengan yang lainnya. Didukung dengan adanya jaringan internet aplikasi ini digunakan sebagai
media penghubung antara satu mahasiswa dan mahasiswa lainnya. Diharapkan aplikasi berbasis web ini dapat
mempermudah antara sesama mahasiswa untuk saling berkomunikasi.
Kata kunci : Aplikasi berbasis web, Jaringan Internet, PHP.
ABSTRACT
Social media sites are very familiar to us. Even maybe everyone would use social media sites as well as students.
In the social media sites, the students can socialize with friends in cyberspace. Of these problem led to the idea
to create a web-based application in which students can chat, get information, and also share files online with
others. Powered by the internet network application is used as a media liaison between the students and other
student. This web-based application are expected to facilitate among fellow students to communicate with each
other.
Keyword : web-based application, internet network, PHP.
I.
1.1
PENDAHULUAN
Latar Belakang
Teknologi Internet sudah tidak diragukan
lagi, kebanyakan masyarakat telah memanfaatkan
internet sebagai media komunikasi, karena
merupakan bagian dari teknologi informasi yang
memegang peranan penting dalam era informasi
saat ini. Kebutuhan akan informasi bukan lagi
hanya sebagai pelengkap saja tetapi sudah menjadi
hal mutlak yang diperlukan bagi masyarakat umum.
Internet juga mulai tumbuh pada lingkungan
pendidikan, hiburan, pariwisata, dan lain lain.
Website untuk kampus saat ini sudah
tersedia tetapi belum memiliki fitur layaknya media
sosial bagi mahasiswa. Dan dalam Website yang
akan saya bangun ini diharapkan dapat
mempermudah mahasiswa di Kampus Sekolah
Tinggi Teknik Harapan Medan dalam chatting,
menginformasikan , dan berbagi file secara online.
Berdasarkan uraian pada latar belakang
diatas maka penulis mengangkat sebuah gagasan
judul tugas akhir ini : “Pengembangan dan
Perancangan Sistem Media Chatting, News, and
Sharing Online Berbasis Web Pada Kampus STT
Harapan Medan”.
1.2
Rumusan Masalah
Adapun rumusan masalah adalah sebagai
berikut ini :
1. Bagaimana merancang sebuah aplikasi
website.
2. Bagaimana merancang sebuah web media
sosial yang bisa digunakan untuk saling
chatting, menginformasi, dan saling berbagi
file secara online oleh mahasiswa STT
Harapan Medan.
1.3
Batasan Masalah
Ruang lingkup batasan masalah dalam
Tugas Akhir ini adalah sebagai berikut ini :
1. Perancangan
perangkat
lunak
websie
menggunakan bahasa pemrograman PHP.
2. Bagaimana membuat sebuah web media sosial
yang bisa digunakan untuk saling chatting,
menginformasi, dan berbagi file secara online
oleh mahasiswa STT Harapan Medan.
3. Website sosial media untuk kampus STT
Harapan Medan.
Tujuan Masalah
Adapun tujuan dari penelitian ini adalah
merancang sebuah website yang menyediakan
media chatting, menginformasikan, dan berbagi file
secara online.
database-nya sehingga mudah untuk digunakan.
MySQL juga bersifat open source dan free pada
berbagai platform kecuali pada windows yang
bersifat shareware.
XAMPP adalah sebuah paket instalasi
mudah Apache server yang sudah termasuk
didalamnya MySql sudah termasuk didalamnya
MySQL, PHP. Xampp merupakan salah satu solusi
yang mudah dan cepat untuk masalah instalasi
Apache Server. Aplikasi tersebut gunanya untuk
menjalankan program aplikasi di PC (sebelum di
upload ke server yang sebenarnya).
1.4
1.5
Manfaat Penelitian
Manfaat dari penelitian tugas akhir ini adalah
untuk merancang sebuah Website yang dapat
mudah dipergunakan oleh semua mahasiswa STT
Harapan untuk menjadi sebuah Web Yang
bertujuan untuk aktivitas perkuliahan di lingkungan
Sekolah Tinggi Teknik Harapan Medan.
II.
TINJAUAN KEPUSTAKAAN
2.1
Media Chatting
Media chatting adalah program komunikasi
online (chatting) menggunakan bahasa inggris dan
bahasa indonesia diletakkan dalam sebuah web
server, dan jika pengguna yang ingin menjalankan
program tersebut, pengguna harus registrasi terlebih
2.2
Media Berita
Media berita adalah informasi baru atau
informasi mengenai sesuatu yang sedang terjadi,
disajikan dalam bentuk cetak, siaran, internet, atau
daari mulut ke mulut kepada orang ketiga atau
banyak orang.
2.5
Personal Home Page (PHP)
PHP singkatan dari PHP Hypertext
Processor yang digunakan sebagai bahasa script
server-side dalam pengembangan web yang
disisipkan pada dokumen HTML. Pengguna PHP
memungkinkan web dapat dibaut dinamis sehingga
maintance situs web tersebut menjadi lebih mudah
dan efesien.
2.6
Penelitian Terdahulu
Penelitian mengenai penerapan media
informasi online untuk mempermudah dalam proses
pencarian informasi. Dengan adanya sistem ini
semua informasi dapat terorganisasi secara luas dan
media
informasi
kampus
yang
sudah
terkomputerisasi bertujuan untuk mengolah semua
dokumentasi tentang suatu peristiwa, kejadian, serta
informasi kampus, Untung Rahardja (2013).
Saat ini perkembangan informasi sangat
cepat, oleh karena itu sebagai salah satu perguruan
tinggi yang bergerak di bidang komputer harus
selali berinovasi untuk meningkatkan kualitas
pembelajaran, Dina Fitria (2011).
Virtual Office merupakan salah satu media
yang mengatasi permasalahan yang ada. Seperti
berbagi data (sharing file), mail, dan artikel/berita,
Yudha Wastu Firnandha (2006).
III.
2.3
Media Sharing Online
File sharing adalah sebuah aktivitas untuk
berbagai file untuk didownload dengan pengguna
komputer lainnya melalui jaringan internet maupun
jaringan lokal. Prinsip kerja dari file sharing
biasanya menggunakan model distribusi peer-topeer dimana prinsip kerjanya adalah aktivitas
download file dilakukan secara langsung antara
satu komputer dan komputer lain tanpa melibatkan
komputer server (Mandi, 2012).
2.4
Basis Data (Database)
MySQL adalah salah satu jenis database
server yang sangat terkenal dan banyak digunakan
untuk membangun aplikasi web yang database
sebagai sumber dan pengelolaan datanya.
Kepopuleran MySQL antara lain karena MySQL
menggunakan SQL sebagai dasar untuk mengakses
3.1
ANALISIS DAN PERANCANGAN
SISTEM
Analisis Sistem
Berikut adalah spesifikasi sistem hardware
dan software yang digunakan dalam proses
pembuatan aplikasi web ini, dan bisa juga dijadikan
rekomendasi dalam hal pengembangan aplikasi
tersebut.
1. Hardware :
1. Processor : Intel(R) Celeron(R)
2. Random Acsess Memory (RAM) : 2.00 Gb
3. Hardisk : 500 Gb
4. CD-ROM
2. Software :
1. Sistem Operasi : Windows 8 Pro with
Media Center
2. Macromedia Dreamweaver 8
3. Adobe Photoshop CS3
4. Web Browser
3.2
Perancang Sistem
Setelah tahap analisis sistem, sebagai tindak
lanjut untuk menyelesaikan masalah, maka dibuat
suatu rancangan sistem. Tujuan dari perancangan
sistem adalah untuk memenuhi kebutuhan user
mengenai gambaran yang jelas tentang perancangan
sistem yang akan dibuat serta diimplementasikan.
Perancangan sistem berguna untuk memperbaiki
efisiensi kerja suatu sistem yang telah ada.
3.3
Diagram Konteks
Diagram konteks merupakan diagram yang
menggambarkan kondisi sistem yang di dalamnya
terdapat input maupun output serta menyertakan
terminator yang terlibat dalam penggunaan sistem.
Diagram ini memberika kejelasan tehadap sistem.
Keterangan :
Gambar diatas menjelaskan aliran kerja dari
suatu proses aplikasi web ini. Dimana pada gambar
tersebut menjelaskan dari mulai (start), masuk
halaman utama kemudian halaman login. Setelah
tahap terserbut masuk ke halaman input username
& password. Setelah pada tahap akhir simpan dan
keluar (end).
3.5
PhpMyAdmin
Database terdiri dari beberapa tabel yang di
dalamnya terdapat nama-nama field yang telah
ditentukan. Cara merancang relasi antar tabel ialah
menggunakan halaman PhpMyAdmin dengan
masuk ke alamat “localhost/ phpmyadmin”
kemudian klik database dengan nama “cet” yang
ada pada kolom sebelah kiri.
Gambar 3.1 Diagram Konteks
Keterangan :
Gambar di atas menjelaskan antara “admin”
dan “user”, beserta sistem informasi. Admin dapat
tambah berita dan isi profil di dalam sistem
informasi dan selanjutnya sistem informasi
menampilkan tampilan web kepada admin. Setelah
tahap tersebut, pengguna dapat melihat hasil dari
sistem informasi yang berupa membaca isi dari
sistem informasi yang telah admin tambahkan.
Gambar 3.5 Halaman PhpMyAdmin
3.6
Relasi Antar Tabel
Setelah melakukan tahapan-tahapan tersebut
maka struktur relasi antar tabel pada aplikasi web
ini.
3.4
Activity Diagram
Activity Diagram menggambarkan aliran kerja
(workflow) dari suatu proses.
Gambar 3.3 Relasi Antar Tabel
Gambar 3.4 Activity Diagram
Keterangan :
Didalam relasi antar tabel terdapat struktur
model konseptual yang mendeskripsikan hubunganhubungan antar penyimpanan (Data Flow
Diagram). Pada gambar di atas hubungan yang
terjadi antara himpunan entitas penggguna dengan
sistem informasi yang berupa seperti chatting yang
dapat memberi pesan dan menerima pesan antara
sesama pengguna. Sistem upload&dowload dapat
juga digunakan pengguna untuk mengirim file ke
sesama pengguna. Kecuali dalam database berita
yang hanya admin yang mempunyai akses untuk
masuk kedalam databasenya. Dengan demikian
hubungan antara entitas satu dengan lainnya dapat
dilihat pada gambar di atas.
6.
IV.
7.
IMPLEMENTASI DAN PENGUJIAN
SISTEM
Implementasi
Implementasi adalah suatu tindakan
pelaksanaan dari sebuah rencana yang sudah
disusun secara matang dan terperinci. Implementasi
biasanya dilakukan setelah perencanaan sudah
dianggap tepat. Setelah melakukan tahapan analisis
dan perancangan maka tindakan selanjutnya adalah
pencapaian hasil perangkat lunak yang dibuat.
View Web
Perintah untuk membuka tampilan halaman
aplikasi web
Logout
Perintah untuk mengakhiri sesi pada halaman
administrator
4.1
4.3.2 Tampilan Halaman Profil Website
Pada tampilan halaman profil website adalah
seperti pada gambar di bawah ini :
4.2
Pengujian Sistem
Pengujian sistem dilakukan untuk melihat
apakah aplikasi yang dibangun sudah sesuai dengan
tujuan atau tidak dan bagaimana performa aplikasi
yang dikembangkan. Adapun hasil pengujian
sistem dapat dilihat pada tampilan-tampilan berikut.
Gambar 4.2 Tampilan Halaman Profil Website
4.3
Instalan Aplikasi Halaman Administrator
Pada sub judul berikut ini, akan membahas
satu per satu konten yang dimuat di dalam halaman
administrator aplikasi ini. Dimulai dari menu utama
menu hinnga proses entry data.
4.3.1 Tampilan Halaman Awal Administrator
Pada tampilan halaman awal administrator
adalah seperti gambar di berikut ini:
Keterangan :
Halaman profil website terdapat kolom
yang berisikan informasi untuk halaman awal
aplikasi web ini. Dapat di tambah, di edit, maupun
di hapus sesuai dengan ide dari admin. Terdapat
beberapa menu untuk memperbaharui tulisan,
ukuran tulisan, warna tulisan, dan lain lain. Setelah
admin akan mengakhiri sesi ini maka admin akan
meng-klik tombol “simpan”. Jika admin ingin
mengganti foto untuk profile website dengan cara
meng-klik tombol “browse” pada kolom ganti foto
dan kemudian admin dapat memilih foto yang akan
di update.
4.3.3 Tampilan Halaman Berita Administrator
Pada tampilan halaman berita administrator
adalah seperti gambar berikut ini:
Gambar 4.1 Tampilan Halaman Administrator
Keterangan :
1. Home
Menampilkan ucapan selamat datang kepada
administrator
2. Profil Website
Menampilkan isi informasi yang telah
ditambahkan oleh administrator untuk
tampilan dari halaman awal aplikasi web.
3. Berita
Berisikan informasi dari berita yang telah
ditambahkan oleh administrator untuk
tampilan halaman berita.
4. Member
Berisikan anggota member yang telah menjadi
pengguna aplikasi web
5. Password
Berisikan password anggota member yang
telah pengguna daftarkan.
Gambar 4.3 Tampilan Halaman Berita
Administrator
Keterangan:
Tampilan halaman berita administrator
terdapat beberapa menu yaitu satu kolom
“masukkan judul berita” dan tombol “tambah
berita”. Untuk menambah berita adalah dengan cara
meng-klik tombol “tambah berita”. Setelah selesai
penambahan berita klik tombol “simpan”. Apabila
admin ingin menghapus berita ataupun mengedit
berita adalah dengan cara meng-klik tombol “edit’
atau “hapus” yang terdapat pada kolom bagian
kanan.
4.3.4 Tampilan Halaman Member
Pada tampilan halaman member adalah
seperti gambar di bawah ini :
Keterangan :
Halaman ini menampilkan perintah yang
keluar dari sistem dengan memberi petunjuk “Anda
Telah Keluar Dari Halaman Administrator”.
Setelah meng-klik “OK” maka aplikasi web akan
tampil secara otomatis.
4.1
Instalan Aplikasi Halaman User
Langkah awal untuk menggunakan aplikasi
web ini adalah dengan mengakses alamat root
website yang telah ditentukan. Ketika selesai dan
berhasil masuk ke halaman web ini, maka aplikasi
web ini bisa digunakan pengguna. Berikut ini
terdapat beberapa sub judul yang dapat dilihat
sebagai panduan mengakses aplikasi web ini.
4.1.1 Tampilan Halaman Beranda
Pada tampilan halaman beranda adalah
seperti gambar di bawah ini :
Gambar 4.4 Tampilan Halaman Member
Keterangan :
Pada tampilan halaman member terdapat
tampilan beberapa member yang telah terdaftar
menjadi pengguna pada aplikasi web ini. Dan
beberapa data dari pengguna seperti username,
nama lengkap, e-mail, dan nomor telepon.
4.3.5 Tampilan Halaman Password
Pada tampilan halaman password adalah
seperti gambar di bawah ini :
Gambar 4.5 Tampilan Halaman Password
Keterangan :
Pada tampilan halaman psasword, admin
dapat memperbaharui password lama di ganti
dengan password yang baru.
Gambar 4.7 Tampilan Halaman Beranda
Keterangan :
Halaman beranda menampilkan halaman
awal (interface) aplikasi web ini yang dimulai dari
Beranda. Halaman beranda berisikan data informasi
seputar Kampus Sekolah Tinggi Teknik Harapan
Medan. Informasi berisikan logo Yayasan Sekolah
Tinggi Teknik Harapan, website resmi, alamat, visi,
misi, dan juga pada bagian kanan atas terseedia
nomor telepon Kampus Sekolah Tinggi Teknik
Harapan Medan.
4.1.2 Tampilan Halaman Berita
Pada tampilan halaman berita seperti gambar
di bawah ini :
4.3.6 Tampilan Halaman Logout Administrator
Pada tampilan halaman logout admin adalah
seperti pada gambar d bawah ini:
Gambar 4.6 Tampilan Halaman Logout
Administrator
Gambar 4.8 Tampilan Halaman Berita
Keterangan :
Halaman berita menampilkan isi informasiinformasi yang telah di sediakan oleh admin dan
telah masuk ke dalam database admin, sehingga
pengguna dapat membaca dan mengetahui
informasi-informasi yang ada dalam tampilan
halaman berita. Dengan cara meng-klik menu
“BERITA” mana akan tampil beberapa berita
didalamnya. Apabila pengguna ingin mengetahui
detail berita, pengguna bisa meng-klik “judul
berita” lalu akan tampil detail dari isi berita
tersebut. pengguna dapat meng-klik tombol “next”
jika pengguna ingin melanjutkan berita yang ada.
Keterangan :
Dengan meng-klik menu “REGISTER”
makan akan tampil halaman register yang telah
menyediakan kolom-kolom yang wajib di isi oleh
pengguna baru yang ingin mendaftar. Kolomkolom tersebut berikisan
Nomor Pokok
Mahasiswa, Nama Lengkap, Jenis Kelamin, EMail, No. Telepon, dan Username. Setelah selesai
mengisikan kolom-kolom tersebut pengguna
melanjutkan dengan meng-klik tombol “Daftar”.
4.1.5 Tampilan Halaman Profil
Pada tampilan halaman profil seperti gambar
di bawah ini :
4.1.3 Tampilan Halaman Login
Pada tampilan halaman login seperti pada
gambar di bawah ini :
Gambar 4.11 Tampilan Halaman Profil
Gambar 4.9 Tampilan halaman Login
Keterangan :
Dengan cara meng-klik menu “LOGIN”
maka halaman login akan menampilkan kolom
“Username” dan “Password” yang harus di isi
untuk masuk ke aplikasi website ini. Setelah
pengguna selesai mengisikan kolom –kolom
tersebut dilanjutkan meng-klik tombol “Login”.
Akan tetapi sebelum masuk ke dalam menu
halaman login ini, pengunjung diharuskan
mendaftar terlebih dahulu. Setelah tahap
pendaftaran selesai barulah pengguna dapat masuk
ke aplikasi web ini.
Keterangan :
Halaman profil pengguna menampilkan
beberapa data tentang penggunanya. Dengan cara
meng-klik menu “PROFIL” maka akan tampil data
yang didalamnya berisikan nomor pokok
mahasiswa pengguna, nama lengkap pengguna,
jenis kelamin pengguna, E-mail pengguna, No.
telepon pengguna, dan username pengguna. Data
yang tampil telah ter-upadate otomatis pada saat
mengisikan kolom-kolom yang ada pada halaman
registerasi.
4.1.6 Tampilan Halaman Chatting
Pada tampilan halaman chatting sebagai
gambar dibawah ini :
4.1.4 Tampilan Halaman Registrasi
Pada tampilan halaman registrasi seperti
gambar di bawah ini :
Gambar 4.12 Tampilan Halaman Chatting
Gambar 4.10 Tampilan Halaman Register
Keterangan :
Pada tampilan halaman ini tersedia fitur
chatting antara pengguna satu dengan yang lainnya.
Dengan cara meng-klik salah satu teman yang ada
pada kolom Online Chat maka akan tampil fitur
chat, dengan begitu kepada para pengguna dapat
saling berkomunikasi pada aplikasi web ini. Pada
saat pengguna lain mengirim chat maka menu
chatting akan tampil yang berisikan chat yang telah
di kirim oleh pengguna lainnya. Apabila pengguna
ingin mengakhiri fitur ini maka pengguna dapat
meng-klik tombol “X” maka perintah tersebut akan
menutup fitur chat.
memilih file yang akan dituju maka pengguna dapat
meng-klik tombol “kirim” untuk mengirim file
tersebut.
4.1.9 Tampilan Halaman Logout
Pada tampilan halaman logout seperti pada
gambar di bawah ini :
4.1.7 Tampilan Halaman Profil Pengguna Lain
Pada tampilan halaman profil pengguna
lainnya seperti pada gambar di bawah ini :
Gambar 4.15 Tampilan Halaman Logout
Keterangan :
Halaman ini menampilkan perintah yang
keluar dari sistem dengan memberi petunjuk bahwa
“Logout Berhasil”. Perintah ini mengartikan bahwa
pengguna telah mengakhri sesi aplikasi web ini.
Gambar 4.13 Tampilan Halaman Pengguna Lain
V.
Keterangan :
Pada tampilan halaman pengguna lain
memperlihat beberapa biodata tentang pengguna
lainnya. Dengan cara meng-klik salah satu foto
daftar teman yang ada didalam kolom Online Chat.
Dan data yang tampil termasuk foto, nomor pokok
mahasiswa, nama lengkap, jenis kelamin, e-mail,
nomor telepon, dan username pengguna lain.
Dengan fitur ini dapat mempermudah mengenali
lawan chatting bagi sesama pengguna.
5.1
4.1.8 Tampilan Halaman Upload & Download
Pada tampilan halaman upload & download
seperti pada gambar di bawah ini :
KESIMPULAN
Kesimpulan
Berikut kesimpulan penulis dari pembuatan
aplikasi web ini :
1. Aplikasi web ini dapat mempermudah dalam
hal memberikan dan mendapatkan informasi
online baik secara formal atau nonformal bagi
pengguna yang berbentuk teks/gambar.
2. Perangkat lunak aplikasi digunakan untuk
mendesain dan membuat halaman web
dipermudah dengan adanya Macromedia
Dreamweaver dan mempermudah membaca
kode-kode HTML.
3. Penggunaan PHP memungkinkan web menjadi
lebih mudah dan efisien yang juga merupakan
software open source.
5.2
Gambar 4.14 Tampilan Halaman Upload &
Download
Keterangan :
Halaman ini menampilkan beberapa kolom
yaitu kolom judul, kolom kirim ke, dan tombol
“browser” yang mengeluarkan perintah untuk
memilih file yang akan di pilih. Setelah selesai
Saran
Dari kesimpulan di atas, maka penulis
memberikan saran-saran yang dianggap membantu
dan berguna di masa yang akan datang adalah
sebagai berikut :
1. Diharapkan website ini dapat berguna bagi
pengguna di kampus STT Harapan Medan.
2. Diharapkan website ini dapat dikembangkan
oleh pengguna pada masa akan datang
sehingga dapat lebih berguna untuk kampus
STT Harapan Medan.
DAFTAR PUSTAKA
[1] Sumaryani, Adi (2014) Mengenal Website dan
Jenis-Jenisnya. Jakarta.
[2] Eriyatno (1999) Ilmu Sistem: Meningkatkan
Mutu dan Efektif Manajemen. Jilid Satu. IPB
Press, Bogor, 26.
[3] Jogiyanto (2008) Metodologi Penelitian Sistem
Informasi. Yogyakarta : Andi Offset.
[4] Yuana, Rosihan Ari (2007) Dasar-dasar
Pemrograman PHP, Jakarta.
[5] M. Rudyanto, Arief (2011) Pemrograman Web
Dinamis Menggunakan PHP dan MySQL.
Yogyakarta.
[6] Solihin, Achmad (2006) Pemrograman
Berorientasi Objek dalam PHP, Budi Luhur,
Jakarta
[7] Sofwan, Akhmad (2011) Belajar Mysql
Dengan PHPmyadmin, Perguruan Tinggi
Raharja, Tangerang.
[8] History of Open Source Content Management
Systems,
http://www.webdesignviews.com/2011/05/hist
ory-of-open-source-content-managementsystems/ (Diakses tanggal 07 November 2013).
[9] Henderi (2012) Perancangan Sistem Informasi
Dengan Unified Modeling Language (UML),
STMIK AMIKOM, Yogyakarta. Ramadhan,
Arif (2001) student guide series macromedia
dreamweaver 8. Jakarta.
[10] Tricahyana (2013) 9 Jenis Diagram Dalam
UML, Jakarta.