ให้เรตสมาชิก: 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;
}

 

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

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

 

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

 

 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
ช่วยด้วยครับ Magento2 ขึ้นแบบนี้
โดย Wongsadudee Markii พ 20 ก.พ. 2019 11:20 pm บอร์ด Magento user Guide Knowledge
3
24
พฤ 21 ก.พ. 2019 4:46 am โดย mindphp
Components MDFiles 사용 지침과 설명
โดย wipaporn พ 20 ก.พ. 2019 7:13 pm บอร์ด korean Language - 한국어
0
10
พ 20 ก.พ. 2019 7:13 pm โดย wipaporn
Features Review : Mod Menu Json untuk menyemak Nama Domain dan memaparkan artikel dari master side
โดย abdkode พ 20 ก.พ. 2019 6:53 pm บอร์ด Bahasa Language
0
15
พ 20 ก.พ. 2019 6:53 pm โดย abdkode
Module MDFiles Recent 사용 지침과 설명
โดย wipaporn พ 20 ก.พ. 2019 6:50 pm บอร์ด korean Language - 한국어
0
7
พ 20 ก.พ. 2019 6:50 pm โดย wipaporn
Module MDFiles Categories 사용 지침과 설명
โดย wipaporn พ 20 ก.พ. 2019 6:41 pm บอร์ด korean Language - 한국어
0
9
พ 20 ก.พ. 2019 6:41 pm โดย wipaporn
Features Review :Mod Lastnews json slider untuk ambil artikel dari Master Site dipaparkan di Web Client secara Slide.
โดย abdkode พ 20 ก.พ. 2019 6:11 pm บอร์ด Bahasa Language
0
9
พ 20 ก.พ. 2019 6:11 pm โดย abdkode
Component MJForm 사용 지침과 설명
โดย wipaporn พ 20 ก.พ. 2019 5:59 pm บอร์ด korean Language - 한국어
0
6
พ 20 ก.พ. 2019 5:59 pm โดย wipaporn
Features Review : M Multisite Content untuk mengedarkan data dari Master Site ke Webclient
โดย abdkode พ 20 ก.พ. 2019 5:23 pm บอร์ด Bahasa Language
0
9
พ 20 ก.พ. 2019 5:23 pm โดย abdkode
使用 Plugin Editors XTD Multicontent 说明手册
โดย wipaporn พ 20 ก.พ. 2019 5:18 pm บอร์ด Chinese Language - 简体中文
0
7
พ 20 ก.พ. 2019 5:18 pm โดย wipaporn
使用 Module M Slideshows 说明手册
โดย wipaporn พ 20 ก.พ. 2019 4:56 pm บอร์ด Chinese Language - 简体中文
0
7
พ 20 ก.พ. 2019 4:56 pm โดย wipaporn
使用 Component M Multisite Master 说明手册
โดย wipaporn พ 20 ก.พ. 2019 4:30 pm บอร์ด Chinese Language - 简体中文
0
8
พ 20 ก.พ. 2019 4:30 pm โดย wipaporn
หายใจเข้าพุทธ หายใจออก
โดย จันนุสรณ์ ดีแก่ พ 20 ก.พ. 2019 4:16 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
15
พ 20 ก.พ. 2019 4:16 pm โดย จันนุสรณ์ ดีแก่
使用 Component M Multisite Client 说明手册
โดย wipaporn พ 20 ก.พ. 2019 4:06 pm บอร์ด Chinese Language - 简体中文
0
11
พ 20 ก.พ. 2019 4:06 pm โดย wipaporn
Features Review : M MultiSite Content client Komponen untuk merekodkan Nama Domain Master Site
โดย abdkode พ 20 ก.พ. 2019 3:51 pm บอร์ด Bahasa Language
0
6
พ 20 ก.พ. 2019 3:51 pm โดย abdkode
อยากทราบวิธีการส่งลิ้งค์ไป ่ javasript แบบอัตโนมัติ
โดย Ittichai_chupol พ 20 ก.พ. 2019 3:44 pm บอร์ด Programming - PHP
0
14
พ 20 ก.พ. 2019 3:44 pm โดย Ittichai_chupol
使用Module MDFiles Popular 说明手册
โดย wipaporn พ 20 ก.พ. 2019 3:35 pm บอร์ด Chinese Language - 简体中文
0
5
พ 20 ก.พ. 2019 3:35 pm โดย wipaporn
Features Review : MDFiles Documents membantu menghubungkan artikel ke Component MDFiles
โดย abdkode พ 20 ก.พ. 2019 3:33 pm บอร์ด Bahasa Language
0
2
พ 20 ก.พ. 2019 3:33 pm โดย abdkode
使用 Module MDFiles Featured 说明手册
โดย wipaporn พ 20 ก.พ. 2019 3:04 pm บอร์ด Chinese Language - 简体中文
0
7
พ 20 ก.พ. 2019 3:04 pm โดย wipaporn
使用Module MDFiles Categories 说明手册
โดย wipaporn พ 20 ก.พ. 2019 2:31 pm บอร์ด Chinese Language - 简体中文
0
10
พ 20 ก.พ. 2019 2:31 pm โดย wipaporn
使用 Module MDfiles recent 说明手册
โดย wipaporn พ 20 ก.พ. 2019 2:29 pm บอร์ด Chinese Language - 简体中文
0
14
พ 20 ก.พ. 2019 2:29 pm โดย wipaporn