article

Friday, October 25, 2013

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;
}

Wednesday, October 9, 2013

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;
}

Monday, October 7, 2013

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 */
}

Saturday, September 7, 2013

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>

Monday, September 2, 2013

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>

Saturday, August 31, 2013

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;
    }

}

?>

Sunday, August 25, 2013

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";

Saturday, August 24, 2013

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>

Friday, August 23, 2013

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/

Login Register using codeigniter

Login Register using codeigniter

Create database table 
CREATE TABLE IF NOT EXISTS `membership` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `first_name` varchar(255) NOT NULL,
  `last_name` varchar(255) NOT NULL,
  `email_address` varchar(255) NOT NULL,
  `username` varchar(255) NOT NULL,
  `password` varchar(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;

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

setup routes
application\config\routes.php
$route['default_controller'] = "login_register";

Create Controller
application\controllers\login_register.php

<?php
class Login_register extends CI_Controller{
 function __construct()
  {
   parent::__construct();
    $this->load->helper(array('form', 'url'));
  }
 function index($msg = NULL)
 {
  $data['msg'] = $msg;
  $data['main_content'] = 'login_form';
  $this->load->view('includes/template', $data); 
  
  
 } 
 function validate_credentials()
 {  
  $this->load->model('membership_model');
  $query = $this->membership_model->validate();
  
  if($query) // if the user's credentials validated...
  {
   $data = array(
    'username' => $this->input->post('username'),
    'is_logged_in' => true
   );
   $this->session->set_userdata($data);
   redirect('Login_register/logged_in_area');
  }
  else // incorrect username or password
  {
   $msg = '<p class=error>Invalid username and/or password.</p>';
            $this->index($msg);
  }
 } 
 
 function signup()
 {
  $data['main_content'] = 'signup_form';
  $this->load->view('includes/template', $data);
 }
 function logged_in_area()
 {
  $data['main_content'] = 'logged_in_area';
  $this->load->view('includes/template', $data);
 }
 
 function create_member()
 {
  $this->load->library('form_validation');
  
  // field name, error message, validation rules
  $this->form_validation->set_rules('first_name', 'Name', 'trim|required');
  $this->form_validation->set_rules('last_name', 'Last Name', 'trim|required');
  $this->form_validation->set_rules('email_address', 'Email Address', 'trim|required|valid_email');
  $this->form_validation->set_rules('username', 'Username', 'trim|required|min_length[4]');
  $this->form_validation->set_rules('password', 'Password', 'trim|required|min_length[4]|max_length[32]');
  $this->form_validation->set_rules('password2', 'Password Confirmation', 'trim|required|matches[password]');
  
  
  if($this->form_validation->run() == FALSE)
  {
   $this->load->view('signup_form');
  }
  
  else
  {   
   $this->load->model('membership_model');
   
   if($query = $this->membership_model->create_member())
   {
    $data['main_content'] = 'signup_successful';
    $this->load->view('includes/template', $data);
   }
   else
   {
    $this->load->view('signup_form');   
   }
  }
  
 }
 
 function logout()
 {
  $this->session->sess_destroy();
  $this->index();
 }

}
Create Modal
application\models\membership_model.php
<?php
class Membership_model extends CI_Model {
 function validate()
 {
  $this->db->where('username', $this->input->post('username'));
  $this->db->where('password', md5($this->input->post('password')));
  $query = $this->db->get('membership');
  
  if($query->num_rows == 1)
  {
   return true;
  }
  
 }
 function create_member()
 {
  $new_member_insert_data = array(
   'first_name' => $this->input->post('first_name'),
   'last_name' => $this->input->post('last_name'),
   'email_address' => $this->input->post('email_address'),   
   'username' => $this->input->post('username'),
   'password' => md5($this->input->post('password'))      
  );
  
  $insert = $this->db->insert('membership', $new_member_insert_data);
  return $insert;
 }
}
Create View
application\views\login_form.php
<?php $this->load->view('includes/header'); ?>
<div id="login_form">
 <h1>Login</h1>
 <?php if(! is_null($msg)) echo $msg;?>  
    <?php 
 echo form_open('Login_register/validate_credentials');
 echo form_input('username', 'Username');
 echo form_password('password', 'Password');
 echo form_submit('submit', 'Login');
 echo anchor('Login_register/signup', 'Create Account','style=padding-left:10px;');
 echo form_close();
 ?>
</div>
<?php $this->load->view('includes/tutorial_info'); ?>
<?php $this->load->view('includes/footer'); ?>
Create View
application\views\includes\header.php
<html lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 <title>Sign Up!</title>
 <link rel="stylesheet" href="<?php echo base_url();?>/css/style.css" type="text/css" media="screen" />
</head>
<body>
Create View
application\views\includes\tutorial_info.php
<div>created by <a href="http://tutorial101.blogspot.com/">http://tutorial101.blogspot.com/</a></div>
Create View
application\views\includes\template.php
<?php $this->load->view('includes/header'); ?>
<?php $this->load->view($main_content); ?>
<?php $this->load->view('includes/footer'); ?>
Create View
application\views\includes\footer.php
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script> 
 <script type="text/javascript" charset="utf-8">
  $('input').click(function(){
   $(this).select(); 
  });
 </script>
</body>
</html>
Create View
application\views\signup_form.php
<?php $this->load->view('includes/header'); ?>
<h1>Create an Account!</h1>
<fieldset>
<legend>Personal Information</legend>
<?php
echo form_open('Login_register/create_member');
echo form_input('first_name', set_value('first_name', 'First Name'));
echo form_input('last_name', set_value('last_name', 'Last Name'));
echo form_input('email_address', set_value('email_address', 'Email Address'));
?>
</fieldset>

<fieldset>
<legend>Login Info</legend>
<?php
echo form_input('username', set_value('username', 'Username'));
echo form_input('password', set_value('password', 'Password'));
echo form_input('password2', 'Password Confirm');

echo form_submit('submit', 'Create Acccount');
?>
<?php echo validation_errors('<p class="error">'); ?>
</fieldset>
<?php $this->load->view('includes/tutorial_info'); ?>
<?php $this->load->view('includes/footer'); ?>
Create View
application\views\signup_successful.php
<h1>Congrats!</h1>
<p>Your account has not been created. <?php echo anchor('Login_register', 'Login Now');?></p>
Create View
application\views\logged_in_area.php
<html lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 <title>Login Regsiter codeigniter</title>
</head>
<body>
 <h2>Welcome Back, <?php echo $this->session->userdata('username'); ?>!</h2>
     <p>This section represents the area that only logged in members can access.</p>
 <h4><?php echo anchor('Login_register/logout', 'Logout'); ?></h4>
</body>
</html> 
Create folder name css root directory
css\style.css
body {
 background: #b6b6b6;
 margin: 0;
 padding: 0;
 font-family: arial;
}

#login_form {
 width: 300px;
 margin: 10px auto 0;
 padding: 1em;
 border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;
 background-color: #EBF8D6;
 border: 1px solid #A6DD88;
 color: #539B2D;
}
h1,h2,h3,h4,h5 {
 margin-top: 0;
 font-family:Arial, Lucida Grande, Verdana, Sans-serif;font-size:22px;color:#000;
 text-align: center;
}
input[type=text], input[type=password] {
 display: block;
 margin: 0 0 1em 0;
 width: 280px;
 border: 5px;
 -moz-border-radius: 1px;
 -webkit-border-radius: 1px;
 padding: 1em;
 border: 1px solid #CCCCCC;
}
input[type=submit] {
 border:1px outset #ccc;padding:5px 2px 4px;color:#fff;min-width: 100px;text-align: center;cursor:pointer;background:#729e01;background:-webkit-gradient(linear, left top, left bottom,from(#a3d030),to(#729e01));background:-moz-linear-gradient(top,#a3d030,#729e01);background:-o-linear-gradient(top,#a3d030,#729e01);background:linear-gradient(top,#a3d030,#729e01);-moz-border-radius:7px; -webkit-border-radius:7px;
}
input[type=submit]:hover {
 background: #6B8426;
 cursor: pointer;
}
/* Validation error messages */
.error {
 background-color: #FFECE6;
 border: 1px solid #FF936F;
 color: #842100;
 background-image: url(../img/delete00.png);
 
 background-repeat: no-repeat;
 background-position: 10px center;
 height: 20px;
 text-transform: uppercase;
 font-size: 11px;
 line-height: 22px;
 margin-bottom: 20px;
 padding-top: 10px;
 padding-right: 10px;
 padding-bottom: 10px;
 padding-left: 50px;
}

fieldset {
 width: 300px;
 margin: auto;
 margin-bottom: 2em;
 display: block;
}
create folder name img root directory View http://localhost/CODEIGNATER/Login_register/

Download http://bit.ly/2DF6FJP

Wednesday, August 21, 2013

Build ajax data grids with codeigniter and jquery

Build ajax data grids with codeigniter and jquery

Create database table
CREATE TABLE IF NOT EXISTS `users_01` (
  `user_id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(20) DEFAULT NULL,
  `password` varchar(20) DEFAULT NULL,
  `user_type` enum('regular','admin') NOT NULL DEFAULT 'regular',
  `email` varchar(255) NOT NULL,
  PRIMARY KEY (`user_id`),
  UNIQUE KEY `username` (`username`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=72 ;

setup baseurl
application\config\config.php
$config['base_url']    = 'http://localhost/codeigniter/';

setup route
application\config\routes.php
$route['default_controller'] = "test";

Create Controller

//application\controllers\test.php
<?php
//application\controllers\test.php
class Test extends CI_Controller{
 function __construct(){
  parent::__construct();
  $this->load->helper(array('datagrid','url'));
  $this->Datagrid = new Datagrid('users_01','user_id');
 }
 
 function index(){
  $this->load->helper('form');
  $this->load->library('session');
  $this->load->view('users');
 }
 
 function proc($request_type = ''){
  $this->load->helper('url');
  if($action = Datagrid::getPostAction()){
   $error = "";
   switch($action){
    case 'delete' :
     if(!$this->Datagrid->deletePostSelection()){
      $error = 'Items could not be deleted';
     }
    break;
   }
   if($request_type!='ajax'){
    $this->load->library('session');
    $this->session->set_flashdata('form_error',$error);
    redirect('test/index');
   } else {
    echo json_encode(array('error' => $error));
   }
  } else {
   die("Bad Request");
  }
 }
}
?>
Create View
//application\views\user.php
<html>
<head>
 <title>Users Management</title>
 <script src="<?php echo base_url(); ?>js/jquery-1.6.3.min.js"></script>
 <script src="<?php echo base_url(); ?>js/datagrid.js"></script>
</head>
<body>
<style>
 .dg_form table{
  border:1px solid silver;
 }
 
 .dg_form th{
  background-color:gray;
  font-family:"Courier New", Courier, mono;
  font-size:12px;
 }
 
 .dg_form td{
  background-color:gainsboro;
  font-size:12px;
 }
 
 .dg_form input[type=submit]{
  margin-top:2px;
 }
</style>
<?php
  $this->Datagrid->hidePkCol(true);
  $this->Datagrid->setHeadings(array('email'=>'E-mail'));
  $this->Datagrid->ignoreFields(array('password'));
  if($error = $this->session->flashdata('form_error')){
   echo "<font color=red>$error</font>";
  }
  echo form_open('test/proc',array('class'=>'dg_form'));
  echo $this->Datagrid->generate();
  echo Datagrid::createButton('delete','Delete');
  echo form_close();
?>
</body>
</html>
Create javascript root directory js folder
//js/datagrid.js
$(function(){
   $('.dg_form :submit').click(function(e){
    e.preventDefault();
    var $form = $(this).parents('form');
    var action_name = $(this).attr('class').replace("dg_action_","");
    var action_control = $('<input type="hidden" name="dg_action['+action_name+']" value=1 />');
    
    $form.append(action_control);
    
    var post_data = $form.serialize();
    action_control.remove();
    
    var script = $form.attr('action')+'/ajax';
    $.post(script, post_data, function(resp){
     if(resp.error){
      alert(resp.error);
     } else {
      switch(action_name){
       case 'delete' :
        // remove deleted rows from the grid
        $form.find('.dg_check_item:checked').parents('tr').remove();
       break;
       case 'anotherAction' :
        // do something else...
       break;
      }
     }
    })
   })
   
   $('.dg_check_toggler').click(function(){
    var checkboxes = $(this).parents('table').find('.dg_check_item');
    if($(this).is(':checked')){
     checkboxes.attr('checked','true');
    } else {
     checkboxes.removeAttr('checked');
    }
   })
   
   
  })

CodeIgniter Shopping Cart

CodeIgniter Shopping Cart

Create Database table

CREATE TABLE IF NOT EXISTS `products` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `qty` int(11) NOT NULL,
  `price` int(11) NOT NULL,
  `name` varchar(255) NOT NULL,
  `image` varchar(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

INSERT INTO `products` (`id`, `qty`, `price`, `name`, `image`) VALUES
(1, 10, 500, 'Samsung Galaxy S 2', 'galaxys2.jpg'),
(2, 20, 600, 'Samsung Galaxy S 3', 'galaxys3.jpg');

Setup baseurl application\config\config.php
$config['base_url'] = "http://localhost/codeignater/";

Set route application\config\routes.php
$route['default_controller'] = "cart";

Create Controller
//application/controllers/cart.php
<?php
class Cart extends Controller { 

 function Cart()
 {
  parent::Controller(); // We define the the Controller class is the parent. 
  $this->load->model('cart_model'); // Load our cart model for our entire class
 }
 
 function index()
 {
  $data['products'] = $this->cart_model->retrieve_products(); // Retrieve an array with all products
  
  $data['content'] = 'cart/products'; // Select view to display
  $this->load->view('index', $data); // Display the page
 }
 
 function add_cart_item(){
  
  if($this->cart_model->validate_add_cart_item() == TRUE){
   
   // Check if user has javascript enabled
   if($this->input->post('ajax') != '1'){
    redirect('cart'); // If javascript is not enabled, reload the page with new data
   }else{
    echo 'true'; // If javascript is enabled, return true, so the cart gets updated
   }
  }
  
 }
 
 function update_cart(){
  $this->cart_model->validate_update_cart();
  redirect('cart');
 }
 
 function show_cart(){
  $this->load->view('cart/cart');
 }
 
 function empty_cart(){
  $this->cart->destroy();
  redirect('cart');
 }
}
Create Model
///application/models/cart_model.php
<?php 
class Cart_model extends Model {

 // Function to retrieve an array with all product information
 function retrieve_products(){
  $query = $this->db->get('products');
  return $query->result_array();
 }
 
 // Updated the shopping cart
 function validate_update_cart(){
  
  // Get the total number of items in cart
  $total = $this->cart->total_items();
  
  // Retrieve the posted information
  $item = $this->input->post('rowid');
     $qty = $this->input->post('qty');

  // Cycle true all items and update them
  for($i=0;$i < $total;$i++)
  {
   // Create an array with the products rowid's and quantities. 
   $data = array(
               'rowid' => $item[$i],
               'qty'   => $qty[$i]
            );
            
            // Update the cart with the new information
   $this->cart->update($data);
  }

 }
 
 // Add an item to the cart
 function validate_add_cart_item(){
  
  $id = $this->input->post('product_id'); // Assign posted product_id to $id
  $cty = $this->input->post('quantity'); // Assign posted quantity to $cty
  
  $this->db->where('id', $id); // Select where id matches the posted id
  $query = $this->db->get('products', 1); // Select the products where a match is found and limit the query by 1
  
  // Check if a row has been found
  if($query->num_rows > 0){
  
   foreach ($query->result() as $row)
   {
       $data = array(
                 'id'      => $id,
                 'qty'     => $cty,
                 'price'   => $row->price,
                 'name'    => $row->name
             );

    $this->cart->insert($data); 
    
    return TRUE;
   }
  
  // Nothing found! Return FALSE! 
  }else{
   return FALSE;
  }
 }
}
Create view index
//application\views\index.php
<html>
<head>
<title>CodeIgniter Shopping Cart</title>
<link href="<?php echo base_url(); ?>assets/css/core.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/core.js"></script>
</head>
<body>
<div id="wrap">
 <?php $this->view($content); ?>
 <div class="cart_list">
  <h3>Your shopping cart</h3>
  <div id="cart_content">
   <?php echo $this->view('cart/cart.php'); ?>
  </div>
 </div>
</div>
</body>
</html>
Create view cart.php
//application\views\cart\cart.php
<?php if(!$this->cart->contents()):
 echo 'You don\'t have any items yet.';
else:
?>

<?php echo form_open('cart/update_cart'); ?>
<table width="100%" cellpadding="0" cellspacing="0">
 <thead>
  <tr>
   <td>Qty</td>
   <td>Item Description</td>
   <td>Item Price</td>
   <td>Sub-Total</td>
  </tr>
 </thead>
 <tbody>
  <?php $i = 1; ?>
  <?php foreach($this->cart->contents() as $items): ?>
  
  <?php echo form_hidden('rowid[]', $items['rowid']); ?>
  <tr <?php if($i&1){ echo 'class="alt"'; }?>>
     <td>
      <?php echo form_input(array('name' => 'qty[]', 'value' => $items['qty'], 'maxlength' => '3', 'size' => '5')); ?>
     </td>
     
     <td><?php echo $items['name']; ?></td>
     
     <td>$<?php echo $this->cart->format_number($items['price']); ?></td>
     <td>$<?php echo $this->cart->format_number($items['subtotal']); ?></td>
    </tr>
    
    <?php $i++; ?>
  <?php endforeach; ?>
  
  <tr>
   <td</td>
     <td></td>
     <td><strong>Total</strong></td>
     <td>$<?php echo $this->cart->format_number($this->cart->total()); ?></td>
  </tr>
 </tbody>
</table>

<p><?php echo form_submit('', 'Update your Cart'); echo anchor('cart/empty_cart', 'Empty Cart', 'class="empty"');?></p>
<p><small>If the quantity is set to zero, the item will be removed from the cart.</small></p>
<?php 
echo form_close(); 
endif;
?>
Create View Product.php
//application\views\cart\products.php
<ul class="products">
 <?php foreach($products as $p): ?>
 <li>
  <h3><?php echo $p['name']; ?></h3>
  <img src="<?php echo base_url(); ?>assets/img/products/<?php echo $p['image']; ?>" alt="" />
  <small>$<?php echo $p['price']; ?></small>
  <?php echo form_open('cart/add_cart_item'); ?>
   <fieldset>
    <label>Quantity</label>
    <?php echo form_input('quantity', '1', 'maxlength="2"'); ?>
    <?php echo form_hidden('product_id', $p['id']); ?>
    <?php echo form_submit('add', 'Add'); ?>
   </fieldset>
  <?php echo form_close(); ?>
 </li>
 <?php endforeach;?>
</ul>
Create CSS core.css in root directory assets\css\core.css
body{
 font-family: "Lucida Sans";
 font-size: 12px;
}

#wrap{
 width: 1024px;
}

ul.products{
 list-style-type: none;
 width: 525px;
 margin: 0;
 padding: 0;
}

 ul.products li{
  background: #eeeeee;
  border: 1px solid #d3d3d3;
  padding: 5px;
  width: 150px;
  text-align: center;
  float: left;
  margin-right: 10px;
 }

 ul.products h3{
  margin: 0;
  padding: 0px 0px 5px 0px;
  font-size: 14px;
 }
 
 ul.products small{
  display: block;
 }
 
 ul.products form fieldset{
  border: 0px;
 }
 
 ul.products form label{
  font-size: 12px;
 }
 
 ul.products form input[type=text]{
  width: 18px;
  background: #FFF;
  border: 1px solid #d3d3d3;
 }
div.cart_list{
 background: #eeeeee;
 border: 1px solid #d3d3d3;
 padding: 5px;
 float: left; 
 width: 490px;
}

 div.cart_list h3{
  margin: 0 0 10px 0;
  padding: 0;
  font-size: 14px;
 }
 
 div.cart_list table thead tr td{
  border-bottom: 1px solid #d3d3d3;
  padding: 5px;
 }
 
 div.cart_list table tbody tr td{
  padding: 5px;
 }
 
 div.cart_list table tbody tr td input[type=text]{
  background: #FFF;
  border: 1px solid #d3d3d3;
  width: 25px;
 }
 
 div.cart_list table tbody tr.alt{
  background: #f5f5f5;
 }
Create folder for image root directory assets\img\products\galaxys2.jpg, assets\img\products\galaxys3.jpg Create javascript file assets\js\core.js
$(document).ready(function() { 
 /*place jQuery actions here*/ 
 var link = "/codeignater/index.php/";
 
 
 $("ul.products form").submit(function() {
  // Get the product ID and the quantity 
  var id = $(this).find('input[name=product_id]').val();
  var qty = $(this).find('input[name=quantity]').val();
  
   $.post(link + "cart/add_cart_item", { product_id: id, quantity: qty, ajax: '1' },
     function(data){
     
     if(data == 'true'){
       
       $.get(link + "cart/show_cart", function(cart){
       $("#cart_content").html(cart);
    });

      }else{
       alert("Product does not exist");
      } 
      
    }); 

  return false;
 });
 
 $(".empty").live("click", function(){
     $.get(link + "cart/empty_cart", function(){
      $.get(link + "cart/show_cart", function(cart){
      $("#cart_content").html(cart);
   });
  });
  
  return false;
    });

});

CSS Drop Down Menu

CSS Drop Down Menu

Save image 
 
<style type="text/css">
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
  margin: 0;
  padding: 0;
  position: relative;
}
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}
#cssmenu a {
  color: #ffffff;
  display: inline-block;
  font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
  font-size: 12px;
  min-width: 35px;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 -1px 0 #333333;
}
#cssmenu ul {
  list-style: none;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu > ul > li.active a {
  background: #646464 url(menu_assets/images/grad_dark.png) repeat-x left bottom;
  background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(100%, #4a4a4a));
  background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 100%);
  background: -o-linear-gradient(top, #646464 0%, #4a4a4a 100%);
  background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 100%);
  background: linear-gradient(to bottom, #646464 0%, #4a4a4a 100%);
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#646464', endColorstr='#4a4a4a', GradientType=0);
  box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222;
  -moz-box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222;
  -webkit-box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222;
  filter: none;
}
#cssmenu > ul > li.active a:hover {
  background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(100%, #4a4a4a));
  background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 100%);
  background: -o-linear-gradient(top, #646464 0%, #4a4a4a 100%);
  background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 100%);
  background: linear-gradient(to bottom, #646464 0%, #4a4a4a 100%);
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#646464', endColorstr='#4a4a4a', GradientType=0);
  filter: none;
}
#cssmenu > ul > li a {
  box-shadow: inset 0 0 0 1px #8a8a8a;
  -moz-box-shadow: inset 0 0 0 1px #8a8a8a;
  -webkit-box-shadow: inset 0 0 0 1px #8a8a8a;
  background: #4a4a4a url(images/grad_dark.png) repeat-x left top;
  background: -moz-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8a8a8a), color-stop(50%, #707070), color-stop(51%, #626262), color-stop(100%, #787878));
  background: -webkit-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
  background: -o-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
  background: -ms-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
  background: linear-gradient(to bottom, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a', endColorstr='#787878', GradientType=0);
  border-bottom: 1px solid #5d5d5d;
  border-top: 1px solid #5d5d5d;
  border-right: 1px solid #5d5d5d;
  line-height: 34px;
  padding: 0 35px;
  filter: none;
}
#cssmenu > ul > li a:hover {
  background: #8a8a8a url(images/grad_dark.png) repeat-x left bottom;
  background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(50%, #4a4a4a), color-stop(51%, #3b3b3b), color-stop(100%, #525252));
  background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
  background: -o-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
  background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
  background: linear-gradient(to bottom, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a', endColorstr='#787878', GradientType=0);
  filter: none;
}
#cssmenu > ul > li:first-child a {
  border-radius: 5px 0 0 5px;
  -moz-border-radius: 5px 0 0 5px;
  -webkit-border-radius: 5px 0 0 5px;
  border-left: 1px solid #5d5d5d;
}
#cssmenu > ul > li:last-child a {
  border-radius: 0 5px 5px 0;
  -moz-border-radius: 0 5px 5px 0;
  -webkit-border-radius: 0 5px 5px 0;
}
#cssmenu .has-sub:hover ul {
  display: block;
}
#cssmenu .has-sub ul {
  display: none;
  position: absolute;
  top: 36px;
  left: -1px;
  min-width: 100%;
  text-align: center;
  /* IE7 */

  *width: 100%;
}
#cssmenu .has-sub ul li {
  text-align: center;
}
#cssmenu .has-sub ul li a {
  border-top: 0 none;
  border-left: 1px solid #5d5d5d;
  display: block;
  line-height: 120%;
  padding: 9px 5px;
  text-align: center;
}
</style>
<div id='cssmenu'>
<ul>
   <li class='active '><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub '><a href='#'><span>Products</span></a>
      <ul>
         <li><a href='#'><span>Product 1</span></a></li>
         <li><a href='#'><span>Product 2</span></a></li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>
</ul>
</div>

Related Post