netbeans.apache.org/src/content/kb/docs/php/wish-list-lesson8_zh_CN.asciidoc - netbeans-website - Git at Google

 //
 //     Licensed to the Apache Software Foundation (ASF) under one
 //     or more contributor license agreements.  See the NOTICE file
 //     distributed with this work for additional information
 //     regarding copyright ownership.  The ASF licenses this file
 //     to you under the Apache License, Version 2.0 (the
 //     "License"); you may not use this file except in compliance
 //     with the License.  You may obtain a copy of the License at
 //
 //       http://www.apache.org/licenses/LICENSE-2.0
 //
 //     Unless required by applicable law or agreed to in writing,
 //     software distributed under the License is distributed on an
 //     "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 //     KIND, either express or implied.  See the License for the
 //     specific language governing permissions and limitations
 //     under the License.
 //

 = 使用 PHP 创建数据库驱动的应用程序
 :jbake-type: tutorial
 :jbake-tags: tutorials
 :jbake-status: published
 :icons: font
 :syntax: true
 :source-highlighter: pygments
 :toc: left
 :toc-title:
 :description: 使用 PHP 创建数据库驱动的应用程序 - Apache NetBeans
 :keywords: Apache NetBeans, Tutorials, 使用 PHP 创建数据库驱动的应用程序

 = 第 8 课：使用 CSS 技术改进应用程序的外观
 :jbake-type: tutorial
 :jbake-tags: tutorials
 :jbake-status: published
 :icons: font
 :syntax: true
 :source-highlighter: pygments
 :toc: left
 :toc-title:
 :description: 第 8 课：使用 CSS 技术改进应用程序的外观 - Apache NetBeans
 :keywords: Apache NetBeans, Tutorials, 第 8 课：使用 CSS 技术改进应用程序的外观


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


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


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

 MySQL 用户：单击link:https://netbeans.org/files/documents/4/1933/lesson7.zip[+此处+]以下载源代码，该代码反映了在完成上一课之后的项目状态。

 Oracle 数据库用户：单击link:https://netbeans.org/projects/www/downloads/download/php%252Foracle-lesson7.zip[+此处+]以下载源代码，该代码反映了在完成上一课之后的项目状态。


 == 隐藏窗体

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

 实现该行为：

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


 === JavaScript 函数

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


 [source,xml]
 ----

 <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`  属性：

 [source,php]
 ----

 <input type="submit" name="myWishList" value="My Wishlist"> onclick="javascript:showHideLogonForm()"/>
 ----
  `style`  属性定义了是隐藏还是显示窗体。<?php ?> 块用于将窗体保持可见，直至用户成功登录。

 [start=2]
 . 在登录输入窗体代码上方输入以下代码：

 [source,php]
 ----

 <input type="submit" name="myWishList" value="My Wishlist"> onclick="javascript:showHideLogonForm()"/>
 ----
 该代码实现一个包含 "My Wishlist >>" 文本的按钮。该按钮位于登录窗体所在的位置。如果按下该按钮，则会调用 showHideLogonForm 函数。

 [start=3]
 . 在 wishList 窗体中添加一个  `style`  属性：

 [source,xml]
 ----

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

 [start=4]
 . 在 wishList 窗体上方输入以下代码：

 [source,xml]
 ----

 <input type="submit" name="showWishList" value="Show Wish List of" onclick="javascript:showHideShowWishListForm()"/>
 ----

 [start=5]
 . 从窗体中删除以下代码，因为它已位于按钮上：

 [source,php]
 ----

 Show wishlist of:
 ----


 == 使用级联样式表定义样式

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

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


 === 创建 CSS 文件

 1. 在 "Source Files"（源文件）节点上单击鼠标右键，然后从上下文菜单中选择 "New"（新建）> "Cascading Style Sheet"（级联样式表）。
 2. 在 "Cascading Style Sheet"（级联样式表）面板的 "File Name"（文件名）编辑框中输入 wishlist。单击 "Finish"（完成）。

 image::images/newCascadingStyleSheetFile.png[]

 将在项目树中显示新文件  `wishlist.css` 。


 === 定义 CSS 样式

 打开 wishlist.css 文件。该文件已包含一个 "root" 类，您可以将其删除。您可以在link:https://netbeans.org/files/documents/4/1934/lesson8.zip[+此处+]下载本教程的完成版本以获取  `wishlist.css`  的副本。该代码简单直观并且包含：

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


 == 使用 HTML Div 实现设计

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

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

 1. 要启用定义的 CSS 类，请在  `<head></head>`  块中输入以下代码：

 [source,html]
 ----

 <link href="wishlist.css" type="text/css" rel="stylesheet" media="all" />
 ----
 将在相应标记内自动应用 "body" 和 "input" 样式，因此，您不需要明确指定这些样式。

 [start=2]
 . 要将任何其他样式（类）应用于某个区域，请将实现该区域的代码包含在  `<div class=""></div>`  标记内：

 [source,html]
 ----

 <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> 标记中指定类时，不需要在前面添加圆点。


 [start=3]
 . 您可以使用嵌入式 <div> 标记：

 [source,html]
 ----

 <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) 的更多详细信息，请参见 link:http://www.htmlpedia.org/wiki/List_of_CSS_Properties[+http://www.htmlpedia.org/wiki/List_of_CSS_Properties+]


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

 MySQL 用户：单击link:https://netbeans.org/files/documents/4/1934/lesson8.zip[+此处+]以下载包含样例设计和 CSS 文件的源代码。

 Oracle 数据库用户：单击link:https://netbeans.org/projects/www/downloads/download/php%252Foracle-lesson8.zip[+此处+]以下载包含样例设计和 CSS 文件的源代码。

 PDO：Goran Miskovic 是一位社区成员，他在link:https://netbeans.org/projects/www/downloads/download/php/wishlist-pdo.zip[+此处+]热心提供了完整教程的 PDO 版本。在本项目中，只需更改 DSN 参数便可在 Oracle XE 和 MySQL 数据库之间进行切换。该项目包括您需要的所有 SQL 脚本，并记录在该代码中。但请注意，PDO_OCI 是实验性的。

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


 == 后续步骤

 link:wish-list-lesson7.html[+<< 上一课+]

 link:wish-list-lesson9.html[+下一课 >>+]

 link:wish-list-tutorial-main-page.html[+返回到教程主页+]


 link:/about/contact_form.html?to=3&subject=Feedback:%20PHP%20Wish%20List%20CRUD%200:%20Using%20and%20CSS[+发送有关此教程的反馈意见+]


 要发送意见和建议、获得支持以及随时了解 NetBeans IDE PHP 开发功能的最新开发情况，请link:../../../community/lists/top.html[+加入 users@php.netbeans.org 邮件列表+]。

 link:../../trails/php.html[+返回至 PHP 学习资源+]
	//
	// Licensed to the Apache Software Foundation (ASF) under one
	// or more contributor license agreements. See the NOTICE file
	// distributed with this work for additional information
	// regarding copyright ownership. The ASF licenses this file
	// to you under the Apache License, Version 2.0 (the
	// "License"); you may not use this file except in compliance
	// with the License. You may obtain a copy of the License at
	//
	// http://www.apache.org/licenses/LICENSE-2.0
	//
	// Unless required by applicable law or agreed to in writing,
	// software distributed under the License is distributed on an
	// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
	// KIND, either express or implied. See the License for the
	// specific language governing permissions and limitations
	// under the License.
	//

	= 使用 PHP 创建数据库驱动的应用程序
	:jbake-type: tutorial
	:jbake-tags: tutorials
	:jbake-status: published
	:icons: font
	:syntax: true
	:source-highlighter: pygments
	:toc: left
	:toc-title:
	:description: 使用 PHP 创建数据库驱动的应用程序 - Apache NetBeans
	:keywords: Apache NetBeans, Tutorials, 使用 PHP 创建数据库驱动的应用程序

	= 第 8 课：使用 CSS 技术改进应用程序的外观
	:jbake-type: tutorial
	:jbake-tags: tutorials
	:jbake-status: published
	:icons: font
	:syntax: true
	:source-highlighter: pygments
	:toc: left
	:toc-title:
	:description: 第 8 课：使用 CSS 技术改进应用程序的外观 - Apache NetBeans
	:keywords: Apache NetBeans, Tutorials, 第 8 课：使用 CSS 技术改进应用程序的外观


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


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



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

	MySQL 用户：单击link:https://netbeans.org/files/documents/4/1933/lesson7.zip[+此处+]以下载源代码，该代码反映了在完成上一课之后的项目状态。

	Oracle 数据库用户：单击link:https://netbeans.org/projects/www/downloads/download/php%252Foracle-lesson7.zip[+此处+]以下载源代码，该代码反映了在完成上一课之后的项目状态。


	== 隐藏窗体

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

	实现该行为：

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


	=== JavaScript 函数

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


	[source,xml]
	----

	<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` 属性：

	[source,php]
	----

	<input type="submit" name="myWishList" value="My Wishlist"> onclick="javascript:showHideLogonForm()"/>
	----
	`style` 属性定义了是隐藏还是显示窗体。<?php ?> 块用于将窗体保持可见，直至用户成功登录。

	[start=2]
	. 在登录输入窗体代码上方输入以下代码：

	[source,php]
	----

	<input type="submit" name="myWishList" value="My Wishlist"> onclick="javascript:showHideLogonForm()"/>
	----
	该代码实现一个包含 "My Wishlist >>" 文本的按钮。该按钮位于登录窗体所在的位置。如果按下该按钮，则会调用 showHideLogonForm 函数。

	[start=3]
	. 在 wishList 窗体中添加一个 `style` 属性：

	[source,xml]
	----

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

	[start=4]
	. 在 wishList 窗体上方输入以下代码：

	[source,xml]
	----

	<input type="submit" name="showWishList" value="Show Wish List of" onclick="javascript:showHideShowWishListForm()"/>
	----

	[start=5]
	. 从窗体中删除以下代码，因为它已位于按钮上：

	[source,php]
	----

	Show wishlist of:
	----


	== 使用级联样式表定义样式

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

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


	=== 创建 CSS 文件

	1. 在 "Source Files"（源文件）节点上单击鼠标右键，然后从上下文菜单中选择 "New"（新建）> "Cascading Style Sheet"（级联样式表）。
	2. 在 "Cascading Style Sheet"（级联样式表）面板的 "File Name"（文件名）编辑框中输入 wishlist。单击 "Finish"（完成）。

	image::images/newCascadingStyleSheetFile.png[]

	将在项目树中显示新文件 `wishlist.css` 。


	=== 定义 CSS 样式

	打开 wishlist.css 文件。该文件已包含一个 "root" 类，您可以将其删除。您可以在link:https://netbeans.org/files/documents/4/1934/lesson8.zip[+此处+]下载本教程的完成版本以获取 `wishlist.css` 的副本。该代码简单直观并且包含：

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


	== 使用 HTML Div 实现设计

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

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

	1. 要启用定义的 CSS 类，请在 `<head></head>` 块中输入以下代码：

	[source,html]
	----

	<link href="wishlist.css" type="text/css" rel="stylesheet" media="all" />
	----
	将在相应标记内自动应用 "body" 和 "input" 样式，因此，您不需要明确指定这些样式。

	[start=2]
	. 要将任何其他样式（类）应用于某个区域，请将实现该区域的代码包含在 `<div class=""></div>` 标记内：

	[source,html]
	----

	<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> 标记中指定类时，不需要在前面添加圆点。


	[start=3]
	. 您可以使用嵌入式 <div> 标记：

	[source,html]
	----

	<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) 的更多详细信息，请参见 link:http://www.htmlpedia.org/wiki/List_of_CSS_Properties[+http://www.htmlpedia.org/wiki/List_of_CSS_Properties+]


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

	MySQL 用户：单击link:https://netbeans.org/files/documents/4/1934/lesson8.zip[+此处+]以下载包含样例设计和 CSS 文件的源代码。

	Oracle 数据库用户：单击link:https://netbeans.org/projects/www/downloads/download/php%252Foracle-lesson8.zip[+此处+]以下载包含样例设计和 CSS 文件的源代码。

	PDO：Goran Miskovic 是一位社区成员，他在link:https://netbeans.org/projects/www/downloads/download/php/wishlist-pdo.zip[+此处+]热心提供了完整教程的 PDO 版本。在本项目中，只需更改 DSN 参数便可在 Oracle XE 和 MySQL 数据库之间进行切换。该项目包括您需要的所有 SQL 脚本，并记录在该代码中。但请注意，PDO_OCI 是实验性的。

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


	== 后续步骤

	link:wish-list-lesson7.html[+<< 上一课+]

	link:wish-list-lesson9.html[+下一课 >>+]

	link:wish-list-tutorial-main-page.html[+返回到教程主页+]


	link:/about/contact_form.html?to=3&subject=Feedback:%20PHP%20Wish%20List%20CRUD%200:%20Using%20and%20CSS[+发送有关此教程的反馈意见+]


	要发送意见和建议、获得支持以及随时了解 NetBeans IDE PHP 开发功能的最新开发情况，请link:../../../community/lists/top.html[+加入 users@php.netbeans.org 邮件列表+]。

	link:../../trails/php.html[+返回至 PHP 学习资源+]