Pesquisar na Comunidade

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: <!doctype html> <html> <head> <meta charset="utf8" > <title>Dynamic Signature</title> <link rel="stylesheet" href="[Hidden Content]; <script src="[Hidden Content]; <link rel="stylesheet" href="assets/css/estilo.css" /> </head> <body> <div class="website"> <div class="header"> <p style="color:silver;text-align:center;">Νεχ ποσσυμ τεχυμ ωιωερε, νεχ σινε τε</p> </div> <div class="content"> <div style="width: 500px; margin: 0 auto; text-align: center;"> <h1 style="text-shadow: 2px 2px 2px gray; color:silver;">Dynamic Signature</h1> <p style="font-size:9pt;">Gera uma assinatura dinâmica que se alterna aleatóriamente entre diversas assinaturas que o usuário desejar. É necessário colocar o <b>link direto</b> para as imagens na caixa de texto abaixo. Separando cada imagem por um <b>;</b> (ponto e vírgula).</p> <form method="post" action="index.php"> <div class="form-group"> <textarea name="links" class="form-control" placeholder="Exemplo: [Hidden Content]; </div> <div class="form-group"> <input class="btn btn-default btn-lg" type="submit" value="Gerar assinatura"> </div> </form> </div> <?php if (isset($_SESSION['signlink'])) : ?> <div class="alert alert-<?php echo $_SESSION['type']; ?> center" role="alert"> <?php echo $_SESSION['signlink']; ?></b> </div> <?php unset($_SESSION['signlink']);unset($_SESSION['type']);endif; ?> </div> </div> <div class="footer"> <p style="padding:5px;">MostlyNice 2015&copy </p> </div> </body> </html> 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: body { background-image: url('../img/bg.png'); } body,html { height: 100%; margin: 0; padding: 0; } .center { text-align: center; } .website { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -40px; padding: 0 0 40px; } .content { width: 800px; margin: 0 auto; } .footer { height: 40px; background-color: black; color: silver; text-align: center; } Há também esse trecho em PHP: <?php if (isset($_SESSION['signlink'])) : ?> <div class="alert alert-<?php echo $_SESSION['type']; ?> center" role="alert"> <?php echo $_SESSION['signlink']; ?></b> </div> <?php unset($_SESSION['signlink']);unset($_SESSION['type']);endif; ?> 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: <?php // Autor: MostlyNice // Escrito em: 13/02/2015 para o MCM #2 // Licença de uso: GPL v2 session_start(); // URL base do site $url_base = '[Hidden Content]'; // Informações do banco de dados: $db_host = 'localhost'; $db_database = 'dynamicsignature'; $db_user = 'root'; $db_pass = ''; // Lida com requisições de exibição da imagem if (isset($_GET['request'])) { $db = new PDO('mysql:host='.$db_host.';dbname='.$db_database,$db_user,$db_pass); $stm = $db->prepare('SELECT link FROM gerador WHERE id_album = ?'); if ($stm->execute(array($_GET['request']))) { $resultado = $stm->fetchAll(); $show = rand(0,(count($resultado)-1)); // Maneira 1, mais eficiente pelo o baixo custo de processamento header('Location: '. $resultado[$show][0]); // Maneira 2, custa mais, já que tem pegar os resources do outro website //header('Content-type:image/'.substr($resultado[$show][0],-3)); //echo file_get_contents($resultado[$show][0]); exit; } } // Lida com o envio de um novo "album" de assinaturas o banco de dados if (isset($_POST['links'])) { $links = explode(";",$_POST['links']); $albumID = substr(hash('sha512',date('d/m/Y h:i:s')),0,6); $query = "INSERT INTO gerador(id_album,link) VALUES "; if (!empty($links)) { // Checa os links $link_pattern = "/^https?\:\/\/([a-zA-Z0-9\.\/_\-\!\?]+)\.(jpg|png|gif)$/"; for ($i = 0; $i < count($links); $i++) { if (preg_match($link_pattern,$links[$i])) { $query .= "('". $albumID ."',?),"; } else { unset($links[$i]); } } // Salva no BD $db = new PDO('mysql:host='.$db_host.';dbname='.$db_database,$db_user,$db_pass); $stm = $db->prepare(rtrim($query,",")); if ($stm->execute($links)) { $_SESSION['signlink'] = "Link: <b>".$url_base.$albumID.".jpg</b>"; $_SESSION['type'] = 'success'; } else { $_SESSION['signlink'] = "Não foi possível gerar o link. Certifique-se de seguir as instruções acima (it's not that hard)."; $_SESSION['type'] = 'danger'; } } } ?> 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: // Lida com o envio de um novo "album" de assinaturas o banco de dados if (isset($_POST['links'])) { $links = explode(";",$_POST['links']); $albumID = substr(hash('sha512',date('d/m/Y h:i:s')),0,6); $query = "INSERT INTO gerador(id_album,link) VALUES "; if (!empty($links)) { // Checa os links $link_pattern = "/^https?\:\/\/([a-zA-Z0-9\.\/_\-\!\?]+)\.(jpg|png|gif)$/"; for ($i = 0; $i < count($links); $i++) { if (preg_match($link_pattern,$links[$i])) { $query .= "('". $albumID ."',?),"; } else { unset($links[$i]); } } // Salva no BD $db = new PDO('mysql:host='.$db_host.';dbname='.$db_database,$db_user,$db_pass); $stm = $db->prepare(rtrim($query,",")); if ($stm->execute($links)) { $_SESSION['signlink'] = "Link: <b>".$url_base.$albumID.".jpg</b>"; $_SESSION['type'] = 'success'; } else { $_SESSION['signlink'] = "Não foi possível gerar o link. Certifique-se de seguir as instruções acima (it's not that hard)."; $_SESSION['type'] = 'danger'; } } } 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: /^https?\:\/\/([a-zA-Z0-9\.\/_\-\!\?]+)\.(jpg|png|gif)$/ 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: $query .= "('". $albumID ."',?),"; 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): INSERT INTO gerador(id_album,link) VALUES ('a1j3de',?), ('a1j3de',?), ('a1j3de',?), 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? // Lida com requisições de exibição da imagem if (isset($_GET['request'])) { $db = new PDO('mysql:host='.$db_host.';dbname='.$db_database,$db_user,$db_pass); $stm = $db->prepare('SELECT link FROM gerador WHERE id_album = ?'); if ($stm->execute(array($_GET['request']))) { $resultado = $stm->fetchAll(); $show = rand(0,(count($resultado)-1)); // Maneira 1, mais eficiente pelo o baixo custo de processamento header('Location: '. $resultado[$show][0]); // Maneira 2, custa mais, já que tem pegar os resources do outro website //header('Content-type:image/'.substr($resultado[$show][0],-3)); //echo file_get_contents($resultado[$show][0]); exit; } } 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: [Hidden Content]?request=a1j3de Daí você pode perguntar: WTF, como assim? Que eu saiba o meu link está vindo assim: [Hidden Content]a1j3de.jpg 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: RewriteRule ^(.+)\.(jpg|png|gif)$ index.php?request=$1 [QSA,L] 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: $resultado[$show][0] 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: [Hidden Content] Scan: [Hidden Content]