PHP-Crashkurs: Einfache Bildergalerie-PHP-Tutorial-php.cn

PHP-Crashkurs: Einfache Bildergalerie

王林

Freigeben： 2024-08-05 22:08:02

Original

422 Leute haben es durchsucht

PHP crash course: Simple Image Gallery

Eine voll funktionsfähige Bildergalerie mit Upload-Funktionen mit PHP, HTML, jQuery, AJAX, JSON, Bootstrap, CSS und MySQL. Dieses Projekt enthält eine detaillierte Schritt-für-Schritt-Lösung mit Codeerklärungen und Dokumentation, was es zu einem umfassenden Tutorial zum Lernen macht.

Themen: PHP, MySQL, Blog, Ajax, Bootstrap, JQuery, CSS, Bildergalerie, Datei-Upload

Schritt-für-Schritt-Lösung

1. Verzeichnisstruktur

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

Nach dem Login kopieren

2. Datenbankschema

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;

Nach dem Login kopieren

3. Konfigurationsdatei

Konfigurationseinstellungen (include/config.sample.php)

<?php
define('DB_HOST', 'localhost'); // Database host
define('DB_NAME', 'image_gallery'); // Database name
define('DB_USER', 'root'); // Change if necessary
define('DB_PASS', ''); // Change if necessary
define('UPLOAD_DIRECTORY', '/assets/uploads/'); // Change if necessary
?>

Nach dem Login kopieren

4. Konfigurieren Sie die Datenbankverbindung

Datenbankverbindung herstellen (include/db.php)

<?php
include 'config.php';

// Database configuration
$dsn = 'mysql:host='.DB_HOST.';dbname='.DB_NAME;
$options = [
    PDO::ATTR_ERRMODE => 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
}
?>

Nach dem Login kopieren

5. HTML- und PHP-Struktur

HTML-Struktur (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Gallery Upload</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<div class="container">
    <h1 class="text-center mt-5">Image Gallery</h1>
    <div class="row">
        <div class="col-md-6 offset-md-3">
            <form id="uploadImage" enctype="multipart/form-data">
                <div class="form-group">
                    <label for="image">Choose Image</label>
                    <input type="file" name="image" id="image" class="form-control" required>
                </div>
                <button type="submit" class="btn btn-primary">Upload</button>
            </form>
            <div id="upload-status"></div>
        </div>
    </div>
    <hr>
    <div class="row" id="gallery">
        <!-- Images will be loaded here -->
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="assets/js/script.js"></script> <!-- Custom JS -->
</body>
</html>

Nach dem Login kopieren

6. JavaScript und AJAX

AJAX-Verarbeitung (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('<div class="alert alert-success">'+jsonData.message+'</div>');
                } else {
                    $('#upload-status').html('<div class="alert alert-success">'+jsonData.message+'</div>'); // 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('<div class="col-md-3"><img src="assets/uploads/'+image.file_name+'" class="img-responsive img-thumbnail"></div>'); // Display each image
                });
            } else {
                $('#gallery').html('<p>No images found...</p>'); // 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);
}

Nach dem Login kopieren

7. Backend-PHP-Skripte

Bilder abrufen (src/fetch-images.php)

<?php
include '../include/db.php'; // Include database configuration

$response = array('status' => 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);
?>
?>

Nach dem Login kopieren

Bild-Upload (src/upload.php)

<?php
include '../include/db.php'; // Include database configuration
$response = array('status' => 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);
?>

Nach dem Login kopieren

6. CSS-Styling

CSS-Styling (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;
}

Nach dem Login kopieren

Dokumentation und Kommentare

config.php: Enthält die Datenbankkonfiguration und stellt über PDO eine Verbindung zu MySQL her.
index.php: Hauptseite mit HTML-Struktur, enthält Bootstrap für die Gestaltung und ein Modal zum Hinzufügen/Bearbeiten von Beiträgen.
assets/js/script.js: Verarbeitet AJAX-Anfragen zum Laden und Speichern von Beiträgen. Verwendet jQuery für die DOM-Manipulation und AJAX.
src/fetch-images.php: Ruft Beiträge aus der Datenbank ab und gibt sie als JSON zurück.
src/upload.php: Verwaltet die Erstellung und Aktualisierung von Beiträgen basierend auf dem Vorhandensein einer ID.

Diese Lösung umfasst das Einrichten des Projekts, die Datenbankkonfiguration, die HTML-Struktur, das Styling mit CSS, die Handhabung des Bild-Uploads mit AJAX und das Speichern von Bilddaten in der Datenbank mithilfe von PHP PDO. Jede Codezeile wird kommentiert, um ihren Zweck und ihre Funktionalität zu erläutern, sodass es sich um ein umfassendes Tutorial zum Erstellen einer Bildergalerie mit Upload-Funktion handelt.

Verbindungslinks

Wenn Sie diese Serie hilfreich fanden, denken Sie bitte darüber nach, dem Repository einen Stern auf GitHub zu geben oder den Beitrag in Ihren bevorzugten sozialen Netzwerken zu teilen? Ihre Unterstützung würde mir sehr viel bedeuten!

Wenn Sie weitere hilfreiche Inhalte wie diesen wünschen, folgen Sie mir gerne:

LinkedIn
GitHub

Quellcode

Das obige ist der detaillierte Inhalt vonPHP-Crashkurs: Einfache Bildergalerie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!