Pretty URLs and .htaccess rewrite rules

OK. So, now that you’ve gotten plenty of experience with query strings and building your own PHP portfolio framework, you probably want to show it to people. And you probably thought those funky URLs were a bit funky.

Well, here’s how you can make em pretty as a pig.

Loose overview

What are we doing?

The code you'll need.

config.php

<?php

define('BASE_URL', 'http://portfolio.site:8888');

This would be an untracked file that you wouldn’t have in your repo. This is because each developer and each version of the code will be in a different place. A common way to do this is to have an example-config.php or something so they know what to do. This file would be in the root of your project (the way we’ve done it).

(and remember / don’t commit this to git / ignore it)

(and you need one for each server too, right?)

header.php

<?php include('config.php'); ?>

<html lang='en'>
	<head>
		<meta charset='utf-8'>
		<base href="<?=BASE_URL?>" />
        ...

However you have your <head> partialed out – that’s where it would be.

menu.php

<nav class='site-menu'>
	<ul>
		<li>
			<a href='/'>Home</a>
		</li>

		<li>
			<a href='/about'>About</a>
		</li>

		<!-- and for for detail pages -->
		<a href='projects/<?=$slug?>'>Visit</a>

Your links will go back to how they were before the querystring links.

.htaccess

# comment

# turn rewriting on
RewriteEngine On

# /page-name →                              ?page=page-name
RewriteRule ^([0-9a-zA-Z_-]+)$              ?page=$1 [NC,L]

# /projects  →  ?page=projects
# getting tangled up with the next one?

# /projects/project-name  →                 ?page=projects&slug=project-slug
RewriteRule ^projects/([0-9a-zA-Z_-]+)$     ?page=project&slug=$1 [NC,L]

This is where you’ll write the rewrite rules. When you click the /about link, it will rewrite the HTTP request to be ?page=about behind the scenes. This file will be in the root of your project. You can use the project details example to fit your needs.

Note: So far, we haven’t figured out a way to deal with /projects as a link – and also /projects as a real folder with the projects inside of it. There seems to be some confusion there and it will try and visit the folder and ignore the redirect? We’re not totally sure. Trying to get a better answer for why this is a problem. Our solution so far was to rename the folder to _projects or something else. (in that case any reference to it in the includes etc. would need to be updated as well).

Fast walk-through

Did we miss anything? Let us know so we can add it to the code examples up there.

Another helpful video

Semantic URL htaccess Tutorial SEO Friendly Clean Links Rewrite

Adam has a much nicer voice than Derek.

Flags

Derek mentioned those [NC, L] things in the video. Here’s some info about what those do.

Unfortunately, there’s no anchor link to get to that part of the page, but here’s what it looks like – and here’s the link: https://httpd.apache.org/docs/2.4/mod/mod_rewrite.html

Watch Derek go through it and hit lots of confusion

Internet and FTP is being insane / so – gotta wait on this to get the code up on the server…