Cara Mengunggah File dengan CodeIgniter dan AJAX

() translation by (you can also view the original English article)

Mengunggah file secara bersamaan dapat menjadi hal yang menyakitkan pada saat-saat terbaiknya, tetapi ketika digabungkan dengan CodeIgniter, ini dapat menjadi pengalaman yang sangat membuat frustrasi. Saya akhirnya menemukan cara yang tidak hanya berfungsi secara konsisten, tetapi tetap pada pola MVC. Baca terus untuk mengetahui caranya!

Kata Pengantar

Dalam tutorial ini, kita akan menggunakan framework PHP CodeIgniter, framework JavaScript jQuery, dan skrip AjaxFileUpload.

Diasumsikan Anda memiliki pengetahuan tentang CodeIgniter dan jQuery, tetapi tidak diperlukan pengetahuan sebelumnya tentang AjaxFileUpload. Juga diasumsikan bahwa Anda sudah memiliki instalasi CodeIgniter yang sudah disiapkan.

Demi keringkasan, pemuatan di libraries/models/helpers tertentu telah dihilangkan. Ini dapat ditemukan dalam kode sumber yang disediakan, dan hal-hal yang cukup standar.

Anda juga membutuhkan database, dan sebuah tabel, yang disebut files. SQL untuk membuat tabel tersebut adalah:

CREATE TABLE `files` (
  `id` int NOT NULL AUTO_INCREMENT PRIMARY KEY,
  `filename` varchar(255) NOT NULL,
  `title` varchar(100) NOT NULL
);

Pada akhir tutorial, struktur file Anda akan terlihat mirip dengan ini (menghilangkan folder/file yang tidak diubah):

public_html/
-- application/
---- controllers/
------ upload.php
---- models/
------ files_model.php
---- views/
------ upload.php
------ files.php
-- css/
---- style.css
-- files/
-- js/
---- AjaxFileUpload.js
---- site.js

Langkah 1 - Membuat Formulir

Mengatur Controller

Pertama, kita perlu membuat formulir unggahan kita. Buat Controller baru, yang disebut upload, dan dalam metode index, render view upload.

Controller Anda akan terlihat seperti ini:

class Upload extends CI_Controller 
{
  public function __construct()
	{
		parent::__construct();
		$this->load->model('files_model');
		$this->load->database();
		$this->load->helper('url');
	}

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

Kita juga memuat model files, sehingga kita dapat menggunakannya dalam metode kita. Alternatif yang lebih baik mungkin untuk autoload dalam proyek Anda yang sebenarnya.

Membuat Formulir

Membuat view Anda, upload.php. View ini akan berisi formulir unggahan kita.

<!doctype html>
<html>
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
	<script src="<?php echo base_url()?>js/site.js"></script>
	<script src="<?php echo base_url()?>js/ajaxfileupload.js"></script>
	<link href="<?php echo base_url()?>css/style.css" rel="stylesheet" />
</head>
<body>
	<h1>Upload File</h1>
	<form method="post" action="" id="upload_file">
		<label for="title">Title</label>
		<input type="text" name="title" id="title" value="" />

		<label for="userfile">File</label>
		<input type="file" name="userfile" id="userfile" size="20" />

		<input type="submit" name="submit" id="submit" />
	</form>
	<h2>Files</h2>
	<div id="files"></div>
</body>
</html>

Jangan lupa letakkan ajaxfileupload.js di js/.

Seperti yang Anda lihat, kita memuat skrip kita di bagian atas; jQuery, AjaxFileUpload, dan file js kita sendiri. Ini akan menjadi JavaScript kustom kita.

Kemudian, kita hanya membuat formulir HTML standar. Div #files yang kosong adalah tempat daftar file yang diunggah.

Beberapa CSS Sederhana

Hanya saja tidak terlihat begitu buruk, mari tambahkan beberapa CSS dasar ke file style.css kita di css/.

h1, h2 { font-family: Arial, sans-serif; font-size: 25px; }
h2 { font-size: 20px; }

label { font-family: Verdana, sans-serif; font-size: 12px; display: block; }
input { padding: 3px 5px; width: 250px; margin: 0 0 10px; }
input[type="file"] { padding-left: 0; }
input[type="submit"] { width: auto; }

#files { font-family: Verdana, sans-serif; font-size: 11px; }
#files strong { font-size: 13px; }
#files a { float: right; margin: 0 0 5px 10px; }
#files ul {	list-style: none; padding-left: 0; }
#files li { width: 280px; font-size: 12px; padding: 5px 0; border-bottom: 1px solid #CCC; }

Langkah 2 - Javascript

Buat dan buka site.js di js/. Tempatkan kode berikut:

$(function() {
	$('#upload_file').submit(function(e) {
		e.preventDefault();
		$.ajaxFileUpload({
			url 			:'./upload/upload_file/', 
			secureuri		:false,
			fileElementId	:'userfile',
			dataType		: 'json',
			data			: {
				'title'				: $('#title').val()
			},
			success	: function (data, status)
			{
				if(data.status != 'error')
				{
					$('#files').html('<p>Reloading files...</p>');
					refresh_files();
					$('#title').val('');
				}
				alert(data.msg);
			}
		});
		return false;
	});
});

JavaScript membajak pengiriman formulir dan AjaxFileUpload mengambil alihnya. Di latar belakang, itu menciptakan iframe dan mengirimkan data melalui itu.

Kita melewatkan nilai title dalam parameter data panggilan AJAX. Jika Anda memiliki lebih banyak bidang dalam formulir, Anda akan meneruskannya di sini.

Kita kemudian memeriksa kembalian kita (yang akan ada di JSON). Jika tidak ada kesalahan, kita menyegarkan daftar file (lihat di bawah), kosongkan bidang title. Apapun itu, kita memperingatkan pesan tanggapannya.

Langkah 3 - Mengunggah File

Controller

Sekarang untuk mengunggah file-nya. URL yang akan kita unggah adalah /upload/upload_file/, jadi buat metode baru di controller upload, dan tempatkan kode berikut di dalamnya.

public function upload_file()
{
	$status = "";
	$msg = "";
	$file_element_name = 'userfile';
	
	if (empty($_POST['title']))
	{
		$status = "error";
		$msg = "Please enter a title";
	}
	
	if ($status != "error")
	{
		$config['upload_path'] = './files/';
		$config['allowed_types'] = 'gif|jpg|png|doc|txt';
		$config['max_size']	= 1024 * 8;
		$config['encrypt_name'] = TRUE;

		$this->load->library('upload', $config);

		if (!$this->upload->do_upload($file_element_name))
		{
			$status = 'error';
			$msg = $this->upload->display_errors('', '');
		}
		else
		{
			$data = $this->upload->data();
			$file_id = $this->files_model->insert_file($data['file_name'], $_POST['title']);
			if($file_id)
			{
				$status = "success";
				$msg = "File successfully uploaded";
			}
			else
			{
				unlink($data['full_path']);
				$status = "error";
				$msg = "Something went wrong when saving the file, please try again.";
			}
		}
		@unlink($_FILES[$file_element_name]);
	}
	echo json_encode(array('status' => $status, 'msg' => $msg));
}

Kode ini dimuat di library upload CodeIgniter dengan konfigurasi kustom. Untuk referensi lengkapnya, periksa dokumentasi CodeIgniter.

Kita melakukan pemeriksaan sederhana untuk menentukan apakah judul itu kosong atau tidak. Jika tidak, kita memuat di perpustakaan upload CodeIgniter. Perpustakaan ini menangani banyak validasi file untuk kita.

Selanjutnya, kita mencoba mengunggah file. Jika berhasil, kita menyimpan judul dan nama file (diteruskan melalui array data yang dikembalikan).

Ingat untuk menghapus file temp dari server, dan echo JSON-nya sehingga kita tahu apa yang terjadi.

Model

Sesuai dengan pola MVC, interaksi DB kita akan ditangani oleh model.

Buat file_model.php, dan tambahkan kode berikut:

class Files_Model extends CI_Model {

	public function insert_file($filename, $title)
	{
		$data = array(
			'filename'		=> $filename,
			'title'			=> $title
		);
		$this->db->insert('files', $data);
		return $this->db->insert_id();
	}

}

Folder Files

Kita juga harus membuat folder tempat file-file kita diunggah. Buat file baru di root web Anda yang bernama files, pastikan rewriteble oleh server.

Langkah 4 - Daftar File

Setelah unggahan berhasil, kita perlu menyegarkan daftar file untuk menampilkan perubahannya.

JavaScript

Buka site.js dan tambahkan kode berikut ke bagian bawah file, di bawah yang lainnya.

function refresh_files()
{
	$.get('./upload/files/')
	.success(function (data){
		$('#files').html(data);
	});
}

Ini hanya memanggil url dan memasukkan kembali data ke div dengan id file.

Kita perlu memanggil fungsi ini pada pemuatan halaman untuk menampilkan daftar file pada awalnya. Tambahkan ini dalam fungsi document ready di bagian atas file:

1	refresh_files();

Controller

URL yang kita panggil untuk mendapatkan daftar file adalah /upload/files/, jadi buatlah metode baru yang disebut files, dan tempatkan kode berikut:

public function files()
{
	$files = $this->files_model->get_files();
	$this->load->view('files', array('files' => $files));
}

Metode yang cukup kecil, kita menggunakan model kita untuk memuat dalam file yang saat ini disimpan dan meneruskannya ke view.

Model

Model kita menangani pengambilan daftar file. Buka files_model.php, dan tambahkan fungsi get_files().

public function get_files()
{
	return $this->db->select()
			->from('files')
			->get()
			->result();
}

Cukup sederhana: pilih semua file yang tersimpan di database.

View

Kita perlu membuat view untuk menampilkan daftar file. Buat file baru, yang disebut files.php, dan tempelkan kode berikut:

<?php
if (isset($files) && count($files))
{
	?>
		<ul>
			<?php
			foreach ($files as $file)
			{
				?>
				<li class="image_wrap">
					<a href="#" class="delete_file_link" data-file_id="<?php echo $file->id?>">Delete</a>
					<strong><?php echo $file->title?></strong>
					<br />
					<?php echo $file->filename?>
				</li>
				<?php
			}
			?>
		</ul>
	</form>
	<?php
}
else
{
	?>
	<p>No Files Uploaded</p>
	<?php
}
?>

Perulangan ini melalui file dan menampilkan judul dan nama file masing-masing. Kita juga menampilkan tautan hapus, yang menyertakan atribut data dari ID file.

Menghapus File

Untuk mengakhiri tutorial, kita akan menambahkan fungsi untuk menghapus file, juga menggunakan AJAX.

JavaScript

Tambahkan yang berikut dalam fungsi document ready:

$('.delete_file_link').live('click', function(e) {
	e.preventDefault();
	if (confirm('Are you sure you want to delete this file?'))
	{
		var link = $(this);
		$.ajax({
			url			: './upload/delete_file/' + link.data('file_id'),
			dataType	: 'json',
			success		: function (data)
			{
				files = $(#files);
				if (data.status === "success")
				{
					link.parents('li').fadeOut('fast', function() {
						$(this).remove();
						if (files.find('li').length == 0)
						{
							files.html('<p>No Files Uploaded</p>');
						}
					});
				}
				else
				{
					alert(data.msg);
				}
			}
		});
	}
});

Itu selalu ide yang baik untuk mendapatkan konfirmasi pengguna saat menghapus informasi.

Ketika tautan hapus diklik, kita menampilkan kotak konfirmasi yang menanyakan apakah pengguna itu yakin. Jika ya, kita membuat panggilan ke /upload/delete_file, dan jika berhasil, kita memudarkannya dari daftar.

Controller

Seperti di atas, url yang kita panggil adalah /upload/delete_file/, jadi buat metode delete_file, dan tambahkan kode berikut:

public function delete_file($file_id)
{
	if ($this->files_model->delete_file($file_id))
	{
		$status = 'success';
		$msg = 'File successfully deleted';
	}
	else
	{
		$status = 'error';
		$msg = 'Something went wrong when deleteing the file, please try again';
	}
	echo json_encode(array('status' => $status, 'msg' => $msg));
}

Sekali lagi, kita membiarkan model melakukan pekerjaan beratnya, meng-echo output.

Model

Kita sekarang berada di bagian akhir dari teka-teki: dua metode terakhir kita.

public function delete_file($file_id)
{
	$file = $this->get_file($file_id);
	if (!$this->db->where('id', $file_id)->delete('files'))
	{
		return FALSE;
	}
	unlink('./files/' . $file->filename);	
	return TRUE;
}

public function get_file($file_id)
{
	return $this->db->select()
			->from('files')
			->where('id', $file_id)
			->get()
			->row();
}

Karena kami hanya memberikan ID, kita perlu mendapatkan nama file, jadi kita membuat metode baru untuk memuat file. Setelah dimuat, kita menghapus record dan menghapus file dari server.

Itu dia, tutorial selesai! Jika Anda menjalankannya, Anda harus dapat mengunggah file, melihatnya muncul, dan kemudian menghapusnya; semua tanpa meninggalkan halaman.

Pemikiran Akhir

Tentunya, view dapat dilakukan dengan beberapa penyesuaian, tetapi tutorial ini seharusnya memberi Anda cukup untuk dapat mengintegrasikan ini ke dalam situs Anda.

Namun, ada beberapa kekurangan dalam metode ini:

Anda hanya dapat mengunggah satu file dalam satu waktu, tetapi ini dapat diperbaiki dengan mudah menggunakan layanan seperti Uploadify.
Tidak ada progress bar yang dibangun di skrip.
Kita dapat mengurangi panggilan SQL dengan memperbarui file div saat unggahan file, bukan sepenuhnya menggantikannya.

Terima kasih telah membaca!