Tutorial Codeigniter Part 14 – Membuat Halaman Profile

codeigniter-kcdev
Advertisements

Pada tutorial kali ini kita akan membuat halaman profile untuk setiap users yang terdaftar pada aplikasi kita. Halaman profile biasanya terdiri dari form input untuk melengkapi data user seperti nama lengkap, alamat, nomor telepon hingga foto profil dan form untuk mengganti password. Kita juga akan membahas mengenai library upload pada codeigniter, dimana library ini akan kita gunakan untuk mengupload foto user. Oke? let’s do it.

1. Memperbarui Struktur Table Users

-- ----------------------------
-- Table structure for users
-- ----------------------------
DROP TABLE IF EXISTS `users`;
CREATE TABLE `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nama` varchar(50) NOT NULL,
  `alamat` varchar(200) NOT NULL,
  `telp` varchar(20) NOT NULL,
  `username` varchar(50) NOT NULL,
  `password` varchar(255) NOT NULL,
  `level` enum('administrator','alumni') NOT NULL DEFAULT 'administrator',
  `last_login` datetime NOT NULL,
  `avatar` varchar(100) NOT NULL DEFAULT 'noavatar.png',
  `active` enum('0','1') NOT NULL DEFAULT '1',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=latin1;

-- ----------------------------
-- Records of users
-- ----------------------------
INSERT INTO `users` VALUES ('1', 'Abdul Manaaf', 'Jl. Sepakat No. 53', '080989999', 'administrator', '$2y$10$B2ztsNPm8JZyGR/E12rRU.itsFuvdnYCsDg/L4SZ.xCx7usFzvXUG', 'administrator', '2017-04-22 06:05:04', 'administrator_20170421152220.jpg', '1');
INSERT INTO `users` VALUES ('2', 'Brekele', '-', '-', 'brekele', '$2y$10$c14El4ivrRXfXAyspwbxQOaXu7cX1r3/odhQRIFQSuXg6yfQ6iya2', 'administrator', '2017-04-14 17:04:39', 'noavatar.png', '1');
INSERT INTO `users` VALUES ('3', 'Daeng', '-', '-', 'daeng', '$2y$10$Uo/O3pE0REYbte04eN171.CrkKNrdwk8LXeedOEFmDZDGYFNfRzSG', 'alumni', '2017-04-14 17:04:51', 'noavatar.png', '1');

Pada SQL syntax di atas, kita menambahkan field baru untuk menampung data pribadi user. Field avatar sendiri untuk menyimpan nama file foto yang berhasil terupload. Satu lagi, semua password itu table users di atas adalah “123123”.

2. Membuat Controller Profile

Pada folder application/controllers buat sebuah file baru bernama Profile.php yang berisi kode berikut.

<?php defined('BASEPATH') OR exit('No direct script access allowed');

class Profile extends MY_Controller {

  public function __construct()
  {
    parent::__construct();
    
    // Cek apakah user sudah login
    $this->cekLogin();

    // Load model users
    $this->load->model('model_users');
  }

  public function index()
  {
    // Jika form profile di submit jalankan blok kode ini
    if ($this->input->post('submit-information')) {
      
      // Jika avatar diganti jalankan blok kode ini
      if (!empty($_FILES['avatar']['name'])) {
        
        // Konfigurasi library upload codeigniter
        $config['upload_path'] = './assets/images/';
        $config['allowed_types'] = 'gif|jpg|png';
        $config['max_size'] = 2000;
        $config['file_name'] = $this->session->userdata('username').'_'.date('YmdHis');

        // Load library upload
        $this->load->library('upload', $config);
        
        // Jika terdapat error pada proses upload maka exit
        if (!$this->upload->do_upload('avatar')) {
            exit($this->upload->display_errors());
        }

        $data['avatar'] = $this->upload->data()['file_name'];
      }

      // Mengatur validasi data nama,
      // # required = tidak boleh kosong
      $this->form_validation->set_rules('nama', 'Nama', 'required');

      // Mengatur validasi data alamat,
      // # required = tidak boleh kosong
      $this->form_validation->set_rules('alamat', 'Alamat', 'required');

      // Mengatur validasi data telepon,
      // # required = tidak boleh kosong
      $this->form_validation->set_rules('telp', 'Telepon', 'required');

      // Mengatur pesan error validasi data
      $this->form_validation->set_message('required', '%s tidak boleh kosong!');

      // Jalankan validasi jika semuanya benar maka lanjutkan
      if ($this->form_validation->run() === TRUE) {

        $data['nama'] = $this->input->post('nama');
        $data['alamat'] = $this->input->post('alamat');
        $data['telp'] = $this->input->post('telp');

        // Ambil user ID dari session
        $userId = $this->session->userdata('id');

        // Jalankan function update pada model_users
        $query = $this->model_users->update($userId, $data);

        // cek jika query berhasil
        if ($query) {

          // Set success message
          $message = array('status' => true, 'message' => 'Berhasil memperbarui profile');
          
          // Update session baru
          $this->session->set_userdata($data);

        } else {

          // Set error message
          $message = array('status' => false, 'message' => 'Gagal memperbarui profile');

        }

        // simpan message sebagai session
        $this->session->set_flashdata('message_profile', $message);

        // refresh page
        redirect('profile', 'refresh');
			} 
    }

    // Jika form password di submit jalankan blok kode ini
    if ($this->input->post('submit-password')) {

      // Mengatur validasi data password_lama,
      // # required = tidak boleh kosong
      // # callback_cekPasswordLama = menjalankan function cekAkun()
      $this->form_validation->set_rules('password_lama', 'Password Lama', 'required|callback_cekPasswordLama');

      // Mengatur validasi data password_baru,
      // # required = tidak boleh kosong
      // # min_length[5] = password_baru harus terdiri dari minimal 5 karakter
      $this->form_validation->set_rules('password_baru', 'Password Baru', 'required|min_length[5]');

      // Mengatur validasi data konfirmasi_password,
      // # required = tidak boleh kosong
      // # matches = nilai konfirmasi_password harus sama dengan password_baru
      $this->form_validation->set_rules('konfirmasi_password', 'Konfirmasi Password', 'required|matches[password_baru]');

      // Mengatur pesan error validasi data
      $this->form_validation->set_message('required', '%s tidak boleh kosong!');
      $this->form_validation->set_message('min_length', '{field} minimal {param} karakter.');
      $this->form_validation->set_message('matches', '{field} tidak sama dengan {param}.');

      // Jalankan validasi jika semuanya benar maka lanjutkan
      if ($this->form_validation->run() === TRUE) {

        $data = array(
          'password' => password_hash($this->input->post('konfirmasi_password'), PASSWORD_DEFAULT)
        );

        // Ambil user ID
        $userId = $this->session->userdata('id');

        // Jalankan function update pada model_users
        $query = $this->model_users->update($userId, $data);

        // cek jika query berhasil
        if ($query) {

          // Logout user
          redirect('auth/logout');

        } else {

          // Set error message
          $message = array('status' => false, 'message' => 'Gagal memperbarui profile');

        }

        // simpan message sebagai session
        $this->session->set_flashdata('message_profile', $message);

        // refresh page
        redirect('profile', 'refresh');
			}

    }

    // Data untuk page profile
    $data['pageTitle'] = 'Profile';
    $data['pageContent'] = $this->load->view('profile/profile', $data, TRUE);

    // Jalankan view template/layout
    $this->load->view('template/layout', $data);
  }

  public function cekPasswordLama()
  {
    // Ambil userId dari session
    $userId = $this->session->userdata('id');
    
    // Ambil data password_lama dari POST
    $password = $this->input->post('password_lama');

    // Jalankan function cekPasswordLama pada model_users
    $query = $this->model_users->cekPasswordLama($userId, $password);

    // Jika query gagal maka return false
    if (!$query) {
      
      // Mengatur pesan error validasi data
      $this->form_validation->set_message('cekPasswordLama', 'Password lama tidak sesuai!');
      return false;
    }

    return true;
  }

}

3. Membuat View Untuk Halaman Profile

File view ini terletak di folder application/views/profile/profile.php

', '

'); ?>
</div> <?php endif; ?> <?php if($message = $this->session->flashdata('message_profile')): ?>
">
</div> <?php endif; ?>
session->userdata('nama'); ?>">
session->userdata('alamat'); ?>">
Upload Avatar
</div>
session->userdata('telp'); ?>">
</form> </div>
', '

'); ?>
</div> <?php endif; ?> <?php if($message = $this->session->flashdata('message_password')): ?>
">
</div> <?php endif; ?>
</form> </div> </div> </div> </div> </div> </div>

4. Memperbarui Modul Yang Berkaitan

File application/controllers/Auth.php

<?php defined('BASEPATH') OR exit('No direct script access allowed');

class Auth extends CI_Controller 
{
  public function cekAkun()
  {
    // Memanggil model users
    $this->load->model('model_users');

    // Mengambil data dari form login dengan method POST
    $username = $this->input->post('username');
    $password = $this->input->post('password');

    // Jalankan function cekAkun pada model_users
    $query = $this->model_users->cekAkun($username, $password);
    
    // Jika query gagal maka return false
    if (!$query) {
      
      // Mengatur pesan error validasi data
      $this->form_validation->set_message('cekAkun', 'Username atau password yang Anda masukkan salah!');
      return false;
    
    // Jika berhasil maka set user session dan return true
    } else {

      // data user dalam bentuk array
      $userData = array(
        'id' => $query->id,
        'username' => $query->username,
        'level' => $query->level,
        'avatar' => $query->avatar,
        'nama' => $query->nama,
        'alamat' => $query->alamat,
        'telp' => $query->telp,
        'logged_in' => true
      );
			
      // set session untuk user
			$this->session->set_userdata($userData);

      return TRUE;
    }
  }

  public function login()
  {
    // Jika user telah login, redirect ke base_url
    if ($this->session->userdata('logged_in')) redirect(base_url());

    // Jika form di submit jalankan blok kode ini
    if ($this->input->post('submit')) {
      
      // Mengatur validasi data username,
      // required = tidak boleh kosong
      $this->form_validation->set_rules('username', 'Username', 'required');

      // Mengatur validasi data password,
      // required = tidak boleh kosong
      // callback_cekAkun = menjalankan function cekAkun()
			$this->form_validation->set_rules('password', 'Password', 'required|callback_cekAkun');
			
      // Mengatur pesan error validasi data
      $this->form_validation->set_message('required', '%s tidak boleh kosong!');

      // Jalankan validasi jika semuanya benar maka redirect ke controller dashboard
			if ($this->form_validation->run() === TRUE) {
        redirect('dashboard');
			} 
    }
    
    // Jalankan view auth/login.php
    $this->load->view('auth/login');
  }

  public function logout()
  {
    // Hapus semua data pada session
    $this->session->sess_destroy();

    // redirect ke halaman login	
    redirect('auth/login');
  }
}

File application/models/Model_users.php

<?php
  class Model_users extends CI_Model {

    public $table = 'users';

    public function cekAkun($username, $password)
    {
      // Get data user yang mempunyai username == $username dan active == 1
      $this->db->where('username', $username);
      $this->db->where('active', '1');
			
      // Jalankan query
      $query = $this->db->get($this->table)->row();
      
      // Jika query gagal atau tidak menemukan username yang sesuai 
      // maka return false
      if (!$query) return false;
			
      // Ambil data password dari database
      $hash = $query->password;
      
      // Jika $hash tidak sama dengan $password maka return false
      if (!password_verify($password, $hash)) return false;
      
      // Update last_login user
      $last_login = $this->update($query->id, array('last_login' => date('Y-m-d H:i:s')));
      
      // Jika username dan password benar maka return data user
      return $query;        
    }

    public function cekPasswordLama($id, $password)
    {
      // Get data user yang mempunyai id == $id dan active == 1
      $this->db->where('id', $id);
      $this->db->where('active', '1');
			
      // Jalankan query
      $query = $this->db->get($this->table)->row();
      
      // Jika query gagal atau tidak menemukan data yang sesuai 
      // maka return false
      if (!$query) return false;
			
      // Ambil data password dari database
      $hash = $query->password;
      
      // Jika $hash tidak sama dengan $password maka return false
      if (!password_verify($password, $hash)) return false;
      
      // Jika username dan password benar maka return data user
      return $query;        
    }

    public function get()
    {
      // Jalankan query
      $query = $this->db->get($this->table);

      // Return hasil query
      return $query;
    }

    public function get_where($where)
    {
      // Jalankan query
      $query = $this->db
        ->where($where)
        ->get($this->table);

      // Return hasil query
      return $query;
    }

    public function insert($data)
    {
      // Jalankan query
      $query = $this->db->insert($this->table, $data);

      // Return hasil query
      return $query;
    }

    public function update($id, $data)
    {
      // Jalankan query
      $query = $this->db
        ->where('id', $id)
        ->update($this->table, $data);
      
      // Return hasil query
      return $query;
    }

    public function delete($id)
    {
      // Jalankan query
      $query = $this->db
        ->where('id', $id)
        ->delete($this->table);
      
      // Return hasil query
      return $query;
    }
    
  }

Pada template sidebar kita akan menambahkan menu baru Profile.

<aside>
  <ul id="sidenav" class="side-nav fixed">
    
    <li>
      
">
<a href="#!user"><img class="circle" src="<?php echo base_url('assets/images/') . $this->session->userdata('avatar'); ; ?>"></a> <a href="#!name"><span class="white-text name"><?php echo ucwords(strtolower($this->session->userdata('nama'))); ?></span></a> <a href="#!email"><span class="white-text email"><?php echo ucwords(strtolower($this->session->userdata('level'))); ?></span></a> </div> </li> <li> <a class="waves-effect" href="<?php echo base_url('dashboard'); ?>"><i class="material-icons">home</i>Dashboard</a> </li> <li> <a class="waves-effect" href="<?php echo base_url('events'); ?>"><i class="material-icons">event</i>Events</a> </li> <li> <a class="waves-effect" href="<?php echo base_url('loker'); ?>"><i class="material-icons">work</i>Lowongan Kerja</a> </li> <li>
</li> <?php if($this->session->userdata('level') === 'administrator'): ?> <li> <a class="subheader">Admin</a> </li> <li> <a class="waves-effect" href="<?php echo base_url('users'); ?>"><i class="material-icons">people</i>Users</a> </li> <li>
</li> <?php endif; ?> <li> <a class="waves-effect" href="<?php echo base_url('profile'); ?>"><i class="material-icons">person</i>Profile</a> </li> <li> <a class="waves-effect" href="<?php echo base_url('auth/logout'); ?>"><i class="material-icons">exit_to_app</i>Logout</a> </li> </ul> </aside>

5. Testing

Advertisements

Saat kita mengunjungi link halaman profile pada sidebar kita, akan terlihat 2 tab baru yaitu:

Tab Basic Informationpada bagian ini user bisa melengkapi data diri dan mengganti foto profile atau avatar.

tutorial-codeigniter-part-14-membuat-halaman-profile

Change PasswordPada bagian ini user bisa mengganti password nya. Jika password lama yang dimasukkan benar, maka user akan logout secara automatis.

tutorial-codeigniter-part-14-membuat-halaman-profile

Seperti biasa, untuk mengunduh tutorial ini silahkan mengunjungi github saya -> disini <- . Sekian tutorial kali ini, semoga bermanfaat.

“Barang siapa yang keluar untuk mencari ilmu maka ia berada di jalan Allah hingga ia pulang” (HR. Turmudzi).

Advertisements

Salam Olahraga.

kaceManaf

Author: kaceManaf

Founders of kcdev.id, freelance full stack web developer and also a web-tech wanderer. Passionate about code readability and simplicity. https://www.linkedin.com/in/nafplann/

20 Replies to “Tutorial Codeigniter Part 14 – Membuat Halaman Profile

  1. Tutorialnya sangat rapi dan mudah dipahami.
    Mas Boleh request, cara buat fitur pencarian nggak?

  2. mantaps sekali agan ini
    sering2 upload gan lumayan bisa nambah pengetahuan bljr lewat sini + dikasih project nya lagi *sunggu baik

  3. A PHP Error was encountered
    Severity: Warning

    Message: mysqli::real_connect(): (HY000/1045): Access denied for user ‘root’@’localhost’ (using password: YES)
    Filename: mysqli/mysqli_driver.php
    Line Number: 201

    padahal di confignya udah sesuai semua bro, ini kenapa y?? Mohon Bantuannya

    1. Bro sudah jalan kok, sayanya ada yg kurang teliti di config/database nya, ini program sangat bermanfaat untuk di pelajari, terima kasih bro

  4. A PHP Error was encountered

    Severity: Warning

    Message: mysqli::real_connect(): (HY000/1045): Access denied for user ‘root’@’localhost’ (using password: YES)

    Filename: mysqli/mysqli_driver.php

    Line Number: 201

  5. Maap kenapa awalnya bisa upload foto, saat kedua kalinya upload foto yang sama malah ga bisa? “The filetype you are attempting to upload is not allowed.”

Leave a Reply

Your email address will not be published. Required fields are marked *