DEV Community

Cover image for Laravel CRUD with blade and authentification and seeder
Chabba Saad
Chabba Saad

Posted on • Updated on

Laravel CRUD with blade and authentification and seeder

#webdev #laravel #bootstrap

Lets start with installing fresh laravel using below command:

composer create-project  laravel/laravel laravel-crud
Enter fullscreen mode Exit fullscreen mode

Now lets create a new lara-crud database and configure database credentials in .env file

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=tplaravel2
DB_USERNAME=root
DB_PASSWORD=
Enter fullscreen mode Exit fullscreen mode

**
Implement Authentication**

*we need to install laravel-ui package in development mode. *

cd laravel-crud

composer require laravel/ui --dev
Enter fullscreen mode Exit fullscreen mode

install laravel-ui

php artisan ui bootstrap --auth
Enter fullscreen mode Exit fullscreen mode 
npm install
Enter fullscreen mode Exit fullscreen mode

then let run

npm run dev
Enter fullscreen mode Exit fullscreen mode

npm run dev

Remember to keep the console running with the npm run dev command while you are working on your application's frontend, as it ensures that any changes you make to the assets are automatically compiled and reflected in your application.

This will install a layout registration and login views, as well as routes for all authentication end-points. It will also use HomeController to handle post-login requests to your application’s dashboard.

php artisan migrate
Enter fullscreen mode Exit fullscreen mode

now you can run your project to check your login page and register ready to go !

login

login

register

register

let update our welcome.blade.php with this code below :

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>My App</title>

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">

    <!-- Styles -->
    <style>
        html,
        body {
            background-color: #fff;
            color: #636b6f;
            font-family: 'Nunito', sans-serif;
            font-weight: 200;
            height: 100vh;
            margin: 0;
        }

        .full-height {
            height: 100vh;
        }

        .flex-center {
            align-items: center;
            display: flex;
            justify-content: center;
        }

        .position-ref {
            position: relative;
        }

        .top-right {
            position: absolute;
            right: 10px;
            top: 18px;
        }

        .content {
            text-align: center;
        }

        .title {
            font-size: 84px;
        }

        .links>a {
            color: #636b6f;
            padding: 0 25px;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: .1rem;
            text-decoration: none;
            text-transform: uppercase;
        }

        .m-b-md {
            margin-bottom: 30px;
        }
    </style>
</head>

<body>
    <div class="flex-center position-ref full-height">
        <div class="content">
            <div class="title m-b-md">
                My tutorial App
            </div>

            <div class="links">
                @if (Route::has('login'))
                @auth
                <a href="{{ url('/todo') }}">Home</a>
                @else
                <a href="{{ route('login') }}">Login</a>

                @if (Route::has('register'))
                <a href="{{ route('register') }}">Register</a>
                @endif
                @endauth
                @endif
            </div>
        </div>
    </div>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

after runing your project :

php artisan serve
Enter fullscreen mode Exit fullscreen mode

http://127.0.0.1:8000/login

login page

Create Todo Model, Migration & Controller in one cmd line :

php artisan make:model Todo -mcr
Enter fullscreen mode Exit fullscreen mode

this cmd will create model Todo and table todos and TodoController

  public function up()
    {
        Schema::create('todos', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('title');
            $table->string('description');
            $table->integer('user_id');
            $table->enum('status', ['pending','completed']);
            $table->timestamps();
        });
    }
Enter fullscreen mode Exit fullscreen mode

php artisan migrate

Here we have used $fillable property for mass assignable fields.

class Todo extends Model
{
    protected $fillable = ['title', 'description', 'user_id', 'status'];
}
Enter fullscreen mode Exit fullscreen mode

Next we need to register resourceful route to access all resource methods from TodoController. Open routes/web.php file and add route code.

go to routes/web.php

use Illuminate\Support\Facades\Auth;
use App\Http\Controllers\TodoController;
Auth::routes();
Route::resource('/todo', TodoController::class);
Enter fullscreen mode Exit fullscreen mode

or

use Illuminate\Support\Facades\Auth;
use App\Http\Controllers\TodoController;
Auth::routes();



Route::get('/todo', [TodoController::class, 'index'])->name('todo.index');
Route::post('/todo', [TodoController::class, 'store'])->name('todo.store');
Route::get('/todo/{todo}/edit', [TodoController::class, 'edit'])->name('todo.edit');
Route::delete('/todo/{todo}', [TodoController::class, 'destroy'])->name('todo.destroy');
Route::put('/todo/{todo}', [TodoController::class, 'update'])->name('todo.update');
Route::get('/todo/create', [TodoController::class, 'create'])->name('todo.create');
Enter fullscreen mode Exit fullscreen mode

Update Auth Redirect Routes

after creating our TodoController let make some changes in login and register Controller


 // protected $redirectTo = RouteServiceProvider::HOME;

  protected $redirectTo = '/todo';
Enter fullscreen mode Exit fullscreen mode

The reason behind updating this route is that it will redirect to todo list page after successful registration and login of user.

Normally it redirect to dashboard page of HomeController but we dont need it so we use different route for this reason.

now let create our first user with seeder

php artisan make:seeder UsersTableSeeder
Enter fullscreen mode Exit fullscreen mode

let update our Usertableseeder :

<?php

namespace Database\Seeders;

use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;
use App\Models\User;
class UsersTableSeeder extends Seeder
{
    /**
     * Run the database seeds.
     */
    public function run(): void
    {
        //
        User::create(
            [
                "name" => "user",
                "email" => "user1@gmail.com",
                "password" => "12345678",
            ]
        );
    }
}
Enter fullscreen mode Exit fullscreen mode

or store multiple user

 $users = [
        [
            "name" => "user1",
            "email" => "user1@gmail.com",
            "password" => "12345678",
        ],
        [
            "name" => "user2",
            "email" => "user2@gmail.com",
            "password" => "12345678",
        ],
        // Add more user arrays as needed
    ];

    foreach ($users as $userData) {
        User::create($userData);
    }
Enter fullscreen mode Exit fullscreen mode

add this line to DatabaseSeeder :

     $this->call(UsersTableSeeder::class);
Enter fullscreen mode Exit fullscreen mode

or we can generate randomly new fake users

        $factory = new UserFactory();
        $factory->count(10)->create();
Enter fullscreen mode Exit fullscreen mode

run the following command:

php artisan db:seed --class=UsersTableSeeder
Enter fullscreen mode Exit fullscreen mode

*Todo list blades : *

create a folder in view called todo and create those file :

  • list.blade.php 
@extends('layouts.app')
@section('content')
<div class="container">
  <br>
    <div class="row justify-content-center">
        <div class="col-md-6">
            <h2>Todos List</h2>
        </div>
        <div class="col-md-6">
            <div class="float-right">
                <a href="{{ route('todo.create') }}" class="btn btn-primary"><i class="fa fa-plus"></i> Add new todo</a>
            </div>
        </div>
        <br>
        <div class="col-md-12">
            @if (session('success'))
                <div class="alert alert-success" role="alert">
                    {{ session('success') }}
                </div>
            @endif
            @if (session('error'))
                <div class="alert alert-danger" role="alert">
                    {{ session('error') }}
                </div>
            @endif
            <table class="table table-bordered">
        <thead class="thead-light">
          <tr>
            <th width="5%">#</th>
            <th>Task Name</th>
            <th width="10%"><center>Task Status</center></th>
            <th width="14%"><center>Action</center></th>
          </tr>
        </thead>
        <tbody>
          @forelse ($todos as $todo)
              <tr>
              <th>{{ $todo->id }}</th>
              <td>{{ $todo->title }}</td>
              <td><center>{{ $todo->status }}</center></td>
              <td>
                <div class="action_btn">
                  <div class="action_btn">
                    <a href="{{ route('todo.edit', $todo->id)}}" class="btn btn-warning">Edit</a>
                  </div>
                  <div class="action_btn margin-left-10">
                    <form action="{{ route('todo.destroy', $todo->id)}}" method="post">
                      @csrf
                      @method('DELETE')
                      <button class="btn btn-danger" type="submit">Delete</button>
                    </form>
                  </div>
                </div>
              </td>
            </tr>
          @empty
              <tr>
              <td colspan="4"><center>No data found</center></td>
            </tr>
          @endforelse
        </tbody>
      </table>
        </div>
    </div>
</div>
@endsection
Enter fullscreen mode Exit fullscreen mode

todo list view

  • add.blade.php 
@extends('layouts.app')
@section('content')
<div class="container">
  <br>
    <div class="row justify-content-center">
        <div class="col-md-6">
            <h2>Add Todo</h2>
        </div>
        <div class="col-md-6">
            <div class="float-right">
                <a href="{{ route('todo.index') }}" class="btn btn-primary">Back</a>
            </div>
        </div>
        <br>
        <div class="col-md-12">
            @if (session('success'))
                <div class="alert alert-success" role="alert">
                    {{ session('success') }}
                </div>
            @endif
            @if (session('error'))
                <div class="alert alert-error" role="alert">
                    {{ session('error') }}
                </div>
            @endif
      <form action="{{ route('todo.store') }}" method="POST">
        @csrf
        <div class="form-group">
          <label for="title">Title:</label>
          <input type="text" class="form-control" id="title" name="title">
        </div>
        <div class="form-group">
          <label for="description">Description:</label>
          <textarea name="description" class="form-control" id="description" rows="5"></textarea>
        </div>
        <div class="form-group">
        <label for="status">Select todo status</label>
        <select class="form-control" id="status" name="status">
          <option value="pending">Pending</option>
          <option value="completed">Completed</option>
        </select>
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
        </div>
    </div>
</div>
@endsection
Enter fullscreen mode Exit fullscreen mode

add page

  • edit.blade.php 
@extends('layouts.app')
@section('content')
<div class="container">
    <br>
    <div class="row justify-content-center">
        <div class="col-md-6">
            <h2>Edit Todo</h2>
        </div>
        <div class="col-md-6">
            <div class="float-right">
                <a href="{{ route('todo.index') }}" class="btn btn-primary">Back</a>
            </div>
        </div>
        <br>
        <div class="col-md-12">
            @if (session('success'))
            <div class="alert alert-success" role="alert">
                {{ session('success') }}
            </div>
            @endif
            @if (session('error'))
            <div class="alert alert-error" role="alert">
                {{ session('error') }}
            </div>
            @endif
            <form action="{{ route('todo.update', ['todo' => $todo->id]) }}" method="POST">
                @csrf
                @method('PUT')
                <div class="form-group">
                    <label for="title">Title:</label>
                    <input type="text" class="form-control" id="title" name="title" value="{{ $todo->title }}">
                </div>
                <div class="form-group">
                    <label for="description">Description:</label>
                    <textarea name="description" class="form-control" id="description" rows="5">{{ $todo->description }}</textarea>
                </div>
                <div class="form-group">
                    <label for="status">Select todo status</label>
                    <select class="form-control" id="status" name="status">
                        <option value="pending" @if ($todo->status == 'pending') selected @endif>Pending</option>
                        <option value="completed" @if ($todo->status == 'completed') selected @endif>Completed</option>
                    </select>
                </div>
                <button type="submit" class="btn btn-info">Submit</button>
            </form>
        </div>
    </div>
</div>
@endsection
Enter fullscreen mode Exit fullscreen mode

Image description

  • view.blade.php 
@extends('layouts.app')
@section('content')
<div class="container">
  <br>
    <div class="row justify-content-center">
        <div class="col-md-6">
            <h2>Todo Details</h2>
        </div>
        <div class="col-md-6">
            <div class="float-right">
                <a href="{{ route('todo.index') }}" class="btn btn-primary">Back</a>
            </div>
        </div>
        <br>
        <div class="col-md-12">
            <br><br>
            <div class="todo-title">
                <strong>Title: </strong> {{ $todo->title }}
            </div>
            <br>
            <div class="todo-description">
                <strong>Description: </strong> {{ $todo->description }}
            </div>
            <br>
            <div class="todo-description">
                <strong>Status: </strong> {{ $todo->status }}
            </div>
        </div>
    </div>
</div>
@endsection
Enter fullscreen mode Exit fullscreen mode

*Todo list Controller with all Crud Methods : *

<?php

namespace App\Http\Controllers;

use App\Models\Todo;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Session;

class TodoController extends Controller
{
    /**
     * Display a listing of the resource.
     */
    public function index()
    {
        $userId = Auth::user()->id;
        $todos = Todo::where(['user_id' => $userId])->get();
        return view('todo.list', ['todos' => $todos]);
    }

    /**
     * Show the form for creating a new resource.
     */
    public function create()
    {
        return view('todo.add');
    }
    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $userId = Auth::user()->id;
        $input = $request->input();
        $input['user_id'] = $userId;
        $todoStatus = Todo::create($input);

        if ($todoStatus) {
            $message = 'Todo successfully added';
            $type = 'success';
        } else {
            $message = 'Oops, something went wrong. Todo not saved';
            $type = 'error';
        }

        return redirect('todo')->with($type, $message);
    }
    /**
     * Display the specified resource.
     */
    public function show($id)
    {
        $userId = Auth::user()->id;
        $todo = Todo::where(['user_id' => $userId, 'id' => $id])->first();
        if (!$todo) {
            return redirect('todo')->with('error', 'Todo not found');
        }
        return view('todo.view', ['todo' => $todo]);
    }

    /**
     * Show the form for editing the specified resource.
     */
    public function edit($id)
    {
        $userId = Auth::user()->id;
        $todo = Todo::where(['user_id' => $userId, 'id' => $id])->first();
        if ($todo) {
            return view('todo.edit', ['todo' => $todo]);
        } else {
            return redirect('todo')->with('error', 'Todo not found');
        }
    }
    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        $userId = Auth::user()->id;
        $todo = Todo::find($id);
        if (!$todo) {
            return redirect('todo')->with('error', 'Todo not found.');
        }
        $input = $request->input();
        $input['user_id'] = $userId;
        $todoStatus = $todo->update($input);
        if ($todoStatus) {
            return redirect('todo')->with('success', 'Todo successfully updated.');
        } else {
            return redirect('todo')->with('error', 'Oops something went wrong. Todo not updated');
        }
    }

    /**
     * Remove the specified resource from storage.
     */
    public function destroy($id)
    {
        $userId = Auth::user()->id;
        $todo = Todo::where(['user_id' => $userId, 'id' => $id])->first();
        $respStatus = $respMsg = '';
        if (!$todo) {
            $respStatus = 'error';
            $respMsg = 'Todo not found';
        }
        $todoDelStatus = $todo->delete();
        if ($todoDelStatus) {
            $respStatus = 'success';
            $respMsg = 'Todo deleted successfully';
        } else {
            $respStatus = 'error';
            $respMsg = 'Oops something went wrong. Todo not deleted successfully';
        }
        return redirect('todo')->with($respStatus, $respMsg);
    }
}
Enter fullscreen mode Exit fullscreen mode

Link Github for this project :

Top comments (1)

Collapse
 
gersonsavele profile image
GersonSavele •

Valeu ai.

Read next

celestevanderwatt profile image

Witty Works scales their AI-augmented DEI solution with a new PaaS đź’š

Celeste van der Watt -

vaibhav-solanki profile image

GraphQL: The Future of APIs and the Exciting Road Ahead

Vaibhav Solanki -

wangliwen profile image

JScrambler vs. JShaman: A Feature Comparison for JavaScript Obfuscation

WangLiwen -

mike_andreuzza profile image

How to create a bottom drawer with Tailwind CSS and Alpinejs

Michael Andreuzza -