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)
No comments:
Post a Comment