Building SaaS Website #03: Creating the Pages (Part 1)

Welcome to part one of our exploration into creating pages for the TotalGPT SaaS Website! In this post, we’ll begin building the Home Page, breaking down some essential Total.js concepts for beginners. By the end of this part, you'll have a functional home page, understand how routing works in Total.js, and learn how controllers and views come together to build dynamic web pages.

This part is crucial for understanding the fundamentals of Total.js, so we'll take the time to explain concepts thoroughly. In Part 2, we’ll expand by creating the remaining pages with fewer explanations since the groundwork will already be in place. Check the previous blog post if you missed it.

What We’ll Cover in Part 1

Routing in Total.js
- What is the ROUTE() global function?
- How are routes linked to handlers and views?
- Why is exports.install a best practice?

Handler Functions and Controller Instances
- What is a handler function, and how does it work?
- Understanding the controller instance ($).

View Files
- Creating and working with index.html.
- The importance of layout.html and how to use @{layout()}.

Debug Mode in Total.js
- How does Total.js automatically reload your app during development?

Step 1: Routing in Total.js

In Total.js, routes are defined using the global ROUTE() function. A route maps an HTTP method (e.g., GET, POST) and a URL path (e.g., /, /about) to a handler function.

Let’s start by creating a route for the home page.

Creating the `default.js` Controller

// controllers/default.js

// The `exports.install` function is where we define all the routes for this controller.
// Total.js automatically calls this function when the app starts, ensuring that routes are registered at the right time.
exports.install = function () {
    // Define a route for the home page
    ROUTE('GET /', home); // Links the root URL to the `home` handler function
};

// Define the handler function for the home page
function home($) {
    // The `$` parameter is the controller instance, providing methods like $.view(), $.json(), etc.
    // Here, we render the `index.html` view.
    $.view('index');
}

Key Points about `ROUTE()`

Route Syntax: ROUTE('HTTP_METHOD URL_PATH', HANDLER_FUNCTION).
Best Practices:
- Define routes inside the exports.install function to ensure they’re loaded correctly.
- Use clear and simple names for your handler functions.

Step 2: Creating View Files

The `index.html` File

Now, let’s create the view file that the home handler renders. Total.js expects view files to be located in the views folder.

<!-- views/index.html -->
<h1>Hello World</h1>

If you run the app and visit http://localhost:5000/, you might expect to see "Hello World" displayed—but instead, you’ll encounter an error. Why?

By default, Total.js tries to render the index.html file with a layout. Since we haven’t defined a layout.html file yet, the framework doesn’t know how to handle the missing layout.

Disabling the Layout

To render the view without a layout, you can explicitly disable the layout in one of two ways:

Using a directive inside the view file:

<!-- views/index.html -->
@{layout('')} <!-- Disables the layout -->
<h1>Hello World</h1>

Specifying it in the controller:

function home($) {
$.view('index').layout(''); // Renders `index.html` without a layout
}

Creating the `layout.html` File

For a more professional setup, let’s create a layout file. The layout defines the overall structure of your pages, with the view content dynamically inserted where needed.

<!-- views/layout.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TotalGPT Website</title>
</head>
<body>
    @{body} <!-- This directive inserts the content of the current view -->
</body>
</html>

Here’s what’s happening:

@{body}: This directive is part of the Total.js view engine. It serves as a placeholder where the content of the current view (e.g., index.html) is injected.

Now, with the layout in place, you can remove the @{layout('')} directive from index.html and use the layout for all your pages automatically.

Step 3: Debug Mode in Total.js

During development, Total.js runs in debug mode, meaning the app automatically reloads whenever you make changes to your files. This is because we’ve set options.release = false in our index.js file.

Here’s how it works:

A built-in watcher monitors files in specific directories (e.g., controllers/*).
When a change is detected, Total.js restarts the app and logs the update in the console.

In production, debug mode is disabled by setting options.release = true, ensuring better performance and stability.

Testing Your Home Page

Now that everything is set up, start your Total.js server and visit http://localhost:5000/. You should see "Hello World" displayed in your browser, styled with the layout we defined.

What’s Next?

In Part 2, we’ll reshape the home page and create the remaining pages:

About
Services
Pricing
Pricing Detail
Contact
Unknown Error Page
Payment Success and Failed Redirect Pages
Terms and Conditions Page

We’ll also begin introducing additional functionality, such as dynamic content and multi-language support.

Stay tuned as we continue to build the TotalGPT SaaS Website step by step! 🚀