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


Bagaimana khabarnya? Masih semangat untuk meneruskan pelajaran kita membuat CMS (Content Managemen System) Company Profile dengan panada php framework? Yuk, kita lanjutkan ke bagian berikutnya.

Pada kesempatan ini kita akan membuat fitur untuk menambah halaman baru dan menghapus halaman pada proyek cms kita kali ini. Walaupun fitur ini tidak cocok untuk tema saat ini, karena kalau ada penambahan halaman tampilan menunya terlihat turun kebawah. Yang di tekankan di sini adalah agar kita tahu cara menambah halaman dan menghapusnya. Karena hal ini bisa kita gunakan pada fitur lainnya. Inilah langkah-langkah yang akan kita siapkan.

  1. Membuat method baru insert dan delete pada model pages ( /app/Models/Pages.php ). Buka models Pages dan masukkan sourcecode di bawah ini.

//fungsi menyisipkan data baru ke database
// $avalue=array();

public function insert($avalue) {

$this->db->insert($this->table, $avalue);

}

//fungsi menghapus data dari database

// $avalue=array();

public function delete($awhere) {

$this->db->delete($this->table, $awhere);

}

Sourcecode lengkap model Pages lihat di sini : http://pastebin.com/bCfkqB8v

  1. Membuat method input dan delete pada controller Boardpages ( /app/Controller/Boardpages.php ). Setelah kita membuat method insert dan delete pada models pages, sekarang kita tambahkan juga fitur input untuk menu input data baru dan fitur delete untuk menu hapus pada controller Boardpages.

Membuat method input.

Pertama yang kita buat adalah fitur input yang akan kita gunakan untuk memasukkan halaman baru pada CMS kita. Karena code-nya hampir sama dengan fitur edit, kita ‘copas’ saja dari fitur edit dan koreksi sedikit sehingga menjadi seperti di bawah ini.

Pada fitur ini, pertama kali di akses ( http://localhost/panada/app/index.php/boardpages/input ) akan tampil form kosong, kita isi datanya, kita tambahkan sedikit validasi data saat form di simpan, semua field harus di isi, apabila ada yang kosong kembalikan ke form kosong. Jika sudah di isi semua langsung di bawa ke tampilan daftar halaman (boardpages). Lihat juga selain validasi form sederhana juga kolom yang di isi , harus di tampilkan kembali pada form isian. Untuk lebih jelasnya lihat keterangan/komentar pada code-nya (diawali tanda ‘//’ ).

/***************************************
* fungsi method input () 
* untuk memasukkan data baru
* 
* Controller : /app/Controllers/Boardpages.php
* Akses : /app/index.php/boardpages/input
* 
*/ 
public function input(){ 
//cek dulu ya sudah login belum? 
$ceklogin=$this->session->getValue('logadmin'); 
if($ceklogin){ 
//kalau sudah login sih masuk aja

if($_POST){
//ambil data field pada form 
$kode=$this->post->post('kode', FILTER_SANITIZE_MAGIC_QUOTES ); 
$judul=$this->post->post('judul', FILTER_SANITIZE_MAGIC_QUOTES );
$isipages=$this->post->post('isipages', FILTER_SANITIZE_MAGIC_QUOTES );

//cek datanya apakah di isi semua atau tidak
//jika salah satu field kosong, tampilkan kesalahan ($error)
//jika salah satu field terisi, tampilkan isian field yang sdh betul

//jika kosong
if($kode==''){ 
//isi array $error; 
$error[1]="Maaf isian KODE masih kosong!";
//jika terisi 
}else{
//isi array $isian; 
$isian[1]=$kode; 
}

if($judul==''){ 
$error[2]="Maaf isian JUDUL masih kosong!"; 
}else{
$isian[2]=$judul; 
}

if($isipages==''){ 
$error[3]="Maaf isian HALAMAN masih kosong!"; 
}else{
$isian[3]=$isipages; 
}

//kl ada kesalahan kembali ke form
if(isset($error)){ 
$data['error']=$error;
$data['isian']=$isian;
$this-->output('dash/pages/input',$data);

//tidak ada kesalahan masukkan ke database 
}else{

//array data yang akan di masukkan ke database
$dinsert=array( 'judul' => $judul,
'kode' => $kode,
'isipages' => $isipages,
'tanggal' => date('Y-m-d')); 
//gunakan metod insert pada models pages u insert data 
$this->pages->insert($dinsert); 
$this->redirect('boardpages');
}

}else{ 
$this->output('dash/pages/input'); 
}

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

Mungkin ada yang penasaran kenapa langsung di bawa ke daftar halaman ( $this->redirect(‘boardpages’); ) ? Kenapa setelah di isi dan simpan tidak kembali form kosong kembali ( $this->output(‘dash/pages/input’); ) ? Cobalah anda ganti $this->redirect(‘boardpages’); dengan $this->output(‘dash/pages/input’); kemudian setelah input data betul lakukan refresh (F5) , apa yang terjadi? Betul sekali data yang sama masuk ke database menjadi double, setiap kali di refresh akan masuk data yang sama.

Source code controller Boardpages.php yang sudah di modifikasi silahkan lihat di sini : http://pastebin.com/YuQkYqk7

Sebelum kita mencoba menu input halaman baru ini, kita harus siapkan juga views-nya untuk menampilkan form kosong. Copas (copy paste) saja file edit.php (/app/views/dash/pages/edit.php ) ganti nama file salinannya dengan nama input.php (/app/views/dash/pages/input.php ) , misalnya kita mau kasih nama yang lain, insert.php misalnya maka di setiap baris $this->output(‘dash/pages/input’); harus di ganti dengan $this->output(‘dash/pages/insert’); Selanjutnya edit bagian seperti di bawah ini :

<span style="color:#0000ff;"><!--THIS IS A PORTLET--> </span>
<span style="color:#0000ff;"><div class="portlet"> </span>
<span style="color:#0000ff;"><div class="portlet-header"><a href="<?php echo $this->uri->baseUri;?> index.php/boardpages">Boardpages</a> -> <b>Input</b> </div></span>

<span style="color:#0000ff;"><div class="portlet-content"> </span>
<span style="color:#0000ff;"><p>Input Halaman Baru : <?php if(isset($error)) echo "<b>ADA KESALAHAN!</b>"; ?></p></span>
<span style="color:#0000ff;"><form id="form1" name="form1" method="post" action=""></span>
<span style="color:#0000ff;"><label>Kode</label> </span>
<span style="color:#0000ff;"><input type="text" name="kode" id="kode" class="smallInput" value="<?php if(isset($isian[1])) echo $isian[1]; ?>" /></span>
<span style="color:#0000ff;"><?php if(isset($error[1])) echo "<p style='color:red'>".$error[1]."</p>"; ?> </span>

<span style="color:#0000ff;"><label>Judul</label> </span>
<span style="color:#0000ff;"><input type="text" name="judul" id="judul" class="smallInput" style="width: 400px" value="<?php if(isset($isian[2])) echo $isian[2]; ?>;" />; </span>
<span style="color:#0000ff;"><?php if(isset($error[2])) echo "<p style='color:red'>".$error[2]."</p>"; ?> </span>

<span style="color:#0000ff;"><label>Isi Halaman</label> </span>
<span style="color:#0000ff;"><textarea name="isipages" cols="58" rows="15" class="smallInput" id="textarea"> </span>
<span style="color:#0000ff;"><?php if(isset($isian[3])) echo $isian[3]; ?> </span>
<span style="color:#0000ff;"></textarea> </span>
<span style="color:#0000ff;"><?php if(isset($error[3])) echo "<p style='color:red'>".$error[3]."</p>"; ?>; </span>

<span style="color:#0000ff;"><div><span&gt;<input type="submit" name="submit" class="largeInput" value="Simpan"&gt;<</span&gt;</div> </span>

<span style="color:#0000ff;"></form> </span>
<span style="color:#0000ff;"><p>&amp;nbsp;</p> </span>
<span style="color:#0000ff;"></div> </span>
<span style="color:#0000ff;"></div></span>

Silahkan test dulu fitur innput ini dengan alamat :

http://localhost/panada/app/index.php/boardpages/input

Source code file input.php lengkapnya silahkan lihat di sini : http://pastebin.com/mwn3avEJ

Membuat method delete.

“Pada fitur delete ini memiliki karakteristik sebagai berikut, pada saat ‘icon delete’ di klik maka akan di tampilkan terlebih dahulu data yang di pilih yang akan di hapusnya. Setelah yakin data yang di hapusnya benar, tingggal klik tombol ‘hapus’ , sebelum benar-benar data di hapus tampilkan dulu peringatan ‘Yakin mau di hapus?’ , bila jawab ‘Ok’ . Hapus data dan kembali ke daftar halamannya.”

Inilah method delete yang sudah di edit, lihat dan baca komentar yang ada di dalam code agar anda dapat memahaminya.

/***************************************
* fungsi method delete()
* untuk menghapus data halaman
*
* Controller : /app/Controllers/Boardpages.php
* Akses : /app/index.php/boardpages/delete/$id
*
*/
public function delete($id=”){
$id=(int) $id;
//cek dulu ya sudah login belum?
$ceklogin=$this->session->getValue(‘logadmin’);

if($ceklogin){
//kalau sudah login sih masuk aja
//ambil dan periksa dahulu data berdasarkan id-nya
$hsl=$this->pages->GetPagesbyId($id);
//jika hasilnya ada
if($hsl){
//ambil datanya masukkan ke array
$data[‘page’]=$this->pages->GetPagesbyId($id);
}else{
//kalau datanya tidak ada, kembalikan aja ke daftar halaman
$this->redirect(‘boardpages’);
}

if($_POST){
//pastikan nilainya id integer
$id=$this->post->post(‘id’, FILTER_SANITIZE_NUMBER_INT );

$where =array(‘id’ => $id);

//eksekusi hapus data dengan method delete yang sdh kita buat sebelumnya
$this->pages->delete($where);

//kembalikan lagi ke daftar halaman
$this->redirect(‘boardpages’);

}

//tampilkan data yang akan di hapusnya
$this->output(‘dash/pages/delete’,$data);

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

}

Sebelum mengetesnya harus di buat dulu file viewsnya, copy paste saja views/dash/pages/edit.php dan berinama delete.php . Ubah pada bagian seperti bawah ini menjadi seperti ini, karena tampilan untuk di hapus jadi yang kita tampilkan tidak berupa form isian tetapi hanya menampilkan saja :

<!–THIS IS A PORTLET–>
<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”>
<p>Hapus Halaman id: <?php echo $page->id; ?></p>
<form id=”form1″ name=”form1″ method=”post” action=””>
<input type=”hidden” name=”id” id=”id” class=”smallInput” value=”<?php echo $page->id; ?>”/>
<label>Kode</label>
<?php echo $page->kode; ?>
<label>Update Terakhir</label>
<?php echo $page->tanggal; ?>
<label>Judul</label>
<?php echo $page->judul; ?>
<label>Isi Halaman</label>
<textarea disabled name=”textarea” cols=”59″ rows=”15″ class=”smallInput” id=”textarea” ><?php echo $page->isipages; ?></textarea>
<div><span><input type=”submit” name=”submit” class=”largeInput” value=”Hapus” onclick=”return confirm(‘Yakin akan di hapus?’);”></span></div>

</form>
<p>&nbsp;</p>
</div>
</div>

Source code delete.php lengkapnya silahkan lihat di sini : http://pastebin.com/fEXR611F
Source code controller Boardpages.php silahkan lihat di sini : http://pastebin.com/YuQkYqk7

Catatan: Perbedaan fitur edit dan delete adalah pada pengambilan datanya, pada fitur edit masih berdasarkan field kode dan pada fitur delete pengambilan data berdasarkan field id. Jadi karena di depan homepage juga berdasarkan id, maka tugas anda adalah mengubah fitur edit juga berdasarkan id. 😀

3. Membuat link Input halaman baru. Sekarang saatnya kita membuat link menu untuk input halaman baru. Menu ini akan kita tampilkan pada daftar halaman (views/dash/dashboard.php) kita sisipkan di atas tabel halaman. Silahkan cari dan samakan code seperti ini:

<div class=”portlet-header fixed”>
<img src=”<?php echo $this->uri->baseUri; ?>assets/dash/images/icons/user.gif” width=”16″ height=”16″ alt=”Halaman” />Halaman
|| <a href=”<?php echo $this->uri->baseUri; ?>/boardpages/input”>Input Halaman Baru</a>
</div>

4. Membuat link Hapus halaman. Silahkan cari dan samakan pada bagian ini. Saya hilangkan 2 icon yang tidak terpakai yaitu icon ‘approve’ dan ‘reject’ sehingga yang tampil untuk Aksi hanya 2 saja.

<td width=”90″>
<a href=”<?php echo $this->uri->baseUri; ?>index.php/boardpages/edit/<?php echo $pages->kode; ?>” class=”edit_icon” title=”Edit”></a>
<a href=”<?php echo $this->uri->baseUri; ?>index.php/boardpages/delete/<?php echo $pages->id; ?>” class=”delete_icon” title=”Delete”></a>
</td>

Tampilan dashboard setelah di edit :

dashboard-edit

Tampilan dashboard di tambahkan menu input halaman baru dan hapus (x)

Alhamdulillah tutorial bagian 8 sudah selesai. Tetapi sebelumnya karena ada yang menanyakan bagaimana membuat pagination di panada. Saya akan membahasnya karena memang fitur ini harus ada pada tampilan dashboard , kita sudah lihat pada tampilan default-nya sudah ada paginationnya. Tinggal bagaimana kita membuat code di panada ini.

pagination-panada
Membuat Pagination pada Panada Framework.

Untuk mempelajari tentang ini silahkan buka kembali dokumentasi panada framework nya

http://panadaframework.com/documentation/id/classes/pagination.html

Yang terlihat pada dokumentasi di sana yang perlu di perhatikan adalah kita membuat method yang menghasilnya jumlah total halaman/data yang ada, dan method untuk pengambilan data sebagian berdasarkan ‘LIMIT’ yang di tentukan.

1. Tambahkan method baru. Karena kita sedang membahas halaman CMS , yuk kita buka kembali models Pages (/app/Models/Pages.php) dan tambahkan 2 method baru yaitu kita berinama saja : getTotalPages() dan getPagesbyLimit() . Sebagai berikut :

//fungsi mengambiil data sesuai batasan
public function getPagesbyLimit($page = 1, $limit = 20){
$offset = ($limit * $page) – $limit;
$results = $this->db->results(“SELECT * FROM “.$this->table.”
ORDER BY id DESC LIMIT $offset, $limit”);
return $results;
}

//fungsi menghitung total data
public function getTotalPages(){
return $this->db->getVar(“SELECT COUNT(id) FROM “.$this->table );
}

Silahkan tambahk kedua fungsi pada model Pages . Code-nya : http://pastebin.com/87ChAabe
2. Edit Controller Boardpages. Selanjutnya kita harus mengubah kembali method index() pada controller boardpages ini dan menambahkan resources pagination panada ( $this->pagination= new Resources\Pagination; ),silahkan samakan method index-nya menjadi seperti di bawah ini :

public function index($page=1){

//ambil dulu resources untuk paginationnya
$this->pagination= new Resources\Pagination;

//cek dulu ya sudah login belum?
$ceklogin=$this->session->getValue(‘logadmin’);
if($ceklogin){
//kalau sudah login sih masuk aja ke dashboard
$page=(int) $page;

//jumlah baris per halaman, krn sy br ada 4 baris jd sy isi 2.
$this->pagination->limit = 2;

//url yang akan terisi pada saat halaman di klik
$this->pagination->base = $this->uri->baseUri.’index.php/boardpages/%#%/’;

//ambil total halaman
$this->pagination->total = $this->pages->getTotalPages();
$this->pagination->current = $page;

//ambil halaman berdasarkan limit/batasan =saat ini 2
$data[‘pages’]=$this->pages->getPagesByLimit($page, $this->pagination->limit);

//array data pages untuk tampilan di viewsnya
$data[‘page_links’] = $this->pagination->getUrl();

//no urut
$data[‘no’]=($page*$this->pagination->limit)-$this->pagination->limit;

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

3. Edit views dashboard.php . Berikutnya kita ubah bagian views dashboard.php (/app/views/dash/dashboard.php) pada bagian yang bertanda <!– PAGINATION START –> ubah menjadi seperti ini :

<!– PAGINATION START –>
<div class=”pagination”>
<?php
if(isset($page_links)){
foreach ($page_links as $paging) {
echo $paging;
}
}
?>
</div>
<!– PAGINATION END –>

4. Silahkan di testing dan hasilnya seperti gambar di bawah ini. Lihat bagian bawah kanan.

pagination-yes
Pagination yang sudah di setting.

Akhirnya selesai sudah pembahasan tutorial pada bagian 8 ini, selanjutnya nanti kita akan bahas lagi bagian upload gambar dan pembuatan fiture untuk mengganti banner depan. Sampai jumpa pada artikel bagian ke 9.

[TUTORIAL] Membuat CMS Company Profile dengan Panada Framework – Bagian 9

Salam Berbagi

Silahkan bergabung di grup FB: Panada-Framework

https://www.facebook.com/groups/371912876195778/

https://www.facebook.com/groups/301894523172773/

Terimakasih

Iklan

5 thoughts on “[TUTORIAL] Membuat CMS Company Profile dengan Panada Framework–Bag.8

  1. maksudnya di form inputanya ada option yg datanya ngambil dari beda tabel kang,
    itu definisi model di controller inputannya gmn dan
    cara ambil data dari beda model itu gmn? 😀

    saya paha pertanyaannya, hanya mau jawabnya aagak bingung 🙂
    coba dengan contoh tabel apa-nya aja yang ada, jadi jawabnya bissa pas

  2. Bagaimana kalau ada kasus inputan tp default (sistem yg masukin), nampilin field defaultnya di view seperti apa kodenya, saya sdh coba seberti ini kode;?> tp not respon
    mksh sebelumnya 🙂

    ga paham
    kalau memang default di view tinggal buat variabel aja, misal:

    $isidefault=”Ini Isi Default”;

    echo “”;

  3. Ditunggu Bagian TUTRIAL Bagian .9
    Makasih banyak mas, membantu banget dalam mempelajari MVC pada phpframework… 🙂

    Alhamdulillah, kalau memang bisa bermanfaat. Tunggu a bagian 9. Maklum saja, membuat artikel menurut saya lebih berat dari membuat program 😀

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