Cadastro com Upload de Imagem

Olá pessoal,

Já tem um tempo que escrevi um tutorial sobre instalação do ambiente de desenvolvimento rails no ubuntu(http://forum.rubyonbr.org/forums/5/topics/3486), parto do pressuposto que todos já tem tudo funfando direitinho(ruby, RoR, mysql). Bem agora vamos meter a mão na massa.

Começando:

Vamos começar abrindo um console do ubuntu:
clica la em cima em Aplicações>Acessórios>Consola
Se alguem descobrir porque o console no ubuntu se chama de consola por favor me diga, ate hoje não entendi =)

Vamos agora criar um novo projeto no rails:

Deste modo criei o meu projeto rails chamado funcionarios, com o banco de dados mysql. Agora vamos criar nossa base de dados no mysql, no console do ubuntu digite:

Com este comando vamos abrir o mysql em linha de comando, no meu caso eu deixo mesmo o nome_do_usuario como root pois sou muito esquecido. =)

Vai aparecer:
Enter password:
Você só digita sua senha e vai ter acesso ao mysql aparecendo como mostrado:Welcome to the MySQL monitor. Commands end with ; or \g.</p> <p>Your MySQL connection id is 14</p> <p>Server version: 5.0.51a-3ubuntu5.1 (Ubuntu)</p> <p>Type ‘help;’ or ‘\h’ for help. Type ‘\c’ to clear the buffer.</p> <p>mysql></p> <p>Com esta tela você já pode criar databases, tabelas, fazer consultas e o escambal no mysql. Agora vamos criar nossa database:
create database funcionarios_development;
Com este comando você criou no mysql o schema funcionarios_development, em um minuto vamos saber o por que deste nome _development.
Depois que criar seu banco de dados vamos sair do mysql
exit

Agora já temos um projeto rails e um banco de dados funcionando, vamos entrar no diretório do nosso projeto:cd funcionariosDentro do diretório do nosso projeto vamos checar se nosso arquivo de configurações de acesso ao banco de dados esta corretamente configurado, abra o arquivo config/database.yml.
Agora vamos entender o porque do _development quando criamos nosso database.
Se você observar nosso arquivo ele tem três configurações, o rails cria automaticamente elas, um development, um test, e outro production. Estes são os ambientes de trabalho, é recomendado quando estar desenvolvendo o projeto usar o ambiente de desenvolvimento(development), após terminado usar o ambiente de testes(test) para gerar os testes da aplicação, quando tudo estiver funfando sem falhas assim sim colocamos para rodar em produção(production) e subir para o servidor. Como o escopo do deste mini-tutorial é apenas ver como é feito um upload de imagens vamos usar o ambiente de desenvolvimento, para configura-lo vamos apenas colocar username e password, no meu caso ficou assim:development:</p> adapter: mysql encoding: utf8 database: funcionarios_development username: root password: root socket: /var/run/mysqld/mysqld.sock <p>Veja só que moleza(mais fácil que sentar no pudim) o rails providenciou tudo para você, apenas teve que colocar seu login do mysql e a respectiva senha.

Com tudo funcionando vamos agora instalar o plugin responsável pelo upload de arquivos no rails, afinal não queremos nem ter trabalho e nem reinventar a roda, vamos ser DRY!!!
script/plugin install git://github.com/technoweenie/attachment_fu.gitApenas estamos instalando o plugin, attachment_fu que parece ser o plugin mais fácil e usado para upload de imagens. Esta forma só vai funcionar se você tiver o GIT instalado, caso não tenha, você so tem duas opções: ou instala o git, ou vai no endereço http://github.com/technoweenie/attachment_fu
baixa o pacote e joga no diretório vendor/plugins.

Com tudo isso feito já podemos começar a criar nossa estrutura de cadastro, primeiro vamos criar a tabela com tudo necessário(tabela e crud feito com o scaffold):script/generate scaffold Cadastro nome:string idade:integer funcao:string filename:string size:integer content_type:string width:integer height:integer thumbnail:stringCalma vamos ver antes de prosseguir tudo que criamos:
O comando script/genarate scaffold é responsável por gerar uma estrutura crud completa.
Cadastro vai ser o nome da minha estrutura crud, o nome da tabela vai ser o Cadastro no plural(em ingles se quiser que as tabelas tenham nomes em português recomendo o plugin brazillian-Rails).

Agora todo o resto são os campos da minha tabela
nome:stirng – Vai criar o campo nome do tipo string
idade:integer – vai criar o campo idade do tipo int
funcao:string – Vai ser o campo função do camamrada, tambem ai vai ser uma string

Ate agora os campos acima são apenas campos de cadastro(coloquei so para não termos apenas uma imagem), vamos agora ver os outros campos que são configurações para o upload de imagens:
filename:string – caminho que vai ficar o arquivo
size:integer – vai ser o tamanho do arquivo
content_type:string – tipo armazenado
width:integer – largura que vai ser a imagem
height:integer – Altura que vai ser a imagem
thumbnail:string – Vai ser a imagem em um tamanho pequeno, muito visto em sites de e-commerce e fotologs.

Depois de criado tudo isto vamos fazer algumas configurações no nosso model(app/model/ app/models/cadastro.rb)class Cadastro <textarea name='code' class='ruby'>class Cadastro < ActiveRecord::Base</p> has_attachment :content_type=>:image, :storage=> :file_system, :max_size=>1000.kilobytes, :rezise_to=>’120x150’, :thumbnails=>{:thumb=>’60x75’} validates_as_attachment <p>endEsta é a copia como ficou o meu, só colocamos as configurações de entrada do arquivo e validamos as mesmas. Vou descrever uma por uma:

:content_type=> :image – configurando nosso arquivo upado para ser uma imagem.

:storage=> :file_system – Vai ser onde as imagens vão ser armazenadas, fazendo isso elas vão ficar no diretorio public/funcionarios, poderiamos ter usado tambem :db_file para salvar no banco de dados, mas acho que pessoalmente o banco pode ficar muito sobrecarregado, ou poderias usar :s3, este eu nem sei direito mas pode ter informações em http://en.wikipedia.org/wiki/Amazon_S3 e em

http://aws.amazon.com/s3.

:max_size=>1000.kilobytes – O tamanho máximo do arquivo

:rezise_to=>’120x150’ – Vai redimensionar a imagem para 120×150(mais ou menos uma 3por 4 hehe)

:thumbnails=>{:thumb=>’60x75’}, cria o thumbnail no tamanho 60×75

O
validates_as_attachment
é uma validação dos campos citados acima.

Depois disto tudo feito vamos criar as tabelas no nosso banco de dados:

Oba nosso Cadastro esta criado com direito a upload de imagens e tudo

Vamos agora ver se funcionou, primeiro startar o servidorscript/serverAgora vamos abrir o browser e acessar http://localhost:3000 para verificar nosso cadastro.

Ué!!! cadê nosso cadastro? Só da para ver a pagina inicial da aplicação rails.
Para resolver isso vamos apagar o arquivo public/index.html, primeiro apete Ctrl+c para stopar o server, agora faça para apagar rm -r public/index.htmlAgora vamos alterar o arquivo config/routes.rb

vamos procurar uma linha que tem assim:
# map.root :controller => "welcome"
copie e cole ela bem abaixo tirando o #(comentário ruby) e substituindo o nome welcome por o nome do nosso controller, vai ficar assim:
map.root :controller => "cadastros"

Com isso quando for chamado no browser http://localhost:3000, ele vai encarar nosso controller cadastros como o controller inicial da aplicação.

Pronto vamos iniciar novamente o servidor(script/server) e acessar htt://localhost:3000 no browser.
Agora sim esta funfando nossa aplicação. Podemos clicar em new e ver o nosso cadastro, esta funcionando. Outro problema(affs), abaixo do campo função ao invés de termos nosso upload de imagem bonitinho temos um monte de campos que não deveriam estar ali, isto é fácil resolver, vamos abrir nosso arquivo app/views/cadastros/new.html.erb e deixa-lo semelhante a:

O que eu fiz ai foi apenas adicionar o , :html => {:multipart => true} dentro do form_for, para permitir que a pagina html possa carregar arquivos.Troquei todos os labels e inputs baixo dos campos de funcao por:
<textarea name='code' class='ruby'> <br /> <p></p> <%= f.label :uploaded_data %><br /> <%= f.file_field :uploaded_data %> </p> <p>

Temos agora que fazer algo no arquivo app/views/cadastros/show.html.erb
Temos que trocar todos os campos de configurações das imagens pela imagem cadastrada, o nosso arquivo vai ficar semelhante a:

Como no arquivo new, apaguei apenas os campos que não vamos precisar mostrar e adicionei no começo do arquivo image_tag(@cadastro.public_filename()).

Com isto já podemos cadastrar a imagem e já vamos ver ela após salvar(Eba finalmente).

Bem pessoal ainda falta a app/views/cadastros/edit.html.erb , mas esta parte vou deixar por conta de vocês, ate mesmo para treinar(mentira estou é com preguiça).

Eu já ia me esquecendo, eu sempre tento ter a menor quantidade de campos possível no app/views/cadastros/index.html.erb, vai la e apaga tudo que for desnecessário para ter na pagina inicial, se o camarada quiser clica no botão show e olha os detalhes =)
<h1>Listing cadastros<textarea name='code' class='ruby'><h1>Listing cadastros</h1></p> <table> <tr> <th>Nome</th> <th>Funcao</th> </tr> <p><% for cadastro in @cadastros %></p> <tr> <td><%=h cadastro.nome %></td> <td><%=h cadastro.funcao %></td> <td><%= link_to ‘Show’, cadastro %></td> <td><%= link_to ‘Edit’, edit_cadastro_path(cadastro) %></td> <td><%= link_to ‘Destroy’, cadastro, :confirm => ‘Are you sure?’, :method => :delete %></td> </tr> <p><% end %></p> </table> <p><br /></p> <p><%= link_to ‘New cadastro’, new_cadastro_path %></p> <p>

Pronto, vou terminando por aqui, mostrei como utilizar o plugin para salvar arquivos de imagem, mas a partir daí você pode usar a logica e criatividade para trabalhar com upload de imagens ou arquivos. Um sisteminha que sugiro para treinar isso é um cadastro de currículos, ou um fotolog.

Espero que este pequeno tutorial possa ser útil, eu tenho certeza que para mim vai pois sou esquecido demais =).

Para quem tem interesse estamos organizando o primeiro CearáOnRails(http://www.cearaonrails.org) vai ser um bom evento sobre rails no estado do Ceará.

Espero poder fazer outro pequeno tutorial, qualquer sugestão ou duvida não só pode como deve me mandar um e-mail no endereço: rafarubert@yahoo.com.br.

Boa sorte a todos e um bom desenvolvimento.

mais uma vez, por favor ignorem algumas tags /p malucas que aparecem no meio do codigo, comigo sempre aparecem eles =(.