Blog Development and Profile Management Using CodeIgniter4 (Part 1-Framework Installation & Database Setup)

Created by: Anisa Damayanti, S.Kom.
For Study Purpose Only!

Pada tahapan pertama dari tutorial pengembangan web ini, kita akan memulai perjalanan pengembangan blog responsif menggunakan CodeIgniter 4. Fokus utama dari tutorial ini adalah proses instalasi dan pengaturan database, yang merupakan langkah awal penting dalam membangun aplikasi web yang kuat dan efisien.

A. Persiapan Tools

• CodeIgniter4 versi 4.3.3
• XAMPP (MySQL) with PHP minimum version 7.4
• Web Browser with latest version (Chrome, Chrome Developer, Mozilla Firefox, Microsoft Edge)
• Composer (Opsional)
• AdminLTE

Perlu diperhatikan bahwa persiapan tools sangat dibutuhkan untuk di-install agar proses pembuatan Website dapat dilakukan dan tidak memakan waktu terlalu lama.

B. Instalasi CodeIgniter4

Jika anda belum pernah melakukan requirement awal CodeIgniter4, maka sebaiknya mengikuti tutorial yang sudah disediakan sebelumnya yaitu Get Started with CodeIgniter4!

Dalam melakukan instalasi CodeIgniter4 kita dapat melakukan dengan 2 cara, yaitu versi Manual dan versi bantuan menggunakan Composer.

Pilih salah satu untuk melakukan Instalasi CodeIgniter4

Instal Cara Manual

• Download CodeIgniter4 dengan cara klik di sini saja, setelah di klik akan secara otomatis mendownload CodeIgniter4 dengan versi 4.3.3

• Selanjutnya mengekstrak terlebih dahulu folder Zip tersebut ke dalam folder biasa. Klik kanan pada Folder -> pilih Extract Here

• Selanjutnya memindahkan folder tersebut ke dalam directory path xampp -> htdocs. Pertama copy terlebih dahulu folder-nya kemudian buka aplikasi XAMPP. Selanjutya pada Modul MySQL terdapat tombol Explorer yang akan mengarahkan kita ke dalam directory path XAMPP.
  Klik tombol Explorer -> pilih folder htdocs. Terakhir silahkan paste folder yang tadi di copy ke dalam folder htdocs.

• Selanjutnya rename atau ganti nama folder menjadi myblog-nama-kelas (tidak perlu menggunakan huruf kapital)

• Open VSCode -> File -> Open Folder -> Pilih folder project (berada di dalam folder xampp>htdocs) -> Select Folder

• Duplikat file env, kemudian file hasil duplikat di rename menjadi .env

• Pada file .env cari line yang terdapat #CI_ENVIRONMENT = production, hilangankan tanda # dan ubah kata production menjadi development lalu simpan

• Selanjutnya open folder app -> config -> App.php
• Pada file App.php cari line $baseURL dan ubah http://localhost:8080/ menjadi http://localhost/myblog-nama-kelas/public/ lalu simpan

• Selanjutnya kita akan mecoba untuk me-running CodeIgniter4 langsung di Web Browser
  Silahkan untuk membuka Web Browser seperti Google Chrome kemudian ketikan url berikut: localhost/myblog-nama-kelas kemudian tekan Enter, lalu klik folder public

• Jika me-running CodeIgniter4 melalui server web internal PHP, maka panggil php spark serve di terminal pada root folder project myblog-nama-kelas dengan catatan tidak perlu mengubah file App.php pada line $baseURL (tetap dengan $baseURL = http://localhost:8080/)

• Instalasi CodeIgniter4 dengan cara Manual yang sudah kita lakukan dikatakan sukses jika pada Web Browser muncul tampilan berikut:

Instal Cara Composer

• Pastikan anda sudah mengetahui dan pernah mencoba instalasi melalui Composer, karena pada tutorial ini akan melakukan instalasi CodeIgniter4 secara spesifik pada versi 4.3.3
• Pastikan Composer sudah terinstall terlebih dahulu
• Pastikan Komputer atau Laptop memiliki koneksi internet yang stabil
• Selanjutnya buka aplikasi Visual Studio Code lalu masuk ke dalam directory tempat htdocs berasal
• Buka jendela terminal lalu menjalankan perintah composer create-project codeigniter4/appstarter:4.3.3 myblog-nama-kelas

• Setelah selesai, open folder project myblog-nama-kelas di Visual Studio Code agar pada Workspace hanya fokus membuka root folder project tersebut

• Kemudian buka composer.json untuk mengubah ke versi 4.3.3 dengan mencari line “codeigniter4/framework”: “^4.0” dan kolom “^4.0” diubah dengan “4.3.3” lalu simpan

• Selanjutnya buka kembali terminal dengan menjalankan perintah composer update

• Duplikat file env, kemudian file hasil duplikat di rename menjadi .env

• Pada file .env cari line yang terdapat #CI_ENVIRONMENT = production, hilangankan tanda # dan ubah kata production menjadi development lalu simpan

• Selanjutnya open folder app -> config -> App.php
• Pada file App.php cari line $baseURL dan ubah http://localhost:8080/ menjadi http://localhost/myblog-nama-kelas/public/ lalu simpan

• Setelah instalasi dinyatakan selesai, sama seperti versi Manual yang selanjutnya kita akan mecoba untuk me-running CodeIgniter4 menggunakan Web Browser.
  Silahkan untuk membuka Web Browser seperti Google Chrome kemudian ketikan url berikut: localhost/myblog-nama-kelas kemudian tekan Enter, lalu klik folder public

• Jika me-running CodeIgniter4 melalui server web internal PHP, maka panggil php spark serve di terminal pada root folder project myblog-nama-kelas dengan catatan tidak perlu mengubah file App.php pada line $baseURL (tetap dengan $baseURL = http://localhost:8080/)

• Instalasi CodeIgniter4 dengan cara Composer yang sudah kita lakukan dikatakan sukses jika pada Web Browser muncul tampilan berikut:

C. Instalasi AdminLTE

• Download terlebih dahulu AdminLTE versi terbaru dengan cara klik di sini saja, setelah di klik akan secara otomatis mendownload folder AdminLTE dalam format Zip

• Selanjutnya mengekstrak folder Zip AdminLTE yang sudah di-download tadi dengan cara Klik kanan pada Folder -> pilih Extract Here.

• Selanjutnya rename atau ganti nama folder menjadi adminlte agar lebih mudah mengkonfigurasi saat membangun project

• Pada folder public buatlah folder baru yang diberi nama assets
• Pembuatan folder dimulai dari membuka folder xampp -> htdocs -> myblog-nama-kelas -> public
• Selanjutnya memindahkan folder adminlte yang sudah di rename tadi ke dalam folder assets yang sudah dibuat sebelumnya

D. Setup Database

Pembuatan Query Database

• Pada aplikas XAMPP pastikan sudah mengaktifkan Module Apache dan MySQL dengan mengklik tombol Start

• Buka Web Browser seperti Chrome, Chrome Developer, Mozilla Firefox ataupun Microsoft Edge dengan memasukan paragraf url berikut: localhost/phpmyadmin kemudian tekan Enter

• Buatlah Database baru dengan nama db-myblog-nama-kelas dan klik menu SQL yang terdapat pada Top Bar

• Copy seluruh paragraf script berikut dan Paste di dalam perintah SQL, lalu klik tombol Go

-- Copyright 2024 Anisa Damayanti, S.Kom.
-- SMK Texar & SMK IT Assalam Karawang
-- https://www.instagram.com/ansdyi/
-- https://decemberskiescode.com/
--
-- Host: localhost
-- Generation Time: Aug 26, 2024 at 03:38 AM
-- Server version: 10.4.28-MariaDB
-- PHP Version: 8.1.17

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
START TRANSACTION;
SET time_zone = "+00:00";

--
-- Table structure for table `blogs`
--

CREATE TABLE `blogs` (
  `id` int(11) UNSIGNED NOT NULL,
  `user_id` int(11) UNSIGNED NOT NULL,
  `title` varchar(255) NOT NULL,
  `image` varchar(255) DEFAULT NULL,
  `content` text NOT NULL,
  `created_at` datetime DEFAULT current_timestamp(),
  `updated_at` datetime DEFAULT current_timestamp() ON UPDATE current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;

-- --------------------------------------------------------

--
-- Table structure for table `profiles`
--

CREATE TABLE `profiles` (
  `id` int(11) UNSIGNED NOT NULL,
  `user_id` int(11) UNSIGNED NOT NULL,
  `full_name` varchar(100) NOT NULL,
  `profile_photo` varchar(255) DEFAULT NULL,
  `about` text NOT NULL,
  `address` text NOT NULL,
  `phone_number` varchar(15) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;

-- --------------------------------------------------------

--
-- Table structure for table `users`
--

CREATE TABLE `users` (
  `id` int(11) UNSIGNED NOT NULL,
  `username` varchar(100) NOT NULL,
  `password` varchar(255) NOT NULL,
  `profile_photo` varchar(255) DEFAULT NULL,
  `created_at` datetime DEFAULT current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;

--
-- Indexes for table `blogs`
--
ALTER TABLE `blogs`
  ADD PRIMARY KEY (`id`),
  ADD KEY `user_id` (`user_id`);

--
-- Indexes for table `profiles`
--
ALTER TABLE `profiles`
  ADD PRIMARY KEY (`id`),
  ADD KEY `user_id` (`user_id`);

--
-- Indexes for table `users`
--
ALTER TABLE `users`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for table `blogs`
--
ALTER TABLE `blogs`
  MODIFY `id` int(11) UNSIGNED NOT NULL AUTO_INCREMENT;

--
-- AUTO_INCREMENT for table `profiles`
--
ALTER TABLE `profiles`
  MODIFY `id` int(11) UNSIGNED NOT NULL AUTO_INCREMENT;

--
-- AUTO_INCREMENT for table `users`
--
ALTER TABLE `users`
  MODIFY `id` int(11) UNSIGNED NOT NULL AUTO_INCREMENT;

--
-- Constraints for table `blogs`
--
ALTER TABLE `blogs`
  ADD CONSTRAINT `blogs_ibfk_1` FOREIGN KEY (`user_id`) REFERENCES `users` (`id`);

--
-- Constraints for table `profiles`
--
ALTER TABLE `profiles`
  ADD CONSTRAINT `profiles_ibfk_1` FOREIGN KEY (`user_id`) REFERENCES `users` (`id`);
COMMIT;

• Setelah berhasil membuat 3 tabel dan struktur dari setiap tabel, langkah selanjutnya adalah merapikan Relasi antar tabel dengan masuk ke menu Designer yang terdapat pada Top Bar

• Rapikan tabel dengan cara mengarahkan setiap tabel ke arah kanan-kiri atau atas-bawah dan beri nama relation-db-myblog

Konfigurasi Database

• Open folder app -> config -> Database.php
• Pada file Database.php cari line public array $default dan fokus mengubah isi kolom ‘username’, ‘password’, dan ‘database’, lalu simpan

Download to PDF