Criando uma Aplicação Web com fins didáticos usando PHP 8.2 + CSV + Tailwind + Docker
Published: 2023-07-24 16:30:13

## 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](https://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:

```bash
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:
```bash
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:

![Integração com o shell do VSCode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fauw5deqao4az0khk4fh.png)

Agora, ainda dentro do diretório crie um arquivo chamado `docker-compose.yml` e escreva o seguinte nele:

### `./docker-compose.yml`
{% embed https://gist.github.com/ranierivalenca/c828e853ac4669015184110b6b7a4d6d %}

----

## 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:
- `assets`
- `components`
- `data`
- `includes`
- `tasks`
- `users`

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:
```bash
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`
{% embed https://gist.github.com/ranierivalenca/5ccfeda896135acddb0d602f191b5919 %}

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/`
{% embed https://gist.github.com/ranierivalenca/398764fa1d2e4bf676f375f76681ea28 %}

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/`
{% embed https://gist.github.com/ranierivalenca/3c87c04f88d6c1995a744990d0fcafc4 %}

---

Agora, enfim, vamos criar as páginas relacionadas a usuários e autenticação, dentro do diretório `./users`:

### `./users/`
{% embed https://gist.github.com/ranierivalenca/862fca1bb46753dad6861e09707d8bb5 %}

--- 

A seguir, vamos criar as páginas e ações relacionadas às tarefas em si, dentro do diretório `./tasks`

### `./tasks/`
{% embed https://gist.github.com/ranierivalenca/1f52b15a1e08a69b4527a1336175e487 %}

---

E, por fim, a página index, que também estará na raiz do projeto:

### `./index.php`
{% embed https://gist.github.com/ranierivalenca/091b18ffa961975236abb034d5f8a49b %}

---

## 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:

```bash
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`](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](https://dev.to/ranierivalenca/fundamentos-do-desenvolvimento-web-uma-rapida-revisao-15cj), uma das disciplinas que ministro  .