CREATION OF CREATE, ADD AND VIEW , UPDATE AND DELETE TASKS OF CRUD OPERATION USING PHP LARAVEL FRAMEWORK
CREATION OF CREATE, ADD, VIEW , UPDATE AND DELETE TASKS OF CRUD OPERATION USING PHP LARAVEL FRAMEWORK
Database : taskDB
table : taskstask_id random string,
task_title text
task_desc text
created timestamp default current_timestamp()
1)Add New Task
2)View all Task
Solution :
So first I need to create a database named taskDB as shown in the image below.
.PNG)
Then once the database taskDB is created I need to create a table named tasks as I have shown in the below image.
.PNG)
Once the table tasks is created I need to input the fields in the table as listed below and as shown in the image below and then I need to click on the Save option.
.PNG)
.PNG)
After the table fields are created the fields will displayed to me under Structure as shown in my image below.
.PNG)
Now, First I need to create tasks.blade.php by using the composer command prompt "php artisan make:view tasks" and once I enter the command in composer command prompt my tasks.blade.php page will be created below views as shown in the image below.
PS C:\xampp\htdocs\Ayan_Home\Laravel\myApp> php artisan make:view tasks
INFO View [C:\xampp\htdocs\Ayan_Home\Laravel\myApp\resources\views\tasks.blade.php] created successfully.
.PNG)
.PNG)
Once my tasks.blade.php is created I need to create a form in my tasks.blade.php as shown below.
/*tasks.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--Add Bootstrap-4 CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<header class="modal-header">
<h1>Task:</h1>
</header>
<form method="POST" action="{{url('/submit')}}">
@csrf
<div class="form-group">
<div class="row">
<div class="col">Task Title:<input type="text" name="task_title" id="task_title" class="form-control"></div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col">Task Description:<input type="text" name="task_desc" id="task_desc" class="form-control"></div>
</div>
</div>
<div class="form-group">
<button class="btn btn-sm btn-outline-primary">Submit</button>
</div>
</form>
@if(session()->has("message"))
@if(session()->get("message")=="taskadded")
<div class="alert alert-success">Task Add Done !</div>
@endif
@endif
</div>
</body>
</html>
*/
Then I need to create TasksController.php by using the command "php artisan make:controller TasksController"and once I enter the command in composer command prompt my TasksController.php page will be created below Controllers as shown in the image below.
PS C:\xampp\htdocs\Ayan_Home\Laravel\myApp> php artisan make:controller TasksController
INFO Controller [C:\xampp\htdocs\Ayan_Home\Laravel\myApp\app\Http\Controllers\TasksController.php] created successfully.
.PNG)
.PNG)
/*TasksController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
//using built in facades named as Password.
use Illuminate\Validation\Rules\Password;
//using DB Facade ORM for Database connectivity
use Illuminate\Support\Facades\DB;
class TasksController extends Controller
{
//
public function showall(){
$tasks = DB::table("tasks")->get();
//dd($tasks);
return view("showalltask")->with(['tasks'=>$tasks]);
}
public function create(){
return view ("tasks");
}
public function submit(Request $request){
$Task_Title = $request->task_title;
$Task_Description = $request->task_desc;
$dataToSubmit = [
'task_id' => "task-".substr(md5($request->Task_Title),0,12)
.time()
.rand(1000,9999),
'task_title' => $Task_Title,
'task_desc' => $Task_Description
];
$rows = DB::table("tasks")->insert($dataToSubmit);
$message = ($rows == 1) ? "taskadded_success":"taskadded_error";
return redirect("tasks/all")->with("message",$message);
}
}
*/
Then I need to create showalltasks.blade.php by using the command "php artisan make:view showalltask"and once I enter the command in composer command prompt my showalltask.blade.php page will be created below Controllers as shown in the image below.
PS C:\xampp\htdocs\Ayan_Home\Laravel\myApp> php artisan make:view showalltask
INFO View [C:\xampp\htdocs\Ayan_Home\Laravel\myApp\resources\views\showalltask.blade.php] created successfully.
.PNG)
.PNG)
Once my showalltasks.blade.php is created I need to add the fields of a tasks in a form in my showalltask.blade.php as shown below.
/*showalltask.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tasks</title>
<!--Add Bootstrap-4 CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</head>
<body>
@if(!empty($tasks))
<fieldset class="card p-5 m-5">
<legend>
<h2>Displaying All Tasks:</h2>
</legend>
<div class="table-responsive">
<table class="table table-hover">
<tr>
<th>Task ID:</th>
<th>Task Title:</th>
<th>Task Description:</th>
<th>Acc Created Date:</th>
</tr>
@foreach($tasks as $task)
<tr>
<td>{{$task->task_id}}</td>
<td>{{$task->task_title}}</td>
<td>{{$task->task_desc}}</td>
<td>{{date("d-m-y h:i:sA",strtotime($task->created))}}</td>
</tr>
@endforeach
</table>
</div>
</fieldset>
<div align="center">
<button class="btn btn-primary" onclick="window.print();">Print or SaveAs PDF:</button>
</div>
@endif
</body>
</html>
*/
Next I have written the below commands in web.php page for filling up the form at "/task" and for viewing the form details at "/tasks/all".
web.php:
use App\Http\Controllers\TasksController;
Route::get("/tasks/all",[TasksController::class,'showall']);
Route::get("/task",[TasksController::class,'create']);
Route::post("/submit",[TasksController::class,'submit']);
Next I have make the database name change in .env as my databse name taskdb.
.env:
DB_DATABASE=taskdb
.PNG)
Then I need to open the server by using the composer command i.e. " php artisan serve --port 1234"
.PNG)
So now I am just filling out the task form at http://localhost:1234/task and after filling out the task form I need to click on Submit button.
OUTPUT:
.PNG)
.PNG)
Now my all tasks gets displayed at http://localhost:1234/tasks/all as shown in the image below.
.PNG)
Once I click on the button Print or SaveAs PDF button, it will allow me to print the displaying all tasks if I have printer otherwise it will allow me to save as SaveAs PDF option as shown in teh image below.
.PNG)
.PNG)
.PNG)
.PNG)
So, in my first part I have shown how toi create and add the tasks in CRUD Operation using PHP Laravel Framework.
But now I will show how to view the tasks in CRUD Operation using PHP Laravel Framework.
So to view the task First I need to add the below view codes in TasksController.php page .
TasksController.php
public function show($taskId){
//dd($taskId);
$task=DB::table("tasks")->where("task_id",$taskId)->get();
//dd($tasks[0]);
return view("show")->with(['task'=>$task[0]]);
}
public function deleteTask($taskId){
//dd($taskId);
$rows=DB::table("tasks")->where("task_id",$taskId)->delete();
$message= ($rows==1) ? "delete_success" : "delete_error";
return redirect("tasks/all")->with("message",$message);
}
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
//using built in facades named as Password.
use Illuminate\Validation\Rules\Password;
//using DB Facade ORM for Database connectivity
use Illuminate\Support\Facades\DB;
class TasksController extends Controller
{
//
public function showall(){
$tasks = DB::table("tasks")->get();
//dd($tasks);
return view("showalltask")->with(['tasks'=>$tasks]);
}
public function create(){
return view ("tasks");
}
public function show($taskId){
//dd($taskId);
$task=DB::table("tasks")->where("task_id",$taskId)->get();
//dd($tasks[0]);
return view("show")->with(['task'=>$task[0]]);
}
public function deleteTask($taskId){
//dd($taskId);
$rows=DB::table("tasks")->where("task_id",$taskId)->delete();
$message= ($rows==1) ? "delete_success" : "delete_error";
return redirect("tasks/all")->with("message",$message);
}
public function submit(Request $request){
$Task_Title = $request->task_title;
$Task_Description = $request->task_desc;
$dataToSubmit = [
'task_id' => "task-".substr(md5($request->Task_Title),0,12)
.time()
.rand(1000,9999),
'task_title' => $Task_Title,
'task_desc' => $Task_Description
];
$rows = DB::table("tasks")->insert($dataToSubmit);
$message = ($rows == 1) ? "taskadded_success":"taskadded_error";
return redirect("tasks/all")->with("message",$message);
}
}
Then I need to add the below command in web.php page.
web.php:
Route::get("/tasks/show/{uid}",[TasksController::class,'show']);
Then I need to create the show page using the below composer command "php artisan make:view show" and a show.blade.php page will be created under views as shown in the image below.
PS C:\xampp\htdocs\Ayan_Home\Laravel\myApp> php artisan make:view show
INFO View [C:\xampp\htdocs\Ayan_Home\Laravel\myApp\resources\views\show.blade.php] created successfully.
.PNG)
.PNG)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tasks</title>
<!--Add Bootstrap-4 CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<header class="modal-header">
<h1>SIGNUP:</h1>
</header>
@if(!empty($task))
<form method="POST" action="{{url('/submit')}}">
@csrf
<div class="form-group">
<div class="row">
<div class="col">Task Title:<input type="text" name="task_title" id="task_title" class="form-control" value="{{$task->task_title}}"></div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col">Task Description:<input type="text" name="task_desc" id="task_desc" class="form-control" value="{{$task->task_desc}}"></div>
</div>
</div>
<div align="center" class="form-group">
<button class="btn btn-sm btn-outline-primary">UPDATE</button> |
<a href="{{url('/task/delete')}}/{{$task->task_id}}" onclick="return confirm('Do You want to delete This Record ?');" class="btn btn-sm btn-outline-danger">DELETE</a>
</div>
</form>
@endif
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tasks</title>
<!--Add Bootstrap-4 CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<header class="modal-header">
<h1>SIGNUP:</h1>
</header>
@if(!empty($task))
<form method="POST" action="{{url('/submit')}}">
@csrf
<div class="form-group">
<div class="row">
<div class="col">Task Title:<input type="text" name="task_title" id="task_title" class="form-control" value="{{$task->task_title}}"></div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col">Task Description:<input type="text" name="task_desc" id="task_desc" class="form-control" value="{{$task->task_desc}}"></div>
</div>
</div>
<div align="center" class="form-group">
<button class="btn btn-sm btn-outline-primary">UPDATE</button> |
<a href="{{url('/task/delete')}}/{{$task->task_id}}" onclick="return confirm('Do You want to delete This Record ?');" class="btn btn-sm btn-outline-danger">DELETE</a>
</div>
</form>
@endif
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tasks</title>
<!--Add Bootstrap-4 CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<header class="modal-header">
<h1>SIGNUP:</h1>
</header>
@if(!empty($task))
<form method="POST" action="{{url('/submit')}}">
@csrf
<div class="form-group">
<div class="row">
<div class="col">Task Title:<input type="text" name="task_title" id="task_title" class="form-control" value="{{$task->task_title}}"></div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col">Task Description:<input type="text" name="task_desc" id="task_desc" class="form-control" value="{{$task->task_desc}}"></div>
</div>
</div>
<div align="center" class="form-group">
<button class="btn btn-sm btn-outline-primary">UPDATE</button> |
<a href="{{url('/task/delete')}}/{{$task->task_id}}" onclick="return confirm('Do You want to delete This Record ?');" class="btn btn-sm btn-outline-danger">DELETE</a>
</div>
</form>
@endif
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tasks</title>
<!--Add Bootstrap-4 CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<header class="modal-header">
<h1>SIGNUP:</h1>
</header>
@if(!empty($task))
<form method="POST" action="{{url('/submit')}}">
@csrf
<div class="form-group">
<div class="row">
<div class="col">Task Title:<input type="text" name="task_title" id="task_title" class="form-control" value="{{$task->task_title}}"></div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col">Task Description:<input type="text" name="task_desc" id="task_desc" class="form-control" value="{{$task->task_desc}}"></div>
</div>
</div>
<div align="center" class="form-group">
<button class="btn btn-sm btn-outline-primary">UPDATE</button> |
<a href="{{url('/task/delete')}}/{{$task->task_id}}" onclick="return confirm('Do You want to delete This Record ?');" class="btn btn-sm btn-outline-danger">DELETE</a>
</div>
</form>
@endif
</body>
</html>
And then in web.php page I need to add another command as shown below.
web.php
Route::get("/tasks/delete/{uid}",[TasksController::class,'deleteTask']);
Now I can see my Update And Delete Button in my path "http://localhost:1234/tasks/show/task-d41d8cd98f0017465600932655" as shown below. Once I click on the UPDATE button the tasks data will be updated and once I click on DELETE button the tasks data will be deleted.
.PNG)
.PNG)
Once I click on DELET button it will show me a popup prompt "Do you want to delete this record?" If I click on OK. my data will be deleted and if I click on Cancel my data will not be deleted.
.PNG)
.PNG)
.PNG)
.PNG)
Comments
Post a Comment