Mini Wallet Bagian 4 - Django User Register

Publish on Jun 10, 2023 by Alfin F

Di tutorial sebelumnya kita telah belajar tentang django model dan koneksi database MySql.

Di tutorial ini kita akan belajar tentang django user register, kita akan membuat fungsi dan class user register serta membuat password validator.

Untuk mengikuti tutorial ini pastikan Anda telah mengikuti tutorial sebelumnya terkait dengan django model dan koneksi database.

A) Template User Register

1) Buat folder user di direktori templates

Setelah Anda membuat folder user, sekarang buat file dengan nama register.html

<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <title>Form Register New User</title>
        <link href="../css/bootstrap.min.css" rel="stylesheet">
        <link href="../css/user/register.css" rel="stylesheet">

        <style>
            .bd-placeholder-img {
                font-size: 1.125rem;
                text-anchor: middle;
                -webkit-user-select: none;
                -moz-user-select: none;
                user-select: none;
            }

            @media (min-width: 768px) {
                .bd-placeholder-img-lg {
                    font-size: 3.5rem;
                }
            }
        </style>
    </head>
    <body class="text-center">

        <main class="form-register">
            <form method="post" action="">
                <h1 class="h3 mb-3 fw-normal">Form Register User</h1>

                <div class="form-floating">
                    <input
                        type="email"
                        class="form-control"
                        name="email"
                        id="email"
                        placeholder="name@example.com">
                    <label for="email">Email address</label>
                </div>
                <div class="form-floating">
                    <input
                        type="password"
                        class="form-control"
                        name="password"
                        id="password"
                        placeholder="Password">
                    <label for="password">Password</label>
                </div>
                <div class="form-floating">
                    <input
                        type="password"
                        class="form-control"
                        name="retype-password"
                        id="retype-password"
                        placeholder="Ulang Password">
                    <label for="retype-password">Ulang Password</label>
                </div>
                <button class="w-100 btn btn-lg btn-primary" type="submit">Register</button>
            </form>
        </main>

    </body>
</html>

2) Tambahkan file register.css di direktori css/user

html,
body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #f5f5f5;
}

.form-register {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: auto;
}

.form-register .checkbox {
  font-weight: 400;
}

.form-register .form-floating:focus-within {
  z-index: 2;
}

.form-register input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.form-register input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

B) Django Class Based View User Register

Buat app baru dengan nama users

python manage.py startapp users

Selanjutnya buat class di file views.py dengan nama RegisterUser.

class RegisterUser(TemplateView):
    template_name = 'user/register.html'
    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        return context
    
    def post(self, *args, **kwargs):
        context = self.get_context_data()
        return super(TemplateView, self).render_to_response(context)

C) Format Password Validator

Buat sebuah fungsi untuk memvalidasi format password

from math import fabs
import re

        
def validate_format_password(password):
    flag = 0
    common_msg = "Kata sandi harus mengandung setidaknya 1 [a-z, A-Z, 0-9, _@$]"
    msg = ""
    while True:  
        if (len(password)<8):
            flag = -1
            msg = 'The password > 8 character'
            break
        elif not re.search("[a-z]", password):
            flag = -1
            msg = common_msg
            break
        elif not re.search("[A-Z]", password):
            flag = -1
            msg = common_msg
            break
        elif not re.search("[0-9]", password):
            flag = -1
            msg = common_msg
            break
        elif not re.search("[_@$]", password):
            flag = -1
            msg = common_msg
            break
        else:
            flag = 0
            msg = 'Valid password'
            break
    
    if flag ==-1:
        return False, msg
    else:
        return True, msg

D) Django Messages

Di bagian ini import library django messages untuk menampilkan pesan error dan success dihalaman web.

Pada file views.py import library messages

from django.contrib import messages

Kemudian tambahkan kode berikut pada bagian akhir kode html

{% if messages %}
    {% for message in messages %}
        {% if message.tags == "error" %}
            <div class="alert alert-danger" role="alert">
                {{message}}
            </div>
        {% endif %}
        {% if message.tags == "success" %}
            <div class="alert alert-success" role="alert">
                {{message}}
            </div>
        {% endif %}
    {% endfor %}
{% endif %}