Header Small Ahoy!

Trongate MX Quick Start Guide

This guide will help you quickly leverage Trongate MX, the built-in JavaScript library designed specifically for the Trongate framework. Ensure you have the latest version of Trongate installed before proceeding.

Step 1: Activate Trongate MX

Trongate MX is pre-installed in your Trongate application. To activate it, open your default Trongate template file (usually located at templates/default.php) and add the following line just before the closing </body> tag:

<script src="<?= BASE_URL ?>js/trongate-mx.js"></script>

Step 2: Create a Trongate Module

Let's create a simple module to demonstrate Trongate MX. You have two options:

  1. Manual Creation:
    • Create a new directory named 'demo' inside your 'modules' directory.
    • Within the 'demo' directory, create two subdirectories: 'controllers' and 'views'.
  2. Using Trongate Desktop App:
    • If you have the Trongate Desktop App installed, you can use it to generate a new 'demo' module.
    • This will automatically create the necessary directory structure, including the 'controllers' and 'views' subdirectories.

Whichever method you choose, ensure your 'demo' module has the following structure:

modules/
    demo/
        controllers/
        views/

Step 3: Set Up the Demo Controller

Create a new file named Demo.php in the modules/demo/controllers/ directory and add the following content:

<?php
class Demo extends Trongate {
    function index() {
        $data['view_module'] = 'demo';
        $data['view_file'] = 'demo';
        $this->template('default', $data);
    }

    function get_message() {
        echo '<p>Hello from Trongate MX! This message was dynamically loaded.</p>';
    }
}

In this setup:

  • The index() method loads the main view for our demo.
  • The get_message() method now outputs a simple HTML paragraph. This will be the content fetched by Trongate MX when the button is clicked.

Step 4: Create the View File

Create a new file modules/demo/views/demo.php with the following content:

<h1>Trongate MX Demo</h1>
<button mx-get="<?= BASE_URL ?>demo/get_message" mx-target="#result">Get Message</button>
<div id="result"></div>

Step 5: Test Your Trongate MX Integration

Navigate to http://your-trongate-app/demo in your browser. When you click the "Get Message" button, Trongate MX will:

  1. Make a GET request to <?= BASE_URL ?>demo/get_message.
  2. Receive the HTML response from your Demo controller.
  3. Insert the received HTML content (the paragraph with "Hello from Trongate MX!") into the div with id "result".

Trongate MX in Action

This example demonstrates how Trongate MX simplifies dynamic content loading:

  • mx-get: Specifies the Trongate route to fetch content from when the button is clicked.
  • mx-target: Defines where to place the response HTML in your page.

These attributes leverage Trongate's routing system and integrate seamlessly with your Trongate modules, allowing for easy AJAX-like interactions without writing JavaScript.