[PHP + Mysql] Gerador de imagens aleatórias

[MostlyNice 2]

Agora que o evento acabou, nada mais justo do que divulgar o código.

 

O que o cliente pode ver

 

Eu comecei preparando a exibição. Eu queria apenas uma página, então não foi necessário elaborar várias divisões do layout. Contudo, para não ficar completamente feio, eu optei por utilizar o Bootstrap. Ele é um framework para o front-end. Ajuda o seu trabalho ficar com uma boa aparência, sem muito esforço. Esse projeto particularmente não faz juz ao framework, já que não existem muitos elementos além de uma caixa de texto e um botão.

 

Então comecei o index.php com isso:

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Para qualquer um com o conhecimento básico de HTML não há nada demais. No cabeçalho estou importando os recursos que vou utilizar, o Bootstrap de um CDN e também uma folha de estilo local, que foi definida da seguinte maneira:

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Há também esse trecho em PHP:

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Essa parte lida com a caixa que aparece com o link gerado (ou com uma mensagem de erro, caso ele não consiga gerar o erro). Ele checa se a variável $_SESSION['signlink'] está definida. O nome signlink foi uma escolha fraca da minha parte, já que essa variável vai guardar uma mensagem, não exatamente um link. Então enxergue ela como uma variável que guarda uma mensagem de retorno do servidor para uma determinada ação do cliente.

 

Caso exista essa mensagem, então o PHP cria um elemento HTML. Eu estou aproveitando as classes do Bootstrap para gerar uma mensagem mais customizada, guardando na variável $_SESSION['type'] o tipo de mensagem à ser exibido. Por exemplo, quando for uma mensagem com um link, queremos que $_SESSION['type'] tenha o valor "success", mas quando for um erro, que tenha o valor "danger". Então as classes daquela DIV vai acabar sendo "alert alert-success" ou "alert alert-danger". O primeiro, o Bootstrap personaliza a DIV em tons de verde. O segundo o Bootstrap personaliza com tons vermelhos.

 

Logo após exibir essa caixa. Há um unset para remover os valores. Não queremos, por exemplo, que ao recarregar a página o cliente ainda fique com a mesma mensagem sendo exibida pra ele.

 

Isso resume praticamente todo o front-end. Eu não quero entrar em detalhes, porque é fora do escopo. Mas existem tutoriais aqui sobre HTML/CSS.

 

 

O que o usuário não vê

 

Se você ainda não notou, o formulário da página de exibição está enviando os dados para a própria página. Sim, o back-end está embutido nessa única página. Novamente, esse sistema eu desenvolvi pensando apenas nessa função. É muito recomendado que em sistemas maiores exista uma divisão entre a camada de exibição e a lógica de negócio.

 

Dito isso, passemos ao problema em mãos. Como todo o sistema foi desenvolvido em apenas uma página, temos que pensar nos tipos de acesso. Temos o tipo de acesso normal, onde o cliente acessa o site e é exibido para ele aquela página html. Temos também o acesso à essa página através do formulário, enviando os dados. E também, não vamos nos esquecer o produto final, algumas pessoas vão acessar essa página esperando a exibição da imagem.

 

Isso parece simples, o suficiente, né? (hmmm)

 

A solução final, foi essa:

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Agora vamos tentar quebrar isso em partes. (novamente, eu não vou explicar os mínimos detalhes, eu estou esperando que o leitor tenha o conhecimento básico do PHP, existem tutoriais mais específicos por aqui no fórum)

 

Começo ativando o session_start(), já que vamos trabalhar com as sessões do PHP. É uma boa forma de armazenar temporariamente dados sobre um cliente. Logo em seguida é definido algumas variáveis. Como a URL do website (nesse caso estou rodando localmente) e os detalhes do banco de dados. Mais abaixo existem dois blocos de código. Um lidando com uma requisição para uma imagem, outro lidando com os dados que vêm do formulário.

 

Vamos começar com a segunda:

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Nós vamos receber do formulário uma variável chamada $_POST['links'], como explicamos para os usuários na camada de exibição, eles devem entrar com links de imagens separados por ponto e vírgula. $_POST['links'] é uma string que na melhor das hipóteses contém vários links para uma imagem separados por ponto e vírgula. (e na pior das hipóteses uma trollagem)

 

Começamos explodindo(:raiva:!) essa string em um array. No PHP o explode() recebe uma string e um separador. Ele quebra a string onde o separador aparece, criando um array. Assim sendo a string "Amanhã;vou;lá;hoje" viraria o array Array("Amanhã","vou","lá","hoje").

 

Depois definimos um ID para esse "album" (que seria todas as imagens). O ID será o campo em comum de diversas imagens que constituem um álbum. Ele precisa ser único para esse álbum. Existem várias formas de fazer isso, eu escolhi uma forma bastante preguiçosa e perigosa. Eu estou pegando o timestamp atual (data e hora), gerando uma hash do tipo SHA-512 e pegando os 6 primeiros caracteres dessa hash. O bom que as chances de ter 2 ids iguais é baixa, SÓ QUE NÃO É NULA. Eu não quis mudar a forma que eu criei, mas o correto, seria logo após criar o ID verificar se não existe no BD outro album com esse ID. Mas novamente, eu sabia que não teria muito acesso, e dado que o número de possibilidades de combinações de 6 caracteres (letras e numeros), não achei necessário para esse exemplo.

 

Depois de achar o album, vamos definir a nossa query, ou nesse caso, um pedaço dela. A query "INSERT INTO gerador(id_album,link) VALUES " informa que vamos inserir na tabela gerador e nos campos id_album e link alguns valores. Resta agora definir que valores são esses.

 

Antes de continuar verificamos se o array $links está vazio. Ao saber que há links, temos que checar pra ter certeza que eles são de fato links para uma imagem. É aí que entra a temida expressão regular. É exatamente para isso que temos essa coisa linda:

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Parece magia negra, né? Mas as expressões regulares são muito boas e podem simplificar a sua vida. Eu fui apresentado à elas enquanto aprendia Perl. Aquele trecho ali está basicamente dizendo que o link precisa seguir esse determinado padrão:

 

* Começar com http ou https

* Seguido por ://

* E depois ele pode ter diversos caracteres.

* E no final deve terminar com .jpg ou .png ou .gif

 

Agora que temos nosso padrão para como um link deve parecer, vamos iterar sobre o nosso array de links. Para cada link nesse array vamos utilizar a função preg_match() do PHP, que compara um determinado valor com um determinado padrão em expressão regular. Nesse caso queremos saber se o determinado elemento da array de links é um link válido. Se for, então adicionar isso aqui:

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Na nossa query. Se ele não for válido, nós removemos o valor da array $links.

 

Daí você pode perguntar, mas por que você está utilizando ? invés do $links[$i]? É muito simples, VOCÊ NUNCA PODE CONFIAR EM DADOS ENVIADOS POR USUÁRIOS, NUNCA!!

 

Ao final desse processo a nossa variável $query vai ficar parecendo algo do tipo (assumindo 3 imagens, onde o id é a1j3de):

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Alguns já podem ter notado para onde isso está indo, para os que não notaram, aquilo ali é uma query que vamos utilizar em um prepared statement. Novamente, não vou entrar em detalhes, existem tópicos aqui no fórum sobre isso. Basta saber que independente do valor que o usuário passou, ele será tratado como um valor VARCHAR (como foi definido o campo link no banco de dados). Evitando que algum espertinho injete uma SQL no seu código. Essa é uma versão bem resumida, vale muito a pena dar uma olhada na documentação.

 

Logo em seguida criamos uma conexão com o BD utilizando o PDO. E então utilizamos o prepare() do PDO para criar o nosso prepared statement. É importante notar o uso da função rtrim() ali. Eu não sei se você percebeu, mas a query acaba ficando com uma vírgula no final. Então usamos o rtrim() para remove-la antes de passar a query para a função prepare(). Ela vai gerar um objeto do tipo PDOStatement. Onde usaremos o execute(), passando como padrão a nossa array de links. Se você ler sobre o PDO vai ver que isso é muito simples, o que ele está fazendo internamente é substituir o ? pelo o valor dos links na array $links de uma forma segura. No caso de sucesso nós criamos as variáveis de sessão (aquelas lá que do começo do texto) para informar o link. Caso contrário criamos para informar o erro.

 

Ufa... isso cobre a parte de gravar no banco de dados. Mas e para recuperar?

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Para recuperar vamos checar por uma variável do tipo GET, nesse caso $_GET['request']. Onde, se nós quiséssemos recuperar aquele "album" (a imagem dinâmica), seria atráves do link:

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Daí você pode perguntar: WTF, como assim? Que eu saiba o meu link está vindo assim:

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Eu decidi colocar o link daquele jeito porque é mais amigável ao usuário. De fato parece uma imagem. Mas no .htaccess eu estou informando uma regra de escrita para o meu servidor da seguinte maneira:

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Ou seja, sempre quando vier um link para uma imagem, ele vai pegar o id do album e montar uma url seguindo o padrão com o $_GET['request'] sozinho. É o mesmo princípio por trás das famosas "urls amigáveis". Acredito que tenha um tutorial por aqui, por isso também não irei entrar em detalhes.

 

Agora que temos o ID do album, vamos abrir uma conexão com o banco de dados e pegar todas as imagens que pertecem ao album que possua aquele ID. Como no exemplo anterior, não podemos confiar nesse ID enviado através do $_GET['request'], então vamos usar prepared statements para recuperar os valores. Guardamos os dados recuperados numa variável chamada $resultado. Depois disso criamos uma variável chamada $show, ela vai assumir um valor aleatório entre 0 e o tamanho da array resultados (menos 1). Assim podemos acessar aleatoriamente um dos resultados. Então:

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Vai retornar qualquer link de uma imagem do album com aquela ID de forma aleatória. Cool. :fuma:

 

O método que eu estou usando é redirecionar o usuário para o link da imagem. É bom que não exige muito do servidor. A outra forma seria pegar a imagem do link, importar os resources dela para o nosso servidor, enviar um header correspondente ao tipo de imagem e então imprimir o valor da resource. É muito custoso. E não há muitas vantagens.

 

 

Isso cobre basicamente como esse projeto foi feito. É bem mais simples do que parece, mas foi divertido cria-lo. Abaixo segue o link para o download do projeto completo (junto com o esquema da tabela mysql usada):

 

Download:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

Scan:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

[Cr4cko 1215]

Bela explicação! Parabéns pelo desenvolvimento.

Joga no git, sempre bom guardar nossos projetos por mais bobos que sejam.. isso vai pro CV.

Ou então talvez você precise no futuro, vai saber.. hauhaua

Abraços

[rnxn 2]

Fez até mais do que eu tinha imaginado.

[Skope 2]

Opa! Obrigado por ter partilhado, com certeza vai ajudar muitos membros!

 

Skope