Ruby on Rails - Tampilan
A Rails View adalah program ERb yang berbagi data dengan pengontrol melalui variabel yang dapat diakses bersama.
Jika Anda melihat di direktori app / views dari aplikasi perpustakaan, Anda akan melihat satu subdirektori untuk masing-masing pengontrol, kami telah membuat: book. Masing-masing subdirektori ini dibuat secara otomatis saat pengontrol bernama sama dibuat dengan skrip generate.
Rails memberi tahu Anda bahwa Anda perlu membuat file tampilan untuk setiap metode baru. Setiap metode yang Anda tetapkan di pengontrol harus memiliki yang sesuaierb file, dengan nama yang sama dengan metode, untuk menampilkan data yang dikumpulkan metode.
Jadi mari kita buat file tampilan untuk semua metode yang telah kita definisikan di book_controller.rb. Saat menjalankan tampilan ini, periksa secara bersamaan tindakan ini dapat diterapkan ke database atau tidak.
Membuat Lihat File untuk Metode daftar
Buat file bernama list.html.erbmenggunakan editor teks favorit Anda dan menyimpannya ke aplikasi / tampilan / buku. Setelah membuat dan menyimpan file, segarkan browser web Anda. Anda akan melihat halaman kosong; jika tidak, periksa ejaan file Anda dan pastikan itu sama persis dengan metode pengontrol Anda.
Sekarang, tampilkan konten sebenarnya. Mari kita masukkan kode berikut ke list.html.erb.
<% if @books.blank? %>
<p>There are not any books currently in the system.</p>
<% else %>
<p>These are the current books in our system</p>
<ul id = "books">
<% @books.each do |c| %>
<li><%= link_to c.title, {:action => 'show', :id => c.id} -%></li>
<% end %>
</ul>
<% end %>
<p><%= link_to "Add new Book", {:action => 'new' }%></p>Kode yang akan dieksekusi adalah untuk memeriksa apakah array @books memiliki objek di dalamnya. Itu.blank?metode mengembalikan nilai true jika array kosong, dan false jika berisi objek apa pun. Objek @books ini dibuat di controller di dalam metode list.
Kode antara tag <% =%> adalah a link_topemanggilan metode. Parameter pertama dari link_to adalah teks yang akan ditampilkan di antara tag <a>. Parameter kedua adalah apa yang disebut tindakan ketika tautan diklik. Dalam hal ini, ini adalah metode pertunjukan. Parameter terakhir adalah id buku yang dilewatkan melalui objek params.
Sekarang, coba segarkan browser Anda dan Anda akan mendapatkan layar berikut karena kami tidak memiliki buku di perpustakaan kami.
Membuat File Tampilan untuk Metode baru
Sampai saat ini, kami tidak memiliki buku di perpustakaan kami. Kami harus membuat beberapa buku dalam sistem. Jadi, mari kita rancang tampilan yang sesuai dengannew metode yang ditentukan di book_controller.rb.
Buat file bernama new.html.erb menggunakan editor teks favorit Anda dan simpan ke app / views / book. Tambahkan kode berikut ke file new.html.erb.
<h1>Add new book</h1>
<%= form_tag :action => 'create' do %>
<p><label for = "book_title">Title</label>:
<%= text_field 'books', 'title' %></p>
<p><label for = "book_price">Price</label>:
<%= text_field 'books', 'price' %></p>
<p><label for = "book_subject_id">Subject</label>:
<%= collection_select(:books, :subject_id, @subjects, :id, :name, prompt: true) %></p>
<p><label for = "book_description">Description</label><br/>
<%= text_area 'books', 'description' %></p>
<%= submit_tag "Create" %>
<% end -%>
<%= link_to 'Back', {:action => 'list'} %>Sini form_tagmetode menafsirkan kode Ruby menjadi tag <form> HTML biasa menggunakan semua informasi yang diberikan padanya. Tag ini, misalnya, menghasilkan HTML berikut -
<form action = "/book/create" method = "post">Metode selanjutnya adalah text_fieldyang menghasilkan bidang teks <input>. Parameter untuk text_field adalah objek dan nama field. Dalam hal ini objeknya adalah buku dan namanya adalah judul .
Metode rel disebut collection_select, membuat menu pemilihan HTML yang dibangun dari larik, seperti @books satu. Ada lima parameter, yaitu sebagai berikut -
:book- Objek yang kamu manipulasi. Dalam hal ini, itu adalah objek buku.
:subject_id - Bidang yang diisi saat buku disimpan.
@books - Array yang sedang Anda kerjakan.
:id- Nilai yang disimpan di database. Dalam hal HTML, ini adalah parameter nilai dari tag <option>.
:name- Output yang dilihat pengguna di menu pull-down. Ini adalah nilai di antara tag <option>.
Yang digunakan selanjutnya adalah submit_tag, yang mengeluarkan tombol <input> yang mengirimkan formulir. Terakhir, adaend metode yang diterjemahkan menjadi </form>.
Buka browser Anda dan kunjungi http://localhost:3000/book/new. Ini akan memberi Anda layar berikut.
Masukkan beberapa data di formulir ini lalu klik tombol Buat. Di sini saya telah menambahkan detail berikut ke dalam bidang -
Title: Advance Physics
Price: 390
Subject: Physics
Description: This is test to create new bookSaat Anda mengklik Create tombol, itu akan memanggil create metode, yang tidak memerlukan tampilan apa pun karena metode ini menggunakan salah satunya list atau newmetode untuk melihat hasil. Jadi, ketika Anda mengklik tombol Buat, data harus berhasil dikirim dan mengarahkan Anda ke halaman daftar, di mana Anda sekarang memiliki satu item yang terdaftar sebagai berikut -
Jika Anda mengklik link tersebut, Anda akan melihat kesalahan Template hilang, karena Anda belum membuat file template untuk metode pertunjukan.
Membuat File Tampilan untuk Metode pertunjukan
Metode ini akan menampilkan detail lengkap tentang buku apa pun yang tersedia di perpustakaan. Buat file show.html.erb di bawah app / views / book dan isi dengan kode berikut -
<h1><%= @book.title %></h1>
<p>
<strong>Price: </strong> $<%= @book.price %><br />
<strong>Subject :</strong> <%= @book.subject.name %><br />
<strong>Created Date:</strong> <%= @book.created_at %><br />
</p>
<p><%= @book.description %></p>
<hr />
<%= link_to 'Back', {:action => 'list'} %>Ini adalah pertama kalinya Anda memanfaatkan sepenuhnya asosiasi, yang memungkinkan Anda menarik data dengan mudah dari objek terkait.
Format yang digunakan adalah @variable.relatedObject.column. Dalam contoh ini, Anda dapat menarik nilai nama subjek melalui variabel @book menggunakanbelongs_toasosiasi. Jika klik pada catatan yang terdaftar maka itu akan menunjukkan kepada Anda layar berikut.
Membuat View File untuk Metode edit
Buat file baru bernama edit.html.erb dan simpan di app / views / book. Isi dengan kode berikut -
<h1>Edit Book Detail</h1>
<%= form_for @book, :url =>{:action => "update", :id =>@book} do |f| %>
<p>Title: <%= f.text_field 'title' %></p>
<p>Price: <%= f.text_field 'price' %></p>
<p>Subject: <%= f.collection_select :subject_id, Subject.all, :id, :name %></p>
<p>Description<br/>
<%= f.text_area 'description' %></p>
<%= f.submit "Save changes" %>
<% end %>
<%= link_to 'Back', {:action => 'list' } %>Kode ini sangat mirip dengan new metode kecuali tindakan yang akan diperbarui alih-alih membuat dan menentukan id.
Dalam skenario ini, kami menggunakan form_fortag untuk tindakan formulir. Ini akan bekerja lebih baik daripadaform_tag. Mengapa karena itu akan membuat interaksi dengan Model dengan mudah. Oleh karena itu, lebih baik menggunakan tag form_for setiap kali Anda membutuhkan interaksi antara model dan bidang formulir.
Pada titik ini, kami membutuhkan beberapa modifikasi pada file list method'sLihat file. Buka elemen <li> </li> dan ubah agar terlihat seperti berikut -
<li>
<%= link_to c.title, {:action => "show", :id => c.id} -%>
<b> <%= link_to 'Edit', {:action => "edit",
:id => c.id} %></b>
</li>Sekarang, coba ramban buku menggunakan http://localhost:3000/book/list. Ini akan memberi Anda daftar semua buku bersama Editpilihan. Ketika Anda mengklik opsi Edit, maka Anda akan melihat layar berikutnya sebagai berikut -
Sekarang, Anda mengedit informasi ini dan kemudian klik tombol Simpan Perubahan . Ini akan menghasilkan panggilan keupdatemetode yang tersedia di file pengontrol dan itu akan memperbarui semua atribut yang diubah. Perhatikan bahwaupdate metode tidak memerlukan file tampilan karena menggunakan salah satunya show atau edit metode untuk menunjukkan hasilnya.
Membuat View File untuk Hapus Metode
Menghapus informasi dari database menggunakan Ruby on Rails hampir terlalu mudah. Anda tidak perlu menulis kode tampilan apa pun untuk metode delete karena metode ini sedang digunakanlistmetode untuk menampilkan hasilnya. Jadi, mari kita ubah list.html.erb lagi dan tambahkan tautan hapus.
Buka elemen <li> </li> dan ubah agar terlihat seperti berikut -
<li>
<%= link_to c.title, {:action => 'show', :id => c.id} -%>
<b> <%= link_to 'Edit', {:action => 'edit', :id => c.id} %></b>
<b> <%= link_to "Delete", {:action => 'delete', :id => c.id},
:confirm => "Are you sure you want to delete this item?" %></b>
</li>Itu :confirmparameter menampilkan kotak konfirmasi JavaScript yang menanyakan apakah Anda benar-benar ingin melakukan tindakan tersebut. Jika pengguna mengklik OK, tindakan dilanjutkan, dan item dihapus.
Sekarang, coba ramban buku menggunakan http://localhost:3000/book/list. Ini akan memberi Anda daftar semua buku bersama Edit dan Delete pilihan sebagai berikut -
Sekarang menggunakan opsi Hapus, Anda dapat menghapus semua catatan yang terdaftar.
Membuat File Tampilan untuk Metode show_subjects
Buat file baru, show_subjects.html.erb, di direktori app / views / book dan tambahkan kode berikut ke dalamnya -
<h1><%= @subject.name -%></h1>
<ul>
<% @subject.books.each do |c| %>
<li><%= link_to c.title, :action => "show", :id => c.id -%></li>
<% end %>
</ul>Anda mengambil keuntungan dari asosiasi dengan mengulang melalui daftar buku satu subjek.
Sekarang ubah baris Subjek: show.html.erb sehingga daftar subjek menunjukkan tautan.
<strong>Subject: </strong> <%= link_to @book.subject.name,
:action => "show_subjects", :id => @book.subject.id %><br />Ini akan menampilkan daftar subjek pada halaman indeks, sehingga pengguna dapat mengaksesnya secara langsung.
Memodifikasi list.html.erb untuk menambahkan berikut ini ke bagian atas file -
<ul id = "subjects">
<% Subject.find(:all).each do |c| %>
<li><%= link_to c.name, :action => "show_subjects", :id => c.id %></li>
<% end %>
</ul>Sekarang coba jelajahi buku menggunakan http: // localhost: 3000 / book / list. Ini akan menampilkan semua subjek dengan tautan sehingga Anda dapat menelusuri semua buku yang terkait dengan subjek itu.
Apa selanjutnya?
Semoga sekarang Anda merasa nyaman dengan semua pengoperasian Rails.
Bab selanjutnya menjelaskan cara menggunakan Layoutsuntuk menjadikan data Anda lebih baik. Kami akan menunjukkan cara menggunakan CSS di aplikasi Rails Anda.