Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1月10日 学号：478291 PHP使用数组实现动态网页
Blogger Information
Blog 24
fans 4
comment 0
visits 20137
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
1月10日 学号：478291 PHP使用数组实现动态网页
Lin__
Original
1292 people have browsed it

静态页面的内容都是固定写死的，响应速度快，但可维护性和交互性差，一旦数据有所变动，需要对文件进行修改；动态网页在静态网页的基础上，将事先保存好的数据通过调用显示在页面上，当数据有变动时无需修改页面，只需要在保存数据的地方进行数据的修改即可，提高了可维护性和交互性，但响应速度会相对慢一些。如果网页内容相对的简单，不需要频繁的进行改动，或者只是为了展示信息等，就用静态网页，简单易操作，不需要管理数据库等；如果网页内容相对复杂，功能多，改动频繁，实时性的内容多，就用动态网页

使用数组实现简单的动态网页

  • 定义保存页面数据
  1. <?php
  2. //导航条数据
  3. $nav=[
  4.     ['id'=>1,'name'=>'首页','url'=>'index.php'],
  5.     ['id'=>2,'name'=>'最新课程','url'=>'list.php?cid=0'],
  6.     ['id'=>3,'name'=>'JAVA','url'=>'list.php?cid=1'],
  7.     ['id'=>4,'name'=>'PHP','url'=>'list.php?cid=2'],
  8. ];
  10. //课程分类
  11. $classify=[
  12.     ['id'=>0,'name'=>'最新课程'],
  13.     ['id'=>1,'name'=>'JAVA'],
  14.     ['id'=>2,'name'=>'PHP'],
  15. ];
  17. //具体课程
  18. $curriculums=[
  19.     ['id'=>1,'name'=>'Java构架师课程','detail'=>'千万级电商项目从0到1到100全过程，涵盖Java程序员不同成长阶段的问题及优选解决方案','image'=>'image/1.png','cid'=>1],
  20.     ['id'=>2,'name'=>'Java项目面试实操','detail'=>'基础笔面试靠刷题，项目面试靠经验和交流','image'=>'image/2.png','cid'=>1],
  21.     ['id'=>3,'name'=>'Spark + ElasticSearch','detail'=>'构建电商用户标签系统实现精准营销','image'=>'image/3.png','cid'=>1],
  22.     ['id'=>4,'name'=>'玩转Java并发工具','detail'=>'线程池+各种锁+并发综合实战项目','image'=>'image/4.jpg','cid'=>1],
  23.     ['id'=>5,'name'=>'SpringBoot源码课','detail'=>'Java开发必会、行业风向标级框架，BAT架构师带你一课攻克SpringBoot源码','image'=>'image/5.jpg','cid'=>1],
  24.     ['id'=>6,'name'=>'新版Kotlin从入门到精通','detail'=>'紧跟一线企业标准 抓住Kotlin语言上升期的发展红利','image'=>'image/6.png','cid'=>1],
  25.     ['id'=>7,'name'=>'实战支付+电商双系统','detail'=>'玩“赚” Java技术栈','image'=>'image/7.jpg','cid'=>1],
  26.     ['id'=>8,'name'=>'深度解锁SpringCloud主流组件','detail'=>'“超硬核” SpringCloud主流组件技术点解剖，“超智囊”微服务开发难题化解','image'=>'image/8.jpg','cid'=>1],
  27.     ['id'=>9,'name'=>'TP6.0从0到1完整构建高并发电商服务系统','detail'=>'从基础到高并发到分布式讲解TP6.0，一战攻克电商开发初中高级技术点，学以致用','image'=>'image/9.jpg','cid'=>2],
  28.     ['id'=>10,'name'=>'Tp5&Tp6底层源码','detail'=>'掌握Tp5+Tp6双版本内容 解析框架底层机制 提升核心竞争力','image'=>'image/10.jpg','cid'=>2],
  29.     ['id'=>11,'name'=>'全方位深度剖析PHP7底层源码','detail'=>'由浅入深 让你彻底掌握PHP7源码设计','image'=>'image/11.jpg','cid'=>2],
  30.     ['id'=>12,'name'=>'Swoole入门到实战','detail'=>'异步场景全面剖析 / 网络通讯引擎系统精讲 / 感受并发编程之美','image'=>'image/12.jpg','cid'=>2],
  31.     ['id'=>13,'name'=>'PHP秒杀系统','detail'=>'从万次到亿万次的性能优化，从单机到分布式的架构升级','image'=>'image/13.jpg','cid'=>2],
  32.     ['id'=>14,'name'=>'PHP开发高可用高安全App后端','detail'=>'让你拥有一套完美对接多终端客户端的App后端系统','image'=>'image/14.jpg','cid'=>2],
  33.     ['id'=>15,'name'=>'360大牛：全面解读PHP面试','detail'=>'有了这样全面的PHP面试课程，谁还敢说PHP不好找工作！','image'=>'image/15.jpg','cid'=>2],
  34.     ['id'=>16,'name'=>'微信服务号+Yii2.0构建商城系统全栈应用 ','detail'=>'微信服务号高级权限/一线互联网架构思想/完善电商支付系统','image'=>'image/16.jpg','cid'=>2],
  35. ];
  • 公共函数
  1. <?php
  2. //获取课程列表
  3. function get_curriculums_list($cid=0,$curriculums){
  4.     $curriculums_list=[];
  5.     if(!$cid){
  6.         //最新课程随机获取8门课程数据
  7.         $id_list=array_rand($curriculums,8);
  8.         foreach($id_list as $item){
  9.             $curriculums_list[]=$curriculums[$item];
  10.         }
  11.     }else{
  12.         foreach ($curriculums as $item){
  13.             if($item['cid']===$cid){
  14.                 $curriculums_list[]=$item;
  15.             }
  16.         }
  17.     }
  18.     return $curriculums_list;
  19. }
  21. //生成课程价格
  22. function get_price(){
  23.     $price=number_format(rand(1,1000),2,'.',',');
  24.     return $price;
  25. }
  27. //生成浏览人数
  28. function get_people_num(){
  29.     $people_num=rand(1,1000);
  30.     return $people_num;
  31. }
  • 首页
  1. <?php include 'public_function.php'; ?>
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>首页</title>
  7.     <link rel="stylesheet" href="css/index.css">
  8. </head>
  9. <body>
  10. <?php include 'public_header.php'; ?>
  11. <div class="main">
  12.     <!-- 轮播图 -->
  13.     <div class="banner">
  14.         <img src="image/index_banner7.jpg" alt="这是轮播图">
  15.     </div>
  16.     <!-- 轮播图 end -->
  17.     <!-- 课程列表 -->
  18.     <?php foreach($classify as $item):?>
  19.     <?php if($item['id'] % 2 == 0): ?>
  20.     <div class="white">
  21.     <?php else: ?>
  22.     <div>
  23.     <?php endif; ?>
  24.         <div class="curriculums-list ">
  25.             <!-- 课程分类标题 -->
  26.             <div class="title"><?php echo $item['name'] ?></div>
  27.             <!-- 课程分类列表 -->
  28.             <div>
  29.             <?php foreach (get_curriculums_list($item['id'],$curriculums) as $value): ?>
  30.             <a class="item" href="detail.php?id=<?php echo $value['id'] ?>">
  31.                 <!-- 课程图片 -->
  32.                 <img src="<?php echo $value['image'] ?>" alt="">
  33.                 <!-- 课程名称 -->
  34.                 <span class="name"><?php echo $value['name'] ?></span>
  35.                 <!-- 课程价格、浏览人数 -->
  36.                 <div>
  37.                     <span><i class="iconfont icon-huiyuan2"></i><?php echo get_people_num(); ?></span>
  38.                     <span>￥<?php echo get_price(); ?></span>
  39.                 </div>
  40.                 <!-- 课程简介 -->
  41.                 <span class="detail"><?php echo $value['detail'] ?></span>
  42.             </a>
  43.             <?php endforeach; ?>
  44.             </div>
  45.             <!-- 课程分类列表 end -->
  46.         </div>
  47.     </div>
  48.     <?php endforeach; ?>
  49.     <!-- 课程列表 end -->
  50. </div>
  51. <?php include 'public_footer.php'; ?>
  52. </body>
  53. </html>
  1. /*轮播图*/
  2. .banner{
  3.     width: 1200px;
  4.     border-radius: 10px;
  5.     box-shadow: 0 12px 24px 0 rgba(7,17,2);
  6.     margin: 20px auto;
  7. }
  8. .banner > img{
  9.     width: 1200px;
  10.     border-radius: 10px;
  11. }
  12. /*轮播图 end*/
  13. /*课程列表*/
  14. /*白色背景*/
  15. .white{
  16.     background-color: #fff;
  17. }
  18. .main > div > .curriculums-list{
  19.     width:1200px;
  20.     display: flex;
  21.     flex-flow: column wrap;
  22.     margin: auto;
  23. }
  24. /*课程分类标题*/
  25. .main > div > .curriculums-list > .title{
  26.     font-size: 24px;
  27.     color: #1C1F21;
  28.     letter-spacing: 0px;
  29.     line-height: 32px;
  30.     margin: 10px 0;
  31. }
  32. .main > div > .curriculums-list > div:last-child{
  33.     display: grid;
  34.     grid-template-columns: 24% 24% 24% 24%;
  35.     grid-column-gap: 10px;
  36.     grid-row-gap: 10px;
  37.     overflow: hidden;
  38.     padding-bottom: 10px;
  39. }
  40. .main > div > .curriculums-list > div:last-child > .item{
  41.     border-radius: 10px;
  42.     padding: 10px;
  43.         box-sizing: border-box;
  44. }
  45. .main > div > .curriculums-list > div:last-child > .item:hover{
  46.     box-shadow: 0 10px 10px 0 #ccc;
  47. }
  48. /*课程图片*/
  49. .main > div > .curriculums-list > div:last-child > .item > img{
  50.     width:100%;
  51.     border-radius: 10px;
  52. }
  53. /*课程名称*/
  54. .main > div > .curriculums-list > div:last-child > .item > .name{
  55.     font-size: 16px;
  56.     color: #07111b;
  57.     line-height: 24px;
  58.     word-wrap: break-word;
  59.     overflow: hidden;
  60.     text-overflow: ellipsis;
  61.     display: -webkit-box;
  62.     transition: all .3s;
  63.     font-weight: 700;
  64.     height: 46px;
  65. }
  66. /*课程价格、浏览人数*/
  67. .main > div > .curriculums-list > div:last-child > .item > div{
  68.     display: flex;
  69.     justify-content: space-between;
  70. }
  71. .main > div > .curriculums-list > div:last-child > .item > div >span{
  72.     font-size: 12px;
  73.     color: #93999f;
  74.     line-height: 24px;
  75.     margin-top: 8px;
  76.     font-weight: 400;
  77. }
  78. .main > div > .curriculums-list > div:last-child > .item > div >span > i{
  79.     font-size: 12px;
  80.     color: #93999f;
  81.     line-height: 24px;
  82.     margin-top: 8px;
  83.     font-weight: 400;
  84. }
  85. /*课程简介*/
  86. .main > div > .curriculums-list > div:last-child > .item > .detail{
  87.     font-size: 12px;
  88.     font-weight: 300;
  89.     color: #9199a1;
  90.     line-height: 18px;
  91.     margin-top: 4px;
  92.     margin-bottom: 4px;
  93.     overflow: hidden;
  94.     text-overflow: ellipsis;
  95.     display: -webkit-box;
  96.     -webkit-line-clamp: 2;
  97.     -webkit-box-orient: vertical;
  98.     height: 36px;
  99. }
  100. /*课程列表 end*/

  • 列表页
  1. <?php include 'public_function.php'; ?>
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>课程列表</title>
  7.     <link rel="stylesheet" href="css/index.css">
  8. </head>
  9. <body>
  10. <?php include 'public_header.php'; ?>
  11. <?php
  12. $cid = $_GET['cid'];
  13. foreach($classify as $value){
  14.     if($value['id']==$cid){
  15.         $item=$value;
  16.         break;
  17.     }
  18. }
  19. ?>
  20. <div class="main">
  21.     <!-- 课程列表 -->
  22.     <div>
  23.         <div class="curriculums-list ">
  24.             <!-- 课程分类标题 -->
  25.             <div class="title"><?php echo $item['name'] ?></div>
  26.             <!-- 课程分类列表 -->
  27.             <div>
  28.             <?php foreach (get_curriculums_list($item['id'],$curriculums) as $value): ?>
  29.             <a class="item" href="detail.php?id=<?php echo $value['id'] ?>">
  30.                 <!-- 课程图片 -->
  31.                 <img src="<?php echo $value['image'] ?>" alt="">
  32.                 <!-- 课程名称 -->
  33.                 <span class="name"><?php echo $value['name'] ?></span>
  34.                 <!-- 课程价格、浏览人数 -->
  35.                 <div>
  36.                     <span><i class="iconfont icon-huiyuan2"></i><?php echo get_people_num(); ?></span>
  37.                     <span>￥<?php echo get_price(); ?></span>
  38.                 </div>
  39.                 <!-- 课程简介 -->
  40.                 <span class="detail"><?php echo $value['detail'] ?></span>
  41.             </a>
  42.             <?php endforeach; ?>
  43.             </div>
  44.             <!-- 课程分类列表 end -->
  45.         </div>
  46.     </div>
  47.     <!-- 课程列表 end -->
  48. </div>
  49. <?php include 'public_footer.php'; ?>
  50. </body>
  51. </html>

  • 详细信息页
  1. <?php include 'public_function.php'; ?>
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>课程列表</title>
  7.     <link rel="stylesheet" href="css/detail.css">
  8. </head>
  9. <body>
  10. <?php include 'public_header.php'; ?>
  11. <?php
  12. $id = $_GET['id'];
  13. $info = [];
  14. foreach($curriculums as $item){
  15.     if($item['id']==$id){
  16.         $info=$item;
  17.     }
  18. }
  19. ?>
  20. <div class="main">
  21.     <div class="left">
  22.         <img src="<?php echo $info['image']; ?>" alt="">
  23.     </div>
  24.     <div class="right">
  25.         <h1><?php echo $info['name']; ?></h1>
  26.         <span><?php echo $info['detail']; ?></span>
  27.         <div>
  28.             <span><i class="iconfont icon-huiyuan2"></i><?php echo get_people_num(); ?>播放 | </span>
  29.             <span>￥<?php echo get_price(); ?></span>
  30.         </div>
  31.         <div>
  32.             <button>开始学习</button>
  33.         </div>
  34.     </div>
  35. </div>
  36. <?php include 'public_footer.php'; ?>
  37. </body>
  38. </html>
  1. .main{
  2.     width:1200px;
  3.     background-color: #fff;
  4.     border-radius: 10px;
  5.     padding: 10px;
  6.     margin: 20px auto;
  7.     display: grid;
  8.     grid-template-columns: 30% 1fr;
  9. }
  10. .main > .right{
  11.     display: flex;
  12.     flex-flow: column wrap;
  13.     padding: 10px 20px;
  14. }
  15. .main > .right > h1{
  16.     font-weight: normal;
  17. }
  18. .main > .right > span{
  19.     color: #6f6f6f;
  20.     letter-spacing: 1px;
  21.     height: 75px;
  22.     overflow: hidden;
  23. }
  24. .main > .right > div > span{
  25.     font-size: 12px;
  26.     color: #93999f;
  27.     line-height: 24px;
  28.     margin-top: 8px;
  29.     font-weight: 400;
  30. }
  31. .main > .right > div:first-child > span > i{
  32.     font-size: 12px;
  33.     color: #93999f;
  34.     line-height: 24px;
  35.     margin-top: 8px;
  36.     font-weight: 400;
  37.     margin-right: 5px;
  38. }
  39. .main > .right > div:last-child >button:first-child{
  40.     width:140px;
  41.     height:30px;
  42.     background-color: #ff5500;
  43.     color: #fff;
  44.     border: none;
  45.     margin: 10px 0;
  46. }

所用知识点

  • 流程控制替代语法

    （1）if单分支替代语法：

    1. <?php if(表达式):?>
    2.     HTML代码
    3. <?php endif;>

    （2）if双分支替代语法：

    1. <?php if(表达式):?>
    2.     HTML代码
    3. <?php else: ?>
    4.     HTML代码 
    5. <?php endif;>

    （3）if多分支替代语法：

    1. <?php if(表达式):?>
    2.     HTML代码
    3. <?php elseif(表达式):?>
    4.     HTML代码
    5. <?php else: ?>
    6.     HTML代码 
    7. <?php endif;>

    （4）for替代语法：

    1. <?php for(初始化循环计数器;循环判断条件;更新循环计数器):?>
    2.     HTML代码 
    3. <?php endfor;>

    （5）foreach替代语法：

    1. <?php foreach(数组 as 变量):?>
    2.     HTML代码 
    3. <?php endforeach;>

    （6）while替代语法：

    1. <?php while(表达式):?>
    2.     HTML代码 
    3. <?php endwhile;>

    （7）switch替代语法：

    1. <?php switch(变量): case 值1:?>
    2.     HTML代码 
    3. <?php break; ?>
    4. <?php case 值2:?>
    5.     HTML代码 
    6. <?php break; ?>
    7. <?php endswitch;>

  • 包含文件

    （1）include | include_once：包含一个外部文件到页面，失败时不会终止程序，加上once仅能包含一次，防止重复加载包含

    （2）require |require_once：包含一个外部文件到页面，失败时会终止程序，加上once仅能包含一次，防止重复加载包含

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：使用模板语法, 可以将一个纯静态的页面, 进行动态处理, 这是一个php程序员的基本功
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