at 6:19 AM

Panada: Membuat Halaman Login

Membuat login menggunakan Panada Framework tidak begitu sulit, kalo ini saya mencoba untuk membuat tutorial bagaimana membuat halaman login. Halaman login biasanya dibutuhkan jika user ingin mengakses halaman web yang terproteksi atau halaman yang bersifat private.
Introduction
 Hal-hal yang dibutuhkan untuk membuat halaman login, terutama library yang harus diload pada Panada, berikut diantaranya :

  • Library Request
    untuk mengambil input dari user yang akan divalidasi
  • Library Database
    Ini bisa diabaikan jika tidak menggunakan database, dalam menyimpan username atau password.
Karena disini menggunakan database, diharapkan settingan "config.php" anda pada bagian database telah disetting dengan benar, sedangkan struktur tabelnya sendiri saya menggunakan seperti kode dibawah ini
CREATE TABLE IF NOT EXISTS `users` (
  `id` int(3) NOT NULL auto_increment,
  `username` varchar(16) NOT NULL,
  `password` varchar(32) NOT NULL,
  `nama_depan` varchar(32) NOT NULL,
  `nama_belakang` varchar(32) NOT NULL,
  `email` varchar(32) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;

INSERT INTO `users` (`id`, `username`, `password`, `nama_depan`, `nama_belakang`, `email`) VALUES
(1, 'chars19', 'b69d9bc635ccd79ad2c64bc862abe3b4', 'Lionel', 'Messi', 'my@email.com');

Kebutuhan File
  Ada 2 file yang akan dibuat, yaitu 1 buah file Controller dan 1 buah
  file View.

  • <PANADA>/apps/controller/login.php
    File ini adalah controller untuk penanganan login dan input user
    <?php
    class Controller_login extends Panada
    {
        public function __construct() {
     parent::__construct();
     $this->request = new Library_request();
    
     $this->data_login = 
         array(
        'has_login' => false,
        'error_stat'=>false, 
        'error_info'=>'',
        'name'=>'',
        'title'=>'Silahkan Login');
        }
    
        function index(){
     if($this->request->post('submit'))
         $this->proses_login();
     else
         $this->view_loginform( $this->data_login);
        }
    
        private function proses_login() {
     $this->db = new Library_db();
    
     $name = $this->request->post('username', FILTER_SANITIZE_MAGIC_QUOTES);
     $pass = $this->request->post('password', FILTER_SANITIZE_STRING);
    
     $this->data_login['name'] = $name;
     $this->data_login['error_stat'] = true ;
    
     if(! empty($name) and !empty($pass)) {
         $data = $this->db->find_one('users',
         array('username'=>$name, 'password'=>md5($pass)));
         if(false == $data) 
      $this->data_login['error_info'] = 'Username / Password tidak valid';
         else {
             $this->data_login['title'] = 'Terima kasih telah login';
      $this->data_login['has_login'] = true;
         }
     }
     else 
         $this->data_login['error_info'] = 'Data tidak boleh kosong';
          
     $this->view_loginform( $this->data_login);
        }
    
        function logout() {
     echo "Anda telah logout<br/>";
     echo '<a href='.$this->location('login').' >Klik disini untuk login</a>';
        }
    }
    ?>
    
    Penjelasan Kode
    baris 6: meload library request untuk mengambil hasil post dari form .
    baris 8: data yang akan dikirim ke view.
    baris 18-21: mengecek apakah nilai post 'submit' ada, jika ada lakukan proses_login() jika tidak tampilkan view.
    baris 25: meload library database.
    baris 27-28: mengambil nilai post 'username' dan 'password'.
    Nilai post ini difilter dengan FILTER_SANITAZE_MAGIC_QUOTES
    untuk username dan password, filter ini untuk melakukan escape pada karakter-karakter tertentu. INFO
    baris 30-31: set nilai untuk view.
    baris 33: cek apakah nilai submit 'username' dan 'password' tidak sama dengan kosong.
    baris 34: melakukan query ke database, $this->db->find_one() ini
    untuk mengambil 1 data berdasarkan argument yang
    diberikan, nilai kembaliannya adalah object dari hasil
    query jika data yang dicari ada, atau false jika data
    tidak ada. Info tentang perintah disini.
    baris 37: jika data yang dicari tidak ada set nilai 'error_info'.
    baris 39-40: Login sukses.
    baris 44: baris ini dieksekusi jika, data post tidak lengkap, misalkan password atau usernamenya kosong.
    baris 50-52: adalah fungsi untuk logout()
    fungsi $this->location() adalah fungsi untuk menampilkan url yang
    ingin ditampilkan. INFO
  • <PANADA>/apps/view/loginform.php
    Kode
    <!doctype html>
    <html>
       <head>
          <title><?= $title ?></title>
       </head>
       <body>
          <?php if($has_login) : ?>
              <h2>Selamat Datang <u><?= $name ?></u> </h2>
              <br/>
              <a href="login/logout">Logout</a>
          <?php else : ?>
              <form name="frm-login" method="post"
             action="#">
                 <table >
          <?php if($error_stat) { ?>
             <h2 style="color:red"><?= $error_info ?></h2>
          <?php } ?>
             <tr>
                <td>Name</td>
                <td>
            <input type="text" name="username"
            value="<?= $name ?>">
            </input>
         </td>
      </tr>
             <tr>
                 <td>Password</td>
                 <td><input type="password" name="password"></input></td>
             </tr>
             <tr>
                 <td>
              <input type='submit' name='submit'
              value='Login'></input>
          </td>
      </tr>
                 </table>
          <?php endif; ?>
       </body>
    </html>
    

    Penjelasan Kode
    variabel-variabel pada file ini adalah 'key' dari
    $this->data_login yang dikirim lewat view, secara default Panada
    akan merubah nilai 'key' dari sebuah array yang dikirim lewat perintah view.
    Misalkan $data['login'] = true;
    maka di file 'view', kita bisa menggunakan variabel $login yang merupakan 'key' dari $data, dimana nilainya adalah true.
    Hal ini sama dengan kebanyakan PHP Framework yang lainnya.

    baris 8-10: adalah yang akan ditampilkan jika telah login atau loginnya sukses.
    baris 15-29: sebaliknya jika belum atau login gagal.
Note :
 <PANADA> adalah tempat instalasi Panada

Tulis Komentar dengan akun Facebook Anda.

0 comments:

Post a Comment