Contoh Form Registrasi Bootstrap dan Cara Membuatnya

Hai kembali lagi di blog saya kodekreasi.com yang akan membahas seputar hal yang menarik di dunia programming khususnya web programming. Pada artikel kali ini saya akan memberikan sebuah contoh form registrasi menggunakan bootstrap. Sebenarnya hasil akhir dari artikel ini adalah membuat sebuah sistem authentikasi user namun tutorial ini akan saya pecah menjadi beberapa part agar lebih mudah untuk dipahami. Pada tutorial yang pertama ini kita akan membuat form registrasi. Form register yang akan kita buat pada tutorial ini belum termasuk proses di back end nya atau masih sebatas tampilan saja. Untuk proses backend nya kalian dapat melihat pada artikel saya selanjutnya.

O iya sebelum beranjak ke proses kodingnya terlebih dahulu alangkah baiknya kita memahami terlebih dahulu kebutuhan dari form register yang akan kita buat . Untuk form register yang akan kita buat terdiri dari beberapa inputan diantaranya username, nama, email, password . Username dan password disini nantinya kita butuhkan pada saat proses login yang akan kita buat pada tutorial selanjutnya.

Contoh Form Registrasi

Setelah kalian memahami kebutuhan dari contoh form register ini langsung saja kita mulai proses kodingnya , oke. Untuk requirement pada tutorial ini yang kita butuhkan adalah :

Xampp
Text Editor (atom, visual studio code, sublime text atau yang lain-lain)

1. Langkah yang pertama buka folder htdocs kalian untuk pengguna linux folder ini biasanya berada pada directory /opt/lampp/lampp/htdocs dan untuk pengguna windows biasanya ada di direktori C:\xampp\htdocs

2. Langkah yang kedua buat sebuah folder dengan nama belajar-authentikasi.

3. Langkah yang ketiga , didalam folder yang telah kita buat tadi tambahkan sebuah file dengan nama register.php

4. Langkah ke empat , Copykan scribt contoh form registrasi ini kedalam file register.php

<!DOCTYPE html>
<html lang="en">
<head>
<!-- meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<!-- costum css -->
<link rel="stylesheet" href="style.css">
</head>
 
<body>
    <section class="container-fluid">
        <!-- justify-content-center untuk mengatur posisi form agar berada di tengah-tengah -->
        <section class="row justify-content-center">
        <section class="col-12 col-sm-6 col-md-4">
            <form class="form-container">
                <h4 class="text-center font-weight-bold"> Sign-Up </h4>
                <div class="form-group">
                    <label for="name">Nama</label>
                    <input type="text" class="form-control" id="name" placeholder="Masukkan Nama">
                </div>
                <div class="form-group">
                    <label for="InputEmail">Alamat Email</label>
                    <input type="email" class="form-control" id="InputEmail" aria-describeby="emailHelp" placeholder="Masukkan email">
                </div>
                <div class="form-group">
                    <label for="name">Username</label>
                    <input type="text" class="form-control" id="username" placeholder="Masukkan username">
                </div>
                <div class="form-group">
                    <label for="InputPassword">Password</label>
                    <input type="password" class="form-control" id="InputPassword" placeholder="Password">
                </div>
                <div class="form-group">
                    <label for="InputPassword">Re-Password</label>
                    <input type="password" class="form-control" id="InputRePassword" placeholder="Re-Password">
                </div>
                <button type="submit" class="btn btn-primary btn-block">Register</button>
                <div class="form-footer mt-2">
                    <p> Sudah punya account? <a href="#">Login</a></p>
                </div>
            </form>
        </section>
        </section>
    </section>

    <!-- Bootstrap requirement jQuery pada posisi pertama, kemudian Popper.js, danyang terakhit Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>

5. Buat file style.css kedalam folder belajar-authentikasi yang telah kita buat tadi.

6. Tambahkan scribt berikut kedalam file style.css yang kita buat tadi.

/* mengatur warna backgroud dan padding pada tag body bagian atas agar form tidak menempel diatas */
body{
	background: #383a3d;
	padding-top: 10vh;	
}

/* mengatur warna backgroud form */
form{
	background: #fff;
}

/* mengatur border dan padding class form-container */
.form-container{
	border-radius: 10px;
	padding: 30px;
}

7. Jalankan scribt program contoh form registrasi diatas dengan terlebih dahulu menjalankan xampp kemudian buka url localhost/belajar-authentikasi.

8. Berikut adalah hasil dari scribt program diatas ketika dijalankan.

Sekian artikel kali ini untuk artikel selanjutnya saya akan membahas tentang pembuatan proses register, login, logout dengan PHP dan Mysqli.

1 Comment

Tutorial Membuat register Login Logout dengan PHP dan Mysqli - Kodekreasi

Leave a Comment