Sebenta · Instalar e configurar um CMS com base de dados (UC00625)

Introdução

Esta sebenta ensina a construir um website profissional com um CMS, do primeiro clique até uma loja online a funcionar. Usamos o WordPress, o sistema de gestão de conteúdos mais usado do mundo (cerca de 43% de todos os sites), gratuito e com um ecossistema imenso de temas e plugins. Tudo o que aprenderes — servidor, base de dados, painel de administração, temas, plugins, e-commerce, segurança — é transferível para qualquer outro CMS.

O percurso é o de um profissional real: primeiro montamos um ambiente de trabalho local (o site corre no teu computador), depois planeamos o site, construímo-lo com tema e plugins, acrescentamos uma loja, e por fim tratamos de segurança, backups, acessibilidade e proteção de dados. No fim, deves conseguir entregar um site completo a um cliente.

Objetivos de aprendizagem (referencial): instalar um CMS numa máquina local ou servidor web; criar e gerir a base de dados; planear a estrutura de páginas; criar, editar e remover páginas, menus, conteúdos e artigos; configurar temas, plugins e uma loja online; e garantir segurança, backups, acessibilidade e conformidade legal.

1. O que é um CMS e como funciona um site dinâmico

Um CMS (Content Management System, Sistema de Gestão de Conteúdos) é um software que permite criar e gerir um website sem programar tudo de raiz. A ideia-chave é a separação de responsabilidades:

• O conteúdo (textos, imagens, produtos) vive numa base de dados.
• O design vive no tema.
• As funcionalidades vêm de plugins.
• Quem publica usa um painel de administração visual, sem tocar em código.

Site estático vs site dinâmico

Um site estático é um conjunto de ficheiros HTML fixos: o que está no ficheiro é o que o visitante vê. Simples, mas para mudar uma vírgula é preciso editar o código.

Um site dinâmico (como o WordPress) gera as páginas no momento. Quando alguém abre loja.pt/sobre, acontece isto:

Browser → pedido → Servidor web (Apache)
                      → corre PHP (WordPress)
                        → pergunta à base de dados (MySQL): "dá-me a página Sobre"
                        ← conteúdo
                      ← HTML já montado
Browser ← página pronta

Por isso um CMS precisa de três tecnologias a trabalhar juntas — o stack:

O WordPress são ficheiros PHP que assentam neste stack. Para desenvolver, instalamos tudo de uma vez com o XAMPP.

2. Servidor local com XAMPP

Antes de pôr um site online, desenvolve-se localmente — o site corre no próprio computador, no chamado localhost. É rápido, gratuito e sem risco.

O XAMPP é um instalador que traz Apache + MariaDB (MySQL) + PHP + phpMyAdmin de uma só vez (Windows, macOS, Linux).

Passo a passo

1. Descarregar e instalar o XAMPP de apachefriends.org.
2. Abrir o Painel de Controlo do XAMPP.
3. Clicar Start no Apache e no MySQL. Ambos devem ficar verdes.
4. Abrir http://localhost no browser — deve aparecer a página do XAMPP.

Os sites vivem na pasta htdocs (ex.: C:\xampp\htdocs). Cada subpasta é um site:

htdocs/
 └── loja/        →  http://localhost/loja

Erro típico: Apache não arranca

Quase sempre é a porta 80 ocupada (Skype, IIS, outro servidor). Solução: no XAMPP, Config → httpd.conf, mudar Listen 80 para Listen 8080 e aceder a http://localhost:8080.

3. A base de dados

Todo o conteúdo do WordPress — artigos, páginas, utilizadores, definições, comentários — vive em tabelas MySQL. Uma instalação cria cerca de 12 tabelas com o prefixo wp_ (wp_posts, wp_users, wp_options, …).

Conceitos de base de dados que precisas de dominar:

• Tabela — um conjunto de dados do mesmo tipo (ex.: wp_users).
• Registo (linha) — um item (um utilizador).
• Campo (coluna) — um atributo (o email).
• Chave primária — identifica cada registo de forma única (o ID).

Gerimos a base de dados com o phpMyAdmin, uma interface web para o MySQL, em http://localhost/phpmyadmin.

Exemplo resolvido — criar a base de dados

1. Abrir http://localhost/phpmyadmin.
2. Separador Bases de dados → escrever loja_wp → Criar.
3. Criar um utilizador dedicado (boa prática de segurança):
4. Contas de utilizador → Adicionar conta de utilizador.
5. Nome: loja_user; Host: localhost; palavra-passe forte.
6. Em Base de dados para a conta, dar todos os privilégios apenas em loja_wp.

Guarda estes três valores — vais precisar deles na instalação: base de dados loja_wp, utilizador loja_user, palavra-passe.

Backup da base de dados

No phpMyAdmin: selecionar a base → Exportar → Executar → descarrega um ficheiro .sql com tudo. Para restaurar: Importar esse ficheiro. A base de dados é o ativo mais valioso do site; faz backups regulares.

⚠️ Nunca uses o utilizador root sem palavra-passe num site real. Um utilizador por base de dados, com privilégios mínimos.

4. Instalar o WordPress

Com a base de dados criada, instalamos o CMS.

Exemplo resolvido — a instalação em 5 minutos

1. Descarregar o WordPress em pt.wordpress.org (.zip).
2. Extrair o conteúdo para htdocs/loja.
3. Abrir http://localhost/loja — arranca o instalador.
4. Escolher Português (Portugal).
5. Introduzir os dados da base de dados: nome loja_wp, utilizador loja_user, a palavra-passe, host localhost, prefixo wp_.
6. Definir o título do site e a conta de administrador (utilizador, palavra-passe forte, email).
7. Instalar WordPress → entrar em http://localhost/loja/wp-admin.

O ficheiro wp-config.php

O instalador cria o wp-config.php, que contém a ligação à base de dados:

define( 'DB_NAME', 'loja_wp' );
define( 'DB_USER', 'loja_user' );
define( 'DB_PASSWORD', '••••••••' );
define( 'DB_HOST', 'localhost' );
$table_prefix = 'wp_';

É o ficheiro mais sensível do site — contém as palavras-passe. Nunca o partilhes nem o coloques num repositório público.

5. O painel de administração

O WordPress tem dois lados: o backend (/wp-admin, onde geres) e o frontend (o site que o visitante vê). No backend, o menu principal:

• Painel — visão geral.
• Artigos (posts) — conteúdo cronológico (blog, notícias).
• Páginas — conteúdo fixo (Sobre, Contactos).
• Media — biblioteca de imagens e ficheiros.
• Aparência — temas, personalizar, menus, widgets.
• Plugins — extensões.
• Utilizadores — contas e perfis.
• Definições — configuração geral.

Configurações essenciais logo após instalar

• Definições → Gerais: título, descrição, fuso horário.
• Definições → Leitura: página inicial — últimos artigos ou uma página estática.
• Definições → Ligações permanentes: mudar para Nome do artigo (/sobre-nos/ em vez de ?p=123). Melhora o SEO e a legibilidade.
• Definições → Discussão: moderar ou desligar comentários.

Artigos vs Páginas é uma distinção que confunde principiantes: usa Artigos para conteúdo com data (blog); usa Páginas para conteúdo permanente (Sobre, Contactos, Loja).

6. Planear o site — sitemap e wireframe

Um profissional nunca começa a construir às cegas. Antes de tocar no WordPress, planeia-se com duas ferramentas.

O mapa do site (sitemap) é um diagrama em árvore das páginas e da sua hierarquia:

Início
├── Loja
│   ├── Categoria A
│   └── Categoria B
├── Sobre nós
├── Blog
│   └── Artigo
└── Contactos

O wireframe é um esboço do layout de cada página — onde ficam o cabeçalho, o conteúdo, a barra lateral e o rodapé — sem cores nem conteúdo real. Faz-se em papel, no Figma ou no diagrams.net. Estes dois documentos guiam toda a construção e poupam horas de retrabalho.

7. Temas — o design

O tema define o aspeto do site (cores, tipografia, layout) sem tocar no conteúdo. Trocar de tema muda o design mas não apaga os conteúdos.

• Aparência → Temas → Adicionar → escolher um tema gratuito (ex.: Astra, OceanWP, Twenty Twenty-Five) → Instalar → Ativar.
• Aparência → Personalizar (ou o editor de site): logótipo, cores, tipos de letra, cabeçalho e rodapé.
• O conteúdo cria-se com o editor de blocos (Gutenberg): cada elemento é um bloco (parágrafo, imagem, colunas, botão, galeria).

Erro a evitar: editar diretamente os ficheiros do tema. As atualizações apagam essas alterações. Se precisares mesmo de mexer no código, usa um tema-filho (child theme).

8. Plugins e widgets

Os plugins adicionam funcionalidades ao WordPress. Instalam-se em Plugins → Adicionar → Instalar → Ativar. Plugins úteis:

Os widgets são pequenos blocos colocados em áreas fixas (barra lateral, rodapé): pesquisa, últimos artigos, menu.

⚠️ Menos é mais. Cada plugin é código extra — mais lentidão e mais superfície de ataque. Instala só o necessário, de fontes de confiança, e mantém-nos atualizados.

9. Páginas, menus e conteúdos

Seguindo o mapa do site, criam-se os conteúdos:

• Páginas → Adicionar nova: título + blocos (texto, imagem, vídeo, botão, colunas, formulário, mapa).
• Media: carregar imagens — comprimir antes (uma foto de 5 MB destrói a velocidade do site) e preencher o texto alternativo (acessibilidade e SEO).
• Aparência → Menus: criar o menu principal, arrastar as páginas pela ordem do sitemap e atribuir a localização (cabeçalho).

Cria, edita e remove páginas e artigos conforme o plano. O conteúdo web combina ícones, botões, texto, imagem, vídeo, formulários e mapas — com equilíbrio, sem sobrecarregar.

10. Loja online com WooCommerce

Para vendas online, o plugin WooCommerce transforma o WordPress numa loja completa.

Instalação e configuração

1. Plugins → Adicionar → WooCommerce → Instalar → Ativar.
2. O assistente pede: morada da loja, moeda (EUR), tipos de produto, impostos.
3. São criadas automaticamente as páginas Loja, Carrinho, Finalizar compra e Conta.

Produtos

Em Produtos → Adicionar: nome, descrição, preço, imagem, categoria e stock (SKU e quantidade). Tipos: simples, variável (tamanhos/cores) e virtual/descarregável.

Pagamentos e envios

Em WooCommerce → Definições → Pagamentos, ativam-se os métodos: transferência bancária, à cobrança, e passarelas como Multibanco/MB Way (IfThenPay), PayPal ou Stripe. Em Envios, definem-se zonas e portes.

Testa sempre uma compra completa (adicionar ao carrinho → finalizar → confirmar) antes de abrir a loja ao público.

11. Utilizadores e perfis

O WordPress tem perfis (roles) com privilégios diferentes:

Regra de ouro: privilégio mínimo — cada pessoa recebe só o que precisa, e há um único administrador. Um editor não deve poder instalar plugins.

12. Segurança, atualizações e backups

A maioria dos sites atacados estava desatualizada. Boas práticas:

• Palavras-passe fortes e autenticação em 2 passos.
• Atualizar sempre o WordPress, o tema e os plugins.
• Plugin de segurança (Wordfence): firewall e limite de tentativas de login.
• Prefixo de tabelas diferente de wp_; esconder a versão do WordPress.
• HTTPS (certificado SSL) em produção.
• Backups de ficheiros + base de dados (UpdraftPlus), agendados e guardados fora do servidor. Testar o restauro — um backup que não se restaura não vale nada. Antes de qualquer atualização grande: backup primeiro.

13. Acessibilidade, direitos de autor e RGPD

Um site profissional respeita três frentes legais e éticas:

• Acessibilidade (WCAG): texto alternativo nas imagens, contraste suficiente, navegação por teclado, legendas em vídeo. Um site acessível serve todos e evita problemas legais.
• Direitos de autor: usar apenas imagens e textos com licença (bancos de imagens livres, Creative Commons) e atribuir quando exigido. Copiar conteúdo sem permissão é ilegal.
• RGPD: ter uma política de privacidade, um banner de cookies, recolher só os dados necessários nos formulários e permitir o acesso e a eliminação dos dados. O WooCommerce guarda dados pessoais de clientes — trata-os com o mesmo cuidado.

Erros comuns

• Instalar o WordPress antes de criar a base de dados — o instalador falha na ligação.
• Apache não arranca por porta 80 ocupada — mudar para 8080.
• Imagens gigantes sem compressão — site lento e má experiência.
• Dezenas de plugins "só para experimentar" — lentidão e insegurança.
• Editar o tema diretamente — perder tudo na próxima atualização (usar child theme).
• Esquecer os backups — e descobrir isso quando o site cai.
• Mostrar dados pessoais sem necessidade — violação do RGPD.

Glossário

• CMS — sistema de gestão de conteúdos (ex.: WordPress).
• Localhost — o próprio computador a funcionar como servidor.
• XAMPP — pacote com Apache, MySQL, PHP e phpMyAdmin.
• Apache — servidor web que serve as páginas.
• PHP — linguagem que gera as páginas do WordPress.
• MySQL / MariaDB — sistema de base de dados.
• phpMyAdmin — interface web para gerir o MySQL.
• Backend / wp-admin — área de administração do site.
• Frontend — o site visível ao visitante.
• Tema — define o design; plugin — adiciona funcionalidades; widget — bloco em área fixa.
• Gutenberg — editor de blocos do WordPress.
• Child theme — tema-filho, para personalizar sem perder alterações.
• WooCommerce — plugin de loja online.
• Permalink — o formato do endereço de cada página.
• SSL/HTTPS — ligação segura e cifrada.

Síntese

Construir um site com um CMS segue sempre a mesma ordem: ambiente (servidor local com XAMPP) → base de dados (phpMyAdmin) → instalar o WordPress → planear (sitemap + wireframe) → tema → plugins → conteúdos (páginas, menus, media) → loja (WooCommerce) → utilizadores, segurança, backups → acessibilidade, direitos de autor e RGPD. Domina este fluxo no WordPress e adaptas-te a qualquer CMS.

Exercícios resolvidos

1. Ordena os passos: (a) instalar WordPress, (b) criar base de dados, (c) iniciar Apache e MySQL, (d) planear o sitemap.

Resolução: c → b → a → d não; a ordem correta é c (ligar o servidor) → b (criar a BD) → a (instalar o WP) → d. Na prática o planeamento (d) pode até ser o primeiro em papel, mas dentro do ambiente técnico a base de dados vem antes da instalação do WordPress.

2. O Apache não arranca no XAMPP. Qual a causa mais provável e a solução?

Resolução: a porta 80 está ocupada (Skype, IIS). Solução: mudar o Apache para a porta 8080 em httpd.conf e aceder por http://localhost:8080.

3. Precisas de vender t-shirts em vários tamanhos e cores. Que tipo de produto WooCommerce usas e porquê?

Resolução: um produto variável — permite definir atributos (tamanho, cor) e variações com preço/stock próprios, em vez de criar um produto por combinação.

4. Um colega diz "instalei 25 plugins para o site ficar completo". Que lhe respondes?

Resolução: que menos é mais — cada plugin é código extra que abranda o site e aumenta a superfície de ataque. Deve manter só os essenciais (SEO, formulário, loja, backup, segurança), de fontes de confiança e atualizados.

5. Vais atualizar o WordPress e vários plugins de um site em produção. Qual é o primeiro passo?

Resolução: fazer um backup completo (ficheiros + base de dados) e guardá-lo fora do servidor. Se a atualização correr mal, restauras.