Ruby on Rails 2.1 - Tata Letak
Tata letak menentukan lingkungan sekitar halaman HTML. Ini adalah tempat untuk menentukan tampilan dan nuansa umum dari hasil akhir Anda. File tata letak berada di app / views / layouts.
Prosesnya melibatkan penentuan template tata letak dan kemudian memberi tahu pengontrol bahwa itu ada dan tersedia untuk digunakan. Pertama, mari buat template.
Tambahkan file baru bernama standard.rhtml ke app / views / layouts. Anda memberi tahu pengontrol template apa yang akan digunakan dengan nama file, jadi mengikuti penamaan yang sama disarankan.
Tambahkan kode berikut ke file standard.rhtml baru dan simpan perubahan Anda -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;.
charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<title>Library Info System</title>
<%= stylesheet_link_tag "style" %>
</head>
<body id="library">
<div id="container">
<div id="header">
<h1>Library Info System</h1>
<h3>Library powered by Ruby on Rails</h3>
</div>
<div id="content">
<%= yield -%>
</div>
<div id="sidebar"></div>
</div>
</body>
</html>Semua yang baru saja Anda tambahkan adalah elemen HTML standar kecuali dua baris dengan ekstensi stylesheet_link_tagmetode helper yang mengeluarkan stylesheet <link>. Dalam contoh ini, kami menghubungkan stylesheet style.css. Ituyield perintah memungkinkan Rails mengetahui bahwa ia harus meletakkan RHTML untuk metode yang dipanggil di sini.
Sekarang buka book_controller.rb dan tambahkan baris berikut tepat di bawah baris pertama -
class BookController < ApplicationController
layout 'standard'
def list
@books = Book.find(:all)
end
...................Ini mengarahkan pengontrol yang ingin kita gunakan tata letak yang tersedia di file standard.rhtml. Sekarang, coba jelajahi buku yang akan menghasilkan layar berikut.
Menambahkan Stylesheet
Sampai sekarang, kami belum membuat stylesheet apa pun, jadi Rails menggunakan stylesheet default. Sekarang, mari buat file baru bernama style.css dan simpan di / public / stylesheets. Tambahkan kode berikut ke file ini.
body {
font-family: Helvetica, Geneva, Arial, sans-serif;
font-size: small;
font-color: #000;
background-color: #fff;
}
a:link, a:active, a:visited {
color: #CD0000;
}
input {
margin-bottom: 5px;
}
p {
line-height: 150%;
}
div#container {
width: 760px;
margin: 0 auto;
}
div#header {
text-align: center;
padding-bottom: 15px;
}
div#content {
float: left;
width: 450px;
padding: 10px;
}
div#content h3 {
margin-top: 15px;
}
ul#books {
list-style-type: none;
}
ul#books li {
line-height: 140%;
}
div#sidebar {
width: 200px;
margin-left: 480px;
}
ul#subjects {
width: 700px;
text-align: center;
padding: 5px;
background-color: #ececec;
border: 1px solid #ccc;
margin-bottom: 20px;
}
ul#subjects li {
display: inline;
padding-left: 5px;
}Sekarang, segarkan browser Anda dan lihat perbedaannya -
Apa selanjutnya?
Bab selanjutnya menjelaskan cara mengembangkan aplikasi dengan Rails Scaffolding untuk memberi pengguna akses untuk menambah, menghapus, dan memodifikasi record di database mana pun.