Workshop Panada Framework Bagian ke - I "Instalasi PANADA Framework dan Membuat tampilan Index dengan Gabungan Templates"

Pada kali ini saya akan menjelaskan bagaimana cara Instal PANADA Framework dan Cara Menampilkan Tampilan Template yang kita buat.

Untuk yang pertama kita siapkan tools na:

1. Download PANADA Framework : Download PANADA Framework
2. Download XAMPP (Untuk Server yang di jalankan di komputer kita) : Download XAMPP
3. Download Notepad++ (Untuk mengedit File PHP) : Download Notepad++
4. Download Template yang akan kita gunakan pada web kita : Freecsstemplates

Setelah semua selesai di Download.
Langkah selanjutnya :

Instalasi XAMPP

1. Run/Buka file xampp-win32-1.7.2.exe yang sudah di download
2. Maka muncul windows XAMPP.. Pilih install

3. Setelah selesai muncul windows, enter sampai muncul windows dibawah ini. Pilih choose “x” enter untuk keluar atau exit.

4. Untuk mengaktifkan xampp.. pilih start -> All program -> xampp for windows -> xampp control panel (untuk melihat semua service yanga jalan pada server XAMPP). Check list atau pilih svc apache,mysql,filezilla kemudian klik start(kalau udah running ke 3nya berarti sudah aktif).. kemudian exit.

5. Untuk memastikan program sudah jalan. Bukan  Mozilla Firefox atau Internet explorer, isi url dengan alamat http://localhost. Maka akan muncul tampilan seperti dibawah ini.. berarti program sudah berjala.

Instalasi PANADA Framework 


1. Extract folder PANADA Framework
Isi dari folder panada :

2. Copykan folder PANADA ke XAMPP/htdocs

Untuk nama folder bebas di ganti nama nya... Sesuai keinginan...

3. Untuk menjalankan PANADA, Kita ketik Localhost/nama folder panada
Hasil nya:

Untuk mengakses panada nama folder panada/app/baru masuk ke index. Jika ada tulisan

Panada has been installed successfully! "Berarti Sukses Proses Intalasi PANADA Framework"

*Note jika kita ingin mengakses tanpa ada tulisan app di URL na.. Bisa menggunakan cara ini...
Cara nya: Kita ambil folder APP dan PANADA di dalam framework tersebut.. Lalu Copy kan dalam htdocs.. Setelah itu kita ganti nama APP tersebut menjadi misal nama kita.. contoh : jay

Hasil nya:

Ketika kita mengetikan nama folder atau nama domain nya.. kita tidak melewati folder APP karena Folder APP kita sudah diganti dengan nama Domain atau Nama url yg kita ingin akses..
*Note: Folder APP itu untuk kita membuat website sesuai kita inginkan. Folder Panada itu core na atau otak dari system panada terserbut jadi jangan di hapus. Untuk Pada saat Upload Ke Server yang berbayar 2 Folder itu harus ada APP dan PANADA.

Menggabungkan Template pada PANADA Framework

1. Extract Folder Template yang kita download

2. Copy file Index.html ke dalam C:\xampp\htdocs\jay\views Setelah di copy rename .html menjadi .php

3. Buka file di Folder Controller,, lalu edit file Home.php

lalu edit line 11 awal nya home menjadi index. Kenapa di ganti jadi index. Karena tampilan yang pertama kali kita buat di view adalah index. Jadi kita mengganti home tersebut menjadi index.

Awal nya: $this->output('home', $data);
Setelah di ubah : $this->output('index', $data);

Untuk memastikan berhasil atau tidak nya Index.php di view bisa jalan atau tidak.. kita langsung ketikan di browser. http://localhost/nama_folder_km/

Jika berhasil akan tampil seperti berikut:

tapi di sini masih ada yang kurang yaitu: CSS dan IMAGE na tidak terpanggil atau muncul

Oke,, lanjut untuk menampilkan CSS dan Image

Setelah kita berhasil menampilkan index.php di view kita akan memanggil CSS dan image agar tampil di index.

Cara nya:

copy kan Folder Images dan CSS. Kedalam Folder C:\xampp\htdocs\nama_folder_km\assets

Setetlah di copy kan... Kita buka File Index.php di C:\xampp\htdocs\jay\views\index.php

Biasa nya kita membuat URL untuk memanggil CSS dan Image hanya seperti ini: <link href="default.css" rel="stylesheet" type="text/css" /> di dalam href langsung pada lokasi URL na saja. Sebenarnya sama saja di PANADA Framework juga, tapi karena kita menggunakan basis na framework mau ga mau kita harus mengikuti alur dari framework tersebut. Jadi untuk memanggil URL tersebut karena folder image dan css tadi berada di lokasi assets maka untuk memanggil folder asset tersebut kita tidak bisa menggunakan cara lama langsung memanggil path na. Jadi untuk memanggil CSS di panada framework kita menggunakan seperti ini:

<link href="<?php echo $this->uri->baseUri;?>/assets/default.css" rel="stylesheet" type="text/css" />

<?php echo $this->uri->baseUri;?> arti na memanggil core folder panada terlebih dahulu baru masuk ke dalam assets. Setelah Assets ke belakang bisa menggunakan PATH biasa. Cuman pada awal saja harus menggunakan <?php echo $this->uri->baseUri;?> untuk masuk ke folder selanjutnya. Dan untuk images juga sama tinggal di tambahkan saja <?php echo $this->uri->baseUri;?>/assets/images/....

Jika Berhasil Hasil nya seperti ini...

Oke.. Cukup sekian tutorial Workshop Framework Panada Bagian ke - I "Instalasi PANADA Framework dan Membuat tampilan Index dengan Gabungan Templates"