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

 

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

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

 

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

 

 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
MacBook: Uninstall MAMP แล้ว แต่ safari ยังดึงข้อมูลจาก MAMP อยู่
โดย matsuura จ 20 พฤษภาคม 2019 4:30 pm บอร์ด Programming - PHP
1
3
จ 20 พฤษภาคม 2019 9:33 pm โดย mindphp
ผ่อนดาวน์น้อยกับคอนโดพร้อมอยู่ให้คุณเป็นเจ้าของได้แล้ววันนี้
โดย Patty Perfume จ 20 พฤษภาคม 2019 2:06 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
3
จ 20 พฤษภาคม 2019 2:06 pm โดย Patty Perfume
อยากทราวิธีการ ระบุ ค่าสี ใน <a></a> เฉพาะที่ต้องการค
โดย Ittichai_chupol ส 18 พฤษภาคม 2019 7:35 pm บอร์ด HTML CSS
2
33
ส 18 พฤษภาคม 2019 7:39 pm โดย mindphp
สร้าง Report แบบง่ายด้วย Python + RML
โดย teenproza7 ส 18 พฤษภาคม 2019 7:03 pm บอร์ด Python Knowledge
2
46
ส 18 พฤษภาคม 2019 7:35 pm โดย mindphp
เคล็ดลับ วิธีแก้ขอบตาดำคล้ำแบบธรรมชาติ หมดปัญหาตาดำเป็นหมีแพนด้า
โดย teenproza7 ส 18 พฤษภาคม 2019 5:24 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
13
ส 18 พฤษภาคม 2019 5:24 pm โดย teenproza7
RML กับ Python ใช้งานร่วมกันยังไง
โดย teenproza7 ส 18 พฤษภาคม 2019 4:34 pm บอร์ด Programming - C/C++ & java & Python
11
62
ส 18 พฤษภาคม 2019 7:26 pm โดย thatsawan
เคล็ดลับแก้อาการนอนไม่หลับ
โดย teenproza7 ส 18 พฤษภาคม 2019 4:17 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
12
ส 18 พฤษภาคม 2019 4:17 pm โดย teenproza7
วิธีแก้ง่วง ง่วงนอน นอนน้อย แต่นอนนะ
โดย teenproza7 ส 18 พฤษภาคม 2019 4:10 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
11
ส 18 พฤษภาคม 2019 4:10 pm โดย teenproza7
วิธีชาร์จแบตมือถือ แบบผิดๆที่บอกต่อๆกันมา
โดย teenproza7 ส 18 พฤษภาคม 2019 4:01 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
19
ส 18 พฤษภาคม 2019 4:01 pm โดย teenproza7
เคล็ดลับบำรุงสายตา
โดย teenproza7 ส 18 พฤษภาคม 2019 3:38 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
16
ส 18 พฤษภาคม 2019 3:38 pm โดย teenproza7
สอบถามวิธีการเขียน Python เพื่อ สร้างไฟล์ XML หน่อยครับ
โดย teenproza7 ส 18 พฤษภาคม 2019 3:10 pm บอร์ด Programming - C/C++ & java & Python
1
11
ส 18 พฤษภาคม 2019 3:12 pm โดย thatsawan
ต้องการปิดไม่ให้ browser รับ cookie อย่างไงค่ะ
โดย thatsawan ส 18 พฤษภาคม 2019 2:47 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
10
ส 18 พฤษภาคม 2019 3:02 pm โดย thatsawan
งานประจำวันที่ 18 พฤษาคม 2562
โดย teenproza7 ส 18 พฤษภาคม 2019 9:44 am บอร์ด M082 - ยศนันท์ ปันคำ
1
7
ส 18 พฤษภาคม 2019 9:45 am โดย teenproza7
ของเดิมแต่เพิ่มความสามารถใหม่ด้วย Override Python
โดย teenproza7 ศ 17 พฤษภาคม 2019 6:11 pm บอร์ด Python Knowledge
0
15
ศ 17 พฤษภาคม 2019 6:11 pm โดย teenproza7
เงินได้ประเภทที่ 5 คืออะไร
โดย สริญญา สมสา ศ 17 พฤษภาคม 2019 5:28 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
14
ศ 17 พฤษภาคม 2019 5:28 pm โดย สริญญา สมสา
เช็ค Spec คอมแบบง่ายๆ ด้วย dxdiag
โดย teenproza7 ศ 17 พฤษภาคม 2019 5:15 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
16
ศ 17 พฤษภาคม 2019 5:15 pm โดย teenproza7
มารู้จักโปรแกรมเมอร์คนแรกของโลกกันเถอะ
โดย teenproza7 ศ 17 พฤษภาคม 2019 4:54 pm บอร์ด Share Knowledge
0
18
ศ 17 พฤษภาคม 2019 4:54 pm โดย teenproza7
เงินได้ประเภทที่ 4 คืออะไร
โดย สริญญา สมสา ศ 17 พฤษภาคม 2019 4:48 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
17
ศ 17 พฤษภาคม 2019 4:48 pm โดย สริญญา สมสา
บีบอัดไฟล์ให้เล็กลง ด้วย ZIP
โดย teenproza7 ศ 17 พฤษภาคม 2019 4:44 pm บอร์ด Share Knowledge
0
14
ศ 17 พฤษภาคม 2019 4:44 pm โดย teenproza7
สืบทอดความสามารถจากพ่อและแม่ใน Python OOP
โดย teenproza7 ศ 17 พฤษภาคม 2019 3:33 pm บอร์ด Python Knowledge
0
22
ศ 17 พฤษภาคม 2019 3:33 pm โดย teenproza7