Faculdade de Tecnologia e Inovação
SENAC DF
Conceitos Iniciais | Aulas iniciais
Programação para Web II
Do frontend ao backend: domine o PHP e construa aplicações web completas.
Profª. Maristela
Visão Geral
O que vamos aprender?
A disciplina de Programação para Web II é a sua porta de entrada para o universo do desenvolvimento backend. Enquanto na Web I você aprendeu a construir interfaces com HTML, CSS e JavaScript, agora é hora de entender o que acontece nos bastidores — no servidor — quando um usuário faz login, envia um formulário ou consulta dados.
Ao longo das aulas, você vai dominar o PHP, uma das linguagens mais utilizadas na web, e entender como ela processa dados, conecta-se a bancos de dados e gera páginas dinâmicas. A metodologia é 100% prática: laboratório, experimentação e código.
Parte 1
Conhecendo a disciplina e o papel do backend
Parte 2
Primeiros scripts em PHP: sintaxe, variáveis e tipos
Parte 3
Operadores e expressões em PHP
Parte 1
🧠 Dinâmica Inicial: O que você já sabe?
Antes de mergulhar no conteúdo técnico, vamos fazer uma dinâmica de diagnóstico. O objetivo é mapear o que você já conhece sobre desenvolvimento web e identificar lacunas que serão preenchidas ao longo da disciplina.
Reflita: Quando você acessa um site de e-commerce e faz uma compra, quais etapas acontecem sem que você veja? Onde seus dados são processados? Quem verifica se o pagamento foi aprovado?
A partir dessas reflexões, vamos analisar situações reais de sistemas web — como lojas online, redes sociais e plataformas de streaming — para entender onde o frontend termina e o backend começa.
Parte 1
Frontend × Backend: Qual a diferença?
Toda aplicação web moderna é composta por duas camadas fundamentais que trabalham juntas, mas com responsabilidades completamente distintas. Entender essa separação é o primeiro passo para se tornar um desenvolvedor completo.
Frontend (Cliente)
É tudo o que o usuário vê e interage: botões, formulários, animações, cores e layout. Tecnologias: HTML, CSS, JavaScript. Roda no navegador do usuário.
Backend (Servidor)
É o que acontece por trás das cortinas: validação de dados, autenticação, consultas ao banco de dados e lógica de negócio. Tecnologias: PHP, Python, Node.js. Roda no servidor.
Parte 1
Como Frontend e Backend se comunicam?
Quando você clica em "Entrar" em um site, o navegador envia uma requisição HTTP para o servidor. O servidor, usando uma linguagem como PHP, processa essa requisição — verifica login e senha no banco de dados — e devolve uma resposta (a página de boas-vindas ou uma mensagem de erro). Esse ciclo acontece em milissegundos, mas envolve diversas etapas complexas que você vai dominar nesta disciplina.
Parte 1
Por que PHP?
O PHP é uma das linguagens mais populares para o backend da web. Criada em 1994 por Rasmus Lerdorf, ela alimenta gigantes como Facebook, Wikipedia e WordPress (que representa mais de 40% de todos os sites da internet). É uma escolha estratégica para aprender backend por ser acessível, bem documentada e amplamente utilizada no mercado brasileiro.
77%
Websites
dos sites com backend usam PHP
40%
WordPress
da web roda sobre PHP
30+
Anos
de evolução contínua da linguagem
Parte 2
Configurando o ambiente de programação
Para facilitar o aprendizado e a experimentação com PHP, utilizaremos um ambiente de desenvolvimento portátil e pré-configurado. Este setup permite executar aplicações PHP diretamente do terminal do VSCode, sem a necessidade de instalações complexas como XAMPP ou Apache.
O objetivo: Ter um ambiente PHP funcional em poucos minutos, pronto para você codificar!
Baixar PHP
Obtenha o pacote ZIP.
Extrair
Organize os arquivos na pasta.
VSCode & Terminal
Abra o projeto e o terminal.
Iniciar Servidor
Execute o PHP em
localhost:8000.Na próxima etapa, detalharemos cada um desses passos para que você possa colocar o ambiente para rodar e começar a programar.
Parte 2
🚀 Laboratório PHP – Ambiente Portátil
Este projeto foi criado para permitir que os alunos executem aplicações PHP sem instalar XAMPP ou Apache, utilizando apenas o terminal do VSCode.
O ambiente utiliza uma versão portátil do PHP, funcionando diretamente dentro da pasta do projeto, o que garante facilidade e consistência para todos os alunos.
📁 Estrutura do Projeto
lab-php
│
├── php
│ ├── php.exe
│ ├── ext
│ ├── php.ini-development
│ └── outros arquivos do PHP
│
└── projeto
│
├── index.php
├── css
└── js
Parte 2
Criando o Ambiente portável no seu computador: Detalhes dos Primeiros Passos
Para dar continuidade à configuração do seu ambiente de desenvolvimento portátil, siga os passos detalhados abaixo:
💻 Requisitos
- Sistema Operacional Windows
- VSCode instalado e atualizado
- Navegador web (Chrome, Edge, Firefox, etc.)
📥 Passo 1 – Baixar o PHP
Acesse a pasta compartilhada com todos os arquivos: Programacao Web II
Essa é a versão Thread Safe no formato ZIP.
📦 Passo 2 – Extrair o PHP
Descompacte o conteúdo do arquivo ZIP baixado diretamente na pasta:
lab-php/phpImportante: O arquivo executável
php.exe deve estar localizado diretamente dentro da pasta do seu projeto ex: lab-php/php.▶ Passo 3 – Abrir o projeto no VSCode
Com o VSCode aberto, navegue até o menu File → Open Folder e selecione a pasta
lab-php do seu projeto.Parte 2
Configurando o Ambiente: Detalhes dos Primeiros Passos (Cont.)
Continue a configuração do seu ambiente de desenvolvimento portátil seguindo os passos detalhados abaixo:
01
Abrir o Terminal
No VSCode, acesse o menu Terminal → New Terminal.
02
Entrar na Pasta do Projeto
No terminal, digite:
cd projeto03
Iniciar o Servidor PHP
Execute o comando:
..\php\php -S localhost:8000Se tudo estiver correto, você verá a mensagem:
PHP Development Server started04
Abrir no Navegador
Abra o seguinte endereço no seu navegador web:
http://localhost:8000O arquivo
index.php será executado automaticamente.✔ Testar se o PHP está funcionando
Para verificar se a instalação está correta, crie um arquivo
index.php na pasta projeto com o seguinte código:<?php
phpinfo();
?>Se ao acessar
http://localhost:8000 no navegador você visualizar a página de informações do PHP, seu ambiente está pronto para uso!📚 Objetivo do Laboratório
Este ambiente portátil será a sua caixa de ferramentas para experimentar e aprender as seguintes tecnologias:
- PHP (para o backend)
- HTML (para estruturar o frontend)
- CSS (para estilizar o frontend)
- JavaScript (para interatividade no frontend)
Parte 2
Primeiros Scripts em PHP
Chegou a hora de colocar a mão no código! Na Parte 2, você vai criar seus primeiros programas em PHP, entender a estrutura básica de um arquivo
.php e aprender a exibir informações na tela. A metodologia é direta: escrever, executar, analisar erros, corrigir e repetir.Estrutura de um arquivo PHP
Todo script PHP começa com a tag de abertura
<?php e, opcionalmente, termina com ?>. Dentro dessas tags, você escreve a lógica do servidor. O PHP pode ser incorporado dentro de HTML ou usado em arquivos independentes.<?php
echo "Olá, Mundo!";
print "Bem-vindo ao PHP!";
?>echo × print
echo e print são comandos para exibir conteúdo na tela. A principal diferença:- echo — aceita múltiplos parâmetros, é ligeiramente mais rápido
- print — aceita apenas um parâmetro, retorna sempre 1
Na prática,
echo é o mais utilizado no dia a dia.Parte 2
Variáveis e Constantes em PHP
Variáveis são como caixas rotuladas que armazenam dados temporariamente durante a execução do programa. Em PHP, toda variável começa com o símbolo
$ seguido do nome. Já as constantes são valores fixos que não mudam durante a execução.📦 Variáveis
$nome = "Maria";
$idade = 21;
$media = 8.5;
$aprovado = true;O PHP é dinamicamente tipado: você não precisa declarar o tipo — ele é definido automaticamente pelo valor atribuído.
🔒 Constantes
define("PI", 3.14159);
define("NOME_SISTEMA", "MeuApp");
const VERSAO = "2.0";Use constantes para valores que nunca devem ser alterados, como configurações do sistema ou valores matemáticos.
Parte 2
Tipos de Dados no PHP
Conhecer os tipos de dados é essencial na programação porque eles definem a natureza dos valores com os quais seu código opera, influenciando como os dados são armazenados e manipulados. Isso é crucial para escrever um código robusto, legível e que funcione como esperado, prevenindo bugs inesperados.
O PHP suporta oito tipos primitivos, que podem ser categorizados em três grupos principais:
- Escalares (
string,int,float,bool): representam um único valor.
- Compostos (
array,object): armazenam coleções de dados ou instâncias de classes.
- Especiais (
null,resource): para valores nulos ou referências a recursos externos.
É importante notar que o PHP é uma linguagem dinamicamente tipada (conhecido como 'type juggling'). Isso significa que você não precisa declarar explicitamente o tipo de uma variável; o PHP infere e ajusta o tipo automaticamente conforme o valor atribuído a ela. Compreender esses tipos é fundamental para evitar erros comuns, como comparações inesperadas ou comportamentos indesejados ao realizar operações com diferentes tipos de dados.
A seguir, vamos explorar os tipos mais fundamentais que você utilizará constantemente em seus primeiros projetos:
String
Texto entre aspas simples ou duplas. Ex:
"Olá" ou 'Mundo'Integer
Números inteiros positivos ou negativos. Ex:
42, -7Float
Números com casas decimais. Ex:
3.14, -0.5Boolean
Verdadeiro ou falso. Ex:
true, falseDica: Use a função
var_dump($variavel) para descobrir o tipo e o valor de qualquer variável. É uma ferramenta essencial para depuração!Parte 2
🔬 Metodologia: Aprender Fazendo
A Parte 2 segue uma abordagem de aprendizagem prática em laboratório. Você não vai apenas assistir — vai escrever, errar, corrigir e entender. Esse ciclo é a base de como programadores reais trabalham todos os dias.
01
Escreva o código
Crie o script PHP seguindo as orientações do exercício proposto.
02
Execute e observe
Rode no servidor do PHP (Conforme as orientações anteriores) e veja o resultado no navegador.
03
Analise os erros
Leia as mensagens de erro com atenção — elas indicam exatamente onde e o que corrigir.
04
Reescreva e aprimore
Ajuste o código até funcionar e, então, explore variações e melhorias.
Parte 3
Operadores e Expressões em PHP
Operadores são os verbos da programação: eles dizem ao computador o que fazer com os dados. Na Parte 3, você vai usar operadores para resolver problemas reais — desde cálculos simples até validações complexas com expressões lógicas.
Aritméticos
Cálculos matemáticos: soma, subtração, multiplicação, divisão e módulo
Relacionais
Comparações entre valores: igual, diferente, maior, menor
Lógicos
Combinação de condições: AND, OR, NOT
Concatenação
Juntar textos e variáveis com o operador ponto (.)
Parte 3
Operadores Aritméticos na Prática
Os operadores aritméticos do PHP funcionam como na matemática tradicional. Eles são fundamentais para cálculos de notas, preços, descontos e qualquer lógica que envolva números.
Exemplo Prático: Média de Notas
$nota1 = 7.5;
$nota2 = 8.0;
$nota3 = 6.5;
$media = ($nota1 + $nota2 + $nota3) / 3;
echo "Média: " . $media;
// Resultado: Média: 7.3333...Atividade: Cadastro simples com HTML, CSS, Javascript e PHP
Este é o seu primeiro projeto completo onde você integrará tudo o que aprendeu. O objetivo é construir um formulário de cadastro simples, utilizando HTML para a estrutura, CSS para a estilização, JavaScript para validações básicas no cliente e PHP para processar e armazenar os dados no servidor.
Este exercício prático permitirá que você visualize como as diferentes tecnologias se conectam para criar uma aplicação web funcional, desde a interface do usuário até o processamento de dados no lado do servidor.
Lembre-se, precisamos iniciar o servidor web e criar a pasta do projeto no diretório próprio desse servidor: c: xampp/htdocs
Parte 3
1º: Criando o Diretório para o projeto
Vamos começar criando a estrutura de pastas e o arquivo
index.html, que será a porta de entrada para a nossa aplicação. Este arquivo conterá a navegação principal ou um link para o formulário de cadastro.Parte 3
Estrutura de Pastas Sugerida
Para projetos PHP que seguem a arquitetura MVC, uma organização de pastas bem definida é essencial para manter o código limpo, modular e fácil de gerenciar. Esta estrutura ajuda a separar as responsabilidades, facilitando o desenvolvimento e a manutenção a longo prazo.
Essa organização reflete a separação de responsabilidades do MVC, onde cada camada tem seu lugar, e também inclui diretórios para configurações, recursos públicos e dependências, que são comuns em aplicações web modernas.
1º: Criando a Página Inicial em HTML
A página
index.html será o ponto de entrada para o nosso projeto de cadastro. Será a primeira página da nossa aplicação, a página que dá as boas vindas aos usuários e onde ele vai encontrar o link para a página de cadstro. Exemplo:<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bem vindo ao nosso site</title>
<!-- Futuramente: <link rel="stylesheet" href="style.css"> -->
<!-- Link para a página de cadastro ex: href="cadastro.html"> -->
</head>
<body>
<h1> Seja muito vbem vindo ao nosso site!</h1>
</body>
</html>Este código HTML simples define a estrutura de uma página html. Ele será a primeira camada do nosso projeto interativo.
2º: Criando a Página de cadastro em HTML
Para iniciar nossa atividade prática de cadastro, o primeiro passo é construir a estrutura básica da página em HTML. Este arquivo será o "esqueleto" do nosso formulário, onde definiremos os campos de entrada de dados e o botão de envio. Ele será o ponto de interação inicial para o usuário.
Exemplo:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulário de Cadastro</title>
<!-- Link para o nosso arquivo CSS, que criaremos em seguida -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Cadastro de Usuário</h1>
<!-- O formulário enviará os dados para 'processar.php' -->
<form action="processar.php" method="POST">
<label>Nome:</label>
<input type="text" name="nome" required>
<br>
<label>Email:</label>
<input type="email" name="email" required>
<br>
<button type="submit">Cadastrar</button>
</form>
<!-- Onde incluiremos nosso JavaScript, se necessário -->
<script src="script.js"></script>
</body>
</html>Este código define uma página HTML básica com um título, um formulário contendo campos para nome e e-mail, e um botão de envio. Note que o atributo
action="processar.php" indica que os dados serão enviados para um script PHP que processará as informações.Parte 3
3º: Estilizando o Formulário com CSS
Com a estrutura HTML do formulário de cadastro pronta, o próximo passo é dar vida visual a ele utilizando CSS. Um bom design não só melhora a aparência, mas também a usabilidade. Este arquivo
style.css será responsável por tornar seu formulário mais agradável e intuitivo.body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
h1 {
color: #333;
text-align: center;
margin-bottom: 20px;
}
form {
background-color: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px;
}
label {
display: block;
margin-bottom: 8px;
color: #555;
font-weight: bold;
}
input[type="text"],
input[type="email"] {
width: calc(100% - 20px);
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
}
button[type="submit"] {
width: 100%;
padding: 12px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
font-size: 18px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button[type="submit"]:hover {
background-color: #0056b3;
}Este código CSS básico aplica estilos ao corpo da página, ao título, ao formulário, aos campos de entrada e ao botão de envio, resultando em um formulário com um visual limpo e moderno. Lembre-se de salvar este código em um arquivo chamado
style.css no mesmo diretório do seu arquivo HTML e PHP.4º: Processando o Formulário com PHP
A página
processar.php é o script que irá receber e lidar com os dados enviados pelo formulário HTML. Ele é o elo entre a interface do usuário e o backend da aplicação, onde a lógica de negócio e o armazenamento de dados acontecem.Arquivo processa.php
<?php
$nome = $_POST['nome'] ?? '';
$email = $_POST['email'] ?? '';
$idade = $_POST['idade'] ?? '';
?>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dados do Cadastro</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="card">
<h1>Dados Recebidos</h1>
<p><strong>Nome:</strong> <?php echo htmlspecialchars($nome); ?></p>
<p><strong>E-mail:</strong> <?php echo htmlspecialchars($email); ?></p>
<p><strong>Idade:</strong> <?php echo htmlspecialchars($idade); ?></p>
<div class="acoes">
<a class="btn" href="cadastro.html">Novo cadastro</a>
<a class="btn btn-secundario" href="index.html">Página inicial</a>
</div>
</div>
</div>
</body>
</html>Este script PHP demonstra como acessar os dados enviados via método POST usando a superglobal
$_POST. A função htmlspecialchars() é crucial para a segurança, convertendo caracteres especiais em entidades HTML para prevenir ataques de Cross-Site Scripting (XSS).Integrando JavaScript: Adicionando Interatividade
Para aprimorar a experiência do usuário e garantir a integridade dos dados antes mesmo do envio ao servidor, adicionaremos um script JavaScript ao nosso projeto. Este script será responsável pela validação básica dos campos do formulário diretamente no navegador do usuário, proporcionando feedback instantâneo.
Crie um arquivo chamado
script.js no mesmo diretório dos seus arquivos HTML e CSS, e adicione o seguinte código:// script.js
document.addEventListener('DOMContentLoaded', function() {
const form = document.querySelector('form');
const nomeInput = document.getElementById('nome');
const emailInput = document.getElementById('email');
form.addEventListener('submit', function(event) {
if (!validateForm()) {
event.preventDefault(); // Impede o envio do formulário se a validação falhar
}
});
function validateForm() {
let isValid = true;
if (nomeInput.value.trim() === '') {
alert('Por favor, insira seu nome.');
nomeInput.focus();
isValid = false;
}
if (emailInput.value.trim() === '') {
alert('Por favor, insira seu e-mail.');
emailInput.focus();
isValid = false;
} else if (!isValidEmail(emailInput.value.trim())) {
alert('Por favor, insira um e-mail válido.');
emailInput.focus();
isValid = false;
}
return isValid;
}
function isValidEmail(email) {
// Regex simples para validação de e-mail
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email);
}
});Este código JavaScript impede o envio do formulário se os campos "Nome" ou "Email" estiverem vazios, ou se o formato do e-mail for inválido. Ele utiliza a função
addEventListener para capturar o evento de envio do formulário (submit) e a função preventDefault() para interromper o processo caso a validação falhe. Mensagens de alerta são exibidas para orientar o usuário sobre os campos a serem corrigidos.Parte 3
Estrutura Típica de Arquitetura (MVC)
À medida que os projetos web crescem em complexidade, a organização do código se torna crucial. A arquitetura MVC (Model-View-Controller) é um padrão de design popular que separa as responsabilidades do aplicativo em três componentes principais, facilitando a manutenção, escalabilidade e colaboração.
Este diagrama ilustra o fluxo de dados e interação entre as camadas do MVC, mostrando como cada componente tem um papel distinto no processamento de uma requisição.
View (Front-end)
É a camada de apresentação, responsável por exibir os dados ao usuário. Inclui arquivos
HTML, CSS, JavaScript, ou PHP que geram a interface, como o index.php.Controller (Lógica)
Age como um intermediário. Ele processa as requisições
HTTP (GET/POST), valida os dados de formulário e interage com o Model para obter ou manipular informações.Model (Dados)
Representa a lógica de negócios e o acesso aos dados. Contém classes que mapeiam as tabelas do
MySQL e realizam operações CRUD (Create, Read, Update, Delete) com o banco de dados.Conexão (PDO)
A API
PDO (PHP Data Objects) é utilizada para conectar com segurança ao banco de dados MySQL (normalmente na porta 3306), oferecendo uma interface consistente e mais segura do que as funções antigas do mysql_*.Atividade Prática
Atividade: Login em PHP (sem banco de dados)
Nesta atividade, você aplicará os conceitos de formulários HTML e processamento PHP para criar um sistema de login simples, utilizando credenciais cadastradas pelo usuário e armazenada em uma variável. O objetivo é compreender o fluxo de dados e a lógica básica de autenticação.
01
1. Crie a Página de Login (HTML)
Desenvolva um formulário HTML (ex: cadastro.html/
login.html) com campos para "Nome", "usuário (e-mail)" e "Senha", e um botão de submissão que aponte para o script PHP.02
2. Crie o Script de Autenticação (PHP)
Crie um arquivo PHP (ex:
autenticar.php) que receberá os dados do formulário via método POST.03
3. Valide as Credenciais
Dentro do
autenticar.php, receba as credenciais e armazene para comparar com os dados inseridos no formulário de login.04
4. Implemente a Lógica de Verificação
Compare os dados submetidos pelo usuário com os dados recebidos via formulário de login. Use uma estrutura condicional (
if/else) para verificar a autenticação.05
5. Forneça Feedback ao Usuário
Se a autenticação for bem-sucedida, exiba uma mensagem de boas-vindas incluindo o nome do usuário. Caso contrário, mostre uma mensagem de erro e, opcionalmente, inclua um link para retornar à página de login.
Insira cores diferentes para enfatizar o contexto.
Resumo e Próximos Passos
Você deu os primeiros passos no mundo do backend web com PHP. Veja o que cobrimos e para onde estamos caminhando:
1
Entendemos o papel do backend
A diferença entre frontend e backend, o ciclo requisição-resposta e por que o PHP é relevante no mercado atual.
2
Escrevemos nossos primeiros scripts
Estrutura de arquivos PHP, variáveis, constantes, tipos de dados e os comandos
echo e print.3
Dominamos operadores e expressões
Operadores aritméticos, relacionais, lógicos e concatenação aplicados em problemas práticos contextualizados.
Nas próximas aulas: estruturas de controle (if/else,switch), loops (for,while) e funções — as ferramentas que vão dar inteligência aos seus programas!