Displaying recipe information

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:

recipeinfoHTML

So when we click on a recipe card like the one you see in the screenshot below:

Yumi

You get the visual outcome of this:

Yumi

Heres a short video if your interested:

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s