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
|
<com:TContent ID="Main">
<h1>Membuat Halaman <tt>LoginUser</tt></h1>
<p>
Halaman <tt>LoginUser</tt> menampilkan formulir masuk dan mengotentikasi pengguna yang mencoba untuk masuk. Seperti dijelaskan dalam <a href="?page=Day3.Auth">otentikasi dan otorisasi</a>, browser pengguna secara otomatis dialihkan ke halaman <tt>LoginUser</tt> ketika pengguna mencoba untuk mengakses halaman istimewa, seperti misalhnya halaman admin pengguna.
</p>
<p>
Alur kerja <tt>LoginUser</tt> sangat mirip dengan halaman <a href="?page=Day1.CreateContact">Contact</a>:
</p>
<ol>
<li>Ketika pengguna mengakses halaman <tt>LoginUser</tt>, formulir masuk ditampilkan;</li>
<li>Pengguna mengisi nama pengguna dan kata sandi serta mengklik pada tombol "login";</li>
<li><tt>LoginUser</tt> menerima event "login" dan memicu rangkaian otentikasi;</li>
<li>Jika pengguna memasukan nama pengguna dan kata sandi yang benar, sistem menempatkan identitas yang sah dan mengalihkan browser-nya ke halaman istimewa yang diinginkan; Jika tidak, pesan "password invalid" akan ditampilkan.
</ol>
<p>
Kita membuat dua file <tt>protected/pages/users/LoginUser.page</tt> dan <tt>protected/pages/users/LoginUser.php</tt> masing-masing untuk menyimpan template halaman dan kelas halaman.
</p>
<h2>Membuat Template Halaman</h2>
<p>
Di bawah ini kita menampilkan template untuk <tt>LoginUser</tt>. Seperti kita lihat, halaman sebagian besar berisi kotak teks untuk mengumpulkan nama pengguna dan kotak teks untuk kata sandi. Input nama pengguna diperlukan, yang dipastikan oleh <tt>TRequiredFieldValidator</tt>. Kebenaran dari input kata sandi dipastikan oleh <a href="http://www.pradosoft.com/demos/quickstart/index.php?page=Controls.Validation">TCustomValidator</a> yang memanggil metode <tt>validateUser()</tt> halaman ketika validasi dilakukan. Halaman juga mempunyai tombol "login" yang memanggil <tt>loginButtonClicked()</tt> halaman ketika itu diklik.
</p>
<com:TTextHighlighter CssClass="source" Language="prado">
<%@ Title="My Blog - Login" %>
<com:TContent ID="Main">
<h1>Login</h1>
<span>Username:</span>
<com:TRequiredFieldValidator
ControlToValidate="Username"
ErrorMessage="Please provide your username."
Display="Dynamic" />
<br/>
<com:TTextBox ID="Username" />
<br/>
<span>Password:</span>
<com:TCustomValidator
ControlToValidate="Password"
ErrorMessage="Your entered an invalid password."
Display="Dynamic"
OnServerValidate="validateUser" />
<br/>
<com:TTextBox ID="Password" TextMode="Password" />
<br/>
<com:TButton Text="Login" OnClick="loginButtonClicked" />
</com:TContent>
</com:TTextHighlighter>
<h2>Membuat Kelas Halaman</h2>
<p>
Seperti halaman <a href="?page=Day1.CreateContact">Contact</a>, halaman <tt>LoginUser</tt> juga memerlukan file kelas yang sebagian besar berisi implementasi pengendali event yang disertakan dalam template halaman. Di sini, kita perlu mengimplementasikan dua metode: <tt>validateUser()</tt> dan <tt>loginButtonClicked()</tt>. Dalam <tt>validateUser()</tt>, kita menggunakan <a href="?page=Day3.Auth">manajer otentikasi</a> untuk memverifikasi apakan nama pengguna serta kata sandinya sudah benar. Jika benar, manajer otentikasi akan secara otomatis membuat sesi pengguna dengan informasi identitas pengguna terkait.
</p>
<com:TTextHighlighter CssClass="source" Language="php">
class LoginUser extends TPage
{
/**
* Validates whether the username and password are correct.
* This method responds to the TCustomValidator's OnServerValidate event.
* @param mixed event sender
* @param mixed event parameter
*/
public function validateUser($sender,$param)
{
$authManager=$this->Application->getModule('auth');
if(!$authManager->login($this->Username->Text,$this->Password->Text))
$param->IsValid=false; // beritahu validator bawa validasi gagal
}
/**
* Redirects the user's browser to appropriate URL if login succeeds.
* This method responds to the login button's OnClick event.
* @param mixed event sender
* @param mixed event parameter
*/
public function loginButtonClicked($sender,$param)
{
if($this->Page->IsValid) // semua validasi sukses
{
// Dapatkan URL pada halaman istimewa yang diinginkan pengguna yang akan dikunjungi
$url=$this->Application->getModule('auth')->ReturnUrl;
if(empty($url)) // pengguna mengakses halaman masuk secara langsung
$url=$this->Service->DefaultPageUrl;
$this->Response->redirect($url);
}
}
}
</com:TTextHighlighter>
<h2>Pengujian</h2>
<p>
Kita telah membuat halaman <tt>LoginUser</tt>. Kita dapat mengujinya dengan mengunjungi URL <tt>http://hostname/blog/index.php?page=users.LoginUser</tt>. Ingat dalam subbagian <a href="?page=Day2.CreateDB">Membuat Database</a>, kita sudah membuat dua akun pengguna (username/password): <tt>admin/demo</tt> dan <tt>demo/demo</tt>. Kita dapat menggunakannya untuk menguji halaman masuk kita.
</p>
<img src="<%~ output.gif %>" class="output"/>
<h2>Menambahkan Link Login/Logout ke Master</h2>
<p>
Guna melengkapi cara langsung bagi pengguna untuk masuk dan keluar, kita memodifikasi sedikit kontrol master <tt>MainLayout</tt>. Dalam keadaan tertentu, kita menambahkan hiperlink "login" yang mengaitkan halaman <tt>LoginUser</tt>. Kita juga menambahkan tombol link "logout" yang mengeluarkan pengguna saat ia diklik.
</p>
<p>
Kita memodifikasi bagian footer dari template <tt>MainLayout</tt> sebagai berikut. Penampakan "login" dan "logout" ditentukan berdasarkan status pengguna. Jika pengguna belum masuk, misalnya <tt>$this->User->IsGuest</tt> adalah true, link "login" terlihat sementara link "logout" tidak; dan begitu sebaliknya.
</p>
<com:TTextHighlighter CssClass="source" Language="prado">
<div id="footer">
<com:THyperLink Text="Login"
NavigateUrl="<%= $this->Service->constructUrl('users.LoginUser') %>"
Visible="<%= $this->User->IsGuest %>" />
<com:TLinkButton Text="Logout"
OnClick="logoutButtonClicked"
Visible="<%= !$this->User->IsGuest %>" />
<br/>
<%= PRADO::poweredByPrado() %>
</div>
</com:TTextHighlighter>
<p>
Karena tombol "logout" menempelkan event <tt>OnClick</tt> dengan metode yang dipanggil <tt>logoutButtonClicked()</tt>, kita juga perlu mengubah file kelas <tt>MainLayout</tt>.
</p>
<com:TTextHighlighter CssClass="source" Language="php">
class MainLayout extends TTemplateControl
{
/**
* Logs out a user.
* This method responds to the "logout" button's OnClick event.
* @param mixed event sender
* @param mixed event parameter
*/
public function logoutButtonClicked($sender,$param)
{
$this->Application->getModule('auth')->logout();
$url=$this->Service->constructUrl($this->Service->DefaultPage);
$this->Response->redirect($url);
}
}
</com:TTextHighlighter>
<p>
Sekarang jika kita mengunjungi setiap halaman pada sistem blog kita, kita akah melihat apakah ada link di bawah halaman. Link menampilkan "Login" jika kita belum masuk dan "Logout" jika telah masuk. Jika kita mengklik pada "Logout", browser akan mengalihkannya ke homepage dan "Login" ditampilkan yang berarti kita sudah dikeluarkan.
</p>
</com:TContent>
|
