Langsung ke konten utama

Membuat Form Login popup pada web

selamat datang di arsipbertuah blog. pada posting sne kali ini. ane akan membahas tentang cara membuat form login popup atau melayang. menggunakan Bootstrap. seperti yang kita ketahui Bootstrap adalah framework untuk mendesain sebuah aplikasi / sistem yang berbasis web. bootstrap memberikan kemudahan untuk kita dalam mendesain user interface pada web. yang telah di desain sendiri komponen- komponen HTML menggunakan CSS sehingga tampilan web lebih teratur dan rapi . dan dengan sentuhan javascrip yang sudah diatur sedemikin rupa akan membuat web yang kita buat lebih interaktif dengan user. salah satu komponen untuk membuat form login tampilan popup atau melayang adalah menggunakan salah satu komponen bootstrap yaitu Modal. Modal pada botstrap adalah sebuah activity dialog yang muncul di tengah layar.
pada artikel ini kita akan belajar membuat desain form login menggunakan modal Twitter Bootstrap. dengan tujuan hanya untuk membuat website atau sistem memiliki tampilan yang lebih kren dan interaktif dengan user. lihat kode basic modal bootstrap dibawah ini:

Basic Modal Bootstrap

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
kode diatas adalah kode dasar dari dialog modal bootstrap. diatas bisa kita lihat ada beberapa kompone yang ada pada modal tersebut.
1.Button untuk aksi memanggil atau acuan untuk menampilkan modal
2.Header modal yaitu tempat memberikan judul misalnya.
3.Content yaitu tempat meletekan isi dari dari suatu dialog
4.footer yaitu biasanya tempat meletakkan buuton dan lain-lain

Membuat Form Login pop up

nah, untuk membuat form login menggunakan modal Bootstrap kita modif saja kode diatas seperi dibawah ini:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>belajar membuat form login menggunakan modal</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Log in</button>

            <!-- Modal -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Form Login</h4>
                  </div>
                  <div class="modal-body">
                    <form method="post" action="" class="form-horizontal">
                
              <div class="form-group">
                  <label for="nama" class="col-sm-2 control-label">email</label>
                  <div class="col-sm-10">
                  <input type="email" class="form-control" name="email" requered ></div>
            </div>
            <div class="form-group">
                  <label for="nama" class="col-sm-2 control-label">password</label>
                  <div class="col-sm-10">
                  <input type="password" class="form-control" name="pwd" requered ></div>
                  
            </div>
            <div class="form-group">
            <label class="col-sm-2"></label>
                  <div class="col-sm-10">
                    <a href="">lupa password ?</a>
                  </div>
            </div>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" name="s"class="btn btn-primary">LOGIN</button>
                  </div>
                     </form>
                </div>
              </div>
            </div>
            </div>
            <!-- Modal -->
</div>

</body>
</html>
begitu gan contoh membuat form login pop up menggunakan modal bootstrap. silahkan kopas kode diatas untuk melihat hasilnya.tapi harus ada koneksi internet karena instalasi bootstrap pada kode diatas menggunakan CDN lihatlah pada tag head diatas. supaya bisa offline instal baca cara instalasi bootstrap disini .ane juga pernah buat seperti gambar ini gan.
belajar-membuat-form-login-modal-bootstrap
begitulah hasilnya yang pernah ane buat. sekaian dari ane semoga dapat memberikan manfaat buat agan. selamat mencoba dan semoga sukses.
Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Metode (SAW) Simple Additive Weighting dan contoh coding PHP

Pengertian SAW Simple Additive Weighting meupakan metode penjumlahan terbobot konsep dasar metode SAW adalah mencari penjumlahan terbobot dari rating kinerja pada setiap alternative pada semua kriteria (Kusumadewi, 2006) Menurut Fajar Nugraha (2011), metode SAW membutuhkan proses normalisasi matrik keputusan (X) ke suatu skala yang dapat diperbandingkan dengan semua rating alternatif yang ada. Metode SAW mengenal adanya 2(dua) atribut yaitu kriteria (benefit) dan kriteria biaya (cost) perbedaan mendasar dari kedua kriteria ini adalah dalam pemilihan kriteria ketika mengambil keputusan. Adapun langkah penyelesaian dalam menggunakannya adalah 1. Menentukan alternative, yaitu Ai 2. Menentukan kriteria yang akan dijadikan acuan dalam pengambilan keputusan, yaitu Cj 3. Memberikan nilai rating kecocokan setiap alternative pada setiap kriteria. 4. Menentukan bobot preferensi atau tingkat kepentingan (W) setiap kriteria W=[ W1 W2 W3 W4] 5. Membuat table rating kecocokan dari setiap
3 komentar
Baca selengkapnya

Php root Url untuk include dari dalam dan luar folder

Pada Posting ini akan membahas pemanggilan file-file php atau juga html document. yang melalui fungsi yang telah disediakan oleh php dan membahas bagaimana menggali berdasarkan letak file atau root(akar) didalam folder,sub folder dan sub sub folder. Fungsi PHP untuk memanggil file php lainya Bahasa pemograman PHP  memiliki kemampuan utuk menyertakan file php yang lainnya.adapun fungsi untuk menyertakan file php lainya yaitu. include(); require(); include_once(); requere_once(); agan bisa gunakan salah satu dari fungsi tersebut sesuai dengan kebutuhan agan. Bagaimana memanggil file php berdasaran lokasi akar foldernya ? 1.memanggil di dalam satu folder yang sama memanggil dalam satu folder ini maksunya adalah file php yang akan memanggil dan file php yang akan di panggil berada dalam satu folder. nah, untuk menyertakan file php didalam folder yang sama pathnya seperti  contoh dibawah ini: include(‘koneksi.php’); pada conto diatas file php koneksi berada dalam satu folder dengan file yan
Posting Komentar
Baca selengkapnya

Belajar php : membuat nomor ID otomatis untuk insert data

Penjelasan tentang membuat nomor id otomatis Hallo gan pada postingan saya kali ini .saya akan berbagi cara untuk membuat id otomatis pada pemograman PHP dan mySQL . id otomatis maksudnya adalah kita akan menciptakan sebuah nomor unik dengan proses penambahan kode tersebut tanpa kita inputkan alias akan dibuat dan diproses oleh php.hampir semua aplikasi menggunakan id otomatis untuk penambahan data baik itu program berbasis desktop maupun berbasis web.jadi jangan diragukan lagi ,agan sudah berada dalam kesempatan yang baik untuk belajar menjadi programmer yang handal. dalam pemograman PHP banyak sekali cara yang dapat dilakukan untuk generate nomor unik yang dapat digunakan sebagai primary key pada database. pada kasus tutorial kali ini saya praktekan menyimpan sebuah data ke database menggunakan PHP yang sesuai dengan posting ini membuat id otomatis.untuk itu saya asumsikan ,agan sudah bisa membuat tabel database dan mengkoneksikannya.pada kasus ini saya mengunakan database seperti in
Posting Komentar
Baca selengkapnya