Membuat Input Data Beserta Gambar

April 26, 2018 deifa satrio 0 Comments


hay hay, salam sejahtera kawan ku gimana kabarnya ? baik kan ? di kesempatan kali ini saya ingin menjelaskan tetang sesuatu yang sangat penting dalam pemrograman berbasis web yaitu input data beserta gambar. jika kawan-kawan belum membaca artikel yang sebelumnya : menghapus data menggunakan codeigniter silahkan baca terlebih dahulu supaya tidak bingung. ok langsung aja tanpa banyak bicara, saya yakin kawan-kawan udah penasaran kan ? kalo gitu ikuti langkah-langkah di bawah dengan teliti dan hati-hati :

1. Buat folder "uploads" di dalam folder "belajarci", kemudian buat folder lagi bernama "thumbnail" di dalam folder "belajarci/uploads".


2. Tambahkan field "gambar" di tabel "tb_buku" pada database "db_belajar".











3. Edit file "input.php" yang berada dalam "belajarci/views/input.php" seperti berikut.


Penjelasan Script : script form_open_multipart berfungsi agar form dapat mengupload file lalu script <input type="file" name="gambar"> berfungsi untuk menambah kan form upload file atau gambar.


4. kemudian edit funsi "input" yang berada di controller "C_buku.php" di "belajarci/controller/C_buku.php" seperti berikut.


Penjelasan Script : 
fungsi dari script

  1. $config = array(
  2.                         'upload_path'=>'./uploads',
  3.                         'allowed_types'=>'jpg|png|jpeg',
  4.                         'max_size'=>2086
  5.                         );

adalah untuk mensetting tempat penyimpanan foto, exstensi file yang di ijinkan dan ukuran maksimum file yang di upload. 

kemudian script ini 
  2. $this->load->library('upload',$config);
  3. $this->upload->do_upload('gambar');
  4. $finfo = $this->upload->data();

 berfungsi untuk mengapload foto berdasarkan setting yang sudah kita siap kan di dalam variabel array $config.

 setelah itu script ini $nama_foto = $finfo['file_name']; berfungsi untuk mengambil data nama file yang di upload.

kalo untuk script ini

  1.  $config2 = array(
  2.                 'source_image'=>'uploads/'.$nama_foto,//mengambil alamat foto yang akan di duplikat
  3.                 'image_library'=>'gd2',
  4.                 'new_image'=>'uploads/thumbnail',//alamat menyimpan foto hasil duplikat
  5.                 'maintain_ratio'=>true,
  6.                 'width'=>150,
  7.                 'height'=>200
  8.             );
  9.         $this->load->library('image_lib',$config2);//gunkan setting dari variabel $config2
  10.         $this->image_lib->resize();//eksekusi

berfungsi untuk membuat salinan gambar yang telah kita upload dan meresize nya sehingga kita memiliki 1 file gambar asli dan 1 file gambar yang telah di resize.

5. Jangan lupa edit file "main.php" dengan menambahkan beberapa script di tag <table></table> yang berada di "belajarci/application/views/main.php" seperti ini :


Penjelasan Script :
script tambahan  
<img src="<?php echo base_url('uploads/thumbnail/'.$row->gambar)?>">
yang di sisipkan di tengah-tengah foreach ($buku as $row) {} pada tabel, berfungsi untuk menampilkan gambar yang telah di upload tadi berdasarkan alamat dan nama file.


6. Terakhir coba script baru kalian di "localhost/belajarci"

ok sekian dulu ya tutorial singkat ini semoga bermanfaat, apabila ada yang kurang jelas silahkan coret-coret kolom komentar di bawah ini atau download source code nya di sini.

0 komentar:

Langganan: Posting Komentar (Atom)