Cara menggunakan load css codeigniter 4

SEO Technical Writer at Niagahoster. An aquarius girl who loves music, watching movies and of course writing.

Home » Web Development & Design » Panduan Lengkap CodeIgniter 4

Panduan Lengkap CodeIgniter 4

September 15, 2021 13 min read

Cara menggunakan load css codeigniter 4

Dibanding pendahulunya, CodeIgniter 4 menawarkan berbagai kelebihan, terutama pada peningkatan performa yang telah didukung PHP versi 7. CodeIgniter 4 juga memiliki struktur kode yang lebih terorganisir sehingga membuat proses pengembangan aplikasi web menjadi lebih efektif.

Bagi Anda yang ingin mencoba menggunakan CodeIgniter 4, Anda berada di halaman yang tepat! 

Pada tutorial Code Igniter 4 ini, kami akan mengajak Anda belajar membuat sebuah aplikasi sederhana dengan fitur  untuk menambah, menampilkan, mengedit dan menghapus data. 

Bagaimana caranya? Yuk, langsung saja simak tutorial CodeIgniter 4 berikut ini!

Daftar isi

Apa Itu CodeIgniter 4?

CodeIgniter adalah salah satu framework PHP yang ringan dan bersifat open-source. Framework ini memungkinkan Anda untuk mengembangkan aplikasi web dengan fitur lengkap secara lebih cepat. Hal itu berkat dukungan library yang beragam. 

CodeIgniter 4 merupakan pengembangan dari versi sebelumnya, yaitu CodeIgniter 3. Versi terbaru ini hanya mendukung PHP versi 7.3 ke atas. Jadi, Anda perlu menggunakan versi PHP yang sesuai sebelum mencoba CodeIgniter 4.

Masih dengan konsep Model-View-Controller (MVC) , CodeIgniter 4 menawarkan antarmuka dan struktur project yang sederhana. Sehingga, penulisan kode pemrograman bisa lebih konsisten dan terstruktur.

Selain itu, performanya yang cepat dan konfigurasi yang minim juga menjadi alasan CodeIgniter 4 populer di kalangan web developer. 

Nah, semakin tertarik untuk mencoba Code igniter 4 untuk project Anda? Mari mulai menggunakannya dengan melakukan instalasi terlebih dahulu.

Baca Juga : Cara Menghilangkan index.php di CodeIgniter

Instalasi CodeIgniter 4

Sebelum melakukan instalasi CodeIgniter 4, ada beberapa hal yang perlu Anda persiapkan, yaitu :

  • XAMPP : aplikasi server yang mendukung proses pengembangan aplikasi website pada server lokal (localhost) sebelum di hosting.
  • Composer : tool pengelola package library PHP yang memudahkan Anda untuk menginstall dan melakukan update library yang digunakan.
  • Code Editor : aplikasi yang digunakan untuk menulis kode pemrograman. Di tutorial ini, kami menggunakan Visual Studio Code (VS Code).

Selanjutnya, Anda dapat menginstall CodeIgniter 4 dengan 2 cara, yaitu : instalasi manual atau instalasi melalui Composer. Berikut penjelasan lengkapnya :

Instalasi CodeIgniter 4 secara Manual  

Untuk melakukan instalasi manual, download file zip dari CodeIgniter 4 melalui website resminya.

Cara menggunakan load css codeigniter 4

Setelah file CodeIgniter 4 berhasil terdownload, pindahkan file ke folder C:/xampp/htdocs. Kemudian, extract file zip tersebut dan ubah namanya sesuai dengan nama project yang Anda inginkan. Di tutorial ini, kami menggunakan nama ci4.

Cara menggunakan load css codeigniter 4

Project CodeIgniter ini sudah bisa langsung dijalankan di web browser Anda dengan mengakses localhost/ci4/public. Tapi, jangan lupa jalankan dulu XAMPP-nya, ya.

Cara menggunakan load css codeigniter 4

Baca juga: Cara Mengatasi A Database Error Occurred CodeIgniter

Instalasi CodeIgniter 4 melalui Composer

Cara kedua untuk menginstall CodeIgniter 4 adalah menggunakan Composer. Kelebihannya, path folder project Anda bisa dibuat dimana saja, tidak perlu di folder htdocs. Dan yang paling penting, proses install mudah hanya dengan satu baris perintah saja, yaitu :

composer create-project codeigniter4/appstarter nama_folder
Cara menggunakan load css codeigniter 4

Pada tutorial ini, kami membuat folder project di Desktop dengan nama ci4. 

Setelah folder berhasil terbuat, buka folder tersebut dengan Visual Studio Code. Jika project telah terbuka, bukalah terminal di VS Code :

Cara menggunakan load css codeigniter 4

Lalu, jalankan perintah di bawah ini untuk menginstall semua library yang dibutuhkan CodeIgniter 4 :

composer install -vvv
Cara menggunakan load css codeigniter 4

Jika proses instalasi sudah selesai dilakukan, Anda dapat mengakses CodeIgniter 4 dengan menjalankan perintah :

php spark serve
Cara menggunakan load css codeigniter 4

Gambar di atas menunjukkan bahwa local development server sudah berjalan. 

Selanjutnya, bukalah web browser Anda dan akses localhost:8080. Halaman awal CodeIgniter akan tampil seperti pada gambar di bawah ini :

Cara menggunakan load css codeigniter 4

Nah, sekarang Anda sudah mempunyai project CodeIgniter 4. 

Setelah instalasi selesai, lanjutkan tutorial CodeIgniter 4 ini dengan membuat aplikasi website pertama Anda!

Baca Juga : Tutorial Composer untuk Project PHP Anda

Tutorial CodeIgniter 4 : Membuat Aplikasi CRUD Sederhana

Konsep dasar tutorial CodeIgniter yang akan Anda praktikkan adalah membuat aplikasi CRUD (Create, Read, Update dan Delete). Pada contoh ini kami akan membuat aplikasi data vaksinasi karyawan.

Inilah 6 langkah tutorial CodeIgniter 4 untuk membuat sebuah aplikasi:

  1. Konfigurasi Environment
  2. Menampilkan View pada CodeIgniter 4
  3. Membuat Koneksi ke Database
  4. Menambah dan Menampilkan Data (Create & Read)
  5. Melakukan Update Data di Database (Update)
  6. Menghapus Data di Database (Delete)

Baca Juga : Panduan CodeIgniter PHPMailer

1. Konfigurasi Environment

Pada tahap ini, Anda perlu mengubah environment pengembangan CodeIgniter menjadi development. Hal ini dilakukan agar jika terjadi error, CodeIgniter 4 dapat memberi warning error apa yang sedang terjadi saat itu.

Jika tidak diaktifkan, setiap kali ada error, CodeIgniter 4 hanya akan menampilkan pesan error seperti berikut :

Cara menggunakan load css codeigniter 4

Bagi seorang developer, Anda pasti kebingungan harus memperbaiki yang mana jika semua pesan error ditampilkan seperti gambar di atas kan?

Untuk mengubah konfigurasi environment, bukalah file env, lalu carilah baris kode CI_ENVIRONMENT. Kemudian, ubah nilainya yang semula production menjadi development. Jangan lupa juga hapus tanda # pada baris kodenya.

Cara menggunakan load css codeigniter 4

Simpan perubahan, lalu ubah nama file env menjadi .env, ya.

2. Menampilkan View pada CodeIgniter 4

Sekarang, mari coba membuat view dan menampilkannya pada web browser. Pertama-tama, buatlah file controller dengan nama Test_view.php pada direktori app/Controllers. Kemudian, salinlah kode berikut ini :

<?php

namespace App\Controllers;

use CodeIgniter\Controller;

class Test_view extends Controller
{
    public function index()
    {
        $data['title']  = 'Niagahoster Tutorial';
        $data['msg1']    = 'Selamat datang di Niagahoster Tutorial';
        $data['msg2']    = 'Membuat aplikasi CRUD sederhana dengan CodeIgniter 4';
        echo view('test_view', $data);
    }
}

Pada kode tersebut, kami membuat beberapa data yang akan ditampilkan di website berupa title dan message. Nantinya, data tersebut akan dikirimkan ke view yang akan dibuat selanjutnya.

Untuk membuat file view, masuklah ke direktori app/Views dan buatlah file dengan nama test_view.php. Salinlah kode berikut ini :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= $title; ?></title>
</head>

<body style="text-align:center;">
    <h1><?= $msg1; ?></h1>
    <h2><?= $msg2; ?></h2>
</body>

</html>

Baris kode di atas akan menampilkan data title dan message yang dibuat di file controller sebelumnya. 

Simpan perubahan file, lalu jalankan tampilan yang telah dibuat dengan mengakses controller di localhost:8080/test_view.

Cara menggunakan load css codeigniter 4

Bagaimana, view yang Anda buat sudah bisa ditampilkan, kan? Kalau begitu, mari lanjutkan ke tahap utama untuk membuat aplikasi CRUD!

3. Membuat Koneksi ke Database

Agar dapat mengelola database, langkah selanjutnya dalam tutorial CodeIgniter 4 adalah membuat koneksi dari CodeIgniter 4 ke database. 

Caranya, pertama-tama buatlah database baru di localhost/phpmyadmin. Namun, untuk mengakses phpMyAdmin, Anda harus menjalankan XAMPP dulu, ya.
Setelah tampilan phpMyAdmin terbuka, buatlah database baru pada kolom yang tersedia. Disini, kami membuat database dengan nama ci4, kemudian klik Create untuk membuat database.

Cara menggunakan load css codeigniter 4

Setelah database berhasil dibuat, koneksikan dengan CodeIgniter 4. Ada dua cara yang dapat Anda lakukan, yaitu: 

  • mengedit file app/Config/database.php 
  • mengedit file .env di bagian Database.

Pada tutorial kali ini, kami akan membuat koneksi dengan mengedit file .env pada bagian Database. 

Jadi, bukalah file .env dan temukan baris kode berikut ini :

Cara menggunakan load css codeigniter 4

Hapuslah semua tanda pagar pada baris kode database.default, kemudian ubah nama database sesuai nama database yang Anda buat sebelumnya. Kosongkan juga password databasenya, jika Anda tidak menggunakan password untuk akses database Anda.

Cara menggunakan load css codeigniter 4

Jangan lupa untuk menyimpan perubahan yang telah Anda lakukan.

Baca juga: Mengenal File Default .htaccess di CodeIgniter dan Cara Membuatnya

4. Menambah dan Menampilkan Data (Create & Read)

Pada tahap sebelumnya, Anda sudah membuat database baru di phpMyAdmin. Namun, database tersebut masih kosong, belum ada tabel apapun untuk menyimpan data. 

Anda dapat membuat tabel langsung di phpMyAdmin ataupun menggunakan perintah migrate database. Namun, sebelumnya Anda harus membuat file migrasi terlebih dulu dengan menjalankan perintah berikut ini :

php spark migrate:create employees
Cara menggunakan load css codeigniter 4

Perintah di atas akan membuat file migrasi di dalam folder app/Database/Migration. Pada file ini, Anda dapat mendefinisikan atribut pada tabel employees dan juga tipe datanya. Untuk lebih jelasnya, salinlah kode di bawah ini :

<?php

namespace App\Database\Migrations;

use CodeIgniter\Database\Migration;

class Employees extends Migration
{
    public function up()
    {
        // Membuat kolom/field untuk tabel karyawan
        $this->forge->addField([
            'id'          => [
                'type'           => 'INT',
                'constraint'     => 5,
                'unsigned'       => true,
                'auto_increment' => true
            ],
            'nama_karyawan'       => [
                'type'           => 'VARCHAR',
                'constraint'     => '255'
            ],
            'usia'      => [
                'type'           => 'INT',
                'constraint'     => 2,
            ],
            'status_vaksin_1'      => [
                'type'           => 'ENUM',
                'constraint'     => ['sudah', 'belum'],
                'default'        => 'belum',
            ],
            'status_vaksin_2'      => [
                'type'           => 'ENUM',
                'constraint'     => ['sudah', 'belum'],
                'default'        => 'belum',
            ],
        ]);

        // Membuat primary key
        $this->forge->addKey('id', TRUE);

        // Membuat tabel karyawan
        $this->forge->createTable('employees', TRUE);
    }

    //-------------------------------------------------------

    public function down()
    {
        // menghapus tabel karyawan
        $this->forge->dropTable('employees');
    }
}

Fungsi

composer install -vvv
8akan dijalankan saat melakukan migrasi, fungsi ini akan membuat field dengan 5 atribut, yaitu : id, nama_karyawan, usia, status_vaksin_1 dan status_vaksin_2.

Sedangkan fungsi

composer install -vvv
9 akan dipanggil ketika melakukan rollback. Fungsi ini akan menghapus tabel employees di database.

Jika file migrasi sudah diisi dengan benar, jalankan perintah di bawah ini untuk melakukan migrasi :

php spark migrate 
Cara menggunakan load css codeigniter 4

Setelah muncul pesan Done migrations itu artinya migrasi berhasil dilakukan. Sekarang, coba cek database melalui phpmyadmin. Pasti ada 2 tabel baru kan? Tabel migrations dan employees.

Tabel migrations merupakan tabel yang otomatis terbuat untuk menyimpan versi migrasi yang sudah dilakukan. Sedangkan tabel employees adalah tabel yang dibuat berdasarkan file migrasi.

Nah, jika tabel sudah siap, saatnya membuat kode untuk insert data di CodeIgniter 4. 
Pertama-tama, buatlah file model dengan nama Employee_model.php. File model ini merupakan file yang berhubungan langsung dengan database.

<?php

namespace App\Models;

use CodeIgniter\Model;

class Employee_model extends Model
{
    protected $table = 'employees';

    public function getKaryawan($id = false)
    {
        if ($id === false) {
            return $this->findAll();
        } else {
            return $this->getWhere(['id' => $id]);
        }
    }

    public function saveKaryawan($data)
    {
        $builder = $this->db->table($this->table);
        return $builder->insert($data);
    }
}

Pada kode di atas, ada 2 fungsi yang dibuat, yaitu fungsi

php spark serve
0 dan
php spark serve
1. Fungsi
php spark serve
0 memanggil semua data yang akan ditampilkan di view. Sedangkan
php spark serve
1 adalah fungsi untuk menyimpan data baru ke database.


Selanjutnya, buatlah file controller dengan nama Employee.php, lalu salinlah kode di bawah ini :

<?php

namespace App\Controllers;

use CodeIgniter\Controller;
use App\Models\Employee_model;

class Employee extends Controller
{
    public function index()
    {
        $model = new Employee_model;
        $data['title']     = 'Data Vaksin Karyawan';
        $data['getKaryawan'] = $model->getKaryawan();

        echo view('header', $data);
        echo view('employee_view', $data);
        echo view('footer', $data);
    }

    public function add()
    {
        $model = new Employee_model;
        $data = array(
            'nama_karyawan' => $this->request->getPost('nama_karyawan'),
            'usia'         => $this->request->getPost('usia'),
            'status_vaksin_1'  => $this->request->getPost('status_vaksin_1'),
            'status_vaksin_2'  => $this->request->getPost('status_vaksin_2')
        );
        $model->saveKaryawan($data);
        echo '<script>
                alert("Selamat! Berhasil Menambah Data Vaksinasi Karyawan");
                window.location="' . base_url('employee') . '"
            </script>';
    }

}

Fungsi

php spark serve
4 adalah fungsi yang dibuat untuk tampilan awal aplikasi ketika dibuka. Fungsi ini akan memanggil fungsi
php spark serve
0 yang telah dibuat pada file model untuk menampilkan semua data karyawan yang ada di database.

Fungsi

php spark serve
6 adalah fungsi untuk mengambil data yang diinputkan melalui form view tambah data yang akan dijelaskan selanjutnya.

Berikutnya, Anda harus membuat file view yang merupakan tampilan antarmuka aplikasi CRUD sederhana ini. Jika Anda lihat pada fungsi

php spark serve
4 di file controller sebelumnya, ada tiga view yang dipanggil, yaitu : header, employee_view dan footer.

Kami membuat tiga file dengan header dan footer terpisah agar nantinya file tersebut dapat dipanggil kembali pada fitur update data dengan tampilan halaman yang berbeda.

Nah sekarang, mari mulai dari membuat file header.php di direktori app/Views terlebih dulu.

composer install -vvv
0

Selanjutnya, buatlah file employee_view.php, file ini berisi body yang merupakan tampilan utama dari aplikasi. Salinlah kode berikut ini :

composer install -vvv
1

Pada kode di atas, Anda akan membuat tabel yang berisi data vaksinasi karyawan. Tabel tersebut memuat semua data dari database. Selain itu, ada button Tambah Data  yang jika di klik akan menampilkan modal yang berupa form untuk input data.

Terakhir, buatlah file footer.php dan salinlah kode berikut ini : 

composer install -vvv
2

Simpan semua file, lalu akses melalui localhost/employee pada web browser Anda. Cobalah untuk menambahkan data dengan klik tombol Tambah Data, nantinya akan ada form modal yang tampil seperti ini :

Cara menggunakan load css codeigniter 4

Klik Submit dan lihatlah perubahan yang terjadi pada tabel Anda. Harusnya, sekarang sudah ada data yang baru saja Anda tambahkan, kan?

Cara menggunakan load css codeigniter 4

Nah, sampai sini Anda sudah bisa menambah data ke database (create) dan menampilkan data dari database (read).

Baca Juga: Membuat REST API CodeIgniter

5. Melakukan Update Data di Database (Update)

Pada kode di file employee_view.php, Anda sudah membuat button untuk menuju halaman edit data. Namun, jika tombol edit Anda klik, masih akan menunjukkan pesan error. Karena, Anda belum membuat fungsi edit di dalam controller.

Untuk membuat fungsi untuk mengupdate data, salin dan tambahkan kode berikut pada file Employee.php di direktori app/Controllers.

composer install -vvv
3

Kode di atas menambahkan dua fungsi ke file controller Anda, yaitu fungsi

php spark serve
8 dan fungsi
php spark serve
9. Fungsi
php spark serve
8 akan menampilkan form edit dari data yang dipilih. Sedangkan fungsi
php spark serve
9 akan dipanggil untuk mengupdate data di database ketika Anda mengklik tombol Update.

Selain penambahan fungsi pada file controller, Anda juga harus menambahkan kode berikut ini pada file Employee_model.php :

composer install -vvv
4

Fungsi di atas akan melakukan update data sesuai dengan id yang terpilih. Jangan lupa, simpan perubahannya, ya.

Selanjutnya, buatlah view baru dengan nama edit_view.php, lalu salinlah kode di bawah ini :

composer install -vvv
5

Sekarang, coba refresh aplikasi Anda, lalu cobalah untuk menekan tombol Edit. Nantinya, Anda akan masuk ke halaman edit seperti ini :

Cara menggunakan load css codeigniter 4

Halaman tersebut akan menampilkan data lama dari id yang dipilih pada database. Coba ubahlah data tersebut dan tekan tombol Update. 

Bagaimana, data Anda sudah terupdate, kan?

6. Menghapus Data di Database (Delete)

Langkah terakhir dari konsep dasar tutorial CodeIgniter dengan CRUD adalah menghapus database. Bagaimana caranya?


Pertama-tama, tambahkan fungsi berikut ini pada file controller Employee.php :

composer install -vvv
6

Fungsi

<?php

namespace App\Controllers;

use CodeIgniter\Controller;

class Test_view extends Controller
{
    public function index()
    {
        $data['title']  = 'Niagahoster Tutorial';
        $data['msg1']    = 'Selamat datang di Niagahoster Tutorial';
        $data['msg2']    = 'Membuat aplikasi CRUD sederhana dengan CodeIgniter 4';
        echo view('test_view', $data);
    }
}

2 akan menghapus data sesuai dengan id yang dipilih ketika tombol Hapus di klik. Pada file model Employee_model.php, tambahkan kode berikut ini :

composer install -vvv
7

Simpan perubahan dan cobalah untuk menghapus data Anda dengan mengklik tombol Hapus pada data yang Anda pilih. Lalu, klik OK pada dialog konfirmasi yang muncul seperti pada gambar di bawah. 

Cara menggunakan load css codeigniter 4

Bagaimana, data Anda sudah terhapus, kan? 

Baca Juga : Tutorial Upload File CodeIgniter

Kesimpulan

CodeIgniter 4 memiliki kelebihan dari segi performa dan peningkatan produktivitas dibanding versi sebelumnya. Menerapkan konsep dasar tutorial CodeIgniter 4 juga cukup mudah. 

Anda sudah belajar cara membuat sebuah aplikasi CRUD sederhana menggunakan CodeIgniter 4 dengan enam langkah. Namun, yang utama adalah

  1. Konfigurasi Environment : penting untuk mengubah environment menjadi development, agar proses pengembangan lebih mudah dilakukan.
  2. Membuat Koneksi ke Database : pastikan nama database yang Anda tulis di file .env sudah sesuai dengan database Anda di phpmyadmin
  3. Create, Read, Update dan Delete Data : pastikan penamaan file dan fungsi sesuai. Jika Anda memakai nama yang berbeda dengan tutorial ini, cek dengan teliti untuk mengganti semua nama file dan nama fungsi terkait.

Kalau aplikasi yang Anda sudah jadi, upload aplikasi Anda ke layanan hosting agar bisa diakses secara online oleh banyak orang. Namun, pastikan layanan hosting yang digunakan mendukung CodeIgniter, ya.

Layanan Unlimited Web Hosting Indonesia Niagahoster sudah mendukung CodeIgniter dan menggunakan server LiteSpeed Enterprise untuk kecepatan website yang optimal. Kalau Anda berlangganan, Anda akan mendapat jaminan uptime 99.99% sehingga website Anda akan selalu online selama 24 jam penuh. 

Selain itu, fitur Advance untuk Web Developer seperti akses SSH, git, phpMyAdmin akan memudahkan Anda untuk mengembangkan aplikasi CodeIgniter 4.

Menariknya, Anda dapat menikmati semua fitur tersebut dengan harga  Rp27rb/bulan saja, loh! Ingin berlangganan hosting Niagahoster sekarang juga?

Saya Mau Berlangganan Hosting Murah Sekarang!

Demikianlah artikel tutorial CodeIgniter 4, semoga bermanfaat bagi Anda, ya 🙂

Share

Nida Regita F Follow SEO Technical Writer at Niagahoster. An aquarius girl who loves music, watching movies and of course writing.

Subscribe Sekarang

Dapatkan beragam artikel tutorial, insight dan tips menarik seputar dunia online langsung melalui email Anda. Subscribe sekarang dan raih kesuksesan bersama kami!