Customizing and Extending Sngine: How to Create Custom Pages in...

Customizing and Extending Sngine: How to Create Custom Pages in Sngine

Posted 2025-01-13 21:12:20

162

Sngine is a dynamic platform built for community-driven websites, allowing flexibility for developers to create new features or pages to suit their requirements. This tutorial will provide an updated, step-by-step approach to creating static and dynamic pages in Sngine. The examples have been refined for better functionality and adherence to core patterns.

Understanding Sngine’s File and Folder Structure

Before creating a custom page, it’s important to understand Sngine’s directory structure:

/content/themes/: Contains themes and their associated templates.
/includes/: Handles core controllers, models, and configuration files.
includes/ajax/FOLDER NAME: Used for processing AJAX requests.
/content/languages/: Stores language files for multi-language support.
/themes/template/default/IMAGES & CSS folders: Holds CSS, and static images.

Part 1: Creating a Static Page

Example: Adding an "About Us" Page

Step 1: Create a Template File

Navigate to: /content/themes/default/templates/.
Create a new file named about_us.tpl
Create the smarty controller file in the root name is as aboutus.php

Step 2: Register the Route

Open /.htacess.php.
Add a route for the new page:

Step 3: Test the Page

Visit the URL: https://yourwebsite.com/aboutus.

Part 2: Creating a Dynamic Page

Step 1: Controller Function

Create your Open /aboutus.php.
Add the following function:

php

Copy code

<?php

/**
* About Us
*
* @package Sngine
* @author Zamblek
*/

// fetch bootloader
require('bootloader.php');

// check if about us feature is enabled
if (!$system['aboutus_enabled']) {
_error(404);
}

// user access
if (!$system['system_public']) {
user_access();
}

try {
// set the default view
$_GET['view'] = (isset($_GET['view'])) ? $_GET['view'] : '';

switch ($_GET['view']) {
case '':
// static About Us content
$about_us_content = "
Welcome to [Your Community Name]! We are dedicated to creating a platform where users can share, connect, and grow together. Our mission is to provide an engaging and supportive environment for all members.
";

// assign variables
$smarty->assign('about_us_content', $about_us_content);

// page header
page_header(__("About Us") . ' | ' . __($system['system_title']), __($system['system_description_aboutus']));
break;

default:
_error(404);
break;
}

// get ads for the page
$ads = $user->ads('aboutus');
/* assign variables */
$smarty->assign('ads', $ads);

// assign view
$smarty->assign('view', $_GET['view']);
} catch (Exception $e) {
_error(__("Error"), $e->getMessage());
}

// page footer
page_footer('aboutus');

Step 2: Create the Template

Navigate to: /content/themes/default/templates/.
Paste the following code in aboutus.tpl:

html

Copy code

{include file='_head.tpl'}
{include file='_header.tpl'}

<div class="page-header">
<img class="floating-img d-none d-md-block" src="{$system['system_url']}/content/themes/{$system['theme']}/images/headers/undraw_about_us.svg">
<div class="circle-2"></div>
<div class="circle-3"></div>
<div class="{if $system['fluid_design']}container-fluid{else}container{/if}">
<h2>{__("About Us")}</h2>
<p class="text-xlg">{__($system['system_description_aboutus'])}</p>
</div>
</div>

<div class="{if $system['fluid_design']}container-fluid{else}container{/if} mt20 sg-offcanvas">
<div class="row">

<div class="col-md-4 col-lg-3 sg-offcanvas-sidebar">

<div class="card">
<div class="card-body">
<h5>{__("Quick Links")}</h5>
<ul class="side-nav">
<li>
<a href="{$system['system_url']}">{__("Home")}</a>
</li>
<li>
<a href="{$system['system_url']}/pages">{__("Pages")}</a>
</li>
</ul>
</div>
</div>
</div>

<div class="col-md-8 col-lg-9 sg-offcanvas-mainbar">

<div class="card">
<div class="card-body">
<h3 class="mb20 text-center">{__("Our Mission")}</h3>
<p class="text-muted">
{$about_us_content}
</p>
</div>
</div>

{include file='_ads.tpl'}
</div>

</div>
</div>

{include file='_footer.tpl'}

Step 4: Test the Page

Visit: https://yourwebsite.com/aboutus.

Part 3: Enhancements and Best Practices, if you wish it to be multilingual

Multi-Language Support

Add new language variables in /content/languages/english.php:

Use language variables in your templates:

Conclusion

Creating and extending custom pages in Sngine allows for unparalleled flexibility. By leveraging static and dynamic pages, AJAX, and multi-language support, you can create feature-rich pages that enhance your user experience. Following the steps outlined here ensures a professional, scalable, and SEO-optimized approach.