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


Menganti Tampilan Default Panada dengan Tema baru

Pada bagian satu , kita sudah dapat memasang skrip PHP Panada Framework pada localhost. Pada kesempatan ini kita akan mencoba untuk menggantikan tampilan default dari panada ini dengan tema yang sudah kita download pada bagian satu. Sudah download kan? Kalau belum silahkan kembali lagi ke bagian satu. Mungkin ada yang penasaran kenapa pake tema yang sudah jadi -gratisan lagi- . Dalam kasus ini di ibaratkan kita sudah mendapatkan tema jadi – misalnya dari desainer web sendiri,  desain sendiri atau mungkin beli tema jadi yang premium. Karena kalau menunggu buat dulu kan lama. 🙂

Lihat gambar 2-1 (asalnya) dan gambar 2-2 (hasilnya).

panadaframework2-2Buka file universality.zip yang sudah kita download, dan extract ke folder baru, dimana saja terserah anda dan beri nama foldernya default. Anda boleh beri nama apa saja misal : universal , atau lainnya. Tetapi tentu saja anda harus ingat ketika saya tulis tema default, berarti tema yang ini. Kemudian buka folder default tadi dan lihat apa saja isinya.

Isinya adalah file :

  • index.html
  • default.css
  • jquery.slidertron-1.1.js
  • jquery-1.1.min.js
  • folder /images
  •  license.txt

panadaframework2-4

Kita tinggalkan dulu bagian ini, sekarang kita lihat folder panada yang sudah kita install. Kalau saya di simpan di folder /var/www/panada/ .  Dalam folder ini terdapat 3 folder lagi yaitu :

  • /app => folder yang akan kita pakai untuk skrip sistem kita, isinya :
    • /assets
    • /config
    • /Controllers
    • /Libraries
    • /Models
    • /Modules
    • /views
  • /documentation => dokumentasi PHP Panada Framework
  • /panada => core inti dari panada framework ini

Untuk selanjutnya saya hanya akan menyebutkan nama folder ini saja. Jadi apabila dalam artikel ini di tulis folder /app , itu artinya folder yang berada pada /var/www/panada/app (ubuntu) atau ../htdocs/panada/app/ (misalnya) -silahkan anda sesuaikan.

Yang perlu diperhatikan saat ini adalah folder /app/assets dan folder /app/views .

Buatlah folder /tema di dalam folder /app/assets dan /app/views ini.

Untuk apa folder /tema ini ? Maksud dari folder /tema ini adalah tempat untuk menyimpan tema-tema yang bersatu dengan CMS baru kita ini, sebenarnya langkah ini akan saya berikan pada tutorial tingkat lanjut, tapi tak apalah biar ‘source code’ kita tidak berantakan dan kita bisa lebih mudah mengganti template-nya nanti. Biar terlihat canggih walaupun dengan teknik sederhana. 😉

Langkah berikutnya  adalah salin folder default (folder hasil exstract tema universality)  ke folder /app/assets/tema/ dan folder /app/views/tema/ sehingga akan terlihat seperti ini :

– /app/assets/tema/default

– /app/views/tema/default

Selanjutnya buka folder /app/assets/tema/default/ dan hapus isi file index.html, sehingga isi index.html ini kosong.

Lakukan lagi buka folder /app/views/tema/default/ dan hapus file lainnya sisakan hanya file index.html. Sehingga pada folder ini hanya ada file index.html.

Ganti nama file index.html ini dengan home.php.

Kenapa menjadi home.php? apakah bisa dengan nama lain, misal: index.php atau main.php ? Bisa saja sesuka anda kasih nama file-nya hanya untuk saat ini kita seragamkan saja menjadi : home.php , di langkah berikutnya akan saya jelaskan.

panadaframework2-9

Buka lagi file /app/Controllers/Home.php . Seterusnya saya akan tulis /Controllers/Home ini artinya /Controllers/Home.php .
Silahkan dilihat isi dari file /Controllers/Home ini, dan lihat pada baris 9 dan 11 yaitu :

panadaframework2-10$data[‘title’] = ‘Hello world!’; //baris 9 pada Controllers Home.

$this->output(‘home’, $data); //baris 11 pada Controllers Home.

Pada baris 11 ini, lihat variabel ‘home‘ dan $data pada bari $this->output(‘home’, $data); .

variabel ‘home’ artinya core panada framework ini merujuk ke file views home.php yang lengkapnya di /app/views/home.php .
variabel $data adalah data/isi yang akan dilewatkan ke file yang disebutkan sebelumnya, saat ini adalah file home.php.

Saat kita ketikkan di browser http://localhost/panada/app/ maka yang di panggil adalah file views-home ( /app/views/home.php ). Sementara tema baru yang kita simpan ada pada folder /app/views/tema/default/home.php jadi bagaimana memanggilnya? tepat sekali kita tinggal merubah sedikit skrip di atas menjadi ;

$this->output(‘tema/default/home’, $data); //baris 11 pada Controllers Home.

panadaframework2-10-1

Skrip ini memanggil file home.php yang ada pada folder tema/default . File home.php inilah file index.html yang telah kita ganti menjadi home.php , jadi apabila sebelumnya anda menggantinya dengan namafile lainnya ya tinggal sesuaikan saja, misalnya tadi di ganti menjadi main.php maka skripnya menjadi $this->output(‘tema/default/main’, $data); . Mudah kan ?

Kita coba di browser dengan mengetikkan http://localhost/panada/app/

Berhasil ! tampilan utama panada ini sudah berganti dengan tema yang baru, tetapi ada yang salah dengan tampilannya terlihat berantakan tidak sesuai yang kita inginkan. Mengapa tidak rapih?

panadaframework2-3

Biasanya saya akan melihat ke file error.log (/var/log/apache2/error.log) yang di hasilkan oleh server apache2 (localhost) ini di sana akan terlihat error seperti ini :

[Sun Jan 27 07:09:46 2013] [error] [client 127.0.0.1] File does not exist: /var/www/panada/app/jquery-1.7.1.min.js, referer: http://localhost/panada/app/
[Sun Jan 27 07:09:46 2013] [error] [client 127.0.0.1] File does not exist: /var/www/panada/app/jquery.slidertron-1.1.js, referer: http://localhost/panada/app/
[Sun Jan 27 07:09:46 2013] [error] [client 127.0.0.1] File does not exist: /var/www/panada/app/default.css, referer: http://localhost/panada/app/

Terlihat kesalahan file tidak ada pada pemanggilan file jquery-1.7.1.min.js,jquery.slidertron-1.1.js dan default.css karena memang tidak ada di folder /var/www/panada/app ketiga file itu adanya di /var/www/panada/app/assets/tema/default/ seperti yang sudah kita lakukan di atas.

Jadi kita harus mengganti baris yang memanggil ketiga file itu menjadi benar.

Silahkan buka /app/views/tema/default/home.php seterusnya saya akan tulis /views/tema/default/home ini artinya merujuk ke /app/views/tema/default/home.php.

Lihat pada baris 19 sd 22, seperti berikut ini :

<script type="text/javascript" src="jquery-1.7.1.min.js"></script><script type="text/javascript" src="jquery.slidertron-1.1.js"></script>
 	<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600|Archivo+Narrow:400,700" rel="stylesheet" type="text/css" /> 	<link href="default.css" rel="stylesheet" media="all" type="text/css" /> 

Ubah script kode diatas pada baris 19,20,22 sehingga menjadi seperti ini :

<script type="text/javascript" src="<?php echo $this->uri->baseUri;?>assets/tema/default/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="<?php echo $this->uri->baseUri;?>assets/tema/default/jquery.slidertron-1.1.js"></script>
 	<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600|Archivo+Narrow:400,700" rel="stylesheet" type="text/css" /> 	<link href="<?php echo $this->uri->baseUri;?>assets/tema/default/default.css" rel="stylesheet" media="all" type="text/css" />

Begitu juga dengan URL yang mengarah ke folder images seperti berikut ini :

<img alt="" src="images/pic07.jpg" width="235" height="235" />
<img alt="" src="images/pic01.jpg" />

Ganti menjadi :

<img alt="" src="<?php echo $this->uri->baseUri;?>assets/tema/default/images/pic07.jpg" width="235" height="235" />
<img alt="" src="<?php echo $this->uri->baseUri;?>assets/tema/default/images/pic01.jpg" />

Dari mana <?php echo $this->uri->baseUri;?>assets/tema/default/ ???

<?php echo $this->uri->baseUri;?> ini adalah informasi url root dari aplikasi Anda.
assets/tema/default/ folder images dan lainnya pada tema yang baru kita.

Untuk lebih jelasnya tentang baseUri ini silahkan buka dan baca dokumentasi panada ini pada bagian Global Method dan properties. Bagaimana cara membuka dokumentasi ini , karena di bagian satu kita mengekstak file panada framework di document/root server kita (/var/www/panada/ atau /htdocs/panada/ ) jadi untuk membuka file dokumentasi ini tinggal ketikkan saja di browser anda seperti ini : http://localhost/panada/documentation/id/  kemudian cari Global Method dan Properties.

Sudah di ganti semua img src-nya dan lainnya ?? kita coba lagi pada browser dengan mengetik http://localhost/panada/app/

Berhasil, lihat gambar di bawah ini :

panadaframework2-20

Membuat Halaman Baru dan Link Baru

Sampai di sini kita sudah bisa mengganti tampilan default panada menjadi tema baru kita. Dan mengenal controller dan views. Untuk lebih jelasnya tentang controller dan views ini silahkan buka dokumentasi bagian controllers dan views. Selanjutnya kita akan membuat semua menu atas pada tema yang baru itu mempunyai isi dan tampilan yang berbeda. Pada tutorial ini saya hanya mengganti menu ‘OUR CLIENTS’ menjadi seperti ini :

panadaframework2-19

Untuk menu yang lainnya silahkan anda buat sendiri setelah melihat langkah-langkah pembuatan halaman ‘OUR CLIENTS’ ini.

Langkahnya ,

Copy dan Paste file views home yang ada pada /app/views/tema/default/home.php , dan beri nama file salinan dari home.php itu dengan ourclients.php

Buka file ourclients.php yang baru kita buat dengan editor text/notepad++ anda , dan lihat baris 45 ( <div id=”banner”> ) sampai dengan baris 84 (<div>) , jadi kita akan buat untuk menu ‘OUR CLIENTS’ ini tidak ada banner slideshow-nya.

Ganti bagian <h2 class=”title”>Praesent mattis condimentum</h2> (baris 87) menjadi <h2 class=”title”><?php echo $title; ?></h2>

Kita bisa mengakses menu ‘OUR CLIENTS’ ini dengan mengklik menu-nya atau bisa juga melalui URL http://localhost/panada/app/index.php/ourclients. Kenapa URL-nya makin panjang sementara untuk mengakses homepage lebih pendek http://localhost/panada/app/ ? Sebenarnya pada saat anda mengetik http://localhost/panada/app core framework panada membacanya menjadi http://localhost/panada/app/index.php/home

Karena itu untuk mengaksesnya memerlukan Controller baru, yang kita bernama : Ourclients.php

Copy dan Paste file controllers home yang ada pada /app/Controllers/Home.php dan beri nama file salinan tadi dengan Ourclients.php (lihat penulisannya memakai huruf kapital di awal nama file -lihat dokumentasi).

panadaframework2-21

Buka file Controllers/Ourclients.php yang baru kita buat dan modifikasi pada baris berikut :

class Home extends Resources\Controller   menjadi   class Ourclients extends Resources\Controller

(Ingat: penamaan class harus sama dengan namafile nya, misal namafile Ourclients.php maka nama class menjadi class Ourclients )

//ganti baris pada method index() ini ;

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

menjadi :

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

Baiklah kita coba dulu dengan mengakses http://localhost/panada/app/index.php/ourclients
Berhasil kan? Selanjutnya kita modifikasi URL yang ada pada menu utama.

Buka file /app/views/tema/default/home.php dan file /app/views/tema/default/ourclients.php ganti pada bagian ini :

</pre>
<div id="menu">
<ul>
	<li><a accesskey="1" title="" href="#">Homepage</a></li>
	<li><a accesskey="2" title="" href="#">Our Clients</a></li>
	<li><a accesskey="3" title="" href="#">About Us</a></li>
	<li><a accesskey="4" title="" href="#">Careers</a></li>
	<li><a accesskey="5" title="" href="#">Contact Us</a></li>
</ul>
</div>
<pre>

menjadi

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

Sekarang kita coba lagi dengan mengetik http://localhost/panada/app/ dan cobalah pilih menu ‘OUR CLIENTS’ dan ‘HOMEPAGE’ , apakah ada perubahan ? kalau ada berarti anda berhasil. Untuk menu lainnya silahkan anda modifikasi dengan mengikuti langkah pada tutorial ini, menjadi pekerjaan rumah anda sebelum kita lanjutkan ke pembahasan berikutnya.

Selanjutnya ikuti tutorial bagian 3 :

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

Terimakasih

Salam Berbagi

Artikel Sebelumnya :

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

Iklan

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

  1. pada bagian :
    baseUri;?>assets/tema/default/jquery-1.7.1.min.js”>

    seharusnya:

    <script type="text/javascript" src="uri->baseUri;?>assets/tema/default/jquery-1.7.1.min.js”>

    $this->uri->baseUri; ini akan menampilkan path default sistem panada,
    sehingga apabila di lihat di source code menjadi : src=”http://localhost/panada/app/assets/tema/default/jquery-1.7.1.min.js”
    assets di sini sebenarnya adalah penempatan file gambar, css, js dan lainnya
    dan bukan keharusan namanya mesti assets

  2. saya sudah mengikuti bagian

    Lihat pada baris 19 sd 22, seperti berikut ini :

    tapi masih tetap acakan halamanya, tidak ada perubahan

    saya masih belum paham di bagian kode uri->baseUri;?> dan juga kode assets maksudnya apa?

    <script type="text/javascript" src="uri->baseUri;?>assets/tema/default/jquery-1.7.1.min.js”>

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