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,
3.
menginformasi, dan berbagi file secara online oleh mahasiswa STT Harapan Medan. 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.
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 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
ANALISIS DAN PERANCANGAN SISTEM
3.1
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.
& 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 : 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
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. IV.
IMPLEMENTASI DAN PENGUJIAN SISTEM
4.1
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.
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. 6. View Web Perintah untuk membuka tampilan halaman aplikasi web 7. Logout Perintah untuk mengakhiri sesi pada halaman administrator
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 :
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 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.
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.
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 : 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
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.
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. 4.1.8 Tampilan Halaman Upload & Download Pada tampilan halaman upload & download seperti pada gambar di bawah ini :
KESIMPULAN
5.1
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 memilih file yang akan dituju maka pengguna dapat meng-klik tombol “kirim” untuk mengirim file tersebut. 4.1.9 Tampilan Halaman Logout
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.
