使用html+css+php实现的购物网站

已于 2025-02-07 19:56:44 修改
阅读量876 收藏 9
点赞数 8
文章标签： html css php
于 2025-02-06 18:46:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_54816196/article/details/145477344
版权

一.演示视频

演示视频

二.功能需求

1.对功能的规定

1)用户购买功能：用户可以挑选、搜索商品并购买
2)用户注册功能：用户可以注册账号，填写地址等私人信息
3)管理员管理功能：实现对用户账号的增加、删除、修改、查询等功能

2.功能描述

1）登录功能：验证正在登录的账号是否合法存在于数据库中，并判断账号主人是用户还是管理员，一般用户只能浏览商品和购买商品，管理员则可以实现用户账号和商品的增删改查功能
2）主界面功能：按类别展示商品（如数码产品、食品、日常生活用品等），浏览商品的各种信息，点击可查看商品详情，也可以查询某个具体的商品，支持精确查找和模糊查找
3）用户管理功能：管理员可以添加新的用户账号（即通过用户的注册请求），修改当前账号的密码，也可以修改用户账号信息

三.数据流程图

在这里插入图片描述

四.代码实现

1.主页代码

(1)html代码

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物</title>
    <script type="text/css" src=""></script>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <link rel="stylesheet" href="./x.css" type="text/css">
    
</head>

<body>
    <div class="topbox">
        <div class="tbbox">
            <div class="tmbox1">
                <a href="#"><img src="./smt.png" alt="#" /></a>
            </div>
            <div class="tmbox2">
                <div class="tsbox1">
                    <input type="text" style="width: 589px; height: 24px" id="shurukuang" placeholder="iPhone13" />
                    <button id="sousuo" style="color: white">搜索</button>
                </div>
                <div class="tsbox2">
                    <a href="#">手机通讯</a>
                    <a href="#">手机配件</a>
                    <a href="#">电脑办公</a>
                    <a href="#">智能穿戴/智能出行</a>
                </div>
            </div>
        </div>
    </div>   
        <div class="mmbox2">
            <div class="msbox1">
                
            </div>
            <div class="msbox2">
               
                <div class="mssbox">
                    <div class="nihao">
                        <img src="./个人中心.png" style="border-radius: 10%; margin: 5px 80px 0 108px " height="100px" />
                        <p style="text-align: center">Hi! <?php echo $username; ?>你好</p>
                    </div>
                    <div class="mssbutton">
                        <button style="
                    background-color: rgb(255, 93, 0);
                    color: white;
                    margin-left: 30px;
                  ">
                  <a href="../001/index.php">登录</a>
                </button>
                        <button style="background-color: rgb(255, 118, 0); color: white">
                  <a href="../001/register.html">注册</a>
                  
                </button>
                        <button style="
                    background-color: white;
                    color: rgb(255, 80, 0);
                    border: 1px solid rgb(255, 80, 0);
                  ">
                  <a href="../nihao/shop.php">商品</a>
                </button>
                    </div>
                    <ul class="mssbaobeishoucang">
                        <li>
                            <i class="iconfont">&#xe602;</i><br /><a href="#">宝贝收藏</a>
                        </li>
                        <li>
                            <i class="iconfont">&#xe662;</i><br /><a href="#">买过的店</a>
                        </li>
                        <li>
                            <i class="iconfont">&#xe62d;</i><br /><a href="#">收藏的店</a>
                        </li>
                        <li>
                            <i class="iconfont">&#xe621;</i><br /><a href="#">我的足迹</a>
                        </li>
                    </ul>
                    
                </div>
            </div>
        </div>

    <div class="shangpingbox">
        <div class="sp">
            <a class="sp-x">
                <div class="sp-1">
                    <img src="./iphone.png" alt="#" style="height: 150px; border-radius: 12px" />
                </div>
                <div class="sp-2">
                    <p style="margin: 0 0 0 0">
                        iphone14船新版本
                    </p>
                    <p style="
                  margin: 0 0 0 0;
                  font-size: 18px;
                  font-weight: 600;
                  color: rgb(255, 80, 0);
                  margin-top: 70px;
                ">
                        <span style="font-size: 12px">￥</span> 69
                    </p>
                </div>
            </a>
            <a class="sp-x">
                <div class="sp-1">
                    <img src="./huawei.png" alt="#" style="height: 150px; border-radius: 12px" />
                </div>
                <div class="sp-2">
                    <p style="margin: 0 0 0 0">
                        中国人都在用的华为手机
                    </p>
                    <p style="
                  margin: 0 0 0 0;
                  font-size: 18px;
                  font-weight: 600;
                  color: rgb(255, 80, 0);
                  margin-top: 70px;
                ">
                        <span style="font-size: 12px">￥</span> 69
                    </p>
                </div>
            </a>
            <a class="sp-x">
                <div class="sp-1">
                    <img src="./dyh.png" alt="#" style="height: 150px; border-radius: 12px" />
                </div>
                <div class="sp-2">
                    <p style="margin: 0 0 0 0">
                        扣1送地狱火
                    </p>
                    <p style="
                  margin: 0 0 0 0;
                  font-size: 18px;
                  font-weight: 600;
                  color: rgb(255, 80, 0);
                  margin-top: 70px;
                ">
                        <span style="font-size: 12px">￥</span> 69
                    </p>
                </div>
            </a>
            <a class="sp-x">
                <div class="sp-1">
                    <img src="./捕获.PNG" alt="#" style="height: 150px; width: 150px; border-radius: 12px" />
                </div>
                <div class="sp-2">
                    <p style="margin: 0 0 0 0">
                        无限壁挂音响,你值得拥有。
                    </p>
                    <p style="
                  margin: 0 0 0 0;
                  font-size: 18px;
                  font-weight: 600;
                  color: rgb(255, 80, 0);
                  margin-top: 70px;
                ">
                        <span style="font-size: 12px">￥</span> 69
                    </p>
                </div>
            </a>
            <a class="sp-x">
                <div class="sp-1">
                    <img src="./捕获1.PNG" alt="#" style="height: 150px; border-radius: 12px" />
                </div>
                <div class="sp-2">
                    <p style="margin: 0 0 0 0">
                        够高档,才送的出手。
                    </p>
                    <p style="
                  margin: 0 0 0 0;
                  font-size: 18px;
                  font-weight: 600;
                  color: rgb(255, 80, 0);
                  margin-top: 70px;
                ">
                        <span style="font-size: 12px">￥</span> 69
                    </p>
                </div>
            </a>
            <a class="sp-x">
                <div class="sp-1">
                    <img src="./捕获2.PNG" alt="#" style="height: 150px; border-radius: 12px" />
                </div>
                <div class="sp-2">
                    <p style="margin: 0 0 0 0">
                        你男友的好伙伴。
                    </p>
                    <p style="
                  margin: 0 0 0 0;
                  font-size: 18px;
                  font-weight: 600;
                  color: rgb(255, 80, 0);
                  margin-top: 70px;
                ">
                        <span style="font-size: 12px">￥</span> 69
                    </p>
                </div>
            </a>
            <a class="sp-x">
                <div class="sp-1">
                    <img src="./捕获3.PNG" alt="#" style="height: 150px; border-radius: 12px" />
                </div>
                <div class="sp-2">
                    <p style="margin: 0 0 0 0">
                        程序员的好帮手。
                    </p>
                    <p style="
                  margin: 0 0 0 0;
                  font-size: 18px;
                  font-weight: 600;
                  color: rgb(255, 80, 0);
                  margin-top: 70px;
                ">
                        <span style="font-size: 12px">￥</span> 69
                    </p>
                </div>
            </a>
            <a class="sp-x">
                <div class="sp-1">
                    <img src="./捕获5.PNG" alt="#" style="height: 150px; border-radius: 12px" />
                </div>
                <div class="sp-2">
                    <p style="margin: 0 0 0 0">
                        成为学霸的密码。
                    </p>
                    <p style="
                  margin: 0 0 0 0;
                  font-size: 18px;
                  font-weight: 600;
                  color: rgb(255, 80, 0);
                  margin-top: 70px;
                ">
                        <span style="font-size: 12px">￥</span> 69
                    </p>
                </div>
            </a>
            <a class="sp-x">
                <div class="sp-1">
                    <img src="./捕获4.PNG" alt="#" style="height: 150px; border-radius: 12px" />
                </div>
                <div class="sp-2">
                    <p style="margin: 0 0 0 0">
                        有了它,才能更好的看世界。
                    </p>
                    <p style="
                  margin: 0 0 0 0;
                  font-size: 18px;
                  font-weight: 600;
                  color: rgb(255, 80, 0);
                  margin-top: 70px;
                ">
                        <span style="font-size: 12px">￥</span> 169.8
                    </p>
                </div>
            </a>
        </div>
    </div>
    <div class="cebianlan">
        <ul>
            <li>
                <a href="#"><i class="iconfont">&#xe605;</i><span>消息</span></a>
            </li>
            <li>
                <a href="#"><i class="iconfont">&#xe625;</i><span>官方客服</span></a>
            </li>
        </ul>
    </div>
    </div>
</body>

(2)css代码

ul {
    padding-left: 0;
    margin: 0 0 0 0;
}

.hbox a {
    text-decoration: none;
    color: black;
    font-size: 12px;
    margin-left: 8px;
}

a:hover {
    color: red;
}

.hbox {
    height: 36px;
    width: 1210px;
    margin: 0 auto;
}

.hu1 {
    width: 370px;
    height: 36px;
    float: left;
}

.hu2 {
    position: relative;
    width: 580px;
    height: 36px;
    float: right;
}

.hu1>li {
    float: left;
    height: 36px;
    line-height: 36px;
    width: 20%;
}

.hu2>li {
    float: left;
    height: 36px;
    line-height: 36px;
    width: 13%;
}

.hbox p {
    font-size: 12px;
    margin: 0 0 0 0;
    padding-left: 8px;
}

header p:hover {
    background-color: rgb(244, 244, 244);
}

.hu2 p {
    height: 36px;
    line-height: 36px;
}

.hsbox1 {
    position: absolute;
    width: 270px;
    background-color: rgb(255, 255, 255);
    top: 36px;
    height: 0;
    overflow: hidden;
}

.hl1:hover+.hsbox1 {
    height: 200px;
    overflow-y: scroll;
}

.hsbox1:hover {
    height: 200px;
    overflow-y: scroll;
}

.hsbox1>p {
    height: 36px;
    line-height: 36px;
}

.hsbox2 {
    position: absolute;
    width: 85px;
    background-color: rgb(255, 255, 255);
    top: 36px;
    height: 0;
    overflow: hidden;
}

.hl2:hover+.hsbox2 {
    height: 72px;
}

.hsbox2:hover {
    height: 72px;
}

.hsbox3 {
    position: absolute;
    width: 85px;
    background-color: rgb(255, 255, 255);
    top: 36px;
    left: 155px;
    height: 0;
    overflow: hidden;
}

.hl3:hover+.hsbox3 {
    height: 72px;
}

.hsbox3:hover {
    height: 72px;
}

.hsbox4 {
    position: absolute;
    width: 85px;
    background-color: rgb(255, 255, 255);
    top: 36px;
    left: 380px;
    height: 0;
    overflow: hidden;
}

.hl4:hover+.hsbox4 {
    height: 216px;
}

.hsbox4:hover {
    height: 216px;
}

.hsbox5 {
    position: absolute;
    width: 85px;
    background-color: rgb(255, 255, 255);
    top: 36px;
    left: 476px;
    height: 0;
    overflow: hidden;
}

.hl5:hover+.hsbox5 {
    height: 144px;
}

.hsbox5:hover {
    height: 144px;
}

.cebianlan {
    position: fixed;
    right: 0;
    top: 300px;
    width: 60px;
    height: 295px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    background-color: #fff;
}

.cebianlan ul {
    list-style: none;
    margin-top: 25px;
}

.cebianlan li {
    width: 60px;
    height: 56px;
    margin-top: -10px;
    padding-top: 10px;
    text-align: center;
    margin-bottom: 10px;
}

.cebianlan ul a {
    text-decoration: none;
    color: #333;
}

.cebianlan li i {
    display: block;
    width: 60px;
    height: 24px;
    font-size: 23px;
    padding-bottom: 5px;
}

.cebianlan ul a span {
    font-size: 12px;
    display: block;
    width: 60px;
    height: 17px;
    margin-top: 3px;
}

.tsbox2>a {
    font-size: 12px;
    color: black;
    text-decoration: none;
}

.tmbox2>a:hover {
    color: red;
}

.topbox {
    width: 100%;
    height: 122px;
}

.tbbox {
    width: 1190px;
    height: 90px;
    margin: 0 auto;
    padding-top: 24px;
}

.tmbox1,
.tmbox2,
.tmbox3 {
    float: left;
}

.tsbox1 {
    background-color: white;
    padding-left: 12px;
    width: 685px;
    height: 40px;
    border: 2px solid rgb(255, 80, 0);
    border-radius: 20px;
    line-height: 38px;
}

#shurukuang {
    border: 0px;
}

#sousuo {
    width: 84px;
    height: 36px;
    background-color: rgb(255, 107, 0);
    border-radius: 20px;
    border: 0;
}

.tsbox2 {
    margin-left: 20px;
}

.tmbox1 {
    margin-top: -10px;
    margin-left: 50px;
    width: 15%;
}

.tmbox2 {
    margin-top: 18px;
    width: 70%;
}

.tmbox3 {
    margin-top: -8px;
    width: 10%;
}

.tsbox2>a {
    display: inline-block;
    color: rgb(102, 102, 102);
    margin-left: 8px;
    padding-top: 8px;
}

.tsbox2>a:hover {
    color: rgb(255, 68, 0);
}

#shurukuang {
    outline: none;
}

select {
    outline: none;
}

main {
    width: 1190px;
    height: 1050px;
    background-color: white;
    border-radius: 16px;
    margin: 0 auto;
}

.mbbox {
    width: 100%;
    height: 423px;
}

.mmbox1 {
    height: 368px;
    width: 270px;
    background-color: rgb(247, 249, 250);
    border-radius: 15px;
    float: left;
    margin: 24px 0 0 24px;
}

.mmul>li {
    height: 38px;
    font-size: 14px;
}

.mmul>li>a {
    text-decoration: none;
    color: rgb(102, 102, 102);
}

.mmul span {
    display: inline-block;
    padding: 0 6px;
}

.mmul i {
    margin-right: 12px;
}

.mmul a:hover {
    color: red;
    text-decoration: underline;
}

.mmbox2 {
    width: 882px;
    height: 423px;
    float: left;
    margin-left: 11px;
}

.msbox1>ul {
    width: 856px;
    height: 42px;
    margin-top: 24px;
    margin-right: 26px;
    background-color: rgb(247, 249, 250);
    border-radius: 15px;
}

.msbox1>ul>li {
    float: left;
}

.msbox1 span {
    color: rgb(224, 226, 231);
}

.msbox1 a {
    display: inline-block;
    padding: 0 20px;
    line-height: 42px;
    color: rgb(51, 51, 51);
    text-decoration: none;
}

.msbox1 a:hover {
    color: rgb(255, 80, 0);
}

.msbox2 {
    width: 882px;
    height: 357px;
    position: relative;
}

.lunbotu {
    width: 564px;
    height: 315px;
    border-radius: 15px;
    margin-top: 10px;
    float: left;
    background-color: aqua;
}

.mssbox {
    width: 314px;
    height: 357px;
    float: left;
    position: absolute;
    left: 150px;
}

.nihao {
    width: 316px;
    height: 130px;
}

.mssbutton {
    width: 316px;
    height: 44px;
    margin-top: 13px;
}

.mssbutton>button {
    width: 80px;
    height: 42px;
    border-radius: 21px;
    font-size: 16px;
    border: 0;
    margin-left: 6px;
}

.mssbaobeishoucang {
    width: 286px;
    height: 48px;
    margin: 30px 0 0 30px;
}

.mssbaobeishoucang>li {
    width: 48px;
    height: 48px;
    float: left;
    margin-right: 22px;
}

.mssbaobeishoucang a {
    font-size: 12px;
    text-decoration: none;
    color: rgb(60, 60, 60);
    display: inline-block;
}

.mssbaobeishoucang a:hover {
    color: red;
}

.mssbaobeishoucang i {
    font-size: 20px;
    margin-left: 12px;
}

.mssredian {
    width: 252px;
    height: 18px;
    margin: 36px 0 0 30px;
}

.mssredian>a {
    font-size: 12px;
    text-decoration: none;
    color: rgb(115, 115, 115);
}

.shangpingbox {
    width: 100%;
    height: 360px;
    position: relative;
    top: 400px;
}

.sp {
    width: 1180px;
    height: 360px;
    position: absolute;
    left: 15%;
}


.sp-x {
    display: block;
    width: 370px;
    height: 172px;
    background-color: rgb(247, 249, 250);
    border-radius: 12px;
    float: left;
    margin: 0 0 18px 18px;
}

.sp-1 {
    height: 150px;
    width: 150px;
    float: left;
    margin: 11px 11px 11px 11px;
}

.sp-2 {
    height: 140px;
    width: 186px;
    float: left;
    margin-top: 18px;
}

#shangpingbox>a:hover {
    border: 1px solid rgb(255, 145, 94);
    width: 368px;
    height: 170px;
}


/* 轮播图 */

.swiper {
    width: 564px;
    height: 315px;
    position: relative;
}

.swiper {
    --swiper-theme-color: #ff6600;
    /* 设置Swiper风格 */
    --swiper-navigation-color: #ff6600;
    /* 单独设置按钮颜色 */
    --swiper-navigation-size: 30px;
    /* 设置按钮大小 */
    overflow: hidden;
}

.swiper-wrapper img {
    width: 564px;
    height: 315px;
    border-radius: 15px;
}

.swiper {
    --swiper-pagination-color: #ff6600;
    /* 两种都可以 */
}

(3)php代码

echo "<h1>判断界面</h1>";

@$name = $_COOKIE['username'];

echo $_COOKIE['username'];

if ($name) {

    echo "<script>

     alert(\"尊敬的$name ,欢迎回来！！\");location.href='index.html';

</script>";

}else{

    echo "<script>

    alert('您还尚未登录！请返回登录~~')

</script>";

    echo "<a href='login.html'>如果跳转失败请点击跳转~~</a>";

    header("Refresh:1;url=login.html");
    
}

2.登陆界面代码

(1)html代码

<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" href="./register.css" type="text/css">
<style type="text/css">
body {
	 

                min-width: 500px;

	/* background-image:url(https://s1.ax1x.com/2020/07/31/alz3xs.jpg); */

	font-size:14px;
}
#main {
	width:360px;
	height:320px;
	background:#fff;
	border:1px solid #ddd;
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-180px;
	margin-top:-160px;
	background-size: cover;
	/* background-image:url(https://s1.ax1x.com/2020/07/31/alzGMn.jpg); */
}
#main .title {
	height: 48px;
	line-height: 48px;
	color:#333;
	font-size:16px;
	font-weight:bold;
	text-indent:30px;
	border-bottom:1px dashed #eee;
	
}
#main form {
	width:300px;
	margin:20px 0 0 40px;
}
#main form label {
	margin:20px 0 0 40px;
	display:block;
}
#main form label input.text {
	width:200px;
	height:25px;
}

#main form label input.submit {
	width:200px;
	display:block;
	height:35px;
	cursor:pointer;
	margin:20px 0 0 2px;
}
/* error_reporting(0); */
</style>
</head>
<body>
	<div class="box">
		<p class="ziti">欢迎注册</p>
		<div class="box1">
			
			<div class="box2">
				<div id="main">
					<div class="title">注册</div>
					<form  action="register.php" method="post" onsubmit="return enter()">
						<label><input class="text" type="text"  placeholder="用户名" name="username" /></label>
						<label><input class="text" type="password"  placeholder="密码" name="password" /></label>
						<label><input class="submit" type="submit" name="submit" value="注册" /></label>
					</form>
				</div>
			</div>
		</div>
	</div>
		
</body>

(2)css代码

.box{
    height:800px;
    width: 1500px;
    position: relative;
    background: url(.//001.png) no-repeat;
    background-size: cover;

}

.box1{
    height: 435px;
    width: 100%;
    position:absolute;
    top: 150px;
}

.box2{
    width:362px;
    height: 322px;
    position: absolute;
    top: 50px;
    left: 600px;
    margin-right: 0px;
}

.img{
    width:782px;
    height: 435px;
    position: absolute;
    
}

.ziti{
    margin:0;
    padding:0;
    line-height:220px;
    font-size:80px;
    font-family: 宋体;
    font-style: italic;
    color:#000000;
    
}

(3)php代码

<?php
// error_reporting(0);
//第一次登陆的时候，通过用户输入的信息来确认用户
session_start();
if ( (($_POST['username']))!=NULL && (($_POST['password'])!=NULL)) {
    // echo '登陆';
    $username = ($_POST['username']);
    $password = ($_POST['password']);
    
    //从db获取用户信息
    //PS：数据库连接信息改成自己的 分别为主机 数据库用户名 密码
    $conn = mysqli_connect('localhost','twistzz','123000');
    // // 如果有错误，存在错误号
    // if (mysqli_errno($conn)) {

    // echo mysqli_error($conn);

    // exit;
    // }
    // else{
    //     echo "连接成功";
    // }

    $va = mysqli_select_db($conn,"test");

    // if($va){

    //     echo "选择成功";

    // }
    // else {

    //     echo "选择失败";
    // }

    $sql = "select *  from test where username = '$username'and password='$password'";
    $res = mysqli_query($conn,$sql);
    $row = mysqli_fetch_array($res);
    // echo $row['username'];
    // if(empty($row)){
    //     echo "空";
    // }
    // else echo $row[0],$row[1];
    
    if	($row[0]!=$username) {
        // echo '不能登陆!';
        // header('Location:login.html');
        // $row['username'];
        echo "<script>alert('登陆失败！');location.href='login.html';</script>";
        // echo ($username);
        // header('Location:login.html');
    }
    else if($row[0]==$username&&$row[1]!=$password)
    {
        // $row['username'];
        echo "<script>alert('登陆失败！！');location.href='login.html';</script>";
    }
    else if($row[0]!=$username&&$row['password']!=$password) {
        // $row['username'];
        echo "<script>alert('登陆失败！！！');location.href='login.html';</script>";
    }
    else if($row[0]==$username&&$row[1] ==$password) {
        //如果密码验证通过，设置一个cookies，把用户名保存在客户端
        setcookie('username',$username,time()+10);//设置一个小时
        //最后跳转到登录后的欢迎页面
        /*echo '登陆成功!';
        
        header('Location:https://y.qq.com/n/yqq/mv/v/o0013f4q6uz.html');//跳转到最后的欢迎页面*/
        $_SESSION['logined']=1;   //判断是否已经登录的依据。
        $_SESSION['username']=$username;
        // $_SESSION["uid"]=$uid;
        echo "<script>alert('登陆成功');location.href='index.html';</script>";
        
    }
    else{
        echo "错误";
    }
}
else {
    echo '登陆失败';
    header('Location:login.html');//跳转到失败页面
}
  
if ( (($_COOKIE['username']) != null)  && (($_COOKIE['password']) != null) ) {
    $username = $_COOKIE['username'];
    $password = $_COOKIE['password'];

    //从db获取用户信息
    //PS：数据库连接信息改成自己的 分别为主机 数据库用户名 密码
    $conn = mysqli_connect('localhost:3306', 'twistzz', '123000','test');
    
    $res = mysqli_query($conn,"select * from test where username =  '$username' ");
    $row = mysqli_fetch_assoc($res);
    if ($row['password'] == $password) {
        //验证通过后跳转到登录后的欢迎页面
         $_SESSION["username"]=$username;
        echo "<script>alert('登陆成功');location.href='index.html';</script>";
    }
}
else {
    echo "<script>alert('用户名或密码错误');location.href='login.html';</script>";
}


?>

3.注册界面代码

(1)html代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" href="./register.css" type="text/css">
<style type="text/css">
body {
	 

                min-width: 500px;

	/* background-image:url(https://s1.ax1x.com/2020/07/31/alz3xs.jpg); */

	font-size:14px;
}
#main {
	width:360px;
	height:320px;
	background:#fff;
	border:1px solid #ddd;
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-180px;
	margin-top:-160px;
	background-size: cover;
	/* background-image:url(https://s1.ax1x.com/2020/07/31/alzGMn.jpg); */
}
#main .title {
	height: 48px;
	line-height: 48px;
	color:#333;
	font-size:16px;
	font-weight:bold;
	text-indent:30px;
	border-bottom:1px dashed #eee;
	
}
#main form {
	width:300px;
	margin:20px 0 0 40px;
}
#main form label {
	margin:20px 0 0 40px;
	display:block;
}
#main form label input.text {
	width:200px;
	height:25px;
}

#main form label input.submit {
	width:200px;
	display:block;
	height:35px;
	cursor:pointer;
	margin:20px 0 0 2px;
}
/* error_reporting(0); */
</style>
</head>
<body>
	<div class="box">
		<p class="ziti">欢迎注册</p>
		<div class="box1">
			
			<div class="box2">
				<div id="main">
					<div class="title">注册</div>
					<form  action="register.php" method="post" onsubmit="return enter()">
						<label><input class="text" type="text"  placeholder="用户名" name="username" /></label>
						<label><input class="text" type="password"  placeholder="密码" name="password" /></label>
						<label><input class="submit" type="submit" name="submit" value="注册" /></label>
					</form>
				</div>
			</div>
		</div>
	</div>
	
	
</body>
</html>

(2)css代码

.box{
    height:800px;
    width: 1500px;
    position: relative;
    background: url(.//001.PNG) no-repeat;
    background-size: cover;

}

.box1{
    height: 435px;
    width: 100%;
    position:absolute;
    top: 150px;
}

.box2{
    width:362px;
    height: 322px;
    position: absolute;
    top: 50px;
    left: 600px;
    margin-right: 0px;
}



.ziti{
    margin:0;
    padding:0;
    line-height:220px;
    font-size:80px;
    font-family: 宋体;
    font-style: italic;
    color:#000000;
}

(3)php代码

<?php
error_reporting(0);

$username = ($_POST['username']);
$password = trim($_POST['password']);
$conn = mysqli_connect('localhost:3306', 'twistzz', '123000');      


//如果有错误，存在错误号
// if (mysqli_errno($conn)) {

//     echo mysqli_error($conn);

//     exit;
// }
// else{
//     echo "连接成功";

// }

$va = mysqli_select_db($conn,"test" );   //选择数据库
// if($va){

//     echo "选择成功";

// }
// else {

//     echo "选择失败";
// }

mysqli_set_charset($conn, 'utf8');   //选择字符集

$sql = "select * from test where username = '$username'";
// $sql = "select * from test";


$result = mysqli_query($conn,$sql);//针对user这个数据库进行查询, 查询是否存在有这个用户
$row = mysqli_num_rows($result);//输出查询结果，传给$row
// echo $row;


if($_POST['username']==NULL){
    echo "<script>alert('用户名不能为空');location.href='register.html';</script>";
}
else if($_POST['password']== NULL){
    echo "<script>alert('密码不能为空');location.href='register.html';</script>";
}
else{
    if($row){
        echo "<script>alert('用户名已存在');location.href='register.html';</script>";
    }else{
        $sql1 ="insert into test(username,password) values('$username','$password')";//PHP MySQL 插入数据
        $result = mysqli_query($conn,$sql1);//判断插入数据是否成功
        if($result == false){
            // echo $sql1;
            echo "<script>alert('注册失败！');location.href='register.html';</script>";
            
            	
        }else{
            
            echo "<script>alert('注册成功！');location.href='login.html';</script>";
        }
    }
}




mysqli_close($conn);

?>

4.展示商品页面代码

<!--这是展示商品的页面-->
<?php
session_start();//开始
//连接数据库
$db=new MySQLi("localhost","twistzz","123000","test");
!mysqli_connect_error() or die("连接失败");
$db->query("set names utf8");
//获取传值
$ids=$_GET["ids"];
// $ids="123";
$uid=$_SESSION["username"];    //用户账号
// $uid="123";                                          
                                         
//定义用户uid为超全局变量
$_SESSION["uid"]=$uid;             
//查询商品表
$sql="select * from fruit";
$res=$db->query($sql);
$attr=$res->fetch_all();//水果信息数组

$sql="select Code from orders where UserName ='$uid'";
$res=$db->query($sql);
$dhattr=$res->fetch_all();//单号数组  orders表中username对应的code列

$dhStr="";
//数组遍历，转为字符串
foreach($dhattr as $v){
    $dhStr=$dhStr.$v[0]."','";
}
//echo $dhStr;

$dhStr=substr($dhStr,0,-3);//截取字符串
$sql="select FruitCode,count(Count) from orderdetails where OrderCode in('$dhStr') group by FruitCode" ;
$res=$db->query($sql);
$spattr=$res->fetch_all();//购物车水果信息数组
$strPice=0;
foreach($attr as $v){
    foreach($spattr as $v1){
        if($v[0]==$v1[0]){
            $strPice=$strPice+$v[2]*$v1[1];
        }
    }
}
//echo $strPice;
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>商品详情</title>

</head>
<body background="001.jpg" 
               style="background-repeat:no-repeat;
               background-attachment:fixed;
               background-size:100% 100%; ">
    
<h1>数码通商城</h1>
<div>
    <?php 
    echo $uid;
    echo ",您好！";
    ?>
</div>
<div>

    <!--将商品总价传到购物车页面-->
    <a href="Cart.php?strpice=<?php echo $strPice ?>&ids=<?php echo $ids ?>">查看购物车</a>
</div>
<div>
    购物车中有<span id="spnum"><?php echo count($spattr); ?></span>种商品，总价格：<span id="sppice"><?php echo $strPice; ?></span>元。
</div>

<table width="100%" border="1">
    <tr>
        <th>代号</th>
        <th>名称</th>
        <th>价格</th>
        <th>发货地</th>
        <th>库存量</th>
        <th>操作</th>
    </tr>
    <?php
        foreach($attr as $k=>$v){?>
            <tr>
                <td><?php echo $v[0]; ?></td>
                <td><?php echo $v[1]; ?></td>
                <td><?php echo $v[2]; ?></td>
                <td><?php echo $v[3]; ?></td>
                <td><?php echo $v[4]; ?></td>
                <td><form action="add.php?UserName=<?php echo $uid; ?>" method="post">
                    <input type="hidden" name="ids"
                    value="<?php echo $v[0]; ?>">
                    <button>购买</button>

                </form></td>
            </tr>
        <?php }
    ?>
    <span><?php echo $_GET["kc"] ?></span>
</table>
</body>
</html>

5.购物车实现代码

(1)购物车渲染代码

<?php
session_start();//开始
//连接数据库
$db=new MySQLi("localhost","twistzz","123000","test");
!mysqli_connect_error() or die("连接失败");
$db->query("set names utf8");
$strpice=$_GET["strpice"];//接收从shop.php传过来的商品总价
$ids=$_GET["ids"];
$dlStr=$_SESSION["dlStr"];//超全局?
$uid=$_SESSION["username"];
// echo $dlStr;  
//echo $dlStr;
//查询数据
$sql="select a.ids,
    a.ordercode,
   b.name,
    b.price,
    count(a.count) 
    from orderdetails as a 
    join fruit as b 
    on a.fruitcode=b.ids and a.ids = '$uid'  group by b.name;"
    // ."where a.ids = '$uid'"
    ;


    $res=$db->query($sql);
    $spattr=$res->fetch_all();

?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>购物车</title>
</head>

<body background="002.jpg" 
               style="background-repeat:no-repeat;
               background-attachment:fixed;
               background-size:100% 100%; ">
<h1>数码通商城</h1>
<div>
    <a href="shop.php">浏览商品</a>  
</div>

<table width="100%" border="1">
    <tr>
        <th>商品名称</th>
        <th>商品单价</th>
        <th>购买数量</th>
        <th>操作</th>
    </tr>
    <?php foreach($spattr as $v){ ?>
        <tr>
            <td><?php echo $v[2]; ?></td>
            <td><?php echo $v[3]; ?></td>
            <td><?php echo $v[4]; ?></td>
            <td><a href="../gouwuchegai/adf.php?id=<?php echo 1234 ?>"></a>
                <form action="delchuli.php?name=<?php echo $v[2]; ?>" method="post">
                    <input type="hidden" name="orderCode"
                    value="<?php echo $v[1]; ?>">
                    <button>删除</button>
                </form>
            </td>
        </tr>
    <?php }
    ?>
</table>
</body>
</html>

(2)购物车内增加商品数量代码

<?php
    session_start();//开始
    //连接数据库
    $db=new MySQLi("localhost","twistzz","123000","test");
    !mysqli_connect_error() or die("连接失败");
    $db->query("set names utf8");
    //获取传值
    $ids=$_POST["ids"];
    // $uid="123";
    $uid=$_SESSION["username"];
    $date=date("Y-m-d h:i:s");//获取时间
    $sql="select numbers from fruit where ids='$ids'";
    $res=$db->query($sql);
    $att=$res->fetch_row();
    foreach($att as $v){
        if($v>0){  //条件判断
            $sql="insert into orders values('$uid"."$date','$uid','$date')";
            $db->query($sql);
            $abc="insert into orderdetails values('$uid','$uid"."$date','$ids',1)";
            $db->query($abc);
            header("location:shop.php?ids=$ids");
        }else{
            echo "error";
            header("location:shop.php?kc=库存不足");
        }
    }    
?>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值