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:

 
 ...  
 <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…

Ruby on Rails - Por que é tão simples?

Ruby on Rails é uma framework para construção de aplicações WEB, que utiliza a linguagem Ruby. Ruby é uma linguagem interpretada orientada a objetos, que se comporta como se fosse uma linguagem funcional. E o que isto significa, em palavras menos técnicas, significa menos linhas de código, menos configuração, menos dependência com a IDE (aplicação para compilar o código). Por isso ela é tão simples!!

O framework Ruby on Rails tem a vantagem de já definir a arquitetura da aplicação no momento da criação do projeto. Parece mágica, sim, é muito simples e rápido, com apenas um comando para criação do projeto, você já tem toda a arquitetura pronta.

A arquitetura criada pelo framework é baseada no Padrão de Projeto (Design Pattern) MVC, para quem não conhece MVC, se você não sabe do que estou falando vale a pena dar uma lida aqui (mais completo) ou se você já ouviu falar veja este vídeo abaixo:




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/