使用PHP和MySQL创建图像库CRUD

使用PHP和MySQL创建图像库CRUD

在本节中,我们将学习图像库的CURD。我们将使用PHP和MySQL来完成这个任务。有时用户、学生、员工、管理员等需要图像库、删除模块和插入更新的选项。因此,我们需要为他们创建这些功能。为了实现轻松上传照片并通过验证删除照片,我们将使用相册。在我们的应用程序中,我们将使用Bootstrap创建一个具有吸引力的图像库布局。

在这里,我们将使用基础代码来制作具有吸引力布局的相册。通过这种方式,我们可以很容易地将其与我们的应用程序一起构建起来。在我们的应用程序中,我们将使用会话来执行适当的验证,并显示成功和错误消息。如果成功插入图像,我们将得到适当的成功消息。我们的示例将创建一个名为”image_gallery”的新表,其中包含主标题和图像列。为了显示表单、验证、错误消息等,我们还将创建文件。制作相册的逐步过程如下所述:

步骤1:

在此步骤中,我们将 创建image_gallery表 。在这里,我们将使用我们的数据库来创建此表。为了创建这个表,我们将使用一些SQL查询,描述如下:

项目表:

CREATE TABLE `image_gallery` (
  `id` int(10) UNSIGNED NOT NULL,
  `title` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
  `image` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

步骤2:

在这一步中,我们要 创建DB配置文件 。为此,我们需要在数据库中设置一些细节,例如数据库名称、phpmyadmin数据库的用户名和密码。在设置完成后,我们将使用我们的根目录创建一个名为“db_config.php”的新文件。然后,我们将像下面这样将以下代码添加到文件中:

db_config.php

<?php

define (DB_USER, "root");
define (DB_PASSWORD, "root");
define (DB_DATABASE, "sole");
define (DB_HOST, "localhost");

$mysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_DATABASE);
?>

步骤3:

在这一步中,我们将创建index.php文件。该文件用于显示带有删除按钮的显示图像,并显示图像的标题。现在我们将使用我们的根目录,并创建一个名为”index.php”的文件。之后,我们将像下面这样在文件中添加以下代码:

index.php

<?php
  session_start();
?>

<!DOCTYPE html>
<html>
<head>
    <title>Image Gallery Example</title>
    <!-- Latest CSS which is minified and compiled -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- References: https://github.com/fancyapps/fancyBox -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" media="screen">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>

    <style type="text/css">
    .gallery
    {
        display: inline-block;
        margin-top: 20px;
    }
    .close-icon{
    border-radius: 50%;
        position: absolute;
        right: 5px;
        top: -10px;
        padding: 5px 8px;
    }
        .form-image-upload{
            background: #e8e8e8 none repeat scroll 0 0;
            padding: 15px;
        }
    </style>
</head>
<body>

<div class="container">

    <h3> Example of Image Gallery CRUD using PHP MySQL </h3>
    <form action="/imageUpload.php" class="form-image-upload" method="POST" enctype="multipart/form-data">

        <?php if(!empty(_SESSION['error'])){ ?>
            <div class="alert alert-danger">
                <strong>Whoops!</strong> Our input faces some problems. <br><br>
                <ul>
                    <li><?php echo_SESSION['error']; ?></li>
                </ul>
            </div>
        <?php unset(_SESSION['error']); } ?>

        <?php if(!empty(_SESSION['success'])){ ?>
        <div class="alert alert-success alert-block">
            <button type="button" class="close" data-dismiss="alert">?</button>
                <strong><?php echo _SESSION['success']; ?></strong>
        </div>
        <?php unset(_SESSION['success']); } ?>

        <div class="row">
            <div class="col-md-5">
                <strong>Title:</strong>
                <input type="text" name="title" class="form-control" placeholder="Title">
            </div>
            <div class="col-md-5">
                <strong>Image:</strong>
                <input type="file" name="image" class="form-control">
            </div>
            <div class="col-md-2">
                <br/>
                <button type="submit" class="btn btn-success">Upload</button>
            </div>
        </div>

    </form> 

    <div class="row">
    <div class='list-group gallery'>

            <?php
            require('db_config.php');

            sql = "SELECT * FROM image_gallery";images = mysqli->query(sql);

            while(image =images->fetch_assoc()){

            ?>
                <div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
                    <a class="thumbnail fancybox" rel="ligthbox" href="/uploads/<?php echo image['image'] ?>">
                        <img class="img-responsive" alt="" src="/uploads/<?php echoimage['image'] ?>" />
                        <div class='text-center'>
                            <small class='text-muted'><?php echo image['title'] ?></small>
                        </div> <!-- text-center / end -->
                    </a>
                    <form action="/imageDelete.php" method="POST">
                    <input type="hidden" name="id" value="<?php echoimage['id'] ?>">
                    <button type="submit" class="close-icon btn btn-danger"><i class="glyphicon glyphicon-remove"></i></button>
                    </form>
                </div> <!-- col-6 / end -->
            <?php } ?>

        </div> <!-- list-group / end -->
    </div> <!-- row / end -->
</div> <!-- container / end -->

</body>

<script type="text/javascript">
    (document).ready(function(){(".fancybox").fancybox({
            openEffect: "none",
            closeEffect: "none"
        });
    });
</script>
</html>

步骤4:

在这一步骤中,我们将 创建一个imageUpload.php文件 . 这个文件用于验证使用会话、插入数据库代码和图片上传代码。所以我们将使用根目录并创建一个名为”imageUpload.php”的新文件。然后,我们将像以下这样将以下代码添加到文件中:

imageUpload.php

<?php

session_start();
require('db_config.php');

if(isset(_POST) && !empty(_FILES['image']['name']) && !empty(_POST['title'])){name = _FILES['image']['name'];
    list(txt, ext) = explode(".",name);
    image_name = time().".".ext;
    tmp =_FILES['image']['tmp_name'];

    if(move_uploaded_file(tmp, 'uploads/'.image_name)){

        sql = "INSERT INTO image_gallery (title, image) VALUES ('"._POST['title']."', '".image_name."')";mysqli->query(sql);_SESSION['success'] = 'Uploading of image is successfully.';
        header("Location: http://localhost:8000");
    }else{
        _SESSION['error'] = 'Uploading of image is failed';
        header("Location: http://localhost:8000");
    }
}else{_SESSION['error'] = 'Please Select Image or Write title';
    header("Location: http://localhost:8000");
}

?>

步骤5:

在这一步中,我们将 创建一个 imageDelete.php 文件 。这个文件用于从数据库中删除记录。因此,我们将使用我们的根目录,并创建一个名为 “imageDelete.php” 的新文件。在之后,我们将像下面这样,将以下代码添加到文件中:

imageDelete.php

<?php

session_start();
require('db_config.php');

if(isset(_POST) && !empty(_POST['id'])){

        sql = "DELETE FROM image_gallery WHERE id = "._POST['id'];
        mysqli->query(sql);

        _SESSION['success'] = 'Deletion of image is successfully.';
        header("Location: http://localhost:8000");
}else{_SESSION['error'] = 'Please Select Image or Write title';
    header("Location: http://localhost:8000");
}

?>

现在我们上面的图片库示例已经准备好运行了。为了运行这个示例,我们将使用我们的根目录并创建一个名为”upload”的新文件夹。在继续之前,我们希望完全拥有权限,因为upload文件夹将保存所有的图片。现在我们将使用我们的根目录并运行以下命令:

php -S localhost:8000

现在我们可以使用浏览器打开下面的URL:

http://localhost:8000/

打开后,我们可以看到以下输出:

使用PHP和MySQL创建图像库CRUD

Camera课程

Python教程

Java教程

Web教程

数据库教程

图形图像教程

办公软件教程

Linux教程

计算机教程

大数据教程

开发工具教程