Lewati ke konten utama

Tutorial 3: Autentikasi, Session, dan Cookies

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

Tujuan Pembelajaran​

Setelah menyelesaikan tutorial ini, mahasiswa 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:

  1. Client/Server: Interaksi dilakukan antar client/server. Klien adalah pihak yang melakukan request dan server adalah pihak yang memberikan response.

  2. Stateless: Setiap aktivitas (request/response) bersifat independen, tidak tersimpan pada aktivitas terdahulu.

  3. 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.

  4. 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.

catatan

Lapisan OSI lainnya akan diajarkan pada mata kuliah Jaringan Komputer/Jaringan Komunikasi Data. Kamu dapat mencarinya sendiri jika kamu penasaran. 😉

  1. 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.

  2. 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.

  3. 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.

CookiesLocal StorageSessions
Kapasitas4 KB5 MB5 MB
Teknologi BrowserHTML4/HTML5HTML5HTML5
AksesibilitasSemua windowSemua windowTab yang sama
KedaluwarsaDiatur manualSelamanyaSaat tab ditutup

Beberapa tautan video yang dapat memperkaya pengetahuan terkait materi ini:

Pre-Tutorial Notes​

Sebelum kamu memulai, serta untuk membantumu mengikuti tutorial 3 dengan baik, kami mengharapkan beberapa hasil berikut dari tutorial 2:

  • Struktur direktori mental-health-tracker secara lokal adalah sebagai berikut.
   mental-health-tracker
   ├── .github\workflows
   │   └── deploy.yml
   ├── env
   ├── main
   │   ├── migrations
   │   │   ├── __init__.py
   │   │   ├── 0001_initial.py
   │   │   └── 0002_alter_moodentry_id.py
   │   ├── templates
   │   │   ├── create_mood_entry.html
   │   │   └── main.html
   │   ├── __init__.py
   │   ├── admin.py
   │   ├── apps.py
   │   ├── forms.py
   │   ├── models.py
   │   ├── tests.py
   │   ├── urls.py
   │   └── views.py
   ├── mental_health_tracker
   │   ├── __init__.py
   │   ├── asgi.py
   │   ├── settings.py
   │   ├── urls.py
   │   └── wsgi.py
   ├── templates
   │   └── base.html
   ├── .gitignore
   ├── manage.py
   └── requirements.txt
  • Struktur repository mental-health-tracker pada GitHub adalah sebagai berikut.

Struktur Repositori Github

Tutorial: Membuat Fungsi dan Form Registrasi​

Pada tutorial sebelumnya, kita sudah mencoba membuat sebuah form untuk menambahkan mood entry. 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.

  1. Aktifkan virtual environment terlebih dahulu pada terminal. (Hint: Ingat tutorial 0!)

  2. Buka views.py yang ada pada subdirektori main pada proyek kamu. Tambahkan import UserCreationForm dan messages pada bagian paling atas.

    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.

  3. Tambahkan fungsi register di bawah ini ke dalam views.py. Fungsi 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.

  4. Buatlah berkas HTML baru dengan nama register.html pada direktori 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 %}
    tip

    Kita menggunakan tag {{ form.as_table }} untuk memudahkan membuat form yang berbentuk tabel. Untuk informasi lebih lanjut, kamu bisa membacanya di sini

  5. Buka urls.py yang ada pada subdirektori main dan impor fungsi yang sudah kamu buat tadi.

    from main.views import register

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

     urlpatterns = [
         ...
         path('register/', register, name='register'),
     ]

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

Tutorial: Membuat Fungsi Login​

  1. Buka kembali views.py yang ada pada subdirektori main. Tambahkan import authenticate, login, dan AuthenticationForm pada bagian paling atas.

    from django.contrib.auth.forms import UserCreationForm, AuthenticationForm
    from django.contrib.auth import authenticate, login

    Penjelasan Kode:

    Singkatnya, fungsi authenticate dan login yang di-import di atas adalah fungsi bawaan Django yang dapat digunakan untuk melakukan autentikasi dan login (jika autentikasi berhasil). Selengkapnya dapat dibaca di sini.

  2. Tambahkan fungsi login_user di bawah ini ke dalam views.py. Fungsi ini berfungsi untuk mengautentikasi pengguna yang ingin login.

    def login_user(request):
       if request.method == 'POST':
          form = AuthenticationForm(data=request.POST)

          if form.is_valid():
                user = form.get_user()
                login(request, user)
                return redirect('main:show_main')

       else:
          form = AuthenticationForm(request)
       context = {'form': form}
       return render(request, 'login.html', context)

    Penjelasan Kode:

    • login(request, user) berfungsi untuk melakukan login terlebih dahulu. Jika pengguna valid, fungsi ini akan membuat session untuk pengguna yang berhasil login.

  3. Buatlah berkas HTML baru dengan nama login.html pada direktori 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>
          {{ form.as_table }}
          <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 %}

  4. Buka urls.py yang ada pada subdirektori main dan import fungsi yang sudah kamu buat tadi.

    from main.views import login_user

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

    urlpatterns = [
       ...
       path('login/', login_user, name='login'),
    ]

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​

  1. Buka kembali views.py yang ada pada subdirektori main. Tambahkan import logout ini pada bagian paling atas.

    from django.contrib.auth import logout

  2. Tambahkan fungsi di bawah ini ke dalam fungsi views.py. Fungsi 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.

  3. Bukalah berkas main.html yang ada pada direktori main/templates dan tambahkan potongan kode di bawah ini setelah hyperlink tag untuk Add New Mood Entry.

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

    Penjelasan Kode:

    • {% url 'main:logout' %} digunakan untuk mengarah ke URL secara dinamis berdasarkan app_name dan name yang sudah didefinisikan di urls.py. Secara umum, penulisannya adalah dengan {% url 'app_name:view_name' %}:
      • app_name merupakan nama app yang didefinisikan di dalam berkas urls.py. Jika app menggunakan atribut app_name di urls.py, maka ini akan dipakai untuk merujuk pada app tersebut. Jika app_name tidak didefinisikan maka nama app yang digunakan adalah nama dari folder app yang dibuat.
      • view_name merupakan nama dari URL yang diinginkan, didefinisikan melalui parameter name dalam path() di urls.py. Tampilan urls.py

  4. Buka urls.py yang ada pada subdirektori main dan import fungsi yang sudah kamu buat sebelumnya.

    from main.views import logout_user

  5. Tambahkan path url ke dalam urlpatterns untuk mengakses fungsi yang sudah di-import sebelumnya.

    urlpatterns = [
       ...
       path('logout/', logout_user, name='logout'),
    ]

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

Tutorial: Merestriksi Akses Halaman Main​

  1. Buka kembali 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 mengimpor sebuah decorator yang bisa mengharuskan pengguna masuk (login) terlebih dahulu sebelum dapat mengakses suatu halaman web.

  2. Tambahkan potongan 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 melakukan restriksi 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 mood entry 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.

  1. Lakukan logout terlebih dahulu apabila kamu sedang menjalankan aplikasi Django-mu.

  2. Buka kembali views.py yang ada pada subdirektori main. Tambahkan import HttpResponseRedirect, reverse, dan datetime pada bagian paling atas.

    import datetime
    from django.http import HttpResponseRedirect
    from django.urls import reverse

  3. Pada fungsi login_user, kita akan menambahkan fungsionalitas menambahkan cookie yang bernama last_login untuk melihat kapan terakhir kali pengguna melakukan login. Caranya adalah dengan mengganti kode yang ada pada blok if form.is_valid() menjadi potongan kode berikut.

    ...
    if form.is_valid():
        user = form.get_user()
        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.set_cookie('last_login', str(datetime.datetime.now())) berfungsi untuk membuat cookie last_login dan menambahkannya ke dalam response
catatan

Perhatikan indentasi kode kamu, pastikan tidak terdapat dead code pada fungsi tersebut.

  1. 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 D',
        'npm': '2306123456',
        'mood_entries': mood_entries,
        '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.

  2. 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.

  3. Buka berkas main.html dan tambahkan potongan kode berikut di setelah tombol logout untuk menampilkan data last login.

    ...
    <h5>Sesi terakhir login: {{ last_login }}</h5>
    ...

  4. 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.

  5. Jika kamu menggunakan browser Google Chrome, 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.

    Gambar Halaman Main beserta Data Cookies

info

Untuk yang menggunakan browser Safari, Kamu dapat melihat cookies pada browser dengan inspect element > Storage > Cookies. Jika tidak menemukan inspect element, kamu dapat mengaktifkannya terlebih dahulu melalui Safari > Preferences > Advanced dan centang pilihan Show Develop menu in menu bar. Setelah itu, Kamu bisa membuka fitur Inspect Element dengan klik kanan pada halaman dan memilih Inspect Element, lalu navigasi ke Storage > Cookies untuk melihat data cookies seperti last_login, sessionid, dan csrftoken.

  1. Jika kamu melakukan logout dan membuka bagian riwayat cookie, cookie yang dibuat sebelumnya akan hilang dan dibuat ulang ketika kamu login kembali.
catatan

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

Tutorial: Menghubungkan Model MoodEntry dengan User​

bahaya

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 MoodEntry yang akan dibuat dengan pengguna yang membuatnya, sehingga pengguna yang sedang terotorisasi hanya melihat mood entries yang telah dibuat sendiri. Untuk itu, ikuti langkah-langkah berikut:

  1. Buka models.py yang ada pada subdirektori main dan tambahkan kode berikut pada dibawah baris kode untuk mengimpor model:

    ...
    from django.contrib.auth.models import User
    ...

  2. Pada model MoodEntry yang sudah dibuat, tambahkan potongan kode berikut:

    class MoodEntry(models.Model):
        user = models.ForeignKey(User, on_delete=models.CASCADE)
        ...

    Penjelasan Kode:

    Potongan kode diatas berfungsi untuk menghubungkan satu mood entry dengan satu user melalui sebuah relationship, dimana sebuah mood entry pasti terasosiasikan dengan seorang user.

tip

Kamu akan mempelajari lebih lanjut terkait ForeignKey pada mata kuliah Basis Data. Penjelasan lebih lanjut terkait ForeignKey pada Django dapat dibaca di sini.

  1. Buka kembali views.py yang ada pada subdirektori main, dan ubah potongan kode pada fungsi create_mood_entry menjadi sebagai berikut:

    def create_mood_entry(request):
        form = MoodEntryForm(request.POST or None)

        if form.is_valid() and request.method == "POST":
            mood_entry = form.save(commit=False)
            mood_entry.user = request.user
            mood_entry.save()
            return redirect('main:show_main')

        context = {'form': form}
        return render(request, "create_mood_entry.html", context)
     ...

    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.

  2. Ubah value dari mood_entries dan context pada fungsi show_main menjadi seperti berikut.

    def show_main(request):
        mood_entries = MoodEntry.objects.filter(user=request.user)

        context = {
             'name': request.user.username,
             ...
        }
    ...

    Penjelasan Kode:

    • Potongan kode diatas berfungsi untuk menampilkan objek Mood Entry yang terasosiasikan dengan pengguna yang sedang login. Hal tersebut dilakukan dengan menyaring seluruh objek dengan hanya mengambil Mood Entry 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.
bahaya

Sebelum menjalankan kode pada langkah selanjutnya, pastikan bahwa di database sudah ada minimal satu user. Hal ini diperlukan karena pada langkah selanjutnya akan diminta untuk menetapkan nilai default pada field user di semua row yang sudah ada. Proses migrasi model akan error jika tidak ada user yang tercatat sebelumnya.

  1. Simpan semua perubahan, dan lakukan migrasi model dengan python manage.py makemigrations.

  2. Seharusnya, akan muncul error saat melakukan migrasi model. Pilih 1 untuk menetapkan default value untuk field user pada semua row yang telah dibuat pada database.

    Migrations-1

  3. Ketik angka 1 lagi untuk menetapkan user dengan ID 1 (yang sudah kita buat sebelumnya) pada model yang sudah ada.

    Migrations-2

  4. Lakukan python manage.py migrate untuk mengaplikasikan migrasi yang dilakukan pada poin sebelumnya.

  5. Langkah terakhir, kita harus mempersiapkan aplikasi web kita untuk environtment production. Untuk itu, tambahkan sebuah import baru pada settings.py yang ada pada subdirektori mental_health_tracker

    import os

    Kemudian, ganti variabel DEBUG dari berkas settings.py menjadi seperti ini.

    PRODUCTION = os.getenv("PRODUCTION", False)
    DEBUG = not PRODUCTION

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, mood entry 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 Mood Entry 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.

  1. Setelah menyelesaikan tutorial ini, tampilan halaman web kamu seharusnya terlihat seperti ini.

  2. Pada akhir tutorial ini, struktur subdirektori main pada lokalmu terlihat seperti ini.

    mental-health-tracker
    ├── .github\workflows
    │   └── deploy.yml
    ├── env
    ├── main
    │   ├── migrations
    │   │   ├── __init__.py
    │   │   ├── 0001_initial.py
    │   │   ├── 0002_alter_moodentry_id.py
    │   │   └── 0003_moodentry_user.py
    │   ├── templates
    │   │   ├── create_mood_entry.html
    │   │   ├── login.html
    │   │   ├── main.html
    │   │   └── register.html
    │   ├── __init__.py
    │   ├── admin.py
    │   ├── apps.py
    │   ├── forms.py
    │   ├── models.py
    │   ├── tests.py
    │   ├── urls.py
    │   └── views.py
    ├── mental_health_tracker
    │   ├── __init__.py
    │   ├── asgi.py
    │   ├── settings.py
    │   ├── urls.py
    │   └── wsgi.py
    ├── templates
    │   └── base.html
    ├── .gitignore
    ├── manage.py
    └── requirements.txt

  3. Sebelum melakukan langkah ini, pastikan struktur direktori lokal sudah benar. Selanjunya, lakukan add, commit dan push untuk memperbarui repositori GitHub.

  4. 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​

  • Abbilhaidar Farras Zulfikar
  • Clarence Grady
  • Reyhan Zada Virgiwibowo
  • Fernando Valentino Sitinjak
  • Alden Luthfi

Credits​

Tutorial ini dikembangkan berdasarkan PBP Ganjil 2024 yang ditulis oleh Tim Pengajar Pemrograman Berbasis Platform 2024/2025. 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.