Aplicação Web Parte1 (Node M HTML) ETEGIL

ETE ADVOGADO JOSÉ DAVID GIL
RODRIGUES
CURSO: TÉCNICO EM DESENVOLVIMENTO DE SISTEMAS
PROGRAMAÇÃO EM
NOVAS TECNOLOGIAS II
(WEB)
2
Node.js + HTML
3
CONTEÚDO
• CONCEITO
• HISTORICO NODE.JS
• CARACTERISTICAS NODE.JS
• EXPRESS
• ROUTES E VIEWS
4
Node.js + HTML
5
Node.js + HTML
• Como vimos no slide anterior, usaremos o framework Express para criar
aplicações web usando Node.js.
• O Express é um framework bem extensível o que lhe permite plugar diversos
módulos nele para alterar seus comportamentos.
• Dentre esses comportamentos está a renderização de páginas web, que aqui
vimos que é feita usando a linguagem HTML.
6
Node.js + HTML
• Usaremos o módulo de renderização (view engine) Embedded JavaScript ou
EJS, que permite usar JavaScript server-side juntamente com HTML para
construir nossas telas.
• Essa junção de linguagens é permitida através do uso de server-tags como no
exemplo abaixo, dentro de arquivos com extensão .ejs que são processados
usando o Node.js:
<%= title %>
7
• Arquivos HTML são interpretados diretamente no navegador, sem
necessidade de qualquer software adicional.
• No entanto, arquivos .ejs são processados pelo módulo EJS em conjunto com
o Node.js.
• Esse módulo lê o arquivo .ejs, da primeira à última linha, e quando encontra
uma server-tag (aquelas tags com %), delega ao Node.js que faça alguma
coisa com ela, pois é código JS server-side.
8
Nota:
• se o EJS encontrar código JavaScript dentro de uma tag <SCRIPT> (que
veremos mais pra frente), ele ignora, pois nesses caso é JavaScript client-side
e deve ser processado pelo browser.
• O que o Node.js vai fazer com essa server-tag depende de diversos fatores de
como a server-tag está escrita e qual seu conteúdo.
• A server-tag pode ser descrita como abaixo:
<%= title %>
9
Node.js + HTML
• Se você usar apenas <%, você pode colocar
qualquer código JavaScript que você quiser,
incluindo condicionais, laços, declaração de
variáveis e functions, etc.
• Tudo que for declarado é válido para todo o
contexto da página e permite, por exemplo,
declarar uma variável em um ponto e usá-la em
outro ponto:
10
Desenvolvendo Aplicação Web
11
Para começar crie um diretório chamado node na raiz do
seu computador conforme exemplo abaixo
12
Instalação do Framework Express
• Uma vez com o NPM instalado , vamos instalar um módulo que nos será
muito útil em diversos momentos. Rode o seguinte comando com permissão
de administrador no terminal ('sudo' em sistemas Unix-like):
13
Ainda no diretório Node1 execute o
comando:
express -e --git crud
irá criar a estrutura de diretórios da
aplicação.
14
Assim ficará a estrutura do seu
projeto no computador
Depois entre na pasta do projeto e instale as dependências:
cd crud
npm install
16
Inicie o Visual Studio
Code e abra o
projeto apertando as
teclas Ctrl + k + o
Acesse a pasta views e o arquivo index.ejs
19
No arquivo index.ejs digite o código abaixo
<!DOCTYPE html>
<html>
<head>
<title>CRUD de Clientes</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<meta charset="utf-8" />
</head>
<body>
20
<h1>Listagem de Clientes</h1>
<p>Clientes já cadastrados no sistema.</p>
<table style="width:50%">
<thead>
<tr style="background-color: #CCC">
<td style="width:50%">Nome</td>
<td style="width:15%">Idade</td>
<td style="width:15%">UF</td>
<td>Ações</td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4">Nenhum cliente cadastrado.</td>
</tr>
</tbody>
21
<tfoot>
<tr>
<td colspan="4">
<a href="/new">Cadastrar Novo</a>
</td>
</tr>
</tfoot>
</table>
</body>
22
A seguir inicie o servidor para ver como ficou a página
23
Após digitar o código a página index.ejs deverá ter a aparência
abaixo:
Essa tela será modificada depois para dinamicamente listar os clientes cadastrados no
banco de dados...
24
• Agora, note que o link de
Cadastrar Novo está levando
para uma URL /new que ainda
não existe.
• Primeiro, crie uma nova view
chamada new.ejs :
25
<!DOCTYPE html>
<html>
<head>
<title>CRUD de Clientes</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<meta charset="utf-8" />
</head>
26
<body>
<h1><%= title %></h1>
<p>Preencha os dados abaixo para salvar o cliente.</p>
<form action="<%= action %>" method="POST">
<p>
<label>Nome: <input type="text" name="nome" /></label>
</p>
<p>
<label>Idade: <input type="number" name="idade" /></label>
</p>
<p>
27
<label>UF: <select name="uf">
<option>RS</option>
<option>SC</option>
<option>PR</option>
</select></label>
</p>
<p>
<a href="/">Cancelar</a> | <input type="submit" value="Salvar" />
</p>
</form>
</body>
</html>
28
Agora, para que essa tela new.ejs possa ser acessada quando o usuário clicar
no link da homepage, devemos criar uma rota GET /new no nosso
routes/index.js, como abaixo:
29
Insira a uma rota conforme exemplo:
30
• Precisamos criar outra rota
para receber um POST
/new.
• Futuramente esta rota vai
salvar os dados no banco,
mas por enquanto apenas
está redirecionando o
usuário de volta para a
página inicial com uma
informação na URL:
31
Agora você pode parar o servidor com Ctrl + c e em seguida da um
npm start para iniciar o servidor
Ctrl + c
32
Então você pode acessar a página /new
33
fonte
• Duarte, Luiz. Programação Web com Node.js: Edição MySQL .
• https://www.gobacklog.com/blog/back-end-guia-para-empreendedores/
• https://www.youtube.com/watch?v=jLU1p0vu4QA
• Node.js Versus Laravel Versus Django: The best back-end web framework
(softude.com)
Assistam:
(1) Como instalar e configurar Node.js no Windows - YouTube
https://www.youtube.com/watch?v=bmhFFFAxve0&list=RDCMUCtM4fMMVCxr
XAmqMJ6ZL5Ww&index=13
• (1) O que é HTTP? (em 15 minutos) – YouTube
• (1) Package.json e NPM: Tudo que você queria saber! - YouTube
34

Aplicação Web Parte1 (Node M HTML) ETEGIL

Enviado por

Direitos autorais:

Formatos disponíveis

Aplicação Web Parte1 (Node M HTML) ETEGIL

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Aplicação Web Parte1 (Node M HTML) ETEGIL

Enviado por

Direitos autorais:

Formatos disponíveis

ETE ADVOGADO JOSÉ DAVID GIL

<%= title %>

Você também pode gostar