php商城不完全开发笔记

前言

本次要搭建的网站的是一个商城的半成品（看完发现教程没更完）不过这都不重要，入门足矣

目的是了解如下几个重点：

前端页面的显示与布局
前后端参数传递的方法
session的使用
操作数据库
业务逻辑梳理

不要求学完就会开发，只是为了了解网站运作原理以及为后面学习渗透测试和代码审计打下基础

环境配置

phpstudy一键配置：apache + php 5.6 + mysql 5.7 +phpmyadmin 4.8.5

入口文件

打开网站默认跳转的页面一般指首页

要做出这样一个页面首先要了解一下盒子模型和布局方式

盒子模型

原视频链接： css布局
每一个html元素都是一个矩形盒子，通过设置属性来显示不同的样式

简单来说，我们的网页是就是一个个盒子叠加的
块级元素是垂直排列的，每个元素占满一整行

行内元素是水平排列的

通过水平竖直排列组合，不进行其他盒子位置设置，就是常规的流动式布局

回到开始，可以把页面分为几个部分
红色部分分为上中下三块，分别是导航，分类，商品展示
黄色部分是具体的小元素的分块设置

导航部分制作

设置div块，div元素没有其他的属性，所以用它来做容器包裹其他元素

<div class="nav"></div>

设置css属性(在head标签中引用)

/*设置无边距边框 让导航条紧贴浏览器*/
*{padding: 0;
    margin: 0;
    box-sizing: border-box;
} 
.nav{
    width:100%; /*宽度占比100%*/
    height:70px; /*高70px*/
    border: 1px solid red; /*边框1px 红色*/
}

导航内容包括5个部分：logo、首页、下拉菜单、搜索框、登录注册

logo

这是一张透明背景图，大小1080×1080

设置图片位置大小，设置class选择器名称logo，马上会用到

<img src="./images/logo.png" width="70px" heigth="70px" class="logo">

直接在左上角显示

首页&下拉菜单

先用li标签显示出来

<ul>
    <li>首页</li>
    <li>新闻</li>
    <li>论坛</li>
    <li>交易</li>
</ul>

这里用到第二种布局方式：浮动布局

.logo{
    float: left;
}
.nav-list ul li{
    float: left;
    list-style: none;/*去掉list前面圆点*/
    font-size: 18px;
    inline-size: 90px;
    line-height: 70px;/*行高*/
}

因为图片默认是占了一整行的，所以设置它为向左浮动，文字也是向左浮动，即可在同一行显示
(浏览器的css样式更改经常加载不出来，刷新清除缓存重启有时候也不一定管用，还需大家亲自动手验证是否有误)

我想让logo和菜单选项整体右移，可以再设置个div标签修改它的整体位置，而不用一个个设置
将logo和ul，li标签放入div块header中

<div class="nav">
        <div class="header">
          ......

.header{
    width: 1200px;
    margin: 0 auto; /*居中显示*/
}

点击跳转

我希望在任意页面点击首页可以跳转到回到首页
加一个a标签

<li><a href="top2.php">首页</a></li>

下拉菜单

通过css实现 a标签添加链接无后端交互详情参见菜鸟教程

<div class="dropdown">
<button class="dropbtn">技术论坛</button>
<div class="dropdown-content">
<a href="https://xz.aliyun.com/tab/1" target="_blank">先知社区</a>
       <a href="https://www.52pojie.cn/forum.php" target="_blank">吾爱破解</a>
       <a href="https://www.kanxue.com/" target="_blank">看雪学院</a>
       <a href="https://sec-wiki.com/news" target="_blank">SecWiki</a>
       <a href="https://blockchain.seebug.org/" target="_blank">Seebug</a>
    </div>
</div>

搜索框

<div class="search_input">  
  <form action="search2.php" name="form_search">
    <i class="fa fa-search" id="i-advanced-search-i" onclick="document.form_search.submit()"></i> 
    <!-- name参数是传值的参数-->
    <input type="text" name="search" id="i-advanced-search" placeholder="搜索">
  </form>   
</div>

搜索框是网上复制的样式，放大镜图标是font-awesome的图标，自行百度
这里同样要设置向左浮动显示，一个小技巧，测试时加上边框方便区分块

action="search2.php"    <!-- 提交到search2.php处理 -->
name="form_search"    <!-- 当前表单值 -->
onclick="document.form_search.submit()"    <!-- 点击提交表单值  -->
name="search"    <!-- 传递的参数名 -->
placeholder="搜索"    <!-- 输入框默认提示 -->

输入kk，点击放大镜搜索

用户信息是点击跳转到对应页面

<div class="user-info">
    <p>登录</p>
    <p>注册</p>
</div>

这里注意是p标签浮动显示，不是块整体浮动，注意区别

.user-info p{
    float: right;
    line-height: 70px;
    width: 55px;
}

中间部分

共四行，四个dl标签，每行有大类和小类，通过dt和dd标签分别设置

<dl class="index-list">
    <dt>手机2</dt>
    <dd>
        <a href="#" rel="" name="phone2" class="all on">不限2</a>
        <a href="#" rel="" name="huawei2" class="default">在线2</a>
        <a href="#" rel="" name="apple2" class="default">苹果2</a>
        <a href="#" rel="" name="xiaomi2" class="default">小米2</a>
        <a href="#" rel="" name="oppo2" class="default">oppo2</a>
        <a href="#" rel="" name="vivo2" class="default">vivo2</a>
    </dd>
</dl>

底部商品信息是数据库动态调用的，先了解一下数据库使用

数据库配置

添加数据库配置文件config.php 是否十分眼熟？

<?php
// header('Content-Type:text/html;charset=utf-8');
error_reporting(0);
@define('HOST','127.0.0.1');
@define('USER','root');
@define('PWD','partoof');
@define('NAME','security');
$config=@mysql_connect(HOST,USER,PWD) or die("数据库平台连接错误：".mysql_error());
mysql_select_db('security',$config) or die("数据库匹配错误：".mysql_error());
mysql_query('SET NAMES UTF8') or die("编码格式/字符集错误：".mysql_error());
?>

在其他文件中如果需要与数据库交互，使用require将配置文件包含进来即可

数据表的建立

我们使用的测试站只有几条数据，不涉及大数据量查询的优化，即便如此，分表也是必须的操作，不要一个表设置100个索引
新建一个goods表，设置一些键值，插入几条数据，因为有phpmyadmin这个工具，建表非常方便

动态调用数据信息

首先通过sql语句查询数据库商品信息(直接在当前需要调用数据的php文件写)

<?php
    $query = "SELECT * FROM goods WHERE hot='1' ORDER BY goodsid DESC";
    $result = mysql_query($query) or die('SQL语句有误：'.mysql_error());
    $row = mysql_fetch_array($result);
?>

mysql_query是判断当前查询能否成功执行，成功返回标记用于后续查询
mysql_fetch_array是匹配当前第一条结果，是真实数据

通过php语句echo查询结果直接输出在页面上，动态调用 (就这么简单?)
看起来是这样，同样的，文件路径也可以这么写
图片是存储在单独的文件夹不是数据库

<?php for($j=0;$j<4;$j++){ ?>
<ul>
<?php for($i=0;$i<3;$i++){?>
<li>
// echo出文件路径 商品价格、种类等信息
<div class="img"><a href="javascript:;"><img src="images/goods/<?php echo $row['BigCategoryid'];?>/<?php echo $row['SubCategoryid'];?>/<?php echo $row['picture'];?>"></a></div>
<p><a href="detail.php?key_id=<?php echo $row['goodsid'];?>"><?php echo $row['goodsname'];?></a><span>二手</span><span>￥<?php echo $row['price'];?></span><span>原价：￥<?php echo $row['orgprice'];?></span></p>
</li>
<?php $result++;$row=mysql_fetch_array($result);?>
<?php } ?>          
</ul>
<?php } ?>

php语句中包含html要先结束即使是语句没有结束注意上方代码

<?php?>
...html...
<?php?>

业务逻辑梳理

页面	功能
首页	搜索功能商品展示功能登录注册跳转其他
搜索页	接收search参数查询数据并显示
详情页	接收商品id 查询数据展示对应的详细信息
登录注册页	接受表单用户信息提交给验证页面
登录验证页	对提交的用户信息进行格式&安全验证查询信息是否存在&正确
注册验证页	对用户信息进行验证查询是否存在不存在则添加
加入购物车	通过判断商品卖家买家信息进行验证添加
验证码生成	生成验证码

登录注册功能

通过form表单传递参数

<form method="post" action="check.php">
    <label>邮箱</label>
    <input type="email" name="email" id="email">
    <label>密码</label>
    <input type="password" name="pwd" id="pwd" required="required">
    <label>验证码</label>
    <input type="text" name="code" id="code">
    <!-- <a href="javascript:void(0)" onclick="document.getElementById('code_img').src='../verified_code.php'"> -->
     <img id="code_img" border="1" src="../verified_code.php" alt="" width="100" height="30">
     <button type="submit">登录</button> 
</form>

submit提交所有input标签的内容，提交给check.php之后进行检查

这里有一个概念 session

session

session相当于一个数组，f12看看cookie，session就是存储在服务器的cookie，键值对，当然，这是存在于当前会话的，应该会有标记，比如id或从用户信息
开启session

session_start();

赋值

$_SESSION['login'] = $email;

$_SESSION是超全局变量，可以随意调用，只要在调用页面开启session即可

调用

session_start();
echo($_SESSION['login']);

验证页面

check.php的内容也很简单，获取提交的参数

$email = $_POST['email'];
$pwd = $_POST['pwd'];
$code = $_POST['code'];

首先进行格式判断，不能为空，一般浏览器会自动判断格式，比如我的type是email 则必须要带@符号

但是前端的判断并不保险，所以一般是在后端判断，以后再细说

然后进行数据匹配用户名密码是否正确正确则跳转并在页面显示个人信息

这也是通过session数组赋值

// 注册一些session变量
$_SESSION['login'] = $email;
$_SESSION['uname'] = $row['uname'];

在我返回原页面时，只要判断出$_SESSION['login']有值，就在导航栏显示出个人信息

$con = "SELECT * FROM users WHERE uemail='".$_SESSION['login']."'";
$que = mysql_query($con);
$userinfo = mysql_fetch_array($que);
if(isset($_SESSION['login'])){...}

当然这个判断实在导航栏的php文件中，每个页面都包含导航，所以在任何页面都会判断是否登录
退出就是点击退出会设置一个参数

<a href="http://security/top.php?delete=1">退出</a>

获取到这个参数值就清空session数组

if(isset($_GET['delete'])){
    unset($_SESSION['login']);
    header("location:http://security/index.php");
}

因为登录退出信息都是在这一个文件判断显示
再次请求时，清空login信息，则正常显示登录注册按钮，接上

$que = mysql_query($con);
$userinfo = mysql_fetch_array($que);
if(isset($_SESSION['login'])){...}
else{登录注册}

注册也是差不多的流程，就是在判断登录时，数据不存在，则注册插入数据，再重新登录

加入购物车

首先，点击后判断是否登录，登录才能加到当前用户的购物车
那么购物车也有一个单独的数据表
我们需要知道商品的id和买家信息

id	买家
12	12333
11	12333
22	24889

只要查询id&买家不匹配，就添加到数据库
当然买家卖家不能是同一个所以还要添加一个卖家信息，判断卖家买家不是同一个人再添加数据库，代码太长，就不贴了

其它

大家是否注意过点击跳转当前页面不同区域的功能

这个过程是通过#实现的

<a href="#top">跳转
<div id="top">跳转到这里

零碎的知识太多了暂时想到这些

更多文章请关注《万象专栏》

转载请注明出处：https://www.wanxiangsucai.com/read/cv14162

话题推荐： #首页# #跳转# #购物车# #卖家# #表单# #都是# #php#

打赏
6 赞
收藏
评论
举报

下一篇：PHP调用BAT文件的方法