08 Nov 2021 10:50
Dipost oleh Admin
892
0
Sobatcoding.com - Codeigniter 4 cara submit form dan upload file atau photo menggunakan ajax
Pada kesempatan kali ini admin akan berbagi cara menyimpan data ke database menggunakan ajax dan php tanpa reload halaman menggunakan codeigniter 4. Kita juga akan mencoba untuk upload file atau gambar dan membuat preview gambar sebelum di simpan ke database. Pada tutorial kali ini menggunakan beberapa plugin seperti jquery, bootstrap, font awesome dan jquery validation sebagai validasi form.
Untuk lebih jelasnya perhatikan langkah-langkah berikut ini:
Menyiapkan Database
Kita buat terlebih dahulu sebuah database dan table m_users untuk sebagai contoh untuk digunakan sebagai penyimpan data nantinya. Kalian bisa import script mysql dari kode berikut ini.
CREATE TABLE IF NOT EXISTS `m_users` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
`address` varchar(150) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
`photo` varchar(225) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
`created_at` timestamp NULL DEFAULT NULL,
`updated_at` timestamp NULL DEFAULT NULL,
`deleted_at` timestamp NULL DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
Membuat Model
Kita buat sebuah Model bernama Users.php dan masukkan kode seperti berikut.
<?php
namespace App\Models;
use CodeIgniter\Model;
class Users extends Model
{
protected $table = 'm_users';
protected $primaryKey = 'id';
protected $useAutoIncrement = true;
protected $returnType = 'array';
protected $useSoftDeletes = true;
protected $allowedFields = ['name', 'address', 'photo'];
protected $useTimestamps = true;
protected $createdField = 'created_at';
protected $updatedField = 'updated_at';
protected $deletedField = 'deleted_at';
}
Membuat View
Buatlah sebuah view html bernama form.html, kemudian buatlah kode seperti berikut ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Submit Form Menggunakan Ajax</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<section>
<div class="container">
<h1>Belajar Submit Data menggunakan Ajax</h1>
<div class="card card-body">
<form id="form-submit" method="POST" action="<?= base_url('upload') ?>" enctype="multipart/form-data" >
<div class="form-group">
<label>Nama</label>
<input type="text" class="form-control" id="name" name="fullname" placeholder="Nama Lengkap" required />
</div>
<div class="form-group">
<label>Alamat</label>
<input type="text" class="form-control" id="address" name="address" placeholder="Alamat" required />
</div>
<div class="form-group">
<label class="d-block">Upload Photo</label>
<input type="file" id="photo" name="photo" />
</div>
<div class="form-group">
<div id="display-photo" class="border" style="width:150px;height:150px;background:#b5b5b5">
</div>
</div>
<button type="submit" name="save" class="btn btn-primary "> SIMPAN</button>
</form>
<!-- Modal -->
<div class="modal fade" id="modal-loader" tabindex="-1" role="dialog" aria-labelledby="modalLoader" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalLoader">Loading...</h5>
</div>
<div class="modal-body">
<p class="h1 text-center"><i class="fa fa-spinner fa-spin" aria-hidden="true"></i></p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/js/all.min.js" integrity="sha512-cyAbuGborsD25bhT/uz++wPqrh5cqPh1ULJz4NSpN9ktWcA6Hnh9g+CWKeNx2R0fgQt+ybRXdabSBgYXkQTTmA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.js"></script>
</body>
</html>
Membuat Controller
Buatlah sebuah controller bernama Upload.php kemudian buatlah kode seperti berikut ini.
<?php
namespace App\Controllers;
#use CodeIgniter\Controller;
use CodeIgniter\HTTP\Request;
use App\Models\Users;
class Upload extends BaseController
{
public function index()
{
return view('form');
}
public function doingUpload()
{
$success = false;
$message = "Gagal simpan data";
$data = null;
$data = [
'name' => $this->request->getVar('name'),
'address' => $this->request->getVar('address'),
];
$user = new Users;
$res = $user->insert($data);
if( $res )
{
$success = true;
$id = $user->getInsertID();
$message = "Berhasil simpan data";
if( $this->request->getFile('photo') )
{
$photo = $this->request->getFile('photo');
$name = $photo->getName();
$temp = $photo->getTempName();
$ext = $photo->getClientExtension();
$newName = $photo->getRandomName();
if ($photo->isValid() && ! $photo->hasMoved()) {
if( in_array($ext, ['jpg', 'jpeg', 'png']) )
{
$path = FCPATH. 'photos/'. $newName;
$photo->move( FCPATH. 'photos', $newName);
$edit = new Users;
$user = $edit->update($id, ['photo'=> str_replace( FCPATH , "", $path) ]);
$message = "Berhasil simpan data dan upload photo";
}else{
$message = "Gagal upload photo. File yang boleh diupload adalah tipe image";
}
$data = $edit->find($id);
}
}
}
return $this->response->setJSON(['success' => $success, 'data' => $data, "message" => $message]);
}
}Membuat Javascript
Tambahkan function javascript di dalam file form.html seperti berikut ini.
<script>
$(document).ready(function() {
$(document).on('change', '#photo', function(e) {
var file = $(this)[0].files[0];
var exts = ["image/png", "image/jpg", "image/jpeg"];
var max = 1024 * 1024;
//validasi image
if( !exts.includes(file.type) )
{
alert("File must be an image. JPG OR PNG");
return false;
}
//validasi image size
if( file.size > max)
{
alert("File not large than 1 MB");
return false;
}
if (file) {
var reader = new FileReader();
reader.onload = function(e) {
var image = new Image();
image.src = e.target.result;
image.onload = function() {
$("#display-photo").css("background-image", "url(" + this.src + ")");
$("#display-photo").css("background-position", "center");
$("#display-photo").css("background-size", "cover");
$("#display-photo").css("background-repeat", "no-repeat");
};
}
reader.readAsDataURL(file);
} else {
alert('select a file to see preview');
$("#display-photo").css("background", "#b5b5b5");
}
});
$('#form-submit').validate({
errorPlacement: function(label, element) {
label.addClass('mt-2 text-danger');
label.insertAfter(element);
},
highlight: function(element, errorClass) {
$(element).parent().addClass('has-danger')
$(element).addClass('form-control-danger')
},
submitHandler: function(form) {
var formData = new FormData();
formData.append('name', $('#name').val());
formData.append('address', $('#address').val());
formData.append('photo', $('#photo').prop('files')[0]);
$.ajax({
url: $('#form-submit').attr('action'),
type: "POST",
data: formData,
contentType: false,
processData: false,
beforeSend: function() {
$('#modal-loader').modal({
show: true,
keyboard: false,
backdrop: 'static'
});
},
success: function(response) {
$('#modal-loader').modal('hide');
alert(response.message);
}
}).fail(function() {
$('#modal-loader').modal('hide');
alert('error');
})
.always(function() {
$('#modal-loader').modal('hide');
});
return false;
}
});
})
</script>Kode di atas berfungsi untuk display image sebelum upload via ajax POST.
Output View
Berikut tampilan halaman output
Sekian tutorial kali ini, semoga bermanfaat
Jika teman-teman memiliki pertanyaan atau saran mengenai artikel ini, jangan ragu untuk meninggalkan komentar pada form di bawah ini.
CodeIgniter (22)
Komentar 0