Membuat Aksi Dengan JavaScript

Assalamulaiakum warahmatullahi Wabarokatuh

         kembali lagi di blog saya, sebelemnya saya telah memposting cara membuat form login dengan CSS. Postingan kali ini saya akan melanjutkan form login kemarin yang pernah saya posting, disini saya akan menambahkan sedikit javascript pada form login yang sebelumnya saya posting.

langsung saja kita mulai tutorialnya sebagai berikut:

        1) Yang pertama yang perlu anda persiapkan bahan-bahannya adalah file javascript dan jquey , anda dapat mendownloadnya Disni.
Setelah anda mendownloadnya silahkan di extract . Setelah itu  copy "bootsrap.min.js","jquery.min.js","popper.min.js" ke dalam folder project sebelumnya di folder JS.

        2.) Langkah kedua yaitu masukkan javascript dan jquery ke dalam index.php , sesuaikan dimana anda menyimpan file tersebut. Scriptnya sebagai berikut dan copykan pada file index.php :

             

             <script src="js/jquery.min.js"></script>

             <script src="js/popper.min.js"></script>

             <script src="js/bootstrap.min.js"></script>

     3.) Menambahkan alert pada project form login sebelumnya , untuk scriptnya dapat dilihat dibawah ini dan copykan pada file index.php:

            <div class="alert alert-warning alert-dismissible fade show" role="alert">

            <strong>WARNING!</strong> Hati-hati JOMBLO.

            <button type="button" class="close" data-dismiss="alert" aria-label="Close">

            <span aria-hidden="true">&times;</span>

            </button>

           </div>

       4.) Langkah berikutnya yaitu menambahkan Aksi pada komponen alert , untuk scriptnya sebagai berikut dan copykan pada file index.php:

               <script>

            window.setTimeout(function() {

                  $(".alert").fadeTo(400,0).slideUp(400,function (){

                      $(this).remove();

                  });

              },3000);   >>Disini Alert akan muncul selama 3 detik

            </script>

       5.) Untuk full source code bisa dilihat dibawah ini , source code ini copykan pada file index.php.

     6.) Kemudian copykan source code dibawah ini dengan nama file login.php

    7.) Setelah semua source code dimasukan ke dalam project anda , akan tampil formnya sebagai berikut:

    sekian dan terimakasih , mungkin hanya sedikit yang dapat saya posting , sekiranya masih banyak kekurangan mohon maaf, karena disni kita juga sama-sama belajar.

Wassalamualaikum Warahmatullahi Wabarokatuh

sampai ketenu lagi di postingan berikutnya