Tutorial CRUD CodeIgniter 4 & Vue JS #1 - Installasi & Persiapan CodeIgniter 4

• Langkah 1 - Composer
• Langkah 2 - Membuat Project CodeIgniter 4
• Langkah 3 - Konfigurasi Database
• Langkah 4 - Membuat Database
• Langkah 5 - Membuat Migration Table
• Langkah 6 - Menjalankan Migration

Halo teman-teman semuanya, pada ksempatan kali ini kita semua akan belajar membuat aplikasi CRUD sederhana dengan CodeIgniter 4 dan Vue Js. Untuk CodeIgniter sendiri nanti kita akan buat sebagai Back-End, otomatis kita akan membuat sebuah Restful API dengan CodeIgniter 4 tersebut.

kemudian untuk Vue Js sendiri akan kita gunakan untuk membuat sebuah Front-End, jadi dengan Vue Js ini akan kita gunakan untuk mengambil data berupa Rest API dari Back-End yang sudah kita buat sebelumnya. Tentu nanti kita akan membuat 2 project yang berbeda.

Langkah 1 - Composer

Pada tahap pertama ini kita akan belajar membuat project baru dengan CodeIgniter 4, sebelum memulai membuat sebuah project CodeIgniter 4 baru, silahkan teman-teman install Composer terlebih dahulu.

Untuk installasi Composer kita bisa mengikuri langkah-langkahnya dari situs resminya di https://getcomposer.org silahkan disesuaikan dengan sistem operasi masing-masing.

• Installasi Composer untuk Linux / Unix / MacOS : https://getcomposer.org/doc/00-intro.md#installation-linux-unix-macos
• Installasi Composer untuk Windows : https://getcomposer.org/doc/00-intro.md#installation-windows

Untuk mengetahui apakah kompoter kita sudah terinstall composer, jika bisa menjalankan perintah di bawah ini di terminal/CMD :

composer

Jika berhasil maka kurang lebih tampilannya seperti berikut ini :

Langkah 2 - Membuat Project CodeIgniter 4

Setelah kita berhasil menginstall Composer sekarang kita lanjutkan membuat project CodeIgniter 4 baru dengan Composer tentunya. Silahkan masuk ke folder dimana kita akan menyimpan projectnya, kemudian jalankan perintah di bawah ini :

composer create-project codeigniter4/appstarter api-codeigniter

Perintah di atas akan membuat sebuah proejct CodeIgniter 4 baru dengan nama api-codeigniter.

Silahkan tunggu proses installasinya sampai selesai, disini kita harus terhubung dengan internet, karena semua dependensi akan diunduh secara online.

Setelah proses installasi selesai, sekarang kita bisa mencoba menjalankan project CodeIgniter 4 kita, silahkan jalankan perintah di bawah ini :

cd api-codeigniter

php spark serve

Langkah 3 - Konfigurasi Database

Sekarang silahkan buka project kita dengan Text Editor, kemudian silahkan rename file env menjadi .env selanjutnya lakukan perubahan beberapa kode berikut ini :

Cari kode berikut ini :

# CI_ENVIRONMENT = production

Ubahlah menjadi seperti berikut ini :

CI_ENVIRONMENT = development

Di atas kita menagktifkan mode development untuk project CodeIgniter kita, karena kita masih mengembangkan aplikasinya di local machine.

Kemudian cari juga kode berikut ini :

# database.default.hostname = localhost
# database.default.database = ci4
# database.default.username = root
# database.default.password = root
# database.default.DBDriver = MySQLi

Ubahlah menjadi seperti berikut ini :

database.default.hostname = localhost
database.default.database = db_api_codeigniter
database.default.username = root
database.default.password =
database.default.DBDriver = MySQLi

Di atas kita membuat konfigurasi nama database dengan db_api_codeigniter, kemudian untuk passsword silahkan disesuaikan dengan konfigurasi mySQL, secara default jika kita menggunakan XAMP itu dikosongkan saja.

Langkah 4 - Membuat Database

Setelah kita berhasil membuat konfigurasi database, sekarang kita lanjutkan untuk membuat databasenya melalui phpMyAdmin, silahkan buka http://localhost/phpmyadmin kemudian buat database baru dengan nama db_api_codeigniter.

Langkah 5 - Membuat Migration Table

Setelah kita berhasil membuat database untuk project kita, sekarang kita lanjutkan untuk membuat sebuah table yang akan kita gunakan untuk menyimpan datanya nanti, nah di CodeIgniter 4 untuk membuat sebuah table kita bisa memanfaatkan database migration. Jadi memungkinkan kita mendesain sebuah table dengan sebuah kode. Langsung saja kita mulai.

Silahkan mjalankan perintah di bawah ini untuk membuat migration baru :

php spark migrate:create post

Di atas kita membuat sebuah migration baru dengan nama post, jika perintah di atas berhasil kita akan dibuatkan file migration tersebut di dalam folder app/Database/Migrations/2020-07-01-114147_post.php. Untuk tanggal pada nama file migration akan sesuai dengan waktu ketika kita membuatnya.

Sekarang kita akan lakukan beberapa penambahan kode untuk membuat column-column di table kita, langsung saja kita buka file app/Database/Migrations/2020-07-01-114147_post.php kemudian pada function up ubahlah menjadi seperti berikut ini :

public function up()
{
  $this->forge->addField([
     'id' => [
          'type'           => 'INT',
          'constraint'     => 11,
          'unsigned'       => TRUE,
          'auto_increment' => TRUE
       ],
      'title' => [
           'type'           => 'VARCHAR',
           'constraint'     => '255',
       ],
       'content'     => [
           'type'   => 'TEXT'
       ],
   ]);
   $this->forge->addKey('id', TRUE);
   $this->forge->createTable('posts');
}

Dari kode diatas, kita membuat sebuah table posts dengan memiliki 3 column, diantaranya adalah : id, title, content. Sekarang mari kita bahas satu-persatu.

COLUMN ID

'id' => [
   'type'           => 'INT',
   'constraint'     => 11,
   'unsigned'       => TRUE,
   'auto_increment' => TRUE
],

Jika teman-teman perhatikan untuk coloumn id diatas, disini kita menggunakan tipe data INT atau integer dan memiliki value 11 dan kita jadikan sebagai auto increment.

COLUMN TITLE

'title' => [
   'type'           => 'VARCHAR',
   'constraint'     => '255',
],

Untuk coloumn title diatas, kita menggunakan tipe data VARCHAR dan menggunakan value 255.

COLUMN CONTENT

'content' => [
   'type'   => 'TEXT'
],

Kemudian untuk coloumn content, disini kita menggunakan tipe data TEXT dan kita tidak perlu menambahkan value untuk tipe data ini.

$this->forge->addKey('id', TRUE); 
$this->forge->createTable('posts');

Dan untuk kode diatas ini, fungsinya coloumn ID akan dijadikan sebagai primary key dan kita membuat tabelnya dengan nama posts .

Langkah 6 - Menjalankan Migration

Setelah kita membuat beberapa column di migration, sekarang kita lanjutkan untuk menjalankan migration tersebut, silahkan jalankan perintah di bawah :

php spark migrate

Jika berhasil maka kita akan dibuatkan table posts di dalam database, kurang lebih seperti berikut ini :