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