Skip to main content

Views optimaliseren

Inleiding

We hebben nu een werkende CRUD.

We gaan nog wat aanpassingen maken, maar we gaan eerst onze view een beetje herorganiseren.

We hebben nu drie views:

  1. index
  2. edit
  3. update

Deze drie views lijken op elkaar en hebben allemaal een standaard HTML template. Eigenlijk is alleen de <body></body> anders.

En als we later een menu of banner willen maken dan zal die banner op alle drie de pagina's getoond moeten worden.

We gaan de template nu splitsen in een basis template en in een deel dat voor de views anders is.

Basis (blade) template

Maak een nieuwe template in de resources/stocks/view folder en noem deze base.blade.php.

Plaatst de volgende code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <title>Stocks</title>
</head>
<body>
  <div class="container" style="margin:40px;">
    <h1 class="display-3">Stocks</h1>
    @yield('main')
  </div>
</body>
</html>


@extends('base')
 
@section('content')
  <div>
    <a href="/stocks/create" class="btn btn-primary mb-3">Add Stock</a>
  </div>     

  <table class="table">
    <thead class="thead-light">
        <tr>
          <th>ID</th>
          <th>Stock Name</th>
          <th>Stock Ticket</th>
          <th>Stock Value</th>
          <th>Updated at</th>
          <th>Update</th>
          <th>Delete</th>
        </tr>
    </thead>
    <tbody>
        @foreach($stocks as $stock)
        <tr>
            <td>{{$stock->id}}</td>
            <td>{{$stock->stock_name}} </td>
            <td>{{$stock->ticket}}</td>
            <td>{{$stock->value}}</td>
            <td>{{$stock->updated_at}}</td>
            <td><a href="/stocks/edit/{{$stock->id}}" class="btn btn-primary">Edit</a></td>
            <td>
              <form action="/stocks/destroy/{{$stock->id}}" method="post">
                @csrf
                <button onclick="return confirm('Are you sure?')" class="btn btn-danger" type="submit">Delete</button>
              </form>
          </td>
        </tr>
        @endforeach
    </tbody>
  </table>
@endsection

 

Back to top