ให้เรตสมาชิก: 4 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งาน
 

             หน้าล็อกอิน คือหน้าที่ใช้ตรวจสอบสิทธิการเข้าใช้งานเว็บไซต์ที่มีระบบสมาชิก ประกอบไปด้วยส่วนสมัครสมาชิกและเข้าสู่ระบบ บทความนี้จึงแนะนำวิธีปรับการแสดงผลของหน้าเข้าสู่ระบบ E-commerce ใน Joomla ให้สวยงาม ด้วย Bootstrap 3.3 ซึ่งมีขั้นตอนดังนี้

 

1.เข้า localhost ในส่วนของผู้ดูแลระบบ คลิกเมนู Extensions เลือก Templates คลิกเลือกเทมเพลตที่ใช้งาน

เข้า localhost ในส่วนของผู้ดูแลระบบ คลิกเมนู Extensions เลือก Templates คลิกเลือกเทมเพลตที่ใช้งาน
คลิกเมนู Extensions เลือก Templates คลิกเลือกเทมเพลตที่ใช้งาน

 

2.เลือกเมนู Create Overrides คลิกเลือก Component ชื่อ com_users เลือก login เป็นการ Override Component  

เลือกเมนู Create Overrides คลิกเลือก Component ทีต้องการ Override
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;
}

 

แสดงผลหน้าเว็บไซต์ส่วนสมัครสมาชิกและเข้าระบบ

หน้าเว็บไซต์สมัครสมาชิกและเข้าระบบ
หน้าเว็บไซต์สมัครสมาชิกและเข้าระบบ

 

 เนื้อหาเพิ่มเติม

 

 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
สรุปงานวิดีโอที่ศึกษาเกี่ยวกับmindphp
โดย Aranya อ 26 ม.ค. 2021 3:40 pm บอร์ด M121 - อรัญญา ปะสาวะกา
0
8
อ 26 ม.ค. 2021 3:40 pm โดย Aranya
Index ถอดวิดีโอ Canva
โดย Aranya อ 26 ม.ค. 2021 2:32 pm บอร์ด M121 - อรัญญา ปะสาวะกา
2
14
อ 26 ม.ค. 2021 7:51 pm โดย mindphp
งานประจำวันที่ 26 มกราคม 2564
โดย Aranya อ 26 ม.ค. 2021 9:40 am บอร์ด M121 - อรัญญา ปะสาวะกา
12
72
อ 26 ม.ค. 2021 7:58 pm โดย Aranya
phpBB3 เมนู ACP หายไปและ login เป็น admin ไม่ได้
โดย eange08 จ 25 ม.ค. 2021 7:26 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
2
33
อ 26 ม.ค. 2021 10:16 am โดย eange08
7s Framework วิเคราะห์ธุรกิจในองค์กร
โดย Aranya จ 25 ม.ค. 2021 4:46 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
2
26
อ 26 ม.ค. 2021 4:36 pm โดย Aranya
SWOT
โดย Aranya จ 25 ม.ค. 2021 4:15 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
21
อ 26 ม.ค. 2021 4:10 pm โดย Aranya
five forces model
โดย Aranya จ 25 ม.ค. 2021 3:54 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
31
อ 26 ม.ค. 2021 11:31 am โดย Aranya
7ps พื้นฐานการตลาด
โดย Aranya จ 25 ม.ค. 2021 3:40 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
2
25
อ 26 ม.ค. 2021 10:41 am โดย Aranya