Galeria de fotos com miniaturas dinâmicas e comentários

Introdução

Salve galera! Hoje começaremos a desenvolver uma galeria de fotos simples com comentários (a estrutura é parecida com a de um fotolog) e que gere as miniaturas das fotos automaticamente. Vou dividir em partes a matéria para ficar mais fácil a compreensão. Os códigos são feitos “na unha”, ou seja, vamos escrever os códigos. Isso é importante para realmente entender o PHP.

Para desenvolver esta galeria utilizo o PHP em conjunto com MySQL. Nessa coluna também estou explicando algumas funções muito úteis do PHP. Bem útil para quem está começando a desenvolver sistemas usando o PHP.

Pré-Requisitos

Conhecimentos básicos de PHP e MySQL.

Conteúdo

Antes de tudo, vamos criar o banco de dados. Eu vou chamá-lo de mxgaleria. Para isso, vamos executar o seguinte comando SQL:

CREATE DATABASE ‘mxgaleria’

Com nosso banco de dados criado, é hora de partir para criação das tabelas. O objetivo dessa galeria é que possamos postar fotos e os usuários possam comentá-las. Pensando dessa forma, teremos duas tabelas. Uma tabela para armazenar os dados das fotos e a outra para armazenar os comentários. Nessa coluna eu não irei criar uma área para login, tendo em vista que já temos muitas colunas falando sobre o assunto. Dessa maneira eu não usarei uma tabela para armazenar os usuários. Vamos criar as tabelas:

CREATE TABLE ‘mxcomentarios’ (
‘comentario_id’ int(11) NOT NULL auto_increment,
‘comentario_nome’ varchar(100) NOT NULL,
‘comentario_texto’ longtext NOT NULL,
‘comentario_foto’ int(11) NOT NULL default ‘0′,
PRIMARY KEY (‘comentario_id’)
); CREATE TABLE ‘mxfotos’ (
‘foto_id’ int(11) NOT NULL auto_increment,
‘foto_titulo’ varchar(100) NOT NULL,
‘foto_desc’ longtext NOT NULL,
‘foto_caminho’ varchar(255) NOT NULL,
‘foto_thumb’ varchar(255) NOT NULL,
PRIMARY KEY (‘foto_id’)
)

Vamos às explicações. Tabela mxcomentarios:

comentario_id: campo com o código para controle dos comentários. comentario_nome: campo que armazena o nome de quem comentou.
Limitei o tamanho do campo para 100 caracteres.

comentario_texto: campo que guarda o texto do comentário. Note que o tipo do campo é longtext. Usei esse tipo porque permite armazenar até 4.294.967.295 caracteres. Você pode ajustar para o tipo que achar melhor.

comentario_foto: campo com o código da foto que está recebendo o comentário.

Agora, vamos à tabela mxfotos:

foto_id: campo com o código para controle das fotos. foto_titulo: campo que guarda o titulo da foto.

foto_desc: campo que armazena a descrição da foto. Assim como o comentário das fotos, o tipo de dado é longtext.

foto_caminho: campo que guarda o caminho para a foto. No banco de dados iremos guardar apenas o caminho da foto para exibi-lá.

foto_thumb: campo que guarda o caminho para a miniatura da foto que o sistema irá gerar automaticamente.

Pronto, nosso banco de dados está criado e entendido. O próximo passo é configurar nosso site no Dreamweaver. É importante você ter o site configurado pois fica mais fácil de testar nossos códigos. Vou passar bem rápido por esta parte. Para estudar mais a fundo o Mange Sites, veja os links abaixo:

Desvendando o Manage Sites
Desvendando o Mange Sites – Parte 2

Desvendando o Mange Sites – Parte 3

1 – Primeiro passo é definir o nome do site. Eu escolhi mxGaleria, escolha um nome fácil para identificar facilmente depois. 2 – Coloque o diretório raiz do site, onde estão os arquivos.

3 – Defina aqui o modelo do servidor. Nós estamos usando PHP e MySQL. 4 – Aqui escolhemos o tipo de acesso. Como o servidor está rodando na sua máquina, o acesso é Local

5 – Escolha o caminho do diretório onde estão os arquivos.

6 – E por fim definimos a URL. É importante para quando nós testarmos o site.

Pronto, com tudo definido, finalmente, vamos começar a programar. Agora começa a diversão. Vamos abrir a conexão com o banco. Nós criaremos um arquivo exclusivo para a conexão que será incluído nas outras páginas. Mas por que isso? Vamos imaginar que estamos trabalhando com um projeto grande e que ele tem cerca de 300 páginas (!!). Nós abrimos uma conexão em cada página. Um belo dia o servidor é trocado. Imagine trocar o nome do servidor, o login e a senha em 300 páginas. Bem mais fácil criar 1 página e, quando ela for atualizada, todas as demais também serão.

Crie um novo arquivo(Ctrl + N), escolha Dynamic Page > PHP. Vá para o modo de Código e limpe todo o código, apague todo o HTML. Agora vamos ao código:

<?php $host = “localhost”;
$user = “root”;
$pass = “”;
$db = “mxgaleria”;

mysql_connect($host,$user,$pass) or die(“Erro ao conectar”);
mysql_select_db($db) or die(“Erro ao selecionar o BD”);

?>

Salve essa página. Eu vou salvá-la com o nome de conn.php.

Nessa coluna eu não vou entrar em detalhes sobre o HTML da página. Então vou disponibilizar para download as páginas. Clique aqui para baixar as páginas.

Na próxima coluna iremos trabalhar a área de gerenciamento das fotos.

Considerações finais

Nessa colunas preparamos o ambiente de trabalho no Dreamweaver e criamos o banco de dados que usaremos e a conexão com o mesmo. Na próxima coluna trabalharemos a área de gerenciamento das fotos. Vamos postar a foto e criar sua miniatura dinamicamente.

Até a próxima!

Autor: Leonardo Vallim – Colunista MXSTUDIO

Qualquer dúvida acesse o nosso fórum .