第十期PHP仿蜂鸟网数据库数据渲染页面（2020-01-17） - PHP

Community Learn Tools Library Leisure

English

Home > List of blog posts > 第十期PHP仿蜂鸟网数据库数据渲染页面（2020-01-17）

Blogger Information

Blog 22

fans 1

comment 0

visits 17743

Special Recommendation

More>

Related recommendations

新建数据库，建数据表

新闻资讯

图片专区

二手交易

合作单位

公共部分

连接数据库

namespace pdo;
use PDO;
//1.连接数据库
//数据源
$dsb="mysql:host=localhost;dbname=phpedu;";
//用户名
$name="root";
//密码
$pwd="root";
//实例化pdo类
$pdo=new PDO($dsb,$name,$pwd);
//2.操作数据库
//准备sql语句
//3.关闭数据库

头部文件(路径：public/)

    //   载入连接数据库文件
<?php include "pdo.php" ?>
<nav class="public-header">
    <a href="">网站首页</a>
    <a href="">专题</a>
    <a href="">网站导航</a>
    <a href="">二手商品</a>
    <a href="">讨论区</a>
    <span>
        <a href=""><i class="iconfont icon-huiyuan2"></i>登陆</a>
        <a href="">免费注册</a>
    </span>
</nav>

底部文件

<footer class="public-footer">
    <div>
        <a href="">简介</a>
        <a href="">联系我们</a>
        <a href="">招聘信息</a>
        <a href="">友情链接</a>
        <a href="">用户服务协议</a>
        <a href="">隐私权声明</a>
        <a href="">法律投诉声明</a>
    </div>
    <div><span>LOGO</span></div>
    <div>
        <p>2019 fengniao.com. All rights reserved . 安徽闹着玩有限公司（无聊网）版权所有</p>
        <p>皖ICP证150110号 京ICP备14323013号-2 皖公网安备110108024357788号</p>
        <p>违法和不良信息举报电话: 0551-1234567 举报邮箱: admin@baidu.com</p>
    </div>
    <div>
        <p>关注公众号</p>
        <img src="static/images/erwei-code.png" alt="">
    </div>
</footer>

公共推荐图文列表

<div class="article-public-recommend">
    <h3>推荐阅读</h3>
    <div class="img-list">
        <?php
        $img="select * from `edu_img` limit 8";
        $stmt=$pdo->prepare($img);
        $stmt->execute();
        $dates=$stmt->fetchAll(PDO::FETCH_ASSOC);
        foreach ($dates as $date):?>
            <div>
                <a href="iview.php?id=<?php echo $date['id']?>"><img src="<?php echo $date['litpic']?>" alt=""></a>
                <a href="iview.php?id=<?php echo $date['id']?>"><?php echo $date['title']?></a>
            </div>
        <?php endforeach;?>
    </div>
</div>

网站首页

php代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--    当前文档要用到阿里字体图标-->
    <link rel="stylesheet" href="static/font/iconfont.css">
    <link rel="stylesheet" href="index.css">
    <title>全站首页</title>
</head>
<body>
<!--公共页眉-->
<?php include __DIR__ ."/public/head.php"?>
<!--主体全部放在main元素中-->
<main>
<!--    首页头部导航与轮播-->
    <div class="index-header">
        <div class="content">
            <!--logo与搜索框,快速入口-->
            <div class="log-search">
                <a href="" class="logo"><img src="static/images/logo.png" alt=""></a>
                <div class="search">
                    <input type="search" name="search" id="search">
                    <label for="search" class="iconfont icon-jinduchaxun"></label>
                </div>
                <div class="quick-entry">
                    <a href="" class="iconfont icon-huiyuan1"></a>
                    <a href="" class="iconfont icon-danmu1"></a>
                    <a href="" class="iconfont icon-fabu"></a>
                    <a href="" class="iconfont icon-fangda"></a>
                    <a href="" class="iconfont icon-huiyuan2"></a>
                    <a href="" class="iconfont icon-dianzan"></a>
                </div>
            </div>
            <!--主导航-->
            <div class="main-nav">
                <!--导航详情1-->
                <div class="nav-detail">
                    <!--左侧图标与描述-->
                    <div class="pic">
                        <span class="iconfont icon-gongdan"></span>
                        <div>
                            <span>资讯</span>
                            <span>学习</span>
                        </div>
                    </div>
                    <!--右侧导航链接-->
                    <div class="links">
                        <a href="">器材</a>
                        <a href="">大师</a>
                        <a href="">学院</a>
                        <a href="">实战</a>
                        <a href="">大赛</a>
                        <a href="">裤子</a>
                        <a href="">影视</a>
                        <a href="">其它</a>
                    </div>
                </div>
                <!--导航详情2-->
                <div class="nav-detail">
                    <!--左侧图标与描述-->
                    <div class="pic">
                        <span class="iconfont icon-renwujincheng"></span>
                        <div>
                            <span>爱好</span>
                            <span>姐妹</span>
                        </div>
                    </div>
                    <!--右侧导航链接-->
                    <div class="links">
                        <a href="">有品</a>
                        <a href="">图片</a>
                        <a href="">喝水</a>
                        <a href="">飞机</a>
                        <a href="">坦克</a>
                        <a href="">气球</a>
                        <a href="">毛线</a>
                        <a href="">其它</a>
                    </div>
                </div>
                <!--导航详情3-->
                <div class="nav-detail">
                    <!--左侧图标与描述-->
                    <div class="pic">
                        <span class="iconfont icon-gongdan"></span>
                        <div>
                            <span>软件</span>
                            <span>技能</span>
                        </div>
                    </div>
                    <!--右侧导航链接-->
                    <div class="links">
                        <a href="">学习</a>
                        <a href="">爱国</a>
                        <a href="">敬业</a>
                        <a href="">友善</a>
                        <a href="">富强</a>
                        <a href="">互助</a>
                        <a href="">仁义</a>
                        <a href="">其它</a>
                    </div>
                </div>
                <!--导航详情4-->
                <div class="nav-detail">
                    <!--左侧图标与描述-->
                    <div class="pic">
                        <span class="iconfont icon-DOC"></span>
                        <div>
                            <span>编程</span>
                            <span>美女</span>
                        </div>
                    </div>
                    <!--右侧导航链接-->
                    <div class="links">
                        <a href="">吃饭</a>
                        <a href="">周易</a>
                        <a href="">黄山</a>
                        <a href="">合肥</a>
                        <a href="">上海</a>
                        <a href="">杭州</a>
                        <a href="">北京</a>
                        <a href="">其它</a>
                    </div>
                </div>
            </div>
            <!--轮播图-->
            <div class="slider">
                <a href=""><img src="static/images/2.jpg" alt=""></a>
                <a href=""><img src="static/images/banner-right.jpg" alt=""></a>
            </div>
        </div>
    </div>
<!--    新闻资讯-->
    <!--引入大标题组件-->
    <div class="public-headline">
        <span>新闻资讯</span>
    </div>
    <div class="index-news">
        <!--    左侧图片列表-->
        <div class="imgs">
            <?php
            $img="select * from `edu_new` limit 1";
            $stmt=$pdo->prepare($img);
            $stmt->execute();
            $date=$stmt->fetch(PDO::FETCH_ASSOC);
            echo '<a href="view.php?id='.$date["id"].'"><img src="'.$date["litpic"].'" alt="" class="first-img"></a>'
            ?>
            <?php
            $img="select * from `edu_new` limit 1,2";
            $stmt=$pdo->prepare($img);
            $stmt->execute();
            $dates=$stmt->fetchAll(PDO::FETCH_ASSOC);
            foreach ($dates as $date):?>
                <div><a href="view.php?id=<?php echo $date['id']?>"><img src="<?php echo $date['litpic']?>" alt=""></a>
                <a href=""><?php echo $date['title']?></a>
                </div>
            <?php endforeach;?>
        </div>
        <!--    中间与右边信息列表共用样式-->
        <div class="list">
            <?php
            $img="select * from `edu_new` limit 1";
            $stmt=$pdo->prepare($img);
            $stmt->execute();
            $date=$stmt->fetch(PDO::FETCH_ASSOC);
            echo '<a href="view.php?id='.$date["id"].'">'.$date["title"].'</a>'
            ?>
            <ul>
                <?php
                $img="select * from `edu_new` limit 1,9";
                $stmt=$pdo->prepare($img);
                $stmt->execute();
                $dates=$stmt->fetchAll(PDO::FETCH_ASSOC);
                foreach ($dates as $date):?>
                    <li><span>[新闻]</span><a href="view.php?id=<?php echo $date['id']?>"><?php echo $date['title']?></a></li>
                <?php endforeach;?>
            </ul>
        </div>
        <div class="list">
            <?php
            $img="select * from `edu_new` limit 3,1";
            $stmt=$pdo->prepare($img);
            $stmt->execute();
            $date=$stmt->fetch(PDO::FETCH_ASSOC);
            echo '<a href="view.php?id='.$date["id"].'">'.$date["title"].'</a>'
            ?>
            <ul>
                <?php
                $img="select * from `edu_new` limit 3,9";
                $stmt=$pdo->prepare($img);
                $stmt->execute();
                $dates=$stmt->fetchAll(PDO::FETCH_ASSOC);
                foreach ($dates as $date):?>
                    <li><span>[促销]</span><a href="view.php?id=<?php echo $date['id']?>"><?php echo $date['title']?></a></li>
                <?php endforeach;?>
            </ul>
        </div>
    </div>
    <!--引入大标题组件-->
    <div class="public-headline">
        <span>图片专区</span>
    </div>
<!--    图文列表专区-->
    <div class="public-image-list">
        <?php
        $img="select * from ` edu_img_typeid`";
        $stmt=$pdo->prepare($img);
        $stmt->execute();
        $dates=$stmt->fetchAll(PDO::FETCH_ASSOC);
        $img1="select * from `edu_img`";
        $stmt1=$pdo->prepare($img1);
        $stmt1->execute();
        $dates1=$stmt1->fetchAll(PDO::FETCH_ASSOC);
        foreach ($dates as $date):?>
        <div class="list">
            <div class="title">
                <a href="<?php echo $date['url']?>"><?php echo $date['typename']?></a>
                <span>纵观摄影艺术</span>
            </div>
            <div class="img-list">
                <?foreach ($dates1 as $date1):?>
                <?php if($date['id']===$date1['typeid']):?>
                <div>
                    <a href="iview.php?id=<?php echo $date1['id']?>"><img src="<?php echo $date1['litpic']?>" alt=""></a>
                    <a href="iview.php?id=<?php echo $date1['id']?>"><?php echo $date1['title']?></a>
                </div>
               <?php endif;?>
                <?php endforeach;?>
                </div>
            </div>
        <?php endforeach;?>
    </div>
<!--    二手交易专区-->
    <!--引入大标题组件-->
    <div class="public-headline">
        <span>二手交易</span>
    </div>
    <!--二手交易专区-->
    <div class="public-second-hand">
        <!-- 标题1-->
        <div class="title1">
            <a href="">抢好货</a>
            <span>0低价, 便捷,安全,快速</span>
        </div>
        <!-- 标题2-->
        <div class="title2">
            <span>热门分类</span>
            <a href="">美女写真</a>
            <a href="">日本美女</a>
            <a href="">美国美女</a>
            <a href="">国内美女</a>
            <a href="">AV美女</a>
        </div>
        <!--商品展示区-->
        <div class="goods">
            <!--左侧商品列表-->
            <div class="goods-list">
                <!-- 商品简介-->
                <?php
                $img="select * from `edu_shop` limit 8";
                $stmt=$pdo->prepare($img);
                $stmt->execute();
                $dates=$stmt->fetchAll(PDO::FETCH_ASSOC);
                foreach ($dates as $date):?>
                    <div class="intro">
                        <a href="shop.php?id=<?php echo $date['id']?>"><img src="<?php echo $date['litpic']?>" alt="" width="176" height="120"></a>
                        <a href="shop.php?id=<?php echo $date['id']?>"><?php echo $date['title']?></a>
                        <div>
                            <span>¥ <?php echo $date['money']?></span>
                            <span><?php echo $date['tags']?></span>
                        </div>
                    </div>
                <?php endforeach;?>
            </div>
            <!--右侧功能快速入口-->
            <div class="quick-entry">
                <a href=""><img src="static/images/ad/1.png" alt="" ></a>
                <a href=""><img src="static/images/ad/2.png" alt=""></a>
                <a href=""><img src="static/images/ad/3.png" alt=""></a>
                <a href=""><img src="static/images/ad/4.png" alt=""></a>
                <div>
                    <a href=""><img src="static/images/ad/image.png" alt=""></a>
                    <a href=""><img src="static/images/ad/ad2.jpg" alt=""></a>
                </div>
            </div>
        </div>
    </div>
<!--    大标题-->
    <div class="public-headline">
        <span>合作单位</span>
    </div>
<!--    合作友情链接-->
    <div class="index-frend-links">
        <?php
        $img="select * from `edu_flink`";
        $stmt=$pdo->prepare($img);
        $stmt->execute();
        $dates=$stmt->fetchAll(PDO::FETCH_ASSOC);
        foreach ($dates as $date):?>
            <a href="<?php echo $date['url']?>"><?php echo $date['name']?></a>
        <?php endforeach;?>
    </div>
</main>
<!--公共页脚-->
<?php include __DIR__ ."/public/footer.php" ?>
</body>
</html>

运行结果

新闻列表页

php代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="article_list.css">
    <title>文章系统列表页</title>
</head>
<body>
<!--公共页眉-->
<?php include __DIR__ ."/public/head.php"?>
<!--文章系统公共头部-->
<div class="article-header">
    <div class="content">
        <img src="static/images/ar-logo.png" alt="">
        <a href="">财经</a>&gt;<span>正文</span>
        <div class="search">
            <input type="search" id="search" placeholder="搜索关键字">
            <label class="iconfont icon-sousuo2" for="search"></label>
        </div>
    </div>
</div>
<!--将列表与评论放在一个main元素中-->
<main>
    <!--公共评论列表1-->
    <div class="public-comment-list">
        <h3>最新评论</h3>
        <ul>
            <?php
            $sql="select * from `edu_new` order by `comment` desc limit 10;";
            $stmt=$pdo->prepare($sql);
            $stmt->execute();
            $dates=$stmt->fetchAll(PDO::FETCH_ASSOC);
            foreach ($dates as $date):?>
                <li> <a href="view.php?id=<?php echo $date['id']?>"><?php echo mb_substr($date['title'],0,20)?></a></li>
            <?php endforeach;?>
        </ul>
    </div>
    <!--公共评论列表2-->
    <div class="public-comment-list">
        <h3>最新评论</h3>
        <ul>
            <?php
            $sql="select * from `edu_new` order by `comment` desc limit 10;";
            $stmt=$pdo->prepare($sql);
            $stmt->execute();
            $dates=$stmt->fetchAll(PDO::FETCH_ASSOC);
            foreach ($dates as $date):?>
                <li> <a href="view.php?id=<?php echo $date['id']?>"><?php echo mb_substr($date['title'],0,20)?></a></li>
            <?php endforeach;?>
        </ul>
    </div>
    <!--文章系统图文列表-->
    <div class="article-list-content">
        <div class="top-nav">
            <a href="">头条</a>
            <a href="">热文</a>
            <a href="">直播</a>
            <a href="" id="active">新闻</a>
            <a href="">政策地图</a>
            <a href="">相对论</a>
            <a href="">人物</a>
            <a href="">行情</a>
            <a href="">投研</a>
            <a href="">技术</a>
            <a href="">百科</a>
        </div>
        <?php
        $img="select * from `edu_new` limit 5";
        $stmt=$pdo->prepare($img);
        $stmt->execute();
        $dates=$stmt->fetchAll(PDO::FETCH_ASSOC);
        foreach ($dates as $date):?>
            <div class="img-list">
                <a href="view.php?id=<?php echo $date['id']?>"><img src="<?php echo $date['litpic']?>" alt="" width="272"></a>
                <div class="intro">
                    <div class="title">
                        <a href="view.php?id=<?php echo $date['id']?>"><?php echo $date['title']?></a>
                        <span><?php echo $date['description']?></span>
                    </div>
                    <div class="time">
                        <a href="view.php?id=<?php echo $date['id']?>"><?php echo $date['source']?> · 46 分钟前</a>
                        <span><i class="iconfont icon-icon_yulan"></i>2233</span>
                    </div>
                </div>
            </div>
        <?php endforeach;?>
    </div>
    <!--文章系统公共推荐图文列表-->
    <?php include __DIR__ ."/public/img_com.php"?>
    <!--    分页条-->
    <div class="public-paginate">
        <a href="">&lt;</a>
        <a href="">1</a>
        <a href="">2</a>
        <a href="">3</a>
        <a href="">4</a>
        <a href="">5</a>
        <a href="">6</a>
        <a href="">7</a>
        <a href="">8</a>
        <a href="">&gt;</a>
    </div>
</main>
<!--公共页脚-->
<?php include __DIR__ ."/public/footer.php"?>
</body>
</html>

运行结果

新闻详情页

php代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--    当前文档要用到阿里字体图标-->
    <link rel="stylesheet" href="static/font/iconfont.css">
    <link rel="stylesheet" href="article_detail.css">
    <title>文章系统详情页</title>
</head>
<body>
<!--公共页眉-->
<?php include __DIR__ ."/public/head.php"?>
<?php
$aid=$_GET['id'];
$img = "select * from `edu_new` where id=:id";
$stmt = $pdo->prepare($img);
$stmt->execute(['id'=>$aid]);
$date = $stmt->fetch(PDO::FETCH_ASSOC);
?>
<!--文章系统公共头部-->
<div class="article-header">
    <div class="content">
        <img src="static/images/ar-logo.png" alt="">
        <a href="">财经</a>&gt;<span>正文</span>
        <div class="search">
            <input type="search" id="search" placeholder="搜索关键字">
            <label class="iconfont icon-sousuo2" for="search"></label>
        </div>
    </div>
</div>
<!--将列表与评论放在一个main元素中-->
<main>
    <!--公共评论列表-->
    <div class="public-comment-list">
        <h3>最新评论</h3>
        <ul>
            <?php
            $sql="select * from `edu_new` order by `comment` desc limit 10;";
            $stmt=$pdo->prepare($sql);
            $stmt->execute();
            $dates=$stmt->fetchAll(PDO::FETCH_ASSOC);
            foreach ($dates as $date):?>
                <li> <a href="view.php?id=<?php echo $date['id']?>"><?php echo mb_substr($date['title'],0,20)?></a></li>
            <?php endforeach;?>
        </ul>
    </div>
    <?php
    $aid=$_GET['id'];
    $img = "select * from `edu_new` where id=:id";
    $stmt = $pdo->prepare($img);
    $stmt->execute(['id'=>$aid]);
    $date = $stmt->fetch(PDO::FETCH_ASSOC);
    ?>
    <!--文章系统内容详情-->
    <div class="article_detail">
        <h1><?php echo $date['title'] ?></h1>
        <div>
            <span>发布时间：<?php echo date('Y年m月d日',$date['pubdate'])?></span>
            <span>来源: <?php echo $date['source']?></span>
            <span>阅读量:12545</span>
            <span>评论数:145</span>
        </div>
        <div>
            <?php echo $date['body'] ?>
        </div>
    </div>
    <!--点赞-->
    <div class="article-detail-like">
        <span>赞</span>
        <span>踩</span>
    </div>
    <!--公共评论与回复-->
    <div class="public-comment-reply">
        <!--    评论区-->
        <div class="comment">
            <h3>我要评论</h3>
            <div>
                <label for="comment"><img src="static/images/user.png" alt=""></label>
                <textarea name="" id="comment"></textarea>
            </div>
            <button>发表评论</button>
        </div>
        <!--    回复区-->
        <div class="reply">
            <h3>最新回复</h3>
            <div>
                <img src="static/images/user.png" alt="">
                <div class="detail">
                    <span>用户昵称</span>
                    <span>留言内容: php中文网,是一个有温度,有思想的学习平台</span>
                    <div>
                        <span>2019-12-12 15:34:23发表</span>
                        <span><i class="iconfont icon-dianzan"></i>回复</span>
                    </div>
                </div>
            </div>
            <div>
                <img src="static/images/user.png" alt="">
                <div class="detail">
                    <span>用户昵称</span>
                    <span>留言内容: php中文网,是一个有温度,有思想的学习平台</span>
                    <div>
                        <span>2019-12-12 15:34:23发表</span>
                        <span><i class="iconfont icon-dianzan"></i>回复</span>
                    </div>
                </div>
            </div>
            <div>
                <img src="static/images/user.png" alt="">
                <div class="detail">
                    <span>用户昵称</span>
                    <span>留言内容: php中文网,是一个有温度,有思想的学习平台</span>
                    <div>
                        <span>2019-12-12 15:34:23发表</span>
                        <span><i class="iconfont icon-dianzan"></i>回复</span>
                    </div>
                </div>
            </div>
            <div>
                <img src="static/images/user.png" alt="">
                <div class="detail">
                    <span>用户昵称</span>
                    <span>留言内容: php中文网,是一个有温度,有思想的学习平台</span>
                    <div>
                        <span>2019-12-12 15:34:23发表</span>
                        <span><i class="iconfont icon-dianzan"></i>回复</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--文章系统公共推荐图文列表-->
    <?php include __DIR__ ."/public/img_com.php"?>
</main>
<!--公共页脚-->
<?php include __DIR__ ."/public/footer.php"?>
</body>
</html>

运行结果

案例总结

1.数据库表的结构分析至关重要，可以防止反复增加字段，加长项目时间。做这个案例的过程中，体会非常深刻。表之间的关联性差，自认为是创建表结构中最大的问题。

2.`foreash`循环二维数组，高效有方便。

3.页面中，可能php代码冗余，却也只能用最笨的方法来实现。猜想或许可以通过一个方法，载入不同的sql语句，能够实现查询相应条件数据。

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：刚开始写项目, 代码冗余很正常, 有时还故意写得非常啰嗦, 就是为了代码可读性, 否则过了一个月, 你自己都看不懂了

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

第十期HTML前端知识总结（2019-12-19）

2019-12-21 14:17:05

新建数据库，建数据表

新闻资讯

图片专区

二手交易

合作单位

公共部分

连接数据库

头部文件(路径：public/)

底部文件

公共推荐图文列表

网站首页

php代码

运行结果

新闻列表页

php代码

运行结果

新闻详情页

php代码

运行结果

案例总结

1.数据库表的结构分析至关重要，可以防止反复增加字段，加长项目时间。做这个案例的过程中，体会非常深刻。表之间的关联性差，自认为是创建表结构中最大的问题。

2.foreash循环二维数组，高效有方便。

3.页面中，可能php代码冗余，却也只能用最笨的方法来实现。猜想或许可以通过一个方法，载入不同的sql语句，能够实现查询相应条件数据。

2.`foreash`循环二维数组，高效有方便。