# **1. Try Django 1.11 // Python Web Development** ## **1. Welcome to Try Django 1.11** Django adalah teknologi backend yang dibuat untuk menjadi solusi dari masalah dalam membangun sebuah web aplication dengan cepat dan efektif. Selain itu Django juga ditulis dalam bahasa Python yang dimana ramah untuk pemula dan cukup kuat untuk expert. ## **2. Walkthrough** Beberapa hal yang web application-mu lakukan: 1. Memahami URL![image](https://hackmd.io/_uploads/SJm5Mlh66.png) 2. Memahami apa saja yang terdapat pada URL tersebut![image](https://hackmd.io/_uploads/S13q4gnp6.png) Meskiput tidak terlihat menarik, namun intinya adalah seberapa efektif dan kemana kamu meletakkan informasi tersebut ## **3. Getting Started with Django** 1. Menggunakan Python 3 karena Python 2 sudak tidak kompatibel![image](https://hackmd.io/_uploads/S1XrUl2pp.png) 2. Memakai Bootstrap sebagai framework utama![image](https://hackmd.io/_uploads/BJecYx2a6.png) 3. Referensi Blank Project ![WhatsApp Image 2024-03-11 at 10.29.01_4132f781](https://hackmd.io/_uploads/Syn6qln6p.jpg) *https://www.codingforentrepreneurs.com/blog/create-a-blank-django-project/ 4. Update dan Upgrade Dapat menggunakan sintaks `sudo apt update && sudo apt upgrade` untuk memperbarui repositori. 5. Install lib tambahan Python Menginstall beberapa tambahan dependsi dari python dengan sintaks ``` sudo apt-get install libreadline-gplv2-dev libncursesw5-dev libssl-dev libsqlite3-dev tk-dev libgdbm-dev libc6-dev libbz2-dev ``` 6. Install virtual environment Menginstall venv dengan sintaks ``` sudo apt install python3-virtualenv ``` 7. Membuat virtual environment ``` virtualenv -p python3 . ``` Lalu masuk ke dalam environment dengan sintaks ``` source bin/activate ``` 8. Instalasi django ``` pip install django==1.11.2 ``` lalu buat direktori untuk menyimpan project kita ``` mkdir src && cd src ``` buat project kita dengan sintkas ``` django-admin.py startproject <nama project> . ``` install semua depedensi yang diperlukan ``` pip install psycopg2-binary sudo apt install build-essential pip install gunicorn dj-database-url pip install django-crispy-forms pip install pillow ``` konfigurasi ulang pada beberapa file berikut ![Screenshot (125)](https://hackmd.io/_uploads/Hk8qlu4C6.png) `urls.py` ![Screenshot (126)](https://hackmd.io/_uploads/rk3m-OECT.png) `__init__.py` ![Screenshot (127)](https://hackmd.io/_uploads/ByFhbuECp.png) `base.py` 9. Jalankan server django ``` python manage.py migrate ``` ![WhatsApp Image 2024-03-14 at 20.19.15_47f869e6](https://hackmd.io/_uploads/rJQAHp-Aa.jpg) ``` python manage.py createsuperuser ``` ![image](https://hackmd.io/_uploads/SkGQUp-C6.png) ``` python manage.py runserver ``` ![image](https://hackmd.io/_uploads/By2cHT-0a.png) saya menggunakan ip 0.0.0.0 dan port 8000 agar bisa diakses dari berbagai sumber Berikut adalah tampilan default dari django : ![WhatsApp Image 2024-03-15 at 18.59.48_425d7ed3](https://hackmd.io/_uploads/r125Ip-Ca.jpg) ## **4. Refrensi** Hal yang menarik ketika menulis kode adalah meninggalkan jejak, hal tersebut dapat dilakukan menggunakan git. Contoh repositori menggunakan git : **https://github.com/codingforentrepreneurs/CFE-Blank-Project** ## **5. Apa Django bisa lakukan** Umumnya saat mengujungi sebuah website, komputer kita akan mengirim sebuah request ke sebuah server.![image](https://hackmd.io/_uploads/B1COjZeAa.png) Semisal kita mengunjungi website google dengan subdomain `schoolar`, komputer kita mengirim request ke google dan google merespon dengan mengirimkan beberapa kode yang bisa dipahami oleh browser kita. Pada advance website, seperti yang bisa dilakukan oleh django, sebuah website bisa mengingat siapa kita tanpa perlu masuk atau mendaftarkan sebuah akun. Semua diatasi oleh backend dari sebuah website. Secara umum django bisa mengatur app pada website seperti akun, video, analisis, list menu, mengatasi URL, mengembalikan respons (menjawab request), mengingat sesuatu seperti kebiasaan user, prefensi, dll. Untuk menambahkan app dapat menggunakan sintaks `python manage.py startapp <nama aplikasi>` ![image](https://hackmd.io/_uploads/SJ8n32-C6.png) # **2. HTML & Django** ## **1. Rendering HTML** Edit file `urls.py` untuk mengirim respon yang berbeda ketika web diakses ![Screenshot (129)](https://hackmd.io/_uploads/B1XDf_VAT.png) Request akan diteruskan ke "home" **F String** Kita juga bisa menuliskan kode html dalam file `views.py` yaitu tempat respon website secara default. Selain itu pada gambar dibawah ini juga terdapat contoh implementasi f string, yaitu menampilkan sebuah string yang dipanggil melalui variabel yang ditampilkan pada laman respons nantinya ![Screenshot (140)](https://hackmd.io/_uploads/SyF6f_4A6.png) ## **2. Render a Django Template** Tentunya tidak praktis saat kita harus mengatur bagaimana kita merespon request dari pengguna serta menulis kode html yang nantinya akan ditampilkan dalam satu file. Namun hal itu bisa diatasi oleh django dengan template. ![Screenshot (142)](https://hackmd.io/_uploads/ByHZVO4A6.png) Dimana kita memisahkan 2 hal tersebut, yang nantinya kita hanya perlu memanggil file html yang akan dipanggil. Edit `base.py` untuk mengaktifkan direktorinya pada line 57 ![image](https://hackmd.io/_uploads/rkBeDOEAa.png) Pemanggilan template pada line 16 ![Screenshot (152)](https://hackmd.io/_uploads/rJfJmFV0a.png) Refresh website ![Screenshot (161)](https://hackmd.io/_uploads/HysG7t4Aa.png) ## **3. Context a Djano Template** Saat kita menggunakan Django Template , itu dikompilasi sekali dan disimpan untuk penggunaan di masa depan, sebagai optimasi. Template dapat memiliki nama variabel dalam kurung kurawal ganda, seperti {{ var1 }} dan {{ var2 }}. Selain itu, dengan django kita juga bisa memberikan kode kondisi seperti bahasa pemprograman pada umumnya, seperti menggunakan percabangan dan perulangan. Disini saya menggunakan percabangan untuk menentukan bilangan yang di-generate secara random termasuk bilangan ganjil atau genap. ![Screenshot (156)](https://hackmd.io/_uploads/HkOl_u4Ra.png) [**Refrensi Penggunaan Template Tags** ](https://docs.djangoproject.com/en/5.0/ref/templates/builtins/) ## **4. Template Inheritance** Bagian yang paling powerful dan paling rumit dari template Django adalah Template Inheritance. Template Inheritance memungkinkan kita membuat template “kerangka” dasar yang berisi semua elemen umum situs kita dan menentukan blok yang dapat ditimpa oleh template dibawahnya. ![Screenshot (168)](https://hackmd.io/_uploads/SyvXFK4Cp.png) Tag `extends` adalah kunci disini, tag tersebut memberi tahu mesin template bahwa template ini “memperluas/extend” template lain. Ketika sistem template mengevaluasi template ini, pertama-tama ia akan menemukan induknya dalam hal ini, “base.html”. Tag `block` memiliki dua fungsi: * Ini adalah placeholder dari konten. * Konten itulah yang akan menggantikan placeholder. Dalam template master, tag `block` adalah pengganti yang akan digantikan oleh `block` di template anak dengan nama yang sama. Di template anak, tag `block` adalah konten yang akan menggantikan placeholder di template master dengan nama yang sama. ## **5. Include Template Tag** Buat direktori snippets untuk menyimpan file html yang nantinya akan dipanggil menggunakan tag `include`. ![image](https://hackmd.io/_uploads/rJl3yi4C6.png) ![Screenshot (191)](https://hackmd.io/_uploads/B1X5-cNR6.png) Tag `include` memungkinkan kita untuk memasukkan template kedalam template saat ini. Ini berguna ketika kita memiliki block contect yang sama untk banyak halaman. ![image](https://hackmd.io/_uploads/ryB1ejVCT.png) ![image](https://hackmd.io/_uploads/ryXrboEAa.png) Include Bootstrap sebagai framework css via CDN ![Screenshot (185)](https://hackmd.io/_uploads/HyG7bo4Rp.png) ![image](https://hackmd.io/_uploads/Bk_GeiN0T.png) Include jQuery dan Bootstrap JS ![Screenshot (188)](https://hackmd.io/_uploads/B1E0ei40T.png) ![image](https://hackmd.io/_uploads/S14hej4RT.png) Refresh website ![image](https://hackmd.io/_uploads/BywtGjN0p.png) ## **6. Class Based View** Sebuah View adalah objek yang bisa dipanggil untuk menerima request dan mengembalikan response. Ini digunakan untuk mengurangi tugas perulangan yang kita lakukan secara manual. Buat class pada `views.py` ![image](https://hackmd.io/_uploads/BkodENBCa.png) jangan lupa import ![image](https://hackmd.io/_uploads/ryjoVNHAT.png) Set Up pada `urls.py` ![image](https://hackmd.io/_uploads/B1B1BVrA6.png) Pada konfigurasi line 25 diberikan ekspresi khusus yang memungkinkan untuk menyalurkan id ![Screenshot (198)](https://hackmd.io/_uploads/ry6azhERa.png) web bisa diakses ketika diberikan id pada akhir url ![image](https://hackmd.io/_uploads/Bywj4nE0p.png) ![image](https://hackmd.io/_uploads/ry63Vh4Ca.png) ## **7. Template View** Template View paling cocok dalam kasus berikut: * Menampilkan halaman seperti '**about us**' yang statis dan hampir tidak memerlukan konteks apa pun. Padahal, variabel konteks mudah digunakan dengan Template View. * Menampilkan halaman yang berfungsi dengan GET request dan tidak memiliki forms di dalamnya. Import TemplateView ![image](https://hackmd.io/_uploads/rkv0v4HCT.png) Buat class ![image](https://hackmd.io/_uploads/ry4KOEr0p.png) Masukkan dalam `urls.py` ![image](https://hackmd.io/_uploads/BJKMu4rCa.png) Refresh Web ![image](https://hackmd.io/_uploads/BkwAO4SA6.png) Pemanggilan template bisa dilakukan seperti ini agar lebih efektif ![image](https://hackmd.io/_uploads/BkdtqhSRa.png) # **3. Remembering Thing** ## **1. Remembering things with Models** Masuk ke website admin django dan login dengan super user yang dibuat sebelumnnya ![image](https://hackmd.io/_uploads/SkomgaB0T.png) ![image](https://hackmd.io/_uploads/HJhuQprRa.png) Database disimpan pada file `db.sqlite3` ![image](https://hackmd.io/_uploads/H1_gW6rR6.png) Tambahkan model dalam `models.py` ![image](https://hackmd.io/_uploads/rygCcNTBAa.png) Tambahkan app yang telah kita buat kedalam `base.py` ![image](https://hackmd.io/_uploads/HyajN6rAp.png) Lakukan migration untuk memperbarui database nya ![image](https://hackmd.io/_uploads/ByJmSTS06.png) App muncul di database ![image](https://hackmd.io/_uploads/SkL1iTrCT.png) ![image](https://hackmd.io/_uploads/Syr50aHAp.png) ## **2. More on Model Fields** ![image](https://hackmd.io/_uploads/ByT_xCH06.png) ![image](https://hackmd.io/_uploads/S1wkgRrCa.png) Jangan lupa lakukan migrate setiap kali melakukan perubahaan pada database Menambahkan Timestamp ![image](https://hackmd.io/_uploads/rJ6KnlI06.png) ![image](https://hackmd.io/_uploads/rJmi3x8CT.png) ## **3. Displaying Saved Data** Buat Function Based View ![image](https://hackmd.io/_uploads/SJicqYUAa.png) Tambahkan URL ![image](https://hackmd.io/_uploads/SyY4r9U0T.png) Buat Template ! ![image](https://hackmd.io/_uploads/HkA9ptURT.png) Isi template dan Import Views ![image](https://hackmd.io/_uploads/rJyqb5IAT.png) ![image](https://hackmd.io/_uploads/HJ3iNqLAT.png) Refresh ![image](https://hackmd.io/_uploads/SycJSq8RT.png) ## **4. Undertanding QuerySets** Secara Umum Query Sets memungkinkan kita untuk mengambil data dari database. Kita juga bisa menggunakan python shell dalam project django kita dengan sintaks ``` python manage.py shell ``` ![image](https://hackmd.io/_uploads/SJxJ_9ICT.png) Kita import model yang telah dibuat sebelumnya ![image](https://hackmd.io/_uploads/S1und5I0T.png) ![image](https://hackmd.io/_uploads/SJDh_qURa.png) Disini kita memanggul semua objek yang terdapat pada models tadi dengan metode loop for, dan nantinya akan mencetak semua nama dari objek tersebut ![image](https://hackmd.io/_uploads/BJmjKqUCp.png) Selain itu kita juga bisa menerapkan filter saat memanggil data dari database, saat pemanggilan pertama tidak ada yang muncul karena sifat dari pemanggilan tersebut adalah case sensitive. ![image](https://hackmd.io/_uploads/Byt859L0p.png) Dalam QS kita bisa melakukan update, dapat dilihat dari gambar diatas kita mengganti semua `category` menjadi `american` yang dimana menunjukkan ouput 2 karena terdapat 2 object yang di-update ![image](https://hackmd.io/_uploads/HJOknc8C6.png) Kita juga dapat menambahkan objek baru melalui python shell, saat pemanggilan `timestamp` tidak menampilkan apa apa karena belum disimpan kedalam database ![image](https://hackmd.io/_uploads/H1IV6qUCT.png) Menambahkan object bisa dilakukan dengan lebih mudah dengan cara ini, selain itu kita tidak perlu melakukan save saat menambahkan object baru ## **5. Generic List View** List View mengaju pada tampilan (logic) untuk menampilkan beberapa contoh tabel dalam database. Class based view memberikan cara alternatif untuk mengimplementasikan view sebagai objek python. Selain itu class based view memiliki keunggulan dibanding function based view, yaitu * Organisasi kode yang terkait dengan metode HTTP tertentu (GET, POST, dll.) dapat ditangani dengan metode terpisah, bukan percabangan bersyarat. * Teknik berorientasi objek seperti mixin (multiple inheritance) dapat digunakan untuk memfaktorkan kode menjadi komponen yang dapat digunakan kembali. Tambahkan import pada `urls.py` ![image](https://hackmd.io/_uploads/SJvLCqUAT.png) Buat Class based view ![image](https://hackmd.io/_uploads/SkVta6ICa.png) Jangan lupa import views pada `urls.py` dan menambahkan url ![image](https://hackmd.io/_uploads/r1g0paIAT.png) ![image](https://hackmd.io/_uploads/BJ7zR6ICp.png) Template tidak ada karena kita belum menambahkannya pada class ![image](https://hackmd.io/_uploads/BJgO0TI06.png) Kita tambahkan template ![image](https://hackmd.io/_uploads/ByN2Ap8Aa.png) Refresh maka kita akan diberikan data sesuai dengan category ![image](https://hackmd.io/_uploads/HJPLq1D0T.png) ## **6. Restaurant Profile Detail** **Slug** Slug adalah salah satu bagian URL dalam mengidentifikasi halaman web yang akan dapat diakses melalui url. Ini adalah contoh url tanpa slug ![image](https://hackmd.io/_uploads/Sya2llDC6.png) Ini adalah contoh url dengan slug ![image](https://hackmd.io/_uploads/rJ8ClxwCp.png) Tentunya lebih masuk akal ketika kita mengakses dengan url seperti itu, oleh karena itu penting untuk menggunakan slug dalam website kita