HOME / Docs & Support

PHP を使用するデータベース駆動型アプリケーションの作成

レッスン 8: CSS テクノロジを使用したアプリケーションの外観の改良

チュートリアルの目次:

このレッスンでは、次のことを行う方法を学習します。

JavaScript 関数を実装して、入力フォームが使用されていないときに非表示にする
空のセルを持つ表の外観を改良する
階層式スタイルシートを適用して、ページ要素のスタイルと位置を定義する
div を使用してアプリケーションのデザインを実装する

現在のドキュメントは、PHP チュートリアル「NetBeans IDE for PHP での CRUD アプリケーションの作成」の一部です。

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

MySQL ユーザー: 前のレッスンが完了したあとのプロジェクトの状態を反映したソースコードをダウンロードするには、ここをクリックします。

Oracle データベースユーザー: 前のレッスンが完了したあとのプロジェクトの状態を反映したソースコードをダウンロードするには、ここをクリックします。

フォームの非表示

現時点で、アプリケーションのメインの index.php ページには、常にログオンおよび showWishList フォームの全体が表示されます。アプリケーションの外観を改良するには、フォームを非表示にしてボタンに置き換えることができます。ユーザーがボタンを押すと、対応する非表示フォームが拡張されます。

この動作を実装するには、次の手順に従います。

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

ログオンフォームに、次の style 属性を追加します。
```
<form name="logon" action="index.php" method="POST" 
        style="visibility:<?php if ($logonSuccess) echo "hidden";
        else echo "visible";?>">
```
style 属性は、フォームが非表示か可視かを定義します。<?php ?> ブロックは、ユーザーが正常にログオンするまでフォームを可視のままにするために使用されます。
ログオン入力フォームコードの上に、次のコードを入力します。
```
 <input type="submit" name="myWishList" value="My Wishlist >>" onclick="javascript:showHideLogonForm()"/>
```
このコードは、「My Wishlist >>」というテキストを持つボタンを実装します。ログオンフォームの代わりにボタンが表示されます。ボタンを押すと、showHideLogonForm 関数が呼び出されます。

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>

wishList フォームの上に、次のコードを入力します。

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

次のコードはすでにボタンにあるので、フォームから削除します。
```
Show wishlist of: 
```

階層式スタイルシートを使用したスタイルの定義

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

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

CSS ファイルの作成

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

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

CSS スタイルの定義

NetBeans IDE には、スタイルを定義できる、使いやすいスタイルビルダーコード生成ツールが用意されています。リストから適切な設定を選択し、「プレビュー」領域でサンプルテキストの表示を評価します。スタイルを実装するコードは、自動的に生成されます。スタイルに対して行なった変更はすぐに反映されるため、アプリケーションの外観を好みに合わせて調整できます。

wishlist.css ファイルを開きます。ファイルには、削除可能な「root」クラスがすでに含まれています。ここから入手できるこのチュートリアルの完成したバージョンをダウンロードすることによって、wishlist.css のコピーを取得できます。コードは直感的に分かりやすく、また、次のものが含まれています。

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

HTML の div を使用したデザインの実装

アプリケーションのデザインに関する推奨および提案は、すべて任意です。前出のスタイルの定義と同じように、アプリケーションの外観を改良する方法の例を示しているだけです。

次の例で、index.php ページの外観を改良する方法を示します。

定義した CSS クラスを使用できるようにするには、次のコードを <head></head> ブロック内に入力します。
```
     <link href="wishlist.css" type="text/css" rel="stylesheet" media="all" />
```
スタイル「body」と「input」は対応するタグ内に自動的に適用されるため、明示的に指定する必要はありません。

別のスタイル (クラス) を領域に適用するには、領域を実装するコードを <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> タグの内部で指定されている場合、前にドットを置く必要はありません。

次の埋め込み <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 チームは、CSS を提供され、完成したサンプルのコードを改善された Ozan Hazer 氏に感謝申し上げます。