13.4.1将用户管理功能嵌入到login层

13.4 新闻发布系统静态和动态页面的嵌入

在前面的章节中，已经使用 PHP 实现了新闻发布系统的全部功能模块，我们可以使用index.php作为桥梁将所有功能模块进行整合，即将动态PHP页面和静态页面（首页）融为一体。

13.4.1 将用户管理功能嵌入到login层

将用户管理功能嵌入到login层中，需要进行如下操作。

（1）将登录页面login.php嵌入到index.php页面中的login层中，将index.php程序中的login层代码修改为如下代码。

<div id="login">

<br>

<?php

include_once("login.php");

?>

</div>

（2）将login_process.php程序中的代码片段：

header("Location:login.php?login_message=password_right");

}else{

header("Location:login.php?login_message=password_error");

}

修改为：

header("Location:index.php?login_message=password_right");

}else{

header("Location:index.php?login_message=password_error");

}

无论用户登录成功还是失败，都将页面重定向到首页index.php页面。

（3）将logout.php程序中的代码片段：

header("Location:login.php");

修改为：

header("Location:index.php");

经过这些步骤的修改，成功地将用户管理功能功能嵌入到login层中。

13.4.2 修改menu层代码

当浏览器用户单击了index.php页面中menu项目列表的某个超链接时，对应结果应该显示在index.php页面中的mainfunction层。

（1）将index.php程序中menu层的代码片段：

<div id="menu">

<ul>

<li><a href="">首页</a></li>

<li class="menudiv"></li>

<li><a href="">评论浏览</a></li>

<li class="menudiv"></li>

<li><a href="">分类浏览</a></li>

<li class="menudiv"></li>

<li><a href="">新闻发布</a></li>

<li class="menudiv"></li>

<li><a href="">添加分类</a></li>

<li class="menudiv"></li>

<li><a href="">设为首页</a></li>

</ul>

</div>

修改为：

<div id="menu">

<ul>

<li><a href="index.php?url=news_list.php">首页</a></li>

<li class="menudiv"></li>

<li><a href="index.php?url=review_list.php">评论浏览</a></li>

<li class="menudiv"></li>

<li><a href="index.php?url=category_list.php">分类浏览</a></li>

<li class="menudiv"></li>

<li><a href="index.php?url=news_add.php">新闻发布</a></li>

<li class="menudiv"></li>

<li><a href="index.php?url=category_add.php">添加分类</a></li>

<li class="menudiv"></li>

<li><a href="">设为首页</a></li>

</ul>

</div>

修改后的代码片段实现的功能是：当单击项目列表中的超链接时，会向index.php页面传递一个url查询字符串，mainfunction层通过接收该url查询字符串来决定加载哪个功能模块。

（2）使用JavaScript实现“设置首页”功能。

将index.php程序中menu层中的代码片段：

<li><a href="">设为首页</a></li>

修改为：

<li><a　href=""　onclick="this.style.behavior="url(#default#homepage)";this.setHomePage("http://<?php echo $_SERVER["SERVER_ADDR"]?>/news");">设为首页</a></li>

从而实现“设置首页”功能。

单击“设为首页”超链接后，将弹出如图13-15所示的对话框，提示浏览器用户是否将“http://127.0.0.1/news/”设为主页。

说明：设置首页功能目前仅对 IE 浏览器有效，而对FireFox浏览器无效，请读者自己通过百度或其他搜索引擎寻找其解决办法。

13.4.3 将主要功能嵌入到mainfunction层

当浏览器用户单击了index.php页面中menu菜单的某项目列表超链接时，对应结果应该显示在index.php页面的mainfunction层中，即将新闻发布系统的主要功能嵌入到mainfunction的DIV层中。可以通过如下步骤实现。

（1）将主要功能显示在mainfunction层。

默认情况下，mainfunction层仅显示新闻标题列表，只有当浏览器用户单击menu层中某项目列表超链接（例如新闻发布）时，mainfunction层才加载超链接对应的功能模块，并显示对应结果。

① 将index.php程序中mainfunction层的代码片段：

<div id="mainfunction">

</div>

修改为：

<div id="mainfunction">

<br>

<?php

if(isset($_GET["url"])){

$url = $_GET["url"];

}else{

$url = "news_list.php";

}

include_once($url);

?>

</div>

修改后的代码片段实现的功能是：mainbody 层默认情况下加载 news/news_list.php 程序；当浏览器用户单击了menu层中某项目列表超链接时，mainbody层加载URL查询字符串对应的页面程序。

② 将news_list.php程序的代码片段：

include_once("functions/database.php");

include_once("functions/page.php");

include_once("functions/is_login.php");

session_start();

修改为：

include_once("functions/database.php");

include_once("functions/page.php");

include_once("functions/is_login.php");

if (!session_id()){//这里使用session_id()判断是否已经开启了Session

session_start();

}

（2）修改新闻标题列表的模糊查询功能代码。

将news_list.php程序中的代码片段：

<form action="news_list.php" method="get">

修改为：

<form action="index.php?url=news_list.php" method="get">

（3）修改新闻编辑功能代码。

管理员用户成功登录新闻发布系统后，可以单击“编辑”（或“删除”）超链接实现新闻在mainfunction层中的编辑（或删除）功能。将news_list.php程序中的代码片段：

<?php

if(is_login()){

?>

<td>

<a href="news_edit.php?news_id=<?php echo $row["news_id"]?>">编辑</a>

</td>

<td>

<a href="news_delete.php?news_id=<?php echo $row["news_id"]?>" onclick="returnconfirm("确定删除吗？");">删除</a>

</td>

<?php

}

?>

修改为：

<?php

if(is_login()){

?>

<td>

<a href="index.php?url=news_edit.php&news_id=<?php echo $row["news_id"]?>">编辑</a>

</td>

<td>

<a href="index.php?url=news_delete.php&news_id=<?php echo $row["news_id"]?>" onclick="return confirm("确定删除吗？");">删除</a>

</td>

<?php

}

?>

然后将news_edit.php程序中的代码片段：

include_once("functions/is_login.php");

session_start();

修改为：

include_once("functions/is_login.php");

if (!session_id()){//这里使用session_id()判断是否已经开启了Session

session_start();

}

（4）修改新闻修改功能的代码。

首先将news_update.php程序中的代码片段：

include_once("functions/is_login.php");

session_start();

修改为：

include_once("functions/is_login.php");

if(!session_id()){//这里使用session_id()判断是否已经开启了Session

session_start();

}

然后将news_update.php程序中的代码片段：

header("Location:news_list.php?message=$message");

修改为：

header("Location:index.php?url=news_list.php&message=$message");

经过上述步骤的修改，即可实现新闻的修改功能。

（5）修改新闻删除功能的代码。

首先将news_delete.php程序中的代码片段：

include_once("functions/is_login.php");

session_start();

修改为：

include_once("functions/is_login.php");

if (!session_id()){//这里使用session_id()判断是否已经开启了Session

session_start();

}

然后将news_delete.php程序中的代码片段：

header("Location:news_list.php?message=$message");

修改为：

header("Location:index.php?url=news_list.php&message=$message");

经过上述步骤的修改，即可实现新闻的删除功能。

（6）修改新闻详细信息的显示功能的代码。

当浏览器用户单击新闻标题超链接时，可以在index.php页面的mainfunction层中显示新闻的详细信息。将news_list.php程序中的代码片段：

<a href="news_detail.php?keyword=<?php echo $keyword?>&news_id=<?php echo $row ["news_id"]?>"><?php echo mb_strcut($row["title"],0,40,"gbk")?></a>

修改为：

<td>

<a href="index.php?url=news_detail.php&keyword=<?php echo $keyword?>&news_id= <?php echo $row["news_id"]?>"><?php echo mb_strcut($row["title"],0,40,"gbk")?></a>

</td>

（7）修改评论功能的代码。

当浏览器用户查看到新闻的详细信息后，可以在index.php页面的mainfunction层对该新闻进行评论。

将review_save.php程序中的代码片段：

header("Location:news_list.php?message=$message");

修改为：

header("Location:index.php?url=news_list.php&message=$message");

经过上述步骤的修改，即可实现新闻评论功能。

（8）实现评论的浏览功能。

管理员用户可以在index.php页面的mainfunction层中查看所有评论信息。

首先将review_list.php程序中的代码片段：

include_once("functions/is_login.php");

session_start();

修改为：

include_once("functions/is_login.php");

if (!session_id()){//这里使用session_id()判断是否已经开启了Session

session_start();

}

然后将review_list.php程序中的代码片段：

//分页的实现

$url = $_SERVER["PHP_SELF"];

page($total_records,$page_size,$page_current,$url,"");

修改为：

//分页的实现

$url = "index.php?url=review_list.php";

page($total_records,$page_size,$page_current,$url,"");

经过上述步骤的修改，管理员可以查看评论列表信息。

（9）修改评论删除和审核功能的代码。

管理员用户可以在index.php页面的mainfunction层中删除和审核评论信息。实现评论删除的功能步骤如下。

将review_delete.php程序中的代码片段：

header("Location:review_list.php");

修改为：

header("Location:index.php?url=review_list.php");

经过上述步骤的修改，即可实现新闻评论删除功能。

实现评论审核的功能步骤如下。

只需将review_verify.php程序中的代码片段：

header("Location:review_list.php");

修改为：

header("Location:index.php?url=review_list.php");

经过上述步骤的修改，即可实现新闻评论审核功能。

（10）修改某条新闻的评论显示功能的代码。

浏览器用户可以在index.php页面的mainfunction层中查看某条新闻的已经审核的评论信息。

将news_detail.php程序中的代码片段：

echo "<a href="review_news_list.php?news_id=".$news["news_id"].""> 共 有 ".$count_review."条评论</a><br/>";

修改为：

echo "<a href="index.php?url=review_news_list.php&news_id=".$news["news_id"]."">共有".$count_review."条评论</a><br/>";

经过上述步骤的修改，即可实现某条新闻的评论显示功能。

（11）修改新闻发布功能的代码。

管理员用户可以在index.php页面的mainfunction层中发布新闻信息。

首先将news_add.php程序中的代码片段：

include_once("functions/is_login.php");

session_start();

修改为：

include_once("functions/is_login.php");

if (!session_id()){//这里使用session_id()判断是否已经开启了Session

session_start();

}

然后将news_save.php程序中的代码片段：

header("Location:news_list.php?message=$message");

修改为：

header("Location:index.php?url=news_list.php&message=$message");

经过上述步骤的修改，即可实现新闻发布功能。

经过上面所有步骤代码修改后，已经将动态PHP页面与首页静态页面融为一体。从上面代码的修改过程可以看出，大部分的代码修改仅仅局限于对路径的修改，并没有牵涉到任何功能性代码的修改，这主要得益于前面章节系统分析与系统设计细致入微。对于其他功能的代码实现，请读者参照本节的内容进行相应的修改。

13.4.4 sidebar层和mainbody层的高度自适应功能

在index.php页面中，pagebody层由sidebar层（左边）和mainbody（右边）层组成，并且在news.css文件中将sidebar层和mainbody层的高度分别设置为500像素，并分别设置了overflow的属性值为hidden，从而实现了sidebar层与mainbody层等高。由此却带来另一个bug：当mainbody层中显示的内容过长时，“多余”的信息被隐藏，如图13-16所示。

为了解除该bug，这里可以使用JavaScript实现sidebar层和mainbody层高度自适应，从而保证过多的信息不被隐藏。实现步骤如下。

（1）在index.php程序的末尾添加如下JavaScript代码片段。

<script>

var sidebarHeight = document.getElementById("sidebar").clientHeight;

var mainbodyHeight = document.getElementById("mainbody").clientHeight;

if(sidebarHeight<500&&mainbodyHeight<500){

document.getElementById("sidebar").style.height="500px";

document.getElementById("mainbody").style.height="500px";

}else{

if(sidebarHeight<mainbodyHeight){

document.getElementById("sidebar").style.height=mainbodyHeight+"px";

}else{

document.getElementById("mainbody").style.height=sidebarHeight+"px";

}

}

</script>

该JavaScript代码段实现的功能是：sidebar层（左边）和mainbody（右边）层的高度以sidebar层（左边）和mainbody（右边）层的最高高度为准；若最高高度小于500像素，则以500像素为准。

（2）删除news.css代码中#pagebody{}、# sidebar{}、# mainbody{}的高度height属性的设置，删除news.css代码中# sidebar{}、# mainbody{}的overflow属性的设置。

（3）向index.php代码中的pagebody层中增加一个匿名层<div style="clear:both;"></div>，修改后的pagebody层代码如下。

<div id="pagebody">

<div id="sidebar">

<div id="login">

<br>

<?php

include_once("user/login.php");

?>

</div>

</div>

<div id="mainbody">

<div id="mainfunction">

<br>

<?php

if(isset($_GET["url"])){

$url = $_GET["url"];

}else{

$url = "news/news_list.php";

}

include_once($url);

?>

</div>

</div>

<div style="clear:both;">

</div>

</div>

添加“<div style="clear:both;"></div>”代码的作用是：清除左、右所有的浮动。在这里添加clear:both是由于之前的sidebar层、mainbody层设置了浮动，如果不清除则有可能会影响footer层位置的设定，导致footer层错位。

通过上述几个步骤的修改，实现了sidebar和mainbody的高度自适应功能。

13.4.5 防止图片太宽撑破mainbody层

为了防止mainfunction层中的图片太宽撑破mainbody层，在news.css代码中添加如下代码。

#mainfunction img{

max-width:480px;

width:expression(this.width > 480 ? "480px" : this.width);

}

该代码实现的功能为：设置mainfunction层中的图片宽度不能超过480像素，否则图片将缩小到480像素。