Próximo precisamos criar um arquivo modelo sob blog/app/models…
article.rb
<<<> MAIO 2019 ATUALIZAÇÃO DO AUTOR >>>
Em vez de usar o editor de texto visual, você também pode criar o arquivo através do terminal:
cd app/models
touch article.rb
<<< END UPDATE >>>
Now back in the visual text editor and inside the article.modelo rb…
class Article < ActiveRecord::Baseend
Passo 7: Dentro da Consola Rails
Agora, podemos saltar dentro da consola Rails e testar a ligação à tabela…
$ rails c
Então chamar todos os artigos…
$ Article.all
Você deve ver uma consulta SQL que se parece…
> >
(Se você esteve navegando dentro da linha de comando através do diretório do blog, você pode receber um erro aqui. Certifique-se de voltar ao diretório do aplicativo ou seu comando Article.all abaixo irá retornar um erro.)
Typing in just ‘Article’ dará a você todos os atributos da tabela…
>
>
Mais comandos…
article = Article.new
Criará um novo artigo armazenado dentro da variável ‘article’ com os atributos:
>
>
Agora, podemos adicionar um título e descrição manualmente através do console de trilhos…
>
>
Agora precisamos salvar estes dados..
article.save
Este comando irá gerar uma consulta SQL para inserir estes novos valores na tabela de artigos…
Podemos criar outro artigo de uma só vez usando “mass assignment”…
article = Article.new(title: "This is my second article", description: "This is my second description")
Again, precisamos salvar o artigo…
article.save
Walah…
>
>
>
>
Podemos fazer isso de uma terceira maneira usando o método de criação…
Article.create(title: "This is my third title", description: "This is my third description")
>E ele salvará automaticamente o artigo…
> >
>
>
Agora vamos fingir que queremos editar um destes artigos… Primeiro precisamos de agarrar o artigo…
article = Article.find(2)
>>
>
>
>
Então podemos editar o artigo e salvar o artigo…
article.title = "This is an edited second article"
E depois salvar…
article.save
Gerará a consulta SQL necessária…
>
>>>
>
>
>>
Agora vamos apagar um artigo… Primeiro pegue o artigo…
>
article = Article.find(3)
Então apagar…
article.destroy
Walah…
> >
>
>
Step 8: Adicionar Validações às Restrições de Força nos Artigos
No artigo.Modelo rb…
class Article < ActiveRecord::Base
validates :title, presence: trueend
Para isso é necessário que todos os novos artigos contenham um título. Nós podemos testar isso no console de trilhos (não se esqueça de reiniciar o console de trilhos após atualizar o modelo! Obrigado Mike Boyd e Andrew Linck pelos lembretes)…
article = Article.new
então tente salvar sem atualizar o título…
article.save
boom…
>
>
>
>>
Nós podemos fazer a mesma coisa para descrição…
class Article < ActiveRecord::Base
validates :title, presence: true
validates :description, presence: trueend
E isso irá impedir que você crie um artigo sem uma descrição, mesmo que ele tenha um título… (novamente, certifique-se de reiniciar o console de trilhos após atualizar o modelo.)
>>
Pode verificar os seus erros com estes comandos…
article.errors.any?
article.errors.full_messages
Próximo, vamos adicionar validações de comprimento…
Cool.
Próximo, queremos que os usuários sejam capazes de executar essas mesmas ações no navegador, então vamos precisar configurar rotas, controladores e vistas para criar e salvar artigos!
Passo 9: Adicionar Capacidade de Criar Artigos a partir do Browser
O ciclo de vida de um novo artigo…
> >
>
>
>>
Reveja o Curso Udemy nos primeiros 2 minutos da Secção 4, Palestra 63 para uma visão completa…
Primeiro, vamos abordar as nossas rotas…
Nas rotas.rb, adicione esta linha …
resources :articles
Isto dá-nos todo o tipo de caminhos para actualizar, apagar, criar, mostrar, etc.
Verifica novos caminhos com… MAS ESPERE, antes de verificar os caminhos certifique-se que está de volta ao console de trilhos entrando:
exit
então,
$ rake routes
Cool.
Agora, precisamos de um novo controlador… Crie este arquivo em app/controllers.
touch articles_controller.rb#or just create the file using the visual text editor
E depois dentro do novo ficheiro controlador…
class ArticlesController < ApplicationControllerend
Agora, precisamos de criar uma nova pasta sob as vistas para guardar os nossos ficheiros de vista de artigos… A pasta deve chamar-se ‘articles’
<<<> UPDATE FROM THE AUTHOR >>>
Try usando a linha de comandos em vez do editor de texto visual:
cd views
mkdir articles
cd articles
<<< END UPDATE >>>
Agora, vamos criar um novo ficheiro em ‘articles’ chamado…
touch new.html.erb# or create using the visual text editor
E depois temos de actualizar o nosso articles_controller.rb:
class ArticlesController < ApplicationController
def new
end
end
Salvar.
Inte nesta nova página.html.erb, vamos armazenar nosso formulário para capturar título e descrição.
Mas primeiro, vamos ter certeza que a página está funcionando… Adicionar:
<h1>Create an article</h1>
E depois carregar o servidor…
Dá-nos…
Great. Funciona.
Agora, vamos criar o modelo de forma apoiada. Rails fornece métodos form-for helper aqui.
No arquivo new.html.erb…
<h1>Create an Article</h1><%= form_for @article do |f| %><% end %>
E iniciamos uma variável de instância, então agora precisamos criar a variável no nosso controller…
class ArticlesController < ApplicationControllerdef new
@article = Article.new
endend
Great. Tudo está funcionando bem…
Agora, vamos coletar alguns dados…
<h1>Create an Article</h1><%= form_for @article do |f| %>
<p>
<%= f.label :title %>
<%= f.text_field :title %>
</p><% end %>
E carregar a página para ver o que fizemos…
>
Great. Funciona…
Agora, vamos terminar a forma…
>>>
>
>
Grande. Tudo o que precisamos…
Agora, precisamos criar uma ação ‘criar’ no controlador…
class ArticlesController < ApplicationControllerdef new
@article = Article.new
enddef create
render plain: params.inspect
endend
Quando você preencher o formulário e depois enviar, você verá estes dados:
>>
>
>
Mas queremos que estes dados sejam guardados na base de dados…
Mas isso não é suficiente… Também queremos mostrar o artigo…
Usamos um caminho que já criámos, e passamos na variável de instância para o novo artigo…
redirect_to articles_show(@article)
Todo o código…
Mas isso não é bom o suficiente, pois não? Queremos refactor este código para dar um aviso se o artigo foi criado com sucesso:
E agora vamos certificar-nos que as nossas mensagens flash podem ser vistas em todas as páginas…
No corpo da aplicação.html.erb arquivo…
<% flash.each do |name, msg| %>
<ul>
<li><%= msg %></li>
</ul>
<% end %>
E agora queremos certificar-nos que os erros também são exibidos…
No novo ficheiro.html.erb…
Great. Agora vai mostrar-nos os erros nos artigos/nova URL:
Agora certifique-se de que a acção de mostrar foi criada…
def show
@article = Article.find(params)
end
Agora precisamos de criar uma página para mostrar a informação sobre…
Chamaremos aquele arquivo…
show.html.erb
Dentro daquela página…
<h1>Showing selected article</h1><p>
Title: <%= @article.title %>
</p><p>
Description: <%= @article.description %>
</p>
> E isso renderá…
>
>
(Obter um erro? Aqui está a solução para um erro comum: criar o arquivo show.html.erb no lugar errado)
Hurrah. A seguir vamos trabalhar na edição de artigos…
Passo 10: Editando Artigos
Precisamos criar a ação de edição no controlador… Qual controlador? A controladora de artigos, claro!
def edit
end
E precisamos criar o modelo de edição nas views… Sob qual pasta? A pasta de visualização de artigos, claro!
edit.html.erb
Agora precisamos construir um formulário para editar…
Podemos realmente copiar/colar a partir do formulário new.html.erb. Vamos usar o mesmo formulário para atualizar um artigo atual que usamos para criar um novo artigo.
Agora, vamos completar nossa ação de edição no controller…
def edit
@article = Article.find(params)
end
Agora, precisamos adicionar uma ação de atualização…
Passo 11: Adicionar Listagem de Índice de Artigos, e Adicionar Editar/Mostrar Links
Adicionar ação de índice no articles_controller.rb…
def index
@articles = Article.all
end
Então precisamos criar o template… Em qual diretório de views colocaremos este arquivo…
index.html.erb
E dentro desse arquivo…
Isso nos dá…
>>
>
>
>
Cool. Agora vamos adicionar a edição e mostrar links para cada artigo…
<td><%= link_to 'Edit', edit_article_path(article) %></td>
<td><%= link_to 'Show', article_path(article) %></td>
O código parece…
Que nos dá…
>
>>>
>
>
>>
Agora vamos adicionar alguns links ‘Voltar’ à edição, mostrar e nova página… Vá em frente e salte para as respectivas páginas e adicione os novos links assim:
<%= link_to 'Back', articles_path %>
Adicionei o meu ao fundo de cada ficheiro.
E vamos adicionar um link de edição na página do show…
<%= link_to "Edit", edit_article_path(@article) %>
Passo 12: Refactor Forms into a Single Partial
Criar um novo ficheiro nas vistas/artigos directamente.
_form.html.erb
Copiar/colar os dados do formulário neste arquivo….
Então renderize o formulário na nova página e edite…
<%= render 'form' %>
Você deve ter raspado toda a informação do formulário antigo e adicionado o trecho de código sobre a nova página e edite para que cada um se pareça com isto:
<h1>Edit Article</h1><%= render 'form' %><%= link_to 'Back', articles_path %>
Agora, vamos adicionar a acção destruir…
Passo 13: Adicionar a acção destruir
No controlador…
Que controlador? Você já sabe.
Agora, precisamos adicionar os links para as páginas de onde queremos ser capazes de apagar. Usando o link abaixo…
<%= link_to 'Delete', article_path(article), method: :delete, data: {confirm: "Are you sure?"} %>
…adicionar às páginas onde você gostaria que o usuário fosse capaz de excluir.
Se eu adicionar à nossa página de índice, vai parecer…
Adicionar se adicionarmos à nossa página de exibição, teremos que modificar o link destruir apenas ligeiramente para imitar a estrutura do link editar. Você vê o que eu quero dizer?
This:
<%= link_to 'Delete', article_path(@article), method: :delete, data: {confirm: "Are you sure?"} %>
Em vez disto:
<%= link_to 'Delete', article_path(article), method: :delete, data: {confirm: "Are you sure?"} %>
Passo 14: Controlador de Artigos de Refactor
Um dos princípios de desenvolvimento é DRY.
Você já deve saber o que significa: “NÃO REPETILHE SEU”
Estamos nos repetindo um pouco, então vamos fazer uma pequena refatoração.
Esta linha de código aparece em todas as nossas acções…
@article = Article.find(params)
Então, vamos criar um método privado e armazenar esta linha lá…
def set_article
@article = Article.find(params)
end
Então, apague a linha de código das acções…
Está incluído em destruir, mostrar, actualizar, editar…
Direito abaixo da primeira linha do controlador…
before_action :set_article, only:
O ficheiro do controlador actualizado será parecido:
Passo 15: Instalar Bootstrap
Adicionar arquivo gem da página do github…
gem 'bootstrap-sass', '~> 3.4.1'
gem 'sassc-rails', '>= 2.1.0'
Então na linha de comando, certificando-se de que você está no diretório app e não em um dos subdiretórios, instale…
$ bundle install
Tambem terá de criar um novo ficheiro CSS… O nome do ficheiro pode ser parecido com o seguinte abaixo e irá criá-lo em app/assets/stylesheets
custom.css.scss
E adicionar…
Então, na aplicação.js sob app/assets/javascripts…
//= require jquery
//= require bootstrap-sprockets
E, se estiver usando Rails 5, instale a jQuery gem…
gem 'jquery-rails'
Não tem certeza de qual versão você está usando? Execute o seguinte no terminal:
$ rails -v
Agora você sabe. Se você precisa instalar o jquery, adicione a gem acima ao gemfile e instale o pacote.
$ bundle install
Passo 16: Instalar Barra de Navegação
Criar parcialmente sob a pasta de layouts…
_navigation.html.erb
Agora, vá para a página inicial do bootstrap…
Grab o código de navegação padrão… É o primeiro exemplo e se parece com isto:
>>>
>
>
>>
E cole no seu _navigation parcial… Guarde.
Agora renderize a parcial no interior do <head> </head> da aplicação.html.erb file…
<%= render 'layouts/navigation' %>
O arquivo inteiro agora se parece com isto:
Restabelecer o servidor (em um mac: control + c) porque você adicionou recentemente algumas novas pedras preciosas, e então inicie-o novamente:
$ rails s
E então quando você atualizar o seu servidor local, você verá:
>
Niiiiiiiiice…. Parece bom, não?
Agora, vamos começar a estilizar! Ou melhor, vamos sair do nosso caminho muito rapidamente para que possamos manter o nosso foco na construção da aplicação em vez de estilizar a aplicação 🙂
No arquivo custom.css.scss copiar/colar e depois salvar:
Passo 17: Adicionar links à barra de navegação
Agora, vamos abordar a barra de navegação e garantir que os links da barra de navegação apontam para os lugares para os quais queremos que apontem!
Este…
<a class="navbar-brand" href="#">Alpha Blog</a>
Rece isto:
<%= link_to "Alpha Blog", root_path, class: "navbar-brand", id: "logo" %>
Refresque a sua página e veja:
>>
E agora em qualquer página, você pode navegar para o caminho_raiz (a página de índice) clicando em ALPHA BLOG.
Próximo, vamos adicionar um link para a página de índice de artigos:
Em vez do primeiro “Link” na barra de navegação:
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
Adicionar:
<li><%= link_to "Articles", articles_path %></li>
E em vez do segundo “Link” na barra de navegação:
<li><a href="#">Link</a></li>
Adicionar:
<li><%= link_to "Create Article", new_article_path %></li>
Agora podemos remover o outro link para “Criar artigo” no índice.html.erb file. Basta localizá-lo e apagá-lo.
Eu também vou apagar a barra de pesquisa. Não vamos usar isso.
Excluir tudo abaixo:
Também não precisamos do primeiro menu suspenso, então sai. Basta encontrar isto e apagá-lo:
Salvar ficheiro. Atualize seu servidor local e você verá:
>>
>
>
>
Passo 18: Estilize o modelo de formulário
>
Você pode encontrar o código em bootstrap aqui.
Vamos misturar rubi embutido com bootstrap para obter o resultado que queremos.
Inside the _form.html.erb partial, Change this…
Into this…
Nota uma alteração importante que fizemos no início do formulário do statement…
<%= form_for(@article, :html => {class: "form-horizontal", role: "form"}) do |f| %>
E note a sintaxe dentro dos elementos do formulário…
<%= f.text_field :title, class: "form-control", placeholder: "Title of article", autofocus: true %>
Passo 19: Estilizar as mensagens & Refactor into Partials
Agora vamos também actualizar o estilo para as mensagens de erro. Atualizar o estilo de…
para:
Que altera as mensagens de erro para:
>
>
>
>>
Agora vamos extrair para uma parcial..
Criar uma nova pasta sob as vistas chamada ‘shared’…
Criar um novo arquivo chamado _errors.html.erb…
Copiar/colar a mensagem de erro nesse arquivo… Salvar.
Agora remova a mensagem de erro de _form.html.erb, e substitua o código por:
<%= render 'shared/errors' %>
Vamos também criar um arquivo _messages.html.erb e armazená-lo sob a pasta compartilhada. Dentro desse arquivo, adicione o código das mensagens flash:
<% flash.each do |name, msg| %>
<ul>
<li><%= msg %></li>
</ul>
<% end %>
Salve esse arquivo. Certifique-se de substituir o código no ficheiro layouts/aplicação.html.erb por:
<%= render 'shared/errors' %>
O ficheiro completo parece-se actualmente com:
Próximo, vamos estilizar as mensagens flash…
Nas _messages.html.erb.html.erb parcial, altere isto…
<% flash.each do |name, msg| %>
<ul>
<li><%= msg %></li>
</ul>
<% end %>
para isto:
Tambem precisaremos alterar todo o flash do ficheiro articles_controller.rb para flash para completar este passo.
Passo 20: Update Article Instance Variables To Work For Users
Isso é um pouco prematuro, pois ainda não criamos usuários ou ações de usuários para o nosso blog, mas vamos criar usuários e vamos querer que nossas mensagens de erro funcionem para os usuários da mesma forma como eles trabalham para os artigos. Entenda o que quero dizer?
Temos todas essas funções que funcionam para artigos: criar novos artigos, editar artigos antigos, e as mensagens de erro em flash que nos permitem saber o que deu errado… Queremos que essas mensagens de erro em flash nos comuniquem quando estamos tentando criar um novo usuário ou editar um usuário atual.
Realizaremos isso atualizando a variável @article instance em uma que funcione para artigos ou usuários…
No shared/_errors.html.erb file, atualize a variável de instância @article para uma variável de instância @obj…
Agora, precisamos atualizar a declaração de renderização parcial… A que está em articles/_form.html.erb
Foi…
<%= render 'shared/errors' %>
e agora deve ler…
<%= render 'shared/errors', obj: @article %>
Nexterior, vamos trabalhar na vista “mostrar”…
Passo 21: Estilizar a página de mostrar artigo
Atualizar as vistas/artigos/show.html.erb page to…
Esta irá renderizar:
>
Próximo, vamos adicionar algum ‘simples_formato’…
Alterar isto…
<%= @article.description %>
A isto…
<%= simple_format(@article.description) %>
Então, mais algum estilo para os botões…
<%= link_to "Edit", edit_article_path(@article), class: "btn btn-xs btn-primary" %> |
<%= link_to 'Back', articles_path, class: "btn btn-xs btn-success" %>
Dará-nos alguns botões pequenos e bonitos…
>>
>
>
Então, adicione um botão de apagar…
Um botão de apagar colorido agradável…
>
>
Todo o bloco de código tem este aspecto agora:
Passo 22: Estilo Página de Índice de Listagem de Artigos
Vamos actualizar esta página com um aspecto horrivelmente janky…
>>
>
>
>>
O índice.html.erb página deve ser substituída pelo seguinte código:
Estilização do corpo do artigo:
.article-body {
border-top: 1px solid #eaeaea;
padding-top: 15px;
padding-bottom: 15px;
}
Estilização do título do artigo:
.article-title {
font-weight: bold;
font-size: 1.5em;
}
Sua página ficará assim:
>
>
>
Lamoroso.
Passo 23: Criando Usuários + Criar uma Ramo de Recursos no Github
Próximo, estaremos criando usuários! Legal. Nosso modelo para usuários será chamado de “User”. Abaixo está um gráfico útil que explica como a tabela de usuários será formatada e quais serão as diferentes estruturas de nomenclatura dos arquivos:
>
Já construímos artigos. Podemos criar, ler, editar e apagar artigos.
Mas agora qualquer pessoa que acesse o blog pode ler, editar e apagar qualquer outro artigo.
Só queremos que os usuários que se inscreveram possam fazer essas funções, e só queremos que eles possam editar e apagar artigos que criaram.
Então precisamos de usuários, é claro, e também precisamos de uma maneira de rastrear os usuários que criam artigos. Isto pode ser feito tendo o usuário id para o usuário que cria o artigo armazenado na tabela de artigos na linha do artigo. Esta é uma associação de chave estrangeira:
>>
>
>
>
Adicionar a coluna user_id à tabela de artigos nos dará a capacidade de “v-lookup” para o resto das informações do usuário.
>
>>>
>
>
Um artigo em que várias pessoas trabalhem seria uma associação de muitas a muitas…
Um artigo em que uma pessoa trabalha, onde uma pessoa pode criar muitos artigos, é uma associação de um para muitos…
Categorias de artigos, se os criássemos, seria uma associação de muitos para muitos.
Ok, basta de jib-jab, vamos criar a tabela do usuário…