Aulas
Disciplinas

Cursos / Informática para Internet / Desenvolvimento Backend / Aula

arrow_back Aula 11 - implementando interface em EJS

Criando layout do Blog em EJS (Parte 1)

Iniciando a construção do layout do blog iremos até o projeto disponibilizado na primeira aula e abriremos o arquivo index.html. Esse arquivo é uma página inicial, totalmente estática, de um blog.

Criando o layout do blog

Para prosseguir, devemos manter somente o conteúdo que não sofre alterações, por exemplo: cabeçalho, rodapé e barra lateral. Então, crie um arquivo na pasta layout nomeando-o de 'layout-blog.ejs' e adicione o código abaixo:

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Blog do IMD</title>

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
            integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    </head>

    <body>

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="#">Blod do IMD</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Alterna navegação">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Home <span class="sr-only">(Página atual)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Clientes</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Serviços</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Contanto</a>
                    </li>
                </ul>
            </div>
        </div>

    </nav>

    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item active" aria-current="page">Home</li>
        </ol>
    </nav>

        <div class="container">
            <div class="row">
                    <div class="col-md-8">
                            <%- body %>
                    </div>
                    <div class="col-md-4">

                            <div class="card mb-4">
                                <div class="card-header">
                                    Busca
                                </div>
                                <div class="card-body">
                                    <div class="input-group">
                                        <input class="form-control" type="text" placeholder="Digite aqui...">
                                        <button class="btn btn-secondary ml-2">Buscar</button>
                                    </div>
                                </div>
                            </div>

                            <div class="card mb-4">
                                <div class="card-header">
                                    Categorias
                                </div>
                                <div class="card-body">
                                    <dib class="row">
                                        <div class="col-lg-6">
                                            <ul class="list-unstyled">
                                                <li><a href="#">Web Design</a></li>
                                                <li><a href="#">Javascript</a></li>
                                                <li><a href="#">CSS</a></li>
                                            </ul>
                                        </div>
                                        <div class="col-lg-6">
                                            <ul class="list-unstyled">
                                                <li><a href="#">Web Design</a></li>
                                                <li><a href="#">Javascript</a></li>
                                                <li><a href="#">CSS</a></li>
                                            </ul>
                                        </div>
                                    </dib>
                                </div>
                            </div>

                            <div class="card mb-4">
                                <div class="card-header">
                                    Autor
                                </div>
                                <div class="card-body">
                                    <div class="text-center">
                                        <img src="/static/imgs/avatar.jpg" class="rounded-circle" alt="">
                                    </div>
                                    <p class="py-3">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ex, sit architecto
                                        tenetur, odit impedit quam corporis a libero assumenda suscipit fugiat in nesciunt labore
                                        pariatur dolor ipsam sed ducimus nemo.</p>
                                </div>
                            </div>

                        </div>
            </div>

        </div>

    <footer class="bg-dark py-3">
        <p class="text-white text-center">Desenvolvido pelo IMD</p>
    </footer>

        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
            integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
            crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
            integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
            crossorigin="anonymous"></script>

    </body>

    </html>

Criando uma nova rota

Após o layout criado, é preciso criar uma rota para que quando o usuário acesse essa rota seja realizado algum processamento e renderizada a página. Então, na pasta de "rotas", crie um arquivo chamado index.rota.js e implemente o código abaixo:

const express = require('express')
const router = express.Router()

router.get('/', async (req, res) => {
    res.render('pages/post', {layout: 'layout/layout-blog.ejs'})
})

module.exports = router

Criando a página

A rota anterior irá buscar um arquivo que ainda não existe na pasta pages. Então, é preciso criá-lo com o nome de ''posts.ejs e implementar o código que será injetado na marcação feita no layout. A implementação deve ser feita conforme se vê abaixo:

<%- contentFor('body') %>

<p> Conteúdo injetado! </p>

Adicionando a rota ao express

Apesar de ter criado a rota, o express ainda não pode enxergá-la. Então, no arquivo index.js inclua as linhas abaixo: 

    const indexRoute = require('./rotas/index.rota')

    app.use('/', indexRoute)

Versão 5.3 - Todos os Direitos reservados