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.
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:
Below is the block diagram of internal working of the above problem.
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.
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
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.
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.
- Difference between Good Design and Bad Design in Software Engineering
- Singleton Design Pattern | Implementation
- The Decorator Pattern | Set 2 (Introduction and Design)
- Decorator Pattern | Set 3 (Coding the Design)
- Flyweight Design Pattern
- Singleton Design Pattern | Introduction
- Java Singleton Design Pattern Practices with Examples
- Facade Design Pattern | Introduction
- Proxy Design Pattern
- Composite Design Pattern
- Prototype Design Pattern
- Bridge Design Pattern
- Mediator design pattern
- Template Method Design Pattern
- Builder Design Pattern
- Visitor design pattern
- Chain of Responsibility Design Pattern
- State Design Pattern
- Memento design pattern
- Null object Design Pattern
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.