Multiplication Table in PHP taking Number and Limit from another Form and CSS Styling

Here the user will enter the number and the limit upto which he wants the table, based on that the Multiplication Table of that number gets generated.

We need to create a HTML Form where the user will enter the values.

MultiplicationTableForm.html

<html>
<head>
<title>Multiplication Table Generator Form</title>

<style type="text/css">
table.tab
	{
	border: 1px solid blue;
	text-align: center;
	border-collapse:collapse;
	background: #E0FFFF;
   }

tr.head{font-family: Tahoma,Arial; font-size: 15pt; font-style: normal; font-weight:; color: white;
text-align: center; background-color:#00CED1}

tr.bod{font-family:Tahoma, Arial; font-size: 11pt; font-style: normal; font-weight: ; color:black}

input.sub{font-family:Tahoma, Arial; font-size: 12pt; font-style: normal; font-weight: ; color:black}
</style>

</head>
<body>



<form name="MultiTableForm" method="POST" action="MultiTable.php">

	<table border='0' width='400' cellspacing='10' cellpadding='05' align='center' class='tab'>
		<tr class='head'>
			<td colspan='2' align='center'>Multiplication Table Generator

</td>
		</tr>

		<tr class='bod'>
			<td>Number:</td>
			<td><input type="text" name="num" id="num" />1-100</td>
		</tr>

		<tr class='bod'>
			<td>Upto:</td>
			<td><input type="text" name="upto" id="upto" />1-100</td>
		</tr>

		<tr>
			<td colspan='2' align='center'>


			<input type="submit" name="submit" value="Submit" class='sub' />&nbsp;&nbsp;
			<input type="reset" name="reset" value="Reset Fields" class='sub' />
			</td>
		</tr>
	</table>
</form>

</body>
</html>

Snapshot of the Form

MultiTableHTMLForm1

The PHP File will take the values and generate the Form. Appropriate validations are performed here.

MultTable.php

<html>
<head>
<title>Multiplication Table</title>

<style type="text/css">
	/*Style for Table*/
	table
	{
	border-collapse:collapse; width:0%;
	}

	td
	{
	height:35px;
	}
	/*Style for Table Header*/
	td.head{font-family: Tahoma; font-size: 15pt; font-style: normal; color: white;
    text-align: center; background: #00CED1;}

	/*Style of other Table Elements*/
	table, th, td
	{
	font-family:Tahoma, Arial; font-size:11pt;
	color:black; font-style: normal; font-weight: normal;
	border: 1px solid blue;
	text-align: center;
	}

</style>

</head>

<body>

<?php

$num = $_POST['num'];
$upto = $_POST['upto'];

$errorFlag = 0;
$errorString = "Invalid Arguments: 
";

if ($num <1 || $num >100) {
		$errorFlag = 1;
		$errorString = $errorString." - Number should be between 1 to 100 
";
	}
	if ($upto < 1 || $upto > 100) {
		$errorFlag = 1;
		$errorString = $errorString." - Limit should be between 1 to 100";
	}

if ($errorFlag == 0) {

echo "<table align='center'>";

echo "<tr>";
echo "<td colspan='5' class='head'>
		Multiplication Table of $num upto $upto
	</td>";
echo "<tr>";

for($i=1; $i<=$upto; $i++)
{
	if($i%2 == 0)
	{
		echo "<tr bgcolor='PowderBlue'>";
	}

	else
	{
		echo "<tr bgcolor='LightCyan'>";
	}

	echo "<td>$num</td>";

	echo "<td>x</td>";

	echo "<td>$i</td>";

	echo "<td>=</td>";

	echo "<td>".$num*$i."</td>";

	echo "</tr>";

}//for loop ends

echo "</table>";
}

else
{
  echo "<div align='center'>";
  echo "$errorString";
  echo "


";
  echo "<a href='MultiTableForm.html'>Back</a>";
  echo "</div>";
}
?>

</body>

</html>

Snapshot of the o/p

User enters the number and limit upto which he wants a Table

MultiTableHTMLForm

Multiplication Table gets generated.

MultiTableGenerated

So Here it comes. Very Useful Program for any School kid. 😀 and a great learning tool for PHP Beginners. 😀

Multiplication Table in PHP taking Number and Limit from another Form and CSS Styling

We have shifted..

https://programmingpalace.wordpress.com/ is now http://thetechstory.com/

Find this Tutorial in the given link.

http://thetechstory.com/2012/09/18/multiplication-table-in-php-taking-number-and-limit-from-another-form-and-css-styling/

Photo Sharing Application in PHP with More Features- Adding Captions and Deleting Images

Hello Friends and Developers 😉

Last time we created a Simple Photo Sharing Application with a Image Upload Form where the User selects a single image and uploads it. After that he can view it in an album.

This is the link for that app

Photo Sharing application using php

This is the 2nd part for the same tutorial. In this part we will add more features to the application like

  • Adding Caption to a Image
  • Deleting a Image

So lets see the code for that.

The Image Upload Form that we see in the previous tutorial will remain same i.e UploadPhotos.php

We will make changes to the PhotoAlbum.php to include a form below every image with two Buttons, one for Adding a Caption to the Image and another for deleting the image.

Here comes the updated version of

PhotoAlbum.php

<html>
<head>
<title>My Photos</title>

<link rel="stylesheet" type="text/css" href="Includes/Style.css"/>

<?php include("Includes/db.php"); ?>

</head>

<body>

<?php

  $result = mysql_query("SELECT * FROM mp_photos order by id DESC");

	  echo "<table border='1' cellpadding='10' class='tab' align='center'>\n";
	  echo"<tr class='head'>
	  <td colspan='4'>My Photos</td>
	  </tr>";

		$x=0;

		while($x < mysql_num_rows($result))
	   {
		  $picid=mysql_result($result, $x, 'id');
		  $name=mysql_result($result, $x, 'name');
		  $caption=mysql_result($result, $x, 'caption');

		  if($x%4==0)
		   {
			echo "<tr class='bod'>\n";
		   }

		   //To Be Able to Add Caption and Delete the Images we created a form below an image with two Buttons for adding caption and Deleting the image
			echo "<td align='center' bgcolor= '#E0FFFF' onmouseover=\"bgColor ='Turquoise'\" onmouseout=\"bgColor ='#E0FFFF'\">";
			echo "<img src = '$name' height='150' width='150' />
			<br/>$caption

			<form action='PhotoAlbumEdit.php' method ='post'>\n
					<input type='hidden' name='picid' value ='$picid'>\n

					<input type='Submit' value='Add Caption' name='add'/>
					<input type='Submit' value='Delete' name='delete'/>
			</form>
			</td>\n";

		  $x++;
		   if($x%4==0)
		   {
			echo "</tr>\n";
		   }
		}//end of while
		echo "</table><br /><br />";

	mysql_close($con);

?>

<p align='center'><a href='UploadPhotos.php'>Upload More Images</a></p>

</body>
</html>

PhotoAlbum_with_Edit_Buttons

PhotoAlbum_with_Edit_Buttons

PhotoAlbumEdit.php

This php page opens a form for adding a caption when the Add Caption Button is clicked.
It also removes the image if the Delete Button is clicked.

Adding a Caption to the Image

For adding a caption to the image we created a small Form below every image with a Button – Add Caption
When the user clicks that button the image opens in another page. There we created a form with a Text Box for adding the caption for the image. When the user add some caption and click on the save button the caption gets saved associated to that image in the Database.

Deleting an Image

When the user clicks on the Delete Button below an image the image gets deleted without giving any warning.

PhotoAlbumEdit.php

<html>
<head>
<title>My Photos</title>

<link rel="stylesheet" type="text/css" href="Includes/Style.css"/>

<?php include("Includes/db.php"); ?>

</head>

<body>

<?php

	$id = $_POST['picid'];

	/*Code for the Add Caption Submit button*/
		if (isset($_POST['add']))
		{
			/*SQL for getting the neccessary image details*/
		$res = mysql_query("SELECT * FROM mp_photos WHERE id=$id");

		/*Creating a form for adding Caption to the image*/

		echo "<form action='PhotoAlbumUpdate.php' method='post'>\n
		<table cellpadding='10' class='tab' align='center'>\n
		<tr class='head'>\n
		<td colspan='2' align='center'>Add Caption</td>
		</tr>\n";
		/*A while loop is used to display the image Caption in a text box*/
		while($row = mysql_fetch_array($res))
		  {
			echo "<tr>\n
			<td colspan='2' align='center'><img src = '{$row['name']}' /></td>\n
			</tr>\n";

			echo "<tr class='bod'>\n
			<td align='right'><p class='upd'>Caption: </p></td>\n
			<td><input type='text' name ='caption' size='50' maxlength ='150' value='{$row['caption']}'> </td>\n
			</tr>\n";

			echo"<tr>\n
			<td colspan='2' align='center'><br/>
			<input type='hidden' name='picid' value ='$row[id]'>
			<input type='Submit' value =' Save ' name='save' class='sub'> </td>
			</tr>";
		}
		  /*End of While loop*/
		echo "</table>";
		echo "</form>";

	}//Code for Add Caption Button Ends here

	//Code for Delete Button
	else if (isset($_POST['delete']))
	{
			$delete_query="Delete from mp_photos where id='$id'";

			if (!mysql_query($delete_query,$con))
			{
				die('Error: ' . mysql_error());
			}
			echo "Successfully Deleted";

			echo "<br /><a href='PhotoAlbum.php'>View Album</a>";

	}//Code for Delete Button Ends here

	mysql_close($con);
?>

<p align='center'><a href='UploadPhotos.php'>Upload More Images</a></p>

</body>
</html>

AddCaptionForm

Add Caption Form

AddingCaption

Adding Caption

Successfully Updated Msg

ViewAlbumWithCaption

View Album With Caption

PhotoAlbumUpdate.php
This php page takes the Caption for the image from the PhotoAlbumEdit.php and saves it to the database.

<html>
<head>
<title>My Photos</title>

<link rel="stylesheet" type="text/css" href="Includes/Style.css"/>

<?php include("Includes/db.php"); ?>

</head>

<body>

<?php
	$id = $_POST['picid'];

	/*Code for the Save Caption Submit button*/

	if (isset($_POST['save']))
	{
			$caption =$_POST['caption'];

			$update_query="Update mp_photos set caption='$caption' where id='$id'";

			if (!mysql_query($update_query,$con))
			{
				die('Error: ' . mysql_error());
			}
			echo "Successfully Updated";

			echo "<br /><a href='PhotoAlbum.php'>View Album</a>";

	}

		mysql_close($con);

?>

<p align='center'><a href='UploadPhotos.php'>Upload More Images</a></p>

</body>
</html>

Photo Sharing Application using PHP

I know all of you must have uploaded your images on various sites like Facebook, Picasa, Flickr etc. And you all must have wondered how it works.

So I thought of sharing a simple Photo Sharing Application in PHP which I made a long time ago.

Here in this PHP Application we have an Image Upload Form where the user can select a single image at a time and upload it. After that the user can see the image in an Album.

That’s it I have tried KISS (Keep It Short and Sweet).

In the later part we will try out more functionality like adding a caption to the image, creating different albums, deleting an image etc.

I have created a Directory called PhotoSharingSimple inside www directory of wamp.

C:\wamp\www\PhotoSharingSimple

Inside this PhotoSharingSimple I have created a directory called upload where I am saving all the images.

For this app we have created a Database in MySQL – myphotos

In that we have a created table called mp_photos

Structure of the table is given below

Table:mp_photos

Field

Type

Null

Extra

id bigint(20) No AUTO_INCREMENT
album bigint(20) No
name text No
caption longtext No

 

When the user select an image and click on the Upload Button, the image gets uploaded to the Server.

Using the global PHP $_FILES array, you can upload files (here images) from a client computer to the remote server.

Here in this App we are uploading the image to the Server and storing it’s path in the Database Table mp_photos.

When we want to display the images in an album, we are fetching their path from the Database and displaying them using the <img> HTML element.

db.php
We have created the DB Connection in a separate file called db.php. This helps in making any changes to the DB Code easier.

<?php
$con = mysql_connect("localhost","Anna","secretpwd");
   if (!$con)
    {
      die('Could not connect: ' . mysql_error());
    }
  
  mysql_select_db("myphotos", $con);
?>

Style.css

We have kept the styles in a separate file and used them in all our PHP Files.


table.tab
	{
	border: 1px solid blue;
	text-align: center;
	border-collapse:collapse;
	background: #E0FFFF;
   }
   
tr.head{font-family: Tahoma,Arial; font-size: 15pt; font-style: normal; font-weight:; color: white; 
text-align: center; background-color:#00CED1}

tr.bod{font-family:Tahoma, Arial; font-size: 11pt; font-style: normal; font-weight: ; color:black}

input.sub{font-family:Tahoma, Arial; font-size: 14pt; font-style: normal; font-weight: ; color:black}
  

UploadPhotos.php

<html>
<head>
<title>Photo Sharing &lt; My Photos</title>

<link rel="stylesheet" type="text/css" href="Includes/Style.css"/>

<script type="text/javascript">
function displaymessage()
{
var x=document.forms["UploadForm"]["file"].value

 if(x==null || x=="")
 {
  alert("Select an Image first");
  return false;
  }
 }
</script>

<?php include("Includes/db.php"); ?>

</head>

<body>

<form name="UploadForm" method="POST" action="UploadPhotos.php" enctype="multipart/form-data" onsubmit="return displaymessage()">
		
	<table border='0' width='400' cellspacing='10' cellpadding='05' align='center' class='tab'>
		<tr class='head'>
			<td colspan='2' align='center'>Upload Single Image</td>
		</tr>

		<tr class='bod'>
			<td><label for="file"><br />Image:</label></td>
			<td><input type="file" name="file" id="file" /></td>
		</tr>
		
		<tr>
			<td colspan='2' align='center'><br /><br /><input type="submit" name="upload" value="Upload" class='sub' /></td>
		</tr>
	</table>
</form>


<?php
//Uploading Images when upload button is clicked
if (isset($_POST['upload'])){
	$dirname = "upload";


if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/jpg")
|| ($_FILES["file"]["type"] == "image/png")))
{
	
if ($_FILES["file"]["error"] > 0)
 {
 echo "Error: " . $_FILES["file"]["error"] . "<br />";
 }
else
  {
  $filename = $_FILES["file"]["name"];
  echo "Uploaded Image : $filename <br />";
  echo "Type : " . $_FILES["file"]["type"] . "<br />";
  echo "Size : " . $_FILES["file"]["size"] . "  Kb<br />"; 
  //echo "Temp file: " . $_FILES["file"]["tmp_name"]. "<br/>";
  
   echo "<img src='$dirname/$filename' alt='$filename' height='200' width='200' />";
  
  //if you don't want to allow same images getting uploaded again then remove the comments.
  if (file_exists("$dirname/" . $_FILES["file"]["name"]))
   {
      //echo $_FILES["file"]["name"] . " already exists. ";
      //stopping same image getting added more than once.
	  //die('' . mysql_error());
   }
    else
   {
      move_uploaded_file($_FILES["file"]["tmp_name"],
      "$dirname/" . $_FILES["file"]["name"]);
      //echo "Stored in: " . "upload/" . $_FILES["file"]["name"];
      //echo "<img src='upload/$filename' alt='$filename'>";
      
	}
	
	$sql_upload="INSERT INTO mp_photos(name)
		VALUES ('$dirname/$filename')";
  
	if(!mysql_query($sql_upload,$con))
	{
	die('Error: ' . mysql_error());
	}
	
	echo "<br /><br />Image Successfully Uploaded";	
	  
  }
  
  echo "<br /><br /><a href='PhotoAlbum.php'>See Album</a>";
  
  }//if the image is a valid type
  
  else
  {
	echo "Invalid file";
  }
  
  }//upload
  
mysql_close($con);
?>

</body>
</html>


Snapshot of Uploading an Image

Image Upload Form

Selecting the image for uploading

Uploaded Image


PhotoAlbum.php

<html>
<head>
<title>My Photos</title>

<link rel="stylesheet" type="text/css" href="Includes/Style.css"/>

<?php include("Includes/db.php"); ?>

</head>

<body>

<?php

  $result = mysql_query("SELECT * FROM mp_photos order by id DESC");
  
	  echo "<table border='1' cellpadding='10' class='tab' align='center'>\n";
	  echo"<tr class='head'>
	  <td colspan='4'>My Photos</td>
	  </tr>";
	  
		$x=0;
		
		while($x < mysql_num_rows($result))
	        {	
		  $picid=mysql_result($result, $x, 'id');
		  $name=mysql_result($result, $x, 'name');
		  $caption=mysql_result($result, $x, 'caption');
		    
		  if($x%4==0)
		   {
			echo "<tr class='bod'>\n";
		   }
		    
			echo "<td align='center' bgcolor= '#E0FFFF' onmouseover=\"bgColor ='Turquoise'\"            onmouseout=\"bgColor ='#E0FFFF'\">";	
			echo "<img src = '$name' height='150' width='150' />	
			<br/>$caption			
			</td>\n";	
			
		  $x++;
		   if($x%4==0)
		   {
			echo "</tr>\n";
		   } 
		}//end of while
		echo "</table><br /><br />";

    mysql_close($con);
		
?> 

<p align='center'><a href='UploadPhotos.php'>Upload More Images</a></p>

</body>
</html>

Snapshots of the Album

View Album

Hope you enjoyed this application. Keep Coding 😀