Desenvolvimento Web

30
Desenvolvimento Web

description

Desenvolvimento Web. Hipertexto. Texto em formato digital Acesso por meio de hiperlinks Interconecta conjunto de informação Sistema baseado em Hipertexto mais conhecido World Wide Web. Cliente-Servidor. Clientes Enviam requisições para servidores e aguarda por resposta Servidores - PowerPoint PPT Presentation

Transcript of Desenvolvimento Web

Page 1: Desenvolvimento Web

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 mais conhecido World Wide Web

Page 3: Desenvolvimento Web

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

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

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

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

MVC

Page 8: Desenvolvimento Web

MVC

Page 9: Desenvolvimento Web

Rails

Page 10: Desenvolvimento Web

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

Objetivo

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

promete construir um blog em 15 minutos

Page 12: Desenvolvimento Web

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

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

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

Criando Primeira Tabela

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

Page 16: Desenvolvimento Web

Criando Primeira Tabela

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

Page 17: Desenvolvimento Web

Criando Primeira Tabela

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

Page 18: Desenvolvimento Web

Criando Primeiro Controller

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

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

Page 19: Desenvolvimento Web

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

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

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

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

Criando Posts

• Criando create:def create post = Post.new

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

end

Page 24: Desenvolvimento Web

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

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

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

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

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

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

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