cefet_front_end

Introdução a servidores Web

Apache, PHP, MySQL e os piratas :crown: x2

O que veremos hoje

O que é um servidor
- O servidor Apache
PHP: PHP Hypertext Preprocessor
Bancos de dados e o MySQL

Servidor Web

O que come, onde vive

Como fizemos até hoje?
O que faz um servidor Web?
Página estática vs página dinâmica
Servidor Apache

Como fizemos até agora

Nas práticas
- Foram criados arquivos (HTML, CSS, etc) e, os mesmos, foram exibidos no navegador
- Os arquivos de um computador não podiam ser visualizados em outro
Para disponibilizar para demais computadores, precisamos de um serviço que:
- Mantenha os arquivos
- A partir de um requisiçäo, envie os arquivos solicitados
- Controle os determinados erros que poderiam ocorrer
  - Página inexistente, falta de permissão
Para isso, usaremos um servidor Web e nos comunicaremos por meio do protocolo HTTP

Relembrando, o protocolo HTTP

É um protocolo na camada de aplicação

Conjunto de regras bem definidas descrevendo como entidades se comunicam.
- É a “língua falada” pelo navegador e pelo servidor web
Modelo requisição → resposta

Navegador requisita algo e Servidor responde

Requisição:

GET /index.html HTTP/1.1
Host: www.twitter.com

Resposta:

HTTP/1.1 200 OK
Date: Mon, 23 May 2005 22:38:34 GMT
Server: Apache/1.3.3.7 (Unix) (Red-Hat/Linux)
Content-Type: text/html; charset=UTF-8
Content-Length: 131

<!DOCTYPE html>
<html>
<head>
  <title>Twitter</title>
</head>
<body>
  Olá mundo, este é um tweet.
</body>
</html>

Carregando uma página com um servidor vs sem

O que faz um servidor Web?

O servidor Web precisa:
1. Saber “falar” o protocolo HTTP para atender as requisições
2. Conhecer o sistema de arquivos do SO para entregar arquivos solicitados (JS, HTML, CSS, imagens etc.)
O servidor Web pode (opcional… alguns fazem, outros não):
1. Executar algum arquivo escrito em alguma linguagem de programação
2. Permitir a geração dinâmica de arquivos HTML (e.g., usando PHP)
3. Permitir a recepção de arquivos (e.g., cliente fazendo upload)
4. Entender outros protocolos além de HTTP: HTTPS, FTP, etc.
5. Gerenciar conexões simultâneas de vários “solicitantes”

Páginas HTML estáticas vs páginas dinâmicas

Pág. estáticas – O servidor simplesmente entrega um arquivo .html da forma como ele foi criado pelo programador – É o que temos feito

Pág. dinâmicas – Podem exibir um conteúdo diferente, dependendo: - Usuário que está logado - Parâmetros de entrada - Além disso, elas podem exibir conteúdo que está armazenado em um banco de dados – É o que vamos fazer hoje!

Site das ovelhas: páginas estáticas

Exemplo de uma página estática

Exemplo:
- Existe um arquivo index.html para a página inicial
- +1 arquivo .html para cada raça
  - algodovelha.html
  - piratovelha.html
  - ovelho-pixel.html
- Problema: precisa-se repetir muito código HTML entre uma página e outra

Site das ovelhas: páginas dinâmicas

Páginas dinâmicas

O que é uma URL? Unique Resource Locator

As partes de uma URL

domínio – Em que computador estão os arquivos

porta – Qual endereço do programa dentro do computador

caminho – Qual o endereço até o arquivo

query string – Identificar o que se deseja mostrar - por exemplo, o código identificador da ovelha

O back-end pode usar a query string para fazer uma busca no banco de dados e retornar informações sobre algo específico.

Servidores Web

Exemplos de Servidores Web:
1. Apache
2. Tomcat
3. JBoss
4. IIS
5. Nginx
6. http-server
Vejamos um exemplo de servidor web que simplesmente envia arquivos estáticos (.html, .js, .css, imagens etc.):
```
  http-server .
```
Além de servir arquivos estáticos, eles podem executar scripts (programas) em diversas outras linguagens:
- PHP, Python, Java, ASP .NET etc.
A esses programas, que executam em um servidor web, damos o nome de back-end (digamos, a “parte oculta” de um site)

Apache

O servidor web mais utilizado desde 1995
Tipicamente (mas não exclusivamente) associado à linguagem PHP
Motivos para seu sucesso:
1. Projeto altamente modularizado e configurável
2. Gratuito
3. Extensível
4. Bom desempenho
5. Multi-plataforma (Linux, Windows, OSX)

PHP

Hypertext Preprocessor

Sintaxe Básica
Condicionais
Estrutura de Repetição
Vetores

PHP - Hypertext Preprocessor

É uma linguagem amplamente usada
É executada no servidor para preprocessar e gerar HTML dinamicamente
O código PHP é tipicamente mesclado ao HTML
- Mas existem formas mais organizadas
Assim, todo código PHP deve iniciar por <?php e finalizar com ?>

...
<body>
  <h1>Produto: <?php echo produto["nome"]; ?></h1>
</body>
</html>

PHP - Sintaxe Básica

echo: exibe no HTML o que for passado como parametro. Exemplo, arquivo index.php: ```php

... Olá Mundo

"; ?>

- O servidor irá ler `index.php`, processá-lo e enviar ao navegador o
	seguinte código HTML:
```html
<!DOCTYPE html>
<html>
<head>...</head>
<body>
  <p>Olá Mundo</p>
</body>
</html>

PHP - Variáveis

Variáveis não precisam ser declaradas
Toda a variável inicia-se com o caractere $
Exibir a variável no HTML: echo (tipo printf do C)
Para concatenação de strings, usa-se o ponto .

Com aspas duplas, o PHP faz substituição das variáveis na string:

<?php
  $a = 1;
  echo $a; //imprime: 1
  echo "resultado: " . $a;  // imprime: resultado: 1
  echo "resultado: $a";     // imprime: resultado: 1
  echo 'resultado: $a';     // imprime: resultado: $a
?>

PHP - Condicionais

Condicionais possuem a sintaxe similar ao JavaScript:

<?php
  $a = 1;
  $b = rand(); // rand(): retorna um número inteiro aleatório
  echo "b: $b";  
  if ($a > $b) {
    echo "'a' é maior que 'b'!";
  } else {
    echo "'b' é maior ou igual a 'a'!";
  }
?>

PHP - Estrutura de repetição - for

Também possui a sintaxe similar ao JavaScript

<?php $numero = rand(2,9); 			// aleatório entre 2 e 9 	?>
<h1>Tabuada do <?php echo $numero ?></h1>
<ul>
<?php
  for($i = 1; $i < 10; $i++) {
    $resultado = $i * $numero;
    echo "<li>$i x $numero = $resultado</li>";
  }
?>
</ul>

PHP - Estrutura de repetição - while

<?php $numero = rand(2,9); 			// aleatório entre 2 e 9 	?>
<h1>Tabuada do <?php echo $numero ?></h1>
<ul>
<?php
  $i = 1;
  while($i < 10) {
    $resultado = $i * $numero;
    echo "<li>$i x $numero = $resultado</li>";
    $i++;
  }
?>
</ul>

PHP - Vetores (Arrays) (1/2)

Inicialização:

<?php $frutas =  array("kiwi", "morango", "uva"); ?>

Percorrendo o array:

<?php
  echo("<ul>");
  for ($i = 0; i < count($frutas); $i++) {
    echo("<li>{$frutas[$i]}</li>");
  }
  echo("</ul>");
?>

para imprimirmos um valor do array em uma string, colocar chaves

A função count retorna o tamanho do array

PHP - Vetores (2/2)

Arrays em PHP são, na verdade, mapas ordenados:
- mapeiam uma chave a um valor

Exemplo:

<?php
  $personagem = array(nome => "luke",
                      pontos => 123);

  $personagem["pontos"] += 100;

  echo("O personagem {$personagem['nome']} possui {$personagem['pontos']}");
?>

São parecidos com os objetos em JavaScript!

Bancos de Dados

Por que centralizar dados?
SGBDs
Entidades e Relacionamentos
Tabelas e Registros
Cláusula SELECT
PHP e MySQL

Centralizando dados

Servidores são úteis para centralizar dados, para, por exemplo:
- salvar/ler mensagens de um bate-papo;
- apresentar/escrever e-mails;
- exibir/escrever posts de um blog;
- exibir e registrar compras de produtos de um site de compra.
Para centralizar, temos que armazenar estes dados em:
- Arquivos ou
- Bancos de Dados
Bancos de dados armazenam os seus dados de uma forma:
- mais estruturada
- favorecendo o uso por muitos usuários

Sistema de Gerenciamento de Banco de Dados

SGBD: É um conjunto de ferramentas para gerenciar bancos de dados
São exemplos de SGBDs:
- MySQL
- Postgres
- Oracle
- MS SQL Server
Usaremos o MySQL por ser gratuito, multiplataforma e popular

Entidades e Relacionamentos

Um banco de dados é formado por um conjunto de entidades com relacionamentos
Entidades podem ser abstratas ou concretas:
- Pessoa, Carro, Alimento, Pedido, Transação Bancária
Cada entidade pode ter relacionamentos com outras:
- Uma pessoa faz diversas transações bancárias
- Um carro possui uma pessoa que é seu dono
- Uma pessoa pode fazer diversos pedidos de compra
Em SGBDs, entidades são representadas por tabelas

Tabelas e registros (ou “linhas”)

Uma entidade é representada por uma ou mais tabelas em um SGBD
Tais tabelas possuem um conjunto de registros
Na tabela, cada linha é um registro e cada coluna é um campo que descreve aquela entidade

Tabela de ovelhas

Para interagir com um SGBD, precisamos de uma linguagem…

SQL - Structured Query Language

Tendo um conjunto de tabelas, precisamos de uma linguagem para:
1. Manipular e pesquisar nos registros
2. Criar, alterar a estrutura das tabelas
3. Conceder e retirar permissões de usuários, etc.
Para isso, foi criado o SQL que é uma linguagem padrão que a maioria dos SGBDs adotam (com algumas adaptações)
Na aula de hoje, iremos aprender a consultar os registros que uma tabela possui usando a cláusula SQL SELECT

SQL - Cláusula SELECT

Formato da clausula SELECT

SQL - Cláusula SELECT - Exemplo (1/3)

Seleciona todas as colunas e registros da tabela RACA_OVELHA

Seleciona todos os registros e colunas

SQL - Cláusula SELECT - Exemplo (2/3)

Seleciona o nome de todas as raças de ovelha (i.e. tabela RACA_OVELHA)

Seleciona o nome de todas as raças de ovelha

SQL - Cláusula SELECT - Exemplo (3/3)

Seleciona o nome e alimento preferido de todas as raças de ovelha (i.e. tabela RACA_OVELHA) em que a expectativa de vida é menor que 5 anos

Seleciona o nome e o alimento preferido de todas as raças de ovelha com expectativa de vida menor que 5

PHP e MySQL - Exemplo (1/2)

Para usarmos o MySQL no PHP precisamos conectar ao MySQL:

<?php
  // faz a conexão com o banco de dados
  $db = mysqli_connect("localhost", "root", "123456", "piratas");
  $db->set_charset("utf8");
  // verifica se a conexão funcionou...
  if (!$db) {
    // encerra a execução do script php, dando um erro
    $descricaoErro = "Erro! Detalhes: " . mysqli_connect_error();
    die($descricaoErro);
  }
?>
<!DOCTYPE html>
<html>
<head>
  ⋮

PHP e MySQL - Exemplo (2/2)

Logo após, podemos fazer uma consulta, por exemplo, exibindo todas as raças de ovelha:

<?php
  $sql = "SELECT nome, alimento_preferido FROM raca_ovelha";
  $result = $db->query($sql); // $db é a conexão obtida
  if ($result->num_rows > 0) {
    echo("<ul>");
    while($linha = $result->fetch_assoc()) {
      $html = "<li>Ovelhas da raça <strong>{linha['nome']}</strong>";
      $html .= "gostam de {linha['alimento_preferido']} </li>"
      echo($html);
    }	  
    echo("</ul>");
  } else {
    echo("<p>Não existem ovelhas cadastradas</p>");
  }
?>

Instalando Apache, PHP e MySQL

Pergunte ao professor se é necessário instalar algo nos laboratórios
- É provável que já esteja tudo funcionando… de qualquer forma, leia sobre como fazê-lo
Podemos instalar (a) cada software separadamente ou (b) um pacote que instala todos de uma vez (mais fácil)
- (a) Visite os sites oficiais: Apache, MySQL, PHP
- (b) WAMP (para Windows), LAMP (para Linux) ou XAMPP (ambos)
Ao instalar, lembre-se apenas de anotar o usuário (normalmente ‘root’) e senha escolhidos para o MySQL