In this tutorial will teach Laravel 10 with Ajax Registration Form step by step.if you want to learn ajax with laravel this is the write where you will learn I will show in the simple way to make eloquent Laravel crud application. Here is the best place where learn Laravel 10.laravel php used to create the web application very easy to create and hosting the application.
Installing Laravel 10
Create the new project which name is registation-app.type by following command to create the Laravel project.
composer create-project laravel/laravel registation-app
After Type the Command you have to wait until the project installation get finish. After Finished it.let’s do the setup on database.
Change .env File
Do the database configuration on .env File for username, password and DB Name in this project i have changed the database name as dbc
After that run the project.
Run the Project
Run the Application using following command
php artisan serve
Create Migrations
In Laravel create the table called as Migration
Run the command to create the Migration
php artisan make:migration create_employees_table
After that you can check the inside database folder migrations create_employees_table file has been created
successfully.
Select and open the employees table. add the following table fields name,address,phone
public function up(): void
{
Schema::create('employees', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->string('address');
$table->string('phone')->nullable();
$table->timestamps();
});
}
After modified the columns names then run the migrate command to create the tables in the databases.before the run the
command please save project then run it.
php artisan migrate
Create Controller
php artisan make:controller EmployeeController
After created the controller paste this following code snippet
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Employee;
class EmployeeController extends Controller
{
public function store(Request $request)
{
$empData = [
'name' => $request->name,
'address' => $request->address,
'phone' => $request->phone,
];
Employee::create($empData);
return response()->json([
'status' => 200,
]);
}
}
After create the controller need to create the model.
Create Model
php artisan make:model Employee
Model is used to get the data from the database.
Create the Model name which is Employee
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Employee extends Model
{
protected $table = 'employees';
protected $primaryKey = 'id';
protected $fillable = [
'name',
'address',
'phone'
];
use HasFactory;
}
Create Views
inside the views folder create a file employee.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Employee Registaion</title>
</head>
<body>
<div class="container">
<div class="row">
<h2>Employee Registation</h2>
</div>
<div class="row">
<div class="col-md-6">
<form id ="add-employee-data">
@csrf
<div class="mb-3">
<label for="name" class="form-label">Name</label>
<input type="text" class="form-control" id="name" name ="name">
</div>
<div class="mb-3">
<label for="address" class="form-label">Address</label>
<input type="text" class="form-control" id="address" name ="address">
</div>
<div class="mb-3">
<label for="phone" class="form-label">Phone</label>
<input type="text" class="form-control" id="phone" name ="phone">
</div>
<button type="submit" class="btn btn-primary" id ="add-employee-data">Submit</button>
</form>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script>
$(document).ready(function ()
{
$('#add-employee-data').submit(function (e)
{
e.preventDefault();
const employeedata = new FormData(this);
$.ajax({
url: '{{ route('store') }}',
method: 'post',
data: employeedata,
cache:false,
contentType:false,
processData:false,
dataType:'json',
success: function(response)
{
if(response.status == 200)
{
alert("Addedd");
console.log(response);
$('#add-employee-data')[0].reset();
}
}
});
});
});
</script>
</body>
</html>
Routes
inside the routes folder there is a file web.php lets call the routes
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\EmployeeController;
Route::get('/', function () {
return view('employee');
});
Route::post('/store', [EmployeeController::class, 'store'])->name('store');
Laravel 10 Projects Related Posts
Laravel 10 Full Stack with Vue js Crud Application crud laravel vuejs
https://www.tutussfunny.com/laravel-10-full-stack-with-vue-js-crud-application/
Laravel 10 School Management Project
https://www.youtube.com/watch?v=vTuGQLo2yKU&list=PLuji25yj7oIL8x3VdFFDB0uEJXk43nyx5
i have attached the video link below. which will do this tutorials step by step.
