Laravel 10 with Ajax Registration Form

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.laravel tutorial souce code

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