Pular para o conteúdo principal

Aula 4: Criar um Menu para Aplicação em Ruby on Rails

# Criar uma menu de navegação para a página inicial 


Abrir o projeto no programa Sublime 3

- Criar no projeto uma nova pasta /app/views/shared/
- Criar um novo arquivo /app/views/shared/_navbar.html.erb 
Acessar a página e copiar o código abaixo neste arquivo _navbar.html.erb:
   <!-- Static navbar -->
    <nav class="navbar navbar-default navbar-static-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="../navbar/">Default</a></li>
            <li class="active"><a href="./">Static top<span class="sr-only">(current)</span></a></li>
            <li><a href="../navbar-fixed-top/">Fixed top</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

## Alterar o arquivo app/views/layouts/application.html.erb:

<html> 
 ...  
 <body>
    <%= render 'shared/navbar' %> 
    <p class="notice"><%= notice %></p> 
    <p class="alert"><%= alert %></p>       
    <div class="container">
       <%= yield %>
    </div>
 </body>
</html>
 
Salvar o arquivo 

#Iniciar o servidor

C:\Projetos\computacaonapratica>rails s
=> Booting WEBrick => Rails 4.2.8 application starting in development on http://localhost:3000 => Run `rails server -h` for more startup options => Ctrl-C to shutdown server [2017-09-13 05:16:16] INFO WEBrick 1.3.1 [2017-09-13 05:16:16] INFO ruby 2.2.6 (2016-11-15) [x64-mingw32] [2017-09-13 05:16:16] INFO WEBrick::HTTPServer#start: pid=18536 port=3000
 
Abrir o navegador em http://localhost:3000/home/


# Alterar o menu de navegação

Abrir o arquivo /app/views/shared/_navbar.html.erb
 
<!-- Static navbar -->
  <nav class="navbar navbar-default navbar-static-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Computação na Prática</a>
     </div>
     <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <% if (!user_signed_in?) %>
          <li><%= link_to "Login", new_user_session_path %> </li>
          <li><%= link_to "Cadastrar", new_user_registration_path %> </li>
        <% else %>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
              <%= current_user.email %> <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Gerenciar cursos</a></li>
              <li><a href="#">Gerenciar reservas</a></li>
              <li><a href="#">Suas reservas</a></li>
              <li><a href="#">Seus cursos</a></li>
              <li role="separator" class="divider"></li>
              <li><%= link_to "Alterar Perfil", edit_user_registration_path %></li>
              <li><%= link_to "Sair", destroy_user_session_path, method: :delete %></li>
            </ul>
          </li>
        <% end %>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">Pesquisa</a></li>
          <li class="active"><a href="#">Cursos</a></li>
          <li><a href="#">Notícias</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </nav> 
 


Atualizar a página no navegador em http://localhost:3000/home/ para ver as mudanças.

 #Parar o servidor
Ctrl + c 
Started GET "/" for ::1 at 2017-09-13 05:17:29 -0300 Processing by Rails::WelcomeController#index as HTML Rendered C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/railties-4.2.8/lib/rails/templates/rails/welcome/index.html.erb (25.7ms) Completed 200 OK in 272ms (Views: 250.5ms | ActiveRecord: 0.0ms) [2017-09-13 05:19:46] INFO going to shutdown ... [2017-09-13 05:19:46] INFO WEBrick::HTTPServer#start done. Exiting Deseja finalizar o arquivo em lotes (S/N)? S C:\Projetos\computacaonapratica>

Comentários

Postagens mais visitadas deste blog

Onde implementar um novo método ou variável?

Como sabemos, o framework  Ruby on Rails é baseado na arquitetura MVC. Desta forma, as principais pastas do projeto abaixo do nível /app são:
assets: onde ficam os CSS, JavaScripts e Imagens da aplicação.models: onde ficam os objetos da aplicação, geralmente representam uma tabela do Banco de Dados ou um Relacionamento entre tabelas. O nome dos arquivos geralmente estão no padrão "<nome_da_tabela>.rb" controllers: onde ficam as classes de controle, que permitem que os objetos (model) acessem a camada de apresentação (view). 
O nome dos arquivos geralmente estão no padrão "<nome_da_tabela>s_controller.rb"Observe que o nome da tabela deve ser no plural.views: onde ficam as páginas html da aplicação.O nome dos arquivos geralmente estão no padrão "<metodo_do_controlador>".html.erb Desta forma, o programador tem que saber onde irá criar novos métodos na aplicação, de forma que eles fiquem visíveis na camada de apresentação (View).


Quando for n…

Brincar para Aprender!

Aprendendo a usar CSS, este joguinho é bem simples e prático. Com ele dá para aprender a usar os comandos CSS-Flex para sua aplicação. Tente colocar os sapinhos em cada posição corretamente. Acesse o site: https://codepip.com/

View - Dicas para Programadores Ruby on Rails

View - Camada de Apresentação (/*.html.erb)Como exibir uma data no formato dd/mm/aa?
Se o sistema está exibindo a data em formato mm/dd/aaaa, por exemplo:

No arquivo <suapagina>.html.erb basta adicionar o seguinte comando:

Antes:
Data Inicial: <%= @data_inicial.value.to_date %>
Data Inicial: 01/28/2017


Depois:
Data Inicial: <%= l @data_inicial.value.to_date, format:  "%d/%m/%Y" %>
Data Inicial: 28/01/2017

Como transformar um número fracionário (float, double, decimal) em inteiro? Se o sistema está exibindo um número com uma ou duas casas decimais, por exemplo:

No arquivo <suapagina>.html.erb basta adicionar o seguinte comando:

Antes 

Idade: <%= @idade %> anos
Idade: 25.0 anos

Depois

Idade: <%= @idade.to_i %> anos
Idade: 25 anos

Como formatar um conteúdo para adicionar quebras de linha no texto? Se o sistema está exibindo um texto sem quebra de linhas, mas o usuário digitou com quebra de linha, por exemplo:


No arquivo <suapagina>.html.e…