Hari ini saya akan sharing kepada Anda teknik yang SANGAT EFEKTIF untuk meningkatkan PageSpeed website Anda.

(Step-by-Step)

Faktanya, saya berhasil meningkatkan PageSpeed website saya dari 59% menjadi 81%.

Kenapa?

Sederhana, saya membuat multiple thumbnail size image saat upload artikel.

Dengan begitu, saya memiliki beberapa image dengan ukuran yang berbeda sehingga saya dapat menempatkan image dengan ukuran yang tepat di halaman yang tepat.

Perhatikan gambar berikut untuk lebih jelasnya:

Pada gambar diatas, dapat dilihat pada image blog, saya menampilkan large image (710x344px).

Sedangkan pada sidebar, saya menampilkan small image (160x68px).

Sebelumnya, saya menampilkan large image pada sidebar, dikarenakan saya hanya memiliki satu image saja. Yaitu original image (710x344px).

Itulah yang menyebabkan PageSpeed-nya menjadi rendah.

Lalu, bagaimana membuat multiple thumbnail size image dengan codeigniter?

Mari kita mulai.

 

Step #1. Persiapan

Ini penting!

Jika Anda melewatkan step ini, itu artinya Anda melewatkan keseluruhan tutorial ini.

Persiapan yang baik akan menentukan keberhasilan Anda mengikuti tutorial ini.

Jangan melewatkan step ini, meskipun terasa kompleks.

Jadi, apa saja yang perlu Anda persiapkan?

Berikut listnya:

1. Codeigniter (www.codeigniter.com)

Codeigniter adalah framework php utama yang akan kita gunakan dalam tutorial ini. Jika Anda belum memilikinya, silakan download di situs web resmi: www.codeigniter.com

2. Jquery (www.jquery.com)

Jquery adalah library javascript yang berfungsi untuk membantu mempermudah memanipulasi elemen html.

Jika Anda belum memilikinya, silakan download di situs web resmi: www.jquery.com

3. Bootstrap

Bootstrap merupakan framework yang berisi file CSS dan JavaScript yang membantu mempermudah developer web dalam merancang User Interface (UI) yang bagus sekaligus responsif.

Jika Anda belum memilikinya, silakan download di situs web resmi: https://getbootstrap.com/

 

Step #2. Instalasi Codeigniter

Extract codeigniter yang telah di download sebelumnya ke folder www (jika Anda menggunakan wampserver) atau htdocs (jika Anda menggunakan XAMPP).

Disini saya menggunakan wampserver. Jadi, saya extract di folder c:/wamp/www/

kemudian, rename (ganti nama) codeigniter menjadi “upload”.

Seperti gambar berikut:

Buka folder “upload”, kemudian buat folder baru dengan nama "assets" sejajar dengan folder application dan system, setelah itu buat folder css, images, dan js didalam folder assets.

Perhatikan gambar berikut untuk lebih jelasnya:

Setelah itu copy file bootstrap.css ke dalam folder css dan copy file jquery dan bootstrap.js kedalam folder js.

Perhatikan gambar berikut untuk lebih jelasnya:

Setelah itu buat folder “large”, “medium”, dan “small” didalam folder images.

Seperti gambar berikut:

Folder large, medium, dan small merupakan folder dimana image thumbnail di simpan nantinya sesuai dengan resolusi.

 

Step #3. Konfigurasi Codeigniter

Berikut beberapa file yang perlu di konfigurasi:

1. Autoload.php

Untuk melakukan konfigurasi pada file autoload.php, silahkan buka folder:

application/config/autoload.php

Seperti gambar berikut:

Buka autoload.php menggunakan text editor atau IDE seperti Notepad++, Atom, atau Sublime Text.

Kemudian temukan kode berikut:

$autoload['libraries'] = array();
$autoload['helper'] = array();

Ubah menjadi seperti berikut:

$autoload['libraries'] = array('session');
$autoload['helper'] = array('url');

2. Config.php

Untuk melakukan konfigurasi pada file config.php, sillahkan buka folder:

application/config/config.php

Seperti gambar berikut:

Buka config.php menggunakan text editor, kemudian temukan kode berikut:

$config['base_url'] = '';

Dan atur menjadi seperti berikut:

$config['base_url'] = 'http://localhost/upload/';

3.Routes.php

Untuk melakukan konfigurasi pada file routes.php, sillahkan buka folder:

application/config/routes.php

Seperti gambar berikut:

Buka file routes.php menggunakan text editor, dan temukan kode berikut:

$route['default_controller'] = 'welcome';

Dan atur menjadi seperti berikut:

$route['default_controller'] = 'upload';

 

Step #4. Basic Upload Multiple Thumbnails

Pada step ini, saya akan sharing tentang basic upload multiple thumbnail.

Multiple thumbnail merupakan hasil upload image dengan ukuran dan resolusi yang berbeda.

Pada kasus ini, saya ingin membuat upload multiple thumbnail yang menghasilkan tiga ukuran image yang berbeda.

Yaitu: large(700 X 467 pixels), medium(600 X 400 pixels), dan small(100 X 67 pixels).

Akan tetapi hasil uploadnya akan menjadi 4 images: large, medium, small, dan original image.

Mari kita mulai.

Buat sebuah file Controller pada folder “application/controllers” dengan nama Upload.php, kemudian ketikan kode berikut:

<?php
class Upload extends CI_Controller{

  function __construct(){
    parent::__construct();
    $this->load->library('upload');
  }
  function index(){
    $this->load->view('upload_view');
  }

  function do_upload(){
      $config['upload_path'] = './assets/images/'; //path folder
            $config['allowed_types'] = 'gif|jpg|png|jpeg|bmp'; //type yang image yang dizinkan
            $config['encrypt_name'] = TRUE; //enkripsi nama file

            $this->upload->initialize($config);

      if(!empty($_FILES['filefoto']['name'])){
                        if ($this->upload->do_upload('filefoto')){
                            $gbr = $this->upload->data();
                      //Compress Image
                $this->_create_thumbs($gbr['file_name']);
                $this->session->set_flashdata('msg','<div class="alert alert-info">Image Berhasil di upload.</div>');
                redirect('upload');
                                    }else{
                            echo $this->upload->display_errors();
                          }

                    }else{
                                    echo "image kosong atau type image tidak";
                        }
  }

  function _create_thumbs($file_name){
        // Image resizing config
        $config = array(
            // Image Large
            array(
                'image_library' => 'GD2',
                'source_image'  => './assets/images/'.$file_name,
                'maintain_ratio'=> FALSE,
                'width'         => 700,
                'height'        => 467,
                'new_image'     => './assets/images/large/'.$file_name
                ),
            // image Medium
            array(
                'image_library' => 'GD2',
                'source_image'  => './assets/images/'.$file_name,
                'maintain_ratio'=> FALSE,
                'width'         => 600,
                'height'        => 400,
                'new_image'     => './assets/images/medium/'.$file_name
                ),
            // Image Small
            array(
                'image_library' => 'GD2',
                'source_image'  => './assets/images/'.$file_name,
                'maintain_ratio'=> FALSE,
                'width'         => 100,
                'height'        => 67,
                'new_image'     => './assets/images/small/'.$file_name
            ));

        $this->load->library('image_lib', $config[0]);
        foreach ($config as $item){
            $this->image_lib->initialize($item);
            if(!$this->image_lib->resize()){
                return false;
            }
            $this->image_lib->clear();
        }
    }

}

Pada controller Upload.php diatas, terdapat 4 functions. Yaitu function __constract(), function index(), function do_upload(), dan function _create_thumbs().

Function __construct() berfungsi sebagai constructor, dimana pada kasus ini digunakan untuk memanggil library upload. 

Function index() berfungsi untuk menampilkan sebuah view yaitu “upload_view”.

Function do_upload() berfungsi untuk mengupload image ke server sekaligus membuat multiple thumbnail dengan memanggil function _create_thumbs().

Function _create_thumbs() berfungsi untuk membuat multiple thumbnail.

Jika Anda perhatikan, terpadat tanda underscore(“_”) pada function _create_thumbs() di awal nama function.

Artinya, function _create_thumbs() tidak dapat dipanggil melalui URL.

Selanjutnya, buat sebuah view dengan nama “upload_view.php” pada “application/views”.

Kemudian ketikan kode berikut:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Upload Multiple Thumnail.</title>
    <link href="<?php echo base_url().'assets/css/bootstrap.css'?>" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <?php echo $this->session->flashdata('msg');?>
      <div class="row">
          <form class="form-horizontal" action="<?php echo site_url('upload/do_upload');?>" method="post" enctype="multipart/form-data">
            <div class="form-group">
              <label for="FormControlFile">File Image:</label>
              <input type="file" name="filefoto" class="form-control-file" id="FormControlFile" required>
            </div>
            <button type="submit" class="btn btn-primary">Upload</button>
          </form>
      </div>
    </div>
    <script src="<?php echo base_url().'assets/js/jquery-3.3.1.min.js'?>"></script>
    <script src="<?php echo base_url().'assets/js/bootstrap.js'?>"></script>
  </body>
</html>

Kemudian buka browser Anda dan ketikan URL berikut:

http://localhost/upload/

Jika berjalan dengan baik, maka akan tampil seperti gambar berikut:

Kemudian klik “Browse…” untuk memilih image yang akan di upload.

Kemudian klik tombol “Upload” untuk mengupload image.

Jika upload berhasil maka akan muncul pesan seperti berikut:

Silahkan cek folder “assets/images” untuk memastikan upload berhasil.

Jika berhasil maka akan terlihat seperti gambar berikut:

Pada gambar diatas, Anda dapat melihat terdapat 4 gambar dalam folder “assets/images”.

Pada folder “large” terdapat image dengan resolusi 700 x 467 pixels, pada folder “medium” terdapat image dengan resolusi 600 x 400 pixels, dan pada folder “small” terdapat image dengan resolusi 100 x 67 pixels.

Sedangkan image di luar folder merupakan image dengan resolusi original.

 

Step #5. Upload Multiple Thumbnails dengan Database

Bagaimana jika menggunakan database?

Saya yakin pertanyaan ini muncul di pikiran Anda.

Pada step ini saya akan sharing bagaimana membuat upload multiple sizes thumbnail dan insert ke database.

Mari kita mulai.

 

#1. Buat Database dan Struktur Table

Buat sebuah database pada mysql dengan nama “thumbs_db”.

Untuk membuat database “thumbs_db” pada mysql dapat dilakukan dengan mengeksekusi query berikut:

CREATE DATABASE thumbs_db;

Selanjutnya buat sebuat table dengan nama “images” didalam database thumbs_db.

Untuk membuat table “images” pada database thumbs_db, dapat dilakukan dengan mengeksekusi query berikut:

CREATE TABLE images(
image_id INT PRIMARY KEY AUTO_INCREMENT,
image_title VARCHAR(100),
image_large VARCHAR(50),
image_medium VARCHAR(50),
image_small VARCHAR(50)
)ENGINE=INNODB;

Query diatas akan membuat sebuat table dengan nama “images” dengan field: image_id, image_title, image_large, image_medium, dan image_small.

 

#2. Koneksi Codeigniter ke Database

Untuk mengkoneksikan codeigniter ke database, dapat dilakukan dengan mengkonfigurasi file autoload.php dan database.php yang terdapat pada folder application/config.

Buka file autoload.php yang terdapat pada folder application/config, dan temukan kode berikut:

$autoload['libraries'] = array('session');

Dan set menjadi seperti berikut:

$autoload['libraries'] = array('session','database');

Selanjunya, buka file database.php yang terdapat pada folder application/config dan temukan kode berikut:

$active_group = 'default';
$query_builder = TRUE;

$db['default'] = array(
        'dsn'   => '',
        'hostname' => 'localhost',
        'username' => '',
        'password' => '',
        'database' => '',
        'dbdriver' => 'mysqli',
        'dbprefix' => '',
        'pconnect' => FALSE,
        'db_debug' => (ENVIRONMENT !== 'production'),
        'cache_on' => FALSE,
        'cachedir' => '',
        'char_set' => 'utf8',
        'dbcollat' => 'utf8_general_ci',
        'swap_pre' => '',
        'encrypt' => FALSE,
        'compress' => FALSE,
        'stricton' => FALSE,
        'failover' => array(),
        'save_queries' => TRUE
);

Kemudian set menjadi seperti berikut:

$active_group = 'default';
$query_builder = TRUE;

$db['default'] = array(
        'dsn'   => '',
        'hostname' => 'localhost',
        'username' => 'root',
        'password' => '',
        'database' => 'thumbs_db',
        'dbdriver' => 'mysqli',
        'dbprefix' => '',
        'pconnect' => FALSE,
        'db_debug' => (ENVIRONMENT !== 'production'),
        'cache_on' => FALSE,
        'cachedir' => '',
        'char_set' => 'utf8',
        'dbcollat' => 'utf8_general_ci',
        'swap_pre' => '',
        'encrypt' => FALSE,
        'compress' => FALSE,
        'stricton' => FALSE,
        'failover' => array(),
        'save_queries' => TRUE
);

 

#3. Model

Buat sebuah model dengan nama “Upload_model.php” pada folder application/models.

Kemudian ketikan kode berikut:

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Upload_model extends CI_Model{
    //show all images
    function show_images(){
        $query = $this->db->get('images');
        return $query;
    }

    //insert to database
    function insert_images($title,$image_large,$image_medium,$image_small){
      $data = array(
            'image_title'   => $title,
            'image_large'   => $image_large,
            'image_medium'  => $image_medium,
            'image_small'   => $image_small
      );
      $this->db->insert('images', $data);
    }

}

Pada model Upload_model.php diatas terdapat dua function, yaitu: function show_images() dan function insert_images().

Function show_images() berfungsi untuk mengambil data images dari database untuk ditampilkan ke view.

Sedangkan function insert_images(), berfungsi untuk meninput data path image ke database.

 

#4. Controller

Buka kembali Controller Upload.php yang dibuat sebelumnya, kemudian ubah menjadi seperti berikut:

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Upload extends CI_Controller{

  function __construct(){
    parent::__construct();
    $this->load->library('upload');
    //load model Upload_model.php
    $this->load->model('Upload_model','upload_model');
  }

  function index(){
    $this->load->view('upload_view');
  }

  function do_upload(){
      $config['upload_path'] = './assets/images/'; //path folder
            $config['allowed_types'] = 'gif|jpg|png|jpeg|bmp'; //type yang image yang dizinkan
            $config['encrypt_name'] = TRUE; //enkripsi nama file

            $this->upload->initialize($config);

      if(!empty($_FILES['filefoto']['name'])){
                        if ($this->upload->do_upload('filefoto')){
                            $gbr = $this->upload->data();
                      //Compress Image
                $this->_create_thumbs($gbr['file_name']);

                $title = $this->input->post('title',TRUE);
                $image_large = $gbr['file_name'];
                $image_medium = $gbr['file_name'];
                $image_small = $gbr['file_name'];

                $this->upload_model->insert_images($title,$image_large,$image_medium,$image_small);
                $this->session->set_flashdata('msg','<div class="alert alert-info">Image Berhasil di upload.</div>');
                redirect('upload/show_images');
                                    }else{
                            echo $this->upload->display_errors();
                          }

                    }else{
                                    echo "image kosong atau type image tidak di izinkan";
                        }
  }

  function _create_thumbs($file_name){
        // Image resizing config
        $config = array(
            // Image Large
            array(
                'image_library' => 'GD2',
                'source_image'  => './assets/images/'.$file_name,
                'maintain_ratio'=> FALSE,
                'width'         => 700,
                'height'        => 467,
                'new_image'     => './assets/images/large/'.$file_name
                ),
            // image Medium
            array(
                'image_library' => 'GD2',
                'source_image'  => './assets/images/'.$file_name,
                'maintain_ratio'=> FALSE,
                'width'         => 600,
                'height'        => 400,
                'new_image'     => './assets/images/medium/'.$file_name
                ),
            // Image Small
            array(
                'image_library' => 'GD2',
                'source_image'  => './assets/images/'.$file_name,
                'maintain_ratio'=> FALSE,
                'width'         => 100,
                'height'        => 67,
                'new_image'     => './assets/images/small/'.$file_name
            ));

        $this->load->library('image_lib', $config[0]);
        foreach ($config as $item){
            $this->image_lib->initialize($item);
            if(!$this->image_lib->resize()){
                return false;
            }
            $this->image_lib->clear();
        }
    }

    //function untuk menampilkan image ke view  
    function show_images(){
      $data['images']=$this->upload_model->show_images();
      $this->load->view('images_view', $data);
    }

}

 

#5. View

Buka kembali View Upload_view.php yang dibuat sebelumnya, kemudian ubah menjadi seperti berikut:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Upload Multiple Thumnail.</title>
    <link href="<?php echo base_url().'assets/css/bootstrap.css'?>" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      
      <div class="row">
          <form class="form-horizontal" action="<?php echo site_url('upload/do_upload');?>" method="post" enctype="multipart/form-data">

            <div class="form-group">
              <label for="FormControlTitle">Title:</label>
              <input type="text" name="title" class="form-control" id="FormControlTitle" required>
            </div>

            <div class="form-group">
              <label for="FormControlFile">File Image:</label>
              <input type="file" name="filefoto" class="form-control-file" id="FormControlFile" required>
            </div>

            <button type="submit" class="btn btn-primary">Upload</button>
          </form>
      </div>

    </div>
    <script src="<?php echo base_url().'assets/js/jquery-3.3.1.min.js'?>"></script>
    <script src="<?php echo base_url().'assets/js/bootstrap.js'?>"></script>
  </body>
</html>

Setelah itu buat sebuah view lagi dengan nama “images_view.php” pada folder application/views.

Kemudian ketikan kode berikut:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Upload Multiple Thumnail.</title>
    <link href="<?php echo base_url().'assets/css/bootstrap.css'?>" rel="stylesheet">
  </head>
  <body>
    <div class="container-fluid">
      <?php echo $this->session->flashdata('msg');?>

      <div class="row">
          <table class="table">
            <thead>
              <tr>
                <th>Title</th>
                <th>Image Large</th>
                <th>Image Medium</th>
                <th>Image Small</th>
              </tr>
            </thead>
            <tbody>
              <?php foreach($images->result() as $row):?>
                <tr>
                  <td><?php echo $row->image_title;?></td>
                  <td><img src="<?php echo base_url().'assets/images/large/'.$row->image_large;?>"></td>
                  <td><img src="<?php echo base_url().'assets/images/medium/'.$row->image_medium;?>"></td>
                  <td><img src="<?php echo base_url().'assets/images/small/'.$row->image_small;?>"></td>
                </tr>
              <?php endforeach;?>
            </tbody>
          </table>
      </div>

    </div>
    <script src="<?php echo base_url().'assets/js/jquery-3.3.1.min.js'?>"></script>
    <script src="<?php echo base_url().'assets/js/bootstrap.js'?>"></script>
  </body>
</html>

View “images_view.php” ini berfungsi untuk menampilkan semua image yang ada di database dalam bentuk table.

 

#6. Testing

Buka browser Anda, kemudian ketikan URL berikut:

http://localhost/upload/

Maka akan tampil seperti gambar berikut:

Input Title dan Browse image yang ingin di upload.

Seperti gambar berikut:

Klik tombol “Upload” untuk mengupload image.

Jika upload berhasil, maka akan tampil seperti gambar berikut:

Pada gambar diatas, anda dapat melihat perbedaan resolusi antara image large, medium, dan small.

Dengan demikian, Anda dapat menempatkan image pada website Anda sesuai dengan resolusinya.

 

Kesimpulan:

Pembahasan kali ini adalah tentang bagaimana membuat upload multiple sizes thumbnail dengan codeigniter.

Dimana satu image yang diupload dapat dijadikan beberapa ukuran dan resolusi yang berbeda.

Dengan demikian, Anda dapat menempatkan image pada website Anda sesuai dengan resolusinya.

Tujuannya adalah untuk megoptimalkan PageSpeed.

PageSpeed dapat mendongkrak User Experience(UX) dan SEO Friendly.

Jadi, berapa PageSpeed score yang Anda ingin?

Download Source Code