MySandbox

Houston, We’ve Got a Problem

ronggur — Tue, 02 Feb 2010 08:00:50 +0000

houston we've got problem

Last nite i found my blog down for several hours, i don’t know what happened and now it’s up again but unfortunately there are some comments lost (sorry). But it’s okay since i’, not losing the whole database

images taken from here

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

ronggur — Mon, 18 Jan 2010 23:32:41 +0000

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





jQuery Tutorial : Simple ajax star rating











Star Rater - 


 
 
 
 1
 2
 3
 4
 5

And this is for update.php

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 . 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) (75)

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

New Google search interface

ronggur — Wed, 25 Nov 2009 18:04:35 +0000

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

google search new interface

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

Visit http://google.com
On your url address field type in this code


javascript:void(document.cookie="PREF=ID=20b6e4c2f44943bb:U=4bf292d46faad806:TM=1249677602:LM=1257919388:S=odm0Ys-53ZueXfZG;path=/; domain=.google.com");

Refresh your browser

I get this trick from gizmodo

How to generate image on the fly with codeIgniter

ronggur — Fri, 20 Nov 2009 16:45:27 +0000

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


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 html tag in “view” file.

2. View

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






Code Igniter : Image on the fly


" title="image on the fly" alt="image on the fly" />

That’s it

View demo
Download source (only controller and view) : Image on the fly with codeigniter (29)

3 Ways to Create Round Corner Menu

ronggur — Fri, 11 Sep 2009 06:34:11 +0000

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 . 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

As you see at image above, we will put the wider background in

and make the left side menu looks round. Then we put the right side in . Don’t forget to make

and 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

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

Redesign!

ronggur — Mon, 24 Aug 2009 08:00:29 +0000

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,

The difference between real news portal and news-ads portal

ronggur — Fri, 14 Aug 2009 21:48:01 +0000

the difference

See?

Google Maps : Pointing and get your marker location

ronggur — Sat, 01 Aug 2009 11:13:44 +0000

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

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 . 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.






Google Map in Learning









Your Location : 
Latitude : 
Longitude :

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

2. JavaScript

Lets create addmarker.js. Here is the code, i put some comment above the line


$(document).ready(function() {
$("#wrapper_map").width($("#map_canvas").width());
// initialize default lat &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp; lang in this case i set to Indonesia

var indLat = -2;
var indLng = 120;

// setup default position into text and hidden input

$("#sLat").text(indLat);
$("#sLng").text(indLng);
$("#lat").val(indLat);
$("#lng").val(indLng);

// start setup google maps

var map = new GMap2(document.getElementById("map_canvas"));
var center = new GLatLng(indLat, indLng);
map.setCenter(center, 4);
map.setUIToDefault();

var marker = new GMarker(center, { draggable: true });

GEvent.addListener(marker, "dragstart", function() {
map.closeInfoWindow();
});

// a listener to get current position and store it to hidden input in html

GEvent.addListener(marker, "dragend", function() {
// latitude
$("#sLat").text(roundNumber(getObjectLoc(marker, 'lat'), 5));
// store it temporary in hidden input (lat)
$("#lat").val(getObjectLoc(marker, 'lat'));
// longitude
$("#sLng").text(roundNumber(getObjectLoc(marker, 'lang'), 5));
// store it temporary in hidden input (lng)
$("#lng").val(getObjectLoc(marker, 'lang'));
});

// adding marker
map.addOverlay(marker);
// end setup google maps

// fungction to get the marker posistion

getObjectLoc = function(object, type){
var objectLoc = '';
if(type=='lat'){
objectLoc = object.getLatLng().lat();
}else{
objectLoc = object.getLatLng().lng();
}

return objectLoc;
}

// just round your position if you think it is too long to show

roundNumber = function(rnum, rlength) {
newnumber = Math.round(rnum*Math.pow(10,rlength))/Math.pow(10,rlength);
return newnumber;
}
});

That’s all. So when you press ‘Save’ button it should print out your current marker position.

- View Demo

- Download file Google Maps : Pointing and get your marker location (50)

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

Understanding Flow Charts

ronggur — Tue, 09 Jun 2009 06:21:19 +0000

Can’t read or understand flow charts? hope it will help you :p

jQuery Tutorial : Simple ajax star rating with php

ronggur — Sat, 30 May 2009 03:08:11 +0000

I made this simple ajax star rating for my latest poject. And now i want to share it to you. Let’s start it .

Step 1 : CSS Star Rater

First thing is the star rater. I got this cool ‘css star rater’ from http://www.komodomedia.com/ . I assumed that we already understood how to use it, so we will not talk too much about this ‘css star rater’.

Step 2 : Create MySQL table

Next is create table (using MySQL) to store the data. You can copy the script below


CREATE TABLE IF NOT EXISTS `vote` (
`counter` int(8) NOT NULL default '0',
`value` int(8) NOT NULL default '0'
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

Step 3 : PHP

After finished create table, then we can start create some php code to handle input, update and retrieve data from the database, here is the code. I added some important comment in it

Step 4 : JavaScript

Next thing is javascript code. Below is the code, you can put this code between tag or put it in separated javascript file.

Don’t forget to link the jquery library into your document

Step 5 : Put it all together

Put your css, javascript in one html






jQuery Tutorial : Simple ajax star rating










Star Rater



1
2
3
4
5

That’s it! . You can add some modification like notification, or loader while processing.

- View Demo

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

This article inspired by http://www.yvoschaap.com/

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