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