Cara Upload Form Dengan jQuery Ajax Pada Laravel 10 – Saat membuat sebuah aplikasi web kita sangat bergantung pada form untuk menyimpan data berupa teks maupun file yang ingin di upload karena konsep dari aplikasi web biasanya berupa create, read, update, dan delete (CRUD).
Laravel menyediakan kemudahan dan keamanan dalam menangani pengiriman form ke server seperti fitur csrf protection yang digunakan untuk melindungi aplikasi dari orang yang berpura-pura menjadi pengguna yang terautentikasi. Namun karena Laravel merupakan framework yang menggunakan bahasa pemrograman PHP terkadang terdapat fitur yang kita ingin terapkan namun tidak bisa dilakukan oleh bahasa PHP seperti pengiriman form tanpa me-refresh halaman.
Pada tutorial kali ini saya akan menjelaskan mengenai cara untuk menangani pengiriman form dengan ajax pada Laravel 10 sehingga browser tidak me-refresh maupun mengalihkan (redirect) halaman.
Daftar Isi
Buat Project Laravel Baru
Jika kalian belum memiliki folder project Laravel silahkan buat terlebih dahulu dengan cara menuliskan composer create-project laravel/laravel nama-project-kalian atau dapat ikuti pada dokumentasi resmi Laravel.
Setelah itu tunggu hingga proses instalasi selesai (kecepatan instalasi berdasarkan koneksi internet yang digunakan).
Buat Database
Setelah instalasi selesai buat dan lengkapi koneksi database pada file .env, saya membuat database bernama ‘tutorial’ dengan tabel ‘contact_form’ karena pada tutorial ini saya akan mencoba membuat ‘contact_form’ yang ada pada website. Kalian bisa copy query SQL dibawah lalu paste pada database kalian.
-- --------------------------------------------------------
-- Host: 127.0.0.1
-- Server version: 8.0.30 - MySQL Community Server - GPL
-- Server OS: Win64
-- HeidiSQL Version: 12.1.0.6537
-- --------------------------------------------------------
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET NAMES utf8 */;
/*!50503 SET NAMES utf8mb4 */;
/*!40103 SET @OLD_TIME_ZONE=@@TIME_ZONE */;
/*!40103 SET TIME_ZONE='+00:00' */;
/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;
/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;
/*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */;
-- Dumping database structure for tutorial
CREATE DATABASE IF NOT EXISTS `tutorial` /*!40100 DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci */ /*!80016 DEFAULT ENCRYPTION='N' */;
USE `tutorial`;
-- Dumping structure for table tutorial.contact_form
CREATE TABLE IF NOT EXISTS `contact_form` (
`id` int NOT NULL AUTO_INCREMENT,
`name` varchar(50) NOT NULL,
`email` varchar(50) NOT NULL,
`website` varchar(50) DEFAULT NULL,
`message` text NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;
-- Data exporting was unselected.
/*!40103 SET TIME_ZONE=IFNULL(@OLD_TIME_ZONE, 'system') */;
/*!40101 SET SQL_MODE=IFNULL(@OLD_SQL_MODE, '') */;
/*!40014 SET FOREIGN_KEY_CHECKS=IFNULL(@OLD_FOREIGN_KEY_CHECKS, 1) */;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40111 SET SQL_NOTES=IFNULL(@OLD_SQL_NOTES, 1) */;Buat Form HTML
Selanjutnya buat terlebih dahulu form yang ingin digunakan, pada tutorial ini saya buat sederhana saja karena tutorial ini fokus pada pengiriman formulir dengan ajax.
Baca juga:
- Cara Mendownload Seluruh Isi Google Drive Dengan Google Takeout 2023
- Cara Membuat Website Shortenlink Sendiri Menggunakan Laravel 9
- 3 Plugin Chrome Yang Wajib Dimiliki Web Designer!
- Tutorial Photoshop Cara Hilangkan Jerawat 100% Mudah!
- Cara Memperjelas Foto Yang Blur Online 2021
Siapkan Laravel (Route, Controller, Model, View)
Selanjutnya buat controller dengan perintah php artisan make:controller ContactForm saya membuat controller bernama ContactForm.php. Setelah itu buat model dengan perintah php artisan make:model ContactFormModel.
Buat view terelebih dahulu dengan memasukkan form html yang telah dibuat sebelumnya, pada tutorial ini saya membuat view bernama contact-form.blade.php, setelah view dibuat selanjutnya tambahkan route baru dan arahkan ke method index pada controller yang telah dibuat sebelumnya karena kita akan menggunakan method index untuk me-return view.
<?php
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider and all of them will
| be assigned to the "web" middleware group. Make something great!
|
*/
Route::get('/', [\App\Http\Controllers\ContactForm::class, 'index']);Setelah route ditambahkan selanjutnya buat method index pada controller sehingga isi dari ContactForm.php menjad seperti ini:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class ContactForm extends Controller
{
public function index()
{
return view('contact-form');
}
}Setelah itu buat method untuk menangani penyimpanan form pada controller, jangan lupa untuk mengisi model yang telah dibuaat sebelumnya. Sehingga isi dari controller modelnya menjadi seperti berikut:
Controller :
<?php
namespace App\Http\Controllers;
use App\Models\ContactFormModel;
use Illuminate\Http\Request;
class ContactForm extends Controller
{
public function index()
{
return view('contact-form');
}
public function store(Request $request)
{
$request->validate([
'name' => 'required|min:3|max:50|regex:/^[a-zA-Z\s]+$/',
'email' => 'required|email',
'website' => 'required|url',
'message' => 'required|min:10|max:255'
]);
$insert = ContactFormModel::create($request->all());
if ($insert) {
return response()->json([
'success' => true,
'message' => 'Message sent successfully!'
]);
} else {
return response()->json([
'success' => false,
'message' => 'Message failed to send!'
]);
}
}
}Model :
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class ContactFormModel extends Model
{
use HasFactory;
protected $table = 'contact_form';
protected $fillable = ['name', 'email', 'website', 'message'];
}Proses Pengiriman Form Dengan Ajax
Untuk melakukan ajax request dengan jquery kita harus memanggil jquerynya terlebih dahulu dengan mendownload file jquerynya atau menggunakan content delivery network (cdn) seperti berikut.
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
Setelah itu tambahkan kode untuk menangani pengiriman form.
<script>
$(document).ready(function() {
$('form').on('submit', function(e) {
e.preventDefault()
let form = $(this).serializeArray();
$.ajax({
url: "{{route('contact-form.store')}}",
method: 'POST',
data: form,
success: function(response) {
$('form').trigger('reset');
$('#alert').html(`
<div class="alert alert-success" role="alert">
${response.message}
</div>
`)
},
error: function(error) {
$('#alert').html(`
<div class="alert alert-danger" role="alert">
${error.responseJSON.message}
</div>
`)
}
})
})
})
</script>Pada form yang telah kita buat sebelumnya, form akan dikirimkan setelah tombol submit ditekan event tersebut ditangkap menggunakan kode $('form').on('submit'). Setelah itu form yang biasanya jika disubmit akan me-refresh akan dihentikan dengan cara menambahkan kode e.preventDefault(), kemudian untuk mengambil data pada form menggunakan serializeArray().
Pada bagian $.ajax() merupakan fungsi utama untuk melakukan request http dengan memberikan parameter url, method yang digunakan, dan data yang dikirimkan, saat data berhasil dikirim maka form akan dikosongkan dengan $('form').trigger('reset') dan menampilkan alert success dengan respon yang diberikan oleh controller, begitu pula jika terjadi error maka akan diberikan alert error dengan respon dari database. Hasilnya seperti dibawah ini :
Tampilan saat berhasil mengirim pesan:
Tampilan saat gagal mengirim pesan:
Kode Final
Route
<?php
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider and all of them will
| be assigned to the "web" middleware group. Make something great!
|
*/
Route::get('/', [\App\Http\Controllers\ContactForm::class, 'index']);
Route::post('/store', [\App\Http\Controllers\ContactForm::class, 'store'])->name('contact-form.store');Model
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class ContactFormModel extends Model
{
use HasFactory;
protected $table = 'contact_form';
protected $fillable = ['id','name', 'email', 'website', 'message'];
}View
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Contact Me</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
</head>
<body style="height: 100vh; margin: 0; display: flex; justify-content: center; align-items: center;">
<div class="container justify-content-center">
<div class="row justify-content-center">
<div class="col-6">
<form>
@csrf
<h2 class="text-center mb-5">Contact Us</h2>
<div id="alert">
<!-- <div class="alert alert-success" role="alert">
A simple success alert—check it out!
</div> -->
</div>
<div class="mb-3">
<label for="name" class="form-label">Name</label>
<input type="name" class="form-control" name="name" id="name">
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" name="email" id="email">
</div>
<div class="mb-3">
<label for="website" class="form-label">Website</label>
<input type="website" class="form-control" name="website" id="website">
</div>
<div class="mb-3">
<label for="message" class="form-label">Message</label>
<textarea name="message" id="message" class="form-control" cols="30" rows="10"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous">
</script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$('form').on('submit', function(e) {
e.preventDefault()
let form = $(this).serializeArray();
$.ajax({
url: "{{route('contact-form.store')}}",
method: 'POST',
data: form,
success: function(response) {
$('form').trigger('reset');
$('#alert').html(`
<div class="alert alert-success" role="alert">
${response.message}
</div>
`)
},
error: function(error) {
$('#alert').html(`
<div class="alert alert-danger" role="alert">
${error.responseJSON.message}
</div>
`)
}
})
})
})
</script>
</body>
</html>Controller
<?php
namespace App\Http\Controllers;
use App\Models\ContactFormModel;
use Illuminate\Http\Request;
class ContactForm extends Controller
{
public function index()
{
return view('contact-form');
}
public function store(Request $request)
{
$request->validate([
'name' => 'required|min:3|max:50|regex:/^[a-zA-Z\s]+$/',
'email' => 'required|email',
'website' => 'required|url',
'message' => 'required|min:10|max:255'
]);
$insert = ContactFormModel::create($request->all());
if ($insert) {
return response()->json([
'success' => true,
'message' => 'Message sent successfully!'
]);
} else {
return response()->json([
'success' => false,
'message' => 'Message failed to send!'
]);
}
}
}Mungkin cukup sekian tutorial kali ini, jika ada pertanyaan maupun saran silahkan berikan melalui kolom komentar dibawah, terimakasih.
Leave a Reply