Pada tulisan kali ini akan diberikan contoh kode tentang bagaimana cara membuat sistem upload gambar dimana saat proses penyimpanan gambar ke sistem juga dilakukan proses modifikasi ukuran gambar ke medium dan thumbnail. Menggunakan framework PHP CodeIgniter dengan Library PHP yang digunakan adalah GD2.

Berikut struktur direktori khusus untuk upload gambar (optional) :

        uploads/
              real/
              medium/
              thumbnail/

Direktori “real” untuk menyimpan gambar dengan ukuran sebenarnya, “medium” dan “thumbnail” untuk menyimpan gambar yang telah mengalami proses resizing ke ukuran medium dan thumbnail.

Langkah pertama, membuat form upload dengan nama file upload_form.php di View.

Sumber kode :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<html>
<head>
<title>Upload Form</title>
</head>
<body>
 
<?php echo form_open_multipart('upload/do_upload');?>
 
<input type="file" name="photo" size="20" />
 
<br /><br />
 
<input type="submit" value="upload" />
 
</form>
 
</body>
</html>

Langkah terakhir, membuat proses penyimpanan gambar dan resizing di Controller, dengan nama file : upload.php .

Sumber kode :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

<?php
 
/**
 * Upload Class
 *
 * @subpackage	Controller
 * @link        http://www.kohaci.com/
 * @author	Freddy Yuswanto (freddy@lenteravision.com)
 */
 
class Upload extends Controller {
 
    public function  __construct() {
        parent::Controller();
        $this->load->helper(array('form', 'url'));
    }
 
    public function index() {
        $this->load->view('upload_form') ;
    }
 
    public function do_upload() {
        $config['upload_path']	= "./uploads/real/";
        $config['allowed_types']= 'gif|jpg|png|jpeg';
        $config['max_size']     = '2000';
        $config['max_width']  	= '2000';
        $config['max_height']  	= '2000';
 
        $this->load->library('upload', $config);
 
        if ($this->upload->do_upload("photo")) {
            $data	 	= $this->upload->data();
 
            /* PATH */
            $source             = "./uploads/real/".$data['file_name'] ;
            $destination_thumb	= "./uploads/thumbnail/" ;
            $destination_medium	= "./uploads/medium/" ;
 
            // Permission Configuration
            chmod($source, 0777) ;
 
            /* Resizing Processing */
	    // Configuration Of Image Manipulation :: Static
	    $this->load->library('image_lib') ;
	    $img['image_library'] = 'GD2';
	    $img['create_thumb']  = TRUE;
	    $img['maintain_ratio']= TRUE;
 
            /// Limit Width Resize
            $limit_medium   = 200 ;
            $limit_thumb    = 90 ;
 
            // Size Image Limit was using (LIMIT TOP)
            $limit_use  = $data['image_width'] > $data['image_height'] ? $data['image_width'] : $data['image_height'] ;
 
            // Percentase Resize
            if ($limit_use > $limit_medium || $limit_use > $limit_thumb) {
                $percent_medium = $limit_medium/$limit_use ;
                $percent_thumb  = $limit_thumb/$limit_use ;
            }
 
            //// Making THUMBNAIL ///////
	    $img['width']  = $limit_use > $limit_thumb ?  $data['image_width'] * $percent_thumb : $data['image_width'] ;
            $img['height'] = $limit_use > $limit_thumb ?  $data['image_height'] * $percent_thumb : $data['image_height'] ;
 
            // Configuration Of Image Manipulation :: Dynamic
            $img['thumb_marker'] = '_thumb-'.floor($img['width']).'x'.floor($img['height']) ;
            $img['quality']      = '100%' ;
            $img['source_image'] = $source ;
            $img['new_image']    = $destination_thumb ;
 
            // Do Resizing
            $this->image_lib->initialize($img);
            $this->image_lib->resize();
            $this->image_lib->clear() ;
 
            ////// Making MEDIUM /////////////
            $img['width']   = $limit_use > $limit_medium ?  $data['image_width'] * $percent_medium : $data['image_width'] ;
            $img['height']  = $limit_use > $limit_medium ?  $data['image_height'] * $percent_medium : $data['image_height'] ;
 
            // Configuration Of Image Manipulation :: Dynamic
            $img['thumb_marker'] = '_medium-'.floor($img['width']).'x'.floor($img['height']) ;
            $img['quality']      = '100%' ;
            $img['source_image'] = $source ;
            $img['new_image']    = $destination_medium ;
 
            // Do Resizing
            $this->image_lib->initialize($img);
            $this->image_lib->resize();
            $this->image_lib->clear() ;
        }
        else {
            echo "Failed!" ;
        }
    }
}
?>

Contoh hasil :

I Love You. Ill go to Japan! Wait Me ...

Ukuran Asli : 260 x 389

Ukuran Medium :: 133 x 200

Ukuran Medium :: 133 x 200

Ukuran Thumbnail :: 60 x 90

Ukuran Thumbnail :: 60 x 90

 

Referensi :
http://www.codeigniter/user_guide/libraries/image_lib.html

Disclaimer :
Contoh gambar diambil dari Photo Album Suzuki Airi – Clear tanpa seizin dan pemberitahuan dari pihak penyedia pemegang lisensi photo/album. Peace :-)

DOWNLOAD ARTICLE AS PDF