Aplicações e Serviços na Web

Desenvolvimento de Aplicações Web

Ana Paula Afonso

© 2023- Docentes SI – DI/FCUL 1

Sumário e referências
• Abordagens para desenvolvimento de aplicações Web
• O caso do PHP
– Desenvolvimento no servidor em PHP
Breve descrição da linguagem
Processamento de formulários HTML
Acesso a ficheiros e Bases de Dados

Referências
– L. Shklar, R. Rosen (capítulo 9)
– www.w3schools.com/php/
– php.net

© 2023- Docentes SI – DI/FCUL 2

Desenvolvimento Web - frontend e backend

request
Browser Web-Server
response
(cliente) (servidor)

Frontend Backend
© 2023- Docentes SI – DI/FCUL 3
Abordagens de desenvolvimento web (1)

• Programáticas ou scripting (code-centric)

– Lógica da aplicação escrita em scripts ou programas (servidor)
Ex. Perl, Python, Java
– Código intercalado com construtores formatação
– Abordagem centrada no código
– Problemas para os designers do layout das páginas

• Baseadas em templates (page-centric)

– Abordagem centradas no layout da página
– Abordagem centrada na estrutura e formatação da página
– Código HTML com alguns construtores de programação
Ex. Adobe ColdFusion, Apache’s Velocity
– Permite aos designers (c/ competências em programação) terem algum
controlo da lógica da aplicação

© 2023- Docentes SI – DI/FCUL 4

Abordagens de desenvolvimento web (2)

• Híbridas
– Abordagens que incluem construtores de formatação embebidos em blocos
de scripts
Ex. PHP, Microsoft ASP (Active Server Pages), Java Server Pages (JSP)
– Potencialmente confusas para designers
– Mistura a apresentação do conteúdo da aplicação
– É fundamental de separação da lógica aplicacional da apresentação
– Minimiza problemas com os designers e programadores

• Frameworks
– Separam os módulos responsáveis pelo conteúdo (model) dos que
apresentam o conteúdo num formato (view)
ex. Express, Django, Laravel, Codeigniter, Ruby, Spring
– Potencialmente mais fléxiveis e escaláveis
– Baseadas geralmente no padrão Modelo-Vista-Controlador (MVC)

© 2023- Docentes SI – DI/FCUL 5

Server Side Scripting

• Desde o princípio da web que houve a necessidade de

centralizar a informação e procedimentos

• Linguagens embedded
– O código é embebido nos documentos Web …
– … e executado no servidor

© 2023- Docentes SI – DI/FCUL 6

Escolha da linguagem

• A escolha entre PHP e JavaScript (ou outra linguagem) no lado

do servidor depende do tipo de projeto e das suas
necessidades específicas
• PHP
– Lógica de negócio complexa
– Tarefas de processamento de dados
– Suporte integrado com vários SGBD e manipulação de arquivos
– Linguagem mais popular no desenvolvimento Web
• Javascript
– Aplicações em tempo real
– Aplicações com tarefas forte componente de interação e animações
– ex. chat, mensagens, jogos em tempo real

© 2023- Docentes SI – DI/FCUL 7

• PHP é PHP: Hypertext Processor
– Linguagem ainda dominante em Server Side Scripting
– Executada no servidor
– Começou por ser apenas um interface para processar pedidos "GET" e
"POST" oriundos de formulários Web (forms)
– Linguagem open source
– É o motor do Facebook e vários CMS (Content Management System)
como o Wordpress ou MediaWiki

© 2023- Docentes SI – DI/FCUL 8

Para que serve?
• Para processar tudo o que deve ser centralizado
• Permite a criação de conteúdos dinâmicos, dependendo dos
pedidos do utilizador
– Processa todos os pedidos do cliente
• Pedidos síncronos e assíncronos
• Resultados de formulários Web
• Cookies
• Tem todos os privilégios de uma aplicação local no
servidor
– Pode armazenar dados no servidor em ficheiros ou BD
– Pode controlar acessos ou encriptar dados
– Pode fazer pedidos externos
– E executar toda a lógica da aplicação
© 2023- Docentes SI – DI/FCUL 9
Vantagens e Desvantagens

• Corre na maior parte das plataformas conhecidas

– Tipicamente ligado a um Web Server (como o Apache, Ngnix,…)
• Permite ligação a quase todos os SGBD
• É muito escalável tendo compiladores e máquinas virtuais
muito eficientes
– Zend Engine
– Facebook produziu o HipHop (HPHPc)
Agora HHVM – JIT Virtual machine

Desvantagens
– Código embebido no HTML pode ser MUITO confuso de manter
– Debugging pode ser(é) infernal

© 2023- Docentes SI – DI/FCUL 10

Exemplo
Página web mas com extensão PHP
teste.php
<html>
<head>
<title>Teste do PHP</title>
</head>
<body>
<?php echo “<p>Alo Mundo!</p>”; ?>
</body>
</html>

<html>
<head> O servidor deteta o
<title>Teste do PHP</title>
<?php e executa o script:
</head>
<body>
<p>Alo Mundo!</p> </body> echo '<p>Alo Mundo!</p>'
</html>

© 2023- Docentes SI – DI/FCUL 11

Elementos da linguagem (1)
• Variáveis
– PHP é weak typed
– Começam por "$" e seguem as regras normais de nomes
– Podem ser incluídas em strings sem qualquer processamento
adicional:
<html> <body>
<?php
$food = "massa";
echo "vamos comer <b> $food </b>";
?>
</html> </body>
• Funções
– São declaradas pela keyword function
– Podem ter parâmetros por omissão
– À semelhança do Python podem alterar variáveis globais usando a keyword
"global"

© 2023- Docentes SI – DI/FCUL 12

Elementos da linguagem (2)
• Estruturas de código habituais (for, if, while e switch)
• Arrays: PHP tem o equivalente de Python
– Idênticos a Dicionários (Python)
mas na ausência de chave equivalem a Listas

– Listas (Indexed Arrays – array with a numeric key)

Criar uma lista
$cores = array("Preto", "Vermelho", "Azul");
OU
$cores[0]="Preto"; $cores[1]="Vermelho"; $cores[2]="Azul"
echo $cores[0], $cores[2];

$arrlength = count($cores);
for($x = 0; $x < $arrlength; $x++) {
echo $cores[$x];
echo "<br>";
}
© 2023- Docentes SI – DI/FCUL 13
Elementos da linguagem (3)

• Arrays associativos (arrays with named keys)

– dicionários em Phyton

NOTA: nas chaves só podem estar strings ou inteiros

$idade = array("Ana"=>40, "Joao"=>30);

OU
$idade["Ana"]=40; $idade["Joao"]=30;

foreach($idade as $chave => $valor) {

echo "Chave=" . $chave . ", Valor=" . $valor;
}

– Arrays podem ser multidimensionais em que os valores do primeiro array

são novos arrays

© 2023- Docentes SI – DI/FCUL 14

PHP e pedidos do browser
request
Browser response
Web-Server
(cliente) (servidor mysite.org)

Ficheiro pagina.html

<html> <body>
<form method="post" action="pdata.php">
Nome: <input type="text" name="nome"><br>
idade: <input type="text" name="idade"><br>
<input type="submit">
</form>
</body> </html>

Obs: TP02 utilização do método GET ou POST

© 2023- Docentes SI – DI/FCUL 15
PHP e pedidos do browser
request
Browser response
Web-Server
(cliente) (servidor mysite.org)
<html><body>
<?php echo "<h2>" . $_POST["nome"] . "</h2>"; ?>
<br> A sua idade:
<? php echo "<b>" . $_POST["idade"] . "</b>"; ?>
</body></html>

Ficheiro pdata.php

OBS: http://www.mysite.org/pdata.php?nome=Jim&idade=27
© 2023- Docentes SI – DI/FCUL 16
Validação da informação
<html> <body>
<form action="pdata.php" method=“post">
Nome: <input type="text" name="nome"><br>
idade: <input type="text" name="idade"><br>
<input type="submit">
</form>
</body> </html>

• A validação dos dados do formulário pode ser realizada no browser com javascript
• MAS é fundamental proteger o script (pdata.php) de código malicioso
• Ex: pode ser enviado código do tipo:
<script> alert('hacked')</script>
• Prevenção
converter caractéres especiais < > em entidades HTML
usar a função htmlspecialchars() sempre que se pretende enviar para o browser qualquer
informação que vem do input do utilizador

© 2023- Docentes SI – DI/FCUL 17

Validação da informação

• htmlspecialchars() – converte caracteres especiais em entidades HTML

& convertido em &amp;
“ convertido em &quot;
‘ convertido em &#039;
< convertido em &lt;
> convertido em &gt;

• strip() e stripslashes() retiram tudo o resto

© 2023- Docentes SI – DI/FCUL 18

Guião TP02 ex. IV 4 e 5
pedido_post.html

<html> <body>
<form action="pedido_post.php" method="post">
Coloque uma string html:
<input type="text" name="nome" value=" ola&lt;em&gt; \pa\\&lt;/em&gt; tu"><br>
<input type="submit">
</form>
</body> </html>

pedido_post.php
<?php
echo "<li>Normal:<br>" . $_POST["nome"];
echo "<li>htmlspecialchars() =<br>" . htmlspecialchars($_POST["nome"]);
echo "</ul></body></html>";
?>

© 2023- Docentes SI – DI/FCUL 19

Funções para proteção de ataques
• A função htmlspecialchars()
– converte caracteres especiais usados em conteúdo HTML (<, >, &,
entre outros) em entidades HTML
– ajuda a proteger contra ataques de cross-site scripting (XSS), que
ocorrem quando um invasor injeta código malicioso numa página web
web, geralmente por meio de entradas de formulários ou parâmetros
de URL

• A função mysql_real_escape_string()
– Ajuda a escapar caracteres especiais usados em comandos SQL, como
aspas simples, aspas duplas, entre outros
– Ela ajuda a proteger contra ataques de injeção de SQL, evitando que
caracteres especiais sejam interpretados como parte da consulta SQL
– Utilização com a preparação de comandos (mais adiante)
© 2023- Docentes SI – DI/FCUL 20
Processamento de ficheiros
• PHP contém a maior parte das funções de leitura e escrita de
ficheiros habituais
– fopen(), fread(), fclose(), …

• Permite respostas imediatas se houver um problema

<?php
$fich = fopen("fich.txt", "w") or die("Oops, File Error");
?>
• Ficheiros podem ser abertos e lidos com uma instrução
<?php echo readfile("htmlbody.html"); ?>

© 2023- Docentes SI – DI/FCUL 21

Ligação a um SGBD (MySQL)

• Duas aproximações
– MySQLi
– PDO (PHP Data Objects)

• Vantagens e desvantagens
– MySQLi suporta apenas MySQL
– PDO suporta 12 SGBDs
– As duas são OO, mas MySQLi oferece uma API procedimental
– As duas suportam Prepared Statements
mecanismo importante na segurança de uma aplicação Web
proteção contra SQL injection

© 2023- Docentes SI – DI/FCUL 22

Ligação a um SGBD (MySQL)
Ficheiro abreconexao.php

<?php
$dbhost = "appserver-01.alunos.di.fc.ul.pt";
$dbuser = "asw99";
$dbpass = "asw99";
$dbname = "asw99";

// Cria a ligação à BD
$conn = mysqli_connect($dbhost, $dbuser, $dbpass, $dbname);

// Verifica a ligação à BD. Função que retorna a descrição erro

if (mysqli_connect_error()) {
die("Database connection failed:". mysqli_connect_error());
}
?>

© 2023- Docentes SI – DI/FCUL 23

Inserção no SGBD
<?php
// Estabelece uma ligação com a base de dados usando o programa
abreconexao.php
// A variável $conn é inicializada com a ligação estabelecida

include "abreconexao.php";
$query = "INSERT INTO aluno (nome, idade) VALUES ('Ana',25)";

// Execução da interrogação e coloca resultado em $res

$res = mysqli_query($conn, $query);

if($res) {
echo "Novo aluno criado com sucesso";
} else {
echo "Erro: " . $query . "<br>" . mysqli_error($conn);
}
// Termina a ligação com a base de dados
mysqli_close($conn);
?>

© 2023- Docentes SI – DI/FCUL 24

Ex. Preparação de comandos
<?php
...
// Preparação do comando INSERT SQL

$sql = "INSERT INTO aluno (nome, idade) VALUES (?, ?)";

if($stmt = mysqli_prepare($conn, $sql)){

// Define os valores dos parâmetros

mysqli_stmt_bind_param($stmt, "si", $nome, $idade);

// Parâmetros
$nome = "Hermione";
$idade = 20;
mysqli_stmt_execute($stmt);
...
?>

© 2023- Docentes SI – DI/FCUL 25

Pedido ao SGBD
<?php
include "openconn.php";

$sql = "SELECT nome, idade FROM aluno";

$result = mysqli_query($conn, $sql);

if (mysqli_num_rows($result) > 0) {
// output data of each row
while($row = mysqli_fetch_assoc($result)) {

echo "Nome: " . $row["nome"]. " - Idade: " . $row["idade"]. "<br>";

}
} else {
echo "Não existem alunos";
}
mysqli_close($conn);
?>

© 2023- Docentes SI – DI/FCUL 26