Tutorial 3: Autentikasi, Session, dan Cookies

Pemrograman Berbasis Platform (CSGE602022) — diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Ganjil 2023/2024

Tujuan Pembelajaran

Setelah menyelesaikan tutorial ini, kamu diharapkan untuk dapat:

Memahami konsep dasar autentikasi dalam pengembangan web.
Memahami peran dan fungsi cookie dan session dalam pengembangan web.
Memahami cara kerja cookie dan session dalam pengembangan web.
Mengimplementasikan cookie dan session dalam proyek web.

Pengenalan HTTP

HTTP (HyperText Transfer Protocol) adalah protokol yang digunakan untuk berkomunikasi antara client dan server. HTTP bersifat stateless yang berarti setiap transaksi/aktivitas yang dilakukan dianggap sebagai transaksi/aktivitas yang benar-benar baru, sehingga tidak ada data sebelumnya yang disimpan untuk transaksi/aktivitas saat ini.

Beberapa konsep dasar mengenai HTTP:

Client/Server: Interaksi dilakukan antar client/server. Klien adalah pihak yang melakukan request dan server adalah pihak yang memberikan response.
Stateless: Setiap aktivitas (request/response) bersifat independen, tidak tersimpan pada aktivitas terdahulu.
OSI Layer/Model: Model Open Systems Interconnection (OSI) menjelaskan 7 lapisan yang digunakan sistem komputer untuk berkomunikasi melalui jaringan. Model 7-layer OSI terdiri dari Application Layer, Presentation Layer, Session Layer, Transport Layer, Network Layer, Data Link Layer, dan Physical Layer.
Application Layer: Pada OSI Model yang disinggung di atas, website berjalan pada application layer. Sedangkan, proses request/response terjadi pada transport Layer yang umumnya menggunakan protokol TCP yang menentukan bagaimana data akan dikirim. Application Layer tidak peduli apa yang dilakukan oleh transport Layer (bagaimana data dikirim, diolah, dsb) karena application layer hanya berfokus kepada request dan response.
Lapisan OSI lainnya akan diajarkan pada mata kuliah Jaringan Komputer/Jaringan Komunikasi Data. Kamu dapat mencarinya sendiri jika kamu penasaran. 😉
Client Actions Method: Terdapat metode-metode yang digunakan oleh client saat melakukan request. Contoh: GET, POST, PUT, DELETE, dll. Penjelasan lebih detail dapat dibaca di sini.
Server Status Code: Merupakan status kode yang diberikan oleh server terhadap suatu request pada sebuah halaman web. Contoh: 200 (OK), 404 (Page Not Found), 500 (Internal Server Error), dsb. Penjelasan lebih detail dapat dibaca di sini.
Headers: Merupakan informasi kecil yang dikirim bersamaan dengan request dan response. Informasi-informasi tersebut berguna sebagai data tambahan yang digunakan untuk memproses request/response. Contoh: Pada headers, terdapat content-type:json. Artinya, tipe konten yang diminta/dikirim adalah json. Headers juga menyimpan data cookies.

Pengenalan Cookies & Session

Semua komunikasi antara klien dan server dilakukan melalui protokol HTTP, di mana HTTP merupakan stateless protocol. Artinya state yang satu dengan yang lain tidak berhubungan (independen). Hal ini mengharuskan komputer klien yang menjalankan browser untuk membuat koneksi TCP ke server setiap kali melakukan request.

Tanpa adanya koneksi persisten antara klien dan server, software pada setiap sisi (endpoint) tidak dapat bergantung hanya pada koneksi TCP untuk melakukan holding state atau holding session state.

Apa yang dimaksud dengan holding state?

Sebagai contoh, kamu ingin mengakses suatu halaman A pada suatu web yang mensyaratkan pengaksesnya sudah login ke dalam web. Kemudian kamu login ke web tersebut dan berhasil membuka halaman A. Saat ingin pindah ke halaman B pada web yang sama, tanpa adanya suatu proses holding state maka kamu akan diminta untuk login kembali. Begitu yang akan terjadi setiap kali kamu mengakses halaman yang berbeda padahal masih pada web yang sama.

Proses memberitahu "siapa" yang sedang login dan menyimpan data ini dikenal sebagai bentuk dialog antara klien-server dan merupakan dasar session - a semi-permanent exchange of information. Merupakan hal yang sulit untuk membuat HTTP melakukan holding state (karena HTTP merupakan stateless protocol). Oleh karena itu, dibutuhkan teknik untuk mengatasi masalah tersebut, yaitu Cookie dan Session.

Cara melakukan holding state?

Salah satu cara yang paling banyak digunakan untuk melakukan holding state adalah dengan menggunakan session ID yang disimpan sebagai cookie pada komputer klien. Session ID dapat dianggap sebagai suatu token (barisan karakter) untuk mengenali session yang unik pada aplikasi web tertentu. Daripada menyimpan semua jenis informasi sebagai cookies pada klien seperti username, nama, dan password, hanya Session ID yang disimpan.

Session ID ini kemudian dapat dipetakan ke suatu struktur data pada sisi web server. Pada struktur data tersebut, kamu dapat menyimpan semua informasi yang kamu butuhkan. Pendekatan ini jauh lebih aman untuk menyimpan informasi mengenai pengguna, daripada menyimpannya pada cookie. Dengan cara ini, informasi tidak dapat disalahgunakan oleh klien atau koneksi yang mencurigakan.

Selain itu, pendekatan ini lebih "tepat" jika data yang akan disimpan ada banyak. Hal itu karena cookie hanya dapat menyimpan maksimal 4 KB data. Bayangkan kamu sudah login ke suatu web/aplikasi dan mendapat session ID (session identifier). Untuk dapat melakukan holding state pada HTTP yang stateless, browser biasanya mengirimkan suatu session ID ke server pada setiap request. Dengan begitu, setiap kali datang suatu request, maka server akan bereaksi (kurang lebih) "Oh, ini orang yang tepat!". Kemudian server akan mencari informasi state di memori server atau di database berdasarkan session ID yang didapat, lalu mengembalikan data yang diminta.

Perbedaan penting yang perlu diingat adalah data cookie disimpan pada sisi klien, sedangkan data session biasanya disimpan pada sisi server. Untuk pembahasan lebih detail mengenai stateless, stateful, cookie, dan session dapat dibaca di sini.

Berikut tabel singkat yang menjelaskan perbedaan antara cookies, session, dan local storage secara singkat.

	*Cookies*	*Local Storage*	*Sessions*
Kapasitas	4 KB	5 MB	5 MB
Teknologi Browser	HTML4/HTML5	HTML5	HTML5
Aksesibilitas	Semua window	Semua window	Tab yang sama
Kedaluwarsa	Diatur manual	Selamanya	Saat tab ditutup

Beberapa tautan video yang dapat memperkaya pengetahuan terkait materi ini:

Tutorial: Membuat Fungsi dan Form Registrasi

Catatan: Pada tutorial ini, kamu akan menggunakan proyek yang sudah kamu buat pada tutorial sebelumnya.

Pada tutorial sebelumnya, kita sudah mencoba membuat sebuah form untuk penambahan produk. Bagaimana? Mudah kan? Pada tutorial ini kita akan membuat halaman utama main menjadi restricted dengan cara membuat akun untuk pengguna. Sehingga, pengguna yang ingin mengakses halaman utama main harus melakukan login terlebih dahulu agar mendapatkan akses.

Jalankan virtual environment terlebih dahulu.
Buka views.py yang ada pada subdirektori main dan buatlah fungsi dengan nama register yang menerima parameter request.
Tambahkan import redirect, UserCreationForm, dan messages pada bagian paling atas.
```
from django.shortcuts import redirect
from django.contrib.auth.forms import UserCreationForm
from django.contrib import messages  
```
Penjelasan Kode:
UserCreationForm adalah impor formulir bawaan yang memudahkan pembuatan formulir pendaftaran pengguna dalam aplikasi web. Dengan formulir ini, pengguna baru dapat mendaftar dengan mudah di situs web Anda tanpa harus menulis kode dari awal.
Tambahkan potongan kode di bawah ini ke dalam fungsi register yang sudah kamu buat sebelumnya. Potongan kode ini berfungsi untuk menghasilkan formulir registrasi secara otomatis dan menghasilkan akun pengguna ketika data di-submit dari form.
```
def register(request):
    form = UserCreationForm()

    if request.method == "POST":
        form = UserCreationForm(request.POST)
        if form.is_valid():
            form.save()
            messages.success(request, 'Your account has been successfully created!')
            return redirect('main:login')
    context = {'form':form}
    return render(request, 'register.html', context)
```
Penjelasan Kode:
- form = UserCreationForm(request.POST) digunakan untuk membuat UserCreationForm baru dari yang sudah di-impor sebelumnya dengan memasukkan QueryDict berdasarkan input dari user pada request.POST.
- form.is_valid() digunakan untuk memvalidasi isi input dari form tersebut.
- form.save() digunakan untuk membuat dan menyimpan data dari form tersebut.
- messages.success(request, 'Your account has been successfully created!') digunakan untuk menampilkan pesan kepada pengguna setelah melakukan suatu aksi.
- return redirect('main:show_main') digunakan untuk melakukan redirect setelah data form berhasil disimpan.

Buatlah berkas HTML baru dengan nama register.html pada folder main/templates. Isi dari register.html dapat kamu isi dengan template berikut.

{% extends 'base.html' %}

{% block meta %}
    <title>Register</title>
{% endblock meta %}

{% block content %}  

<div class = "login">
    
    <h1>Register</h1>  

        <form method="POST" >  
            {% csrf_token %}  
            <table>  
                {{ form.as_table }}  
                <tr>  
                    <td></td>
                    <td><input type="submit" name="submit" value="Daftar"/></td>  
                </tr>  
            </table>  
        </form>

    {% if messages %}  
        <ul>   
            {% for message in messages %}  
                <li>{{ message }}</li>  
                {% endfor %}  
        </ul>   
    {% endif %}

</div>  

{% endblock content %}

Buka urls.py yang ada pada subdirektori main dan impor fungsi yang sudah kamu buat tadi.
```
from main.views import register #sesuaikan dengan nama fungsi yang dibuat
```

Tambahkan path url ke dalam urlpatterns untuk mengakses fungsi yang sudah diimpor tadi.

...
path('register/', register, name='register'), #sesuaikan dengan nama fungsi yang dibuat
...

Kita sudah menambahkan formulir registrasi akun dan membuat mekanisme register. Selanjutnya, kita akan membuat form login agar pengguna dapat melakukan autentikasi akun.

Buka views.py yang ada pada subdirektori main dan buatlah fungsi dengan nama login_user yang menerima parameter request.
Tambahkan import authenticate dan login pada bagian paling atas.
```
from django.contrib.auth import authenticate, login
```
Penjelasan Kode:
Singkatnya, function authenticate, login yang diimport diatas akan digunakan untuk melakukan autentikasi dan login jika autentikasi berhasil. Selengkapnya dapat dibaca di sini.

Tambahkan potongan kode di bawah ini ke dalam fungsi login yang sudah kamu buat sebelumnya. Potongan kode ini berfungsi untuk mengautentikasi pengguna yang ingin login.

def login_user(request):
    if request.method == 'POST':
        username = request.POST.get('username')
        password = request.POST.get('password')
        user = authenticate(request, username=username, password=password)
        if user is not None:
            login(request, user)
            return redirect('main:show_main')
        else:
            messages.info(request, 'Sorry, incorrect username or password. Please try again.')
    context = {}
    return render(request, 'login.html', context)

Penjelasan Kode:

authenticate(request, username=username, password=password digunakan untuk melakukan autentikasi pengguna berdasarkan username dan password yang diterima dari permintaan (request) yang dikirim oleh pengguna saat login.

Buatlah berkas HTML baru dengan nama login.html pada folder main/templates. Isi dari login.html dapat kamu isi dengan template berikut.

{% extends 'base.html' %}

{% block meta %}
    <title>Login</title>
{% endblock meta %}

{% block content %}

<div class = "login">

    <h1>Login</h1>

    <form method="POST" action="">
        {% csrf_token %}
        <table>
            <tr>
                <td>Username: </td>
                <td><input type="text" name="username" placeholder="Username" class="form-control"></td>
            </tr>
                    
            <tr>
                <td>Password: </td>
                <td><input type="password" name="password" placeholder="Password" class="form-control"></td>
            </tr>

            <tr>
                <td></td>
                <td><input class="btn login_btn" type="submit" value="Login"></td>
            </tr>
        </table>
    </form>

    {% if messages %}
        <ul>
            {% for message in messages %}
                <li>{{ message }}</li>
            {% endfor %}
        </ul>
    {% endif %}     
        
    Don't have an account yet? <a href="{% url 'main:register' %}">Register Now</a>

</div>

{% endblock content %}

Buka urls.py yang ada pada subdirektori main dan impor fungsi yang sudah kamu buat tadi.
```
from main.views import login_user #sesuaikan dengan nama fungsi yang dibuat
```

Tambahkan path url ke dalam urlpatterns untuk mengakses fungsi yang sudah diimpor tadi.

...
path('login/', login_user, name='login'), #sesuaikan dengan nama fungsi yang dibuat
...

Kita sudah menambahkan form login akun dan membuat mekanisme login. Selanjutnya, kita akan membuat mekanisme logout dan menambahkan tombol logout pada halaman main.

Tutorial: Membuat Fungsi Logout

Buka views.py yang ada pada subdirektori main dan buatlah fungsi dengan nama logout_user yang menerima parameter request.
Tambahkan import logout pada bagian paling atas.
```
from django.contrib.auth import logout
```
Tambahkan potongan kode di bawah ini ke dalam fungsi logout yang sudah kamu buat sebelumnya. Potongan kode ini berfungsi untuk melakukan mekanisme logout.
```
def logout_user(request):
    logout(request)
    return redirect('main:login')
```
Penjelasan Kode:
- logout(request) digunakan untuk menghapus sesi pengguna yang saat ini masuk.
- return redirect('main:login') mengarahkan pengguna ke halaman login dalam aplikasi Django.
Bukalah berkas main.html yang ada pada folder main/templates.

Tambahkan potongan kode di bawah ini setelah hyperlink tag untuk Add New Product pada berkas main.html.

...
<a href="{% url 'main:logout' %}">
    <button>
        Logout
    </button>
</a>
...

Buka urls.py yang ada pada subdirektori main dan impor fungsi yang sudah kamu buat tadi.
```
from main.views import logout_user
```
Tambahkan path url ke dalam urlpatterns untuk mengakses fungsi yang sudah diimpor tadi.
```
...
path('logout/', logout_user, name='logout'),
...
```

Kita sudah membuat mekanisme logout dan menyelesaikan sistem autentikasi dalam proyek ini.

Tutorial: Merestriksi Akses Halaman Main

Buka views.py yang ada pada subdirektori main dan tambahkan import login_required pada bagian paling atas.
```
from django.contrib.auth.decorators import login_required
```
Penjelasan Kode:
Kode from django.contrib.auth.decorators import login_required digunakan untuk mengharuskan pengguna masuk (login) sebelum dapat mengakses suatu halaman web.
Tambahkan kode @login_required(login_url='/login') di atas fungsi show_main agar halaman main hanya dapat diakses oleh pengguna yang sudah login (terautentikasi).
```
...
@login_required(login_url='/login')
def show_main(request):
...
```

Setelah merestriksi akses halaman main, jalankan proyek Django-mu dengan perintah python manage.py runserver dan bukalah http://localhost:8000/ di browser favoritmu untuk melihat hasilnya, seharusnya halaman yang muncul bukanlah daftar produk di halaman main, tetapi akan di-redirect ke halaman login.

Tutorial: Menggunakan Data Dari Cookies

Sekarang, kita akan melihat penggunaan cookies dengan menambahkan data last login dan menampilkannya ke halaman main.

Lakukan logout terlebih dahulu apabila kamu sedang menjalankan aplikasi Django-mu.
Buka views.py yang ada pada subdirektori main dan tambahkan import HttpResponseRedirect, reverse, dan datetime pada bagian paling atas.
```
import datetime
from django.http import HttpResponseRedirect
from django.urls import reverse
```
Pada fungsi login_user, kita akan menambahkan fungsi untuk menambahkan cookie yang bernama last_login untuk melihat kapan terakhir kali pengguna melakukan login. Caranya adalah dengan mengganti kode yang ada pada blok if user is not None menjadi potongan kode berikut.
```
...
if user is not None:
    login(request, user)
    response = HttpResponseRedirect(reverse("main:show_main")) 
    response.set_cookie('last_login', str(datetime.datetime.now()))
    return response
...
```
Penjelasan Kode:
- login(request, user) berfungsi untuk melakukan login terlebih dahulu
- response = HttpResponseRedirect(reverse("main:show_main")) untuk membuat response
- `response.setcookie('last_login', str(datetime.datetime.now())) berfungsi untuk membuat _cookie last_login dan menambahkannya ke dalam response
Pada fungsi show_main, tambahkan potongan kode 'last_login': request.COOKIES['last_login'] ke dalam variabel context. Berikut adalah contoh kode yang sudah diubah.
```
context = {
    'name': 'Pak Bepe',
    'class': 'PBP A',
    'products': products,
    'last_login': request.COOKIES['last_login'],
}
```
Penjelasan Kode:
'last_login': request.COOKIES['last_login'] berfungsi menambahkan informasi cookie last_login pada response yang akan ditampilkan di halaman web.
Ubah fungsi logout_user menjadi seperti potongan kode berikut.
```
def logout_user(request):
    logout(request)
    response = HttpResponseRedirect(reverse('main:login'))
    response.delete_cookie('last_login')
    return response
```
Penjelasan Kode:
response.delete_cookie('last_login') berfungsi untuk menghapus cookie last_login saat pengguna melakukan logout.
Buka berkas main.html dan tambahkan potongan kode berikut di antara tabel dan tombol logout untuk menampilkan data last login.
```
...
<h5>Sesi terakhir login: {{ last_login }}</h5>
...
```
Silakan refresh halaman login (atau jalankan proyek Django-mu dengan perintah python manage.py runserver jika kamu belum menjalankan proyekmu) dan cobalah untuk login. Data last login kamu akan muncul di halaman main.
Untuk melihat data cookie last_login, kamu dapat mengakses fitur inspect element dan membuka bagian Application/Storage. Klik bagian Cookies dan kamu dapat melihat data cookies yang tersedia. Selain last_login, kamu juga dapat melihat data sessionid dan csrftoken. Berikut adalah contoh tampilannya.
Jika kamu melakukan logout dan membuka bagian riwayat cookie, cookie yang dibuat sebelumnya akan hilang dan dibuat ulang ketika kamu login kembali.

Sebelum melanjutkan ke tutorial berikutnya, cobalah untuk membuat satu akun pada halaman web kamu.

Tutorial: Menghubungkan Model `Product` dengan `User`

Kamu perlu mengikuti tutorial secara berurut dari awal sebelum menjalankan bagian berikut. Jika kamu tidak mengikuti tutorial secara berurut, maka kami tidak bertanggung jawab atas error di luar pembahasan tutorial yang dapat muncul dari bagian tutorial berikut.

Terakhir, kita akan menghubungkan setiap objek Product yang akan dibuat dengan pengguna yang membuatnya, sehingga pengguna yang sedang terotorisasi hanya melihat produk-produk yang telah dibuat sendiri. Untuk itu, ikuti langkah-langkah berikut:

Buka models.py yang ada pada subdirektori main dan tambahkan kode berikut pada dibawah kode untuk mengimpor model:
```
...
from django.contrib.auth.models import User
...
```
Pada model Product yang sudah dibuat, tambahkan potongan kode berikut:
```
class Product(models.Model):
    user = models.ForeignKey(User, on_delete=models.CASCADE)
    ...
```
Penjelasan Kode:
Potongan kode diatas berfungsi untuk menghubungkan satu produk dengan satu user melalui sebuah relationship, dimana sebuah produk pasti terasosiasikan dengan seorang user. Lebih lanjutnya terkait ForeignKey akan dipelajari pada mata kuliah Basis Data. Penjelasan lebih lanjut terkait ForeignKey pada Django dapat dilihat di sini.
Buka views.py yang ada pada subdirektori main, dan ubah potongan kode pada fungsi create_product menjadi sebagai berikut:
```
def create_product(request):
 form = ProductForm(request.POST or None)

 if form.is_valid() and request.method == "POST":
     product = form.save(commit=False)
     product.user = request.user
     product.save()
     return HttpResponseRedirect(reverse('main:show_main'))
 ...
```
Penjelasan Kode:
Parameter commit=False yang digunakan pada potongan kode diatas berguna untuk mencegah Django agar tidak langsung menyimpan objek yang telah dibuat dari form langsung ke database. Hal tersebut memungkinkan kita untuk memodifikasi terlebih dahulu objek tersebut sebelum disimpan ke database. Pada kasus ini, kita akan mengisi field user dengan objek User dari return value request.user yang sedang terotorisasi untuk menandakan bahwa objek tersebut dimiliki oleh pengguna yang sedang login.
Ubah fungsi show_main menjadi sebagai berikut.
```
def show_main(request):
    products = Product.objects.filter(user=request.user)

    context = {
        'name': request.user.username,
    ...
...
```
Penjelasan Kode:
- Potongan kode diatas berfungsi untuk menampilkan objek Product yang terasosiasikan dengan pengguna yang sedang login. Hal tersebut dilakukan dengan menyaring seluruh objek dengan hanya mengambil Product yang dimana field user terisi dengan objek User yang sama dengan pengguna yang sedang login.
- Kode request.user.username berfungsi untuk menampilkan username pengguna yang login pada halaman main.
Simpan semua perubahan, dan lakukan migrasi model dengan python manage.py makemigrations.
Seharusnya, akan muncul error saat melakukan migrasi model. Pilih 1 untuk menetapkan default value untuk field user pada semua row yang telah dibuat pada basis data.
Ketik angka 1 lagi untuk menetapkan user dengan ID 1 (yang sudah kita buat sebelumnya) pada model yang sudah ada.
Lakukan python manage.py migrate untuk mengaplikasikan migrasi yang dilakukan pada poin sebelumnya.

Jalankan proyek Django-mu dengan perintah python manage.py runserver dan bukalah http://localhost:8000/ di browser favoritmu untuk melihat hasilnya. Cobalah untuk membuat akun baru dan login dengan akun yang baru dibuat. Amatilah halaman utama, produk yang tadi telah dibuat dengan akun sebelumnya tidak akan ditampilkan di halaman pengguna akun yang baru saja kamu buat. Hal tersebut berarti kamu sudah berhasil menghubungkan objek Product dengan User yang membuatnya.

Akhir Kata

Selamat! Kamu telah menyelesaikan Tutorial 3 dengan baik. 😄

Setelah kamu menyelesaikan seluruh tutorial di atas, harapannya kamu sekarang lebih paham tentang penggunaan form, autentikasi, session, dan cookie pada framework Django.

Setelah menyelesaikan tutorial ini, tampilan halaman web kamu seharusnya terlihat seperti ini.
Pada akhir tutorial ini, struktur direktori templates pada subdirektori main lokalmu akan terlihat seperti ini.
Sebelum melakukan langkah ini, pastikan struktur direktori lokal sudah benar. Selanjunya, lakukan add, commit dan push untuk memperbarui repositori GitHub.
Jalankan perintah berikut untuk melakukan add, commit dan push.
```
git add .
git commit -m "<pesan_commit>"
git push -u origin <branch_utama>
```
- Ubah <pesan_commit> sesuai dengan keinginan. Contoh: git commit -m "tutorial 3 selesai".
- Ubah <branch_utama> sesuai dengan nama branch utamamu. Contoh: git push -u origin main atau git push -u origin master.

Kontributor

Rayhan Putra Randi
Anindya Lokeswara
Kade Satrya Noto Sadharma
Alfredo Austin
Alya Azhar Agharid

Credits

Tutorial ini dikembangkan berdasarkan PBP Ganjil 2023 dan PBP Genap 2023 yang ditulis oleh Tim Pengajar Pemrograman Berbasis Platform 2023/2024. Segala tutorial serta instruksi yang dicantumkan pada repositori ini dirancang sedemikian rupa sehingga mahasiswa yang sedang mengambil mata kuliah Pemrograman Berbasis Platform dapat menyelesaikan tutorial saat sesi lab berlangsung.

Tutorial 3: Autentikasi, Session, dan Cookies

Tujuan Pembelajaran​

Pengenalan HTTP​

Pengenalan Cookies & Session​

Apa yang dimaksud dengan holding state?​

Cara melakukan holding state?​

Tutorial: Membuat Fungsi dan Form Registrasi​

Tutorial: Membuat Fungsi Login​

Tutorial: Membuat Fungsi Logout​

Tutorial: Merestriksi Akses Halaman Main​

Tutorial: Menggunakan Data Dari Cookies​

Tutorial: Menghubungkan Model Product dengan User​

Akhir Kata​

Kontributor​

Credits​