The App of Drag: Natural Language Processing, Python and Drag Race (Part 2)
Welcome back! In the last article, we kicked things off with creating the Flask framework view for my application, App of Drag. In this installment, we will create an HTML form for user input and link it to our Python code. I’m living for how this application is evolving. I think it’s been a great teaching moment for us Python developers and I’m excited for us to upgrade the code even more! So, let’s jump in.
So far, we returned HTML through a python string. That’s how “I am a Drag Race Super Fan!” was printed to the server screen. Now we want to connect a view function to render HTML templates. Flask will look for HTML templates in the folder called templates, so this is where we house them. We can render these templates by importing the render_template() method. In this way, the look of my application can be controlled through an HTML interface.
Here is the basic file structure for the application so far. We will add more as we go, but for now, this is the outline.
/app_of_drag
/templates
/index.html
/app.pyIn this structure, the main code will be written in the /app.py file. As stated earlier, we house the HTML in the templates folder in a file labeled /index.html. All this lives in the root folder, /app_of_drag. In the following code, we import the render_template() function. Now the index() view function returns the result of the render_template function. This creates the webpage and passes the name of the HTML file in which the HTML is written.
from flask import Flask, render_templateapp = Flask(__name__)
@app. route ('/')
def index ():
return render_template('index.html')if __name__ == '__main__':
app.run ()
Next, we will create the first draft of the HTML. Once we’ve navigated to the/index.html file in the templates folder, we write the following code.
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport” content=”width=device-width, initial-scale=1.0">
<title>App of Drag</title>
</head>
<body>
<h1>Welcome, Hunty!</h1>
</body>
</html>Here we have our HTML tags that define how the web browser will format and display the content. Within these tags we have the head and body tags. The head tags hold metadata which is data about other data. For instance, the meta tag has attributes such as “name=viewport” and “content=”width=device-width, initial-scale=1.0” which are related to the responsive web design and the variation in screen sizes on which people will view the website. The title tags will hold the name of the application, App of Drag. Within the body tags, there is an h1 tag that houses the main heading of the webpage. For now, the main heading is “Welcome, Hunty!” but that may change as we update the app.
To run the program, type “flask run” in the command line. We will see the same link I mentioned in the previous article. The link to the development server. Once we navigate to the server, this is the output.
Nice! This is a great checkpoint to make sure everything is connected so far. To upgrade the app even further, it is now time to implement some HTTP capabilities.
HTTP Methods
Activity done on the internet is basically an exchange of data between the webserver and the user’s device. One of the most important things to think about when it comes to an exchange of data is security. A secure connection is expected for confidentiality and integrity. HTTP (Hypertext Transfer Protocol) is the universally agreed-upon format for governing the exchange of this data. HTTP has a few different methods and the ones we will use are:
- GET: a message is sent, and the server returns data
- POST: sends HTML form data to the server
For this application, the user can enter the name of any queen from the show into a form on the homepage. This data will then be used to search the subreddit or twitter account for the show. The search results will be sent through The Text API for NLP analysis and then final results returned to the user. The first step is to create the form for the user to enter the info.
HTML Form Creation
<body>
<form action="/positive_sentences_reddit_submit" method="POST" id="positive_sentences_reddit_form">
<h5>Reddit group: Rupaul’s Drag Race
<br>
The most <b>POSITIVE</b> sentences written about the queen of your choice
</h5>
<br>
<input type="text" onfocus="this.value=''" title="queen_name1" name="queen_name1" value="enter Queen’s name"/>
<input type="submit" value="Submit"/>
</form>
</body>First, we navigate to the index.html file in order to put the form for user input inside the body tags. The form has an action attribute that will connect to the associated Flask view. In the form code, the action attribute is labeled “positive_sentences_reddit_submit”. The method for this form is POST. This will take the information from the form and send it through the code to post to the server. Additionally, the form has an h5 tag that houses the form description for the user. We can also give the input a title attribute of “queen_name1”. This will be used later to identify the user’s input for the Reddit search.
Now that the code is updated to include the render_template() function and this new user input form, we can run the application to check the progress. Here is the output.
Yaaaaassss, Henny! We now have an HTML form that can accept user input and all our Python code is linking up very nicely. It’s a groovy feeling when we achieve our programming goals, isn’t it? Stay tuned for the next installment of this series where we connect to the Reddit API to search and then connect to The Text API for amazing NLP analysis. See ya there!
If you enjoyed this brief tutorial, please follow me, Z. Myricks, for more guides in all things Python and Natural language Processing. Make sure to follow Plain Simple Software for more software articles!
