PHP開発記事公開システムの効果表示
プロジェクトの目標
このプロジェクトは主に、簡単な記事公開システムを開発することです
1. バックグラウンドで記事を追加、削除、変更、確認する
2.フロントエンドの詳細
プロジェクトによって達成された効果
バックエンド記事管理ページ:
<html><head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>文章管理</title>
<meta charset="utf-8">
<style>
.box{
background-color:#f0f0f0;
}
.title{
margin:0 auto;
border:1px solid black;
width:400px;
}
.middle{
margin:0 auto;
border:1px solid black;
width:400px;
}
.menu{
margin:-50px 0px 1px 319px;
width:80px;
}
.content{
clear:both;
}
.art{
text-align:center;
}
.num{
float:left;
border:1px solid black;
width:50px;
font-size: 13px;
}
.tit{
float:left;
border:1px solid black;
width:274px;
font-size: 13px;
}
.act{
float:left;
border:1px solid black;
width:70px;
font-size: 13px;
}
.bottom{
width:400px;
margin:0 auto;
border:1px solid black;
clear:both;
}
</style>
</head>
<body>
<div class="box">
<div class="title"><h1>后台管理系统</h1>
<div class="menu">
<a href="admin_add.php">发布文章</a><br>
<a href="admin_manage.php">管理文章</a>
</div>
</div>
<div class="middle">
<div class="art">文章管理列表</div>
<div class="num">编号</div>
<div class="tit">标题</div>
<div class="act">操作</div>
<div class="content">
<div class="num">28</div>
<div class="tit">Facebook 将 PHP 编译成 JVM 字节码？</div>
<div class="act">
<a href="admin_modify.php?id=28">修改</a>
<a href="admin_del_handle.php?id=28">删除</a>
</div>
<div class="num">27</div>
<div class="tit">PHP 5.5 或将引入 Generators</div>
<div class="act">
<a href="admin_modify.php?id=27">修改</a>
<a href="admin_del_handle.php?id=27">删除</a>
</div>
<div class="num">26</div>
<div class="tit">国外十大最流行PHP框架排名</div>
<div class="act">
<a href="admin_modify.php?id=26">修改</a>
<a href="admin_del_handle.php?id=26">删除</a>
</div>
<div class="num">25</div>
<div class="tit">php接收标准输入解决分布式处理实现方法</div>
<div class="act">
<a href="admin_modify.php?id=25">修改</a>
<a href="admin_del_handle.php?id=25">删除</a>
</div>
<div class="num">24</div>
<div class="tit">PhpStorm 6 发布，PHP 集成开发环境</div>
<div class="act">
<a href="admin_modify.php?id=24">修改</a>
<a href="admin_del_handle.php?id=24">删除</a>
</div>
<div class="num">23</div>
<div class="tit">PHP闭包（Closure）初探</div>
<div class="act">
<a href="admin_modify.php?id=23">修改</a>
<a href="admin_del_handle.php?id=23">删除</a>
</div>
<div class="num">22</div>
<div class="tit">为什么 PHP 应该使用 PDO 方式访问数据库</div>
<div class="act">
<a href="admin_modify.php?id=22">修改</a>
<a href="admin_del_handle.php?id=22">删除</a>
</div>
<div class="num">21</div>
<div class="tit">PHP5.5 + Apache2.4.4 初体验（64位）</div>
<div class="act">
<a href="admin_modify.php?id=21">修改</a>
<a href="admin_del_handle.php?id=21">删除</a>
</div>
<div class="num">20</div>
<div class="tit">Nginx 上的 php-fpm 资源侵占问题</div>
<div class="act">
<a href="admin_modify.php?id=20">修改</a>
<a href="admin_del_handle.php?id=20">删除</a>
</div>
<div class="num">19</div>
<div class="tit">PHP开发：从程序化到面向对象编程</div>
<div class="act">
<a href="admin_modify.php?id=19">修改</a>
<a href="admin_del_handle.php?id=19">删除</a>
</div>
<div class="num">18</div>
<div class="tit">动态网页制作PHP常用的正则表达式</div>
<div class="act">
<a href="admin_modify.php?id=18">修改</a>
<a href="admin_del_handle.php?id=18">删除</a>
</div>
<div class="num">15</div>
<div class="tit">动态语言正成为开发者的重要工具</div>
<div class="act">
<a href="admin_modify.php?id=15">修改</a>
<a href="admin_del_handle.php?id=15">删除</a>
</div>
<div class="num">13</div>
<div class="tit">用PHP编程语言开发动态WAP页面</div>
<div class="act">
<a href="admin_modify.php?id=13">修改</a>
<a href="admin_del_handle.php?id=13">删除</a>
</div>
</div>
</div>
<div class="bottom">
欢迎联系我们<a href="http://www.php.cn">php中文网</a><br>
前台展示页面<a href="../home/home_list.php">php咨询站</a>
</div>
</div>
</body></html>バックエンド記事公開ページ:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no" />
<title>发布文章</title>
<meta charset="utf-8" />
<style>
.box{
background-color:#f0f0f0;
}
.title{
background-color:#f0f0f0;
width:400px;
height:100px;
border-bottom:1px solid black;
}
.menu{
margin:-25px 0px 1px 319px;
width:80px;
}
.middle{
border-bottom:1px solid black;
}
.bottom{
}
</style>
</head>
<body>
<div class="box">
<div class="title">
<h1>后台管理系统</h1>
<div class="menu">
<a href="admin_add.php">发布文章</a><br/>
<a href="admin_manage.php">管理文章</a>
</div>
</div>
<div class="middle">
<form method="post" action="admin_add_handle.php">
<div><h2>发布文章</h2></div>
<div>标题:<input type="text" name="title" /></div><br/>
<div>作者:<input type="text" name="author" /></div><br/>
<div>简介:<br/><textarea name="description" cols="50" rows="4"></textarea></div><br/>
<div>内容:<br/><textarea name="content" cols="50" rows="9" ></textarea></div><br/>
<div><input type="submit" name="button" value="提交" /></div><br/>
</form>
</div>
<br/><div class="bottom">欢迎联系我们<a href="http://www.php.cn">php中文网</a></div>
</div>
</body>
</html>バックエンド変更記事ページ:
<?php
require_once("../connect.php");
$id=$_GET['id'];
$sql="select * from article where id=$id";
$query = mysqli_query($conn,$sql);
$data = mysqli_fetch_assoc($query);
?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no" />
<title>发布文章</title>
<meta charset="utf-8" />
<style>
.box{
background-color:#f0f0f0;
}
.title{
background-color:#f0f0f0;
width:400px;
height:100px;
border-bottom:1px solid black;
}
.menu{
margin:-25px 0px 1px 319px;
width:80px;
}
.middle{
border-bottom:1px solid black;
}
</style>
</head>
<body>
<div class="box">
<div class="title">
<h1>后台管理系统</h1>
<div class="menu">
<a href="admin_add.php">发布文章</a><br/>
<a href="admin_manage.php">管理文章</a>
</div>
</div>
<div class="middle">
<form method="post" action="admin_modify_handle.php">
<input type="hidden" name="id" value="<?php echo $data['id']?>" />
<div><h2>修改文章</h2></div>
<div>标题:<input type="text" name="title" value="<?php echo $data['title']; ?>"/></div><br/>
<div>作者:<input type="text" name="author" value="<?php echo $data['author']; ?>"/></div><br/>
<div>简介:<br/><textarea name="description" cols="50" rows="4"><?php echo $data['description']; ?></textarea></div><br/>
<div>内容:<br/><textarea name="content" cols="50" rows="9" ><?php echo $data['content']; ?></textarea></div><br/>
<div><input type="submit" name="button" value="提交" /></div><br/>
</form>
</div>
<br/><div class="bottom">欢迎联系我们<a href="http://www.php.cn">php中文网</a></div>
</div>
</body>
</html>フロント記事一覧ページ:
<html><head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>文章列表</title>
<meta charset="utf-8">
<style>
*{
box-sizing:border-box;
}
.box{
font-family: 宋体;
margin:0px auto;
width:400px;
}
.box a:link,.box a:visited,.box a:hover{color:#000000;text-decoration:underline; }
.head{
background-color:#0f8ff2;
height:80px;
}
.tit{
padding: 20px 20px;
font-size:25px;
}
.content{
width:400px;
min-height:100px;
border:1px solid red;
}
.top_con{
width:400px;
padding:10px;
}
.bottom_con{
margin-left:20px;
width:400px;
}
.con_tit{
font-size:18px;
margin:10px 0px 10px 10px;
font-weight:bold;
}
.con_des{
text-indent:2em;
font-size:18px;
}
.con_det{
padding: 0px 0px 0px 300px;
}
ul{
list-style:none;
margin-left:-40px;
}
li{
margin:15px 0px 0px 0px;
}
.index{
margin:-5px 0px 0px 0px ;
}
.bg{
position:relative;
top: -6px;
background-color:#fff;
margin-left:335px;
}
</style>
</head>
<body>
<div class="box">
<div class="head"><div class="tit">php资讯站</div><span class="bg"><a href="../admin/admin_manage.php">后台入口</a></span></div>
<div class="content">
<div class="top_con">
<div class="con_tit">用PHP编程语言开发动态WAP页面</div>
<div class="con_des">WAP(无线通讯协议)是在数字移动电话、个人手持设备(PDA等)及计算机之间进行通讯的开放性全球标准协议。随着无线通讯的不断发展，静态的WAP页面在很多方面已经不能满足用户个性化的要求，因此开发者可以在WAP服务 </div>
<div class="con_det"><a href="home_show.php?id=13">查看详细</a></div>
<div class="con_tit">动态语言正成为开发者的重要工具</div>
<div class="con_des">曾经程序语言世界里的二等公民，脚本语言（也叫动态语言）正成为开发者的重要工具。</div>
<div class="con_det"><a href="home_show.php?id=15">查看详细</a></div>
<div class="con_tit">动态网页制作PHP常用的正则表达式</div>
<div class="con_des">正则表达式用于字符串处理、表单验证等场合，实用高效</div>
<div class="con_det"><a href="home_show.php?id=18">查看详细</a></div>
<div class="index">
<a href="home_list.php?page=1">首页</a>
<a href="home_list.php?page=0">上一页</a>
<a href="home_list.php?page=2">下一页</a>
<a href="home_list.php?page=5">末页</a>
</div>
</div>
<div class="bottom_con">
<div style="margin-left:10px;margin-top:20px,font-size:20px;">最新资讯</div>
<ul>
<li><a href="home_show.php?id=28">Facebook 将 PHP 编译成 JVM 字节码？</a></li>
<li><a href="home_show.php?id=27">PHP 5.5 或将引入 Generators</a></li>
<li><a href="home_show.php?id=26">国外十大最流行PHP框架排名</a></li>
<li><a href="home_show.php?id=25">php接收标准输入解决分布式处理实现方法</a></li>
<li><a href="home_show.php?id=24">PhpStorm 6 发布，PHP 集成开发环境</a></li>
<li><a href="home_show.php?id=23">PHP闭包（Closure）初探</a></li>
</ul>
</div>
</div>
</div>
</body></html>フロントエンド記事詳細ページ:
<html><head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>文章列表</title>
<meta charset="utf-8">
<style>
*{
box-sizing:border-box;
}
.box{
font-family: 宋体;
margin:0px auto;
width:400px;
}
.box a:link,.box a:visited,.box a:hover{color:#000000;text-decoration:underline; }
.head{
background-color:#0f8ff2;
height:80px;
}
.tit{
padding: 20px 40px;
font-size:25px;
}
.content{
width:400px;
min-height:100px;
border:1px solid red;
}
.top_con{
width:400px;
padding:5px 10px 20px 10px ;
}
.bottom_con{
margin:0px 0px 0px -1px;
width:400px;
}
.con_tit{
font-size:22px;
margin:20px 0px 10px 10px;
font-weight:bold;
}
.con_aut{
font-size:13px;
padding-left:10px;
padding-top:10px;
}
.con_des{
padding-top:15px;
text-indent:2em;
font-size:18px;
padding-left:10px
}
.con_det{
text-indent:2em;
font-size:17px;
margin:20px 0px 0px 0px;
padding-left:10px
}
ul{
list-style:none;
margin-left:-30px;
}
li{
margin:15px 0px 0px 0px;
}
</style>
</head>
<body>
<div class="box">
<div class="head"><a href="home_list.php">返回</a><div class="tit">php资讯站</div></div>
<div class="content">
<div class="top_con">
<div class="con_tit">用PHP编程语言开发动态WAP页面</div>
<div class="con_aut">php中文网 发表于2016-11-01</div>
<div class="con_des">WAP(无线通讯协议)是在数字移动电话、个人手持设备(PDA等)及计算机之间进行通讯的开放性全球标准协议。随着无线通讯的不断发展，静态的WAP页面在很多方面已经不能满足用户个性化的要求，因此开发者可以在WAP服务 </div>
<div class="con_det">WAP(无线通讯协议)是在数字移动电话、个人手持设备(PDA等)及计算机之间进行通讯的开放性全球标准协议。随着无线通讯的不断发展，静态的WAP页面在很多方面已经不能满足用户个性化的要求，因此开发者可以在WAP服务器端使用诸如PHP等语言产生动态的WML页面，来满足用户的需要。
WAP的应用结构非常类似于Internet，一个典型的WAP应用请求步骤描述如下：
1. 具有WAP用户代理功能的移动终端(如WAP手机)，通过内部运行的微浏览器向某一网站发送WAP服务请求。该请求先由WAP网关截获，对信息内容进行编码压缩，以减少网络数据流量，同时根据需要将WAP协议转换成HTTP协议。
2. 协议将处理后的请求转送到相应WAP服务器。在WAP服务器端，根据页面扩展名等属性，被请求的页面直接或由服务器端脚本解释后输出，再经过网关传回给用户。
从上述的WAP应用流程可以发现，生成动态WAP页面与动态产生Web网页的过程非常相似。但是由于WAP应用使用的WML语言来源于语法严格的XML，因此要求输出的格式必须按WAP网页的规范输出。同时，由于WAP协议的应用范围及移动客户端的软、硬件配置等局限性，对每次输出的页面的大小、图像的格式及容量都有一定限制。本文笔者将以PHP语言为例，和广大网络程序开发爱好者共同探讨动态输出WAP页面的方法和应用。
输出简单的动态WAP页面
由于生成WAP页面的过程和生成一般的Web页面非常类似，笔者通过一个最简单的WAP页面的例子来介绍。不过提醒一句：由于需要PHP解释器来解释该程序并输出WAP页面，因此所有类似的程序应以“php”为扩展名哦。
该实例可以在WAP手机模拟器中浏览，输出一句经典的“Hello WAP”语句，但是在普通的网络浏览器中是无法识别的，原因很简单，在程序开头声明了该输出文档为WML类型，只有WAP设备能够识别并解释。不过又要提醒一句：常见的HTML语言对规范性要求不严，大多数浏览器能“宽容”地接受其中的编写错误，但是WML的规范相当严格，任何的错误都可能导致无法输出所需的页面。</div>
</div>
<div class="bottom_con">
<div style="margin-left:10px;font-size:20px;">最新资讯</div>
<ul>
<li><a href="home_show.php?id=28">Facebook 将 PHP 编译成 JVM 字节码？</a></li>
<li><a href="home_show.php?id=27">PHP 5.5 或将引入 Generators</a></li>
<li><a href="home_show.php?id=26">国外十大最流行PHP框架排名</a></li>
<li><a href="home_show.php?id=25">php接收标准输入解决分布式处理实现方法</a></li>
<li><a href="home_show.php?id=24">PhpStorm 6 发布，PHP 集成开发环境</a></li>
<li><a href="home_show.php?id=23">PHP闭包（Closure）初探</a></li>
</ul>
</div>
</div>
</div>
</body></html> 各ページについては後ほど詳しく紹介します 次項で全体のファイル構成を紹介します。プロジェクト
![フロントエンドプロジェクト-Shangyou [HTML/CSS/JS技術総合演習]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Apipost 実用化 [API、インターフェース、自動テスト、モック]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
