ASP.net: Membuat Halaman Login Menggunakan Custom Template LoginControl

Tulisan ini terinspirasi dari artikel mas Nderek langkung tentang login control. Di artikelnya, mas Nderek sudah menjelaskan banyak hal tentang penggunaan login control. Tapi yang masih menjadi pertanyaan saya, bagaimana kalo kita mempunyai desain login sendiri?

Di sini, saya mencoba membuat sendiri tempalte login control, dan menerapkannya di login control yang ada.
1. Saya menambahkan LoginControl di page.

<asp:Login ID="Login1" runat="server">
</asp:Login>

2. Klik pada panah kecil di kanan atas login control. Pilih menu ‘Convert To Template‘

Kode HTML nya berubah menjadi berikut:

<asp:Login ID="Login1" runat="server">
    <LayoutTemplate>
        <table border="0" cellpadding="1" cellspacing="0" style="border-collapse:collapse;">
            <tr>
                <td>
                    <table border="0" cellpadding="0">
                        <tr>
                            <td align="center" colspan="2">
                                Log In</td>
                        </tr>
                        <tr>
                            <td align="right">
                                <asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName">User
                                    Name:</asp:Label>
                            </td>
                            <td>
                                <asp:TextBox ID="UserName" runat="server"></asp:TextBox>
                                <asp:RequiredFieldValidator ID="UserNameRequired" runat="server"
                                    ControlToValidate="UserName" ErrorMessage="User Name is required."
                                    ToolTip="User Name is required." ValidationGroup="Login1">*</asp:RequiredFieldValidator>
                            </td>
                        </tr>
                        <tr>
                            <td align="right">
                                <asp:Label ID="PasswordLabel" runat="server" AssociatedControlID="Password">Password:</asp:Label>
                            </td>
                            <td>
                                <asp:TextBox ID="Password" runat="server" TextMode="Password"></asp:TextBox>
                                <asp:RequiredFieldValidator ID="PasswordRequired" runat="server"
                                    ControlToValidate="Password" ErrorMessage="Password is required."
                                    ToolTip="Password is required." ValidationGroup="Login1">*</asp:RequiredFieldValidator>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <asp:CheckBox ID="RememberMe" runat="server" Text="Remember me next time." />
                            </td>
                        </tr>
                        <tr>
                            <td align="center" colspan="2" style="color:Red;">
                                <asp:Literal ID="FailureText" runat="server" EnableViewState="False"></asp:Literal>
                            </td>
                        </tr>
                        <tr>
                            <td align="right" colspan="2">
                                <asp:Button ID="LoginButton" runat="server" CommandName="Login" Text="Log In"
                                ValidationGroup="Login1" />
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </LayoutTemplate>
</asp:Login>

3. Sekarang kita bisa merubah desain login control dengan mengganti bagian di dalam <LayoutTemplate></LayoutTemplate>
Tentu saja, desain yang kita buat harus disesuaikan dengan desain aslinya.
Misal, textbox untuk nama user harus menggunakan ID ‘UserName‘ kalo tidak, muncul error
Login1: LayoutTemplate does not contain an IEditableTextControl with ID UserName for the username.

textbox untuk password harus ber-ID ‘Password‘ atau akan muncul error
Login1: LayoutTemplate does not contain an IEditableTextControl with ID Password for the password.

Jadi yang harus diperhatikan jika membuat template sendiri

• Textbox nama user harus menggunakan ID=”UserName”
• Textbox password harus menggunakan ID=”Password”
• Checkbox Remember me harus menggunakan ID=”RememberMe”
• Literal untuk menampilkan pesan error harus menggunakan ID=”FailureText”
• Button Login, bisa menggunakan control yang lain dengan ID apapun tetapi harus menggunakan atribut CommandName=”Login”

Berikut contohnya:

<asp:Login ID="Login1" runat="server" onloggingin="Login1_LoggingIn">
    <LayoutTemplate>
        <table id="Table_01" width="367"  border="0" cellpadding="0" cellspacing="0"
		style="margin-top: 150px; text-align:center ">
			<tr>
				<td colspan="7" style="width:367; height:91" >
					<img src="images/login_05.gif" width="367" height="91" alt=""/>
				</td>
			</tr>
			<tr>
				<td rowspan="2" style="width:43; height:135" ></td>
				<td colspan="2">
					<img src="images/login_07.gif" width="5" height="131" alt=""/></td>
				<td colspan="2" style="width:271; height:131"  align="center">
					<!----------------->
					<table id="login" style="margin: 0 0 0 5px; width: 230px;">
						<tr>
							<td align="right">
								<asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName">User Name</asp:Label>
							</td>
							<td>:</td>
							<td>
								<asp:TextBox ID="UserName" runat="server" Width="140px"></asp:TextBox>
								<asp:RequiredFieldValidator ID="UserNameRequired" runat="server" ErrorMessage="User Name is required."
								ToolTip="User Name is required." ControlToValidate="UserName" ValidationGroup="Login1">*</asp:RequiredFieldValidator>
							</td>
						</tr>
						<tr>
							<td align="right">
								<asp:Label ID="PasswordLabel" runat="server" AssociatedControlID="Password">Password</asp:Label>
							</td>
							<td>:</td>
							<td>
								<asp:TextBox ID="Password" runat="server" MaxLength="10" TextMode="Password" Width="140px"></asp:TextBox>
								<asp:RequiredFieldValidator ID="PasswordRequired" runat="server"
									ControlToValidate="Password" ErrorMessage="Password is required."
									ToolTip="Password is required." ValidationGroup="Login1">*</asp:RequiredFieldValidator>
							</td>
						</tr>
						<tr>
							<td colspan="4" align="left" style="color:Red;">
								<asp:Literal ID="FailureText" runat="server" EnableViewState="False"></asp:Literal>
							</td>
						</tr>
						<tr>
							<td colspan="4" align="right">
								<asp:ImageButton ID="LoginButton" runat="server" ImageUrl="~/images/btnLogin1.gif"
								CommandName="Login" ValidationGroup="Login1" />
							</td>
						</tr>
						<tr>
							<td colspan="4" align="center" style="height: 18px">
								&nbsp;<asp:LinkButton ID="LinkButton1" runat="server" OnClick="SignUp"
								CssClass="linkbutton" Width="59px">Sign Up</asp:LinkButton>|
								<asp:LinkButton ID="LinkButton2" runat="server" OnClick="ForgetPassword" Width="96px"
								CssClass="linkbutton">Forget Password</asp:LinkButton>
							</td>
						</tr>
					</table>
					<!----------------->
				</td>
				<td>
					<img src="images/login_09.gif" width="6" height="131" alt=""/>
				</td>
				<td rowspan="2" style="width:42; height:135"></td>
			</tr>
			<tr>
				<td style="height:4;" colspan="2">
					<img src="images/login_11.gif" width="5" height="4" alt=""/>
				</td>
				<td colspan="2">
					<img src="images/login_12.gif" width="271" height="4" alt=""/>
				</td>
				<td>
					<img src="images/login_13.gif" width="6" height="4" alt=""/>
				</td>
			</tr>
			<tr>
				<td>
					<img src="images/spacer.gif" width="43" height="1" alt=""/></td>
				<td>
					<img src="images/spacer.gif" width="1" height="1" alt=""/></td>
				<td>
					<img src="images/spacer.gif" width="4" height="1" alt=""/></td>
				<td>
					<img src="images/spacer.gif" width="175" height="1" alt=""/></td>
				<td>
					<img src="images/spacer.gif" width="96" height="1" alt=""/></td>
				<td>
					<img src="images/spacer.gif" width="6" height="1" alt=""/></td>
				<td>
					<img src="images/spacer.gif" width="42" height="1" alt=""/></td>
			</tr>
			<tr>
				<td height="10" colspan="7"></td>
			</tr>
			<tr>
				<td align="center" id="txtFooter" colspan="7">
					<a href="http://xxxx.co.id/profile.html">About Us</a> | <a href="http://xxxx.id/contact.html">Contact Us</a>
				</td>
			</tr>
			<tr>
				<td colspan="7" align="center" id="txtFooter" >
					<span>© 2008 <strong>PT. xxxxx</strong> All Rights Reserved</span></td>
			</tr>
		</table>
	</LayoutTemplate>
</asp:Login>

hasilnya

Ketika di jalankan hasilnya seperti berikut

Untuk kode-kode di code behind silahkan membaca tulisan dari Mas NderekLangkung.
Selamat mencoba.
Happy Coding

About these ads