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)  

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)  

Python : Learning How To Create A Menu And Link It To Routes To Open Different Pages.

This is the source code for an HTML page containing a menu


HTML Code :

 <!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="#" class="active">Halaman Utama</a>  
                <a href="#">Halaman 1</a>  
                <a href="#">Halaman 2</a>  
                <a href="#">Halaman 3</a>  
                <a href="#">Halaman 4</a>  
           </div>  
      </body>  
 </html>  

Python Code :


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