در اینجا به طور مختصر مراحل ایجاد ماژول جوملا برای آپلود تصویر با استفاده از PHP و AJAX را شرح می‌دهم. برای سادگی، ما ابتدا یک ماژول ساده ایجاد می‌کنیم که فرم آپلود تصویر را در آن قرار دهیم.

مراحل ایجاد یک ماژول جوملا برای آپلود تصویر

1. ساخت ساختار فایل‌های ماژول برای ایجاد یک ماژول، باید یک دایرکتوری در پوشه modules ایجاد کنید و سپس فایل‌های لازم را در آن قرار دهید.

   • به مسیر زیر بروید:

     /modules/mod_imageupload
     

2. ساخت فایل‌های مورد نیاز:

   در پوشه mod_imageupload، چند فایل اصلی خواهیم داشت:

   • mod_imageupload.php (فایل اصلی ماژول)
   • helper.php (برای کدهای کمکی و پردازش)
   • tmpl/default.php (نمایش فرم آپلود و پروگرس بار)
   • mod_imageupload.xml (فایل نصب و تنظیمات ماژول)

1. فایل mod_imageupload.php:

این فایل عملکرد اصلی ماژول را بر عهده دارد. در آن فرم آپلود به همراه پردازش‌ها را قرار می‌دهیم.

<?php
// دسترسی مستقیم به فایل ممنوع است
defined('_JEXEC') or die;

// شامل فایل helper
require_once dirname(__FILE__) . '/helper.php';

// دریافت خروجی از helper
$uploadForm = modImageUploadHelper::getUploadForm();
require JModuleHelper::getLayoutPath('mod_imageupload');

2. فایل helper.php:

در این فایل، می‌توانید منطق پردازش فایل را بنویسید، مثلا بررسی فایل و آپلود آن. برای این‌که کار با این ماژول راحت‌تر باشد، همه کدهای اصلی آپلود را در اینجا قرار می‌دهیم.

<?php
// دسترسی مستقیم به فایل ممنوع است
defined('_JEXEC') or die;

class modImageUploadHelper {
    public static function getUploadForm() {
        // بررسی ارسال فایل و آپلود
        if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_FILES['image'])) {
            $uploadDir = JPATH_ROOT . '/images/uploads/';
            $maxFileSize = 5 * 1024 * 1024;  // حداکثر حجم فایل 5MB
            $allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];

            $file = $_FILES['image'];

            // بررسی نوع فایل
            if (!in_array($file['type'], $allowedTypes)) {
                return 'فرمت فایل مجاز نیست.';
            }

            // بررسی اندازه فایل
            if ($file['size'] > $maxFileSize) {
                return 'حجم فایل بیش از حد مجاز است.';
            }

            // ساخت نام تصادفی برای فایل
            $fileName = uniqid('img_') . '.' . pathinfo($file['name'], PATHINFO_EXTENSION);
            $uploadPath = $uploadDir . $fileName;

            // انتقال فایل به پوشه مقصد
            if (move_uploaded_file($file['tmp_name'], $uploadPath)) {
                return 'فایل با موفقیت آپلود شد!';
            } else {
                return 'خطا در آپلود فایل!';
            }
        }

        // اگر فایل آپلود نشد، فرم را باز می‌گرداند
        return null;
    }
}

3. فایل tmpl/default.php:

در اینجا فرم HTML و کد AJAX را قرار می‌دهیم. این کد مشابه همان کدی است که قبلاً برای آپلود تصویر طراحی کرده بودیم، اما در قالب ماژول جوملا.

<?php
// دسترسی مستقیم به فایل ممنوع است
defined('_JEXEC') or die;
?>

<div class="container mt-5">
    <h2 class="text-center mb-4">فرم آپلود تصویر</h2>

    <!-- نمایش پیغام آپلود -->
    <?php if ($uploadForm): ?>
        <div class="alert alert-info"><?php echo $uploadForm; ?></div>
    <?php endif; ?>

    <!-- فرم آپلود -->
    <form id="uploadForm" enctype="multipart/form-data" method="POST">
        <div class="mb-3">
            <label for="name" class="form-label">نام و نام خانوادگی:</label>
            <input type="text" class="form-control" id="name" name="name" required>
        </div>

        <div class="mb-3">
            <label for="image" class="form-label">انتخاب تصویر:</label>
            <input type="file" class="form-control" id="image" name="image" accept="image/*" required>
        </div>

        <button type="submit" class="btn btn-primary">ارسال</button>
    </form>

    <!-- نمایش پروگرس بار -->
    <div id="progressWrapper" style="display: none;">
        <p>در حال آپلود: <span id="progressText">0%</span></p>
        <div id="progressBar" class="progress">
            <div id="progress" class="progress-bar" role="progressbar" style="width: 0;"></div>
        </div>
    </div>
</div>

<!-- اسکریپت‌های جاوااسکریپت -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    $("#uploadForm").submit(function(event) {
        event.preventDefault();

        // نمایش پروگرس بار
        $("#progressWrapper").show();

        var formData = new FormData(this);

        $.ajax({
            url: "<?php echo JURI::root() . 'modules/mod_imageupload/helper.php'; ?>",  // مسیر پردازش فایل
            type: "POST",
            data: formData,
            contentType: false,
            processData: false,
            xhr: function() {
                var xhr = new XMLHttpRequest();
                xhr.upload.addEventListener("progress", function(e) {
                    if (e.lengthComputable) {
                        var percent = (e.loaded / e.total) * 100;
                        $("#progress").width(percent + "%");
                        $("#progressText").text(Math.round(percent) + "%");
                    }
                });
                return xhr;
            },
            success: function(response) {
                alert("آپلود با موفقیت انجام شد!");
                console.log(response);
                $("#progressWrapper").hide();
            },
            error: function(xhr, status, error) {
                alert("خطا در آپلود فایل!");
                $("#progressWrapper").hide();
            }
        });
    });
});
</script>

4. فایل mod_imageupload.xml:

این فایل، فایل نصب و پیکربندی ماژول است که برای نصب ماژول در جوملا استفاده می‌شود.

<?xml version="1.0" encoding="utf-8"?>
<extension type="module" version="4.0" method="upgrade">
    <name>mod_imageupload</name>
    <author>نام شما</author>
    <creationDate>2024-12-28</creationDate>
    <copyright>کپی‌رایت</copyright>
    <license>GPLv2 or later</license>
    <version>1.0.0</version>
    <description>ماژول آپلود تصویر</description>
    <files>
        <file plugin="mod_imageupload">mod_imageupload.php</file>
        <file>helper.php</file>
        <folder>tmpl</folder>
    </files>
    <languages>
        <language tag="en-GB">language/en-GB/en-GB.mod_imageupload.ini</language>
        <language tag="fa-IR">language/fa-IR/fa-IR.mod_imageupload.ini</language>
    </languages>
</extension>

5. نصب و استفاده از ماژول در جوملا

• ماژول را با استفاده از فایل XML در بخش Extension Manager در جوملا نصب کنید.
• پس از نصب، ماژول را از بخش Module Manager فعال کرده و به یک موقعیت (Position) مناسب در قالب جوملا خود متصل کنید.

توضیحات:

• این ماژول فرم آپلود را در هر موقعیتی که به آن وصل شود نمایش می‌دهد.
• فایل‌ها در مسیر images/uploads/ ذخیره می‌شوند. شما می‌توانید این مسیر را متناسب با نیاز خود تغییر دهید.
• برای حفظ امنیت، حتماً بررسی‌هایی مانند محدودیت نوع فایل و اندازه فایل‌ها انجام می‌دهیم.

این مراحل به شما کمک می‌کند که یک ماژول ساده برای آپلود تصویر در جوملا ۵ ایجاد کنید.