Tutorial: Implementando o Sistema de

Monitoramento de Sites no XAMPP

Introdução
Este tutorial detalhado guiará você através do processo de instalação e configuração do
sistema de monitoramento de sites em um ambiente XAMPP. O XAMPP é uma
distribuição Apache, MySQL, PHP e Perl (AMPP) fácil de instalar, ideal para
desenvolvimento local e testes de aplicações web. O sistema de monitoramento,
desenvolvido em PHP, HTML, CSS e JavaScript, oferece uma solução robusta para
acompanhar a disponibilidade de sites e IPs, visualizar dados históricos através de
gráficos interativos e gerar relatórios de desempenho.

Ao final deste guia, você terá um sistema de monitoramento totalmente funcional

rodando em seu ambiente local, permitindo que você teste e familiarize-se com suas
funcionalidades antes de uma possível implantação em um servidor de produção. A
facilidade de uso do XAMPP o torna uma excelente escolha para desenvolvedores e
usuários que desejam configurar rapidamente um ambiente de servidor web sem a
complexidade de instalações individuais de cada componente.

O monitoramento proativo da disponibilidade de serviços é crucial para qualquer

operação online. Interrupções, mesmo que breves, podem resultar em perda de receita,
insatisfação do cliente e danos à reputação. Este sistema visa mitigar esses riscos,
fornecendo alertas e dados históricos que permitem identificar tendências, otimizar a
infraestrutura e responder rapidamente a quaisquer problemas. A capacidade de
visualizar gráficos de disponibilidade e tempos de resposta, juntamente com relatórios
de horas online e offline, capacita os administradores a tomar decisões informadas e a
garantir a continuidade dos negócios.

Pré-requisitos do Sistema
Antes de iniciar a implementação do sistema de monitoramento, é fundamental garantir
que seu ambiente atenda a todos os pré-requisitos necessários. Esta seção detalha os
componentes de software que precisam ser instalados e configurados. Para este tutorial,
o principal pré-requisito é o XAMPP, que já inclui o Apache, MySQL e PHP.
XAMPP

O XAMPP é uma solução de servidor web gratuita e de código aberto que contém o
Apache HTTP Server, MariaDB (um fork do MySQL), e interpretadores para scripts
escritos em PHP e Perl. Ele está disponível para Windows, macOS e Linux, tornando-o
uma ferramenta versátil para desenvolvimento multiplataforma.

Certifique-se de ter o XAMPP instalado e funcionando corretamente em seu sistema

operacional. Você pode baixar a versão mais recente do XAMPP no site oficial da Apache
Friends [1].

Extensões PHP

Embora o XAMPP já venha com o PHP, é importante verificar se as extensões necessárias

para o sistema de monitoramento estão habilitadas. As extensões essenciais incluem:

• php_pdo_mysql : Esta extensão é crucial para permitir que o PHP se conecte e

interaja com o banco de dados MariaDB (MySQL) do XAMPP. Sem ela, a aplicação
não conseguirá armazenar ou recuperar dados de monitoramento.
• php_curl : A extensão cURL (Client URL Library) é utilizada pelo sistema para
fazer requisições HTTP/HTTPS para os sites que estão sendo monitorados. Ela é
fundamental para verificar a disponibilidade e o tempo de resposta das URLs.

Normalmente, essas extensões já vêm habilitadas por padrão em instalações recentes

do XAMPP. No entanto, se você encontrar problemas, precisará verificar o arquivo
[Link] do seu XAMPP e garantir que as linhas correspondentes a essas extensões não
estejam comentadas (remova o ; no início da linha).

Com o XAMPP instalado e as extensões PHP verificadas, seu ambiente local estará
pronto para receber os arquivos do sistema de monitoramento. A próxima etapa será a
instalação e configuração do XAMPP em si.

Instalação e Configuração do XAMPP

Esta seção aborda a instalação e configuração básica do XAMPP, que servirá como seu
ambiente de servidor web local. Os passos podem variar ligeiramente dependendo do
seu sistema operacional (Windows, macOS ou Linux), mas os princípios são os mesmos.

1. Download do XAMPP

Primeiramente, você precisa baixar o instalador do XAMPP para o seu sistema

operacional. Acesse o site oficial da Apache Friends:
[1] Apache Friends: [Link]

Escolha a versão mais recente do XAMPP que seja compatível com o seu sistema
operacional e faça o download.

2. Instalação do XAMPP

No Windows:

1. Execute o instalador ( .exe ) que você baixou.

2. Siga as instruções do assistente de instalação. É recomendável instalar o XAMPP no
diretório padrão ( C:\xampp ) para evitar problemas de permissão.
3. Durante a instalação, você pode escolher quais componentes deseja instalar
(Apache, MySQL, PHP, phpMyAdmin, etc.). Certifique-se de que Apache, MySQL e
PHP estejam selecionados.
4. Conclua a instalação.

No macOS:

1. Abra o arquivo .dmg que você baixou.

2. Arraste o ícone do XAMPP para a pasta Applications .
3. Abra o XAMPP Control Panel a partir da pasta Applications .

No Linux:

1. Abra o terminal.
2. Navegue até o diretório onde você baixou o instalador ( .run ).
3. Conceda permissões de execução ao instalador: bash chmod +x xampp-linux-
x66_64-[Link] (Substitua xampp-linux-x66_64-8.x.x-
[Link] pelo nome exato do seu arquivo de instalação).
4. Execute o instalador com privilégios de superusuário: bash sudo ./xampp-
linux-x66_64-[Link]
5. Siga as instruções do assistente de instalação gráfica.

3. Iniciando os Serviços do XAMPP

Após a instalação, você precisará iniciar os serviços do Apache e MySQL (MariaDB) para
que o ambiente do servidor web esteja ativo.

No Windows e macOS:

1. Abra o XAMPP Control Panel.

2. Localize os módulos Apache e MySQL.
 3. Clique no botão Start ao lado de cada um para iniciá-los. O status deverá mudar
para verde, indicando que estão em execução.

No Linux:

1. Abra o terminal.
2. Inicie os serviços do XAMPP com os seguintes comandos: bash sudo /opt/
lampp/lampp start Você deverá ver mensagens confirmando que o Apache e o
MySQL foram iniciados.

4. Verificando a Instalação do XAMPP

Para verificar se o XAMPP está funcionando corretamente, abra seu navegador web e
digite [Link] .

Você deverá ser redirecionado para a página de boas-vindas do XAMPP, que exibe
informações sobre o status dos serviços e links para o phpMyAdmin (para
gerenciamento do banco de dados) e outras ferramentas. Se você vir esta página,
significa que o Apache e o PHP estão funcionando corretamente.

5. Verificando as Extensões PHP (Opcional, mas Recomendado)

Embora as extensões php_pdo_mysql e php_curl geralmente venham habilitadas

por padrão, é bom verificar. Você pode fazer isso através do phpMyAdmin ou criando um
arquivo phpinfo() .

1. Via phpMyAdmin: Acesse [Link] no seu navegador.

Na página inicial do phpMyAdmin, clique na aba "Webserver" ou "PHP info" (o
nome pode variar). Procure por pdo_mysql e curl na lista de módulos. Se eles
estiverem listados e habilitados, está tudo certo.

2. Criando um arquivo [Link] :

◦ Navegue até o diretório htdocs da sua instalação XAMPP. No Windows,

geralmente é C:\xampp\htdocs . No macOS, /Applications/XAMPP/
htdocs . No Linux, /opt/lampp/htdocs .
◦ Crie um novo arquivo chamado [Link] dentro deste diretório.
◦ Abra o arquivo [Link] em um editor de texto e adicione o seguinte
conteúdo: php <?php phpinfo(); ?>
◦ Salve o arquivo.
◦ Abra seu navegador e acesse [Link] .
 ◦ Nesta página, procure por seções dedicadas a pdo_mysql e curl . Se elas
existirem e mostrarem que as extensões estão ativas, você está pronto.
Lembre-se de remover este arquivo [Link] após a verificação por
questões de segurança.

Se alguma das extensões não estiver habilitada, você precisará editar o arquivo
[Link] do XAMPP. O caminho para este arquivo geralmente é C:
\xampp\php\[Link] (Windows), /Applications/XAMPP/xamppfiles/etc/
[Link] (macOS) ou /opt/lampp/etc/[Link] (Linux). Procure pelas linhas
extension=pdo_mysql e extension=curl e remova o ponto e vírgula ( ; ) no início
da linha, se houver. Após editar o [Link] , reinicie os serviços Apache e MySQL no
XAMPP Control Panel.

Com o XAMPP instalado, configurado e seus serviços em execução, seu ambiente de

desenvolvimento local está pronto para hospedar o sistema de monitoramento. A
próxima etapa é entender a estrutura de pastas e implantar os arquivos da aplicação.

Estrutura de Pastas e Implantação dos Arquivos

Com o XAMPP instalado e funcionando, o próximo passo é organizar os arquivos do
sistema de monitoramento dentro da estrutura de pastas do XAMPP e implantá-los
corretamente. Isso garantirá que o servidor web Apache possa acessar e servir a
aplicação, e que os scripts PHP possam interagir com o banco de dados e as APIs.

1. Entendendo o Diretório htdocs do XAMPP

O diretório htdocs é o coração do seu servidor web Apache no XAMPP. É dentro desta
pasta que você deve colocar todos os seus projetos web para que eles sejam acessíveis
via [Link] . O caminho exato para o diretório htdocs varia de acordo
com o sistema operacional:

• Windows: C:\xampp\htdocs\
• macOS: /Applications/XAMPP/htdocs/
• Linux: /opt/lampp/htdocs/

2. Criando o Diretório do Projeto

É uma boa prática criar um subdiretório dentro de htdocs para o seu sistema de
monitoramento. Isso ajuda a manter seus projetos organizados e evita conflitos com
outros arquivos ou aplicações que você possa ter no htdocs .
Vamos criar um diretório chamado monitor dentro de htdocs :

• Windows: Abra o Explorador de Arquivos, navegue até C:\xampp\htdocs\ e crie

uma nova pasta chamada monitor .
• macOS: Abra o Finder, navegue até /Applications/XAMPP/htdocs/ e crie uma
nova pasta chamada monitor .
• Linux: Abra o terminal e execute o seguinte comando: bash sudo mkdir /opt/
lampp/htdocs/monitor Você pode precisar de privilégios de superusuário para
criar pastas dentro de /opt/lampp/htdocs/ .

3. Estrutura de Pastas do Sistema de Monitoramento

O sistema de monitoramento é composto por arquivos PHP (backend e API), arquivos

HTML (interface), arquivos CSS (estilos) e arquivos JavaScript (interatividade). A
estrutura recomendada para o projeto dentro do diretório monitor é a seguinte:

/xampp/htdocs/monitor/
├── [Link] (Interface principal do usuário)
├── [Link] (Folha de estilos CSS)
├── [Link] (Scripts JavaScript para interatividade)
├── [Link] (Endpoint da API REST para o frontend)
├── [Link] (Classe principal de monitoramento)
├── [Link] (Classe de conexão com o banco de dados)
├── monitor_cron.php (Script para monitoramento automático -
não usado diretamente no XAMPP para cron jobs, mas útil para
testes)
├── add_sample_sites.php (Script para adicionar sites de exemplo
e dados históricos)
└── [Link] (Esquema do banco de dados MySQL)

4. Copiando os Arquivos para o Diretório do Projeto

Agora, você precisa copiar todos os arquivos do sistema de monitoramento para o

diretório monitor que você acabou de criar dentro de htdocs .

• Windows/macOS: Simplesmente arraste e solte ou copie e cole todos os arquivos

do seu projeto (aqueles que você recebeu) para a pasta C:
\xampp\htdocs\monitor\ (ou o caminho equivalente no macOS).

• Linux: Se você tem os arquivos em um diretório diferente, digamos /home/

seu_usuario/monitor_system/ , você pode copiá-los usando o terminal: bash
sudo cp /home/seu_usuario/monitor_system/* /opt/lampp/htdocs/
 monitor/ Certifique-se de substituir /home/seu_usuario/monitor_system/
pelo caminho real onde seus arquivos estão localizados.

5. Verificando a Implantação

Após copiar os arquivos, você pode fazer uma verificação rápida para garantir que o
Apache está servindo a página corretamente. Abra seu navegador web e acesse:

[Link]

Você deverá ver a interface do sistema de monitoramento. Se você vir a página, significa
que os arquivos HTML, CSS e JavaScript estão sendo carregados corretamente pelo
Apache. No entanto, a funcionalidade completa ainda dependerá da configuração do
banco de dados, que será o próximo passo.

É importante notar que, embora o arquivo monitor_cron.php esteja presente, a

configuração de cron jobs no XAMPP (especialmente em Windows e macOS) é diferente
de um ambiente de servidor Linux. Para fins de desenvolvimento local, você pode
executar monitor_cron.php manualmente via linha de comando para simular o
monitoramento automático, ou usar agendadores de tarefas específicos do seu sistema
operacional para automatizar a execução, se necessário. Para este tutorial, focaremos na
configuração do banco de dados e no uso da interface web.

Configuração do Banco de Dados no XAMPP

Com os arquivos do sistema de monitoramento implantados no diretório htdocs do
XAMPP, o próximo passo é configurar o banco de dados. O XAMPP já vem com o MariaDB
(um fork do MySQL) e o phpMyAdmin, uma ferramenta web para gerenciar bancos de
dados MySQL/MariaDB, o que facilita bastante este processo.

1. Acessando o phpMyAdmin

Certifique-se de que os serviços Apache e MySQL (MariaDB) estejam iniciados no seu

XAMPP Control Panel. Em seguida, abra seu navegador web e acesse:

[Link]

Você será direcionado para a interface do phpMyAdmin, onde poderá gerenciar seus
bancos de dados.
2. Criando o Banco de Dados

Dentro do phpMyAdmin, siga estes passos para criar o banco de dados para o sistema de
monitoramento:

1. No painel esquerdo, clique em New (Novo) ou na aba Databases (Bancos de

Dados).
2. Na seção "Create database" (Criar banco de dados), digite
monitoramento_sites no campo "Database name" (Nome do banco de dados).
3. Para "Collation" (Agrupamento), você pode deixar como padrão ou selecionar
utf8mb4_general_ci para melhor compatibilidade com caracteres diversos.
4. Clique no botão Create (Criar).

O banco de dados monitoramento_sites será criado e aparecerá na lista de bancos

de dados no painel esquerdo.

3. Importando o Esquema do Banco de Dados

O sistema de monitoramento inclui um arquivo [Link] que contém as instruções

SQL para criar as tabelas sites e monitoramento_logs . Você precisará importar
este arquivo para o banco de dados monitoramento_sites que você acabou de criar.

1. No painel esquerdo do phpMyAdmin, clique no banco de dados

monitoramento_sites para selecioná-lo.
2. No painel principal, clique na aba Import (Importar).
3. Na seção "File to import" (Arquivo para importar), clique em Choose File (Escolher
arquivo).
4. Navegue até o diretório monitor dentro do seu htdocs (por exemplo, C:
\xampp\htdocs\monitor\ ou /opt/lampp/htdocs/monitor/ ) e selecione o
arquivo [Link] .
5. Deixe as outras opções como padrão, a menos que você saiba o que está fazendo.
6. Clique no botão Go (Executar) na parte inferior da página.

Se a importação for bem-sucedida, você verá uma mensagem de sucesso e as tabelas

sites e monitoramento_logs aparecerão no painel esquerdo, sob o banco de dados
monitoramento_sites .
4. Configurando a Conexão com o Banco de Dados (arquivo
[Link] )

O arquivo [Link] no seu projeto contém as credenciais de conexão com o

banco de dados. Por padrão, o XAMPP configura o usuário root do MySQL sem senha.
Você precisará garantir que o arquivo [Link] reflita essas configurações.

Abra o arquivo [Link] (localizado em htdocs/monitor/[Link] ) em

um editor de texto. Verifique e, se necessário, ajuste as seguintes linhas:

class Database {
private $host = 'localhost';
private $username = 'root'; // Usuário padrão do XAMPP para
MySQL
private $password = ''; // Senha padrão do XAMPP para
MySQL (vazia)
private $database = 'monitoramento_sites';
// ...
}

• $host : Deve ser localhost .

• $username : Deve ser root .
• $password : Deve ser uma string vazia ( '' ), a menos que você tenha configurado
uma senha para o usuário root do MySQL no XAMPP.
• $database : Deve ser monitoramento_sites .

Salve o arquivo [Link] após quaisquer alterações. Com o banco de dados

criado, o esquema importado e as credenciais de conexão configuradas, seu sistema de
monitoramento está pronto para interagir com o banco de dados. A próxima etapa é
testar e verificar o funcionamento completo da aplicação.

Teste e Verificação do Sistema no XAMPP

Após a instalação do XAMPP, a implantação dos arquivos do sistema e a configuração do
banco de dados, é crucial realizar testes abrangentes para garantir que tudo esteja
funcionando conforme o esperado. Esta seção guiará você através dos passos para
verificar a funcionalidade completa do sistema de monitoramento em seu ambiente
local.
1. Acessando a Interface Web

Certifique-se de que os serviços Apache e MySQL (MariaDB) estejam iniciados no seu

XAMPP Control Panel. Em seguida, abra seu navegador web e digite o endereço da sua
aplicação:

[Link]

Você deverá ver a página inicial do sistema de monitoramento, com as seções para
adicionar sites, listar sites monitorados e gerar relatórios. Se você encontrar algum erro,
verifique o XAMPP Control Panel para garantir que os serviços estão rodando e consulte
os logs de erro do Apache (geralmente em C:\xampp\apache\logs\[Link] no
Windows, ou /Applications/XAMPP/logs/error_log no macOS, ou /opt/lampp/
logs/error_log no Linux).

2. Adicionando Sites de Exemplo e Dados Históricos

Para testar o monitoramento e visualizar os gráficos, é útil popular o banco de dados

com alguns sites de exemplo e dados históricos. O sistema inclui um script
add_sample_sites.php que faz exatamente isso.

Para executar este script, você precisará usar o terminal ou prompt de comando e
navegar até o diretório do seu projeto. O PHP CLI (Command Line Interface) do XAMPP
será usado para executar o script.

No Windows:

1. Abra o Prompt de Comando (CMD) ou PowerShell.

2. Navegue até o diretório do seu projeto: bash cd C:\xampp\htdocs\monitor
3. Execute o script: bash C:\xampp\php\[Link] add_sample_sites.php

No macOS ou Linux:

1. Abra o Terminal.
2. Navegue até o diretório do seu projeto: bash cd /Applications/XAMPP/
htdocs/monitor # macOS # ou cd /opt/lampp/htdocs/monitor #
Linux
3. Execute o script: bash /Applications/XAMPP/bin/php
add_sample_sites.php # macOS # ou /opt/lampp/bin/php
add_sample_sites.php # Linux
Este script adicionará alguns sites populares (como Google, GitHub) e IPs de DNS (como
[Link]) e simulará dados de disponibilidade e tempo de resposta para os últimos 7 dias.
Você deverá ver uma saída no terminal indicando que os sites e os dados históricos
foram adicionados com sucesso.

Após a execução do script, atualize a página [Link] no seu

navegador. Você deverá ver os sites de exemplo listados na seção "Sites Monitorados"
com seus status atuais (online/offline) e tempos de resposta. O status "Verificando..."
pode aparecer brevemente enquanto o JavaScript da página busca o status mais recente
via API.

3. Verificando o Monitoramento (Manual)

No ambiente XAMPP, o monitor_cron.php não será executado automaticamente

como um cron job de sistema. No entanto, você pode executá-lo manualmente via linha
de comando para simular o monitoramento e ver os logs sendo gerados.

No mesmo terminal onde você executou o add_sample_sites.php , execute:

php monitor_cron.php

Você verá a saída do script, mostrando o status de cada site monitorado. Isso simula o
que um cron job faria em um servidor de produção.

4. Gerando Relatórios e Gráficos

A seção "Relatórios de Disponibilidade" permite visualizar o histórico de disponibilidade

dos sites. Siga estes passos:

1. Selecione um Site: No dropdown "Selecionar Site", escolha um dos sites que você
adicionou (por exemplo, "Google" ou "DNS Cloudflare").
2. Selecione um Período: Escolha um período pré-definido (Último dia, Últimos 7
dias, Últimos 30 dias) ou selecione "Personalizado" para definir um intervalo de
datas específico. Se escolher "Personalizado", preencha os campos "Data Início" e
"Data Fim".
3. Gerar Relatório: Clique no botão "Gerar Relatório".

Após clicar no botão, o sistema buscará os dados históricos do banco de dados e exibirá
um gráfico de linha mostrando a disponibilidade (1 para online, 0 para offline) e o tempo
de resposta ao longo do período selecionado. Abaixo do gráfico, você verá um resumo
com:

• Percentual de Disponibilidade: A porcentagem de tempo em que o site esteve

online.
• Tempo Online: A somatória das horas em que o site esteve online.
• Tempo Offline: A somatória das horas em que o site esteve offline.
• Total Monitorado: O tempo total em horas que o site foi monitorado no período
selecionado.

Verifique se os dados no gráfico e no resumo fazem sentido com base nos dados de
exemplo gerados. Se o gráfico não aparecer ou os dados estiverem incorretos, verifique
o console do navegador (pressione F12 no Chrome/Firefox e vá para a aba "Console")
para erros JavaScript e os logs do Apache para problemas na API.

5. Testando a Adição e Remoção de Sites

Para um teste completo, tente adicionar um novo site através do formulário na interface
web e, em seguida, remova-o usando o botão de lixeira ao lado do item na lista de sites
monitorados. Verifique se as ações são refletidas na lista e se os dados são atualizados
no banco de dados.

Ao concluir esses testes, você terá uma boa compreensão de que o sistema está
instalado corretamente e funcionando em todas as suas partes: frontend, backend e
banco de dados. Seu sistema de monitoramento está agora pronto para ser explorado
em seu ambiente de desenvolvimento local.