CodeZine(コードジン)

特集ページ一覧

S2Base.PHP5とS2Dao.PHP5で作るWeb2.0風アプリケーション 後編

S2Baseで作るWebアプリケーション

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2006/12/08 00:00

S2Base.PHP5とS2Dao.PHP5を用いてWeb2.0風のアプリケーションを導入から動作するまで紹介します。後編では、前編で作成した雛形を修正しながらアプリケーションを作成し、実行させて動作を確認します。

目次

はじめに

 前編では環境の導入からプロジェクトの作成、各スケルトンファイルの作成までを行いました。後編ではスケルトンファイルを修正しながら実際のアプリケーションを作成し、実行するまでを説明します。

過去の記事

 S2Base.PHP5とS2Dao.PHP5で作るWeb2.0風アプリケーション 前編

対象読者

  • PHP5を使ってWeb開発をしている方
  • フレームワークの導入を検討する立場にいる方
  • S2Base.PHP5を導入しようと思っている方
  • S2Dao.PHP5を使ったことのある方

必要な環境

 PHP5(必要なバージョンとしてはPHP5.1.6以上を対象とします)

開発環境の準備

 詳細は前編で詳しく書いているので、そちらを参照してください。

画面の作成

 tabeditで使用する画面を作成します。

 最初に表示される画面は「app/modules/tabedit/view/index.tpl」にあるので、それを編集します(後ほど記述する「d.php」で設定されているS2BASE_PHP5_DEFAULT_ACTION_NAMEの定数の値を変更することで、「index.tpl」から別のものへ差し替えることも可能です)。

index.tpl
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
    <head>
        <meta http-equiv="content-type" 
              content="text/html; charset=utf-8" />
        <meta http-equiv="content-style-type"
              content="text/css" />
        <link rel="stylesheet" type="text/css"
              href="css/default.css" />
        <link rel="stylesheet" type="text/css" href="css/tab.css" />
        <script type="text/javascript" src="js/prototype.js"></script>
        <script type="text/javascript" src="js/tab.js"></script>
        <title>tabedit</title>
    </head>
    <body>
        <h1>this is tabedit application</h1>
        <div id="tabContent">
            <form id="MainForm" name="MainForm" method="post">
                <div id="tabIndex">
                    <!-- ここはタブ一覧が表示されます -->
                </div>
                <div id="tabBox">
                    <!-- ここにはタブの内容が表示されます -->
                </div>
                <input type="hidden" id="title" name="title" />
                <input type="text" id="id" name="id" />
                <input type="button" id="get"
                                     value="タブをIDで取得" />
                <input type="button" id="add" value="タブの追加" />
                <input type="button" id="update" 
                                     value="表示しているタブを保存" />
                <input type="button" id="delete" 
                                     value="表示しているタブを削除" />
            </form>
        </div>
    </body>
</html>

 JavaScriptやcssは「public」ディレクトリに作成し、その中へ必要なファイルを作成していきます。

chmod
> mkdir public/js public/css
> cp path/to/prototype.js public/js
> vi public/js/tab.js
> vi public/css/default.css
> vi public/css/tab.css

  • LINEで送る
  • このエントリーをはてなブックマークに追加

あなたにオススメ

著者プロフィール

  • ハタ(ハタ)

    PHPの魅力に取り付かれた一人。 現在はSeasar.PHPとしてSeasar(Java)をPHP5に移植する活動をしている。 http://blog.xole.net/(ブログ)

バックナンバー

連載:S2Baseで作るWebアプリケーション
All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5