Introdução
O objetivo deste post é construir uma aplicação web com fins didáticos usando PHP puro e Tailwind CSS como framework para melhorar a aparência. A aplicação utilizará como fonte de dados arquivos CSV e, para evitar possíveis conflitos de versões dos softwares instalados, utilizaremos containers Docker.
Neste exemplo, não teremos explicações detalhadas, a ideia é apenas fazer funcionar a aplicação. Tais explicações ficarão para outros artigos.
Alguns dos comandos serão executados no terminal, então você deve ter uma familiaridade mínima com esta interface. Também é recomendável já ter usado o VSCode, que facilitará na hora de criar os códigos.
Também é importante lembrar que em termos de estrutura de arquivos . se refere ao diretório atual, e no contexto deste artigo estará se referindo ao diretório raiz do projeto. Também utilizaremos / como separador de diretórios, seguindo o padrão Unix. Note também que os arquivos estão hospedados no GitHub, através de Gists, e que o nome de cada arquivo que deve ser criado corresponde ao nome do arquivo dentro do referido Gist, portanto fique atento.
Passo 1 - Montando a infraestrutura
Para começar, você precisa assegurar que o gerenciador Docker está instalado no seu computador; caso não esteja, você deve baixar em docker.com.
Com o docker instalado e funcionando no terminal (ou WSL se você estiver usando o Windows), vamos precisar baixar a imagem do PHP 8.2 (versão que utilizaremos neste tutorial) executando o comando a seguir no terminal:
docker pull php:8.2
Passo 2 - Configurando o ambiente de desenvolvimento
Para construir nossa aplicação, vamos começar criando um diretório chamado myapp (ou qualquer outro diretório que você deseje). Agora, navegue através do terminal até este diretório (usando o comando cd). Se você tiver o VSCode instalado, pode executar o seguinte comando:
code .
Isto deverá abrir o VSCode dentro deste terminal. Caso você tenha o VSCode e esse comando não funcione, você pode abrir o diretório manualmente, escolhendo a opção open folder dentro do menu file do editor. Para habilitar a integração com o shell (que permite executar o comando acima diretamente no terminal), aperte ctrl+shift+p (ou command+shift+p no Mac), digite shell e escolha a opção de instalar no shell, conforme a imagem a seguir:
Agora, ainda dentro do diretório crie um arquivo chamado docker-compose.yml e escreva o seguinte nele:
./docker-compose.yml
Passo 3 - Construindo a aplicação
Agora, vamos construir a nossa aplicação. Para isso, vamos precisar construir uma série de arquivos e diretórios, então mãos a obra.
Primeiro, crie os seguintes diretórios:
assetscomponentsdataincludestasksusers
Se você quiser, pode executar o comando a seguir no terminal (dentro do diretório raiz) para criar todos os diretórios de uma única vez:
mkdir -p assets components data includes tasks users
Primeiramente, vamos criar, também na raiz, um arquivo de configuração, que chamaremos de conf.php:
./conf.php
Agora vamos criar os includes, que serão os arquivos básicos a serem incluídos em vários outros arquivos. A seguir, os arquivos que estarão dentro do diretório ./includes:
./includes/
O arquivo init.php é o arquivo básico que será incluído em diversos outros arquivos.
setup.php faz uma verificação inicial dos diretórios essenciais para o funcionamento dos includes, assim como baixa a versão de desenvolvimento da CDN do tailwind para o diretório local assets a fim de otimizar o desenvolvimento.
functions.php contém algumas funções para manipular os arquivos que utilizaremos como fonte de dados.
Agora vamos criar os componentes que serão incluídos nas páginas, dentro do diretório ./components
./components/
Agora, enfim, vamos criar as páginas relacionadas a usuários e autenticação, dentro do diretório ./users:
./users/
A seguir, vamos criar as páginas e ações relacionadas às tarefas em si, dentro do diretório ./tasks
./tasks/
E, por fim, a página index, que também estará na raiz do projeto:
./index.php
Passo 4 - Ligando o container e testando a aplicação
Agora, basta ir no terminal, dentro do diretório raiz do projeto, onde está o arquivo docker-compose.yml e executar o seguinte comando:
docker-compose up
Agora, basta acessar a aplicação, que estará escutando na porta 8080 local. Para isso, vá até o browser e digite o seguinte endereço: http://localhost:8080. Com isso, você pode acessar a aplicação.
Conclusão
Naturalmente, esta é uma aplicação com fins didáticos, que servirá como base para parte de uma disciplina de Desenvolvimento Web. Por conta disso, é natural que nem tudo está seguindo o mesmo padrão e que, possivelmente, nem todas as boas práticas estão sendo seguidas. Isto é proposital, visto que explicações sobre coisas que acontecem no código serão explicadas em outros tutoriais, na série de Desenvolvimento Web 1, uma das disciplinas que ministro .
Top comments (1)
Muito bom o conteúdo prof.👏
