Taslim Blogger

create a styled float menu with css and jquery

2011-11-16T13:29:00.001+06:00

Previous post show how to create floating content and fixed floating content using for bookmarking tool and feedback button. But this post show how to create a main menu fixed on top when the pages is scrolling. Simple jquery tricks do it easily. For this you need to learn clearly css,html and jquery. But not very hard to try.

Hide Example Show Example

Download

You can try this two tutorial.

Fixed float element using jquery and css
Creating simple float menu using jquery

Final output of floating main menu on the top of the pages

Create a float menu

Now start coding to create a floating menu of the main menu on the top of the pages. When scorrling it will fixed on the top of the page. But when you come back on the top the main menu will be stay on the previous place of its own.Now start and for this we need css, html, jquery and sme images. The sample file structure is like.

float-main-menu/
 float-main-menu.html
 style.css
 float-main-menu.js
 back.jpg
 bar.jpg

Create a simple html file to locate links with html <ul> tags. It is a simple html file

float-main-menu.html

<html>
 <head>
  <title> Floating Main Navigation Bar</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">  
  <script type="text/javascript" src="float-main-menu.js"> </script>
 </head> 
  
 </head>
 <body>
  <br/><br/>
  <h1>Floating Main Navigation Bar</h1>
  
  <br></br>
  <div id="taslim">
   <a href="">Taslim</a>
   <a href="">Taslim</a>
   <a href="">Taslim</a>
   <a href="">Taslim</a>
   <a href="">Taslim</a>
   <span class="clear"></span>
  </div>
  <div id="ta">
   <h3>Floating Main Navigation Bar</h3>
   A navbar on tthe top of the page is fixed when the page is scrolling.  A navbar on tthe top of the page is fixed when the page is scrolling.  A navbar on tthe top of the page is fixed when the page is scrolling. 
   
   ......
   .....
   
   A navbar on tthe top of the page is fixed when the page is scrolling.  A navbar on tthe top of the page is fixed when the page is scrolling.
  </div>  
 </body>
</html>

float-main-menu.js

$(document).ready(function(){    
     var offset=$("#taslim").offset();
     var toppadding=10;
     var y=$(window).scrollTop() - offset.top + toppadding;
     var a=y-200;
     $(window).scroll(function() {
      if($(window).scrollTop()< 200){
       $("#taslim").stop().css({
        position: 'relative',
         marginTop:0,         
       });
      }      
      else if(($(window).scrollTop() > offset.top)&&($(window).scrollTop()>200)) {
       $("#taslim").stop().css({ 
         position: 'fixed',
         marginTop: y,         
       });       
      } 
      else  {
       $("#taslim").stop().css({         
         marginTop: 0
       });
      }
     });
    });

Now start to styling the html file with css. style.css

   
body{
 width:900px;
 margin:0 auto;
 background:url("back.jpg");    
}

h1{
 padding:10px;
 color:white;
}
#taslim{
 background:url("bar.png") repeat-x;    
 margin:6px 0;
 font-weight:bold;    
 color:white;
 width:930px;
 height:70px;
 padding:5px;
    
}
#taslim a{
 text-decoration:none;
 background:url("bar1.png") right 0px no-repeat;
 padding:10px  30px;
 float:left;
 color:white;    
}
#ta{
 background:#f1f1f1;
 padding:20px;
 width:900px;    
}

.clear{
 clear:both;
}

Create multilevel horizontal menu with css

2011-11-16T02:52:00.001+06:00

To decorate websites and navigate to one page another page every wesites need a menu. With css anybody can style with their own. To navigahe one page to another page and have a long menu we need multilevel menu. This post show how to create a multilevel menu using css.

Hide Example Show Example

Download

Final output of multilevel horizontal menu

Create a multilevel horizontal menu

Now start coding to create a multilevel horizontal menu. For this we need css and html. The sample file structure is like.

multilevel-horizontal-menu/
 multilevel-horizontal-menu.html
 style.css
 back.jpg

Create a simple html file to locate links with html <ul> tags. It is a simple html file

multilevel-horizontal-menu.html

<html>
 <head>
  <title>Multilevel Horizontal menu</title>
  <link rel="stylesheet" type="text/css" href="style.css">  
 </head>
 <body>
  <br/><br/>
  <nav>
   <ul>
    <li><a href="">Home</a>
     <ul>
      <li><a href="">Home</a></li>
      <li><a href="">Home</a></li>
      <li><a href="">Home</a></li>
      <li><a href="">Home</a></li>
      <li><a href="">Home</a></li>
      <li><a href="">Home</a></li>
     </ul>
    </li>
    <li><a href="">Service</a>
     <ul>
      <li><a href="">Service</a></li>
      <li><a href="">Service</a></li>
      <li><a href="">Service</a></li>
      <li><a href="">Service</a></li>
      <li><a href="">Service</a></li>
      <li><a href="">Service</a></li>
     </ul>
    </li>
    <li><a href="">Contact Us</a>
     <ul>
      <li><a href="">Contact Us</a></li>
      <li><a href="">Contact Us</a></li>
      <li><a href="">Contact Us</a></li>
      <li><a href="">Contact Us</a></li>
      <li><a href="">Contact Us</a></li>
      <li><a href="">Contact Us</a></li>
     </ul>
    </li>
    <li><a href="">About Us</a>
     <ul>
      <li><a href="">About Us</a></li>
      <li><a href="">About Us</a></li>
      <li><a href="">About Us</a></li>
      <li><a href="">About Us</a></li>
      <li><a href="">About Us</a></li>
      <li><a href="">About Us</a></li>
     </ul>
    </li>
    <li><a href="">Others</a></li>
    <li><a href="">Help</a></li>
   </ul>
  </nav>
  
  <div>
   <h3>Create a multilevel horizotal menu</h3>
    Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .
  
  </div>
  
 </body>
</html>

Now start to styling the html file with css. style.css

 body{
  width:600px;
  margin:0 auto;   
  background:url("back.jpg");
 }
 nav{
  width:600px;
  background-color:cadetblue;    
  position:absolute;
 }
 ul{
  list-style:none;    
  padding:0;
  margin:0;
  width:100%;
 }
 
 ul li{    
  float:left;    
 }
 
 a{
  text-decoration:none;
  display:block;
  padding:10px;    
  color:white;
  font-weight:bold;    
 }
 
 
 ul li:hover{
  background-color:powderblue;
  color:black;
 }
 
 ul ul li a{
  padding:5px 10px;
 }
 
 ul ul{
  display:none;
  position:absolute;
  background-color:powderblue;
  clear:both;
  left:0;
  width:98%;
  padding:1%;    
  margin:0px;
 }
 ul ul li a:hover{
  background-color:#62D7DB;
  -moz-border-radius:15px;
 }
 ul li:hover ul{
  display:block;
  z-index:101;
 }
 div {clear:both;position:relative;
  top:90px;
  
 }

create accordin style with jquery

2011-11-16T01:42:00.001+06:00

Create accordin style with jquery is very easy task. This post show this how to create it. For this we need to learn simple jquery. Accordin style is used for huge content in a little space and navigate easily. It is now used more in news and information in the webside sidebar. Now lets start to create it.

Hide Example Show Example

Download

Final output of accordin style

Create a accordin style with jquery

Now start coding to create accordin style with jquery. For this we need css,html and jquery file. the sample file structure is like.

accordin-style/
 accordin-style.html
 style.css
 accordin.js
 title.jpg
 arrow-accordin.jpg

Create this file

accordin-style.html

<html> 
 <head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
  <script type="text/javascript" src="accordin.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
  <h1>A simple accordin</h1>

  <div class="click">Accordin style 1</div>
  <p>
   Create accordin style with jquery.  Create accordin style with jquery.  Create accordin style with jquery.  Create accordin style with jquery.  Create accordin style with jquery.  .Create accordin style with jquery.  Create accordin style with jquery. 
  </p>
  
  <div class="click">Accordin style 2</div>
  <p>
   Create accordin style with jquery.  Create accordin style with jquery.  Create accordin style with jquery.  Create accordin style with jquery.  Create accordin style with jquery.  .Create accordin style with jquery.  Create accordin style with jquery. . Create accordin style with jquery.  Create accordin style with jquery.  Create accordin style with jquery.  Create accordin style with jquery.  Create accordin style with jquery.  .Create accordin style with jquery.  Create accordin style with jquery. 
  </p>
  <div class="click">Accordin style 3</div>
  <p>
   Create accordin style with jquery.  Create accordin style with jquery.  Create accordin style with jquery.  Create accordin style with jquery.  Create accordin style with jquery.  .Create accordin style with jquery.  Create accordin style with jquery. 
  </p>
  <div class="click">Accordin style 4</div>
  <p>
   Create accordin style with jquery.  Create accordin style with jquery.  Create accordin style with jquery.  Create accordin style with jquery.  Create accordin style with jquery.  .Create accordin style with jquery.  Create accordin style with jquery. 
  </p>
  <div class="click">Accordin style 5</div>
  <p>
   <b>Step 1</b><br/>
   Create accordin style with jquery.  Create accordin style with jquery.  Create accordin style with jquery.  Create accordin style with jquery.  Create accordin style with jquery.  .Create accordin style with jquery.  Create accordin style with jquery. .
   <br/><br/>
   <b>Step 2</b><br/>
   Create accordin style with jquery.  Create accordin style with jquery.  Create accordin style with jquery.  Create accordin style with jquery.  Create accordin style with jquery.  .Create accordin style with jquery.  Create accordin style with jquery. 
  </p>
  <div class="click">Accordin style 6</div>
  <p>
   Create accordin style with jquery.  Create accordin style with jquery.  Create accordin style with jquery.  Create accordin style with jquery.  Create accordin style with jquery.  .Create accordin style with jquery.  Create accordin style with jquery. 
  </p>
 </body>
</html>

accordin.js

$(document).ready(function(){
  $(".click:first").addClass("active");
  $("p:first").css("display","block");
  $(".click p:not(:first)").hide();

  $(".click").click(function(){
   $(this).next("P").slideToggle("slow").siblings("p:visible").slideUp("slow");
   $(this).toggleClass("active");
   $(this).siblings(".click").removeClass("active");

  });
 });

style.css

 body{
  margin:0 auto;
  width:600px;
  background:url("title.jpg");
 }
 h1{
  color:white;
  padding:10px;
 }
 .click{
  display:block;  
  color:#4c4c4c;
  padding:2%;
  margin-top:1px;  
  background: white url("arrow-accordin.jpg") no-repeat right 10px;
  cursor:pointer;
  font-weight:bold;
  
 }
 p{
  display:block;
  padding:2%;
  //background-color:#f1f1f1;
  background:#ABD9BA;
  margin:0;
  display:none;
  color:dimgray;
  border-top:5px solid green;
 }
 
 .active{ 
  background: white url("arrow-accordin.jpg") no-repeat right -40px;
  display:block;
  
 }

PHP date tutorial with example

2011-11-15T23:49:00.001+06:00

When need to show date in webpages, what we do?. How to do this? For this not go far. PHP has more functions to show date in php. This post show the details about date in php.For this we need to learn the syntax of PHP date symbols. This post provide the list of php date symbols.

Hide Example Show Example

PHP date function

In phpto show date we need to learn about php date. In php there has a function to call date adn some functions to settings php date function. Now see this functions

date()
mktime()
date_default_timezone_set()

Now show date we create a example.

<?php
 echo date("Y/m/d") . \n";
 echo date("Y.m.d") . "\n";
 echo date("Y-m-d");
?>

here date functions has some parameter date.

date(Y/m/d) means date(Year/month/day)
date(Y.m.d) means date(Year.month.day)
date(Y-m-d) means date(Year-month-day)

See what meanings of this date parameters, a chart is listed below in the bottom.

Some examples of date() formatting.

<?php 
 // Mountain Standard Time (MST) Time Zone

 $date = date("F j, Y, g:i a");                 // March 10, 2001, 5:16 pm
 $date = date("m.d.y");                         // 03.10.01
 $date = date("j, n, Y");                       // 10, 3, 2001
 $date = date("Ymd");                           // 20010310
 $date = date('h-i-s, j-m-y, it is w Day');     // 05-16-18, 10-03-01, 1631 1618 6 Satpm01
 $date = date('\i\t \i\s \t\h\e jS \d\a\y.');   // it is the 10th day.
 $date = date("D M j G:i:s T Y");               // Sat Mar 10 17:16:18 MST 2001
 $date = date('H:m:s \m \i\s\ \m\o\n\t\h');     // 17:03:18 m is month
 $date = date("H:i:s");                         // 17:16:18
?>

If u can not understant waht time zone is it. You can define it by a php date function. A example is shown below.

<?php 
 echo(date_default_timezone_get());        //get the default time zone 
 date_default_timezone_set('UTC');    // set the default timezone to use. Available since PHP 5.1 
?>

mktime() function returns the Unix timestamp for a date. This timestamp contains the number of seconds between the Unix Epoch (January 1 1970 00:00:00 GMT) and the time specified.
Syntax is shown below.

 mktime(hour,minute,second,month,day,year,is_dst)

How to use it.

<?php
 $tomorrow = mktime(0,0,0,date("m"),date("d")+1,date("Y"));
 echo "Tomorrow is ".date("Y/m/d", $tomorrow);
?>

To show previousday, today and nextday we use mktime() function

 
<?php
 $tomorrow  = mktime(0, 0, 0, date("m")  , date("d")+1, date("Y"));
 $lastmonth = mktime(0, 0, 0, date("m")-1, date("d"),   date("Y"));
 $nextyear  = mktime(0, 0, 0, date("m"),   date("d"),   date("Y")+1);
?>

Format of PHP date() function

Date functions
week
d	01 to 31	Day of the month, 2 digits with leading zeros
D	Mon, Tue, Wed, Thu, Fri, Sat, Sun	A textual representation of a day, three letters
j	1 to 31	Day of the month without leading zeros
l	Sunday through Saturday	(lowercase 'L') A full textual representation of the day of the week
z	0 through 365	The day of the year (starting from 0)
N	1 (for Monday) through 7 (for Sunday)	ISO-8601 numeric representation of the day of the week (added in PHP 5.1.0)
S	st, nd, rd or th	English ordinal suffix for the day of the month, 2 characters st (1st), nd (2nd), rd (3rd) or th (4th). Works well with j
w	0 (for Sunday) through 6 (for Saturday)	Numeric representation of the day of the week
W	42 (the 42nd week in the year)	ISO-8601 week number of year, weeks starting on Monday (added in PHP 4.1.0)
Month
F	January through December	A full textual representation of a month, such as January or March
m	01 through 12	Numeric representation of a month, with leading zeros
M	Jan through Dec	A short textual representation of a month, three letters
n	1 through 12	n Numeric representation of a month, without leading zeros
t	28 through 31	Number of days in the given month
Year
L	1 leapyear 0 not leapyear	Whether it's a leap year 1 if it is a leap year, 0 otherwise.
o	1999 or 2003	ISO-8601 year number. This has the same value as Y, except that if the ISO week number (W) belongs to the previous or next year, that year is used instead. (added in PHP 5.1.0)
Y	1999 or 2010	A full numeric representation of a year, 4 digits
y	99 or 10	A two digit representation of a year
Time
a	am or pm	a Lowercase Ante meridiem and Post meridiem
A	AM or PM	Uppercase Ante meridiem and Post meridiem
B	000 through 999	Swatch Internet time
g	1 through 12	12-hour format of an hour without leading zeros
G	0 through 23	24-hour format of an hour without leading zeros
h	01 through 12	h 12-hour format of an hour with leading zeros
H	00 to 24	24 hours
i	00 to 59	Minutes with leading zeros
s	00 through 59	Seconds, with leading zeros
u	654321	Microseconds (added in PHP 5.2.2)
Time Zone
e	UTC, GMT, Atlantic/Azores	Timezone identifier (added in PHP 5.1.0)
I	1 if Daylight Saving Time, 0 otherwise.	(capital i) Whether or not the date is in daylight saving time
O	+0200	Difference to Greenwich time (GMT) in hours
P	+02:00	Difference to Greenwich time (GMT) with colon between hours and minutes (added in PHP 5.1.3)
T	EST, MDT ...	Timezone abbreviation
Z	-43200 through 50400	Timezone offset in seconds. The offset for timezones west of UTC is always negative, and for those east of UTC is always positive.
Full Date / Time
c	2004-02-12T15:19:21+00:00	ISO 8601 date (added in PHP 5)
r	Thu, 21 Dec 2000 16:01:07 +0200	RFC 2822 formatted date
U		Seconds since the Unix Epoch (January 1 1970 00:00:00 GMT) See also time()

zoom a image from image gallery like google

2011-11-15T22:43:00.001+06:00

This post show how to zoom a image when hover a image. In google image search, when we hover an image this image will simply zoom. This is sometimes necessary for image gallery. This works done by html, css and some jquery lines. Now lets start the techniques to learn.

Hide Example Show Example

Download

Final output of zoom a image screenshot

Zoom a image from a gallery when hovering the image

Now start coding to create a zoom image for gallery. For this we need css,html and jquery file. the sample file structure is like.

image-zoom/
 image-zoom.html
 style.css
 zoom.js
 dot-zoom.jpg
 sha.jpg

Create this file

image-zoom.html

<html>
 <head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
  <script type="text/javascript" src="zoom.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css"/>
 </head>
 
 <body>

  <h1>Image zoom</h1>

  <div id="content">
   <div class="box">
    <img src="sha.jpg">
   </div>
   <div class="box">
    <img src="sha.jpg">
   </div>
   <div class="box">
    <img src="sha.jpg">
   </div>
   <div class="box">
    <img src="sha.jpg">
   </div>
   <div class="box">
    <img src="sha.jpg">
   </div>
   <div class="box">
    <img src="sha.jpg">
   </div>
   <div class="box">
    <img src="sha.jpg">
   </div>
   <div class="box">
    <img src="sha.jpg">
   </div>
   <div class="box">
    <img src="sha.jpg">
   </div>
   <div class="box">
    <img src="sha.jpg">
   </div>
   <div class="box">
    <img src="sha.jpg">
   </div>
   <div class="box">
    <img src="sha.jpg">
   </div>
   <div class="box">
    <img src="sha.jpg">
   </div>
   <div class="box">
    <img src="sha.jpg">
   </div>
   <div class="box">
    <img src="sha.jpg">
   </div>
   <div class="box">
    <img src="sha.jpg">
   </div>
   <div class="clear"></div>
  </div>
 </body>
</html>

zoom.js

$(document).ready(function(){
 
 $(".box img").hover(function(){   
  $(this).animate({"width":"200px","top":"-20px","height":"200px","left":"-20px"});
  $(this).css({"position":"absolute","z-index":"101"});
 },function(){
  $(this).stop(100);
  $(this).animate({"width":"100%","top":"0px","height":"120px","left":"0px"});
  $(this).css({"position":"relative","z-index":"100"});
 }); 
 
});

style.css

 body{
  width:600px;
  margin:0 auto;
  background:url("dot-zoom.jpg");
 }
 #content{
  width:100%;
  
 }
  h1{
  padding:10px;
  color:white;
 }
 .box{
  width:23%;
  float:left;
  margin:1%;    
  height:120px;
  position:relative;
  text-align:center;    
 }
 #content img{
  width:100%;    
  height:120px;
  border:2px solid #CD5616;    
 }

 .clear{
  clear:both;
 }

PHP Object Oriented Tutorial

2011-11-15T02:33:00.001+06:00

Object-oriented programming is a style of coding where a large project can complete simple way with less coding. When a class is created under a project then it call again and again. This post show the tutorial of basic Object Oriented Php (OOP). After creating a class it can be called again and again and do less coding after creating a class. So OOP is most importatnt and useful. If you want to shitch from PHP to Objected Oriented PHP, let's start to learn.

Hide Example Show Example

Some php tutorial to learn OOP

This tutorial contains some parts of tuorial

Object Oriented PHP - Class and object
Object Oriented PHP - Interface and abstractor
Object Oriented PHP - Constructor and destructor
Object Oriented PHP - Inheritance
Object Oriented PHP - Visivility
Object Oriented PHP - Some common keywords
some magic words in php

Object oriented php tutorial - Constructor & Destructor

2011-11-15T01:49:00.001+06:00

PHP 5 allows developers to declare constructor methods for classes. Classes which have a constructor method call this method on each newly-created object, so it is suitable for any initialization that the object may need before it is used.

Hide Example Show Example

Class constructor and Class destructor

Constructor methods are automatic run when a class is instantiate. Parent constructors are not called implicitly if the child class defines a constructor. In order to run a parent constructor, a call to parent::__construct() within the child constructor is required.

<?php
 class Vehicle {
 
  public $brand="Motorola";
  private $color="Black";
  protected  $price="$1200";
  
  function __construct() {
     echo "Welcome to vehicle shop";
  }
 }

 class Bike extends vehicle{
    function __construct() {
     parent::__construct();
   echo "The subclss constractor";
    }
 }

 $obj = new Vehicle();
 $obj = new Bike();
?>

Now we see a constructor with parameter. When we create a parameterized contructor we need to create an instantiate with parameters value.

<?php
 class Vehicle {
 
  public $brand="Motorola";
  private $color="Black";
  protected  $price="$1200";
  
  function __construct(&a) {
     $a=$this->price;
     echo "Price of the bike is : ".$a;
  }
 } 

 $obj = new Vehicle("1200");
 
?>

After creating a construct we need this to destruct after working this. PHP 5 introduces a destructor concept similar to that of other object-oriented languages, such as C++. The destructor method will be called as soon as there are no other references to a particular object, or in any order during the shutdown sequence.

<?php
 class Vehicle {
    function __construct() {
     echo  "Constructor loaded\n";
     $this->name = "Vehicle";
    }

    function __destruct() {
     echo "Destroying " . $this->name . "\n";
    }
 }

 $obj = new Vehicle();
?>

Like constructors, parent destructors will not be called implicitly by the engine. In order to run a parent destructor, one would have to explicitly call parent::__destruct() in the destructor body.
The destructor will be called even if script execution is stopped using exit(). Calling exit() in a destructor will prevent the remaining shutdown routines from executing.
Destructors called during the script shutdown have HTTP headers already sent. The working directory in the script shutdown phase can be different with some SAPIs (e.g. Apache). Attempting to throw an exception from a destructor (called in the time of script termination) causes a fatal error.

In previous PHP version the construcor is define by class name. But there has no way to call any destructor.

<?php
 class Vehicle {
  public function Vehicle() {
   // treated as constructor in PHP 5.3.0-5.3.2
   // treated as regular method as of PHP 5.3.3
  }
 }
?>

Object Oriented Php Tutorial - some keywords

2011-11-15T00:22:00.001+06:00

In object Oriented php we need to learn some basic keywords like static keyword, parent, final keyword , Scope Resolution Operator (::) and $this variable. This post clear about this keywords with some examlpes.

Hide Example Show Example

constant, Static, $this, parent , final keyword and Scope Resolution Operator (::)

Whats the meanings of this keywords. Short info are here.

static : Declaring class properties or methods as static makes them accessible without needing an instantiation of the class. A property declared as static can not be accessed with an instantiated class object (though a static method can).
$this : this varibale declare the own class.
parent : This valiable decale the parent calss so that a child can access its parent methods.
final : PHP 5 introduces the final keyword, which prevents child classes from overriding a method by prefixing the definition with final. If the class itself is being defined final then it cannot be extended.

parent & $this keyword

This example show how to call parent keyword and when it use. When a class inherited another class then the child class need to access the parent function. Then ths parent keyword use for access paarent methods. And $this keyword is use for own classes variable.

<?php
 class Vehicle { 
  public $brand="Motorola";
  public $color="Black";  
  public  $model="dg12";
  
  function info() {
    echo "Model no.  ".$this->model."\n";
    echo "Brand no.  ".$this->brand."\n";
    echo "Color no.  ".$this->color."\n";
  }
 }

 class Bike extends vehicle{
    function bikeDetails() {
     public  $price="$1200";
     parent::info();
     echo "Price :   ".$this->price."\n";
    }
 }
 
 $obj = new Bike();
 
 echo $obj->bikeDetails();
?>

Final keyword in php

The final keyword, which prevents child classes from overriding a method by defining before the method or class. Properties cannot be declared final, only classes and methods may be declared as final.

<?php
 class Bike {
    public function test() {
     echo "vehicle::test() called\n";
    }
    
    final public function moreTesting() {
     echo "vehicle::moreTesting() called\n";
    }
 }

 class car extends vehicle {
    public function moreTesting() {
     echo "car::moreTesting() called\n";
    }
 }
// Results in Fatal error: Cannot override final method Bike::moreTesting()
?>

const keyword in php

Define constant value php uses the const keyword.

<?php
 class vehicle {
  const CONST_VALUE = 'Vehicle shop';
 }
 echo vehicle::CONST_VALUE;
 
 
 $classname = 'vehicle';
 echo $classname::CONST_VALUE; // As of PHP 5.3.0
?>

Scope Resolution Operator (::)p

The Scope Resolution Operator (also called Paamayim Nekudotayim) or in simpler terms, the double colon, is a token that allows access to static, constant, and overridden properties or methods of a class. When referencing these items from outside the class definition, use the name of the class. As of PHP 5.3.0, it's possible to reference the class using a variable. The variable's value can not be a keyword (e.g. self, parent and static). Paamayim Nekudotayim would, at first, seem like a strange choice for naming a double-colon. However, while writing the Zend Engine 0.5 (which powers PHP 3), that's what the Zend team decided to call it. It actually does mean double-colon - in Hebrew!

From outside the class

<?php
 class MyClass {
  const CONST_VALUE = 'A constant value';
 }

 $classname = 'MyClass';
 echo $classname::CONST_VALUE; // As of PHP 5.3.0

 echo MyClass::CONST_VALUE;
?>

From inside the class

<?php
 class OtherClass extends MyClass{
  public static $my_static = 'static var';

  public static function doubleColon() {
   echo parent::CONST_VALUE . "\n";
   echo self::$my_static . "\n";
  }
 }

 $classname = 'OtherClass';
 echo $classname::doubleColon(); // As of PHP 5.3.0

 OtherClass::doubleColon();
?>

when call a parent method

<?php
 class MyClass{
  protected function myFunc() {
   echo "MyClass::myFunc()\n";
  }
 }

 class OtherClass extends MyClass{
  // Override parent's definition
  public function myFunc()
  {
   // But still call the parent function
   parent::myFunc();
   echo "OtherClass::myFunc()\n";
  }
 }

 $class = new OtherClass();
 $class->myFunc();
?>

Static keyword in php

<?php
 class vehicle {
  const CONST_VALUE = 'Vehicle shop';
 }
 class car extends vehicle{
  public static $my_static = 'static var';

  public static function doubleColon() {
   echo parent::CONST_VALUE . "\n";
   echo self::$my_static . "\n";
  }
 }

 $classname = 'car';
 echo $classname::doubleColon(); // As of PHP 5.3.0

 echo car::doubleColon();
?>

Synatx for declaring static. But when we use static. Yes it is a good thing, when we not need to institiate a class to access anything.

<?php
 class vehicle {
  public static function aStaticMethod() {
   // ...
  }
 }

 vehicle::aStaticMethod();
 $classname = 'vehicleo';
 $classname::aStaticMethod(); // As of PHP 5.3.0
 ?>

See a complete example where we use static keyword, so we need not to create any instantiate of a classes.

<?php
 class Foo{
  public static $my_static = 'foo';

  public function staticValue() {
   return self::$my_static;
  }
 }

 class Bar extends Foo{
  public function fooStatic() {
   return parent::$my_static;
  }
 }


 echo Foo::$my_static . "\n";

 $foo = new Foo();
 echo $foo->staticValue() . "\n";
 echo $foo->my_static . "\n";      // Undefined "Property" my_static 

 echo $foo::$my_static . "\n";
 $classname = 'Foo';
 echo $classname::$my_static . "\n"; // As of PHP 5.3.0

 echo Bar::$my_static . "\n";
 $bar = new Bar();
 echo $bar->fooStatic() . "\n";
 ?>

Object Oriented Php Tutorial - Inheritance

2011-11-15T00:20:00.001+06:00

Inheritance is a well-established programming principle, and PHP makes use of this principle in its object model. This principle will affect the way many classes and objects relate to one another. For example, when you extend a class, the subclass inherits all of the public and protected methods from the parent class. Unless a class overrides those methods, they will retain their original functionality. This is useful for defining and abstracting functionality, and permits the implementation of additional functionality in similar objects without the need to reimplement all of the shared functionality.

Hide Example Show Example

Object Inheritance

Probably the greatest feature of the PHP OOP model is Inheritence. Inheritence is the ability of php to extend classes (child classes) that inherit the charactaristics of the parent class. The resulting object of an extend class has all the charactaristics of the parent class, plus whatever is in the new child, or extended class. In this instance we will extend the vehicle class and add a motorcyle. A motorcycle is still a vehicle and shares many of the same attributes such as price, drive etc. But a motorcycle has some unique features that a car does not.

Syntax of object Inheritance in php. the keyword "extends" denoted that it inherited other class. In the below example the "Bike" class inherited the class "Vehicle". In the inherited example we define that the child class is inherited the parent class.

<?php
 class Vehicle {
 
 }

 class Bike extends Vehicle{
   //inherited the Vehilce class
 }
?>

<?php
 class Vehicle {
 
  public $brand="Motorola";
  private $color="Black";
  protected  $price="$1200";
 
  function shop(){
   echo "Welcome to ".$this->color." vehicle";
  }
  
  public function showPrice(){
   echo "Price : ".$this->price;
  }
  
  private function showBrand(){  
   echo "Brand : ".$this->brand;
  } 
 }

 class Bike extends vehicle{
    public $size="120M";
    public $model="ds20";
    
    function bikeInfo(){
   parent::shop();                  //call the parent function in child class
   echo "Model : ".$this->model;
   echo "Price : ".$this->price;
   echo "Color : ".$this->color;      
   // color is the properties of Vehicle class which are private. So outside the vehilce class can not access.
   echo "Brand : ".$this->brand;
    }
 }

 $obj1 = new Vehicle();
 $obj = new Bike();
 
 echo "info : ".$obj->bikeInfo()

?>

See a clear and large exmple where classes are inherited from another class

<?php
 class Vehicle {
 
  public $brand="Motorola";
  public $color="Black";
  public  $price="$1200";
 
  function shop(){
   echo "Welcome to ".$this->color." vehicle";
  }
  
  public function showPrice(){
   echo "Price : ".$this->price;
  }
  
  public function showBrand(){  
   echo "Brand : ".$this->brand;
  } 
 }

 class Bike extends vehicle{
    public $size="120M";
    public $model="ds20";
    
    public function bikeInfo(){
   parent::shop();                  //call the parent function in child class
   echo "Buy a Bike.\n";
   echo "Model : ".$this->model;
   echo "Price : ".$this->price;
   echo "Color : ".$this->color;  
   echo "Brand : ".$this->brand;
    }
 }
 
 class car extends vehicle{
    public $size="220M";
    public $model="SS66";
    
    public function carInfo(){
   parent::shop();                  //call the parent function in child class
   echo "Buy a Car.\n";
   echo "Model : ".$this->model;
   echo "Price : ".$this->price;
   echo "Color : ".$this->color;
   echo "Brand : ".$this->brand;
    }
 }
 
 class pazero extends car{
    public $speed="160km";
    public $range="100";
    
    public function pazeroInfo(){
   echo "Buy a Pazero.\n";
   parent::carInfo();                  //call the parent function in child class
   
   echo "Speed : ".$this->speed; 
   echo "Range : ".$this->range;
    }
 }

 $obj1 = new Vehicle();
 $obj2 = new Bike();
 $obj3 = new car();
 $obj6 = new pazero();
 
 
 echo "info : ".$obj6->pazeroInfo()

?>

Object oriented php tutorial - Interface & Abstract class

2011-11-15T00:07:00.003+06:00

This post describe two different keyword uses in php. Abstract and Interface this two thing uses special purposes in php. Lets start learn this topic with some example. PHP 5 introduces this things.

Hide Example Show Example

This tutorial contains some parts of tuorial

Class, class properties and object in php
Interface and abstractor in php
Constructor, destructor and function overloading in php
Inheritance in php
Constant, properties, functions and Visivility in php
static, $this,final keyword,Scope Resolution Operator (::) in php
some magic words in php

Interface

Interfaces are defined using the interface keyword, in the same way as a standard class, but without any of the methods having their contents defined. All methods declared in an interface must be public, this is the nature of an interface.

When we create an interface in interface we remember this things.

A class cannot implement two interfaces that share function names, since it would cause ambiguity.
Interfaces can be extended like classes using the extends operator.
The class implementing the interface must use the exact same method signatures as are defined in the interface. Not doing so will result in a fatal error.
Its possible for interfaces to have constants. Interface constants works exactly like class constants except they cannot be overridden by a class/interface that inherits it.
All methods declared in an interface must be public
All methods in the interface must be implemented within a class
An interface can not contain any variable
In interface any method can not contain body

Syntax of create an interface :

<?php
 interface a{
  public function foo();
 }
?>

A interface can contain methods and constant.
In php an interface can inherited another interface with the keyword "extends" and a class can inherited an interface with the keyword "implement".

<?php
 interface a{
  public function foo();
 }

 interface b extends a{
  public function baz(Baz $baz);
 }

 class c implements b{
  public function foo(){
  }

  public function baz(Baz $baz){
  }
 }
 class d implements b{
  public function foo(){
  }

  public function baz(Foo $foo){
  }
 }
?>

An interface can not contain any variable. if contain any variable it can not run and display error.

<?php
 interface info{
  $a=10;
   function bikeInfo();
   function bikePaperInfo();
  }
?>


//Parse error: syntax error, unexpected T_VARIABLE, expecting T_FUNCTION in E:\taslim server\EasyPHP-5.3.3.1\www\login\interface.php on line 3

Any method can not contain body in their methods.

<?php
 interface info{  
   function bikeInfo();
   function bikePaperInfo(){
    echo "Information";
   }
  }
?>

//Fatal error: Interface function info::bikePaperInfo() cannot contain body in E:\taslim server\EasyPHP-5.3.3.1\www\login\interface.php on line 6

See another example that has no error when compile the script.


<?php
 interface info{
  function bikeInfo();
  function bikePaperInfo();
 }
 class vehicle implements info{

  public $color="Black";
  public $model="20ds";
  public $price="$120";  
  public $brand="Honda";
  public $warrenty="1 month";


  public function __construct(){
    echo "Information of this Vehicle.\n";
  }

  public function showPrice(){
   echo "This vehicle costs ".$this->price."\n";
  }
 
  public function bikeInfo(){
    echo "Model no.  ".$this->model."\n";
    echo "Brand no.  ".$this->brand."\n";
    echo "Color no.  ".$this->color."\n";
  }

  public function bikePaperInfo(){
   echo "Warrenty : ".$this->warrenty;  
  }

  
 } 

 $object = new vehicle;


 echo $object->bikeInfo();
 echo $object->bikePaperInfo();
?>

Without any error it runs easily.

see another exmple and see what errors occured when below script is compile.


<?php
 interface info{
  function bikeInfo();
  function bikePaperInfo();
 }
 
 // This will not work
 // Fatal error: Class BadTemplate contains 1 abstract methods
 // and must therefore be declared abstract (info:: bikePaperInfo)
 class vehicle implements info{

  public $color="Black";
  public $model="20ds";
  public $price="$120";  
  public $brand="Honda";
  public $warrenty="1 month";


  public function __construct(){
    echo "Information of this Vehicle.\n";
  }

  public function showPrice(){
   echo "This vehicle costs ".$this->price."\n";
  }
 
  public function bikeInfo(){
    echo "Model no.  ".$this->model."\n";
    echo "Brand no.  ".$this->brand."\n";
    echo "Color no.  ".$this->color."\n";
  }
  
  
 } 

 $object = new vehicle;


 echo $object->bikeInfo();
 
?>

We learn that when implement an interface, all methods in an interface must contain in implemented classes. Above example shows that the vehicle class not have bikePaperInfo() methods which is contain in info Interface.

Abstract

An abstract class is a class that cannot be instantiated on its own. You cannot create a new object from it. An abstract class also has at least one abstract class. One thing must remeber that, if child class inherited the abstract class , the abstract function must be contain in child class. The fuction will declared in child class with same visibility. If you declare any function protected in abstract class then the child class will be the declare the function same as protected.

When we create an abstract, we must remember below things.

Abstract class can not instantiated.
Abstract clas must have at least one abstract method.
abstract class can not contain anything without method.

<?php
 Abstract class Bike {  
 
  abstract protected function shop();  
  abstract public function showPrice();
  
  private function showBrand(){  
   echo "Brand of the Bike.";
  } 
 }

 class Car extends Bike{
  protected function shop(){
   echo "";
  }  
  public function showPrice(){
   echo "";
  } 
   
 }

 $obj = new Car();
?>

An abstract class can contain constant or variable;

<?php
 Abstract class Bike {  
 
  abstract protected function shop();  
  abstract public function showPrice();
  
  private function showBrand(){  
   echo "Brand of the Bike.";
  } 
 }

 class Car extends Bike{
  protected function shop(){
   echo "";
  }  
  public function showPrice(){
   echo "";
  } 
   
 }

 $obj = new Car();
?>

A abstract class can contain constant but can not contain any variable.

<?php
 Abstract class Bike {  
  const a="aa";
  $a=10;
  abstract protected function shop();  
  abstract public function showPrice();
  
  private function showBrand(){  
   echo "Brand of the Bike.";
  } 
 }
?>


//Parse error: syntax error, unexpected T_VARIABLE, expecting T_FUNCTION in E:\taslim server\EasyPHP-5.3.3.1\www\login\abstract.php on line 4

Object Oriented Php tutorial - visibility

2011-11-14T23:22:00.001+06:00

This post show and learn about the visibilty of PHP class properties. Previous post we learn about class and object. Creating class and declare its properties we need to learn about properties visibilty clearly. Class visivility (public, Private and protected).

Hide Example Show Example

Previous post, creating class and object we found some keyword Public, private and protected. First we learn what and why we use this. Then we apply in Php class.

This tutorial contains some parts of tuorial

Object Oriented PHP - Class and object
Object Oriented PHP - Interface and abstractor
Object Oriented PHP - Constructor and destructor
Object Oriented PHP - Inheritance
Object Oriented PHP - Visivility
Object Oriented PHP - Some common keywords
some magic words in php

Visivility of PHP variable

In php threre has three keyword to visible or not visiable a class properties.

Public
private
protected

public : Public can access from anywhere from the script. It can access inside or ouside of the class.
Private : Private can accesss from the entire class. Not outside of the class or inherited class.
Protected : protected can access from the entire class and inherited class.

By default, all class members are public. This means if you do not declare a property or method within the class, it will be public. It is good practice to declare the visibility of class members for the sake of readability for yourself and others. It is much easier for another programmer to see your intentions. This will also future proof your scripts should access modifiers be deprecated.

Public class members (properties and methods) are available through-out the script and may be accessed from outside the class as we demonstrated in our car class. Lets create a simple new class to demonstrate class properties visibility.

See the exampe to declare visibility for class properties .

<?php
 class Vehicle{
  const constant="Vehicle Shop";
  public $brand="Motorola";
  private $color="Black";
  protected  $price="$1200";
 
  function shop(){
   echo "Welcome to ".$this->color." vehicle";
  }
  
  public function showPrice(){
   echo "Price : ".$this->price;
  }
  
  private function showBrand(){  
   echo "Brand : ".$this->brand;
  } 
 } 
?>

Now create an object to see that waht can access outside the class or inside the class.

<?php
 class Vehicle{  
  public $brand="Motorola";
  private $color="Black";
  protected  $price="$1200";
 
  function shop(){
   echo "Welcome to ".$this->color." vehicle";
  }
  
  public function showPrice(){
   echo "Price : ".$this->price;
  }
  
  private function showBrand(){  
   echo "Brand : ".$this->brand;
  } 
 }
 
 $class = new Vehicle(); 
 echo $class->shop()."\n";
 echo $class->showPrice()."\n";
 echo $class->showBrand()."\n";    // the showBrand() is not accessible outside the class
?>

Abobe example create some properties with visibility. Public functions are access from outside the class. Create an object of vehicle class and access public fuction. But here can not access the private function "showBrand()". The all Public functions can access from anywhere in this script. But protected prperties can not access outside the class, but can access from child class. the private is not access outside class.

<?php
class Vehicle{  
  public $brand="Motorola";
  private $color="Black";
  protected  $price="$1200";
 
  function shop(){
   echo "Welcome to ".$this->color." vehicle";
  }
  
  private function showPrice(){
   echo "Price : ".$this->price;
  }
  
  protected function showBrand(){  
   echo "Brand : ".$this->brand;
  } 
 }

 class Bike extends  Vehicle{
  function info(){
   echo "Inforamtion of Vehicle.\n";     
  } 
 }
 
 $class = new Bike(); 
 echo $class->shop()."\n";
 //echo $class->showPrice()."\n"; 
 //Fatal error: Call to private method Vehicle::showPrice() from context '' in E:\taslim server\EasyPHP-5.3.3.1\www\login\visible1.php on line 28
 
 echo $class->showBrand()."\n"; 
 //Fatal error: Call to protected method Vehicle::showBrand() from context '' in E:\taslim server\EasyPHP-5.3.3.1\www\login\visible1.php on line 31
 
 echo $class->info()."\n";
?>

Now create another example to see it clearly. For this we need to learn PHP inheritance. If you don't know how inheritace works click here

<?php
 class Vehicle{  
  public $brand="Motorola";
  private $color="Black";
  protected  $price="$1200";
 
  function shop(){
   echo "Welcome to ".$this->color." vehicle";
  }
  
  private function showPrice(){
   echo "Price : ".$this->price;
  }
  
  protected function showBrand(){  
   echo "Brand : ".$this->brand;
  } 
 }

 class Bike extends  Vehicle{
  function info(){
   echo "Inforamtion of Vehicle.\n";
   parent::shop();
   parent::showPrice();
   //Fatal error: Call to private method Vehicle::showPrice() from context 'Bike' in E:\taslim server\EasyPHP-5.3.3.1\www\login\visible6.php on line 24
   parent::showBrand();  
  } 
 }
 
 $class = new Bike(); 
 echo $class->info()."\n";
?>

Object oriented php tutorial - class and object

2011-11-14T22:56:00.001+06:00

Hide Example Show Example

Object Oriented PHP ( OOP )

OOP : Object-oriented programming is a style of coding that allows developers to group similar tasks into classes. This model organized around "objects" rather than "actions" and data rather than logic. Historically, a program has been viewed as a logical procedure that takes input data, processes it, and produces output data.OOP was first invented for the purpose of physical modelling in the Simula-67. Object Oriented Programming (OOP) is a programming concept that treats functions and data as objects.Object-oriented programming (OOP) is a programming paradigm using "objects".Object Oriented Programming techniques may include features such as data abstraction, encapsulation, messaging, modularity, polymorphism, and inheritance. Many modern programming languages now support OOP.

The concepts and rules used in object-oriented programming provide these important benefits:

The concept of a data class makes it possible to define subclasses of data objects that share some or all of the main class characteristics. Called inheritance, this property of OOP forces a more thorough data analysis, reduces development time, and ensures more accurate coding.
Since a class defines only the data it needs to be concerned with, when an instance of that class (an object) is run, the code will not be able to accidentally access other program data. This characteristic of data hiding provides greater system security and avoids unintended data corruption.
The definition of a class is reuseable not only by the program for which it is initially created but also by other object-oriented programs (and, for this reason, can be more easily distributed for use in networks).
The concept of data classes allows a programmer to create any new data type that is not already defined in the language itself.

PHP started Object oriented Programming.Starting with PHP 5, the object model was rewritten to allow for better performance and more features. This was a major change from PHP 4. PHP 5 has a full object model.Among the features in PHP 5 are the inclusions of visibility, abstract and final classes and methods, additional magic methods, interfaces, cloning and typehinting. PHP treats objects in the same way as references or handles, meaning that each variable contains an object reference rather than a copy of the entire object.

This tutorial contains some parts of tuorial

Class, class properties and object in php
Interface and abstractor in php
Constructor, destructor and function overloading in php
Inheritance in php
Constant, properties, functions and Visivility in php
static, $this,final keyword,Scope Resolution Operator (::) in php
some magic words in php

Defination of Class and Object

Object : Simply put, an oject is a bunch of variables and functions all lumped into a single entity. The object can then be called rather than calling the variables or functions themselves. Within an object there are methods and properties. The methods are functions that manipulate data withing the object. The properties are variables that hold information about the object.

Class : A class is the blueecho for your object. The class contains the methods and properties, or the charactaristics of the object. It defines the object. Lets just start with some examples to see how it all pieces together. We will use a vehicle as our object. All vehicles share similar charactaristics, eg: number of doors, they are painted some color, they each have a price. All vehicles do similar things also, drive, turn left, turn right, stop etc. These can be described as functions, or in OOP parlance, methods. So, the class holds the definition, and the object holds the value. You declare class in PHP by using the class keyword.

Class and object declare in php

In object Oriented php coding style is structure way. Some php keywords are same.Now see the how to start php script.

<?php
 
?>

This tags define that inside any content in the tag is php script. Otherwise can not detect php script or do not work the script. Now create a class in the php script.
Syntax of the Class declare in php.

<?php
 class vehicle{
  //class content goes here
 }
?>

Like php, in Object oriented php can comment same way. See this two way.

<?php
 class vehicle{
  //singla line comment
  /* multiple
  line comment */
 }
?>

After creating a class now we learn which and what a class content and how to define them. In a class there has variable and functions which are called prperties in php. Now declare a Class with class properties

<?php
 class vehicle{
  public $brand;
  private $color;
  protected  $price;
  public $as = <<<EOD
     hello world
     EOD;
 
  function shop(){
   echo "Welcome to car vehicle shop.";
  }
  
  public function showDetails(){
   echo "Details of vehilce Information";
  }
  
  private function showShape(){  
   echo "Shapes of the car.";
  } 
 }
?>

To declare the properties or value of the properties,ther has some rules. See the below example to check some valid properties

<?php
 class SimpleClass{
    // invalid property declarations:
    public $var1 = 'hello ' . 'world';
    public $var2 = <<<EOD
      hello world
      EOD;
    public $var3 = 1+2;
    public $var4 = self::myStaticMethod();
    public $var5 = $myVar;

    // valid property declarations:
    public $var6 = myConstant;
    public $var7 = array(true, false);

    // This is allowed only in PHP 5.3.0 and later.
    public $var8 = <<<'EOD'
      hello world
      EOD;
 }
?>

Here all variables and the functions are class properties.

Now create a instiated of a class is a simple task. Create an object from class

<?php
 class vehicle{
  public $brand;
  private $color;
  protected  $price
 
  function shop(){
   echo "Welcome to car vehicle shop.";
  }
  
  public function showDetails(){
   echo "Details of vehilce Information";
  }
  
  private function showShape(){  
   echo "Shapes of the car.";
  } 
 }
 
 
 $object= new vehicle;   //create instiatate or object
 
 echo $object->shop();
 echo $object->showDetails();
 
?>

From the above class there we find some keywords like public, private, protected. They are called for any class properties to acess other thins.

 
 public : this keyword define any variable or function is public.
 private : this keyword define any variable or function is private.
 protected : this keyword define any variable or function is private.

Illustrator toolbar tutorial collection

2011-11-14T16:53:00.001+06:00

Web designer or graphics designer need graphics software to design their graphics.Adobe illustrator is most popular software. In websites there are huge resources to learn adobe illustrator. Here I collect some Adobe Illustrators toolbar tutorial. If you learn this tutorial you can be a expert graphics designer.

Hide Images Show Images

This picture shows the basic illustrator silver which is located the left side in illustrator. Some shortcuts denotes the toolbaar panel name.

  p  Pen tool
  v  Selecyion tool
  G  Gradient tool
  SHIFR+R  Wrap tool
  R  Rotate tool
  B  Brush Tool
  T  Type tool
  U   Mesh tool

Illustrator toolbar tutorial links

Illustrator Tools Name	Necessary Links
All tools basic learn	iit.bloomu.edu
Pen tool	vector.tutsplus.com
Selection tool	klethegr8.blogspot.com klethegr8.blogspot.com
Type tool	vector.tutsplus.com
Text tool	visualdesigncore.com
Rotate character	jacorre.com
Rotate tool	creativebits.org
Distort text	jacorre.com
Shape tool	vectordiary.com veerle-v2.duoh.com bittbox.com
Brush tool	vector.tutsplus.com
Color and stroke	vectordiary.com klethegr8.blogspot.com klethegr8.blogspot.com
Gradient tool	klethegr8.blogspot.com
Blend tool	vector.tutsplus.com bittbox.com
Pathfinder tool	vector.tutsplus.com vectordiary.com bittbox.com jacorre.com klethegr8.blogspot.com klethegr8.blogspot.com
flower tool	pinkzap.com
Mesh tool	aivault.com
Gradient mesh	learnit2.com
Warp tool	vectordiary.com
Clipping mask	biorust.com klethegr8.blogspot.com
Opacity mask	shapeshed.com klethegr8.blogspot.com
Patterns	bittbox.com
Live trace	tutorial9.net
Adobe illustrator shortcuts	webdesignerwall.com
	bittbox.com

Illustrator beginner tutorial collection

2011-11-14T14:04:00.001+06:00

This post collects huge tutorial which must need for web designers who want to design their web pages decorable.. Web graphichs desighner and other graphics desighner also learn this graphics design. Most useable and most popular graphics software Adobe Illustrator beginner tutorial and toolbar tutorial are collected here.

Hide Images Show Images

Illustrator tutorial site

Illustartor Toolbar basic tutorial

Here is a visual interface with the Adobe Illustrator toolbar. Roll the mouse over the tool names to see their description. Names that appear in red have flyouts. This means there are more tools available. Click on these names to learn about them.

Adobe.com

This is complete manual of adobe illustrator from its own websites. Here you get all the topics related about illustrator. If you can not find any tutorial in the web, come here and learn your topics.

learn Illustrator cs3 in 30 days

This is the most popular Illustrator training course created for beginners interested to learn Adobe Illustrator. Each lesson will take around 20 mins to complete and you will be able to learn the basic fundamental techniques in 30 days. The course is updated to work with Illustrator CS to Illustrator CS5. No matter what version you installed, you will definitely benefit from this Illustrator crash course. The lessons are kept easy and simple so that anyway can be confident in using Illustrator after this crash course!

Illustrator tools tutorial

	Adobe illustrator shortcuts Here are 26 Illustrator shortcuts that can help you to speed up productivity. I use most of them (in fact, I can't work without them). Most of shortcuts listed in this article aren't documented in the software, so keep reading and you’re sure to find at least one new trick to put up your sleeve
	Illustrators pen tool the comprehensive guide from vector.tutsplus.com If you use Adobe Illustrator, then it’s almost certain that you use the Pen tool when creating your paths. This comprehensive guide aims to introduce or remind you of features, shortcuts, and methods for working with what is arguably Adobe’s most essential tool.
	Illustrators type tool a comprehensive introduction from vector.tutsplus.com Type is an essential part of Illustrator; whether you’re desktop publishing, designing logos, or using type for image building, you’ll be reaching for the Type Tool. This guide comprehensively covers the essentials of what is a huge amount of Illustrator functionality, which is type.
	Adobe Illustrator CS3 Tutorial: Selection Tools Selecting shapes, objects, points etc is of primary importance when working in Illustrator. Knowing which selection tool is appropriate to use can prove quite time saving. So we will briefly discuss the selection possibilities available in Illustrator.
	Drawing basic shapes In this lesson, we will look at how to use the shape tools to draw our basic shapes in illustrator. But before we start, we will look at how to select a basic shape so that you have no problems in selecting and editing shapes in Illustrator.
	Illustrator abstract vector art This Adobe Illustrator tutorial will show you how to create an abstract art that can be used for wallpaper, website header or background images. It is fun and easy. You will learn how to use the Warp and Twirl tool to create abstract vector art in minutes. Users with basic skills should be able to handle this tutorial. To continue on this tutorial, you need Adobe Illustrator CS or above.
	Get more natural adjustments with the illustrator reshape tool lustrator’s “Reshape” tool can come in very handy in a variety of situations. In a nutshell, the Reshape tool allows you to drag a single point on a path and it tries to retain the overall shape of the entire path, while you only move the one anchor point.
	Simple organic shapes in illustrator way
	Warp text inside a heart shape tutorial In this tutorial, we will see how we can warp the text around a shape or a object. This technique will show you how to combine the text wrap and heart shape together to achieve the text wrap effect. This tutorial will concentrate on how to use Envelope Distort feature in Illustrator to achieve this effect. You will also learn some new techniques along the way. For this to work effectively, first we have to decide on a suitable shape. Secondly, we will need to decide what word to warp inside the shape. Normally a short phrase works best. And finally, we need a thick and fancy font to pull the trick.
	Adobe Illustrator CS3 Tutorial: 'Everything about Gradients' A nice Gradient Fill can really make the difference and enhance your artwork. I will try to explain in detail all about Gradients. An alternative way of coloring an object with a solid fill, is choosing a gradient. A gradient fill consists of more than a single color. It takes a minimum of two colors gradually blending from one to the other.
	A comprehensive guide illustrators paintbrush tool and brush panel Illustrator’s Paintbrush Tool (B) and Brush Panel are some of it’s most powerful tools. With the Paintbrush Tool (B) and Brush Panel you can dress up your vector paths into compelling flourishes, patterns, tapered edges, and more. In this tutorial, I will break down the basics of the Paintbrush Tool and Brush Panel and show you how to create your own brushes.
	Illustrators blend tool a comprehensive guide from vector.tutsplus.com In Adobe Illustrator, the Blend Tool can help you create impressive color blends. But there is more to it than you might know. This comprehensive guide can help you unlock your creative potential and teaches the features, shortcuts, and in depth methods that the Blend Tool has to offer.
	Fun with illustrator blend tool
	All about transformation in adobe illustrator n this tutorial you will learn everything you ever wanted to know about one of the most powerful Adobe Illustrator Tools – Transformation. Discover how it works, learn multiple ways of transforming objects, study the tools of transformation, and many other useful techniques.
	Creating compounds path in illustrator Almost all objects in over daily life can be built with basic shapes. By drawing shapes using our basic shape tool, we can use compound path to combine or subtract shapes to create what we need. What is Compound Path? Compound path is made out of at least two objects. You can add, subtract and intersect shapes to form a compound path.
	Pathfinder explained
	A comprehensive guide to the pathfinder panel You’ve probably used the Pathfinder panel to combine shapes and make new ones. But do you often find yourself clicking (and undoing) each icon in the panel until you get the look you want? Wouldn’t it be easier to take some time and learn exactly what each function does? Here’s a look at the über-useful Pathfinder panel. The Pathfinder Effects, which are found under the Effects menu, are covered in video format in this tutorial.
	A comprehensive guide to the pathfinder panel part 2 screencast You’ve probably used the Pathfinder panel to combine shapes and make new ones. But do you often find yourself clicking (and undoing) each icon in the panel until you get the look you want? Wouldn’t it be easier to take some time and learn exactly what each function does? Here’s a look at the über-useful Pathfinder panel. The Pathfinder Effects, which are found under the Effects menu, are covered in video format in this tutorial.” – Cheryl Graham
	Using the pathfiner and align tool in illustrator Whenever I get a question from a user asking me “how did you draw this?”, I often have to answer that I’ve used the Pen tool. The Pen tool is probably the hardest tool to learn in Illustrator. It just takes time to master it fluently, but once you do, you have this freedom to create. Sometimes we can get a long way using only shape tools like the ellipse, polygon, rectangle or rounded rectangle. With a bit of creative thinking and some simple aligning in combination with Pathfinder’s powerful tools you might just achieve the perfect drawing in no time. Here is another Illustrator tutorial where I show you to draw a simple icon without the use of the Pen tool…
	Mastering illustrator effects Have you been missing out the Illustrator Effects? Did you know it is a powerful tool for creating symmetrical shapes or adding texture to vector paths? For example, with just one simple effect, you can turn a polygon path into a flower shape. You can also make paths look sketchy with the Scribble effect. Read this tutorial to learn how to save time by using Illustrator Effects and work more efficient.
	An introduction to illustrators color tools Colors are everywhere around us and every time we deal with them in digital or print media they are represented by several color models. These color models are based on the way the colors tones are mixed.
	Working with color and strokes
	Stroke illustrator explain in detail the Stroke Panel and its functions. You use the Stroke panel to control whether a line is solid or dashed, the dash sequence if it is dashed, the stroke weight, the stroke alignment, the miter limit, and the styles of line joins and line caps. So let's see all that in detail.
	Multiple strokes in illstartor
	Quick tip working with symbols in adobe illustrator A symbol is an art object that you can store in a document, and reuse multiple times in your artwork. Using symbols can save time and greatly reduce the size of your files. Here’s a quick overview of how they work..
	command shape in illustrator
	free watercolor brushes and tutorial A custom bursh create like watercolor. It needs some steps to create this brush. lets start, we will need to set the some of the Pencil Tool’s setting. Double-click on the Pencil Tool (n) in the Tools Panel to bring up the Pencil Tool Preferences dialog.
	Opacity masks Opacity Masks are all over the web. Here's a short tutorial on how they work in Illustrator and how you can use them in your designs. This tutorial describe about the opacity mask clearly and how to create and use it.
	create a spiral ornament symbol in illustrator
	spraying symbols in adobe illustrator
	How to create a custom brush in illustrator It would actually be pretty hard to make this tutorial any more detailed. Making custom Illustrator brushes couldn’t be easier. However, there are a couple things you do need to know first. There are 4 types of brushes that you can create in Illustrator. (Calligraphic, Art, Scatter, and Pattern) I will be showing you how to make an Art Brush. I haven’t explored the other 3 in as much detail, but as soon as I have I will post about it. For now, I will show you how to make an art brush, and you can experiment with the other brush types in the same fashion, the only differences are settings, and how the brushes act when applied.
	Glossy button
	Create a stamp
	101 illustrator tips and tricks
	duplicate a shape using the rotate tool The rotate tool is one of the most important tools in Illustrator. To duplicate a shape using the rotate tool, first select the shape if not selected and then select the rotate tool. Place the rotation point on the desired position and rotate the shape while holding Alt (hold Shift + Alt to get a perfectly 45D angle) to make the first copy and the fun part; press Ctrl-D (windows) Cmd-D (mac) repeatedly. By doing so, you’ll get an equal rotation spacing/distance between the shapes.

marquee tutorial in html and javascript

2011-11-14T01:18:00.001+06:00

Latest news in various websites are used in marquee way. This post learn this marque tag in html. How it works and how to define it. More recent uses , more attractive things and highlighted anything marquee is sometimes necessary. It is simple task and simple way to declare.

Hide Example Show Example

Taslim is a good boy.

how to decalre Marquee

           Syntax : <marque></marquee>

Other attributes:

           behaviour=scroll || slide || alternate
           direction= up || right || down || left
           scrollamount= any number

On Javascript:

           stop = this.stop();
           start = this.start()

Marquee in style

This simple marquee syntax will more feturable using javascript tag. When hover on th marquee the marquee is stop and when remobue over the marquee the marquee is again run.

 <marquee behavior="scroll" direction="right" scrollamount="25" onmouseover="this.stop()" onmouseout="this.start()">
  Taslim is a good boy.
 </marquee>

Css properties tutorial collection

2011-11-14T00:55:00.001+06:00

This post gathers a large collection of css tutorials. There are huge links divided by two links. Css properties and others tutorial collections are gathered. Heer css,csss2 and css3 properties tutorials are collected also and if you want to try this properties you need to download latest browses. Now see the list of css tutorials.

Hide Example Show Example

You need latest browsers to display correctly all contents.So,please download browsers latest virsion or see the browsers section and download latest browsers.

Css properties tutorial

Css3 properties:

border-radius, box-shadow, text-shadow, transform, border-image, multiple-column, multiple-background, transition, animation, gradient,Box-decoration, box-lines, grid, hypernate, image-orientation, marque ,opacity, overflow-style, perspective, resize, rest, rotaion, word-break, word-wrap, voice, text-wrap and more.

See the full list of CSS, CSS2, CSS3 meiert

CSS3 properties Introduce
Properties Name	Links
RGBA	webdesignerwall.com codenique.com 24ways.org
box-shadow	css3.info webdesignerwall.com css.flepstudio.org
box-sizing	helephant.com
Clip Resize image white space cursor display	webdesignerwall.com
Border	cssportal.com designshack.co.uk
Border image	css3.info
Border-radius	css3.info cssportal.com webdesignerwall.com css.flepstudio.org the-art-of-web.com
word-wrap	css3.info
Text-shadow	cssportal.com webdesignerwall.com css.flepstudio.org css3.info
Multi column	w3.org cssportal.com designshack.co.uk css.flepstudio.org zenelements.com
Multiple background	css.flepstudio.org group.mind-productions.com
Transform	zenelements.com css3.bradshawenterprises.com the-art-of-web.com
Transitions	net.tutsplus.com css3.bradshawenterprises.com the-art-of-web.com
Opacity	css.flepstudio.org
Font	zenelements.com css.flepstudio.org
Animations.	css3.bradshawenterprises.com
Gradient	net.tutsplus.com linear and radial gradient with syntax and ricks the-art-of-web.com Radial gradient the-art-of-web.com Linear grdient
CSS propries	reference.sitepoint.com
Media	net.tutsplus.com quick-tip-a-crash-course-in-css-media-queries
10-css3-properties	net.tutsplus.com 10 css3 properties you need to be familiar-with
css selector
30 useful tutorials	noupe.com css3 exciting functions and features 30 useful tutorials
css3 power properties	net.tutsplus.com getting to work to with css3 power tools
30 CSS selectors	net.tutsplus.com the 30 css selectors you must memorize
CSS selector	help.dottoro.com
Css3 pseudeo classes	456bereastreet.com
Selector tutorial	javascriptkit.com
CSS 1 2	help.dottoro.com Properries list,selectors,reference and tutorials
CSS 1, 2, 3	meirit.com
CSS 1, 2, 3	htmlpedia.org
CSS3 propertis	cssportal.com CSS3 all propetie list and syntax with examples
CSS3 properties	w3schools.com Contains good tutorials but css3 is not well designed now
CSS properties	pageresource.com

Some css tutorial must need to learn

Some usefull tutorial collections are collected here so that easily can learn.

CSS3 tutorial collections
Name	links
Latest css3 reference from w3.org	w3.org
12 common css mistakes web developers make	sixrevisions.com
css properties	pageresource.com
Css properties	meiert.com
100 exceedingly useful css tips and tricks	sixrevisions.com
The basics of css3 RGBA,text-shadow, border-radius, box-shadow with screentshots	webdesignerwall.com
5 simple but useful css properties	webdesignerwall.com
	queness.com
css3-rounded-image-with-jquery	webdesignerwall.com
css3-dropdown-menu	webdesignerwall.com Demo
47 amazing css3 animation demos
how to css large background
css decorative gallery
	cssglobe.com
	smashingmagazine.com
tooltip techniqus only by css3	css3.info
css only tooltips	sixrevisions.com
47 amazing css3 animation demos	webdesignerwall.com
jquery tutorials for designers	webdesignerwall.com
how to css large background	webdesignerwall.com
Overflow	net.tutsplus.com
5 techniques to acquaint you with css 3	net.tutsplus.com
11 classic css techniques made simple with css3	net.tutsplus.com
10 interview questions	tutorialfeed.org
how to create a basic vertical css dropdown menu	css.flepstudio.org
page layout	csscreator.com
css3 techniques you should know	sixrevisions.com
how to design a form	net.tutsplus.com
	css3watch
kreatives webdesign mit css3 transition und transforming bringen bewegung ins spiel	webstandard.kulando.de
box-shadow-curl	matthamm.com
beautiful css3 search form	webdesignerwall.com
5 simple but useful css properties	webdesignerwall.com
sexy html list tricks	perishablepress.com/
create a beautiful looking custom dialog box with jquery and css3	queness.com
css3 rounded image with jquery	webdesignerwall.com
coding up a web design concept into html css	line25.com
css3 flexible ui avoid recutting ui graphics for mobile	blog.seanmartell.co
css decorative gallery	webdesignerwall.com
Css properties	blooberry.com
3 easy and fast css techniques for faux image	cssglobe.com
push your web design into the future with css3	smashingmagazine.com
getting to work to with css3 power tools	net.tutsplus.com
the easiest way to create vertical text with css	net.tutsplus.com
quick tip mimic equal columns with css3 gradients	net.tutsplus.com
how to build a kick butt css3 mega drop down menu	net.tutsplus.com
quick tip pure css reflections	net.tutsplus.com
quick tip multiple borders with simple css	net.tutsplus.com
quick tip the multi column css3 module	net.tutsplus.com
quick tip practical css shapes	net.tutsplus.com
how to build a lava lamp style navigation menu	net.tutsplus.com
quick tip pure css text gradients	net.tutsplus.com

color unit and length unit in html and css

2011-11-14T00:41:00.001+06:00

Sometimes many user face trouble using the correct unit inhtml and css. Because there are more way to support this units. This post describe the foramat and the more ways of declaring units. And whats effetc and difference between units. This all units which are descbied, these is very necessary thing for html and css learners.

If you want to animated float menu you can learn this tutorial creating float menu using jquery

Hide Example Show Example

In this post we describe two things

Length unit
color unit

Length unit for css and html

What is the relation of difference of units and which units we use , when use. See tis chart and understant their effects and wahy and where these units used.

Length Unit

Units	Description
%	( percentage )
in	( inch ) 1 in = 2.54 cm
cm	( centimeter ) 1 cm = 10 mm
mm	( milimeter )
em	1em = default font size 1em = 100% font size
ex	One ex is the x-height of a font (x-height is usually about half the font-size)
pt	( point ) 1 pt = 1/72 in
pc	( pica ) 1 pc = 12 pt
px	( pixels ) a dot on the computer screen 1 em = default font size suppose your default font-size is 12 px 2 em = 24 px 2em = 200%

After learning about the unit measurement we are ready to apply now.

Lets try these examp,e to understant.

In html Deafult font is :

Bangladesh is a wonderful country.

Now we use this measurement of various text and see the effects.

Units value	Output
Percentage font-size: 120%;	Bangladesh is a wonderful country
Inch font-size: .6in;	Bangladesh is a wonderful country
Centimeter font-size: .6cm;	Bangladesh is a wonderful country
Milimeter font-size : 6mm;	Bangladesh is a wonderful country
em font-size: 2em;	Bangladesh is a wonderful country
ex font-size: 6ex;	Bangladesh is a wonderful country
Point font-size: 30pt;	Bangladesh is a wonderful country
Pica font-size: 1pc;	Bangladesh is a wonderful country
Pixel font-size: 20px;	Bangladesh is a wonderful country

Color unit or color measurement in HTML & CSS

These part we will learn about the color unit in css and html.
There are two ways to measure the color. one is hexadecimal way and others is rgb value way.

These ways also use two ways. See below chart of syntax

Synatx	Dsciption
#RRGGBB	Standard Html 6 digit Hexadecimal RGB(Red-Green-Blue) value
#RGB	Shorthand of RGB value
rgb(R,G,B)	Each value conatains 0-255 R-(0-255) G-(0-255) B-(0-255)
rgb(R%,G%,B%)	Each value conatains 0-100% R-(0-100%) G-(0-100%) B-(0-100%)

Now see the effetcs of Html Color unit measurement Example

Synatx	Output
#RRGGBB background-color:#FF0000 color:#000000;	Bangladesh
#RGB background-color:#FF0000 color:#000000;	Bangladesh
rgb(R,G,B) background-color: rgb(255,0,0); color: rgb(255,255,255);	Bangladesh
rgb(R%,G%,B%) background-color:rgb() color:;	Bangladesh
Color Name background-color: red color: white;	Bangladesh

How to get file extension in php

2011-11-13T23:16:00.001+06:00

In this post we will learn How to get the file extension using php. If you have some files of different types like "tas.jpg", "tas.doc"; and needt to find the extions like .jpg , .doc. It is easily done in php. In php there has many ways to find the file extension.

Hide Example Show Example

Here include some concept to get the file extension using php

Using patinfo() function

To find file extension using php pathinfo() function is more useful.
In this method file extension can found from url and if has many dots.

<?php
$a="http://www.yahoo.com/taslim.html.php";
function file_extension($filename){
    $path_info = pathinfo($filename);
    return $path_info['extension'];
} 

//output
//php
?>

Using pathinfo() we also get the parts of url or file location

<?php
 $path_parts = pathinfo('/www/htdocs/inc/lib.inc.php');

 echo $path_parts['dirname'], "\n";
 echo $path_parts['basename'], "\n";
 echo $path_parts['extension'], "\n";
 echo $path_parts['filename'], "\n"; // since PHP 5.2.0
?>

Using explode()

<?php
    $filename = "any.file.name.jpeg";
   
    $extension = end(explode(".",$filename));
    
    echo $extension;

?>

//output
//jpeg

Using function we use the explode()

<?php
    $filename = "any.file.name.jpeg";
    function file_ext($file)
  return end(explode(".",$filename));
    }
    echo file_ext($filename);

?>

//output
//jpeg

Using sub srting

uses string manipulation to get the extension and grabs the dot(.) character.

<?php
 $filename = 'filename.blah.txt';
 
 function getFileExtension($filename){
   return substr($filename, strrpos($filename, '.'));

 }
 echo getFileExtension($filename);
?>

//output
//txt

<?php
 $filename = 'filename.blah.txt'; 
 $ext = substr(strrchr($filename, '.'), 1);
  
 echo $ext;
?>

<?php
 $filename = 'filename.blah.txt'; 
 
 function get_file_extension($file_name){
  return substr(strrchr($file_name,'.'),1);
 }
  
 echo get_file_extension($file_name);
?>

Get the file extension using PHP regular expression

<?php
 $filename = 'filename.pdf';
 $ext = preg_replace('/^.*\.([^.]+)$/D', '$1', $filename);
 echo  $ext;
?>

$lt;?php
 $file = 'sad.asdfasdf.asdfa.sdf.ffff';

 preg_match('/\.[^\.]+$/i',$file,$ext);

 echo $ext[0];

// outputs: 
//.ffff
?>

$lt;?php
 $filename="tas.pdf";
 $exts = split("[/\\.]", $filename);
 $n = count($exts)-1;
 $ext = $exts[$n];
 echo $ext;

?>

<?php
 $filename = 'filename.pdf';
 function file_ext($filename) {
  if( !preg_match('/\./', $filename) ) return '';
  return preg_replace('/^.*\./', '', $filename);
 }
 echo  file_ext($filename);
?>

Get the file extension using PHP regular expression

<?php
$filenames = array(
    'test.jpg',
    'longfilename.html',
    'PHP Tutorial from Nashruddin.pdf',
    'unusual.name.for.a.file.extension',
    'another, weird, file.jpeg',
    'my favorite song.mp3'
);
 
foreach ($filenames as $filename) {
    preg_match("/\.([^\.]+)$/", $filename, $matches);    
    print $matches[1] . '
';
}
 
/* will print:
jpg
html
pdf
extension
jpeg
mp3 */
?>

Insert, update and delete using php and mysql

2011-11-13T23:15:00.001+06:00

In this post we will learn a sample projects using php and mysql. Using these we create a simple data management system of insert update and delete more data. A large data managenment system requires more security to enter data and an authenciation system so that anybody can not access without permission. Now we will simply shsow the insert, update and delete data using php and mysql. In the previous post we show how to create a websites authenciation Create a site authenciation or login, register, logout using php and mysql

Hide Example Show Example

Download

Final output of this sample projects

The final output of Insert update delete using php and mysql. The sample screenshots of this project.

Insert update and delete files structure

There are several files needed to completed a webpage data entry. We createinsert, update and delete pages. Some files of this sample projects are listed below

insert-delete-update/
 css/
  style.css
 admin/
  dbconfig.php
 img/
  add.png
  del.png
  update.png
 data.php
 insert.php
 delete.php
 update.php
 
And finaly include a sql file.

create a admin database configure file

Now we will create a file where server information are located. If anybody want to create their insert delete update projects they must re configure the file as their database configuration.

admin/dbconfig.php

<?php
 
 $server_name="127.0.0.1";   // server name
 $server_username="root";    // server username
 $server_password="";        // server password
 $server_database="taslim1"; // database name
 
 $connect=mysql_connect($server_name,$server_username,$server_password) or die ("Server error : Server information is wrong.");
 $data=mysql_select_db($server_database) or die ("Database error : Database not found in your server.");

?>

Create front or data page

Create front page of this samples where all information and links are located here to easily navigate. Here all data are shows and update insert and delete links are found here.

data.php

<?php include("admin/dbconfig.php"); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US">
 <head>
  <title>A simple DATA Management system</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
   </head>
 <body>
  <div id="header">
   <h1>A simple DATA Management system</h1>
  </div>
  <div id="navbar">   
   <a href="data.php">Data</a> 
  </div>
  <div id="content">
   <table cellpadding="0" cellspacing="0">    
    <tr>     
     <td ><a href="insert.php" class="add"><img src='img/add.png'/> </a>
     <td><a href="insert.php" class="add"> Insert New Data</a>
    </tr>
   </table>
   <table class="data" cellpadding="0" cellspacing="0">
    <caption>User Data</caption>
    <tr>     
     <td width="30%">Email</td>
     <td width="15%">User</td>
     <td width="15%">Password</td>
     <td width="15%">State</td>
     <td width="15%">Country</td>
     
     <td width="5%" ><img src='img/update.png'/></td>
     <td width="5%" ><img src='img/del.png'/></td>
    </tr>
     <?php
      $select=mysql_query("select * from userinfo");
      while($row=mysql_fetch_array($select)){
       echo "<tr>        
        <td>".$row['email']."</td>
        <td>".$row['username']."</td>
        <td>".$row['password']."</td>
        <td>".$row['state']."</td>
        <td>".$row['country']."</td>
       
        <td><a href='update.php?id=".$row['id']."'><img src='img/update.png' alt='update' title='update'/></a></td>
        <td>";?>
        <a href="delete.php?id=<?php echo $row['id']; ?>"  onclick="return confirm('Are you sure you want to delete?')">
        <img src='img/del.png' alt='delete' title='delete'></a></td>
     <?php echo "
       </tr>";
      }
     ?> 
</table>     
    
    
  </div>
  <div id="footer">
   Copyright @ taslim. Anybody can use it for personal and commercial.
  </div>
  
 </body>
</html>

Create data add Page

Crete a insert file where the a user can add data. Here necessary inforamtion box are added. Because to add data many information are required. If anybody want to know more inforamtion they can add input box as their own way..

insert.php

<?php include("admin/dbconfig.php"); ?>

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US">
 <head>
  <title>A simple DATA Management system</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  
 </head>
 <body>
  <div id="header">
   <h1>A simple DATA Management system</h1>
  </div>
  <div id="navbar">
   <a href="index.php">Home</a>   
   <a href="data.php">Data</a> 
  </div>
  <div id="content">
   <form action="" method="post">
   <table class="register" cellpadding="0" cellspacing="0">
    <caption>Register</caption>
    <tr>
     <td>Email*</td>
     <td>
     <?php $a=1; ?>
      <input type="text" name="email" value="<?php if(isset($_POST['email'])) echo $_POST['email']; ?>"/>
      <?php
       if(isset($_POST['register'])){
           $email_pattern = "/^[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,5}$/";
        $email = $_POST['email'];         
        if (preg_match($email_pattern,$email)) {}        
        else{
         echo "<br/><span class='error'>Email must be valid.</span>";
         $a=0;         
        }
       }
      ?>
     </td>
    </tr>
    <tr>
     <td>Username*</td>
     <td><input type="text" name="username" maxlength="12" value="<?php if(isset($_POST['username'])) echo $_POST['username']; ?>"/>
      <?php
       if(isset($_POST['register'])){
           $username_pattern = "/^[a-zA-Z]{4,12}$/";
        $username = $_POST['username'];         
        if (preg_match($username_pattern,$username)) {}        
        else{
         echo "<br/><span class='error'>Username only contains letters. others are prohibited.</span>";
         $a=0;         
        }
       }
      ?>
     </td>
    </tr>
    <tr>
     <td>Password*</td>
     <td><input type="password" name="password" maxlength="12" value=""/>
      <?php
       if(isset($_POST['register'])){
           $password_pattern = "/^[a-zA-Z0-9._-]{4,12}$/";
        $password = $_POST['password'];         
        if (preg_match($password_pattern,$password)) {}        
        else{
         echo "<br/><span class='error'>Password must be contain combination of 4 to 12 letters,digits,dot and hiphen.</span>";
         $a=0;         
        }
       }
      ?>
     </td>
    </tr>  
    <tr>
     <td>Password</td>
     <td><input type="password" name="password1" maxlength="12" value=""/>
      <?php
       if((isset($_POST['password1']))!=(isset($_POST['password1']))){
        echo "<br/><span class='error'>Password did not match.</span>";
        $a=0;         
       }
      ?>
     </td>
    </tr>     
    <tr>
     <td>Privience/city</td>
     <td><input type="text" name="state" maxlength="12" value="<?php if(isset($_POST['state'])) echo $_POST['state']; ?>"/></td>
    </tr>
    <tr>
     <td>Country</td>
     <td>
      <select name="country">
       <option selected="selected" value="<?php if(isset($_POST['country'])) echo $_POST['country']; ?>">
        <?php if(isset($_POST['country'])) echo $_POST['country']; else echo "Choose"; ?>
       </option>
       <option value="bangladesh">Bangladesh</option>
       <option value="pakistan">Pakistan</option>
       <option value="uk">UK</option>
       <option value="espan">Espan</option> 
       <option value="france">France</option>
       <option value="usa">USA</option>
       <option value="oters">Others</option>

      </select>
     </td>
    </tr>
    <tr>
     <td><input type="checkbox" name="agree"/>*</td>
     <td>Are you agree with our terms and policies.
      <?php
       if(isset($_POST['register'])){
        if((isset($_POST['agree']))!="selected"){
         echo "<br/><span class='error'>You must agree with our terms and policies.</span>";
         $a=0;         
        }
       }
      ?>
     </td>
    </tr>
    <tr>
     <td></td>
     <td><input type="submit" name="register" value="Register"/></td>
    </tr>
   </table>
   </form>
  </div>
  
  
<?php
 if(isset($_POST['register'])){
  $user=$_POST['username'];  
  $pass=$_POST['password'];
  $email=$_POST['email'];
  $state=$_POST['country'];
  $country=$_POST['state'];
  if($a!=0){
   $ins=mysql_query("insert into userinfo(state,country,email,username,password) values('$state','$country','$email','$user','$pass')");
   if($ins){
    echo "Your data inserted.";
   }
   else{
    echo "Error occured. try again.";
   }
  }
  else{
   echo "You must need to insert correct information.";
  }
  
  
 }

?>
  <div id="footer">
   Copyright @ taslim. Anybody can use it for personal and commercial.
  </div>
  
 </body>
</html>

Create the update Page

After creating insert page we need an update page. Where anybody can update their data as they want.

update.php

<?php include("admin/dbconfig.php"); ?>
<?php
 $id=$_GET['id'];
 
?>
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US">
 <head>
  <title>A simple DATA Management system</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  
 </head>
 <body>
  <div id="header">
   <h1>A simple DATA Management system</h1>
  </div>
  <div id="navbar">
   <a href="index.php">Home</a>   
   <a href="data.php">Data</a> 
  </div>
  <div id="content">
  
   <form action="" method="post">
   <table class="register" cellpadding="0" cellspacing="0">
    <caption>Register</caption>
    <?php
     $select=mysql_query("select * from userinfo where id='$id' "); 
      while($row=mysql_fetch_array($select)){
      
      
    ?>
    <tr>
     <td>Email*</td>
     <td>
     <?php $a=1; ?>
      <input type="text" name="email" value="<?php if(isset($_POST['email'])) echo $_POST['email']; else echo  $row['email']; ?>"/>
      <?php
       if(isset($_POST['update'])){
           $email_pattern = "/^[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,5}$/";
        $email = $_POST['email'];         
        if (preg_match($email_pattern,$email)) {}        
        else{
         echo "<br/><span class='error'>Email must be valid.</span>";
         $a=0;         
        }
       }
      ?>
     </td>
    </tr>
    <tr>
     <td>Username*</td>
     <td><input type="text" name="username" maxlength="12" value="<?php if(isset($_POST['username'])) echo $_POST['username']; else echo $row['username'];?>"/>
      <?php
       if(isset($_POST['update'])){
           $username_pattern = "/^[a-zA-Z]{4,12}$/";
        $username = $_POST['username'];         
        if (preg_match($username_pattern,$username)) {}        
        else{
         echo "<br/><span class='error'>Username only contains letters. others are prohibited.</span>";
         $a=0;         
        }
       }
      ?>
     </td>
    </tr>
    <tr>
     <td>Password*</td>
     <td><input type="password" name="password" maxlength="12" value="<?php if(isset($_POST['password'])) echo $_POST['password']; else echo $row['password'];?>"/>
      <?php
       if(isset($_POST['update'])){
           $password_pattern = "/^[a-zA-Z0-9._-]{4,12}$/";
        $password = $_POST['password'];         
        if (preg_match($password_pattern,$password)) {}        
        else{
         echo "<br/><span class='error'>Password must be contain combination of 4 to 12 letters,digits,dot and hiphen.</span>";
         $a=0;         
        }
       }
      ?>
     </td>
    </tr>  
    <tr>
     <td>Password</td>
     <td><input type="password" name="password1" maxlength="12" value="<?php if(isset($_POST['password'])) echo $_POST['password']; else echo $row['password'];?>"/>
      <?php
       if((isset($_POST['password1']))!=(isset($_POST['password1']))){
        echo "<br/><span class='error'>Password did not match.</span>";
        $a=0;         
       }
      ?>
     </td>
    </tr>     
    <tr>
     <td>Privience/city</td>
     <td><input type="text" name="state" maxlength="12" value="<?php if(isset($_POST['state'])) echo $_POST['state']; else echo $row['state'];?>"/></td>
    </tr>
    <tr>
     <td>Country</td>
     <td>
      <select name="country">
       <option selected="selected" value="<?php if(isset($_POST['country'])) echo $_POST['country']; else echo   $row['country'];?>">
        <?php if(isset($_POST['country'])) echo $_POST['country']; else echo   $row['country']; ?>
       </option>
       <option value="bangladesh">Bangladesh</option>
       <option value="pakistan">Pakistan</option>
       <option value="uk">UK</option>
       <option value="espan">Espan</option> 
       <option value="france">France</option>
       <option value="usa">USA</option>
       <option value="oters">Others</option>

      </select>
     </td>
    </tr>
    <?php 
    }
    ?>
    <tr>
     <td></td>
     <td><input type="submit" name="update" value="Update"/></td>
    </tr>
   </table>
   </form>
  </div>
  
  
<?php
 if(isset($_POST['update'])){
  $user=$_POST['username'];  
  $pass=$_POST['password'];
  $email=$_POST['email'];
  $state=$_POST['state'];
  $country=$_POST['country'];
  if($a!=0){
   $upt=mysql_query("update userinfo set email='$email',password='$pass',username='$user',state='$state',country='$country' where id='$id'");
   if($upt){
    echo "Data is updated.";
   }
   else{
    echo "Error occured. try again.";
   }
  }
  else{
   echo "You must need to insert correct information.";
  }
  
  
 }

?>
  <div id="footer">
   Copyright @ taslim. Anybody can use it for personal and commercial.
  </div>
  
 </body>
</html>

delete php

When a user infomation is inserted then this page grab all the information from the database. If any user want to delete any data as they can by this page.

delete.php

<?php include("admin/dbconfig.php"); ?>

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US">
 <head>
  <title>A simple DATA Management system</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  
 </head>
 <body>
  <div id="header">
   <h1>A simple DATA Management system</h1>
  </div>
  <div id="navbar">
   <a href="index.php">Home</a>   
   <a href="data.php">Data</a> 
  </div>
  <div id="content">  
   
    <?php
     $id=$_GET['id'];
 
  
     $del=mysql_query("delete   from userinfo where id='$id' "); 
      if($del){
       echo "Data is successfully deleted.";
      }
      else{
       echo "data is not deleted.";
      }  
      
    
    
    ?>
    
   
  </div>
  
 
  <div id="footer">
   Copyright @ taslim. Anybody can use it for personal and commercial.
  </div>
  
 </body>
</html>

Design this authenciation projects

For tableless desgin we need to design with css

css/style.css

body{
 width:790px;
 margin:0 auto;
}
#header{
 width:96%
 padding:2%;
}

#navbar{
 background:#f1f1f1;
 padding:2%;
 width:96%;
 color:darkgray;
 margin-top:60px;
}
#navbar a{
 padding:5px 10px;
 text-decoration:none;
 color:green;
}
#content{
 padding:2%;
 width:96%;
 margin:10px 0px;
 background:#f1f1f1;
 color:dimgray;
}

.box {
 width:15%;
 margin:.5%;
 padding:4.5%;
 float:left;    
 background:#f1f1f1;    
 text-decoration:none;       
 font-size:20px;
}

.box:hover{
 background:red;
}
.clear{
 clear:both;
}
#footer{
 background:#f6f6f6;
 padding:2%;
 width:96%;
 color:darkgray;
 margin-top:60px;
}

caption{
 background:green;
 color:white;
 padding:5px;
}
.data td{
 padding:5px;
}
.data tr:nth-child(2n+1){
 background:#f6f6f6;
 
}

.register{
 width:75%;
 margin:0 auto;
}
.register td{
 padding:5px;
 font-size:15px;
 color:dimgray;
}
input[type="text"],input[type="password"]{
 padding:10px;
 border:1px solid darkgray;
 width:200px;
}

input[type="submit"]{
 padding:10px 30px;
 border:1px solid darkgray;
 background:#f1f1f1;
}

.error{
 color:red;
}
select{
 text-transform:capitalize;
}
.login{
 width:60%;
 margin:0 auto;
}
.login td{
 padding:5px;
 font-size:15px;
 color:dimgray;
}

.data{
 width:100%;
}
td img{
 width:22px;
}
td a{
 cursor:pointer;
}
.add{
 text-decoration:none;
 padding:10px;
 text-align:center;
}

The database file

Here show a database qury which is used in this project.

sql file




--
-- Table structure for table `userinfo`
--

CREATE TABLE IF NOT EXISTS `userinfo` (
  `id` int(100) NOT NULL AUTO_INCREMENT,
  `state` varchar(20) NOT NULL,
  `country` varchar(10) NOT NULL,
  `email` varchar(20) NOT NULL,
  `username` varchar(12) NOT NULL,
  `password` varchar(12) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

Animated scroll to top of the page using jquery

2011-11-13T19:58:00.001+06:00

Animated to top of the page using jquery is easy and simple. Sometimes long pages need to easily navigate so that user can comfort to read whole pages if they want. This post show the scolling top of the pages. Here is the simple code given.

If you want to animated float menu you can learn this tutorial creating float menu using jquery

Hide Example Show Example

Download

Animated to top of the page

It is easily done using jquery and decorate using css. It is a simple task. Now see this how to create scolling button.

<html>
<head>
<title>Animated scroll to top of the page using jquery</title>
   <script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css"/>
   <script type="text/javascript" language="javascript">
  
   $(document).ready(function(){
         
  $(window).scroll(function () {  
   
   if($(this).scrollTop() > 500){  
    $(".demo").fadeIn();
    $(".demo").animate({top:offset},{duration:500,queue:false});  
   }
   else{
    $(".demo").fadeOut();
   }
   
   $('.demo').click(function () {
    $('body,html').animate({
     scrollTop: 0
    }, 1000);
    return false;    
   });
  });  

   });
   </script>
 
</head>
<body>
  <div id="header">
 <h1>Scrolling top of the page</h1>
  </div>
  <div class="demo"> 
 
  </div>
  <div class="text">
 <h4>Float menu</h4>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 
 <h4>Float menu</h4>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>

 
 <h4>Float menu</h4>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
 Animated scroll to top of the page using jquery<br/>
  </div>
   
</body>
</html>

style.css

After creating the upper page now decorate with css

  
  body{
   width:700px;
   margin:0 auto;
   position:relative;
   background:#193D36;
  }
  #header{
   width:100%;
   height:150px;
  }
  #header h1{
   color:white;
  }
  .demo{
   position: fixed;
   bottom: 30px;
   margin-left: -100px;
   background: url("top.png") no-repeat;
   color:white; 
   padding:0px;  
   width:60px;
   height:70px; 
   cursor:pointer; 
   display:none;   
  }  
  .text{
   width:700px;
   padding:20px;
   background:#f6f6f6;
   color:gray;
   
   
  }

ajax login system using jquery mysql and php

2011-11-13T18:54:00.001+06:00

This post show how to create ajax login system using mysql Jquery and PHP. In jquery and ajax login system it looking very good and also easily navigate. But one thing we must remember that if anybody want to work jquery or ajax validation, the same works must be done using php validation. Because some user browsers javascript is not enable. Here we show the basic ajax login system.

Hide Example Show Example

Download

Our final output screenshot

Ajax login system looking very good and easily navigate. But it is not a traft thing. We can do this easily. Here is the sample of the projects.

File structure of ajax login system

In this simple and easy project, we use jquery, php and mysql. So we need this types of files. Se the list of files of this project.

ajax login/
  css/
   style.css
  admin/
   dbconfig.php
  img/
   ajax-load.gif
  login.php
  logout.php
  login-check.php
  
  and finaly a sql file

style.css

This css file decorate our projctes.

body{
 width:600px;
 margin:0 auto;
}
#header{
 width:96%
 padding:2%;
}

#navbar{
 background:#f1f1f1;
 padding:2%;
 width:96%;
 color:darkgray;
 margin-top:60px;
}
#navbar a{
 padding:5px 10px;
 text-decoration:none;
 color:green;
}
#content{
 padding:2%;
 width:96%;
 margin:10px 0px;
 background:#f1f1f1;
 color:dimgray;
}
.clear{
 clear:both;
}
#footer{
 background:#f6f6f6;
 padding:2%;
 width:96%;
 color:darkgray;
 margin-top:60px;
}

caption{
 background:green;
 color:white;
 padding:5px;
}

input[type="text"],input[type="password"]{
 padding:10px;
 border:1px solid darkgray;
 width:200px;
}

input[type="submit"]{
 padding:10px 30px;
 border:1px solid darkgray;
 background:#f1f1f1;
 cursor:pointer;
}

.login{
 width:60%;
 margin:0 auto;
}
.login td{
 padding:5px;
 font-size:15px;
 color:dimgray;
}
#report{
 width:96%;
 padding:2%;
 background:white;
 margin:10px 0px;
 position:relative;
}
.loader{
 text-align:center;    
}
.error{
 color:red;
}
.log{
 color:green;
}

login.php

This login file create the basic form of login system and jquery animation. Here we post the login form data using jquery. So that no refresshing required for this page.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US">
 <head>
  <title>Jquery login form using ajax and php</title>
  <link rel="stylesheet" type="text/css" href="css/style.css"> 
   <script type="text/javascript"    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
   
<script language="javascript">
$(document).ready(function(){
 $("#loginForm").submit(function(){
  
  $("#report").removeClass().addClass('loader').html('<img src="ajax-load.gif">').fadeIn(1000);
  
  $.post("login-check.php",{ user_name:$('#username').val(),password:$('#password').val()},function(data){
   if(data=='yes'){
    $("#report").fadeTo(200,1,function(){     
     $(this).html('Logging in.....').addClass('log').fadeTo(900,1,function(){        
      document.location='login.php';
     });     
    });
   }
   else {
    $("#report").fadeTo(200,1,function(){      
     $(this).html('Username or password error.').addClass('error').fadeTo(900,1);
    });  
   }
        });
   return false; 
 });
 
 $("#password").blur(function(){
  $("#login_form").trigger('submit');
 });
});
</script>
  
 </head>
 <body>
  <div id="header">
   <h1>A simple jquery ajax login form</h1>
  </div>
  <div id="navbar">
   <a href="index.php">Home</a> 
   <a href="register.php">Register</a>
   <a href="data.php">Data</a>
   <?php
    if (isset($_COOKIE["cookiename"])){
      echo "User :  " . $_COOKIE["cookiename"] . "";
      echo " <a href='logout.php'>logout</a>";}
    else{
      echo "<a href='login.php'>Login</a>";
      echo " User : Guest!<br />";}
    ?>
  </div>
  <div id="report"></div>
  <div id="content">
   <form action="" method="post" id="loginForm">
   <table class="login" cellpadding="0" cellspacing="0">
    <caption>Login</caption>
    <tr>
     <td>Username</td>
     <td><input type="text" name="username" id="username" maxlength="12" value=""/></td>
    </tr>
    <tr>
     <td>Password</td>
     <td><input type="password" name="password" id="password" maxlength="12" value=""/></td>
    </tr>
    <tr>
     <td></td>
     <td><input type="submit" name="login" id="login" value="Login"/></td>
    </tr> 
    <tr>     
     <td colspan="2">If you are a new user, <a href="">click here </a></td>
    </tr>
   </table> 
  </form>   
  </div>
  
 
  <div id="footer">
   Copyright @ taslim. Anybody can use it for personal and commercial.
  </div>

login-check.php

This login check file check that user and password are valid entered in databases. After checking this file sends the login.php file "yes" or "no".

<?php
 include("dbconfig.php");
 $user_name=$_POST['user_name'];
 $pass=$_POST['password'] ; 

 $select=mysql_query("select * from userinfo where username='$user_name' AND password='$pass'");
 
 $found=mysql_num_rows($select);
 if($found>0){
  $expire=time()+60*60*24*30;
    setcookie("cookiename", $user_name, $expire);
  echo "yes";  
 }
 else{
  echo "no";
 } 
?>

logout.php

After loging the cookie file is created and see that you are logged in. Now if you want to logged out destroy the cookie.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US">
 <head>
  <title>Simple ajax login using jquery</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <style type="text/css">
   
  </style>
 </head>
 <body>
  <div id="header">
   <h1>A Simple Project of Login And Register</h1>
  </div>
  <div id="navbar">
   <a href="index.php">Home</a> 
   <a href="register.php">Register</a>
   <a href="data.php">Data</a>
              
   <?php
    if (isset($_COOKIE["cookiename"])){
      echo "User :  " . $_COOKIE["cookiename"] . "";
      echo " <a href='logout.php'>logout</a>";}
    else{
      echo "<a href='login.php'>Login</a>";
      echo " User : Guest!<br />";}
    ?>
  </div>
  <div id="content">
   <?php

    if(setcookie("cookiename","", time()-3600))
     echo "You are logged out.";
    else echo "No body are logeed";
   ?> 
   
  </div>
  <div id="footer">
   Copyright @ taslim. Anybody can use it for personal and commercial.
  </div>
  
 </body>
</html>

dbconfig.php

It is the databaase configuration file. If you want to create your own ajax login system you need to configure this page for your datase.

<?php
 
 $server_name="";
 $server_username="";
 $server_password="";
 $server_database="";
 
 $connect=mysql_connect($server_name,$server_username,$server_password) or die ("Server error : Server information is wrong.");
 $data=mysql_select_db($server_database) or die ("Database error : Database not found in your server.");

?>

sql file


--
-- Table structure for table `userinfo`
--

CREATE TABLE IF NOT EXISTS `userinfo` (
  `id` int(100) NOT NULL AUTO_INCREMENT,
  `state` varchar(20) NOT NULL,
  `country` varchar(10) NOT NULL,
  `email` varchar(20) NOT NULL,
  `username` varchar(12) NOT NULL,
  `password` varchar(12) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;



INSERT INTO `userinfo` (`id`, `state`, `country`, `email`, `username`, `password`) VALUES
(1, 'bangladesh', 'dhaka', 'mdtaslim1@yahoo.com', 'taslim', '1234'),
(2, 'bangladesh', 'dhaka', 'mdtaslim1@yahoo.com', 'taslimone', '1234');

Fixed float element using Jquery and CSS in entire webpage

2011-11-13T15:43:00.001+06:00

Fixed float menu is used in like contact us page, feedback page, menu , bookmark toolbar etc. Creating fixed float menu we use jquery and simple css. After this we decorate with css.It is not very traft only get the tricks how to create fixed float menu. This shows fixed floating menu using Jquery and CSS.

If you want to animated float menu you can learn this tutorial creating float menu using jquery

Hide Example Show Example

Download

Our final output screenshot

Fixed float menu using jquery

It is easily done using jquery and decorate using css. It is a simple task to using 2 single lines of jquery.Now see the code. It only shows the floating menu animate and scroll with the page.If you need to learn with fixed the float menu when scolling the page, you can see creating float menu using jquery

<html>
<head>
<title>the title</title>
   <script type="text/javascript"    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
   <script type="text/javascript" language="javascript">
  
   $(document).ready(function(){
 
  menuYloc =200; 
  Y=menuYloc+"px";
  $(window).scroll(function () {  
   var offset = menuYloc+$(document).scrollTop()+"px";    
   if(offset>Y){
    $(".demo").stop().css({
      position: 'fixed',
      left: '0',
      top: Y}); 
   }
   
   
  });
  

   });
   </script>   
</head>
<body>
  <div id="header">
 <h1>Fixed float menu
 <link rel="stylesheet" type="text/css" href="style.css" /></h1>
  </div>
  <div class="demo"> 
 
  </div>
  <div id="layout">
  <div class="text">
 <h4>Float menu</h4>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 <h4>Float menu</h4>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 <h4>Float menu</h4>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 <h4>Float menu</h4>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
 This posts show how to create a float menu using jquery and css  entire a webpage.<br/>
  </div>
  </div>

style.css

  body{
   min-width:900px;   
   margin:0 auto;
   position:relative;
   background:#193D36;
  }
  #header{
   width:100%;
   height:150px;
   background:#7A1616;
   margin-bottom:30px;
  }
  #header h1{
   width:700px;
   padding-top:30px;
   margin:0 auto;
   color:white;
  }  
  .demo{
   width:60px;
   position:fixed;
   left:0px; 
   
   background:url("contact.jpg") no-repeat;
   height:185px;
  }
  #layout{
   width:700px;
   margin:0 auto;
  }
  .text{
   width:700px;
   padding:20px;
   background:#f6f6f6;
   color:gray; 
  }

Creating a float menu using Jquery

2011-11-13T14:28:00.001+06:00

This posts show how to create a float menu using jquery entire a webpage. Sometimes this float menu necessary for using long webpages. So that they can navigate easily. Sometimes it also used for special cases like contact us page, feedback page, menu , bookmark toolbar etc. Creating float menu using jquery is very simple. This tutorial only shows the floating menu using

Hide Example Show Example

Download

Our final output screenshot

float menu using jquery

<html>
<head>
<title>Float menu using jquery</title>
 <link rel="stylesheet" type="text/css" href="style.css" />
   <script type="text/javascript"   src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
   <script type="text/javascript" language="javascript">  
   $(document).ready(function(){ 
      menuYloc =150; 
  $(window).scroll(function () {  
   var offset = menuYloc+$(document).scrollTop()+"px";  
   $(".demo").animate({top:offset},{duration:500,queue:false});  
  });  

   });
   </script>
</head>
<body>
  <div id="header">
 <h1>Simple float menu</h1>
  </div>
  <div class="demo"> 
 <a href="">Home</a>
 <a href="">Contact us</a>
 <a href="">About us</a>
 <a href="">Products</a>
 <a href="">Services</a> 
  </div>
  <div class="text">
 <h4>Float menu</h4>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 <h4>Float menu</h4>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 <h4>Float menu</h4>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 <h4>Float menu</h4>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
 This posts show how to create a float menu using jquery entire a webpage.<br/>
  </div>
   
</body>
</html>

style.css


  body{
   width:700px;
   margin:0 auto;
   position:relative;
   background:#193D36;
  }
  #header{
   width:100%;
   height:150px;
  }
  #header h1{
   color:white;
  }
  .demo{
   width:130px;
   position:absolute;
   left:-130px;   
  }
  .demo a{
   text-decoration:none;
   padding:10px;
   
   background:#541D1D;
   display:block;
   color:white;
   font-size:16px;
   font-weight:bold;
   border-bottom:1px solid dimgray;
  }
  .text{
   width:700px;
   padding:20px;
   background:#f6f6f6;
   color:gray;
   
   
  }

Php regular expressions tutorial for web developer

2011-11-05T13:16:00.001+06:00

In php to find any text, characters and matching as your own patterns or if anybody want there custom patterns, its all are done by using PHP Regular Expressions. Like searching , it can also does replacing words. The regular expressions tools are very important tools for web developers. It is mostly use for searchiing any text or content.

Hide Example Show Example

Regular Expressions symbol

To learn Php Regular expressions, need to learn about the basic symbol of regular expressions which are used in regular expressions. There are some symbols which must learn to complete the regular expressions. These symbols of regular expressions are listed below.

Pattern	Description
^	This( ^ ) symbol denoted started with the pattern.
$	This( $ ) symbol denoted ended with the pattern.
.	This stop ( . ) symbol denoted a single character .
?	This ( ? ) symbol denoted the precedding pattern zero or one
+	This ( + ) symbol denoted the precedding pattern one or more.
*	This ( ? ) symbol denoted the precedding pattern zero or more
\|	This symbol ( \| ) works like Boolean OR
-	This ( - ) symbol denoted a range of elements
()	This ( () ) symbol denoted the groups of patterns.
[]	This ( [] ) symbol denoted the a single pattern between this third brackets..
{min,}	This denoted to minimum characters to more characterrs
{,max}	This denoted to maximum characters
{min,max}	This denoted to minimum to maximum characters.
/i	This denoted to insensitive case characters
[Bangladesh]
\d	Matches only single digits
\D	Matching only no digits.
\w	Matches any alpha numeric character including underscore (_)
\W	Matches any non alpha numeric character excluding the underscore character
\s	Matches whitespace character

Regular Expressions symbol uses

After learning about these symbols, now you need to learn how to use these symbols and what effects. Regular expression symbols takes more effect if any symbol changes. So need to clear and ovserve it what effects take. Let's started

Pattern	Match Pattern	Not match pattern	Description
Bangladesh	Bangaldesh	Bangladesh1, Others , Dhaka	Only contains the word "Bangladesh"
^(Bangladesh)	Bangladesh is a wonderful country.	In the world, Bangladesh is situated at the southern part of Asia	Staring any sentence with word "Bangladesh"
(Bangladesh)$	We like Bangladesh.	Bangladesh is a wonderful country.	Ending with the word "Bangladesh"
^(Bangladesh)$	Bangladesh is like "Bangladesh"	Bangladesh is a wonderful country. We like Bangladesh	Starting and Ending with the word "Bangladesh"
(Bangladesh)/i	bangladesh,BanGlAdeSh	Bangladesh1	Only contain the word "Banglaadesh" with capital or samll letter
Banglades(h)*	Bangladeshhhh, Bangladesh	Banglades	Contains the letters one or more after "Banglades"
Banglades(h)+	Bangladesh, Banglades, Bangladeshh	Bangla, Banglladesh	Contains the letter zero or more time after "Banglades"
Banglades(h)?	Bangladesh, Banglades	Bangladeshhh	Contains the letter zero or one time after "Banglades"
Banglades(h){1}	Bangladesh	Bangladeshh,Bangladeh1	Contains the letter one time after "Banglades" .
Banglades(h){2,}	Bangladeshh, Bangladeshhh	Bangladesh	Contains the letter 2 or more time after "Banglades"
Bangldes(h){1,6}	Bangladesh,	Banglades, Bangladeshhhhhhhhhhhhh	Contains the letter onr or more 6 times after "Banglades"
^{5}$	tajbi	taj, taj1 , tajbir	Any five characters combination letters, symbols or digit
Bangla(desh)*			Contains "desh" one or more times after "Bangla"
Bangladesh\|Dhaka			Contains Bangladesh OR Dhaka
[Bangladesh]			Combination of letters within braces
[a-z]	a, az, ab, abc	Ab, AB	Contains any small letters
[a-zA-Z]	ab, ABCd	ab1, abc16	Contains any small and capital letter
[a-zA-Z0-9]	ab12, AbcD2	ab@,sD10!	Any digits and all capital and small letters
[a-zA-Z0-9._-]	abcd.-	adcd@	Any digits,all capital and small letters, dot, underscore and hyphen
^[a-zA-Z0-9_]{1,}$	avcd	@123456	Contains any digits,all capital and small letters, dot, underscore and hyphen with minimum 1 characters
^[a-zA-Z0-9_]{5,10}$	abcdefg, bangla	ban	Contains any digits,all capital and small letters, dot, underscore and hyphen with 5 - 10 characters
([wx])([yz])	wy,wz,xy,yz	wxyz	Combinations of wx and yz. Like wy,wz,xy,yz
([A-Z]{3}\|[0-9]{4})	dbc, 1234	abcd, 012345	Three capital letters or any 4 digits
[a-z]+	al	AB	Any small letters contains 1 or more letters
[^(a-z)]	abul, bangle	Abul, Bnagle	Satrt with any small letter
[^(az)]	abul, ziko	Abul, liko	Start with small letters a and z

Regular Expressions functions

To finding any text or any words Regular epressions is most important. But how to use it in php. In PHP there has some functions which are used for reular expressions. All of the functions, some are case sensitive checking and some are case insensitive.

Function	Description
preg_match()	The preg_match() function searches string for pattern, returning true if pattern exists, and false otherwise.
preg_replace	The preg_replace() function operates just like ereg_replace(), except that regular expressions can be used in the pattern and replacement input parameters.
eregi()	Case insensitive regular expression match
eregi_replace	Replace regular expression case insensitive
ereg()	Case sensitive regular expression match
ereg_replace	Replace regular expression
preg_split()	The preg_split() function operates exactly like split(), except that regular expressions are accepted as input parameters for pattern.
preg_grep()	The preg_grep() function searches all elements of input_array, returning all elements matching the regexp pattern.
preg_ quote()	Quote regular expression characters
preg_match_all()	The preg_match_all() function matches all occurrences of pattern in string.
stristr()

Regular expression check using php Functions

Searching or matching word using regular expression in php is a easy task.

Example : Check a word like "tajbir"

<?php
 $pattern = "/^(tajbir)$/";
 $txt = "tajbir";
  
 if (preg_match($pattern,$txt)) 
  echo "Found";
 else 
  echo "Not Found";
?>

//Output:
//Found

Searching the limited chareacters.
Example : search a word which contains only two to five characters.

<?php 
 $pattern = "/^[a-zA-Z]{2,5}$/";
 $txt = "taj";
  
 if (preg_match($pattern,$txt)) 
  echo "Found";
 else 
  echo "Not Found";
?>

//Output:
//Found

Searching chareacters and specific symbols also.
Example : A word that contains only letters and dot sign

<?php  
 $pattern = '/^[a-zA-Z.]{1,}$/';
    $txt= "Bangla.desh-";
     
    if (preg_match($pattern,$txt)) 
  echo "Found";
    else 
  echo "Not Found";
?>

//Output:
//Not Found

All characters ,digits and and combination of symbols search.
Example : A word that contains combinations 4 to 20 lettres,digits,hyphen,undescore, dot or any of the one.

<?php  
 $pattern = '/^[a-zA-Z0-9_.-]{4,20}$/';
    $txt= "Bangla.desh-";
     
    if (preg_match($pattern,$TXT)) 
  echo "Found";
    else 
  echo "Not Found";
?>

//Output:
//Found

Some common PHP regular expressions for web developers

Some regular and common used php Regular Expressions are mentioned given below.

Check any email using regular expressions by preg_match() in php

<?php
 $pattern = "/^[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,5}$/";
 $email = "tajbir@yahoo.com";
  
 if (preg_match($pattern,$email)) 
  echo "Found";
 else 
  echo "Not Found";
?>

Check any email using regular expressions by eregi() in php

 <?php   
 $pattern = "^[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,5}$";
    $email = "tajbir@yahoo.com";
     
    if (eregi($pattern,$email))
  echo "Found";
    else
  echo "Not Found";
?>

 <?php
$url = "http://komunitasweb.com/";
if (preg_match('/^(http|https|ftp)://([A-Z0-9][A-Z0-9_-]*(?:.[A-Z0-9][A-Z0-9_-]*)+):?(d+)?/?/i', $url)) {
    echo "Your url is ok.";
} else {
    echo "Wrong url.";
}  
 ?>

Wordpress title search using regular expressions

<?php
 $title  = get_the_title();
 $keys= explode(" ",$s);
 $title  = preg_replace('/('.implode('|', $keys) .')/iu','<strong class="search-excerpt">\0</strong>',
  $title);
?>

Get all images from a html document

<?php
$images = array();
preg_match_all('/(img|src)=("|')[^"'>]+/i', $data, $media);
unset($data);
$data=preg_replace('/(img|src)("|'|="|=')(.*)/i',"$3",$media[0]);
foreach($data as $url)
{
 $info = pathinfo($url);
 if (isset($info['extension']))
 {
  if (($info['extension'] == 'jpg') ||
  ($info['extension'] == 'jpeg') ||
  ($info['extension'] == 'gif') ||
  ($info['extension'] == 'png'))
  array_push($images, $url);
 }
}
?>

Matching HEXA decimal values

 $string = "#555555";
if (preg_match('/^#(?:(?:[a-fd]{3}){1,2})$/i', $string)) {
echo "example 6 successful.";
}

Find page title tag

<?php  
 $fp = fopen("http://www.catswhocode.com/blog","r");
 while (!feof($fp) ){
  $page .= fgets($fp, 4096);
 }

 $titre = eregi("(.*)",$page,$regs);
 echo $regs[1];
 fclose($fp);
?>

Matching aany XML/HTML tag

<?php
 function get_tag( $tag, $xml ) {
  $tag = preg_quote($tag);
  preg_match_all('{<'.$tag.'[^>]*>(.*?).'}',
                   $xml,
                   $matches,
                   PREG_PATTERN_ORDER);

  return $matches[1];
}
?>

Validating a url

<?php
 $pattern = "/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \?=.-]*)*\/?$/";
 $url = "http://www.taslimblogger.com";
  
 if (preg_match($pattern,$emurl)) echo "Found";
 else echo "Not Found";
?>

Validate US number

<?php

 /^(\+\d)*\s*(\(\d{3}\)\s*)*\d{3}(-{0,1}|\s{0,1})\d{2}(-{0,1}|\s{0,1})\d{2}$/
?>

Check the password is weak or strong if a password is strong
Weak passwords are one of the quickest ways to get hacked. The following regexp will make sure that:

Passwords will contain at least (1) upper case letter
Passwords will contain at least (1) lower case letter
Passwords will contain at least (1) number or special character
Passwords will contain at least (8) characters in
Password maximum length should not be arbitrarily

<?php
 (?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$
?>

Get the code between php tag

<?php
 <\?[php]*([^\?>]*)\?>
?>

Grab unclosed img tags As you probably know, the xhtml standard requires all tags to be properly closed. This regular expression will search for unclosed img tags. It could be easily modified to grab any other unclosed html tags.

<?php
 <img([^>]+)(\s*[^\/])>
 ?>

This regex will find CSS attributes, such as background:red; or padding-left:25px;.

<?php
 \s(?[a-zA-Z-]+)\s[:]{1}\s*(?[a-zA-Z0-9\s.#]+)[;]{1}
 ?>

This all functions are used to secure php data searching. This tools help the web developers to easliy find anything in webpages.

Load a file in inner div tab using jquery

2011-11-05T10:12:00.001+06:00

Load a file into inner webpage is done by jquery. So that no refresh required the whole page or no need to re-loading the whole page. It save the time to access data. This techniques code is given below.

Hide Example Show Example

Load a file in inner div tab using jquery

<html>
</head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<style type="text/css">
#btnload{
 cursor:pointer;
 padding:10px;
 background:#FB9644;
 width:200px;
 margin-bottom:10px;
}
#content{
 padding:10px;
 background:#FB9644;
 width:600px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
 $("#btnload").click(function(){  
  $("#content").html('<img src="ajax-loader.gif" />');
  $("#content").load("load-div1.html");   
 });
});
</script>
</head>
<body>
 <div id="btnload">Click</div>
 <div id="content"></div>
</body>