معرض صور كامل الوظائف مع إمكانيات التحميل باستخدام PHP وHTML وjQuery وAJAX وJSON وBootstrap وCSS وMySQL. يتضمن هذا المشروع حلاً تفصيليًا خطوة بخطوة مع شرح التعليمات البرمجية والوثائق، مما يجعله برنامجًا تعليميًا شاملاً للتعلم.

المواضيع: php، mysql، blog، ajax، bootstrap، jquery، css، معرض الصور، تحميل الملفات

الحل خطوة بخطوة

1. هيكل الدليل

simple-image-gallery/
│
├── index.html
├── db/
│   └── database.sql
├── src/
│   ├── fetch-image.php
│   └── upload.php
├── include/
│   ├── config.sample.php
│   └── db.php
├── assets/
│   ├── css/
│   │   └── style.css
│   ├── js/
│   │   └── script.js
│   └── uploads/
│   │   └── (uploaded images will be stored here)
├── README.md
└── .gitignore

2. مخطط قاعدة البيانات

db/database.sql:

CREATE TABLE IF NOT EXISTS `images` (
    `id` int(11) NOT NULL AUTO_INCREMENT,
    `file_name` varchar(255) NOT NULL,
    `uploaded_on` datetime NOT NULL,
    PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

3. ملف التكوين

إعدادات التكوين (تشمل/config.sample.php)

4. تكوين اتصال قاعدة البيانات

إنشاء اتصال بقاعدة البيانات (include/db.php)

 PDO::ERRMODE_EXCEPTION,
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
];

// Create a new PDO instance
try {
    $pdo = new PDO($dsn, DB_USER, DB_PASS, $options);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); // Set error mode to exception
} catch (PDOException $e) {
    echo 'Connection failed: ' . $e->getMessage(); // Display error message if connection fails
}
?>

5. هيكل HTML وPHP

هيكل HTML (index.html)

    
    
    
    
    



    
Image Gallery
    

        

            

                

                    Choose Image
                    
                
                Upload
            
            

        
    
    

    

        
    


 

6. جافا سكريبت و أجاكس

معالجة AJAX (assets/js/script.js)

$(document).ready(function(){
    // load gallery on page load
    loadGallery();

    // Form submission for image upload
    $('#uploadImage').on('submit', function(e){
        e.preventDefault(); // Prevent default form submission
        var file_data = $('#image').prop('files')[0];
        var form_data = new FormData();
        form_data.append('file', file_data);
        //hide upload section
        $('#uploadImage').hide();
        $.ajax({
            url: 'src/upload.php', // PHP script to process upload
            type: 'POST',
            dataType: 'text', // what to expect back from the server
            cache: false,
            data: new FormData(this), // Form data for upload
            processData: false,
            contentType: false,
            success: function(response){
                let jsonData = JSON.parse(response);
                if(jsonData.status == 1){
                    $('#image').val(''); // Clear the file input
                    loadGallery(); // Fetch and display updated images
                    $('#upload-status').html('
' jsonData.message '
');
                } else {
                    $('#upload-status').html('
' jsonData.message '
'); // Display error message
                }
                // hide message box
                autoHide('#upload-status');
                //show upload section
                autoShow('#uploadImage');
            }
        });
    });
});

// Function to load the gallery from server
function loadGallery() {
    $.ajax({
        url: 'src/fetch-images.php', // PHP script to fetch images
        type: 'GET',
        success: function(response){
            let jsonData = JSON.parse(response);
            $('#gallery').html(''); // Clear previous images
            if(jsonData.status == 1){
                $.each(jsonData.data, function(index, image){
                    $('#gallery').append('
'); // Display each image
                });
            } else {
                $('#gallery').html('
No images found...
'); // No images found message
            }
        }
    });
}

//Auto Hide Div
function autoHide(idORClass) {
    setTimeout(function () {
        $(idORClass).fadeOut('fast');
    }, 1000);
}

//Auto Show Element
function autoShow(idORClass) {
    setTimeout(function () {
        $(idORClass).fadeIn('fast');
    }, 1000);
}

7. البرامج النصية PHP الخلفية

جلب الصور (src/fetch-images.php)

 0, 'message' => 'No images found.');

// Fetching images from the database
$query = $pdo->prepare("SELECT * FROM images ORDER BY uploaded_on DESC");
$query->execute();
$images = $query->fetchAll(PDO::FETCH_ASSOC);

if(count($images) > 0){
    $response['status'] = 1;
    $response['data'] = $images; // Returning images data
}

// Return response
echo json_encode($response);
?>
?>

تحميل الصور (src/upload.php)

 0, 'message' => 'Form submission failed, please try again.');

if(isset($_FILES['image']['name'])){
    // Directory where files will be uploaded
    $targetDir = UPLOAD_DIRECTORY;
    $fileName = date('Ymd').'-'.str_replace(' ', '-', basename($_FILES['image']['name']));
    $targetFilePath = $targetDir . $fileName;
    $fileType = pathinfo($targetFilePath, PATHINFO_EXTENSION);

    // Allowed file types
    $allowTypes = array('jpg','png','jpeg','gif');
    if(in_array($fileType, $allowTypes)){
        // Upload file to server
        if(move_uploaded_file($_FILES['image']['tmp_name'], $targetFilePath)){
            // Insert file name into database
            $insert = $pdo->prepare("INSERT INTO images (file_name, uploaded_on) VALUES (:file_name, NOW())");
            $insert->bindParam(':file_name', $fileName);
            $insert->execute();
            if($insert){
                $response['status'] = 1;
                $response['message'] = 'Image uploaded successfully!';
            }else{
                $response['message'] = 'Image upload failed, please try again.';
            }
        }else{
            $response['message'] = 'Sorry, there was an error uploading your file.';
        }
    }else{
        $response['message'] = 'Sorry, only JPG, JPEG, PNG, & GIF files are allowed to upload.';
    }
}

// Return response
echo json_encode($response);
?>

6. تصميم CSS

تصميم CSS (الأصول/css/style.css)

body {
    background-color: #f8f9fa;
}

#gallery .col-md-4 {
    margin-bottom: 20px;
}

#gallery img {
    display: block;
    width: 200px;
    height: auto;
    margin: 10px;
}

الوثائق والتعليقات

• config.php: يحتوي على تكوين قاعدة البيانات ويتصل بـ MySQL باستخدام PDO.
• index.php: الصفحة الرئيسية ببنية HTML، وتتضمن Bootstrap للتصميم، ونموذجًا لإضافة/تحرير المشاركات.
• assets/js/script.js: يتعامل مع طلبات AJAX لتحميل المشاركات وحفظها. يستخدم jQuery لمعالجة DOM وAJAX.
• src/fetch-images.php: جلب المشاركات من قاعدة البيانات وإرجاعها بتنسيق JSON.
• src/upload.php: يتعامل مع إنشاء المنشور وتحديثه بناءً على وجود معرف.

يتضمن هذا الحل إعداد المشروع، وتكوين قاعدة البيانات، وبنية HTML، والتصميم باستخدام CSS، والتعامل مع تحميل الصور باستخدام AJAX، وتخزين بيانات الصورة في قاعدة البيانات باستخدام PHP PDO. يتم التعليق على كل سطر من التعليمات البرمجية لشرح الغرض منه ووظيفته، مما يجعله برنامجًا تعليميًا شاملاً لإنشاء معرض صور مزود بوظيفة التحميل.

روابط الاتصال

إذا وجدت هذه السلسلة مفيدة، فيرجى التفكير في منح المستودع نجمة على GitHub أو مشاركة المنشور على شبكات التواصل الاجتماعي المفضلة لديك؟. دعمكم سيعني الكثير بالنسبة لي!

إذا كنت تريد المزيد من المحتوى المفيد مثل هذا، فلا تتردد في متابعتي:

• لينكد إن
• جيثب

كود المصدر