关于小程序:小程序商城系统源码完整开源版

44次阅读

共计 7305 个字符，预计需要花费 19 分钟才能阅读完成。

在本文中，咱们将应用 PHP 和 MySQL 构建一个跨平台反对的小程序商城源码。在这个源码中，咱们能够依据商品的名称、数量、状态 (待定、已购买、不可购买) 和日期增加它们。咱们能够查看、删除和更新这些条目，将有一个日期过滤性能，咱们能够依据日期查看货物。

技术条件:XAMPP 服务器、HTML 基本概念、CSS、Bootstrap、PHP、MySQL

残缺源码：xcxyms.top

咱们将依照以下步骤构建此应用程序。

步骤 1：关上 XAMPP 控制面板，启动 Apache 和 MySQL 服务。在 XAMPP 文件夹中，转到 htdocs 文件夹并创立一个名为 project1 的文件夹。咱们将所有文件保留在 project1 文件夹中。在这个文件夹中，有五个文件 (add.php, connect.php, delete.php, index.php, update.php) 和一个名为 css 的文件夹，其中有一个名为 style.css 的文件。

步骤 2：转到 localhost/phpMyAdmin 并创立一个名为 grocerydb 的数据库。在它上面，创立一个名为 grocerytb 的 5 列表。列是 Id(主键)、Item_name、Item_Quantity、Item_status 和日期。Id 列的主动递增模式应该是开启的。最初，表构造应该如图所示。

步骤 3：关上您抉择的编辑器。创立一个名为 connect.php 的文件，并编写以下代码行。

<?php
$con=mysqli_connect("localhost","root","","grocerydb");
if(!$con)
{die("cannot connect to server");
}    
?>

这个页面用于将 PHP 页面与数据库“grocerydb”连接起来。连贯这个数据库之后，连贯对象被返回给 $con 变量。如果没有建设连贯，将显示“无奈连贯到服务器”的音讯。

步骤 4：创立另一个名为 add.php 的文件，并编写以下代码行。

<html>

<head>
    <meta http-equiv="Content-Type"
        content="text/html; charset=UTF-8">

    <title>Add List</title>

    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div class="container mt-5">
        <h1>Add Grocery List</h1>
        <form action="add.php" method="POST">
            <div class="form-group">
                <label>Item name</label>
                <input type="text"
                    class="form-control"
                    placeholder="Item name"
                    name="iname" />
            </div>

            <div class="form-group">
                <label>Item quantity</label>
                <input type="text"
                    class="form-control"
                    placeholder="Item quantity"
                    name="iqty" />
            </div>

            <div class="form-group">
                <label>Item status</label>
                <select class="form-control"
                    name="istatus">
                    <option value="0">
                        PENDING
                    </option>
                    <option value="1">
                        BOUGHT
                    </option>
                    <option value="2">
                        NOT AVAILABLE
                    </option>
                </select>
            </div>
            <div class="form-group">
                <label>Date</label>
                <input type="date"
                    class="form-control"
                    placeholder="Date"
                    name="idate">
            </div>
            <div class="form-group">
                <input type="submit"
                    value="Add"
                    class="btn btn-danger"
                    name="btn">
            </div>
        </form>
    </div>

    <?php
        if(isset($_POST["btn"])) {include("connect.php");
            $item_name=$_POST['iname'];
            $item_qty=$_POST['iqty'];
            $item_status=$_POST['istatus'];
            $date=$_POST['idate'];
    

            $q="insert into grocerytb(Item_name,
            Item_Quantity,Item_status,Date)
            values('$item_name',$item_qty,
            '$item_status','$date')";

            mysqli_query($con,$q);
            header("location:index.php");
        }
        
        // if(!mysqli_query($con,$q))
        // {
            // echo "Value Not Inserted";
        // }
        // else
        // {
            // echo "Value Inserted";
        // }
    ?>
</body>

</html>

这个页面用于将食品杂货数据从 HTML 表单插入到“grocerydb”数据库中的“grocerytb”表。html 表单蕴含要由用户输出的项目名称、我的项目数量、我的项目状态和日期值。咱们曾经别离将 Pending、Bought 和 Not Available(我的项目状态)的选项值设置为 0、1 和 2。当单击按钮时，咱们将蕴含文件“connect.php”，以将页面连贯到数据库。而后，咱们获取用户输出的所有数据，并将它们插入到“grocerytb”表中。如果在表中胜利地输出了值，页面将挪动到“index.php”，它将容许用户查看到目前为止输出的项(或目前在表中)。在 css 文件夹中创立一个“style.css”文件，并编写如下代码。

body {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    background-color: beige;
}

h1, h2, h3, h4, h5 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}

“add.php”文件应该如图所示。

步骤 5：创立另一个名为 index.php 的文件，并编写以下代码行。

<?php
    include("connect.php");

    if (isset($_POST['btn'])) {$date=$_POST['idate'];
        $q="select * from grocerytb where Date='$date'";
        $query=mysqli_query($con,$q);
    }
    else {
        $q= "select * from grocerytb";
        $query=mysqli_query($con,$q);
    }
?>

<html>

<head>
    <meta http-equiv="Content-Type"
        content="text/html; charset=UTF-8">

    <title>View List</title>

    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

    <link rel="stylesheet"
        href="css/style.css">
</head>

<body>
    <div class="container mt-5">
        
        <!-- top -->
        <div class="row">
            <div class="col-lg-8">
                <h1>View Grocery List</h1>
                <a href="add.php">Add Item</a>
            </div>
            <div class="col-lg-4">
                <div class="row">
                    <div class="col-lg-8">
                        
                        <!-- Date Filtering-->
                        <form method="post" action="">
                            <input type="date"
                                class="form-control"
                                name="idate">
                        
                            <div class="col-lg-4"
                                method="post">
                                <input type="submit"
                                class="btn btn-danger float-right"
                                name="btn" value="filter">
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- Grocery Cards -->
        <div class="row mt-4">
            <?php
                while ($qq=mysqli_fetch_array($query))
                {
            ?>

            <div class="col-lg-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">
                            <?php echo $qq['Item_name']; ?>
                        </h5>
                        <h6 class="card-subtitle mb-2 text-muted">
                            <?php echo
                            $qq['Item_Quantity']; ?>
                        </h6>
                        <?php
                        if($qq['Item_status'] == 0) {
                        ?>
                        <p class="text-info">PENDING</p>

                        <?php
                        } else if($qq['Item_status'] == 1) {
                        ?>
                        <p class="text-success">BOUGHT</p>

                        <?php } else { ?>
                        <p class="text-danger">NOT AVAILABLE</p>

                        <?php } ?>
                        <a href=
                        "delete.php?id=<?php echo $qq['Id']; ?>"
                            class="card-link">
                            Delete
                        </a>
                        <a href=
                        "update.php?id=<?php echo $qq['Id']; ?>"
                            class="card-link">
                            Update
                        </a>
                    </div>
                </div><br>
            </div>
            <?php
            }
            ?>
        </div>
    </div>
</body>

</html>

咱们再次应用“connect.php”来连贯页面和数据库。而后，咱们应用 mysqli_fetch_array()函数从表中获取所有数据，并将它们显示在页面上。对于每个我的项目，都有一个删除和更新链接。应用顶部的 Add Item 链接，页面将再次挪动到“Add .php”，从那里用户能够再次向数据库增加食品杂货。咱们还在这个页面上减少了一个日期过滤性能。当用户输出日期并单击筛选按钮时，所有的食品杂货数据将依据输出的日期显示。目前，咱们的“grocerytb”表如图所示。

挪动到“index.php”文件后，页面看起来就像给定的图像所示。

在输出日期 01/14/2021 后，页面将显示在给定的图像中。

步骤 6：创立另一个名为 update.php 的文件，并编写以下代码行。

<?php
    include("connect.php");
    if(isset($_POST['btn']))
    {$item_name=$_POST['iname'];
        $item_qty=$_POST['iqty'];
        $istatus=$_POST['istatus'];
        $date=$_POST['idate'];
        $id = $_GET['id'];
        $q= "update grocerytb set Item_name='$item_name', Item_Quantity='$item_qty',
        Item_status='$istatus', Date='$date' where Id=$id";
        $query=mysqli_query($con,$q);
        header('location:index.php');
    }
    else if(isset($_GET['id']))
    {$q = "SELECT * FROM grocerytb WHERE Id='".$_GET['id']."'";
        $query=mysqli_query($con,$q);
        $res= mysqli_fetch_array($query);
    }
?>
<html>

<head>
    <meta http-equiv="Content-Type"
        content="text/html; charset=UTF-8">
    
    <title>Update List</title>

    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div class="container mt-5">
        <h1>Update Grocery List</h1>
        <form method="post">
            <div class="form-group">
                <label>Item name</label>
                <input type="text"
                    class="form-control"
                    name="iname"
                    placeholder="Item name"
                    value=
        "<?php echo $res['Item_name'];?>" />
            </div>

            <div class="form-group">
                <label>Item quantity</label>
                <input type="text"
                    class="form-control"
                    name="iqty"
                    placeholder="Item quantity"
value="<?php echo $res['Item_Quantity'];?>" />
            </div>

            <div class="form-group">
                <label>Item status</label>
                <select class="form-control"
                    name="istatus">
                    <?php
                        if($res['Item_status'] == 0) {
                    ?>
                    <option value="0" selected>PENDING</option>
                    <option value="1">BOUGHT</option>
                    <option value="2">NOT AVAILABLE</option>
                    <?php } else if($res['Item_status'] == 1) { ?>
                    <option value="0">PENDING</option>
                    <option value="1" selected>BOUGHT</option>
                    <option value="2">NOT AVAILABLE</option>
                    <?php } else if($res['Item_status'] == 2) { ?>
                    <option value="0">PENDING</option>
                    <option value="1">BOUGHT</option>
                    <option value="2" selected>NOT AVAILABLE</option>
                    <?php
                        }
                    ?>
                </select>
            </div>

            <div class="form-group">
                <label>Date</label>
                <input type="date" class="form-control"
                    name="idate" placeholder="Date"
                    value="<?php echo $res['Date']?>">
            </div>

            <div class="form-group">
                <input type="submit" value="Update"
                    name="btn" class="btn btn-danger">
            </div>
        </form>
    </div>
</body>

</html>

在 ” index.php “ 中，咱们获取了每一项的 Id。在 ” update.php “ 中，用户能够编辑任何数据。对于该我的项目，咱们将获取 id 和更新后的我的项目的数据。而后，咱们运行一个更新查问，通过它更新我的项目。我的项目更新后，页面将挪动到“index.php”。这里，咱们更新 Item_name 的值为 pineapple, Id 为 6。咱们将其 Item_Quantity 从 1 更新到 2,Item_status 从 Pending 更新到 Not available。在此之后，页面将看起来像给定的图像所示。

更新之后，index.php 将是这样的。

更新后的表看起来像这样。

步骤 7：创立另一个名为 delete.php 的文件，并编写以下代码行。

<?php
    include("connect.php");
    $id = $_GET['id'];
    $q = "delete from grocerytb where Id = $id";
    mysqli_query($con,$q);    
?>

在 ” index.php “ 中，咱们获取了每一项的 Id，这样咱们就能够删除任何数据。对于要删除的我的项目，咱们正在“delete.php”中获取 id。而后，咱们运行一个删除查问，通过该查问将删除所选项目标记录。咱们正在删除 Id 为 6、Item_name 为菠萝的我的项目。删除它之后，页面看起来就像给定的图像所示。

表格是这样的。

正文完
小程序
发表至： 小程序
2022-04-27
 0
关于小程序:慕慕到家家政小程序组件化进阶实战
关于小程序:用好知晓云从此不再网抑云
关于小程序:微信小程序二学妹问我微信小程序左滑删除怎么实现
关于小程序:读书会活动打卡小程序开发笔记一