"KEEP LEARNING, DON'T STOP."
"KEEP LEARNING, DON'T STOP."
In this tutorial you will learn how to pass information from one page to another page in php? Or how to get id from one page to another page? in very easy way. Here I will explain each and everything in step by step learning method so that you can understand this tutorial very easily.
Here I am taking image tutorial example to understand the concept, mean how we can get information from first page to second page? We will show multiple images in first page and when we click on any particular image that will open on second page.
Important Note: For images in database we are using how to upload image in database using PHP MySQL? tutorial. If you don't have images in database then insert some images in database using this tutorial.
Note: - We will use PHP $_GET method to access the information from one page to another page. $_GET method we use in second page to get id from first page.
$_GET method is a PHP super global method. Which is use to parse the browser URL and scan & retrieve the given parameter or information by id.
First create an index.php page where we will display multiple images from database. So now copy the below complete PHP code and paste it in index.php page.
Design your show image page like below.
Copy the below complete code and paste it in index.php page.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, intial-scale=1.0"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<title>Show Image in PHP - Campuslife</title>
<style>
body{background-color: #f2f2f2; color: #333;}
.main{box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important; margin-top: 10px;}
h3{background-color: #4294D1; color: #f7f7f7; padding: 15px; border-radius: 4px; box-shadow: 0 1px 6px rgba(57,73,76,0.35);}
.img-box{margin-top: 20px;}
.img-block{float: left; margin-right: 5px; text-align: center;}
p{margin-top: 0;}
img{width: 375px; min-height: 250px; margin-bottom: 10px; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important; border:6px solid #f7f7f7;}
</style>
</head>
<body>
<!-------------------Main Content------------------------------>
<div class="container main">
<h3>Showing Images from database</h3>
<div class="img-box">
<?php
include "connection.php";
$result = mysqli_connect($host,$uname,$pwd) or die("Could not connect to database." .mysqli_error());
mysqli_select_db($result,$db_name) or die("Could not select the databse." .mysqli_error());
$image_query = mysqli_query($result,"select img_id,img_name,img_path from image_table");
while($rows = mysqli_fetch_array($image_query))
{
$img_id = $rows['img_id'];
$img_name = $rows['img_name'];
$img_src = $rows['img_path'];
?>
<div class="img-block">
<img src="<?php echo $img_src; ?>" alt="" title="<?php echo $img_name; ?>" class="img-responsive" />
<!--displaying the image name below of the image..-->
<p><strong><?php echo $img_name; ?></strong></p>
</div>
<?php
}
?>
</div>
</div>
</body>
</html>
Now we will add some small piece of code in above code. In above code we have <img> tag and that tag we will put inside the <a> ... </a> tag to make image tag click able.
First we will create a variable in index.php page for image and that variable we will use in second page (display.php) using $_GETmethod. In that variable we will get image id from database.
Here we will use <a> ... </a> tag to make image click able and in that tag we will pass second page link (display.php) along with variable name which we want to create for pass the information from index.php page to display.php page.
Copy the below code and paste it in between <div class="img-block"> ... </div> tag of index.php page.
<a href="display.php?myid=<?php echo $img_id; ?>" target="new window"> <img src="<?php echo $img_src; ?>" alt="" title="<?php echo $img_name; ?>" class="img-responsive" /> </a>
After adding the above code in between <div class="img-block"> ... </div> tag you will get below ouput in your code.
<div class="img-block"> <a href="display.php?myid=<?php echo $img_id; ?>" target="new window"> <img src="<?php echo $img_src; ?>" alt="" title="<?php echo $img_name; ?>" class="img-responsive" /> </a> <!--displaying the image name below of the image..--> <p><strong><?php echo $img_name; ?></strong></p> </div>
If you look at above code, in above code we have created variable name with myid name. Whatever name you like you can give. If you look at above code you will see we have passed image id ($img_id;) in myid variable using assignment operator. Means we are passing that image id to myid variable and now in that variable we have image id.
Now create a second page display.php.
Now we will use $_GET method in second page mean display.php page. In $_GET method we will pass our index.php page variable ( myid ) which we have created and further we will create one more variable in display.php to store the $_GET method to access it. See the below code to understand the concept of $_GET method.
$id = $_GET["myid"];
If you look at above code you will get idea how we are accessing the first page variable to second page through $_GET variable method to share the information from one page to another page and storing them in $id variable that we have created.
So below is the complete code of display.php page. Just copy the below complete code and paste it in display.php page.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, intial-scale=1.0"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<title>Showing image from Index.php page</title>
<style>
body{background-color: #f2f2f2; color: #333;}
.main{box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;}
h3{background-color: #4294D1; color: #f7f7f7; padding: 15px; border-radius: 4px; box-shadow: 0 1px 6px rgba(57,73,76,0.35);}
.img-box{margin-top: 20px;}
img{width: 600px; min-height: 400px; margin-bottom: 10px; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important; border:6px solid #f7f7f7;}
</style>
</head>
<body>
<!-------------------Main Content------------------------------>
<div class="container main">
<h3>Showing Image from Index.php Page</h3>
<div class="img-box">
<?php
include "connection.php";
$id = $_GET["myid"];
$result = mysqli_connect($host,$uname,$pwd) or die("Could not connect to database." .mysqli_error());
mysqli_select_db($result,$db_name) or die("Could not select the databse." .mysqli_error());
$image_query = mysqli_query($result,"select img_id,img_name,img_path from image_table where $id = img_id");
while($rows = mysqli_fetch_array($image_query))
{
$img_name = $rows['img_name'];
$img_src = $rows['img_path'];
?>
<div class="img-block">
<img src="<?php echo $img_src; ?>" alt="" title="<?php echo $img_name; ?>" class="img-responsive" />
</div>
<?php
}
?>
</div>
</div>
</body>
</html>
Now your task has been completed. Now test your tutorial by running it on browser. In index.php page we are showing multiple images from database. Click on any image, it will open on second page that is display.php and below is the output.
If you found any mistake or error in this tutorial then please let me know through contact us or feedback page or you can post comment here.