Tarde da noite e aqui estou eu, pronto para escrever o primeiro tutorial do Geekando, que também é o meu primeiro tutorial.

Historinha: um tempo atrás eu precisei criar um sistema de upload de imagens, para utilizá-lo como parte do sistema do CMS de um site que estou desenvolvendo. Claro, dei umas pesquisadas sobre o assunto em diversos fóruns pela internet, e acabei percebendo que existe muita gente atrás de aprender algo do tipo. Foi justamente nessa pequena retrospectiva do meu cérebro que decidi o tema do tutorial de hoje.

Então, como o próprio título já deixa bem óbvio, tentarei passar a ideia e os passos de criação de um sistema de upload de imagens. Logicamente, simplificarei o sistema que eu fiz, afim de facilitar o aprendizado. Estarei também dividindo o tutorial em algumas partes (acho que em duas), tendo em vista que ele ficará bem grande, levando em consideração que tentarei detalhar bem as explicações (sem perder a objetividade, é claro).

Vamos lá!

O nosso sistema será escrito em PHP e utilizará um banco de dados, que neste caso, será o MySQL. Por tanto, é necessário (ou aconselhável) já ter conhecimento em PHP e MySQL, para melhor aproveitar este tutorial.

Muito bem, o primeiro passo é pensar em como funcionaria o sistema.

Beleza, então como ele funcionaria?

Simples, eu teria um formulário que enviaria as fotos para algum lugar.

Legal, mas para onde iriam as fotos?

As fotos seriam enviadas para diretórios criados em caminhos específicos.

Até ai tudo bem, mas então, para que serve o banco de dados?

O banco de dados serve para guardar os nomes e os caminhos completos de cada foto upada. Isso facilitaria o processo de recuperação das fotos, ou seja, facilitaria o processo de exibição delas em um outro ponto do sistema.

Tudo certo, vamos criar!

1 - Criamos um banco de dados com o nome: up-fotos. Siga a instrução abaixo:

CREATE DATABASE `up-fotos`

2 - Criamos uma tabela dentro do banco de dados criado anteriormente com a seguinte estrutura:

CREATE TABLE fotos (

id_foto int(5) auto_increment primary key,

nome_foto varchar(20) NOT NULL,

caminho_foto text NOT NULL

)

3 - Criamos o script que ficará responsável por fazer a conexão entre o sistema e o banco de dados:

<?php

$conexao = mysql_connect(“localhost”, “root”, “”);

mysql_select_db(“up-fotos”)

?>

“Lembre-se de configurar a conexão de forma correta. Esta configuração é a padrão para ambiente local. Salve como conexao.php”

4 - Criamos o formulário responsável por informar os caminhos locais das fotos (no caso do nosso exemplo, estaremos enviando apenas uma foto por vez), e por informar o script que processará o upload:

<form methoad=”post” action=”upload.php” enctype=”multipart/form-data”>

<input type=”hidden” name=”acao” value=”upar_foto” />

FOTO: <input type=”file” name=”foto” /><br />

PASTA: <input type=”text” name=”pasta” /><br />

<input type=”submit” value=”enviar” />

</form>

“Perceba que declaramos o metódo (methoad) que o formulário passará as informações adiante como POST, e setamos action com o script que tratará as informações (upload.php).

É notório também a criação de um campo do tipo hidden, com um nome e um valor também definidos. Este campo passará de forma escondida uma informação que será utilizada em upload.php, como veremos mais adiante.

Então, criamos um campo do tipo file e setamos seu nome como foto, e um campo do tipo text, setando seu nome como pasta. Atente que a declaração destes nomes é extremamente importante, pois em upload.php estes mesmos campos serão tratados como variáveis, assim como o nome e o valor do campo hidden, analisado anteriormente.”

5 - Certo, vamos a criação do nosso script:

<?php

require “conexao.php”;

$acao = $_POST[‘acao’];

if ($acao==”upar_foto”) {

$foto = $_FILES[‘foto’][‘name’];

$tmp_foto = $_FILES[‘tmp_foto’][‘tmp_name’];

$nome = “foto”;

$pasta = $_POST[‘pasta’];

$caminho = mkdir($pasta.$nome.”.jpeg”);

if (!file_exists($caminho)){

move_uploaded_file($tmp_foto, $caminho);

$sql = “INSERT INTO fotos (nome_foto, caminho_foto) VALUES (‘$nome’, ‘$caminho’)”;

$query = mysql_query($sql);

} else {

echo “Impossível upar a foto, o caminho já existe!”;

}

}

mysql_close($conexao);

?>

“Bom, acho que agora já ficou bem simples de enteder esta primeira etapa do tutorial, mas vamos as explicações.

Perceba que declaramos uma variável com o nome acao. Esta variável é nada mais que o campo hidden do formulário, como fica óbvio em $_POST[‘acao’].

Depois, testamos essa mesma variável com o seu próprio valor, que também foi definido no formulário. Atente que a condição sempre será verdadeira.

Em seguida, criamos algumas variáveis. A primeira receberá a foto do formulário, assim como a segunda. Porém, a segunda criará apenas um arquivo temporário, necessário para mover a foto.

Criamos também a variável nome e a variável pasta. A primeira definirá um padrão de nome para as fotos upadas, e a segunda, capturará o nome da pasta para qual a foto deve ir, sendo este nome definido pelo usuário no formulário.

Por fim, na criação de variáveis, temos a variável caminho. Esta variável fica responsável por criar (através da função mkdir) e informar o caminho completo da foto, sendo este dado de extrema importância para a recuperação da imagem, pois esta informação que irá para o banco de dados. Perceba também, que eu concatenei um “.jpeg”, que servirá para renderizar a imagem com um formato válido. Mas isso é coisa para se ver mais adiante.

Então, testamos se o caminho não existe. Se ele não existir, é porque o caminho será criado e a fotos movida, através da função move_uploaded_files, assim como as informações serão adicionadas no banco de dados (observe isso em $sql e $query). Ou, caso o caminho já exista, uma mensagem de erro é exibida.”

Bom pessoal, por hoje é só!

Acho que este tutorial ficou um pouco grande.

No próximo tutorial veremos como recuperar estas imagens, creio que esta parte seja bem mais fácil.

Espero ter ensinado algo.

Em caso de dúvidas, só comentar. Vou tentar responder a todas.

Até a próxima!

Por: @daniel_alfilho