CodingCereal

Introduction to SEO

Mhaya delos Santos — Fri, 27 Aug 2010 18:04:07 +0000

SEO or Search Engine Optimization is the process of optimizing a certain website or webpage in the top most viewed sites like Google, Yahoo or MSN thru the usage of specific keywords when searching therefore getting higher ranking within the search results.. In this process,you must need to know at least the basic HTML.

Resolving YSlow’s “Add Expires headers” Low Grade

Jhoy Imperial — Thu, 05 Aug 2010 09:41:12 +0000

Speed up the loading of your site by caching web site files like images, CSS and javascript files. First time visitors of your site will gonna be making several HTTP requests. The more HTTP requests, the slower your site will load.

I found a good website speed tip that would help make those frequently requested files cacheable.

Using .htaccess you can add the following code add expire headers to your files:


Header set Expires "Thu, 15 Apr 2011 20:00:00 GMT"

NOTE: Backup your .htaccess file first before modifying it.

Now your site will load up a little bit faster.

PHP Hash Algorithms

Jhoy Imperial — Sun, 06 Jun 2010 22:06:38 +0000

A hash is a non-reversible fixed length string typically used to encrypt important data like your passwords to your database. MD5 and Sha1 are the most-commonly used hash algorithms used for securing data. But as most developers know, there are already applications that could decrypt these hashes. Thus, we add ‘seeds’ or random strings to the password before encrypting them.

If you are looking for other ways to encrypt your data, you could use the PHP function hash_algos() to see a list of available hash algorithms.

print_r(hash_algos());

The above code would output something like:

Array
 (
 [0] => md4
 [1] => md5
 [2] => sha1
 [3] => sha256
 [4] => sha384
 [5] => sha512
 [6] => ripemd128
 [7] => ripemd160
 [8] => whirlpool
 [9] => tiger128,3
 [10] => tiger160,3
 [11] => tiger192,3
 [12] => tiger128,4
 [13] => tiger160,4
 [14] => tiger192,4
 [15] => snefru
 [16] => gost
 [17] => adler32
 [18] => crc32
 [19] => crc32b
 [20] => haval128,3
 [21] => haval160,3
 [22] => haval192,3
 [23] => haval224,3
 [24] => haval256,3
 [25] => haval128,4
 [26] => haval160,4
 [27] => haval192,4
 [28] => haval224,4
 [29] => haval256,4
 [30] => haval128,5
 [31] => haval160,5
 [32] => haval192,5
 [33] => haval224,5
 [34] => haval256,5
 )

You could calculate the hash of a string using the function hash(). Example:

$hashed_string = hash('md5', 'apple');
// Value is '1f3870be274f6c49b3e31a0c6728957f'

$hashed_string = hash('adler32', 'banana');
// Value is '62024f08'

Thanks for reading!

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.