Hallo guys, pada kesempatan kali ini kita akan belajar cara membuat User Register, Login, dan Logout mengunakan modul yang telah tersedia pada Framework Django, yuk simak artikel nya sampai selesai agar kalian paham.
Sebelum mulai saya akan mengenggap kalian telah paham menggunakan Framework django, jadi tutorial kali ini tidak akan membuat project dari awal hanya fokus kepada topik kita yaitu Register, Login, dan Logout.
Pertama seperti biasa buatlah terlebih dahulu Project kalian, disini saya menamakan project nya dengan nama myweb dan app dengan nama account.
User Registration
Django hadir dengan form Register built-in. Kalian hanya perlu mengonfigurasinya sesuai kebutuhan kalian (yaitu mengumpulkan alamat email saat pendaftaran).
Membuat Form Register
Buatlah sebuah file form.py baru
├── env/
├── myweb/
└── account/
└── (file baru)forms.py
Kemudian masukan lah kode berikut:
from django import forms
from django.contrib.auth.forms import UserCreationForm
from django.contrib.auth.models import User
# Create your forms here.
class NewUserForm(UserCreationForm):
email = forms.EmailField(required=True)
class Meta:
model = User
fields = ("username", "email", "password1", "password2")
def save(self, commit=True):
user = super(NewUserForm, self).save(commit=False)
user.email = self.cleaned_data['email']
if commit:
user.save()
return user
Django dilengkapi dengan form register yang disebut UserCreationForm. Namun, UserCreationForm hanya tersedia username dan kata sandi (kata sandi1 adalah kata sandi awal dan kata sandi2 adalah konfirmasi kata sandi).
Untuk menyesuaikan formulir bawaan, pertama-tama buat file baru yang disebut forms.py di direktori aplikasi. File baru ini dibuat di direktori yang sama dengan models.py dan views.py.
Kemudian panggil UserCreationForm dalam kelas baru yang disebut NewUserForm dan tambahkan field lain yang disebut email.
Simpan email ke pengguna. Tambahkan field yang ingin ditambahkan sesuai kebutuhan ke UserCreationForm.
Membuat Template register.html
├── myweb/
├── account/
└── templates/
├── account/
└── (File baru) register.html{% extends "base.html" %}
{% block body %}
<!--Register-->
<div class="container">
<h1>Register</h1>
<form method="POST">
{% csrf_token %}
{{ register_form.as_p}}
<button class="btn btn-primary" type="submit">Register</button>
</form>
<p class="text-center">If you already have an account, <a href="{% url 'accounut:login' %}">login</a> instead.</p>
</div>
{% endblock %}
Selanjutnya, buat template HTML untuk formulir register. disini saya akan membuat dengan nama register.html.
Tambahkan URL register ke apps
├── myweb/
└── account/
└── urls.pyfrom django.urls import path
from . import views
app_name = "account"
urlpatterns = [
path("", views.index, name="index")
path("register", views.register_request, name="register")
]
Sekarang, tambahkan url register ke dalam file urls.py, url register akan memanggil fungsi views.register, jadi kalian harus menambahkan fungsi register ke dalam file views.py.
Menambahkan fungsi register kedalam Views
├── myweb/
└── account/
└── views.pyfrom django.shortcuts import render, redirect
from .forms import NewUserForm
from django.contrib.auth import login
from django.contrib import messages
def register_request(request):
if request.method == "POST":
form = NewUserForm(request.POST)
if form.is_valid():
user = form.save()
login(request, user)
messages.success(request, "Pendaftaran berhasil." )
return redirect("account:index")
messages.error(request, "Pendaftaran gagal.")
form = NewUserForm()
return render (request=request, template_name="account/register.html", context={"register_form":form})
Impor NewUserForm dari forms.py dan login dari Django.contrib.auth. Kemudian tulis fungsi views baru yang diberi nama register_request.
Ada dua pernyataan if/else dalal fungsi tersebut. Pernyataan if pertama untuk melihat apakah formulir menggunakan metode POST sementara pernyataan kedua untuk melihat apakah formulir itu valid. Jika keduanya Benar, maka informasi formulir disimpan di di dalam database User,kemudian user login, dan user akan diarahkan ke beranda yang menampilkan pesan sukses.
Else, jika formulir tidak valid, pesan error ditampilkan. Tetapi jika permintaan tersebut GET, yang berarti pernyataan if pertama mengembalikan False, render formulir kosong pada template register.
Test register user
Jika selesai saatnya untuk menguji apakah code yang kalian buat benar atau tidak, dengan cara.
Membuka URL register, http://127.0.0.1:8000/account/register, di jendela browser Anda.
Cobalah untuk mendaftarkan akun.
Jika dilakukan dengan benar, Anda akan diarahkan ke beranda yang menampilkan pesan sukses 'Pendaftaran berhasil'.
Sekarang mari kita periksa informasi User yang telah di daftarkan dalam administrasi Django.
Membuat superuser
Bukalah terminal/CMD lalu masuk ke virtual environment.
(env) C:\Users\Owner\Desktop\Code\myweb>python manage.py createsuperuser
Username (leave blank to use 'owner'): owner
Email address:
Password: *****
Password (again): *****
Superuser created successfully.
(env) C:\Users\Owner\Desktop\Code\env\mysite>python manage.py runserver
Jika kelian belum melakukannya, buat akun superuser untuk mendapatkan akses ke administrasi Django. kemudian kalian akan memeriksa apakah pengguna telah ditambahkan dengan benar ke database.
Jalankan perintah python manage.py createsuperuser di Windows Command Prompt atau python3 manage.py createsuperuser di Terminal. Kemudian isi username dan password.
Mengecek apakah user telah terdaftar di Django admin
Pergi ke URL http://127.0.0.1:8000/admin/ di mana Anda akan melihat login administrasi Django.
Masuk ke admin dengan akun superuser Anda lalu klik 'User'. Di sana Kalian akan melihat daftar semua nama pengguna dan email bersama dengan status staf mereka.
User Login
Sekarang kalian mungkin memperhatikan fungsi views yang telah kalian buat secara otomatis memasukkan user setelah pembuatan akun. Sekarang kalian ingin user memiliki kemampuan untuk login secara bebas. Jadi kalain membutuhkan template login, URL, dan fungsi views.
Membuat template login.html
├── myweb/
├── account/
└── templates/
├── account/
└── (File baru) login.html{% extends "base.html" %}
{% block body %}
<!--Login-->
<div class="container">
<h1>Login</h1>
<form method="POST">
{% csrf_token %}
{{ login_form.as_p }}
<button class="btn btn-primary" type="submit">Login</button>
</form>
<p class="text-center">Don't have an account? <a href="{% url 'account:register' %}">Create an account</a>.</p>
</div>
{% endblock %}
Cara membuatnya, hampir sama dengan template register yang membedakanya hanya pada url dan tombol di bawah form.
Menambahkan login URL ke apps
├── myweb/
└── account/
└── urls.pyfrom django.urls import path
from . import views
app_name = "account"
urlpatterns = [
path("", views.index, name="index"),
path("register", views.register_request, name="register"),
path("login", views.login_request, name="login")
]
Tambahkan path url login ke dalam file urls
Menambahkan fungsi Login ke dalam views
├── myweb/
└── account/
└── views.pyfrom django.shortcuts import render, redirect
from .forms import NewUserForm
from django.contrib.auth import login, authenticate #tambah ini
from django.contrib import messages
from django.contrib.auth.forms import AuthenticationForm #tambah ini
def register_request(request):
...
def login_request(request):
if request.method == "POST":
form = AuthenticationForm(request, data=request.POST)
if form.is_valid():
username = form.cleaned_data.get('username')
password = form.cleaned_data.get('password')
user = authenticate(username=username, password=password)
if user is not None:
login(request, user)
messages.info(request, f"Kamu sekarang login sebagai {username}.")
return redirect("main:homepage")
else:
messages.error(request,"Invalid username or password.")
else:
messages.error(request,"Invalid username or password.")
form = AuthenticationForm()
return render(request=request, template_name="account/login.html", context={"login_form":form})
Sekarang kembali ke views.py dan tambahkan authenticate ke daftar import django.contrib.auth kemudian import AuthenticationForm dari django.contrib.auth.forms di bagian atas file.
AuthenticationForm adalah formulir Django yang dibuat untuk masuk ke user.
Untuk menulis fungsi login kalian, tambahkan pernyataan if/else yang menggunakan fungsi Django authenticate(). Fungsi ini digunakan untuk memverifikasi kredensial pengguna (username dan kata sandi) dan mengembalikan objek user yang disimpan di backend.
Jika backend mengautentikasi kredensial, fungsi akan menjalankan Django login() untuk masuk ke pengguna yang diautentikasi. (else if) jika pengguna tidak diautentikasi, itu mennampilkan pesan kepada user "Invalid username or password.".
Pernyataan else yang kedua adalah jika formulir tidak valid, maka ia mengembalikan pesan kesalahan yang sama.
Pernyataan else terakhir adalah jika permintaan bukan POST, maka kembalikan formulir kosong di template HTML login.
Test User login
Sekarang buka URL login,http://127.0.0.1:8000/login, dan login ke akun yang telah didaftarkan.
Anda akan mendapatkan pesan sukses dan masuk jika Anda memasukkan nama pengguna dan kata sandi yang benar.
User Logout
Hal terakhir yang perlu kalian buat adalah logout user. kalian akan menempatkan link logout di navbar tetapi hanya akan terlihat oleh user jika mereka diautentikasi (yaitu mereka yang telah login).
<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="False" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
{% if user.is_authenticated %}
<li class="nav-item">
<a class="nav-link" href="{% url 'account:logout' %}">Logout</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Welcome, {{user.username}}</a>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link" href="{% url 'account:login' %}">Login</a>
</li>
{% endif %}
</ul>
</div>
</nav>
Variabel template Django {{ user }} menyimpan informasi user yang masuk saat ini dan izinnya tersedia dalam konteks template.
Yang perlu kita lakukan adalah menambahkan pernyataan if/else bahwa jika user diautentikasi, tampilkan link logout dan nama pengguna mereka, jika tidak, tampilkan link login.
Menambahkan Logout URL ke apps
from django.urls import path
from . import views
app_name = "account"
urlpatterns = [
path("", views.homepage, name="homepage"),
path("register", views.register_request, name="register"),
path("login", views.login_request, name="login"),
path("logout", views.logout_request, name= "logout"),
]
Tambahkan url logout di file urls.py.
Menambahkan fungsi Logout ke views
├── myweb/
└── account/
└── views.pyfrom django.shortcuts import render, redirect
from .forms import NewUserForm
from django.contrib.auth import login, authenticate, logout #tambahkan ini
from django.contrib import messages
from django.contrib.auth.forms import AuthenticationForm
def register_request(request):
...
def login_request(request):
...
def logout_request(request):
logout(request)
messages.info(request, "Berhasil Logout.")
return redirect("account:index")
Terakhir, tambahkan fungsi logout ke file views. Fungsi logout_request menggunakan fungsi Django logout() untuk mengeluarkan user dari akun mereka dan mengarahkan mereka ke beranda saat URL logout diminta.
Test User Logout
Buka jendela browser dan muat ulang halaman.
login kembali jika perlu.
Seharusnya ada bilah navigasi dengan tautan logout di sebelah teks sambutan pengguna.
Klik link Logout dan beranda akan memuat ulang yang tadinta menampilkan link logout akan berubah menjadi link login.
Sekian dulu artikel kali ini semoga bermanfaat terimakasih ๐.