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


Harap diperhatikan ‘code’ yang ada di tiap artikel dikarenakan pada saat simpan artikel selalu ada perubahan. Misalnya seharusnya <?php  menjadi <!–?php  , atau seperti ini $page->id  terlihat menjadi  ->id ;  😦

Tak terasa kita sudah sampai ke bagian 6, pada bagian ke-5 kita sudah membahas cara membuat form login dan penggunaan session untuk mengecek hak akses seseorang untuk masuk ke dashboard admin, ketika login sukses (username dan password sudah benar) sistem akan membuat session dan masuk ke dashboard admin , kalau masih salah harus login kembali. Jadi yang membedakan bagian depan (homepage) dan dashboard admin hanyalah pada proses pengecekan session ini. Apakah ada session login ataukah belum ada session. Untuk itu di setiap methods pada controller yang hanya bisa di akses oleh orang yang berhak, dilakukan terlebih dulu pengecekan session login ini. Kalau session login sudah ada proses di lanjutkan, jika belum ada beritahu untuk login lagi.

Lihat skrip di bawah ini ;

public function index(){
        $ceklogin=$this->session->getValue('logadmin'); //cek dulu ya sudah login belum?
        if($ceklogin){	 //kalau sudah login sih masuk aja ke dashboard

           $this->output('dash/dashboard');  //halaman dashboard admin
        }else{	     //kalau belum login, maaf ya login dulu di from.
           $this->output('dash/index');	  //halaman login admin
        }
    }

Dimana bagian mengeset session-nya? lihat lagi bagian method login pada contoller Boardadmin, ada skrip seperti ini ;

                 $this->session->setValue(
                       array(
                            'logadmin' => true,
                            'username' => $hslcek->username
                            )
                  );

Untuk lebih jelasnya silahkan buka lagi dokumentasi panada bagian session.

Kesimpulannya setiap method yang hanya bisa di akses oleh admin saja, harus dilakukan pengecekan session login terlebih dahulu. Sehingga method berikutnya harus ada skrip seperti ini :

public function nama_method(){
        //cek dulu ya sudah login belum?
        $ceklogin=$this->session->getValue('logadmin');
        //kalau sudah login sih masuk aja ke dashboard
        if($ceklogin){
           /*	Ini area admin yang sudah login saja  */

        //kalau belum login, maaf ya login dulu di from.
        }else{
           //halaman login admin

           $this->output('dash/index');
        }
    }

Sekarang saatnya kita membuat menu untuk dapat mengedit/ubah halaman bagian depan CMS kita ini. Pada bagian ini kita akan membuat satu controller untuk satu halaman yang akan kita edit. Sehingga di dalam controller yang akan kita buat hanya ada update halaman saja.

Pada bagian 3 tutorial ini ada yang bertanya,

kang nih saya nanya lagi… inikan pagenya hanya ada 5 y. dan selalu harus membuat ulang modul controller dan view terus2an.. tuh kan capek yahhh hehehehe. kalau dinamis seperti di wordpress gmn kang?? jadi tinggal isi post page.. nanti ada pilihan template seperti apa akan tampil seperti itu.

Tetapi mohon maaf saya tidak akan membahasnya pada bagian 6 ini, kemungkinan pada tutorial selanjutnya atau mungkin selanjutnya lagi 😀

Pada bagian 6 ini saya hanya akan memberikan tutorial tentang bagaimana membuat tampilan daftar halaman dan edit halaman depan CMS yang sudah kita buat, ada yang perlu kita siapkan sebelum berlanjut ke langkah berikutnya yaitu sebuah “editor html wysiwyg” , saya pernah membuat artikelnya pada blog saya dengan judul “[Source] 8 Koleksi WYSIWYG editor yang saya pakai untuk CMS Software” => http://hasannuh.com/2013/01/24/source-8-koleksi-wysiwyg-editor-yang-saya-pakai-untuk-cms-software/ . Untuk CMS kita ini kita gunakan saja editor “tinymce” silahkan anda download terlebih dahulu di http://www.tinymce.com/download/download.php .

Memilah bagian mana saja yang ada pada tampilan awal dashboard admin CMS kita

    1. Buka terlebih dahulu folder /app/views/dash dan salin dan tempelkan (copy-paste) file boardadmin.php. Karena kita akan membongkar file boardadmin.php ini dan apabila kita memerlukan yang lama bisa kita gunakan yang salinan dari file ini.
    2. Lihat tampilan dashboard admin kita, kita akan memakai menu atas dan tab submenu sampai dengan tulisan dashboard, kemudian kita hapus mulai dari tulisan di bawah dashboard sampai dengan tabel username. Lihat gambar.
      admin-area-design
      Sekarang buka file boardadmin.php dengan text-editor andalan anda (untuk tutorial ini saya menggunakan software gedit atau geany – pada saat membuat program saya menggunakan IDE Netbeans ).Dan langsung saja hapus mulai dari baris 123 ( <!– FIRST SORTABLE COLUMN START –> ) sampai dengan 183 (<!–  SECOND SORTABLE COLUMN END –> ). Kita segarkan (refresh) halaman adminnya maka akan terlihat seperti gambar di bawah ini.
      admin-area-design1
    3. Edit lagi bagian tabelnya dan sesuaikan dengan tabel pages yang sudah kita buat sebelumnya, karena kita hanya perlu satu baris saja sebagai contoh (tag <tr>…</tr>)  jadi kita hapus baris kode 156 sampai dengan 185, hapus juga baris 139 ((<th width=”123″ scope=”col”>Phone</th>) dan 153 (<td>332-5447879</td>) , yang lainnya biarkan seperti itu, sebagai catatan pada tutorial kali ini kita hanya akan menggunakan ‘icon pensil’ sebagai ‘edit halaman’. Terlihat seperti ini dan lihat kode program di bawah ini :
      admin-area-design2
    4. Edit controller Boardadmin.php (app/controllers). Baiklah setelah kita memilah bagian mana saja yang akan ada pada tampilan awal dashboard admin ini, sekarang saatnya kita memasukkan data tabel ‘pages’ yang ada pada database. Yang akan kita lakukan adalah mengambil isi database tabel ‘pages’ dan menampilkannya. Pada saat kita berhasil login ke dashboard admin, controllers ‘boardadmin’ ini secara default akan meanggil method index. Sehingga yang akan ubah adalah method index ini. Sekarang buka controller ‘Boardadmin.php’ dan lakukan proses ubah sebagai berikut:

Sebelumnya :

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');
 }
 }

Setelah di rubah :

public function index(){
		$this->pages   = new Models\Pages;	  // meload model pages
//cek dulu ya sudah login belum?
$ceklogin=$this->session->getValue('logadmin');
if($ceklogin){
//kalau sudah login sih masuk aja ke dashboard
$data['pages']=$this->pages->GetPages();
$this->output('dash/dashboard',$data);
}else{
//kalau belum login, maaf ya login dulu di from.
$this->output('dash/index');
}
}

Keterangan :

$this->pages   = new Models\Pages;  // meload model pages

Baris ini memanggil class ‘Models Pages’ yang ada di /app/Models/ .

$data[‘pages’]=$this->pages->GetPages();

Lihat pada models ‘Pages.php’ /app/Models/ apakah sudah ada method GetPages() seperti di bawah ini? apabila belum ada silahkan tambahkan dulu methods ini :

public function GetPages(){

 Return $this->db->results("SELECT * FROM pages ORDER BY id");

 }

Baris berikutnya  $this->output(‘dash/dashboard’,$data);

 $data[‘pages’] adalah variabel array data yang menampung isi tabel pages yang dihasilkan dari method GetPages yang diteruskan ke views dashboard (/app/views/dash/dashboard.php) oleh kode baris berikutnya $this->output(‘dash/dashboard’,$data); .

  1. Edit kembali views dashboard (app/views/dash/dashboard.php). Buka kembali file views dashboard nya dan rubah bagian ini (baris 143 sd 153) :
<label>
<input id="checkbox" type="checkbox" name="checkbox" />
</label>Stephen C. Coxstephen20.06.2009Los Angeles, CAaddress1@yahoo.com

Menjadi (tanda /* hanyalah komentar saja */ ) :

</pre>
<?php
 if($pages){
 foreach ($pages as $pages) {
 ?>
 <tr>
 <td width="34"><label>
 <input type="checkbox" name="checkbox[]" id="checkbox" value="<?php $pages->id; ?>"/>
 </label></td>
 <td><?php echo $pages->id; ?></td>
 <td><?php echo $pages->kode; ?></td>
 <td><?php echo $pages->judul; ?></td>
 <td><?php echo substr($pages->isipages,0,200); ?>...dst</td>
 <td><?php echo $pages->tanggal; ?></td>
 <td width="90"><a href="#" class="approve_icon" title="Approve"></a>
 <a href="#" class="reject_icon" title="Reject"></a>
 <a href="<?php echo $this->uri->baseUri; ?>index.php/boardpages/edit/<?php echo $pages->kode; ?>" class="edit_icon" title="Edit"></a>
 <a href="#" class="delete_icon" title="Delete"></a></td>
 </tr>
 <?php
 }
 }else{ ?>
 <tr><td colspan='7'>Tidak ada data.</td.</tr>
 <?php } ?>
<pre>
/* Keterangan baris '
  <!--?php echo $pages--->id; ?>  => menampilkan isi field id pada tabel pages.
  <!--?php echo $pages--->kode; ?> => menampilkan isi field kode pada tabel pages.
  <!--?php echo $pages--->judul; ?> => menampilkan isi field judul pada tabel pages.
  <!--?php echo substr($pages--->isipages,0,200); ?>...dst  => menampilkan isi field isipages pada tabel pages sebanyak 200 karakter karena adanya penggunaan fungsi substr().
  <?php echo $pages--->tanggal; ?>  => menampilkan isi field tanggal pada tabel pages. */

Agar sesuai dengan isinya saya juga mengedit bagian

sehingga menjadi seperti ini .
<input id="allbox" onclick="checkAll()" type="checkbox" name="allbox" />IdKodeJudulIsi HalamanUpdateAksi

Keterangan:

Untuk keterangan skrip lihat baris catatan.

Untuk baris keterangan yang dimulai tanda // hanya komentar/boleh tidak di ketik.

Untuk baris keterangan yang dimulai tanda /* dan diakhiri */ hanya komentar/boleh tidak di ketik.

  1. Kita test lagi http://localhost/panada/app/index.php/boardadmin => masukkan username dan password apabila di minta, jika berhasil maka akan tampil isi tabel pages yang sudah kita buat sebelumnya, apabila anda masih menemukan error silahkan isi pada komentar di bawah artikel ini. Lihat gambar :
    admin-area-design3

Sampai di sini kita sudah bisa menampilkan database tabel ‘pages’ pada dashboard admin. Apa yang akan kita lakukan setelah ini? Baiklah, walaupun terlihat di dashboard admin pada kolom aksi ada banyak icon diantaranya ‘approve’,’reject’,’edit’ dan ‘delete’, hanya saja pada bagian tutorial ini kita hanya akan membuat fiture edit halaman saja. Untuk fitur lainnya akan kita buat pada tutorial berikutnya, yang sekaligus akan menjawab pertanyaan yang sudah saya sampaikan sebelumnya.

Membuat fiture edit halaman

#Kronologis
Pada saat kita klik aksi edit (gambar pencil) , sistem akan menampilkan formulir yang sudah terisi dengan data halaman yang di pilih. Setelah proses edit kemudian menekan tombol Update, maka data halaman akan update. Bisa terlihat di halaman homepage-nya.

#Yang akan kita lakukan
** membuat controller baru kita berinama saja : Boardpages.php

Mungkin ada bertanya kenapa namanya Boardpages? bisakah dengan nama lain. Bisa saja, tetapi untuk saat ini di sarankan untuk di samakan kecuali anda sudah mengerti. Dalam controller boardpages ini akan kita buat method ‘tambah’,’edit’,’hapus’,’approve’ dan ‘cari’ hanya saja karena untuk tutorial ini kita hanya akan membuat method ‘edit’ saja. Method lainnya akan kita bahas pada tutorial selanjutnya.

Sebenarnya bisa saja kita buat method di controller Boardadmin.php di satukan, tetapi berdasarkan pengalaman saya ketika dalam satu file terlalu banyak method dan source code, akan sulit untuk mengontrolnya dan tentu saja akan sulit juga kalau seandainya pekerjaan kita di delegasikan kepada programer lain. Apalagi kalau kita biasa edit source code secara online. 😦

Sekarang silahkan membuat controller baru Boardpages.php dan isinya (perhatikan format dan isinya sehinggga anda akan makin paham) adalah :

<?php
namespace Controllers;
use Resources, Models;
class Boardpages 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;
		$this->pages   = new Models\Pages;	  // meload model pages
    }

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

}

** Source code silahkan lihat di sini  http://pastebin.com/7UmKLwir

** membuat tampilan form edit, untuk mengedit ‘pages’ yang di pilih.
Untuk membuat edit form ini kita gunakan kembali file views ‘dashboard copy’ salinan file boardadmin. Buat folder baru berinama: pages pada /app/views/dash/ dan salin file ‘dashboard copy’ ke folder pages ini. Ganti namanya menjadi ‘edit.php’. Hapus baris 155 (<!– SECOND SORTABLE COLUMN START –>) sd 270 (<!– END #PORTLETS –> ) dan hapus baris 125 sd 132 . Kemudian edit dan sesuaikan formnya. Lihat hasilnya seperti ini:
Sebelumnya :

<div class="portlet">
<div class="portlet-header">Anything (no icon too if you like it better)</div>
<div class="portlet-content">This can be any content you want. I placed a basic form here with text editor so you can see the functionality of the forms too.
<h3>This is a form</h3>
<form id="form1" action="" method="post" name="form1"><label>Some title</label>
 <input class="smallInput" id="textfield" type="text" name="textfield" />
 <label>Large input box</label>
 <input class="largeInput" id="textfield2" type="text" name="textfield2" />
 <label>This is a textarea</label>
 <textarea class="smallInput" id="textarea" cols="45" name="textarea" rows="3"></textarea>
 <a class="button">Submit in blue</a>
 <a class="button_grey">Submit this form</a></form></div>
</div>

Hasilnya :

<div class="portlet">
<div class="portlet-header"><a href="<?php echo $this->uri->baseUri; ?>index.php/boardpages">Boardpages</a> -> <b>Edit</b></div>
<div class="portlet-content">Edit Halaman : <?php echo $page->kode; ?>
<form id="form1" action="" method="post" name="form1">
<input class="smallInput" id="id" type="hidden" name="id" value="<?php echo $page->id; ?>" />
<em id="__mceDel"> <label>Kode</label>
 <input class="smallInput" id="kode" type="hidden" name="kode" /> <?php echo $page->kode; ?>
 <label>Update Terakhir</label>
 <input class="smallInput" id="tanggal" type="hidden" name="tanggal" /> <?php echo $page->tanggal; ?>
 <label>Judul</label>
 <input class="smallInput" id="judul" style="width: 400px;" type="text" name="judul" value="<?php echo $page->judul; ?>" />
 <label>Isi Halaman</label>
<textarea class="smallInput" id="textarea" cols="65" name="isipages" rows="15"><?php echo $page->isipages; ?></textarea>
<div><input class="largeInput" type="submit" name="submit" value="Update" /></div>
</form></div>
</div>
<pre>

Lihat pada kode $page->kode;$page->id,$page->tanggal,$page->judul,$page->isipages; ?> ini adalah perintah untuk menampilkan data $page dari hasil method GetPages() models ‘pages’ yang dipanggil pada Controller.

** membuat method edit pada controller boardpages.
Untuk mempersingkat tutorial 6 ini agar bisa saya ‘publish’ -terlalu lama update- langsung saja buat method edit ini pada controller ‘boardpages’.

    public function edit($kode='_HOME'){
         $kode=addslashes($kode);
        //cek dulu ya sudah login belum?
        $ceklogin=$this->session->getValue('logadmin');
        if($ceklogin){
           //kalau sudah login sih masuk aja
           $hsl=$this->pages->GetPagesbyKode($kode);
	      if($hsl){
                   $data['page']=$this->pages->GetPagesbyKode($kode);
	       }else{
		   $data['page']=$this->pages->GetPagesbyKode('_HOME'); //nilai default
		}

		   if($_POST){
			$id=$this->post->post('id', FILTER_SANITIZE_NUMBER_INT );
			$judul=$this->post->post('judul', FILTER_SANITIZE_MAGIC_QUOTES );
			$isipages=$this->post->post('isipages', FILTER_SANITIZE_MAGIC_QUOTES );

			$dupdate=array( 'judul' => $judul,
					'isipages' => $isipages,
					'tanggal' => date('Y-m-d'));

			$where =array('id' => $id);

			$this->pages->update($dupdate,$where);  //method update pada models 'pages' (baru)

			$this->redirect('boardpages');

		   }
           $this->output('dash/pages/edit',$data);

        }else{
           //kalau belum login, maaf ya login dulu di from.
           $this->output('dash/index');
        }
    }

** membuat method update pada models pages.
Setelah membuat methood edit pada controller pages, sekarang kita harus membuat method update pada app/Models/Pages.php , tambahkan baris seperti ini :

    public function update($value, $where) {
        $this->db->update($this->table, $value, $where);
    }

Mohon maaf ada yang terlewat, setelah dijalankan ternyata ada error karenakan tidak di definisikannya var $this->table untuk itu definisikan $table pada class Pages-nya, seperti ini :


class Pages{
private $table='pages';

//--------------
di sini method yang lainnya.

//---------------

}

atau ganti methodnya seperti ini, $this->table ganti dengan nama tabel-nya :

public function update($value, $where) {
$this->db->update('pages', $value, $where);    }

Sampai di sini kita sudah selesai membuat form edit, cms kita. Sedikit yang harus di edit agar bisa terhubung ketika kita klik edit (icon pencil) di dashboard. Cobalah edit pada views (/app/views/dash/dashboard.php) :

 <td width="90"><a href="#" class="approve_icon" title="Approve"></a>
 <a href="#" class="reject_icon" title="Reject"></a>
 <a href="<?php echo $this->uri->baseUri; ?>index.php/boardpages/edit/<?php echo $pages->kode; ?>" class="edit_icon" title="Edit"></a>
 <a href="#" class="delete_icon" title="Delete"></a></td>

Alhamdulillah tutorial ke-6 ini bisa selesai juga, sekarang saatnya kita test. Silahkan buka dashboard admin-nya dan pilih salah satu ‘halaman’ yang akan di edit dengan klik icon pencil

icon_aksi, jika sudah benar anda akan dapat menampilkan form edit seperti berikut :
edit-form

Silahkan edit isinya dan kemudian klik ‘UPDATE’ , apakah ada perubahan? jika ada perubahan artinya berhasil, jika tidak ada perubahan berarti masih ada kesalahan. Silahkan isi komentar bila ada kesalahan. Dengan senang hati saya akan membantu anda.

Kita bisa lihat tampilan formnya masih sederhana, karena kita belum menggunakan ‘tinymce – editor html wysisyg’ yang sudah kita download. Pada tutorial ke 7, saya kan mencoba merealisasikannya. Sampai jumpa pada tutorial ke 7 : “Merapihkan bagian dashboard, membuat tambah data,hapus data, dan membuat editor html”

Salam Berbagi

Kita lanjutkan ke tutorial berikutnya pada bagian ke 7 , “Merapihkan bagian dashboard, membuat tambah data,hapus data, dan membuat editor html”

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

Materi tutorial sebelumnya :

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

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

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

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

[TUTORIAL] Membuat CMS Company Profile dengan PHP panada framework – Bag.5

Iklan

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

  1. Thanks gan, tapi ane ada kesalah nih..
    pas function edit sucsess, id, judul, isi, dll muncul pada form..
    tapi pas ane rubah dan ane klik tombol update, hasilnya hanya kembali ke ‘boardpages’ tanpa ada perubahan dengan postingannya..
    Mohon pencerahannya,
    Sekali lagi thanks gan…

  2. Kesalahan di method ini :

    public function GetPagesbykode($kode){

    $result = $this->db->row(“SELECT * FROM pages WHERE kode=’”,$kode,”‘ “);

    return $result;
    }

    harusnya penyambung pake titik bukan koma dan perbaiki tanda kutip satu dan dua;

    “SELECT * FROM pages WHERE kode=’”.$kode.”‘ ”

    Demikian

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