Desenvolvimento Web. Hipertexto Texto em formato digital Acesso por meio de hiperlinks –...

30
Desenvolvimento Web

Transcript of Desenvolvimento Web. Hipertexto Texto em formato digital Acesso por meio de hiperlinks –...

Page 1: Desenvolvimento Web. Hipertexto Texto em formato digital Acesso por meio de hiperlinks – Interconecta conjunto de informação Sistema baseado em Hipertexto.

Desenvolvimento Web

Page 2: Desenvolvimento Web. Hipertexto Texto em formato digital Acesso por meio de hiperlinks – Interconecta conjunto de informação Sistema baseado em Hipertexto.

Hipertexto

• Texto em formato digital• Acesso por meio de hiperlinks– Interconecta conjunto de informação

• Sistema baseado em Hipertexto mais conhecido World Wide Web

Page 3: Desenvolvimento Web. Hipertexto Texto em formato digital Acesso por meio de hiperlinks – Interconecta conjunto de informação Sistema baseado em Hipertexto.

Cliente-Servidor

• Clientes– Enviam requisições para servidores e aguarda por

resposta

• Servidores– Oferecem algum serviço, processam a requisição e

retornam o resultado

Page 4: Desenvolvimento Web. Hipertexto Texto em formato digital Acesso por meio de hiperlinks – Interconecta conjunto de informação Sistema baseado em Hipertexto.

HTTP

• HyperText Transfer Protocol– Protocolo responsável pelo tratamento de

pedidos e respostas entre cliente e servidor na WWW

– Dados são codificados e encapsulados no corpo da mensagem e enviados ao servidor• Text/plain, text/gif, text/jpeg, etc..

–Métodos• GET• POST

(Exemplo)

Page 5: Desenvolvimento Web. Hipertexto Texto em formato digital Acesso por meio de hiperlinks – Interconecta conjunto de informação Sistema baseado em Hipertexto.

MVC

• Princípio que divide/estrutura a aplicação em três entidades distintas que interagem entre si

• Separação:– Dados e Lógica de negócio (Model)– Layout / Visualização(View)– Controller• Intermedia Model e View

Page 6: Desenvolvimento Web. Hipertexto Texto em formato digital Acesso por meio de hiperlinks – Interconecta conjunto de informação Sistema baseado em Hipertexto.

MVC

• Model– Representa as entidades do domínio da aplicação

• View– Interface de usuário– Visualização dos dados

• Controller– Processa eventos disparados pelos usuários– Recebe requisição do usuário

Page 7: Desenvolvimento Web. Hipertexto Texto em formato digital Acesso por meio de hiperlinks – Interconecta conjunto de informação Sistema baseado em Hipertexto.

MVC

Page 8: Desenvolvimento Web. Hipertexto Texto em formato digital Acesso por meio de hiperlinks – Interconecta conjunto de informação Sistema baseado em Hipertexto.

MVC

Page 9: Desenvolvimento Web. Hipertexto Texto em formato digital Acesso por meio de hiperlinks – Interconecta conjunto de informação Sistema baseado em Hipertexto.

Rails

Page 10: Desenvolvimento Web. Hipertexto Texto em formato digital Acesso por meio de hiperlinks – Interconecta conjunto de informação Sistema baseado em Hipertexto.

O que é?

• Meta-Framework/Framework cujo foco é desenvolvimento de aplicações web

• Estrutura base das aplicações segue MVC• Linguagem utilizada Ruby

Page 11: Desenvolvimento Web. Hipertexto Texto em formato digital Acesso por meio de hiperlinks – Interconecta conjunto de informação Sistema baseado em Hipertexto.

Objetivo

• Introdução Rails• Desenvolver ao longo da aula o exemplo que

promete construir um blog em 15 minutos

Page 12: Desenvolvimento Web. Hipertexto Texto em formato digital Acesso por meio de hiperlinks – Interconecta conjunto de informação Sistema baseado em Hipertexto.

Requisitos Aplicação

• Dono do blog – cria post – lê, modifica, apaga posts – lê, apaga comentários de outros usuários

• Usuário – lê posts de um blog– cria comentário para um post – lê comentários, apaga seus próprios comentários

Page 13: Desenvolvimento Web. Hipertexto Texto em formato digital Acesso por meio de hiperlinks – Interconecta conjunto de informação Sistema baseado em Hipertexto.

Iniciando

• % rails blog– Comando rails gera esqueleto da aplicação

• Estrutura da aplicação– app: componentes (controllers/views/model)– config: database.yml– public: arquivos css, javascript, imagens, uploads

• Levantando a aplicação (localhost:3000)– % script/server

Page 14: Desenvolvimento Web. Hipertexto Texto em formato digital Acesso por meio de hiperlinks – Interconecta conjunto de informação Sistema baseado em Hipertexto.

Criando Primeira Tabela

• % script/generate model post– generate: script para gerar estrutura– model: indica tipo da estrutura– post: nome do objeto

• Pasta db/migrate: – self.up => fazer alterações– sef.down => desfazer alteração

Page 15: Desenvolvimento Web. Hipertexto Texto em formato digital Acesso por meio de hiperlinks – Interconecta conjunto de informação Sistema baseado em Hipertexto.

Criando Primeira Tabela

• self.upcreate_table :posts do |t|t.string :titlet.string:bodyt.timestampsend• self.downdrop_table : posts

Page 16: Desenvolvimento Web. Hipertexto Texto em formato digital Acesso por meio de hiperlinks – Interconecta conjunto de informação Sistema baseado em Hipertexto.

Criando Primeira Tabela

• % rake db:migrate• rake: similar ao MakeFile• Aplica a migração no banco de dados

Page 17: Desenvolvimento Web. Hipertexto Texto em formato digital Acesso por meio de hiperlinks – Interconecta conjunto de informação Sistema baseado em Hipertexto.

Criando Primeira Tabela

• script/console– Post.create(:title=>’teste’, :body=>’teste’)– Post.find(:all)– P = Post.find(1)• P.destroy

Page 18: Desenvolvimento Web. Hipertexto Texto em formato digital Acesso por meio de hiperlinks – Interconecta conjunto de informação Sistema baseado em Hipertexto.

Criando Primeiro Controller

• % script/generate controller posts• Testando:– localhost:3000/posts

• Em app\controllers\posts_controller.rbdef indexend• Tentando novamente

Page 19: Desenvolvimento Web. Hipertexto Texto em formato digital Acesso por meio de hiperlinks – Interconecta conjunto de informação Sistema baseado em Hipertexto.

Criando Primeiro Controller

• app\views\posts\index.rhtml<h1>Listando Posts</h1><table><tr><th>Titulo</th><th>Conteudo</th></tr></table>• Tentando novamente

Page 20: Desenvolvimento Web. Hipertexto Texto em formato digital Acesso por meio de hiperlinks – Interconecta conjunto de informação Sistema baseado em Hipertexto.

Criando Primeiro Controller

• Listando Postsdef index@posts = Post.find(:all)

End• Na view index.rhtml – Iterando<% @posts.each do |p| %><tr><td><%=p.title%></td> <td><%=p.body%></td> </tr><% end %></table>

Page 21: Desenvolvimento Web. Hipertexto Texto em formato digital Acesso por meio de hiperlinks – Interconecta conjunto de informação Sistema baseado em Hipertexto.

Criando Posts

• Adicionando links<p><%= link_to “Nova Postagem", :action => “new”

%></p>• Clicando no link ….• Deve-se registrar action new, assim como

new.rhtml

Page 22: Desenvolvimento Web. Hipertexto Texto em formato digital Acesso por meio de hiperlinks – Interconecta conjunto de informação Sistema baseado em Hipertexto.

Criando Posts

• Criando o formulário:<% form_tag :action => 'create' do%>Titulo: <%= text_field :post,:title%><br />Mensagem: <%= text_field :post, :body%><br /><%= submit_tag 'Criar'%><% end %><%= link_to 'Voltar', :action => ‘index’ %>

Page 23: Desenvolvimento Web. Hipertexto Texto em formato digital Acesso por meio de hiperlinks – Interconecta conjunto de informação Sistema baseado em Hipertexto.

Criando Posts

• Criando create:def create post = Post.new

post.attributes = params[:post]post.saveredirect_to :action => 'index'

end

Page 24: Desenvolvimento Web. Hipertexto Texto em formato digital Acesso por meio de hiperlinks – Interconecta conjunto de informação Sistema baseado em Hipertexto.

Editando Posts

• Inserindo link para editar:<td><%= link_to "Editar", :action => "edit", :id => p.id %></td>

• Inserindo action edit:@post = Post.find(params[:id])

Page 25: Desenvolvimento Web. Hipertexto Texto em formato digital Acesso por meio de hiperlinks – Interconecta conjunto de informação Sistema baseado em Hipertexto.

Editando Posts

• Criando View de edição:<% form_tag :id => @post, :action => 'update'

do%> Titulo: <%= text_field :post,:title%><br /> Mensagem: <%= text_field :post,:body%><br /> <%= submit_tag 'Salvar'%>

<% end %>

Page 26: Desenvolvimento Web. Hipertexto Texto em formato digital Acesso por meio de hiperlinks – Interconecta conjunto de informação Sistema baseado em Hipertexto.

Editando Posts

• Definindo action update:def update

@post = Post.find(params[:id]) @post.attributes = params[:post] @post.save redirect_to :action => 'index'end

Page 27: Desenvolvimento Web. Hipertexto Texto em formato digital Acesso por meio de hiperlinks – Interconecta conjunto de informação Sistema baseado em Hipertexto.

Situação atual

• Temos um blog com funcionalidades de listar, inserir e editar um post.

• Pode-se ver o quão produtivo é se trabalhar com Rails

Page 28: Desenvolvimento Web. Hipertexto Texto em formato digital Acesso por meio de hiperlinks – Interconecta conjunto de informação Sistema baseado em Hipertexto.

Exercício

• Implementar os requisitos que não foram finalizados – Slides 12

• Atividade em Dupla• Sem uso de scaffold

• Pesquisar sobre registrar o usuário logado na sessão, relacionamentos entre entidades no Rails

• Utilizar Sqlite3• Reflita sobre as entidades e relacionamentos entre

elas

Page 29: Desenvolvimento Web. Hipertexto Texto em formato digital Acesso por meio de hiperlinks – Interconecta conjunto de informação Sistema baseado em Hipertexto.

Referências

• Tutorial: “Rails para sua diversão e lucro”• http://api.rubyonrails.org/classes/ActionView

/Helpers/FormTagHelper.html• Vídeo de Terceiro sobre Rails - Lab. Eng.

Software• http://app.dcc.ufba.br/~terceiro/matb14/

Page 30: Desenvolvimento Web. Hipertexto Texto em formato digital Acesso por meio de hiperlinks – Interconecta conjunto de informação Sistema baseado em Hipertexto.

Equipes

• Leandro e Ivan• Roberto e Jandson• Paulo e Paulo• Lorena e Manuel• Leonardo e Matheus• Caíque e Ademilson• Adnilson e Fabrício• Ítalo e Arleson• Fagner e Naíla• Felipe e Joás