[TuT] Ruby on Rails - Pierwszy projekt/scaffold #Lekcja 2

krystiandj · 1 Listopada 2014

/\

|

R

E

K

L

A

M

A

|

\/

Ruby on Rails - Pierwszy projekt/scaffold

#Lekcja 2

Zaczynamy od stworzenia naszego projektu, uruchamiamy RubyMine File->New project...

Lub gdy nie masz RubyMine to w CMD przechodzisz do katalogu gdzie chcesz wygenerować nowy projekt i

rails new NowyProjekt

W tym momęcie zostaje wygenerowana struktura folderów która wygląda tak:

app - widok aplikacji

/assets - javascript, style, czcionki, zdjęcia

/controllers - kontrolery (wytłumaczę później)

/helpers

/mailers

/models - modele(wytłumaczę później)

/views - widoki czyli cała nasza stronka

bin - pliki wykonywalne naszej aplikacji

config - wszystkie pliki konfiguracyjne, jednym z ważniejszych dla nas będzie routes.rb

db - tutaj będą przechowywane nasze bazy danych

lib - biblioteki

log - logi wygenerowane przez serwer

public - strony błędów takie jak 404.html itp... oraz ikona naszej strony

test - testy aplikacji

vendor

Dobra, teraz gdy już wiemy gdzie co się znajduję to zabierzmy się do roboty, na początek wygenerujmy scaffold

klikamy byle gdzie na strukturę katalogów prawym

teraz szukamy lub wpisujemy w wyszukiwarkę scaffold

i uzupełniamy

NazwaModelu dziedzina:typ

Lub z wiersza poleceń, ważne aby nazwa modelu była z dużej litery

cd NowyProjekt

rails generate scaffold NazwaModelu dziedzina:typ

czyli tak przykład to:

rails generate scaffold Samochod model:string marka:string kolor:string rok:integer przebieg:integer

Okej mamy już wygenerowany scaffold to teraz ważna rzecz

rake db:migrate

To polecenie służy do migracji bazy danych, musisz go użyć zawsze gdy wykonasz operację lub stworzysz bazę danych

(Jeżeli używasz RubyMine to też znajdziesz tam terminal w lewym dolnym rogu aby wpisać to polecenie)

Teraz przechodźmy do pliku config/routes.rb i dopisujemy linijkę

root 'welcome#index'

a w naszym wypadku to będzie

root 'samochods#index'

sprawia ona że domyślnie gdy wejdziemy na stronę odpali się index i nie musimy wpisywać localhost:3000/samochods/index tylko wystarczy localhost:3000

i w tym momencie uruchamiamy nasza stronę poleceniem

rails s

czekamy chwile aż uruchomi się nasz serwer i w przeglądarce wpisujemy

localhost:3000

A efekt jest taki:

Teraz aby ładnie wyglądała nasza strona użyjemy bootstrap, na początek pobieramy ze strony

http://getbootstrap.com/getting-started/#download

wypakujemy naszą paczkę i opowiednio do naszych folderów w projekcje kopiujemy:

app/assets/stylesheets - i tutaj wklejamy bootstrap.css, bootstrap.min.css itd ....

app/assets/javascripts - tutaj nasze javascript czyli bootstrap.js oraz bootstrap.min.js

i czcionki luzem do folderu fonts app/assets (gdy podczas korzystania z czcionek nie chciały działać wrzuć je do folderu Public )

Gdy to już uczynimy to czas zacząć trochę popisać

W pliku app/views/layouts/application.html.erb

Możemy pisać kod który będzie się powielał na wszystkich stronach, przydatne to jest gdy np chcemy zrobić sobie przyciski nawigacyjne strony to nie musimy do każdego pliku z osobna dopisywać kod tylko mamy go w jednym pliku i korzystają z niego podstrony, i jego teraz trochę zmodyfikujemy a mianowicie body kod będzie wyglądała tak:

<body class="container">

<%= yield %>

</body>

Ale przejdźmy do rzeczy i odpalamy app/views/samochods/index.html.erb

i kod wygląda tak:

<h1>Listing samochods</h1>

<table>
  <thead>
    <tr>
      <th>Model</th>
      <th>Marka</th>
      <th>Kolor</th>
      <th>Rok</th>
      <th>Przebieg</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @samochods.each do |samochod| %>
      <tr>
        <td><%= samochod.model %></td>
        <td><%= samochod.marka %></td>
        <td><%= samochod.kolor %></td>
        <td><%= samochod.rok %></td>
        <td><%= samochod.przebieg %></td>
        <td><%= link_to 'Show', samochod %></td>
        <td><%= link_to 'Edit', edit_samochod_path(samochod) %></td>
        <td><%= link_to 'Destroy', samochod, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>

<br>

<%= link_to 'New Samochod', new_samochod_path %>

po lekkim zmodyfikowaniu poprzez bootstrap, kod wygląda tak:

<h1>Listing samochods</h1>

<table class="table">
  <thead>
    <tr class="info">
      <th>Model</th>
      <th>Marka</th>
      <th>Kolor</th>
      <th>Rok</th>
      <th>Przebieg</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @samochods.each do |samochod| %>
      <tr>
        <td><%= samochod.model %></td>
        <td><%= samochod.marka %></td>
        <td><%= samochod.kolor %></td>
        <td><%= samochod.rok %></td>
        <td><%= samochod.przebieg %></td>
        <td><%= link_to 'Show', samochod, class: "btn btn-success "%></td>
        <td><%= link_to 'Edit', edit_samochod_path(samochod), class: "btn btn-primary"%></td>
        <td><%= link_to 'Destroy', samochod, method: :delete, data: { confirm: 'Are you sure?' }, class: "btn btn-danger" %></td>
      </tr>
    <% end %>
  </tbody>
</table>

<br>

<%= link_to 'New Samochod', new_samochod_path %>

A strona prezentuje się o wiele lepiej (na stronie dodałem tylko kilka klas i to wszystko)

To wszystko na dziś, mam nadzieje że wam się wam podobało

Zaloguj się

👋 Witaj na MPCForum!

[TuT] Ruby on Rails - Pierwszy projekt/scaffold #Lekcja 2

Rekomendowane odpowiedzi

krystiandj

krystiandj

Zarchiwizowany