netbeans.apache.org/src/content/kb/docs/php/wish-list-lesson8_ja.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アプリケーションの作成というPHPチュートリアルの一部です。


 == 前のレッスンからのアプリケーション・ソース・コード

 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.  `index.php` ファイルの終了</body>タグの直前に、<script></script>ブロックを追加します。
 2. <<javaScriptFunctions,<script></script>タグ内に2つの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]
 ----

 <form name="logon" action="index.php" method="POST"
         style="visibility:<?php if ($logonSuccess) echo "hidden";
         else echo "visible";?>">
 ----
  `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:
 ----


 == Cascading Style Sheetを使用したスタイルの定義

 現在、アプリケーション内のコントロールは互いに「くっついて」おり、通常は画面の左上隅に配置されています。アプリケーションのページの外観を改良するには、スタイルを定義し、そのスタイルを特定のコントロールに割り当てることによって、コントロールのサイズ、位置、色、フォント、およびその他のパラメータを指定します。スタイルは個別のCascading Style Sheet (CSS)ファイルで定義されます。

 アプリケーションのデザインに関する推奨および提案は、すべてオプションです。次のスタイル定義は、アプリケーションの外観の改良の例を示しています。この設定は、画面解像度1024x768ピクセル以上に適しています。


 === CSSファイルの作成

 1. 「ソース・ファイル」ノードでマウスの右ボタンをクリックし、コンテキスト・メニューから「新規」>「Cascading Style Sheet」を選択します。
 2. 「Cascading Style Sheet」パネルで、「ファイル名」編集ボックスに「wishlist」と入力します。「終了」をクリックします。

 image::images/newCascadingStyleSheetFile.png[]

 新しいファイル `wishlist.css` がプロジェクト・ツリーに表示されます。


 === CSSスタイルの定義

 wishlist.cssファイルを開きます。ファイルには、除去可能な「root」クラスがすでに含まれています。link:https://netbeans.org/files/documents/4/1934/lesson8.zip[+ここ+]から入手できるこのチュートリアルの完成したバージョンをダウンロードすることによって、 `wishlist.css` のコピーを取得できます。コードは直観的にわかりやすく、また、次のものが含まれています。

 * 2つのスタイル: 「body」および「input」 - 任意の `<body></body>` または `<input/>` タグの内部に自動的に適用されます。
 * 明示的に指定されたときに適用される、CSSクラス。クラス名は、 `.createWishList` のように、前にドットがあります。一部のクラスは複数回使用され、たとえば、「.error」クラスはアプリケーションのすべてのエラー・メッセージに適用されます。「.showWishList」、「.logon」など、その他のクラスは1度のみ使用されます。


 == 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」がフォーム内のエラー・メッセージに適用されます。

 Cascading Style Sheet (CSS)の使用については、link:http://www.htmlpedia.org/wiki/List_of_CSS_Properties[+http://www.htmlpedia.org/wiki/List_of_CSS_Properties+]を参照してください。


 == 現在のレッスン完了後のアプリケーション・ソース・コード

 MySQLユーザー: サンプルのデザインおよびCSSファイルを含むソース・コードをダウンロードするには、link:https://netbeans.org/files/documents/4/1934/lesson8.zip[+ここ+]をクリックします。

 Oracleデータベース・ユーザー: サンプルのデザインおよびCSSファイルを含むソース・コードをダウンロードするには、link:https://netbeans.org/projects/www/downloads/download/php%252Foracle-lesson8.zip[+ここ+]をクリックします。

 PDO: コミュニティのメンバーであるGoran Miskovic氏のご厚意で提供されたPDOバージョンの完全なチュートリアルは、link:https://netbeans.org/projects/www/downloads/download/php/wishlist-pdo.zip[+ここ+]から入手できます。このプロジェクトでは、DSNパラメータを変更することによって、Oracle XEとMySQLデータベースを簡単に切り替えることができます。プロジェクトには必要なすべてのSQLスクリプトが含まれ、コード内に説明があります。ただし、PDO_OCIは試験段階であることに注意してください。

 NetBeans IDEチームは、CSSを提供して、完成したサンプルのコードを改良されたOzan Hazer氏に感謝申し上げます。


 == 次の手順

 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[+このチュートリアルに関するご意見をお寄せください+]


 link:../../../community/lists/top.html[+users@php.netbeans.orgメーリング・リストに登録する+]ことによって、NetBeans IDE PHP開発機能に関するご意見やご提案を送信したり、サポートを受けたり、最新の開発情報を入手したりできます。

 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アプリケーションの作成というPHPチュートリアルの一部です。



	== 前のレッスンからのアプリケーション・ソース・コード

	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. `index.php` ファイルの終了</body>タグの直前に、<script></script>ブロックを追加します。
	2. <<javaScriptFunctions,<script></script>タグ内に2つの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]
	----

	<form name="logon" action="index.php" method="POST"
	style="visibility:<?php if ($logonSuccess) echo "hidden";
	else echo "visible";?>">
	----
	`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:
	----


	== Cascading Style Sheetを使用したスタイルの定義

	現在、アプリケーション内のコントロールは互いに「くっついて」おり、通常は画面の左上隅に配置されています。アプリケーションのページの外観を改良するには、スタイルを定義し、そのスタイルを特定のコントロールに割り当てることによって、コントロールのサイズ、位置、色、フォント、およびその他のパラメータを指定します。スタイルは個別のCascading Style Sheet (CSS)ファイルで定義されます。

	アプリケーションのデザインに関する推奨および提案は、すべてオプションです。次のスタイル定義は、アプリケーションの外観の改良の例を示しています。この設定は、画面解像度1024x768ピクセル以上に適しています。


	=== CSSファイルの作成

	1. 「ソース・ファイル」ノードでマウスの右ボタンをクリックし、コンテキスト・メニューから「新規」>「Cascading Style Sheet」を選択します。
	2. 「Cascading Style Sheet」パネルで、「ファイル名」編集ボックスに「wishlist」と入力します。「終了」をクリックします。

	image::images/newCascadingStyleSheetFile.png[]

	新しいファイル `wishlist.css` がプロジェクト・ツリーに表示されます。


	=== CSSスタイルの定義

	wishlist.cssファイルを開きます。ファイルには、除去可能な「root」クラスがすでに含まれています。link:https://netbeans.org/files/documents/4/1934/lesson8.zip[+ここ+]から入手できるこのチュートリアルの完成したバージョンをダウンロードすることによって、 `wishlist.css` のコピーを取得できます。コードは直観的にわかりやすく、また、次のものが含まれています。

	* 2つのスタイル: 「body」および「input」 - 任意の `<body></body>` または `<input/>` タグの内部に自動的に適用されます。
	* 明示的に指定されたときに適用される、CSSクラス。クラス名は、 `.createWishList` のように、前にドットがあります。一部のクラスは複数回使用され、たとえば、「.error」クラスはアプリケーションのすべてのエラー・メッセージに適用されます。「.showWishList」、「.logon」など、その他のクラスは1度のみ使用されます。


	== 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」がフォーム内のエラー・メッセージに適用されます。

	Cascading Style Sheet (CSS)の使用については、link:http://www.htmlpedia.org/wiki/List_of_CSS_Properties[+http://www.htmlpedia.org/wiki/List_of_CSS_Properties+]を参照してください。


	== 現在のレッスン完了後のアプリケーション・ソース・コード

	MySQLユーザー: サンプルのデザインおよびCSSファイルを含むソース・コードをダウンロードするには、link:https://netbeans.org/files/documents/4/1934/lesson8.zip[+ここ+]をクリックします。

	Oracleデータベース・ユーザー: サンプルのデザインおよびCSSファイルを含むソース・コードをダウンロードするには、link:https://netbeans.org/projects/www/downloads/download/php%252Foracle-lesson8.zip[+ここ+]をクリックします。

	PDO: コミュニティのメンバーであるGoran Miskovic氏のご厚意で提供されたPDOバージョンの完全なチュートリアルは、link:https://netbeans.org/projects/www/downloads/download/php/wishlist-pdo.zip[+ここ+]から入手できます。このプロジェクトでは、DSNパラメータを変更することによって、Oracle XEとMySQLデータベースを簡単に切り替えることができます。プロジェクトには必要なすべてのSQLスクリプトが含まれ、コード内に説明があります。ただし、PDO_OCIは試験段階であることに注意してください。

	NetBeans IDEチームは、CSSを提供して、完成したサンプルのコードを改良されたOzan Hazer氏に感謝申し上げます。


	== 次の手順

	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[+このチュートリアルに関するご意見をお寄せください+]


	link:../../../community/lists/top.html[+users@php.netbeans.orgメーリング・リストに登録する+]ことによって、NetBeans IDE PHP開発機能に関するご意見やご提案を送信したり、サポートを受けたり、最新の開発情報を入手したりできます。

	link:../../trails/php.html[+PHPの学習に戻る+]