30
Desenvolvimento Web

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

Embed Size (px)

Citation preview

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