Routing Basics

Introduction to Routing

Routing is the process of directing users from one page or section of a website to another. It helps web applications display the correct content when users visit different URLs.

Routing is an important part of modern web development because it improves navigation, user experience, and website structure.

Objectives

By the end of this training, you will be able to:

• Understand the concept of routing
• Learn how URLs work in web applications
• Create basic routes
• Handle dynamic routes
• Understand route parameters
• Use navigation links effectively
• Improve website structure using routing

What is Routing

Routing connects a URL to a specific page, component, or function in a web application.

Example URLs:

/home
/about
/contact
/services

Each URL loads different content for the user.

Importance of Routing

Routing helps developers:

• Organize website pages
• Improve user navigation
• Create dynamic applications
• Manage multiple pages efficiently
• Enhance user experience

Types of Routing

Static Routing

Static routes point to fixed pages.

Example:

/about
/contact

Dynamic Routing

Dynamic routes use variables or parameters in URLs.

Example:

/product/101
/user/15

The numbers represent unique IDs.

Basic Routing Example

HTML Navigation

<a href="/home">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>

Routing in PHP

<?php

$page = $_GET['page'];

if($page == "home"){
    echo "Home Page";
}
elseif($page == "about"){
    echo "About Page";
}
else{
    echo "Page Not Found";
}

?>

Routing in JavaScript

const routes = {
  "/": "Home Page",
  "/about": "About Page",
  "/contact": "Contact Page"
};

console.log(routes["/about"]);

Route Parameters

Route parameters allow dynamic data in URLs.

Example:

/product/25

Here, 25 is the product ID.

Benefits of Route Parameters

• Load dynamic content
• Create user profiles
• Display product details
• Build scalable applications

Navigation and Links

Navigation links help users move between pages easily.

Example:

<nav>
  <a href="/home">Home</a>
  <a href="/services">Services</a>
  <a href="/blog">Blog</a>
</nav>

Routing Best Practices

Use Simple URLs

Good URL example:

/web-development-course

Avoid Complex URLs

Bad URL example:

/page?id=123&category=5&type=data

Keep Navigation Clear

Users should easily understand website structure.

Use Meaningful Route Names

Choose names related to the page content.

Common Routing Errors

Page Not Found Error

Occurs when a route does not exist.

Broken Links

Happen when navigation links are incorrect.

Duplicate Routes

Multiple routes pointing to the same page can cause confusion.

Applications of Routing

Routing is used in:

• E-commerce websites
• Learning management systems
• Blogs and news portals
• Social media platforms
• Business websites
• Web applications

Advantages of Routing

• Better website organization
• Improved navigation
• Faster page management
• Enhanced user experience
• Easier maintenance
• SEO friendly URLs

Final Presentation

In your final presentation, explain:

• What routing is
• Why routing is important
• Types of routing
• Static and dynamic routes
• Route parameters
• Navigation links
• Real-world applications of routing