На мінулым занятку мы стварылі набор дзеянняў (actions) і заглушкі прадстаўленняў статычных старонак. З дапамогай Rails вельмі проста ствараць статычныя сайты. Хаця, хтосці скажа, што гэта залішне, бо фрэймўорк прызначаны для стварэння сайтаў з дынамічнымі дадзенымі. У любым выпадку, будзем трымаць у галаве думку, што гэта - толькі пачатак і далей наша прыкладанне будзе ўяўляць нешта большае за набор HTML- старонак.
HTML- гэта мова разметкі вэб-старонак. Але сучасны HTML выкарыстоўваецца не толькі для дадання кантэнта старонкі, але і для перадачы мета-дадзеных і інфармацыі пра кантэнт для пошукавых машын і іншых кліентаў. Кожная HTML-старонка адпавядае падобнай структуры:
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>Page heading</h1>
<p>Paragraph content</p>
</body>
</html>
З дапамогай дэкларацыі <!DOCTYPE html> браўзеры разумеюць, што маюць справу з
дакументам HTML5. Усё што знаходзіцца паміж <html> і </html> - гэта код, які
апісвае сам дакумент. У сваю чаргу HTML-дакумент уключае ў сябе head і body
часткі. Усё што знаходзіцца паміж <head> і </head> - гэта інфармацыя пра
старонку, мета-дадзеныя, таксама у галаве можна падключаць стылі і скрыпты. Усё
што знаходзіцца паміж <body> і </body> - гэта візуальная частка старонкі. Тут
з дапамогай тэгаў, напрыклад <h1> і <p> пазначаецца кантэнт старонкі.
У свеце распрацоўкі на Ruby on Rails папулярнымі з'яўляюцца такія мовы разметкі, як Haml і Slim. Але ў межах гэтага курса мы будзем карыстацца html.erb. Так будзе больш карэктна ў адносінах да распрацоўшчыкаў-пачаткоўцаў, хаця ў жыцці я аддаю перавагу Slim за лаканічнасць гэтага двіжка.
Паглядзіце зыходны код любой старонкі нашага прыкладання ў браўзеры
view-source:https://course-app.herokuapp.com/. Вы бачыце нешта падобнае на
вышэй апісаную структуру. Але у HEAD ёсць таксама нейкія тэгі з незразумелымі
атрыбутамі. Зараз мы даведаемся, адкуль бярэцца гэта структура (прычым на
кожнай нашай старонцы).
Паглядзіце файл app/views/layouts/application.html.erb. Гэта адмысловы
layout файл, які Rails выкарыстоўвае для элементаў, якія патрэбныя на кожнай
старонцы. Пры гэтым у кодзе яны адлюстраваны толькі аднойчы, менавіта ў гэтым
файле. Кантэнт кожнай старонкі, у сваю чаргу, уключаецца ў layout з дапамогай
радка <%= yield %>. Такім чынам, нам не трэба ў кожным шаблоне View пісаць
<!DOCTYPE html> і гэтак далей. Гэта прыклад падыхода DRY у Rails, пра які мы
казалі раней.
Layout app/views/layouts/application.html.erb - загружаецца па змоўчванні.
Але калі вы захочаце выкарыстаць іншы layout (ці не выкарыстоўваць увогуле)-
гэта не будзе праблемай. Дастаткова пазначыць ў кантроллеры
layout 'other_layout' (ці layout false). Падрабязней чытайце
тут
Rails asset pipeline дапамагае кіраваць актывамі нашага прыкладання. У Rails асеты прынята захоўваць у дырэкторыях app/assets/, lib/assets/, vendor/assets/. Файлы з гэтых каталогаў аўтаматычна падхопліваюцца Rails і з дапамогай правілаў, якія прапісаны ў маніфестах (app/assets/stylesheets/application.css, app/assets/javascripts/application.js) фармуецца агульны файл для CSS і агульны файл JavaScript.
Звярніце увагу на метады stylesheet_link_tag і javascript_include_tag. Менавіта гэтыя метады падключаюць агульныя файлы, сфармаваныя на аснове маніфестаў. Чаму гэта добра для нас? Справа ў тым, што падчас распрацоўкі прынята дзяліць наш JS і CSS код на асобныя файлы з добра чытабельным і атфарматаваным кодам, адпаведна структуры ці функцыянальнасці прыкладання. Гэта зручна для распрацоўкі, бо код прасцей падтрымліваць і развіваць. Але гэта кепскі варыянт для production, бо з павялічэннем колькасці файлаў павялічваецца колькасць запытаў да прыкладання. Менавіта таму Asset pipeline збірае агульныя файлы для CSS і JS. Параўнайце зыходны код ў вашым development асяроддзі і у production.
Але на гэтым праца "трубаправода" не сканчаецца. Варта адзначыць, што Asset pipeline яшчэ мінімізуе код. Такім чынам, за кошт змяншэння запытаў і памераў файлаў, web-прыкладанне робіцца больш хуткім.
У файле app/views/layouts/application.html.erb таксама ёсць метад csrf_meta_tags, які дадае на кожную старонку унікальны csrf-token, з дапамогай якога наша прыкладанне абараняецца ад CSRF атак.
Давайце дададзім спасылку на рэпазіторый нашага курса на галоўную старонку.
# app/views/pages/home.html.erb
<p>
This is a demo application for Ruby on Rails
<a href="https://github.com/micrum/course" target="_blank">course</a>
</p>
Так выглядае спасылка ў HTML
<a href="https://github.com/micrum/course" target="_blank">course</a>.
Атрыбут href роўны URL рэпазіторыя на Github, атрыбут target роўны _blank
і кажа, што трэба адчыніць спасылку ў новым акне браўзера.
Rails дае нам адмысловы хэлпер link_to для стварэння спасылак. З дапамогай гэтага дапаможнага метада можна стварыць гіперспасылку на кожнае дзеянне нашага кантроллера. Калі быць дакладным - гэта спасылка не на дзеянне, а на URL-адрас. Rails зробіць сінтаксічны разбор гэтага адраса і знойдзе адпаведны action.
Давайце дададзім спасылкі на ўсе нашы статычныя старонкі ў layout. Але спачатку вернемся да маршрутаў. На мінулым занятку мы дадалі іменаваны маршрут для старонкі Course. Іменаваныя маршруты дазваляюць не толькі ствараць URL старонкі на наш густ, але і зручна маніпуляваць маршрутамі ў кантроллерах і прадстаўленнях. Давайце дадзім імя нашаму Testimonials маршруту таксама:
# config/routes.rb
get 'testimonials' => 'pages/testimonials'
Зараз мы можам выкарыстоўваць наш іменаваны маршрут ў прадстаўленнях і
кантроллерах. Маршрут testimonials_path вяртае шлях да старонкі
Testimonials - /testimonials. Давайце дададзім спасылкі з нашымі іменаванымі
маршрутамі перад радком <%= yield %> ў layout:
# app/views/layouts/application.html.erb
<%= link_to 'Home', root_path %>
<%= link_to 'Course', course_path %>
<%= link_to 'Testimonials', testimonials_path %>
Першы аргумент хэлпера link_to - гэта тэкст спасылкі, другі - гэта шлях. Зараз на кожнай старонцы мы маем навігацыю і магчымасць перайсці на іншую.
Мы стварылі мінімалістычныю навігацыю па сайту. Потым мы яе пераробім, але ужо зараз бачна, што гэта асобная структура на старонцы (header). Каб не переагружаць layout файл, добра было б вынесці header у асобны файл. Rails дазваляе зрабіць гэта з дапамогай partials (частковых шаблонаў).
Давайце вынесем навігацыю у асобны файл:
# app/views/shared/_header.html.erb
<%= link_to 'Home', root_path %>
<%= link_to 'Course', course_path %>
<%= link_to 'Testimonials', testimonials_path %>
Я звычайна ствараю асобную дырэкторыю для partials. Звярніце увагу на тое, што імя нашага частковага шаблона пачынаецца са знака ніжняга падкрэслівання - гэта пагаджэнне Rails. Зараз можна ўставіць наш partial у layout з дапамогай хэлпера render:
# app/views/layouts/application.html.erb
<%= render 'shared/header' %>
Rails дае адмысловы хэлпер image_tag для працы з выявамі. Як мы ведаем, выявы прыкладання трэба дадаваць ў дырэкторыю app/assets/images/. Rails аўтаматычна знойдзе файл ў гэтым каталогу, дастаткова толькі пазначыць імя. Давайце дададзім выяву на старонку Course і паглядзім як гэта працуе:
# app/views/pages/course.html.erb
<h1>Course</h1>
<%= image_tag 'poster.png', height: 500, alt: 'Ruby on Rails course' %>
Тут першы аргумент - гэта назва файла, усе астатнія (высата і альтэрнатыўны тэкст) -
апцыянальныя. Паглядзіце, які HTML стварае наш хэлпер:
<img height="500" alt="Ruby on Rails course" src="/assets/poster.png" />.
CSS - гэта Cascading Style Sheets. CSS вызначае (стылізуе) выгляд HTML-элементаў на web-старонцы.
Калі мы стваралі Pages кантроллер, генератар дадаў для нас файл app/assets/stylesheets/pages.scss. Фармат scss кажа Rails, што файл трэба апрацоўваць з дапамогай Sass. Sass пашырае магчымасці CSS і робіць сінтаксіс больш зручным, а потым канвертуе у звычайны CSS.
Мы ўжо ведаем, што нашы файлы з каталога app/assets/stylesheets/ ўтвораць
агульны CSS файл (ці падключацца паасобку у development асяроддзі). Гэта
адбываецца, дзякуючы таму, што наш маніфест app/assets/stylesheets/application.css
утрымлівае радок *= require_self.
Давайце дададзім трохі CSS у файл app/assets/stylesheets/pages.scss,
каб запэўніцца, што ўсё працуе.
# app/assets/stylesheets/pages.scss
h1 {
color: green;
}
.centered {
text-align: center;
}
Кожнае правіла CSS ўтрымлівае селектар і дэкларацыю. У сваю чаргу дэкларацыя
уключае ў сябе ўласцівасць і значэнне. Селектары у нашым выпадку - гэта HTML-тэг
h1 і клас centered (селектары класа у CSS пачынаюцца з кропкі). Дэкларацыі
заключаюцца ў дужкі {}. Уласцівасць color селектара h1 мае значэнне green,
уласцівасць text-align селектара .centered мае значэнне center.
Мы стварылі уласцівасць для селектара .centered, але сам клас пакуль не
скарысталі. Давайце дададзім яго ў наш layout-файл, каб адцэнтраваць кантэнт старонак:
#app/views/layouts/application.html.erb
<div class="centered">
<%= yield %>
</div>
Зараз кантэнт нашых шаблонаў View адцэнтраваны, а загалоўкі старонак - зялёныя. Асновы HTML & CSS павінен ведаць кожны web-распрацоўшчык, але вывучэнне лепшых практык у frontend-распрацоўцы выходзіць за межы нашага занятка. З іншага боку, сучаснае web-прыкладанне павінна не толькі добра працаваць, але і добра выглядаць. Каб вырашыць гэту задачу з мінімальнымі затратамі часу мы будзем выкарыстоўваць адмысловы CSS-фрэймўорк.
Bootstrap - гэта front-end framework для пабудовы прыгожых кліентскіх частак web-прыкладанняў з responsive дызайнам. Каб не марнаваць час на напісанне CSS, мы будзем выкарыстоўваць магчымасці гэтага фрэймўорка падчас курса.
Але спачатку трэба яго ўсталяваць. Добрая навіна: існуе gem для гэтага. Мы ужо усталявалі gem sass-rails, таму зараз трэба толькі дадаць Sass-порт для Bootstrap (і не забываем усталяваць):
# Gemfile
gem 'bootstrap-sass', '~> 3.3.3'
Зараз можна імпартаваць стылі Bootstrap у наша прыкладанне (з дапамогай Sass). Зробім гэта у асобным файле:
# app/assets/stylesheets/styles.scss
@import 'bootstrap';
Цяпер можна прыдаць нашаму прыкладанню больш прыдатны знешні выгляд. Давайце пачнем з хідэра:
# app/views/shared/_header.html.erb
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li><%= link_to 'Home', root_path %></li>
<li><%= link_to 'Course', course_path %></li>
<li><%= link_to 'Testimonials', testimonials_path %></li>
</ul>
</nav>
Мы змясцілі нашыя спасылкі ў ліст <ul class="nav navbar-nav">, дадалі элемент
навігацыі <nav class="navbar navbar-inverse"> і дадалі некалькі класаў Bootstrap.
Зараз гэта больш падобна на сапраўдную навігацыю.
Адна з галоўных перавагаў Bootstrap - гэта Grid-system, каб выкарыстоўваць яе, абернем кантэнт нашых шаблонаў ў класс container (наш клас centered зараз можна выдаліць, бо задачу цэнтравання добра вырашае Bootstrap-клас text-center):
#app/views/layouts/application.html.erb
<div class="container text-center">
<%= yield %>
</div>
Зараз трохі пераробім галоўную старонку, з выкарыстаннем Bootstrap:
# app/views/pages/home.html.erb
<div class="page-header">
<h1><%= @hello %></h1>
</div>
<div class="jumbotron">
<p>This is a demo application for Ruby on Rails course</p>
<%= link_to 'Visit course page', 'https://github.com/micrum/course',
target: '_blank', class: 'btn btn-primary btn-lg' %>
</div>
Звярніце увагу, як мы перарабілі спасылку з дапамогай хэлпера link_to,
перадаўшы класы Bootstrap і target: '_blank' у якасці аргументаў. Таксама
звярніце ўвагу на перанос радкоў: Ruby дазваляе гэта рабіць, каб код быў больш
чытабельны (асабліва, калі вы яго публікуеце на Github).
Зараз кліентская частка нашага прыкладання больш падобная да рэальнага вэб-сайту, хаця пакуль бракуе кантэнту. Але мы гэта выправім у хуткім часе.