Galeria Lightbox + Upload de fotos + Thumb + Painel Admin

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

[Adicionada a funcionalidade para deletar as fotos sem uso de BD]

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=”stylesheethref=”css/lightbox.csstype=”text/cssmedia=”screen” />
<link rel=”stylesheet href=”css/galeria.csstype=”text/css” media=”screen” />

<!– incluindo os arquivos da biblioteca LightBox–>
<script type=”text/javascriptsrc=”js/prototype.js“></script>
<script type=”text/javascriptsrc=”js/scriptaculous.js?load=effects“></script>
<script type=”text/javascriptsrc=”js/lightbox.js“></script>

</head>
<body>
<p>&nbsp;</p>
<p><a href=”enviar.php”>Enviar fotos para Galeria</a></p>
<p>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</p>
<!– 3 Incluindo o programa que faz o upload das imagens –>
<? include ‘upload.php‘; ?>
<p>&nbsp;</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.

Se desejar utilizar banco de dados veja : http://clares.com.br/2009/09/28/galeria-de-fotos-admin-lightbox-php-postgresql/

Não deixe de ver : http://clares.com.br/2010/11/04/galeria-de-fotos-lightbox-php/


Rafael Clares,


Comments

  1. By kaue

    Responder

    • Responder

  2. By kaue

    Responder

  3. By Andrenet

    Responder

  4. By Edivan

    Responder

    • Responder

  5. By Antonio

    Responder

    • Responder

  6. By Antonio

    Responder

    • Responder

  7. By Junior

    Responder

  8. By João Paulo de Borba

    Responder

    • Responder

  9. By junior

    Responder

    • Responder

  10. By junior

    Responder

    • Responder

  11. By junior

    Responder

    • Responder

  12. By junior

    Responder

    • Responder

  13. By junior

    Responder

    • Responder

  14. By Joao

    Responder

  15. By Joao

    Responder

  16. Responder

    • Responder

  17. By Francilene

    Responder

    • Responder

  18. By Antonio Jáles

    Responder

    • Responder

  19. By Isarel

    Responder

    • Responder

  20. By Horácio Júnior

    Responder

    • Responder

    • Responder

    • Responder

  21. By Cunha

    Responder

  22. By Marcelo Pessoa

    Responder

  23. By Marcelo Pessoa

    Responder

    • Responder

  24. By Marcelo Pessoa

    Responder

    • Responder

  25. By Clécio

    Responder

    • Responder

  26. By Fabio Chiara

    Responder

  27. By Marcelo

    Responder

    • Responder

  28. By andré

    Responder

    • Responder

  29. By Israel

    Responder

    • Responder

  30. By augusto

    Responder

    • Responder

  31. By Cristiano

    Responder

    • By Cristiano

      Responder

  32. By Cristiano

    Responder

    • Responder

      • By Cristiano

        Responder

  33. Responder

  34. By triplox

    Responder

  35. By Henrique

    Responder

    • Responder

  36. By Eleanor

    Responder

    • Responder

    • Responder

  37. By Eleanor

    Responder

  38. By Eleanor

    Responder

    • Responder

      • By Eleanor

        Responder

        • Responder

          • By Eleanor

  39. By wesley

    Responder

    • Responder

  40. By rodrigo sousa

    Responder

    • Responder

  41. By Rodrigo sousa

    Responder

  42. By kleber

    Responder

  43. By Andrew

    Responder

  44. By clovis

    Responder

    • Responder

      • By CLOVIS

        Responder

        • Responder

          • By CLOVIS

          • By Clovis

      • By CLOVIS

        Responder

  45. By Junior Galdino

    Responder

    • Responder

  46. By Junior Galdino

    Responder

  47. By Junior Galdino

    Responder

  48. By Junior Galdino

    Responder

  49. By Junior Galdino

    Responder

    • Responder

  50. By Junior Galdino

    Responder

  51. By Junior Galdino

    Responder

  52. By Junior Galdino

    Responder

    • Responder

  53. By DANILA

    Responder

    • Responder

      • Responder

  54. By Danila

    Responder

  55. By Danila

    Responder

    • Responder

      • By Danila

        Responder

        • Responder

  56. By Junior Galdino

    Responder

    • Responder

  57. Responder

    • Responder

  58. By Leonardo

    Responder

    • Responder

  59. Responder

    • Responder

  60. Responder

  61. Responder

  62. By Nelys

    Responder

  63. By Nelys

    Responder

    • Responder

      • By Nelys

        Responder

        • Responder

          • By Nelys

  64. By Nelys

    Responder

  65. By Tiago

    Responder

    • Responder

      • By Tiago

        Responder

  66. By Nati Kronbauer

    Responder

  67. By Eidi

    Responder

    • Responder

      • By Eidi

        Responder

  68. By Eidi

    Responder

  69. By astro

    Responder

  70. By tulii

    Responder

  71. By bruno

    Responder

    • Responder

  72. By Claudia

    Responder

  73. By alberto

    Responder

    • Responder

  74. By Alberto

    Responder

  75. By Luis Aglicio

    Responder

    • Responder

  76. By Luis Aglicio

    Responder

    • Responder

  77. By Luis Aglicio

    Responder

  78. By Luis Aglicio

    Responder

    • Responder

  79. By Luis Aglicio

    Responder

  80. By Leonardo

    Responder

    • Responder

  81. By joao

    Responder

    • Responder

  82. Responder

    • Responder

  83. By SP Artes Gráficas

    Responder

    • Responder

  84. By Gabriel

    Responder

  85. Responder

  86. By Jonathan

    Responder

    • Responder

      • By Reynaldo

        Responder

        • Responder

  87. By Milton

    Responder

    • Responder

  88. By Diogo

    Responder

    • Responder

  89. Responder

    • Responder

  90. By Juarez Filho

    Responder

    • Responder

  91. Responder

    • Responder

  92. Responder

    • Responder

      • Responder

  93. By Leonardo

    Responder

    • Responder

      • By Leonardo

        Responder

        • Responder

  94. By Leonardo

    Responder

  95. By julio

    Responder

    • Responder

      • By julio

        Responder

  96. By julio

    Responder

  97. By julio

    Responder

    • Responder

  98. By Leo

    Responder

  99. By julio

    Responder

  100. By julio

    Responder

  101. Responder

  102. Responder

    • Responder

      • By Elquis

        Responder

  103. By Alberto

    Responder

    • By Alberto

      Responder

      • Responder

      • By Alberto

        Responder

        • Responder

  104. By Clebson Santos

    Responder

  105. By Alberto

    Responder

    • Responder

  106. Responder

  107. By Flavio

    Responder

    • Responder

  108. Responder

  109. Responder

    • Responder

  110. By Mizael

    Responder

    • Responder

  111. By Hugo Cordeiro

    Responder

    • Responder

  112. By jesleyNonato

    Responder

    • Responder

  113. By Rafael de paula

    Responder

  114. By paulo

    Responder

  115. By Rogério

    Responder

    • Responder

  116. By colinasagendas

    Responder

  117. By Gabriel

    Responder

    • Responder

  118. By Gabriel

    Responder

    • Responder

  119. By Caio

    Responder

    • Responder

      • By Caio

        Responder

        • Responder

  120. By Caio

    Responder

    • Responder

  121. By Caio

    Responder

  122. By Caio

    Responder

  123. By Caio

    Responder

    • Responder

  124. By Daubert

    Responder

    • Responder

      • By daubert

        Responder

  125. By Hner

    Responder

    • By Hner

      Responder

    • Responder

  126. By conrado

    Responder

  127. By felipe

    Responder

  128. By Everton

    Responder

    • By Rafael Clares

      Responder

  129. By rick

    Responder

  130. By Samuel Dutra

    Responder

  131. Responder

    • Responder

      • Responder

        • Responder

    • Responder

  132. By Robert

    Responder

  133. Responder

    • Responder

  134. By Claudio

    Responder

  135. By Alan Bráulio

    Responder

  136. By Tameramer Oliveira

    Responder

  137. By Sander

    Responder

Perguntas duplicadas ou cujo a resposta esteja nos comentários serão ignoradas.
Comentários com códigos serão ignorados(para isso, use o pastebin.com e informe aqui o link).
Faça sua pergunta e "aguarde" ser aprovada para aparecer no blog.
Aguarde sua resposta, ela não é em tempo real, tenha paciência!

Deixe seu comentário