membuat form login responsive dengan bootstrap

share

membuat form login responsive dengan bootstrap membuat form login responsive dengan bootstrap membuat form login responsive dengan bootstrap membuat form login responsive dengan bootstrap membuat form login responsive dengan bootstrap
  • membuat form login responsive dengan bootstrap

    Cara Membuat Form Login Responsive dengan Bootstrap


    Tutorial cara membuat form login responsive dengan Bootstrap merupakan hal yang cukup mudah bagi beberapa back end dan front end developer, namun sebaliknya bagi programmer php mysql pemula.
  • membuat form login responsive dengan bootstrap
    Service
    1. Complete Website
    2. Only web script
    3. Web modification
    4. Application program
    5. Free web template
    6. Free application
    7. Basic SEO
    8. Article request
    9. Tutorial programing
  • membuat form login responsive dengan bootstrap
    MOTO
    "Kepuasan Pelanggan adalah Prioritas kami, Sebagai Pemicu Semangat Dalam Memberikan Pelayanan Terbaik".
  • membuat form login responsive dengan bootstrap Teknologi dan Bahasa
    PHP-5, HTML-5, CSS3, SQL Server, MySQL Database, Access Database, Java, JavaScript, dan Visual Basic.
  • membuat form login responsive dengan bootstrap
    VISI
    "Menjadi penyedia layanan yang terpercaya dan maju dalam dunia Teknologi Informasi."

Cara Membuat Form Login Responsive dengan Bootstrap

Cara membuat form login responsive dengan Bootstrap merupakan hal yang cukup mudah bagi beberapa back end dan front end developer, namun sebaliknya bagi programmer php mysql pemula. Membuat form login dengan Bootstrap, apa itu Bootstrap? yakni sebuah framework atau kerangka kerja CSS yang bersifat open source, dan di dalamnya berisi template desain berbasis HTML, CSS, dan JavaScript. Membuat form login yang responsive dan mobile friendly untuk saat ini hampir menjadi persyaratan wajib dari pemilik project, karena alasan pengguna ponsel pintar yang semakin bertambah. Namun tidak perlu cemas, membuat form login yang menarik keren dan juga responsive dapat dengan mudah di desain menggunakan framework Bootstrap ini.

Tutorial cara membuat form login responsive dengan bootstrap sehingga menghasilkan halaman login yang menarik dan mobile friendly ini kami desain menggunakan framework bootstrap versi terbaru saat ini dibuat yaitu 4.5.2. Kemudian dari sisi script HTML dapat kita coding sendiri sesuai dengan propertie yang tersedia di dalam framework bootstrap, atau boleh juga download beberapa contoh penggunaan di halaman sumbernya. Oke, sesaat lagi akan kita mulai belajar bagaimana cara membuat form login dengan bootstrap sehingga tampil responsive dan mobile friendly.

Cara Membuat Form Login Responsive dengan Bootstrap



membuat form login bootstrap

membuat form login responsive dengan bootstrap

Berikut adalah daftar isi langkah-langkah pada tutorial bagaimana cara membuat form login responsive dengan bootstrap sehingga tampil dengan desain menarik dan mobile friendly.

  • Download framework bootstrap di situs getbootstrap.
  • Membuat direktori folder asset di htdocs
  • Membuat Style Form Login CSS
  • Membuat kode program dengan script HTML dan desain template.

1. Download Bootstrap.

Silahkan download terlebih dulu assets bootstrap terbaru langsung pada sumbernya, disini getbootstrap.com. Kemudian ekstrak file rar yang di dalamnya terdapat assets dengan nama folder "CSS" dan "JS", dan simpan sementara pada folder apapun.

2. Membuat Folder Direktori Tutorial Login Bootstrap.

Buat nama folder terserah Anda dan sebaiknya terletak dalam direktori xampp htdocs agar mudah dieksekusi menggunakan url pada browser. Contoh nama folder yang kami buat adalah "login-bootstrap", sehingga url folder menjadi C:\xampp\htdocs\login-bootstrap\.

Kemudian buat nama folder "assets" di dalam folder "login-bootstrap" yang berfungsi untuk menyimpan folder "CSS" dan "JS" yang telah di download tadi. Dan tambahkan folder opsional untuk menyimpan file image logo, misalnya dengan nama folder "IMG".

Sehingga di dalam folder \login-bootstrap\assets\ terdapat 3 nama folder, seperti gambar di bawah ini.

membuat form login responsive dengan bootstrap

3. Membuat Style Form Login CSS.

Untuk membuat form login responsive dengan bootstrap kita juga perlu menambahkan style login dengan CSS agar tampilan halaman login lebih keren dan menarik.

Berikut adalah kode style CSS tersebut.

html,
body {
  height: 100%;
}
body {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #f5f5f5;
}
.form-signin {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: auto;
}
.form-signin .checkbox {
  font-weight: 400;
}
.form-signin .form-control {
  position: relative;
  box-sizing: border-box;
  height: auto;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

Save as style.css dan simpan di dalam folder "\login-bootstrap\assets\" sehingga sejajar dengan folder CSS, JS, dan IMG sebagaimana tutorial nomor 2.

4. Membuat File Index dengan HTML

Selain digunakan sebagai homepage form login, pada file ini juga kita akan melakukan coding script untuk membuat form login responsive dengan bootstrap. Kemudian simpan file index ini ke folder direktori utama yaitu \login-bootstrap\, sehingga sejajar dengan folder "assets" bootstrap.

Simpan sebagai index.html

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Jekyll v4.1.1">
    <title>Tutorial Membuat Form Login Responsive dengan Bootstrap</title>
	<link rel="canonical" href="">
    <!-- Bootstrap core CSS -->
	<link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }
      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>
    <!-- Custom styles for this template -->
    <link href="assets/style.css" rel="stylesheet">
</head>
<body class="text-center">
    <form class="form-signin">
		<img class="mb-4" src="assets/img/logo.png" alt="" width="72" height="72">
		<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
		<label for="inputEmail" class="sr-only">Email address</label>
		<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
		<label for="inputPassword" class="sr-only">Password</label>
		<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
		<div class="checkbox mb-3">
			<label>
				<input type="checkbox" value="remember-me"> Remember me
			</label>
		</div>
		<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
		<p class="mt-5 mb-3 text-muted">© 2017-2020</p>
	</form>
</body>
</html>

Sebagaimana coding index di atas, hal pertama yang perlu kita perhatikan adalah pada baris kode ke-11 yaitu <link href="assets/css/bootstrap.min.css" rel="stylesheet">. Itu adalah atribut link untuk memanggil seluruh asset css pada bootstrap, yang salah satu perannya adalah untuk membuat form login menjadi responsive. Kemduian hal kedua yang perlu diperhatikan juga adalah pada baris kode ke-28 yaitu <link href="assets/style.css" rel="stylesheet">, style ini akan membuat desain form login yang keren dan menarik. Selebihnya adalah pengetahuan umum dimana untuk membuat sebuah form harus di awali dan di akhiri oleh tag html <form> dan </form>, serta tag input beserta atribut nya diperlukan untuk membuat kolom isian atau text fill.

Sekali lagi pastikan bahwa file index di atas tersimpan di dalam folder "\login-bootstrap\" sehingga sejajar dengan folder "assets", sebagaimana gambar di bawah ini.

membuat form login responsive dengan bootstrap

Sampai disini pembahasan tutorial cara membuat form login responsive dengan Bootstrap agar halaman terlihat sebagai desain yang keren dan menarik serta mobile friendly telah selesai. Selanjutnya adalah ujicoba menjalankan coding form login bootstrap tersebut pada web browser, dan berikut adalah screenshot hasil eksekusinya.

membuat form login responsive dengan bootstrap

Tutorial Cara Membuat Form Login Responsive dengan Bootstrap

Download Complete Script

Sekian penjelasan dari kami tentang tutorial cara membuat form login responsive dengan bootstrap sehingga desain halaman login menjadi keren dan menarik serta mobile friendly. Untuk mendapatkan source code nya Anda dapat langsung mendownload melalui link di atas, jika link download tidak aktif atau error mohon hubungi kami melalui SMS atau email atau melalui form komentar dan obrolan. Semoga dapat membantu.

Baca juga :


Cara Membuat Form Login Responsive dengan Bootstrap

Tags: membuat form login dengan bootstrap, membuat form login responsive, form login bootstrap, login bootstrap, membuat form login responsive dengan bootstrap


Reliable

membuat form login responsive dengan bootstrap

Advertise

jasa pasang iklan murah

Archive

Payment & Donation

membuat form login responsive dengan bootstrap

Rekening BCA : 343 1156 006

a/n : Andi Hatmoko

Rekening MANDIRI : 13300 11921 079

a/n : Andi Hatmoko

membuat form login responsive dengan bootstrap

Account :

andihatmoko@gmail.com

Live Chat

Budi H2021-10-06, 11:12 am
Saya tertarik dengan disain Sistem informasi Manajemen data anggota, bisa di custom untuk data UMKM?
Irene2021-10-05, 14:50 pm
Hai, saya tertarik dengan aplikasi arsip surat masuk dan keluar_ _ Berapa ya kira kira rincian biayanya?
adi2021-10-03, 17:16 pm
terima kasih tutorialnya sangat membantu
Abi2021-10-02, 01:48 am
hai saya tertarik dengan Program Aplikasi Input Data Anggota, ada telp yang bisa di hubungi ?
saya ertin2021-09-28, 15:07 pm
apakah saya bisa hosting yang data siswa
Indra2021-09-20, 14:39 pm
selamat siang, sy mau coba utk bikin startup peminjaman barang, apakah bisa di setup lokal server ?harga brp?ada limiter
Dimas Nurcah2021-09-16, 11:38 am
cara menampilkan ip versi 6 nya itu gimana min? saya coba scriptnya malah _ _ 1 _ Mohon sekali bantuannya min
dedi2021-09-11, 13:06 pm
sandi login untuk aplikasi absensi mas apa ya
Budi2021-09-09, 15:49 pm
Maaf ingin bertanya, harga untuk aplikasi sarpras dan simpeg berapa ya masing_ masingnya
SURATNO2021-09-03, 13:47 pm
saya ingin bikin aplikasi data rt rw apakah bisa di bantu
BUKHORI2021-08-23, 00:36 am
mohon info harga aplikasi input data anggota?
MIchaek Stan2021-08-14, 15:53 pm
Saya mau buat system laporan keuangan dan web info soal bisnis saya? apa bisa bantu _ WA 081575556888
Bagas2021-08-12, 14:04 pm
Bagaimana saya bisa mendownload aplikasi E_ Skripsi
Bambang2021-07-29, 14:18 pm
Bisa di ganti namanya tidak ya mis Gudang backup arsip sat
Nirwan2021-07-29, 10:23 am
Program Aplikasi HRD Berbasis Web, berapa bos
Ghossani2021-07-23, 15:26 pm
Info harga Aplikasi Manajemen Anggota
Hanafi2021-07-22, 00:50 am
untuk website sekolah berapa
Bambang W 2021-06-30, 10:31 am
Untuk aplikasi stock barang, bisakah ada tambahan fitur multi gudang, dan kira kira berapakah harganya?
Warta2021-06-18, 00:24 am
Untuk biaya pembuatan aplikasi berbasis web untuk arsip berapa yah fee nya ?
ellll2021-06-15, 10:51 am
program aplikasi pembuatan ektp harganya berapaan ?
parlin2021-06-11, 14:42 pm
berapa harga dan bisa gk di ganti menu sesui dengan kebutuhan untuk aplikasi data pegawai
Retno2021-06-04, 15:13 pm
utk aplikasi arsip dokumen kantor, harganya brp ya pak?
NOFAL2021-06-02, 20:57 pm
hallo, untuk aplikasi penjualan retail brp harganya? ini sistem bisnisnya source code di ksh atau cloud?
Ezi Fitriana2021-05-26, 21:42 pm
mohon info biaya buat aplikasi sistem informasi dan pelayanan online buat Kantor Desa
Sayuti2021-05-25, 15:06 pm
Mau tanya klo Biaya buat Aplikasi Penilaian Kinerja Atau SKP brp ya?
Farah Ghaida2021-05-20, 15:13 pm
maaf pa sy mau tanya biaya pembuatan aplikasi data kepegawaian
Rachma2021-05-08, 19:26 pm
Untuk program aplikasi arsip dokumen biayanya berapa ya? dan apakah ada pembatasan maksimal berapa kb per dokumen?
zainuddin2021-05-02, 08:07 am
mohon informasi harga cuti online
zulkifli2021-04-25, 22:45 pm
brapa harganya aplikasi data ke anggotaan sederhana yang bisa lampirkan foto dan di print
irvan2021-04-14, 11:00 am
saya ingin membeIi untuk instansi pemerintah saya, bagaimana pembeIiannya ya
Sahlani2021-03-25, 19:33 pm
Saya mau pesan absensi karyawan berbasis web yang sederhana_
fahmi2021-03-16, 02:16 am
Berapa ya harga aplikasi perjalanan dinas ini?
dela2021-03-10, 10:23 am
ka untuk pembelian aplikasi manajemen anggota berapa budgetnya? dan mendapatkan source codenya tidak ya?
isna2021-02-26, 23:59 pm
saya minat Aplikasi pengajuan judul skripsi online bang_
regista2021-01-20, 10:45 am
Hallo kak info saya ingin download aplikasi rental barang kak

Post your chat:


Name



Email



Chat



Confirm you are NOT a spammer

 
membuat form login responsive dengan bootstrap