Home Laravel 9 Laravel 10 with Ajax Registration Form

Laravel 10 with Ajax Registration Form

9 min read
0
0
712

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.

 

Load More Related Articles
Load More By admin
Load More In Laravel 9

Leave a Reply

Your email address will not be published. Required fields are marked *

Check Also

Build Crud App with Laravel 11 and Vue.js

In this tutorial will teach Vue Laravel 10 CRUD using Vite step by step. Laravel  10 CRUD …