Flask-Pythsdsfkjhsaldkjfhalskjdfhslkjdflhaksjdfhaksdon-OK.pptx

ytwaieyutasyutdyusatcyustcasiyutsidyucatsdicyastdcyusad

1. Departemen Teknologi Informasi Lab.RPL-403 MICROFRAME WORK [Flask-Python] Upskilling – Reskilling 2022

2. TIM Dr. Eko Subiyantoro, S.Pd.,S.ST.,MT Widyaiswara Madya S1 IKIP Yogyakarta - Elektronika D4 PENS ITS Surabaya – T.Informatika S2 FTI ITS Surabaya – T.Elektro S3 UGM Yogyakarta – Ilmu Komputer

3. Flask-Python

4. Flask-Python Environment Prerequisite Install virtual environment Overview Web framework, Flask, Werkzeug, WSGI, Jinja2 03 01 02 08 07 06 Pengantar Flask- 04 05 09 10 11 14 12 13 Static Files Directory Penerapan Application Cookies Set cookies Get cookies Routing Session Jenis session SQLite Create DB View File Uploading Penyimpanan HTTP Method Sending data from template URL Building Variable Rules Templates

5. Pengantar 01

6. Flask adalah web framework yang ditulis dalam bahasa pemrograman Python dan termasuk dalam jenis micro framework dengan fitur yang sederhana, lebih ringan, dan tidak tergantung dengan library luar. Flask menyediakan Werkzeug untuk menerima request (URL) dan memberikan respon serta Jinja2 sebagai template engine untuk menampilkan data dan menuliskan logika pada tampilannya

7. Overview 02 Cara kerja Flask Apa itu web framework? Apa itu WSGI? Apa itu Werkzeug? Cara kerja Jinja2

8. Cara Kerja Flask

9. Apa itu web framework? Web framework merupakan kerangka kerja pemrograman yang membantu pengembang dalam membuat aplikasi web, sebuah website yang dinamis membutuhkan interaksi dengan database oleh karena itu penggunaan web framework akan membuat prosesnya menjadi jauh lebih mudah.

10. Apa itu WSGI? Web Server Gateway Interface (WSGI) telah diadopsi sebagai standar untuk pengembangan aplikasi web Python. WSGI adalah spesifikasi untuk antarmuka universal antara server web dan aplikasi web

11. Apa itu Werkzeug? Werkzeug merupakan sebuah package Python yang didalamnya terdapat komponen dasar untuk pengembangan aplikasi web dengan Python. Kegunaan Werkzeug dalam Flask : Request processing Response handling URL Routing HTTP Utilities Exception Handling Middleware

12. Cara Kerja Jinja2 Kode Jinja2 pada umumnya disisipkan didalam jenis kode lain contohnya HTML. Dalam Jinja2 pembatas (delimiters) berfungsi untuk tanda bahwa pada kode tertentu yang relevan berfungsi sebagai pengurai. Delimiter: Fungsi: {{. . .}} ex : {{ Customer[‘nick_name’] }} Memunculkan isi yang berada diantara kurung kurawal kedalam template output {% . . %} ex : {% set x = 50 %} Sebuah statement didalam Bahasa Jinja2 yang tidak memiliki output {# . . #} ex : {# Semangat belajar #} Sebuah komentar untuk membuat kode menjadi bisa lebih dipahami oleh semua orang ketika ingin menjelaskan kegunaannya

13. Environment 03 Prerequisite Install Virtual Environment

14. Prerequisite

15. Apa itu Virtual Environment? Virtual Environment merupakan sebuah ruang lingkup virtual yang terisolasi dari dependencies utama dan sangat berguna ketika aplikasi membutuhkan dependencies yang berbeda-beda antara satu proyek dengan proyek lainnya pada satu sistem operasi yang sama.

16. Install Virtual Environment dan Flask menggunakan CMD Install Virtual Environment pada Windows menggunakan CMD : pip install virtualenv Membuat project baru dan mengaktifkan virtual environment pada project: mkdir flask cd flask virtualenv my-env venv/bin/activate Install Flask pada Windows menggunakan CMD : pip install Flask

17. Install Virtual Environment dan Flask pada PyCharm Install Virtual Environment pada PyCharm : Install Flask pada PyCharm :

18. Application 04

19. Flask juga dapat diperluas dan tidak menyediakan struktur direktori untuk menyimpan file-file yang dibutuhkan oleh aplikasi. Sehingga dapat ditentukan sendiri direktorinya seperti gambar disamping

20. Uji Coba Program Hello World Ketik kode program berikut dan simpan sebagai Hello.py : Ketika program tersebut dieksekusi maka akan menghasilkan URL dan ketika diakses akan menampilkan halaman web sebagai output :

21. Parameter Parameter bersifat opsional, jika digunakan maka contohnya seperti dibawah ini app.route(rule, options)

22. Parameter No Parameter dan Deskripsi 1. Host Berfungsi sebagai nama host untuk ditampilkan. Default yang digunakan adalah 127.0.0.1 (localhost). Setel ke 0.0.0.0 agar server tersedia secara eksternal 2. Port Default dengan 5000 3. Debug Pengaturan defaultnya adalah False(non-aktif). Jika disetel ke true, akan memberikan informasi debug dan ketika ada perubahan dalam program web juga akan langsung berubah ketika direload 4. Options Untuk diteruskan ke server Werkzeug yang mendasarinya.

23. Routing 05

24. Routing merupakan suatu modul dalam aplikasi yang berfungsi untuk mengatur jalannya aplikasi berbasis web Routing

25. Variable Rules 06

26. Dengan variabel rules memungkinkan membuat sebuah URL yang dinamis! Bagaimana caranya? Dengan menambahkan bagian variabel ke dalam URL route Perhatikan contoh berikut: Variable Rules

27. Selain itu, dapat juga menggunakan konverter untuk menentukan jenis argumen dari variable rules No Parameter Deskripsi 1 int Menerima tipe data integer 2 float Menerima tipe data float 3 path Menerima garis miring(/) sebagai pemisah direktori http://localhost:5000/age/27 http://localhost:5000/gpa/3.7 I am 27 years old My current semester gpa is 3.700000 Variable Rules

28. Perhatikan kode berikut, apa perbedaanya? /python /python/ /flask /flask/ Variable Rules

29. URL Building 07

30. URL Building http://localhost:5000/guest/budi url_for( ) digunakan untuk membuat URL secara dinamis dengan fungsi tertentu http://localhost:5000/admin

31. Templates 08

32. Flask menggunakan mesin template Jinja2 {{ . . . }} Flask akan mencoba menemukan file HTML di folder atau directory bernama templates

33. Output dari kode program sebelumnya adalah sebagai berikut: Templates http://localhost:5000/hello/budi

34. Templates Pernyataan If-Else dalam template {% . . . . %}

35. Selain itu, Jinja2 juga dapat digunakan untuk pewarisan template sehingga mempermudah pengerjaan kode program {% extends "navbar.html" %} Tag ini digunakan untuk menyatakan bahwa file main.html ini memakai file navbar.html sebagai fondasi dasar atau mewarisi template navbar.html Templates {% block isi %} ... {% endblock %} Tag ini digunakan untuk memerintahkan Jinja2 mengambil isi di antara kedua tag tersebut dan ditempatkan didalam template main.html yang telah berisi navbar dari navbar.html

36. Contoh Penggunaan {% extends “_____ .html” %}

37. HTTP Method 09 Sending Data From Templates

38. Protokol HTTP menjadi dasar dari komunikasi data di World Wide Web (WWW). Metode pengambilan data yang berbeda dari URL ditentukan dalam protokol ini. No. Metode Deskripsi 1 GET Mengirim data dalam bentuk tidak terenkripsi ke server. Metode yang paling umum. 2 HEAD Sama seperti GET, tetapi tanpa bagian respons 3 POST Digunakan untuk mengirim data form HTML ke server. Data yang diterima dengan metode POST tidak di-cache oleh server. 4 PUT Mengganti semua representasi sumber daya target saat ini dengan konten yang diunggah. 5 DELETE Menghapus semua representasi saat ini dari sumber daya target yang diberikan oleh URL HTTP Method

39. Kemudian, simpan file dengan nama login.html Pertama, buatlah terlebih dahulu file HTML HTTP Method

40. Kemudian, buatlah skrip pythonnya Output : HTTP Method

41. Sending data from templates Lanjutan students.html 

42. Hasilnya Sending data from templates

43. Static File 10 Directory Penerapan

44. File statis seperti file javascript (.js) atau file CSS (.css) digunakan pengembang aplikasi untuk mendukung tampilan halaman web. File-file statis ini disimpan dan disajikan dari folder ‘static’ dalam package. **Contoh sederhana penggunaan static files ** package Folder static File static

45. Output URL (‘/’) Output button “Say Hello”

46. Cookies 11 Set Cookies Get Cookies

47. Apa itu Cookies? ⇒ Cookies adalah file teks yang disimpan di dalam mesin klien. ⇒ Tujuannya : Untuk mengingat dan melacak data aktivitas klien, seperti riwayat pengalaman situs pengguna. Informasi tersebut akan digunakan untuk meningkatkan pengalaman situs pengguna secara keseluruhan. Pada Flask, cookie diatur pada objek respons atau on the response object . Dimana server mengirimkan Cookie kepada pengguna berdasarkan response. Fungsi make_response( ) untuk mendapatkan objek respons dari nilai kembalian fungsi tampilan. Setelah itu, gunakan fungsi set_cookie( ) dari objek respons untuk menyimpan cookie. Metode get( ) dari atribut request.cookies yang digunakan untuk membaca cookie. Atribut pada cookie : response.set_cookie( '<Title>' , '<Value>' , '<Expiry Time>' )

48. Contoh sederhana penggunaan cookies from flask import Flask, render_template, request, make_response app = Flask(__name__) @app.route("/") def index(): return render_template("indexcookie.html") #set cookie @app.route('/setcookie', methods=['POST', 'GET']) def setcookie(): if request.method == 'POST': user = request.form['nm'] resp = make_response(render_template('readcookie.html')) resp.set_cookie('userID', user) return resp #get cookie @app.route('/getcookie') def getcookie(): name = request.cookies.get('userID') return '<h1>welcome ' + name + '</h1>' if __name__ == '__main__': app.run(debug = True) cookies.py ⇒ Fungsi setcookie( ) menetapkan UserID dan akan merender ke halaman lain yaitu ‘readcookie.html’

49. ⇒ 'readcookie.html' berisi hyperlink ke fungsi tampilan lain getcookie ( ), yang membaca kembali dan menampilkan nilai cookie di browser .

50. Session 12 Jenis Session

51. Session adalah interval waktu ketika klien masuk ke server dan keluar dari server. Data, yang diperlukan untuk disimpan di sesi ini, disimpan di browser klien. Setiap klien pada session diberikan session ID . Data session disimpan di atas cookie dan server menandatanganinya secara kriptografis. Untuk enkripsi ini, aplikasi Flask membutuhkan SECRET_KEY yang ditentukan. Pastikan untuk set secret_key pada program dan import library session session.py

52. SESSION_COOKIE_NAME Nama dari session cookie SESSION_COOKIE_DOMAIN Domain untuk session cookie. Jika tidak diset, maka cookie akan valid untuk semua subdomain SERVER_NAME SESSION_COOKIE_PATH Jika cookie tidak diset, maka akan valid untuk semua APPLICATION_ROOT atau itu tidak diset untuk ‘/ ‘ SESSION_COOKIE_HTTPONLY Mengontrol apakah cookie harus diset dengan HTTP only. Default to True SESSION_COOKIE_SECURE Mengontrol apakah cookie harus diset dengan secure flag. Defaults to False PERMANENT_SESSION_LIFETIME Seumur hidup session akan permanen sebagai objek datetime.timedelta. Untuk mengontrol session dalam jangka waktu tertentu, berikut jenis dari session

53. Routing (‘/logout’) Routing (‘/login’) Routing (‘/’) session.py session.py session.py

54. saat merender session.py Masuk ke URL (‘/login’) Input nama ‘Customer’ Halaman akan menampilkan pesan ‘Logged in as Customer’

55. File Uploading 13 Penyimpanan

56. Menangani unggahan (upload) file pada Flask, program membutuhkan form HTML dengan atribut enctype yang diset ke 'multipart/form-data' , memposting file ke URL. Handler URL mengambil file dari objek request.files[ ] dan menyimpannya ke lokasi yang diinginkan. app.config[‘UPLOAD_FOLDER’] Menentukan jalur untuk folder unggah app.config[‘MAX_CONTENT_PATH’] Menentukan ukuran maksimum file yang akan Anda unggah – dalam byte Tabel Konfigurasi objek Flask :

57. Buat folder atau directory bernama files didalam folder static, yang berfungsi sebagai folder penyimpan masuknya file yang diupload. URL ‘/upload’ yang akan menampilkan ‘uploadfile.html’ dari folder templates, sebagai berikut :

58. Part 1

59. Part 2

60. Output program tersimpan

61. SQLite 14 Create Database View

62. SQLite adalah sistem database relasional yang menggunakan bahasa query SQL untuk berinteraksi dengan database. Dimana setiap database memiliki tabel dan setiap tabel memiliki record.

63. Membuat database SQLite bernama ' database.db ' Membuat tabel bernama students di dalamnya.

64. VIEW 1. Halaman Utama URL (‘/’) sqlite.py lanjutan

65. output:

66. 2. Submit Form URL (‘/enternew’) output: sqlite.py

67. 3. Add Record URL (‘/addrec’) sqlite.py

68. output:

69. 4. List Items URL (‘/list’) sqlite.py Data kolom yang menjadi multidict berisi semua records di dalam tabel student. Objek ini akan menampilkan template ‘ list.html ’

70. <html> <body> <h3>Informasi Student</h3> <table border = 1> <thead> <td>Name</td> <td>Address</td> <td>city</td> <td>Pincode</td> </thead> {% for row in rows %} <tr> <td>{{row["name"]}}</td> <td>{{row["address"]}}</td> <td>{{row["city"]}}</td> <td>{{row['pin']}}</td> </tr> {% endfor %} </table> <br> <a href = "/">Go back to home page</a> </body> </html> list.html output: