Album de Fotos com Php +Mysql

Padrão

ola hoje iremos aprender a fazer uma galeria de fotos ou (Album de Fotos) com php e mysql com paginação e efeitos lightbox javascript bom vamos la mãos a obra.

com ordenação das fotos em bloco.

Demonstração online

Download  do Codigo

album

Primeiro criaremos o banco de dados

CREATE TABLE `galeria` (

`id` int(11) NOT NULL auto_increment,

`imagem` varchar(255) default NULL,

`legenda` varchar(255) default NULL,

PRIMARY KEY  (`id`)

)

agora Criaremos a pagina conecta.php

<?php
/* by ozorio*/

class conexao {
    public $host="localhost";
    public $user="root";
    public $pass="123";
    public $database="galeria";
    public $connect="";
    public $select="";

function __construct() {
    $this->connect=mysql_connect($this->host,$this->user,$this->pass) or die (mysql_error());
    $this->select=mysql_select_db($this->database,$this->connect) or die (mysql_error());

    }
    }
    $conexao=new conexao();

?>

Agora Criaremos a Pagina index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Álbum de foto</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<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>
<div align="center" style="background:#eee;"><h1><a href="index.php">Galeria de Fotos em Php + Mysql</a></h1></div>
<table id="tblimg" align="center" border='1'>
<?php
/* by ozorio */
require_once 'conecta.php';
$sql_1 = mysql_query("SELECT * FROM galeria");
$trg = mysql_num_rows($sql_1);
?>
<tbody>

<tr>
<td align="center" bgcolor="#CCCCCC">Galeria de Fotos Total de <?php echo "$trg"; ?> Fotos No Album </td>
</tr>

<tr>
    <td align="center">

<?php


$pag = $_GET['pagina'];
if(isset($pag)){
$pag = $pag;
}else{
$pag = 1;
}


$quantidade = 5;
$inicio = ($pag*$quantidade) - $quantidade;

echo("<div class='imgalign'>");

$sql_2 = mysql_query("SELECT * FROM galeria ORDER BY id LIMIT $inicio, $quantidade");

@$num_img = mysql_num_rows($sql_2);
if ($num_img=='') {
echo("<img src='images/sem_foto.png'/><br /> !!Sem Fotos Ainda!! ");

 }
else{
while ($array_galeria = mysql_fetch_array($sql_2)) {
echo"<div class='galeria-imagens'> ";
$id=$array_galeria[id];
$img=$array_galeria[imagem];
$lg=$array_galeria[legenda];
$legenda = ucfirst($lg);
echo "<a  href='/galeria/fotos/".$img."' rel='lightbox[roadtrip]'title='$legenda'>
<img class='lk' style='position:relative;left:2px;' src='/galeria/fotos/".$img."' width='100'height='100' alt='$legenda' title='$legenda'/></a><br>";
echo"<div class='legenda'>";
echo "$legenda<br>";
echo"</div>";
echo"</div>";
}
}
echo("</div>");

?>

</td>
</tr>

<tr>
<td align="center">

<?php



$sql_3 = mysql_query("SELECT * FROM galeria");
$total_registros = mysql_num_rows($sql_3);

$paginas = ceil($total_registros/$quantidade);
$links = 1;


echo "<br />";        echo "<br />";
echo "<a href='?pagina=1'>primeira p&aacute;gina </a>&nbsp;&nbsp;";

for($i = $pag-$links; $i <= $pag-1; $i++){
if($i<=0){
}else{
echo "&nbsp;&nbsp;<a href='?pagina=".$i."'>".$i."</a>&nbsp;&nbsp;";
}
}

echo "<a href=#>$pag</a>";

for($i = $pag+1; $i <= $pag+$links; $i++){
if($i>$paginas){
}else{
echo "&nbsp;&nbsp;<a href='?pagina=".$i."'>".$i."</a>&nbsp;&nbsp;";
}
}

echo "&nbsp;&nbsp;<a href='?pagina=".$paginas."'>ultima p&aacute;gina </a>&nbsp;&nbsp;";



?>

</td>
</tr>

</tbody>

</table>
<br>
<div align="center"><a href="up_img.php">>>Cadastrar Imagens<<</a></div>
<br>
<div align="center" style="background:#eee; color:#666;">by:ozoriotsn-<a href="http://adaptblog.adaptinsite.com">Adaptblog</div>
</body>
</html>

agora criaremos a pagina de upload up_img.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1 ">
<meta name="author"             content="ozoriotsn"/>
<meta name="classification"     content="Webmaster"/>
<meta name="reply-to"           content="ozoriotsn@hotmail.com"/>
<meta name="title"              content="upload php"/>
<meta name="URL"                content="http://www.adaptinsite.com"/>
<meta name="generator"          content="Netbeans e Aptana studio"/>
<meta name="country"            content="Brazil" />
<meta name="language"           content="pt-br"/>

<title>Upload Foto</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
</head>
<body>
<center>
<h2>Upload Fotos</h2>
<form name="up" action="" method="POST" enctype="multipart/form-data">
Imagem:<input type="file" name="arquivo" value="" />
Legenda:<input type="text" name="legenda" value="" />
<input type="submit" name="submit" value="submeter" />
</form>


<?php
/* by ozorio*/
if (isset ($_POST["submit"])) {
//chmod ("fotos", 0777);
class upload {
// atributos
var $arquivo;
var $arquivo_nome;
var $arquivo_size;
var $limite="204800";// ou 200kb x 1024b =204800k
var $arquivo_diretorio;
var $mover_arquivo;
var $legenda;
var $insere;
var $ren;
var $rand1;
var $rand2;
var $rand3;
var $md5;

function envia() {
$this->arquivo=$_FILES["arquivo"];
$this->arquivo_nome=$this->arquivo["name"];
$this->arquivo_size=$this->arquivo["size"];
$this->limite;
$this->legenda=$_POST['legenda'];
$this->ren;
$this->rand1=rand(1,1000000);
$this->rand2=rand(2,20000000);
$this->rand3=rand(3,300000000);
$this->md5=md5($this->rand3);

//verifica se existe algum arquivo selecionado
if($this->arquivo_nome==false){
echo"<script>alert('selecione um arquivo ok]');</script>";
echo"<script>history.back();</script>";
exit();
}

//verifica se existe algum arquivo selecionado
if($this->legenda==false){
echo"<script>alert('insira um nome a sua foto]');</script>";
echo"<script>history.back();</script>";
exit();
}

//verifica tamanho do arquivo
if($this->arquivo_size>$this->limite){
echo"<script>alert('Erro Tamanho do arquivo muito grande tamanho maximo permitido =>[200kb]');</script>";
echo"<script>history.back();</script>";
exit();
}

//verifica extenção do arquivo
if(!preg_match("^[a-z A-Z 09 -_]+[.]+[jpg,png,gif]^",$this->arquivo_nome)) {
echo"<script>alert('Erro arquivo nao permitido para upload Ok');</script>";
echo"<script>history.back();</script>";
exit();
}
// geramos um nome unico para a imagem 
$this->ren=$this->rand1.'_'.$this->rand2.'_'.$this->md5.'_'.$this->arquivo_nome;


// upload e registro de pasta
$this->arquivo_diretorio = "fotos/".$this->ren;

// verifica se arquivo ja existe no diretorio
if(file_exists($this->arquivo_diretorio)) {
echo"<script>alert('Erro o Arquivo ja existe em Nosso Servidor');</script>";
echo"<script>history.back();</script>";
exit();
}
else {
// Upload e alocação de arquivo
$this->mover_arquivo = copy($this->arquivo["tmp_name"], $this->arquivo_diretorio);

require_once 'conecta.php';

// incluimos e enviamos para o banco de dados
$this->insere="INSERT INTO galeria (imagem,legenda)VALUES ('$this->ren','$this->legenda')";
mysql_query($this->insere) or die (mysql_error());

echo"<script>alert('Arquivo Enviado com Sucesso');</script>";
echo"<script>window.location.href='up_img.php'</script>";

}
}// função envia fim

}//classe upload fim
$upload=new upload();//objeto instanciado
$upload->envia();
}//bt.submit fim
?>

<div align="center"><a href="index.php">>>Voltar ao Album<<</a></div>
</center>
</body>
</html>

para dar efeito as fotos baixe os arquivos que estao para download ok
abraço espere que gostem ate a proxima

13 Comments

  1. Boa tarde, muito legal seu script.

    Porem tenho uma dúvida e problema,rs, como faria para redimensionar as fotos e colcoar logo na foto, pois se for copiada terá o logo da empresa, gostaria que ao incluir as fotos o sistema redimensionasse para uma altura x e largura y ! Mas tem o fato deste processamento ter que ser feito no cliente, pois eu achei scritp (php – server) que executa todas as funções de redimensionamento e coloca os logo, mas ele faz depois de fazer o upload da imagem, e isso da estouro de tempo do browser..pois o cliente podera enviar 10 fotos e se ele colocar mais de 2 megas da pau..ou até 10 fotos de 1 mega, pq até fazer o upload e processar estoura o tempo de 60 segundos ! Acho que isso tem que ser feito em AJAX ou algo assim não é !? Você teria algo assim ?

    Grato pela atenção
    ELias

  2. cara muito massa adorei o album mais não sei como montar esse album e num sei como se usa o php´ainda eu faço as coisas com html e as vezes faço algo em css MAIS SOUY INICIANTE se vc poder me ajudar5 a colocare esse album em meu site vai ficar da hora o meu site abração mano

  3. Opa, Bom Cara
    Gostei Muito Do Seu Trabalho…
    Obrigado Por Compartilhar…

    Mas Eu Estou Com 1 Probleminha…
    Quando Eu UPO, Uma Imagem Da Certo Não Da Nenhuma Erro…

    Ponhei 777 Na Pas Fotos…

    Importei O BD, Mas Quando Eu Entro No Index.php ** Album **
    Não Aparece as Imagens … Aparece Com Erro!

  4. Ozorio,

    mandei uma dúvida p seu email, mas vou colocar aqui também pois algum usuario pode me ajudar também.

    Tenho a necessidade de criar um album de fotos que mostre uma imagem de 720px X 450px (tamanho da imagem vista) e no rodapé da imagem que tenha por exemplo 5 miniaturas de 140×90, não é complexo pensar em montar isso usando o script carousel para as miniaturas até ai é fácil, a minha dúvida vem em 2 itens, primeiro quero criar uma pagina para a criação do album, outra para upload de imagens, outra para pré-visualização, e uma página para o site, para que os usuários vejam.

    A outra pergunta é, tem como fazer isso dinamicamente? usando PHP, MySQL, plugins e o Dreamweaver CS 4? existe lá a opção repeat region (região repetitiva) será que não dá pra fazer isso?

    Lembrando que seria otima a ideia de colocar uma legenda em cada foto e o nome das imagens poderia ser mudado para nome_do_album_data_numero_da_foto.jpg

    exemplo:

    playcenter_06_2010_01.jpg (ordem de upload)

    Se alguem puder ajudar… fico agradecido…

    Abracos a todos

  5. Muito Bom Kara, foi só alterar o caminho das imagens criar o banco e pimba..
    Muito grato por compartilhar isso conosco, voltarei sempre aqui..Abç

  6. Ola, muito bom esse tuto, mas tenho uma duvida, sou iniciante, e nao tenho muito conhecimento em banco de dados, sei que tenho que criar o banco de dados no Mysql, porem, onde eu coloco o arquivo, e como devo nomealo. Agradeco desde ja,
    Abracos a todos

  7. Cara,

    Sou iniciante, porém vou tentar esse código. Parece que vai ficar legal!

    Eu gostaria também ter um script para album de fotos como é o do Orkut. Vc têm ae???

    Se tiver, me manda por email.

    Obrigado.

    Sandro.

Leave a Reply