Como fazer um site de quadro de mensagens usando PHP e MYSQL: 5 etapas

2024 Autor: John Day | [email protected]. Última modificação: 2024-01-30 11:36

Este instrutível mostrará como criar um site de quadro de mensagens usando php, mysql, html e css. Se você é novo no desenvolvimento web, não se preocupe, pois haverá explicações detalhadas e analogias para que você possa entender melhor os conceitos.

Materiais necessários:

• Editor de texto (ou seja, Sublime Text, Atom, etc.). Vou usar um texto sublime.
• WAMP significa Windows Apache MySQL e PHP
• MAMP significa Mac Apache MySQL e PHP

MAMP para usuários de Mac: https://www.mamp.info/en/ (inclui MySQL e PHP)

WAMP para usuários do Windows: https://www.wampserver.com/en/ (inclui MySQL e PHP)

Sublime Text:

Etapa 1: Visão geral do projeto

A maneira de controlar as mensagens é armazená-las em um banco de dados. Neste tutorial, usaremos MySQL. (Estou usando WAMP porque tenho um sistema operacional baseado em Windows)

1. Configure o PHP e o MySQL certificando-se de que foram baixados e você pode navegar até o local dos arquivos em seu computador.
2. Abra o prompt de comando, navegue até o diretório mysql e digite "mysqladmin -u root -p password." Este comando pedirá sua senha e para você digitá-la novamente.
3. Agora inicie seu servidor WAMP ou MAMP. Aparecerá um ícone verde quando o servidor terminar de carregar. Clique no ícone -> MySQL -> console do MySQL para certificar-se de que você pode fazer o login com sua senha recém-criada.
4. Agora a tarefa é criar o banco de dados onde serão armazenadas as informações sobre as mensagens. Vamos pensar no que geralmente é necessário em uma mensagem. Itens comuns incluídos: nome, hora em que a mensagem foi postada, hora em que a mensagem foi postada e a própria mensagem.
5. Crie um banco de dados chamado "mensagem".
6. Crie uma tabela chamada "comentários" e adicione as linhas: id (tipo inteiro que incrementa automaticamente), nome (tipo Varchar), comentário (tipo Varchar), hora (tipo Varchar), data (tipo Varchar),
7. Conecte-se ao banco de dados "mensagem" em um arquivo php com o nome "db.php".
8. Crie o campo de entrada para o nome do autor e a área de texto da mensagem.
9. Valide os dados antes de inseri-los no banco de dados. Se estiver tudo bem, insira a mensagem, nome do autor, data e hora em que a postagem foi postada.
10. Exiba as mensagens recuperando todos os registros do banco de dados em um div html e estilize a página usando CSS.
11. Horray, você aprendeu com sucesso a criar um sistema de mensagens.

Etapa 2: Etapa 2 - Configurar banco de dados

Figura 1 - Uma vez criado o banco de dados, pode-se digitar o comando 'show databases' para certificar-se de que o banco de dados foi criado com sucesso.

MOSTRAR BASES DE DADOS;

Figura 2 - Para armazenar as informações no banco de dados, é necessário criar uma tabela. Criar a tabela com as linhas essenciais é a chave para garantir que o site tenha todas as informações necessárias. Os comentários da tabela terão todas as informações necessárias

Para poder se conectar ao banco de dados de mensagens, emita o comando "GRANT ALL PRIVILEGES ON message. *". Você pode usar seu próprio nome de usuário e senha, mas não se esqueça deles.

Mensagem CREATE DATABASE; mensagem GRANT ALL PRIVILEGES ON. * TO 'username' @ 'localhost' IDENTIFICADO POR 'password';

Figura 3 - Insira 'descrever comentários' para se certificar de que a tabela foi criada com sucesso. Você pode ver as linhas e seus tipos de dados emitindo este comando.

DESCREVER COMENTÁRIOS;

Figura 4 - Como a linha do comentário não estava lá originalmente, vamos adicioná-la com o comando ALTER TABLE. O comentário é do tipo VARCHAR (255), o que significa que o comentário será um texto que não pode exceder 255 caracteres.

ALTER TABLE mensagem ADD COLUMN comments VARCHAR (255) NOT NULL;

O 255 representa o comprimento máximo para comentário. Não nulo significa que quando uma mensagem é inserida no banco de dados, o campo de comentário no banco de dados não pode estar vazio (nulo; inexistente).

Etapa 3: criar arquivos php

As etapas a seguir ocorrerão no editor de texto de sua escolha. Vou usar um texto sublime.

1. Precisamos criar dois arquivos. Um será chamado db.php, que conectará ou website ao banco de dados MYSQL (minha linguagem de consulta padrão) e index.php, a página onde as mensagens ocorrerão.

2. Primeiro, vamos criar db.php. Quando o banco de dados foi configurado, as credenciais de conexão para se conectar ao banco de dados. Este arquivo irá conectar index.php ao banco de dados para que possamos preenchê-lo com as informações necessárias para criar a sala de chat.

Código para db.php

? php define ("DB_SERVER", "localhost");

define ("DB_USER", "kylel95"); define ("DB_PASSWORD", "senha"); define ("DB_NAME", "mensagem"); $ connect = mysqli_connect (DB_SERVER, DB_USER, DB_PASSWORD, DB_NAME);

if (mysqli_connect_errno ())

{die ("Falha na conexão do banco de dados:". mysqli_connect_error (). "(". mysqli_connect_errno (). ")"); }

?>

3. A seguir, vamos criar index.php. Este arquivo é onde criamos a sala de chat. Usaremos o campo de entrada do html para o nome, textarea para a mensagem e um elemento div para conter as mensagens. Usaremos CSS (Cascase Style Sheet) para posicionar os elementos da página e decorar o conteúdo da página.

código para index.php

? phprequire_once ('db.php');

if (isset ($ _ POST ['enviar'])) {$ time = date ("g: i: s A"); $ data = data ("n / j / A"); $ msg = $ _POST ['mensagem']; $ name = $ _POST ['fname']; $ resultado = ""; if (! empty ($ msg) &&! empty ($ name)) {// nome hora data mensagem $ query = "INSERT INTO comments ("; $ query. = "nome, hora, data, comentário"; $ query. = ") VALORES ("; $ query. = "'{$ Name}', '{$ time}', '{$ date}', '{$ msg}'"; $ query. = ")"; $ result = mysqli_query ($ connect, $ query); }}?>

textarea {border-radius: 2%; } #thread {border: 1px # d3d3d3 sólido; altura: 350px; largura: 350px; estouro: rolar; }

? php $ select = "SELECIONE * DOS comentários"; $ q = mysqli_query ($ connect, $ select); while ($ row = mysqli_fetch_array ($ q, MYSQLI_ASSOC)) {echo $ row ['name']. ":". $ row ['comentário']. ""; }?> Nome: Enviar

4. Usaremos a função incorporada do php date () para obter a data e hora em que a mensagem foi postada e empty () para garantir que os usuários não insiram uma mensagem ou nome vazio.

5. Assim que os dados do formulário forem enviados, inseriremos o nome, a mensagem, a hora e a data no banco de dados.

6. Vamos agora consultar o banco de dados e obter todos os comentários. Os comentários serão armazenados em um div.

?>

Etapa 4: preencher os arquivos Db.php e Index.php

1. O db.php (db abreviação de banco de dados) usa o nome de usuário e a senha que usei quando o banco de dados foi criado quando emiti o comando "GRANT ALL PRIVILEGES".

A função define no topo do arquivo indica que as variáveis DB_SERVER, DB_USER, DB_PASSWORD, DB_NAME são constantes (elas não mudam de valor). As instruções if verificam se a conexão com o banco de dados falhou ou não.

2. No arquivo index.php, usaremos a função require do php para conectar a página ao banco de dados. Em seguida, crie um campo de entrada para o nome. Em seguida, crie a área de texto para a mensagem. Depois de criá-los, visite https:// localhost: 8080 / messages / index.php (você pode não ter um número de porta, por exemplo, 8080) para ter certeza de ver a caixa de entrada e a área de texto.

3. A seguir, vamos reunir os dados do formulário e, em seguida, inseri-los no banco de dados.

4. Agora, vamos adicionar uma consulta ao banco de dados e gerar todas as mensagens em um div.

5. Para estilizar um pouco melhor, vamos adicionar alguns CSS para torná-lo um pouco mais bonito.

PS: Eu cometi um erro de digitação. Altere a 'mensagem' para um comentário próximo ao comando INSERT para a variável $ query.

Etapa 5: Etapa 5: exemplo e próximas etapas

Espero que você veja algo semelhante ao que está acima após adicionar o css e testá-lo.

Próximas etapas: Adicionar mais css para tornar o site mais atraente.