使用 PHP 创建数据库驱动的应用程序

第 8 课:使用 CSS 技术改进应用程序的外观

此页上的内容适用于 NetBeans IDE 7.2、7.3、7.4 和 8.0

在本课程中,您将了解如何执行以下操作:

当前文档是“在适用于 PHP 的 NetBeans IDE 中创建 CRUD 应用程序”教程的一部分。


来自上一课的应用程序源代码

MySQL 用户:单击此处以下载源代码,该代码反映了在完成上一课之后的项目状态。

Oracle 数据库用户:单击此处以下载源代码,该代码反映了在完成上一课之后的项目状态。

隐藏窗体

目前,应用程序的主 index.php 页始终显示整个登录和 showWishList 窗体。要改进应用程序的外观,您可以隐藏窗体并将其替换为按钮。当用户按下按钮时,将展开相应的隐藏窗体。

实现该行为:

  1. 将 <script></script> 块添加到 index.php 文件的结束 </body> 标记的正上方。
  2. 在 <script></script> 标记内开发两个 JavaScript 函数
  3. 对 index.php 文件进行一些小的改动

JavaScript 函数

JavaScript 函数不需要任何输入参数,并且不返回任何结果。以下代码检查相应窗体的可视性状态,然后将其更改为相反的状态。该代码还会更改按钮上的文本。要完成这些更改,请在 <script></script> 标记内输入以下代码:

<script>
function showHideLogonForm() {
    if (document.all.logon.style.visibility == "visible"){
        document.all.logon.style.visibility = "hidden";
        document.all.myWishList.value = "My Wishlist >>";
    } 
    else {
        document.all.logon.style.visibility = "visible";
        document.all.myWishList.value = "<< My Wishlist";
    }
}
function showHideShowWishListForm() {
    if (document.all.wishList.style.visibility == "visible") {
        document.all.wishList.style.visibility = "hidden";
        document.all.showWishList.value = "Show Wish List of >>";
    }
    else {
        document.all.wishList.style.visibility = "visible";
        document.all.showWishList.value = "<< Show Wish List of";
    }
}
</script>	

更新 index.php

  1. 在登录窗体中添加一个 style 属性:
    <form name="logon" action="index.php" method="POST" 
            style="visibility:<?php if ($logonSuccess) echo "hidden";
            else echo "visible";?>">
    style 属性定义了是隐藏还是显示窗体。<?php ?> 块用于将窗体保持可见,直至用户成功登录。
  2. 在登录输入窗体代码上方输入以下代码:
     <input type="submit" name="myWishList" value="My Wishlist >>" onclick="javascript:showHideLogonForm()"/>
    该代码实现一个包含 "My Wishlist >>" 文本的按钮。该按钮位于登录窗体所在的位置。如果按下该按钮,则会调用 showHideLogonForm 函数。
  3. 在 wishList 窗体中添加一个 style 属性:
    <form name="wishList" action="wishlist.php" method="GET" style="visibility:hidden">
    Show wish list of: <input type="text" name="user"/>
    <input type="submit" value="Go" />
    </form>
  4. 在 wishList 窗体上方输入以下代码:
    <input type="submit" name="showWishList" value="Show Wish List of >>" onclick="javascript:showHideShowWishListForm()"/>
  5. 从窗体中删除以下代码,因为它已位于按钮上:
    Show wishlist of: 

使用级联样式表定义样式

目前,应用程序中的控件彼此“粘”在一起,它们通常位于屏幕的左上角。要改进应用程序的页面外观,请定义样式并为特定控件指定这些样式以指定控件的大小、位置、颜色、字体和其他参数。样式是在单独的级联样式表 (CSS) 文件中定义的。

有关应用程序设计的所有建议都是可选的。下面的样式定义仅用于举例说明如何改进应用程序的外观。这些设置适用于 1024x768 像素或更高的屏幕分辨率。

创建 CSS 文件

  1. 在 "Source Files"(源文件)节点上单击鼠标右键,然后从上下文菜单中选择 "New"(新建)> "Cascading Style Sheet"(级联样式表)。
  2. 在 "Cascading Style Sheet"(级联样式表)面板的 "File Name"(文件名)编辑框中输入 wishlist。单击 "Finish"(完成)。
    "New CSS File"(新建 CSS 文件)面板
    将在项目树中显示新文件 wishlist.css

定义 CSS 样式

打开 wishlist.css 文件。该文件已包含一个 "root" 类,您可以将其删除。您可以在此处下载本教程的完成版本以获取 wishlist.css 的副本。该代码简单直观并且包含:

  • 两个样式("body" 和 "input"),它们是在任何 <body></body><input/> 标记内自动应用的。
  • 应用的 CSS 类(如果明确指定)。类名前面包含圆点,例如,.createWishList。某些类可以多次使用,例如,将 ".error" 类应用于应用程序中的所有错误消息。另外一些类只能使用一次,例如,".showWishList"、".logon"。

使用 HTML Div 实现设计

有关应用程序设计的所有建议都是可选的。与上面的样式定义一样,它们仅用于举例说明如何改进应用程序的外观。

下面的示例介绍了如何改进 index.php 页面的外观。

  1. 要启用定义的 CSS 类,请在 <head></head> 块中输入以下代码:
         <link href="wishlist.css" type="text/css" rel="stylesheet" media="all" />
    将在相应标记内自动应用 "body" 和 "input" 样式,因此,您不需要明确指定这些样式。
  2. 要将任何其他样式(类)应用于某个区域,请将实现该区域的代码包含在 <div class=""></div> 标记内:
     <div class="showWishList">
    <input type="submit" name="showWishList" value="Show Wish List of >>" onclick="javascript:showHideShowWishListForm()"/>

    <form name="wishList" action="wishlist.php" method="GET" style="visibility:hidden">
    <input type="text" name="user"/>
    <input type="submit" value="Go" />
    </form>
    </div>

    注:在 <div> 标记中指定类时,不需要在前面添加圆点。

  3. 您可以使用嵌入式 <div> 标记:
    <div class="logon">
    <input type="submit" name="myWishList" value="My Wishlist >>" onclick="javascript:showHideLogonForm()"/>
    <form name="logon" action="index.php" method="POST"
    style="visibility:<?php if ($logonSuccess) echo "hidden"; else echo "visible";?>">
    Username: <input type="text" name="user"/>
    Password: <input type="password" name="userpassword"/><br/>
    <div class="error">
    <?php
    if (!$logonSuccess) echo "Invalid name and/or password";
    ?>
    </div>
    <input type="submit" value="Edit My Wish List"/>
    </form>
    </div>
    "logon" 类应用于整个窗体,而 "error" 类应用于窗体中的错误消息。

有关使用级联样式表 (CSS) 的更多详细信息,请参见 http://www.htmlpedia.org/wiki/List_of_CSS_Properties

完成当前课程后的应用程序源代码

MySQL 用户:单击此处以下载包含样例设计和 CSS 文件的源代码。

Oracle 数据库用户:单击此处以下载包含样例设计和 CSS 文件的源代码。

PDO:Goran Miskovic 是一位社区成员,他在此处热心提供了完整教程的 PDO 版本。在本项目中,只需更改 DSN 参数便可在 Oracle XE 和 MySQL 数据库之间进行切换。该项目包括您需要的所有 SQL 脚本,并记录在该代码中。但请注意,PDO_OCI 是实验性的。

NetBeans IDE 团队非常感谢 Ozan Hazer 在创建 CSS 和改进完成的样例中的代码方面所做的贡献。

后续步骤

<< 上一课

下一课 >>

返回到教程主页



要发送意见和建议、获得支持以及随时了解 NetBeans IDE PHP 开发功能的最新开发情况,请加入 邮件列表

返回至 PHP 学习资源

get support for the NetBeans

Support