Mini Wallet Bagian 4 - Django User Register

Subscribe Dengan Account Google Untuk Membaca Artikel Tanpa Iklan !
Mini Wallet Bagian 4 - Django User Register
Smart Drone E88 Pro 4k HD Camera Shoot Original

Smart Drone E88 Pro 4k HD Camera Shoot Original

Kapasitas Batre: 3.7V / 1800mAh. Warna : Matte-black. Metode pengisian : USB Charging. Waktu pengisian:50 minutes. Waktu terbang : 15-20 menit. Jarak terbang :80-100m. Video signal: WiFi

Free Klik Disini !

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 %}

E) Video Tutorial


Ikuti tutorial lengkapnya di video tutorial berikut :

Githubhttps://github.com/halovina/e-wallet/tree/django-user-register

Baca artikel lainya:


  1. Mini Wallet Bagian 1 - Django Template dan Static File

  2. Mini Wallet Bagian 2 - Django Template Base HTML

  3. Mini Wallet Bagian 3 - Django Model dan Koneksi Database Mysql

  4. Tutorial bassic Mysql bagian 1 - Create Read Update Delete

  5. Tutorial bassic Mysql bagian 2 - Inner, Left, Right, Cross Join

  6. Tutorial bassic Mysql bagian 3 - Filtering Data

  7. Tutorial bassic Mysql bagian 4 - Grouping Data 

  8. Tutorial bassic Mysql bagian 5 - Operator dan Clausa

  9. Tutorial bassic Mysql bagian 6 - Replace Statement

  10. Tutorial bassic Mysql bagian 7 - Constraint Data

  11. Tutorial bassic Mysql bagian 8 - Mengubah Struktur tabel

  12. Tutorial bassic Mysql bagian 9 - Subquery

  13. Tutorial bassic Mysql bagian 10 - Virtual Tabel

  14. Tutorial bassic Mysql bagian 11 - Control Flow Function

  15. Membuat service OTP bagian 1 - OTP dan PIN

  16. Membuat service OTP bagian 2 - Sequence Diagram

  17. Membuat service OTP bagian 3 - Model dan Serializer

  18. Membuat  service OTP bagian 4 - Validate OTP

  19. Membuat  service OTP bagian 5 - Api Client Service

  20. Membuat service user login bagian 1 - Konfigurasi Database

  21. Membuat service user login bagian 2 - Serializer dan JWT

  22. Membuat CRUD service product bagian 1 - Models Product

  23. Membuat CRUD service product bagian 2 - Function Serializer

  24. Membuat CRUD service product bagian 3 - Api Client Service

  25. Membaut CRUD service product bagian 4 - Auth User

  26. Membuat CRUD service product bagian 5 - TDR File Log

  27. Membuat CRUD service product bagian 6 - Unit Test

  28. Membuat service user register bagian 1 - Django

  29. Membuat Service user register bagian 2 - Django

  30. Membuat service filter dan download file CSV di django

  31. Django upload file menggunakan FileSystemStorage