Não precisa ser a versão 5, mas é melhor 😄
O estilista da web
A linguagem de programação da Web
Não confunda 😉
O que acontece quando você digita um endereço no browser?
O servidor web é como um mordomo
HTTP | 80 |
HTTPS | 443 |
FTP | 21 |
SMTP | 25 |
SSH | 22 |
Sites Estáticos | Sites Dinâmicos |
---|---|
Conteúdo de arquivos hospedados | Conteúdo gerado por um programa |
Conteúdo sempre o mesmo | Diferente em certas condições |
HTML, CSS e JavaScript | PHP, Ruby, Python, C++, etc |
Acessa somente dados do computador do cliente | Pode acessar sistemas de banco de dados |
A programação web acontece em códigos relevantes para o cliente e códigos relevantes para o servidor.
👆 websites dinâmicosO protocolo dos navegadores e servidores web
O HTTP é o protocolo de comunicação utilizado pelos navegadores e servidores web. Quando o navegador solicita uma página web é chamado de requisição e quando o servidor web envia a página solicitada de volta é chamado de resposta.
O que é um protocolo de comunicação?
Protocolos não se misturam
Português | Inglês |
---|---|
Requisição | Request |
Resposta | Response |
Método | Method |
Caminho | Path |
Cabeçalhos | Headers |
Conteúdo/Corpo | Content/Body |
Código de estado | Status code |
Para acessar http://portal.fanese.edu.br/?page_id=220
A requisição feita pelo cliente
GET /?page_id=220 HTTP/1.1
Host: portal.fanese.edu.br
Explicando a requisição:
GET
: eu quero obter uma informação/?page_id=220
: a informação desejadaHTTP/1.1
: estou me comunicando com o protocolo HTTP na versão 1.1Host
: estou pedindo de um site específicoportal.fanese.edu.br
: o nome do siteEsta requisição tem o conteúdo vazio!
A resposta entregue pelo servidor
HTTP/1.1 200 OK
Date: Mon, 31 Jul 2017 21:15:35 GMT
Content-Type: text/html;charset=UTF-8
Server: Apache
<!DOCTYPE html>
<html lang="pt-BR">
…
O servidor diz “eu também falo HTTP 1.1, sua requisição foi um sucesso,
então eu respondi com o código de estado 200
.
Nos cabeçalhos têm a data em que enviei a resposta, o tipo do conteúdo e quem sou eu.
A resposta inclui o conteúdo da página que você pediu, iniciando por <!DOCTYPE html>
.”
Baixe o Insomnia em https://insomnia.rest/
O identificador de endereços na Internet.
Quando acessamos http://portal.fanese.edu.br/, estamos acessando o servidor web na porta 80
.
O seguinte URL dá acesso ao mesmo site: http://portal.fanese.edu.br:80/.
Para acesso a um servidor que não está na porta 80
,
é necessário afixar a porta ao nome do servidor.
O tráfego de HTTP seguro se faz pela porta 443.
É óbvio que também é possível usar outra porta:
GET |
A requisição mais comum de todas. Usamos para obter um recurso do servidor. |
---|---|
POST | Usamos para solicitar alterações no lado servidor. |
PUT | Substitui o conteúdo de um recurso. |
DELETE | Remove um recurso especificado. |
TRACE | Raramente usados por desenvolvedores web |
OPTIONS | |
PATCH | |
CONNECT | |
HEAD |
GET /blog/ HTTP/1.1
Host: www.exemplo.com.br
User-Agent: Mozilla/5.0 (Linux x86) Chrome/59.0
Accept: text/html
Accept-Charset: UTF-8
Accept-Language: pt-br
Cookie: Variant=1; Theme=blue;
Referer: http://exemplo.com/index.html
If-Modified-Since: Sat, 07 Aug 2017 21:18:31 GMT
↔️ Linha de requisição (método/caminho/versão)
↔️ O servidor desejado
↔️ A identificação do browser
↔️ O tipo de conteúdo esperado pelo browser
↔️ A codificação de caracteres esperada
↔️ O idioma esperado pelo browser
↔️ O browser envia os cookies armazenados
↔️ Browser envia site que originou a requisição
↔️ Faz uma requisição condicional
POST /blog/cadastro.php HTTP/1.1
Host: www.exemplo.com.br
Accept: text/html
Accept-Charset: UTF-8
Accept-Language: pt-br
Content-Type: application/x-www-form-urlencoded
Content-Length: 35
Cookie: Variant=1; Theme=blue;
name=John+Darling&address=Neverland
↔️ O tipo de conteúdo do corpo da requisição
↔️ O tamanho em bytes do corpo da requisição
🔵️ O corpo da requisição
protected void doGet(HttpServletRequest request, HttpServletResponse response) {
// Método da requisição: "GET", "POST", etc.
String metodo = request.getMethod();
// URI da requisição
String uri = request.getRequestURI();
// Query string, se houver
String queryString = request.getQueryString();
// Cabeçalhos
String host = request.getHeader("Host");
String userAgent = request.getHeader("User-Agent");
String accept = request.getHeader("Accept");
String acceptLang = request.getHeader("Accept-Language");
String cookie = request.getHeader("Cookie");
// Corpo da requisição
BufferedReader reader = request.getReader();
}
HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Content-Lenght: 27855
Set-Cookie: Variant=1; Theme=blue;
Cache-Control: max-age=3600
<!DOCTYPE html>
<html lang="pt-BR">
…
↔ Código de estado da resposta
↔️ O tipo de conteúdo do corpo da resposta
↔️ O tamanho em bytes do corpo da resposta
↔️ O servidor envia cookies para o browser armazenar
↔️ O servidor indicando para o cliente fazer cache
🔵️ Início do corpo da resposta
🔵
🔵
HTTP/1.1 301 Moved Permanently
Location: https://www.wikipedia.org/
Content-Type: text/html; charset=iso-8859-1
Content-Length: 234
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head>
<title>301 Moved Permanently</title>
…
↔️ Local para onde o browser deve redirecionar
// Código de Estado
response.setStatus(200);
// Cabeçalhos da resposta
response.setHeader("Content-Type", "text/html");
response.setHeader("Content-Language", "pt-BR");
response.setHeader("Content-Length", "37");
response.setHeader("Set-Cookie", "Variant=1; Theme=blue;");
response.setHeader("Expires", "Fri, 25 Aug 2017 13:45:42 GMT");
// Corpo da resposta
PrintWriter out = response.getWriter();
out.println("<html><body>Hello World</body></html>");
O código abaixo pode não funcionar!
PrintWriter conteudo = response.getWriter();
conteudo.println("<html><body>Exemplo</body></html>");
response.setStatus(200);
response.setHeader("Content-Type", "text/html");
response.setHeader("Content-Language", "pt-BR");
O código de estado e os cabeçalhos são enviados para o cliente antes do corpo da resposta.
O método sendError emite uma página de erro.
response.sendError(400);
Estrutura geral
tipo/subtipo
Exemplos
text/plain
text/html
text/css
text/javascript
image/jpeg
image/png
audio/mpeg
audio/ogg
audio/*
video/mp4
application/octet-stream
Se o lado servidor da Wikipédia fosse em Java, provavelmente teria o seguinte código.
response.setStatus(301);
response.setHeader("Location", "https://www.wikipedia.org/");
Atalho em Java para redirecionar
response.sendRedirect("https://www.wikipedia.org/");
O protocolo HTTP especifica que o conteúdo da resposta do método GET pode ser mantido em cache.
GET /index.html HTTP/1.1
Host: www.exemplo.com.br
…
HTTP/1.1 200 OK
Last-Modified: Fri, 25 Aug 2017 21:15:59 GMT
…
GET /index.html HTTP/1.1
Host: www.exemplo.com.br
If-Modified-Since: Fri, 25 Aug 2017 21:15:59 GMT
…
HTTP/1.1 304 Not Modified
…
Se houve modificações, teremos uma nova resposta de código 200, a data de modificação atualizada, o ciclo reinicia!
Este slide pode ser encontrado em:
http://prof.wagnermacedo.com/2018-1/PJW/3-fundamentos-programacao-web