[TUTORIAL] Membuat CMS Company Profile dengan Panada Framework – Bag.5


Bagaimana khabarnya hari ini? masih semangat mengikuti tutorial berseri panada framework? setelah episode yang lalu kita belajar cara menyambungkan sistem cms yang kita buat dengan database MySQL.

Belajar cara sebuah ‘models’ mengambil data dari tabel database yang dipanggil dari ‘controllers’ dan menampilkannya pada ‘views’.

Belajar cara menggunakan query panada yang ‘natural (manual query)’ atau yang sudah di buat susah untuk di ingat (maaf! query builder)… :), semua bisa anda gunakan di panada ini. Lihat saja pada dokumentasinya. Ciyus! Enelan! 😀

Jika anda dapat mengikuti tutorial ini dari awal, langkah demi langkah membuat sebuah ‘free webtemplate css’ bisa menjadi tema pada cms kita. Dan anda berhasil mengikuti tutorial dari pertama sampai bagian ke empat, saya yakin anda pun sudah bisa membuat tema baru. Bahkan saya tantang anda untuk bisa membuatnya. Gampangkan?

Tinggal kita buat folder tema baru, misal nama temanya : karyaku ,sehingga pada folder /app/views/tema/ menjadi ada dua tema, yaitu tema default /app/views/tema/default dan /app/views/tema/karyaku/ . Mudahkan?

Baiklah kalau anda sudah bisa membuat tema baru, setelah tutorial ke-5 ini kita akan membahas tentang bagaimana mengganti tema, dan sedikit tip-triksnya. Tentu saja tip triks dari saya sendiri. Entah nanti akan di bahas di bagian tutorial ke 6 atau terakhir (yang tidak tahu kapan akhirnya). Setelah bagian kelima ini kita akan membuat tutorial sesuai permintaan, apabila tidak ada permintaan mana yang ingin di dahulukan, berarti kita akan membuat tutorial sesuai dengan rencana yang ada di otak saya (kalau rencana di otak saya habis…ya tamat deh). 😀

Baiklah kita sudahi saja kata pengantar pada tutorial ke lima ini, saatnya kita kembali ke topik bagian ke lima ini, yaitu bagaimana langkah membuat dashboard admin? Apa saja yang akan kita bahas pada episode ke lima ini, kita lanjutkan:

  • Mengenal Session panada framework
  • Membuat form login dan logout
  • Langkah membuat dashboard admin, bagaimana memodifikasi ‘free admin template’ menjadi dashboard admin cms kita.

Sebelumnya sudahkah mendowload template adminnya? Jangan tanya yang mana ya, silahkan kembali ke tutorial panada framework bagian satu. Sekarang saya anggap anda sudah mendowloadnya. Jadi kita bisa lanjutkan pembahasannya.

Mengenal PHP Session Panada Framework

Apa itu PHP session?
Sebuah variabel PHP yang digunakan untuk menyimpan informasi tentang, atau mengubah pengaturan untuk sesi pengguna (user session). Variabel ini menyimpan informasi tentang satu pengguna tunggal, dan tersedia untuk semua halaman dalam satu aplikasi.

“Panada memiliki tiga media penyimpanan data session yang bisa digunakan yaitu cookie, database, cache dan bawaan dari PHP (native session). Sebelum digunakan, library session terlebih dahulu harus diinisialisasi.”

Saya tidak akan membahas session ini secara mendetail untuk lengkapnya lihat dokumentasi panada bagian session. Untuk inisialisasi session cukup dengan perintah di bawah ini :

$this->session = new Resources\Session;

Tahukah anda, informasi pada session inilah yang biasa di gunakan untuk mengecek apakah kita sudah login atau belum? Sehingga software dapat mengetahui informasi orang yang login.

Membuat Form Login dan Logout

Sekarang extract file dashboard admin “profiadmin.zip” yang sudah kita download pada bagian pertama di folder mana saja (tidak perlu di di root server htdocs atau www). Buka folder file admin itu, sudah terlihat ada beberapa folder dan file, hapus saja file yang di awali kata query_ . Form login pada tema profiadmin ini ada pada file index.htm dan dashboard admin kita pilih yang dashboard.html. Jadi untuk form login dashboard admin ini tidak perlu kita buat lagi, hanya sedikit kita modifikasi, di sesuaikan dengan framework cms kita. Sebelum itu semua kita buat persiapan dulu, yaitu :

panada-5-3

Langkah membuat dashboard admin, bagaimana memodifikasi ‘free admin template’ menjadi dashboard admin cms kita.

Pertama, kita akan buat tabel baru pada database blogkarcms yaitu tabel : master_user

Nama tabel : master_user
Fieldnya :
id (INT 11) PRIMARY Autoincrement
username (VARCHAR 15)
password (VARCHAR 35) MD5
level (VARCHAR 1 ) // akan kita gunakan nanti

panada-5-19

Selesai membuat table master_user, kita isi dengan data admin untuk login, lihat gambar. Saya menggunakan MD5 untuk isi passwordnya, sehingga hasil yang didapat tidak bisa terbaca secara langsung. Dalam cms kita ini saya mengisi username dengan blogkarcms dan password 123456.

panada-5-15

Berikutnya :
Buat folder baru : dash pada /app/assets/
Pindahkan folder : css, images, js dari tema profiadmin ke folder /app/assets/dash/

Buat folder baru : dash pada /app/views/
Pindahkan file : index.htm dan dashboard.html
Ganti nama file : index.htm => index.php
Ganti nama file : dashboard.html => dashboard.php

Sekarang kita sesuaikan url yang mengarah pada images,css dan js pada file index.php dan dashboard.php.
Buka file index.php pada folder /app/views/dash/index.php


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Login | BlogkarCMS Admin
		<link href="<?php echo $this->uri->baseUri; ?>assets/dash/css/960.css" rel="stylesheet" media="all" type="text/css" />
		<link href="<?php echo $this->uri->baseUri; ?>assets/dash/css/reset.css" rel="stylesheet" media="all" type="text/css" />
		<link href="<?php echo $this->uri->baseUri; ?>assets/dash/css/text.css" rel="stylesheet" media="all" type="text/css" />
		<link href="<?php echo $this->uri->baseUri; ?>assets/dash/css/login.css" rel="stylesheet" media="all" type="text/css" /></pre>
<div class="container_16">
<div class="grid_6 prefix_5 suffix_5">
<h1>BlogkarCMS - Login</h1>
<div id="login">Silahkan masukkan username dan password

<?php if(isset($salah)){ echo $salah;  } ?>
<form id="form1" action="<?php echo $this-><br />uri->baseUri; ?>index.php/boardadmin/login" method="post" name="form1">

<label><strong>Username</strong>
<input class="inputText" id="textfield" type="text" name="tuser" />
</label>

<label><strong>Password</strong>
<input class="inputText" id="textfield2" type="password" name="tpass" />
</label>

<input class="button" type="submit" name="submit" value="LOGIN" />
<label>
<input id="checkbox" type="checkbox" name="checkbox" />
Remember me</label></form>
<br clear="all" /></div>
<div id="forgot"><a class="forgotlink" href="#">Forgot your username or password?</a></div>
</div>
</div>
<pre><br clear="all" />

Buka file dashboard.php pada folder /app/views/dash/dashboard.php

Pada file dashboard.php ini saat ini kita cukup mengubah link yang menuju images dan lainnya saja, untuk hal lainnya akan kita modifikasi saat tutorial selanjutnya. Silahkan sesuaikan mulai baris 6 sampai dengan baris 29 menjadi seperti ini :

Kita tambahkan baris seperti ini : <?php echo $this->uri->baseUri; ?>assets/dash

	<link href="<?php echo $this->uri->baseUri;?>assets/dash/css/960.css" rel="stylesheet" type="text/css" />
	<link href="<?php echo $this->uri->baseUri;?>assets/dash/css/reset.css" rel="stylesheet" type="text/css" />
	<link href="<?php echo $this->uri->baseUri;?>assets/dash/css/text.css" rel="stylesheet" type="text/css" />
	<link href="<?php echo $this->uri->baseUri;?>assets/dash/css/blue.css" rel="stylesheet" type="text/css" />
	<link href="<?php echo $this->uri->baseUri; ?>assets/dash/css/smoothness/ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type="text/javascript" src="<?php echo $this->uri->baseUri;?>assets/dash/js/blend/jquery.blend.js"></script>
<script type="text/javascript" src="<?php echo $this->uri->baseUri;?>assets/dash/js/ui.core.js"></script>
<script type="text/javascript" src="<?php echo $this->uri->baseUri;?>assets/dash/js/ui.sortable.js"></script>
<script type="text/javascript" src="<?php echo $this->uri->baseUri;?>assets/dash/js/ui.dialog.js"></script>
<script type="text/javascript" src="<?php echo $this->uri->baseUri;?>assets/dash/js/ui.datepicker.js"></script>
<script type="text/javascript" src="<?php echo $this->uri->baseUri;?>assets/dash/js/effects.js"></script>
<script type="text/javascript" src="<?php echo $this->uri->baseUri;?>assets/dash/js/flot/jquery.flot.pack.js"></script>
<!--[if IE]>
<script language="javascript" type="text/javascript" src="js/flot/excanvas.pack.js"></script>
<![endif]--> <!--[if IE 6]>
		<link rel="stylesheet" type="text/css" href="css/iefix.css" />
<script src="js/pngfix.js"></script>
<script>
DD_belatedPNG.fix('#menu ul li a span span');
</script>
<![endif]-->
<script id="source" type="text/javascript" src="<?php echo $this->uri->baseUri;?>assets/dash/js/graphs.js" language="javascript"></script>

dan baris yang mempunyai link untuk logout,

<a href=”<?php echo $this->uri->baseUri; ?>boardadmin/logout“>Logout</a>

Kedua kita akan membuat controller baru, kita berinama controllers : “Boardmin“.
Sehingga untuk mengakses menu admin ini kita ketik di browser http://localhost/panada/app/index.php/boardadmin/

Nama Controller : Boardadmin

Screenshot from 2013-02-13 11:04:52

Untuk setiap method yang ada pada controller ini akan melakukan terlebih dahulu pengecekan apakah user sudah login atau belum. Kalau sudah login tampilkan views dashboard , kalau belum login tampilkan views login.

Buat method untuk pengecekan login, apakah sudah benar username dan passwordnya. Kalau sudah benar buatkan session-nya, kalau salah kembali ke form login lagi. Kita persiapkan dahulu kerangkanya yaitu method construct, index, login dan logout. Biasanya saya akan membuat kerangkanya terlebih dahulu seperti ini :

class Boardadmin extends Resources\Controllers {

public function __construct(){

parent::__construct();
// Load model dan resources
}

public function index(){
//cek dulu ya sudah login belum?
//kalau sudah login sih masuk aja ke dashboard
//kalau belum login, maaf ya login dulu di from.
}

public function login(){
//ambil data post username dan password
//bandingkan dengan username dan password di database
//sudah benar - buatkan session - langsung ke dashboard
//masih salah kembali ke form login. tampilkan kesalahannya.
}

public function logout(){
//destroy session
//kembali ke form login - dashboard
}

}

Setelah di isi, inilah isi dari file controller Boardadmin.php  :

<?php namespace Controllers;    
use Resources, Models; 
class Boardadmin extends Resources\Controller {   	
public function __construct(){     	
       parent::__construct();         		
       // Load model 		
       $this->session = new Resources\Session;
       $this->post    = new Resources\Request;
       $this->users   = new Models\Users;
    }

    public function index(){
        //cek dulu ya sudah login belum?
        $ceklogin=$this->session->getValue('logadmin');
        if($ceklogin){
           //kalau sudah login sih masuk aja ke dashboard
           $this->output('dash/dashboard');
        }else{
           //kalau belum login, maaf ya login dulu di from.
           $this->output('dash/index');
        }
    }

    public function login(){
		//ambil data post username dan password
		$username=$this->post->POST('tuser',FILTER_SANITIZE_MAGIC_QUOTES);  //ambil data tuser dari form login
		$password=$this->post->POST('tpass',FILTER_SANITIZE_MAGIC_QUOTES);	//ambil data tpass dari form login
		$salah='';  //definisikan untuk errornya nil
		if(empty($username) OR empty($password)) { $salah="Maaf! Username/Password tidak boleh kosong" ; }
		if($salah==''){
		   //bandingkan dengan username dan password di database
		   $hslcek=$this->users->GetUsername($username);
		   if($hslcek){
		       //sudah benar - buatkan session - langsung ke dashboard
		       if(MD5($password)==$hslcek->password){
			     $this->session->setValue(
			                array(
								 'logadmin' => true,
								 'username' => $hslcek->username
								)
			              );
			     $this->redirect('boardadmin');
			   }else{
				 $salah="Maaf! Username/Password salah";
			   }
		   }else{
			     $salah="Maaf! Username/Password salah";
		   }
		 }
		       //masih salah kembali ke form login. tampilkan kesalahannya.
		       $dt['salah']=$salah;
		       $this->output('dash/index', $dt);
    }

    public function logout(){
	   $this->session->destroy();
	    $this->redirect('boardadmin');
	}

}

Selanjutnya, yang ketiga kita akan membuat models baru untuk menangani proses login, kita berinama models : “Users”.
Nama file models : Users.php dan nama class : Users , isinya sebagai berikut :

Screenshot from 2013-02-14 08:26:52

<?php namespace Models; 
use Resources; 
class Users {          
   public function __construct(){                  
     $this->db = new Resources\Database;
    }

    public function GetUsername($user){

        $result = $this->db->row("SELECT * FROM master_user WHERE username='".$user."' ");

        Return $result;
    }

}

Baiklah persiapan dan modifikasi form login , dashboard dan pembuatan controller , models, sudah selesai . Sekarang kita akan mengetesnya. Ketik secara langsung pada browser anda :
http://localhost/panada/app/index.php/boardadmin

panada-5-14

Jika sudah benar maka akan terlihat form loginnya, masukkan username dan passwordnya yang tadi anda buat, jika berhasil akan langsung masuk ke dashboard admin.

panada-5-18
Apabila di isi kosong atau salah akan ada pemberitahuan kesalahan.

Screenshot from 2013-02-13 11:08:50

Alhamdulillah, selesai sampai di sini dulu untuk tutorial bagian ke-5 ini. Kita akan lanjutkan ke tutorial selanjutnya, yang akan membahas bagaimana cara mengedit halaman cms kita. Nantikan Tutorial bagian ke-6. Ya.

Salam Berbagi

Kita lanjutkan ke tutorial berikutnya pada bagian ke 6 , bagaimana mengedit halaman depan dalam admin area.

[PANADA] Membuat CMS Company Profile dengan PHP panada framework – Bag.6

Materi tutorial sebelumnya :

[PANADA] Membuat CMS Company Profile dengan PHP panada framework – Bag.1

[PANADA] Membuat CMS Company Profile dengan PHP panada framework – Bag.2

[PANADA] Membuat CMS Company Profile dengan PHP panada framework – Bag.3

[PANADA] Membuat CMS Company Profile dengan PHP panada framework – Bag.4

Iklan

21 pemikiran pada “[TUTORIAL] Membuat CMS Company Profile dengan Panada Framework – Bag.5

  1. gan kok logoutnya gak bisa ya
    ni erornya

    Object not found!

    The requested URL was not found on this server. The link on the referring page seems to be wrong or outdated. Please inform the author of that page about the error.

    If you think this is a server error, please contact the webmaster.
    Error 404
    localhost
    1/16/2015 9:21:49 AM
    Apache/2.2.14 (Win32) DAV/2 mod_ssl/2.2.14 OpenSSL/0.9.8l mod_autoindex_color PHP/5.3.1 mod_apreq2-20090110/2.7.1 mod_perl/2.0.4 Perl/v5.10.1

    itu method logout-nya ga ada/ tidak nyambung

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s