Membuat Progress Bar Pada Form Login Codeigniter

Halo semuanya… Kali ini kita akan mencoba tutorial cara membuat progress bar pada form login codeigniter, ini adalah kali pertama saya share tutorial tentang codeigniter di website jogjatech.com, dan pada tutorial codeigniter ini kita akan belajar cara membuat progress bar pada form login dengan codeigniter. Mungkin ini akan terlihat sederhana akan tetapi tidak ada salahnya kita mencoba berbagi tentang bagaiman cara membuat progress bar loading pada form login codeigniter.

Persiapan Membuat Progress Bar Form Login Codeigniter

Oke teman-teman mari langsung saja kita praktekan dan kali ini saya menggunakan template gratisan Gentelella Alela, teman-teman bisa dapatkan secara gratis di internet. Seperti halnya membuat form login di html yang perlu kita persiapkan adalah sebagai berikut :

1. Download Codeigniter
   Pertama yang perlu dipersiapkan teman-teman tentunya adalah harus mendownload Codeigniter dari website resminya. Kemudian extract dan letakkan pada folder kerja teman-teman semua pada lokal komputer. Misalnya kali ini folder kerja saya bernama codeigniter, dan tentunya saya letakkan pada folder www/codeigniter jika saya menggunakan wamp server, dan saya letakkan pada folder htdocs/codeigniter jika saya menggunakan xampp server.
2. Membuat Form Login
   Nah setelah teman-teman semua berhasil men-download file codeigniter, tahap selanjutnya adalah teman-teman harus membuat atau mempersiapkan form login. Akan tetapi supaya tidak terlalu repot teman-teman bisa saja membeli tempate premium di internet atau men-download template gratisan yang tersedia di internet, dan kali ini teman-teman sekalian saya menggunakan template gratisan yang sudah tidak asing lagi di telinga para programmer, adalah Gentelella.
3. Memasang Template Di Codeigniter
   Setelah teman-teman berhasil men-download dua (2) file pada tahap 1 dan tahap 2, maka tahap selanjutnya adalah teman-teman perlu mengintegrasikan template pada codeigniter, akan tetapi pada tutorial kali ini teman-teman saya tidak akan membahas integrasi template tersebut, pembahasan akan saya ulas khusus pada tutorial selanjutnya, insyaallah…
4. Membuat Progress Bar Loading Pada Form Login Codeigniter
   Halo teman-teman semua, sudah tidak sabaran nih pastinya penasaran setelah melewati tahapan 1,2,dan 3, tahap selanjutnya akan kita babhas point intinya sesuai judul pada tutorial ini Membuat Progress Bar Pada Form Login Codeigniter, oke berikut adalah tahap-tahapan berikutnya :

• Form Login
  Nah berikut ini adalah form yang harus dipersiapkan

<?php echo form_open('auth/doLogin',array("id"=>"loginform")); ?>
              <h1>Login Form</h1>
              <div>
				<div id="cek-username"></div>
                <div class='loadingbox' id='username-check'>
					<input type="text" name="username" id="username" class="form-control" placeholder="Username/Email" required="" />
					<div class="loadingbar"><span>Completed!..</span></div>
				</div>
			  </div>
              <div>
				<div id="cek-password"></div>
				<div class='loadingbox' id='password-check'>
					<input type="password" name="password" id="password" class="form-control" placeholder="Password" required="" />
					<div class="loadingbar"><span>Completed!..</span></div>
				</div>
			  </div>
              <div>
                <button id="login-button" type="submit" onclick="cekLogin();return false" class="btn btn-block btn-default btn-success">Log in</button>
              </div>

              <div class="clearfix"></div>

              <div class="separator">
                
                <div class="clearfix"></div>
                <br />
              </div>
            <?php echo form_close();?>

• Function cekLogin
  Nah berikut ini adalah javascript nya

<script type="text/javascript">
function cekLogin(){
  $('#login-button').html("<img src='<?php echo base_url();?>assets/images/ajax-loader.gif' alt=''/> Proses Checking");
  $('#cek-username').html('Checking Username..');
  $('#cek-password').html('Checking Password..');
  $('#username-check .loadingbar').fadeIn().animate({'width':'100%'},10000,function(){
    $(this).children('span').fadeIn();
  });
  $('#password-check .loadingbar').delay(500).fadeIn().animate({'width':'100%'},10000,function(){
    $(this).children('span').fadeIn(function(){
      $('#loginform').submit();
    });
  });
}
</script>

selesai !!.. hehe..

Oke sekian dulu teman-teman tutorial kali ini tentang Membuat Progress Bar Pada Form Login Codeigniter, semoga bermanfaat dan dapat membantu teman-teman semua yang ingin menghias form login aplikasi atau website dengan progress bar. Terimakasih…