Using Google Font API

One thing I learned at Google I/O that I thought was fun and exciting was their new Google Font API. What does this mean? It means I don’t have to add text to images using Photoshop anymore. I can just add it directly to the HTML code as plain text and it’ll look beautiful on the page.

This will (1) speed up page loads because text loads faster than images and (2) make the page more accessible (screen readers won’t need to piece together alt tags of images; instead, it’ll just read the text directly off the page. (3) The more text you have on a page, the more SEO-friendly it is.

Lucky for us, adding Google fonts to our webpage is quite easy. All you need is to know a bit of CSS and HTML, and how to copy and paste!

Step 1: Select Font

Go to the Google font directory and choose a font you would like to use. In the sample below, I picked the “Lobster” font.

Step 2: Get the Code

If you like the font, tab over to “Get the Code.” From there, you will get a sample code like this:

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'></link>

To include the code into your page, simply copy and paste this code into the header of your HTML page.

If you prefer to include the font it into your CSS stylesheet instead of your HTML header, you can use a code like this instead:

@import url("http://fonts.googleapis.com/css?family=Lobster");

Step 3: Add some style!

Now that you have your font embedded onto your page, it’s time to give it some style. Create a CSS class and add in your font.

In this sample, I created a class called “prettyFont” and made it use the “Lobster” font to display, in huge red font. The alternative “arial and serif” font were added as a backup in case Google Font API was down; these web-safe fonts will display instead of Lobster in that case.

.prettyFont { font-family: 'Lobster', arial, serif; font-size: 3em; color:red; }

That’s pretty much it! Adding Google Fonts to your page is as simple as 1-2-3! You can also go even more wild and add shadows, shading, and anything else you can do with HTML + CSS.

For more information, see the Google Font API documentation. For more sample codes, check out Getting Started with Google Font API. And if you want to dive in deeper and add in italic, bold, and bold italic fonts, see their further reading section.

Microsoft Office 2007 Files Downloading as .Zip Files

A colleague IMed me earlier today. She was wondering why her .xlsx document was downloading as a strange .zip file. She had uploaded it into the content management system correctly, but when she tried to test it out, the file looked corrupted.

Albert did some digging around and figured that the Microsoft Office 2007 files extensions were not recognized by Apache. So downloading files like .xlsx, .docx, .pptx, etc. will translate to file.zip instead. I did some further browser testing and noticed this problem only appears in IE browsers. It works perfectly in Firefox, Chrome, and Safari.

To fix this problem, you would need to add the extensions to the Apache config file.

Step 1: Make sure you back up your configuration file (httpd.conf in Apache) or (apache2.conf in Apache2)

Step 2: Search for the section with the AddType keywords.

Step 3: Add the following lines:


# MIME type fix
AddType application/vnd.openxmlformats-officedocument.spreadsheetml.sheet .xlsx
AddType application/vnd.openxmlformats-officedocument.wordprocessingml.document .docx
AddType application/vnd.openxmlformats-officedocument.presentationml.slideshow .pptx


If you load other Microsoft Office 2007 files on your Apache web server, you may want to add additional file extensions.

Thanks for figuring it out Albert! That solved the mystery behind two work tickets today.

Sources: Albertech.net, MS Office 2007 File Extensions at WebmasterWorld

PHP Email Validation

Note to self, use this for email validation:

function isEmail($email)
{
if(ereg("^([a-zA-Z0-9_\-\.]+)@
((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|
(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$", $email))
return 1; // If email address is valid
else
return 0;
}


Minus all the spaces in the ereg function.

CSS 3: Substring Matching Attribute Selectors

I was reading up on CSS 3′s Substring matching attribute selectors and discovered a fun way to reference anchor links!

Web links can be a variety of files. PDF, DOC, and HTML are some of the familiar ones. I was wondering if we could put a small icon to denote what type of file is being downloaded, and with CSS3, it’s quite possible.

Create an HTML file. Between the <head> tags, put

<style>
body { 
  font-size: .9em; font-weight: bold; 
}
a { color: blue; line-height: 1.5em; }
a[href$=".html"] { 
   padding-left:20px; background-image:url(html.gif); 
   background-repeat: no-repeat; 
}
a[href$=".pdf"] { 
   padding-left:20px; background-image:url(pdf.gif); 
   background-repeat: no-repeat; 
}
a[href$=".doc"] { 
   padding-left:20px; background-image:url(msword.gif); 
   background-repeat: no-repeat; 
}
</style>

and between the <body> tags, put:

<ul>
<li><a href="myfile.html">My HTML File</a></li>
<li><a href="myfile.pdf">My PDF File</a></li>
<li><a href="myfile.doc">My Word Doc File</a></li>
<li><a href="http://php-princess.net">Any Link</a></li>
</ul>

Save the file as mytest.html (and download these three images as well — ) and open it up in Firefox 2.0. You will then see something that looks like this:

Isn’t that great? The padding attribute moves the link 20px to the right. And the background-repeat attribute makes sure that image doesn’t repeat. So when I link a PDF file on my website, an image of a PDF file automatically shows next to the link. What a time-saver. :) The only drawback to this is that CSS3 isn’t fully implemented in all of today’s browser. It seems that Firefox 2.0 is ahead in the game. MSIE 7.0 and browsers below do not render CSS3 correctly. But it is a nice tip. Hopefully the next generation of browsers will render CSS3 the way it’s suppose to.

How to Connect to a MySQL Database using PHP

I was helping my coworker yesterday to create her first PHP-Database program. She already knew how phpMyAdmin worked, so I created a sample page for her to show how to connect to the database and then retrieve data from a query. Maybe this sample page could help you too. I commented as much of the code as I could. Let me know if you have any questions.

Read more

Removing last character of a string

I had a string that looked like:

2;4;6;7;

The string is dynamic, so it could also be:

3;5;2;8;9;

I needed to remove the last ; (semicolon) from the string but wasn’t sure what the best method of doing this was. I thought about using the strlen() (string length) function. Get the value of how long the string is, and then removed the last character using substr(). The task seems a bit tedious and unefficient though.

So I searched Google to find the best method, and stumbled upon the answer to my question — How do you remove the last character of a string?

The solution is to use:
$outgoing = substr_replace($incoming,"",-1);

So if I use:
$outgoing = substr_replace('3;5;2;8;9;',"",-1);

My output would be:
3;5;2;8;9

Exactly what I was looking for! Thank you Graham Ellis!

Animation using CSS

I was reading this article called “CSS Sprites: Image Slicing’s Kiss of Death” which shows how we can animate images, using only CSS and no javascript. I decided to try it out for myself, and played with the code for a bit. I came up with this this example using an image. The amazing thing part is that only one image was used. The coding for this trick is very condensed and much shorter than a javascript. One advantage this has over using javascript is that it is much faster. There’s no delay with multiple image swapping. Instead, css displays a different part of one image.

Read more about this CSS trick and see if you can give your webpage a little more life. :)

Easter Date

Are you wondering what day Easter falls on this year? Not to worry, a simple PHP script can figure it out faster than you flipping a calendar. heh Ok, maybe not, but it’s still a neat trick. :)

Just put this code in a php file, uploaded and see for yourself.
< ? echo date ("M-d-Y", easter_date(2004)); ?>

More information here.

RAND() function in MySql

I was trying to use this query to get a random row from the database:

$myRandom = "SELECT * FROM MYTABLE ORDER BY RAND() LIMIT 1";

and I couldn’t figure out why it would continually get the previous number instead of some random number.

Ahh, but look what’s at the bottom of the page. ;)

“As of MySQL 3.23.52, MySQL changed the way RAND() functions, such that you MUST supply a SEED to get an actual random number. If you do not, each new connection will return close to the same number as the previous new connection. An example to test this would be to run the follow command multiple times in a row. mysql -u username -p -e’select rand()’ A basic way to seed this would be to run RAND(NOW()).”

So now I know, I must provide a random seed. ;)

Source: http://www.mysql.com

ipb Users Online Code Block

I wrote a small ipb (Invision Power Board) code block last nite that I wanted to share. It’s really simple, but useful script. :)

If you look on the left side of http://php-princess.net , you will see a small “user online” block. It grabs the current users online on the ipb board and put it in that little table.

You can see another sample of the script here. And if you like it, you can download it here.

Getting Rid of MS Smart Quotes

Ever have that problem with displaying Smart Quotes in the browser? Well, here is how I solved the little bug.

This problem has been bugging me for a while. See the image:

The problem is in the red circle. See how there’s junk around “Meet the Author?” Well, I was researching on the problem and it’s because the user copied and pasted from a Word Document. Microsoft adds these “Smart Quotes” to your documents which are just fancy close and open quotes. These replaces the straight quotes ( ” ) when the user enters the data.

Read more

Stacking Functions

ucwords(eregi_replace(‘font’, ‘ font’, profileFont($the_lastlogin->fontsize)))

Oh my, this is an example of my coding now. I tend to throw a lot of functions at my variables. hehe

What exactly does this do in my program? Well, $the_lastlogin->fontsize is the variable I got my my query. The profileFont() function is a something I wrote that returns the font name according to the id I pass it. The eregi_replace() is there to display the font name as …”small font” rather than “smallfont.” And the ucwords() function capitalizes the first letter of each word, so the result would be “Small Font” rather than “small font.” Whew. All that in ONE line. :)

Add link to favorites

Javascript code snippet for a link to add to favorites. ;)

<script>
<!–
{
var favoriteurl=”http://php-princess.net”
var favoritetitle=”PHP Princess”
document.write(“<a href=’javascript:window.external.AddFavorite(favoriteurl, favoritetitle);’>Add to Favorites!</a>”);
}
//–>
</script>

Function: number_format( )

Here’s a nice function I learned, number_format().

I was looking for a way to add in the commas for the cost of an item since they were exceeding $1,000. The number $100000.00 is hard to read as opposed to $100,000.00. I thought some parsing would be involved, but I should have know that PHP would already have a function for this. ;)

Here’s a code snippet:
<?php

$value = 100000.00;
echo ‘The cost is $’ . number_format($value, 2) . ‘.’;

?>

Having a ’2′ in the parameters tells the function to return 2 decimal spaces. :) Simple huh? The function comes in handy if you ever have to print out the cost of items in a project.

Output Control Functions

I just learned what Output Control Functions are the other day, while reading about eval(). Here’s a small piece of my knowledge. :)

Regular Expression Library

I’ve always had trouble with regular expressions. Then Al gave me this great link to the regular expressions library. :)

phpCountdown

2 days til my bday… 7 days til graduation… do you think you need a countdown script? Why not try this phpCountdown script. :)

Date using mySQL

Ever wonder how to get the date using mysql? Well, here’s how. :)

PHP Tutorials

I had some time to write up a few tutorials. You may check them out here at the board. I’ll try to write a few everyday. :)

Random Splash Pages

I was looking through my email and found this email from Grace:

Hi Daynah! It’s me, Grace. I would like to ask a question if you don’t mind -_-; Sorry if I am bothering you. I would like to ask if how can I make random splash pages with php? Or do you know any scripts I could download for
that? Thank you so much. And hope you are having a great week =)

Here is a piece of code that Albert (my boyfriend) wrote. It creates an array of random images to use. It’s pretty simple to modify if you want to create random splash pages. If you have comments/questions, please leave them below.

<?php

// Function name: randomimage($showimage)
// Purpose: Create an array with random data for an image
// Use: Please link http://php-princess.net/
function randomimage($showimage)
{

    // ARRAY OF SPLASH IMAGES
    $bgimages = array('images/splash1.jpg','images/splash2.jpg',
                      'images/splash3.jpg','images/splash4.jpg',
                      'images/splash1.jpg','images/splash2.jpg',
                      'images/splash3.jpg','images/splash4.jpg');

    $bgtext = array ('Picture of Splash 1','Picture of Splash 2',
                     'Picture of Splash 3','Picture of Splash 4',
                     'Picture of Splash 1', 'Picture of Splash 2', 
                     'Picture of Splash 3', 'Picture of Splash 4');

    $bgmax = count($bgimages)-1;

    // Check if viewing additional image option is 
    // set / look for non-integer value passing
    if ((!isset($showimage)) || (!ereg ("^[0-9]{1,2}$", $showimage)))
    {
        srand((double)microtime()*1000000);    
        print_r($names);  

        srand ((double) microtime() * 10000000);

        $rand_keys = array_rand ($bgimages, 2);

        // obtain random image from array
        $bgimage = $bgimages[$rand_keys[0]];
        $bgalt   = $bgtext[$rand_keys[0]];
        $bgkey   = $rand_keys[0];
    }    

    return array($bgimage,$bgalt,$bgkey);
}

// Creates a list of the variables with random image 
list($bgimage,$bgalt,$bgkey) = randomimage($showimage);

// Put printout into variable $mainbody
$mainbody = '';

// Print out $mainbody
print "$mainbody";

?>

Next Page »