使用 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


By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2013, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo