PHP開發文章發布系統之效果展...LOGIN

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>

每個頁面,我們之後都會詳細介紹,下一節我們介紹整個專案的檔案組成


下一節

<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>
章節課件