How to Create a Webpage With Excel Back Endpython
FLASK AND PYTHON:-
Flask is a backend framework used to create web-applications and Programming language i.e. Python used to support backend flask framework.
HTML AND CSS:-
HTML and CSS used for UI/UX as frontend to create web-applications.
EXCEL WEB-APP:-
The functionality/explanation of the app development is as below:
✔️ Have a UI that pulls data from an excel and then takes input from an app and consolidates all the data in another excel.
Let's start with the web-app...
STEP 1:- To create excel file i.e. Employee_Salary.xlsx which contains some data.
STEP 2:- Install some pre-requisites modules needed in OS.
pip3 install flask pip3 install pandas
STEP 3:- Now create application using flask as framework and python as programming language.
from flask import Flask, render_template, request import pandas as pd app = Flask("Excel_Web-App") @app.route("/", methods=["GET", "POST"]) def form(): if request.method == "POST" and "z" in request.form: x = request.form.get('z') x = int(x) dataset = pd.read_excel("data/Employee_salary.xlsx") Employee_Name = dataset["Employee_Name"] dataset['Salary'] = dataset['Salary'] + dataset['Salary'] * (x/100) filename="Updated_file.xlsx" dataset.to_excel(filename) return "Data has been Updated Successfully in Updated_file.xlsx!! Check it out!!" return render_template("form.html") In this way we have to assign to take template from templates folder using render_template() function and GET/POST method is used to store values i.e. input and to get output.
read_excel() function reads excel file i.e. Employee_Salary.xlsx and to_excel() function gives updated file i.e. Updated_file.xlsx according to the update set.
STEP 4:- Now have to create form using HTML and CSS.
HTML form in templates folder:-
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="{{ url_for('static', filename='form.css') }}"> <title>Document</title> </head> <body> <div class="contact-us"> <div> <p><b>EMPLOYEES SALARY</b></p> </div> <form action='{{ url_for("form") }}' method="POST"> <label for="Increment in Salary(%)">Increment in Salary(%) </label> <input id="z" name="z" required="" type="number" /> <button id="SUBMIT">SUBMIT</button> </form> </div> </body> </html> CSS file for HTML form:-
@import url("https://fonts.googleapis.com/css?family=Spartan&display=swap"); * { margin: 0; padding: 0; } body { background-color: #FB6E52; background-size: cover; width: 100%; height: 100%; display: grid; align-items: center; justify-items: center; font-size: 12pt; font-family: "Spartan"; color: #2A293E; } .contact-us { background: #f8f4e5; padding: 50px 100px; border-top: 10px solid #f45702; } label, input { display: block; width: 100%; font-size: 12pt; line-height: 24pt; font-family: "Spartan"; } input { margin-bottom: 24pt; } input { border: none; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 2px; background: #f8f4e5; padding-left: 5px; outline: none; } input:focus { border: 1px solid #6bd4b1; } button { display: block; float: right; line-height: 24pt; padding: 0 20px; border: none; background: #f45702; color: white; letter-spacing: 2px; transition: 0.2s all ease-in-out; border-bottom: 2px solid transparent; outline: none; } button:hover { background: inherit; color: #f45702; border-bottom: 2px solid #f45702; } ::selection { background: #ffc7b8; } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { border: 1px solid #6bd4b1; -webkit-text-fill-color: #2A293E; -webkit-box-shadow: 0 0 0px 1000px #f8f4e5 inset; transition: background-color 5000s ease-in-out 0s; } STEP 5:- Now using API i.e. URL containing IP and Port run the application.
Here API not fixed so to get API use:-
set FLASK_APP = app.py set FLASK_DEBUG = 1 flask run
Now using 127.0.0.1:5000 URL i.e. API we get web page and now client can put the values to get output.
So now we see that data has been updated i.e. salary of all the employees increases by 10% and we get new file having name Updated_file.xlsx in same workspace.
Thus, the objective of this Excel Web-App using Python and Flask has been completed.
Thanks for reading my article!! 😇😃
Have a Nice Day. 😊
KEEP LEARNING. KEEP SHARING.
How to Create a Webpage With Excel Back Endpython
Source: https://www.linkedin.com/pulse/web-app-using-python-flask-which-reads-excel-file-gives-kanodia-?trk=read_related_article-card_title
0 Response to "How to Create a Webpage With Excel Back Endpython"
Publicar un comentario