php « CSSKarma

Posts Tagged ‘php’

Redirection Options

Wednesday, January 27th, 2010

article banner

Lately, I’ve been having to work with a lot of redirects and I was going through different redirection options with a client. So I thought I would do a quick write up about the different types of redirection.

I also haven’t seen a collection of these in one place, so I thought I would put this together.

There are a few different types that are commonly use when redirecting users:

.htaccess / apache
php header
javascript
meta refresh

The top two are the one’s you’ll be using most often, I don’t really recommend the last two. But they are available, so I think they’re worth noting. So here they are in the order I would recommend:

.htaccess / apache redirects

Redirect /old_directory http://example.com/newdirectory

This redirection is most efficient at the apache level, but if you’re like me and are on shared hosting, getting into the apache installation probably isn’t an option. In that case you can put this in an .htaccess file in the root directory of your site.

Using an .htaccess redirection is great for moving entire sites because you can not only redirect a page, but you can redirect entire sites and subdirectories with one line of code.

PHP header redirects

<?php header('Location: http://example.com/newdirectory/'); ?>

PHP header redirects are good for single page redirects and if you’re not comfortable working with the .htaccess file. This code goes at the very top of the page you’re trying to redirect. If it’s not there you may get a “headers already sent” error.

If you’re publishing out static HTML files, you can still use this by adding this code into your .htaccess file:

AddType application/x-httpd-php .php .html .htm

This will let you execute PHP in an HTML file.

JavaScript redirects

<script type="text/javascript">
<!--
window.location = "http://example.com/newdirectory"
//-->
</script>

JavaScript redirects are generally not used unless you’ve exhausted the other two options. If you don’t have access to the .htaccess file AND you can’t run server-side script on your page, this is an OK fallback option, but you have to make sure to provide a link to the forwarding page incase a user is browsing without JavaScript.

Meta redirects

<meta http-equiv="refresh" content="0;URL=http://example.com/newdirectory">

As your last option, I don’t see this in the wild anymore, but it’s worth mentioning that it does exist and does technically work (I’m not sure about it’s validity in HTML 5). You would place this in the document HEAD with the rest of the meta elements.

content=0 is a second timer for the redirect, I have this one set to 0 so it will redirect immediately.

Those are the options I’ve used in the past; did I miss anything? Maybe an ASP redirect? Let me know!

Tags: beginner, htaccess, javascript, meta, php
Posted in Web Development | 5 Comments »

This Week in Links 9/10

Wednesday, September 10th, 2008

Evernote

Evernote is a program to help you remember things. Think of it like a post-it not that you wear on your forehead all day.

Microsoft CSS Vendor Extensions

It looks like Microsoft IS actually doing work on IE8, They just beefed up their CSS support. It actually looks pretty promising so far. Looks like their goal is for full CSS 2.1 support and then branching into CSS3.

Measuring SEO: why rankings are worthless

A pretty good read from Yoast about what you should really be focusing on with SEO.

A List Apart

New issue of A List Apart this week, always a must read.

10 Principles of the PHP Masters

Another on from NETTUTS about some tip and best practices while working in PHP

Tags: a list apart, alexa, internet explorer, links, php, seo
Posted in Browsers, News, Web Development, Web Standards | 2 Comments »

Your Body and You

Wednesday, June 25th, 2008

About couple weeks ago I wrote a post called “Styling your body” which attempted to break the convention of using a “container” or “wrap” div when building a new site. I showed how to cut out a (usually) unnecessary div element and clean up your code. In this post I hope to show you how to cut down on your HTML even more by integrating a body class.

First off, let’s look at the value of adding a body ID.

The Body ID

The body ID of this site is “www-csskarma-com” (you can view source and check that out if you’d like). I picked up that method from a talk Eric Meyer gave at An Event Apart – Boston in 2007. He mentioned that to help users create custom style sheets, you can add a body ID to your site, so the user could add something like:

body#www-csskarma-com{
     font-size:5em;
}

To customize their experience with your site. This can help with accessibility and user experience. I know I use custom style sheets from time to time, so it does help from a user standpoint. You can also see this same body ID technique on Meyerweb & SimpleBits (SimpleBits actually uses a wrapper div with an ID of “simplebits”, but it’s the same principle).

For some reason, using this hasn’t really taken off yet, but I think it’s useful… so I always add it into any site I build.

There are a fair amount of sites using the body ID to tag individual pages, which essentially is the same thing, but I like to leave the ID for the site URL (www–csskarma–com).

The Body Class

Using a class on the body element is extremely helpful in cutting down on the number of classes used on a page, especially with a large site that has many different styles. And (IMO) the benefit of keeping clean, semantic HTML far outweighs the extra long CSS rules you have to use to reference an individual element.

As an Example: When building a site you may want to use an unordered list in the main content area of your homepage, but also in the main content area of your contact page. And to get them styled differently you might do something like this for the contact page:

HTML:

<ul class="contact-page-list">
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

CSS:

ul.contact-page-list{
	color:red;
}

But, if you use a body class your markup would look like this:

HTML:

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

CSS:

body.contact #content-main ul{
	color:red;
}

I know this may see like just taking a class from one element and adding it to another, but the body class can be applied to any element on the page, whereas the UL class only applies to itself and anything inside of it. Using a body class will ultimately cut down on the total number of characters in your CSS and speed up your load time (ever so slightly, but every little bit counts).

Generating the body class with PHP

When managing a large (or any) web site, you don’t want to have to go into every single body element and put in a different class. So, to help with that, I created this PHP function:

<?php
//defining some global variables, change the SITEURL to your site
define(SITEID, "www-csskarma-com")
define(SITEURL, "http://www.csskarma.com/");
define(DOMAIN, $_SERVER['HTTP_HOST']);
define(CURRENTURL, "http://" . DOMAIN . $_SERVER['REQUEST_URI']);

function myDir(){
	//removing index.php from the URL so it matches the one we set
    $clean_siteURL = str_replace("index.php", "", CURRENTURL);

    if(trim(SITEURL) == trim($clean_siteURL)){
        return "home";
    } else {
        return end(explode('/', dirname(!empty($_SERVER['REQUEST_URI']) ?
        	$_SERVER['REQUEST_URI'] : !empty($_SERVER['PHP_SELF']) ?
            $_SERVER['PHP_SELF'] : str_replace('\\','/',__FILE__))));
    }
}

//saving the function output to a variable
$dir = myDir();
?>

Then in your body you’d to this:

<body id="<?php echo SITEID; ?>" class="<?php echo $dir; ?>">

So, what’s happening here?

We set global variables so we can use them in any function we create – not just this one. You could even make the clean URL a global variable if you wanted; I just chose not to in this example. It’s important that you update the SITEURL variable to your web site URL. I also set the SITEID to www-csskarma-com in the body so it will generate both attribute values (and I can re-use the function/variables with minimal editing).

The function is checking to see if the current URL matches what you set as the home page. If it does, then it will return a value of “home.” If not, it will return whatever directory your in. For example, if the current page is http://www.csskarma.com/contact, it will return “contact.” Your output will look like this:

<body id="www-csskarma-com" class="contact">

Closing it out

In a nutshell, I got into this habit by managing a fairly large department web site and it carried over into all the sites I do. I really like keeping my HTML as clean and as slimmed down as possible, so this method works well for me. And besides that… who decided that a class wasn’t presentational markup? I’m not condemning it at all, just some food for thought.

Special thanks to Akira_x from TSN for helping me clean up the function.

Tags: CSS, php, tips
Posted in Web Development | 4 Comments »

Quick iPhone Media Detection

Tuesday, June 17th, 2008

I finally got around to reading David Shea’s post on MediaTyping today and as I was going through it, I asked myself if all the PHP he was using was really necessary. It sure wasn’t for what I wanted to do. I just wanted to detect an iPhone or iPod to test out some interfaces.

I did some digging around after that and came across a short post on iPhoneAppr about how to auto-detect a browser based on the user agent (what is essentially the browser).

The HTTP User Agent

When you visit a web page, your user agent changes based on the media you’re using. So, right now, if you’re using Firefox 2 your user agent string looks something like this:

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.14)
Gecko/20080404 Firefox/2.0.0.14

and if you’re on an iPhone it will look something like this:

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420.1 (KHTML, like
Gecko) Version/3.0 Mobile/4A102 Safari/419.3

As you can see, the user agent string has some key difference. The iPhone agent actually says "iPhone" in it. With this in mind we can use a neat little function built into PHP 5 called stripos to search the user agent and return some code (like code to send someone to a mobile version of a web site).

Let’s just get into it shall we? Here’s the PHP:

<?php
//setting the variables
ipod = stripos($_SERVER['HTTP_USER_AGENT'],"iPod");
$iphone = stripos($_SERVER['HTTP_USER_AGENT'],"iPhone");

//detecting device
if ($ipod == true || $iphone == true){
    echo "iPhone or iPod";
    } else {
    echo "Screen";
}
?>

Stripos is a function that takes 2 arguments. The first is what you want to search (the haystack) and the second is what you want to search for (the needle). If the needle is found in the haystack it will return "true", and if not, it will return false. An important thing to note about stripos is that it’s case insensitive[edit], so if you have some initial trouble, check your spacing and maybe try trim().

Trouble I had

In the PHP manual it says to use === when checking the value (which is for an exact match, true=true), but for some reason that didn’t work for me so I used == (match, but not exact so true=true & true=1 for boolean values). It’s usually just a spacing issue, but I’m not real sure this time. Feel free to tell me I’m wrong.

view live demo

I like this, it’s pretty easy, light, and useful if you just want an iPhone/iPod interface.

Tags: firefox, iphone, mobile, php
Posted in Browsers, Web Development | 5 Comments »

New from the blog

Posts Tagged ‘php’

.htaccess / apache redirects

PHP header redirects

JavaScript redirects

Meta redirects

The Body ID

The Body Class

Generating the body class with PHP

Closing it out

The HTTP User Agent

Trouble I had

New from the blog

Find me online

New from the blog