1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
|
<com:TContent ID="Main">
<h1>Membuat Halaman <tt>ListPost</tt></h1>
<p>
Halaman <tt>ListPost</tt> menampilkan tulisan blog terakhir dalam sebuah daftar. Jika di sana terlalu banyak tulisan, maka akan ditampilkan dalam beberapa lembar halaman.
</p>
<p>
Sebelum kita berlanjut dengan implementasi, kita ingin mengarahkan homepage kita ke halaman <tt>ListPage</tt> mendatang, karena kita ingin para pengguna melihat tulisan terakhir saat mereka menyentuh website. Untuk melakukannya, kita mengubah konfigurasi aplikasi <tt>protected/application.xml</tt> sebagai berikut,
</p>
<com:TTextHighlighter CssClass="source" Language="xml">
......
<services>
<service id="page" class="TPageService" DefaultPage="posts.ListPost">
<pages MasterClass="Application.layouts.MainLayout" />
</service>
</services>
</com:TTextHighlighter>
<p>
Sekarang kita membuat file template dan kelas untuk halaman <tt>ListPost</tt>: <tt>protected/pages/posts/ListPost.page</tt> dan <tt>protected/pages/posts/ListPost.php</tt>.
</p>
<h2>Membuat Template Halaman</h2>
<p>
Berdasarkan pada kebutuhan fungsionalitas halaman <tt>ListPost</tt>, kita akan menggunakan dua kontrol dalam template halaman:
</p>
<ul>
<li><a href="http://www.pradosoft.com/demos/quickstart/?page=Controls.Repeater">TRepeater</a>: kontrol ini dipakai terutama untuk menampilkan daftar atas item data. Penyajian dari setiap item data bisa ditetapkan melalui template inline atau kontrol template eksternal (pendekatan yang akan kita gunakan di sini).</li>
<li><a href="http://www.pradosoft.com/demos/quickstart/?page=Controls.Pager">TPager</a>: kontrol ini dipakai untuk memecah daftar item data. Ia berinteraksi dengan pengguna-akhir untuk menentukan halaman data mana yang ditampilkan dalam <a href="http://www.pradosoft.com/demos/quickstart/?page=Controls.List">kontrol daftar</a> (misalnya <tt>TListBox</tt>) pada <a href="http://www.pradosoft.com/demos/quickstart/?page=Controls.Data">kontrol data</a> (misalnya <tt>TRepeater</tt>).</li>
</ul>
<p>
Di bawah ini adalah konten dalam template halaman:
</p>
<com:TTextHighlighter CssClass="source" Language="prado">
<%@ Title="My Blog" %>
<com:TContent ID="Main">
<com:TRepeater ID="Repeater"
ItemRenderer="Application.pages.posts.PostRenderer"
AllowPaging="true"
AllowCustomPaging="true"
PageSize="5"
/>
<com:TPager ControlToPaginate="Repeater" OnPageIndexChanged="pageChanged" />
</com:TContent>
</com:TTextHighlighter>
<p>
Dalam pengulang, kita menetapkan bahwa konten yang diulang ditampilkan menggunakan penyaji item <tt>PostRenderer</tt> yang akan kita buat nantinya. Agar PRADO bisa menemukan kelas ini, kita memberikan namespace <tt>Application.pages.posts.PostRenderer</tt>, berarti file kelasnya adalah <tt>protected/pages/posts/PostRenderer.php</tt>.
</p>
<p>
Kita juga menyetel beberapa properti lain pada pengulang untuk menghidupkan lembaran halaman. Dan kita menyetel properti <tt>ControlToPaginate</tt> pada lembaran agar ia mengetahui konten mana yang diulang harus dibuat lembaran.
</p>
<h2>Membuat Kelas Halaman</h2>
<p>
Dari template halaman di atas, kita melihat bahwa kita perlu menulis kelas halaman yang mengimplementasikan pengendali event: <tt>pageChanged()</tt> (ditempelkan ke event lembaran <tt>OnPageIndexChanged</tt>). Kita juga perlu mempopulasikan data tulisan ke dalam pengulang berdasarkan pada setelan lembaran saat ini. Berikut ini adalah kode sumber lengkap kelas halaman:
</p>
<com:TTextHighlighter CssClass="source" Language="php">
class ListPost extends TPage
{
/**
* Menginisialisasi pengulang.
* Metode ini dipanggil oleh kerangka kerja saat menginisialisasi halaman
* @param mixed event parameter
*/
public function onInit($param)
{
parent::onInit($param);
if(!$this->IsPostBack) // jika halaman diminta pertama kali
{
// ambil jumlah total tulisan yang tersedia
$this->Repeater->VirtualItemCount=PostRecord::finder()->count();
// populasikan data tulisan ke dalam pengulang
$this->populateData();
}
}
/**
* Pengendali event untuk event OnPageIndexChanged pada lembaran.
* Metode ini dipanggil saat pengguna mengklik tombol halaman
* dan kemudian mengubah halaman tulisan yang ditampilkan.
*/
public function pageChanged($sender,$param)
{
// ubah indeks halaman sekarang ke yang baru
$this->Repeater->CurrentPageIndex=$param->NewPageIndex;
// re-populasi data ke dalam pengulang
$this->populateData();
}
/**
* Menentukan halaman tulisan mana yang ditampilkan dan
* mempopulasi pengulang dengan data yang sudah diambil.
*/
protected function populateData()
{
$offset=$this->Repeater->CurrentPageIndex*$this->Repeater->PageSize;
$limit=$this->Repeater->PageSize;
if($offset+$limit>$this->Repeater->VirtualItemCount)
$limit=$this->Repeater->VirtualItemCount-$offset;
$this->Repeater->DataSource=$this->getPosts($offset,$limit);
$this->Repeater->dataBind();
}
/**
* Mengambil tulisan dari database dengan ofset dan limit.
*/
protected function getPosts($offset, $limit)
{
// Bentuk kriteria query
$criteria=new TActiveRecordCriteria;
$criteria->OrdersBy['create_time']='desc';
$criteria->Limit=$limit;
$criteria->Offset=$offset;
// query untuk tulisan dengan kriteria di atas dan informasi pembuat
return PostRecord::finder()->withAuthor()->findAll($criteria);
}
}
</com:TTextHighlighter>
<h2>Membuat <tt>PostRenderer</tt></h2>
<p>
Kita masih perlu untuk membuat kelas penyaji item <tt>PostRenderer</tt>. Ia mendefinisikan bagaimana setiap tulisan harus ditampilkan dalam pengulang. Kita membuatnya sebagai kontrol template yang membolehkan kita untuk menetapkan penyajian tulisan menggunakan sintaks template fleksibel kita. Template dan file kelas masing-masing disimpan sebagai <tt>PostRenderer.tpl</tt> dan <tt>PostRenderer.php</tt> di bawah direktori <tt>protected/pages/posts</tt>.
</p>
<h3>Membuat Template Penyaji</h3>
<p>
Template penyaji menetapkan penyajian berbagai field dalam sebuah tulisan, termasuk judul, nama pembuat, waktu penulisan dan kontennya. Kita me-link judul tulisan ke <tt>ReadPost</tt> yang menampilkan lebih rinci atas tulisan yang dipilih.
</p>
<p>
Ekspresi <tt>$this->Data</tt> merujuk ke item data yang dikirimkan ke pengulang. Dalam kasus kita, ia adalah obyek <tt>PostRecord</tt>. Perhatikan bagaimana kita mengambil nama pembuat pada tulisan dengan <tt>$this->Data->author->username</tt>.
</p>
<com:TTextHighlighter CssClass="source" Language="prado">
<div class="post-box">
<h3>
<com:THyperLink Text="<%# $this->Data->title %>"
NavigateUrl="<%# $this->Service->constructUrl('posts.ReadPost',array('id'=>$this->Data->post_id)) %>" />
</h3>
<p>
Author:
<com:TLiteral Text="<%# $this->Data->author->username %>" /><br/>
Time:
<com:TLiteral Text="<%# date('m/d/Y h:m:sa', $this->Data->create_time) %>" />
</p>
<p>
<com:TLiteral Text="<%# $this->Data->content %>" />
</p>
</div>
</com:TTextHighlighter>
<h3>Membuat Kelas Penyaji</h3>
<p>
Kelas penyaji sangat sederhana. Ia diperluas dari <tt>TRepeaterItemRenderer</tt> dan tidak berisi kode apapun.
</p>
<com:TTextHighlighter CssClass="source" Language="php">
class PostRenderer extends TRepeaterItemRenderer
{
}
</com:TTextHighlighter>
<h2>Pengujian</h2>
<p>
Untuk menguji halaman <tt>ListPost</tt>, kunjungi URL <tt>http://hostname/blog/index.php</tt> (ingat kita telah menyetel <tt>ListPost</tt> sebagai homepage baru kita). Kita akan melihat hasil seperti berikut. Karena kita hanya mempunyai satu tulisan saat ini, lembaran tidak akan muncul. Nantinya ketika menyelesaikan <tt>NewPost</tt>, kita dapat menambah tulisan lebih banyak dan datang kembali untuk menguji lembaran halaman lagi.
</p>
<img src="<%~ output.gif %>" class="output" />
</com:TContent>
|
