How to generate friendly URLs with .htaccess

Ok, now you have your own game portal. Let’s call it triqui.com.

You want to share a link with your friends, or want search engine to index it properly.

If I want you to play Jamag, I have to give you this link
http://www.triqui.com/play.php?id=1713.
Now, I would like you to tell me how can you understand I am talking about Jamag from this link http://www.triqui.com/play.php?id=1713.
You can’t.

Now let’s understand why I have to write that play.php?id=xxxx to play a game.

All information about the games is stored in a database, and every game has an unique id assigned by the script.

Jamag’s id is 1713, so when I pass this value, the php script knows where to retrieve information about the game.

If you want to play Jamag on Kongregate, this is the link:
http://www.kongregate.com/games/triqui/jamag.

Seems like Kongregate has a directory to store my games (triqui) and a subdirectory for every game I made.

Obviously that’s not true. This is possible thanks to…

.htaccess file

Normally .htaccess is used to implement custom error pages or password protected directories. But you can do a lot more with this file.

First, let me point that .htaccess is the file extension, not the filename. The filename does not exists.

That’s what I created with my favourite text editor (notepad…)

ErrorDocument 404 /index.php
RewriteEngine on
RewriteRule ^id/([^/\.]+)/?$ /play.php?id=$1 [L]

Let’s see what is it:

Line 1: ErrorDocument detects any document error. If you don’t know what I am talking about, here it is a brief list:

401: Unauthorized – The request requires user authentication.

403: Forbidden – The server understood the request, but is refusing to fulfill it.

404: Not Found – The server has not found anything matching the Request-URI.

So ErrorDocument 404 refers to a “not found” error… that happens when the user looks for a page that does not exist

/index.php is the path where to redirect the user if he requested a page that does not exist

We can say that ErrorDocument 404 /index.php means “if someone requested a page that does not exist, then redirect him to index.php”.

And that’s what happens: go to http://www.triqui.com/dfgretre (a page that does not exist) and you will be redirected to home page.

Just in one line of code…

Line 2: Activation of the RewriteEngine module, a rewriting engine to rewrite requested URLs on the fly.

Not all servers support the rewrite engine.

In order to determine if your server supports it, you have to upload a php file with just:

and see what happens. In the result page, search for “mod_rewrite”.

If you find it in the “Apache loaded modules” section, then you know your server supports the rewrite engine, although in a server with php version 4.4.7 I was able to make it work even if the search returned a negative result.

Line 3: The core instruction: RewriteRule looks if the current URL matches with the regular expression passed as first parameter.

That ^id/([^/\.]+)/?$ is a regular expression, and even if I am planning to make a tutorial about regular expressions (reg exps from now on), at the moment I am just recommending you this Wikipedia article.

The second parameter of RewriteRule is the substitution.

Basically this instruction says: if the page starts with id (^id/) then copy everything that’s not a slash, a backslash or a period (([^/\.]+)) and make sure that after the starting matched id there is only a slash (/?$)… then load the page /play.php?id=$1, pasting the characters previously copied in place of $1.

The final [L] tells not to search for any more rule if this one was satisfied.

In an even basic way, the script says:

If you find an URL like
http://www.triqui.com/id/1713/
just redirect to URL
http://www.triqui.com/play.php?id=1713

And that’s what happens if you go to http://www.triqui.com/id/1713/.

I hust had to upload that .htaccess file in my root directory.

You may say there is not a big difference between play.php?id=1713 and /id/1713/ but this is the first step to friendly URLs generation.

Stay tuned for the next update.

Get the most popular Phaser 3 book

Through 202 pages, 32 source code examples and an Android Studio project you will learn how to build cross platform HTML5 games and create a complete game along the way.

Get the book

215 GAME PROTOTYPES EXPLAINED WITH SOURCE CODE
// 1+2=3
// 100 rounds
// 10000000
// 2 Cars
// 2048
// A Blocky Christmas
// A Jumping Block
// A Life of Logic
// Angry Birds
// Angry Birds Space
// Artillery
// Astro-PANIC!
// Avoider
// Back to Square One
// Ball Game
// Ball vs Ball
// Ball: Revamped
// Balloon Invasion
// BallPusher
// Ballz
// Bar Balance
// Bejeweled
// Biggification
// Block it
// Blockage
// Bloons
// Boids
// Bombuzal
// Boom Dots
// Bouncing Ball
// Bouncing Ball 2
// Bouncy Light
// BoxHead
// Breakout
// Bricks
// Bubble Chaos
// Bubbles 2
// Card Game
// Castle Ramble
// Chronotron
// Circle Chain
// Circle Path
// Circle Race
// Circular endless runner
// Cirplosion
// CLOCKS - The Game
// Color Hit
// Color Jump
// ColorFill
// Columns
// Concentration
// Crossy Road
// Crush the Castle
// Cube Jump
// CubesOut
// Dash N Blast
// Dashy Panda
// Deflection
// Diamond Digger Saga
// Don't touch the spikes
// Dots
// Down The Mountain
// Drag and Match
// Draw Game
// Drop Wizard
// DROP'd
// Dudeski
// Dungeon Raid
// Educational Game
// Elasticity
// Endless Runner
// Erase Box
// Eskiv
// Farm Heroes Saga
// Filler
// Flappy Bird
// Fling
// Flipping Legend
// Floaty Light
// Fuse Ballz
// GearTaker
// Gem Sweeper
// Globe
// Goat Rider
// Gold Miner
// Grindstone
// GuessNext
// Helicopter
// Hero Emblems
// Hero Slide
// Hexagonal Tiles
// HookPod
// Hop Hop Hop Underwater
// Horizontal Endless Runner
// Hundreds
// Hungry Hero
// Hurry it's Christmas
// InkTd
// Iromeku
// Jet Set Willy
// Jigsaw Game
// Knife Hit
// Knightfall
// Legends of Runeterra
// Lep's World
// Line Rider
// Lumines
// Magick
// MagOrMin
// Mass Attack
// Math Game
// Maze
// Meeblings
// Memdot
// Metro Siberia Underground
// Mike Dangers
// Mikey Hooks
// Nano War
// Nodes
// o:anquan
// One Button Game
// One Tap RPG
// Ononmin
// Pacco
// Perfect Square!
// Perfectionism
// Phyballs
// Pixel Purge
// PixelField
// Planet Revenge
// Plants Vs Zombies
// Platform
// Platform game
// Plus+Plus
// Pocket Snap
// Poker
// Pool
// Pop the Lock
// Pop to Save
// Poux
// Pudi
// Pumpkin Story
// Puppet Bird
// Pyramids of Ra
// qomp
// Quick Switch
// Racing
// Radical
// Rebuild Chile
// Renju
// Rise Above
// Risky Road
// Roguelike
// Roly Poly
// Run Around
// Rush Hour
// SameGame
// SamePhysics
// Save the Totem
// Security
// Serious Scramblers
// Shrink it
// Sling
// Slingy
// Snowflakes
// Sokoban
// Space Checkers
// Space is Key
// Spellfall
// Spinny Gun
// Splitter
// Spring Ninja
// Sproing
// Stabilize!
// Stack
// Stairs
// Stick Hero
// String Avoider
// Stringy
// Sudoku
// Super Mario Bros
// Surfingers
// Survival Horror
// Talesworth Adventure
// Tetris
// The Impossible Line
// The Moops - Combos of Joy
// The Next Arrow
// Threes
// Tic Tac Toe
// Timberman
// Tiny Wings
// Tipsy Tower
// Toony
// Totem Destroyer
// Tower Defense
// Trick Shot
// Tunnelball
// Turn
// Turnellio
// TwinSpin
// vvvvvv
// Warp Shift
// Way of an Idea
// Whack a Creep
// Wheel of Fortune
// Where's my Water
// Wish Upon a Star
// Word Game
// Wordle
// Worms
// Yanga
// Yeah Bunny
// Zhed
// zNumbers