House-card-info Page

House-card-info is the page you see if you click on the image or more info link on one of the house cards Chris made for the index page.  I created the info page to expand what you can see such as the description and also to have the option to click on the image and view it full size.  First I made the images clickable on the original house cards by adding this code.(ignore pre tags).

<pre><a href=”house-card-info.php?id=<?php echo $row[“id”];?>”>
<img style=”width: 290px; height: 230px; float:left;” alt=”Oops the image is missing!” src=”<?php echo $row[“house_photo_path”]; ?> “>

This code takes the id of the user and puts it in the url, resizes the image on that page and go’s to the house card info page.  For consistency the info page has a similar look to the house cards but has the description in it.

The house card info page gets the user id, runs a query and displays the results with a clickable image to see the image full size.  The most difficult part of creating this page was working with the id.  The page was made easier to create using some of the css classes Chris made for the original house cards, he also gave me a hand with the css as I had a bit of trouble aligning the fields.


The code for house-card-info.php


/* Get house-card id and display relevant data */
$id = $_GET[“id”];

$sql = “SELECT * FROM posts Where id=’$id'”;
$result = mysqli_query($connect, $sql);
$value = mysqli_fetch_object($result);

/* set variables */
$user_id = $value->user_id;
$date_added = $value->date_added;
$house_photo = $value->house_photo;
$house_price = $value->house_price;
$house_title = $value->house_title;
$house_location = $value->house_location;
$house_type = $value->house_type;
$house_bedroomnumber = $value->house_bedroomnumber;
$house_description = $value->house_description;
$house_photo_path = $value->house_photo_path;

<div class=”house-card2″>
<!– echo fetched data and display in house card divs –>
<div class=”house-image”>
<a href=”<?php echo $house_photo_path; ?>”>

<img style=”width: 290px; height: 230; float:left;” alt=”OOPS the Image is Missing” src=”<?php echo $house_photo_path; ?>”> </a>

<div class=”user-id-box”>
User ID: <?php echo $user_id; ?>
Date added:<?php echo $date_added; ?>

<div class=”house-price”>
£ &nbsp;<?php echo $house_price; ?>

<div class=”house-location”>
<?php echo $house_location; ?>

<div class=”house-title”>
<?php echo $house_title; ?>

<div class=”house-type”>
House Type: <?php echo $house_type; ?>

<div class=”house-bedroomnumber”>
Number of Bedrooms: <?php echo $house_bedroomnumber; ?>


<div class=”house-description”>
<?php echo $house_description; ?>


Leave a Reply

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

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

Google photo

You are commenting using your Google 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 )

Connecting to %s