Sign in
  • Home
  • Tech News
    • Gadgets
    • Wearables
    • Video
    • Gaming
    • Computing
    • Internet
    • Security
    • Smart Home
    • Phones
    • Photography
  • Tutorial
    • Codeigniter
    • HTML
    • Javascript
    • Laravel
    • PHP
    • Vue.js
    • WordPress
  • Entertainment
  • LAYANAN
    • Program Komputer
    • Web Based Application
    • Website Perusahaan
  • Portofolio
Sign in
Welcome!Log into your account
Forgot your password?
Privacy Policy
Password recovery
Recover your password
Search
Thursday, March 4, 2021
  • Sign in / Join
  • Disclaimer
  • Privacy Policy
  • Contact – Hire Our Team
  • Submit A Guest post
Sign in
Welcome! Log into your account
Forgot your password? Get help
Privacy Policy
Password recovery
Recover your password
A password will be e-mailed to you.
JOGJATECH
  • Home
  • Tech News
    • Gadgets
    • Wearables
    • Video
    • Gaming
    • Computing
    • Internet
    • Security
    • Smart Home
    • Phones
    • Photography
  • Tutorial
    • AllCodeigniterHTMLJavascriptLaravelPHPVue.jsWordPress
      Google reCAPTCHA validation

      Tutorial Laravel 6,7,8 Add Google reCAPTCHA Form Validation

      Laravel Form Multiple Upload Files

      Laravel Tutorial Multiple Upload Files

      Laravel upload public storage success

      Laravel Tutorial Membuat Upload Image atau File ke Database MySQL dan…

      Tutorial Codeigniter Add or Remove Multiple Input Fields with jQuery

      Tutorial Codeigniter Add or Remove Multiple Input Fields with jQuery

  • Entertainment
    • PlayStation 5

      5 Reasons Why Gaming Console is Better Than PC Gaming

      Photografi

      50 Tips and Insights About Productivity, Happiness, and Life

      DJI Osmo Pocket DJI

      5 Best Camera for Your YouTube Account

      Netflix Indonesia

      Tetap Terhibur Selama Pandemi, Ini 7 Layanan Streaming Legal yang Bisa…

      iflix Indonesia

      Bagaimana Cara Menyiapkan Konser Virtual yang Seru dan Nyaman?

  • LAYANAN
    • Program Komputer
    • Web Based Application
    • Website Perusahaan
  • Portofolio
    • Preview DRH Pegawai

      Codeigniter Sistem Informasi Database Kepegawaian

      dashboard aplikasi website sistem informasi pelayanan perizinan

      Laravel Website Sistem Informasi Pelayanan Perizinan Terpadu Online

      Website Portal Berita

      Website Portal Berita Berbasis WordPress

      aplikasi surat keterangan (suket)

      Aplikasi E-suket atau layanan surat keterangan berbasis web

      Sistem Informasi Pengelolaan Surat Masuk dan Surat Keluar

Home Tutorial Codeigniter Membuat Progress Bar Pada Form Login Codeigniter
  • Tutorial
  • Codeigniter

Membuat Progress Bar Pada Form Login Codeigniter

By
JogjaTech
-
April 19, 2020
0
369

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.

progress bar form login codeigniter
Photo: jogjatech.com

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>
<h1><i class="fa fa-paw"></i> <?php echo (!empty($title)?$title:'');?></h1>
<p>© 2020 - <?php echo date('Y');?></p>
</div>
</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%'},1000,function(){
$(this).children('span').fadeIn();
});
$('#password-check .loadingbar').delay(500).fadeIn().animate({'width':'100%'},1000,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…

  • TAGS
  • codeigniter
  • form login
Facebook
Twitter
Pinterest
WhatsApp
Linkedin
ReddIt
Tumblr
Telegram
Mix
VK
Digg
LINE
Viber
    Previous articleAplikasi Besutan Pemerintah PeduliLindungi Tembus 1 Juta Download
    Next articleCodeIgniter Part 1 : Integrasi Template Pada Framework CodeIgniter
    JogjaTech
    Tech News, Gadgets, Tutorial, IT Solution, Web Developer

    RELATED ARTICLESMORE FROM AUTHOR

    Tutorial Codeigniter Add or Remove Multiple Input Fields with jQuery

    Tutorial Codeigniter Add or Remove Multiple Input Fields with jQuery

    Codeigniter Send Email Notification

    Tutorial Cara Membuat Verifikasi Email Dengan Library Email Codeigniter

    Integrated TinyMCE Codeigniter 4

    Codeigniter 4: Cara Menggunakan dan Mengintegrasikan TinyMCE

    Codeigniter 4 Import File Excel Jogjatech

    Codeigniter 4 Tutorial Import Data Excel Menggunakan Library PHPExcel

    Codeigniter 4 Export PDF via Firefox

    Codeigniter 4: Membuat Fitur Export PDF Codeigniter 4

    Codeigniter 4 Export file PHPExcel

    Codeigniter 4: Membuat Export Excel Menggunakan Codeigniter 4

    Recent Posts

    Tutorial Laravel 6,7,8 Add Google reCAPTCHA Form Validation

    JogjaTech - January 27, 2021 0

    Laravel Tutorial Multiple Upload Files

    JogjaTech - January 26, 2021 0

    Laravel Tutorial Membuat Upload Image atau File ke Database MySQL dan Public Storage

    JogjaTech - January 24, 2021 0

    Which Next-Gen Gaming Console to Buy?

    JogjaTech - January 22, 2021 0

    What to Prepare for the Sony PlayStation 5 Releases?

    JogjaTech - January 22, 2021 0

    EDITOR PICKS

    Kaspersky Bakal Rilis Ponsel Paling Kebal Hacker

    Kaspersky Bakal Rilis Ponsel Paling Kebal Hacker Tahun Depan

    December 9, 2020
    Samsung Antimicrobial Coating (LetsGoDigital)

    Samsung akan Memproduksi Casing Anti Covid 19

    July 11, 2020
    Netflix Indonesia

    Telkom Group, IndiHome dan Telkomsel Resmi Buka Blokir Netflix

    July 8, 2020

    POPULAR POSTS

    Laravel 7 Sweet Alert Delete Data

    Tutorial Laravel 7 Make Notification Sweet Alert for Delete Data

    September 15, 2020
    Memasang template Gentelella Alela! di Codeigniter4

    Codeigniter4 Templating: Memasang Template Bootstrap di Codeigniter4

    June 15, 2020
    boostrap modal edit data Laravel

    Step By Step Tutorial Laravel Lengkap Cara Membuat Aplikasi CRUD Dengan...

    July 13, 2020

    POPULAR CATEGORY

    • Tech Shop53
    • Laravel48
    • Phones40
    • Tutorial33
    • Photography29
    • Gaming27
    • Smart Home25
    • Internet24
    • Entertainment23
    ABOUT US
    JogjaTech - Berbagi masalah contoh pemrograman, PHP, Laravel, Codeigniter, dan lainnya, serta berita seputar teknologi lainnya.
    Contact us: info.jogjatech@gmail.com
    FOLLOW US
    • Privacy Policy
    • Contact – Hire Our Team
    • Submit A Guest post
    • Jasa Website dan Web Based Application
    © JogjaTech