Membuat Halaman Login dan Register

Pada tutorial kali ini akan dibahas pembuatan login, register beserta proses dan juga database-nya.

Sebelum Memulai

Pastikan anda sudah menjalankan MySQL dan juga telah membuat database dengan nama seme_framework. Kemudian pastikan pengaturan koneksi database Seme Framework sudah benar mengarah ke nama database tersebut.

Import Database

Pertama-tama kita akan membuat tabel baru untuk penyimpanan data user. Data user pada tutorial kali ini akan disimpan dalam sebuah tabel bernama b_user. Pastikan database sudah dibuat sebelumnya dan juga sudah terpilih. Kemudian Copy paste kode SQL dibawah ini dan jalankan di PhpMyAdmin atau MySQL query-nya langsung untuk membuat tabel secara otomatis.

x
–
+
SET FOREIGN_KEY_CHECKS=0;
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";

DROP TABLE IF EXISTS `b_user`;
CREATE TABLE `b_user` (
  `id` int(6) unsigned NOT NULL AUTO_INCREMENT,
  `email` varchar(255) DEFAULT NULL,
  `password` varchar(255) NOT NULL,
  `nama` varchar(78) DEFAULT NULL,
  `alamat` varchar(78) DEFAULT NULL,
  `cdate` datetime DEFAULT NULL,
  `foto` varchar(255) DEFAULT NULL,
  `is_active` int(1) unsigned DEFAULT 1,
  PRIMARY KEY (`id`),
  KEY `email` (`email`)
) ENGINE=InnoDB AUTO_INCREMENT=70 DEFAULT CHARSET=utf8mb4;
SET FOREIGN_KEY_CHECKS=1;

Membuat Model untuk tabel b_user

Setelah mengimport tabel b_user kedalam database, sekarang saatnya membuat model untuk tabel b_user. Caranya buat file baru di app/model/b_user_model.php, kemudian copy paste kode dibawah ini dan simpan perubahan pada file tersebut.

x
–
+
<?php
class B_User_Model extends SENE_Model{
  var $tbl = 'b_user';
  var $tbl_as = 'bu';

  public function __construct(){
    parent::__construct();
    $this->db->from($this->tbl,$this->tbl_as);
  }
  public function getAll(){
    $this->db->from($this->tbl,$this->tbl_as);
    return $this->db->get();
  }
  public function countAll(){
    $this->db->select_as('COUNT(*)','total',0);
    $this->db->from($this->tbl,$this->tbl_as);
    $d = $this->db->get_first();
    if(isset($d->total)) return $d->total;
    return 0;
  }
  public function getById($id){
    $this->db->where('id',$id);
    $this->db->from($this->tbl,$this->tbl_as);
    return $this->db->get_first();
  }
  public function set($di=array()){
    $this->db->insert($this->tbl,$di);
    return $this->db->last_id;
  }
  public function update($id,$du=array()){
    $this->db->where('id',$id);
    return $this->db->update($this->tbl,$du);
  }
  public function del($id){
    $this->db->where("id",$id);
    return $this->db->delete($this->tbl);
  }
  public function getByEmail($email){
    $this->db->where('email',$email);
    return $this->db->get_first();
  }
}

Membuat Metode Flash Message pada Core Controller

Flash message merupakan suatu pesan yang dibuat oleh sistem dan akan dimunculkan ketika sistem selesai menjalankan proses tertentu. Contoh seperti setelah login gagal, ataupun setelah register gagal supaya user dapat mengetahui kesalahannya ada dimana. Supaya flash message ini tersedia pada setiap controller yang ada didalam sistem yang kita buat, maka kita akan membuat sebuah Core Controller dan menambahkan metode untuk flash message.

Langkah pertamanya adalah buat file baru didalam app/core/ji_controller.php, kemudian copy paste kode dibawah ini kedalam file tersebut dan simpan perubahannya.

x
–
+
<?php
class JI_Controller extends SENE_Controller
{
  public function __construct()
  {
    parent::__construct();
    $this->setTheme('front');
  }
  protected function __flash($message='',$type='info'){
    $s = $this->getKey();
    if(!is_object($s)) $s = new stdClass();
    if(!isset($s->flash)) $s->flash = '';
    if(strlen($message)>0){
      $s->flash = $message;
    }
    $this->setKey($s);
    return $s;
  }
  protected function __flashClear(){
    $s = $this->getKey();
    if(!is_object($s)) $s = new stdClass();
    if(!isset($s->flash)) $s->flash = '';
    $s->flash = '';
    $this->setKey($s);
    return $s;
  }
  public function index() { }
}

Panggil Core Controller: ji_controller.php ke dalam Seme Framework

Setelah kita membuat core controller ji_controller.php, langkah selanjutnya adalah ubah pengaturan Seme Framework pada bagian core untuk memanggil file core ji_controller.php. Caranya, buka file pengaturan Seme Framework app/config/development.php kemudian cari bagian $core_prefix dan ubah file tersebut sesuai dengan kode dibawah ini.

x
–
+
...

/********************************/
/* == Core Configuration == */
/* register your core class, and put it on: */
/*   - app/core/ */
/* all var $core_* value in lower case string*/
/* @var string */
/****************************/
$core_prefix = 'ji_';
$core_controller = 'controller';
$core_model = '';

...

Ubah semua extends pada Kelas Controller dari SENE_Controller menjadi JI_Controller

Setelah menetapkan pengaturan kelas core, selanjutnya adalah merubah semua kelas controller pada bagian extends SENE_Controller menjadi JI_Controller. Berikut ini adalah contoh ilustrasinya pada file app/controller/home.php.

Dari:

x
–
+
<?php
class Home extends SENE_Controller
{
...
}

Menjadi:

x
–
+
<?php
class Home extends JI_Controller
{
...
}

Membuat View Register

Kemudian sekarang kita akan membuat view untuk halaman register. Halaman register ini telah dilengkapi dengan Flash Message untuk menampilkan pesan kesalahan ketika gagal melakukan pendaftaran. Selain itu, pada view ini juga akan diterapkan pengamanan inputan user dengan menambahkan atribut yang sesuai pada setiap input yang ada didalam form-nya. Untuk membuat view register ini caranya yaitu buat file baru di app/view/front/register/home.php, kemudian copy paste kode dibawah ini kedalam file tersebut dan simpan perubahan filenya.

x
–
+
<main class="register">
  <div class="container">
    <div class="row">
      <div class="col m6 offset-m3 s12">
        <div class="bungkus">
          <h1>Register</h1>
          <?php if(isset($sess->flash) && strlen($sess->flash)>0){ ?>
          <div class="row">
            <!-- Message Notification -->
            <div class="col s12 red darken-2">
              <p class="white-text"><b>Alert:</b> <?=$sess->flash?></p>
            </div>
          </div>
          <?php } ?>
          <form id="flogin" action="<?=base_url()?>register/proses" method="post">
            <div class="row">
              <div class="input-field col s12">
                <input class="validate" id="inama" type="text" name="nama" placeholder="Full Name" autocomplete="" required />
                <label for="inama">Full Name*</label>
              </div>
            </div>
            <div class="row">
              <div class="input-field col s12">
                <input class="validate" id="iemail" type="email" name="email" placeholder="Email" autocomplete="" required />
                <label for="iemail">Email *</label>
              </div>
            </div>
            <div class="row">
              <div class="input-field col s12">
                <input class="validate" id="ipassword" type="password" name="password" placeholder="Password" autocomplete="" required />
                <label for="ipassword">Password *</label>
              </div>
            </div>
            <div class="row">
              <div class="input-field col s12">
                <input class="validate" id="ipassword_konfirmasi" type="password" name="password_konfirmasi" placeholder="Password Confirmation" autocomplete="" required />
                <label for="ipassword_konfirmasi">Password Confirmation *</label>
              </div>
            </div>
            <div class="row">
              <div class="col s12">
                <div class="center-align">
                  <button class="btn waves-effect waves-light" type="submit" name="action" style="width: 100%;">
                    Daftar <i class="material-icons right">send</i>
                  </button>
                </div>
              </div>
            </div>

            <div class="row">
              <div class="col s12">
                <div class="d-grid gap-2 center-align">
                  <a href="<?=base_url()?>login" class="daftar">Login</a>
                </div>
              </div>
              <div class="col s12">
                <div class="d-grid gap-2 center-align">
                  atau
                </div>
              </div>
              <div class="col s12">
                <div class="d-grid gap-2 center-align">
                  <a href="<?=base_url()?>lupa" class="daftar">Lupa Password?</a>
                </div>
              </div>
            </div>

          </div>
        </form>
      </div>

    </div>
  </div>
</main>

Membuat Controller Register dan Prosesnya

Pada controller register ini kita akan membuat 2 proses utama yaitu menampilkan halaman register dari view yang telah kita buat sebelumnya dan proses pendaftaran. Sebelumnya pada controller ini, file model b_user_model.php akan dipanggil melalui metode load pada constructor controller ini supaya controller memiliki kemampuan untuk menyimpan data kedalam tabel b_user.

Sementara untuk validasi proses pendaftaran / register, pada controller ini akan dibuatkan metode proses yang berguna untuk memproses hasil submit form data yang dikirim dari view untuk disimpan kedalam database. Kemudian pada controller ini juga akan diterapkan beberapa validasi inputan beserta pesan kesalahannya apabila terjadi error.

Untuk membuat controller register ini caranya yaitu buat file baru di app/controller/register.php, kemudian copy paste kode dibawah ini kedalam file tersebut dan simpan perubahan filenya.

x
–
+
<?php
class Register extends JI_Controller
{
  public function __construct()
  {
    parent::__construct();
    $this->setTheme('front');
    $this->load('b_user_model','bum');
  }
  public function index()
  {
    $data = array();
    $data['sess'] = $this->getKey();
    if(isset($data['sess']->user->id)){
      redir(base_url('dashboard'));
      return;
    }
    $data = array();
    $data['sess'] = $this->__flash();
    $this->setTitle('Register');
    $this->setDescription("Please register before you can login.");
    $this->setKeyword('Seme Framework');
    $this->setAuthor('Seme Framework');

    $this->putThemeContent("register/home",$data); //pass data to view
    $this->loadLayout("col-1",$data);
    $this->__flashClear();
    $this->render();
  }
  public function proses(){
    $nama = $this->input->post('nama');
    $email = $this->input->post('email');
    $password = $this->input->post('password');
    $password_konfirmasi = $this->input->post('password_konfirmasi');

    if(strlen($nama)<=1){
      $this->__flash('Invalid name');
      $this->index();
      return;
    }

    if(strlen($email)<=4){
      $this->__flash('Invalid email');
      $this->index();
      return;
    }
    $bum = $this->bum->getByEmail($email);
    if(isset($bum->id)){
      $this->__flash('email has been used');
      $this->index();
      return;
    }

    if(strlen($password)<=4){
      $this->__flash('Invalid password');
      $this->index();
      return;
    }

    if($password != $password_konfirmasi){
      $this->__flash('Password confirmation doesn\'t match');
      $this->index();
      return;
    }

    $di = array();
    $di['nama'] = $nama;
    $di['email'] = $email;
    $di['password'] = password_hash($password, PASSWORD_BCRYPT);
    $di['alamat'] = '';
    $di['cdate'] = 'NOW()';
    $di['is_active'] = 1;

    $res = $this->bum->set($di);
    if($res){
      $sess = $this->getKey();
      if(!is_object($sess)) $sess = new stdClass();
      if(!isset($sess->user)) $sess->user = new stdClass();
      $sess->user->id = 1;
      $sess->user->nama = $nama;
      $sess->user->email = $email;
      $this->setKey($sess);

      $this->__flash('Welcome '.$nama.'....');
      redir(base_url('dashboard'),1);
      return;
    }else{
      $this->__flash('Password confirmation doesn\'t match');
      $this->index();
      return;
    }
  }
}

Membuat View Login

Sama seperti pada halaman register, view login juga sudah ada validasi dan flash message-nya. Untuk membuat view login ini caranya yaitu buat file baru di app/view/front/login/home.php, kemudian copy paste kode dibawah ini kedalam file tersebut dan simpan perubahan filenya.

x
–
+
<main class="login">
  <div class="container">
    <div class="row">
      <div class="col m6 offset-m3 s12">
        <div class="bungkus">
          <h1>Login</h1>
          <form id="flogin" action="<?=base_url()?>login/proses" method="post">

          <?php if(isset($sess->flash) && strlen($sess->flash)>0){ ?>
          <div class="row">
            <!-- Message Notification -->
            <div class="col s12 red darken-2">
              <p class="white-text"><b>Alert:</b> <?=$sess->flash?></p>
            </div>
          </div>
          <?php } ?>

            <div class="row">
              <div class="input-field col s12">
                <input class="validate" id="iemail" type="email" name="email" placeholder="Email" autocomplete="" required />
                <label for="iemail">Email *</label>
              </div>
            </div>
            <div class="row">
              <div class="input-field col s12">
                <input class="validate" id="ipassword" type="password" name="password" placeholder="Password" autocomplete="" required />
                <label for="ipassword">Password *</label>
              </div>

              <div class="col s12">
                <div class="mb-3 right-align">
                  <a href="<?=base_url()?>lupa" class="lupa">Lupa Password</a>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col s12">
                <div class="center-align">
                  <button class="btn waves-effect waves-light" type="submit" name="action" style="width: 100%;">
                    Login <i class="material-icons right">send</i>
                  </button>
                </div>
              </div>
            </div>

            <div class="row">
              <div class="col s12">
                <div class="d-grid gap-2 center-align">
                  atau
                  <a href="<?=base_url()?>register" class="daftar">Daftar</a>
                </div>
              </div>
            </div>

          </div>

        </form>
      </div>

    </div>
  </div>
</main>

Membuat Controller Login dan Prosesnya

Pada controller login ini kita akan membuat 2 proses utama yaitu menampilkan halaman login dan proses login yang usernya diambil dari table b_user. Untuk membuat controller login ini caranya yaitu buat file baru di app/controller/login.php, lalu copy paste kode dibawah ini kedalam file tersebut dan simpan perubahan filenya.

x
–
+
<?php
class Login extends JI_Controller
{
  public function __construct()
  {
    parent::__construct();
    $this->setTheme('front');
    $this->load('b_user_model','bum');
  }
  public function index()
  {
    $data = array();
    $data['sess'] = $this->getKey();
    if(isset($data['sess']->user->id)){
      redir(base_url('dashboard'));
      return;
    }
    $data = array();
    $data['sess'] = $this->__flash();
    $this->setTitle('Login');
    $this->setDescription("Please login before you continue to your page.");
    $this->setKeyword('Seme Framework');
    $this->setAuthor('Seme Framework');

    $this->putThemeContent("login/home",$data); //pass data to view
    $this->loadLayout("col-1",$data);
    $this->__flashClear();
    $this->render();
  }
  public function proses(){
    $email = $this->input->post('email');
    $password = $this->input->post('password');

    if(strlen($email)>=4 && strlen($password)>=5){
      $bum = $this->bum->getByEmail($email);
      if(isset($bum->id)){
        if(empty($bum->is_active)){
          $this->__flash('This user has been deactivated');
          $this->index();
          return;
        }

        //update password if still md5
        $this->password = password_hash($this->password, PASSWORD_BCRYPT);
        if(md5($password) == $bum->password){
          $du = array();
          $du['password'] = password_hash($password, PASSWORD_BCRYPT);
          $this->bum->update($bum->id, $du);
          $password = $du['password'];
          $bum->password = $password;
        }


        if (password_verify($password, $bum->password)) {
          //set to session
          $sess = $this->getKey();
          if(!is_object($sess)) $sess = new stdClass();
          if(!isset($sess->user)) $sess->user = new stdClass();
          $sess->user = $bum;
          $this->setKey($sess);

          // redirect to dashboard
          redir(base_url('dashboard'),1);
          return;
        }else{
          $this->__flash('Invalid email or password');
          $this->index();
        }
      }else{
        $this->__flash('Invalid email or password');
        $this->index();
      }
    }else{
      $this->__flash('Invalid email or password');
      $this->index();
    }
  }
}

Membuat Controller Dashboard

Pada halaman dashboard ini akan digunakan untuk menguji sesi sudah login atau belum sehingga pada halaman ini ditambahkan validasi untuk mengecek user sudah login atau belum. Pertama-tama buat file baru di app/controller/dashboard.php, lalu copy paste kode dibawah ini kedalam file tersebut dan simpan perubahan filenya.

x
–
+
<?php
class Dashboard extends JI_Controller
{
  public function __construct()
  {
    parent::__construct();
    $this->setTheme('front');
  }
  public function index()
  {
    $data = array();
    $data['sess'] = $this->getKey();
    if(!isset($data['sess']->user->id)){
      redir(base_url('login'));
      return;
    }
    $this->setTitle('Dashboard '.$data['sess']->user->nama);
    $this->setDescription("Congratulation, you have done well.");
    $this->setKeyword('Seme Framework');
    $this->setAuthor('Seme Framework');

    $this->putThemeContent("dashboard/home",$data); //pass data to view

    $this->loadLayout("col-1",$data);
    $this->render();
  }
}

Membuat View Dashboard

Sekarang kita akan membuat view untuk halaman dashboard, buat file baru di app/view/front/dashboard/home.php, kemudian copy paste kode dibawah ini kedalam file tersebut dan simpan perubahan filenya.

x
–
+
<div class="container">
  <div class="row">
    <div class="col s12">
      <h1><small>Selamat Datang</small> <?=$sess->user->nama?></h1>
    </div>
  </div>
</div>

Menambahkan Menu Login, Register dan Validasi Session pada Navigation

Pada tutorial sebelumnya dalam pembuatan Navigation , sekarang akan ditambahkan menu login dan register serta validasinya supaya hanya muncul ketika belum login dan tidak tampil ketika sudah login. Buka file app/view/front/page/html/navbar.php kemudian ganti isi filenya seperti kode dibawah ini dan simpan perubahan pada filenya.

x
–
+
<nav>
  <div class="nav-wrapper">
    <a href="#" class="brand-logo">Logo</a>
    <a href="#" data-target="mobile-demo" class="sidenav-trigger">
      <i class="material-icons">menu</i>
    </a>
    <ul class="right hide-on-med-and-down">
      <li><a href="<?=base_url()?>">Homepage</a></li>
      <?php if(isset($sess->user->id)){ ?>
      <li><a href="<?=base_url('logout')?>">Logout</a></li>
      <?php } else { ?>
      <li><a href="<?=base_url('login')?>">Login</a></li>
      <li><a href="<?=base_url('register')?>">Register</a></li>
      <?php } ?>
    </ul>
  </div>
</nav>

<ul class="sidenav" id="mobile-demo">
  <li><a href="<?=base_url()?>">Homepage</a></li>
  <?php if(isset($sess->user->id)){ ?>
  <li><a href="<?=base_url('logout')?>">Logout</a></li>
  <?php } else { ?>
  <li><a href="<?=base_url('login')?>">Login</a></li>
  <li><a href="<?=base_url('register')?>">Register</a></li>
  <?php } ?>
</ul>

Controller untuk logout

Untuk menghapus session yang digunakan setelah login berhasil, kita perlu fungsi logout untuk menghapus session tersebut. Caranya adalah buat file baru di app/controller/logout.php kemudian copy paste kode dibawah ini dan simpan perubahannya.

x
–
+
<?php
class Logout extends SENE_Controller
{
    public function __construct()
    {
        parent::__construct();
    }
    public function index()
    {
        $data = array();
        $sess = $this->getKey();
        if (!is_object($sess)) {
            $sess = new stdClass();
        }
        $sess->user = new stdClass();
        $this->setKey($sess);
        redir(base_url("login"), 0);
    }
}

Selesai...!

Untuk mencoba hasil dari tutorial ini, buka alamat http://localhost/seme_framework pada browser. Apabila ada yang tidak sesuai tampilannya, coba periksa lagi atau buat issue di github Seme Framework.

Tutorial: Navigation
Tutorial: Kirim Email