
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MwalaJS Documentation</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 20px;
            padding: 20px;
        }
        h1, h2, h3 {
            color: #333;
        }
        pre {
            background: #f4f4f4;
            padding: 10px;
            border-left: 4px solid #333;
        }
        .section {
            margin-bottom: 40px;
        }
    </style>
</head>
<body>
  
  <!-- Navbar -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="/">MwalaJS</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" href="#overview">Overview</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#installation">Installation</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#commands">Commands</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#structure">Project Structure</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#example">Example Application</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#conclusion">Conclusion</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

    <h1>MwalaJS - Complete Documentation</h1>
    <p>Welcome to MwalaJS! This guide will help you install, configure, and use MwalaJS efficiently.</p>

    <div class="section">
        <h2>1. Installation</h2>
        <p>You can install MwalaJS in multiple ways:</p>
        <h3>Using GitHub Repository</h3>
        <p>Clone the repository from GitHub:</p>
        <pre>git clone https://github.com/mwala400/mwalajs.git</pre>
        <h3>Using a ZIP, EXE, or RAR File</h3>
        <p>Download and extract the files from the available compressed format:</p>
        <ul>
            <li>ZIP: Extract using <code>WinRAR</code> or <code>7-Zip</code>.</li>
            <li>RAR: Extract using <code>WinRAR</code>.</li>
            <li>EXE: Run the installer and follow the instructions.</li>
        </ul>
    </div>

    <div class="section">
        <h2>2. Setting Up MwalaJS</h2>
        <h3>Initialize MwalaJS</h3>
        <pre>mwala init</pre>
        <h3>Creating a New Project</h3>
        <pre>mwala create-project</pre>
    </div>

    <div class="section">
        <h2>3. Running the Application</h2>
        <pre>mwala serve</pre>
    </div>

    <div class="section">
        <h2>4. Database Operations</h2>
        <h3>Creating a Database</h3>
        <pre>mwala create-db</pre>
        <h3>Creating a Table</h3>
        <pre>mwala create-table &lt;table_name&gt;</pre>
        <h3>Dropping a Table</h3>
        <pre>mwala drop-table &lt;table_name&gt;</pre>
    </div>

    <div class="section">
        <h2>5. Code Generation</h2>
        <pre>
            mwala generate model &lt;name&gt;
            mwala generate controller &lt;name&gt;
            mwala generate route &lt;name&gt;
            mwala generate view &lt;name&gt;
            mwala generate midware &lt;name&gt;
        </pre>
    </div>

    <div class="section">
        <h2>6. Additional Information</h2>
        <p>For more details, visit: <a href="https://github.com/mwala400/mwalajs" target="_blank">GitHub Repository</a></p>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="MwalaJS Framework Documentation - A lightweight Node.js framework for scalable web applications with MVC structure, built-in features, and easy database management.">
  <meta name="keywords" content="MwalaJS, Node.js, MVC framework, web development, database management, routing, middleware, template engine, Node.js framework documentation">
  <meta name="author" content="Hekima Ambalile Mwala">
  <meta property="og:title" content="MwalaJS Framework Documentation">
  <meta property="og:description" content="Learn how to use the MwalaJS framework to build scalable web applications with MVC architecture. Explore installation, commands, project structure, and more.">
  <meta property="og:url" content="https://your-website-url.com">
  <meta property="og:image" content="https://your-website-url.com/images/mwala-logo.png">
  <title>MwalaJS Framework Documentation</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body {
      font-family: Arial, sans-serif;
    }
    .section-title {
      margin-top: 40px;
      font-size: 1.5rem;
    }
    .code-block {
      background-color: #f8f9fa;
      padding: 10px;
      border-radius: 5px;
      border: 1px solid #ddd;
      font-family: 'Courier New', Courier, monospace;
    }
  </style>
</head>
<body>


  <div class="container">
    <header class="text-center my-5">
      <h1>MwalaJS Framework Documentation</h1>
      <p class="lead">A lightweight, easy-to-use Node.js framework to create scalable web applications with MVC architecture and powerful built-in features.</p>
      <p>GitHub Repository: <a href="https://github.com/mwala400/mwalajs" target="_blank">https://github.com/mwala400/mwalajs</a></p>
    
    
    </header>

    <!-- Overview Section -->
    <section id="overview">
      <h2 class="section-title">1. Overview</h2>
      <p>MwalaJS is a lightweight, easy-to-use Node.js framework designed to help you create scalable and organized MVC-based web applications. It comes with built-in features for handling routing, models, views, middleware, and database operations.</p>
      <a href="files/documentation.pdf" download="documentation.pdf" class="text">
        Download Documentation
    </a>

    <section id="release">
        <h2 class="section-title">1. VERSION RELEASE</h2>
    <a href="files/documentation.pdf" download="documentation.pdf" class="text">
         mwalajs.exe v1.0.0 for MWALAJS COMMAND SHELL (CLS) download here
    </a><br>
    <a href="files/documentation.pdf" download="documentation.pdf" class="text">
        mwalajs.zip v1.0.0 download here
   </a>
   <br>
   <a href="https://yourwebsite.com/path/to/mwalajs_installer.exe" download>
    <img src="https://yourwebsite.com/path/to/mwalajs4_RXv_icon.ico" alt="Download mwalajs" width="100">
</a>
<br>


      <h3>Key Features:</h3>
      <ul>
        <li><strong>MVC Architecture</strong>: Automatically generates models, controllers, routes, and views.</li>
        <li><strong>Database Management</strong>: Includes commands to create and drop tables, run migrations, and manage the database.</li>
        <li><strong>Middleware Support</strong>: Add custom middleware to handle requests.</li>
        <li><strong>EJS Template Engine</strong>: Integrated for view rendering.</li>
        <li><strong>Static File Support</strong>: Easily serve static assets like CSS, JavaScript, and images.</li>
      </ul>
    </section>

    <!-- Installation Section -->
    <section id="installation">
      <h2 class="section-title">2. Installation</h2>
      <p>To get started with MwalaJS, follow these steps:</p>

      <h3>Prerequisites:</h3>
      <ul>
        <li>Node.js (v12 or above)</li>
        <li>NPM (Node Package Manager)</li>
      </ul>

      <h3>Steps:</h3>
      <ol>
        <li><strong>Clone the Repository:</strong>
          <pre class="code-block">git clone https://github.com/mwala400/mwalajs</pre>
        </li>
        <li><strong>Install Dependencies:</strong>
          <pre class="code-block">npm install</pre>
        </li>
        <li><strong>Run the Framework:</strong>
          <pre class="code-block">mwala serve</pre>
        </li>
      </ol>
    </section>

    <!-- Available Commands Section -->
    <section id="commands">
      <h2 class="section-title">3. Available Commands</h2>

      <h3>General Command Syntax:</h3>
      <pre class="code-block">mwala <command> [options]</pre>

      <h3>Common Commands:</h3>
      <ul>
        <li><strong>Create a New MVC Project:</strong>
          <pre class="code-block">mwala create <appname></pre>
        </li>
        <li><strong>Start the Server:</strong>
          <pre class="code-block">mwala serve</pre>
        </li>
        <li><strong>Generate MVC Components:</strong>
          <pre class="code-block">mwala generate <model/controller/route/view> <name></pre>
        </li>
        <li><strong>Add Middleware:</strong>
          <pre class="code-block">mwala add middleware <middlewareName></pre>
        </li>
        <li><strong>Show Available Commands:</strong>
          <pre class="code-block">mwala help</pre>
        </li>
        <li><strong>Database Commands:</strong>
          <ul>
            <li><pre class="code-block">mwala db create-database</pre></li>
            <li><pre class="code-block">mwala migrate</pre></li>
            <li><pre class="code-block">mwala rollback</pre></li>
          </ul>
        </li>
      </ul>
    </section>

    <!-- Example Application Section -->
    <section id="example">
      <h2 class="section-title">5. Example Application</h2>
      <h2 class="section-title"> app.mjs</h2>
    
      <p>Here is an example of the default <code>app.mjs</code> file for starting the server:</p>
      <pre class="code-block">
import mwalajs from 'mwalajs';
import { homeRoutes } from './routes/homeRoutes.mjs';
import { fileURLToPath } from 'url';
import path from 'path';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

mwalajs.set('view engine', 'ejs');
mwalajs.set('views', path.join(__dirname, 'views'));

mwalajs.static(path.join(__dirname, 'public'));

mwalajs.use('/', homeRoutes);

const port = process.env.PORT || 3000;
mwalajs.listen(port, () => {
  console.log(`Server running on http://localhost:${port}`);
});
      </pre>

      <h2 class="section-title">homeRoutes.mjs</h2>
    
      <p>Here is an example of the default <code>homeRoutes.mjs.mjs</code> :</p>
      <pre class="code-block">
        import mwalajs from 'mwalajs';
        import { homeController,Steps,welcome,about } from '../controllers/homeController.mjs';
        
        const router = mwalajs.constructor.Router(); // Corrected Router usage
        
        router.get('/', homeController.getHomePage);
        router.get('/steps',Steps.getSteps);
        router.get('/welcome',welcome.getwelcome);
        router.get('/about',about.getabout);
        
        
        export { router as homeRoutes };
        
      </pre>

      <pre>
        <h2 class="section-title">homeController.mjs</h2>
    
        <p>Here is an example of the default <code>homeController.mjs</code> :</p>
   
        //homeController.mjs
export const homeController = {
  getHomePage: (req, res) => {
    res.render('index', { title: 'Welcome to MwalaJS MVC' });
  }

};


export const Steps = {
getSteps: (req, res) => {
  res.render('steps', { title: 'Welcome to MwalaJS MVC' });
}
};

export const welcome = {
  getwelcome: (req, res) => {
    res.render('welcome', { title: 'Welcome to MwalaJS MVC' });
  }
  };

  
  export const about = {
    getabout: (req, res) => {
      res.render('about', { title: 'Welcome to MwalaJS MVC' });
    }
    };
    
      </pre>
    </section>

    <!-- Conclusion Section -->
    <section id="conclusion">
      <h2 class="section-title">6. Conclusion</h2>
      <p>MwalaJS is designed to streamline the development of MVC-based applications with its easy-to-use commands for setting up projects, generating components, and managing the database. It's a great choice for anyone looking for a simple and scalable framework.</p>
      <p>For full documentation and to contribute, visit the <a href="https://github.com/mwala400/mwalajs" target="_blank">GitHub repository</a>.</p>
    </section>
  </div>

  <footer class="text-center py-4 mt-5">
    <p>&copy; 2025 MwalaJS Framework. All Rights Reserved.</p>
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
