Home - Jovennan/jornal GitHub Wiki

Bem vindo a wiki do nosso APP jornal!

Construindo um novo APP

  • Abra o terminal e digite o código abaixo, para criar um novo APP $ rails new jornal -d postgresql

Configurações do SGBD

  • Edite o arquivo config/database.yml:
    • username: unipe
    • password: unipe
    • host: localhost
    • port: 5432
  • No terminal execute o comando:
    • $ rails db:create
  • Acesse a pasta do rais do APP
    • cd jornal
  • Acessando Conteúdo Estático $ rails generate controller paginas_estaticas
  • Na pasta: app/view/paginas_estaticas, crie o arquivo: index.html.erb
  • No arquivo insira o seguinte conteúdo:
   <h1>Olá Rails<h1>
   <%= @nome %>

Crie uma action no controller

  • No arquivo: app/controller/paginas_estaticas_controller.rb
  • Insira o seguinte conteúdo: 
    def index               
    @nome = "seu nome"
end

crie uma rota para a action

  • Insira o conteúdo seguinte no arquivo: config/routes.rb root to: "paginas_estaticas#index"

Versionando nosso APP

  • git init
  • git add -A
  • git commit -m "olá rails"

No navegador

Execute os seguintes comandos no terminal:

  • git remote add origin [email protected]:seuUsuario/jornal.git
  • git push -u origin master

Estilizando nosso APP

Acesse o Repositório do Bootstrap-sass

  • No arquivo gemfile adicione:
  • gem 'bootstrap-sass', '~> 3.3.6'
  • Baixe a Gem: bundle install
  • Altere o arquivo app/assets/stylesheets/application.css para application.scss e adicione: 
       @import "bootstrap";
   body { padding-top: 100px; }
   footer { margin-top: 100px; }
   table, td, th { vertical-align: middle !important; border: none !important; }
   th { border-bottom: 1px solid #DDD !important; }```
  • Insira no arquivo app/assets/javascripts/application.js //= require bootstrap-sprockets

Modifique o Template

  • Edite o arquivo app/views/layouts/application.html.erb
  • Iserir o código abaixo, logo após a Tag <body> 
<div class="navbar navbar-default navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <ul class="nav navbar-nav">
        <li><a href="/">Início</a></li>
        <li><a href="/noticias">Notícias</a></li>
      </ul>
    </div>
  </div>
</div>
  • Substitua a Tag <%= yield %> por:
<div class="container">
    <%= yield %>
</div>
  • Iserir o código abaixo, acima da Tag </body> 
<footer>
  <div class="container">
    UNIPE 2017
  </div>
</footer>

Testando o Scaffold

Como o Rails gera os artefatos (Models - Cotrollers - Views) automaticamente

Gere o componente Notícia

  • $ rails generate scaffold Noticia autor:string titulo:string conteudo:text imagem:string

No terminal execute os comandos:

No arquivo gemfile adicione:

  • gem 'carrierwave'

Baixe a Gem:

  • $ bundle install

Agora podemos gerar o código para gerenciar uploads. No terminal execute:

  • rails generate uploader Imagem

Edite o arquivo app/models/noticia.rb acrescentando:

  • mount_uploader :imagem, ImagemUploader

Edite o arquivo app/views/noticias/_form.html.erb substituindo na linha 31:

  • <%= f.text_field :imagem %>, por:
  • <%= f.file_field :imagem %>

e na linha 1:

  • <%= form_for noticia do |f| %>, por:
  • <%= form_for(noticia, :html => { :multipart => true }) do |f| %>

Edite o arquivo app/views/noticias/show.html.erb substituindo na linha 20:

  • <%= @noticia.imagem %>, por:
  • <%= image_tag(@noticia.imagem_url, :width => 600) if @noticia.imagem.present? %>

No terminal execute os comandos:

Gere o componente Comentario

  • $ rails generate scaffold Comentario autor:string conteudo:text noticia_id:integer

Na pasta db/migrate/ edite o arquivo terminado em 'create_comentarios.rb' depois de:

  • t.timestamps

  • end

  • Insira:

  • add_foreign_key :comentarios, :noticias, column: :noticia_id

No terminal execute os comandos

  • $ rails db:migrate
  • $ rails server

Edite o arquivo app/models/noticia.rb acrescentando:

  • has_many :comentarios

Edite o arquivo app/models/comentario.rb acrescentando:

  • belongs_to :noticia

Edite o arquivo app/views/noticias/show.html.erb após a Tag de imagem:

  • <%= image_tag(@noticia.imagem_url, :width => 600) if @noticia.imagem.present? %>

Adicione o seguinte:

<h3>Comentários</h3>
<% @noticia.comentarios.each do |comentario| %>
  <div>
    <strong><%= comentario.autor %></strong>
    <br />
    <p><%= comentario.conteudo %><p>
  </div>
<% end %>
<%= render 'comentarios/form' %>

Edite o arquivo app/controllers/noticias_controller.rb na action show:

def show
end

E deixe-a assim:

def show
    @noticia = Noticia.find(params[:id])
    @comentario = @noticia.comentarios.build
end

Edite o arquivo app/views/comentarios/_form.html.erb e após:

<div class="field">
    <%= f.label :conteudo %>
    <%= f.text_area :conteudo %>
</div>

Adiciona:

<div class="field">
    <%= f.hidden_field :noticia_id %>
</div>

MELHORANDO O LAYOUT

Adicione classes Bootstrap

<div class="row">
 <div class="col-md-6 col-mdoff-set-3 col-xs-12">
 
 </div>
</div>

<%= link_to 'Mostrar', @noticia, class: 'btn btn-primary' %>
<%= link_to 'voltar', noticias_path, class: 'btn btn-default' %>

<div class="form-group">
 <%= f.label :autor %>
 <%= f.text_field :autor, class: 'form-control' %>
end

<table class="table table-hover">

No terminal execute os comandos:

⚠️ **GitHub.com Fallback** ⚠️