Belajar CodeIgniter #10: Cara Membuat Fitur Setting Profile dengan Mudah
Belajar CodeIgniter #10 - Halo, teman-teman! Selamat datang kembali di seri tutorial Belajar CodeIgniter. Pada artikel sebelumnya, kita sudah membahas tentang cara membuat fitur login. Kali ini, kita akan melanjutkan dengan membuat fitur yang tak kalah penting, yaitu Setting Profile. Fitur ini memungkinkan pengguna untuk mengubah informasi profil mereka, seperti nama, email, dan password. Yuk, simak langkah-langkahnya!
Apa yang Akan Kita Bikin?
Pada tutorial Belajar CodeIgniter kali ini, kali ini akan berfokus pada pembuatan fitur setting profile untuk user yang sedang login. Fitur ini mencakup:
- Edit Profile: Memungkinkan pengguna mengubah nama dan email.
- Edit Password: Memungkinkan pengguna mengubah password.
- Avatar Management: Meskipun upload avatar akan kita bahas di tutorial selanjutnya, kita akan mempersiapkan framework-nya terlebih dahulu.
Oke, langsung saja kita mulai!
1. Membuat View Awal untuk Setting
Pertama, kita perlu menyiapkan tampilan awal untuk halaman setting. Berikut adalah kode untuk file admin/setting.php:
<!DOCTYPE html> <html lang="en"> <head> <?php $this->load->view('admin/_partials/head.php') ?> </head> <body> <main class="main"> <?php $this->load->view('admin/_partials/side_nav.php') ?> <div class="content"> <h1>Settings</h1> <div class="card"> <div class="card-header"> <b>Avatar</b> <div style="display: flex; gap: 1em"> <a href="<?= site_url('admin/setting/remove_avatar') ?>" class="txt-red">Remove Avatar</a> <a href="<?= site_url('admin/setting/upload_avatar') ?>">Change Avatar</a> </div> </div> <div class="card-body"> <?php $avatar = $current_user->avatar ? base_url('upload/avatar/' . $current_user->avatar) : get_gravatar($current_user->email) ?> <img src="<?= $avatar ?>" alt="<?= htmlentities($current_user->name, TRUE) ?>" height="80" width="80"> </div> </div> <div class="card"> <div class="card-header"> <b>Profile Settings</b> <a href="<?= site_url('admin/setting/edit_profile') ?>">Edit Profile</a> </div> <div class="card-body"> Name: <span class="text-gray"><?= html_escape($current_user->name) ?></span> <br> Email: <span class="text-gray"><?= html_escape($current_user->email) ?></span> </div> </div> <div class="card"> <div class="card-header"> <b>Security & Password</b> <a href="<?= site_url('admin/setting/edit_password') ?>">Edit Password</a> </div> <div class="card-body"> Your Password: <span class="text-gray">******</span> <br> Last Changed: <span class="text-gray">22-08-2020</span> </div> </div> <?php $this->load->view('admin/_partials/footer.php') ?> </div> </main> <?php if ($this->session->flashdata('message')) : ?> const Toast = Swal.mixin({ toast: true, position: 'top-end', showConfirmButton: false, timer: 3000, timerProgressBar: true, didOpen: (toast) => { toast.addEventListener('mouseenter', Swal.stopTimer) toast.addEventListener('mouseleave', Swal.resumeTimer) } }) Toast.fire({ icon: 'success', title: '<?= $this->session->flashdata('message') ?>' }) <?php endif ?> </body> </html>
Tampilan ini akan menampilkan informasi profil pengguna, termasuk avatar, nama, email, dan status password.
Baca Juga: Belajar CodeIgniter #09: Cara Membuat Fitur Login untuk Admin
2. Mengubah Controller Setting
Selanjutnya, kita perlu mengubah Controller Setting.php untuk menangani berbagai aksi seperti edit profile dan edit password. Berikut adalah kodenya:
<?php class Setting extends CI_Controller { public function __construct() { parent::__construct(); $this->load->model('auth_model'); if (!$this->auth_model->current_user()) { redirect('auth/login'); } } public function index() { $data['current_user'] = $this->auth_model->current_user(); $this->load->view('admin/setting', $data); } public function edit_profile() { $this->load->library('form_validation'); $this->load->model('profile_model'); $data['current_user'] = $this->auth_model->current_user(); if ($this->input->method() === 'post') { $rules = $this->profile_model->profile_rules(); $this->form_validation->set_rules($rules); if($this->form_validation->run() === FALSE){ return $this->load->view('admin/setting_edit_profile_form.php', $data ); } $new_data = [ 'id' => $data['current_user']->id, 'name' => $this->input->post('name'), 'email' => $this->input->post('email'), ]; if($this->profile_model->update($new_data)){ $this->session->set_flashdata('message', 'Profile was updated'); redirect(site_url('admin/setting')); } } $this->load->view('admin/setting_edit_profile_form.php', $data); } public function edit_password() { $this->load->library('form_validation'); $this->load->model('profile_model'); $data['current_user'] = $this->auth_model->current_user(); if ($this->input->method() === 'post') { $rules = $this->profile_model->password_rules(); $this->form_validation->set_rules($rules); if($this->form_validation->run() === FALSE){ return $this->load->view('admin/setting_edit_password_form.php', $data ); } $new_password_data = [ 'id' => $data['current_user']->id, 'password' => password_hash($this->input->post('password'), PASSWORD_DEFAULT), 'password_updated_at' => date("Y-m-d H:i:s"), ]; if($this->profile_model->update($new_password_data)){ $this->session->set_flashdata('message', 'Password was changed'); redirect(site_url('admin/setting')); } } $this->load->view('admin/setting_edit_password_form.php', $data); } }
3. Membuat Model Profile
Model ini bertugas untuk menangani validasi dan update data profil. Berikut adalah kode untuk Profile_model.php:
<?php class Profile_model extends CI_Model { private $_table = "user"; public function profile_rules() { return [ ['field' => 'name', 'label' => 'Name', 'rules' => 'required|max_length[32]'], ['field' => 'email', 'label' => 'Email', 'rules' => 'required|max_length[32]'], ]; } public function password_rules() { return [ ['field' => 'password', 'label' => 'New Password', 'rules' => 'required'], ['field' => 'password_confirm', 'label' => 'Password Confirmation', 'rules' => 'required|matches[password]'], ]; } public function update($data) { if (!$data['id']) { return; } return $this->db->update($this->_table, $data, ['id' => $data['id']]); } }
Baca Juga: Belajar CodeIgniter #08: Cara Validasi Data Form
4. Membuat View untuk Form Edit Profile dan Password
Kita perlu membuat dua view terpisah untuk form edit profile dan edit password. Berikut adalah contoh kodenya:
📜 admin/setting_edit_profile_form.php
<!DOCTYPE html> <html lang="en"> <head> <?php $this->load->view('admin/_partials/head.php') ?> </head> <body> <main class="main"> <?php $this->load->view('admin/_partials/side_nav.php') ?> <div class="content"> <h1>Update Profile</h1> <form action="" method="POST"> <div> <label for="name">Name</label> <input type="text" name="name" class="<?= form_error('name') ? 'invalid' : '' ?>" value="<?= form_error('name') ? set_value('name') : $current_user->name ?>" required maxlength="32"/> <div class="invalid-feedback"><?= form_error('name') ?></div> </div> <div> <label for="email">Email</label> <input type="text" name="email" class="<?= form_error('email') ? 'invalid' : '' ?>" value="<?= form_error('email') ? set_value('email') : $current_user->email ?>" required maxlength="32"/> <div class="invalid-feedback"><?= form_error('email') ?></div> </div> <div> <button type="submit" name="save" class="button button-primary">Save Update</button> </div> </form> <?php $this->load->view('admin/_partials/footer.php') ?> </div> </main> </body> </html>
📜 admin/setting_edit_password_form.php
<!DOCTYPE html> <html lang="en"> <head> <?php $this->load->view('admin/_partials/head.php') ?> </head> <body> <main class="main"> <?php $this->load->view('admin/_partials/side_nav.php') ?> <div class="content"> <h1>Reset Password</h1> <form action="" method="POST"> <div> <label for="password">Password Baru</label> <input type="password" name="password" class="<?= form_error('password') ? 'invalid' : '' ?>" value='<?= set_value("password") ?>' required/> <div class="invalid-feedback"><?= form_error('password') ?></div> </div> <div> <label for="password_confirm">Konfirmasi Password Baru</label> <input type="password" name="password_confirm" class="<?= form_error('password_confirm') ? 'invalid' : '' ?>" value='<?= set_value("password_confirm") ?>' required/> <div class="invalid-feedback"><?= form_error('password_confirm') ?></div> </div> <div> <button type="submit" name="save" class="button button-primary">Save Password</button> </div> </form> <?php $this->load->view('admin/_partials/footer.php') ?> </div> </main> </body> </html>
5. Menambahkan Kolom password_updated_at
Untuk mencatat kapan password terakhir diubah, kita perlu menambahkan kolom password_updated_at di tabel user. Jalankan query berikut:
ALTER TABLE `user` ADD `password_updated_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP AFTER `last_login`;
6. Menampilkan Tanggal Perubahan Password
Terakhir, kita perlu menampilkan tanggal perubahan password di halaman setting. Ubah kode berikut di admin/setting.php:
<div class="card"> <div class="card-header"> <b>Security & Password</b> <a href="<?= site_url('admin/setting/edit_password') ?>">Edit Password</a> </div> <div class="card-body"> Your Password: <span class="text-gray">******</span> <br> Last Changed: <span class="text-gray"><?= $current_user->password_updated_at ?></span> </div> </div>
Kesimpulan
Nah, itu dia tutorial lengkap tentang cara membuat fitur setting profile di CodeIgniter. Dalam tutorial ini, kita telah berhasil membuat fitur Setting Profile di CodeIgniter yang mencakup Edit Profile, Edit Password, dan persiapan Avatar Management. Dengan fitur ini, pengguna dapat memperbarui informasi pribadi mereka dengan mudah, meningkatkan keamanan akun dengan mengganti password secara berkala, serta mempersiapkan sistem untuk upload avatar. Dengan menerapkan fitur ini, aplikasi kita menjadi lebih user-friendly dan aman. Sebagai langkah berikutnya, kita akan membahas bagaimana cara mengimplementasikan fitur upload avatar, sehingga pengguna dapat mengganti foto profil mereka dengan lebih fleksibel.
Buat kamu yang masih pemula atau sudah mahir, jangan ragu untuk bergabung di komunitas CodePolitan. Di sini, kamu bisa bertanya, berbagi ilmu, atau sekadar menuliskan pemikiranmu. Yuk, belajar bareng dan tingkatkan skill coding-mu!
What do you think?
Reactions
