Hello World, Today we are going to discuss that how we can submit form in flask with both get and post method.Before reading this tutorial, i will request you to read my previous article that create hello world app with flask.In this tutorial i will submit form with both get and post method. I have divided this tutorial in following parts:
- Create basic structure of app for this tutorial
- Create form template
- Process the form according to submitted data
Create basic structure of app for this tutorial
In this tutorial, i will read RSS feed from different news websites. It will work when user submit the name of the news channel than data will come from that website. We will perform this action with both GET and POST method. We will also use frontend template for this tutorial. By default flask comes with jinja template engine. We will use this template. So lets start the work
- Create news folder.
- Create news.py in this folder.
- Create templates folder in news folder with news.html file.
We have created the file structure of our app. Now we will put the code these files.
Create Form Template
In this step, we will create the form and submit the form with flask.
- Open news.html and add the following code in it.
<!DOCTYPE html>
<html>
<head>
<title>News Application</title>
<link rel="stylesheet" type="text/css" href="{{url_for('static', filename='bootstrap.min.css')}}" />
</head>
<body>
<div class="container">
<div class="page-header">
<!-- <form method="post"> -->
<form>
<div class="row">
<div class="col-xs-10">
<select name="search" class="form-control">
<option value="">--- Select News Channel ---</option>
<option value="bbc">BBC</option>
<option value="cnn">CNN</option>
<option value="ndtv">NDTV</option>
<option value="rediff">Rediff</option>
</select>
</div>
<div class="col-xs-2">
<input type="submit" class="btn btn-danger btn-block" value="Submit" />
</div>
</div>
</form>
</div>
{% for news in articles %}
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><a href="{{news.link}}">{{news.title}}</a></h3>
</div>
<div class="panel-body">
{{news.summary}}
</div>
<div class="panel-footer">
<h3 class="panel-title">{{news.published}}</h3>
</div>
</div>
{% endfor %}
</div>
</body>
</html>
Process the form according to submitted data
- Open news.py and add the following code.
from flask import Flask
from flask import render_template,request
import feedparser
app=Flask(__name__)
NEWS_CHANNEL={
'bbc':'http://feeds.bbci.co.uk/news/rss.xml',
'cnn':'http://rss.cnn.com/rss/edition.rss',
'ndtv':'http://feeds.feedburner.com/ndtvnews-top-stories',
'rediff':'http://www.rediff.com/rss/inrss.xml'
}
@app.route('/',methods=['GET','POST'])
def home():
# query=request.form.get('search') #Enable Post Method
query=request.args.get('search') #Enable GET Method
if not query or query.lower() not in NEWS_CHANNEL:
channel='bbc'
else:
channel=query
feed=feedparser.parse(NEWS_CHANNEL[channel])
news=feed['entries']
return render_template('news.html',articles=news)
if __name__=='__main__':
app.run(debug=True)
The above code process the user submitted data and show the relative result. I have commented the get method in the above code. If you want to run your application with get method then remove the comment from the line and comment the second method. Also change the form method form template. Now its time the run the application. Run this application with following steps.
- Go to news directory via command prompt or terminal.
- Run this command python news.py
- Open url at given port in browser.
- You will see the following screen in the browser.
- When you submit the form with selected channel than you will get the latest news of that channel.
- Make sure that your internet connection is working because data is coming from live websites.
In this tutorial, I have Bootstrap 3 for styling the template.
Congratulations, We have created the form and submit that form with flask.