A maneira mais simples de você ter o seu formulário de contato em minutos com PHP e React.
- Status do Projeto
- Features
- Pré-requisitos
- Executando a Aplicação com o Docker
- Executando a Aplicação sem o Docker
- Executando os Testes
- Tecnologias Utilizadas
- Autor
- Versão 1 pronta
- Envio de e-mail pela tela de contato
Antes de executar a aplicação é preciso ter instalado as seguintes ferramentas no seu computador.
- Caso vá usar o docker:
- Docker (versão utilizada 19.03.6, build 369ce74a3c);
- Docker Compose (versão utilizada 1.26.1, build f216ddbf);
- Navegador web (Firefox, Google Chrome, etc).
- Caso não vá usar o docker:
- PHP 7.4 ou superior;
- NodeJS 12.6 ou superior (de preferência);
- Composer;
- MySQL 8;
- Mailhog (servidor SMTP falso para testes de envio de e-mail)(opcional);
- Navegador web (Firefox, Google Chrome, etc).
Executar o comando docker-compose up para subir os containers.
OBS: Esperar as libs do composer e npm serem instaladas para continuar.
Copiar o .env.example para .env e preencher com os dados necessário.
// Url do seu site com a porta
APP_URL=http://localhost:8085
// Url da sua api, já vem setado, alterar apenas se necessário
API_URL="${APP_URL}/api"
// Conexão com o seu banco de dados, abaixo segue o padrão do que está no docker-compose.yml que devem ser colocadas no .env
DB_CONNECTION=mysql
DB_HOST=database
DB_PORT=3306
DB_DATABASE=contactme
DB_USERNAME=root
DB_PASSWORD=root
// Configuração para envio de e-mail por SMTP, abaixo seguem as configurações padrões que estão no docker-compose.yml que devem ser colocadas no .env
MAIL_MAILER=smtp
MAIL_HOST=mailhog
MAIL_PORT=1025
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS='[email protected]'
MAIL_FROM_NAME="${APP_NAME}"
MAIL_TO_ADDRESS='[email protected]'Executar o comando docker exec contactme-web-php php artisan key:generate, para gerar o APP_KEY.
Executar o comando docker exec contactme-web-php php artisan migrate, para criar as tabelas no banco de dados.
Agora é só acessar os seguintes links caso tenha usado o docker:
- http://localhost:8025 : Servidor de email falso com mailhog, ele vai receber todos os e-mails e ao acessar um e-mail poderá ver o HTML na aba HTML, um txt na aba Plain text, e os arquivos enviados na aba MIME.
- http://localhost:8085 : Aplicação Contact.me, é só preencher os dados e enviar a mensagem, o arquivo tem o limite de tamanho de 500kb = 62.5kB = 64000B.
Você pode acessar o banco de dados com os seguintes dados:
- Host: 127.0.0.1
- Port: 3309
- User: root
- Password: root
- Database: contactme
Nele você verá a tabela contact com todos os dados que são enviados pelo formulário.
OBS: O contêiner de banco de dados foi feito apenas para testes, esteja ciente de que, ao destruir o contêiner todos os dados desaparecerão, para evitar essa situação em produção será necessário criar um volume no arquivo docker-compose.yml para salvar os dados do banco de dados fora do container.
Para executar a aplicação é preciso ter um servidor web (vou usar o que é provido pelo php, php -S), um servidor de banco de dados MySQL e um servidor de e-mail, pode ser usado o do gmail ou um servidor false, por exemplo.
Também é preciso ter o PHP 7.4 ou superior, o composer e o node 12.16 ou superior (de preferência) instalado.
Executar o comando composer install para instalar as dependências do PHP.
Executar o comando npm install para instalar as dependências do Node.
Copiar o .env.example para .env e preencher com os dados necessário.
// Url do seu site com a porta
APP_URL=http://localhost:8085
// Url da sua api, já vem setado, alterar apenas se necessário
API_URL="${APP_URL}/api"
// Conexão com o seu banco de dados
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=contactme
DB_USERNAME=root
DB_PASSWORD=
// Configuração para envio de e-mail por SMTP
MAIL_MAILER=smtp
MAIL_HOST=
MAIL_PORT=
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS='[email protected]'
MAIL_FROM_NAME="${APP_NAME}"
MAIL_TO_ADDRESS='[email protected]'Executar o comando php artisan key:generate para gerar o APP_KEY.
Criar um banco de dados com o nome contactme pelo seguinte comando através de um programa como o MySQL Workbench ou o DBeaver:
CREATE SCHEMA contactme CHARACTER SET utf8;
Executar o comando php artisan migrate para criar as tabelas no banco de dados.
Execute php -S 0.0.0.0:80 -t public ou php artisan serve.
Agora é só acessar o link da sua aplicação para começar a usá-la.
No banco de dados você verá a tabela contact com todos os dados que são enviados pelo formulário.
Para executar os testes com pelo docker execute docker exec contactme-web-php php artisan test.
Para executar os testes sem o docker execute php artisan test.
Para testar uma requisição manualmente tem o arquivo client.rest no projeto que pode ser executado através dessa extensão do VSCode: https://marketplace.visualstudio.com/items?itemName=humao.rest-client.
Para o desenvolvimento do projeto foram utilizadas as seguintes tecnologia:
- Laravel 7;
- Bootstrap 4;
- PHP 7.4;
- React;
- TypeScript;
- Axios;
- Node.js;
- Mailhog;
- MySQL;
- Docker;
Felipe Vieira
