Retrieve data from database with data table using Laravel

Laravel Basic Form & Table View Setup

Step 1: Create a New Laravel Project

Open your terminal and run:

composer create-project --prefer-dist laravel/laravel laravel_basic

Step 2: Configure the Database

Open the .env file in your project root and update these lines with your MySQL credentials:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_db
DB_USERNAME=root
DB_PASSWORD=your_password

Step 3: Run Migrations

After setting up your database, run:

php artisan migrate

This creates the default Laravel tables in your database.

Step 4: Add Blade View Page

Create the following view file:

resources/views/errors/view_test.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Personal</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,700">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

  <!-- DataTable CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.7/css/responsive.bootstrap4.min.css">

  <style>
    body {
      color: #999;
      background: #f3f3f3;
      font-family: 'Roboto', sans-serif;
    }
    .form-control {
      border-color: #eee;
      min-height: 41px;
      box-shadow: none !important;
    }
    .form-control:focus {
      border-color: #5cd3b4;
    }
    .form-control, .btn {
      border-radius: 3px;
    }
    .signup-form {
      width: 500px;
      margin: 0 auto;
      padding: 30px 0;
    }
    .signup-form h2 {
      color: #333;
      margin-bottom: 30px;
      border-bottom: 3px solid #5cd3b4;
      display: inline-block;
    }
    .signup-form form {
      background: #fff;
      padding: 30px;
      box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    }
    .signup-form .btn {
      background: #5cd3b4;
      font-weight: bold;
      min-width: 140px;
    }
    .signup-form .btn:hover {
      background: #41cba9;
    }
  </style>
</head>
<body>
  <div class="signup-form">
    <form action="{{ route('form/page_test/save') }}" method="POST">
      @csrf
      <h2>Personal</h2>

      @if(Session::has('insert'))
        <div class="alert alert-success">{{ Session::get('insert') }}</div>
      @endif

      @if(Session::has('error'))
        <div class="alert alert-danger">{{ Session::get('error') }}</div>
      @endif

      <div class="form-group">
        <label>Username</label>
        <input type="text" name="username" class="form-control @error('username') is-invalid @enderror" placeholder="Enter username">
        @error('username')<span class="invalid-feedback">{{ $message }}</span>@enderror
      </div>

      <div class="form-group">
        <label>Email Address</label>
        <input type="email" name="email" class="form-control @error('email') is-invalid @enderror" placeholder="Enter email">
        @error('email')<span class="invalid-feedback">{{ $message }}</span>@enderror
      </div>

      <div class="form-group">
        <label>Phone Number</label>
        <input type="tel" name="phone" class="form-control @error('phone') is-invalid @enderror" placeholder="Enter phone number">
        @error('phone')<span class="invalid-feedback">{{ $message }}</span>@enderror
      </div>

      <button type="submit" class="btn btn-primary btn-lg">Save</button>
    </form>
  </div>

  <div class="container mt-5">
    <table id="example" class="table table-bordered table-striped nowrap" style="width:100%">
      <thead>
        <tr>
          <th>ID</th>
          <th>Full Name</th>
          <th>Email</th>
          <th>Phone Number</th>
          <th>Created At</th>
        </tr>
      </thead>
      <tbody>
        @foreach($data as $value)
          <tr>
            <td>{{ $value->id }}</td>
            <td>{{ $value->username }}</td>
            <td>{{ $value->email }}</td>
            <td>{{ $value->phone }}</td>
            <td>{{ $value->created_at }}</td>
          </tr>
        @endforeach
      </tbody>
    </table>
  </div>

  <!-- Scripts -->
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js"></script>
  <script src="https://cdn.datatables.net/responsive/2.2.7/js/dataTables.responsive.min.js"></script>
  <script src="https://cdn.datatables.net/responsive/2.2.7/js/responsive.bootstrap4.min.js"></script>

  <script>
    $(document).ready(function() {
      $('#example').DataTable({
        responsive: {
          details: {
            display: $.fn.dataTable.Responsive.display.modal({
              header: function (row) {
                var data = row.data();
                return 'Details for ' + data[0] + ' ' + data[1];
              }
            }),
            renderer: $.fn.dataTable.Responsive.renderer.tableAll({ tableClass: 'table' })
          }
        }
      });
    });
  </script>
</body>
</html>

Step 5: Start Laravel Development Server

In your terminal:

php artisan serve

Then open your browser and visit:

http://localhost:8000

Or if your project is in laravel_basic folder:

http://localhost/laravel_basic/public/

Souy Soeng