SEO and CODEIGNITER: UPLOAD DAN MANIPULASI (RESIZE) GAMBAR DENGAN CODEIGNITER 2.1.3

Di artikel kali ini saya akan membuat aplikasi upload dan manipulasi gambar lebih tepatnya akan saya gunakan fungsi resize() dalam codeIgniter. Ini koding yang dibutuhkan :

STEP 1 : Membuat Controller
Dengan menggunakan editor teks, buatlah file gallery.php dan letakkan kode ini dan simpan dalam folder application/controllers :

<?php
class Gallery extends CI_Controller {
 
 function index() {
  
  $this->load->model('Gallery_model');
  
  if ($this->input->post('upload')) {
   $this->Gallery_model->do_upload();
  }
  
  $data['images'] = $this->Gallery_model->get_images();
  
  $this->load->view('gallery', $data);
  
 }
 
}

STEP 2 : Membuat Model
Dengan menggunakan editor teks, buatlah file gallery_model.php dan letakkan kode ini dan simpan dalam folder application/models :

<?php
class Gallery_model extends CI_Model {
 
 var $gallery_path;
 var $gallery_path_url;
 
 function __construct() {
  parent::__construct();
  
  $this->gallery_path = realpath(APPPATH . '../images');
  $this->gallery_path_url = base_url().'images/';
 }
 
 function do_upload() {
  
  $config = array(
   'allowed_types' => 'jpg|jpeg|gif|png',
   'upload_path' => $this->gallery_path,
   'max_size' => 2000
  );
  
  $this->load->library('upload', $config);
  $this->upload->do_upload();
  $image_data = $this->upload->data();
  
  $config = array(
   'source_image' => $image_data['full_path'],
   'new_image' => $this->gallery_path . '/thumbs',
   'maintain_ratio' => true,
   'width' => 150,
   'height' => 100
  );
  
  $this->load->library('image_lib', $config);
  $this->image_lib->resize();
  
 }
 
 function get_images() {
  
  $files = scandir($this->gallery_path);
  $files = array_diff($files, array('.', '..', 'thumbs'));
  
  $images = array();
  
  foreach ($files as $file) {
   $images []= array (
    'url' => $this->gallery_path_url . $file,
    'thumb_url' => $this->gallery_path_url . 'thumbs/' . $file
   );
  }
  
  return $images;
 }
 
}

STEP 3 : Membuat View
Dengan menggunakan editor teks, buatlah file gallery.php dan letakkan kode ini dan simpan dalam folder application/views :

<!DOCTYPE HTML>
<html lang="en-US">
<head>
 <title>CI Gallery</title>
 <meta charset="UTF-8">
 <style type="text/css">
  #gallery, #upload {
   border: 1px solid #ccc; margin: 10px auto; width: 570px; padding: 10px;
  }
  #blank_gallery {
   font-family: Arial; font-size: 18px; font-weight: bold;
   text-align: center;
  }
  .thumb {
   float: left; width: 150px; height: 100px; padding: 10px; margin: 10px; background-color: #ddd;
  }
  .thumb:hover {
   outline: 1px solid #999;
  }
  img {
   border: 0;
  }
  #gallery:after {
   content: "."; visibility: hidden; display: block; clear: both; height: 0; font-size: 0;
  }
 </style>
</head>
<body>
 <div id="gallery">
  <?php if (isset($images) && count($images)):
   foreach($images as $image): ?>
   <div class="thumb">
    <a href="<?php echo $image['url']; ?>">
     <img src="<?php echo $image['thumb_url']; ?>" />
    </a>    
   </div>
  <?php endforeach; else: ?>
   <div id="blank_gallery">Please Upload an Image</div>
  <?php endif; ?>
 </div>
 
 <div id="upload">
  <?php
  echo form_open_multipart('gallery');
  echo form_upload('userfile');
  echo form_submit('upload', 'Upload');
  echo form_close();
  ?>  
 </div>
</body>
</html>

Jika sobat benar dalaml pengkodean maka akan menghasilkan seperti ini :