Third Online.rb

Pada online.rb yang ke tiga ini, kami melanjutkan project yang sebelumnya. Kalo pertemuan minggu lalu cuma posting berita tentu saja berbeda dengan yang semalam, kami menambahkan untuk menampilkan data yang telah di entrykan dengan menggunakan paging. Juga ada penambahan live-search (pake ajax) kalo mas aziz bilang. Dengan adanya tambahan fasilitas ini, tentu saja kita perlu mengubah beberapa script yang pernah kita buat sebelumnya. Yang pertama adalah penambahan method pada controller berita, dengan menggunakan generate ulang controller berita.

[root@ditto berita]# ./script/generate controller berita index view

exists app/controllers/
exists app/helpers/
exists app/views/berita
exists test/functional/
overwrite app/controllers/berita_controller.rb? [Ynaqd] n
skip app/controllers/berita_controller.rb
identical test/functional/berita_controller_test.rb
identical app/helpers/berita_helper.rb
identical app/views/berita/index.rhtml
create app/views/berita/view.rhtml
[root@ditto berita]#

Command generate diatas diperlukan untuk create file view.rhtml dan penambahan method pada berita_controller.rb yang perubahannya bisa kita lihat seperti di bawah :

class BeritaController < ApplicationController

def index
redirect_to :action => “new”
end

def new
end

def view
condition = “judul LIKE ‘%#{params[:query]}%’”
@total = Berita.count(:conditions => condition)
@pages, @record = paginate(:beritas, :conditions => condition, :per_page => 10)
end

def proses_insert
if request.post?
@masuk=Berita.new(params[:masuk])
if @masuk.save
flash[:notice] = “udah masuk”
redirect_to :action => “new”
else
flash[:notice] = “nggak masuk”
render :action => ‘new’
end
end
end

end

Berikut beberapa penjelasan dari script di atas :

  • condition = “judul LIKE ‘%#{params[:query]}%’”
    condition adalah sebuah variabel yang menunjukkan kondisi yang dijalankan ketika query select berjalan (jika di mysql kita mengenalnya sebagai => where judul like ‘%params[:query]%’)
  • @total = Berita.count(:conditions => condition)
    @total adalah jumlah row dari hasil query
  • @pages, @record = paginate(:beritas, :conditions => condition, :per_page => 10)
    @record berfungsi untuk menghitung jumlah row hasil query dengan batas maksimal 10 record, sedangkan @pages diperoleh dari jumlah seluruh record setelah dibagi dengan 10 dan kemudian di tambah 1

Kemudian pada file app/views/berita/view.rhtml yang dibentuk dari hasil generate controller berita pada tahap sebelumnya, kita bisa menambahkan script berikut :

<%= stylesheet_link_tag ’scaffold’ %>
<%= javascript_include_tag :defaults %>
<div id=”table”>
<h1>Berita#view</h1>
<form name=”sform” action=”" style=”display:inline;”>
Search Judul:
<%= text_field_tag(”query”, params['query'], :size => 15 ) %>
</form>
<h2><font color=”red”><%= flash[:notice] %></font></h2>

<% if @total == 0 %>
<p>No items found…</p>
<% else %>
<p>Number of items found : <b><%= @total %></b></p>
<% end %>

<p>
<% if @pages.page_count > 1 %>
Page :
<%= pagination_links_remote @pages, ‘berita’ %>
<%= image_tag(”/images/spinner.gif”,
:align => “absmiddle”,
:border => 0,
:id => “spinner”,
:style =>”display: none;” ) %>
<%= observe_field ‘query’, :frequency => 2,
:update => ‘table’,
:before => “Element.show(’spinner’)”,
:success => “Element.hide(’spinner’)”,
:url => {:action => :view},
:with => ‘query’ %>
<% end %>
</p>

<%= link_to “Masukkan Baru”, :action => :new %>
<table border=”0″ width=”900″>
<tr bgcolor=”#999999″>
<td width=”10″><b>No.</b></td>
<td><b>Judul</b></td>
<td><b>Isi</b></td>
</tr>
<% if @total == 0 %>
<tr>
<td colspan=”2″>no data found!</td>
</tr>
<% else %>
<% b = 1 + ((@pages.current_page.to_i – 1) * @pages.items_per_page.to_i) %>
<% @record.each do |t| %>
<tr>
<td><%= b %></td>
<td><%= t.judul %></td>
<td><%= t.isi %></td>
</tr>
<% b += 1 %>
<% end %>
<% end %>
</table>
</div>

Lalu pada file app/helpers/berita_helper.rb kita masukkan script berikut :

module BeritaHelper
def pagination_links_remote(paginator, action)
page_options = {:window_size => 2}
pagination_links_each(paginator, page_options) do |n|
options = {
:url => {:action => action, :params => params.merge({:page => n})},
:update => ‘table’,
:before => “Element.show(’spinner’)”,
:success => “Element.hide(’spinner’)”
}
html_options = {:href => url_for(:action => action, :params => params.merge({:page => n}))}
link_to_remote(n.to_s, options, html_options)
end
end
end

Setelah itu, jalankan server dengan menggunakan command ./script/server pada dokumen root project ini. Arahkan browser ke http://localhost:3000/berita/new lalu isikan data minimal 10 record, kemudian kita lihat hasilnya pada http://localhost:3000/berita/view. Semua yang telah kita lakukan telah berhasil ketika pada http://localhost:3000/berita/view tampil kurang lebih seperti gambar di bawah :

PagingNLiveSearch

Keterangan Gambar :

A : Bagian ini adalah form yang digunakan untuk melakukan live-search judul menggunakan ajax. Pada saat form ini diisi bagian dari judul yang dicari, akan terjadi proses berikut pada file view.rhtml :

<%= observe_field ‘query’, :frequency => 2,
:update => ‘table’,
:before => “Element.show(’spinner’)”,
:success => “Element.hide(’spinner’)”,
:url => {:action => :view},
:with => ‘query’ %>
<% end %>

B : Angka 14 pada bagian ini adalah jumlah record yang telah diseleksi dan diperoleh dari controller berita yang variabelnya telah didefinisikan pada proses :

@total = Berita.count(:conditions => condition)

C : Bagian ini adalah link paging, sedangkan gambar di sebelah link2 (spinner.gif) tersebut adalah file image bernama spiner.gif yang terletak pada path public/image/spiner.gif. Gambar tersebut akan tampil ketika webserver melakukan suatu query dan akan hilang dengan sendirinya ketika query berakhir. Sedangkan script yang ambil bagian pada hal ini adalah :

<%= image_tag(”/images/spinner.gif”,
:align => “absmiddle”,
:border => 0,
:id => “spinner”,
:style =>”display: none;” ) %>

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Tags: , , , ,

One Response to “Third Online.rb”

  1. rubyonrails Says:

    great! :thumbs

    [Reply]

Leave a Reply