Sistema de chat público em PHP

Introdução

chat_publico_0.3Embora a base deste sistema seja o PHP, também serão utilizadas outras tecnologias. A nossa “caixa de ferramentas” tem, então, o seguinte conteúdo e a respetiva utilização:

  • PHP: Linguagem de programação base;
  • HTML: Estrutura das páginas;
  • CSS: Design das páginas;
  • jQuery/JavaScript: Utilização do AJAX;
  • MySQL/MariaDB: Base de dados;
  • Apache: Servidor web;

Objectivo

No fim deste artigo o leitor terá uma visão abrangente do que é essencial para criar aplicações web e a ajuda necessária para começar a desbravar este mundo com o PHP.

Funcionalidades

O nosso sistema de chat terá as seguintes funcionalidades:

  • Sala de chat única e pública;
  • Escolha de um nickname exclusivo;
  • Envio de mensagens;
  • Consulta de mensagens;

“Caixa de Ferramentas”

Para implementar este chat vamos utilizar várias ferramentas que se complementam umas às outras. Algumas destas ferramentas foram instaladas com o XAMPP, permitindo, assim, instalar facilmente um servidor web na nossa máquina local.

PHP

PHP, acrónimo recursivo para “PHP: Hypertext Preprocessor” (originalmente Personal Home Page) é uma linguagem de programação server-side de utilização livre e de código aberto. O PHP é, por exemplo, utilizado pelo Facebook e WordPress. Em 2014 foi a linguagem de eleição de 82% dos sites (onde a linguagem de programação é conhecida).

No sistema de chat, que vamos construir, o PHP tem como função a comunicação com a base de dados para armazenamento e consulta das mensagens.

MySQL

O MySQL é um sistema de gestão de base de dados (SGBD) que utiliza a linguagem SQL (Structured Query Language). A sua licença é livre para desenvolvimento, mas, caso seja utilizada em aplicações comerciais, passa a ser paga. Utilizada pela NASA, Friendster, HP, Google, entre outras empresas, é, atualmente, uma das bases de dados mais populares, com mais de 10 milhões de instalações em todo o mundo.

A função do MySQL, no nosso sistema de chat, será o armazenamento das mensagens dos utilizadores (também se pode utilizar o MariaDB). Serão utilizadas duas tabelas, uma para armazenar os nicknames e outra para armazenar as mensagens.

HTML

O HTML (HyperText Markup Language) é uma linguagem de marcação utilizada na construção de páginas web. Quando o PHP é interpretado no servidor produz o HTML que será lido pelo Browser (Os browsers não conhecem o PHP).

O HTML será, então, utilizado para criar a estrutura das nossas páginas.

CSS

O CSS (Cascading Style Sheets) é uma linguagem de folhas de estilo utilizada para definir a apresentação de páginas web.

No nosso sistema de chat, todas as cores, tamanhos, tipos de letra, etc. serão definidos no CSS.

jQuery / JavaScript

O jQuery é uma framework de JavaScript, de código aberto, desenvolvida para facilitar a programação no lado do cliente (Browser) e é utilizado por cerca de 77% dos sites mais visitados do mundo. O seu slogan é revelador: “Write Less, Do More” (por exemplo, 20 linhas de código em JavaScript podem ser substituídas por uma em jQuery).

O jQuery será usado no nosso chat para facilitar o uso de outra “tecnologia” denominada de AJAX (Asynchronous Javascript and XML) que, na verdade, é um conjunto de tecnologias que torna as páginas mais interativas.

Apache

O Apache é o servidor web livre melhor sucedido. Estima-se que foi utilizado por metade do sites em 2015.

É através do Apache que o nosso computador conseguirá interpretar o PHP.

Procedimento

Passo 1 – Instalação e configuração das ferramentas necessárias

1. Instalar o XAMPP

Fazer o download em https://www.apachefriends.org e executar a instalação.

1.1. Configurar o XAMPP

Abrir o Control Panel e iniciar o Apache. Depois de iniciado clique no botão “Admin” que deverá abrir uma página no Browser (página de apresentação do XAMPP). A configuração está concluída.

1.2. Testar o PHP

Abrir o editor de texto, por exemplo, o Notepad++ e escrever o seguinte script:

<?php
echo 'Olá PHP';
?>

Guardar o script com o nome teste.php na pasta c:\xampp\htdocs\chat.

NOTA: é necessário criar a pasta chat.

Depois de guardar o ficheiro no disco, digite o seguinte URL no browser:

http://localhost/chat/teste.php

Apareceu o texto “Olá PHP”? Então o PHP está a funcionar.

2. Base de dados

Vamos agora colocar a base de dados em funcionamento. Obviamente, será aqui que serão armazenadas todas as conversas.

2.1. Criação da base de dados

Com o Control Panel do XAMPP aberto, clique no botão “Admin” referente ao MySQL que abrirá o browser no phpMyAdmin, o que nos permitirá criar uma base de dados e o respetivo utilizador. Para tal, deverá clicar na aba “User accounts” e clicar no link “Add user account”. Vamos então escrever os seguintes dados onde diz “Informação de login”:

  • Nome de usuário: chat
  • Host name: localhost
  • Senha: programar
  • Re-digite: programar

Onde diz “Database for user account” selecionar a checkbox que diz:

  • Criar banco de dados com o mesmo nome e conceder todos os privilégios.

No fim da página, clique no botão “Executar”. Neste momento, a base de dados e o respetivo utilizador estão criados.

2.2 Criação das tabelas

No lado esquerdo selecione a tabela “chat” e no lado direito selecione a aba “SQL”. Onde diz “Rodar consulta(s) SQL no banco de dados chat” fazer copiar/colar das seguintes queries:

CREATE TABLE `messages` (
  `IdMessage` int(8) NOT NULL COMMENT '(PK) ID da mensagem',
  `FromNickname` varchar(32) NOT NULL COMMENT 'Nickname do remetente',
  `Message` text COMMENT 'Mensagem',
  `MessageDate` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT 'Data da mensagem'
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COMMENT='Mensagens do chat';

CREATE TABLE `users` (
  `Nickname` varchar(32) NOT NULL COMMENT '(PK) Nickname do utilizador',
  `LoginDate` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT 'Data do login'
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COMMENT='Utilizadores do chat';

ALTER TABLE `messages`
  ADD PRIMARY KEY (`IdMessage`);

ALTER TABLE `users`
  ADD PRIMARY KEY (`Nickname`);

ALTER TABLE `messages`
  MODIFY `IdMessage` int(8) NOT NULL AUTO_INCREMENT COMMENT '(PK) ID da mensagem';

Depois de carregar no botão “Executar” será criada a tabela users que armazenará os nicknames dos utilizadores e a tabela messages que armazenará as mensagens.

3. Script das constantes

Crie um ficheiro com o nome constants.inc.php e copie o seguinte conteúdo:

<?php
# Base de dados
define('DB_HOSTNAME', 'localhost');
define('DB_USERNAME', 'chat');
define('DB_PASSWORD', 'programar');
define('DB_NAME', 'chat');

# Tabelas
// Utilizadores do chat
define('USERS', 'users');
// Mensagens do chat
define('MESSAGES', 'messages');

Este ficheiro deve ser guardado na pasta chat. Ele contém os dados necessários para a comunicação com a base de dados.

Mais tarde, vamos testar se a ligação à base de dados está a funcionar, mas antes disso vamos precisar de mais alguns scripts.