SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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


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

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

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
アクションクラスの実装

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
S2Baseで作るWebアプリケーション連載記事一覧
この記事の著者

ハタ(ハタ)

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/744 2007/04/13 13:02

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング