Are you tired of seeing the original "Login" page that generated by PHPMaker? Since the first time I used PHPMaker until the final version now, the "Login" page does not change significantly, and it looks like very unattractive. This following modifications will create the look of your "Login" page become more beautiful, also more "eye-catching", so every time you create the "Login" page script using PHPMaker, you will not see that boring "Login" page as before. This modification also will make your "Login" form become autofocus on Username textbox each time your browser load it.
Updated: This modification has been tested and works fine also for the latest version, PHPMaker 8.0.3 on August 27, 2011.
All we have to do is customizing PHPMaker template files. In other words, we will not modify the generated script files.
Please click on the following image to watch the demo:
[hidepost]
- Download images-box.zip. Extract the .zip file that contains of 9 image files in it, to your \Script\images sub-directory.
-
Open your \Script\login.php file, and find this code:
<!--##include phpcommon.php/phpcommon-message##--> <form action="<?php echo ew_CurrentPage() ?>" method="post" onsubmit="return <!--##=sPageObj##-->.ValidateForm(this);"> <table border="0" cellspacing="0" cellpadding="4"> <tr> <td><span class="phpmaker"><!--##@Username##--></span></td> <td><span class="phpmaker"><input type="text" name="username" id="username" size="20" value="<?php echo $<!--##=sPageObj##-->->Username ?>"></span></td> </tr> <tr> <td><span class="phpmaker"><!--##@Password##--></span></td> <td><span class="phpmaker"><input type="password" name="password" id="password" size="20" /></span></td> </tr> <!--## If dLoginOption.Count > 1 Then ##--> <tr> <td> </td> <td><span class="phpmaker"> <!--## If dLoginOption.Exists("AUTO") Then ##--> <label><input type="radio" name="rememberme" id="rememberme" value="a"<?php if ($<!--##=sPageObj##-->->LoginType == "a") { ?> checked="checked"<?php } ?> /><!--##@AutoLogin##--></label><br /> <!--## End If ##--> <!--## If dLoginOption.Exists("USER") Then ##--> <label><input type="radio" name="rememberme" id="rememberme" value="u"<?php if ($<!--##=sPageObj##-->->LoginType == "u") { ?> checked="checked"<?php } ?> /><!--##@SaveUserName##--></label><br /> <!--## End If ##--> <!--## If dLoginOption.Exists("ASK") Then ##--> <label><input type="radio" name="rememberme" id="rememberme" value=""<?php if ($<!--##=sPageObj##-->->LoginType == "") { ?> checked="checked"<?php } ?> /><!--##@AlwaysAsk##--></label> <!--## End If ##--> </span></td> </tr> <!--## End If ##--> <tr> <td colspan="2" align="center"><span class="phpmaker"><input type="submit" name="submit" id="submit" value="<?php echo ew_BtnCaption($Language->Phrase("Login")) ?>" /></span></td> </tr> </table> <!--## If dLoginOption.Count = 1 Then ##--> <!--## If dLoginOption.Exists("AUTO") Then ##--> <input type="hidden" name="rememberme" id="rememberme" value="a" /> <!--## ElseIf dLoginOption.Exists("USER") Then ##--> <input type="hidden" name="rememberme" id="rememberme" value="u" /> <!--## ElseIf dLoginOption.Exists("ASK") Then ##--> <input type="hidden" name="rememberme" id="rememberme" value="" /> <!--## End If ##--> <!--## End If ##--> </form> <br /> <!--## If bUserTable Then ##--> <p class="phpmaker"> <!--## If PROJ.SecForgetPwdPage Then ##--> <a href="<!--##=sFnForgotPwd##-->"><!--##@ForgotPwd##--></a> <!--## End If ##--> <!--## If PROJ.SecRegisterPage Then ##--> <a href="<!--##=sFnRegister##-->"><!--##@Register##--></a> <!--## End If ##--> </p> <!--## End If ##-->then replace with this following code:
<br /><br /> <!--##include phpcommon.php/phpcommon-message##--> <body onload="document.frmLogin.username.focus()"> <form name="frmLogin" action="<?php echo ew_CurrentPage() ?>" method="post" onsubmit="return <!--##=sPageObj##-->.ValidateForm(this);"> <table border="0" cellpadding="0" cellspacing="0" width="400" align="center"> <tr> <td> <table border="0" cellpadding="0" cellspacing="0" width="420" align="center"> <tr> <td align="left" valign="top" width="4" height="30"><img src="phpimages/sidebox-title-left.gif"></td> <td align="left" valign="middle" background="phpimages/sidebox-title-bg.gif" width="390" height="30"> <font class="phpmaker"> <strong><!--##@LoginPage##--></strong></font></td> <td align="left" valign="top" width="4" height="30"><img src="phpimages/sidebox-title-right.gif"></td> </tr> </table> </td> </tr> </table> <table border="0" cellpadding="0" cellspacing="0" align="center"> <tr valign="top"> <td width="4" align="left" valign="top" background="phpimages/sidebox-bar-left.gif"><img src="phpimages/sidebox-bar-px.gif"></td> <td bgcolor="#FFFFFF" width="" align="left" valign="top"> <table bgcolor="#F0F1F5" border="0" cellpadding="0" cellspacing="0" align="center"> <tr> <td> <table width="412" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <tr/> <tr> <td width="125"> <span class="phpmaker"><!--##@Username##--></span></td> <td width="5"></td> <td width="50"><span class="phpmaker"><input type="text" name="username" id="username" size="37" value="<?php echo $<!--##=sPageObj##-->->Username ?>"></span></td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td height="22"> <span class="phpmaker"><!--##@Password##--></span></td> <td></td> <td><span class="phpmaker"><input type="password" name="password" id="password" size="37" /></span></td> </tr> <tr> <td> </td> <td> </td> </tr> <!--## If dLoginOption.Count > 1 Then ##--> <tr> <td colspan="3"><span class="phpmaker"> <!--## If dLoginOption.Exists("AUTO") Then ##--> <label> <input type="radio" name="rememberme" id="rememberme" value="a"<?php if ($<!--##=sPageObj##-->->LoginType == "a") { ?> checked="checked"<?php } ?> /><!--##@AutoLogin##--></label><br /> <!--## End If ##--> <!--## If dLoginOption.Exists("USER") Then ##--> <label> <input type="radio" name="rememberme" id="rememberme" value="u"<?php if ($<!--##=sPageObj##-->->LoginType == "u") { ?> checked="checked"<?php } ?> /><!--##@SaveUserName##--></label><br /> <!--## End If ##--> <!--## If dLoginOption.Exists("ASK") Then ##--> <label> <input type="radio" name="rememberme" id="rememberme" value=""<?php if ($<!--##=sPageObj##-->->LoginType == "") { ?> checked="checked"<?php } ?> /><!--##@AlwaysAsk##--></label> <!--## End If ##--> </span></td> </tr> <!--## End If ##--> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td><span class="phpmaker"><input type="submit" name="submit" id="submit" value="<?php echo ew_BtnCaption($Language->Phrase("Login")) ?>" /></span> <input name="reset" type="reset" id="Reset" value="<?php echo ew_BtnCaption($Language->Phrase("CancelBtn")) ?>"> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table> </td> </tr> </table> </td> <td width="4" align="left" valign="top" background="phpimages/sidebox-bar-right.gif"><img src="phpimages/sidebox-bar-px.gif"> </td> </tr> </table> <table border="0" cellpadding="0" cellspacing="0" width="420" align="center"> <tr> <td width="2" height="29" align="left" valign="top"><img src="phpimages/storybox-bottom-left.gif"></td> <td width="394" height="29" background="phpimages/storybox-bottom-bg.gif"> <!--## If bUserTable Then ##--> <span class="phpmaker"> <!--## If PROJ.SecForgetPwdPage Then ##--> <a href="<!--##=sFnForgotPwd##-->"><!--##@ForgotPwd##--></a> <!--## End If ##--> <!--## If PROJ.SecRegisterPage Then ##--> <?php // if (EW_USER_REGISTRATION) { ?> <a href="<!--##=sFnRegister##-->"><!--##@Register##--></a> <?php // } ?> <!--## End If ##--> </span> <!--## End If ##--></td> <td width="8" height="29" align="left" valign="top"><img src="phpimages/storybox-bottom-right.gif"></td> </tr> </table> <!--## If dLoginOption.Count = 1 Then ##--> <!--## If dLoginOption.Exists("AUTO") Then ##--> <input type="hidden" name="rememberme" id="rememberme" value="a" /> <!--## ElseIf dLoginOption.Exists("USER") Then ##--> <input type="hidden" name="rememberme" id="rememberme" value="u" /> <!--## ElseIf dLoginOption.Exists("ASK") Then ##--> <input type="hidden" name="rememberme" id="rememberme" value="" /> <!--## End If ##--> <!--## End If ##--> </form> </body> <br /><br />Please note that the destination images directory in PHPMaker 8 has been changed from "images" to "phpimages".
[/hidepost]
[…] How to Beautify Your “Login” Page Created With PHPMaker 8.0.1 […]