[Tutorial CodeIgniter] Cara Mengedit Data dari Database #7

Assalamualikum, wr. wb. teman-teman, sekarang kita sudah sampai ke tutorial cara mengedit data user. Pada tutorial sebelumnya kita sudah belajar tentang Cara Menambahkan Data User, bagi yang belum mengikuti saya sarankan untuk melihatnya terlebih dahulu, karena ada kaitannya.

Oke langsung saja, silahkan buka file view users/index.php kemudian edit pada bagian tombol atau button Ubah, tambahkan kode berikut pada href-nya.


Cara ini hampir sama dengan membuat tombol tambah data user pada tutorial sebelumnya, bedanya kita melakukan parsing id yang kita dapat dari tabel user. Nilai 'id' ini cara mengambilnya sama seperti mengambil username dan email pada tutorial sebelumnya, yaitu $u['id].

Kemudian kita buat fungsi formEdit() pada kelas controller user dan ketikkan kode berikut, letakkan setelah fungsi simpanData() yang sudah kita buat pada tutorial sebelumnya.

1
2
3
4
5
6
<?php
 public function formEdit($id)
    {
        $data['user'] = $this->User_model->getUserById($id);
        $this->load->view('users/form_edit', $data);
    }
  • Baris 4: Kita memanggil fungsi getUserById($id) pada kelas User_model untuk mendapatkan data user sesuai dengan id yang kita kirim melalui tombol Ubah tadi. Lalu kita simpan ke variabel $data['user'].
  • Baris 5: Kemudian kita kirim data user tersebut ke view users/form_edit.php.

Sekarang kita buat fungsi getUserById() pada kelas User_model dengan kode seperti berikut.

1
2
3
4
5
<?php
public function getUserById($id)
    {
        return $this->db->get_where('user', ['id' => $id])->row_array(); 
    }
  • Baris 2: Kita buat fungsi getUserById($id) dengan parameter 'id' yang kita gunakan untuk pengecekan kondisi pada fungsi formEdit() pada kelas controller User.
  • Baris 4: Kita mengembalikan satu baris data yang memiliki 'id' yang sama dengan 'id' yang dikirim oleh tombol Ubah tadi. Maka dari itu kita gunakan row_array() untuk mengambil datanya.

Selanjutnya silahkan buat form_edit.php dengan menambahkan kode berikut.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="card">
            <div class="card-header">
                Form Edit
            </div>
            <div class="card-body">
                <form action="<?= base_url() ?>user/ubahData" method="post">
                    <input type="hidden" name="id" value="<?= $user['id'] ?>">
                    <div class="form-group">
                        <label for="exampleInputUsername">Username</label>
                        <input type="text" name="username" class="form-control" value="<?= $user['username'] ?>" id="exampleInputUsername" placeholder="Enter username">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputEmail">Email</label>
                        <input type="email" name="email" class="form-control" value="<?= $user['email'] ?>" id="exampleInputEmail" placeholder="Enter email">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword">Password</label>
                        <input type="password" name="password" class="form-control" value="<?= $user['password'] ?>" id="exampleInputPassword" placeholder="Password">
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>
            </div>
        </div>
    </div>
</body>
</html>
  • Baris 19: Jangan lupa form action-nya arahkan ke fungsi ubahData() yang akan kita buat  nanti serta method-nya post.
  • Baris 20: Tambahkan field input bertipe hidden yang berisi 'id'.
  • Baris 21 - 32: Tiap field tambahkan value berdasarkan nama kolom yang akan diedit, misal field username memiliki value $user['username] dan seterusnya.

Jika berhasil maka pada form edit data akan menjadi seperti ini ketika kalian klik salah satu tombol Ubah pada tabel user. Data tersebut akan ditampilkan pada tiap field sesuai value yang kalian berikan tadi.

Ingat! kita belum buat fungsi untuk update datanya. Kode yang baru kita buat tadi masih untuk menampilkan form edit data. Oke sekarang silahkan menuju ke kelas User dan tambahkan kode berikut.

1
2
3
4
5
6
<?php
public function ubahData()
    {
        $this->User_model->updateData();
        redirect('index');
    }
  • Baris 4: Kita akan jalankan fungsi updateData() pada kelas User_model yang akan kita buat setelah ini.
  • Baris 5: Jika data berhasil di-update maka akan me-redirect ke halaman index.

Sekarang buat fungsi updateData() pada kelas User_model dengan menambahkan kode berikut.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<?php
public function updateData()
    {
        $data = [
            "username" => $this->input->post('username', true),
            "email" => $this->input->post('email', true),
            "password" => $this->input->post('password', true)
        ];
        $this->db->where('id', $this->input->post('id'));
        $this->db->update('user', $data);
    }

  • Baris 4 -8: Kita menerima data dari inputan form tadi, dan kita tambahkan parameter true untuk mengamankan data kita.
  • Baris 9 - 10: Ini adalah sintaks dari Codeigniter untuk melakukan update data. Jika teman - teman ingin melihat query builder yang disediakan oleh CodeIgniter silahkan klik disini.

Done! Sekarang kita coba jalankan kodenya di browser.

Cara Mengubah Data Menggunakan CodeIgniter
Pilih data yang ingin diubah

Cara Mengubah Data Menggunakan CodeIgniter
Ubah data

Cara Mengubah Data Menggunakan CodeIgniter
Data berhasil diubah

Sekian tutorial kali ini tentang Cara Mengubah Data Menggunakan CodeIgniter. Tutorial selanjutnya kita akan belajar cara menghapus data. Sekian Wassalamualaikum, wr. wb.

Baca Seri Lengkap CRUD Menggunakan CodeIgniter:
  1. Cara Menampilkan Data.
  2. Cara Menambahkan Data.
  3. Cara Mengedit Data.
  4. Cara Menghapus Data.

Posting Komentar

2 Komentar

  1. mau tanya untuk form_edit.php nya pada valuenya $user['username'] . $user itu menunjuk kemana ya ?

    BalasHapus
    Balasan
    1. Merujuk ke fungsi FormEdit pada controller yaitu $data['user'] yang mengambil data dari database, jadi di view cara manggilnya $user['nama_kolom']

      Hapus