Olá a todos! Hoje começaremos a colocar a "mão na massa". O sistema será realizado com base na linguagem PHP e no banco de dados MySQL. Ensinarei os passos para a realização do nosso projeto, e dexarei o design por conta de vocês. Então, vamos lá!
Nosso objetivo: publicar foto com título, legenda e a data da inserção. Não iremos fazer upload das fotos, mas iremos criá-las a partir da foto enviada (vocês entenderão).
Iniciaremos conectando-se ao banco de dados (bd). Para tal, siga os seguintes passos: Painel Application > Databases ou Ctrl + Shift + F10 e clique no botão de mais (+) e em seguinda clique na opção: MySQL connection; como mostrado na imagem abaixo:
Após, teremos o painel MySQL Connection, configure-o como exibido no exemplo abaixo:
Explicando:
Connection name: nome da conexão (connSisFotos);
MySQL server: localhost;
User name: nome do usuário do banco de dados (o meu está padrão, root);
Password: também está padrão, sendo vazia;
Database: nome do banco de dados, em que você criou as tabelas que serão utilizadas.
Após a conexão ter sido realizada, teremos a relação das tabelas do banco de dados no painel Databases, veja:
Agora abra a página: insere_foto.php da área administrativa, ou crie uma. Com a página aberta/criada, na aba Application, escolha a opção: Record Insertion Form Wizard. Essa opção, cria o formulário e o código PHP responsável em cadastrar os dados no bd. Veja a localização da opção na imagem abaixo:
Após, teremos o painel: Record Insertion Form; assista a configuração do painel nesta vídeo aula - Configurando o painel: Record Insertion Form.
Você percebeu que o behavior criou o form e os códigos PHP, agora, vamos alterá-lo. As modificações do form são simples, vamos lá.
Primeiro, iremos alterar o primeiro campo, tornando um campo do tipo: file. Para tal, selecione-o e aperte Shift + F5. Veja o exemplo abaixo:
Agora, vamos setar o enctype do form para: multipart/form-data, somente com ele setado que consiguimos realizar uploads ou pegar o nome da imagem. Veja o exemplo novamente:
Para termos essas opções no painel Properties Ctrl + F3, precisamos apenas selecionar a tag form no Tag selector, observe:
Bom, alterado o form, vamos alterar o código PHP gerado pelo Dreamweaver, observe o original:
Agora, veja o código alterado:
Vamos compreender as alterações:
1º - Criamos duas variáveis: $foto e fotoTmp; a primeira pega o nome da imagem e a segunda o nome temporário, o primeiro nome irá para o banco de dados, sendo a referência da imagem no diretório que armazenará as fotos; o segundo será utilizado pela função responsável em gerar a imagem (como dito anteriromente, não iremos trabalhar com upload).
2º - Acrescentamos o campo: foto_data.
3º - Alteramos o primeiro: %s por: "$foto". Dessa forma, o campo - foto_foto terá o valor da variável ($foto). Variável esta, que pega o nome da imagem enviada.
4º - Acrescentamos o comando NOW(); responsável em inserir a data automaticamente neste formato: 0000-00-00 00:00:00, visto que o campo foto_data na tabela foi setado como: datetime.
Nota: Observe que o campo foto_data é o quarto da lista e o camando NOW() também, ou seja, ele (comando) faz referência ao campo (foto_data).
5º - Função que cria uma imagem apartir de uma imagem jpg ou jpeg.
6º - Estamos chamando a função (geraImg), responsável em gerar a imagem. Ao chamarmos a função, estamos dizendo a ela quatro "coisas", sendo elas:
A foto que estamos enviando - $fotoTmp;
A largura máxima que queremos - 640;
A altura máxima que queremoes - 480;
O nome que daremos a imagem - "../fotos/".$foto;
Nesse último, estamos informando além do nome da imagem, o diretório em que ela será armazenada, se isto não for feito, a imagem será criada no diretório em que a página se encontra.
Veja o resultado no banco de dados:
Agora, o resultado no diretório:
Veja, a página como ficou: insere_foto.php.
125 Comentários
Qual a sua opinião?