Tute 12 : Show Image in Html Page Using php Code

Last tutorial we show heading and description in our homepage from database. Now we show image in our article. Before show image we do two work.

First Work

We collect some image in our “tute” folder. Create a new folder into the “tute” folder. Our new folder name is “images”. We collect our all image in “images” folder.

Second work : Some correction in our database.

Go to the Google chrome phpmyadmin tab. In top bar we see “Structure” tab beside the “Browse” tab. We click the “structure” tab. Than see this look :

In footer side we see Add, field(s), At End of Table ………etc.

We click The “Go” button. We see a form. Same form we fill up before. Now we add a new column in our “tute” table. We named this column is “image”. Write “image” in Field.  Then Type select VARCHER in drop down menu.  In Length/Values write 100. Other fields keep blank. Then Click “Save”.

After saving we see successfully message in top. We see a new line in bottom. This line field name is “image”.

Then we Click the “Browse” in top menu.

Now we edit our all data. Every data in left side we see a “pen” symbol. We click the “pen” symbol and enter our image name.

At the bottom line we see image. Enter the image name in value field.

Go to our “tute>images” folder. Copy the image name with extension (.jpg, .jpeg, .gif, .tif etc). Paste the image name in phpmyadmin’s image value.

Then Click “Go” button.

Same tusk we do in our every data.

Our data correction is ok. Now we edit our php code in index.php file. We will three correction.

1. Write `image`,  after the `heading`, in query line.

2. Insert this code after this lien $details=$query_row['details'];
 ------------------------------------------------
$image=$query_row['image'];
 ------------------------------------------------

3. Write this after the echo '<h3>'.$heading. '</h3>'; line.
 ------------------------------------------------
echo '<img src=images/'.$image.'>';
------------------------------------------------

Now refresh the google chrome index.php tab. We see image every article.

If not show check  and double check php code. And then refresh the google chrome page.

Now some decorate the page. So go to the style.css page in notepad++ soft. At Bottom of the page write this code.

------------------------------------------------
.h-img{
float:left;
margin:2px 10px 2px 0px;
width:100px;
height:auto;
}
------------------------------------------------

Then go to the index.php page some correction <img> tag. Replace this code in <img> tag.

---------------------------------------------------------------
 echo '<img src=images/'.$image.' class="h-img">';
---------------------------------------------------------------

Now refresh our home page the chrome. We see each picture same size and left alignment.