## PENGEMBANGAN APLIKASI KOPDAR (FORUM KOPI DARAT) DENGAN MENGGUNAKAN  FRAMEWORK CODEIGNITER

## Anang Syaifur Rochman
Fakultas Teknik, Program Studi Teknik Informatika Universitas Muria Kudus Email: 201751011@std.umk.ac.id

## Tutik Khotimah
Fakultas Teknik, Program Studi Teknik Informatika Universitas Muria Kudus Email: tutik.khotimah@umk.ac.id

## ABSTRAK
CV.  Filomena  IT  Media  merupakan  perusahaan  yang  bertujuan  untuk  menciptakan  karya  IT berupa  produk, software ,  video  tutorial, e-book  project dan website yang  berguna  untuk  semua orang dalam mengembangkan usaha. Kopdar (Kopi Darat Indonesia) merupakan sebuah situs web yang  menyediakan  berbagai  layanan  yang  disediakan  oleh  CV.  Filomena  IT  Media.  Pada  versi sebelumnya baik tampilan maupun versi software yang digunakan menggunakan versi yang lama. Hal  ini  menyebabkan  adanya  beberapa  fitur  yang  tersedia  tidak  bisa  digunakan  sebagaimana mestinya. Oleh karena itu, untuk mengikuti perkembangan software perlu dilakukan upgrade pada code yang  dipakai  agar  fitur  yang  tersedia  tetap  berjalan  normal.  Fitur  yang  ada  dalam  sistem tersebut  antara  lain Screencast ,  Artikel,  Forum  Diskusi,  dan Manajemen  System pengembangan perangkat  lunak,  metodologi  yang  digunakan  adalah Software  Re-engineering .  Tahap  pertama yang dilakukan adalah Reverse  Engineering . Tahap  kedua adalah analisa fitur untuk memberikan gambaran  tentang  fungsionalitas  dari website ini.  Tahap  ketiga  perancangan database .  Tahap keempat  proses coding .  Tahap  kelima  proses testing .  Tahap  keenam  proses production ,  Tahap terakhir  adalah  proses maintenance .  Dengan  mengubah  struktur  kode  menggunakan framework codeigniter terbaru, fitur yang ada dapat berjalan dengan normal.
Kata kunci:  landing page, kopdar, tutorial , codeigniter, model view controller

## ABSTRACT
CV.  Filomena  IT  Media is  a  company  designed  to  create  IT  works  consisting  of  products, software, video tutorials, e-book projects and websites that are useful for everyone in developing a business. Kopdar (Kopi Darat Indonesia) is a website that provides various services provided by CV. Filomena IT Media. In the previous version both the version and the software version used were using the old version. This results in some features that cannot be used as they should. Therefore, to keep abreast of the software needs  to  be  updated  on  the  code  used  so  that  the  available  features  continue  to  run  normally.  Existing features  in  this  system  include  Screencast,  Articles,  Discussion  Forums,  and  Management  Systems  for software development, the development method used is Software Re-engineering. The first stage is Reverse Engineering. The second stage is feature analysis to provide an overview of the functionality of this website. The third stage is database design. The fourth stage is coding. The fifth stage is testing. The sixth stage is production process, the last stage is the maintenance process. By changing the structure of the code using the latest version codeigniter framework, that feature can run normally.
Keywords: landing page, kopdar, tutorial , codeigniter, model view controller

## 1. PENDAHULUAN
Semakin berkembangnya Teknologi Informasi dan Komunikasi di dunia membuat para pegiat IT diharuskan untuk mengikuti perkembangan teknologi agar bisa terus bertahan didunia industri. Tidak  terkecuali  di  Indonesia,  dari  176  negara,  posisi  Indonesia  mengalami  peningkatan  dari rangking 114 pada tahun 2015 menjadi 111 pada tahun 2016. Indonesia termasuk dalam 10 besar most  dynamic country untuk kenaikan nilai IP-TIK dari 3,85 pada tahun 2015 menjadi 4,33 pada tahun 2016 ( Internatonal Telecommunicaton Union, dalam Measuring Informaton Society Report 2017). Untuk itu, para pegiat IT di Indonesia mulai untuk terus berkembang agar bisa bertahan dan bersaing  dengan  SDM  IT  dari  luar  negeri.  Salah  satu  cara  yang  bisa  dilakukan  adalah  mencari tutorial  dan  memantau  perkembangan  Teknologi  dibidang software .  Namun,  orang  awam  yang baru  terjun  dalam  dunia  IT  tentu  akan  kesulitan  untuk  memahami  semua  materi  yang  ada  dari internet.
Ada  banyak  sekali  situs  yang  telah  menyediakan  materi-materi  untuk  mengembangkan software dalam Bahasa Indonesia. Salah satunya adalah Kopdar. Dalam penelitian kali ini penulis mengembangkan dengan menggunakan framework codeigniter. Beberapa penelitian pernah dilakukan dan dijadikan sebagai bahan referensi dalam penelitian ini  sebagai  adalah  Perancangan  Sistem  Informasi  Pernikahan  Dan  Status  Pernikahan  Kantor Uurusan  Agama  Kecamatan  Canduang  Agam  Berbasis  Web  Dengan  Framework  Codeigniter[1], Aplikasi  Pendaftaran  Seminar  Menggunakan  Metode  MVC  Berbasis  Website  Menggunakan Framework  Codeigniter  3.1.10  [2],  Aplikasi  Video  Pembelajaran  dengan  Konsep  Youtube  [3], Rancang  Bangun  Sistem  Administrasi  Kerja  Praktek  dan  Tugas  Akhir  Berbasi  Web  dengan menggunakan  framework  codeigniter[4],  dan  Teknologi  Pemrograman  Framework  Model  View Controller pada Sistem Infromasi Penasehat Akademis (studi kasus STMIK Amik Riau)[5].
Berdasarkan  penelitian  penelitian  tersebut  yang  menerapkan  codeigniter  dalam  berbagai kasus  permasalahan,  penulis  mencoba  mengembangkan  aplikasi  kopdar  dengan  menggunakan framework codeigniter  terbaru,  saat  penelitian  ini  dilaksanakan  versi  yang  terbaru  adalah  versi 3.1.10.  Tujuan  dari  penelitian  ini  adalah  agar  fungsi  yang  masih  berjalan  pada website bisa mengikuti perkembangan terbaru saat ini.
Permasalahan  yang  mendasari  penelitian  ini  adalah  saat  menggunakan  versi coding lama suatu  hari  nanti  maka  kode  tersebut  akan  terjadi error /tidak  bisa  digunakan  lagi,  oleh  karena  itu diganti  struktur  kode  yang  ada  dengan  menggunakan framework terbaru  untuk  mengikuti perkembangan dari bahasa pemrograman itu sendiri.

## 2.  METODOLOGI PENELITIAN
Secara umum metode yang digunakan dalam penelitian ini meliputi:
a. Analisa kebutuhan
Pada  tahap  ini  ada  beberapa  tahap  yang  dilakukan.  Pertama  menganalisis  kebutuhan software yang akan digunakan untuk mengembangkan aplikasi ini. Seperti pemilihan software text editor dan tools untuk  manajemen database .  Yang  kedua  adalah  menganalisis  kebutuhan hardware yang akan digunakan.
b. Perancangan Database
Sebelumnya, telah ada database yang dibuat dan digunakan pada aplikasi kopdar versi lama. Oleh karena  itu  pada  tahap  perancangan database ,  dilakukan  revisi  terhadap database lama menyesuaikan fitur – fitur yang akan dikembangkan.
c. Proses Implementasi .
Proses implementasi menggunakan bahasa pemrograman PHP yang dikemas dalam framework codeigniter dan dikombinasi dengan javascript agar hasil bisa menjadi lebi interaktif. Sedangkan database yang digunakan adalah MySQL. d. Proses T esting
Setelah proses implementasi selesai, selanjutnya adalah proses testing dimana aplikasi kopdar diisi dengan dummy data untuk memastikan proses yang dibuat berjalan sebagaimana mestinya.
e. Proses Production
Yang  dilakukan  dalam  tahap  ini  adalah  proses upload aplikasi  yang  telah  matang  pada  server hosting .

## 3. TINJAUAN PUSTAKA
3.1 Codeigniter
Codeigniter  adalah  sebuah framework php  yang  bersifat open source menggunakan  metode MVC  ( Model , View , Controller )  untuk  memudahkan developer atau programmer dalam membangun sebuah aplikasi berbasis web tanpa harus membuatnya dari awal[6]

## 3.2 MVC (Model View Controller)
MVC  merupakan  suatu  konsep  yang  memisahkan  pengembangan  aplikasi  berdasarkan komponen  utama  yang  membangun  sebuah  aplikasi  seperti  manipulasi  data, user  interface ,  dan bagian  yang  menjadi  kontrol  aplikasi[7].  MVC  digunakan  untuk  memisahkan  akses  data  dan logika  bisnis  dari  presentasi  data  dan  interaksi  pengguna.  Pemisahan  dilakukan  agar  setiap perubahan  dalam  logika  presentasi  atau  logika  bisnis  tidak  berpengaruh  satu  sama  lain  sangat kompleks.  Solusi  pemisahan  MVC  diharapkan  dapat  meningkatkan  fleksibilitas  dan usabilitas aplikasi.  Arsitektur  MVC  memisahkan  aplikasi  menjadi  tiga  bagian,  yaitu Model , View dan Controller . Model :  Representasi database ,  termasuk  tabel  desain  terhadap  hubungan  yang  ada antar  tabel.  Fungsi  utama  dari  model  ini  adalah  untuk  menangani  data,  mengambil  data  dari database , memasukkan data ke dalam database , manipulasi data melalui validasi data. View : View untuk membuat model data yang diberikan dan akan mengirimkan gerak/aktivitas dari konsistensi tampilan  data  ke  perubahan  yang  terjadi.  Dengan  mengelompokkan  semua  tampilan  dan  kode presentasi  di  satu  tempat,  akan  memudahkan  untuk  mengubah  tampilan  tanpa  mempengaruhi logika bisnis dan data. Controller : Controller mendefinisikan perilaku yang terjadi pada aplikasi, dan kemudian memetakannya ke dalam tindakan dari pengguna ke model. Pengontrol akan sangat erat  kaitannya  dengan View ,  karena  setiap  interaksi  pengguna  yang  akan  dilakukan  akan ditunjukkan  oleh View dan  direspon  oleh Controller .  Di  dalam controller akan  ada  metode  yang akan merespon perilaku aplikasi [6].

## 3.3 Use Case Diagram
Use  case  diagram atau  diagram use  case merupakan  pemodelan  untuk  menggambarkan kelakuan ( behavior ) sistem yang akan dibuat. Diagram use case mendiskripsikan sebuah interaksi antara satu atau lebih aktor dengan sistem yang akan dibuat[8].

## 3.4 Activity Diagram
Activity  Diagram menggambarkan workflow (aliran  kerja)  atau  aktivitas  dari  sebuah  sistem atau proses bisnis [9].

## 3.5 Deployment Diagram
Deployment  Diagram digunakan  untuk  menggambarkan  detail  bagaimana  komponen  disusun di infrastruktur system [9].

## 4.  HASIL DAN PEMBAHASAN
4.1 Gambaran Sistem Kopdar dengan Menggunakan Framework Codeigniter dan Konsep MVC
Penelitian pada sistem aplikasi kopdar ini tidak menggunakan bahasa pemrograman php secara natif namun  sudah  menerapkan  prinsip Object Oriented Programming yang  telah  dikemas  dalam framework codeigniter.
Struktur  kerja  Codeigniter  dimulai  dari  browser  yang  akan  berinteraksi  melalui controller . Kemudian controller akan menerima dan membalas semua permintaan  dari  browser. Untuk data, controller akan  meminta  model  dan  untuk  pengontrol UI /template  akan  meminta  untuk  melihat. Bila  browser  meminta  halaman  web  maka router akan  menemukan controller yang  seharusnya menangani  permintaan  tersebut.  Nantinya  akan  digunakan controller untuk  mengakses  data  dan tampilan  model  untuk  menampilkan  data.  Penggambaran  sistem  dibuat  dengan  menggunakan deployment diagram . Gambar 1 berikut adalah deployment diagram dari aplikasi kopdar.
Gambar 1. Deployment Diagram

## 4.2 Perancangan Use Case Diagram
Pada perancangan kopdar aktor dibagi menjadi 2 yaitu admin dan user . Masing-masing aktor memiliki hak akses yang berbeda. Use case diagram dapat dilihat pada gambar 2 berikut.
Gambar 2. Use Case Diagram

## 4.3 Perancangan Activity Diagram
Berikut  pada  gambar  3  adalah activity  diagram yang  menggambarkan  proses  pembuatan status user .
Gambar 3. Activity Diagram

## 4.4 Relasi Tabel
Adapun tabel dan relasi yang dihasilkan dapat dilihat pada gambar 4 berikut.
Gambar 4. Relasi Antar Tabel

## 4.5 Implementasi Sistem
Pada sistem aplikasi kopdar terdapat dua role utama yaitu admin dan user . Role user sendiri dibagi menjadi 2 yaitu user free dan user premium . Penerapan social media authentification hanya berlaku untuk role user , sedangkan untuk role admin tetap login melalui form login biasa dengan username dan password .
a. Role User
1. Landing Page
Halaman yang menjadi tampilan awal saat membuka alamat website aplikasi Kopdar. Untuk tampilan halaman ini dapat dilihat pada gambar 5.
Gambar 5. Halaman Landing Page
Pada  halaman  inilah  implementasi  dari social media authentification dengan mengklik  tombol  facebook/google  maka  halaman website akan  langsung  dialihkan ke  laman social  media yang  sedang  dipakai  oleh user .  Pada  gambar  6  dibawah menampilkan form login dari google. Sedangkan pada gambar 7 menampilkan form login dari facebook.
Gambar 6. Google Form
Gambar 7. Facebook Login
2. Screencast Page
Halaman ini bertujuan untuk menampilkan screencast yang telah dibuat oleh admin, baik  itu free ataupun  premium.  Untuk  tampilan  halaman  ini  dapat  dilihat  pada gambar 8.
Gambar 8. Halaman Screencast
Potongan kode tampilan screencast <?php if ($val->type == 'free'): ?> <iframe width="100%" height="150" src="https://www.youtube.com/embed/<?php echo $val->video?>" frameborder="0" allowfullscreen></iframe> <?php else: ?> <?php if ($cmd->status == 'premium'): ?> <iframe width="100%" height="150" src = "https://www.youtube.com/embed/<?php echo $val->video ?>" frameborder="0" allowfullscreen> </iframe> <?php else: ?> <div class="col-12 text-center pt-5 mb-2" style="color:gray !important;height:150px;background:#eee"> <i class="fa fa-lock fa-3x"></i> </div> <?php endif ?> <?php endif ?>
Kode  diatas  merupakan  potongan  kode  untuk filter tampilan screencast bahwa  bila user tersebut  berstatus free maka thumbnail yang ditampilkan  untuk video  premium akan  berupa icon lock ,  namun  bila  status user tersebut  premium  maka  akan menampilkan iframe yang berisi video premium.

## 3. Article Page
Halaman ini berisi  semua artikel  yang telah diinputkan oleh admin. Untuk tampilan halaman ini dapat dilihat pada gambar 9.
Gambar 9. Halaman Article

## 4. Testimoni Page
Halaman  ini  berisi  semua  testimoni  yang  telah  di input kan  oleh  admin.  Untuk tampilan halaman ini dapat dilihat pada gambar 10.
Gambar 10. Halaman Testimoni
b. Role Admin
1. Login
Halaman  ini  bertujuan  untuk  admin  agar  bisa  masuk  ke  dalam  sistem  untuk mengolah data. Untuk tampilan halaman ini dapat dilihat pada gambar 11.
Gambar 11. Halaman Login Admin
2. Dashboard
Halaman  ini  berisi  informasi  tentang  jumlah user, artikel , dan screencast. Untuk tampilan halaman ini dapat dilihat pada gambar 12.
Gambar 12. Halaman Dashboard
3. Manajemen User
Halaman ini berisi tentang informasi user . Terdapat fitur filter , pengurutan dan juga pencarian data user . Untuk tampilan halaman ini dapat dilihat pada gambar 13.
Gambar 13. Halaman Manajemen User
4. Manajemen Screencast
Halaman  ini  berisi  tentang  data screencast .  Juga  fitur  tambah , edit,  hapus, pengurutan  dan  juga  pencarian  data screencast .  Untuk  tampilan  halaman  ini  dapat dilihat pada gambar 14.
Gambar 14. Halaman Manajemen Screencast

## 5. Manajemen Kategori Screencast
Halaman ini berisi tentang data kategori screencast . Juga fitur tambah , edit, hapus, pengurutan dan juga pencarian data kategori screencast . Untuk tampilan halaman ini dapat dilihat pada gambar 15.
Gambar 15. Halaman Kategori Screencast
6. Manajemen Kategori Artikel
Halaman  ini  berisi  tentang  data kategori  artikel.  Juga  fitur  tambah , edit,  hapus, pengurutan  dan  juga  pencarian  data  artikel.  Untuk  tampilan  halaman  ini  dapat dilihat pada gambar 16.
Gambar 16. Halaman Kategori Artikel
7. Manajemen Testimoni
Halaman ini berisi  tentang data testimoni. Juga fitur tambah , pengurutan, hapus dan  juga  pencarian  data  artikel.  Untuk  tampilan  halaman  ini  dapat  dilihat  pada gambar 17.
Gambar 17. Halaman Manajemen Testimoni
8. Manajemen Artikel
Halaman ini berisi tentang data artikel. Juga fitur tambah , edit, hapus, pengurutan dan  juga  pencarian  data  artikel.  Untuk  tampilan  halaman  ini  dapat  dilihat  pada gambar 18.
Gambar 18. Halaman Manajemen Artikel
9. Manajemen Kategori Testimoni
Halaman ini berisi tentang data screencast . Juga fitur tambah , filter , pengurutan dan juga  pencarian  data  kategori  testimoni.  Untuk  tampilan  halaman  ini  dapat  dilihat pada gambar 19.
Gambar 19.  Halaman Kategori Testimoni
10. Manajemen Promo
Halaman  ini  bertujuan  untuk  mengkonfigurasi  promo  yang  sedang  berjalan,  nomor rekening,  dan  harga  untuk upgrade akun  premium.  Untuk  tampilan  halaman  ini dapat dilihat pada gambar 20.
Gambar 20. Halaman Manajemen Promo
11. Manajemen Pertanyaan
Halaman  ini  berisi  tentang  datapertanyaan.  Juga  fitur  tambah , edit,  hapus, pengurutan  dan  juga  pencarian  data  pertanyaan.  Untuk  tampilan  halaman  ini  dapat dilihat pada gambar 21.
Gambar 21. Halaman Manajemen Faq
12. Manajemen History Payment
Halaman  ini  bertujuan  untuk  melihat  Riwayat  pembayaran  dan  informasi  detail transaksi  yang  telah  dilakukan  oleh user .  Untuk  tampilan  halaman  ini  dapat  dilihat pada gambar 22.

## Gambar 22. Halaman History Payment

## 5.  KESIMPULAN
Dari  hasil  penelitian  ini  dapat  disimpulkan  bahwa  penggunaan  codeigniter  sangat  efektif  dan mempersingkat  waktu  dalam  mengembangkan software skala  menengah.  Penggunaan Social Media Authentication lebih memberikan keamanan dan kemudahan sehingga  hanya dengan me- login -kan social media di  browser  yang  sama  user  tidak  perlu  memasukkan username dan password saat login .  Dengan menggunakan framework versi terbaru maka struktur kode akan tetap bisa berjalan sebagaimana mestinya selama beberapa tahun kedepan. Untuk penyempurnaan tahap selanjutnya dari aplikasi ini sebaiknya
pada Admin  Panel proses menampilkan  data relatif lebih lama bila data yang dimuat  lebih besar. Jadi  diharapkan  pada  pengembangan  selanjutnya  bisa  menggunakan query secara  lebih  optimal. Untuk pengembangan selanjutnya, diharapkan bisa menggunakan konfirmasi dari email.

## DAFTAR PUSTAKA
[1] Ilmi,  M.,  Said,  D.,  Hadi,  A.  2016.  “Perancangan  Sistem  Informasi  Pernikahan  Dan  Status Pernikahan  Kantor  Uurusan  Agama  Kecamatan  Canduang  Agam  Berbasis  Web  Dengan Framework Codeigniter”. Jurnal Vokasional Teknik Elektronika & Informatika . Vol. 4. No. 1
[2] Dermawan, Putra, S., Kusuma, L. 2020. “Aplikasi Pendaftaran Seminar Menggunakan Metode MVC  Berbasis  Website  Menggunakan  Framework  Codeigniter  3.1.10”. JURNAL  ALGOR . VOL. 1 NO. 2
[3]  Pradikta,  A.,  Haryono,  D.,  2015.  “Aplikasi  Video  Pembelajaran  dengan  Konsep  Youtube”. SATIN - Sains dan Teknologi Informasi . Vol. 1. No. 1
[4]  Subari,  A.,  Tadeus,  Y.,  D.,  Winarno,  H.,  et  al.  2017.  “Rancang  Bangun  Sistem  Administrasi Kerja  Praktek  dan  Tugas  Akhir  Berbasi  Web  dengan  menggunakan  framework  codeigniter”. GEMA TEKNOLOGI, Vol. 19. No. 4
[5]  Wansyah,  A.,  Susandri.  2017.  ”Teknologi  Pemrograman  Framework  Model  View  Controller pada Sistem Infromasi Penasehat Akademis”. Jurnal PROCESSOR . Vol. 12. No. 1.
[6]  Heriyanto,  B.,  Kurniawan,  I.,  dan  Taufik,  I.  2017.  “Sistem  Aplikasi  Perpustakaan  Berbasis Web  Menggunakan  Framework  Codeigniter  pada  SMAS  Islamic  Centre”. Jurnal  Ilmiah SISFOTENIKA, Vol. 7. No. 2.
[7]  Istiono,  W.,  Hijrah,  dan  Sutarya.  2016.  “Pengembangan  Sistem  Aplikasi  Penilaian  dengan Pendekatan  MVC  dan  Menggunakan  Bahasa  PHP  dengan Framework Codeigniter dan Database MYSQL pada Pahoa College Indonesia”. Jurnal TICOM .
[8] Herlawati, dan Prabowo P. 2011. Menggunakan Uml. Bandung: Informatika.
[9]  Hendini,  A.  2016.  “PEMODELAN  UML  SISTEM  INFORMASI  MONITORING PENJUALAN DAN STOK BARANG (STUDI KASUS: DISTRO ZHEZHA PONTIANAK”. Jurnal Khatulistiwa Informatika , VOL. IV