summaryrefslogtreecommitdiff
path: root/demos/blog-tutorial/protected/pages/Day3/id/CreateNewUser.page
blob: d90df01f5e6fd24e587c35d96de33126af756dd0 (plain)
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
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
<com:TContent ID="Main">

<h1>Membuat Halaman <tt>NewUser</tt></h1>

<p>
Halaman <tt>NewUser</tt> disediakan untuk pengguna administrator guna membuat akun pengguna baru. Ini perlu menampilkan sebuah formulir yang mengumpulkan informasi mengenai akun pengguna baru. Berdasarkan <a href="?page=Day2.CreateDB">definisi database</a>, kita akan perlu mengumpulkan informasi berikut:
</p>

<ul>
<li><tt>username</tt> - string, diperlukan dan unik</li>
<li><tt>email</tt> - string, diperlukan dan unik</li>
<li><tt>password</tt> - string, diperlukan</li>
<li><tt>role</tt> - integer, diperlukan (baik 0 ataupun 1)</li>
<li><tt>first_name</tt> - string, opsional</li>
<li><tt>last_name</tt> - string, opsional</li>
</ul>

<p>
Kita membuat dua file <tt>protected/pages/users/NewUser.page</tt> dan <tt>protected/pages/users/NewUser.php</tt> masing-masing untuk menyimpan template halaman dan kelas halaman.
</p>

<h2>Membuat Template Halaman</h2>
<p>
Berdasarkan pada analisis di atas, kita menulis template halaman seperti berikut:
</p>

<com:TTextHighlighter CssClass="source" Language="prado">
&lt;%@ Title="My Blog - New User" %>

&lt;com:TContent ID="Main">

<h1>Create New User</h1>

<span>Username:</span>
&lt;com:TRequiredFieldValidator
    ControlToValidate="Username"
    ErrorMessage="Please provide a username."
    Display="Dynamic" />
&lt;com:TCustomValidator
    ControlToValidate="Username"
    ErrorMessage="Sorry, your username is taken by someone else. Please choose another username."
    OnServerValidate="checkUsername"
    Display="Dynamic" />
<br/>
&lt;com:TTextBox ID="Username" />

<br/>
<span>Password:</span>
&lt;com:TRequiredFieldValidator
    ControlToValidate="Password"
    ErrorMessage="Please provide a password."
    Display="Dynamic" />
<br/>
&lt;com:TTextBox ID="Password" TextMode="Password" />

<br/>
<span>Re-type Password:</span>
&lt;com:TCompareValidator
    ControlToValidate="Password"
    ControlToCompare="Password2"
    ErrorMessage="Your password entries did not match."
    Display="Dynamic" />
<br/>
&lt;com:TTextBox ID="Password2" TextMode="Password" />

<br/>
<span>Email Address:</span>
&lt;com:TRequiredFieldValidator
    ControlToValidate="Email"
    ErrorMessage="Please provide your email address."
    Display="Dynamic" />
&lt;com:TEmailAddressValidator
    ControlToValidate="Email"
    ErrorMessage="You entered an invalid email address."
    Display="Dynamic" />
<br/>
&lt;com:TTextBox ID="Email" />

<br/>
<span>Role:</span>
<br/>
&lt;com:TDropDownList ID="Role">
    &lt;com:TListItem Text="Normal User" Value="0" />
    &lt;com:TListItem Text="Administrator" Value="1" />
&lt;/com:TDropDownList>

<br/>
<span>First Name:</span>
<br/>
&lt;com:TTextBox ID="FirstName" />

<br/>
<span>Last Name:</span>
<br/>
&lt;com:TTextBox ID="LastName" />

<br/>
&lt;com:TButton Text="Create" OnClick="createButtonClicked" />

&lt;/com:TContent>
</com:TTextHighlighter>

<p>
Template tidak jauh berbeda dari template <tt>Contact</tt> dan halaman <tt>LoginUser</tt>. Sebagian besar terdiri dari kotak teks dan validator. Beberapa kotak teks, seperti nama pengguna, dikaitkan dengan dua validator karena keterlibatan aturan multipel validasi.
</p>


<h2>Membuat Kelas Halaman</h2>

<p>
Dari template halaman di atas, kita melihat bahwa kita perlu untuk menulis sebuah kelas halaman yang mengimplementasikan dua pengendali event: <tt>checkUsername()</tt> (disertakan ke event validator kustom <tt>OnServerValidate</tt>) dan <tt>createButtonClicked()</tt> (disertakan ke event tombol "create" <tt>OnClick</tt>). Oleh karena itu, kita menulis kelas halaman seperti berikut:
</p>

<com:TTextHighlighter CssClass="source" Language="php">
class NewUser extends TPage
{
    /**
     * Memeriksa apakah nama pengguna sudah ada dalam database.
     * Metode ini merespon ke event OnServerValidate pada validator kustom nama pengguna.
     * @param mixed event sender
     * @param mixed event parameter
     */
    public function checkUsername($sender,$param)
    {
        // benar jika nama pengguna tidak ditemukan dalam database
        $param->IsValid=UserRecord::finder()->findByPk($this->Username->Text)===null;
    }

    /**
     * Membuat akun pengguna baru jika semua input benar.
     * Metode ini merespon ke event OnClick pada tombol "create".
     * @param mixed event sender
     * @param mixed event parameter
     */
    public function createButtonClicked($sender,$param)
    {
        if($this->IsValid)  // ketika semua validasi sukses
        {
            // populasikan obyek UserRecord dengan input pengguna
            $userRecord=new UserRecord;
            $userRecord->username=$this->Username->Text;
            $userRecord->password=$this->Password->Text;
            $userRecord->email=$this->Email->Text;
            $userRecord->role=(int)$this->Role->SelectedValue;
            $userRecord->first_name=$this->FirstName->Text;
            $userRecord->last_name=$this->LastName->Text;

            // simpan database melalui mekanisme Rekaman Aktif
            $userRecord->save();

            // alihkan browser ke homepage
			$this->Response->redirect($this->Service->DefaultPageUrl);
        }
    }
}
</com:TTextHighlighter>

<p>
Dalam kode di atas, memanggil <tt>save()</tt> akan menyisipkan baris baru dalam tabel <tt>users</tt>. Fitur intuitif ini dihidupkan oleh <a href="http://www.pradosoft.com/demos/quickstart/?page=Database.ActiveRecord">Rekaman Aktif</a>.
</p>

<com:NoteBox>
Untuk memudahkan, nama pengguna dalam sistem blg kita adalah tidak sensitif-huruf! Dalam banyak sistem praktis, nama pengguna mungkin perlu sensitif-huruf. Maka penanganan khusus perlu dibuat saat pembuatan akun pengguna baru dan juga <a href="?page=Day3.Auth">melakukan otentikasi</a>. Juga, ruang kosong dalam nama pengguna perlu dipotong ketika membuat akun baru dengan itu.
</com:NoteBox>


<h2>Pengujian</h2>
<p>
Untuk menguji halaman <tt>NewUser</tt>, kunjungi URL <tt>http://hostname/blog/index.php?page=users.NewUser</tt>. Kita akan melihat output halaman berikut. Coba masukan informasi berbeda ke dalam formulir dan lihat bagaimana input divalidasi. Jika semua aturan validasi memuaskan, kita akan mengharapkan akun pengguna dibuat dan browser dialihkan ke homepage.
</p>

<img src="<%~ output2.gif %>" class="output"/>


<h2>Menambahkan Pemeriksaan Perijinan</h2>
<p>
Selama pengujian, Anda mungkin bertanya: apakah halaman <tt>NewUser</tt> seharusnya hanya bisa diakses oleh pengguna administrator? Ya, ini disebut <a href="http://www.pradosoft.com/demos/quickstart/?page=Advanced.Auth">otorisasi</a>. Sekarang kami menjelaskan bagaimana kita menambahkan pemeriksaan perijinan ini ke halaman <tt>NewUser</tt>.
</p>

<p>
Cara langsung pada pemeriksaan perijinan adalah dalam kelas halaman di mana kita memeriksa apakah <tt>$this->User->IsAdmin</tt> adalah true, dan jika tidak, kita mengalihkan browser ke halaman <tt>LoginUser</tt>.
</p>

<p>
PRADO menawarkan cara lebih sistematis terhadap pemeriksaan perijinan akses halaman. Untuk melakukannyaTo , kita perlu menggunakan <a href="http://www.pradosoft.com/demos/quickstart/?page=Configurations.PageConfig">konfigurasi halaman</a>. Membuat sebuah file <tt>protected/pages/users/config.xml</tt> dengan konten seperti berikut:
</p>

<com:TTextHighlighter CssClass="source" Language="xml">
<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <authorization>
    <allow roles="admin" />
    <deny users="*" />
  </authorization>
</configuration>
</com:TTextHighlighter>

<p>
Konfigurasi halaman berisi aturan otorisasi yang berlaku untuk halaman di bawah direktori <tt>protected/pages/users</tt>. Konfigurasi di atas terbaca bahwa para pengguna dalam role <tt>admin</tt> dapat mengakses semua halaman (lihat <a href="?page=Day3.Auth">BlogUser.createUser()</a> untuk mengapa harus kata "admin"). Untuk saat ini semua para pengguna lain (<tt>users="*"</tt>) ditolak untuk mengakses halaman dalam direktori ini - kecuali untuk halaman <tt>LoginUser</tt> yang seharusnya selalu bisa diakses.
</p>

<p>
Sekarang jika kita mengunjungi halaman <tt>NewUser</tt> sebagai seorang tamu, kita akan dialihkan ke halaman <tt>LoginUser</tt> terlebih dahulu. Jika kita masuk dengan sukses, kita akan mengalihkan kembali ke halaman<tt>NewUser</tt>.
</p>

<com:TipBox>
Konfigurasi halaman dapat berisi lebih dari satu aturan otorisasi. Sebagai contoh, ia dapat menyertakan <a href="http://www.pradosoft.com/demos/quickstart/?page=Fundamentals.Modules">modul</a> seperti yang ktia lakukan dalam <a href="?page=Day2.ConnectDB">konfigurasi aplikasi</a>. Untuk aplikasi PRADO, setiap direktori halaman dapat mempunyai konfigurasi halaman yang berlaku bagi halaman dalam direktori yang sama dan seluruh subdirektorinya.
</com:TipBox>

</com:TContent>