基于php网上购物商城系统_php购物网站

项目需求

网上购物商城系统实际上是一个B/S结构的信息系统，本系统为前台用户部分。包括用户在线注册、登录、定购商品、浏览商品、查看订单、查看购物车、删除购物车等。

基于php网上购物商城系统（带毕业论文）

项目设计

用户在线注册、登录、定购商品、浏览商品、查看订单、查看购物车、删除购物车等。

开发工具

• 运行环境：wamp，window，谷歌浏览器
• 编程语言：php
• 开发软件：sublime

项目截图

当进入网站时，首先出现的是本网站的首页，首页包括本网站前台用户的所有功能菜单，界面美观。界面如下图所示：

 

主要代码：

<link href="css/base.css" rel="stylesheet">
<link href="css/index.css" rel="stylesheet">
<link rel="icon" href="favicon.ico" >
<script src="js/jquery-.min.js"></script>
<script src="js/template-native.js"></script>
<script src="js/index.js"></script>
<script src="js/base.js"></script>
<script type="text/template" id="template">
    <% for(var i=0;i<souse.length;i++){%>
        <div class="myPhone-shop-box">
            <a href="javascript:void(0);"><img src="<%=souse[i].url%>"></a>
            <a href="javascript:void(0);"><p><%=souse[i].text%></p></a>
            <p><%=souse[i].price%></p>
    	</div>
    <%}%>
</script>

注册页面

主要代码：

<div class="w">
		<div class="content">
			<form action="info/register.php" method="POST">
				<fieldset>
					<legend>注册</legend>
					<label>
						用户名：<input type="text" placeholder="只能输入3-16个字母、数字、汉字" autofocus pattern="[a-zA-Z0-9\u4e00-\u9fa5]{3,16}" id="text" name="username">
					</label>
					<label>
						设置密码：<input type="password" placeholder="只能输入6-16个字母、数字、下划线" pattern="(\w){6,16}" id="pwd1" name="password">
					</label>
					<label>
						确认密码：<input type="password" placeholder="请再次输入密码" id="pwd2" name="repassword">
					</label>
					<input type="submit" name="" value="立即注册" id="sub">
				</fieldset>
			</form>
		</div>
	</div>

登录页

主要代码：

<a href="index.html">返回商城</a>
	<a href="register.html">点击注册</a>
 
	<form action="info/login.php" method="POST">
		<h3>用户登录</h3>
		<input type="text" class="tp" placeholder="请输入用户名" name="username" />
 		<input type="password" class="tp" placeholder="请输入密码" name="password" />
		<input type="submit" class="sr" value="登陆"/>
		<input type="reset" class="sr"  value="重置"/>
		<span class="icon-users"></span>
		<span class="icon-lock"></span>
		
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</form>

查看商品

主要代码：

<div class="w">
		<div class="container clearfix">
			<div class="container-left">
				<img src="" alt="" id="img1">
				<div class="mask"></div>
			</div>
			<div class="big">
				<img src="" id="img2">
			</div>
			<div class="container-word">
				<h1></h1>
				<h2></h2>
				<span>
					<h3></h3>
				</span>
				<dl class="phoneColor f1">
					<dt>机身颜色</dt>
					<dd>
						<ul>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
						</ul>
					</dd>
				</dl>
				<dl class="phoneColor f2">
					<dt>套餐类型</dt>
					<dd>
						<ul>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
						</ul>
					</dd>
				</dl>
				<dl class="phoneColor f3">
					<dt>存储容量</dt>
					<dd>
						<ul>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
						</ul>
					</dd>
				</dl>
				<div class="container-word-num clearfix">
					<i>数量</i>
					<button>-</button>
					<button id="num">1</button>
					<button>+</button>
				</div>
				<div class="container-word-buy clearfix">
					<button>立即购买</button>
					<button>加入购物车</button>
				</div>
			</div>
			<div class="container-img">
				<img src="../images/fast.jpg" alt="">
			</div>
		</div>
	</div>

查看购物车

主要代码：

<link rel="stylesheet" type="text/css" href="../css/base.css">
	<link rel="stylesheet" type="text/css" href="../css/car.css">
	<script src="../js/jquery-3.2.0.min.js"></script>
	<script src="../js/template-native.js"></script>
	<script src="../js/car.js"></script>
	<script type="text/template" id="template">
		<div class="container-box">
			<span class="img1">
				<img src="<%=url%>" alt="">
			</span>
			<span class="text">
				<p><%=h1%></p>
			</span>
			<span class="price">
				<p><%=price%></p>
			</span>
			<span class="delete">
				<button>删除</button>
			</span>
		</div>
	</script>

购买页面

主要代码：

<div class="w">
		<div class="container">
			<form action="../info/order.php" method="post">
				<fieldset>
					<legend>我的订单</legend>
					<label>姓名:<input type="text" name="username" placeholder="请输入您的姓名" autofocus required></label>
					<label>电话:<input type="text" name="telphone" placeholder="您输入11位手机号码" pattern="^(1)\d{10}$" required></label>
					<label>地址:<input type="text" name="adress" placeholder="请填写您的收货地址" required></label>
					<label>登录名:<input type="text" name="user" value="" id="lastText"></label>
					<!-- <label id="last">您订购的产品为:<p>苹果</p></label> -->
					<input type="submit" name="" value="确定提交订单">
				</fieldset>
			</form>
		</div>
	</div>

查看订单

主要代码：

<link rel="stylesheet" type="text/css" href="../css/base.css">
	<link rel="stylesheet" type="text/css" href="../css/car.css">
	<script src="../js/jquery-3.2.0.min.js"></script>
	<script src="../js/template-native.js"></script>
	<script src="../js/myOrder.js"></script>
	<script type="text/template" id="template">
		<div class="container-box">
			<span class="img1">
				<img src="<%=url%>" alt="">
			</span>
			<span class="text">
				<p><%=h1%></p>
			</span>
			<span class="price">
				<p>￥<%=price%></p>
			</span>
			<!-- <span class="delete">
				<button>删除</button>
			</span> -->
			<span class="sty">
				<p><%=sty%></p>
			</span>
		</div>
	</script>