// 
//     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の学習に戻る+]