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

 

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

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

 

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

 

 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
การจัดการชนิดไฟล์ บนเว็บบอร์ด phpBB แอดมิน และ Moderatorเท่านั้น ที่เป็นผู้ตั้งค่าในส่วนนี้ได้
โดย จันนุสรณ์ ดีแก่ ศ 22 ก.พ. 2019 9:30 am บอร์ด phpBB user Guide Knowledge
0
1
ศ 22 ก.พ. 2019 9:30 am โดย จันนุสรณ์ ดีแก่
งานประจำวันที่ 22 กุมภาพันธ์ 2562
โดย Four ศ 22 ก.พ. 2019 9:05 am บอร์ด M077 - อิษยา งามสอาด
0
1
ศ 22 ก.พ. 2019 9:05 am โดย Four
ชีวิตต้นเดือน ปลายเดือน
โดย จันนุสรณ์ ดีแก่ พฤ 21 ก.พ. 2019 6:52 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
9
พฤ 21 ก.พ. 2019 6:52 pm โดย จันนุสรณ์ ดีแก่
ขอโค้ดโปรแกรมโปรแกรมคำนวณเวลาที่ใช้ในการวิ่ง สำหรับ CodeBlockหน่อยครับ
โดย Anonymous พฤ 21 ก.พ. 2019 6:27 pm บอร์ด Programming - PHP
0
6
พฤ 21 ก.พ. 2019 6:27 pm โดย บุคคลทั่วไป
Features Review : Components MDBridge untuk menyambung data pengguna antara Joomla dan PHPbb Webboard
โดย abdkode พฤ 21 ก.พ. 2019 6:04 pm บอร์ด Bahasa Language
0
6
พฤ 21 ก.พ. 2019 6:04 pm โดย abdkode
Q - ปรับแก้โค้ดที่ Export ข้อมูลมาเป็น CSV อย่างไรค่ะ
โดย Parichat พฤ 21 ก.พ. 2019 5:01 pm บอร์ด Joomla Dev
0
1
พฤ 21 ก.พ. 2019 5:01 pm โดย Parichat
Q - ขอวิธีปรับแก้โค้ดที่ Export ข้อมูลมาเป็น Excel อย่างไรค่ะ
โดย Parichat พฤ 21 ก.พ. 2019 4:59 pm บอร์ด Joomla Dev
0
1
พฤ 21 ก.พ. 2019 4:59 pm โดย Parichat
Q - แก้ไขโค้ดที่ดึงข้อมูลมาเป็น PDF อย่างไรค่ะ
โดย Parichat พฤ 21 ก.พ. 2019 4:55 pm บอร์ด Joomla Dev
0
1
พฤ 21 ก.พ. 2019 4:55 pm โดย Parichat
Features Review : MDEvents untuk mengurus pelbagai jadual data aktiviti
โดย abdkode พฤ 21 ก.พ. 2019 4:51 pm บอร์ด Bahasa Language
0
7
พฤ 21 ก.พ. 2019 4:51 pm โดย abdkode
Features Review : Component MJUpgrade untuk menaik taraf Joomla 1.5 ke Joomla 2.5, 3.X
โดย abdkode พฤ 21 ก.พ. 2019 4:10 pm บอร์ด Bahasa Language
0
7
พฤ 21 ก.พ. 2019 4:10 pm โดย abdkode
Features Review : Mod Mslideshows untuk memaparkan gambar, video Youtube dari kandungan
โดย abdkode พฤ 21 ก.พ. 2019 3:29 pm บอร์ด Bahasa Language
0
3
พฤ 21 ก.พ. 2019 3:29 pm โดย abdkode
Plugin Editors XTD Multicontent 사용 지침과 설명
โดย wipaporn พฤ 21 ก.พ. 2019 12:28 pm บอร์ด korean Language - 한국어
0
7
พฤ 21 ก.พ. 2019 12:28 pm โดย wipaporn
Module M Slideshows 사용 지침과 설명
โดย wipaporn พฤ 21 ก.พ. 2019 12:27 pm บอร์ด korean Language - 한국어
0
7
พฤ 21 ก.พ. 2019 12:27 pm โดย wipaporn
Component M Multisite Master 사용 지침과 설명
โดย wipaporn พฤ 21 ก.พ. 2019 12:27 pm บอร์ด korean Language - 한국어
0
4
พฤ 21 ก.พ. 2019 12:27 pm โดย wipaporn
Component M Multisite Client 사용 지침과 설명
โดย wipaporn พฤ 21 ก.พ. 2019 12:27 pm บอร์ด korean Language - 한국어
0
4
พฤ 21 ก.พ. 2019 12:27 pm โดย wipaporn
MDFiles Featured 사용 지침과 설명
โดย wipaporn พฤ 21 ก.พ. 2019 12:26 pm บอร์ด korean Language - 한국어
0
4
พฤ 21 ก.พ. 2019 12:26 pm โดย wipaporn
Module MDFiles Popular 사용 지침과 설명
โดย wipaporn พฤ 21 ก.พ. 2019 12:25 pm บอร์ด korean Language - 한국어
0
12
พฤ 21 ก.พ. 2019 12:25 pm โดย wipaporn
Q - ต้องการซ่อนบ็อก Next step ในฟอร์มที่ยังกรอกข้อมูลยังไม่ครบทุกหน้า
โดย Parichat พฤ 21 ก.พ. 2019 11:54 am บอร์ด Joomla Dev
0
1
พฤ 21 ก.พ. 2019 11:54 am โดย Parichat
การล็อคหัวข้อ คืออะไร ทำความรู้จักกับเครื่องมือในการล็อคหัวข้อ สำหรับผู้ดูแลระบบ
โดย จันนุสรณ์ ดีแก่ พฤ 21 ก.พ. 2019 10:38 am บอร์ด phpBB user Guide Knowledge
0
6
พฤ 21 ก.พ. 2019 10:38 am โดย จันนุสรณ์ ดีแก่
งานประจำวันที่ 21 กุมภาพันธ์ 2562
โดย Four พฤ 21 ก.พ. 2019 10:23 am บอร์ด M077 - อิษยา งามสอาด
1
7
พฤ 21 ก.พ. 2019 9:40 pm โดย Four