CodingCereal

PHP Developers Summit 2010

Jhoy Imperial — Tue, 12 Jan 2010 15:08:11 +0000

An Invitation

In partnership with Microsoft Philippines, PHP User Group Philippines presents PHP Developers Summit 2010. We are inviting you to come and join us in this gathering of the country’s best tech-talents, professionals and web developers promoting the use of PHP and open source solutions in the enterprise and schools. Free flowing coffee with lots of freebies and raffle prizes plus new friends to meet! So what are you waiting for? Register now. See you all there! =)

Be there…

Date: January 30, 2010, Saturday
Time: 8:00 AM – 5:00 PM
Venue: The Grand Ballroom, Hotel Rembrandt
26 Tomas Morato Extension, Quezon City, Philippines

Admission Fees

Early Bird Promo – Php 1,000.00 (until December 31, 2009 only)
Regular – Php 1,200.00
Walk-in – Php 1,500.00

Inclusive of

Meals (Lunch + Snacks)
Conference Kit
Event Shirt
Raffle Entry
Other Freebies

For more details, please visit the official website at http://conference.phpugph.com/

jQuery Star Rating + AJAX + PHP

Jhoy Imperial — Wed, 11 Nov 2009 18:47:48 +0000

This article will show you how to create a simple star rating functionality using jQuery.

All values will be stored in our $_SESSION variables. I have set the limit of number of votes to 20. In our demo, when you have reached the total number votes, just clear your cookies in order to use the demo again.

Here is the Demo: jQuery Star Rating

HTML head

In our part, we will include our jQuery file.

HTML body

Our html body will display the average of votes, total number of votes, the 5 stars used in rating and a response text.

Line 3: “#star-avg” will hold the average of all the votes
Line 4: “#star-total” will hold the total number of votes sent
Line 7-21: These are the rating stars assigned with different IDs. By default, their class is set to display grey stars.
Line 23: “#star-msg” will hold the response text from our remote file

        
            
                Average: 0,
                Total Ratings: 0

jQuery Script

This is our jQuery script and should be place within the tag.

Line 3: “default_star_value” will hold the average value of votes
Line 5: We need to catch the mouse over event. On mouse over, we need to get the value of the star that is placed inside the title attribute of the span and pass it the showRedStar() function.
Line 7: On mouse out, we will call the hideRedStar() function to hide the red stars
Line 9: When user click a star, this should be counted as a vote.
Line 10: Clear the response text area
Line 12: Get the value of selected star
Line 14: We will send an AJAX request to our remote file
Line 15: Remote file
Line 17: This would be our submitted value
Line 18-20: Display the response text
Line 22: Update the default_star_value with the latest average total
Line 26: Set response type as JSON
Line 30: On mouse out of our rating stars, highlight the average star votes
Line 35: showRedStar() function highlights the stars in red
Line 43: hideRedStar() function removeds the red stars

PHP

In our remote file, we will process the vote using PHP. For this demo, instead of saving the votes in a database, we will store our values in a $_SESSION array.

Line 01: start our session
Line 03: Store the list of valid star vote values in an array
Line 05: Set the default total number of votes to “0”
Line 06: Set the default average to “0″
Line 08: Check if we have reached the total limit of 20 votes
Line 09: If limit is not yet reached, check if the submitted value is in our list
Line 10: If valid value is submitted, push our submitted value to our array holder of votes
Line 11: Set message that the vote has been counted
Line 14: If the submitted value is not valid, set message that it is invalid
Line 18: If the limit has been reached, set message that says we have reached the total limit of votes
Line 21: Check if we stored votes in our session
Line 22: If there our votes stored, get the average of our votes. We use the ceil() function to round of the average to the nearest ones. So, if the average is 4.98, the returned value would be 5
Line 23: Count the total number of votes
Line 26: Display our result in JSON format

    session_start();

    $starValuesArr = array(1, 2, 3, 4, 5);

    $responseArr['total'] = 0;
    $responseArr['average'] = 0;

    if (count($_SESSION['rating']) < 20){
        if (in_array($_POST['star'], $starValuesArr)){
            $_SESSION['rating'][] = $_POST['star'];
            $responseArr['message'] = 'Thank you for the rating!';
        }
        else{
            $responseArr['message'] = 'Invalid vote value';
        }
    }
    else{
        $responseArr['message'] = 'You have reached the limit of 20 votes. 
Try to clearing your cookies to be able to vote again.';
    }

    if (count($_SESSION['rating']) > 0){
        $responseArr['average'] = ceil(array_sum($_SESSION['rating']) / count($_SESSION['rating']));
        $responseArr['total'] = count($_SESSION['rating']);
    }

    echo json_encode($responseArr)

Line 3: “#star-avg” will hold the average of all the votes
Line 4: “#star-total” will hold the total number of votes sent
Line 7-21: These are the rating stars assigned with different IDs. By default, their class is set to display grey stars.
Line 23: “#star-msg” will hold the response text from our remote file

Autopopulate Select Dropdown Box Using jQuery

Jhoy Imperial — Tue, 15 Sep 2009 21:46:58 +0000

In this tutorial, we will dynamically populate a select dropdown box using jQuery.

A sample usage of this is when we have a list of countries and we want display its corresponding cities in another select box.

Here is the live DEMO of Autopopulate Select Dropdown Box Using jQuery.

HTML head

Let us include our jquery file in our area.

HTML body

We will be needing two dropdown select boxes. The first one(#selection) would contain the list of categories and the second(#selectionlist) would be the result list.

The #result paragraph would contain our notification message.

Select Dropdown

DropDown Result

jQuery Script

On page load, we would hide our #selectionresult using the hide() jquery function.

Our AJAX request is triggered whenever we select a value in our dropdown box using the change() jquery function. When we send a request, we set our #result to “Retrieving …” to notify the user that we are already sending a request to our remote file.

Once we receive the response from our remote file, we will insert the response text msg in our #selection using html() jquery function. If the msg result is empty, we will simply display a notification message like “No item result”.

PHP

Here is the content of our remote file.

In $expectedValues we created an array list of our expected values, hence, if the posted value from our main page is not found in this array, we will return an empty message.

The $selectionArr contains the list of items for each data entry. We call the array index of our selected data. Once selected, using foreach, we will run a loop in the list of data under our selected array and echo each inside the tag. In this way, our main page will be able to retrieve our data in HTML form and is ready to be inserted in our

The table will be placed here

jQuery Script

Using the click event as a trigger, we will be able to send a $_POST value to our remote file.

Get the value of our textfield with “data” as an id

$("#data").val()

Set the $_POST['data'] with the input text value

data: "data=" + $("#data").val()

success: function(msg){ $("#content").html(msg) }

After a successfully request, the response text will be received using “msg” which we will display in our

The table will be placed here

Here is the complete script code

PHP

Here is content of our remote file

Total data rows :
Sample data :
Request time :

# Column 1 Column 2 Column 3

Design Wars: ilovecolors vs tsoknat

CodingCereal — Tue, 25 Aug 2009 21:28:39 +0000

Starting today, we decided to have a weekly article in our blog titled the “Design Wars”. The aim is for the authors to pick the best designed site that they found in the cyberworld every week, do a poll and let the readers decide which one is the best. Sadly, we can’t offer any price for this. Well, maybe in the future

And so, for our very first round, here are what the authors picked as the best designed site for this week.

www.ilovecolors.com.ar
picked by Jhoy Imperial

www.tsoknat.com
picked by Romeo John Pasion

You could cast your vote using the poll found at the sidebar –>

Next week, we will officially announce which site won. hooray!

Feel free to add your comments and suggestion.

Happy voting

Customizing Tooltips Using jQuery

Jhoy Imperial — Fri, 21 Aug 2009 13:28:38 +0000

Here is a simple code on how you could customize your tooltips using jQuery.

The idea here is to use the tag as the custom tooltip for our links. The id of our is the same value as the “for” attribute of the tag. In this way, we have created a relationship between the tag and tag.

Here is the Live Demo of this script.

The script supports:

Plain text tooltips

HTML Formatted text

Tooltips with images

HTML head

First, we must include the latest jQuery inside our tags.

CSS

Then, let us add some styling to our tooltips.

.tooltip label{ margin-left:10px; display:none; border:solid 1px #7DA7D9; padding:5px; background-color:#ffffff; position:absolute; }

HTML body

Next, i would be using
as the container for our links.

Link 1 This is the tooltip for "Link 1"

Formatted Tooltip This is a
formatted tooltip

Image in tooltip

Image in tooltip 2
Another tooltip with image

jQuery Script

Finally, we add our jQuery script. Whenever a user hovers his mouse over link, the script would use the link id to search for label that is related to our link using the for attribute in the tag. I used the show() function to make the label visible when hovering and the hide() function to hide it.

script type="text/javascript"> $(".tooltip a").mouseover(function(){ $('label[for="' + $(this).attr("id") + '"]').show(); }).mouseout(function(){ $('label[for="' + $(this).attr("id") + '"]').hide(); });

Free Template: Baby Template

Romeo John Pasion — Fri, 21 Aug 2009 09:05:11 +0000

View the Live DEMO of Baby template

You can download this free template at Baby Template.

Pencil: A Wireframe Tool for Firefox

Jhoy Imperial — Wed, 05 Aug 2009 10:40:10 +0000

Pencil is a Firefox addon used as a wireframe tool in sketching your website. It was developed by Dương Thành An under Creative Common GPL License and the project is known as “The Pencil Project“.

Pencil is efficient and is easy to use. The software has GUI components of most commonly used HTML items like text box, buttons and combo box that you could just drag-and-drop to your template. After sketching your draft, you can export your layout in PNG format.

If you are looking for an easy-to-use wireframe tool, you better try out Pencil.

WP Plugin: Snippet Code Highlighter

Jhoy Imperial — Wed, 22 Jul 2009 22:27:56 +0000

I’ve been studying how to develop wordpress plugins recently. Last night, I was able to create my first ever plugin.

Snippet Code Highlighter is a wordpress plugin that stylize your snippet code. Currently, it is able to highlight the PHP tags.

It uses the HTML tag “
” to trigger the function. The CSS class “highlightcode” should be added to the
tag.

This is a the sample of a normal
content:

This is a the sample of content of the plugin:

function sample_function(){
echo "hi";
}
?>

With a little more tweeking, surely it’ll be very more useful.

Free Template: Photoblog

Romeo John Pasion — Tue, 21 Jul 2009 23:14:35 +0000

View the Live DEMO of Photoblog template

You can download this free template at Photoblog.