Laravel Display Data

Create Routes

routes/web.php : In next step, we will add new two routes in web.php file.

Route::get('/', function () {
    return view('registration');
});
Route::post('crud_insert', 'CrudController@save');
Route::get('crud','CrudController@crud');

Creating The CrudController

Create a controller file CrudController.php and save it in the following path app/Http/Controllers/CrudController.php.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\CrudModel;

class CrudController extends Controller
{
    function crud(){
        $data['data'] = CrudModel::all();
        return view('crud',$data);
    }
    
    function save(Request $req){
        $data = new CrudModel;
        $data->name = $req->name;
        $data->email = $req->email;
        $data->password = $req->pwd;
        $data->save();
        return back()
            ->with("status","Insert Successfully.");
    }
}
?>

Creating The CrudModel

Create a controller file CrudModel.php and save it in the following path app/CrudModel.php.

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class CrudModel extends Model
{
    protected $table = 'demo';
    public $timestamps = false;
}
?>

Creating The View

Create a view file crud.blade.php and save the below code it in resources/views/crud.blade.php. 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Crud Form</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://www.jqueryscript.net/demo/Simple-Easy-jQuery-Notification-Plugin-NotifIt/css/notifIt.css">
  <script src="https://www.jqueryscript.net/demo/Simple-Easy-jQuery-Notification-Plugin-NotifIt/js/notifIt.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid mt-5">
    <h1 class="text-center">Crud Form</h1>
    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8">
            <table class="table table-dark table-striped mt-3">
                <thead>
                  <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Password</th>
                  </tr>
                </thead>
                <tbody>
                    @if(!empty($data))
                        @foreach($data as $crud)
                  <tr>
                    <td>{{ $crud->name }}</td>
                    <td>{{ $crud->email }}</td>
                    <td>{{ $crud->password }}</td>
                  </tr>
                        @endforeach
                    @endif
                </tbody>
              </table>
        </div>
    </div>
</div>
</body>
</html>

Let us execute this example by the following URL in the browser. This URL may be different based on your website.

https://howtowebcode.com/crud