Category: Tutorial

Pendahuluan

Untuk tutorial kali ini, kita akan membuat sebuah website sederhana tanpa akses database sebagai demonstrasi kemampuan dasar dan alur dasar membuat Web/Applikasi berbasis Panada Framework. Untuk dapat mengikuti tutorial kali ini, minimal anda sudah menguasai konsep dasar OOP pada PHP dan Instalasi Panada Framework.

Langkah-langkah

1. Install Panada Framework

2. Buat folder kerja

Folder kerja yang dimaksud disini adalah folder aplikasi berbasis Panada akan dikembangkan. Perlu diingat, Panada bisa menampung banyak aplikasi/website dalam satu engine/system baik dengan nama domain yang sama maupun berbeda.

Untuk tutorial kali ini, silakan buat folder bernama: websiteku. Struktur folder didalamnya adalah sebagai berikut:

3. Buat File bootstrap/loader utama engine Panada. Silakan buat file index.php pada folder websiteku. Isi dari file index.php tersebut adalah:

<?php
// Sets the default timezone used by all date/time. Adjust to your location
date_default_timezone_set('Asia/Jakarta');

// You can adjust this following constants if necessary.

// The APP constant is where your application folder located.
define('APP', dirname(__FILE__) . '/');

// The INDEX_FILE constant is this default file name.
define('INDEX_FILE', basename(__FILE__));

// And the GEAR constant is where panada folder located.
define('GEAR', '../panada/');

require_once GEAR.'Gear.php';

// To sets which PHP errors are reported just like documented in this page
// http://php.net/manual/en/function.error-reporting.php
// You can pass a parameter into the Gear class.

// Turn off all errors reporting - production use.
// new Gear(0);

// By default all errors will displayed - development use.
new Gear;

4. Buat file konfigurasi utama.

Silakan tulis source code berikut dan simpan sebagai file main.php di folder /websiteku/config.

<?php

return array(
    
    'defaultController' => 'Home',
    
    // Just put null value if you has enable .htaccess file
    'indexFile' => INDEX_FILE . '/',
    
    'module' => array(
        'path' => APP,
        'domainMapping' => array(),
    ),
    
    'vendor' => array(
        'path' => GEAR.'vendors/'
    ),
    
    'alias' => array(
        /*
        'controller' => array(
            'class' => 'Alias',
            'method' => 'index'
        ),
        */
        'method' => 'alias'
    ),
);

NB. Yang patut dicatat pada konfigurasi ini adalah, Controller Default Panada telah kita set pada Controller Home.

5. Membuat Controller Home (controller default)

Silakan tuliskan source code berikut dan simpan sebagai Home.php pada folder /websiteku/Controllers/

<?php
namespace Controllers;
use Resources, Models;

class Home extends Resources\Controller
{    
    public function index()
    {    
        echo "Test controller default berhasil";
    }
}

6. Cek tampilan dari Controller Home (sebagai dasaran berpijak)

(di http://localhost/panada/websiteku/). Contoh tampilan hasil:

7. Latihan melempar data dari Controller ke View.

NB. Ingat, Controller adalah skrip yang digunakan untuk memproses request dari User (bayangkan saja dari URL yang dibuka user) kemudian View adalah skrip berisi tampilan yang akan dilihat user. Dalam konsep MVC maupun HMVC, file View SEBAIKNYA bersih dari proses olah data. Data, sebaiknya diolah di Controller.

Buka kembali file Home.php di folder /websiteku/Controllers. Ubah sehingga menjadi seperti berikut:

<?php
namespace Controllers;
use Resources, Models;

class Home extends Resources\Controller
{    
    public function index()
    {    
        $data['nama'] = 'Nama saya adalah Emka';
        
        $this->output('home', $data);
    }
}

yang patut kita perhatikan adalah perubahan logika pada fungsi index(). Kini, data yang direpresentasikan dalam bentuk array akan kita isi dan kita lempar ke file view untuk ditampilkan. Dalam contoh ini, data ‘nama’ akan kita isi dan akan kita lempar ke file view.

Snippet:

//contoh isian data
$data['nama'] = 'Nama saya adalah Emka';

//cara default untuk meload file view beserta data-nya
//template: $this->output('namafileview', dataviewyangdilempar);
        
$this->output('home', $data);

kemudian buat file view yang akan menjadi sasaran pelemparan data. Misalnya file: /websiteku/views/home.php (ingat, sesuai gaya tulis yang dianjurkan dan nama yang diset di Controller).

Isi dari file view tersebut adalah:

<?php
echo $nama;
?>

hasil tampilan di browser:

Jadi, untuk menampilkan data pada file view, anda bisa melakukan echo terhadap data yang dimaksud dengan acuan, jika pada Controller tertulis

$data['nama']

sebagai array dan key array, maka pada file view, anda tulis

echo $nama;

(menyesuaikan key array yang dimaksud). Jika nanti ada

$data['jumlah_siswa'];

maka pada file view anda akan tulis:

echo $jumlah_siswa;

.

8. Mulai Gunakan Template Web/Template HTML Sederhana

Untuk memulai menggunakan template web bagi website berbasis Panada, anda cukup menyalin source dari template web yang dimaksud ke file view (yang sesuai).

Sebagai contoh, saya modifikasi file /websiteku/views/home.php (file view default dari Controller Home dan fungsi index()) dengan memasukkan template html sebagai berikut:

<html>
<head>
	<title>Websiteku</title>
	<style>
		#container
		{
			margin: 0 auto;
			width: 900px;
			background: #fff;
		}

		#header
		{
			background: #ccc;
			padding: 20px;
		}

		#header h1 { margin: 0; }

		#navigation
		{
			float: left;
			width: 900px;
			background: #333;
		}

		#navigation ul
		{
			margin: 0;
			padding: 0;
		}

		#navigation ul li
		{
			list-style-type: none;
			display: inline;
		}

		#navigation li a
		{
			display: block;
			float: left;
			padding: 5px 10px;
			color: #fff;
			text-decoration: none;
			border-right: 1px solid #fff;
		}

		#navigation li a:hover { background: #383; }

		#content-container
		{
			float: left;
			width: 900px;
			background: #fff url(/wp-content/uploads/layout-two-fixed-background.gif) repeat-y 100% 0;
		}

		#content
		{
			clear: left;
			float: left;
			width: 560px;
			padding: 20px 0;
			margin: 0 0 0 30px;
			display: inline;
		}

		#content h2 { margin: 0; }

		#aside
		{
			float: right;
			width: 240px;
			padding: 20px 0;
			margin: 0 20px 0 0;
			display: inline;
		}

		#aside h3 { margin: 0; }

		#footer
		{
			clear: both;
			background: #ccc;
			text-align: right;
			padding: 20px;
			height: 1%;
		}
	</style>
</head>
<body>
	<div id="container">
	<div id="header">
		<h1>
			Site name
		</h1>
	</div>
	<div id="navigation">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Services</a></li>
			<li><a href="#">Contact us</a></li>
		</ul>
	</div>
	<div id="content-container">
		<div id="content">
			<h2>
				Page heading
			</h2>
			<p>
				Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
			</p>
			<p>
				Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
			</p>
			<p>
				Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
			</p>
		</div>
		<div id="aside">
			<h3>
				Aside heading
			</h3>
			<p>
				Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan.
			</p>
		</div>
		<div id="footer">
			Copyright © Site name, 20XX
		</div>
	</div>
</div>
</body>
</html>

sehingga tampil halaman sebagai berikut:

Demi efektivitas dan kerapian pengerjaan, sebaiknya file view dengan konsep template HTML ini kita pecah menjadi beberapa section besar, yaitu: header, content, sidebar, dan footer.

Dari file view home.php diatas, kita akan pecah menjadi 4 bagian yaitu header, content, sidebar dan footer.

Untuk header:

<html>
<head>
	<title>Websiteku</title>
	<style>
		#container
		{
			margin: 0 auto;
			width: 900px;
			background: #fff;
		}

		#header
		{
			background: #ccc;
			padding: 20px;
		}

		#header h1 { margin: 0; }

		#navigation
		{
			float: left;
			width: 900px;
			background: #333;
		}

		#navigation ul
		{
			margin: 0;
			padding: 0;
		}

		#navigation ul li
		{
			list-style-type: none;
			display: inline;
		}

		#navigation li a
		{
			display: block;
			float: left;
			padding: 5px 10px;
			color: #fff;
			text-decoration: none;
			border-right: 1px solid #fff;
		}

		#navigation li a:hover { background: #383; }

		#content-container
		{
			float: left;
			width: 900px;
			background: #fff url(/wp-content/uploads/layout-two-fixed-background.gif) repeat-y 100% 0;
		}

		#content
		{
			clear: left;
			float: left;
			width: 560px;
			padding: 20px 0;
			margin: 0 0 0 30px;
			display: inline;
		}

		#content h2 { margin: 0; }

		#aside
		{
			float: right;
			width: 240px;
			padding: 20px 0;
			margin: 0 20px 0 0;
			display: inline;
		}

		#aside h3 { margin: 0; }

		#footer
		{
			clear: both;
			background: #ccc;
			text-align: right;
			padding: 20px;
			height: 1%;
		}
	</style>
</head>
<body>
	<div id="container">
	<div id="header">
		<h1>
			Site name
		</h1>
	</div>
	<div id="navigation">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Services</a></li>
			<li><a href="#">Contact us</a></li>
		</ul>
	</div>

simpan sebagai /websiteku/views/header.php

untuk bagian Content:

	<div id="content-container">
		<div id="content">
			<h2>
				Page heading
			</h2>
			<p>
				Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
			</p>
			<p>
				Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
			</p>
			<p>
				Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
			</p>
		</div>

simpan sebagai file /websiteku/views/content.php

untuk bagian Sidebar (bilah kanan)

	<div id="content-container">
		<div id="content">
			<h2>
				Page heading
			</h2>
			<p>
				Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
			</p>
			<p>
				Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
			</p>
			<p>
				Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
			</p>
		</div>

simpan sebagai /websiteku/views/content.php

Untuk bagian footer:

		<div id="footer">
			Copyright © Site name, 20XX
		</div>
	</div>
</div>
</body>
</html>

simpan sebagai file /websiteku/views/footer.php.

Kemudian modifikasi method di Controller Home, sehingga kita akan meload 4 bagian file tersebut:

public function index()
    {    
        $data['nama'] = 'Nama saya adalah Emka';
        
        $this->output('header', $data);
        $this->output('content', $data);
        $this->output('sidebar', $data);
        $this->output('footer', $data);
    }

Silakan cek di Browser, seharusnya tampilan yang dihasilkan sama dengan tampilan sebelum dipecah per bagian.

9. Ubah string statis di file view menjadi lebih dinamis dengan mengambil/menuliskan data dari Controller.

Contoh data yang akan kita gunakan (kita set di Controller dan akan ditulis di view).

Dalam file Controller Home.php

public function index()
    {    
        $data['judul_web']	= 'Websiteku.com';
        $data['nama_web']	= 'Websiteku.com - Website berbasis Panada Framework';
        
        $this->output('header', $data);
        $this->output('content', $data);
        $this->output('sidebar', $data);
        $this->output('footer', $data);
    }

dan file view-nya (yaitu bagian header.php):

<html>
<head>
	<title><?php echo $judul_web;?></title>
	<style>
		#container
		{
			margin: 0 auto;
			width: 900px;
			background: #fff;
		}

		#header
		{
			background: #ccc;
			padding: 20px;
		}

		#header h1 { margin: 0; }

		#navigation
		{
			float: left;
			width: 900px;
			background: #333;
		}

		#navigation ul
		{
			margin: 0;
			padding: 0;
		}

		#navigation ul li
		{
			list-style-type: none;
			display: inline;
		}

		#navigation li a
		{
			display: block;
			float: left;
			padding: 5px 10px;
			color: #fff;
			text-decoration: none;
			border-right: 1px solid #fff;
		}

		#navigation li a:hover { background: #383; }

		#content-container
		{
			float: left;
			width: 900px;
			background: #fff url(/wp-content/uploads/layout-two-fixed-background.gif) repeat-y 100% 0;
		}

		#content
		{
			clear: left;
			float: left;
			width: 560px;
			padding: 20px 0;
			margin: 0 0 0 30px;
			display: inline;
		}

		#content h2 { margin: 0; }

		#aside
		{
			float: right;
			width: 240px;
			padding: 20px 0;
			margin: 0 20px 0 0;
			display: inline;
		}

		#aside h3 { margin: 0; }

		#footer
		{
			clear: both;
			background: #ccc;
			text-align: right;
			padding: 20px;
			height: 1%;
		}
	</style>
</head>
<body>
	<div id="container">
	<div id="header">
		<h1>
			<?php echo $nama_web;?>
		</h1>
	</div>
	<div id="navigation">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Services</a></li>
			<li><a href="#">Contact us</a></li>
		</ul>
	</div>

NB. Data dari controller yang kita gunakan untuk sementara ini adalah ‘judul_web’ dan ‘nama_web’.

Silakan cek di Browser. Seharusnya tampil:

10. Mengubah isi Link Navigasi Situs sesuai keinginan.

Perhatikan pada file header.php

<div id="navigation">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Services</a></li>
			<li><a href="#">Contact us</a></li>
		</ul>
	</div>

Dengan sedikit logika tambahan dan pengaturan awal data link navigasi bisa kita set di Controller dan dijabarkan/dituliskan pada file view yang dimaksud.

Dalam controller tambahkan:

$data['navigasi']	= array('about', 'produk', 'kontak');

dan pada file view (header.php) ubah skrip sebelumnya menjadi:

<div id="navigation">
		<ul>
			<li><a href="<?php echo $this->location('Home');?>">Home</a></li>
			<?php
			foreach($navigasi as $nav)
			{
				echo '<li><a href="'.$this->location('home/'.$nav).'">'.$nav.'</a></li>';
			}
			?>
		</ul>
	</div>

Disini kita memanfaatkan Global Method Panada yaitu $this->location();. Dengan menuliskan $this->location(‘home/kontak’); maka URL yang digenerate adalah: http://localhost/websiteku/index.php/home/kontak.

Cek di browser, seharusnya akan tampil seperti berikut:

11. Membuat halaman about

Untuk membuat halaman about, silakan buka controller Home dan tambahkan method/fungsi berikut:

public function about()
    {    
        $data['judul_web']	= 'Websiteku.com - About';
        $data['nama_web']	= 'Websiteku.com - Website berbasis Panada Framework';
        $data['navigasi']	= array('about', 'produk', 'kontak');
        
        $this->output('header', $data);
        $this->output('about', $data);
        $this->output('sidebar', $data);
        $this->output('footer', $data);
    }

perbedaan dari method/fungsi index() adalah dalam hal meload konten, dimana tidak meload file content.php tapi file about.php, karena file about.php akan kita jadikan file view untuk halaman about.

Buat file about.php di folder /websiteku/views/.

	<div id="content-container">
		<div id="content">
			<h2>
				About <?php echo $nama_web;?>
			</h2>
			<p>
				Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
			</p>
			<p>
				Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
			</p>
			<p>
				Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
			</p>
		</div>

dalam source diatas, heading/judul halaman sudah kita Set sebagai About {nama_web}, dimana nama_web diambil dari data yang dilempar oleh Controller Home.

Coba buka link About dan seharusnya tampil:

Ulangi hal yang sama untuk halaman produk dan halaman kontak. Anda tinggal tambahkan method/fungsi produk() dan kontak() dengan isi yang kurang lebih sama seperti source about() diatas, dengan perbedaan pada file view yang di load, misalnya menjadi $this->output(‘produk’,$data); atau $this->output(‘kontak’,$data);.

Download

Download source code tutorial ini: websiteku.zip