## JIPI (Jurnal Ilmiah Penelitian dan Pembelajaran Informatika)
Volume 07, Nomor 03, September 2022 : 780–791

## RANCANG BANGUN FITUR CHAT PADA EPORTFOLIO BERBASIS WEB
Edo Herlalang 1) , Irwan A. Kautsar 2)
1, 2) Informatika, Fakultas Sains Dan Teknologi, Universitas Muhammadiyah Sidoarjo Jl.Raya Gelam No. 250, Candi sidoarjo,612171 e-mail: herlalang@gmail.com 1) , irwan@umsida.ac,id 2)

## ABSTRAK
Dalam penilitian ini dilatar belakangi dengan adanya perkembangan dalam bidang tecknologi dunia modern dari masa ke masa  yang  semakin  maju.  Seperti  penggunaan  ePortfolio  yang  merupakan  portofolio  individu  dalam  format/bentuk elecktronik.  Sehingga  definisi  sebuah  ePortfolio  sangat  dibutuhkan  memiliki  fitur  chat  untuk  berkomunikasi  atau  bertukar pesan  dalam  platform  tersebut.  Sehingga  untuk  mengatasi  kebutuhan  pada  fitur  tersebut,  bisa  dilakukan  dengan  cara menambah  racangan  fitur  chat  pada  aplikasi  ePortfolio  atau  kolom  coment  untuk  memudahkan  berkomunikasi  dan berkomentar antara pihak satu dengan pihak lainya. Dengan menggukan bahasa pemograman PHP dan database MySQL sebagai  penyimpan,  mengatur  dan  membuat  data  yang  diperlukan  dalam  merancang  aplikasi,  diharapkan  dapat dikembangkan dan dipelajari dengan mudah oleh perancang sehingga bisa dijalankan pada WEB tersebut, dan juga dapat dijalankan pada aplikasi mobile. Penilitian ini sudah menggunakan metode literatur terhadap aplikasi chat yang ada pada saat ini. Fitur tersebut akan sangat berguna dan sangat efisien, bagi pengguna hasilnya dapat memenuhi kebutuhan pada aplikasi ePortfolio tersebut.

## Kata Kunci: ePortfolio, Chat, Komunikasi

## ABSTRACT
The background of this research is the developments in the field of modern world technology from time to time, which are becoming increasingly advanced. Such as the use of ePortfolios, which are individual portfolios in electronic format or form. So the definition of an ePortfolio is very much needed to have a chat feature to communicate or exchange messages on the platform.  So,  to  overcome  the  need  for  these  features,  it  can  be  done  by  adding  a  chat  feature  design  to  the  ePortfolio application or the comment column to make it easier to communicate and comment between one party and another. By using the PHP programming language and the MySQL database as storage, organizing and creating the data needed in designing applications, it is hoped that designers can develop and learn easily so that they can run on the WEB and can also run on mobile applications. This research used the literature method on chat applications that exist at this time. This feature e will be very useful and very efficient for users whose results can meet the needs of the ePortfolio application.
Keywords: ePortofolio, Chat, Communication

## I. P ENDAHULUAN
ePortofolio atau biasa disebut Portofolio elecktronik adalah kumpulan bukti elektronik yang dikumpulkan  dan dikelola oleh pengguna, terutama digunakan dalam Web. Bukti elecktronik tersebut dapat mencangkup teks input, file elecktronik, gambar, multimedia, entriblog, dan hyperlink. ePortofolio juga merupakan sebuah platform yang berisi  dokumentasi  hasil  karya  seseorang  atau  perusahaan  dan  ditampilkan  dalam  bentuk  wibsite.  Manfaat ePortofolio sangat beragam tergantung dari penggunaan dibidang individu pengguna. ePortofolio sangat berbeda dengan blog. ePortofolio adalah suatu platform yang digunakan untuk mempromosikan diri atau sebuah suatu berita. Hal tersebut menjadi sebuah permasalahan, karena selama ini pengguna hanya bisa melihat dan membaca hasil dari platform  tersebut.  Sehingga  di  butuhkan  fitur  chat  dalam  platform  ePortofolio  agar  dapat  mengomentari  atau berkomunikasi  lewat  fitur  ini.  Dengan  adanya  penambahan  fitur  chat  dalam  platform  ePortofolio  penulis  atau pambaca  bisa  saling  berkomunikasi  di  dalam  platform  ePortofolio  tersebut  dengan  cara  berkomentar,  selain  itu komunikasi  juga  berfungsi  sebagai  kendali  yang  berarti  kemunikasi  tersebut  berperan  penting  untuk  mengontrol perilaku  pembaca  baik  secara  perorangan  maupun  kelompok.  Karena  pada  saat  ini  aplikasi  chatting  merupakan sarana komunikasi yang cepat dan mudah digunakan dalam mengakses informasi melalui komunikasi.[1] Dimana tugas seorang komunikator adalah menjelaskan pesan utama secara jelas dan sedetail mungkin. Dengan demikian komunikasi dapat meminimalisir terjadinya kesalah pahaman. Dengan adanya permasalahan yang dialami, penulis membuat penambahan fitur chat untuk dapat memudahkan berkomunikasi atau berinteraksi antar pengguna dengan tujuan  agar  lebih  nyaman  dalam  menggunakan  platform  ePortofolio.  Oleh  karena  itu  penulis  mengajukan  judul penelitian “Rancang Bangun Fitur Chat Pada ePortofolio Berbasis Web” melalui platform KONRO.app.

## JIPI (Jurnal Ilmiah Penelitian dan Pembelajaran Informatika)
Volume 07, Nomor 03, September 2022 : 780–791
Berdasarkan uraian latar belakang diatas, maka rumusan masalah pada penelitian ini adalah : Bagaimana  memberikan  pengalaman  pengguna  yang  terbaik  dalam  menggunakan  ePortofolio?,  Bagaimana pengguna  agar  bisa  berinteraksi  dengan  penulis  melalui  ePortofolio?,  Bagaimana  membangun  sistem komunikasi yang mudah agar pengguna bisa mengetahui info lebih detail tentang media di ePortofolio ? Pembatasan  masalah  digunakan  untuk  menghindari  adanya  penyimpangan  maupun  pelebaran  pokok  masalah supaya  penelitian  tersebut  lebih  terarah  dan  memudahkan  dalam  pembahasan  sehingga  tujuan  penelitian  akan tercapai. Beberapa batasan masalah dalam penelitian ini adalah sebagai Media informasi ini hanya berlaku untuk platform KONRO.app dan tidak untuk semua media. Arti kata berkomunikasi pengguna hanya bisa berkomentar tidak  untuk  berkomunikasi  melalui  chat  personal.  Sesuai  dengan  permasalahan  yang  disebutkan  diatas,  maka tujuanya  untuk  membangun  fitur  chat  yang  dapat  berkomentar  dengan  mudah  agar  dapat  memastikan  informasi tersebut  secara  detail  dan  dapat  menghindari  informasi  yang  tidak  diinginkan/hoax  oleh  pengguna  adalah menambahkan  fitu  chat  pada  aplikasi  ePortfolio  dan  mengembangkan  platform  aplikasi  tersebut  dengan menambahkan kolom komentar agar bisa di baca oleh banyak pengguna. Adapun beberapa manfaat yang diperoleh dari penelitian ini bagi penulis maupun bagi pengguna adalah sebagai berikut : Bagi penulis secara langsung maupun tidak  langsung  akan  memahami  permasalahan  yang  akan  digunakan  sebagai  bahan  penelitian,  maupun  yang berhubungan dengan sistem informasi berbasis web. Dengan dibangunya sistem ini diharap dapat mempermudah masyarakat dalam mencari informasi khususnya agar bisa mengetahui infomasi baru selain dari media cetak dan televisi.
Dalam  penelitian  sebelumnya  yang  pertama  dilakukan  oleh  Ratih  Dewanti  yaitu  “Pengembangan  ePortfolio Berbasis Website Untuk Meningkatkan Habits Of  Mind”. Perancangan ini dibuat untuk memberikan kemudahan bagi  pengguna  dalam  melaksanakan  penilitian  pada  tugas,  adanya  pengembangan  penilitian ini  diharapkan  bisa membantu para guru dalam proses pembelajaran dan dapat diaplikasikan ePortfolio yang menggunakan teknologi Website.[2]
Dalam  penelitian  sebelumnya  yang  kedua  dilakukan  oleh  Firlya  Adinta  yaitu  “Rancang  Bangun  Aplikasi Chatting Berbasis WEB Menggunakan Docker”. Penelitian ini mencoba untuk melakukan rancang bangun aplikasi chatting berbasis web menggunakan teknoligi docker dalam pembuatan aplikasi chatting, pada procject yang kali ini akan menghasilkan output atau hasil akhir berupa aplikasi-aplikasi yang menerapkan teknologi docker dalam tahap pengimplementasianya.[3]
Dalam penelitian sebelumnya yang ketiga dilakukan oleh Ahmad Khairil yaitu “Rancang Bangun Fitur Aplikasi Chatting  Keluarga  Menggunakan  Fitur  Device  Location  Berbasis  Web”.  Perancangan  ini  bertujuan  untuk menambahkan  fitur  users  device  location  atau  loksai  pengguna  dalam  lingkup  keluarga,  dimana  setiap  anggota keluarga  terutama  orang  tua  butuh  pemantauan  lokasi  anak-anaknya  secara  realtime  dengan  aplikasi  chatting sehingga dengan fitur ini orang tua tidak perlu kawatir dan secara langsung akan tampil lokasi pada aplikasi ini.[4] Dari beberapa penelitian diatas kami mencoba untuk menangani masalah tersebut dengan menambahkan fitur atau  peningkatan  dari  segi  user  interface  dari  aplikasi  chat  sehingga  dapat  mempermudah  pengguna  untuk menggunakan aplikasi chat atau user friendly.

## II. METODE PENELITIAN
Secara garis besar, strategis yang digunakan dalam ekplorasi ini, antara lain sebagai berikut :

## A. Metode Pengumpulan Data
Untuk mendapatkan informasi, data-data penunjang serta teori dalam penyusunan skripsi ini, maka diperlukan teknik pengumpulan data antara lain :
1. Studi Pustaka, adalah  metode pencarian  data dari  buku, browsing internet,  atau data terkait  dokumen  yang diperlukan untuk meneliti dan membangun fitur chat ePortfolio BerbasisWeb.
2. Pengamatan,  khususnya  bermacam-macam  informasi  dan  data  yang  dikumpulkan  dari  berbagai  sumber, misalnya aplikasi chat lainya untuk implementasi fitur chat lainya
3. Web browsing, yaitu penulis mencari data-data pendukung di internet.

## B. Desain dan Implementasi
Dalam pembangunan fitur ini terdapat beberapa pendekatan yang dapat digunakan adalah System Development Life  Cycle  (SDLC),  Xtreme  Programming  (XP),  Rapid  Application  Development  (RAD),  Waterfall, dan  lain sebagainya. Pada penilitian ini metode yang digunakan adalah metode Rapid Application Development (RAD). Rapid  Application  Development  (RAD) adalah  model  proses  pengembangan  perangkat  lunak  yang  bersifat incremental terutama untuk waktu pengerjaan yang pendek. RAD merupakan model proses perangkat lunak yang

## JIPI (Jurnal Ilmiah Penelitian dan Pembelajaran Informatika)
Volume 07, Nomor 03, September 2022 : 780–791
menekankan pada daur pengembangan hidup yang singkat, dan versi adaptasi cepat dari metode Waterfall dengan menggunakan  kontruksi  komponen.  [5].  Pendekatan  ini  adalah  semacam  pendahulu  untuk  manajemen  proyek yang  gesit,  karena  dapat  mengikuti  perkembangan  bisnis  dan  permintaan  pasar  yang  terus  berkembang, pengembangan perangkat lunak pada umumnya, misalnya.Seperti model berlapis, pendekatan ini memerlukan perencanaan yang cukup ketat.
Gambar 1. Rapid Application Development
Metode ini memiliki 4 tahapan penjelasan dari masing-masing langkah yang harus diikuti yaitu :

## 1. Menentukan Project Requirements
Tahap pertama adalah menentukan project requirements. project requirements biasanya berisikan apa saja yang harus dicapai dalam sebuah proyek dan strategi untuk menghadapi permasalahan yang mungkin akan muncul. Orang-orang yang membuat persyaratan proyek adalah pengembang, pelanggan, dan pengguna perangkat  lunak.  Semua  pihak  harus  menyetujui  semua  persyaratan  terlebih  dahulu  sehingga  tidak  ada kesalahpahaman, dan pada saat yang sama menghindari kesalahan yang menghabiskan waktu dan uang di kemudian hari.
2. Pembuatan Prototipe
Langkah  kedua  dalam  pengembangan  aplikasi  cepat  adalah  membuat  prototipe.  Alih-alih  mengikuti persyaratan  dengan  ketat,  pengembang  dengan  cepat  mengembangkan  prototipe,  dengan  fitur  dan fungsionalitas  yang  diperlukan.  Prototipe  kemudian  diberikan  kepada  pelanggan  untuk  mengetahui  apa yang mereka suka dan tidak suka, pada tahap ini kiriman jauh dari sempurna, hanya menunjukkan fitur dan fungsionalitas apa yang akan ada. Dengan cara ini pengguna dapat menentukan kata terlebih dahulu.
3. Bangun dengan cepat Kumpulkan umpan balik
Langkah ketiga dalam membangun aplikasi dengan cepat adalah melihat umpan balik pengguna. Umpan balik  yang  disebutkan  di  sini  mencakup  fitur,  fungsi,  gambar,  serta  tampilan  dan  nuansa  program  yang sedang dikembangkan. Setelah itu, prototipe akan dikembangkan kembali sampai pelanggan setuju untuk menyempurnakan  produk  seperti  yang  disebutkan  sebelumnya,  kedua  langkah  ini  akan  diulang  terus menerus, sampai hasil yang diinginkan tercapai.
4. Membuat atau menyempurnakan produk
Langkah terakhir adalah menerapkan hasil umpan balik dan membuat produk akhir. Fitur, fungsi, gambar dan tampilan akan ditinjau oleh pelanggan. Pada tahap ini, tes akan dilakukan jika diperlukan. Pengujian mencakup stabilitas, kegunaan, dan pengujian lainnya untuk memastikan semuanya terkendali.

## JIPI (Jurnal Ilmiah Penelitian dan Pembelajaran Informatika)
Volume 07, Nomor 03, September 2022 : 780–791

## III. HASIL DAN PEMBAHASAN

## A. Kerangkan Kerja
Kerangka Kerja dalam penelitian ini adalah rincian terhadap setiap masing - masing kerangka kerja yang telah disusun agar penelitian yang dilakukan dapat secara terstruktur dan jelas. Kerangka kerja penelitian mengenai penambahan fitur chatting pada platform ePortfolio Berbasis Web, pengambilan data dan materi didapat berdasarkan menghimpun berbagai jurnal serta pengalaman penulis sepanjang tahun ajaran pendidik.

## B. Bahan Dan Alat Penilitian
Supaya bisa menajalankan progam aplikasi yang ingin digunakan memerlukan perkangkat keras dan perangkat lunak. Berikut beberapa bahan dan alat yang digunakan antra lain :
1. Bahan Penelitian
Alat-alat yang diperlukan dalam penelitian rancang bangun fitur chatting ePortofolio Berbasis Web, serta aplikasi terdahulu yang sudah ada.
2. Dalam pembuatan fitur ini penelitian menggunakan alat sebagai berikut :
a. Perangkat Keras Laptop dengan spesifikasi sebagai berikut :
Processor : Intel 2core N3360, up to 2.4GHz RAM    : 2GB HDD     : 500GB OS      : Windows 10
b. Perangkat Lunak
Penggunaan perangkat lunak dalam pembuatan fitur chat pada platform ePortofolio Berbasis Web adalah sebagai berikut :

## 1) WEBSITE
Website dapat diartikan sebagai suatu kumpulan-kumpulan halaman yang menampilkan berbagai macam informasi teks, data, gambar diam maupun bergerak, data animasi, suara, video maupun gabungan dari semuanya, baik itu yang bersifat statis maupun yang dinamis, dimana membentuk satu  rangkaian  bangunan  yang  saling  berkaitan  dimana  masing-  masing  dihubungkan  dengan jaringan halaman atau hyperlink. Definisi secara umum, website adalah kumpulan dari berbagai macam halaman situs yang terangkum di dalam sebuah domain atau subdomain, yang berada di dalam  WWW  (World  Wide  Web)  dan  tentunya  terdapat  di  dalam  Internet.  Halaman  website biasanya  berupa  dokumen  yang  ditulis  dalam  format  Hyper  Text  Markup  Language  (HTML) (Dina Amalia, 2018). [6]

## 2) CHATTING
Chatting  merupakan  sebuah  media  pembicaraan  melalui  tulisan,  yang  terjadi  secara  tidak langsung dengan menggunakan koneksi internet, dimana pesan itu dikirim langsung tanpa harus menunggu terlebih dahulu. Chatting tidak hanya dimanfaatkan untuk kalangan remaja saja, tetapi sudah merambah dikalangan dewasa bahkan orang tua sekalipun. Adanya bantuan chatting, kita bebas  berbagi  informasi  apa  saja  mulai  dari  pekerjaan  kantor,  pertemanan,  pelajaran  sekolah, kampus, percintaan dan perjodohan, sampai dengan hal bersifat pribadi sekalipun. [7]

## 3) XAMPP
XAMPP  adalah  perangkat  lunak  bebas,  yang  mendukung  banyak  sistem  operasi,  merupakan kompilasi dari beberapa program. Fungsinya adalah sebagai server yang berdiri sendiri (localhost), yang terdiri atas program Apache HTTP Server, MySQL database, dan penerjemah bahasa  yang  ditulis  dengan  bahasa  pemrograman  PHP  dan  Perl.  Nama  XAMPP  merupakan singkatan dari X (empat sistem operasi apapun), Apache, MySQL, PHP dan Perl. Program ini tersedia  dalam  GNU  General  Public  License  dan  bebas,  merupakan  web  server  yang  mudah digunakan  yang  dapat  melayani  tampilan  halaman  web  yang  dinamis.  Untuk  mendapatkanya dapat mendownload langsung dari web resminya. [8]

## 4) PHP
PHP atau kependekan dari Hypertext Preprocessor adalah salah satu bahasa pemrograman open source  yang  sangat  cocok  atau  dikhususkan  untuk  pengembangan  web  dan  dapat  ditanamkan pada  sebuah  skripsi  HTML.  Bahasa  PHP  dapat  dikatakan  menggambarkan  beberapa  bahasa pemrograman  seperti  C,  Java,  dan  Perl  serta  mudah  untuk  dipelajari.  PHP  merupakan  bahasa

## JIPI (Jurnal Ilmiah Penelitian dan Pembelajaran Informatika)
Volume 07, Nomor 03, September 2022 : 780–791
scripting  server  – side,  dimana pemrosesan  datanya  dilakukan pada sisi server. Sederhananya, serverlah yang akan menerjemahkan skrip program, baru kemudian hasilnya akan dikirim kepada client yang melakukan permintaan. Adapun pengertian lain PHP adalah akronim dari Hypertext Preprocessor, yaitu suatu bahasa pemrograman berbasiskan kode – kode (script) yang digunakan untuk mengolah suatu data dan mengirimkannya kembali ke web browser menjadi kode HTML”. [9] “PHP (atau resminya PHP: Hypertext Preprocessor) adalah skrip bersifat server – side yang ditambahkan ke dalam HTML”. Pada  prinsipnya server akan  bekerja  apabila  ada permintaan dari client. Dalam  hal ini client menggunakan kode-kode PHP untuk mengirimkan permintaan ke server. [10]

## 5) MySQL
My Structured Query Language atau MySQL adalah salah satu jenis database server yang sangat terkenal  dan  banyak  digunakan  untuk  membangun  aplikasi    web  yang  menggunakan  database sebagai  sumber  dan  pengolahan  datanya.  MySQL  dikembangkan  oleh  perusahaan  Swedia bernama MySQL AB yang pada saat ini bernama Tcx DataKonsult AB sekitar tahun 1994-1995, namun cikal bakal kodenya sudah ada sejak tahun 1979. Awalnya Tcx merupakan perusahaan pengembang  software  dan  konsultan  database,  dan  saat  ini  MySQL  sudah  diambil  alih  oleh Oracle Corp. Kepopuleran MySQL antara lain karena MySQL menggunakan SQL sebagai bahasa dasar untuk mengakses databasenya sehingga mudah untuk digunakan, kinerja query cepat, dan mencukupi  untuk  kebutuhan  database  perusahaan-perusahaan  yang  berskala  kecil  sampai menengah, MySQL juga bersifat open source (tidak berbayar). MySQL merupakan database yang pertama kali didukung oleh bahasa pemrograman script untuk internet (PHP dan Perl). MySQL dan PHP dianggap sebagai pasangan software pembangun aplikasi web yang ideal. MySQL lebih sering digunakan untuk membangun aplikasi berbasis web, umumnya pengembangan aplikasinya menggunakan bahasa pemrograman script PHP. [11]

## C. Teknik Pengumpulan Data
Agar memperoleh informasi, data pendukung, dan teori selama penyusunan proposal skirpsi ini,  memerlukan teknik pengumpulan data. Teknik yang digunakan adalah studi pustaka. Studi Pustaka merupakan metode pencarian data buku, browsing internet atau literatur – literatur yang berkaitan dengan data yang dibutuh kan supaya penilitian dan pembuatan fitur chatting ePortofolio BerbasisWeb.

## D. Perancangan Sistem
Berdasarkan hasil studi pustaka, perancangan sistem dimulai dengan perancagan User Case Diagram, rancangan rancangan sistem yang berjalan.
1. Use Case Diagram
a. Terlebih dahulu bagi pengguna baru yang belum memiliki akun agar bisa melakukan pendaftaran.
b. Jika pengguna sudah memiliki akun dapat langsung mengirimkan file akun yang telah terdaftar dan melakukan login.
c. Setelah berhasil login, pengguna dapat langsung mengirim pesan atau mengobrol dengan pengguna lain.
d. Selain itu pengguna juga bisa dapat mengganti profil bidoata diri agar lebih mudah di kenali oleh pengguna lain, seperti edit gambar profil, nama, dan status profil.
e. Jika sudah ingin mengakhiri obrolan pengguna bisa melakukan logout.

## JIPI (Jurnal Ilmiah Penelitian dan Pembelajaran Informatika)
Volume 07, Nomor 03, September 2022 : 780–791
2. Sequence Diagram
a. Disaat pertama kali pengguna membuka aplikasi, pengguna akan di arahkan ke halaman utama untuk login terlebih dahulu.
b. Lalu sistem akan meminta database pengguna dengan benar agar bisa terkait dengan akun profilnya
c. Jika benar akun pengguna akan diarahkan ke beberapa pilihan seperti memilih teman untuk mengobrol atau melihat riwayat pesan sebelumnya.
d. Setiap pengguna disaat mengirimkan pesan, sistem akan mencatat pesan tersebut ke database dan menampilkan ke client interface.
Gambar 3. Sequence Diagram
3. Flowchart
a. Pengguna memulai/membuka aplikasi terlebih dahulu.
b. Kemudian login dengan akun yang sudah terdaftar.
c. Sebelum melakukan obrolan jika benar akan diarah ke pengaturan profil seperti input nama, edit profil, edit foto.
d. Setlah itu bisa memulai obrolan, mengirim pesan atau menerima pesan.
e. Logout aplikasi jika sudah tidak digunakan.

## JIPI (Jurnal Ilmiah Penelitian dan Pembelajaran Informatika)
Volume 07, Nomor 03, September 2022 : 780–791

## Gambar 4. Flowchart Pengguna

## E. Kerangka Penelitian
Kerangka penelitian adalah suatu konsep yang ada dalam suatu penelitian dengan cara menghubungkan visualisasi variabel yang satu dengan variabel yang lain sehingga pada saat penelitian dilakukan menjadi tersturktur secara sistematis dan dapat dipahami oleh semua pihak. Berikut penjelasan terkait gambar 5 yaitu kerangka penelitian :
a. Pengumpulan data dilakukan untuk menghimpun beberapa sumber yang didapat sebelum memulai penelitian
b. Setelah itu membuat perancangan storyboard dan perancangan interface agar penelitian dapat tersturktur dengan baik.
c. Kemudian tahap selanjutnya adalah pembuatan script, yaitu dengan menggabungkan metode yang akan di gunakan dan storyboar itu sendiri, jika sistem berjalan dengan baik maka progam siap digunakan, jika tidak berjalan dengan baik akan kembali ke pembuatan script.
d. Selesai.
Gambar 5. Kerangka Penelitian

## JIPI (Jurnal Ilmiah Penelitian dan Pembelajaran Informatika)
Volume 07, Nomor 03, September 2022 : 780–791
phpMyAdmin adalah aplikasi web untuk manajemen database MySQL dan database MariaDB yang lebih mudah melalui antarmuka  grafis. Aplikasi web ini ditulis dalam bahasa pemrograman PHP. Aplikasi web ini ditujukan untuk mempermudah pengelolaan database MySQL dan MariaDB dengan menghadirkan antar muka web yang lengkap dan menarik.
a. Di dalam database ini menggunakan 3 tabel, yaitu tabel chats (tabel ini untuk menyimpan isi percapakan di dalam obrolan), tabel conversations (tabel ini untuk menyimpan berapa banyak kontak percakapan yang di hubungi user tersebut terhadap user lainya), tabel users (tabel ini untuk menyimpan data akun dari setiap user).
Gambar 6. Database
b. Pada tabel ini berfungsi untuk menjelaskan struktur penyimpanan isi percapakan di dalam obrolan, pada tabel chats yaitu :
chat_id      : daftar urutan obrolan dari yang pertama hingga terakhir from_id     : untuk mengetahui pesan dari user berapa to_id        : untuk mengetahui pesan dari user pengguna message    : isi pesan/percakapan dari setiap user opened      : untuk mengetahui pesan yang telah di baca created_at   : untuk mengetahui tanggal dan waktu yang telah di kirim ke user tersebut

## JIPI (Jurnal Ilmiah Penelitian dan Pembelajaran Informatika)
Volume 07, Nomor 03, September 2022 : 780–791
c. Pada tabel ini berfungsi untuk menjelaskan berapa banyak kontak percakapan yang di hubungi user tersebut terhadap user lainya, pada tabel converstation yaitu : converstation_id  : untuk mencatat daftar urutan percakapan sesama user user_1          : daftar dari pihak pertama yang melakukan obrolan user_2          : daftar dari pihak kedua yang melakukan obrolan
Gambar 8. Database Tabel coverstation
d. Pada tabel ini berfungsi untuk mengetahui berapa banyak penyimpanan data akun dari setiap user, pada tabel users yaitu :
user_id      : daftar nomor akun id dari user yang telah terdaftar name       : nama akun profil dari user tersebut username    : nama id pengguna dari akun user tersebut password    : kata sandi pengguna dari user tersebut p_p         : foto profil dari user tersebut last_seen    : status terakhir diliat dari akun user tersebut

## JIPI (Jurnal Ilmiah Penelitian dan Pembelajaran Informatika)
Volume 07, Nomor 03, September 2022 : 780–791

## G. Perancang Interface
1. Halaman Register
Pada tampilan halaman ini pengguna diharuskan mendaftar akun terlebih dahulu dan melengkapi setiap data yang diminta. Seperti yang terlihat pada gambar 10.
Gambar 10. Rancangan Halaman Register
2. Menu Login
Untuk selanjutnya setelah memverifikasi data yang terdaftar didatabase pengguna melakukan login pada aplikasi ini. Seperti yang terlihat pada gambar 11.
Gambar 11. Rancangan Menu Login
3. Halaman Utama
Setelah memasukan akun yang sudah terdaftar, maka pengguna langsung diarahkan ke halaman utama untuk dapat menggunakan fitur ini. Seperti yang terlihat pada gambar 12.
Gambar 12. Rancangan Halaman Utama
4. Menu Obrolan
Setelah dari halaman utama pengguna bisa langsung melakukan obrolan dengan user lainya. Seperti yang terlihat pada gambar 13.

## JIPI (Jurnal Ilmiah Penelitian dan Pembelajaran Informatika)
Volume 07, Nomor 03, September 2022 : 780–791

## Gambar 13. Rancangan Menu Obrolan

## H. Hasil dan Pengujian
Pada tahap pengujian blackbox testing diperlukan untuk fokus pada fungsionalitas diaplikasi. Tujuan dari tahap pengujian ini dilakukan dengan cara menjelaskan semua menu yang terdapat pada aplikasi, seperti yang terlihat pada table 1 berikut ini.
TABEL I BLACKBOX TESTING Halaman Proses Hasil Ket Regristrasi Menekan tombol “Sign Up” Menuju halaman Regristrasi OK Regristrasi Menekan tombol “Sign Up”
Menuju halaman
Login OK Regristrasi Menekan tombol “Login” Menuju halaman Utama OK Utama Menekan tombol “Search” Untuk melakukan pencarian dan memulai obrolan OK Utama Menekan tombol “Logout” Keluar halaman utama menuju halaman login OK

## I. Kelebihan dan Kekurangan
Kelebihan dan kekurangan hasil rancangan diatas dapat penulis simpulkan sebagai berikut :
1. Kelebihan dari rancangan fitur diatas antara lain :
- Fitur ini dapat mengirimkan pesan teks secara real time dengan menggunakan koneksi internet tanpa batasan apapun.
- Fitur ini juga dapat mengirimkan pesan lebih dari satu orang dan juga bisa mengetahui profil dari akun tersebut sehingga pengguna bisa tahu profil akun pengguna lain.
2. Kekurangan dari rancangan fitur diatas antara lain :
- Fitur hanya bisa dilakukan menggunakan berbasis web saja.
- Fitur ini tidak dapat digunakan tanpa koneksi internet.

## IV. KESIMPULAN
Berdasarkan  hasil  pembahasan  dan  uji  yang  telah  dilakukan,  dapat  disimpulkan  bahwa  Aplikasi  ini  berguna untuk bertukar informasi antar pengguna lain dengan mudah dan juga dapat membantu memastikan informasi yang ada dari pengguna-pengguna lain dengan cara berkomentar.
Adapun saran yang dapat penulis sampaikan setelah menyelesaikan skripsi ini, bahwa aplikasi ini masih memiliki banyak kekurangan dan jauh dari kata sempurna. Serta tidak menutup kemungkinan untuk mengembangkan dan

## JIPI (Jurnal Ilmiah Penelitian dan Pembelajaran Informatika)
Volume 07, Nomor 03, September 2022 : 780–791
memperbaiki kekurangan yang ada, seperti halnya aplikasi ini direkomendasikan oleh penulis untuk dapat diakses dengan browser karena tampilan yang masih belum sempurna, diharapkan terdapat fitur untuk mengirim gambar atau berupa video dan juga aplikasi dapat kompatibel dengan smartphone.

## D AFTAR P USTAKA
[1] J. G. A. Salam and A. Fakih, “MERANCANG DAN MEMBANGUN APLIKASI CHATING BERBASIS ANDROID MENGGUNAKAN DATABASE FIREBASE DI UNIVERSITAS ISLAM AL-IHYA KUNINGAN,” p. 5.
[2] R. Dewanti, “PENGEMBANGAN E-PORTOFOLIO BERBASIS WEBSITE UNTUK MENINGKATKAN HABITS OF MIND PESERTA DIDIK KELAS X MATA PELAJARAN BIOLOGI,” p. 82.
[3] F. Adinta and I. Neforawati, “RANCANG BANGUN APLIKASI CHATTING BERBASIS WEB MENGGUNAKAN DOCKER,” p. 7.
[4] A. Khairil and R. S. Hayati, “RANCANG BANGUN APLIKASI CHATTING KELUARGA MENGGUNAKAN FITUR DEVICE LOCATION BERBASIS ANDROID,” p. 10.
[5] D. Hariyanto, R. Sastra, and F. E. Putri, “Implementasi Metode Rapid Application Development Pada Sistem Informasi Perpustakaan,” vol. 13, no. 1, p. 8, 2021.
[6] T. S. M. Lestari and S. M. Jaya, “PERANCANGAN SISTEM INFORMASI BERBASIS WEB MELALUI WHATSAPP GATEWAY STUDI KASUS SEKOLAH LUAR BIASA-BC NURANI,” no. 1, p. 11, 2021.
[7] Sukiman, “Analisis Dan Perancangan Perangkat Lunak Chatting Online Berbasis Web,” p. 12.
[8] R. V. Palit, Y. D. Y. Rindengan, A. S. M. Lumenta, and R. Palit, “Rancangan Sistem Informasi Keuangan Gereja Berbasis Web Di Jemaat GMIM Bukit Moria Malalayang,” vol. 4, no. 7, p. 7, 2015.
[9] A. Gunawan and A. Adnan, “PERANCANGAN WEBSITE WEBCHAT MENGGUNAKAN PHP DAN MYSQL,” vol. 3, no. 1, p. 9, 2016.
[10] A. Firman, H. F. Wowor, and X. Najoan, “Sistem Informasi Perpustakaan Online Berbasis Web,” p. 8, 2016.
[11] T. Wijaya, M. Rusli, E. Syah Rany, and H. Fryonanda, “Membangun Aplikasi Chatbot Berbasis Web Pada CV. Unomax Indonesia,” KALBISCIENTIA J. Sains Dan Teknol. , vol. 6, no. 2, p. 110, Sep. 2020, doi: 10.53008/kalbiscientia.v6i2.45.