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. JavaScript と 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

ソースコード