MySandbox » featured http://sandbox.ronggur.com Ronggur Hutasuhut Playground Thu, 15 Apr 2010 08:53:21 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 jQuery Tutorial : Simple ajax star rating with php (extended) http://sandbox.ronggur.com/2010/01/19/jquery-tutorial-simple-ajax-star-rating-with-php-extended/ http://sandbox.ronggur.com/2010/01/19/jquery-tutorial-simple-ajax-star-rating-with-php-extended/#comments Mon, 18 Jan 2010 23:32:41 +0000 ronggur http://sandbox.ronggur.com/?p=186 Yet Another Related Posts Plugin.]]> 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.

3. PHP files (index.php & update.php)

There are some code changes in this files. If in previous post we just need an html file to represent the star rating, now we need php file to do it. Here is full code for index.php and some simple code explanation in it

<!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>jQuery Tutorial : Simple ajax star rating</title>
<meta name="Keywords" content="Star rating, jQuery, ajax">
<meta name="Description" content="jQuery Tutorial : Simple ajax star rating">
<meta http-equiv="Content-Language" content="en">
<meta name="robots" content="index,follow">
<script src="rating/jquery.min.js" type="text/javascript"></script>
<script src="rating/starrating.js" type="text/javascript"></script>
<link href="rating/starrating.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<?php
// include update.php
include_once 'update.php';
// get all data from tabel
$arr_star = fetchStar();
?>
<?php
// start looping datas
foreach($arr_star as $star){ ?>
<h2>Star Rater - <?php echo $star['id'];?></h2>
<ul class='star-rating' id="star-rating-<?php echo $star['id'];?>">
<?php /* getRating($id) is to generate current rating */?>
 <li id="current-rating-<?php echo $star['id'];?>" style="width:<?php echo getRating($star['id'])?>%"><!-- will show current rating --></li>
 <?php
 /* we need to generate 'id' for star rating.. this 'id' will identify which data to execute  */
 /* we will pass it in ajax later */
 ?>
 <span id="<?php echo $star['id'];?>">
 <li><a href="javascript:void(0)" title="1 star out of 5">1</a></li>
 <li><a href="javascript:void(0)" title="2 stars out of 5">2</a></li>
 <li><a href="javascript:void(0)" title="3 stars out of 5">3</a></li>
 <li><a href="javascript:void(0)" title="4 stars out of 5">4</a></li>
 <li><a href="javascript:void(0)" title="5 stars out of 5">5</a></li>
 </span>
</ul>
<?php } ?>
</body>
</html>

And this is for update.php

<?php
// connect to database
$dbh=mysql_connect ("localhost", "user", "password") or die ('Cannot connect to the database');
mysql_select_db ("database",$dbh);

if($_GET['do']=='rate'){
 // do rate and get id
 rate($_GET['id']);
}else if($_GET['do']=='getrate'){
 // get rating and get id
 getRating($_GET['id']);
}

// get data from tabel
function fetchStar(){
 $sql = "select * from `vote`";
 $result=@mysql_query($sql);
 while($rs = @mysql_fetch_array($result,MYSQL_ASSOC)){
 $arr_data[] = $rs;
 }
 return $arr_data;
}

// function to retrieve
function getRating($id){
 $sql= "select * from vote`` where id='".$id."' ";
 $result=@mysql_query($sql);
 $rs=@mysql_fetch_array($result);
 // set width of star
 $rating = (@round($rs[value] / $rs[counter],1)) * 20;
 echo $rating;
}

// function to insert rating
function rate($id){
 $text = strip_tags($_GET['rating']);
 $update = "update `vote` set counter = counter + 1, value = value + ".$_GET['rating']."  where id='".$id."' ";

 $result = @mysql_query($update);
}
?>

4. Javascript

// JavaScript Document
 $(document).ready(function() {
 // get rating function
 function getRating(id){
 $.ajax({
 type: "GET",
 url: "update.php",
 data: "do=getrate&id="+id,
 cache: false,
 async: false,
 success: function(result) {
 // apply star rating to element
 $("#current-rating-"+id+"").css({ width: "" + result + "%" });
 },
 error: function(result) {
 alert("some error occured, please try again later");
 }
 });
 }

 // link handler
 $('.ratelinks li a').click(function(){
 // get the parent id
 var idStar = $(this).parent().parent().attr('id');
 $.ajax({
 type: "GET",
 url: "update.php",
 data: "rating="+$(this).text()+"&do=rate&id="+idStar,
 cache: false,
 async: false,
 success: function(result) {
 // remove #ratelinks element to prevent another rate
 $("#ratelinks").remove();
 // get rating after click
 getRating(idStar);
 },
 error: function(result) {
 alert("some error occured, please try again later");
 }
 });

 });
 });

That’s it! hope it works for you :D . You can add some modification like notification, or loader while processing.

- View Demo

- Download zip file jQuery Tutorial : Simple ajax star rating with php (extended) (319)

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

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

]]> http://sandbox.ronggur.com/2010/01/19/jquery-tutorial-simple-ajax-star-rating-with-php-extended/feed/ 9 New Google search interface http://sandbox.ronggur.com/2009/11/26/new-google-searc-interface/ http://sandbox.ronggur.com/2009/11/26/new-google-searc-interface/#comments Wed, 25 Nov 2009 18:04:35 +0000 ronggur http://sandbox.ronggur.com/?p=177 Yet Another Related Posts Plugin.]]> 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");
  3. Refresh your browser

I get this trick from gizmodo

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

]]> http://sandbox.ronggur.com/2009/11/26/new-google-searc-interface/feed/ 2 How to generate image on the fly with codeIgniter http://sandbox.ronggur.com/2009/11/20/how-to-generate-image-on-the-fly-with-codegniter/ http://sandbox.ronggur.com/2009/11/20/how-to-generate-image-on-the-fly-with-codegniter/#comments Fri, 20 Nov 2009 16:45:27 +0000 ronggur http://sandbox.ronggur.com/?p=165 Yet Another Related Posts Plugin.]]> 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.

2. View

Here is the view code where we will call “get_photo” function


<!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>Code Igniter : Image on the fly</title>
</head>
<body>
<img src="<?php echo base_url().'index.php/preview/get_photo/'.$height.'/'.$width.'' ?>" title="image on the fly" alt="image on the fly" />
</body>
</html>

That’s it

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

]]> http://sandbox.ronggur.com/2009/11/20/how-to-generate-image-on-the-fly-with-codegniter/feed/ 0 3 Ways to Create Round Corner Menu http://sandbox.ronggur.com/2009/09/11/3-ways-to-creat-round-corner-menu/ http://sandbox.ronggur.com/2009/09/11/3-ways-to-creat-round-corner-menu/#comments Fri, 11 Sep 2009 06:34:11 +0000 ronggur http://sandbox.ronggur.com/?p=153 Yet Another Related Posts Plugin.]]> 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

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

]]> http://sandbox.ronggur.com/2009/09/11/3-ways-to-creat-round-corner-menu/feed/ 0 Redesign! http://sandbox.ronggur.com/2009/08/24/redesign/ http://sandbox.ronggur.com/2009/08/24/redesign/#comments Mon, 24 Aug 2009 08:00:29 +0000 ronggur http://sandbox.ronggur.com/?p=136 Yet Another Related Posts Plugin.]]> 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,

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

]]> http://sandbox.ronggur.com/2009/08/24/redesign/feed/ 3