Membangun Aplikasi Seminar Berbasis Web Denggan Codeigniter 4 (Perancangan Sistem Dan Memulai Proyek)

By Harjito

Persyaratan System

Dalam proyek ini, kita menggunakan lingkungan pengembangan (development environment) linux dalam hal ini distro debian atau turunannya. Adapaun rincian kebutuhan sistem adalah sebagai berikut.

  • Sistem Operasi Linux distro debian
  • PHP versi 8
  • MySQL versi 8 atau MariaDB 10
  • Composer versi 2
  • clasp
  • ansible

Bagi pengguna windows dapat menggunakan Windows subsystem for Linux with command atau yang kita kenal dengan WSL.

Pemasangan PHP 8.x

Untuk Pemasangan PHP 8.x kita dapat memanfaatkan repositori yang dikembangkan oleh Ondřej Surý. Proses Pemasangannya pun cukup mudah. Langkah pertama kita tambahkan repositori Ondřej melalui terminal.

    sudo add-apt-repository ppa:ondrej/php
    sudo apt-get update

Setelah repository berhasil ditambahkan, langkah berikutnya kita install PHP versi 8 dalam hal ini kita akan install versi 8.1 dengan perintah berikut.

    sudo apt install php8.1

Untuk mengetahui apakah php 8 sudah berhasil terpasang kita dapat periksa dengan perintah berikut, jika sebelumnya tidak ada php versi lain dalam komputer kita.

    php -v

Namun jika sebelumnya sudah ada php versi lain, maka kita bisa periksa dengan perintah sebagai berikut.

    php8 -v

Hasilnya akan terlihat seperti berikut.

    PHP 8.1.x (cli) (built: Jul 11 2022 08:29:57) (NTS)
Copyright (c) The PHP Group
    Zend Engine v4.1.x, Copyright (c) Zend Technologies
    with Zend OPcache v8.1.x, Copyright (c), by Zend Technologies

Sampai sejauh ini, semua berjalan lancar. Kita akan menuju ke tahapan berikutnya.

Pemasangan Extensi PHP 8.x

kita nantinya akan memerlukan beberapa ekstensi php agar aplikasi berjalan dengan lancar. Beberapa ekstensi tersebut antara lain

  • php8.1-intl (Untuk pemasangan menggunakan composer)
  • php8.1-mbstring (untuk pemasangan menggunakan composer)
  • php8.1-mysql (untuk koneksi ke database)
  • php8.1-zip (untuk pemasangan dengan composer))
  • php8.1-curl (untuk pmasangan dengan composer)
  • php8.1-xml (untuk content-negotiation)
  • php8.1-openssl (untuk keamanan)
  • php8.1-gd (untuk pengolahan gambar)
  • php8.1-json (untuk content-negotiation)

Ekstensi curl, zip, fileinfo, json, pdo, and phar merupakan paket ekstension yang sekaligus diinstall jika kita menggunakan perintah php8.1-common. Oleh sebab itu kita dapat menuliskan perintah lebih ringkas yaitu sebagai berikut.

    sudo apt install php8.1-common php8.1-intl php8.1-mysql php8.1-xml php8.1-mbstring php8.1-gd

Pemasangan MySQL

Pemasangan MySQL di ubuntu sangat mudah. Kita bisa langsung buka terminal, dan jalankan perintah berikut.

    sudo apt install mysql-server

Jika kita menginginkan MariaDB sebagai basis data kita jalankan perintah.

    sudo apt install mariadb-server

Untuk melihat hasil pemasangan, kita bisa jalankan perintah berikut.

    mysql -V
    /* 
    perhatikan penulisan huruf V, untuk php menggunakan huruf kecil, sedangkan mysql menggunakan huruf kapital
    */

Jika berhasil terpasang maka akan tampil seperti ini,

    mysql  Ver 15.1 Distrib 10.3.34-MariaDB, for debian-linux-gnu (x86_64) using readline 5.2

Konfigurasi Pengelola Basis Data

Untuk keamanan basis data kita perlu melakukan beberapa konfigurasi. Pertama kita jalankan script keamanan dengan sudo sesuai perintah berikut.

    sudo mysql_secure_installation

Ikuti panduan yang muncul. Pastikan memilih strong password, lalu masukkan password yang terdiri dari campuran huruf kapital, huruf kecil, angka dan karakter khusus setidak-tidaknya 8 karakter.

Pemasangan Composer

Pemasangan CodeIgniter menggunakan composer lebih disarankan dibandingkan dengan git maupun extract file zip. Dengan composer, pemasangan paket-paket tambahan akan lebih mudah, dan sewaktu-waktu dilepas juga relatif mudah. Untuk memasang composer ikuti panduan berikut.

Pertama unduh dan setup composer dengan cara salin dan tempel script berikut di terminal.

    php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
    php composer-setup.php
    php -r "unlink('composer-setup.php');"

Selanjutnya pindahkan dan ubah nama composer.phar hasil setup ke folder /usr/local/bin dengan perintah berikut.

    sudo mv composer.phar /usr/local/bin/composer

*Saat menggunakan composer jangan menggunakan \textbf{sudo}

Pemasangan Clasp

Clasp adalah tool semacam git, yang mengizinkan kita mengelola dan mendeploy GAS secara remote. Dalam hal ini clasp opsional, karena kita bisa langsung melakukan editing dan deploy menggunakan browser.

Untuk memasang clasp, kita perlu memasang nodejs terlebih dahulu. Ikuti panduan berikut.

    sudo apt install nodejs

Untuk memeriksa hasilnya, kita ketikkan perintah berikut.

    node -v && npm -v

Jika instalasi berhasil, akan ditampilkan versi nodejs dan npm (pengelola paket untuk nodejs) .

Selanjutnya kita pasang npm dengan perintah sebagai berikut.

    npm install -g @google/clasp

Tunggu beberapa saat hingga pemasangan berhasil. Periksa hasil pemasangan dengan perintah berikut.

    clasp -v

Pemasangan Ansible

Perangkat terakhir yang kita gunakan adalah ansible. Sebelum kita pasang ansible, kita perlu pastikan bahwa komputer kita telah terpasang python versi 3. Untuk memeriksa apakah sudah terpasang python versi 3 kita ketikkan perintah

    python3 -V
    /* 
    menggunakan huruf V kapital 
    */

Jika python versi 3 belum terpasang, kita dapat lakukan pemasangan dengan perintah

    sudo apt install python3

Selanjutnya kita pasang PIP (pengelola paket untuk python) dengan perintah berikut.

    sudo apt install python3-pip

Untuk memeriksa hasilnya kita bisa cek dengan perintah berikut.

    pip3 -V

Jika kalian mengalami kegagalan saat melakukan pemasangan beberapa paket, pemasangan dapat ditunda sampai paket benar-benar dibutuhkan.

Perancangan Sistem

Sebelum kita memulai perancangan sistem, kita perlu mempelajari bagaimana alur proses. Kita dapat mempelajari melalui pengamatan di lapangan, wawancara dengan pengguna maupun mempelajari aplikasi serupa yang sudah pernah dikembangkan. Analisis sistem yang baik akan mempercepat pengembangan.

Anggaplah kita sudah melakukan pengamatan, melakukan wawancara dengan pengguna dan mempelajari sistem yang serupa. Lalu kita rumuskan alur proses sebagai berikut.

Pembentukan Kesekretariatan

Alur kegiatan dimulai dengan pembentukan kesekretariatan. Setelah kesekretariatan terbentuk, disusun tim editorial. Tim editorial menentukan lingkup bidang ilmu, memilih reviewer, lalu mulai melakukan pendaftaran peserta.

Pendaftaran

Proses pendaftaran sendiri akan lebih mudah dikelola jika terdapat sistem pendaftaran yang memadai, di mana peserta dapat memilih lingkup bidang ilmu sesuai dengan minat.

Bagi peserta penulis mulai melakukan pengisian meta data, dilanjutkan mengirimkan abstrak untuk dinilai oleh editor apakah sesuai dengan lingkup bidang ilmu atau tidak. Jika abstrak sesuai bidang ilmu maka, abstrak diteruskan kepada reviewer untuk proses penilaian apakah bisa dipresentasikan, perlu perbaikan atau ditolak. Saat abstrak dinyatakan bisa dipresentasikan, maka peserta melakukan pembayaran.

Bagi peserta non-penulis, alurnya lebih sederhana. Setelah mengisikan data pendaftaran dan memilih lingkup bidang ilmu, maka peserta apat langsung melakukan pembayaran agar dapat menjadi peserta.

Beberapa dokumen yang diperlukan adalah

  • surat penerimaan
  • faktur pembayaran
  • buku kumpulan abstrak
  • sertifikat

Berdasarkan skenario tersebut dapat disusun beberapa alur proses. Pertama adalah alur proses otentikasi seperti pada gambar berikut.

800

800

Sistem yang dikembangkan akan menjadikan pengguna yang pertama kali melakukan otentikasi otomatis bertindak sebagai admin.

Selanjutnya admin akan melakukan enrollment terhadap beberapa pengguna yang masuk sistem sesuai penugasan. Pengguna saat login pertama kali tidak secara otomatis sebagai peserta seminar. Untuk mendaftar sebagai peserta seminar user harus mengisi meta data sesuai alur pada gambar di atas.

Menyiapkan Project

Proyek yang akan kita buat adalah pendaftaran seminar. Maka kita akan beri nama proyek kita sebagai seminar dan kita letakkan pada direktori home. Ikuti perintah berikut;

    cd \$HOME
    composer create-project codeigniter4/appstarter Seminar

Hasilnya terlihat pada tampilan berikut.

    Creating a "codeigniter4/appstarter" project at "./Seminar"
    Info from https://repo.packagist.org: #StandWithUkraine
    Installing codeigniter4/appstarter (v4.2.1)
      - Installing codeigniter4/appstarter (v4.2.1): Extracting archive
    Created project in /home/harjito/Seminar
    Loading composer repositories with package information
    Info from https://repo.packagist.org: #StandWithUkraine
    Updating dependencies
    Lock file operations: 41 installs, 0 updates, 0 removals
      - Locking codeigniter4/framework (v4.2.1)
      - Locking doctrine/instantiator (1.4.1)
    ...
    ...
    ...
    8 package suggestions were added by new dependencies, use `composer suggest` to see details.
    Generating autoload files
    27 packages you are using are looking for funding.
    Use the `composer fund` command to find out more!

Jika tidak ada pesan kesalahan (ditandai dengan kotak warna merah), maka persiapan proyek telah berhasil. Selanjutnya kita masuk dalam proyek dengan perintah berikut.

    cd Seminar

Maka posisi promp sekarang adalah

    user_name@machine_name:~/Seminar

Menambahkan Paket Otomasi Route berdasarkan Atribut

Sejak CodeIgniter versi 44,2, auto route di CI4 dinonaktifkan. Oleh sebab itu kita perlu mendefinisikan setiap route. Agar kita tidak disibukkan penulisan route, maka kita manfaatkan paket yang akan mengubah atribut menjadi route. Penggunaan atribut baru diperkenalkan di PHP versi 8, oleh sebab itu untuk pengembangan kita harus menggunakan PHP versi 8 agar bisa menggunakan paket tersebut. namun di produksi kita tetap bisa menggunakan PHP 7.3.

Untuk menambahkan paket tersebut kita jalankan perintah berikut.

    composer require kenjis/ci4-attribute-routes:~0.1.0

Saat dijalankan akan tampil seperti tampilan berikut.

    Info from https://repo.packagist.org: #StandWithUkraine
    ./composer.json has been updated
    Running composer update kenjis/ci4-attribute-routes
    Loading composer repositories with package information
    Info from https://repo.packagist.org: #StandWithUkraine
    Updating dependencies
    Lock file operations: 1 install, 0 updates, 0 removals
      - Locking kenjis/ci4-attribute-routes (v0.1.0)
    Writing lock file
    Installing dependencies from lock file (including require-dev)
    Package operations: 1 install, 0 updates, 0 removals
      - Installing kenjis/ci4-attribute-routes (v0.1.0): Extracting archive
    Generating autoload files
    27 packages you are using are looking for funding.
    Use the `composer fund` command to find out more!

Mengatur Konfigurasi Route

Langkah berikutnya kita atur konfigurasi untuk route. Kita buka file Route.php di folder app/Config/.

Tambahkan script berikut pada bagian akhir baris.

     /*
     * Attribute Routes
     *
     * To update the route file, run the following command:
     * $ php spark route:update
     *
     * @see https://github.com/kenjis/ci4-attribute-routes
     */
    if (file_exists(APPPATH . 'Config/RoutesFromAttribute.php')) {
        require APPPATH . 'Config/RoutesFromAttribute.php';
    }

Baris tersebut memerintahkan untuk aplikasi melakukan pencarian route di folder app/Config/RoutesFromAttribute.php.

File tersebut akan otomatis dibuat/diperbarui ketika kita jalankan perintah berikut.

    php spark route:update

Untuk mengetahui daftar route, kita bisa jalankan perintah berikut.

    php spark routes

Secara default akan terdapat 2 buah route yaitu home dan CLI seperti tampilan berikut.

    +--------+--------+------------------------------------------
    +----------------+---------------+
    | Method | Route  | Handler                                  
    | Before Filters | After Filters |
    +--------+--------+------------------------------------------
    +----------------+---------------+
    | GET    | /      | \App\Controllers\Home::index             
    |                | toolbar       |
    | CLI    | ci(.*) | \CodeIgniter\CLI\CommandRunner::index/$1 
    |                |               |
    +--------+--------+------------------------------------------
    +----------------+---------------+

Jika semua telah berhasil kita konfigurasi. Artinya kita siap untuk memulai membangun sistem.

Ikuti terus tutorial saya di e-Project dan channel saya di