Galeria Lightbox + Upload de fotos + Thumb + Painel Admin

Janeiro 16, 2009, 2:20 am
Arquivado em: CSS, PHP | Tags: galeria de fotos, lightbox, miniaturas, php thumb, upload

Galeria de fotos Lightbox + Upload de fotos + Thumb + Painel Admin

Olá,

Resolvi dar uma revisada no Post sobre Lightbox, nessa revisão nós veremos:
- A Galeria de Fotos com Efeito Lightbox
- Fazendo Upload de multíplos arquivos/fotos para o servidor
- Simulação da autênticação de usuário para acesso à àrea admin (upload)

Recursos que utilizaremos:
- A classe thumbnail para gerar miniaturas(thumbs) com o PHP5
- Upload com tratamento de erros e configurações permitidas de envio
- Uso de Sessão no login (apenas simulação, funcional porém sem BD)
- Leitura de diretório para exibir as imagens enviadas na galeria

Tá bom né? Vamu arripiá agora!!!

Vou colocar aqui algumas considerações “iniciais” antes que me enforquem…

- Quanto ao login, não utilizaremos banco de dados para não perdermos o foco, esse login será feito no PHP mesmo apenas para simular a autenticação e utilizarmos a Session do PHP para transitarmos entre a Galeria e o Admin onde o upload é feito, farei isso para dar uma noção bem simples, você não quer um formulário para upload acessível para todos na sua galeria, quer? pois é… Então, por favor não vamos, por enquanto, misturar os assuntos ok… ok

- Outra coisa que irei responder antecipamente… Sim, dá para colocar a descrição nas imagens mas é preciso armazenar essa descrição em algum lugar (um BD seria bom né, mas não neste post eu também durmo sabia?).
Então por enquanto nossa Galeria não terá descrição nas fotos, mas acredite, é tão simples como, colocar descrição em fotos ha-ha.

- Eu separei o código em vários arquivos para que eu possa explicar o que cada trecho faz sem deixar tudo confuso e cheio de coisas umas em cima das outras, então, teremos alguns includes pelo código, não que sejam obrigatório, só achei que seria mais fácil explicar.

- Não irei disponibilizar para download por enquanto. Ah mas pq? Estou acostumado a baixar seus pacotinhos..
Pois é boneco, alguns baixam sem nem ao menos ler o Post depois ficam perguntando coisas que estão no Post, no geral quando não funciona, pq se funciona o brother não dá nem um “alô jack” aqui para os colegas saberem que funcionou… blah blah uhahuaha

Vamo nessa garotada, tomem seus tódinhos …

O arquivo index.php (Exibe a Galeria) – Explicarei os arquivos na ordem em que aparecem nos includes

<?
# Inicia uma Sessao PHP
@session_start();
?>
<html>
<head>
<title>Galeria</title>
<!– O arquivo lightbox.css faz parte da biblioteca e
é necessária sua inclusão–>
<link rel=”stylesheet” href=”css/lightbox.css” type=”text/css” media=”screen” />
<link rel=”stylesheet“ href=”css/galeria.css” type=”text/css” media=”screen” />
<!– incluindo os arquivos da biblioteca LightBox–>
<script type=”text/javascript” src=”js/prototype.js“></script>
<script type=”text/javascript” src=”js/scriptaculous.js?load=effects“></script>
<script type=”text/javascript” src=”js/lightbox.js“></script>
</head>
<body>
<p> </p>
<p><a href=”enviar.php”>Enviar fotos para Galeria</a></p>
<p> </p>
<hr>
<!– Incluindo o programa que le o diretorio de fotos –>
<? include ‘lerdir.php’; ?>
</body>
</html>

Então acima temos um arquivo quase que 100% HTML exceto pelo start da sessão e o include do arquivo lerdir.php no fim da página.

No HTML de forma geral temos as chamadas ao arquivos CSS e Javascript necessário para exbir as fotos com o efeito Lightbox e em PHP temos como principal o include do lerdir.php que será responsável por ler o conteúdo do diretório e recuperar os nomes das imagens contidas nele, o nome das imagens servirá para colocarmos na Tag IMG do HTML exibindo assim as fotos que são enviadas por upload ou simplesmente colocadas dentro do diretório.
Fazendo Upload nós não precisamos nos conectar por FTP para enviar as fotos para o diretório da Galeria.

Como eu falei explicarei os arquivos que vierem surgindo nos includes, nesse momento temos o LerDir.php.

O Arquivo LerDir.php (está sendo chamado no index.php)
<?
# 1 Diretorio que guardara as fotos
$dir = “fotos”;
# Extensoes permitidas na exibicao da galeria
$exts = array(‘jpg‘,’png‘,’jpeg‘,’gif’,’bmp‘);
if (is_dir($dir)) {
if ($d = opendir($dir))
{
while (($file = readdir($d)) !== false)
{
if (filetype($dir.’/’.$file) == ‘file’)
{
# Recupera a extensao do arquivo
$extensao = explode(“.”, $file);
for($i=0; $i<=count($exts)-1; $i++)
{
# Verifica se a extensa é permita (esta no array exts)
if($extensao[1] == $exts[$i])
{
# Criando o link da imagem pra o lightbox e exibindo a thumb
echo “<a href=\”$dir/{$file}\” rel=\”lightbox[roadtrip]\”>“;
echo “<img src=\”thumb.php?img=$dir/{$file}\” class=\”thumb\”></a>“;
}
} # end for
} # filetype
} # while
closedir($d); // encerra a leitura do diretorio
} # end opendir
}
?>

Resumidamente esse arquivo apenas vê o que tem dentro do diretório fotos verifica qual sua extensao e confronta com o array exts que possui ali as extensoes que queremos que sejam exibidas na galeria.
Bem, com isso nós já conseguimos exibir as fotos contidas na pasta fotos, vamos ver como envia-las para lá.
Mas perceba que onde ele insere a imagem (IMG SRC) estamos passando por GET o caminho das fotos para o thumb.php que se encarregará de gerar as miniaturas, além disso estamos colocando os atributos requeridos pelo lightbox que neste caso é o atributo REL , então…

Seguiremos com o arquivo Thumbs.php

<?php
# Inclui a classe thumbnail
include_once(‘thumbnail.inc.php‘);
# Cria nova thumb da imagem recebida por get
$thumb = new Thumbnail($_GET['img']);
# Seta as dimensoes da thumb altura e largura
$thumb->resize(120,120);
# Exibe/retorna a imagem em miniatura
$thumb->show();
exit;
?>

Como podem ver é algo também simples, isso pq a classe thumbnail se encarrega de gerar a miniatura com os parametros passados nos métodos. A classe thumbnail é muito poderosa e cheia de recursos que não abordaremos por agora, entre eles estão marca dagua, reflexo, muita coisa… colocarei o link da documentação ao fim do post.

Bem, então temos o arquivo index.php que chama o lerdir.php encarregado de ler o diretório que por sua vez passa os nomes das fotos contidas no diretório para o arquivo thumb.php que se encarrega de passar os dados para a classe thumbnail responsável por gerar as miniaturas. (leia denovo rs).

Assim, temos as imagens existentes no diretório fotos sendo exibidas na tela, precisamos agora enviar fotos para o diretório, faremos isso através do arquivo enviar.php que possui uma validação sem vergonha mas que servirá bem para vocês implementarem as melhorias que acharem cabíveis.

O Arquivo Enviar.php

<!– incluindo Login de usuario –>
<? include ‘login.php’; ?>
<html>
<head>
<title>Galeria</title>
<link rel=”stylesheet“ href=”css/galeria.css“ type=”text/css“ media=”screen” />
</head>
<body>
<?
# 1 Se a Sessao Logado nao existir exibe o formulario de login
if(!isset($_SESSION['logado']))
{
?>
<form name=”login” method=”post”>
<label>Password:</label>
<input type=”password“ name=”senha“>
<input type=”submit“ value=”login“>
</form>
<p> </p>
<p><a href=”index.php”>Visitar Galeria</a></p>
<?
exit;
# 2 Se a sessao existir exibe o formulario de upload
}else{
?>
<p>
<a href=”index.php“>Visitar Galeria</a> |
<a href=”enviar.php?logout=true“>Logout</a>
</p>
<hr>
<p> </p>
<form action=”" method=”post“ enctype=”multipart/form-data“>
<input type=”file“ name=”fotos[]” /><Br>
<input type=”file“ name=”fotos[]” /><br>
<input type=”file“ name=”fotos[]” /><br>
<input type=”file“ name=”fotos[]” /><br><br>
<input type=”submit“ value=”enviar” />
</form>
<p> </p>
<!– 3 Incluindo o programa que faz o upload das imagens –>
<? include ‘upload.php‘; ?>
<p> </p>
<? }?>
</body>
</html>

Talvez esse seja o arquivo mais feio pq nele possui HTML e PHP misturados o que não é tão legal mas que em alguns casos não dá para escapar, até numerei os comentários para tentar facilitar a explanação, acontece o seguinte, a primeira linha do arquivo como podem ver chama o programa Login.php que é responsável pela validação aqui chamada de sem vergonha por não ser feita através do BD, bem isso já foi comentado, o programa Login.php verifica se existe uma sessão ativa, ou seja, se há a validação que neste caso é apenas uma senha verificada no próprio PHP. Seguindo isso o que acontece é que no programa login é criada a sessão chamada SESSION['logado'] caso a senha enviada esteja correta, então caso a sessão não tenha sido criada é exibido o formulário de login e se houve a validação, ou seja, a senha esteja correta o que é exibido é o formulário de upload das imagens, isso ocorre após o comentário 2 onde é exibido também o link para a galeria e outro para o logout que nada mais é que a distruição da sessão criada fazendo então com que o formulário de login apareça novamente. Ainda nesse raciocinio, caso a sessão exista é feita a chamada do programa Upload.php logo no comentário 3, esse programa irá fazer a validação e upload da imagem, lembrando que para isso deve existir a sessão senão a chamada ao programa upload passa à não existir, ou seja, só há o incluide do Upload.php caso a sessão exista e isso está claro, na linha if(!isset($_SESSION['logado'])) ele diz que se não houver a sessão deve ser exibido o formulário de login e na linha após o ELSE diz senão exiba o formulário de upload e inclua o programa upload.php. Resumidamente o formulário de upload e o programa upload só existe se existir a sessão. Para vermos como ocorre a validação da senha no programa Login.php veremos agora esse arquivo.

O arquivo Login.php

<?
@session_start();
# Simulando Login de usuario
$senha = “1234″;
if(isset($_POST['senha']) && $_POST['senha'] == “$senha”)
{
# Cria uma sessao se a senha estiver correta
$_SESSION['logado'] = true;
}
# Verifica se logout foi solicitato
if(isset($_GET['logout']) && $_GET['logout'] == “true”)
{
# Destroi a sessao
@ session_destroy();
}
?>

O programa acima é chamado no inicio do programa Enviar.php, isso ocorre pq para que seja exibido o formulário de upload deve haver uma sessão validada, caso contrário o que será exibido será o formulário de login. A idéia é que vocês implementem nesse arquivo login.php a validação com BD, basta alterar apenas esse arquivo para que isso ocorra. Explicando o programa login, no inicio é feita a chamada ao session_start o que nos permite criar sessões, em seguida estamos setando a senha que será confrontada com a que vem do formulário de login, ou seja, o valor vindo do formulário deve, neste caso, ser 1234 para que haja a validação. A linha if(isset($_POST['senha']) && $_POST['senha'] == “$senha”) diz se vier dados do campo senha do formulário e esse valor for igual ao valor da variável $senha então é criada a sessão chamada $_SESSION['logado']. Já na linha if(isset($_GET['logout']) && $_GET['logout'] == “true”) ela diz se vier por GET a variável logout e ela tiver seu valor igual à true então destrua a sessão, o que nos fará voltar ao formulário de login. Como esse programa é chamado no inicio do programa Enviar.php a validação tanto do login quanto do logout será a primeira coisa à ocorrer antes que qualquer formulário seja exibido.

Passando da chamada ao programa Login.php que ocorre no inicio do Enviar.php temos ainda no final do mesmo arquivo a chamada ao programa Upload que só será incluso caso a validação exista, mas isso você está careca de saber…

O arquivo Upload.php

Sem dúvida um dos arquivos mais importantes, ele é responsável por tratar as imagens vindas do formulário e tive toda paciência do mundo ao escrever esse programa para que ficasse simples de explicar, porém vale se atentar aos comentários pois eles por si só já explicam o que ocorre durante todos os blocos do programa upload.

vamos ver:

<?php
# Setando as configurações permitidas
$larguraMax = 2000; // largura em pixels
$alturaMax = 2000; // altura em pixels
$tamanhoMax = 1500000; // tamanho em bytes
$formatos = “pjpeg|jpeg|png|gif|bmp|x-png|jpg”; // extensoes permitidas
# Criando as mensagens de erro
$erro[] = “Tamanho do arquivo maior que o permitido [".($tamanhoMax/1000)." kb].”;
$erro[] = “A Largura da imagem maior que o permitido.”;
$erro[] = “A Altura da imagem maior que o permitido.”;
$erro[] = “O Arquivo já existe no diretório.”;
$erro[] = “Formato do arquivo não permitido ou inválido.”;
if(isset($_FILES["fotos"]))
{
foreach ($_FILES["fotos"]["name"] as $key => $name)
{
$arquivo = $_FILES["fotos"];
$dimensoes = getimagesize($arquivo["tmp_name"][$key]);
$nomefoto = strtolower($_FILES["fotos"]["name"][$key]);
#Verificando se a imagem foi enviada
if($arquivo["name"][$key] != “”)
{
# Retirando espacos no nome do arquivo
$espacos = explode(” “,$nomefoto);
if(count($espacos) > 1)
{
$nomefoto = strtolower(ereg_replace(‘ ‘, ‘_’, $nomefoto));
}
# Se o Tamanho do arquivo é permitido
if($arquivo["size"][$key] > $tamanhoMax)
{
# Adiciona o erro no array erros[]
$erros[] = “[$nomefoto] $erro[0]“;
}
# Se a Largura do arquivo é permitida
if($dimensoes[0] > $larguraMax)
{
$erros[] = “[$nomefoto] $erro[1]“;
}
# Se a Altura do arquivo é permitida
if($dimensoes[1] > $alturaMax)
{
$erros[] = “[$nomefoto] $erro[2]“;
}
# Verifica se o arquivo ja existe no diretorio
if(file_exists(“fotos/$nomefoto“))
{
$erros[] = “[$nomefoto] $erro[3]“;
}
# Verifica se extensao é pertida
if(!eregi(“^image\/($formatos)$”, $arquivo["type"][$key]))
{
$erros[] = “[$nomefoto] $erro[4]“.$arquivo["type"][$key];
}
# O array erros nao tiver nenhum indice o upload é permitido/realizado
if(!isset($erros))
{
$imagem_dir = “fotos/”.$nomefoto;
move_uploaded_file($_FILES["fotos"]["tmp_name"][$key], $imagem_dir);
$sucesso[] = “[$nomefoto] upload com sucesso.”;
}
}
}
# Verifica se existem erros no array
if(isset($erros))
{
echo “<ul class=’erro’>”;
foreach($erros as $erro)
{
echo “<p><span>$erro</span></p>”;
}
echo “</ul>”;
}
# Verifica quais imagens tiveram sucesso no upload
if(isset($sucesso))
{
echo “<ul class=’sucesso’>”;
foreach($sucesso as $up)
{
echo “<p><span>$up</span></p>”;
}
echo “</ul>”;
}
}
?>

Importante:
Na linha $imagem_dir = “fotos/”.$nomefoto; estamos dizendo que a imagem deverá ser enviada para o diretório “fotos” portanto é necessário que você dê permissão de gravação à esse diretório caso contrário a imagem não será enviada.

È isso ai, acima o arquivo que irá validar as imagens e fazer o upload. Como podem ver as primeiras linhas possui as mensagens de erro e também as configurações relacionadas à imagem como largura, altura, tamanho e extensão permitda para upload. Esse montão de IF após receber a imagem vinda do formulário irá checar se ela se adequa as configurações permitidas e somente se estiver de acordo é que será enviada ao servido/diretório.

Acredito que implementando pouca coisa como layout e o login por BD já dá para você ter sua galeria, agora você pode colocar aí uma senha complexa e usar para uma galeria que não esteja tão exposta aos maliciosos haha…

Alguns links sobre o que abordamos:

- A Classe Thumbnail
- O Lightbox
- Upload com PHP
- Sessão PHP
- A leitura de diretorios

O link do Exemplo proposto
- veja aqui (A senha do painel admin é 1234)
- Download do fonte aqui

Obs: Limitei o tamanho dos uploads à 10kb no exemplo para que não sobrecarregue meu host, afinal não foi dessa vez que abordamos a exlusão das imagens, não é ? Na próxima revisão teremos o login com BD e a exclusão das fotos via painel admin. Outra coisa, por gentileza a minha idéia é compartilhar com vocês o que tenho visto no meu dia-a-dia então não envie imagens desagradáveis para que eu não tenha que tirar do ar o exemplo deixando as pessoas sérias perderem com isso. Procure ler o Post antes de perguntar.
Muito obrigado e espero ter ajudado.

Ah! Tenho hospedagem de sites à partir de R$4,99 – Sites 100% Uptime + Ótimo Suporte + Velocidade. Dê uma olhada

Rafael Clares,

115 Comentários

115 Comentários até o momento
Deixe um comentário

tem como colocar legenda por upload tb?

ja tentei e nao consegui…

Comentário por kaue Janeiro 23, 2009 @ 1:35 pm

Rafael Clares

Tags

Visitas ao Blog

Tópicos recentes

Comentários

Mais visitados

Páginas

Links

Parceiros

Arquivos