Wednesday, April 17, 2024

Python : Using Modules to Consume JSON Data from RESTful APIs

This is the source code for creating a RESTful API server that will send data in JSON format over the network.
 from flask import Flask, render_template, request, url_for, redirect, jsonify  
 from jinja2 import Template, Environment, FileSystemLoader  
 import csv  
 import sys  
 import json  
 aplikasi = Flask(__name__)  
 @aplikasi.route('/data')  
 # ini adalah source code untuk membuat server RESTFUL API yang akan mengirimkan data dalam bentuk JSON di jaringan  
 def halaman1():  
   data = {}  
   with open('/home/steven/proyekFlask/latihan15/templates/file2.csv','r') as file:  
     pembacaCSV = csv.DictReader(file)  
     for rows in pembacaCSV:  
       key = rows['nomer']  
       data[key] = rows  
     return jsonify(data)  
 if __name__ == '__main__':  
   aplikasi.run(host="0.0.0.0",port=8543,debug=True)  

The following source code is used to consume JSON data sent by the RESTful API server. The RESTful API server is also created using the Python language.


 from flask import Flask  
 from flask_restful import Resource, Api  
 from flask_cors import CORS  
 import requests  
 aplikasi = Flask(__name__)  
 CORS(aplikasi)  
 # ini adalah program komputer untuk mengkonsumsi data JSON yang di kirimkan oleh server lain  
 @aplikasi.route('/', methods=['GET'])  
 def tampilData():  
   r = requests.get('http://1.1.3.4:8543/data')  
   return r.json()  
 if __name__ == '__main__':  
   aplikasi.run(host="0.0.0.0",port=8544,debug=True)  

Next, we will learn everything about flask_restful. So that we can learn various things related to RESTful API.

Thursday, March 28, 2024

Python : Learning to Connect Between the OS Module and Flask

We will start to integrate Flask with other Python programming code, in this case between Flask and the OS module.


For the first one, we learn to use the OS module.


 import os  
 alamatFolder = os.getcwd()  
 print("Lokasi Folder Saat ini : ", alamatFolder)  


 from flask import Flask, render_template, request, url_for, redirect  
 from jinja2 import Template, Environment, FileSystemLoader  
 import mariadb  
 import sys  
 import os  
 aplikasi = Flask(__name__)  
 @aplikasi.route('/')  
 def halaman1():  
   return render_template("halaman4.html")  
 if __name__ == '__main__':  
   aplikasi.run(host="0.0.0.0",port=8543,debug=True)  

This is the initial source code for displaying a message box from JavaScript, using a server made with Flask.


 <!DOCTYPE html>  
 <html>  
      <head>  
           <meta name="viewport" content="width=device-width, initial-scale=1">  
           <style>  
                .button {  
                     background-color: #04AA6D;  
                     border: none;  
                     color: white;  
                     padding: 15px 32px;  
                     text-align: center;  
                     text-decoration: none;  
                     display: block;  
                     font-size: 16px;  
                     margin: 10px 10px;  
                     cursor: pointer;  
                     -webkit-transition-duration: 0.4s;  
                     transition-duration: 0.4s;  
                }  
                .button2:hover {  
                     box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19)  
                }  
           </style>  
      </head>  
      <body>  
           <button class="button button2" type="button" onclick="tampilkanPesan()">Uji Coba OS dan Flask</button>  
           <script>  
                function tampilkanPesan() {  
                     alert("Menampilkan Kotak Pesan")  
                }  
           </script>  
      </body>  
 </html>  

We will try to build data delivery over the network using a RESTful API. In building the server and backend RESTFUL API, we use the Python programming language. We will use JavaScript to build the UI. JavaScript will also be used to consume JSON data sent through the RESTFUL API. JavaScript will be used to build AJAX technology.


 import json  
 from flask import Flask  
 import mariadb  
 import sys  
 aplikasi = Flask(__name__)  
 @aplikasi.route('/')  
 # di bawah ini adalah source code untuk mengirimkan data dalam bentuk JSON ke jaringan dan ditampilkan di browser  
 def restApi1():  
   return json.dumps({'nama':'alesandro','e-mail':'alesandro@toto.com'})  
 if __name__ == '__main__':  
   aplikasi.run(host="0.0.0.0",port=8543,debug=True)  

The following is the source code for reading a text file. The results of the reading will then be displayed on the web page. Alternatively, the results of the reading can be sent using a RESTful API. Once the reading results are converted to JSON, they will be displayed on the web page using AJAX.


Python
 from flask import Flask, render_template, request, url_for, redirect  
 from jinja2 import Template, Environment, FileSystemLoader  
 import mariadb  
 import sys  
 aplikasi = Flask(__name__)  
 @aplikasi.route('/')  
 def halaman1():  
   file = open('/home/steven/proyekFlask/latihan15/templates/file1.txt','r')  
   angka1 = file.read()  
   file.close()  
   return render_template("halaman5.html", angka1 = angka1)  
 if __name__ == '__main__':  
   aplikasi.run(host="0.0.0.0",port=8543,debug=True)  

HTML
 <!DOCTYPE html>  
 <html>  
      <head>  
      </head>  
      <body>  
           <p>{{ angka1 }}<p>  
      </body>  
 </html>  

Wednesday, March 27, 2024

JavaScript : Combining Python with Javascript to Run Python Source Code on an HTML Page

We are currently learning how to combine Python and Javascript programming code to run a command on a web page.
 from flask import Flask, render_template, request, url_for, redirect  
 from jinja2 import Template, Environment,FileSystemLoader  
 import mariadb  
 import sys  
 aplikasi = Flask(__name__)  
 @aplikasi.route('/')  
 def halaman1():  
   return render_template("halaman2.html")  
 if __name__ == '__main__':  
   aplikasi.run(host="0.0.0.0",port=8543,debug=True)  

 <!DOCTYPE html>  
 <html>  
      <head>  
           <meta name="viewport" content="width=device-width, initial-scale=1">  
           <style>  
                .button {  
                     background-color: #04AA6D;  
                     border: none;  
                     color: white;  
                     padding: 15px 32px;  
                     text-align: center;  
                     text-decoration: none;  
                     display: block;  
                     font-size: 16px;  
                     margin: 10px 10px;  
                     cursor: pointer;  
                     -webkit-transition-duration: 0.4s;  
                     transition-duration: 0.4s;  
                }  
                .button2:hover {  
                     box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);  
                }  
           </style>  
      </head>  
      <body>  
           <button class="button button2" onclick="document.getElementById('cetakTanggal').innerHTML = Date()">Uji Coba Javascript 1</button>  
           <p id="cetakTanggal"></p>  
      </body>  
 </html>  

Tuesday, March 26, 2024

Python : Basic Source Code to Create a Web Page Link to Display a Table

This source code will be further developed to display a table containing data from MariaDB.


This is the Python source code to connect two HTML pages through a web link :


 from flask import Flask, render_template, request, url_for, redirect  
 from jinja2 import Template, Environment, FileSystemLoader  
 import mariadb  
 import sys  
 aplikasi = Flask(__name__)  
 @aplikasi.route('/')  
 def halaman1():  
   return render_template("halaman1.html")  
 @aplikasi.route('/halaman2')  
 def halaman2():  
   return render_template("halaman2.html")  
 if __name__ == '__main__':  
   aplikasi.run(host='0.0.0.0',port=8543,debug=True)  

This is the source code for the first HTML page :


 <!DOCTYPE html>  
 <html>  
      <head>  
           <meta name="viewport" content="width=device-width, initial-scale=1">  
           <style>  
           </style>  
      </head>  
      <body>  
           <h1>Halaman 1</h1>  
                <a href="{{ url_for('halaman2')}}">Halaman 2</a>  
      </body>  
 </html>  

This is the source code for the second HTML page :


 <!DOCTYPE html>  
 <html>  
      <head>  
           <meta name="viewport" content="width=device-width, initial-scale=1">  
      </head>  
      <body>  
           <h1>Halaman 2</h1>  
           <a href="{{ url_for('halaman1')}}">Halaman 1</a>  
      </body>  
 </html>  

Wednesday, March 20, 2024

Python : Python Source Code for Menu Page, Data Entry Form, and Table Page for Data Display

This is the menu page to display the data input menu, the data edit menu, and the menu to display a table containing the data.


This is the source code for the menu page. The menu page is at the forefront and serves as a gateway to access various features in the application.


 <!DOCTYPE html>  
 <html>  
      <head>  
           <meta name="viewport" content="width=device-width, initial-scale=1">  
           <style>  
                .vertical-menu {  
                     width: 200px;  
                }  
                .vertical-menu a{  
                     background-color: #eee;  
                     color: black;  
                     display: block;  
                     padding: 12px;  
                     text-decoration: none;  
                }  
                .vertical-menu a:hover {  
                     background-color: #ccc;  
                }  
                .vertical-menu a.active{  
                     background-color: #04AA6D;  
                     color: white;  
                }  
           </style>  
      </head>  
      <body>  
           <h1>Vertical Menu</h1>  
           <div class="vertical-menu">  
                <a href="{{ url_for('halaman1')}}" class="active">Halaman Menu</a>  
                <a href="{{ url_for('halaman2')}}">Halaman Simpan Data</a>  
                <a href="{{ url_for('halaman3')}}">Halaman Edit Data</a>  
                <a href="{{ url_for('halaman4')}}">Halaman Tabel Data</a>  
           </div>  
      </body>  
 </html>  

This is the source code for the data input page. There is also a button to display a table containing the data stored in the MariaDB table. There is also a button to return to the Menu page.


 <!DOCTYPE html>  
 <html>  
      <head>  
           <meta name="viewport" content="width=device-width, initial-scale=1">  
           <style>  
                input[type=text], select {  
                     width: 100%;  
                     padding: 12px 20px;  
                     margin: 8px 0p;  
                     display: inline-block;  
                     border: 1px solid #ccc;  
                     border-radius: 4px;  
                     box-sizing: border-box;  
                }  
                input[type=submit] {  
                     width: 100%;  
                     background-color: #4CAF50;  
                     color: white;  
                     padding: 14px 20px;  
                     margin: 8px 0;  
                     border: none;  
                     border-radius: 4px;  
                     cursor: pointer;  
                }  
                input[type=submit]:hover {  
                     background-color: #45a049;  
                }  
                div {  
                     border-radius: 5px;  
                     background-color: #8ecaed;  
                     padding: 20px;  
                }  
           </style>  
      </head>  
      <body>  
           <h1>Halaman Input Data</h1>  
           <div>  
                <form action="http://1.1.3.9:8543/halaman2" method="POST" id="formSimpanDataSurat" name="formSimpanDataSurat">  
                     <label for="kodedatanomersurat1">Kode Data Nomer Surat</label>  
                     <input type="text" id="kodedatanomersurat1" name="kodedatanomersurat1" placeholder="Isikan Kode Data Nomer Surat">  
                     <label for="tanggalsurat1">Tanggal Surat</label>  
                     <input type="text" id="tanggalsurat1" name="tanggalsurat1" placeholder="Isikan Tanggal Surat">  
                     <label for="nomersurat1">Nomer Surat</label>  
                     <input type="text" id="nomersurat1" name="nomersurat1" placeholder="Isikan Nomer Surat">  
                     <label for="perihalsurat1">Perihal Surat</label>  
                     <input type="text" id="perihalsurat1" name="perihalsurat1" placeholder="Isikan Perihal Surat">  
                     <input type="submit" name="tombolPerintah" value="Simpan Data">  
                     <input type="submit" name="tombolPerintah" value="Tampilkan Tabel Data">  
                     <input type="submit" name="tombolPerintah" value="Kembali Ke Halaman Menu">  
                </form>  
           </div>  
      </body>  
 </html>  

This is the HTML source code to display a table containing data from the MariaDB server.


 <!DOCTYPE html>  
 <html>  
      <head>  
           <style>  
                #dataNama {  
                     font-family: Arial, Helvetica, sans-serif;  
                     border-collapse: collapse;  
                     width: 100%;  
                }  
                #dataNama td, #dataNama th {  
                     border: 1px solid #ddd;  
                     padding: 8px;  
                }  
                #dataNama tr:nth-child(even){background-color: #f2f2f2;}  
                #dataNama tr:hover {background-color: #dataNama}  
                #dataNama th{  
                     padding-top: 12px;  
                     padding-bottom: 12px;  
                     text-align: left;  
                     background-color: #04AA6D;  
                     color: white;  
                }  
           </style>  
      </head>  
      <body>  
           <table id="dataNama">  
                <!--- Ini adalah source code untuk membuat header table ---->  
                {% if hasil1 %}  
                <tr>  
                     {% for key in hasil1[0] %}  
                          <th>{{ key }}</th>  
                     {% endfor %}  
                </tr>  
                {% endif %}  
                <!----- ini adalah source code untuk membuat isi tabel  ------>  
                {% for isitabel in hasil1 %}  
                <tr>  
                     {% for value in isitabel.values()%}  
                          <td>{{ value }}</td>  
                     {% endfor %}  
                </tr>  
                {% endfor %}  
           </table>  
      </body>  
 </html>  

This is the source code written in Python. This source code is used to control and run the features on the three web pages above.

 from flask import Flask, render_template, request, url_for, redirect  
 from jinja2 import Template, Environment, FileSystemLoader  
 import mariadb  
 import sys  
 aplikasi = Flask(__name__)  
 @aplikasi.route('/')  
 def halaman1():  
   return render_template("halaman1.html")  
 @aplikasi.route('/halaman2', methods=['GET','POST'])  
 def halaman2():  
   if request.method == 'POST':  
     if request.form['tombolPerintah'] == 'Simpan Data':  
       kodeDataNomerSurat1 = request.form.get('kodedatanomersurat1')  
       tanggalSurat1 = request.form.get('tanggalsurat1')  
       nomerSurat1 = request.form.get('nomersurat1')  
       perihalSurat1 = request.form.get('perihalsurat1')  
       koneksi = mariadb.connect(user="steven",password="kucing",host="1.1.3.9",port=3306,database="saham")  
       kursor = koneksi.cursor()  
       kursor.execute("INSERT INTO nomersurat(kodedatanomersurat,tanggalsurat,nomersurat,perihalsurat) VALUES (%s,%s,%s,%s)",(kodeDataNomerSurat1,tanggalSurat1,nomerSurat1,perihalSurat1))  
       koneksi.commit()  
       koneksi.close()  
       return redirect(url_for('halaman1'))  
     # elif request.form['tombolPerintah'] == 'Tampilkan Tabel Data':  
     elif request.form['tombolPerintah'] == 'Tampilkan Tabel Data':  
       koneksi = mariadb.connect(user="steven",password="kucing",host="1.1.3.9",port=3306,database="saham")  
       kursor = koneksi.cursor(dictionary=True)  
       kursor.execute("SELECT kodedatanomersurat,tanggalsurat,nomersurat,perihalsurat FROM nomersurat")  
       hasil = kursor.fetchall()  
       return render_template("halaman4.html",hasil1=hasil)  
     # elif request.form['tombolPerintah'] == 'Kembali Ke Halaman Menu':  
     elif request.form['tombolPerintah'] == 'Kembali Ke Halaman Menu':  
       return redirect(url_for('halaman1'))  
   return render_template("halaman2.html")  
 @aplikasi.route('/halaman3')  
 def halaman3():  
   return render_template("halaman3.html")  
 @aplikasi.route('/halaman4')  
 def halaman4():  
   return render_template("halaman4.html")  
 if __name__ == '__main__':  
   aplikasi.run(host="0.0.0.0",port=8543,debug=True)  

Friday, March 15, 2024

Python : Source Code of The Menu For Accessing The Data Entry Page

This is the HTML source code for a vertical menu. The menu contains a list of actions that can be performed on the data.


 <!DOCTYPE html>  
 <html>  
      <head>  
           <meta name="viewport" content="width=device-width, initial-scale=1">  
           <style>  
                .vertical-menu{  
                     width: 200px;  
                }  
                .vertical-menu a{  
                     background-color: #eee;  
                     color: black;  
                     display: block;  
                     padding: 12px;  
                     text-decoration: none;  
                }  
                .vertical-menu a:hover {  
                     background-color: #ccc;  
                }  
                .vertical-menu a.active {  
                     background-color: #04AA6D;  
                     color: white;  
                }  
           </style>  
      </head>  
      <body>  
           <h1>Vertical Menu</h1>  
           <div class="vertical-menu">  
                <a href="{{ url_for('halaman1')}}" class="active">Halaman Menu</a>  
                <a href="{{ url_for('halaman2')}}">Halaman Simpan Data</a>  
                <a href="#">Halaman 3</a>  
                <a href="#">Halaman 4</a>  
                <a href="#">Halaman 5</a>  
           </div>  
      </body>  
 </html>  

This is the HTML source code for creating a form that will be used to fill data into the Mariadb server.


 <!DOCTYPE html>  
 <html>  
 <head>  
      <style>  
           input[type=text], select{  
                width: 100%;  
                padding: 12px 20px;  
                margin: 8px 0;  
                display: inline-block;  
                border: 1px solid #ccc;  
                border-radius: 4px;  
                box-sizing: border-box;  
           }  
           input[type=submit] {  
                width: 100%;  
                background-color: #4CAF50;  
                color: white;  
                padding: 14px 20px;  
                margin: 8px 0;  
                border: none;  
                border-radius: 4px;  
                cursor: pointer;  
           }  
           input[type=submit]:hover{  
                background-color: #45a049;  
           }  
           div{  
                border-radius: 5px;  
                background-color: #8ecaed;  
                padding: 20px;  
           }  
      </style>  
 </head>  
 <body>  
      <h1>Halaman Input Data</h1>  
      <di>  
           <form action="http://1.1.3.10:8543/halaman2" method="POST" id="formSimpanDataSurat" name="formSimpanDataSurat">  
                <label for="kodedatanomersurat1">Kode Data Nomer Surat</label>  
                <input type="text" id="kodedatanomersurat1" name="kodedatanomersurat1" placeholder="Isikan Kode Data Nomer Surat">  
                <label for="tanggalsurat1">Tanggal Surat</label>  
                <input type="text" id="tanggalsurat1" name="tanggalsurat1" placeholder="Isikan Tanggal Surat">  
                <label for="nomersurat1">Nomer Surat</label>  
                <input type="text" id="nomersurat1" name="nomersurat1" placeholder="Isikan Nomer Surat">  
                <label for="perihalsurat1">Perihal Surat</label>  
                <input type="text" id="perihalsurat1" name="perihalsurat1" placeholder="Isikan Perihal Surat">  
                <input type="submit" name="tombolPerintah" value="Simpan Data">  
                <input type="submit" name="tombolPerintah" value="Kembali Ke Halaman Menu">  
           </form>  
      </div>  
 </body>  
 </html>  

This is the Python source code for displaying a menu, data entry page, and executing the data entry command from the form to the Mariadb database.


 from flask import Flask, render_template, request, url_for, redirect  
 from jinja2 import Template, Environment, FileSystemLoader  
 import mariadb  
 import sys  
 aplikasi = Flask(__name__)  
 @aplikasi.route('/')  
 def halaman1():  
   return render_template("halaman1.html")  
 @aplikasi.route('/halaman2', methods=['GET','POST'])  
 def halaman2():  
   if request.method == 'POST':  
     if request.form['tombolPerintah'] == 'Simpan Data':  
       kodeDataNomerSurat1 = request.form.get('kodedatanomersurat1')  
       tanggalSurat1 = request.form.get('tanggalsurat1')  
       nomerSurat1 = request.form.get('nomersurat1')  
       perihalSurat1 = request.form.get('perihalsurat1')  
       koneksi = mariadb.connect(user="steven",password="kucing",host="1.1.3.10",port=3306,database="saham")  
       kursor = koneksi.cursor()  
       kursor.execute("INSERT INTO nomersurat(kodedatanomersurat,tanggalsurat,nomersurat,perihalsurat) VALUES (%s,%s,%s,%s)",(kodeDataNomerSurat1,tanggalSurat1,nomerSurat1,perihalSurat1))  
       koneksi.commit()  
       koneksi.close()  
       return redirect(url_for('halaman1'))  
     elif request.form['tombolPerintah'] == 'Kembali Ke Halaman Menu':  
       return redirect(url_for('halaman1'))  
     # return redirect(url_for('halaman1'))  
   return render_template('halaman2.html')  
 if __name__ == '__main__':  
   aplikasi.run(host="0.0.0.0",port=8543,debug=True)  

Thursday, March 14, 2024

Python : This is An Example of Source Code That Inspires How to Create Menus and Links.

This is the source code for displaying a menu that already uses CSS. This source code example is taken from a source on the internet.


HTML Source Code


HTML Source Code For Page 1


 <!DOCTYPE html>  
 <html>  
      <head>  
      </head>  
      <body>  
           <p><a href="{{ url_for('halaman2')}}">Coba anda lihat form ini</a></p>  
      </body>  
 </html>  

HTML Source Code For Page 2


 <!DOCTYPE html>  
 <html>  
      <head>  
      </head>  
      <body>  
           <form method="post">  
                <button type="submit">Uji Coba</button>  
           </form>  
      </body>  
 </html>  

Python Code :

 from flask import Flask, request, url_for, redirect, render_template  
 from jinja2 import Template, Environment, FileSystemLoader  
 import mariadb  
 import sys  
 aplikasi = Flask(__name__)  
 @aplikasi.route('/')  
 def halaman1():  
   return render_template('halaman1.html')  
 @aplikasi.route('/halaman2', methods=['GET','POST'])  
 def halaman2():  
   if request.method == 'POST':  
     # lakukan sesuatu ketika form di kumpulkan  
     # dialihkan untuk mengakhiri penanganan POST  
     # pengalihan bisa ke route yang sama atau ke sesuatu yang lain  
     return redirect(url_for('halaman1'))  
   # tampilkan form nya, form nya tidak di kumpulkan  
   return render_template('halaman2.html')  
 if __name__ == '__main__':  
   aplikasi.run(host='0.0.0.0',port=8543,debug=True)