Lab 3: Form, Authentication, Session, dan Cookie

Pemrograman Berbasis Platform (CSGE602022) - diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Gasal 2022/2023

---

Tujuan Pembelajaran

Setelah menyelesaikan tutorial ini, kamu diharapkan untuk dapat:

• Memahami cara kerja submisi data yang diberikan oleh pengguna menggunakan elemen form
• Memahami cara kerja autentikasi
• Memahami kegunaan cookie dan session dalam konteks pengembangan web
• Memahami cara kerja Cookie & Session pada web
• Menggunakan Cookie & Session

Pengenalan HTTP

HTTP merupakan singkatan dari HyperText Transfer Protocol. HTTP adalah protokol yang digunakan untuk berkomunikasi antara client dan server. HTTP bersifat stateless; artinya 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 melakukan request dan server memberikan response.

2. Stateless: Setiap aktivitas (request/response) bersifat independen.

3. OSI Layer/Model: Model Open Systems Interconnection (OSI) menjelaskan tujuh 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: Website berjalan pada application layer. 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. 😉

5. Client Actions Method: Merupakan metode yang digunakan oleh client saat melakukan request. Contoh: GET, POST, PUT, DELETE, dll. Penjelasan lebih detail dapat dibaca di sini).

6. Server Status Code: Merupakan status kode yang diberikan oleh server saat meminta suatu halaman web Contoh: 200 (OK), 404 (Page Not Found), 500 (Internal Server Error), dsb. Penjelasan lebih detail dapat dibaca di sini.

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

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:

• Session & Cookies
• Cookies History
• Cookies vs. Local Storage vs. Session

Tutorial: Membuat Form Registrasi

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

Kita akan membuat akses halaman wishlist yang sebelumnya telah dibuat menjadi restricted, dengan tujuan pengguna yang ingin mengakses halaman wishlist harus mempunyai akun dan melakukan login ke situs web agar mendapatkan akses.

1. Jalankan virtual environment terlebih dahulu.

2. Buka views.py yang ada pada folder wishlist dan buatlah fungsi dengan nama register yang menerima parameter request.

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

4. 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, 'Akun telah berhasil dibuat!')
               return redirect('wishlist:login')
       
       context = {'form':form}
       return render(request, 'register.html', context)

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

   {% extends 'base.html' %}
   
   {% block meta %}
   <title>Registrasi Akun</title>
   {% endblock meta %}
   
   {% block content %}  
   
   <div class = "login">
       
       <h1>Formulir Registrasi</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 %}

6. Buka urls.py yang ada pada folder wishlist dan impor fungsi yang sudah kamu buat tadi.

   from wishlist.views import register #sesuaikan dengan nama fungsi yang dibuat

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

Tutorial: Membuat Form Login

1. Buka views.py yang ada pada folder wishlist dan buatlah fungsi dengan nama login_user yang menerima parameter request.

2. Tambahkan import authenticate dan login pada bagian paling atas.

   from django.contrib.auth import authenticate, login

3. 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('wishlist:show_wishlist')
           else:
               messages.info(request, 'Username atau Password salah!')
       context = {}
       return render(request, 'login.html', context)

4. Buatlah berkas HTML baru dengan nama login.html pada folder wishlist/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 %}     
           
       Belum mempunyai akun? <a href="{% url 'wishlist:register' %}">Buat Akun</a>
   
   </div>
   
   {% endblock content %}

5. Buka urls.py yang ada pada folder wishlist dan impor fungsi yang sudah kamu buat tadi.

   from wishlist.views import login_user #sesuaikan dengan nama fungsi yang dibuat

6. 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 wishlist.

Tutorial: Membuat Fungsi Logout

1. Buka views.py yang ada pada folder wishlist dan buatlah fungsi dengan nama logout_user yang menerima parameter request.

2. Tambahkan import logout pada bagian paling atas.

   from django.contrib.auth import logout

3. 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('wishlist:login')

4. Bukalah berkas wishlist.html yang ada pada folder wishlist/templates.

5. Tambahkan potongan kode di bawah ini setelah end tag table (</table>) pada berkas wishlist.html. Potongan kode ini berfungsi untuk menambahkan tombol logout.

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

6. Buka urls.py yang ada pada folder wishlist dan impor fungsi yang sudah kamu buat tadi.

   from wishlist.views import logout_user #sesuaikan dengan nama fungsi yang dibuat

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

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

Kita sudah membuat mekanisme logout dan menyelesaikan sistem autentikasi pada proyek wishlist. Selanjutnya, kita akan merestriksi akses halaman wishlist agar pengguna yang belum terautentikasi tidak dapat mengakses halaman wishlist.

Tutorial: Merestriksi Akses Halaman Wishlist

1. Buka views.py yang ada pada folder wishlist dan tambahkan import login_required pada bagian paling atas.

   from django.contrib.auth.decorators import login_required

2. Tambahkan kode @login_required(login_url='/wishlist/login/') di atas fungsi show_wishlist agar halaman wishlist hanya dapat diakses oleh pengguna yang sudah login (terautentikasi).

   ...
   @login_required(login_url='/wishlist/login/')
   def show_wishlist(request):
   ...

Setelah merestriksi akses halaman wishlist, jalankan proyek Django-mu dengan perintah python manage.py runserver dan bukalah http://localhost:8000/wishlist di browser favoritmu untuk melihat hasilnya.

Tutorial: Menambahkan Cookies

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

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

2. Buka views.py yang ada pada folder wishlist dan 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 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) # melakukan login terlebih dahulu
       response = HttpResponseRedirect(reverse("wishlist:show_wishlist")) # membuat response
       response.set_cookie('last_login', str(datetime.datetime.now())) # membuat cookie last_login dan menambahkannya ke dalam response
       return response
   ...

4. Pada fungsi show_wishlist, tambahkan potongan kode 'last_login': request.COOKIES['last_login'] ke dalam variabel context. Berikut adalah contoh kode yang sudah diubah.

   context = {
       'list_barang': data_barang_wishlist,
       'nama': 'Kak Cinoy',
       'last_login': request.COOKIES['last_login'],
   }

5. Ubah fungsi logout_user menjadi seperti potongan kode berikut. Potongan kode ini menambahkan mekanisme penghapusan cookie last_login saat pengguna melakukan logout.

   def logout_user(request):
       logout(request)
       response = HttpResponseRedirect(reverse('wishlist:login'))
       response.delete_cookie('last_login')
       return response

6. Buka berkas wishlist.html dan tambahkan potongan kode berikut di antara tabel dan tombol logout untuk menampilkan data last login.

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

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

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

   

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

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.

Seperti biasa, jangan lupa untuk melakukan add, commit, dan push perubahan yang sudah kamu lakukan untuk menyimpannya ke dalam repositori GitHub sebelum kamu menutup pekerjaan kamu. 😉

Kontributor

• Muhammad Athallah
• Muhammad Azis Husein
• Zuhal 'Alimul Hadi