Post
Ask Question

Creating A Python Web App From Scratch Using Python Flask In Visual Studio 2017

Introduction

 
Visual Studio is the best IDE for the .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; i.e., 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 templates, 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

 
Step 1
 
Open your Visual Studio 2017 or later version and click on the File menu and choose New and then Project. It will open the "New Project" window from where we can choose different kinds of application templates. But let's choose Python from the installed section [Left Panel] and from the middle panel, select "Python Application" enter the name and click OK.
 
Creating A Python Web App From Scratch Using Python Flask In Visual Studio 2017
 
Step 2
 
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.
 
Creating A Python Web App From Scratch Using Python Flask In Visual Studio 2017
 
Step 3 - Next Setting Up FlaskLibrary 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.
 
Creating A Python Web App From Scratch Using Python Flask In Visual Studio 2017
 
After changing the environment, you can see the Flask (1.1.1) module along with other modules as below.
 
Creating A Python Web App From Scratch Using Python Flask In Visual Studio 2017
 

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 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. <!DOCTYPE html>    
  2. <html lang="en">    
  3.     
  4. <head>    
  5.     <title>Python Flask Hello Web App</title>    
  6.     
  7.     <meta charset="utf-8">    
  8.     <meta name="viewport" content="width=device-width, initial-scale=1">    
  9.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">    
  10.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>    
  11.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>    
  12.     
  13.     <link href="https://chromium.googlesource.com/external/github.com/twbs/bootstrap/+/v3.3.4/docs/examples/jumbotron-narrow/jumbotron-narrow.css" rel="stylesheet">    
  14. </head>    
  15. <body>    
  16.     
  17.     <div class="container">    
  18.         <div class="header">    
  19.             <nav>    
  20.                 <ul class="nav nav-pills pull-right">    
  21.                     <li role="presentation" class="active">    
  22.                         <a href="#">Home</a>    
  23.                     </li>    
  24.                       
  25.                 </ul>    
  26.             </nav>    
  27.             <h3 class="text-muted">Python Hello App</h3>    
  28.         </div>    
  29.     
  30.         <div class="jumbotron">    
  31.             <h1>Hello App</h1>    
  32.             <p class="lead"></p>    
  33.             <p>    
  34.                 Enter your First Name and Last Name:<br>    
  35.                 <form action="/hello" method="post">    
  36.                     First Name: <input type="text" name="first_name">  <br />    
  37.                     Last Name: <input  type="text" name="last_name" /><br />    
  38.                     <br />    
  39.                     <input class="btn btn-lg btn-success" type="submit" name="form" value="Submit" />    
  40.                 </form>    
  41.             </p>    
  42.         </div>              
  43.     
  44.         <footer class="footer">    
  45.             <p>© Company 2020</p>    
  46.         </footer>    
  47.     
  48.     </div>    
  49. </body>    
  50.     
  51. </html>    
Next open the PythonWebApplication2.py and add the following Python code and save the changes.
  1. from flask import Flask, render_template, request  
  2.   
  3. app = Flask(__name__)  
  4.  
  5. @app.route("/")  
  6. def index():  
  7.      return render_template('index.html')  
  8.  
  9.  
  10.   
  11. @app.route('/hello', methods=['POST'])  
  12. def hello():  
  13.     first_name = request.form['first_name']  
  14.     last_name = request.form['last_name']  
  15.     data=' %s %s ' % (first_name, last_name)  
  16.     return render_template('hello.html',value=data)  
  17.      
  18.   
  19.   
  20. if __name__ == '__main__':  
  21.     #app.run(use_debugger=False, use_reloader=False, passthrough_errors=True)  
  22.     app.run('localhost', 4459)  
Finally create the “hello.html” page in template folder to display the processed output, and add the following HTML,
  1. <!DOCTYPE html>    
  2. <html lang="en">    
  3.     
  4. <head>    
  5.     <title>Python Flask Bucket List App</title>    
  6.     
  7.     <meta charset="utf-8">    
  8.     <meta name="viewport" content="width=device-width, initial-scale=1">    
  9.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">    
  10.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>    
  11.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>    
  12.     
  13.     <link href="https://chromium.googlesource.com/external/github.com/twbs/bootstrap/+/v3.3.4/docs/examples/jumbotron-narrow/jumbotron-narrow.css" rel="stylesheet">    
  14. </head>    
  15. <body>    
  16.     <div class="container">    
  17.         <div class="header">    
  18.             <nav>    
  19.                 <ul class="nav nav-pills pull-right">    
  20.                     <li role="presentation" class="active">    
  21.                         <a href="#">Home</a>    
  22.                     </li>    
  23.                        
  24.                 </ul>    
  25.             </nav>    
  26.             <h3 class="text-muted">Python Hello App</h3>    
  27.         </div>    
  28.     
  29.         <div class="jumbotron">             
  30.     
  31.             <p>    
  32.                 <h3>Hello <u><b>{{ value }}!</b></u> have fun learning python</h3>    
  33.             </p>    
  34.             <br /> <a href="/">Back Home</a>    
  35.         </div>      
  36.     
  37.         <footer class="footer">    
  38.             <p>© Company 2020</p>    
  39.         </footer>    
  40.     
  41.     </div>    
  42. </body>    
  43.     
  44. </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 “Submit” button.
 
Creating A Python Web App From Scratch Using Python Flask In Visual Studio 2017
 
And finally, your entered date will be processed in the Python code and automatically redirect to the “hello.html” page and it will display as below.
 
Creating A Python Web App From Scratch Using Python Flask In Visual Studio 2017
 

Conclusion

 
So, today, we have learned how 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. 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!


Similar Articles