หน้าล็อกอิน คือหน้าที่ใช้ตรวจสอบสิทธิการเข้าใช้งานเว็บไซต์ที่มีระบบสมาชิก ประกอบไปด้วยส่วนสมัครสมาชิกและเข้าสู่ระบบ บทความนี้จึงแนะนำวิธีปรับการแสดงผลของหน้าเข้าสู่ระบบ E-commerce ใน Joomla ให้สวยงาม ด้วย Bootstrap 3.3 ซึ่งมีขั้นตอนดังนี้
1.เข้า localhost ในส่วนของผู้ดูแลระบบ คลิกเมนู Extensions เลือก Templates คลิกเลือกเทมเพลตที่ใช้งาน
2.เลือกเมนู Create Overrides คลิกเลือก Component ชื่อ com_users เลือก login เป็นการ Override Component
3. ในโปรแกรม Netbeans จะได้โฟลเดอร์ user เปิดไฟล์ login.php แก้ไขไฟล์โดยเริ่มจากวางโครงสร้าง Grid ของ Bootstrap แบ่งเป็น 2 คอลัมน์
<div class="row">
<div class="col-sm-6">
<div class="well">
</div>
</div>
<div class="col-sm-6">
<div class="well">
</div
</div>
</div>
2. ใส่โค้ดสำหรับสมัครสมาชิกใหม่
<h2><?php print _MZC_HAVE_NOT_ACCOUNT ?></h2>
<p><strong><?php print _MZC_REGISTER ?></strong></p>
<?php if (!$this->config->show_registerform_in_logintemplate){?>
<div class="block_button_register">
<input type="button" class="btn btn-primary" value="<?php print _MZC_REGISTRATION ?>" onclick="location.href='<?php print $this->href_register ?>';" />
</div>
<?php }else{?>
<?php $hideheaderh1 = 1; include(dirname(__FILE__)."/register.php"); ?>
<?php }?>
3. ใส่โค้ดฟอร์มสำหรับเข้าระบบ ประกอบไปด้วย ชื่อฟอร์ม , ช่องกรอกข้อมูลชื่อเข้าระบบและรหัสผ่าน , ลิงค์สำหรับลืมรหัสผ่าน , checkbox สำหรับไว้จดจำชื่อและรหัสผ่าน , ปุ่มเข้าระบบ
<h2><?php print _MZC_HAVE_ACCOUNT ?></h2>
<p><strong><?php print _MZC_PL_LOGIN ?></strong></p>
<form method="post" action="<?php print SEFLink('index.php?option=com_mooziicart&controller=user&task=loginsave', 1, 0, $this->config->use_ssl) ?>" name="jlogin" class="form-horizontal">
<div class="form-group">
<label class="control-label" for="input-email">
<?php print _MZC_USERNAME ?>:
</label>
<input type="text" name="username" value="" placeholder="E-Mail Address" id="jlusername" class="form-control">
</div>
<div class="form-group">
<label class="control-label" for="input-password">
<?php print _MZC_PASSWORT ?>:
</label>
<input type="password" name="passwd" value="" placeholder="Password" id="jlpassword" class="form-control">
<a href = "<?php print $this->href_lost_pass ?>"><?php print _MZC_LOST_PASSWORD ?></a></div>
<div class="control-group checkbox rowremember">
<div class="controls">
<input type="checkbox" name="remember" id="remember_me" value="yes" />
<label for = "remember_me"><?php print _MZC_REMEMBER_ME ?></label>
</div>
</div>
<input type="submit" value="<?php print _MZC_LOGIN ?>" class="btn btn-primary">
<input type = "hidden" name = "return" value = "<?php print $this->return ?>" />
<?php echo JHtml::_('form.token'); ?>
</form>
4. เปิดไฟล์ user.css ที่อยู่ในโฟลเดอร์ css เพื่อปรับให้ช่อง Checkbox แสดงผลสวยงาม
#remember_me
{
margin-left: 0;
margin-top: 5px;
}
.rowremember
{
margin-bottom: 10px !important;
}
แสดงผลหน้าเว็บไซต์ส่วนสมัครสมาชิกและเข้าระบบ
เนื้อหาเพิ่มเติม