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


Merapihkan skrip CMS kita

Pada tutorial sebelumnya kita sudah bisa mengganti tampilan awal panada dengan tema yang kita inginkan. Sampai di sini kita sudah bisa membuat web statis dengan bantuan panada framework ini. Saya kembali mengingatkan apa yang sudah kita pelajari :

  • Menginstall Panada PHP Framework.
  • Mengganti tema awal Panada PHP Framework.
  • Membuat halaman baru.
  • Membuat Menu dan menyambungkannya dengan halaman baru.

Pada tutorial sebelumnya kita sudah membuat :

Controllers baru yaitu Ourclients.php ( /app/Controllers/Ourclients.php )
views baru yaitu ourclients.php ( /app/views/tema/default/ourclients.php)

Bagaimana langkah untuk membuat halaman baru yang lainnya yang terdapat pada menu tema kita, misal About Us atau Careers? Sama saja seperti kita membuat menu dan halaman baru ‘ourclients’ pada tutorial sebelumnya. Lihat lagi tutorial bagian 2. Saya sudah buat menu Aboutus,Careers dan Contact Us. Anda sudah buat?? Cobalah buat dulu sekarang, kalau tidak latihan terus pasti tidak akan paham.

panada-framework-3-23

Intinya kalau ada halaman baru ya buat Controllers baru dan views baru juga, makin banyak halaman ya makin banyak controllers dan viewsnya. Adakah cara lainnya? Cara lainnya kita menggunakan database, isi yang akan di tampilkan di tampung pada database. Sementara tampilan/views nya tidak perlu banyak sesuai dengan kebutuhan –jangan salah butuhnya banyak ya pakai banyak 😀 —

Membuat Method Baru

Sebelum kita membahas topik selanjutnya, kita akan merapihkan terlebih dahulu skrip sistem yang sudah kita buat. Membuat halaman baru langsung ‘copy paste‘ file views yang sebelumnya mengakibatkan adanya isi file yang sama, sehingga kita menjadi agak susah pada saat akan memodifikasinya. Misalnya saja pada saat kita menambahkan ‘link menu‘ di file home.php, kita juga harus menambahkannya di semua file yang ada ‘link menu‘ nya tersebut.

Dari lima file halaman yang ada (home,ourclients,aboutus,careers,contactus) terlihat sebenarnya dari tema yang ada sebenarnya ada 2 tampilan yang berbeda , yaitu file home.php tersendiri karena ada slideshow-nya, sementara yang lainnya hampir sama yang membedakan hanya pada isinya yang berubah. Kalau isinya saja yang berubah kita bisa gunakan database saja. Jadi agar terlihat menjadi ramping dan mempermudah nanti untuk databasenya kita hapus juga beberapa filenya. Sisakan saja file home.php dan ourclients.php pada folder /app/views/tema/default/ . Selain kedua file itu boleh di hapus. Ganti nama file ourclients.php dengan halaman.php . Sehingga saat ini hanya terdapat dua file views yaitu home.php dan halaman.php .

Sekarang kita ramping juga file yang ada pada contollers . Saat ini terdapat lima file controller yaitu Home,Ourclients,Aboutus,Careers,Contactus sisakan saja dua file controllers yaitu home dan ourclients , sama seperti file views ganti nama controller Ourclients.php dengan nama Pages.php . Mengapa ? Karena saat ini kita hanya perlu dua controller itu.

panada-framework-3-45

Bagaimana dengan menu lainnya, untuk selanjutnya kita akan mengakses url kelima menu itu dengan format :

  1. Home url nya : http://localhost/panada/app/ atau http://localhost/panada/app/index.php/home atau http://localhost/panada/app/index.php/pages
  2. Ourclients url nya : http://localhost/panada/app/index.php/pages/ourclients
  3. Aboutus url nya : http://localhost/panada/app/index.php/pages/aboutus
  4. Careers url nya : http://localhost/panada/app/index.php/pages/careers
  5. Contactus url nya : http://localhost/panada/app/index.php/pages/contactus

Sekarang buka terlebih dahulu controller pages ( /app/Controllers/Pages.php ) :
Sebelumnya :

panada-framework-3-6Modifikasi controller pages ini, dengan mengganti nama class-nya, dan menambah beberapa fungsi baru –method baru– yang merujuk ke halaman menu utama yang sudah kita buatkan URL-nya di atas. Perhatikan dengan seksama terlihat di sana ada data array ($data) yang akan kita lewatkan ke views halaman yang sudah kita buat sebelumnya. Datanya seperti ini :

$data[‘title’] = ‘Isi Title’; //nilai title yang akan kita pakai di views halaman

$data[‘content’] = ‘Isi Content’; //nilai content yang akan kita pakai di views halaman

$data[‘footer’] = ‘Isi Footer’; //nilai footer yang akan kita pakai di views halaman

$this->output(‘tema/default/halaman’, $data); //merujuk ke file views halaman.php

Pada tutorial ini cukup kita isikan beberapa baris teks, saja karena pada tutorial yang akan datang , nilai isian data ini kita ambil dari database yang akan kita buat selanjutnya.

<?php
namespace Controllers;
use Resources, Models;
class Pages extends Resources\Controller {

public function index() {
   $data['title'] = 'Beranda';
   $this->output('tema/default/home', $data);
}

public function ourclients()
{
   $data['title'] = 'Our Clients';
   $data['content'] = 'Ini Content Our Clients';
   $data['footer'] = 'Copyright (c) 2013, Ini Footer Our Clients';
   $this->output('tema/default/halaman', $data);
}

public function aboutus()
{
   $data['title'] = 'About Us';
   $data['content'] = 'Ini Content About Us';
   $data['footer'] = 'Copyright (c) 2013, Ini Footer About Us';
   $this->output('tema/default/halaman', $data);
}

public function careers()
{
   $data['title'] = 'Careers';
   $data['content'] = 'Ini Content Careers';
   $data['footer'] = 'Copyright (c) 2013, Ini Footer Careers';
   $this->output('tema/default/halaman', $data);
}

public function contactus()
{
   $data['title'] = 'Contact Us';
   $data['content'] = 'Ini Content Contact Us';
   $data['footer'] = 'Copyright (c) 2013, Ini Footer Contact Us';
   $this->output('tema/default/halaman', $data);
}

}

Ganti pages.php sebelumnya, dengan pages.php yang sudah kita modifikasi ini.

Selanjutnya buka views halaman.php (/app/views/tema/default/halaman.php ) ,

lihat baris 16 seperti ini : <title></title>
tambahkan skrip PHP seperti ini : <title><?php echo $title; ?></title>

<?php echo $title ?> = memerintahkan browser untuk menampilkan isi variabel $title yang sudah kita definisikan pada controller pages sebelumnya.

Selanjutnya lihat skrip baris 34 sd 42 :

<div id="menu">
<ul>
<li ><a href="<?php echo $this->uri->baseUri;?>index.php/home" accesskey="1" title="">Homepage</a></li>
<li class="second active" ><a href="<?php echo $this->uri->baseUri;?>index.php/ourclients" accesskey="2" title="">Our Clients</a></li>
<li><a href="<?php echo $this->uri->baseUri;?>index.php/aboutus" accesskey="3" title="">About Us</a></li>
<li ><a href="<?php echo $this->uri->baseUri;?>index.php/careers" accesskey="4" title="">Careers</a></li>
<li><a href="<?php echo $this->uri->baseUri;?>index.php/contactus" accesskey="5" title="">Contact Us</a></li>
</ul>
</div>

Gantikan Url menu ini sesuai dengan yang sudah kita buat. Seperti ini :

<div id="menu">
<ul>
<li ><a href="<?php echo $this->uri->baseUri;?>index.php/home" accesskey="1" title="">Homepage</a></li>
<li class="second active" ><a href="<?php echo $this->uri->baseUri;?>index.php/pages/ourclients" accesskey="2" title="">Our Clients</a></li>
<li><a href="<?php echo $this->uri->baseUri;?>index.php/pages/aboutus" accesskey="3" title="">About Us</a></li>
<li ><a href="<?php echo $this->uri->baseUri;?>index.php/pages/careers" accesskey="4" title="">Careers</a></li>
<li><a href="<?php echo $this->uri->baseUri;?>index.php/pages/contactus" accesskey="5" title="">Contact Us</a></li>
</ul>
</div>

Selanjutnya lihat baris 47 sd 65 , kita akan menampilkan isi dari variabel content pada controller pages ke halaman , modifikasi menjadi seperti ini :

<div id="featured" class="container">
<h2 class="title"><?php echo $title; ?> </h2>
<h2><?php echo $content; ?></h2>
<p><?php echo $content; ?></p>
</div>

Selanjutnya lihat baris 87 sd 89 , kita menampilkan isi dari variabel footer pada controller pages ke halaman ,modifikasi menjadi seperti ini :

<div id="footer">
<p><?php echo $footer; ?></p>
</div>

Selesai pembahasan tutorial bagian 3 ini.

Upss! Tunggu dulu link menu pada views home.php (/app/views/tema/default/home.php) belum di ganti, silahkan ganti , dan samakan dengan link menu pada halaman pages ini. Sekarang kita test : http://localhost/panada/app/ dan klik semua menu utamanya apakah sudah benar semua?
Terimakasih

Salam Berbagi
Artikel selanjutnya :

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

Artikel Sebelumnya :

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

Iklan

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

  1. kang nih saya nanya lagi…
    inikan pagenya hanya ada 5 y. dan selalu harus membuat ulang modules 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.

    Untuk menjawab ini nantikan ya tutorial selanjutnya… keep spirit 🙂

  2. Okeh kang.. saya nanya yeuh didieu…
    itu saya sudah edit yang “OURCLIENTS” tapi kok yang berwarnanya cuma di Home aja? harusnya pindah donk k “OURCLIENTS” ?gmn tuh kang?

    Sebenarnya jawabannya sederhana saja di karenakan di menu home adanya “class=’first active'” dan ketika mengklik ‘OURCLIENTS’ atau lainnya ‘class active’ itu ga berpindah. Solusinya pertama ya harus di keluarkan bagian menu itu menjadi file baru , solusi lainnya gunakan perintah ‘if’ , misal jika halaman ‘OURCLIENTS’ pindahkan yang aktif ke ‘OURCLIENTS’ begitu juga lainnya.

    //saya tambahkan aja di bagian controller variabel ‘active’ dengan isian ‘nama page’ nya seperti dua methods di bawah ini, yang lainnya buat sendiri nya :


    public function ourclients()
    {
    $oPages=$this->pages->GetPagesbyKode('_OURCLIENTS');
    $data['title'] = $oPages->judul;
    $data['content'] = $oPages->isipages;
    $data['active'] = '_OURCLIENTS'; // baris tambahan.
    $data['footer'] = 'Copyright (c) 2013, Ini Footer Our Clients';
    $this->output('tema/default/halaman', $data);
    }

    public function aboutus()
    {
    $oPages=$this->pages->GetPagesbyKode('_ABOUTUS');
    $data['title'] = $oPages->judul;
    $data['content'] = $oPages->isipages;
    $data['active'] = '_ABOUTUS'; //baris tambahan
    $data['footer'] = 'Copyright (c) 2013, Ini Footer About Us';
    $this->output('tema/default/halaman', $data);
    }

    dan di views-nya bagian menu di tambah baris ini

    if($active==’_OURCLIENTS’) echo ‘class=”active”‘; //sesuaikan

    sehingga menjadi seperti ini :

    Selesai dah.

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