Tutorial CRUD CodeIgniter 4 Dengan Bootstrap #5 : Edit & Update Data


Fika Ridaul Maulayya
Full-Stack Web Developer, Content Creator and CO-Founder Santri Koding. I share everything i know with Articles, Screencasts and E-Books at SantriKoding.com

Tutorial CRUD CodeIgniter 4 Dengan Bootstrap #5 : Edit & Update Data - Halo teman-teman semuanya, pada tutorial kali ini kita semua akan belajar membuat edit & update data ke dalam database di CodeIgniter 4.

Langkah 1 - Membuat Fungsi Edit & Update di Controller

Kali ini kita akan menambah 2 function baru di dalam controller Post, yaitu function edit & function update.

  • function edit - fungsi ini akan kita gunakan untuk menampilkan sebuah data di dalam form sesuai dengan ID.

  • function update - fungsi ini akan kita gunakan untuk memproses data inputan dari form yang akan diupdate ke dalam database.

Sekarang silahkan teman-teman buka file app/Controllers/Post.php dan tambahkan 2 function berikut ini dibawah function store :

    /**
     * edit function
     */
    public function edit($id)
    {
        //model initialize
        $postModel = new PostModel();

        $data = array(
            'post' => $postModel->find($id)
        );

        return view('post-edit', $data);
    }

    /**
     * update function
     */
    public function update($id)
    {
        //load helper form and URL
        helper(['form', 'url']);
         
        //define validation
        $validation = $this->validate([
            'title' => [
                'rules'  => 'required',
                'errors' => [
                    'required' => 'Masukkan Judul Post.'
                ]
            ],
            'content'    => [
                'rules'  => 'required',
                'errors' => [
                    'required' => 'Masukkan konten Post.'
                ]
            ],
        ]);

        if(!$validation) {

            //model initialize
            $postModel = new PostModel();

            //render view with error validation message
            return view('post-edit', [
                'post' => $postModel->find($id),
                'validation' => $this->validator
            ]);

        } else {

            //model initialize
            $postModel = new PostModel();
            
            //insert data into database
            $postModel->update($id, [
                'title'   => $this->request->getPost('title'),
                'content' => $this->request->getPost('content'),
            ]);

            //flash message
            session()->setFlashdata('message', 'Post Berhasil Diupdate');

            return redirect()->to(base_url('post'));
        }

    }

Jika Controller Post.php di tulis dengan lengkap, kurang lebih seperti berikut ini :

<?php namespace App\Controllers;

use CodeIgniter\Controller;
use App\Models\PostModel;

class Post extends Controller
{
    /**
     * index function
     */
    public function index()
    {
        
        //model initialize
        $postModel = new PostModel();

        //pager initialize
        $pager = \Config\Services::pager();

        $data = array(
            'posts' => $postModel->paginate(2, 'post'),
            'pager' => $postModel->pager
        );

        return view('post-index', $data);
    }
    
    /**
     * create function
     */
    public function create()
    {
        return view('post-create');
    }

    /**
     * store function
     */
    public function store()
    {
        //load helper form and URL
        helper(['form', 'url']);
         
        //define validation
        $validation = $this->validate([
            'title' => [
                'rules'  => 'required',
                'errors' => [
                    'required' => 'Masukkan Judul Post.'
                ]
            ],
            'content'    => [
                'rules'  => 'required',
                'errors' => [
                    'required' => 'Masukkan konten Post.'
                ]
            ],
        ]);

        if(!$validation) {

            //render view with error validation message
            return view('post-create', [
                'validation' => $this->validator
            ]);

        } else {
            
            //model initialize
            $postModel = new PostModel();
            
            //insert data into database
            $postModel->insert([
                'title'   => $this->request->getPost('title'),
                'content' => $this->request->getPost('content'),
            ]);

            //flash message
            session()->setFlashdata('message', 'Post Berhasil Disimpan');

            return redirect()->to(base_url('post'));
        }

    }

    /**
     * edit function
     */
    public function edit($id)
    {
        
        //model initialize
        $postModel = new PostModel();

        $data = array(
            'post' => $postModel->find($id)
        );

        return view('post-edit', $data);
    }

    /**
     * update function
     */
    public function update($id)
    {
        //load helper form and URL
        helper(['form', 'url']);
         
        //define validation
        $validation = $this->validate([
            'title' => [
                'rules'  => 'required',
                'errors' => [
                    'required' => 'Masukkan Judul Post.'
                ]
            ],
            'content'    => [
                'rules'  => 'required',
                'errors' => [
                    'required' => 'Masukkan konten Post.'
                ]
            ],
        ]);

        if(!$validation) {

            //model initialize
            $postModel = new PostModel();

            //render view with error validation message
            return view('post-edit', [
                'post' => $postModel->find($id),
                'validation' => $this->validator
            ]);

        } else {
            
            //model initialize
            $postModel = new PostModel();
            
            //insert data into database
            $postModel->update($id, [
                'title'   => $this->request->getPost('title'),
                'content' => $this->request->getPost('content'),
            ]);

            //flash message
            session()->setFlashdata('message', 'Post Berhasil Diupdate');

            return redirect()->to(base_url('post'));
        }
    }
}

Langkah 2 - Membuat View

Selanjutnya, silahkan teman-teman baut sebuah file baru dengan nama post-edit.php di dalam folder app/Views/ dan masukkan kode berikut ini :

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <title>Edit Data - santriKoding.com</title>
  </head>
  <body>

    <div class="container mt-5">
        <div class="row">
            <div class="col-md-12">
                <?php if(isset($validation)) { ?>
                    <div class="alert alert-danger" role="alert">
                        <?php echo $validation->listErrors() ?>
                    </div>
                <?php } ?>
                <div class="card">
                    <div class="card-body">
                        <form action="<?php echo base_url('post/update/'.$post['id']) ?>" method="POST">
                            <div class="form-group">
                                <label>TITLE</label>
                                <input type="text" class="form-control" name="title" value="<?php echo $post['title'] ?>" placeholder="Masukkan Title">
                            </div>
                            <div class="form-group">
                                <label>KONTEN</label>
                               <textarea class="form-control" name="content" rows="4" placeholder="Masukkan Konten"><?php echo $post['content'] ?></textarea>
                            </div>
                            <button type="submit" class="btn btn-primary">UPDATE</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
  </body>
</html>

Langkah 3 - Menjalankan Aplikasi

Untuk mengaksesnya, teman-teman bisa mencoba dengan ketik http://localhost:8080/post/edit/1

Maka kurang lebih hasilnya seperti gambar dibawah ini :


DOWNLOAD SOURCE CODE

Untuk teman-teman yang ingin mengunduh source codenya : https://github.com/maulayyacyber/CodeIgniter4-CRUD

KESIMPULAN

Pada tutorial kali ini kita semua sudah belajar bagaimana cara menambahkan function edit & update ke dalam database di CodeIgniter 4.

Jika teman-teman ada pertanyaan atau kendala saat mencoba, silahkan teman-teman bisa bertanya melalui kolom komentar dibawah artikel ini.

Terima Kasih


Fika Ridaul Maulayya
Full-Stack Web Developer, Content Creator and CO-Founder Santri Koding. I share everything i know with Articles, Screencasts and E-Books at SantriKoding.com

Suka dengan tulisan di SantriKoding? Kamu bisa memberikan dukungan dengan berdonasi atau bagikan konten ini di sosial media. Terima kasih atas dukungan Anda!

KEBIJAKAN KOMENTAR

Saat memberikan komenatar silahkan memberikan informasi lengkap tentang error, seperti: screenshot, link kode, dll. Baca aturan komentar kami

KOMENTAR