Make checkbox using ajax load in yiiframework

Make checkbox using ajax load in yiiframework


 

<?php echo CHtml::checkBox("load_ajax",false,array('id'=>'load_risk_all'));echo "Load All Risk Child";
$url=CController::createUrl('project/vieweach',array('project_id'=>$model->project_id));
Yii::app()->clientScript->registerScript("check",
           '$("#load_risk_all").change(function(){
             if($(this).is(":checked")){
              $("#load_risk").load("'.$url.'");
              $("#load_risk").fadeIn();
             }else{
              $("#load_risk").html("");
             }
             })
          ',
           CClientScript::POS_READY);
 
?>
<div id="load_risk">
</div>

load() function in jQuery for loading the ajax content using $.ajax functions
$this->renderPartial('/risk/view_each',array('provider'=>$provider),false,true);

onChange event in checkbox htmlOption for supporting your own javascript model 
<?php echo CHtml::checkbox("load risk",false,array("onChange"=>"js:yourcustomfunction()")); ?> 

Using CMaskField in your yii framework

Using CMaskField in your yii framework


 

<?php
$this->widget('CMaskedTextField', array(
'model' => $model,
'attribute' => 'aluguel',
'mask' => '(999) 999-9999? x99999',
'htmlOptions' => array('size' => 6)
));
?>

<?php
$this->widget('CMaskedTextField', array(
'model' => $model,
'attribute' => 'aluguel',
'mask' => '9.999,99',
'charMap' => array('.'=>'[\.]' , ','=>'[,]'),
'htmlOptions' => array('size' => 6)));
?>

How to make CGridview with dropdown filter

How to make CGridview with dropdown filter


 

$this-<widget('zii.widgets.grid.CGridView',array(
   'dataProvider'=<$model-<search(),
   'id'=<'risk-id',
   'filter'=<$model,
   'columns'=<array(
   array(
      'name'=<'No',
      'type'=<'raw',
      'value'=<'$this-<grid-<dataProvider-<pagination-<currentPage*$this-<grid-<dataProvider-<pagination-<pageSize + $row+1',//this for the auto page number of cgridview
      'filter'=<''//without filtering 
   ),
   array(
      'name'=<'name',
      'type'=<'raw',
      'value'=<'Chtml::link(Chtml::encode($data["name"]),array("risk/view","id"=<$data["risk_id"]))',
      'filter'=<CHtml::listData(Risk::model()-<findAll(
                  array(
                   'select'=<array('name'),
                   'distinct'=<true
                    
                  )),"name","name")//this is the focus of your code
       
   ),
   array(
      'name'=<'date_identified',
      'type'=<'raw',
      'value'=<'Chtml::encode($data-<date_identified)'
   ),
   array(
      'name'=<'description',
      'type'=<'raw',
      'value'=<'Chtml::encode($data-<description)'
   ),
   array(
      'name'=<'type',
      'type'=<'raw',
      'value'=<'Chtml::encode($data-<type)',
       
   ),
   array(
      'name'=<'link',
      'type'=<'raw',
      'value'=<'$data-<link'
   ),
    
 
)
));

Alternative Way to make Dropdown menu in yii

Alternative Way to make Dropdown menu in yii


 

<div class="row">
  <?php echo $form->dropDownList($model,'country_id',
   CHtml::listData(Country::model()->findAll(), 'id', 'country_name'),
   array('empty'=>'Select Country'))?>
 </div>
Or other option
<div class="row">
  <?php echo CHtml::dropDownList('Users[country_id'],'',
   CHtml::listData(Country::model()->findAll(), 'id', 'country_name'),
   array('empty'=>'Select Country'))?>
 </div>
 

Select random data from table in yiiframework

Select random data from table in yiiframework

$models=User::model()->findAll(array(
 'select'=>'*, rand() as rand',
 'limit'=>24,
 'order'=>'rand',
 )
);

Jquery Auto Refresh Div Content

Jquery Auto Refresh Div Content


jQuery and AJAX Call Code

<script src="http://code.jquery.com/jquery-latest.js"></script>
(function($)
{
    $(document).ready(function()
    {
        $.ajaxSetup(
        {
            cache: false,
            beforeSend: function() {
                $('#content').hide();
                $('#loading').show();
            },
            complete: function() {
                $('#loading').hide();
                $('#content').show();
            },
            success: function() {
                $('#loading').hide();
                $('#content').show();
            }
        });
        var $container = $("#content");
        $container.load("rss-feed-data.php");
        var refreshId = setInterval(function()
        {
            $container.load('rss-feed.php');
        }, 9000);
    });
})(jQuery);

PHP Data Script Code

<?php
$feed_url = 'http://tutorial101.com/blog/feed/';
$content = file_get_contents($feed_url);
$x = new SimpleXmlElement($content);
$feedData = '';
$date = date("Y-m-d H:i:s");

//output
$feedData .=  "<ul>";
foreach($x->channel->item as $entry) {
    $feedData .= "<li><a href='$entry->link' title='$entry->title'>" . $entry->title . "</a></li>";
}
$feedData .= "</ul>";
$feedData .= "<p>Data current as at: ".$date."</p>";

echo $feedData;
?>

View

<div id="wrapper">
    <div id="content"></div>
    <img src="loading.gif" id="loading" alt="loading" style="display:none;" />
</div>

Remove index.php in Jii Framework

Remove index.php in Jii Framework

Add .htaccess file in root directory

RewriteEngine on

# if a directory or a file exists, use it directly
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d

# otherwise forward it to index.php
RewriteRule . index.php

Modify url protected/config/main.php find 'urlManager'=>array( and change to this code

'urlManager'=>array(
   'urlFormat'=>'path',
   'showScriptName'=>false,
    'caseSensitive'=>false,        
  ),

Run, index.php remove

Jquey event mouse click

Jquey event mouse click

<script>
$(document).ready(function(){
 $('.rightclick').bind('contextmenu', function(e) {
     e.preventDefault();
     alert('The eventhandler will make sure, that the contextmenu dosnt appear.');
 });
});
</script>
<p><a href="#" class="rightclick"><h1>Jquey event mouse click</h1></a></p>

Ajax Load More Pagination Results

Ajax Load More Pagination Results

Create table
CREATE TABLE IF NOT EXISTS `paginate` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(60) NOT NULL,
  `message` text NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=51 ;

//index.php
<?php
include("config.inc.php");
$results = mysqli_query($connecDB,"SELECT COUNT(*) FROM paginate");
$get_total_rows = mysqli_fetch_array($results); //total records
//break total records into pages
$total_pages = ceil($get_total_rows[0]/$item_per_page); 
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Load More Pagination Results</title>
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 var track_click = 0; //track user click on "load more" button, righ now it is 0 click
 var total_pages = <?php echo $total_pages; ?>;
 $("#results").load("fetch_pages.php", {'page':track_click} ); //initial data to load
 $(".load_more").click(function (e) { //user clicks on button
  $(this).hide(); //hide load more button on click
  $('.animation_image').show(); //show loading image
  if(track_click <= total_pages) //make sure user clicks are still less than total pages
  {
   //post page number and load returned data into result element
   $.post('fetch_pages.php',{'page': track_click}, function(data) {
    $(".load_more").show(); //bring back load more button
    $("#results").append(data); //append data received from server
    //scroll page to button element
    $("html, body").animate({scrollTop: $("#load_more_button").offset().top}, 500);
    //hide loading image
    $('.animation_image').hide(); //hide loading image once data is received
    track_click++; //user click increment on load button
   }).fail(function(xhr, ajaxOptions, thrownError) { 
    alert(thrownError); //alert any HTTP error
    $(".load_more").show(); //bring back load more button
    $('.animation_image').hide(); //hide loading image once data is received
   });
   if(track_click >= total_pages-1)
   {
    //reached end of the page yet? disable load button
    $(".load_more").attr("disabled", "disabled");
   }
   }
  });
});
</script>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="results"></div>
<div align="center">
<button class="load_more" id="load_more_button">load More</button>
<div class="animation_image" style="display:none;"><img src="ajax-loader.gif"> Loading...</div>
</div>
</body>
</html>

//config.inc.php
<?php
$db_username = 'root';
$db_password = '';
$db_name = 'dbpagenation';
$db_host = 'localhost';
$item_per_page = 5;
$connecDB = mysqli_connect($db_host, $db_username, $db_password,$db_name)or die('could not connect to database');
?>

//fetch_pages.php
<?php
include("config.inc.php"); //include config file
//sanitize post value
$page_number = filter_var($_POST["page"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);
//throw HTTP error if page number is not valid
if(!is_numeric($page_number)){
 header('HTTP/1.1 500 Invalid page number!');
 exit();
}
//get current starting point of records
$position = ($page_number * $item_per_page);
//Limit our results within a specified range. 
$results = mysqli_query($connecDB,"SELECT id,name,message FROM paginate ORDER BY id DESC LIMIT $position, $item_per_page");
//output results from database
echo '<ul class="page_result">';
while($row = mysqli_fetch_array($results))
{
 echo '<li id="item_'.$row["id"].'"><span class="page_name">'.$row["id"].') '.$row["name"].'</span><span class="page_message">'.$row["message"].'</span></li>';
}
echo '</ul>';
?>

//style.css
#results{
font: 12px Arial, Helvetica, sans-serif;
width: 400px;
margin-left: auto;
margin-right: auto;
}
#results .loading-indication{
 background:#FFFFFF;
 padding:10px;
 position: absolute;
}
.paginate {
 padding: 0px;
 margin: 0px;
 height: 30px;
 display: block;
 text-align: center;
}
.paginate li {
 display: inline-block;
 list-style: none;
 padding: 0px;
 margin-right: 1px;
 width: 30px;
 text-align: center;
 background: #4CC2AF;
 line-height: 25px;
}
.paginate .active {
 display: inline-block;
 list-style: none;
 padding: 0px;
 margin-right: 1px;
 width: 30px;
 text-align: center;
 line-height: 25px;
 background-color: #666666;
}
.paginate li a{
 color:#FFFFFF;
 text-decoration:none;
}
.page_result{
 padding: 0px;
}
.page_result li{
 background: #E4E4E4;
 margin-bottom: 5px;
 padding: 10px;
 font-size: 12px;
 list-style: none;
}
.page_result .page_name {
font-size: 14px;
font-weight: bold;
margin-right: 5px;
}

CSS3 Dropdown Navigation menu

CSS3 Dropdown Navigation menu

//index.html
<html lang="en">
<head>
 <link href="stylesheet.css" type="text/css" rel="stylesheet">
 <title> CSS3 Dropdown Navigation menu</title>
 <!-- IE6-8 support of HTML5 elements --> <!--[if lt IE 9]>
 <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]-->
</head>
<body >
 <nav>
  <ul id="navMain">
   <li><a href="#"> Home</a></li>
   <li><a href="#"> About</a>
    <ul>
    <li><a href="#"> Staff Members</a></li>
    <li><a href="#"> Qualifications</a></li>
    <li><a href="#"> Our Services</a></li>
    <li><a href="#"> Location details</a></li>
    <li><a href="#"> Pricing details</a></li>
    </ul>
   </li>
   <li><a href="#"> Contact</a></li>
   <li><a href="#"> Newsletter</a></li>
  </ul>
 </nav>
</body>
</html>

//style.css
html{
padding:10px;
}

#navMain{
list-style:none;
font-family:tahoma;
font-size:14px;
border:1px #a81b2f solid;
float:left;
width:940px;
margin:0;
padding:0;
background:url('images/nav-bg.jpg');
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
#navMain > li{
float:left;
position:relative;
border-right:1px solid #9b2838;
}
#navMain > li > a{
color:#f4e4e6;
float:left;
text-decoration:none;
padding:11px 18px;
border-right:1px solid #bf3549;
}
#navMain > li > a:hover{
 background: rgba(99, 20, 32, 0.25);
}
#navMain .currentPage a{
 background: rgb(99, 20, 32);
 /* RGBa with 0.6 opacity */
 background: rgba(99, 20, 32, 0.25);
}
#navMain ul {
display:none;
position:absolute;
list-style:none;
left:0;
padding:0;
margin:0;
border-top:1px #a81b2f solid;
background:#e8edee;
}
#navMain ul li a{
color:#5d6364;
text-decoration:none;
display:block;
padding:6px 7px;
border-bottom:1px solid #d3d9da;
border-left:1px solid #d3d9da;
border-right:1px solid #d3d9da;
font-size:13px;
}
#navMain li:hover ul {
display:block;
top:39px;
min-width:200px;
}

Uploading using jquery ajax

Uploading using jquery ajax

//index.html
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Uploading using jquery ajax</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
 <div id="main">
  <h1>Upload Your Images</h1>
  <form method="post" enctype="multipart/form-data"  action="upload.php">
      <input type="file" name="images" id="images" multiple />
      <button type="submit" id="btn">Upload Files!</button>
     </form>

   <div id="response"></div>
  <ul id="image-list">

  </ul>
 </div>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script src="upload.js"></script>
</body>
</html>

//upload.js
(function () {
 var input = document.getElementById("images"), 
  formdata = false;

 function showUploadedItem (source) {
    var list = document.getElementById("image-list"),
     li   = document.createElement("li"),
     img  = document.createElement("img");
    img.src = source;
    li.appendChild(img);
  list.appendChild(li);
 }   

 if (window.FormData) {
    formdata = new FormData();
    document.getElementById("btn").style.display = "none";
 }
 
  input.addEventListener("change", function (evt) {
   document.getElementById("response").innerHTML = "Uploading . . ."
   var i = 0, len = this.files.length, img, reader, file;
 
  for ( ; i < len; i++ ) {
   file = this.files[i];
 
   if (!!file.type.match(/image.*/)) {
    if ( window.FileReader ) {
     reader = new FileReader();
     reader.onloadend = function (e) { 
      showUploadedItem(e.target.result, file.fileName);
     };
     reader.readAsDataURL(file);
    }
    if (formdata) {
     formdata.append("images[]", file);
    }
   } 
  }
 
  if (formdata) {
   $.ajax({
    url: "upload.php",
    type: "POST",
    data: formdata,
    processData: false,
    contentType: false,
    success: function (res) {
     document.getElementById("response").innerHTML = res; 
    }
   });
  }
 }, false);
}());

//upload.php
//create uploads folder root directory
<?php
foreach ($_FILES["images"]["error"] as $key => $error) {
    if ($error == UPLOAD_ERR_OK) {
        $name = $_FILES["images"]["name"][$key];
        move_uploaded_file( $_FILES["images"]["tmp_name"][$key], "uploads/" . $_FILES['images']['name'][$key]);
    }
}
echo "<h2>Successfully Uploaded Images</h2>";

//style.css
body {
 font: 14px/1.5 helvetica-neue, helvetica, arial, san-serif;
 padding:10px;
}
h1 {
 margin-top:0;
}
#main {
 width: 300px;
 margin:auto;
 background: #ececec;
 padding: 20px;
 border: 1px solid #ccc;
}
#image-list {
 list-style:none;
 margin:0;
 padding:0;
}
#image-list li {
 background: #fff;
 border: 1px solid #ccc;
 text-align:center;
 padding:20px;
 margin-bottom:19px;
}
#image-list li img {
 width: 258px;
 vertical-align: middle;
 border:1px solid #474747;
}

CSS Buttons

CSS Buttons

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Buttons</title>
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700,300' rel='stylesheet' type='text/css'>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<a href="#" class="button1">Button</a>
<a href="#" class="button2">Button</a>
<a href="#" class="button3">Button</a>
<a href="#" class="button4">Button</a>
<a href="#" class="button5">Button</a>
<a href="#" class="button6">Button</a>
<a href="#" class="button7">Button</a>
<a href="#" class="button8">Button</a>
<a href="#" class="button9">Button</a>
<a href="#" class="button10">Button</a>
<a href="#" class="button11">Button</a>
<a href="#" class="button12">Button</a>
</div>
</body>
</html>

//style.css
@charset "UTF-8";
/* CSS Document */

body{background:#ccc;}
#container{
 margin:100px auto;
 width:145px;
 padding:20px;
 background:#FFF;
 
 -webkit-box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .3);
 -moz-box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .3);
 box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .3); 
}

a{
 text-decoration:none;
 padding:5px 20px;
 margin:0px 20px 20px 0px;
 display:block;
 width:100px;
 text-align:center;
 font-family: 'Yanone Kaffeesatz', sans-serif;
 text-transform:uppercase;
 font-size:18px;
 letter-spacing:1px;
 
 /* Rounded Corners */
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px; 
 
 /* Drop Shadow */
 -webkit-box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .3);
 -moz-box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .3);
 box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .3); 
}

.button1{
 color:#fff;
 border:1px solid #515151;
 
 /* Text Shadow */
 text-shadow: 1px 1px 1px #515151;
 filter: dropshadow(color=#515151, offx=1, offy=1); 
 
 /* Button Gradient */
 background: rgb(125,126,125); /* Old browsers */
 background: -moz-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1))); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); /* IE10+ */
 background: linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
}

.button2{
 color:#fff;
 border:1px solid #2d3e5c; 
 
 background: rgb(96,108,136); /* Old browsers */
 background: -moz-linear-gradient(top, rgba(96,108,136,1) 0%, rgba(63,76,107,1) 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(96,108,136,1)), color-stop(100%,rgba(63,76,107,1))); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* IE10+ */
 background: linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606c88', endColorstr='#3f4c6b',GradientType=0 ); /* IE6-9 */
}

.button3{
 color:#fff;
 border:1px solid #5e8a00;
 
 text-shadow: 1px 1px 1px #5e8a00;
 filter: dropshadow(color=#5e8a00, offx=1, offy=1); 
 
 background: rgb(191,210,85); /* Old browsers */
 background: -moz-linear-gradient(top, rgba(191,210,85,1) 0%, rgba(142,185,42,1) 50%, rgba(114,170,0,1) 51%, rgba(158,203,45,1) 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(191,210,85,1)), color-stop(50%,rgba(142,185,42,1)), color-stop(51%,rgba(114,170,0,1)), color-stop(100%,rgba(158,203,45,1))); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%); /* IE10+ */
 background: linear-gradient(top, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfd255', endColorstr='#9ecb2d',GradientType=0 ); /* IE6-9 */
}

.button4{
 color:#fff;
 border:1px solid #e05702;
 
 text-shadow: 1px 1px 1px #e05702;
 filter: dropshadow(color=#e05702, offx=1, offy=1); 

 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px; 
 
 -webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, .1);
 -moz-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, .1);
 box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, .1); 
 
 background: rgb(254,204,177); /* Old browsers */
 background: -moz-linear-gradient(top, rgba(254,204,177,1) 0%, rgba(241,116,50,1) 50%, rgba(234,85,7,1) 51%, rgba(251,149,94,1) 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,204,177,1)), color-stop(50%,rgba(241,116,50,1)), color-stop(51%,rgba(234,85,7,1)), color-stop(100%,rgba(251,149,94,1))); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, rgba(254,204,177,1) 0%,rgba(241,116,50,1) 50%,rgba(234,85,7,1) 51%,rgba(251,149,94,1) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, rgba(254,204,177,1) 0%,rgba(241,116,50,1) 50%,rgba(234,85,7,1) 51%,rgba(251,149,94,1) 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, rgba(254,204,177,1) 0%,rgba(241,116,50,1) 50%,rgba(234,85,7,1) 51%,rgba(251,149,94,1) 100%); /* IE10+ */
 background: linear-gradient(top, rgba(254,204,177,1) 0%,rgba(241,116,50,1) 50%,rgba(234,85,7,1) 51%,rgba(251,149,94,1) 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feccb1', endColorstr='#fb955e',GradientType=0 ); /* IE6-9 */
}

.button5{
 color:#fff;
 border:1px solid #009cc6;
 
 text-shadow: 1px 1px 1px #009cc6;
 filter: dropshadow(color=#009cc6, offx=1, offy=1); 
 
 background: rgb(169,228,247); /* Old browsers */
 background: -moz-linear-gradient(top, rgba(169,228,247,1) 0%, rgba(15,180,231,1) 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(169,228,247,1)), color-stop(100%,rgba(15,180,231,1))); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, rgba(169,228,247,1) 0%,rgba(15,180,231,1) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, rgba(169,228,247,1) 0%,rgba(15,180,231,1) 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, rgba(169,228,247,1) 0%,rgba(15,180,231,1) 100%); /* IE10+ */
 background: linear-gradient(top, rgba(169,228,247,1) 0%,rgba(15,180,231,1) 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7',GradientType=0 ); /* IE6-9 */
}

.button6{
 color:#fff;
 border:1px solid #6f818b;
 
 text-shadow: 1px 1px 1px #6f818b;
 filter: dropshadow(color=#6f818b, offx=1, offy=1); 
 
 background: rgb(206,220,231); /* Old browsers */
 background: -moz-linear-gradient(top, rgba(206,220,231,1) 0%, rgba(89,106,114,1) 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(206,220,231,1)), color-stop(100%,rgba(89,106,114,1))); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, rgba(206,220,231,1) 0%,rgba(89,106,114,1) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, rgba(206,220,231,1) 0%,rgba(89,106,114,1) 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, rgba(206,220,231,1) 0%,rgba(89,106,114,1) 100%); /* IE10+ */
 background: linear-gradient(top, rgba(206,220,231,1) 0%,rgba(89,106,114,1) 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedce7', endColorstr='#596a72',GradientType=0 ); /* IE6-9 */
}

.button7{
 color:#8b8b8b;
 border:1px solid #979797;
 
 text-shadow: 1px 1px 1px #fff;
 filter: dropshadow(color=#fff, offx=1, offy=1); 
 
 background: rgb(238,238,238); /* Old browsers */
 background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* IE10+ */
 background: linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
}

.button8{
 color:#8b8b8b;
 border:1px solid #a0a0a0;
 
 text-shadow: 1px 1px 1px #fff;
 filter: dropshadow(color=#fff, offx=1, offy=1); 
 
 background: rgb(255,255,255); /* Old browsers */
 background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(243,243,243,1) 50%, rgba(237,237,237,1) 51%, rgba(255,255,255,1) 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(243,243,243,1)), color-stop(51%,rgba(237,237,237,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%); /* IE10+ */
 background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}

.button9{
 color:#fff;
 border:1px solid #810808;
 
 text-shadow: 1px 1px 1px #810808;
 filter: dropshadow(color=#810808, offx=1, offy=1); 
 
 background: rgb(247,13,13); /* Old browsers */
 background: -moz-linear-gradient(top, rgba(247,13,13,1) 0%, rgba(150,11,11,1) 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(247,13,13,1)), color-stop(100%,rgba(150,11,11,1))); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, rgba(247,13,13,1) 0%,rgba(150,11,11,1) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, rgba(247,13,13,1) 0%,rgba(150,11,11,1) 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, rgba(247,13,13,1) 0%,rgba(150,11,11,1) 100%); /* IE10+ */
 background: linear-gradient(top, rgba(247,13,13,1) 0%,rgba(150,11,11,1) 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f70d0d', endColorstr='#960b0b',GradientType=0 ); /* IE6-9 */
}

.button10{
 color:#fff;
 border:1px solid #111111;
 
 text-shadow: 1px 1px 1px #111111;
 filter: dropshadow(color=#111111, offx=1, offy=1); 
 
 background: rgb(97,97,97); /* Old browsers */
 background: -moz-linear-gradient(top, rgba(97,97,97,1) 0%, rgba(66,66,66,1) 48%, rgba(53,53,53,1) 51%, rgba(36,36,36,1) 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(97,97,97,1)), color-stop(48%,rgba(66,66,66,1)), color-stop(51%,rgba(53,53,53,1)), color-stop(100%,rgba(36,36,36,1))); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, rgba(97,97,97,1) 0%,rgba(66,66,66,1) 48%,rgba(53,53,53,1) 51%,rgba(36,36,36,1) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, rgba(97,97,97,1) 0%,rgba(66,66,66,1) 48%,rgba(53,53,53,1) 51%,rgba(36,36,36,1) 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, rgba(97,97,97,1) 0%,rgba(66,66,66,1) 48%,rgba(53,53,53,1) 51%,rgba(36,36,36,1) 100%); /* IE10+ */
 background: linear-gradient(top, rgba(97,97,97,1) 0%,rgba(66,66,66,1) 48%,rgba(53,53,53,1) 51%,rgba(36,36,36,1) 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#616161', endColorstr='#242424',GradientType=0 ); /* IE6-9 */
}

.button11{
 color:#fff;
 border:1px solid #a5b10b;
 
 text-shadow: 1px 1px 1px #a5b10b;
 filter: dropshadow(color=#a5b10b, offx=1, offy=1); 
 
 background: rgb(230,240,163); /* Old browsers */
 background: -moz-linear-gradient(top, rgba(230,240,163,1) 0%, rgba(210,230,56,1) 50%, rgba(195,216,37,1) 51%, rgba(219,240,67,1) 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(230,240,163,1)), color-stop(50%,rgba(210,230,56,1)), color-stop(51%,rgba(195,216,37,1)), color-stop(100%,rgba(219,240,67,1))); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, rgba(230,240,163,1) 0%,rgba(210,230,56,1) 50%,rgba(195,216,37,1) 51%,rgba(219,240,67,1) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, rgba(230,240,163,1) 0%,rgba(210,230,56,1) 50%,rgba(195,216,37,1) 51%,rgba(219,240,67,1) 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, rgba(230,240,163,1) 0%,rgba(210,230,56,1) 50%,rgba(195,216,37,1) 51%,rgba(219,240,67,1) 100%); /* IE10+ */
 background: linear-gradient(top, rgba(230,240,163,1) 0%,rgba(210,230,56,1) 50%,rgba(195,216,37,1) 51%,rgba(219,240,67,1) 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f0a3', endColorstr='#dbf043',GradientType=0 ); /* IE6-9 */
}

.button12{
 color:#fff;
 border:1px solid #de6106;
 
 text-shadow: 1px 1px 1px #de6106;
 filter: dropshadow(color=#de6106, offx=1, offy=1); 
 
 background: rgb(255,103,15); /* Old browsers */
 background: -moz-linear-gradient(top, rgba(255,103,15,1) 0%, rgba(255,103,15,1) 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,103,15,1)), color-stop(100%,rgba(255,103,15,1))); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, rgba(255,103,15,1) 0%,rgba(255,103,15,1) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, rgba(255,103,15,1) 0%,rgba(255,103,15,1) 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, rgba(255,103,15,1) 0%,rgba(255,103,15,1) 100%); /* IE10+ */
 background: linear-gradient(top, rgba(255,103,15,1) 0%,rgba(255,103,15,1) 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff670f', endColorstr='#ff670f',GradientType=0 ); /* IE6-9 */
}

File Upload using php

File Upload using php

index.html
<html> 
<body>
  <form enctype="multipart/form-data" action="upload.php" method="post">
    <input type="hidden" name="MAX_FILE_SIZE" value="1000000" />
    Choose a file to upload: <input name="uploaded_file" type="file" />
    <input type="submit" value="Upload" />
  </form> 
</body> 
</html>

//upload.php
<?php
//Check that we have a file
if((!empty($_FILES["uploaded_file"])) && ($_FILES['uploaded_file']['error'] == 0)) {
  //Check if the file is JPEG image and it's size is less than 350Kb
  $filename = basename($_FILES['uploaded_file']['name']);
  $ext = substr($filename, strrpos($filename, '.') + 1);
  if (($ext == "jpg") && ($_FILES["uploaded_file"]["type"] == "image/jpeg") && 
 ($_FILES["uploaded_file"]["size"] <350000)) {
    //Determine the path to which we want to save this file
      $newname = dirname(__FILE__).'/upload/'.$filename;
      //Check if the file with the same name is already exists on the server
      if (!file_exists($newname)) {
        //Attempt to move the uploaded file to it's new place
        if ((move_uploaded_file($_FILES['uploaded_file']['tmp_name'],$newname))) {
           echo "It's done! The file has been saved as: ".$newname;
        } else {
           echo "Error: A problem occurred during file upload!";
        }
      } else {
         echo "Error: File ".$_FILES["uploaded_file"]["name"]." already exists";
      }
  } else {
     echo "Error: Only .jpg images under 350Kb are accepted for upload";
  }
} else {
 echo "Error: No file uploaded";
}
?>

Pagenation using php class

Pagenation using php class

<?php
class paginate{
var $current;
var $rows;
var $start_row;
var $total_data;
 function paginate($current_page,$totaldata,$rows_page = 10){
  $this->rows = $rows_page;
  $this->total_data = $totaldata;
  if($current_page < 1 or $current_page > $this->getTotalPage()){
   $this->current = 1;
  }
  else{
   $this->current = $current_page;
  }
 }
 function getTotalPage(){
  $total = ceil($this->total_data / $this->rows);
  return $total;
 }
 function getLimit(){
  if($this->current <= 1){
   $this->start_row = 0;
  }
  else{
   $this->start_row = $this->rows*($this->current-1);
  }
  return ' LIMIT '.$this->start_row.','.$this->rows;
 }
 function getNext(){
  if($this->current < $this->getTotalPage()){
   return $this->current + 1;
  }
 }
 function getPrevious(){
  if($this->current > 1){
   return $this->current - 1;
  }
 }
 function getPages(){
  $first = false; $last = false;
  if($this->getTotalPage() == 0){
   return false;
  }
  elseif($this->getTotalPage() > 10){
   for($i=1; $i<=$this->getTotalPage();$i++){
    if($i == $this->current){
     $page[] = array(
      'link' => false,
      'page' => $i
     );
    }
    elseif($i < $this->current-3 and $i > 3 and $i < $this->current+5 ){
     if(!$first){
      $page[] = array(
       'link' => false,
       'page' => '...',
      );
     }
     $first = true;
    }
    elseif($i < $this->getTotalPage()-3 and $i > $this->current+5){
     if(!$last){
      $page[] = array(
       'link' => false,
       'page' => '...',
      );
     }
     $last = true;
    }
    else{
     $page[] = array(
      'link' => true,
      'page' => $i
     );
    }
   }
  }
  else{
   for($i=1; $i<= $this->getTotalPage();$i++){
    if($i == $this->current){
     $page[] = array(
      'link' => false,
      'page' => $i
     );
    }
    else{
     $page[] = array(
      'link' => true,
      'page' => $i
     );
    }
   }
  }
  return $page;
 }
 function navigation($url=null,$attr=array()){
  $parm = '';
  if(is_array($attr)){
   foreach($attr as $name => $val){
    $parm .= ' '.$name.'="'.$val.'"';
   }
  }
  $nav = null;
  if($this->getPrevious()){
   $nav .= '<a href="'.$url.'&page='.$this->getPrevious().'" '.$parm.'>Previous</a> | ';
  }
  if($this->getPages()){
   foreach($this->getPages() as $name => $val){
    if($val['page'] != 1){
     $nav .= ', ';
    }
    if($val['link']){
     $nav .= '<a href="'.$url.'&page='.$val['page'].'" '.$parm.'>'.$val['page'].'</a>';
    }
    else{
     $nav .= '<b>'.$val['page'].'</b>';
    }
   }
  }
  if($this->getNext()){
   $nav .= ' | <a href="'.$url.'&page='.$this->getNext().'" '.$parm.'>Next</a>';
  }
  return $nav;
 }
}


/** example **/
if(isset($_GET['page'])){
 $page = $_GET['page'];
}
else{
 $page = 1;
}
$totaldata = 200;
$row_per_page = 10;
$paginate = new paginate($page,$totaldata,$row_per_page);

echo 'Limit for Query: SELECT * FROM `table`'.$paginate->getLimit();
echo '<br/>';
echo 'Current Page: '.$paginate->current;
echo '<br/>';
echo 'Pages Navigation: '.$paginate->navigation('index.php?',array('id' => 'page'));
echo '<br/>';
echo 'Total Page: '.$paginate->getTotalPage();
?>

How to Increase Decrease Font Size of Page Using Jquery

How to Increase Decrease Font Size of Page Using Jquery

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>How to Increase Decrease Font Size of Page Using Jquery</title>
<script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-latest.js"></script>   
<script type="text/javascript">
 $(document).ready(function(){
   var originalSize = $('div').css('font-size');
  // reset
   $(".resetMe").click(function(){
  $('div').css('font-size', originalSize); 

   });

   // Increase Font Size
   $(".increase").click(function(){
  var currentSize = $('div').css('font-size');
  var currentSize = parseFloat(currentSize)*1.2;
  $('div').css('font-size', currentSize);

  return false;
   });

   // Decrease Font Size
   $(".decrease").click(function(){
  var currentFontSize = $('div').css('font-size');
  var currentSize = $('div').css('font-size');
  var currentSize = parseFloat(currentSize)*0.8;
  $('div').css('font-size', currentSize);

  return false;
   });
});
</script>
</head>
<body>
<h1>How to Increase Decrease Font Size of Page Using Jquery </h1>
 
   <input type="button" class="increase" value=" + ">
   <input type="button" class="decrease" value=" - "/>
   <input type="button" class="resetMe" value=" = ">
   <div>Click Respected Buttons to Increase or Decrease the Font </div>
</body>
</html>

Create CSS3 Dropdown menu

Create CSS3 Dropdown menu

<style type="text/css">#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
  margin: 0;
  padding: 0;
  position: relative;
}
#cssmenu {
  height: 49px;
  border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  background: #141414;
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
  border-bottom: 2px solid #0fa1e0;
}
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}
#cssmenu a {
  background: #141414;
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
  color: #ffffff;
  display: inline-block;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  font-size: 12px;
  line-height: 49px;
  padding: 0 20px;
  text-decoration: none;
}
#cssmenu ul {
  list-style: none;
}
#cssmenu > ul {
  float: left;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu > ul > li:hover:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #0fa1e0;
  margin-left: -10px;
}
#cssmenu > ul > li:first-child > a {
  border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
}
#cssmenu > ul > li:last-child > a {
  border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
}
#cssmenu > ul > li.active a {
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
  background: #070707;
  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
}
#cssmenu > ul > li:hover > a {
  background: #070707;
  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
}
#cssmenu .has-sub {
  z-index: 1;
}
#cssmenu .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
}
#cssmenu .has-sub ul li {
  *margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
  background: #0fa1e0;
  border-bottom: 1px dotted #6fc7ec;
  filter: none;
  font-size: 11px;
  display: block;
  line-height: 120%;
  padding: 10px;
}
#cssmenu .has-sub ul li:hover a {
  background: #0c7fb0;
}
#cssmenu .has-sub .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub .has-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
  background: #0c7fb0;
  border-bottom: 1px dotted #6db2d0;
}
#cssmenu .has-sub .has-sub ul li a:hover {
  background: #095c80;
}</style>
<div id='cssmenu'>
<ul>
   <li><a href='#'><span>Home</span></a></li>
   <li class='has-sub '><a href='#'><span>Products</span></a>
      <ul>
         <li class='has-sub '><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Product</span></a></li>
               <li><a href='#'><span>Sub Product</span></a></li>
            </ul>
         </li>
         <li class='has-sub '><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Product</span></a></li>
               <li><a href='#'><span>Sub Product</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>
</ul>
</div>

Pagenation using PHP Class

Pagenation using PHP Class

Crate Database table
CREATE TABLE `countries` (
  `ID` smallint(5) unsigned NOT NULL auto_increment,
  `Country` varchar(255) NOT NULL,
  `CountryAbbrev` varchar(10) default NULL,
  `CurrencyAbbr` varchar(4) default NULL,
  `CurrencyRate` float default NULL,
  `CurrencyCode` varchar(3) default NULL,
  PRIMARY KEY  (`ID`)
) ENGINE=MyISAM AUTO_INCREMENT=289 DEFAULT CHARSET=latin1;

Download table countries
index.php

<?php
    require_once('Pagination.class.php');
    $row_per_page = 20;
    $pagination = new CompletePagination($row_per_page);
    
    $link = mysql_connect('localhost', 'root', '');
    mysql_selectdb('test');
    
    $where = "";
    
    if(isset($_POST['txt_name']))
        $where = " WHERE Country LIKE '%{$_POST['txt_name']}%'";
    else if(isset($_GET['txt_name']) && isset($_GET['page_no']))
        $where = " WHERE Country LIKE '%{$_GET['txt_name']}%'";

    $query_count = "SELECT COUNT(Country) AS tot_rec FROM countries ".$where;
    $result_count = mysql_query($query_count);
    $record_count = mysql_fetch_array($result_count);
    $total_rec = $record_count['tot_rec'];
    
    $pagination->total_rows = $total_rec;    
    $pagination->show_dropdown = true;
    $pagination->show_total_records = true;
    $pagination->show_page_no = true;
    $pagination->show_ellipsis = 20;   //Show Ellipsis if total Pages are greater than or eqaul to 100
    $pagination_html = $pagination->showCompletePagination();

    $pagination->show_ellipsis = 10;
    $pagination->show_dropdown = false;
    $pagination->show_total_records = false;
    $pagination->show_page_no = false;
    $pagination_html2 = $pagination->showCompletePagination();
    
    $query = "SELECT Country, CountryAbbrev, CurrencyAbbr FROM countries ".$where." LIMIT ".$pagination->getLimit() . ", " . $row_per_page;
    $result = mysql_query($query);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Pagination</title>
        <link rel="stylesheet" type="text/css" href="completepagination.css" />
    </head>
    <body>
        <div align="center">
        <?php echo $pagination_html; ?>
        <form method="post" action="">
            Country Name: <input type="text" name="txt_name" value="<?php echo @$_REQUEST['txt_name'];?>" />
            <input type="submit" value="Submit" />            
        </form>
        <table border="1" cellpadding="2" cellspacing="2">
            <thead>
            <tr>
                <th>Country</th>
                <th>Country Abb</th>
                <th>Currency Abb</th>
            </tr>
            </thead>
            <tbody>
                <?php
                    while($record = mysql_fetch_array($result)){
                ?>
                <tr>
                    <td><?php echo $record['Country'];?></td>
                    <td><?php echo $record['CountryAbbrev'];?></td>
                    <td><?php echo $record['CurrencyAbbr'];?></td>
                </tr>
                <?php } ?>
            </tbody>
        </table>
        <?php echo $pagination_html2;?>
        </div>
    </body>
</html>

Pagination.class.php

<?php
class CompletePagination 
{
    private $rows_per_page;
    private $url;
    private $page_no;
    
    public $total_rows;
    public $show_dropdown;
    public $show_total_records;
    public $show_page_no;
    public $show_ellipsis = 9;     //Show ... if total pages are more than 10

    /**
     *
     * @param int $rperpage - show the record per page
     * @param int $totrows - total records
     */
    public function __construct($rperpage, $totrows = "") 
    {
        $this->rows_per_page = $rperpage;
        $this->total_rows = $totrows;
        $this->setPageNumber();
        $this->generateCompleteURL();
    }

    /**
     * function sets the pageNumber
     */
    private function setPageNumber() 
    {
        if($_POST)
            $this->page_no = 1;
        else
        {
            if (!isset($_REQUEST['page_no']) && @$_REQUEST['page_no'] == "")
                $this->page_no = 1;
            else
                $this->page_no = $_REQUEST['page_no'];
        }
    }

    /**
     * function gets the limit of pagination
     * @return int 
     */
    public function getLimit() 
    {
        return ($this->page_no - 1) * $this->rows_per_page;
    }

    /**
     * This function generates the complete URL along with the query string
     */
    private function generateCompleteURL() 
    {
        $page_query = (count($_REQUEST) == 0 ? "page_no=" : "&page_no=");

        if (isset($_REQUEST['page_no']))
            unset($_REQUEST['page_no']);

        $this->url = $_SERVER['PHP_SELF'] . "?" . http_build_query($_REQUEST) . $page_query;
    }

    /**
     * function returns the last page, that is generates as the result of Pagination
     * @return int 
     */
    private function getLastPage() 
    {
        return ceil($this->total_rows / $this->rows_per_page);
    }

    /**
     * function generates the DropDown for Pagination
     * @return string 
     */
    private function generateDropdown() 
    {
        if ($this->total_rows == 0)
            return "";

        $str = "";
        $str .= '<select name="drp_page_no" id="drp_page_no" onchange="document.location.href = this.value;">';
        for ($cnt = 1; $cnt <= $this->getLastPage(); $cnt++) 
        {
            if (isset($this->page_no) && $this->page_no == $cnt)
                $str .= '<option value="' . $this->url . $cnt . '" selected="selected">' . $cnt . '</option>';
            else
                $str .= '<option value="' . $this->url . $cnt . '">' . $cnt . '</option>';
        }
        $str .= '</select>';
        return $str;
    }

    /**
     * function generates the complete pagination
     * @return string 
     */
    public function showCompletePagination() 
    {
        $pagination = "";
        $lpm1 = $this->getLastPage() - 1;
        $page = $this->page_no;
        $prev = $this->page_no - 1;
        $next = $this->page_no + 1;

        $pagination .= "<div class=\"pagination\"";

        if (@$margin || @$padding) 
        {
            $pagination .= " style=\"";
            if ($margin)
                $pagination .= "margin: $margin;";
            if ($padding)
                $pagination .= "padding: $padding;";
            $pagination .= "\"";
        }
        if ($this->show_total_records)
            $pagination .= "><span class='tableStandardBold' style='margin-right:50px;'> Total Number of record(s) found: " . $this->total_rows . " </span>";
        else
            $pagination .= ">";


        if ($this->getLastPage() > 1) 
        {            
            if ($page > 1)
            {
                $pagination .= "<a href={$this->url}1>« first</a>";
                $pagination .= "<a href=$this->url$prev>‹ prev</a>";
            }
            else
            {
                $pagination .= "<span class=\"disabled\">« first</span>";
                $pagination .= "<span class=\"disabled\">‹ prev</span>";
            }


            if ($this->getLastPage() < $this->show_ellipsis) 
            {
                for ($counter = 1; $counter <= $this->getLastPage(); $counter++) 
                {
                    if ($counter == $page)
                        $pagination .= "<span class=\"current\">" . $counter . "</span>";
                    else
                        $pagination .= "<a href=$this->url$counter>" . $counter . "</a>";
                }
            }
            elseif ($this->getLastPage() >= $this->show_ellipsis)
            {
                if ($page < 4) 
                {
                    for ($counter = 1; $counter < 6; $counter++) 
                    {
                        if ($counter == $page)
                            $pagination .= "<span class=\"current\">" . $counter . "</span>";
                        else
                            $pagination .= "<a href=\"$this->url$counter\">" . $counter . "</a>";
                    }
                    $pagination .= "...";
                    $pagination .= "<a href=$this->url$lpm1>" . $lpm1 . "</a>";
                    $pagination .= "<a href={$this->url}{$this->getLastPage()}>" . $this->getLastPage() . "</a>";
                }
                elseif ($this->getLastPage() - 3 > $page && $page > 1) 
                {
                    $pagination .= "<a href={$this->url}1>1</a>";
                    $pagination .= "<a href={$this->url}2>2</a>";
                    $pagination .= "...";
                    for ($counter = $page - 1; $counter <= $page + 1; $counter++) {
                        if ($counter == $page)
                            $pagination .= "<span class=\"current\">" . $counter . "</span>";
                        else
                            $pagination .= "<a href=$this->url$counter>" . $counter . "</a>";
                    }
                    $pagination .= "...";
                    $pagination .= "<a href=$this->url$lpm1>$lpm1</a>";
                    $pagination .= "<a href={$this->url}{$this->getLastPage()}>" . $this->getLastPage() . "</a>";
                }
                else 
                {
                    $pagination .= "<a href={$this->url}1>1</a>";
                    $pagination .= "<a href={$this->url}2>2</a>";
                    $pagination .= "...";
                    for ($counter = $this->getLastPage() - 4; $counter <= $this->getLastPage(); $counter++) 
                    {
                        if ($counter == $page)
                            $pagination .= "<span class=\"current\">" . $counter . "</span>";
                        else
                            $pagination .= "<a href=$this->url$counter>" . $counter . "</a>";
                    }
                }
            }

            if ($page < $counter - 1)
            {
                $pagination .= "<a href=$this->url$next>next ›</a>";
                $pagination .= "<a href={$this->url}{$this->getLastPage()}>last »</a>";
            }
            else
            {
                $pagination .= "<span class=\"disabled\">next ›</span>";
                $pagination .= "<span class=\"disabled\">last »</span>";
            }

            if ($this->show_dropdown)
                $pagination .= "<span class='tableStandardBold' style='margin-left:20px;'>Go to page:  " . $this->generateDropdown() . "</span>\n";

            if ($this->show_page_no)
            {
                $page = 1;
                if (isset($this->page_no) && $this->page_no != "")
                    $page = $this->page_no;
                $pagination .= "<span class='tableStandardBold' style='margin-left:20px;'> Page " . $page . " of " . $this->getLastPage() . "</span>\n";
            }

            $pagination .= "</div>\n";
        }
        return $pagination;
    }

}

?>

Creating simple class php interest Calculator

Creating simple class php interest Calculator 

<?php
//Creating class interestCalculator
class interestCalculator
{
public $rate;
public $duration;
public $capital;
public function calculateInterest()
{
return ($this->rate*$this->duration*$this->capital)/100;
}
}
//Creating  various object of class interestCalculator to calculate interest on various amount
$cls1 = new interestCalculator();
$cls2 = new $cls1;
$cls1->rate =2;
$cls1->duration =3;
$cls1->capital = 300;

$cls2->capital = 400;

$interest1 = $cls1->calculateInterest();
$interest2  = $cls2->calculateInterest();
echo "$interest1 -- $interest2";

Create Registration Modal box using bootstrap

Create Registration Modal box using bootstrap

Bootstrap Sleek, intuitive, and powerful front-end framework for faster and easier web development

url bootstrapjs
http://getbootstrap.com/2.3.2/javascript.html#modals

Download 

<html>
  <head>
    <title>Bootstrap registration</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
 <style>
    body {
      padding-top: 60px;
      padding-bottom: 40px;
    }
 .modal {
    width: auto;
    left: 57%;
}
label.checkbox {
    float: none;
    margin-top: -6px;
    margin-bottom: 15px;
    margin-left: 1px;
    width: 280px;
}
  </style>
  </head>
  <body>
 <a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
 <!-- Modal -->
 <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">x</button>
      <h3>New User Details</h3>
    </div>
    <div class="modal-body">
        <p><input type="text" class="span4" name="first_name" id="first_name" placeholder="First Name"></p>
        <p><input type="text" class="span4" name="last_name" id="last_name" placeholder="Last Name"></p>
        <p><input type="text" class="span4" name="email" id="email" placeholder="Email"></p>
        <p>
          <select class="span4" name="teamId" id="teamId">
            <option value="">Team Number...</option>
            <option value="1">1</option>
            <option value="2">2</option>
          </select>
        </p>
        <p>
          <label class="checkbox span4">
            <input type="checkbox" id="isAdmin" name="isAdmin"> Is an admin?
          </label>
        </p>
        <p><input type="password" class="span4" name="password" id="password" placeholder="Password"></p>
        <p><input type="password" class="span4" name="password2" id="password2" placeholder="Confirm Password"></p>
    </div>
    <div class="modal-footer">
      <a href="#" class="btn btn-warning" data-dismiss="modal">Cancel</a>
      <a href="#" id="btnModalSubmit" class="btn btn-primary">Create</a>
    </div>
 </div>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

CodeIgniter Search Query Strings

CodeIgniter Search Query Strings

Create Database table film_list
CREATE TABLE IF NOT EXISTS `film_list` (
  `FID` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(255) NOT NULL,
  `category` varchar(255) NOT NULL,
  `length` varchar(255) NOT NULL,
  `rating` varchar(255) NOT NULL,
  `price` varchar(255) NOT NULL,
  PRIMARY KEY (`FID`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=9 ;
Insert data
INSERT INTO `film_list` (`FID`, `title`, `category`, `length`, `rating`, `price`) VALUES
(1, 'Final Fantasy', 'Animation', '1:30', 'G', '2.0'),
(2, 'My Sassy Girl', 'Love Story', '1:40', 'G', '2.3'),
(3, 'The Shawshank Redemption', 'Horror', '1:40', 'PG', '3'),
(4, 'The Godfather', 'Drama', '1:60', 'G', '1.3'),
(5, 'Star Wars ', 'Animation', '2:10', 'G', '2'),
(6, 'Shichinin no samurai ', 'Action', '1:10', 'G', '2'),
(7, 'The Matrix', 'Action', '1:25', 'G', '1'),
(8, 'The Lord of the Rings: The Two Towers', 'Action', '2.60', 'G', '2');

Create Table Category
CREATE TABLE IF NOT EXISTS `category` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=9 ;

Insert data category
INSERT INTO `category` (`id`, `name`) VALUES
(1, 'Action'),
(2, 'Animation'),
(3, 'Children'),
(4, 'Comedy'),
(5, 'Drama'),
(6, 'Horror'),
(7, 'Love Story'),
(8, 'Sports');

Create table 
CREATE TABLE IF NOT EXISTS `ci_query` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `query_string` varchar(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=19 ;

Setup base_url
application\config\config.php
$config['base_url']    = 'http://localhost/DEVELOPMENT/CODEIGNATER/';

Create Controller 
application\controllers\films.php

<?php
class Films extends CI_Controller{
 function __construct() {
        parent:: __construct();
        $this->load->helper("url");
  $this->load->model('Film_model');
  $this->load->helper(array('form', 'url'));
    }
 function display($query_id = 0, $sort_by = 'title', $sort_order = 'asc', $offset = 0) {
  $limit = 5;
  $data['fields'] = array(
   'FID' => 'ID',
   'title' => 'Title',
   'category' => 'Category',
   'length' => 'Length',
   'rating' => 'Rating',
   'price' => 'Price'
  );
  
  $this->input->load_query($query_id);
  
  $query_array = array(
   'title' => $this->input->get('title'),
   'category' => $this->input->get('category'),
   'length_comparison' => $this->input->get('length_comparison'),
   'length' => $this->input->get('length'),
  );
  
  $data['query_id'] = $query_id;
  
  $this->load->model('Film_model');
  
  $results = $this->Film_model->search($query_array, $limit, $offset, $sort_by, $sort_order);
  
  $data['films'] = $results['rows'];
  $data['num_results'] = $results['num_rows'];
  
  // pagination
  $this->load->library('pagination');
  $config = array();
  $config['base_url'] = site_url("films/display/$query_id/$sort_by/$sort_order");
  $config['total_rows'] = $data['num_results'];
  $config['per_page'] = $limit;
  $config['uri_segment'] = 6;
  $this->pagination->initialize($config);
  $data['pagination'] = $this->pagination->create_links();
  
  $data['sort_by'] = $sort_by;
  $data['sort_order'] = $sort_order;
  
  $data['category_options'] = $this->Film_model->category_options();
  
  $this->load->view('films', $data);
 }
 function search() {
  $query_array = array(
   'title' => $this->input->post('title'),
   'category' => $this->input->post('category'),
   'length_comparison' => $this->input->post('length_comparison'),
   'length' => $this->input->post('length'),
  );
  
  $query_id = $this->input->save_query($query_array);
  
  redirect("films/display/$query_id");
 }
}

Create Models
application\models\Film_model.php

<?php
class Film_model extends CI_Model {
 function search($query_array, $limit, $offset, $sort_by, $sort_order) {
  $sort_order = ($sort_order == 'desc') ? 'desc' : 'asc';
  $sort_columns = array('FID', 'title', 'category', 'length', 'rating', 'price');
  $sort_by = (in_array($sort_by, $sort_columns)) ? $sort_by : 'title';
  
  // results query
  $q = $this->db->select('FID, title, category, length, rating, price')
   ->from('film_list')
   ->limit($limit, $offset)
   ->order_by($sort_by, $sort_order);
  
  if (strlen($query_array['title'])) {
   $q->like('title', $query_array['title']);
  }
  if (strlen($query_array['category'])) {
   $q->where('category', $query_array['category']);
  }
  if (strlen($query_array['length'])) {
   $operators = array('gt' => '>', 'gte' => '>=', 'eq' => '=', 'lte' => '<=', 'lt' => '<');
   $operator = $operators[$query_array['length_comparison']];
      
   $q->where("length $operator", $query_array['length']);
  }
  
  $ret['rows'] = $q->get()->result();
  
  // count query
  $q = $this->db->select('COUNT(*) as count', FALSE)
   ->from('film_list');
  
  if (strlen($query_array['title'])) {
   $q->like('title', $query_array['title']);
  }
  if (strlen($query_array['category'])) {
   $q->where('category', $query_array['category']);
  }
  if (strlen($query_array['length'])) {
   $operators = array('gt' => '>', 'gte' => '>=', 'eq' => '=', 'lte' => '<=', 'lt' => '<');
   $operator = $operators[$query_array['length_comparison']];
      
   $q->where("length $operator", $query_array['length']);
  }
  
  $tmp = $q->get()->result();
  
  $ret['num_rows'] = $tmp[0]->count;
  
  return $ret;
 }
 function category_options() {
  $rows = $this->db->select('name')
   ->from('category')
   ->get()->result();
  $category_options = array('' => '');
  foreach ($rows as $row) {
   $category_options[$row->name] = $row->name;
  }
  return $category_options;
 }
}

Create View
application\views\films.php

<html lang="en-US">
<head>
 <title>Films</title>
 <meta charset="UTF-8">
 <style>
  * {
   font-family: Arial;
   font-size: 12px;
  }
  table {
   border-collapse: collapse;
  }
  td, th {
   border: 1px solid #666666;
   padding:  4px;
  }
  div {
   margin: 4px;
  }
  .sort_asc:after {
   content: "▲";
  }
  .sort_desc:after {
   content: "▼";
  }
  label {
   display: inline-block;
   width: 120px;
  }
 </style>
</head>
<body>
 <?php echo form_open('films/search'); ?>
  <div>
   <?php echo form_label('Title:', 'title'); ?>
   <?php echo form_input('title', set_value('title'), 'id="title"'); ?>
  </div>
  <div>
   <?php echo form_label('Category:', 'category'); ?>
   <?php echo form_dropdown('category', $category_options, 
    set_value('category'), 'id="category"'); ?>
  </div>
  <div>
   <?php echo form_label('Length:', 'length'); ?>
   <?php echo form_dropdown('length_comparison', 
    array('gt' => '>', 'gte' => '>=', 'eq' => '=', 'lte' => '<=', 'lt' => '<') , 
    set_value('length_comparison'), 'id="length_comparison"'); ?>
   <?php echo form_input('length', set_value('length'), 'id="length"'); ?>
  </div>
  <div>
   <?php echo form_submit('action', 'Search'); ?>
  </div>
 <?php echo form_close(); ?>
 <div>
  Found <?php echo $num_results; ?> films
 </div>
 <table>
  <thead>
   <?php foreach($fields as $field_name => $field_display): ?>
   <th <?php if ($sort_by == $field_name) echo "class=\"sort_$sort_order\"" ?>>
    <?php echo anchor("films/display/$query_id/$field_name/" .
     (($sort_order == 'asc' && $sort_by == $field_name) ? 'desc' : 'asc') ,
     $field_display); ?>
   </th>
   <?php endforeach; ?>
  </thead>
  
  <tbody>
   <?php foreach($films as $film): ?>
   <tr>
    <?php foreach($fields as $field_name => $field_display): ?>
    <td>
     <?php echo $film->$field_name; ?>
    </td>
    <?php endforeach; ?>
   </tr>
   <?php endforeach; ?>   
  </tbody>
  
 </table>
 
 <?php if (strlen($pagination)): ?>
 <div>
  Pages: <?php echo $pagination; ?>
 </div>
 <?php endif; ?>
</body>
</html>

Create file My_Input.php
application\core\My_Input.php

<?php
class MY_Input extends CI_Input {
 function save_query($query_array) {
  $CI =& get_instance();
  $CI->db->insert('ci_query', array('query_string' => http_build_query($query_array)));
  return $CI->db->insert_id();
 }
 function load_query($query_id) {
  $CI =& get_instance();
  $rows = $CI->db->get_where('ci_query', array('id' => $query_id))->result();
  if (isset($rows[0])) {
   parse_str($rows[0]->query_string, $_GET);  
  }
 }
}

View
http://localhost/CODEIGNATER/films/display/