在本文中，咱们将应用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为菠萝的我的项目。删除它之后，页面看起来就像给定的图像所示。
表格是这样的。