Codeigniter Tutorial Upload Image File Using Jquery Ajax

Saya pikir Ia akan setuju jika saya mengatakan ini:

“Sangatlah Susah cak bagi membuat upload file dengan Codeigniter dan AJAX Jquery.”

Kabar baiknya:

Nah, ternyata, Anda dapat dengan mudah takhlik upload file dengan Codeigniter dan AJAX Jquery, Saat ini juga.!

Ini merupakan pendirian yang saya gunakan bilang bulan yang lalu untuk project saya, dan saya mutakadim membandingkan dengan pendirian bukan dari situs barat sana.

Dan tidak terserah cara yang lebih simple berusul ini.

Hari ini, dalam artikel ini, saya akan jelaskan secara detail bagaimana membuat upload file dengan Codeigniter dan Ajax jquery serta menginput nama file yang diupload kedalam database.

Tidak tetapi itu!

Sekaligus, bagaimana meng-enkripsi
nama file (file name) yang diupload.

Secara STEP-BY-STEP!

Dapatkan diskon 75% sampul hosting dan percuma domain + extra potongan harga 5% dengan menggunakan kupon: MFIKRI

Order Saat ini.!

Bagaimana saya menemukan kaidah terlambat untuk upload file dengan Codeigniter dan Ajax Jquery

Sebelum saya mengklarifikasi bagaimana membuat upload file dengan codeigniter dan ajax jquery, izinkan saya berbagi cerita ringkas dengan Anda.

Sejumlah bulan nan lalu saya terpesona buat takhlik upload file image dengan codeigniter dan ajax jquery.

Hasilnya, saya mulai berselancar di google.

Dan saya menemukan kata sandang yang adv amat menarik dari tutplus.com.

Berikut screenshoot artikelnya:

Source: https://code.tutsplus.com/tutorials/how-to-upload-files-with-codeigniter-and-ajax–net-21684

Pertama kali saya menyibuk artikel ini, saya sekaligus kepingin mencoba menerapkannya.

Pasca- saya baca kembali, ternyata dia menggunakan sebuah library tambahan yakni
AjaxFileUpload.

Saat saya klik link AjaxFileUpload, ternyata saya menemukan broken link.

Dan akhirnya saya mengemudiankan untuk membentuk upload file dengan codeigniter dan ajax jquery tanpa library AjaxFileUpload.

Ternyata, tanpa library AjaxFileUpload pun, konstan mudah takhlik upload file dengan ajax dan codeigniter.

Justru lebih mudah kerjakan di sesuaikan (customize) di tulat.

Lalu, bagaimana membentuk upload file dengan Codeigniter dan Ajax jquery sonder library pelengkap AjaxFileUpload?

Mari kita mulai!

Kebanyakan pemula mengalami kesulitan intern membuat upload file dengan codeigniter dan Ajax jquery.

Sebagian besar semenjak Sira mungkin telah berhasil memuat upload file dengan codeigniter.

Akan tetapi,

Bagi membentuk upload file dengan Codeigniter + Ajax Jquery banyak menemukan kesulitan.

Inillah masalahnya:

Rata-rata pemula kesulitan menjumut value (nilai) dari input file yang di submit (kirim) menggunakan Ajax Jquery.

Itu karena,

Untuk melakukan submit form upload file, harus memperalat
form_open_multipart.

Form_open_multipart
hanya dapat anda gunakan seandainya upload file tanpa Ajax Jquery.

Akan tetapi,

Jika Anda mau menggunkan Ajax Jquery, Anda harus menunggangi
FormData().

Mungkin terdengar rumit, doang sepatutnya ada tak.

Apa itu FormData?

Bagaimana penggunaannya?

Berikut step by step bagaimana takhlik upload file dengan codeigniter dan Ajax Jquery.

Dengan mengikuti step by step berikut, Anda akan taajul memaklumi apa itu FormData dan bagaimana penggunaannya.

Stay tuned!

Step 1. Pesiapan

Ini penting!

Jika Anda melewatkan step ini, artinya Dia melewatkan keseluruhan berpunca artikel ini.

Pesiapan nan baik akan menentukan keberhasilan Kamu mengimak artikel ini. Semakin baik persiapan Beliau, maka akan semakin besar kemungkinan anda berhasil menirukan artikel ini.

Jangan melewatkan step ini, meskipun terasa obsesi.

Jadi, apa saja yang terbiasa Anda persiapkan?

Berikut listnya:

1. Framework Codeigniter (www.codeigniter.com)

Codeigniter ialah framework php utama yang akan kita gunakan plong tutorial siapa ini. Jika anda belum memilikinya, silahkan download di situs resminya: www.codeigniter.com

2. Bootstrap (www.getbootstrap.com)

Bootstrap yaitu framework buat mempercantik user interface (UI). Jika Anda belum memilikinya, silahkan download terlebih dahulu di situs resminya: www.getbootstrap.com

3. Jquery (www.jquery.com)

Ini penting!

Jquery merupakan framework javascript yang berfungsi bakal membantu mempermudah dalam penulisan script berbasis AJAX.

Jika Anda belum memilikinya silahkan download di situs resminya: www.jquery.com

Wajib hukumnya cak bagi Kamu untuk memiliki 3 hal berikut:

Ok, Mari kita lanjutkan!

Step 2. Pembuatan struktur database

Lega artikel ini, saya menunggangi mysql bagaikan Database Management System (DBMS).

Jika Kamu kembali menggunakan mysql, ia akan mengesir artikel ini.

Namun,

Jikalau ia memperalat DBMS yang lain sama dengan Oracle, SQL Server, Maria DB atau lainnya.

No, Problem!

Asalkan Ia mengerti bahasa SQL (Structured Query Language)  dengan baik.

Ok, mari kita lanjur!

Buat sebuah database, disini saya membuat sebuah database dengan nama
db_upload.

Jikalau Sira membuat database dengan nama nan sepadan itu makin baik.

Silahkan eksekusi query berikut bagi membuat database:

CREATE DATABASE db_upload;

Query diatas akan menghasilkan sebuah database dengan tanda
db_upload.

Lebih lanjut,

Buat table dengan nama
tbl_galeri
dengan struktur seperti gambar berikut:

Kerjakan membuat struktur table seperti tulangtulangan diatas,

Silahkan eksekusi query berikut:

CREATE TABLE tbl_galeri( id INT(11) PRIMARY KEY AUTO_INCREMENT, judul VARCHAR(50), rencana VARCHAR(40) )ENGINE=INNODB;
      

Step 3. Installasi Codeigniter

Selanjutnya,

Extract codeigniter nan telah di download sebelumnya ke folder
www
(jikalau memperalat Wampserver) maupun
htdocs
(seandainya menggunakan XAMPP).

Karena saya menggunakan wampserver, jadi saya mengextract-nya di c:/wamp/www/

Kemudian rename (ganti segel) project codeigniter Sira sesuai dengan project Anda. Disini saya menjatah logo
ci_upload.

Sama dengan gambar berikut:

Buka folder
ci_upload
dan buat folder
assets
sejajar dengan folder application dan system, kemudian sertakan file
bootstrap
dan
jquery
didalam folder
assets.

Kemudian,

Buat sebuah folder lagi didalam folder
assets, dan pasrah cap
images.

Folder images ini berfungsi bagi menampung file image nan di upload nantinya.

Sehingga terlihat struktur project kita sebagai halnya berikut:

Pada gambar diatas dapat dilihat, bahwa didalam folder
assets
terdapat folder
css,
images, dan
js.

Didalam folder
css, terdapat file
bootstrap.css

Didalam folder
js, terletak file
bootstrap.js
dan file
jquery-3.2.1.js

Step 4. Konfigurasi Codeigniter

Langkah selanjutnya adalah konfigurasi lega codeigniter.

Berikut bilang file yang perlu Anda konfigurasi:

1. Autoload.php

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

ci_upload/application/config/autoload.php

sebagaimana berikut gambar berikut:

Buka file autoload.php dengan text editor (notepad++, sublime text, atau lainnya).

Kemudian temukan kode berikut:

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

Atur menjadi seperti berikut:

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

2. Config.php

Cak bagi melakukan konfigurasi pada file config.php, silahkan buka folder:

ci_upload/application/config/config.php

seperti berikut rangka berikut:

Beber file config.php dengan text editor, kemudian temukan kode berikut:

$config['base_url'] = '';

Atur menjadi begitu juga berikut:

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

3. Database.php

Bikin melakukan konfigurasi pada file database.php, silahkan bentang folder:

ci_upload/application/config/database.php

seperti mana berikut gambar berikut:

Beber file database.php dengan text editor, kemudian temukan kode berikut:

$active_group = 'default'; $query_builder = TRUE;  $db['default'] = array( 	'dsn'	=> '', 	'hostname' => 'localhost', 	'username' => '', 	'password' => '', 	'database' => '', //sesuaikan dengan database anda! 	'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 );
      

Atur menjadi seperti berikut:

$active_group = 'default'; $query_builder = TRUE;  $db['default'] = array( 	'dsn'	=> '', 	'hostname' => 'localhost', 	'username' => 'root', 	'password' => '', 	'database' => 'db_upload', //sesuaikan dengan database anda! 	'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 );
      

Step 5. Membentuk Controller

Controller bertugas bagaikan titian antara model dan view.

Controller akan merespon HTTP request yang datang semenjak user (melewati browser), dari request ini Controller akan menetukan apa yang harus dilakukan.

Mungkin terdengar sedikit elusif, tapi sebenarnya tidak.

Ia akan segera memafhumi setalah mempraktekkan tutorial ini secara keseluruhan.

Controller ini, akan menghandle proses upload file ke server dan mengirimkan value (nilai) yang dikirim ke model bakal di simpan ke database.

Ok, bersama-sama doang!

Buat sebuah Controller dengan nama
Upload.php

Dengan kode sebagai berikut:

<?php class Upload extends CI_Controller{ 	function __construct(){ 		parent::__construct(); 		$this->load->eksemplar('m_upload'); 		 	}  	function index(){ 		$this->load->view('v_upload');	 	}   	function do_upload(){         $config['upload_path']="./assets/images";         $config['allowed_types']='gif|jpg|png';         $config['encrypt_name'] = TRUE;                  $this->load->library('upload',$config); 	    if($this->upload->do_upload("file")){ 	        $data = array('upload_data' => $this->upload->data());  	        $judul= $this->input->post('titel'); 	        $image= $data['upload_data']['file_name'];  	         	        $result= $this->m_upload->simpan_upload($judul,$image); 	        echo json_decode($result);         }       } 	 }
      

Penjelasan Kode:

Ini utama!

Pada controller
Upload.php, terdapat 3 function.

Yaitu: function __construct(), function index(), dan function do_upload().

1. Function __construct()

function __construct(){ 	parent::__construct(); 	$this->load->acuan('m_upload'); }
      

Function __construct(), berfungsi misal konstruktor.

Dimana setiap pemanggilan kamil, library, helper, atau apapun yang dipanggil menerobos function __construct(), maka akan siap digunakan untuk setiap function di dalam suatu papan bawah.

Puas kasus diatas, Anda dapat melihat terserah pemanggilan kamil
m_upload
puas function __construct().

Artinya, contoh m_upload siap digunakan untuk setiap function privat kelas Upload.

2. Function index()

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

Function index, merupakan function yang di panggilan otomatis saat disuatu file ataupun kelas di panggil.

Pada kasus ini, function index memanggil sebuah view dengan nama
v_upload.

3. Function do_upload()

function do_upload(){         $config['upload_path']="./assets/images"; //path folder file upload         $config['allowed_types']='gif|jpg|png'; //type file yang boleh di upload         $config['encrypt_name'] = TRUE; //enkripsi file name upload                  $this->load->library('upload',$config); //call library upload  	    if($this->upload->do_upload("file")){ //upload file 	        $data = array('upload_data' => $this->upload->data()); //rebut file name yang diupload  	        $kepala karangan= $this->input->post('judul'); //get tajuk image 	        $image= $data['upload_data']['file_name']; //set file name ke variable image 	         	        $result= $this->m_upload->simpan_upload($kepala karangan,$image); //bingkis value ke model m_upload 	        echo json_decode($result);         } }
      

Function do_upload ini merupakan function yang berfungsi untuk menghandle proses upload file ke peladen, serta mengirimkan file name ke model bagi proses penyimpanan data.

Step 6. Menciptakan menjadikan Model

Selanjutnya,

Kerjakan sebuah abstrak dengan nama
M_upload.php

Kemudian ketikkan kode berikut:

<?php class M_upload extends CI_Model{  	function simpan_upload($titel,$image){ 		$data = array( 	        	'kepala karangan' => $judul, 	        	'gambar' => $image 	       	);   	    $result= $this->db->insert('tbl_galeri',$data); 	    return $result; 	} 	 }
      

Sreg model
M_upload
terdapat satu function. Yaitu function
simpan_upload.

Function ini berfungsi bagi menyimpan value yang dikirim bermula controller lakukan disimpan ke database.

Step 7. Menciptakan menjadikan View

Selanjutnya,

Buat sebuah view dengan tera
v_upload.php

Kemudian ketikkan kode berikut:

<!DOCTYPE html> <html lang="id"> <head> 	<meta charset="utf-8"> 	<title>Upload dengan Codeigniter dan Ajax</title> 	<link ril="stylesheet" type="text/css" href="<?php echo base_url().'assets/css/bootstrap.css'?>"> </head> <body> 	<div class="container"> 		<div class="col-sm-4 col-md-offset-4"> 		<h4>Upload dengan Codeigniter dan Ajax</h4> 			<form class="form-horizontal" id="submit"> 				<div class="form-group"> 					<input type="text" name="kepala karangan" class="form-control" placeholder="Judul"> 				</div> 				<div class="form-group"> 					<input type="file" name="file"> 				</div>  				<div class="form-group"> 					<button class="btn btn-success" id="btn_upload" type="submit">Upload</button> 				</div> 			</form>	 		</div> 	</div> <script type="text/javascript" src="<?php echo base_url().'assets/js/jquery-3.2.1.js'?>"></script> <script type="text/javascript" src="<?php echo base_url().'assets/js/bootstrap.js'?>"></script> <script type="text/javascript"> 	$(document).ready(function(){  		$('#submit').submit(function(e){ 		    e.preventDefault();  		         $.ajax({ 		             url:'<?php echo base_url();?>index.php/upload/do_upload', 		             type:"post", 		             data:new FormData(this), 		             processData:false, 		             contentType:false, 		             cache:false, 		             async:false, 		              success: function(data){ 		                  alert("Upload Image Berhasil."); 		           } 		         }); 		    }); 		  	}); 	 </script> </body> </html>
      

View
v_upload
ini berfungsi lakukan menampilkan sebuah form bakal upload file.

View ini juga berfungsi cak bagi melakukan submit form file upload menggunakan AJAX.

Sekiranya Beliau perhatikan lega bagian script, terdapat kelebihan Ajax.

Seperti berikut:

$('#submit').submit(function(e){ 		    e.preventDefault();  		         $.ajax({ 		             url:'<?php echo base_url();?>index.php/upload/do_upload', //URL submit 		             type:"post", //method Submit 		             data:new FormData(this), //pendayagunaan FormData 		             processData:false, 		             contentType:false, 		             cache:false, 		             async:false, 		              success: function(data){ 		                  alert("Upload Image Berhasil."); //alert sekiranya upload berakibat 		           } 		         }); });
      

Silahkan perhatikan banjar kode nan saya beri komentar cak bagi penjelasan kode!

Testing Acara:

Buka bowser Sira, dan kunjungi url berikut:

http://localhost/ci_upload/index.php/upload

maka akan tampil form seperti susuk berikut:

Kemudian input
judul, dan
telusuri
(browse) file image nan akan di upload.

Dahulu, klik cembul
upload.

Jika bertelur maka akan terlihat alert seperti bagan berikut:

Untuk meng-cek hasil file image yang di upload, silahkan bentang folder
images.

Seperti gambar berikut:

Selamat, Anda berhasil membuat upload file dengan codeigniter dan ajax.

Related: Tutorial Lengkap CodeIgniter 4 Lakukan Pemula

Rekomendasi Tuntunan:

1. Multiple Upload Image dengan Codeigniter

2. Upload dan Resize Image Menggunakan Codeigniter

3. Upload Image dengan Dropify Menggunakan Codeigniter

Dapatkan potongan harga 75% bungkusan hosting dan gratis domain + extra diskon 5% dengan menggunakan kupon: MFIKRI

Order Masa ini.!

Dapatkan korting 75% paket hosting dan gratis domain + extra diskon 5% dengan menggunakan kupon: MFIKRI

Order Sekarang.!

Download Source

Source: https://mfikri.com/artikel/upload-codeigniter-ajax