Ajax CRUD Operation in Laravel 11
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class NotificationController extends Controller
{
public function indexNotification()
{
return view("demo");
}
public function notification($type)
{
switch ($type) {
case "success":
return back()->with("success", "User created successfully.");
break;
case "info":
return back()->with("info", "User updated successfully.");
break;
case "warning":
return back()->with("warning", "User can not access page.");
break;
case "error":
return back()->with("error", "This is testing error.");
break;
default:
break;
}
}
public function index_notification()
{
return view("notifications.list");
}
public function notification_list($type)
{
switch ($type) {
case "success":
return back()->with("success", "User created successfully.");
break;
case "info":
return back()->with("info", "User updated successfully.");
break;
case "warning":
return back()->with("warning", "User can not access page.");
break;
case "error":
return back()->with("error", "This is testing error.");
break;
default:
break;
}
}
}
Above File is app\Http\Controllers\NotificationController.php FileBelow File is app\Http\Controllers\TaskController.php File
<?php
namespace App\Http\Controllers;
use App\Models\Task;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
class TaskController extends Controller
{
public function showTask()
{
$tasks = DB::table("tasks")->get();
return view("home", ["data" => $tasks]);
}
public function validateUser(Request $request)
{
if ($request->validate([
"username" => "required",
"useremail" => "required|email|unique:tasks,email,except,id",
"userpassword" => "required|alpha_num|min:5",
"userage" => "required|numeric|between:18,100",
"usercity" => "required"
], [
"username.required" => "Username field is required!",
"useremail.required" => "Useremail field is required!",
"useremail.email" => "Please Enter the correct Email Address!",
"useremail.unique" => "Email Address is already registered, Please use Unique Email Address!",
"userpassword.required" => "Userpassword field is required!",
"userpassword.alpha_num" => "Userpassword must be Alpha Numeric!",
"userpassword.min" => "Userpassword length should not less than 5!",
"userage.required" => "Userage field is required!",
"userage.numeric" => "Userage must be Numeric!",
"userage.between" => "Userage must be between 18 to 100!",
"usercity.required" => "Usercity field is required!"
])) {
$tasks = Task::insert([
"name" => $request->username,
"email" => $request->useremail,
"password" => $request->userpassword,
"age" => $request->userage,
"city" => $request->usercity
]);
if ($tasks) {
$tasks = DB::table("tasks")->orderBy("id", "desc")->get();
return view("home", ["data" => $tasks]);
}
return redirect()->route("home.task");
} else {
return redirect()->route("adduser");
}
}
public function singleTask(string $id)
{
$tasks = DB::table("tasks")->where("id", $id)->get();
return view("task", ["data" => $tasks]);
}
public function updatePage(string $id)
{
$tasks = DB::table("tasks")->where("id", $id)->first();
return view("updatetask", ["data" => $tasks]);
}
public function updateTask(Request $request, $id)
{
if ($request->validate([
"username" => "required",
"useremail" => "required|email|unique:tasks,email,except,id",
"userpassword" => "required|alpha_num|min:5",
"userage" => "required|numeric|between:18,100",
"usercity" => "required"
], [
"username.required" => "Username field is required!",
"useremail.required" => "Useremail field is required!",
"useremail.email" => "Please Enter the correct Email Address!",
"useremail.unique" => "Email Address is already registered, Please use Unique Email Address!",
"userpassword.required" => "Userpassword field is required!",
"userpassword.alpha_num" => "Userpassword must be Alpha Numeric!",
"userpassword.min" => "Userpassword length should not less than 5!",
"userage.required" => "Userage field is required!",
"userage.numeric" => "Userage must be Numeric!",
"userage.between" => "Userage must be between 18 to 100!",
"usercity.required" => "Usercity field is required!"
])) {
$tasks = DB::table("tasks")->where("id", $id)->update(
[
"name" => $request->username,
"email" => $request->useremail,
"password" => $request->userpassword,
"age" => $request->userage,
"city" => $request->usercity
]
);
if ($tasks) {
return redirect()->route("home.task");
}
} else {
return redirect()->route("update.task");
}
}
public function deleteTask(string $id)
{
$tasks = DB::table("tasks")->where("id", $id)->delete();
if ($tasks) {
return response()->json([
"status" => "success",
"message" => "Record deleted successfully!"
], 200);
} else {
$msg = "<h1>Data Not Deleted.</h1>";
return response()->json([
"status" => "error",
"message" => "Failed to delete the record!"
], 404);
// echo json_encode([
// "error" => "Record Not deleted."
// ], 404);
}
}
}
Below File is app\Http\Controllers\UserController.php File
<?php
namespace App\Http\Controllers;
use App\Http\Requests\UserRequest;
use Illuminate\Http\Request;
use App\Rules\Uppercase;
use Illuminate\Support\Facades\Validator;
use Closure;
class UserController extends Controller
{
// There are two ways for applying Custom Validation Rule : Using Rule Object and Using Closure
// Applying Custom Validation Rule using "Rule Object" way in Laravel as shown below :
// public function addUser(Request $request)
// {
// $validate = $request->validate([
// "username" => ["required", new Uppercase],
// "useremail" => "required|email",
// "userpassword" => "required|alpha_num|min:5",
// "userage" => "required|numeric|between:18,100",
// "usercity" => "required"
// ]);
// return $request->all();
// }
// Applying Custom Validation Rule using "Closure" Method in Laravel as shown below :
// public function addUser(Request $request)
// {
// $validate = $request->validate([
// "username" => [
// "required",
// // Here below Field name(Here "username") will be store in "$attribute"
// function (string $attribute, mixed $value, Closure $fail) {
// if (strtoupper($value) !== $value) {
// $fail("The :attribute must be uppercase.");
// }
// }
// ],
// "useremail" => "required|email",
// "userpassword" => "required|alpha_num|min:5",
// "userage" => "required|numeric|between:18,100",
// "usercity" => "required"
// ]);
// // return $request->all();
// // dd($validate);
// echo $validate["username"];
// }
// public function addUser(UserRequest $request)
// {
// // return $request->all();
// // return $request->only(["username","usercity"]);
// return $request->except(["userpassword","usercity"]);
// }
public function addUser(Request $request)
{
// dd($request->all());
$request->validate([
"username" => "required",
"useremail" => "required|email",
"userpassword" => "required|alpha_num|min:5",
"userage" => "required|numeric|between:18,100",
"usercity" => "required"
], [
"username.required" => "Username field is required!",
"useremail.required" => "Useremail field is required!",
"useremail.email" => "Please Enter the correct Email Address!",
"userpassword.required" => "User Password field is required!",
"userpassword.alpha_num" => "User Password must be Alpha Numeric!",
"userpassword.min" => "User Password length should not less than 5",
"userage.required" => "User Age field is required!",
"userage.numeric" => "User Age must be Numeric!",
"userage.between" => "User Age must be between 18 to 100!",
"usercity.required" => "User City field is required!"
]);
return $request->all();
}
}
Below File is app\Models\Task.php File
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Task extends Model
{
use HasFactory;
public $timestamps = true;
protected $table = "tasks";
protected $primarykey = "id";
protected $fillable = [
"name",
"email",
"password",
"age",
"city"
];
}
Below File is database\migrations\2024_11_20_043921_create_tasks_table.php File
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::create('tasks', function (Blueprint $table) {
$table->id();
$table->string("name", 30);
$table->string("email", 191)->unique();
$table->string("password");
$table->integer("age");
$table->string("city", 30);
$table->timestamps();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('tasks');
}
};
Below File is resources\views\adduser.blade.php File
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Add User Data</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-4">
<h1>Add New User</h1>
@if($errors->any())
<ul class="alert alert-danger">
@foreach($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
@endif
<form action="{{ route('validate.user') }}" method="POST">
@csrf
<div class="mb-3">
<label class="form-label">Name</label>
<input type="text" value="{{ old('username') }}" class="form-control @error('username') is-invalid @enderror" name="username">
<span class="text-danger">
@error("username")
{{ $message }}
@enderror
</span>
</div>
<div class="mb-3">
<label class="form-label">Email</label>
<input type="email" value="{{ old('useremail') }}" class="form-control @error('useremail') is-invalid @enderror" name="useremail">
<span class="text-danger">
@error("useremail")
{{ $message }}
@enderror
</span>
</div>
<div class="mb-3">
<label class="form-label">Password</label>
<input type="password" value="{{ old('userpassword') }}" class="form-control @error('userpassword') is-invalid @enderror" name="userpassword">
<span class="text-danger">
@error("userpassword")
{{ $message }}
@enderror
</span>
</div>
<div class="mb-3">
<label class="form-label">Age</label>
<input type="text" value="{{ old('userage') }}" class="form-control @error('userage') is-invalid @enderror" name="userage">
<span class="text-danger">
@error("userage")
{{ $message }}
@enderror
</span>
</div>
<div class="mb-3">
<label class="form-label">City</label>
<select class="form-control" name="usercity">
<option value="Delhi">Delhi</option>
<option value="Mumbai">Mumbai</option>
<option value="Goa">Goa</option>
<option value="Pune">Pune</option>
<option value="Ahmedabad">Ahmedabad</option>
</select>
<span class="text-danger">
@error("usercity")
{{ $message }}
@enderror
</span>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
<a href="{{ route('home.task') }}" class="btn btn-primary">Go to Home</a>
</form>
</div>
</div>
</div>
</body>
</html>
Below File is resources\views\home.blade.php File
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Home Page</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" 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 src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js" integrity="sha512-VEd+nq25CkR676O+pLBnDW09R7VQX9Mdiij052gVCp5yVH3jGtH70Ho/UUv4mJDsEdTvqRCFZg0NKGiojGnUCw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.css" integrity="sha512-3pIirOrwegjM6erE5gPSwkUzO+3cTjpnV9lexlNZqvupR64iZBnOOTiiLPb9M36zpMScbmUNIcHUqKD47M719g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" integrity="sha512-vKMx8UnXk60zUwyUnUPM3HbQo8QfmNx7+ltw8Pm5zLusl1XIfwcxo8DbWCqMGKaWeNxWA8yrx5v3SaVpMvR3CA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
{{-- Modal --}}
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Delete Record</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Are you sure to delete record ?
<input type="text" name="task_delete_id" id="task_id">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
{{-- <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#exampleModal">Delete</button> --}}
<meta name="csrf-token" content="{{ csrf_token() }}">
<a href="javascript:void(0);" data-token="{{ csrf_token() }}" class="btn btn-danger mdl">Delete</a>
{{-- <a href="{{ route("notification", "success") }}" class="btn btn-success">Delete</a> --}}
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-10">
<a href="{{ route('addNew') }}" class="btn btn-primary btn-sm mt-5 mb-5">Add New User</a>
<table class="table table-bordered table-striped table-hover" id="bodyData">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Password</th>
<th>Age</th>
<th>City</th>
<th>View</th>
<th>Update</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
@foreach($data as $key => $value)
<tr>
<td>{{ $value->id }}</td>
<td>{{ $value->name }}</td>
<td>{{ $value->email }}</td>
<td>{{ $value->password }}</td>
<td>{{ $value->age }}</td>
<td>{{ $value->city }}</td>
<td><a href="{{ route("single.task", $value->id) }}" class="btn btn-primary btn-sm">View</a></td>
<td><a href="{{ route("update.page", $value->id) }}" class="btn btn-warning btn-sm">Update</a></td>
{{-- <td><a href="{{ route("delete.task", $value->id) }}" data-tid="{{ $value->id }}" class="btn btn-danger btn-sm deleteBtn" data-bs-toggle="modal" data-bs-target="#exampleModal">Delete</a></td> --}}
<td><button data-tid="{{ $value->id }}" class="btn btn-danger btn-sm deleteBtn">Delete</button></td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
{{-- <script type="text/javascript">
$(".btn-delete").click(function(){
return confirm("Are you sure to delete ?");
});
</script> --}}
<script type="text/javascript">
$(document).ready(function(){
$(document).on("click", ".deleteBtn", function(e){
e.preventDefault();
var task_id = $(this).attr("data-tid");
$("#task_id").val(task_id);
$("#exampleModal").modal("show");
// var deleteUrl = "http://127.0.0.1:8000/delete/"+task_id;
// $(".mdl").attr("href",deleteUrl);
});
$(document).on("click", ".mdl", function(e){
var task_id = $("#task_id").val();
var token = $("meta[name='csrf-token']").attr("content");
$.ajax({
url: "http://127.0.0.1:8000/delete/"+task_id,
type: "GET",
data: { tid: task_id, "_token":token },
dataType: "json",
processData: false,
contentType: false,
success: function(data){
console.log(data.message);
toastr.success(data.message,"success");
$("#exampleModal").modal('hide');
setTimeout(() => {
location.reload();
}, 2000);
},
error: function(error){
toastr.error(error.message,"Error");
toastr.options = {
"closeButton": true,
"progressBar": true
};
}
});
});
});
</script>
@include("notifications")
</body>
</html>
Below File is resources\views\notifications.blade.php File
<script type="text/javascript">
@session("success")
toastr.success("Success","Success");
@endsession
@session("info")
toastr.info("Info","Info");
@endsession
@session("warning")
toastr.warning("Warning","Warning");
@endsession
@session("error")
toastr.error("error","Error");
@endsession
// toastr.success("hello","success");
// toastr.success("{{ session('message') }}");
</script>
Below File is resources\views\task.blade.php File
<h1>User Details</h1>
@foreach($data as $key => $value)
<h2>Name : {{ $value->name }}</h2>
<h2>Email : {{ $value->email }}</h2>
<h2>Password : {{ $value->password }}</h2>
<h2>Age : {{ $value->age }}</h2>
<h2>City : {{ $value->city }}</h2>
@endforeach
Below File is resources\views\updatetask.blade.php File
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Update Task</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-10">
<h1>Update User Data</h1>
<form action="{{ route('update.task', $data->id) }}" method="POST">
{{-- here @csrf method will add token in Form. That token will store on server and
our Local System. After filling form when we press submit button then Laravel will
match this Token. If Token match then data will save, if token is not match then
data will not save --}}
@csrf
@method("PUT")
<div class="mb-3">
<label class="form-label">Name</label>
<input type="text" value="{{ $data->name }}" class="form-control @error("username") is-invalid @enderror" name="username">
<span class="text-danger">
@error("username")
{{ $message }}
@enderror
</span>
</div>
<div class="mb-3">
<label class="form-label">Email</label>
<input type="text" value="{{ $data->email }}" class="form-control @error("useremail") is-invalid @enderror" name="useremail">
<span class="text-danger">
@error("useremail")
{{ $message }}
@enderror
</span>
</div>
<div class="mb-3">
<label class="form-label">Password</label>
<input type="text" value="{{ $data->password }}" class="form-control @error("userpassword") is-invalid @enderror" name="userpassword">
<span class="text-danger">
@error("userpassword")
{{ $message }}
@enderror
</span>
</div>
<div class="mb-3">
<label class="form-label">Age</label>
<input type="text" value="{{ $data->age }}" class="form-control @error("userage") is-invalid @enderror" name="userage">
<span class="text-danger">
@error("userage")
{{ $message }}
@enderror
</span>
</div>
<div class="mb-3">
<label class="form-label">City</label>
<select class="form-control" value={{ $data->city }} name="usercity">
<option value="Delhi">Delhi</option>
<option value="Mumbai">Mumbai</option>
<option value="Goa">Goa</option>
<option value="Pune">Pune</option>
<option value="Ahmedabad">Ahmedabad</option>
</select>
<span class="text-danger">
@error("usercity")
{{ $message }}
@enderror
</span>
</div>
<button type="submit" class="btn btn-primary">Update</button>
<a href="{{ route("home.task") }}" class="btn btn-primary">Go to Home</a>
</form>
</div>
</div>
</div>
</body>
</html>
Below File is routes\web.php File
<?php
use App\Http\Controllers\NotificationController;
use App\Http\Controllers\TaskController;
use App\Http\Controllers\TestController;
use App\Http\Controllers\UserController;
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
return view('welcome');
});
Route::controller(NotificationController::class)->group(function () {
Route::get("notification", "indexNotification");
Route::get("notification/{type}", "notification")->name("notification");
Route::get("notification_list", "index_notification");
Route::get("notification_list/{type}", "notification_list")->name("notification_list");
});
Route::controller(TestController::class)->group(function () {
Route::get("/index", "index");
Route::get("/store-session", "storeSession");
Route::get("/delete-session", "deleteSession");
});
Route::get("/welcomeTwoPage", function () {
return view("welcomeTwo");
});
Route::get("/form", function () {
return view("adduser");
})->name("adduser");
Route::post("/add", [UserController::class, "addUser"])->name("addUser");
Route::get("/showAllTasks", [TaskController::class, "showTask"])->name("home.task");
Route::post("/checkValidate", [TaskController::class, "validateUser"])->name("validate.user");
Route::get("/singleTask/{id}", [TaskController::class, "singleTask"])->name("single.task");
Route::get("/updatePage/{id}", [TaskController::class, "updatePage"])->name("update.page");
Route::put("/updateTask/{id}", [TaskController::class, "updateTask"])->name("update.task");
Route::get("/delete/{id}", [TaskController::class, "deleteTask"])->name("delete.task");
Route::get("/addNew", function () {
return view("adduser");
})->name("addNew");
// Route::get("/home", function() {
// return view("home");
// })->name("home.task");
.png)
.png)
.png)
.png)
.png)
.png)
.png)
Comments
Post a Comment