PHP, HTML, jQuery, AJAX, JSON, Bootstrap, 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 처리(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 스타일링(assets/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: 데이터베이스 구성이 포함되어 있으며 PDO를 사용하여 MySQL에 연결합니다.
• index.php: HTML 구조의 메인 페이지에는 스타일 지정을 위한 부트스트랩과 게시물 추가/편집을 위한 모달이 포함되어 있습니다.
• assets/js/script.js: 게시물 로드 및 저장에 대한 AJAX 요청을 처리합니다. DOM 조작 및 AJAX에 jQuery를 사용합니다.
• src/fetch-images.php: 데이터베이스에서 게시물을 가져와 JSON으로 반환합니다.
• src/upload.php: ID 존재 여부에 따라 게시물 생성 및 업데이트를 처리합니다.

이 솔루션에는 프로젝트 설정, 데이터베이스 구성, HTML 구조, CSS를 사용한 스타일 지정, AJAX를 사용한 이미지 업로드 처리, PHP PDO를 사용하여 데이터베이스에 이미지 데이터 저장이 포함됩니다. 각 코드 줄에는 목적과 기능을 설명하는 주석이 달려 있어 업로드 기능이 있는 이미지 갤러리를 구축하기 위한 포괄적인 튜토리얼이 됩니다.

링크 연결

이 시리즈가 도움이 되었다면 GitHub에서 저장소에 별표를 표시하거나 즐겨찾는 소셜 네트워크에서 게시물을 공유해 보세요. 여러분의 지원은 저에게 큰 의미가 될 것입니다!

이와 같이 더 유용한 콘텐츠를 원하시면 언제든지 저를 팔로우하세요.

• 링크드인
• GitHub

소스 코드