form to insert data, upload many files and images , database

Wed Jan 30, 2013 11:47 pm

In this article, I illustrate an example of inserting a new data about a new style into website themes database system. In this example the user is being asked to insert information such as: style name, style category , style version , style author , browse file to upload of the style (Archived) , browse small screen shot image, browse large screen shot. Regular scripting languages are used in this example, those technologies are HTML , JavaScript and PHP to implement server side scenario. There are some limitations on the files to upload even it were just an archive or images as follows :

There is a max width and height for each image.
There is a limitation on the images extension to PNG only.
There is a limitation on the archive files extension to RAR and ZIP only.
You can change the limitations easily from the source code.

: Form Screenshot; StyleForm.gif (7.55 KiB) Viewed 31078 times

Now we start with the html form where user have to insert the needed fields. For sure JavaScript is used to validate the user data, such as empty fields and nulls. JavaScript function group all the validation error into one div element above the form by this your website looks more professional. Following is the form code:
html code

<?php 
$html_title ="PHPBB3 Styles database";
include '../head_handler.php';
?> 
 <script language="javascript" type="text/javascript">
    function validateForm()
    {
	
			document.getElementById('errorDiv').innerHTML="";			
			 
			var file = document.getElementById('file').value;			 
			var name = document.getElementById('STYLE_NAME').value;
			var author = document.getElementById('AUOTHER').value;
			
    		var largeimage = document.getElementById('largeimage').value;
    		var styleTypeIndex = document.getElementById('STYLE_TYPE').selectedIndex;						
    		var styleimage = document.getElementById('styleimage').value;    
			var type_vr = document.getElementById('TYPE_VR').value;
    		var template_category = document.getElementById('template_category_id').selectedIndex;	
			//alert(template_category);					
    		var style_ver = document.getElementById('STYLE_VR').value; 					
			var errorDiv = document.getElementById('errorDiv');

	
		
		if(name== null || name=="")
		{
			//alert("Please enter your name");
			errorDiv.innerHTML = "<li><font color='red'>Please enter style name</font></li>";
			return false;
		}
	/*	if(template_category==0)
		{
			//alert("Please enter the message");
			errorDiv.innerHTML = "<li><font color='red'>Please specify your style category</font></li>";
			return false;
		}*/	
			if(type_vr== null || type_vr=="")
		{
			//alert("Please enter the message");
			errorDiv.innerHTML = "<li><font color='red'>Please specify style type version.</font></li>";
			return false;
		}	
			if(style_ver== null || style_ver=="")
		{
			//alert("Please enter the message");
			errorDiv.innerHTML = "<li><font color='red'>Please specify your style version.</font></li>";
			return false;
		}
		if(author == null || author == "" )
		{			
			errorDiv.innerHTML = "<li><font color='red'>Please enter author name</font></li>";
			return false ;
		}
		
		if(file == null || file =="")
		{
			//alert("Please enter email address");
			errorDiv.innerHTML = "<li><font color='red'>Please specify your style file location</font></li>";
			return false;
		}
		
		if(styleimage == null || styleimage=="")
		{
			//alert("Please enter the subject");
			errorDiv.innerHTML = "<li><font color='red'>Please specify your style screenshot location</font></li>";
			return false;
		}
			
		if(largeimage== null || largeimage=="")
		{
			//alert("Please enter the message");
			errorDiv.innerHTML = "<li><font color='red'>Please specify your style large screenshot location</font></li>";
			return false;
		}		
    }
    </script>

<div>
<div id="errorDiv"></div>
<form action="#" name="PHPBB3_UPLOAD" method="post" ENCTYPE="multipart/form-data" onsubmit="return validateForm();">
<b>Style Name:</b>&nbsp;<input type="text" maxlength="40" size="40" name="STYLE_NAME" id="STYLE_NAME" /><br/>
<b>Style Type:</b>&nbsp;
<select name="STYLE_TYPE" id="STYLE_TYPE" >
 <?php 

    include 'Controllers/typeshowcontrol.php';
     echo $typescontent; 
  ?>
</select><br/>
<b>Style Category:</b>&nbsp;
 <?php
    include 'Categoryselector.php'; ?><br />
<b>Type Version (mm.x):</b>&nbsp;<input type="text" maxlength="10" size="10" id="TYPE_VR" name="TYPE_VR" /><br/>
<b>Style Version (mm.x):</b>&nbsp;<input type="text" maxlength="10" size="10"  id="STYLE_VR" name="STYLE_VR" /><br/>
<b>Auother:</b>&nbsp;<br/><textarea rows="6" cols="20" name="AUOTHER" id="AUOTHER"></textarea><br/>

Style File: <input type="file" id="file" name="file" size="40"> <br/>
Style Screenshot: <input type="file" id="styleimage" name="styleimage" size="40"><br />
Large Screenshot: <input type="file" name="largeimage" id="largeimage" size="40"><br/><input type="submit" value="Upload">
<input type="hidden" name="booleaninsert" value="yes"/>




</form>
<?php

  if(isset($_POST['booleaninsert']))
  {
      $flag=$_POST['booleaninsert'];
	  if($flag=="yes")
	     {
		 include('Controllers/styleinsertcontrol.php');
		 }
  }
  
?>
</div>
</HTML>

You should have noticed many of include function usages on the code above, for your information that this is example is a part of larger project so you may find code parts not very related to this article point but I will explain it anyway :

include '../head_handler.php'; : have tags such as <html><title><head> , CSS files references, JavaScript references, connection to database.
include 'Controllers/typeshowcontrol.php';: print the selection box of style types with the ones exists in the database.
include 'Categoryselector.php';: print the selection box of categories defined in the database.
include('Controllers/styleinsertcontrol.php');: this is called after submit action for form is done.

You should have noticed this code part :
php code

if(isset($_POST['booleaninsert']))
  {
      $flag=$_POST['booleaninsert'];
	  if($flag=="yes")
	     {
		 include('Controllers/styleinsertcontrol.php');
		 }
  }

This part associate the including of styleinsertcontrol.php with a successful submit action.

The selection boxes includes do the following :
php code

<?php

 
   $typescontent=" ";
   $currentType="";
   if(!isset($TYPE_ID))
   {
      $TYPE_ID="-1";
   }
   $alltypes=GetAllTypes();
      $num=mysql_num_rows( $alltypes);
	  
	    if($num>0)
		{
		
				    while($num>0)
				 {
				 
				  $newoption=mysql_result($alltypes,$num-1,"TYPE_NAME");
				  $id=mysql_result($alltypes,$num-1,"ID");
				  
				  if($id==$TYPE_ID)
				  {
				  $currentType=$newoption;
				  $typescontent.="<option value='$id' selected='selected'>$newoption</option>";
				  }
				  else 
				  {
				  $typescontent.="<option value='$id' >$newoption</option>";
				  }
				    $num--;
				 }
		}		
?>

In your case may don't need to get static data from database for selection options but I have did this to ease the upgrading process. The most important include from the list above is include('Controllers/styleinsertcontrol.php'); because it has all the code lines of inserting, checking, and uploading files :
php code

<?php
  include('model/stylesinsert.php');
?>


<?php

  $STYLE_NAME=$_POST['STYLE_NAME'];
  $STYLE_TYPE=$_POST['STYLE_TYPE'];
  $STYLE_VR=$_POST['STYLE_VR'];
  $AUOTHER=$_POST['AUOTHER'];
    $TYPE_VR=$_POST['TYPE_VR'];
  $category=$_POST['template_category_id'];
  
  if(isset($_POST['insertype']))
  {
  $STYLE_ID=$_POST['STYLE_ID'];
  
     UpdateStyle($STYLE_ID,$STYLE_NAME,$STYLE_TYPE,$STYLE_VR,$TYPE_VR,$AUOTHER,$category);

	
  }
else
	{
    $result=GetTypeByID($STYLE_TYPE);
	$TYPE_NAME=mysql_result($result,0,"TYPE_NAME");
  							
     $allowed_ext = "png"; 
	$max_size = "50000"; 
	$max_height = "200"; 
	$max_width = "200"; 
	$stylepath="../stylesdata/".$TYPE_NAME."/uploads";
	$imagespath="../stylesdata/".$TYPE_NAME."/images";
	$filecheck="";
	$imagecheck="";
if(is_uploaded_file($_FILES['file']['tmp_name']))

{
$filecheck="ok";

}

 
$ok = checkExtension(pathinfo($_FILES['styleimage']['name']),$allowed_ext);
$large = checkExtension(pathinfo($_FILES['largeimage']['name']),$allowed_ext);
		print "Your file has been uploaded successfully! Yay!";

		if ($ok == "1"&& $large=="1") {

			if($_FILES['styleimage']['size'] > $max_size)

		{

			print "File size is too big!";
              die('50KB is the max size');
				exit;

			}



// Check Height & Width

			if ($max_width && $max_height) {

			list($width, $height, $type, $w) = getimagesize($_FILES['styleimage']['tmp_name']);

			if($width > $max_width || $height > $max_height)

			{

			print "Image height and/or width are too big!";
                            die('mage height and/or width are too big!');
				exit;

			}

			}



// The Upload Part

			if(is_uploaded_file($_FILES['styleimage']['tmp_name'])&&is_uploaded_file($_FILES['largeimage']['tmp_name']))

			{
			$imagecheck="ok";
				
				
			}
			
         if($imagecheck=="ok"&&$filecheck=="ok")
		 {
		 InsertStyle($STYLE_NAME,$STYLE_TYPE,$STYLE_VR,$TYPE_VR,$AUOTHER,$category);
           $STYLE_ID=GetMaxStyleID();	
		   $extension = pathinfo($_FILES['file']['name']);
		$extension = strtolower($extension['extension']);
		move_uploaded_file($_FILES['file']['tmp_name'],$stylepath.'/'.$STYLE_NAME."_".$STYLE_ID.".".$extension);
		
      include ('lib/pear/zip.php');
	  // Create instance of Archive_Zip class, and pass the name of our zipfile
	  $zipfile = New Archive_Zip($stylepath.'/zips/'.$STYLE_NAME."_".$STYLE_ID.'.zip');

      // Create a list of files and directories
	  $list = array($stylepath.'/'.$STYLE_NAME."_".$STYLE_ID.".".$extension);

	// Create the zip file
     $zipfile->create($list);
	 
	 	$extension = pathinfo($_FILES['styleimage']['name']);

	$extension = strtolower($extension['extension']);
	move_uploaded_file($_FILES['styleimage']['tmp_name'],$imagespath.'/'.$STYLE_ID.".".$extension);
	move_uploaded_file($_FILES['largeimage']['tmp_name'],$imagespath.'/'.$STYLE_ID."_2.".$extension);
	
	print "Your Image has been uploaded successfully! Yay!";
		 }

  
  #  $STYLE_ID=GetMaxStyleID()-1;
#	 mysql_select_db("three",$link);
#	InsertIntoPhpbb3demos($STYLE_ID,$STYLE_NAME);
	
				} 
 			else {

			print "Incorrect file extension (RAR,or ZIP only) !";
			
			print "Image should be PNG format !";
            
			
			
         
			}

}
function checkExtension($extension,$allowed_ext){
	//$extension = pathinfo($_FILES['styleimage']['name']);
$ok ="0";
	$extension = strtolower($extension['extension']);
 
	$allowed_paths = explode(", ", $allowed_ext);

	for($i = 0; $i < count($allowed_paths); $i++) {

		if ($allowed_paths[$i] == "$extension") {

		$ok = "1";

		}
		}
		return $ok;		
}
?>

The code above get the parameters sent and files to upload, it also include other database query files which is stylesinsert.php:
php code

<?php 
  
  
  function InsertStyle($STYLE_NAME,$STYLE_TYPE,$STYLE_VR,$TYPE_VR,$AUOTHER,$category)   
   {
   
   $date = date("Y-m-d"); 
    $sqlQuery="insert into styles  VALUES (0,'$STYLE_TYPE','$STYLE_NAME','$STYLE_VR',0,0,'$date','$TYPE_VR','$AUOTHER','$date','$category');" ;	
    $result=mysql_query($sqlQuery);
	echo mysql_error();

   }
   function UpdateStyle($STYLE_ID,$STYLE_NAME,$TYPE_ID,$STYLE_VR,$TYPE_VR,$AUOTHER,$category)
   {
   $date = date("Y-m-d"); 
  $sqlQuery="update styles set STYLE_NAME='$STYLE_NAME',  ID=$TYPE_ID , STYLE_VR='$STYLE_VR',TYPE_VR='$TYPE_VR', AUOTHER='$AUOTHER'
  , UPDATE_DATE=$date ,CATEGORY='$category' where STYLE_ID=$STYLE_ID;";
    mysql_query($sqlQuery);
	echo mysql_error();
   }
   
   
   function GetMaxStyleID()
   {
     $sqlQuery="select max(STYLE_ID) from styles;" ;
	 $result=mysql_query($sqlQuery) or die("Error in database get Max ID of phpbb3styles");
	 echo mysql_error();
	 $STYLE_ID= mysql_result($result,0,0);		
	
	 return $STYLE_ID;
   }
    function InsertIntodemos($STYLE_ID,$STYLE_NAME)
	{
	  
		  $sqlQuery="Insert into styles values($STYLE_ID,'$STYLE_NAME','$STYLE_NAME',1,'$STYLE_ID',$STYLE_ID,$STYLE_ID);" ;
		mysql_query($sqlQuery) ;
	    echo mysql_error();
		
	}
	function InsertType($TYPE)
	{ $sqlQuery="Insert into type values(0,'$TYPE');" ;
		mysql_query($sqlQuery) or die("error in new type insertion");
	    echo mysql_error();
		echo "<br><b>New style type inserted  and it is $TYPE</b>";
	 
	}
	function GetTypeByID($ID)
	{
	  $query="Select * from type where  ID=$ID;";
	  	$results=mysql_query($query);
		
	    echo mysql_error();
		return $results;
	 
	}
  
?>

Note that the code above has a checking on update process because the same code can be used for updating a record and its files too.