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


“Merapihkan bagian dashboard, menambah halaman baru, menghapus halaman , menampilkan/ menyembunyikan halaman dan menambahkan editor wysiwyg html pada editor CMS kita”.

Pada tutorial sebelumnya kita sudah membahas bagaimana menampilkan halaman dari database dan menambahkan fitur untuk mengedit halamannya. Terlihat fitur editnya sangat sederhana, untuk membuat halaman lebih bagus minimal kita harus paham bahasa html. Misalnya untuk menebalkan huruf/kata kita harus mengetik tag <strong></strong> atau <b></b> di antara huruf/kata yang akan kita buat tebal. Untuk kita sendiri sepertinya gampang saja karena yang membuatnya, bagaimana seandainya CMS yang kita buat ini dipakai orang lain yang tidak mengerti bahasa html? Mereka tahunya tinggal klik ‘icon B’ untuk menebalkan, ‘icon i’ untuk membuatnya miring, dan lain sebagainya.

Sebelum kita melanjutkan menambah fitur lainnya, kita akan mengubah terlebih dahulu fitur edit yang sudah kita buat menjadi lebih baik. 🙂 Pada artikel yang lalu terlihat fitur edit yang sederhana (hanya kotak kosong), sekarang akan kita tambahkan js editor html. Menjadi seperti ini.  (lihat gambar) .

editor-wyiswyg

Banyak sekali editor html wysiwyg yang bisa kita gunakan silahkan lihat lagi artikel saya ini :
http://hasannuh.com/2013/01/24/source-8-koleksi-wysiwyg-editor-yang-saya-pakai-untuk-cms-software/ tetapi agar seragam dalam CMS kita ini akan menggunakan tinymce silahkan download dulu di link ini http://www.tinymce.com/download/download.php bagi yang sudah download mari kita lanjutkkan.

Sebagai catatan mulai tutorial ini, saya akan menerangkan terlebih dahulu pembuatan coding-nya, baru langkah selanjutnya bagaimana dan apa fungsi dari yang kita buat itu. Hal ini agar saya mudah menuliskannya menjadi sebuah artikel seperti saat ini.

Menambahkan editor html, pada setiap form text-area (fitur edit & input ).

Sudah download file editor tinymce-nya? Kalau sudah silahkan di ‘extract’ zip file-nya dan simpan pada folder root aplikasi panada (/var/www/panada/app).

lokasi-wysiwyg

Buka folder ‘tinymce’ dan hapus saja folder ‘examples’, karena kita tidak memerlukannya. Sekarang kita coba install/setting agar semua ‘textarea’ pada form menjadi ‘text editor wysiwyg’. Untuk pemasangan mudah saja sisipkan baris di bawah ini pada area <head></head>.

<!– Sesuaikan dengan lokasi tinymce-nya –>
<script type=”text/javascript” src=”<?php echo $this->uri->baseUri; ?> tinymce/jscripts/tiny_mce/tiny_mce.js”></script>
<script type=”text/javascript”>
tinyMCE.init({
mode : “textareas”
});
</script>

Kodenya lihat di sini : http://pastebin.com/A7C0VJVH

Sisipkan code di atas pada daerah <head> </head> pada file yang ada form text area dalam hal ini yang baru kita buat adalah file edit.php (/app/views/dash/pages/edit.php) . Kalau sudah dan benar akan terlihat seperti ini saat klik ‘icon pencil’ -edit-.

Berhasil, berhasil, berhasil!

editor-sdh-nempel

Merombak dan merapihkan fitur dashboard halaman ini.

Sebelum kita masuk ke materi bagaimana menambah halaman dan menghapus halaman. Menjawab pertanyaan rekan kita yang menginginkan pembuatan halaman tanpa harus membuat berulangkali controller dan method. Karena hal ini berhubungan juga dengan materi yang akan kita lalui berikutnya.

panada
Sebelum bisa merapihkan cms ini,

1. Lihat dulu ke url di browser saat kita memilih salah satu menunya.

Home => http://localhost/panada/app/index.php/home

Ourclients => http://localhost/panada/app/index.php/pages/ourclients
About Us => http://localhost/panada/app/index.php/pages/aboutus
Careers => http://localhost/panada/app/index.php/pages/careers
Contact Us => http://localhost/panada/app/index.php/pages/contactus

Terlihat tugasnya hanya di bagi oleh dua controller yaitu controller home dan pages. Controller home untuk saat ini tidak kita koreksi yang kita ubah hanya pada bagian controller pages, sehingga untuk pemanggilan setiap halaman ada 2 cara pertama (GET) akan seperti ini :

Home => http://localhost/panada/app/index.php/home

Ourclients => http://localhost/panada/app/index.php/pages/?p=2
About Us => http://localhost/panada/app/index.php/pages/?p=3
Careers => http://localhost/panada/app/index.php/pages/?p=4
Contact Us => http://localhost/panada/app/index.php/pages/?p=5

Halaman lainnya => http://localhost/panada/app/index.php/pages/?p=idhalaman

Atau cara pemanggilan pada panada framework :

Ourclients => http://localhost/panada/app/index.php/pages/2
About Us => http://localhost/panada/app/index.php/pages/3
Careers => http://localhost/panada/app/index.php/pages/4
Contact Us => http://localhost/panada/app/index.php/pages/5
Halaman lainnya => http://localhost/panada/app/index.php/pages/idhalaman

2. Edit Controller Pages.php

Untuk saat ini kita pakai cara kedua saja. Sekarang kita buka controller pages (sebelumnya saya backup dulu—biar kalau salah masih ada yang aslinya ) , hapus semua method-nya kecuali method index(). Dan sesuaikan menjadi seperti di bawah ini :

//codenya controller Pages.php
<?php
namespace Controllers;
use Resources, Models;

class Pages extends Resources\Controller
{

public function __construct(){

parent::__construct();

// Load Resources
$this->request = new Resources\Request;
// Load model
$this->pages = new Models\Pages;

}

public function index($id=’1′)
{
//Error trap: jika $id kosong atau $id tidak ada pada database
//tampilkan saja home area

$id = (int) $id; //untuk meyakinkan bahwa yg kita ambil dari $id adalah integer.
$hslid = $this->pages->GetPagesbyId($id);
//ambil data semua pages untuk di tampilkan di menu
$data[‘pagesMenu’]= $this->pages->GetPages();

if(!$hslid){
$data[‘title’] = “Homepage”;
$this->output(‘tema/default/home’, $data);
}else{
$oPages=$this->pages->GetPagesbyId($id);
$data[‘title’] = $oPages->judul;
$data[‘content’] = $oPages->isipages;
$data[‘active’] = $oPages->kode;
$data[‘footer’] = ‘Copyright (c) 2013, Ini Footer’;
$this->output(‘tema/default/halaman’, $data);
}
}
}

//source codenya di sini : http://pastebin.com/8exVCrd8

Lihat pada source code ada 2 method lagi yang akan kita buat pada Models/Pages.php yaitu :

Method : GetPagesbyId($id); yang akan kita gunakan untuk mengambilkan data pada tabel pages berdasarkan id -nya.

Method : GetPages(); yang akan kita gunakan untuk mengambil semua halaman padat tabel pages. Yang akan kita gunakan pada link menu-nya.

3. Edit link menunya dulu di panada/app/views/tema/default/halaman.php

Sebelum kita buat method di model pages.php , kita edit dulu link menunya.

Awalnya :

<ul>
<li ><a href=”<?php echo $this->uri->baseUri;?>index.php/home” accesskey=”1″ title=””>Homepage</a></li>
<li <?php if($active==’_OURCLIENTS’) echo ‘class=”active”‘; ?> ><a href=”<?php echo $this->uri->baseUri;?>index.php/pages/ourclients” accesskey=”2″ title=””>Our Clients</a></li>
<li <?php if($active==’_ABOUTUS’) echo ‘class=”active”‘; ?> ><a href=”<?php echo $this->uri->baseUri;?>index.php/pages/aboutus” accesskey=”3″ title=””>About Us</a></li>
<li <?php if($active==’_CAREERS’) echo ‘class=”active”‘; ?> ><a href=”<?php echo $this->uri->baseUri;?>index.php/pages/careers” accesskey=”4″ title=””>Careers</a></li>
<li <?php if($active==’_CONTACTUS’) echo ‘class=”active”‘; ?> ><a href=”<?php echo $this->uri->baseUri;?>index.php/pages/contactus” accesskey=”5″ title=””>Contact Us</a></li>
</ul>

Kodenya lihat di sini : http://pastebin.com/ZQvWYZtT

Setelah di edit :

<ul>
<li><a href=”<?php echo $this->uri->baseUri;?>index.php/home” accesskey=”1″ title=””>Homepage</a></li>
<?php
//cek dulu apakah ada variabel $pageMenu kiriman dari controller Pages.php?
if(isset($pagesMenu)){
//kalau ada kita buat menunya
foreach ($pagesMenu as $menu) { ?>

<li><a href=”<?php echo $this->uri->baseUri;?>index.php/pages/<?php echo $menu->id; ?>/<?php echo strtolower($menu->judul); ?>.html” accesskey=”2″ title=”<?php echo $menu->judul; ?>”><?php echo $menu->judul; ?></a></li>

<?php } } ?>
</ul>

Kodenya lihat di sini : http://pastebin.com/vgABva5K

Coba lihat pada baris ini :

<li><a href=”<?php echo $this->uri->baseUri;?>index.php/pages/<?php echo $menu->id; ?>/<?php echo strtolower($menu->judul); ?>.html” accesskey=”2″ title=”<?php echo $menu->judul; ?>”><?php echo $menu->judul; ?></a></li>

Akan terbentuk susunan menu seperti ini:

http://localhost/panada/app/index.php/pages/2/ourclients.html
http://localhost/panada/app/index.php/pages/3/about%20us.html
http://localhost/panada/app/index.php/pages/4/careers.html
http://localhost/panada/app/index.php/pages/5/contact%20us.html
Yang perlu di perhatikan setelah pemanggilan controller pages ada dua variabel yang akan kita lewatkan ke method index pada controller pages ini. Dalam contoh paling atas ada nilai 2 dan ourclients.html.

Sementara pada fungsi/method index kita hanya memerlukan satu variabel saja, yaitu variabel id, lihat lagi fungsi/method index pada controller di atas.
public function index($id=’1’){
…….
}

Artinya nilai dari variabel kedua (ourclients.html) tidak harus ada, boleh dihilangkan. Ini hanya kebiasaan iseng saya aja – siapa tahu ada gunanya untuk SEO 🙂 – Sebetulnya cukup seperti ini saja.

http://localhost/panada/app/index.php/pages/2
http://localhost/panada/app/index.php/pages/3
http://localhost/panada/app/index.php/pages/4
http://localhost/panada/app/index.php/pages/5

Pertanyaan berikutnya adalah : “Bagaimana kalau ada yang iseng mengisi dengan nilai id lebih dari yang ditentukan, misal : nilai 6,7,8 atau mungkin 1000 atau di isi dengan huruf ? ”

Jawabannya : Coba lihat lagi method index pada controller pages di atas, kita sudah membuatkan jebakan kesalahan (error trap) . Yang maksudnya adalah kalau nilai id tidak ada pada tabel pages, biarkan sistem membawanya ke halaman awal saja ($this->output(‘tema/default/home’, $data); .

4. Edit config main.php , ganti method defaultnya index.

Sekarang karena kita akan menggunakan method default untuk keseluruhan Controller kita buat yaitu memakai method index(). Sehingga method yang utama akan di baca adalah method index, misalnya saat kita memanggil http://localhost/panada/app/index.php/pages/ sistem secara otomatis akan memanggil method index.

Sekarang buka file main.php (app/config/main.php) pada bagian alias ubah menjadi seperti ini :

‘alias’ => array(
/*
‘controller’ => array(
‘class’ => ‘Alias’,
‘method’ => ‘index’
),
*/
‘method’ => ‘index’
),

Jangan lupa di simpan.

5. Buat method GetPages() dan GetPagesbyId($id) pada model pages (app/Models/Pages.php)

Silahkan buka models Pages dan sesuaikan manjadi seperti ini :
public function GetPages(){

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

}

//fungsi untuk mengambil satu baris berdasarkan id yg di minta

public function GetPagesbyId($id){

Return $this->db->row(“SELECT * FROM pages WHERE id='”.$id.”‘”);

}
Source code lengkapnya lihat di sini : http://pastebin.com/MCu5r8cj

Selesai sudah [Tutorial.7] Membuat CMS Company Profile dengan Panada Framework – Bagian 7

Upss… ternyata ada yang belum di rubah, yaitu pada Controller Home.php dan link menunya.
Silahkan saya yakin , anda sendiri bisa merubahnya 🙂

Kalau tidak yakin ini dia link source codenya :

Untuk Controller Home.php (app/Controllers/Home.php) : http://pastebin.com/yBAia77a

Untuk views edit link menu di home.php (app/views/tema/default/home.php) : http://pastebin.com/mcBAesvT

Alhamdulillah selesai sudah. Kita lanjutkan lagi ke bagian 8.

[Tutorial.8] Membuat CMS Company Profile dengan Panada Framework – Bagian 8

Silahkan bergabung di grup FB: Panada-Framework

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

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

Terimakasih

Iklan

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

  1. mas, koq tutorial yang ke 7 saya gagal ya..

    Page not found!
    Message: Method 3 does not exists in controller Pages

    salahnya dimana ya mas kira-kira?

    Page not found! artinya halaman tidak ditemukan
    bisa jadi karena memang belum buat.

  2. Update sedikit kang yang buat manggil tinymce nya
    itu bukan “mode” tapi “selector”
    terus itu kelebihan huruf s “textareas” jd “textarea”

    sumber : dokumentasi tinymce 😀

    Terimakasih atas update informasinya. Hanya saja yang ada di tutorial ini sudah benar karena yang di gunakan adalah tinymce versi 3.xx.xx.

    http://www.tinymce.com/wiki.php/Configuration3x

    Kalau yang anda pakai kemungkinan versi 4.xx.xx

    http://www.tinymce.com/wiki.php/Installation

    Apabila nanti ada perbedaan, saya anggap anda bisa
    menyesuaikannya. 🙂

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