Volgende moeten we een modelbestand maken onder blog/app/models…
article.rb
<< MAY 2019 UPDATE FROM THE AUTHOR >>
In plaats van de visuele teksteditor te gebruiken, kunt u het bestand ook via de terminal maken:
cd app/models
touch article.rb
<< END UPDATE >>
Nu terug in de visuele teksteditor en in het artikel.rb model…
class Article < ActiveRecord::Baseend
Stap 7: In de Rails Console
Nu kunnen we in de rails console springen en de verbinding met de tabel testen…
$ rails c
Nu alle artikelen oproepen…
$ Article.all
Je zou een SQL query moeten zien die er zo uitziet…
(Als u in de opdrachtregel door de blogdirectory hebt genavigeerd, kunt u hier een foutmelding krijgen. Zorg ervoor dat u teruggaat naar de app-directory of uw Article.all-opdracht hieronder zal een fout opleveren.)
Typt u alleen ‘Article’ in, dan krijgt u alle tabelattributen…
Meer commando’s…
article = Article.new
Maakt een nieuw artikel aan dat is opgeslagen in de variabele ‘article’ met de attributen:
Nu kunnen we handmatig een titel en beschrijving toevoegen via de rails console…
Nu moeten we deze gegevens opslaan.
article.save
Dit commando genereert een SQL query om deze nieuwe waarden in de artikeltabel in te voegen…
We kunnen een ander artikel in één keer aanmaken door “massa toewijzing” te gebruiken…
article = Article.new(title: "This is my second article", description: "This is my second description")
Nogmaals, we moeten het artikel opslaan…
article.save
Walah…
We kunnen dit op een derde manier doen met de create methode…
Article.create(title: "This is my third title", description: "This is my third description")
En het zal het artikel automatisch opslaan…
Nu doen we net alsof we een van deze artikelen willen bewerken… Eerst moeten we het artikel pakken…
article = Article.find(2)
Dan kunnen we het artikel bewerken en opslaan…
article.title = "This is an edited second article"
En dan opslaan…
article.save
Wordt de benodigde SQL query gegenereerd…
Nu gaan we een artikel verwijderen… Pak eerst het artikel…
article = Article.find(3)
Dan verwijderen…
article.destroy
Walah…
Step 8: Validaties toevoegen om restricties op artikelen af te dwingen
In het artikel.rb model…
class Article < ActiveRecord::Base
validates :title, presence: trueend
Dit vereist dat alle nieuwe artikelen een titel bevatten. We kunnen dit testen in de rails console (vergeet niet om de rails console te herstarten nadat je het model hebt geupdate! Bedankt Mike Boyd en Andrew Linck voor de reminders)…
article = Article.new
proberen dan op te slaan zonder de titel te updaten…
article.save
boom…
Hetzelfde kunnen we doen voor de beschrijving…
class Article < ActiveRecord::Base
validates :title, presence: true
validates :description, presence: trueend
En het zal voorkomen dat je een artikel maakt zonder beschrijving, zelfs als het een titel heeft… (nogmaals, zorg ervoor dat je de rails console opnieuw opstart nadat je het model hebt bijgewerkt.)
U kunt uw fouten controleren met deze commando’s…
article.errors.any?
article.errors.full_messages
Volgende, zullen we lengte validaties toevoegen…
Cool.
Nog iets: we willen dat de gebruikers dezelfde acties in de browser kunnen uitvoeren, dus moeten we routes, controllers en views opzetten voor het maken en opslaan van artikelen!
Stap 9: Mogelijkheid toevoegen om artikelen vanuit browser aan te maken
De levenscyclus van een nieuw artikel…
Bekijk de eerste 2 minuten van de Udemy Cursus in sectie 4, lezing 63 voor een volledig overzicht…
Laten we eerst onze routes aanpakken…
In het routes.rb bestand, voeg deze regel toe …
resources :articles
Dit geeft ons allerlei paden om te updaten, verwijderen, maken, tonen, enz.
Controleer nieuwe paden met … MAAR WACHT, voordat je paden controleert zorg ervoor dat je terug bent uit de rails console door in te voeren:
exit
dan,
$ rake routes
Cool.
Nu, we hebben een nieuwe controller nodig … Maak dit bestand onder app/controllers.
touch articles_controller.rb#or just create the file using the visual text editor
En dan in het nieuwe controller bestand…
class ArticlesController < ApplicationControllerend
Nu moeten we een nieuwe map maken onder de views om onze articles view bestanden in op te slaan… De map moet ‘articles’ heten
<< UPDATE VAN DE AUTEUR >>
Probeer eens de commandoregel te gebruiken in plaats van de visuele tekst editor:
cd views
mkdir articles
cd articles
<< END UPDATE >>
Nu gaan we een nieuw bestand maken onder ‘articles’ genaamd…
touch new.html.erb# or create using the visual text editor
En dan moeten we onze articles_controller bijwerken.rb:
class ArticlesController < ApplicationController
def new
end
end
Opslaan.
Binnen deze new.html.erb pagina, gaan we ons formulier opslaan om titel en beschrijving vast te leggen.
Maar laten we eerst eens kijken of de pagina werkt… Toevoegen:
<h1>Create an article</h1>
En dan de server laden…
Geeft ons…
Geweldig. Het werkt.
Nu, laten we het model-ondersteunde formulier maken. Rails biedt hier formulier-voor helper-methodes.
In het bestand new.html.erb…
<h1>Create an Article</h1><%= form_for @article do |f| %><% end %>
En we hebben een instantie-variabele geïnitieerd, dus nu moeten we de variabele in onze controller aanmaken…
class ArticlesController < ApplicationControllerdef new
@article = Article.new
endend
Geweldig. Alles werkt goed…
Nu, laten we wat gegevens verzamelen…
<h1>Create an Article</h1><%= form_for @article do |f| %>
<p>
<%= f.label :title %>
<%= f.text_field :title %>
</p><% end %>
En de pagina laden om te zien wat we hebben gedaan…
Geweldig. Het werkt…
Nu, laten we het formulier afmaken…
Geweldig. Alles wat we nodig hebben…
Nu moeten we een ‘create’ actie in de controller maken…
class ArticlesController < ApplicationControllerdef new
@article = Article.new
enddef create
render plain: params.inspect
endend
Wanneer u het formulier invult en vervolgens verzendt, ziet u deze gegevens:
Maar we willen dat deze gegevens in de database worden opgeslagen…
Maar dat is nog niet genoeg…We willen het artikel ook laten zien…
We gebruiken een pad dat we al hebben gemaakt, en geven de instantie variabele voor het nieuwe artikel door…
redirect_to articles_show(@article)
Alle code…
Maar dat is niet goed genoeg, of wel? We willen deze code refactoren om een melding te geven als het artikel succesvol is aangemaakt:
En nu gaan we ervoor zorgen dat onze flash-berichten op alle pagina’s te zien zijn…
In de body van het application.html.erb bestand…
<% flash.each do |name, msg| %>
<ul>
<li><%= msg %></li>
</ul>
<% end %>
En nu willen we ervoor zorgen dat fouten ook worden weergegeven…
In het new.html.erb bestand…
Geweldig. Nu worden de fouten in de artikelen/nieuwe URL getoond:
Zorg er nu voor dat show action is aangemaakt…
def show
@article = Article.find(params)
end
Nu moeten we een pagina aanmaken om de informatie op te tonen…
Dat bestand noemen we…
show.html.erb
In die pagina…
<h1>Showing selected article</h1><p>
Title: <%= @article.title %>
</p><p>
Description: <%= @article.description %>
</p>
En dat zal renderen…
(Krijg je een foutmelding? Hier is de oplossing voor een veel voorkomende fout: het show.html.erb bestand op de verkeerde plaats aanmaken)
Hurrah. Nu gaan we aan de slag met het bewerken van artikelen…
Stap 10: Artikelen bewerken
We moeten de bewerk-actie in de controller maken… Welke controller? De artikelen controller natuurlijk!
def edit
end
En we moeten het bewerkingssjabloon in de views maken… In welke map? De artikelen view map natuurlijk!
edit.html.erb
Nu moeten we een formulier bouwen om te bewerken…
We kunnen eigenlijk kopiëren/plakken van het new.html.erb formulier. We gebruiken hetzelfde formulier om een huidig artikel bij te werken dat we gebruikten om een nieuw artikel te maken.
Nu, laten we onze wijzig-actie in de controller voltooien…
def edit
@article = Article.find(params)
end
Nu moeten we een update-actie toevoegen…
Stap 11: Voeg indexlijst van artikelen toe, en voeg bewerken/tonen-links toe
Voeg index-actie toe in articles_controller.rb…
def index
@articles = Article.all
end
Dan moeten we het sjabloon maken… In welke views directory plaatsen we dit bestand?
index.html.erb
En in dat bestand…
Dit geeft ons…
Cool. Laten we nu de bewerk en toon links voor elk artikel toevoegen…
<td><%= link_to 'Edit', edit_article_path(article) %></td>
<td><%= link_to 'Show', article_path(article) %></td>
De code ziet er zo uit…
Dat geeft ons…
Nu gaan we wat ‘Terug’-links toevoegen aan de bewerk-, toon- en nieuwe pagina… Ga je gang en spring in de respectievelijke pagina’s en voeg de nieuwe links als volgt toe:
<%= link_to 'Back', articles_path %>
Ik heb de mijne helemaal onderaan elk bestand gezet.
En laten we een edit link toevoegen op de show pagina…
<%= link_to "Edit", edit_article_path(@article) %>
Stap 12: Refactor Forms in a Single Partial
Maak direct een nieuw bestand aan in de views/articles.
_form.html.erb
Kopieer/plak de formuliergegevens in dit bestand…
Dan render het formulier in de nieuwe en bewerk pagina…
<%= render 'form' %>
U zou alle oude formulierinformatie eruit moeten hebben geschraapt en de code snippet over aan de nieuwe en bewerk pagina moeten hebben toegevoegd, zodat elk er ongeveer zo uitziet:
<h1>Edit Article</h1><%= render 'form' %><%= link_to 'Back', articles_path %>
Nu gaan we de destroy-actie toevoegen…
Stap 13: Voeg de Destroy-actie toe
In de controller…
Welke controller? Dat weet je al.
Nu moeten we de links toevoegen naar de pagina’s van waaruit we willen kunnen verwijderen. Gebruik de onderstaande link…
<%= link_to 'Delete', article_path(article), method: :delete, data: {confirm: "Are you sure?"} %>
…voeg toe aan de pagina’s waar je wilt dat de gebruiker kan verwijderen.
Als ik toevoeg aan onze index pagina, ziet het er zo uit…
Als we toevoegen aan onze show pagina, moeten we de destroy link een beetje aanpassen om de structuur van de edit link na te bootsen. Zie je wat ik bedoel?
Dit:
<%= link_to 'Delete', article_path(@article), method: :delete, data: {confirm: "Are you sure?"} %>
In plaats van dit:
<%= link_to 'Delete', article_path(article), method: :delete, data: {confirm: "Are you sure?"} %>
Stap 14: Refactor Articles Controller
Een van de principes van ontwikkeling is DRY.
Je weet misschien al wat het betekent: “DON’T REPEAT YOURSELF”
We herhalen onszelf nogal, dus laten we een beetje aan refactoring doen.
Deze regel code staat in al onze acties…
@article = Article.find(params)
Dus, we maken een private methode en slaan deze regel daar op…
def set_article
@article = Article.find(params)
end
Dan, verwijder de regel code uit de acties…
Het is opgenomen in destroy, show, update, edit…
Gelijk onder de eerste regel van de controller…
before_action :set_article, only:
Het bijgewerkte controller bestand zal er zo uitzien:
Stap 15: Installeer Bootstrap
Voeg gemfile toe van github pagina…
gem 'bootstrap-sass', '~> 3.4.1'
gem 'sassc-rails', '>= 2.1.0'
Installeer dan in de commandoregel, ervoor zorgend dat je in de app directory bent en niet in een van de sub-directories,…
$ bundle install
U moet ook een nieuw CSS bestand maken… De bestandsnaam kan er als volgt uitzien en u maakt het onder app/assets/stylesheets
custom.css.scss
En voeg toe…
Dan, in de applicatie.js bestand onder app/assets/javascripts…
//= require jquery
//= require bootstrap-sprockets
En, als je Rails 5 gebruikt, installeer de jQuery gem…
gem 'jquery-rails'
Niet zeker welke versie je gebruikt? Voer het volgende in de terminal uit:
$ rails -v
Nu weet je het. Als je jquery moet installeren, voeg dan de gem hierboven toe aan de gemfile en bundle install.
$ bundle install
Stap 16: Installeer navigatiebalk
Maak een deel aan onder de lay-outs map…
_navigation.html.erb
Nu, ga naar bootstrap’s homepage…
Grijp de standaard navbar code… Het is het eerste voorbeeld en ziet er ongeveer zo uit:
En plak dit in je _navigation partial… Sla op.
Neem nu de gedeeltelijke weergave op in de <head> </head> van het bestand application.html.erb bestand…
<%= render 'layouts/navigation' %>
Het hele bestand ziet er nu ongeveer zo uit:
Start de server opnieuw op (op een mac: control + c) omdat je onlangs een aantal nieuwe gems hebt toegevoegd, en start hem dan opnieuw op:
$ rails s
En als u dan uw lokale server ververst, ziet u:
Niiiiiiiiice…. Ziet er goed uit, niet?
Nu, laten we beginnen met stylen! Of beter gezegd, laten we snel beginnen met de styling, zodat we ons kunnen concentreren op het bouwen van de app in plaats van op het stylen van de app 🙂
In het bestand custom.css.scss kopiëren/plakken en dan opslaan:
Stap 17: Links toevoegen aan de navigatiebalk
Nu gaan we de navigatiebalk aanpakken en ervoor zorgen dat de links in de navigatiebalk verwijzen naar de plaatsen waar ze naartoe moeten verwijzen!
Dit…
<a class="navbar-brand" href="#">Alpha Blog</a>
wordt dit:
<%= link_to "Alpha Blog", root_path, class: "navbar-brand", id: "logo" %>
Ververs uw pagina en zie:
En nu kunt u op elke pagina naar het root_path (de indexpagina) navigeren door op ALPHA BLOG te klikken.
Volgende, laten we een link toevoegen naar de artikelen index pagina:
In plaats van de eerste “Link” in de Navbar:
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
Add:
<li><%= link_to "Articles", articles_path %></li>
En in plaats van de tweede “Link” in de Navbar:
<li><a href="#">Link</a></li>
Add:
<li><%= link_to "Create Article", new_article_path %></li>
Nu kunnen we de andere link naar “Creëer artikel” in het index.html.erb bestand. Spoor het op en verwijder het.
Ik ga ook de zoekbalk verwijderen. Die gebruiken we niet.
Rip alles hieronder weg:
Het eerste uitklapmenu hebben we ook niet nodig, dus dat gaat eruit. Zoek dit en verwijder het.
Bestand opslaan. Ververs uw localhost-server en u ziet:
Stap 18: Stijl het formuliertemplate
De code op bootstrap kunt u hier vinden.
We gaan embedded ruby met bootstrap mixen om het resultaat te krijgen dat we willen.
Binnen de _form.html.erb partial, Verander dit…
In dit…
Noteer een belangrijke verandering die we hebben gemaakt aan het begin van het formulier do statement…
<%= form_for(@article, :html => {class: "form-horizontal", role: "form"}) do |f| %>
En let op de syntax binnen de formulier elementen…
<%= f.text_field :title, class: "form-control", placeholder: "Title of article", autofocus: true %>
Stap 19: Style de berichten & Refactor in Partials
Nu laten we ook de styling voor de foutmeldingen bijwerken. Update de styling van…
naar:
Dat verandert de foutmeldingen naar:
Nu gaan we uitpakken naar een gedeeltelijke..
Maak een nieuwe map aan onder de views genaamd ‘shared’…
Maak een nieuw bestand aan genaamd _errors.html.erb…
Kopieer/plak de foutmelding in dat bestand…
Nu verwijder je de foutmelding uit _form.html.erb, en vervang je de code door:
<%= render 'shared/errors' %>
Laten we ook een bestand _messages.html.erb maken en bewaar dat onder de gedeelde map. Voeg in dat bestand de code voor flashberichten toe:
<% flash.each do |name, msg| %>
<ul>
<li><%= msg %></li>
</ul>
<% end %>
Sla dat bestand op. Zorg ervoor dat je de code in het bestand layouts/application.html.erb vervangt door:
<%= render 'shared/errors' %>
Het hele bestand ziet er nu zo uit:
Volgende, we gaan de flashberichten stijlen…
In de _messages.html.erb gedeeltelijk, veranderen we dit…
<% flash.each do |name, msg| %>
<ul>
<li><%= msg %></li>
</ul>
<% end %>
in dit:
We moeten ook alle flash in het articles_controller.rb bestand veranderen in flash om deze stap te voltooien.
Stap 20: Update Article Instance Variables To Work For Users
Dit is een beetje voorbarig omdat we nog niet eens gebruikers of gebruikersacties hebben aangemaakt voor ons blog, maar we gaan gebruikers aanmaken en we willen dat onze foutmeldingen werken voor gebruikers, net zoals ze werken voor artikelen. Weet je wat ik bedoel?
We hebben al deze functies die werken voor artikelen: het maken van nieuwe artikelen, het bewerken van oude artikelen, en de flash foutmeldingen die ons laten weten wat er mis ging… We willen dat deze flash foutmeldingen aan ons communiceren wanneer we proberen een nieuwe gebruiker te maken of een huidige gebruiker te bewerken.
We zullen dit bereiken door het bijwerken van de @article instantie variabele in een die zal werken voor artikelen of gebruikers…
In de gedeelde/_errors.html.erb bestand, update je de @article instance variabele naar een @obj instance variabele…
Nu moeten we de gedeeltelijke rendering verklaring bijwerken… Die in articles/_form.html.erb
Het was…
<%= render 'shared/errors' %>
en nu moet het luiden…
<%= render 'shared/errors', obj: @article %>
Volgende, we gaan werken aan de “show” view…
Stap 21: Style de Show Artikel Pagina
Update de views/articles/show.html.erb pagina naar…
Dit zal renderen:
Volgende, we gaan wat ‘simple_format’ toevoegen…
Verander dit…
<%= @article.description %>
Tot dit…
<%= simple_format(@article.description) %>
Dan, wat meer stijl voor de knoppen…
<%= link_to "Edit", edit_article_path(@article), class: "btn btn-xs btn-primary" %> |
<%= link_to 'Back', articles_path, class: "btn btn-xs btn-success" %>
Wat ons een paar mooie kleine knoppen zal geven…
Dan, voeg een delete knop toe…
Een mooie kleurige delete knop…
Het hele codeblok ziet er nu zo uit:
Stap 22: Style Article Listing Index Page
We gaan deze afschuwelijk janky uitziende pagina bijwerken…
De index.html.erb pagina moet worden vervangen door de volgende code:
Styling voor de body van het artikel:
.article-body {
border-top: 1px solid #eaeaea;
padding-top: 15px;
padding-bottom: 15px;
}
Styling voor de titel van het artikel:
.article-title {
font-weight: bold;
font-size: 1.5em;
}
Jouw pagina ziet er nu als volgt uit:
Leuk.
Stap 23: Gebruikers aanmaken + een Feature Branch aanmaken in Github
Volgende stap is het aanmaken van gebruikers! Cool. Ons model voor gebruikers zal “Gebruiker” worden genoemd. Hieronder staat een handige tabel die uitlegt hoe de gebruikerstabel zal worden opgemaakt en wat de verschillende naamstructuren voor de bestanden zullen zijn:
We hebben al artikelen gebouwd. We kunnen artikelen maken, lezen, bewerken en verwijderen.
Maar op dit moment kan iedereen die toegang heeft tot de blog elk ander artikel lezen, bewerken en verwijderen.
We willen dat alleen gebruikers die zich hebben aangemeld deze functies kunnen uitvoeren, en we willen dat ze alleen artikelen kunnen bewerken en verwijderen die ze hebben gemaakt.
Dus hebben we natuurlijk gebruikers nodig, en we hebben ook een manier nodig om bij te houden welke gebruikers artikelen maken. Dit kan worden gedaan door het gebruikers-id van de gebruiker die het artikel heeft aangemaakt in de artikeltabel op te slaan in de rij van het artikel. Dit is een foreign key associatie:
Door de user_id kolom toe te voegen aan de artikeltabel krijgen we de mogelijkheid om “v-lookup” te doen naar de rest van de gebruikersinformatie.
Een artikel waar meerdere mensen aan werken zou een veel-op-veel associatie zijn…
Een artikel waar één persoon aan werkt, waarbij één persoon veel artikelen kan maken, is een één-op-veel associatie…
Artikelcategorieën, mochten we die maken, zouden een veel-op-veel associatie zijn.
Ok, genoeg geklungel, laten we de gebruikerstabel maken…