How to Create and Edit Widgets in Sngine

Postado 2025-01-13 05:28:14

267

A Practical Tutorial on Adding or Modifying Widgets in Sngine, with Real-World Examples

Widgets are essential components in Sngine, offering functionality and dynamic content to enhance your platform. They allow you to add interactive and informational elements like news feeds, friend suggestions, or advertisements. This tutorial provides a comprehensive, step-by-step guide to creating and editing widgets in Sngine, tailored specifically to help webmasters using Sngine.

Understanding Widgets in Sngine

Widgets in Sngine are modular components that can be added or modified to enhance user experience. They are typically represented as template files written in TPL format and paired with PHP logic in the backend. Widgets can display various data, including user activity, notifications, or even third-party content like advertisements.

Prerequisites for Creating and Editing Widgets

Before diving into widget creation or customization, ensure you have the following:

A Working Sngine Installation: Either on a local environment like XAMPP/WAMP or a live server.
Basic Understanding of PHP and TPL Files: Familiarity with Sngine's coding structure is crucial.
A Code Editor: Tools like Visual Studio Code, Sublime Text, or PhpStorm work well.
Backup Your Files: Always create a backup before making changes to your live site.

Step 1: Understanding the Widget Framework in Sngine

Widgets in Sngine primarily involve three components:

Frontend Display: Defined in .tpl files located in the theme folder.
Backend Logic: Managed in PHP, usually found in class-user.php or similar files.
Database Integration (if required): Data for widgets can be fetched from the database if dynamic content is needed.

Sngine Widget File Locations

Frontend Files:
- Path: /content/themes/default/templates/widgets
- Files here define the appearance of widgets.
Backend Files:
- Path: /includes/
- Logic to fetch or process data for widgets is coded here.

Step 2: Creating a New Widget

Here’s a detailed process to create a new widget in Sngine:

1. Plan Your Widget

Decide on the widget's purpose. For example, a "User Birthday Widget" that shows friends' birthdays on the dashboard.

2. Create the TPL File

Navigate to /content/themes/default/templates/widgets and create a new file:

Example Content:

html

Copy code

<div class="widget">
    <div class="widget-header">
        <h3>Today's Birthdays</h3>
    </div>
    <div class="widget-body">
        {if $friends_birthdays}
            {foreach from=$friends_birthdays item=friend}
                <div class="friend-birthday">
                    <img src="{$friend.picture}" alt="{$friend.name}">
                    <p>{$friend.name} - {$friend.birthdate}</p>
                </div>
            {/foreach}
        {else}
            <p>No birthdays today!</p>
        {/if}
    </div>
</div>

3. Add Backend Logic

Open includes/class-user.php and add the following function:

php

Copy code

public function get_friends_birthdays($user_id) {
    global $db;

    $current_date = date('m-d');
    $query = $db->query("
        SELECT user_id, user_name, user_picture, user_birthdate 
        FROM users 
        WHERE DATE_FORMAT(user_birthdate, '%m-%d') = '$current_date'
        AND user_id IN (
            SELECT user_two_id FROM friends WHERE user_one_id = $user_id AND status = '1'
        )
    ");

    $birthdays = [];
    while ($row = $query->fetch_assoc()) {
        $row['user_picture'] = get_picture($row['user_picture']);
        $birthdays[] = $row;
    }

    return $birthdays;
}

4. Connect Logic to Frontend

Open index.php or a relevant controller file and add:

5. Include Widget in a Template

Open _sidebar.tpl or the desired page layout and include the widget:

6. Add Styling

Create a CSS file (if needed) in /content/themes/default/css and link it in _head.tpl:

Step 3: Editing an Existing Widget

To modify an existing widget:

Locate the TPL file in /content/themes/default/templates/widgets.
Edit the PHP logic in class-user.php or related files.
Refresh the browser and test changes.

Example: To add a profile link to the "Friend Suggestions" widget:

Edit the widget TPL file:

tpl

Copy code

<a href="{$system.url}/profile/{$friend.user_name}">{$friend.name}</a>

Step 4: Testing the Widget

Clear the cache from the Sngine admin panel.
Check if the widget displays correctly.
Debug using browser developer tools or PHP error logs.

Step 5: Real-World Example: Ad Widget

Widgets can also be used for monetization:

Objective: Add an ad widget to display sponsored content.
Steps:
- Create ad-widget.tpl in the widgets folder.
- Add a database table for ads.
- Fetch ad data in class-user.php and assign it to Smarty.

Step 6: Dynamic Widgets with Database Integration

Dynamic widgets fetch and display live data from the database. This step demonstrates how to build a widget that displays the latest posts from specific categories.

1. Database Query for Latest Posts

Add the following function to class-user.php:

php

Copy code

public function get_latest_posts($limit = 5) {
    global $db;

    $query = $db->query("
        SELECT posts.post_id, posts.post_text, posts.post_created, users.user_id, users.user_name, users.user_picture 
        FROM posts 
        INNER JOIN users ON posts.user_id = users.user_id 
        ORDER BY posts.post_created DESC 
        LIMIT $limit
    ");

    $latest_posts = [];
    while ($row = $query->fetch_assoc()) {
        $row['user_picture'] = get_picture($row['user_picture']);
        $latest_posts[] = $row;
    }

    return $latest_posts;
}

2. Create TPL for the Widget

Add a new file, latest-posts-widget.tpl, in the widgets folder:

tpl

Copy code

<div class="widget">
    <div class="widget-header">
        <h3>Latest Posts</h3>
    </div>
    <div class="widget-body">
        {if $latest_posts}
            {foreach from=$latest_posts item=post}
                <div class="post-snippet">
                    <img src="{$post.user_picture}" alt="{$post.user_name}">
                    <div>
                        <a href="{$system.url}/post/{$post.post_id}">{$post.post_text|truncate:50}</a>
                        <p>by <a href="{$system.url}/profile/{$post.user_name}">{$post.user_name}</a> on {$post.post_created|date_format:"%B %d, %Y"}</p>
                    </div>
                </div>
            {/foreach}
        {else}
            <p>No posts available.</p>
        {/if}
    </div>
</div>

3. Backend Assignment

Update the controller file (e.g., index.php) to fetch and assign data:

4. Include the Widget

Add the widget to the desired location, such as _sidebar.tpl:

Step 7: Using Widgets for Monetization

Widgets can also serve as ad slots, enabling monetization. This example outlines creating a Sponsored Ads Widget.

1. Database Setup

Add a table for storing ad data:

2. Fetch Ads Data

Add a function to class-user.php:

3. Create TPL for Ad Widget

Add a file, ad-widget.tpl, in the widgets folder:

4. Include the Widget

Add this widget to a specific location in _sidebar.tpl:

Step 8: Debugging and Troubleshooting

Common Issues:

Widget Not Displaying:
- Check the TPL file path and include statement.
- Verify data assignment in the controller file.
Data Not Fetching:
- Ensure the database query is correct and the required table exists.
- Debug using print_r or var_dump to confirm data retrieval.
CSS Issues:
- Verify that custom styles are included in _head.tpl.

Debugging Tools:

Browser Developer Tools: For inspecting HTML and debugging CSS.
PHP Error Logs: Check error_log files for PHP errors.

Conclusion

Widgets are a powerful tool in Sngine, offering endless possibilities for customization and user engagement. Whether you're adding simple informational widgets or complex, database-driven ones, this guide equips you to build and enhance widgets effectively.

By integrating monetization strategies, dynamic content, and user-centric design, you can take full advantage of Sngine's modular system. Regular updates, user feedback, and continuous improvement will ensure your widgets remain relevant and engaging.