Creating a Python Web App from Scratch Using Python Flask in Visual Studio 2017
Visual Studio is the best IDE for .NET Programming language but now it also provides supports for Python. So, we can create a python project and write the code in Visual Studio. While writing the Python code in Visual Studio, we can use all Visual Studio features like debugging, intelligence, etc. We have a different template available for creating the Python project in Visual Studio like you can create a simple project or you can create a single file where you can write your Python code and run it. If you are interested in creating a web application using Python in Visual Studio, then we have the Django and Flask template, which provide a full flash of the ready-made template.
Here, I'll be using Python Flask in Visual Studio 2017 to create a simple web application from scratch. It will be a simple “Hello App” where users can enter their First Name and Last Name and click on the “Submit” button to display “Hello” greetings along with their respective First Name and Last Name that is processed in the “Python” background.
This article assumes that you have some basic knowledge of the Python programming language. I'll be using Flask, a Python web application framework, to create our application in Visual Studio 2017.
Flask is a lightweight Python framework for web applications that provides the basics for URL routing and page rendering.
Steps to Create Python Web Application in Visual
Studio 2017 or later version
- Open your Visual Studio 2017 or later version
and click on the File menu and choose New and then Project. It will open
"New Project" window from where we can choose different kinds of
application templates. But let's choose Python from installed section [Left
Panel] and from the middle panel, select "Python Application" enter
the name and click OK.
- It will take a few seconds to get the project ready as follows. The following image shows the basic structure for Python application, we can extend it as per our requirements. Here, you will find "Python Environments" where our application will run. Apart from this, it has a single "PythonWebApplication2.py" file.
- Next Setting Up Flask Library or module - In the "solution explorer" change the “Python Environments” by right-clicking on it. Add/Remove Python Environments => change Python 3.7(64-bit) to Python 3.6(64-bit) for installing the Flask module.
After changing the environment, you can see the Flask (1.1.1) module along with other modules as below.
- Creating a Home Page - First, when the application runs we should show a home page with the input form to enter First and Last Name. for that, we need to create an index.html page. Flask looks for template files inside the templates folder. So, in the solution explorer create a folder called templates. Inside templates, create a file called index.html. Open index.html and add the following HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61
<!DOCTYPE html> <html lang="en"> <head> <title>Python Flask Hello Web App</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <link href="https://chromium.googlesource.com/external/github.com/twbs/bootstrap/+/v3.3.4/docs/examples/jumbotron-narrow/jumbotron-narrow.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="header"> <nav> <ul class="nav nav-pills pull-right"> <li role="presentation" class="active"> <a href="#">Home</a> </li> </ul> </nav> <h3 class="text-muted">Python Hello App</h3> </div> <div class="jumbotron"> <h1>Hello App</h1> <p class="lead"></p> <p> Enter your First Name and Last Name:<br> <form action="/hello" method="post"> First Name: <input type="text" name="first_name"> <br /> Last Name: <input type="text" name="last_name" /><br /> <br /> <input class="btn btn-lg btn-success" type="submit" name="form" value="Submit" /> </form> </p> </div> <footer class="footer"> <p>© Company 2020</p> </footer> </div> </body> </html>
- Next, open the PythonWebApplication2.py and add the following Python code and save the changes.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
from flask import Flask, render_template, request app = Flask(__name__) @app.route("/") def index(): return render_template('index.html') @app.route('/hello', methods=['POST']) def hello(): first_name = request.form['first_name'] last_name = request.form['last_name'] data=' %s %s ' % (first_name, last_name) return render_template('hello.html',value=data) if __name__ == '__main__': #app.run(use_debugger=False, use_reloader=False, passthrough_errors=True) app.run('localhost', 4459)
- Finally create the “hello.html” page in template folder to display the processed output, add the following HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
<!DOCTYPE html> <html lang="en"> <head> <title>Python Flask Bucket List App</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <link href="https://chromium.googlesource.com/external/github.com/twbs/bootstrap/+/v3.3.4/docs/examples/jumbotron-narrow/jumbotron-narrow.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="header"> <nav> <ul class="nav nav-pills pull-right"> <li role="presentation" class="active"> <a href="#">Home</a> </li> </ul> </nav> <h3 class="text-muted">Python Hello App</h3> </div> <div class="jumbotron"> <p> <h3>Hello <u><b>{{ value }}!</b></u> have fun learning python</h3> </p> <br /> <a href="/">Back Home</a> </div> <footer class="footer"> <p>© Company 2020</p> </footer> </div> </body> </html>
- Save the changes and restart the server. Point your browser to http://localhost:4459/ and you should have the below screen: Enter your First Name and Last Name and click on the “Submit” button.
Conclusion
So, today, we have learned To Create a
Python Web App from Scratch Using Python Flask in Visual Studio 2017.
I hope this post will help you. Please put
your feedback using comments which will help me to improve myself for the next
post. If you have any doubts or queries, please ask in the comments section and
if you like this post, please share it with your friends. Thanks!
0 Comments