Create a folder with name of your project. I created here as laravel-crud and open it in your code editor here i am using visual studio code.
Once your app is open in vs code open terminal and past this code
composer create-project laravel/laravel .Here . indicate create project in ‘laravel-crud’ folder or root folder
After all code installed write.
php artisan serveNow you have this Wellcome page
This is Laravel project file structure
In this routes folder web.php file contain different routes with respective view template is connected to that url
Let’s Create Our APP
At first we will create a form to register and login to our APP
So to do that we create routes for register login and logout routes
Route::post('/register',[UserController::class, 'register']);
Route::post('/logout',[UserController::class, 'logout']);
Route::post('/login',[UserController::class, 'login']);Here UserController is a controller to write all code we can write all the login direct here but has our app gets bigger it hard to manage so we create controller for write all logic and functionality
How to create controller
php artisan serve make:controller UserControllerThis will create a file called UserController.php file inside app/Http/Controller/UserController.php file. At begging this file look like this
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class UserController extends Controller
{
//
}
Now we create a database inside mysql and change our .env file.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravelcrud
DB_USERNAME=root
DB_PASSWORD=After this we have get basic Laravel tables so we have to open our terminal and write this cmd.
php artisan migrateThis will generate all basic tables like failed_jobs, migrations, password_resets, personal_access_tokens, users
Now we create form for Register and login
<body>
@auth
<h3>Hello, Your are loged in.</h3>
<form action="/logout" method="POST">
@csrf
<button>Log out</button>
</form>
@else
<div class="border">
<h2>Register</h2>
<form action="/register" method="POST">
@csrf
<input type="text" name="name" placeholder="Name">
<input type="email" name="email" placeholder="email">
<input type="password" name="password" placeholder="password">
<button>Register</button>
</form>
</div>
<br>
<div class="border">
<h2>Login</h2>
<form action="/login" method="POST">
@csrf
<input type="name" name="loginname" placeholder="name">
<input type="password" name="loginpassword" placeholder="password">
<button>Login</button>
</form>
</div>
@endauth
</body>I also added some basic style nothing fansy
.border {
border: 3px solid black;
padding: 10px;
}
After running this code our frontend will look like this
Now we write all functionality for these frontend code.
When user register user data will stored inside user table and when user login this will check user credentiala. For all these functionality we write code in UserController.php.
class UserController extends Controller
{
/*
Register function
This will register user with name, email and password and store to users tables
*/
public function register(Request $request)
{
$incomingFields = $request->validate([
'name' => ['required', 'min:3', 'max:10', Rule::unique('users', 'name')],
'email' => ['required', 'email', Rule::unique('users', 'email')],
'password' => ['required', 'min:8', 'max:200'],
]);
$incomingFields['password'] = bcrypt($incomingFields['password']);
$user = User::create($incomingFields);
auth()->login($user);
return redirect('/');
}
/*
Login function
This will check for user and if there it login them
*/
public function login(Request $request)
{
$incomingFields = $request->validate([
'loginname' => 'required',
'loginpassword' => 'required'
]);
if (auth()->attempt(['name' => $incomingFields['loginname'], 'password' => $incomingFields['loginpassword']])) {
$request->session()->regenerate();
}
return redirect('/');
}
/*
Logout function
This will logout user
*/
public function logout()
{
auth()->logout();
return redirect('/');
}
}All these code will give you register and login functionality
How to build CRUD Functionality
Now we build curd functionality with custom table.
In this crud app registered user have ability to add blog post, update and delete posts.
At first let’s create table for posts. In Laravel if you want to create table you have create migration file using this commond.
php artisan make:migration create_post_tableThis will create a file inside database/migrations folder.
After that add all field you required in posts table inside up() function. That code look like this.
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('posts', function (Blueprint $table) {
$table->id();
$table->timestamps();
$table->string('title');
$table->longText('body');
$table->foreignID('user_id')->constrained();
});
}
After adding all fields. run migration command.
php artisan migrateThis will create table and fields.
Now we build form for adding new post.
<div class="border">
<h2>Create a new post</h2>
<form action="/create-post" method="POST">
@csrf
<input type="text" name="title" placeholder="Post title">
<textarea name="body" cols="30" rows="10" placeholder="Body content..."></textarea>
<button>Save Post</button>
</form>
</div>Now we write route for /create-post .
// web.php
Route::post('/create-post', [PostController::class, 'createPost']);For posts logic we can write it in UserController.php file but to stay organized we will create new controller called PostController
php artisan make:controller PostControllerNow write logic for store post form data
public function createPost(Request $request) {
$incomingFields = $request->validate([
'title' => 'required',
'body' => 'required'
]);
$incomingFields['title'] = strip_tags($incomingFields['title']);
$incomingFields['body'] = strip_tags($incomingFields['body']);
$incomingFields['user_id'] = auth()->id();
Post::create($incomingFields);
return redirect('/');
}If you observer here we used Post::create($incomingFields); So no we create Model
In Laravel model is nothing but explain relationship with other models.
php artisan make:model PostIn Post model file We connect with controller to interact with view template
//Post.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Post extends Model
{
use HasFactory;
// Extra Added Code.
protected $fillable = ['title', 'body', 'user_id'];
public function user() {
return $this->belongsTo(User::class, 'user_id');
}
}
Now we create route for view show Edit Screen page, edit(Update) and delete post.
Route::get('/edit-post/{post}', [PostController::class, 'showEditScreen']);
Route::put('/edit-post/{post}', [PostController::class, 'updatePost']);
Route::delete('/delete-post/{post}', [PostController::class, 'deletePost']);With these router we now can write edit view code.
//edit-post.blade.php
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Edit Post</title>
<style>
.border {
border: 3px solid black;
padding: 10px;
}
</style>
</head>
<body>
<div class="border">
<h2>Edit Post</h2>
<form action="/edit-post/{{ $post->id }}" method="POST">
@csrf
@method('PUT')
<input type="text" name="title" value="{{$post->title}}">
<textarea name="body" cols="30" rows="10">{{$post->body}}</textarea>
<button>Save Changes</button>
</form>
</div>
</body>
</html>
In this page we can update page.
Now we write logic for update post in Post Controller
//PostController.php
public function updatePost(Post $post, Request $request) {
if(auth()->user()->id !== $post['user_id']) {
return redirect('/');
}
$incomingFields = $request->validate([
'title' => 'required',
'body' => 'required'
]);
$incomingFields['title'] = strip_tags($incomingFields['title']);
$incomingFields['body'] = strip_tags($incomingFields['body']);
$post->update($incomingFields);
return redirect('/');
}This code will update post
Now we can write controller for delete post
//PostController.php
public function deletePost(Post $post){
if(auth()->user()->id === $post['user_id']) {
$post->delete();
}
return redirect('/');
}For delete functionality to trigger we need to write some code inside home.blade.php
//home.blade.php
//rest of code
@foreach ($posts as $item)
<div class="single-item">
<h3>{{$item['title']}} </h3>
<div>
{{$item['body']}}
</div>
// This link will take to edit post page
<p><a href="/edit-post/{{$item->id}}">Edit</a></p>
// This will delete post
<form action="/delete-post/{{$item->id}}" method="POST">
@csrf
@method('DELETE')
<button>Delete</button>
</form>
</div>
@endforeach
//rest of the code.With that code we complete our CRUD app now home.blade.php code look like this
//home.blade.php
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Laravel CRUD</title>
<style>
.border {
border: 3px solid black;
padding: 10px;
}
.single-item{
background: rgb(207, 207, 207);
padding: 10px;
border-bottom: 5px solid lightgreen;
margin-bottom: 10px;
}
</style>
</head>
<body>
@auth
<h3>Hello</h3>
<form action="/logout" method="POST">
@csrf
<button>Log out</button>
</form>
<div class="border">
<h2>Create a new post</h2>
<form action="{{route('create-post')}}" method="POST">
@csrf
<input type="text" name="title" placeholder="Post title">
<textarea name="body" cols="30" rows="10" placeholder="Body content..."></textarea>
<button>Save Post</button>
</form>
</div>
<br>
<div class="border">
<h2>All Posts</h2>
<hr>
@foreach ($posts as $item)
<div class="single-item">
<h3>{{$item['title']}} </h3>
<div>
{{$item['body']}}
</div>
<p><a href="/edit-post/{{$item->id}}">Edit</a></p>
<form action="/delete-post/{{$item->id}}" method="POST">
@csrf
@method('DELETE')
<button>Delete</button>
</form>
</div>
@endforeach
</div>
@else
<div class="border">
<h2>Register</h2>
<form action="/register" method="POST">
@csrf
<input type="text" name="name" placeholder="Name">
<input type="email" name="email" placeholder="email">
<input type="password" name="password" placeholder="password">
<button>Register</button>
</form>
</div>
<br>
Try <br>
Username : chethan <br>
Password: 12345678
<hr>
Username: chethan2 <br>
Password: 12345678
<div class="border">
<h2>Login</h2>
<form action="/login" method="POST">
@csrf
<input type="name" name="loginname" placeholder="name">
<input type="password" name="loginpassword" placeholder="password">
<button>Login</button>
</form>
</div>
@endauth
</body>
</html>Download complete code here: https://drive.google.com/file/d/1fjYprs1U5Q7ZUilVG3ZWI5OPXGa9Z_DC/view?usp=sharing