Assalamualaikum Warahmatullahi Wabarakatuh, Disini kita akan belajar tentang cara membuat login dan register menggunakan framework Django. Pada Tutorial ini kita akan belajar tahap awal untuk membuat sistem login dan register dengan django, mulai dari konfigurasi model, view, template dan hingga konfigurasi pada settings.py . silahkan simak baik-baik contoh dan penjelasan berikut ini untuk membuat login dan register dengan django.
Letss gooo , kita akan memulai dengan membuat projectnya dahulu, seperti biasa buka terminal lalu buat projeknya mellaui perintah dibawah ini.
django-admin startproject login_registerPada projek ini saya menamai dengan login_register.
Setelah itu kita masuk kedalam folder tersebut, nah di dalam aplikasi login_register ini kita akan membuat app akun. App dapat diartikan sebagai folder yang berisi file - file Django seperti model, views, dan template. Untuk membuat sebuah modul diperlukan perintah startapp dengan melewatkan nama modul yang akan dibuat. Perhatikan perintah dibawah ini:
cd login_register ## ini adalah untuk masuk ke folder projek kita
./manage.py startapp akun ## ini adalah perintah untuk membuat module appDikarenakan kita menggunakan mysql sebagai database kita,
kita perlu tambahan library pymysql, kita install menggunakan pip.
pip install pymysqlDisini kita akan menggunakan library pymysql, karena apa ? silahkan cek postingan sebelumnya.
Kemudian setelah kamu berhasil membuat modul akun terebut dan mengintall library pysql, kita akan menkonfigurasi pada login_regiter/settings.py sebagai berikut:
import pymysql
pymysql.version_info = (1, 3, 13, "final", 0)
pymysql.install_as_MySQLdb()Tambahkan code tersebut dibawah "import os".
Penjelasan:
Ini adalah sebagai penghubung atau komunikasi antara projek kita dengan database,
Bagaimana mengenali database yang kita buat nanti?
Simak tambahan konfigurasi lagi dibawah ini.
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'django_login',
'USER': 'root',
'PASSWORD': '',
'HOST': '127.0.0.1',
'PORT': '3306',
}
}Edit pada DATABASES sesuai dengan code yang diatas.
Penjelasan:
Dalam code diatas adalah identitas dari database yang kita buat pada mysql. Tadi sebelumnya library pymysql adalah sebagai penghubungnya, nah konfigurasi diatas adalah kita mengenali / menginisialisasikan database mana yang kita buat untuk aplikasi projek kita.
Pada kode diatas kita menggunakan nama databasenya adalah django_login.
Jangan lupa,
Untuk membuat databasenya terlebih dahulu ya..
Nah, setelah kalian berhasil mengkonfigurasikan untuk database, selanjutnya tak luput dong kita disini menggunakan templates sebagai layout kita. Apa itu templates ? silahkan baca postingan sebelumnya.
Berikut konfigurasi / inisialisasi untuk templates kita.
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [TEMPLATE_DIR],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]Edit bagian templates seperti pada kode diatas.
Penjelasan ada di postingan sebelumnya.
karena kita memerlukan folder media sebagai folder tempat penyimpanan image,
maka kita tambahkan / inisilisasikan static, media dir pada settings.py
TEMPLATE_DIR = os.path.join(BASE_DIR,'templates')
STATIC_DIR = os.path.join(BASE_DIR,'static')
MEDIA_DIR = os.path.join(BASE_DIR,'media')Tambahkan kode tersebut dibawah BASE_DIR
Setelah itu tambahkan kode ini dibawah sendiri pada file settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [STATIC_DIR,]
MEDIA_ROOT = MEDIA_DIR
MEDIA_URL = '/media/'
LOGIN_URL = '/akun/user_login/'Setelah itu kita akan mendeklrasikan app module akun kita di django. Dengan cara mengedit pada bagian INSTALLED_APPS . Tambahkan akun pada array tersebut.
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'akun' ## Tambahkan ini
]Oke, disini kita sudah menkonfigurasi awal pada projek aplikasi Login register kita.
Projek struktur nanti akan seperti ini
Jangan lupa buat folder media untuk menampung foto profil.
Buat folder templates untuk layout htmlnya.
Setelah itu kita akan membuat model pada app akun.
# buka di akun/models.py
from django.db import models
from django.contrib.auth.models import User
class UserProfileInfo(models.Model):
user = models.OneToOneField(User,on_delete=models.CASCADE)
nama = models.CharField(max_length=200, blank=True, null=True)
foto_profil = models.ImageField(upload_to='profile_pics',blank=True)
def __str__(self):
return self.user.username
Disini kita membuat 3 atribut yaitu:
user, user ini adalah relasi dari User auth yang dimiliki oleh django.
nama, atribut ini untuk menampung data nama.
Foto profil, pada atribut ini akan menyimpan nama file untuk menampilkan foto profil yang diisi oleh pengguna.
Lalu kita buat forms pada app akun.
# buka di akun/forms.py
from django import forms
from .models import UserProfileInfo
from django.contrib.auth.models import User
class UserForm(forms.ModelForm):
password = forms.CharField(widget=forms.PasswordInput())
class Meta():
model = User
fields = ('username','password','email')
class UserProfileInfoForm(forms.ModelForm):
class Meta():
model = UserProfileInfo
fields = ('nama','foto_profil')Penjelasan:
Langkah awal kita harus mengimport formsnya dari django (line 1), dan tak lupa kita panggil model yang sebelumnya kita buat.
Setelah itu buat class untuk salah satu model kita yaitu model UserProfileInfo. Kita beri nama class tersebut UserProfileInfoForm.
Didalam class tersebut kita inisialisasikan model kita adalah UserProfileInfo,
variabel fields kita isikan "nama, foto_profil" dimana ini kita ambil semua yang terdapat pada model tersebut.
dan untuk class Userform, class ini digunakan untuk validasi dari inputan ketika registrasi. Kita memanggil model User yang didapatkan dari django.contrib.auth.models.
Variable fields kita isikan "username,password,email" untuk ditampilkan pada form registrasi.
Setelah menyelesaikan pada forms, lalu kita akan menambahkan code berikut pada views.py.
# buka di akun/forms.py
from django.shortcuts import render
from .forms import UserForm, UserProfileInfoForm
from django.contrib.auth import authenticate, login, logout
from django.http import HttpResponseRedirect, HttpResponse
from django.urls import reverse
from django.contrib.auth.decorators import login_required
from .models import UserProfileInfo
def index(request):
if request.user.is_authenticated:
dt = UserProfileInfo.objects.filter(user=request.user.id).first()
data = {
'bio': dt
}
return render(request,'akun/index.html',data)
# print(dt.foto_profil)
return render(request,'akun/index.html')
@login_required
def special(request):
print(user_type)
return HttpResponse("Berhasil Login !")
@login_required
def user_logout(request):
logout(request)
return HttpResponseRedirect(reverse('index'))
def register(request):
registered = False
if request.method == 'POST':
user_form = UserForm(data=request.POST)
profile_form = UserProfileInfoForm(data=request.POST)
if user_form.is_valid() and profile_form.is_valid():
user = user_form.save()
user.set_password(user.password)
user.save()
profile = profile_form.save(commit=False)
profile.user = user
if 'foto_profil' in request.FILES:
print('found it')
profile.foto_profil = request.FILES['foto_profil']
profile.save()
registered = True
else:
print(user_form.errors,profile_form.errors)
else:
user_form = UserForm()
profile_form = UserProfileInfoForm()
return render(request,'akun/register.html',
{'user_form':user_form,
'profile_form':profile_form,
'registered':registered})
def user_login(request):
if request.method == 'POST':
username = request.POST.get('username')
password = request.POST.get('password')
user = authenticate(username=username, password=password)
if user:
if user.is_active:
login(request,user)
return HttpResponseRedirect(reverse('index'))
else:
return HttpResponse("Your account was inactive.")
else:
print("Someone tried to login and failed.")
print("They used username: {} and password: {}".format(username,password))
return HttpResponse("Invalid login details given")
else:
return render(request, 'akun/login.html', {})Setelah views.py kita akan membuat layoutnya.
Jangan lupa untuk membuat folder templates terlebih dahulu, lalu buat folder ladi didalam templates bernama akun.
Kita akan membuat 4 file, yaitu base.html , index.html, login.html, register.html .
File base.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Login Register Sederhana | Afrizals Blog</title>
<!-- Letakkan CSS disini -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"></head>
<body>
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<ul class="nav navbar-nav">{# Django landing page disini#}
<li><a class="navbar-brand" href="{% url 'index' %}">DJANGO</a></li>
<li><a class="navbar-link" href="{% url 'admin:index' %}">Admin</a></li>
<li><a class="navbar-link" href="{% url 'akun:register' %}">Register</a></li>
{# tambahkan beberapa logika untuk dikembangkan#}
{% if user.is_authenticated %}
<li><a href="{% url 'logout' %}">Logout</a></li>
{% else %}
<li><a class="navbar-link" href="{% url 'akun:user_login' %}">Login</a></li>
{% endif %}</ul>
</div>
</nav>
<div class="container">
{% block body_block %}
{% endblock %}
</div>
</body>
</html>File index.html
{% extends "akun/base.html" %}
{% block body_block %}<div class="container">
<div class="jumbotron">
{% if user.is_authenticated %}
<h1>Selamat datang dihalaman admin!</h1>
<h2>Hello {{ user.username }}</h2><br>
<img alt="gambar" class="img" src="media/{{ bio.foto_profil }}" style="width: 100px; height:100px;">
{% else %}
<h1>Selamat datang !</h1>
<h2>Silahkan Login atau Register.</h2>
{% endif %}
</div>
</div>{% endblock %}File login.html
{% extends 'akun/base.html' %}
{% block body_block %}
<div class="container">
<div class="jumbotron">
<h1>Login here :</h1><form method="post" action="{% url 'akun:user_login' %}">
{% csrf_token %}
{# A more "HTML" way of creating the login form#}
<label for="username">Username:</label>
<input type="text" name="username" placeholder="Username"><label for="password">Password:</label>
<input type="password" name="password" placeholder="Password"><input type="submit" name="" value="Login"></form></div>
</div>
{% endblock %}File register.html
{% extends "akun/base.html" %}
{% load static %}{% block body_block %}
<div class="container">
<div class="jumbotron">
{% if registered %}
<h1>Terima kasih telah registrasi!</h1>
{% else %}
<h1>Register Disini</h1>
<h3>Silahkan isi form dibawah ini</h3><form enctype="multipart/form-data" method="POST">
{% csrf_token %}
{{ user_form.as_p }}
{{ profile_form.as_p }}
<input type="submit" name="" value="Register">
</form>
{% endif %}
</div>
</div>
{% endblock %}Lalu kita akan membuat urlnya, edit pada file akun/urls.py
from django.conf.urls import url
from django.urls import path
from akun import views# SET THE NAMESPACE!
app_name = 'akun' # jangan lupa edit bagian ini, esuaikan app yang dibuat
urlpatterns=[
path('register/',views.register,name='register'),
path('user_login/',views.user_login,name='user_login'),
]Tambahkan juga pada url projek kita, login_register/urls.py
from django.contrib import admin
from django.urls import path
from django.conf import settings
from django.conf.urls import url,include
from django.conf.urls.static import static
from akun import views
urlpatterns = [
path('admin/', admin.site.urls),
path('',views.index,name='index'),
url(r'^akun/',include('akun.urls')),
url(r'^logout/$', views.user_logout, name='logout'),
url(r'^special/',views.special,name='special'),
url(r'^login/',views.user_login,name='user_login'),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_DIR) # baris ini adalah untuk menampilkan foto profil kita
Maka hasil akhir struktur projek kita akan seperti ini
Jangan lupa untuk migrate dari model yang kita buat tadi.
python manage.py migrate
python manage.py makemigrations akun
python manage.py migrateLalu kita buat superuser
python manage.py createsuperuserIsikan sesuai keinginan kalian, yang penting mudah diingat.
Langkah terakhir kita jalankan servernya
python manage.py runserverBuka pada browser dengan url http://127.0.0.1:8000/
Maka hasilnya seperti ini.
Ini adalah halaman utama.
Ini adalah halaman registrasi
Ini adalah halaman login
Ini adalah halaman dashboard admin
Kita telah mengetahui cara membuat login , registrasi sistem akun yang ada pada framework Django. Jika kalian ingin mempelajari pelajari ini Django dan sampai jumpa di konten Django berikutnya
Wassalamualaikum Warahmatullahi Wabarakatuh.
UPDATE !! (08/04/2020)
Saat ini Django telah merilis versi terbarunya, yaitu 3.1.
Apa saja yang berubah dari versi sebelumya? silahkan cek release notes .
Karena di Django 3.1 mysqlclient itu harus memiliki versi 1.4.0 atau lebih.
Jika tidak maka akan muncul error seperti ini django.core.exceptions.ImproperlyConfigured: mysqlclient 1.4.0 or newer is required; you have 0.9.3.
Maka dari itu ubah code pymysql.version_info = (1, 3, 13, "final", 0) menjadi
pymysql.version_info = (1, 4, 0, "final", 0)
File project bisa di unduh disini
Comments