Fazer seção 22 do curso WebDev Udemy (Angela Yu)

[AndreBuitoni]

Seção 22 - EJS

• [x] 263 - What we'll make: a TO DO list ----- ----- ----- ----- ----- ----- ----- 16/03/2023
• [x] 264 - Linter Errors with EJS
• [x] 265 - Templates? Why do we need templates? ----- ----- ----- ----- ----- 21/03/2023
• [x] 266 - Creating your first EJS template
• [x] 267 - Running Code inside the EJS Template
• [x] 268 - Passing Data from your Webpage to your Server
• [x] 269 - The Concept of Scope in the context of Javascript
• [x] 270 - Adding Pre-made CSS Stylesheets to your website
• [x] 271 - Understanding templates vs layouts
• [x] 272 - Understanding node module exports: How to pass functions and data between files
• [x] 273 - Tip From Angela - Use Accountability in your Favour
• [x] Postar resultado prático, se houver. ----- ----- ----- ----- ----- ----- ----- 21/03/2023

Link do MIRO (anotações da aula) Anotações da aula EJS no Miro

Repositório da aula no GitHub: https://github.com/AndreBuitoni/Web-Development/tree/main/todolist-v1

[AndreBuitoni]

AULA 266 - Creating your first EJS Template

Nessa aula, achei interessante o uso do SWITCH. Eu não conhecia esse código ainda. Ou, pelo menos, não lembrava dele. Na imagem abaixo, o início do nosso servidor. Implementando um template usando EJS

No HTML, a sintaxe do EJS é feita com <%= insiraSuaVariavelAqui %>

O resultado prático é uma frase que mostra o dia atual:

[AndreBuitoni]

AULA 267 - Running Code inside the EJS Template

Demonstração simples de como podemos usar tags EJS para executar Javascript dentro do arquivo EJS que contém o HTML. Para isso a tag é <% insiraAquiSeuJavascript %>

Resultado: O estilo do h1 ficou azul.

Extras:

As diferentes TAGS EJS podem ser consultadas no site www.ejs.co

[AndreBuitoni]

Aula 268 - Passing Data from your Webpage to your Server

Utilizamos um formulário simples com um input e um botão submit para enviar dados via POST REQUEST para o servidor.

O servidor então recebe os dados inseridos no input, adiciona esses dados num array global com o método push e então redireciona o usuário novamente para o diretório raiz "/" onde agora será renderizado o array atualizado de itens da lista.

Variável itens

Renderização da Lista no app.get("/")

Resultado Prático

Ah! Só faltou passar o código usado para criar a lista:

[AndreBuitoni]

Aula 269 - The Concept of Scope in the context of Javascript

Aula teórica explicando o conceito de escopo dentro de Javascript e abordando um pouco sobre as diferenças entre var, let e const. Recomendou usar let ao invés de var sempre que possível. Trocou todos os var por let no código.

[AndreBuitoni]

Aula 270 - Adding Pre-made CSS Stylesheets to your website

Adicionamos um CSS já pronto para o projeto e então adicionamos as classes e as divs necessárias para utilizar o CSS. Poucas novidades aqui.

O mais interessante foi aprender a autorizar o express a usar arquivos estáticos dentro da pasta public com o seguinte código: app.use(express.static("public"))

Arquivo CSS https://github.com/AndreBuitoni/Web-Development/blob/main/todolist-v1/public/css/styles.css

[AndreBuitoni]

Aula 271 - Understanding templates vs layouts

Aprendemos a diferença entre Templates e Layouts.

Utilizamos nossa TO DO LIST como um TEMPLATE para gerar um outra lista específica para tarefas do trabalho:

Por outro lado, criamos o HEADER e o FOOTER como páginas separadas para servirem de LAYOUTS que podem ser reutilizados em várias outras páginas. Para chamá-los, basta uma linha de código: <%- include('header'); -%> <%- include('footer'); -%>

Apenas para futura referência, segue breve explicação do ChatGPT sobre a diferença entre Templates e Layouts em EJS:

[AndreBuitoni]

Aula 272 - Understanding node module exports: How to pass functions and data between files

Criamos nosso próprio módulo para melhor entender o que são os módulos do Node.

Depois, fizemos a requisição desse módulo no servidor:

Por fim, nos livramos do código extra que estava dentro do app.get("/") (e que agora está no módulo date.js) e simplesmente chamamos o método necessário do nosso módulo com uma linha:

Essa aula conclui o capítulo sobre EJS.

[piantino]

Massa André, aprendeu bastante coisa que pode ser utilizado no backend em NodeJs e conceitos como formulários e templates que são utilizados em vários frameworks e linguagens diferentes.