Aula 27

Introdução ao Projeto Final: Site Temático com PHP e Banco de Dados

🎯 Objetivo da aula:
Compreender a proposta do projeto final da disciplina, organizar os grupos, escolher o tema e planejar a estrutura inicial do site.

📍 Apresentação do projeto

Explique aos alunos, de forma clara e empolgante, o que eles irão desenvolver:

“Neste bimestre, vocês vão criar um site temático completo em grupo, com várias páginas, formulários, JavaScript e conexão com banco de dados usando PHP e MySQL.
Vamos simular um projeto real, onde cada grupo será responsável pelo seu próprio site, hospedado em um servidor local.”

🎯 O que o projeto final deve conter

✔ Mínimo de 3 páginas interligadas
✔ Formulário com validação em JavaScript
✔ Dados salvos no banco de dados via PHP
✔ Visual bonito com HTML e CSS
✔ Tema criativo escolhido pelo grupo

👥 Organização dos grupos

Definir os grupos.
Cada grupo preenche o formulário com:
- Nome do grupo
- Integrantes
- Tema escolhido
- Justificativa do tema (1 parágrafo)

📄 Sugestão de temas:

Filmes, séries ou desenhos animados
Esportes e atletas
Jogos, tecnologias ou robótica
Inteligência Artificial
Música, cultura ou causas sociais

🧱 Modelo 1 – Layout clássico com menu superior

<!DOCTYPE html>

<head>

<title>Modelo 1 – Menu Superior</title>

<style>

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; font-family: Arial, sans-serif; }

.wrapper {

min-height: 100vh;

display: flex;

flex-direction: column;

}

.cabecalho {

background-color: #333;

color: white;

padding: 20px;

text-align: center;

}

.menu {

background-color: #444;

padding: 10px;

text-align: center;

}

.menu a {

color: white;

margin: 0 15px;

text-decoration: none;

}

.corpo {

flex: 1;

padding: 30px;

background-color: #f5f5f5;

}

.rodape {

background-color: #333;

color: white;

text-align: center;

padding: 15px;

}

</style>

</head>

<body>

<h1>Meu Site Temático</h1>

</div>

<a href="#">Início</a>

<a href="#">Sobre</a>

<a href="#">Contato</a>

</div>

<p>Bem-vindo ao conteúdo principal do site.</p>

</div>

</div>

</body>

</html>

🧱 Modelo 2 – Menu lateral à esquerda

<!DOCTYPE html>

<head>

<title>Modelo 2 – Menu Lateral</title>

<style>

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; font-family: Arial, sans-serif; }

.wrapper {

min-height: 100vh;

display: flex;

flex-direction: column;

}

.cabecalho {

background-color: #2c3e50;

color: white;

padding: 20px;

text-align: center;

}

.conteudo {

flex: 1;

display: flex;

}

.menu {

width: 200px;

background-color: #34495e;

padding: 20px;

}

.menu a {

display: block;

color: white;

margin-bottom: 10px;

text-decoration: none;

}

.corpo {

flex: 1;

padding: 30px;

background-color: #ecf0f1;

}

.rodape {

background-color: #2c3e50;

color: white;

text-align: center;

padding: 15px;

}

</style>

</head>

<body>

<h1>Site com Menu Lateral</h1>

</div>

<a href="#">Início</a>

<a href="#">Galeria</a>

<a href="#">Contato</a>

</div>

<p>Este é o conteúdo principal do site. Aqui vai o texto, imagens ou formulário.</p>

</div>

<p>Rodapé com informações de direitos ou links.</p>

</div>

</body>

</html>

🧱 Modelo 3 – Layout centralizado e moderno

<!DOCTYPE html>

<head>

<title>Modelo 3 – Layout Centralizado</title>

<style>

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; font-family: Verdana, sans-serif; background-color: #f9f9f9; }

.wrapper {

min-height: 100vh;

display: flex;

flex-direction: column;

}

.cabecalho {

background-color: #6200ea;

color: white;

padding: 25px;

text-align: center;

}

.menu {

background-color: #3700b3;

padding: 15px;

text-align: center;

}

.menu a {

color: white;

text-decoration: none;

margin: 10px;

font-weight: bold;

}

.corpo {

flex: 1;

max-width: 800px;

margin: 30px auto;

background-color: white;

padding: 30px;

box-shadow: 0 0 10px rgba(0,0,0,0.1);

}

.rodape {

background-color: #6200ea;

color: white;

text-align: center;

padding: 20px;

}

</style>

</head>

<body>

<h1>Página Personalizada</h1>

</div>

<a href="#">Início</a>

<a href="#">Equipe</a>

<a href="#">Projeto</a>

</div>

<h2>Bem-vindo!</h2>

<p>Este é um exemplo de estrutura centralizada com visual moderno. Ideal para temas mais criativos ou institucionais.</p>

</div>

<p>Projeto Final – Programação Web – 2025</p>

</div>

</body>

</html>

🧱 Modelo Bônus – Layout anos 90/00

<!DOCTYPE html>

<head>

<title>Layout Dark – Estrutura Base</title>

<style>

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; font-family: Verdana, sans-serif; background-color: #000; color: #ccc; }

.wrapper {

display: flex;

flex-direction: column;

min-height: 100vh;

width: 100%;

max-width: 1100px;

margin: 0 auto;

}

.topo {

background-color: #111;

text-align: center;

padding: 20px;

border-bottom: 2px solid #333;

}

.topo p {

color: #888;

}

.navegacao-superior {

background-color: #222;

text-align: center;

padding: 10px;

border-bottom: 1px solid #444;

}

.navegacao-superior a {

color: #ccc;

margin: 0 10px;

text-decoration: none;

}

.conteudo {

display: flex;

flex: 1;

}

.menu-esquerdo {

width: 200px;

background-color: #111;

padding: 15px;

border-right: 1px solid #444;

font-size: 14px;

}

.menu-esquerdo p {

margin-bottom: 10px;

}

.principal {

flex: 1;

background-color: #1a1a1a;

padding: 20px;

}

.bloco {

background-color: #222;

border: 1px solid #333;

margin-bottom: 20px;

padding: 15px;

}

.bloco p {

color: #aaa;

font-style: italic;

}

.sidebar-direita {

width: 200px;

background-color: #111;

padding: 15px;

border-left: 1px solid #444;

font-size: 14px;

}

.sidebar-direita p {

margin-bottom: 15px;

}

.rodape {

background-color: #111;

color: #999;

text-align: center;

padding: 10px;

font-size: 13px;

border-top: 1px solid #333;

}

</style>

</head>

<body>

<p>[ Espaço para logotipo ou título do site ]</p>

</div>

</div>

<p>[ Menu lateral esquerdo ]</p>

<p>[ Mais links ou navegação interna ]</p>

<p>[ Enquete ou recursos extras ]</p>

</div>

<p>[ Inserir conteúdo principal do site aqui ]</p>

</div>

<p>[ Bloco de conteúdo adicional – ex: galeria, notícias, texto ]</p>

</div>

<p>[ Bloco para formulário, mensagem ou destaque do tema ]</p>

</div>

<p>[ Informações adicionais – ex: rádio, agradecimentos, redes ]</p>

<p>[ Links externos ou anúncios ]</p>

</div>

<p>[ Rodapé – créditos, ano, contato ]</p>

</div>

</body>

</html>

✅ Passo a passo

Crie a pasta do seu projeto
- Nome da pasta: o tema ou nome do grupo.
Abra o VS Code
- Crie o arquivo index.html dentro da pasta do projeto.
Escolha um modelo (1, 2, 3 ou 4)
- Copie o código do modelo escolhido (fornecido pelo professor).
- Cole no index.html.
Personalize o conteúdo
- Substitua os textos entre colchetes [ ] pelo tema do grupo.
- Exemplo: [ Título do site ] → Site sobre Jogos Indie
Visualize no navegador
- Clique com o botão direito no index.html e abra no navegador.
- Confirme se o layout está correto.