jQuery Tutorial : Simple ajax star rating with php (extended)

Some people ask me question about how to implement my last star rating in multiple star rating, and here is the answer on how to implement it.

1. Upgrade latest table

Since you’ll need to add ‘id’ on multiple record then we need to upgrade the existing table. Here is the full sql

CREATE TABLE IF NOT EXISTS `vote` (
 `id` int(11) NOT NULL auto_increment,
 `desc` varchar(50) NOT NULL,
 `counter` int(8) NOT NULL default '0',
 `value` int(8) NOT NULL default '0',
 PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

--
-- Dumping data for table `vote`
--

INSERT INTO `vote` (`id`, `desc`, `counter`, `value`) VALUES
(1, 'star - 1', 0, 0),
(2, 'star - 2', 0,0);

2. CSS

We still can stylesheet from the previous post. No need to modify it.

Continue reading

You can give me some coffee if you want to :D

New Google search interface

Have you tried the new google search intrerface? here i put the screenshot

google
google search new interface

This interface isn’t officially launch, so you need do simple trick to view it.

  1. Visit http://google.com
  2. On your url address field type in this code
  3. 
    javascript:void(document.cookie="PREF=ID=20b6e4c2f44943bb:U=4bf292d46faad806:TM=1249677602:LM=1257919388:S=odm0Ys-53ZueXfZG;path=/; domain=.google.com");
    
    
  4. Refresh your browser

I get this trick from gizmodo

How to generate image on the fly with codeIgniter

This post is talking about how to generate image on the fly with codeigniter. This is the basic code and sure you can improve it as you far as you need, All we need is only 1 controller and 1 view

1. Controller

Create controller and named it “preview”, we also need function in it to call the image class. See the script below


< ?php

class preview extends Controller {

function preview()
{
parent::Controller();
$this->load->helper('url');
}

function index($height='50',$width='50')
{

// we will need to pass the height and with of the image
$arr_data['height']    =    $height;
$arr_data['width']    =    $width;
$this->load->view('preview', $arr_data);
}

function get_photo($height,$width){
$path = [ absolute path to your image ex : /public-html/dock/image.jpg ];
$this->load->library('image_lib');
$imageinit['image_library']     = 'gd2';
$imageinit['quality']            = '90%'; // set quality
$imageinit['dynamic_output']    = true;     // set to true to generate it dynamically
$imageinit['source_image']         = $path;
$imageinit['maintain_ratio']     = false;
$imageinit['width']             = $width;
$imageinit['height']             = $height;
$this->image_lib->initialize($imageinit);
if(!$this->image_lib->resize()){
echo $this->image_lib->display_errors(); // print error if it fails
}
}
}

?>

“get_photo” function is where we will generate the image dynamically. We call this function in <img> html tag in “view” file.

Continue reading

3 Ways to Create Round Corner Menu

There are 3 ways (as far as i knows) to create round corner menu, by image and css, css property and javascript. And in this post we’ll try to create in that 3 different ways. Actually this is some old issue but maybe one of you will need it someday :D. So let’s start it

1. CSS Property

By adding -moz-border-radius’ for FF or -webkit-border-radius’ for Safari, ucan create round corner element. Comparing to other maybe this one is the lightest and easiest way to create round corner element. Here is some example how to use it

applying bottom left


-moz-border-radius-bottomleft:7px;

applying bottom right


-moz-border-radius-bottomright:7px;

applying top left


-moz-border-radius-topleft:7px;

applying top right


-moz-border-radius-topright:7px

applying all corner


-moz-border-radius:7px;

So far i only know that this technique only works for Firefox and Safari. Remember that ‘-moz-border-radius’ is works for Firefox and -webkit-border-radius’ for safari

view demo (all corner)

2. Javascript

By using some javascript function or plugin we can create round corner element. So far if i need it i use jquery corner you can download this plugin here http://malsup.com/jquery/corner/jquery.corner.js?v1.99. The best thing using this plugin, you can create diffent shape for corner, not only round. And it have good browser compatibility.

Here is basic sample how to use it.


jQuery(document).ready(function(){

$("#nav li").corner("7px");
});

view demo . For complete example, please visit the official site.

3. Image and CSS

In this part we use images as background to create the menu. We slice rounded images into 2 parts. First is for the left side and the other is for the righ side (see picture)

One of the image will wider than the other, in this example we create the left side wider than the right one.

Images slice for menu
Images slice for menu

As you see at image above, we will put the wider background in <li> and make the left side menu looks round. Then we put the right side in <a>. Don’t forget to make <li> and <a> have the same height so the round corner will look perfect (use padding to adjust it). Here is the the css code

ul,ol{
padding: 10px 10px;
margin-left:10px;
}
ul li {
list-style: decimal inside;
list-style:none !important;
}

#nav {
margin:0;
padding0;
overflow:hidden;
float:left;
position:relative;
}
#nav li{
float:left;
margin:0;
text-align:center;
height:32px;
margin-right:10px;
background:transparent url('images/menuleft_bg.jpg') left bottom no-repeat;
}

#nav li a{
margin:0;
height:16px;
display:block;
vertical-align:middle;
padding:8px 10px;
background:transparent url('images/menuright_bg.jpg') right bottom no-repeat;
}

view demo

Thats it, thanks for visiting my sandbox :D

You can give me some coffee if you want to :D

Redesign!

Humble - New Deesing for my sandbox
Humble - New Deesing for my sandbox

Finally i finished designing new theme for my sandbox . This design is based on my submission for a wp theme contest view months ago and with some modifications. I named it “Humble”

This theme comes with featured post feature that attached at the first page, dynamic thumbnail feature, and background image feature for post and one widget ready at sidebar. I planning to release this theme for free and of course with some more features and theme customization.

Anyway this theme tested in firefox 3.5, safari 4, chrome, opera,

Google Maps : Pointing and get your marker location

In this post i want to try give some simple script to get your marker location in google maps. Next we will ceate one marker and when you drag and drop it, you’ll get the position of the marker ( latitude and langitude ). You can use this kind of script if you want to add google maps feature in to your websites and want to point position and save it in to your database

Image Preview
Image Preview

As usual we’ll use jQuery to give some little help. Lets start

1. HTML & PHP files

You can copy html below. Make sure you already have key for your google maps and use your own key :D. And also don’t forget to include jQuery library.

To get the current position of the marker, we will use hidden intput to store the position temporary before we post it to php file.


< !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=iso-8859-1" />
<title>Google Map in Learning</title>
<link href="styles/style.css" type="text/css" media="screen" rel="stylesheet" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="http://maps.google.com/maps?file=api&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;v=2&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;sensor=false&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;key=ABQIAAAAYeuJd8iDXzlrlsewUFBcLhQCLRJBQIjl4T4yd7P58JjfH0ny1BRyKA-JaUsGkxqxnC7LUYx0xI7rAQ" type="text/javascript"></script>
<script src="js/addmarker.js"  type="text/javascript"></script>
</head>
<body>
<div id="wrapper_map">
<div id="map_canvas" style="width: 640px; height: 300px"></div>
<div id="wrapper_form">
<p><strong>Your Location : </strong></p>
<p>Latitude : <span id="sLat"></span></p>
<p>Longitude : <span id="sLng"></span></p>
<form name="fLocation" id="fLocation" method="post" action="post.php">
<input type="hidden" name="lat" id="lat" value="" />
<input type="hidden" name="lng" id="lng" value="" />
<input type="submit" value="Save" />
</form>
</div>
</div>
</body>
</html>

Next is one line php script and named it ‘post.php’, this script just to show that your post data from html is work.


var_dump($_POST);

Continue reading

You can give me some coffee if you want to :D