É altura de criarmos o nosso layout para os produtos. Há muito que se possa falar sobre este tema, pode e deve consultar a página Blade Templates e estudar um pouco mais a fundo o tema.

Como não é nosso propósito estudar a fundo este tema, mas sim criar um layout para os nossos produtos, vamos diretos ao que nos importa: # Layouts Using Components.

Algo que devemos ter em atenção é que há partes do layout que são comuns em várias páginas. Assim devemos ter o cuidado de reaproveitar essas mesmas partes para não termos de escrever repetidamente o mesmo código de HTML. Assim, devemos criar uma página “pai”, com a estrutura principal, que vai partilhar essas partes comuns com os “filhos”.

Olhando para o nosso projeto, vamos à pasta resources\views e vamos criar uma pasta com o nome products.

Dentro desta pasta, crie um ficheiro com o nome layout.blade.php que pretendemos que seja este o ficheiro “pai”.

Neste ficheiro escreva o seguinte código HMTL:

A linha assinalada é onde vai entrar o código dos “filhos”.

Agora vamos criar um novo ficheiro com o nome create.blade.php que irá ser “filho” do ficheiro layout.blade.php.

Antes de verificar o seu funcionamento, temos de fazer mais uma coisa, temos de ir ao controlador de produtos, ao método create, e acrescentar a seguinte linha:

Para visualizar o resultado escreva na barra de endereços do seu browser localhost:8000/products/create

Neste momento estamos prontos para desenvolver o layout final para criar um produto. No ficheiro create.blade.php, dentro da @session, vamos desenvolver o HTML necessário para criar o seguinte formulário:

Podemos dividir o código em três partes:

• Parte superior do layout com um título e um botão para voltar à página principal dos produtos;

Aqui chamamos a atenção para a sintaxe blade que permite colocar informação dinâmica, isto é, permite criar uma rota para o índex (raiz) dos produtos (neste momento, se pressionar este botão, vai para uma página em branco, pois ainda não criamos a página principal dos produtos);

• A segunda parte é para deteção de erros no preenchimento do formulário, iremos criar um array com esses erros que depois serão aqui escritos;

De ter em conta que a sintaxe é do blade, poderá ver as sintaxes das estruturas em # Blade Directives na página oficial do Laravel.

• Por último, o código HTML, para criar o formulário:

Chamamos a atenção para a action do formulário cuja sintaxe volta a utilizar blade ao definir a rota dinâmica store em products.

A instrução @csrf deve ser utilizada sempre que definir um formulário HTML, esta incluirá um campo de token CSRF oculto no formulário para que o middleware de proteção CSRF possa validar a solicitação. Você pode usar a diretiva @csrf Blade para gerar o campo token.