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

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

このページの内容は、NetBeans IDE 7.2、7.3、7.4および8.0に適用されます

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

現在のドキュメントは、PHP向けのNetBeans IDEでのCRUDアプリケーションの作成というPHPチュートリアルの一部です。


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

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

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

フォームの非表示

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

この動作を実装するには:

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

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

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

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

CSSファイルの作成

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

CSSスタイルの定義

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

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

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

Cascading Style Sheet (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氏に感謝申し上げます。

次の手順

<< 前のレッスン

次のレッスン>>

チュートリアルのメイン・ページに戻る



メーリング・リストに登録することによって、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