Personal Blog Sederhana Menggunakan CodeIgniter 4 (CRUD)

7 min readJun 26, 2021

Hey yoo, part-2 dari membuat personal website dengan fitur blog telah hadir. Kali ini aku langsung aja ya.

Buat kalian yang belum baca part 1 dari tutorial ini bisa kunjungi artikel sebelumnya biar kalian engga bingung sama bahasan tulisan ini.

Profile Website Sederhana Menggunakan Framework CodeIgniter 4

Hi, semua. Setelah sekian lama aku balik lagi nulis 😅. Kali ini aku angkat topik menarik nih buat kalian, kita bakal…

salimbinusman.medium.com

Table of Content

Nyiapin Koneksi Database (Wajib!)
Bikin Migration dan Model (Harus tapi boleh beda)
Bikin Blog (Boleh beda banget)

Persiapan Database

Sebelum kalian mulai, pastiin XAMPP sudah terinstall di komputer kalian. Terus jalanin XAMPP dan nyalain module Apache dan MySQL. Kalau udah buka browser kalian dan kunjungi http://localhost/phpmyadmin, kalau berhasil nanti tampilannya bakal kaya gini

Step 1: buat database baru, caranya klik tulisan new di panel sebelah kiri terus beri nama database kalian, disini aku bakal pake nama blogs, terus klik create.

Step 2: setup koneksi aplikasi kita ke database. Cek di root folder project kalian ada file namanya .env . Kalau belum ada kalian jalanin command
cp env .env di terminal. Kemudian edit beberapa bagian agar sama seperti gambar dibawah ini

Migration dan Model

Sekarang waktunya kita bikin migration, buat kalian yang belum familiar sama migration tuh dia fungsinya buat bikin dan modifikasi table di database kita. Migration bikin kita bisa keep track sama perubahan design database yang kita pakai waktu ngembangin website kita.

Migration

Step 1 : Jalanin command php spark make:migration CreateBlogTable . Kalau berhasil kalian bakal nemuin file migration kalian di folder app/Database/Migrations

Step 2 : Buka file migration yang udah dibuat dan buat design table dengan nama blog, disini aku buat lima atribut : id, judul, isi, waktu dibuat dan waktu diupdate. Lengkapnya kaya gini

Terus jalanin command php spark migrate untuk jalanin migration kita, cek di phpmyadmin dan tabel blog harusnya udah ada

Model

Step 1 : Jalanin command php spark make:model BlogModel . File Model kalian bisa ditemuin di folder app/Models

Step 2 : Buka file model kalian dan definisiin $primaryKey dan atribute yang dapat diisi di $allowedFields. Hapus definisi lain yang kalian rasa nggak perlu atau bisa samain kaya punya ku.

Bikin Blog

Sekarang waktunya kita berkreasi untuk bikin blog keren, setidaknya menurutku 😄. Aku bakal ngejelasin cara bikin tiap fitur dari CRUD.

Sebelum kita masuk ke main course-nya kita harus buat dulu views awal dan controller blog kita. Buat file blog.php di tabel views dan isi dengan template dari file layout.php yang kita buat di tutorial sebelumnya. Kira-kira kaya gini

Buat route untuk ngehandle request yang ngarah ke views blog.php yang udah kita buat

$routes->get('/blog', 'Blog::index');

Buat controller baru dengan nama Blog untuk ngehandle halaman blog kita, jalanin command php spark make:controller Blog. Jangan lupa buat bikin fungsi index di Controller Blog untuk ngehandle route yang telah dibuat

public function index()
{
    return view('blog');
}

Terakhir jangan lupa tambahin namespace model blog yang udah kita buat di bagian atas file controller, pokoknya yang ada use nya diatas, nah ini taruh aja dibawahnya

use App\Models\BlogModel;

Create

Kita sekarang pengen bisa nulis cerita untuk kita upload di blog kita, aku jelasin alurnya yah.
Step 1 : Buat elemen di views blog.php kita yang bakal digunain untuk nulis cerita kita dan bisa diupload ke database. Aku bakal pake Tombol + yang ngebuka modal berisi form untuk nulis cerita kita.

Kalau kalian perhatiin di elemen form tuh kita pake method “POST” yang menjalankan action route/blog/store berarti kita butuh route untuk ngehandle ini

Step 2 : Tambahin route untuk ngarahin data yang dikirim dari views ke controller

$routes->post('/blog/store', 'Blog::store');

Step 3 : Sekarang buat fungsi store di controller Blog kita. Isinya dia nerima data dari views untuk kita simpan ke database pake BlogModel yang udah kita buat.

public function store()
{
    $blog = new BlogModel();
    $blog->insert([
        'blog_title' => $this->request->getVar('blog_title'),
        'blog_description' => $this->request
                                    ->getVar('blog_description')
    ]);
    
    return redirect()->to('/blog');
}

Yeayy sekarang kita udah bisa nambahin cerita baru ke database

Data kita juga udah berhasil kesimpen di database lho!

Read

Sekarang kita pengen cerita yang udah kesimpen di database bisa dilihat dari web kita. Berarti waktu kita buka viewsnya blog, kita perlu ngirim data yang kesimpen ke views kita biar bisa ditampilin.

Step 0 (opsional) : Kebetulan nih aku pake library animate.css biar animasi tampilannya lebih keren, kalau kalian pengen pake juga bisa jalanin command ini dulu di terminal

npm install animate.css --save

Terus tambahin satu tag <link> di file layout.php atau di section css kalian kaya gini

<link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/
    animate.min.css"
/>

Sama tambahin satu tag <script> di section js kalian

<script>
    $( document ).ready(function() {
        $('.modal').on('show.bs.modal', function (e) {
            $('.modal .modal-dialog').attr('class', 'modal-dialog 
              modal-dialog-centered  animate__animated 
              animate__zoomIn');
        })
        $('.modal').on('hide.bs.modal', function (e) {
            $('.modal .modal-dialog').attr('class', 'modal-dialog 
              modal-dialog-centered  animate__animated 
              animate__zoomOut');
        })
    });
</script>

Kalau kalian nggak pengen pake library itu gapapa kok, web kalian tetep bakal jalan normal aja

Step 1 : Buat elemen di views untuk nampilin cerita yang udah kita simpen di database. Kali ini aku bakal pake Card untuk preview dan modal untuk cerita penuhnya biar layoutnya bagus.

Step 2 : Tampilan udah siap nih, waktunya kita kirim cerita yang udah kita simpen di database ke views di controller, modifikasi fungsi index di Controller Blog jadi kaya gini

public function index()
{
    $blog = new BlogModel();
    $data['blog'] = $blog->orderBy('created_at','desc')->findAll();
    
    return view('blog', $data);
}

Udah deeh! Gimana? Read gampang kan?

Update

Misal nih, cerita yang udah kalian tulis terus simpan, waktu baca cerita nemu ada yang typo dari tulisan kalian, terus gimana? disini lah kita bakal bisa me-edit cerita kita. Kalau kalian pengen edit cerita berarti kalian butuh cerita yang salah untuk ditampilin di form agar bisa diedit kan? Nah, berarti kalian bisa make data dari langkah sebelumnya untuk dimasukin ke form, biar kalian bisa langsung ngedit kesalahannya.

Step 1 : Seperti biasa kita buat elemen di views agar bisa ngelakuin kaya yang udah kita bayangin diatas. Aku bakal buat tombol edit di card cerita yang ada dan ketika dipencet bakal nampilin modal yang isinya form kaya waktu kita create story, bedanya formnya ada isinya kali ini.

Pastiin elemennya diletakin di posisi yang sama kaya comment di create_story_element biar bisa jalan dengan baik

Step 2 : Tambahin route yang ngarahin data cerita yang diupdate dari views ke controller

$routes->post('/blog/(:any)/update', 'Blog::update/$1');

Perhatiin (:any) dan $1 yang ada di route diatas. Fungsinya itu adalah kita bisa bikin routesnya dinamis pake id cerita yang ingin kita update. Gampangnya biar nanti controller tau cerita mana yang pengen kita update.

Step 3 : Buat fungsi update yang bakal nanganin cerita yang kita update ke database

public function update($id)
{
    $blog = new BlogModel();
    $blog->update($id,[
        'blog_title' => $this->request->getVar('blog_title'),
        'blog_description' => $this->request
                                   ->getVar('blog_description')
    ]);
    return redirect()->to('/blog');
}

yang dilakuin sama potongan kode diatas tuh kita ngeupdate cerita yang punya id = $id dengan data yang baru.

Voila! sekarang kita udah bisa ngeupdate cerita yang udah pernah kita tulis!

Delete

Terakhir nih, kalau kita gasuka sama cerita yang udah pernah kita tulis? kita hapus dong. Kira-kira caranya gimana? Bener banget! Kita bakal milih cerita mana yang pengen kita hapus dan kita kasih tahu ke controller untuk ngehapus cerita itu.

Step 1 : Disini kita buat elemen di views untuk milih cerita mana yang dihapus, aku bakal pake tombol yang ada waktu kita ngelihat cerita kita, biar kita nggak sampe kecelakaan ngehapus cerita yang sebenernya nggak pengen kita hapus.

Pastiin juga elemen ini diletakin di tempat yang sesuai sama create_story_element yaa

Step 2 : Buat route yang ngehandle cerita yang dipilih untuk dihapus oleh controller

$routes->post('/blog/(:any)/delete', 'Blog::delete/$1');

Step 3 : Buat fungsi delete yang bakal ngehapus cerita yang udah kita pilih untuk dihapus dari database.

public function delete($id)
{
    $blog = new BlogModel();
    $blog->delete([$id]);    return redirect()->to('/blog');
}

yang dilakuin sama fungsi diatas sederhana aja, dia bakal ngehapus story di database yang punya id = $id

Congratulation!! sekarang kita udah bisa ngelakuin semua operasi dari CRUD di blog personal website kita !!

Story kita udah berhasil dihapus dari database lho!

Conclussion

Nanti kalau udah jadi bakal kaya gini nih

Kita telah melewati perjalanan yang menyenangkan bersama-sama untuk membuat sebuah personal website yang memiliki fitur blog dengan framework CodeIgniter 4. If you have problem(s) kindly reach me through comments. For full code please visit in my repository. Peace out. ☺