Aulas
Disciplinas

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

arrow_back Aula 10 - View Engines

Adicionando estilo à página

O aspecto visual de uma página é extremamente importante, é ele que faz o usuário ser atraído e entretido.

A aplicação em desenvolvimento ainda se encontra muito limpa e para mudar isso será adicionada uma estilização.

Aplicando estilo na aplicação

Para aplicar o estilo será criada uma tag, chamada style, no arquivo index.ejs, que contém o HTML de cursos. Acompanhe a aula e ao final o arquivo deve ficar de acordo com o código abaixo: 

<!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">
    <title>Cursos</title>
    <style>
        body {
            background-color: aquamarine;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        }
        h1 {
            background-color:cornflowerblue;
            color: white;
            font-weight: 400;
            padding: 15px;
        }
    </style>
</head>
 <body>
        <ul>
            <%  cursos.forEach( function (curso) { %>

                    <% if (curso.ch > 300) { %>
                            <li><%=curso.nome%> (<%=curso.ch%>)</li>
                    <% } else { %>
                            <li><%=curso.nome%> (<b><%=curso.ch%></b>)</li>
            <% }})  %>
        </ul>
    </body>
</html>

Criando a página de alunos

Agora será implementada uma nova rota. Então, acompanhe a aula e no arquivo index.js adicione o código abaixo:

    app.get('/alunos', (req, res) => {
            const alunos = [
                    {nome: "João Pedro"},
                    {nome: "Fernanda"},
                    {nome: "Francisco"}
            ]
            res.render('pages/alunos/index', {alunos: alunos})
    })

Após isso, crie um index.ejs e implemente o HTML de listagem de alunos como o código abaixo:

!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">
    <title>Alunos</title>
    <style>
        body {
            background-color: aquamarine;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        }
        h1 {
            background-color:cornflowerblue;
            color: white;
            font-weight: 400;
            padding: 15px;
        }
    </style>
</head>
<body>
        <h1>Alunos</h1>
        <ul>
                <%  alunos.forEach( function (aluno) { %>
                        <li><%=aluno.nome%></li>
                <% }) %>
        </ul>
</body>
</html>

Versão 5.3 - Todos os Direitos reservados