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

 

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

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

 

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

 

 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
วิธีการสร้าง pop-up เพื่อ drag and drop multi image upload บน phpbb
โดย Ittichai_chupol ส 08 ธ.ค. 2018 4:30 pm บอร์ด Programming - PHP
0
28
ส 08 ธ.ค. 2018 4:30 pm โดย Ittichai_chupol
วิธีติดตั้งโปรแกรม Foxit Reader บนระบบปฏิบัติการ Ubuntu 16.04 LTS
โดย tatiya ส 08 ธ.ค. 2018 11:11 am บอร์ด Linux - Web Server
0
19
ส 08 ธ.ค. 2018 11:11 am โดย tatiya
อยากหมดหนี้ฟังทางนี้ ขอโชค ขอลาภกับพระเจ้าตากสิน
โดย Anonymous ศ 07 ธ.ค. 2018 4:40 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
28
ศ 07 ธ.ค. 2018 4:40 pm โดย บุคคลทั่วไป
Extension คืออะไร
โดย จันนุสรณ์ ดีแก่ ศ 07 ธ.ค. 2018 2:58 pm บอร์ด phpBB 3.1 Extension Review
0
22
ศ 07 ธ.ค. 2018 2:58 pm โดย จันนุสรณ์ ดีแก่
วิธีตั้งกระทู้ในเว็บบอร์ด phpBB โพสข้อความ รูปภาพ อัพโหลด ใช้ BBcode
โดย จันนุสรณ์ ดีแก่ ศ 07 ธ.ค. 2018 2:53 pm บอร์ด phpBB user Guide Knowledge
0
36
ศ 07 ธ.ค. 2018 2:53 pm โดย จันนุสรณ์ ดีแก่
Q - Event phpbb ที่แสดงผลตำแหน่ง หัวข้อกระทู้
โดย Ittichai_chupol ศ 07 ธ.ค. 2018 10:43 am บอร์ด Programming - PHP
3
23
ศ 07 ธ.ค. 2018 11:18 am โดย mindphp
ว่าด้วยเรื่องเว็บไซต์
โดย จันนุสรณ์ ดีแก่ ศ 07 ธ.ค. 2018 10:27 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
21
ศ 07 ธ.ค. 2018 10:27 am โดย จันนุสรณ์ ดีแก่
ราศีใด ระวังไฟไหม้บ้าน มีวิญญาณตามติด
โดย Anonymous พฤ 06 ธ.ค. 2018 8:41 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
29
พฤ 06 ธ.ค. 2018 8:41 pm โดย บุคคลทั่วไป
การส่งข้อความ และการเปิดอ่านข้อความ
โดย จันนุสรณ์ ดีแก่ พฤ 06 ธ.ค. 2018 2:27 pm บอร์ด phpBB user Guide Knowledge
0
28
พฤ 06 ธ.ค. 2018 2:27 pm โดย จันนุสรณ์ ดีแก่
HOW TO ออกจากเกมส์
โดย จันนุสรณ์ ดีแก่ พฤ 06 ธ.ค. 2018 11:32 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
29
พฤ 06 ธ.ค. 2018 11:32 am โดย จันนุสรณ์ ดีแก่
Q - ตรวจสอบ ไฟล์รูปภาพในกระทู้ phpbb
โดย Ittichai_chupol พฤ 06 ธ.ค. 2018 11:04 am บอร์ด Programming - PHP
1
27
พฤ 06 ธ.ค. 2018 5:06 pm โดย mindphp
สอบถามเกี่ยวกับการตรวจสอบขนาดของ File หลังจากเพิ่มฟอร์มหน่อยครับ
โดย tomsmile05 พฤ 06 ธ.ค. 2018 10:40 am บอร์ด Programming - PHP
1
28
พฤ 06 ธ.ค. 2018 11:19 am โดย tsukasaz
สาเหตุที่นอนไม่หลับ เป็นเพราะแบบนี้หรือเปล่า เช็คก่อนเกิดอันตราย!
โดย gotoblack พฤ 06 ธ.ค. 2018 8:44 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
22
พฤ 06 ธ.ค. 2018 8:44 am โดย gotoblack
ฟังก์ชั่นอีเมลล์ใช้ไม่ได้บน Joomla 4 alpha 3 มีวิธีแก้อย่างไรบ้างค่ะ
โดย pprn พ 05 ธ.ค. 2018 4:32 pm บอร์ด Joomla Development
0
27
พ 05 ธ.ค. 2018 4:32 pm โดย pprn
เช็คดวงราศีเกิด ประจำเดือนธันวาคม 2561
โดย Anonymous อ 04 ธ.ค. 2018 8:34 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
63
อ 04 ธ.ค. 2018 8:34 pm โดย บุคคลทั่วไป
การใช้งาน PM ถ้าคนอ่านยังไม่ได้อ่าน คนส่งสามารถแก้ไขได้
โดย จันนุสรณ์ ดีแก่ อ 04 ธ.ค. 2018 7:21 pm บอร์ด phpBB user Guide Knowledge
0
36
อ 04 ธ.ค. 2018 7:21 pm โดย จันนุสรณ์ ดีแก่
การเพิ่มเสียง ลบเสียงรบกวนออก camtasia
โดย จันนุสรณ์ ดีแก่ อ 04 ธ.ค. 2018 4:49 pm บอร์ด Graphic design
0
43
อ 04 ธ.ค. 2018 4:49 pm โดย จันนุสรณ์ ดีแก่
อัพเกรด Joomla เวอร์ชัน 3.9.1 แล้ว Error
โดย Parichat อ 04 ธ.ค. 2018 4:17 pm บอร์ด Joomla Development
1
56
อ 04 ธ.ค. 2018 4:18 pm โดย Parichat
การหา Element ของปุ่ม create ในหน้า purchase
โดย Aussadawut อ 04 ธ.ค. 2018 1:27 pm บอร์ด Python Knowledge
0
51
อ 04 ธ.ค. 2018 1:27 pm โดย Aussadawut
เมื่อทำงานไว
โดย จันนุสรณ์ ดีแก่ อ 04 ธ.ค. 2018 1:25 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
42
อ 04 ธ.ค. 2018 1:25 pm โดย จันนุสรณ์ ดีแก่