In today’s post, we’ll dive into one of the most critical concepts in web development—routing.
Total.js v5: Understanding standard routing
Welcome back to our Beginner’s Guide to Total.js! If you're just joining us, we highly recommend starting with our previous post, Installing Total.js v5: A beginner Guide, where we covered everything from setting up a Total.js V5 project to getting familiar with its basic components. Whether you're an experienced developer exploring Total.js V5 for the first time or someone completely new to web development, this series will guide you step by step.
In today’s post, we’ll dive into one of the most critical concepts in web development—routing. Specifically, we'll explore standard routing in Total.js V5. Along the way, we'll discuss different route methods and examine why routing plays such an important role in any web application. By the end of this post, you’ll have a solid understanding of routing mechanics in Total.js and be able to implement them confidently in your projects.
What is Routing and Why Is It Important?
At its core, routing is the backbone of any web application. It’s the mechanism that defines how your app responds to client requests for specific URLs
. Imagine a postal system where a letter arrives at a central post office (the server) and needs to be routed to the correct address (the appropriate handler). That’s essentially what routing does—it maps incoming requests to corresponding code that processes and responds to those requests.
Without routing, every web page would be static, like a brochure that never changes, regardless of who's viewing it. Routing gives your application the ability to be interactive, serving dynamic content, data, and files. It enables your website to offer personalized experiences, fetch data from APIs, or render content based on user interaction.
In Total.js, routing is not only easy to implement, but it’s also highly flexible, supporting multiple methods and types of routing. Whether you're building a simple blog or a complex enterprise system, Total.js allows you to configure routes that map URLs to specific controller functions or action functions, ensuring your app delivers the right response to every request.
Supported Routing Types in Total.js
Before we dive into examples, let's first explore the different types of routing Total.js supports. Each type is designed for specific use cases, making the framework versatile for different project needs.
1) Standard Routing: This is the bread and butter of routing—handling standard HTTP requests with methods like GET
, POST
, PUT
, PATCH
, and DELETE
. It’s used for most web applications to define what happens when a user accesses a specific page or submits a form.
2) File Routing: Optimized for serving static files like images, PDFs, and CSS, etc. When your app needs to deliver files to the client, Total.js offers efficient file routing mechanisms.
3) WebSocket Routing: For real-time, two-way communication between the client and server. Think of WebSockets as the underlying technology for chat apps, live updates, and other applications that require instantaneous data flow.
4) API Routing: Designed specifically for RESTful APIs, this allows your app to handle JSON requests and responses, making it ideal for building microservices or public APIs.
In this post, we'll focus on standard routing. Later in this series, we'll dive deeper into other routing types, including file and WebSocket routing.
Routing Methods: GET
, POST
, and More
In Total.js, routing is method-specific. This means you can define different behaviors for the same URL
but with different HTTP methods. For example, a GET
request to /submit
might render a form, while a POST
request to the same URL would process the form data. This separation of concerns helps keep your routes clean and logical.
Here’s a breakdown of some commonly used HTTP methods in routing:
GET
: Used to fetch data. In most cases, it’s employed to display views or retrieve information from the server without altering any server-side data.
POST
: Handles the submission of data, like form inputs. When a user submits data via a form, the server processes the request through aPOST
route.
PUT
andDELETE
: Often used in REST APIs to update or delete existing data. They’re more specific in their usage compared toGET
andPOST
.
Let’s see how you can define a basic route using the GET
and POST
methods in Total.js.
Basic Route Setup
In Total.js, routing is typically defined in the controllers
folder. Here’s an example of setting up a simple GET
route to render the homepage and a POST
route to handle form submissions.
In this example:
- The
ROUTE
method is used to define theURL
paths and theHTTP
methods. - The function
view_homepage
is responsible for handlingGET
requests to render the homepage view, whilehandle_submit
processes form submissions viaPOST
and returns a response.
Dynamic Routing and Query Parameters
Dynamic routing allows your application to accept variable inputs as part of the URL. This is particularly useful when you're dealing with dynamic content, such as user profiles or product pages where the URL might contain unique identifiers like user IDs or product names.
Example of Dynamic Routing with Query Parameters
Imagine we want to create a route where the URL includes a dynamic user ID:
If a user visits http://localhost:8000/user/123/
, the view_user
function will be called with id = '123'
. This allows you to render content dynamically based on the user ID.
We can enhance this further by adding query parameters to handle additional variables passed in the URL:
A request to http://localhost:8000/search/?q=totaljs
will return the text Search query: totaljs
, demonstrating how to retrieve query parameters in your routing.
Practical Example: Setting Up a Total.js Server with Standard & Dynamic Routing
Now that we’ve gone over the theory, it’s time to put it into practice. Let’s build a simple Total.js web server from scratch.
Step 1: Setting Up the Server
To begin, ensure you have a Total.js project set up. If you haven’t already done this, run the following command to install Total.js:
Next, create a server.js
file and insert the following code:
Start the server using the following command:
Step 2: Organizing routes in the controller folder
Good practices in Total.js suggest organizing your routes in the controllers
folder. This ensures your code remains clean and modular.
Create a folder called controllers
in your project root, and inside it, create a file named default.js
to define your routes:
Step 3: Creating the Views
Next, you need to create the HTML
files for your views in the views
folder. First, create a views
folder at the root of your project. Then, create the following files inside this folder:
layout.html
homepage.html
about.html
contact.html
user.html
Step 4: Running and Testing the Server
Finally, start your server again by running:
Now, open your browser and test the following URLs:
http://localhost:8000/
for the homepage.http://localhost:8000/about
for the about page.http://localhost:8000/contact
for the contact page.http://localhost:8000/user/1
for the dynamic user profile page.
Conclusion
Routing is a fundamental building block for any web application, and Total.js makes it incredibly easy to implement both standard and dynamic routing. Throughout this post, we’ve covered:
- The role and importance of routing in a web application.
- How to define routes with various HTTP methods (
GET
,POST
, etc.). - Setting up dynamic routes with query parameters.
- Building a basic Total.js web server with well-structured routes and views.
In the next blog, we’ll dive deeper into file routing, WebSocket routing, and other advanced features. Stay tuned, and thanks for reading!
Other posts from Total.js Platform
- 2024-10-01September report 2024
- 2024-09-27Total.js UI Builder: #2 designing your first interface
- 2024-09-26Total.js V5: Middlewares
- 2024-09-23Beginner Guide to Total.js UI: # 05 Client-side routing
- 2024-09-23Total.js UI #4: Data Binding (Part 2 – Practical Example)
- 2024-09-20Introduction to Total.js UI Builder: A Beginner’s Guide
- 2024-09-13Total.js v5: #06 Understanding File Routing
- 2024-09-09Total.js v5: Defining Routes for Internal Errors
- 2024-09-09Total.js V5: Dynamic websocket routing
- 2024-09-09Total.js V5: Websocket Routing