PHP, HTML, jQuery, AJAX, JSON, बूटस्ट्रैप, CSS और MySQL का उपयोग करके अपलोड क्षमताओं के साथ एक पूरी तरह कार्यात्मक छवि गैलरी। इस परियोजना में कोड स्पष्टीकरण और दस्तावेज़ीकरण के साथ एक विस्तृत चरण-दर-चरण समाधान शामिल है, जो इसे सीखने के लिए एक व्यापक ट्यूटोरियल बनाता है।

विषय: php, mysql, ब्लॉग, AJAX, बूटस्ट्रैप, 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. कॉन्फ़िगरेशन फ़ाइल

कॉन्फ़िगरेशन सेटिंग्स (include/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

AJAX हैंडलिंग (संपत्ति/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. सीएसएस स्टाइलिंग

सीएसएस स्टाइलिंग (संपत्ति/सीएसएस/स्टाइल.सीएसएस)

body {
    background-color: #f8f9fa;
}

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

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

दस्तावेज़ीकरण और टिप्पणियाँ

• config.php: इसमें डेटाबेस कॉन्फ़िगरेशन शामिल है और PDO का उपयोग करके MySQL से कनेक्ट होता है।
• index.php: HTML संरचना वाला मुख्य पृष्ठ, स्टाइलिंग के लिए बूटस्ट्रैप और पोस्ट जोड़ने/संपादित करने के लिए एक मॉडल शामिल है।
• assets/js/script.js: पोस्ट लोड करने और सहेजने के लिए AJAX अनुरोधों को संभालता है। DOM हेरफेर और AJAX के लिए jQuery का उपयोग करता है।
• src/fetch-images.php: डेटाबेस से पोस्ट लाता है और उन्हें JSON के रूप में लौटाता है।
• src/upload.php: एक आईडी की उपस्थिति के आधार पर पोस्ट निर्माण और अपडेटिंग संभालता है।

इस समाधान में प्रोजेक्ट स्थापित करना, डेटाबेस कॉन्फ़िगरेशन, HTML संरचना, CSS के साथ स्टाइलिंग, AJAX के साथ छवि अपलोड को संभालना और PHP PDO का उपयोग करके डेटाबेस में छवि डेटा संग्रहीत करना शामिल है। कोड की प्रत्येक पंक्ति पर इसके उद्देश्य और कार्यक्षमता को समझाने के लिए टिप्पणी की गई है, जिससे यह अपलोड कार्यक्षमता के साथ एक छवि गैलरी बनाने के लिए एक व्यापक ट्यूटोरियल बन गया है।

कनेक्टिंग लिंक

यदि आपको यह श्रृंखला उपयोगी लगी, तो कृपया रिपॉजिटरी को GitHub पर एक स्टार देने या पोस्ट को अपने पसंदीदा सोशल नेटवर्क पर साझा करने पर विचार करें। आपका समर्थन मेरे लिए बहुत मायने रखेगा!

यदि आप इस तरह की और अधिक उपयोगी सामग्री चाहते हैं, तो बेझिझक मुझे फ़ॉलो करें:

• लिंक्डइन
• गिटहब

सोर्स कोड