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


Akhirnya sampai juga pada pembahasan bagaimana cara upload image, dalam kasus ini tentang upload gambar untuk menu slide -lanjutkan-”

 

Agar pembahasannya tidak melebar kesana – kemari jadi kita batasi saja , pokok-pokok yang akan kita bahas pada bagian 9 ini :

  • Bagaimana membuat fiture depan ‘slide banner’ CMS ini .
  • Bagaimana mengupload gambar pada panadaframework ini.

Kalau berbicara bagaimana mengupload gambar pada panada framework ini sebenarnya sudah lengkap ada pada dokumentasinya. Coba aja di lihat lagi pada link ini :

http://panadaframework.com/documentation/id/classes/upload.html

Hanya saja kadang-kadang tidak semua memahaminya, sama dengan saya saat pertama kali mengenal panada ini. Karena praktek dan praktek, mencoba dan mencoba, dan melihat dan melihat ‘kode’ ternyata mudah juga. Apalagi saat sudah ketemu masalahnya, begitu mudahnya. Hanya bisa bilang…. ooooh begitu toh. 🙂

Kembali ke program CMS kita yaitu kita akan membuat fiture untuk merubah atau memodifikasi slide banner pada halaman depan. Seperti ini :

panada-tutorial

Gambar 9.1 : Tampilan Slide Banner

Kita bisa melihat sendiri dari tampilan tadi harus dipersiapkan tabel baru pada database, ada beberapa field , terlihat dari slide ada gambar yang berganti, teks baris pertama dan teks baris kedua, minimal ada 3 field itu. Kita juga perlu menambahkan id unik untuk fitur delete dan satu lagi saya tambahkan dengan field status, yang merupakan status apakah banner akan ditampilkan (0) atau di sembunyikan (1). Kita namakan saja nama tabelnya adalah : slidebanner. Saya tidak perlu lagi menjelaskan bagaimana membuat tabel kan? Silahkan sesuaikan tabelnya dengan data berikut ini :

panada-tutorial-bag-9.2

Gambar 9.2 : Tabel : Slidebanner

Setelah persiapan membuat tabel selesai selanjutnya kita akan membuat beberapa fitur yang ada pada slidebanner ini, yaitu : tambah slide, edit slide, hapus slide, sembunyikan/tampilkan slide (secara default ditampilkan). Sepertinya fitur yang akan kita buat hampir sama dengan fitur halaman yang sudah di buat sebelumnya.Perbedaannya hanya pada fitur tampilkan/sembunyikan slide saja yang baru. Yuk kita ikuti langkah selanjutnya.

Ini yang akan kita kerjakan selanjutya :

1. Membuat File Model Baru : Slides.php

Method :

  • GetSlides(); //untuk mengambil semua data slides pada tabel
  • GetSlidesbyId($id) //untuk mengambil satu data slides yang sesuai dengan $id
  • Insert(); //untuk memasukkan/insert data ke tabel slides database.
  • Update() //untuk mengedit/update data pada tabel slides database.
  • Delete() //untuk menghapus/delete data pada tabel slides database.

2. Membuat File Controller Baru : Boardslides.php

Method :

  • >index(); //untuk menampilkan daftar slides
  • input(); //untuk membuat/input file slides baru (pada tabel)
  • edit(); //untuk edit/ubah data slides yang sudah ada (pada tabel)
  • delete(); //untuk menghapus data slides (pada tabel)
  • status(); //untuk menampilkan/menyembunyikan slides pada homepage

3. Membuat File-file views Baru : Folder dash/slides

Agar data hasil pengambilan dari model pada controller bisa di tampilkan kita harus membuat file views/tampilannya. Agar terlihat teratur dan gampang menelusurinya, maka kita buat folder baru pada folders app/views/dash . Kita berinama foldernya: slides. , sehingga secara lengkap url-nya menjadi seperti ini : app/views/dash/slides .

Inilah file views yang akan kita buat :

File show.php, input.php, edit.php dan delete.php.

Files :

  • show.php // untuk menampilkan data slides data dari controller Boardslides->index();
  • input.php // form membuat/insert slides dari controller Boardslides->input();
  • edit.php // form mengedit slides dari controller Boardslides->edit();
  • delete.php // form menampilkan slides y dihapus dari controller Boardslides->delete();

4. Mengubah/menyesuaikan file controller home dan file views home.php

Agar dalam tutorial ini bisa lebih mudah di mengerti dan di pahami, saya membagi dalam beberapa langkah. Langkah seperti inilah yang biasa saya lakukan saat membuat program.

  1. LANGKAH Ke-1.
    Membuat Model Baru : Slides.php
  2. LANGKAH Ke-2.
    Membuat file Controller Baru : Boardslides.php
  3. LANGKAH Ke-3.
    Membuat/mengisi method index()
    Membuat file views show.php
  4. LANGKAH Ke-4.
    Membuat/mengisi method input()
    Membuat file views input.php
  5. LANGKAH Ke-5.
    Membuat/mengisi method edit()
    Membuat file views edit.php
  6. LANGKAH Ke-6.
    Membuat/mengisi method delete()
    Membuat file views delete.php
  7. LANGKAH Ke-7.
    Membuat/mengisi method status()
  8. LANGKAH Ke-8.
    – Mengubah Controller Home
    – Mengubah Views home.php

LANGKAH 1 : Membuat Models Baru : Slides.php

Karena models slides ini hampir sama dengan models Pages, kita sedikit modifikasi model Pages.php sebelumnya, sehingga menjadi seperti di bawah ini. Kita namakan models : Slides.php simpan di folder app/Models.

<?php
namespace Models;
use Resources;

Class Slides {
	private $table = “slidebanner”;

      /***********************************
       * constructor
	 ***********************************/
	public function __construct(){
        $this->db = new Resources\Database;
    	}

      /***************************************************
       * method : GetSlides();
 	 * fungsi : mengambil semua data slides pada table
	 ***************************************************/
    	public function GetSlides(){
	  $sql= "SELECT * FROM ".$this->table." ORDER BY idslide ASC";
     	  Return $this->db->results($sql);

    	}

      /***************************************************
       * method : GetSlidesbyId($id);
 	 * fungsi : mengambil data slides tertentu pada table
	 ***************************************************/
    	public function GetSlidesbyId($id){
        $sql="SELECT * FROM ".$this->table." WHERE idslide='".$id."'";
        Return $this->db->row($sql);
    	}

      /***************************************************
       * method : update($avalue, $awhere);
 	 * fungsi : update data slides tertentu pada table
	 *          $avalue = array(); $awhere = array();
	 ***************************************************/
    	public function update($avalue, $awhere) {
        $this->db->update($this->table, $avalue, $awhere);
    	}

      /***************************************************
       * method : insert($avalue);
 	 * fungsi : insert data slides baru pada table
	 *          $avalue = array();
	 ***************************************************/
    	public function insert($avalue) {
        $this->db->insert($this->table, $avalue);
    	}

      /***************************************************
       * method : delete($awhere);
 	 * fungsi : hapus data slides tertentu baru pada table
	 *          $awhere = array();
	 ***************************************************/
       public function delete($awhere) {
        $this->db->delete($this->table, $awhere);
       }

      /***************************************************
       * method : getTotalSlides()
 	 * fungsi : mengambil nilai total pada table
	 ***************************************************/

    	public function getTotalSlides(){

		$sql="SELECT COUNT(idslide) FROM ".$this->table ;
		return $this->db->getVar($sql);
    	}
}

LANGKAH 2 : Membuat file Controller Baru : Boardslides.php

Untuk langkah awal kita buat dulu kerangka controllernya, beri nama file : Boardslides.php

Silahkan lihat kode skrip pada controller ini, saya sengaja menambahkan baris komentar ( // ) hampir pada tiap baris kode agar dapat di mengerti dan di pahami. Terserah anda mau ditulis atau tidak 🙂

Dalam Boardslides.php ini yang kita isi hanyalah method __construct , untuk method lainnya akan kita isi pada langkah berikutnya.

<?php
/****************************************************
*  Controllers  : Boardslides
*  NamaFile    : Boardslides.php
*  Lokasi 	: app/Contollers/
*  Fungsi	: Mengatur slide banner
*****************************************************/
namespace Controllers;
use Resources, Models;

class Boardslides extends Resources\Controller
{

	/*******************************************
* method : __construct();
* fungsi : meload resources/models/libraries
   	******************************************/
	public function __construct(){
		parent::__construct();
		//inisiasi dari resources dan models yang di gunakan
		$this->session  = new Resources\Session;
		$this->post     = new Resources\Request;
            $this->upload   = new Resources\Upload;
		$this->users    = new Models\Users;
		$this->slides   = new Models\Slides; //models baru (slides)
    	}

   /*******************************************
* method : index();
* fungsi : menampilkan semua data slides
   ******************************************/
   public function index(){
        //di isi di langkah 3
    }

   /*******************************************
* method : input();
* fungsi : menambahkan data slides baru
*
   ******************************************/
   public function input(){
	//di isi di langkah 4
    }

   /*******************************************
* method : edit();
* var	   : $id;
* fungsi : edit id data slides tertentu
*
   ******************************************/
   public function edit($id){
		//di isi di langkah 5
    }

   /*******************************************
* method : delete();
* var	   : $id;
* fungsi : hapus id data slides tertentu
*
   ******************************************/
   public function delete($id){
	    //di isi di langkah 6
    }

   /*******************************************
* method : status();
* var	   : $id;
* fungsi : membalikan status id data slides tertentu
*		0 = tampil di homepage, 1= disembunyikan
   ******************************************/
   public function status($id){
	    //di isi di langkah 7
    }

}


LANGKAH 3 :

Membuat/mengisi method index() & membuat file views show.php

  • Membuat/mengisi method index() , silahkan isikan method index() diatas, sehingga menjadi seperti ini.

/*******************************************
* method : index();
* fungsi : menampilkan semua data slides
******************************************/
public function index(){

        //cek dulu ya sudah login belum?
        $ceklogin=$this->session->getValue('logadmin');
        if($ceklogin){
           //kalau sudah login sih masuk aja kemari
           //ambil semua slides simpan pada data array $data
	     //GetSlides() adalah method yang ada pada models Slides.php
           $data['slides']=$this->slides->GetSLides();

	     //tampilkan views pada 'views/dash/slides/show.php'
	     //dengan membawa array $data.
           $this->output('dash/slides/show',$data);

        }else{
           //kalau belum login, maaf ya login dulu di from.
           $this->output('dash/index');
        }

    }

  • Membuat file views show.php

File : show.php (app/views/dash/slides/show.php) . File ini yang akan di panggil pada controller Boardslides method index untuk menampilkan data slides. File ini hampir sama dengan file dashboard.php yang menampilkan semua halaman, jadi kita akan modifikasi file dashboard.php menjadi file show.php.

Kalau kita perhatikan pada file dashboard.php (app/views/dash/dashboard.php), edit.php (app/views/dash/pages/edit.php), delete.php (app/views/dash/pages/delete.php) dan input.php (app/views/dash/pages/input.php) pada bagian atas file dan bawah file terdapat kode skrip yang sama, dan ini membuat kita perlu ekstra waktu dan tenaga kalau mau merubahnya misalnya pada saat kita merubah bagian menu atas di file dashboard.php, kita juga harus merubah bagian menu atas yang sama pada ke tiga file lainnya (input.php,edit.php dan delete.php). Kalau tidak di rubah juga bisa ada menu yang tidak jalan.

Sekarang mari kita sederhanakan, salin dan lepas (copy dan paste), salin file dashboard.php (app/views/dash/dashboard.php) lepas ke folder slides yang tadi kita buat (app/views/dash/slides) dan ganti namanya menjadi: show.php .

Salin lagi 2x file dashboard.php ke folder app/views/dash/ dan ganti namannya masing-maing menjadi header.php dan footer.php (keduanya ada pada folder app/views/dash/ ).

Buka file header.php dan cari bagian <! – TITLE END – > , bagian dari TITLE END ke atas akan kita gunakan untuk header.php , bagian <!– #PORTLETS START – > kebawah sampai akhir file kita hapus saja.

Buka file footer.php dan cari bagian </div> di bawah <!– END #PORTLETS – > , bagian di bawah </div> sampai akhir file inilah akan kita gunakan sebagai footer.php .

Sekarang buka file show.php (app/views/dash/slides/show.php) , kita akan membuang baris-baris skrip yang sama dengan header.php dan footer.php. Jadi buang semua baris skrip pada file show.php kecuali pada bagian <!– #PORTLETS START – > sampai dengan </div> yang ada di bawah <!– END #PORTLETS – > , apabila sesuai maka hanya bagian <div id=”portlets”>…</div> saja yang kita ambil. Supaya bagian header.php dan footer.php masuk ke file show.php , kita harus memanggilnya dengan perintah $this->output(); sehingga terlihat seperti ini :

<?php $this->output('dash/header.php' ); ?>

	<!-- #PORTLETS START -->
    	<div id="portlets">
	…...................
	…..................
	…..................
	<!--  END #PORTLETS -->
   	</div>

<?php $this->output('dash/footer.php' ); ?>

Setelah itu barulah kita edit bagian utama show.php ini, karena file ini kita copy-paste dari pages.php jadi ada beberapa bagian yang harus di sesuaikan dengan table slidebanner yang sudah kita buat.

//inilah bagian dari file show.php setelah di sesuaikan, bagian yang di tebalkan :

<?php $this->output('dash/header'); ?>

    <!-- #PORTLETS START -->
    <div id="portlets">

    <div class="clear"></div>
    <!--THIS IS A WIDE PORTLET-->
    <div class="portlet">
        <div class="portlet-header fixed">
			<img src="<?php echo $this->uri->baseUri; ?>assets/dash/images/icons/user.gif" width="16" height="16" alt="Slides" />Slides
			|| <a href="<?php echo $this->uri->baseUri; ?>index.php/boardslides/input">Input Slides Baru</a>
			</div>
		<div class="portlet-content nopadding">
        <form action="" method="post">
          <table width="100%" cellpadding="0" cellspacing="0" id="box-table-a" summary="Employee Pay Sheet">
            <thead>
              <tr>
                <th width="3%" scope="col"><input type="checkbox" name="allbox" id="allbox" onclick="checkAll()" /></th>
                <th width="10%" scope="col">Id</th>
                <th width="15%" scope="col">Baris 1</th>
                <th width="15%" scope="col">Baris 2</th>
                <th width="15%" scope="col">Gambar</th>
                <th width="10%" scope="col">Aksi</th>
              </tr>
            </thead>
            <tbody>
                <?php
                if($slides){
                   foreach ($slides as $slides) {
                ?>
                <tr>
                <td width="3%"><label>
                    <input type="checkbox" name="checkbox[]" id="checkbox" value="<?php $slides->idslide; ?>"/>
                </label></td>
                <td><?php echo $slides->idslide; ?></td>
                <td><?php echo $slides->judulbaris1; ?></td>
                <td><?php echo $slides->judulbaris2; ?></td>
                <td><?php echo $slides->gambar; ?></td>
                <td> <?php if($slides->status==0){ ?> <a href="<?php echo $this->uri->baseUri; ?>index.php/boardslides/status/<?php echo $slides->idslide; ?>" class="approve_icon" title="Show"></a>
					 <?php }else{ ?> <a href="<?php echo $this->uri->baseUri; ?>index.php/boardslides/status/<?php echo $slides->idslide; ?>" class="reject_icon" title="Hide"></a> <?php } ?>
                <a href="<?php echo $this->uri->baseUri; ?>index.php/boardslides/edit/<?php echo $slides->idslide; ?>" class="edit_icon" title="Edit"></a>
                <a href="<?php echo $this->uri->baseUri; ?>index.php/boardslides/delete/<?php echo $slides->idslide; ?>" class="delete_icon" title="Delete"></a>
                </td>
              </tr>
              <?php
                 }
              }else{ ?>
				<tr><td colspan="7">Tidak ada data.</td>.</tr>
              <?php } ?>

            </tbody>
          </table>
        </form>
		</div>
      </div>
<!--  END #PORTLETS -->
   </div>

<?php $this->output('dash/footer'); ?>

Sehingga sepert inilah hasilnya saat kita jalankan di browser:

http://localhost/panada/app/index.php/boardslides

panada-tutorial-bag-9.3

Gambar 9.3 . Tampilan awal boarslides (show.php)

Terlihat belum ada datanya yang bisa ditampilkan, tidak apa-apa karena kita akan mengisinya pada bagian input slides baru yang akan berhubungan dengan bagian depan cms ini.

Saya juga sedikit memodifikasi bagian header.php , untuk membuat link menu ke boardpages (halaman) dan boarslides (slides) pada bagian ini :

<!-- TABS START -->
    <div id="tabs">
         <div class="container">
            <ul>
 		<li><a href="<?php echo $this->uri->baseUri; ?>index.php/boardpages" class="current"><span>Halaman</span></a></li>
	<li><a href="<?php echo $this->uri->baseUri;?>index.php/boardslides"> <span>Slides</span></a></li>
           </ul>
        </div>
    </div>
<!-- TABS END -->

Bagaimana sudah tidak ada masalah sampai di sini, karena kita akan lanjutkan ke bagian lainnya. Tetapi sebelum itu ada yang harus kita lakukan yaitu menyederhanakan skrip-skrip sebelumnya pada bagian pages (app/views/dash/pages/) file dashboard.php, delete.php, input.php, dan edit.php. Yaitu mengganti bagian header dengan $this->output(‘dash/header’); dan bagian footer dengan $this->output(‘dash/footer’); seperti yang kita lakukan pada file show.php sebelumnya (app/views/dash/slides/show.php) .

Cobalah di klik tab halaman atau slides bergantian, apakah tampilannya sudah sesuai? Kalau sudah ada tantangan yang harus anda perbaiki, pada saat klik tab Halaman , warna latar terlihat putih (terpilih) dan latar tab Slides berwarna lain. Saat klik tab Slides, ternyata tidak ada perubahan, seharusnya klik tab slides berwarna latar putih (terpilih), begitu juga sebaliknya tab lainnya. Lihat lagi bagian menu pada tutorial sebelumnya. Kalau sudah benar akan tampil seperti di bawah ini.

panada-tutorial-bag-9.4

Gambar 9.4. Tampilan menu tab

Saya hanya menambahkan variabel $data[‘curklas’]=’slides’; pada controller di methodnya dan menyesuaikannya dengan views header.php seperti ini <?php if(isset($curklas)) if($curklas==’slides’) echo ‘class=”current”‘; ?> .

LANGKAH Ke-4. – Membuat/mengisi method input() &  Membuat file views input.php

Membuat/mengisi Method Input() pada Controllers Boardslides.php

Setelah file input.php (app/views/dash/slides/input.php) selesai kita modifikasi saatnya kita tambahkan kode ke controller slides – kerangka method input()– yang sebelumnya sudah kita buat, seperti di bawah ini.

Catatan :

  • field judulbaris1 (judul1) dan judulbaris2 (judul2) boleh kosong.
  • Field gambar (img) tidak boleh kosong
  • field status defaultnya 0 , tampilkan.
   /*******************************************
* method : input();   // controller Slides
* fungsi : menambahkan data slides baru
*
   ******************************************/
   public function input(){
	//cek dulu ya sudah login belum?
	$ceklogin=$this->session->getValue('logadmin');

      //$data='';
	$data['curklas']='slides';
	if($ceklogin){
	   //kalau sudah login sih masuk aja

		if($_POST){
		//ambil data field pada form
		$judul1=$this->post->post('judul1', FILTER_SANITIZE_MAGIC_QUOTES );
		$judul2=$this->post->post('judul2', FILTER_SANITIZE_MAGIC_QUOTES );
		$stt=$this->post->post('status', FILTER_SANITIZE_MAGIC_QUOTES );

		//cek datanya apakah di isi semua atau tidak
		//jika salah satu field terisi, tampilkan isian field yang sdh betul

				//jika kosong
				$isian='';
 				if(!empty($judul1)){
			    		$isian[1]=$judul1;
				}
				if(!empty($judul2)){
			    		$isian[2]=$judul2;
				}
				if(empty($stt)){
			    		$stt=0;
				}

				if(!isset($_FILES['img'])){
				    $error[3] = "File tidak boleh kosong!";
				}

			//kl ada kesalahan kembali ke form
			if(isset($error)){
				  $data['error']=$error;
				  $data['isian']=$isian;
				  $this->output('dash/slides/input',$data);

			//tidak ada kesalahan masukkan ke database
			}else{
			/****************************************************************
			* lokasi folder 'folderLocation' : localhost/panada/app/uploads/
			* tidak perlu ganti namafile
			* tidak perlu buat folder otomatis
			* extension file yang diperbolehkan : 'gif|png|jpg|jpeg'
			* biar pas ukurannya di tentukan 1000 x 500
			*
			*

			$this->upload->setOption(
						array(
							'folderLocation'=>'uploads',
						'autoRename' => false,
						'autoCreateFolder' => false,
						'permittedFileType' => 'gif|png|jpg|jpeg',
						'maximumSize' => 1000000,
						'editImage' => array(
								'editType' => PIMG_RESIZE, 									'resizeWidth'=>1000,
								'resizeHeight' => 500,											)
						)
						);

		$this->upload->setErrorMessage(
					array(
					3 	=> 'File yang anda upload terlalu besar.',
					6 	=> 'Tidak ada file yang di upload.',
					10 	=> 'Folder tidak tersedia.',
					11 	=> 'Tidak dapat membuat folder baru.',
					15	=> 'Folder Tidak dapat ditulisi.',
						)
					);

		$data['messages'] = '';

		if( isset($_FILES['img']) ) {

			$file = $this->upload->now($_FILES['img']);
			//jika upload berhasil
			if($file) {
				//array data yang akan di masukkan ke database
				$data['messages'] = $this->upload->getFileInfo();
				$dinsert=array( 'judulbaris1' => $judul1,
			  			    'judulbaris2' => $judul2,
						    'gambar' => $data['messages']['name'],
						    'status' => $stt);

				//gunakan metod insert pada models pages u insert data
				$this->slides->insert($dinsert);
				$this->redirect('boardslides');

			}else {
				$data['messages'] = $this->upload->getError('message');
				$error[3]='File tidak boleh kosong';
				$data['error']=$error;
				$this->output('dash/slides/input',$data);
				}
		}

	}

			   }else{

			   $this->output('dash/slides/input',$data);

			   }

			}else{

			   //kalau belum login, maaf ya login dulu di from.
			   $this->output('dash/index');
			}

    }

//eof

Membuat file views input.php

File views input.php ini di panggil pada controller Boarslides.php pada method input, sehingga pada saat klik Input Slides Baru , akan tampil halaman seperti ini :

http://localhost/panada/app/index.php/boardslides/input
panada-tutorial-bag-9.5

Gambar 9.5 . Tampilan input slides (input.php)

Pada dasarnya form input slides ini sama aja dengan form input halaman sebelumnya, yang baru di form ini adalah adanya form input untuk upload file.Karena menyangkut upload file jadi silahkan baca terlebih dahulu dokumentasi panada framework bagian upload.

Online : http://panadaframework.com/documentation/id/classes/upload.html

Offline : http://localhost/panada/documentation/id/classes/upload.html

Karena hampir sama dengan form input halaman, jadi saya hanya memodifikasi file input.php yang ada di views/dash/pages. Saya simpan hasil modifikasinya ke folder views/dash/slides. Di bawah ini source code input.php hasil modifikasi, silahkan di pelajari.

<?php $this->output('dash/header'); ?>

    <!-- #PORTLETS START -->
    <div id="portlets">
    <!-- FIRST SORTABLE COLUMN START -->
      <div class="column">

      <!--THIS IS A PORTLET-->
        <div class="portlet">
		<div class="portlet-header"><a href="<?php echo $this->uri->baseUri; ?>index.php/boardslides">Boardslides</a> -> <b>Input</b> </div>

		<div class="portlet-content">
		  <p><?php if(isset($error)) echo "<b>ADA KESALAHAN!</b><br>"; ?>
<?php if(isset($messages)) print_r($messages); ?></p>

		  <form id="form1" name="form1" method="post" action="" enctype="multipart/form-data" >
		    <label>Judul Baris Pertama</label>
		     <input type="text" name="judul1" id="judul1" class="smallInput" style="width: 400px" value="<?php if(isset($isian[1])) echo $isian[1]; ?>" />
		     <?php if(isset($error[1])) echo "<p style='color:red'>".$error[1]."</p>"; ?>

		    <label>Judul Baris Kedua</label>
		     <input type="text" name="judul2" id="judul2" class="smallInput" style="width: 400px" value="<?php if(isset($isian[2])) echo $isian[2]; ?>" />
		     <?php if(isset($error[2])) echo "<p style='color:red'>".$error[2]."</p>"; ?>

            <label>Slides</label>
		     <input type="file" name="img" id="img" class="smallInput" style="width: 400px" value="<?php if(isset($isian[3])) echo $isian[3]; ?>" />
		    <?php if(isset($error[3])) echo "<p style='color:red'>".$error[3]."</p>"; ?>
            <label>Status</label>
             <select name="status">
                <option value="0" checked >Tampil</option>
                <option value="1">Sembunyikan</option>
             </select>

		    <?php if(isset($error[4])) echo "<p style='color:red'>".$error[4]."</p>"; ?>
		    <div><span><input type="submit" name="submit"  class="largeInput" value="Simpan"></span></div>

		  </form>
		  <p>&nbsp;</p>
		</div>
        </div>
      </div>
      <!-- FIRST SORTABLE COLUMN END -->

   </div>

<?php $this->output('dash/footer'); ?>

Yang perlu di perhatikan pada form ini adalah adanya penambahan enctype=”multipart/form-data” pada baris form. Berbeda dengan yang form input halaman. Karena kita juga akan mengupload maka harus di tambahkan itu pada baris form:

<form id="form1" name="form1" method="post" action="" enctype="multipart/form-data" >

Perhatikan juga pada baris :

<input type="file" name="img" id="img" class="smallInput" style="width: 400px" value="<?php if(isset($isian[3])) echo $isian[3]; ?>" />

Input type=”file” name=”img” , data name ini yang nanti di panggil di method input $_FILES[‘img’] , kalau anda menggantinya dengan nama lain misal : name=”my_file” maka di panggilnya menjadi $_FILES[‘my_file’] . Saya terangkan di sini karena ada juga yang belum mengetahuinya.

Silahkan di test, dengan memasukkan data slides baru.

http://localhost/panada/app/index.php/boardslides/input

LANGKAH Ke-5. – Membuat/mengisi method edit() & Membuat file views edit.php

Membuat/mengisi method edit() pada Controller Boardslides.php

Setelah selesai membuat fiture input data baru, sekarang saat membuat fitur edit data slides. Seperti sebelumnya kita harus membuat method edit pada controller boardslides, yang sebenarnya sudah kita buat methodnya di atas hanya saja masih kosong. Saya sudah buatkkan method edit seperti di bawah ini, dan agar anda dapat memahaminya saya selipkan komentar (//) pada setiap barisnya.

panada-tutorial-bag-9.6

Gambar 9.5. Tampilan edit slides (edit.php)

/*******************************************
* method : edit();
* var : $id;
* fungsi : edit id data slides tertentu
*
******************************************/

public function edit($id=''){
//pastikan nilai $id adalah integer
$id=(int) addslashes($id);
//cek dulu ya sudah login belum?
$ceklogin=$this-&gt;session-&gt;getValue('logadmin');
if($ceklogin){
//kalau sudah login sih masuk aja
//GetSlidesbyId($id) ambil data slides sesuai permintaan ($id)
$data['slides']=''; // default kosong
$hsl=$this-&gt;slides-&gt;GetSlidesbyId($id);
$data['curklas']='slides';

if($hsl){
//jika datanya ada masukkan ke var $data['slides'];
$data['slides']=$this-&gt;slides-&gt;GetSlidesbyId($id);
}

//jika tombol update di tekan lakukan perintah di bawah ini:
//------------------------awal
if($_POST){
$id=$this-&gt;post-&gt;post('id', FILTER_SANITIZE_NUMBER_INT );
$judul1=$this-&gt;post-&gt;post('judul1', FILTER_SANITIZE_MAGIC_QUOTES );
$judul2=$this-&gt;post-&gt;post('judul2', FILTER_SANITIZE_MAGIC_QUOTES );
$file =trim($_FILES['img']['name']);
/*-----------------------------
* setting upload
-----------------------------*/
$this-&gt;upload-&gt;setOption(
array(
//lokasi folder localhost/panada/app/uploads/
'folderLocation' =&gt; 'uploads',
//tidak perlu ganti namafile
'autoRename' =&gt; false, //tidak perlu buat folder otomatis
'autoCreateFolder' =&gt; false,
//extension file yang diperbolehkan
'permittedFileType' =&gt; 'gif|png|jpg|jpeg',
//maximum ukuran file yang diperbolehkan 1MB
'maximumSize' =&gt; 1000000,
//edit ukuran gambar mmenjadi 1000 x 500 px
'editImage' =&gt; array(
'editType' =&gt; PIMG_RESIZE,
'resizeWidth' =&gt; 1000,
'resizeHeight' =&gt; 500,
)
)
);
//saya rubah beberapa error ke bahasa indonesia.
$this-&gt;upload-&gt;setErrorMessage(
array(
3 =&gt; 'File yang anda upload terlalu besar.',
6 =&gt; 'Tidak ada file yang di upload.',
10 =&gt; 'Folder tidak tersedia.',
11 =&gt; 'Tidak dapat membuat folder baru.',
15 =&gt; 'Folder tidak dapat ditulisi.',
)
);

$data['messages'] = ''; //nilai default var
//jika $_FILES['img'] pada form tidak kosong
if(!empty($file)) {
//langsung saja upload filenya
$file = $this-&gt;upload-&gt;now($_FILES['img']);

if($file) {
//berhasil upload lakukan ini
$data['messages'] = $this-&gt;upload-&gt;getFileInfo();
//array data yang akan di masukkan ke database
$dupdate=array( 'judulbaris1' =&gt; $judul1,
'judulbaris2' =&gt; $judul2,
'gambar' =&gt; $data['messages']['name'],
);

$where =array('idslide' =&gt; $id);
//lakukan update ke tabel database slidebanner
$this-&gt;slides-&gt;update($dupdate,$where);

//langsung saja tampilkan daftar sslides
$this-&gt;redirect('boardslides');

}else{
//ada masalah di upload file, masukkan pesannya
$data['messages'] = $this-&gt;upload-&gt;getError('message');
$data['error']="";

}
}else{
//jika $_FILES['img'] tidak di set, jgn update gambarnya
$dupdate=array( 'judulbaris1' =&gt; $judul1,
'judulbaris2' =&gt; $judul2,);

$where =array('idslide' =&gt; $id);
//update
$this-&gt;slides-&gt;update($dupdate,$where);
//kembali ke daftar slides
$this-&gt;redirect('boardslides');

}

}
//------------------------akhir
$this-&gt;output('dash/slides/edit',$data);

}else{
//kalau belum login, maaf ya login dulu di form login.
$this-&gt;output('dash/index');
}
}

<p align="LEFT"><span style="color: #000080;"><span style="font-family: Arial, sans-serif;"><span style="font-size: medium;"><b>Membuat file views edit.php</b></span></span></span></p>
<p align="JUSTIFY"><span style="color: #000000;"><span style="font-family: 'Times New Roman', serif;"><span style="font-size: medium;">Method edit sudah di buat saatnya membuat file tampilan (views) <b>edit.php</b> . Saya hanya merubah dari file edit.php pages. Dan inilah hasilnya, simpan nama filenya pada folder <b>app/views/dash/slides/</b> dengan nama file: <b>edit.php</b> </span></span></span></p>

<?php $this->output('dash/header'); ?>
    <!-- #PORTLETS START -->
    <div id="portlets">
    <!-- FIRST SORTABLE COLUMN START -->
      <div class="column">

      <!--THIS IS A PORTLET-->
        <div class="portlet">
		<div class="portlet-header"><a href="<?php echo $this->uri->baseUri; ?>index.php/boardslides">Boardslides</a> -> <b>Edit</b> </div>

		<div class="portlet-content">
                 <p><?php if(isset($error)) echo "<b>ADA KESALAHAN!</b><br>"; ?><?php if(isset($messages)) print_r($messages); ?></p>
		  <p>Edit slides : <?php echo $slides->idslide; ?></p>
		<form id="form1" name="form1" method="post" action="" enctype="multipart/form-data">
		<input type="hidden" name="id" id="id" class="smallInput" value="<?php echo $slides->idslide; ?>"/>
		<label>Judul Baris 1</label>
		<input type="text" name="judul1" id="judul1" class="smallInput" style="width: 400px" value="<?php echo $slides->judulbaris1; ?>" />
		 <label>Judul Baris 2</label>
		 <input type="text" name="judul2" id="judul2" class="smallInput" style="width: 400px" value="<?php echo $slides->judulbaris2; ?>" />
            <label>Slides</label>
            <img src="<?php echo $this->uri->baseUri;?>uploads/<?php echo $slides->gambar; ?>" width="100%">
            <br>Lokasi : <?php echo $this->uri->baseUri;?>uploads/<?php echo $slides->gambar; ?>
            <label>Gambar :</label>
            <input type="file" name="img" id="img" class="smallInput" style="width: 400px" value="" />
            <label>Status : <?php echo ($slides->status==0) ? "Show": "Hide"; ?></label>

		 <div><span><input type="submit" name="submit"  class="largeInput" value="Update"></span></div>

		  </form>
		  <p>&nbsp;</p>
		</div>
        </div>
      </div>
      <!-- FIRST SORTABLE COLUMN END -->

   </div>
<?php $this->output('dash/footer'); ?>

LANGKAH Ke-6. - Membuat/mengisi method delete() &  Membuat file views delete.php

Membuat/mengisi method delete()

Sampai juga kita ke langkah ke-6, fitur hapus (delete) , pada saat kita klik tombol/icon hapus, sistem akan menampilkan terlebih dahulu data yang akan di hapus, apa data yang di hapus benar akan dihapus, jika benar maka akan dilakukan penghapusan. Dan kembali ke daftar sliddes. Inilah method delete-nya.

/***************************************
     * fungsi method delete()
     * untuk menghapus data slides
     * Controller : /app/Controllers/Boardslides.php
     * Akses	:  /app/index.php/boardslides/delete/$id
     *******************************************************/
    public function delete($id=''){
	$id=(int) $id;
        //cek dulu ya sudah login belum?
        $ceklogin=$this->session->getValue('logadmin');

        if($ceklogin){
           //kalau sudah login sih masuk aja
           //ambil dan periksa dahulu data berdasarkan id-nya
           $hsl=$this->slides->GetSlidesbyId($id);
	     $data['curklas']='slides';
           //jika hasilnya ada
           if($hsl){
            //ambil datanya masukkan ke array
              $data['slides']=$this->slides->GetSlidesbyId($id);
	   }else{
		//kalau datanya tidak ada, kembalikan aja ke daftar halaman
              $this->redirect('boardslides');
	   }
		   if($_POST){
			//pastikan nilainya id integer
			$id=$this->post->post('id', FILTER_SANITIZE_NUMBER_INT );				$where =array('idslide' => $id);
			//eksekusi hapus data
			$this->slides->delete($where);
			//kembalikan lagi ke daftar slides
			$this->redirect('boardslides');

		   }
            //tampilkan data yang akan di hapusnya
           $this->output('dash/slides/delete',$data);

        }else{
           //kalau belum login, maaf ya login dulu di form.
           $this->output('dash/index');
        }
}

Membuat file views delete.php

Setelah membuat method delete berarti sekarang kita harus membuat juga file views delete.php. File views delete.php di buat untuk menampilkan terlebih dahulu data yang akan di hapus sebelum proses hapus permanen di lakukan. Jika data yang di pilih sudah benar , baru di lakukan proses penghapusan dari database. Inilah skripnya :

panada-tutorial-bag-9.7

<?php $this->output('dash/header'); ?>

    <!-- #PORTLETS START -->
    <div id="portlets">
    <!-- FIRST SORTABLE COLUMN START -->
      <div class="column">

      <!--THIS IS A PORTLET-->
        <div class="portlet">
		<div class="portlet-header"><a href="<?php echo $this->uri->baseUri; ?>index.php/boardslides">Boardslides</a> -> <b>Delete</b> </div>

		<div class="portlet-content">
		  <p>Hapus Slidesid: <?php echo $slides->idslide; ?></p>
		  <form id="form1" name="form1" method="post" action="">
		     <input type="hidden" name="id" id="id" class="smallInput" value="<?php echo $slides->idslide; ?>"/>
		    <label>Judul Baris 1</label>
		      <?php echo $slides->judulbaris1; ?>
		    <label>Judul Baris 1</label>
		     <?php echo $slides->judulbaris2; ?>
		    <label>Photos</label>
		     <img src="<?php echo $this->uri->baseUri.'uploads/'.$slides->gambar; ?>" width="100%">
		    <div><span><input type="submit" name="submit"  class="largeInput" value="Hapus" onclick="return confirm('Yakin akan di hapus?');"></span></div>

		  </form>
		  <p>&nbsp;</p>
		</div>
        </div>
      </div>
      <!-- FIRST SORTABLE COLUMN END -->

   </div>
<?php $this->output('dash/footer'); ?>

Dikarenakan adanya skrip onclick,

<input type="submit" name="submit"  class="largeInput" value="Hapus" onclick="return confirm('Yakin akan di hapus?');">

Pada saat tombol hapus di klik akan di tanya terlebih dahulu, Yakin akan di hapus? Jika klik Ok akan dilakukan proses penghapusan, jika pilih Cancel di batalkan.

LANGKAH Ke-7. - Membuat method status()

Untuk langkah ke-7 ini merubah status sebenarnya bisa dilakukan pada saat edit slides. Jadi method status ini pada saat di klik , sistem akan mengecek bagaimana statusnya, apakah di tampilkan atau di sembunyikan. Silahkan di pelajari method status skripnya :

/***************************************
     * fungsi method status()
     * untuk tampil/sembunyikan data slides
     *
     * Controller : /app/Controllers/Boardslides.php
     * Akses	:  /app/index.php/boardslides/status/$id
     *
     */
 public function status($id='')
    {
		$id=(int) $id;
		$ceklogin=$this->session->getValue('logadmin');
        if($ceklogin){
                 if(!empty($id)){
                   //method baru CekStatusbyId() model slides
                   $stt=$this->slides->CekStatusbyId($id);

                   $value =array('status' => $stt);
                   $dwhere=array('idslide' => $id);
                   $this->slides->Update($value,$dwhere);
                }
              $this->redirect('boardslides');

      }else{
           $this->output('dash/index');
        }

    }

Terlihat pada bagian ini kita harus membuat method baru pada model slides , yaitu method CekStatusbyId() fungsinya untuk mengecek/mengambil nilai status pada database tabel slidebanner. Silahkan tambahkan method baru ini pada model slides anda.

public function CekStatusbyId($id){
   	$stt=$this->db->row("SELECT status FROM ".$this->table." WHERE idslide='".$id."' ");
        if($stt){
            ($stt->status=='1')? $st=0:$st=1;
        }
        Return $st;
    }

Selesai sudah fitur admin untuk slides banner ini , sekarang kita lanjutan ke Langkah- 8 , yaitu mengubah bagian depan (homepage) terhubung dengan fitur admin slides ini.

LANGKAH Ke-8. - Mengubah Controller Home & Mengubah Views home.php

Mengubah Controller Home

Alhamdulillah, akhirnya sampai juga kita pada bagian terakhir pada tutorial ke- 9 ini. Setelah kita membuat fitur untuk pengelolaan 'slides banner' pada bagian admin area, saatnya kita sedikit merubah bagian homepage agar adanya perubahan pada admin slide banner bisa terlihat di halaman homepage ini.

Sebelumnya pada controller Home (app/Controllers/Home.php) isinya hanyalah seperti ini :

<?php
/*
* File Controller : Home.php
*
* */
namespace Controllers;
use Resources, Models;

class Home extends Resources\Controller
{
public function __construct(){
parent::__construct();
// Load model
$this->pages = new Models\Pages;

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

Sekarang kita akan menambahkan beberapa baris kode lagi, pertama kita haru memanggil model slides , yang kita panggil pada bagian constructor.

$this->slides = new Models\Slides;

Dan selanjutnya kita akan mengambil data slides banner yang mempunyai status 0 (tampil) saja, data yang mempunyai status selain 0 tidak perlu di ambil. Lihat dulu ke bagian models slides apakah ada method yang sesuai? Ternyata belum ada, jadi kita haru membuatnya juga. Seperti ini :

/***************************************************
 * method : GetSlidesbyStatus($stt);
 * fungsi : mengambil semua data slides pada table
 *
 ***************************************************/
public function GetSlidesbyStatus($stt){
	$sql= "SELECT * FROM ".$this->table." WHERE status='".$stt."' ORDER BY idslide ASC";
     	Return $this->db->results($sql);

  }

Terlihat kita hanya menambahkah parameter WHERE agar menyaring data sesuai statusnya saja. Sekarang tambahkan baris kode di bawah ini, pada method index controller Home ini.

$data['dslides'] = $this->slides->GetSlidesbyStatus(0);

'dslides' adalah variabel yang menampung data slides yang akan kita panggil di file views. Selengkapnya seperti ini :

<?php
/*
 *  File Controller : Home.php
 *
 * */
namespace Controllers;
use Resources, Models;

class Home extends Resources\Controller
{
    public function __construct(){
	    parent::__construct();
		// Load model
	    $this->pages = new Models\Pages;
          $this->slides = new Models\Slides;

    }
    public function index()
    {
	  $data['pagesMenu']= $this->pages->GetPages();
        $data['title'] = 'Homepage';
	  $data['dslides'] = $this->slides->GetSlidesbyStatus(0);
        $this->output('tema/default/home', $data);
    }
}

Bagian controller-nya sudah kita rubah, sekarang kita ke bagian views home.php (app/views/tema/default/home.php) di bawah ini saya copy paste bagian yang akan kita rubah. Lihat pada bagian <div class=”viewer”>....</div> dan <div class=”indicator”>....</div> seperti di bawah ini. Karena pada dua bagian ini yang akan kita rubah.

<div id="slider">
		<div class="viewer">
			<div class="reel">
				<div class="slide">
					<h2>This is the first slide.</h2>
					<p>Lorem ipsum dolor sit amet nullam.</p>
					<a class="link" href="http://nodethirtythree.com/#slidertron-slide-1">Full story ...</a> <img src="<?php echo $this->uri->baseUri;?>assets/tema/default/images/pic01.jpg" alt="" /> </div>
				<div class="slide">
					<h2>This is the second slide.</h2>
					<p>Lorem ipsum dolor sit amet nullam.</p>
					<a class="link" href="http://nodethirtythree.com/#slidertron-slide-2">Full story ...</a> <img src="<?php echo $this->uri->baseUri;?>assets/tema/default/images/pic02.jpg" alt="" /> </div>
				<div class="slide">
					<h2>This is the third slide.</h2>
					<p>Lorem ipsum dolor sit amet nullam.</p>
					<a class="link" href="http://nodethirtythree.com/#slidertron-slide-3">Full story ...</a> <img src="<?php echo $this->uri->baseUri;?>assets/tema/default/images/pic03.jpg" alt="" /> </div>
			</div>
		</div>
		<div class="indicator">
			<ul>
				<li class="active">1</li>
				<li>2</li>
				<li>3</li>
			</ul>
		</div>
	</div>

Dan ini hasilnya setelah kita rubah. 

<div id="slider">
		<div class="viewer">
			<div class="reel">
				<?php
				if(isset($dslides)) {
					foreach ($dslides as $slides) {
					?>
				<div class="slide">
					<h2><?php echo $slides->judulbaris1; ?></h2>
					<p><?php echo $slides->judulbaris2; ?></p>
					<a class="link" href="#">Full story ...</a> <img src="<?php echo $this->uri->baseUri;?>uploads/<?php echo $slides->gambar; ?>" alt="<?php echo $slides->gambar; ?>" /> </div>
			    <?php
			  }
			     } ?>
			</div>
		</div>
		<div class="indicator">
			<ul>
				<?php
				$ts=count($dslides);
				$i=1;
				for($i; $i <= $ts; $i++){
					echo '<li class="active">'.$i.'</li>';
			    	}
               		?>
			</ul>
		</div>
	</div>

Kita lihat script di atas ,

$dslides adalah variabel yang dilewatkan dari controller Home yaitu $data['dslides'] .

Sedangkan pada bagian class indicator, kita menghitung dulu total array $dslides => count($dslides). Setelah itu baru kita buat perulangan untuk mengisi bagian class indicator ini dengan perintah for.

Sekarang kita langsung coba bagian homepage ini :

http://localhost/panada/app/

Jika sudah selesai dan sesuai, saatnya kita tutup dulu tutorial pembuatan CMS Company Profile ini sampai di sini dulu. Anda bisa mengembangkannya lebih lanjut. Apa yang penulis jelaskan dalam tutorial hanyalah dasar-dasarnya saja. Hanya andalah yang bisa membuatnya lebih baik. Masih banyak fitur-fitur yang belum di bahas silahkan pelajari dokumentasinya.

Salam berbagi.

Insya Allah, Artikel selanjutnya saya akan menerangkan langkah-langkah bagaimana memadukan file manager kcfinder (http://kcfinder.sunhater.com/) ke dalam editor tinymce pada panadaframework ini. Khususnya pada CMS yang sudah kita buat.

Iklan

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

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