Archive for Tutorials and tips

image / file upload php example

here is a good php file uploader script example that you can use in your  website

it is secure and can create folder for registered users and upload their files into it

here is the php code :


//start session and capture username that we will need later
$user = $_SESSION['username'];
//after submiting form create folder for each users and then execute next function
function makedir(){
global $user;
	if (file_exists("upload/".($_SESSION['username']))) {
	}else {
		mkdir("upload/".($_SESSION['username']), 0777);
//upload function
function upload(){
global $user;
// prevent files which are not png jpg
if (!(($_FILES["file"]["type"] == "image/png") || ($_FILES["file"]["type"] == "image/jpeg") || ($_FILES["file"]["type"] == "image/pjpeg"))){
 echo 'invalid file';
//100KB max file size
}elseif($_FILES["file"]["size"] > 103000){
 echo 'too big';
//everything is OK
   if ($_FILES["file"]["error"] > 0)
     echo "Return Code: " . $_FILES["file"]["error"] . "<br />";
      //save extension of file
	  $exts = explode(".", $_FILES["file"]["name"]) ;
	  $n = count($exts)-1;
	  $exts = $exts[$n];

	 //characters that will be needed to renaming file after upload
	 $chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
	 //generate random string with minimum 5 and maximum of 10 characters
	 $str = substr( str_shuffle( $chars ), 0, 10);
	 //add extension to file
	 //check if file exist (there is almost 0 possibility )
     if (file_exists("upload/".$user."/" . $name))
		die("please try again");
		//move uploaded file to right directory
       move_uploaded_file($_FILES["file"]["tmp_name"], "upload/".$user."/" . $name);
       echo "Stored in: " . "upload/".$user."/" .  $name;

//after submiting execute this function

and html code

<form method="post" enctype="multipart/form-data">
 <label for="file">Filename:</label>
 <input type="file" name="file" id="file" />
 <br />
 <input type="submit" name="submit" value="Submit" />

Redirect all pages to one single page for maintenance with htaccess

If your website is down for maintenance or if you have problems with host provide you may want to redirect all requests to a single page.we could do this by adding some codes into .htaccess file which exist in root.

here is the code,just add in bottom of .htaccess file modify the URL to your desire:

RewriteEngine On
 RewriteBase /
 RewriteCond %{REQUEST_URI} !^/redirect\.html$
 RewriteRule ^(.*)$ [R=307,L]


Show or Hide Div content when click on Button or text

Sometime we are willing to show some content only after clicking on submit button or text and hide it back on clicking on the same button or text
it’s useful when you have bunch of Details information that needs a lot of space and you want to give users to chose if they want to see this details
to do so we should create a java script function like this

Read more

Hide and clear input value on click and return it back (show value) when blank

If you want to show some text or value in input tag explaining what people should type and clear when they are typing and also return text or value back if they left that blank we should add some java script code to our input tag like this:

<input type="text" value="Type anything you want" onfocus="if(this.value == 'Type anything you want') { this.value = ''; }" onblur="if(this.value=='') { this.value='Type anything you want'; }" style="color:#555; width:320px;border:1px solid #222;"/>


Use CSS file for all browser except Internet explorer (IE)

Sometimes it happens that we want to use the same CSS file for all Browsers except IE,because IE doesn’t support many features of CSS 3 (IE 6, IE 7 ,IE 8 )

to do that,in head tag we should change that line associated with css to this:

<!--[if IE]><![if !IE 6]><![endif]--><link rel="stylesheet" href="style.css" type="text/css"/><!--[if IE]><![endif]><![endif]-->


<!--[if !IE 6]><!--><link rel="stylesheet" href="style.css" type="text/css" /><!--<![endif]-->

It’s already done! but if we want to force IE to use different CSS file we can use this code:

<!--[if IE 6]><link rel="stylesheet" href="ie6.css" type="text/css"/><![endif]-->

Centering DIV vertically and horizontally

In this tutorial we show you how to absolutely centering DIV vertically and horizontally

first of all you should put this CSS code in your page:


html, body {height: 100%;}
#CenteredDiv {
margin:-75px 0 0 -150px;
border:1px solid #222222;

after that just call this css with defining class in your html code:

<div id="CenteredDiv"></div>


That’s It

click here to see example below




simplest way to protect your php page with short php code

if you want to restrict unwanted users to access your page in this tutorial we will show you how to protect PHP pages using short lines of php code

$password = "pass";
// If password matchs let the user get access
if (isset($_POST["password"]) && ($_POST["password"]=="$password")) {
//Display message if wrong password or no password entered.
if (isset($_POST['password']) || $password == "") {
  echo "<p align=\"center\"><font color=\"red\"><b>Incorrect Password</b><br>Please enter the correct password</font></p>";}
  echo "<form method=\"post\"><p align=\"center\">Please enter password : <br>";
  echo "<input name=\"password\" type=\"password\" size=\"25\"><input value=\"Login\" type=\"submit\"></p></form>";

display loading image after clicking on a submit button java script jquery

If you want to show animated gif image after clicking on a submit button to show users that request is on process , here we show you how to do that in so simple way: Let’s assume that we have a form like below:

Read more

How to hide, show, or toggle your div

Are you trying to find a way to hide and show your content? The demo below shows a simple yet elegant way of toggling your content and toggling the control text via Javascript and styling.

Read more

Display a loading gif image before a page loads using javascript and Css

Have you ever need to showing a loading image before bage loading?Like this demo.

to do that at first we well need a CSS like below

Read more