We have the template, login system, a place where the logged in user can submit a recipe, but we are unable to click on one of these ‘recipe cards’ to see more information about it; things like ingredients and directions on how to make the final product. In this post I will be discussing how this can be achieved.
When a user clicks on a recipe card they are redirected to a new page, the problem is, what page? To make sure the user is directed to the correct recipe web page, the id of that recipe must be carried through. This done through a technique where the recipe id is echoed through the URL.
So for example, the tag where we write the code for the link:
<a href=”recipe-info.php?id=<?php echo $row[“id”]; ?>“>
We have used the echo function to echo the id of that recipe (which is stored in the database).
This will generate a new web page with id in the url.
Including the main template of the design of the web app, we are able to carry the visuals through too.
I can then get the id using the $_GET[“”]; function where I can pass through the id’s row of information from the post table.
From there, I am now able to select from the post where the id = the id from the URL as seen below:
So when we click on a recipe card like the one you see in the screenshot below:
You get the visual outcome of this:
Heres a short video if your interested: