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

  2. By kaue

  3. By Andrenet

  4. By Edivan

  5. By Antonio

  6. By Antonio

  7. By Junior

  8. By João Paulo de Borba

  9. By junior

  10. By junior

  11. By junior

  12. By junior

  13. By junior

  14. By Joao

  15. By Joao

  16. By Francilene

  17. By Antonio Jáles

  18. By Isarel

  19. By Horácio Júnior

  20. By Cunha

  21. By Marcelo Pessoa

  22. By Marcelo Pessoa

  23. By Marcelo Pessoa

  24. By Clécio

  25. By Fabio Chiara

  26. By Marcelo

  27. By andré

  28. By Israel

  29. By augusto

  30. By Cristiano

    • By Cristiano

  31. By Cristiano

      • By Cristiano

  32. By triplox

  33. By triplox

  34. By Henrique

  35. By Eleanor

  36. By Eleanor

  37. By Eleanor

      • By Eleanor

          • By Eleanor

  38. By wesley

  39. By rodrigo sousa

  40. By Rodrigo sousa

  41. By kleber

  42. By Andrew

  43. By clovis

      • By CLOVIS

          • By CLOVIS

          • By Clovis

      • By CLOVIS

  44. By Junior Galdino

  45. By Junior Galdino

  46. By Junior Galdino

  47. By Junior Galdino

  48. By Junior Galdino

  49. By Junior Galdino

  50. By Junior Galdino

  51. By Junior Galdino

  52. By DANILA

  53. By Danila

  54. By Danila

      • By Danila

  55. By Junior Galdino

  56. By Leonardo

  57. By Nelys

  58. By Nelys

      • By Nelys

          • By Nelys

  59. By Nelys

  60. By Tiago

      • By Tiago

  61. By Nati Kronbauer

  62. By Eidi

      • By Eidi

  63. By Eidi

  64. By astro

  65. By tulii

  66. By bruno

  67. By Claudia

  68. By alberto

  69. By Alberto

  70. By Luis Aglicio

  71. By Luis Aglicio

  72. By Luis Aglicio

  73. By Luis Aglicio

  74. By Luis Aglicio

  75. By Leonardo

  76. By joao

  77. By SP Artes Gráficas

  78. By Gabriel

  79. By Antonio

  80. By Jonathan

      • By Reynaldo

  81. By Milton

  82. By Diogo

  83. By Juarez Filho

  84. By Ricardo

  85. By Ricardo

      • By Ricardo

  86. By Leonardo

      • By Leonardo

  87. By Leonardo

  88. By julio

      • By julio

  89. By julio

  90. By julio

  91. By Leo

  92. By julio

  93. By julio

  94. By Ricardo

      • By Elquis

  95. By Alberto

    • By Alberto

      • By Alberto

  96. By Clebson Santos

  97. By Alberto

  98. By Flavio

  99. By Mizael

  100. By Hugo Cordeiro

  101. By jesleyNonato

  102. By Rafael de paula

  103. By paulo

  104. By Rogério

  105. By colinasagendas

  106. By Gabriel

  107. By Gabriel

  108. By Caio

      • By Caio

  109. By Caio

      • By Caio

  110. By Caio

  111. By Caio

  112. By Caio

  113. By Daubert

      • By daubert

  114. By Hner

    • By Hner

  115. By conrado

  116. By felipe

  117. By Everton

    • By Rafael Clares

  118. By rick

  119. By Samuel Dutra

  120. By Robert

  121. By Claudio

  122. By Alan Bráulio

  123. By Tameramer Oliveira

  124. By Sander

%d blogueiros gostam disto: