Panduan praktis dan terstruktur mengenai panduan lengkap: membuat halaman ubah password dengan django dan boostrap 4 berstandar enterprise. Pelajari konsep, implementasi kode modern, dan tips arsitektur enterprise siap produksi.
Selamat datang di seri tutorial engineering SiHubung! Pada artikel ini, kita akan membedah secara komprehensif implementasi Panduan Lengkap: Membuat Halaman Ubah Password Dengan Django Dan Boostrap 4 Berstandar Enterprise dengan standar kode bersih (clean code), performa tinggi, dan arsitektur siap produksi.
Membangun aplikasi web di era modern memerlukan pondasi yang kokoh. Framework modern memberikan fleksibilitas luar biasa bagi developer untuk menghadirkan fitur kompleks secara cepat tanpa mengabaikan aspek keamanan dan keandalan sistem.
Tahapan Implementasi & Walkthrough Kode
Berikut adalah langkah demi langkah teknis yang dapat Anda ikuti langsung pada codebase Anda:
Tahap 1: Penulisan Kode & Konfigurasi
from django.views import View
from django.shortcuts import render, redirect
from django.contrib.auth.views import LoginView, LogoutView, PasswordChangeView
from django.conf import settings
from django.contrib.auth import login, authenticate
from django.urls import reverse_lazy
from django.contrib import messages
from .forms import SignUpForm
class CustomLoginView(LoginView):
template_name = 'accounts/login.html';
redirect_authenticated_user = True
class HomeView(View):
template_name = 'accounts/home.html'
def get(self, request):
return render(request, self.template_name)
class CustomLogoutView(LogoutView):
template_name = 'accounts/login.html'
next_page = 'login'
class RegisterView(View):
template_name = 'accounts/register.html'
def get(self, request):
form = SignUpForm()
return render(request, self.template_name, {'form': form})
def post(self, request, *args, **kwargs):
form = SignUpForm(request.POST)
if form.is_valid():
form.save()
username = form.cleaned_data.get('username')
raw_password = form.cleaned_data.get('password1')
user = authenticate(username=username, password=raw_password)
login(request, user)
return redirect('home')
return render(request, self.template_name, {'form': form})
class CustomPasswordChangeView(PasswordChangeView):
template_name = 'accounts/change_password.html'
success_url = reverse_lazy('home')
def form_valid(self, form):
messages.success(self.request, 'Password kamu berhasil diubah')
return super().form_valid(form)Tahap 2: Penulisan Kode & Konfigurasi
from django.contrib.auth.views import LoginView, LogoutView, PasswordChangeView
...
from django.urls import reverse_lazy
from django.contrib import messagesTahap 3: Penulisan Kode & Konfigurasi
class CustomPasswordChangeView(PasswordChangeView):
template_name = 'accounts/password_change.html'
success_url = reverse_lazy('home')
def form_valid(self, form):
messages.success(self.request, 'Password kamu berhasil diubah')
return super().form_valid(form)Tahap 4: Penulisan Kode & Konfigurasi
from django.urls import path
# import class View
from .views import CustomLoginView, HomeView, CustomLogoutView, RegisterView, CustomPasswordChangeView
urlpatterns = [
path('login/', CustomLoginView.as_view(), name='login'),
path('home/', HomeView.as_view(), name='home'),
path('logout/', CustomLogoutView.as_view(), name='logout'),
path('register/', RegisterView.as_view(), name='register'),
path('password/change/', CustomPasswordChangeView.as_view(), name='password_change'),
]Tahap 5: Penulisan Kode & Konfigurasi
from .views import CustomLoginView, HomeView, CustomLogoutView, RegisterView, CustomPasswordChangeViewTahap 6: Penulisan Kode & Konfigurasi
urlpatterns = [
...
path('password/change/', CustomPasswordChangeView.as_view(), name='password_change'),
]Tahap 7: Penulisan Kode & Konfigurasi
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<style>
body {
margin-top: 50px;
}
</style>
</head>
<body>
<div class="container">
<br>
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card">
<header class="card-header">
<a href="{% url 'home' %}" class="float-right btn btn-outline-primary mt-1">Home</a>
<h4 class="card-title mt-2">Ganti Password</h4>
</header>
<article class="card-body">
{% load widget_tweaks %}
<form method="post" novalidate>
{% csrf_token %}
<div class="form-group">
<label>{{ form.old_password.label }}</label>
{% if form.is_bound %}
{% if form.old_password.errors %}
{% render_field form.old_password class="form-control is-invalid" %}
{% else %}
{% render_field form.old_password class="form-control is-valid" %}
{% endif %}
{% else %}
{% render_field form.old_password class="form-control" %}
{% endif %}
{% for error in form.old_password.errors %}
<div class="invalid-feedback">{{ error }}</div>
{% endfor %}
</div> <!-- form-group end.// -->
<div class="form-group">
<label>{{ form.new_password1.label }}</label>
{% if form.is_bound %}
{% if form.new_password1.errors %}
{% render_field form.new_password1 class="form-control is-invalid" %}
{% else %}
{% render_field form.new_password1 class="form-control is-valid" %}
{% endif %}
{% else %}
{% render_field form.new_password1 class="form-control" %}
{% endif %}
{% for error in form.new_password1.errors %}
<div class="invalid-feedback">{{ error }}</div>
{% endfor %}
</div> <!-- form-group end.// -->
<div class="form-group">
<label>{{ form.new_password2.label }}</label>
{% if form.is_bound %}
{% if form.new_password2.errors %}
{% render_field form.new_password2 class="form-control is-invalid" %}
{% else %}
{% render_field form.new_password2 class="form-control is-valid" %}
{% endif %}
{% else %}
{% render_field form.new_password2 class="form-control" %}
{% endif %}
{% for error in form.new_password2.errors %}
<div class="invalid-feedback">{{ error }}</div>
{% endfor %}
</div> <!-- form-group end.// -->
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block"> Ubah </button>
</div> <!-- form-group// -->
</form>
</article> <!-- card-body end .// -->
</div> <!-- card.// -->
</div> <!-- col.//-->
</div> <!-- row.//-->
</div>
<!--container end.//-->
</body>
</html>Tahap 8: Penulisan Kode & Konfigurasi
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">
<style>
body {
margin-top: 50px;
}
.card-body {
min-height: 300px;
}
</style>
</head>
<body>
<div class="container">
<br>
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card">
<header class="card-header">
<a href="{% url 'logout' %}" class="float-right btn btn-outline-primary mt-1">Log out</a>
<h4 class="card-title mt-2">{{ user.username }}</h4>
</header>
<article class="card-body">
<div>
{% if messages %}
{% for message in messages %}
<div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
{{ message | safe }}
</div>
{% endfor %}
{% endif %}
</div>
<p>Selamat datang di website kami. Silahkan kunjungi <a href="https://santrikoding.com" target="_blank">santrikoding.com</a> untuk mencari tutorial yang berkualitas dengan harga yang bersahabat.</p>
<div>
<a href="{% url 'password_change' %}" class="btn btn-primary">Ubah Password</a>
</div>
</article> <!-- card-body end .// -->
</div> <!-- card.// -->
</div> <!-- col.//-->
</div> <!-- row.//-->
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<!--container end.//-->
</body>
</html>Tahap 9: Penulisan Kode & Konfigurasi
<div>
{% if messages %}
{% for message in messages %}
<div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
{{ message | safe }}
</div>
{% endfor %}
{% endif %}
</div>Tahap 10: Penulisan Kode & Konfigurasi
<div>
<a href="{% url 'password_change' %}" class="btn btn-primary">Ubah Password</a>
</div>
💡 Tips Rekayasa Perangkat Lunak (SiHubung Engineering Best Practice)
Selalu gunakan pendekatan deklaratif, validasi input seawal mungkin di boundary layer, dan lakukan logging terstruktur untuk memudahkan observability ketika sistem dijalankan di lingkungan cloud produksi.
Kesimpulan
Dengan mengikuti langkah-langkah terstruktur di atas, implementasi modul Anda akan jauh lebih rapi, aman dari bug umum, serta siap diskalakan ke lingkungan produksi.
Nantikan artikel tutorial praktis lainnya seputar fullstack development, microservices, dan otomasi AI di Blog Engineering SiHubung. Selamat mencoba!
