Post/Redirect/Get (PRG) Design Pattern

Prerequisite- HTTP Protocol, GET and POST requests using Python

Introduction:

PRG is one of many design patterns used in web development. It is used to prevent the resubmission of a form caused by reloading the same web page after submitting the form. It removes redundancy of content to strengthen the SEO and makes the website user friendly.
   It is used by large, trusted online shops and other robust websites which are intended to be user friendly.

Problem:

When we try to submit a web form then a HTTP POST request is sent to the server. The server process the request and send response to the client with response code 2XX. When the client try to refresh/reload the web page, he/she unintentionally sends another HTTP POST request to the server with the same data as just before. This may cause undesired results, such as duplicate web purchases.



The browser pops up a warning message box after reload as shown below:


Internal working:

Below is the block diagram of internal working of the above problem.

Solution:

To avoid this problem many web developer use the POST/REDIRECT/GET pattern, instead of returning a web page directly, the POST returns a redirect to another web page or same depending on the requirements.

Internal working:



Below is the block diagram of internal working of the above solution.




A minimal python and HTML code using flask framework to demonstrate above concept.

  • Create a file called app.py in the project root directory and write the below code in it. And install flask using-

    $pip install flask
    
  • filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    from flask import Flask, render_template, redirect, request, url_for
      
    # Initiate flask app
    app = Flask(__name__)
      
    # Declare routes and methods
    @app.route('/', methods =['GET', 'POST'])
    def home():
        # If it is POST request the redirect
        if request.method =='POST':
            return redirect(url_for('home'))
      
        return render_template('home.html', title ='Home')
      
    if __name__=='__main__':
        app.run()

    chevron_right

    
    

  • Create a folder templates in the project root directory and create a file home.html inside the templates directory and write the below code in it.

  • filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!-- Create a form -->
    <form action="" method="post">
        <!-- Create a input box -->
        <input type="text", value="Suraj Yadav"><br><br>
        <!-- Create a submit button -->
        <input type="submit" value="Submit">
    </form>

    chevron_right

    
    

  • To run the web server type in console:

    $python app.py
    Output:
    Running on http://127.0.0.1:5000/
    
  • Go to web browser and type localhost:5000 and hit enter.

Console output:
In the below image, the first GET request is made when we use localhost:5000, then we POST data to the server. Now, after processing the data server redirects us by making a GET request so the third GET request is made by the server and finally the fourth GET request is made when we try to refresh the page.

Note: Try to play with code without redirecting.

design-pattern-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.