PHP-Princess.net » Code Snippets

Using Google Font API

daynah — Fri, 04 Jun 2010 17:10:09 +0000

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:

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

daynah — Thu, 13 Nov 2008 21:48:18 +0000

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

daynah — Tue, 21 Aug 2007 00:34:54 +0000

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

daynah — Sat, 17 Mar 2007 04:37:55 +0000

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 tags, put

and between the tags, put:


My HTML File
My PDF File
My Word Doc File
Any Link

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

daynah — Tue, 29 Mar 2005 20:34:38 +0000

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.

';

// If there is data in that query, display the data
if($num_rows)
{
	// PHP Script to iterate through the data in the database
	// This will print out each Table Row
	/*	|   ID	| Name	|  Address	|
		-----------------------------
			1	  Name1		Address1
			2	  Name2		Address2
		Assuming there are three fields in the table -- ID, Name, and Address
	*/
	while($myData = mysql_fetch_object($result)
	{
		// Print Each Row of Data -- ID, Name, Address
		echo ''. $myData->ID.'
				  '. $myData->Name.'
				  '. $myData->Address.'
			  ';
	}
}

// If there is no data in the database.
else
{
	echo 'Sorry, there is no data in the database.';
}

// Close the table tag
echo '';

// Close Mysql Connection
mysql_close();

?>

Removing last character of a string

daynah — Wed, 30 Jun 2004 17:09:18 +0000

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

daynah — Thu, 06 May 2004 21:57:07 +0000

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

daynah — Mon, 29 Mar 2004 17:42:45 +0000

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.