Para estruturar as vistas dos recursos de produto, vamos usar o layout principal criado nos capítulos anteriores
index.blade.php
A vista index.blade.php será usada para mostrar todos os produtos numa lista. Crie este ficheiro na pasta resources/views/produtos/:
@extends('layouts.app')
@section('content')
<div class="row justify-content-center mt-3">
<div class="col-md-12">
@if ($message = Session::get('success'))
<div class="alert alert-success" role="alert">
{{ $message }}
</div>
@endif
<h1>Lista de Produtos</h1>
<a href="{{ route('produtos.create') }}" class="btn btn-primary">Adicionar Produto</a>
<table class="table table-striped table-bordered">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Código</th>
<th scope="col">Nome</th>
<th scope="col">Quantidade</th>
<th scope="col">Preço</th>
<th scope="col">Ações</th>
</tr>
</thead>
<tbody>
@forelse($produtos as $produto)
<tr>
<td>{{ $produto->id }}</td>
<td>{{ $produto->code }}</td>
<td>{{ $produto->name }}</td>
<td>{{ $produto->quantity }}</td>
<td>{{ $produto->price }}</td>
<td>
<a href="{{ route('produtos.show', $produto->id) }}" class="btn btn-info">Ver</a>
<a href="{{ route('produtos.edit', $produto->id) }}" class="btn btn-warning">Editar</a>
<form action="{{ route('produtos.destroy', $produto->id) }}" method="POST" style="display:inline;">
@csrf
@method('DELETE')
<button type="submit" class="btn btn-danger">Apagar</button>
</form>
</td>
</tr>
@empty
<tr>
<td colspan="6">
<span class="text-danger">
<strong>Não foram encontrados produtos</strong>
</span>
</td>
</tr>
@endforelse
</tbody>
</table>
{{ $produtos->links() }}
</div>
</div>
@endsection
Esta vista inclui uma tabela que mostra a lista de produtos, cada um com opções para ver, editar ou apagar. Tem existe a opção para adicionar um novo produto
create.blade.php
A vista create.blade.php permitirá ao utilizador adicionar um novo produto. Crie este ficheiro na pasta resources/views/produtos/:
@extends('layouts.app')
@section('content')
<div class="row justify-content-center mt-3">
<div class="col-md-8">
<div class="card">
<div class="card-header">
<div class="float-start">
Adicionar Novo Produto
</div>
<div class="float-end">
<a href="{{ route('produtos.index') }}" class="btn btn-primary btn-sm">← Voltar</a>
</div>
</div>
<div class="card-body">
<form action="{{ route('produtos.store') }}" method="post">
@csrf
<div class="mb-3 row">
<label for="code" class="col-md-4 col-form-label text-md-end text-start">Código</label>
<div class="col-md-6">
<input type="text" class="form-control @error('code') is-invalid @enderror" id="code" name="code" value="{{ old('code') }}">
@if ($errors->has('code'))
<span class="text-danger">{{ $errors->first('code') }}</span>
@endif
</div>
</div>
<div class="mb-3 row">
<label for="name" class="col-md-4 col-form-label text-md-end text-start">Nome</label>
<div class="col-md-6">
<input type="text" class="form-control @error('name') is-invalid @enderror" id="name" name="name" value="{{ old('name') }}">
@if ($errors->has('name'))
<span class="text-danger">{{ $errors->first('name') }}</span>
@endif
</div>
</div>
<div class="mb-3 row">
<label for="quantity" class="col-md-4 col-form-label text-md-end text-start">Quantidade</label>
<div class="col-md-6">
<input type="number" class="form-control @error('quantity') is-invalid @enderror" id="quantity" name="quantity" value="{{ old('quantity') }}">
@if ($errors->has('quantity'))
<span class="text-danger">{{ $errors->first('quantity') }}</span>
@endif
</div>
</div>
<div class="mb-3 row">
<label for="price" class="col-md-4 col-form-label text-md-end text-start">Preço</label>
<div class="col-md-6">
<input type="number" step="0.01" class="form-control @error('price') is-invalid @enderror" id="price" name="price" value="{{ old('price') }}">
@if ($errors->has('price'))
<span class="text-danger">{{ $errors->first('price') }}</span>
@endif
</div>
</div>
<div class="mb-3 row">
<label for="description" class="col-md-4 col-form-label text-md-end text-start">Descrição</label>
<div class="col-md-6">
<textarea class="form-control @error('description') is-invalid @enderror" id="description" name="description">{{ old('description') }}</textarea>
@if ($errors->has('description'))
<span class="text-danger">{{ $errors->first('description') }}</span>
@endif
</div>
</div>
<div class="mb-3 row">
<input type="submit" class="col-md-3 offset-md-5 btn btn-primary" value="Adicionar">
</div>
</form>
</div>
</div>
</div>
</div>
@endsection
Esta vista contém um formulário para criar um novo produto. Usa o método POST para enviar dados para a rota produtos.store. Repare no uso obrigatório do @csrf devido à segurança de Cross Scripting.
edit.blade.php
A vista edit.blade.php será utilizada para editar um produto existente. Crie este ficheiro na pasta resources/views/produtos/:
@extends('layouts.app')
@section('content')
<div class="row justify-content-center mt-3">
<div class="col-md-8">
<div class="card">
<div class="card-header">
<div class="float-start">
Editar Produto
</div>
<div class="float-end">
<a href="{{ route('produtos.index') }}" class="btn btn-primary btn-sm">← Voltar</a>
</div>
</div>
<div class="card-body">
<form action="{{ route('produtos.update', $produto->id) }}" method="post">
@csrf
@method("PUT")
<div class="mb-3 row">
<label for="code" class="col-md-4 col-form-label text-md-end text-start">Código</label>
<div class="col-md-6">
<input type="text" class="form-control @error('code') is-invalid @enderror" id="code" name="code" value="{{ $produto->code }}">
@if ($errors->has('code'))
<span class="text-danger">{{ $errors->first('code') }}</span>
@endif
</div>
</div>
<div class="mb-3 row">
<label for="name" class="col-md-4 col-form-label text-md-end text-start">Nome</label>
<div class="col-md-6">
<input type="text" class="form-control @error('name') is-invalid @enderror" id="name" name="name" value="{{ $produto->name }}">
@if ($errors->has('name'))
<span class="text-danger">{{ $errors->first('name') }}</span>
@endif
</div>
</div>
<div class="mb-3 row">
<label for="quantity" class="col-md-4 col-form-label text-md-end text-start">Quantidade</label>
<div class="col-md-6">
<input type="number" class="form-control @error('quantity') is-invalid @enderror" id="quantity" name="quantity" value="{{ $produto->quantity }}">
@if ($errors->has('quantity'))
<span class="text-danger">{{ $errors->first('quantity') }}</span>
@endif
</div>
</div>
<div class="mb-3 row">
<label for="price" class="col-md-4 col-form-label text-md-end text-start">Preço</label>
<div class="col-md-6">
<input type="number" step="0.01" class="form-control @error('price') is-invalid @enderror" id="price" name="price" value="{{ $produto->price }}">
@if ($errors->has('price'))
<span class="text-danger">{{ $errors->first('price') }}</span>
@endif
</div>
</div>
<div class="mb-3 row">
<label for="description" class="col-md-4 col-form-label text-md-end text-start">Descrição</label>
<div class="col-md-6">
<textarea class="form-control @error('description') is-invalid @enderror" id="description" name="description">{{ $produto->description }}</textarea>
@if ($errors->has('description'))
<span class="text-danger">{{ $errors->first('description') }}</span>
@endif
</div>
</div>
<div class="mb-3 row">
<input type="submit" class="col-md-3 offset-md-5 btn btn-primary" value="Atualizar">
</div>
</form>
</div>
</div>
</div>
</div>
@endsection
Esta vista inclui um formulário para editar os detalhes de um produto existente, usando os métodos @csrf e @method('PUT') para enviar os dados para a rota produtos.update.
show.blade.php
A vista show.blade.php mostrará os detalhes de um produto específico. Crie este ficheiro na pasta resources/views/produtos/:
@extends('layouts.app')
@section('content')
<div class="row justify-content-center mt-3">
<div class="col-md-8">
<div class="card">
<div class="card-header">
<div class="float-start">
Detalhes do Produto
</div>
<div class="float-end">
<a href="{{ route('produtos.index') }}" class="btn btn-primary btn-sm">← Voltar</a>
</div>
</div>
<div class="card-body">
<div class="row">
<label for="code" class="col-md-4 col-form-label text-md-end text-start"><strong>Código:</strong></label>
<div class="col-md-6" style="line-height: 35px;">
{{ $produto->code }}
</div>
</div>
<div class="row">
<label for="name" class="col-md-4 col-form-label text-md-end text-start"><strong>Nome:</strong></label>
<div class="col-md-6" style="line-height: 35px;">
{{ $produto->name }}
</div>
</div>
<div class="row">
<label for="quantity" class="col-md-4 col-form-label text-md-end text-start"><strong>Quantidade:</strong></label>
<div class="col-md-6" style="line-height: 35px;">
{{ $produto->quantity }}
</div>
</div>
<div class="row">
<label for="price" class="col-md-4 col-form-label text-md-end text-start"><strong>Preço:</strong></label>
<div class="col-md-6" style="line-height: 35px;">
{{ $produto->price }} €
</div>
</div>
<div class="row">
<label for="description" class="col-md-4 col-form-label text-md-end text-start"><strong>Descrição:</strong></label>
<div class="col-md-6" style="line-height: 35px;">
{{ $produto->description }}
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
Esta vista apresenta uma visualização detalhada de um produto, com um botão para voltar à lista de produtos.
Testar
Para testar o projeto aceda a http://127.0.0.1:8000/produtos.
Pode descarregar o projeto completo aqui. Tem que estar registado para descarregar o projeto.
Resumo
Neste capítulo, criámos diversas vistas Blade para gerir os recursos de produto na nossa aplicação Laravel. Estas vistas incluem layouts, vistas para listar, criar, editar e mostrar produtos. Estes ficheiros formam a base das interações do utilizador dentro da aplicação, permitindo a visualização e manipulação eficiente dos dados de produto. Com estas vistas funcionais, a interface do utilizador da nossa aplicação está agora completa.