10th Developer Camp - B5

Size: px

Start display at page:

Download "10th Developer Camp - B5"

としはるゆきしげ
7 years ago
Views:

1 B5 PHP テクニカルセッション Delphi for PHP で作るリッチコンテンツブログエンバカデロテクノロジーズエヴァンジェリスト高橋智宏アジェンダコンポーネントをフル活用しようお馴染みデータモジュール Blog データの表示用ページ Blog データの登録用ページ 2

& ドロップしかしツールや OS に 100% 依存 Turbo C++ OOP Windows GUI Java Linux OSS

2 コンポーネントをフル活用しよう開発環境の進歩と退化 80 年代の IDE が登場エディタ + コマンドライン型の開発から脱却 IDE( 統合開発環境 ) ビジュアル RAD Visual Basic Delphi C++Builder 90 年代の開発の主流マウスでドラッグ & ドロップしかしツールや OS に 100% 依存 Turbo C++ OOP Windows GUI Java Linux OSS Eclipse 2000 年代の開発の主流フリーのツールやオープンソースの活用でも開発スタイルは 80 年代型!!

3 これまでの PHP 開発環境に欠けていたもの Web デザイン WYSWYG であること AJAX が簡単に利用できるあくまでも目的ではなく手段オープンソースを簡単に活用再利用できるプロプライエタリな世界に留まっていてはいけないコンポーネントアーキテクチャ重厚長大ではいけないしかもオープンソースを活用してこうした点に配慮しつつ 90 年代型の開発生産性を Web 開発にももたらすことが重要 VCL for PHP 5 VCL for PHP 今回利用する VCL for PHP のコンポーネント VCL for PHP JSCalendar 6

4 お馴染みデータモジュールデータベースのセットアップ RDBMS には MySQL 5.0 を利用テーブル構造 : create table blog( ID INTEGER NOT NULL AUTO_INCREMENT, BLOGDATE VARCHAR(10) NOT NULL, TITLE VARCHAR(255) NOT NULL, ARTICLE TEXT NOT NULL, PRIMARY KEY(ID), UNIQUE KEY(BLOGDATE)); 主キーは自動インクリメントを利用する ADOdb をラップした Table コンポーネントでは行追加 (INSERT) 時に主キーを明示的に指定しなくてよい仕様データベース / テーブルの文字コードは utf8 8

OnAfterConnect イベント DB 接続を utf8 にするデータモジュールのインスタンスを返す関数 function GetDBModule() { } $global

{ } GetDBModule()->SaveBlog( 2008/8/20, タイトル, <HTML> ); Blog データを取得 (SELECT) するメソッド public

5 データモジュール!! Database Table CharSet Active Connected LimitCount 9 データモジュールの実装 Database コンポーネントの OnAfterConnect イベント DB 接続を utf8 にするデータモジュールのインスタンスを返す関数 function GetDBModule() { } $global を忘れずに Blog データを保存 (INSERT or UPDATE) するメソッド public function SaveBlog($date, $title, $article) { } GetDBModule()->SaveBlog( 2008/8/20, タイトル, <HTML> ); Blog データを取得 (SELECT) するメソッド public function LoadBlog($date) { } $blog = GetDBModule()->LoadBlog( 2008/8/20 ); ある月の Blog 日の日付の配列を返すメソッド public function GetBlogDays($year, $mon) { } $blogdays = GetDBModule()->GetBlogDays( 2008, 8 ); 10

6 データモジュールの実装 ( 続き ) Database, Table - オープンソースライブラリ ADOdb をコンポーネント化 11 Blog データの表示用ページ

カレンダの表示形式をカスタマイズ今回 Javascript コードを記述しますが MonthCalendar

7 カレンダ機能を追加する MonthCalendar オープンソースライブラリ JSCalendar をコンポーネント化 OnUpdate Javascript イベント日付をクリックしたタイミング OnBeforeShow イベントカレンダの表示形式をカスタマイズ今回 Javascript コードを記述しますが MonthCalendar コンポーネントを継承した拡張コンポーネントを作成して隠蔽すれば再利用可能です Label x 3 個日付タイトル HTML データ 13 Blog データの登録用ページ

8 BASIC 認証の機能を追加する BasicAuthentication BASIC 認証をコンポーネント化 ErrorMessage プロパティ OnAuthenticate イベント戻り値 true or false Execute() メソッドページの OnCreate イベントで呼び出すページの OnShow イベントなどでは遅すぎる!! なぜ? 15 カレンダ機能と隠しフィールド MonthCalendar - Blog データの表示用ページと同じ HiddenField HTML の <input type= hidden > をコンポーネント化編集中のページの日付を HTML に埋め込む [ 保存 ] ボタンをクリック時に編集する Blog の日付をサーバ側で取得 16

Blog を HTML データとして編集する RichEdit オープンソースライブラリ Xinha をコンポーネント化 HTML データを編集可能 Text プロパティで HTML データを文字列として取得 Label - 日付 Edit - タイトル 17 [ 保存 ] ボタンを Ajax 対応にするには VCL for PHP はオープンソースライブラリ Xajax を内蔵 Button

9 Blog を HTML データとして編集する RichEdit オープンソースライブラリ Xinha をコンポーネント化 HTML データを編集可能 Text プロパティで HTML データを文字列として取得 Label - 日付 Edit - タイトル 17 [ 保存 ] ボタンを Ajax 対応にするには VCL for PHP はオープンソースライブラリ Xajax を内蔵 Button の ButtonType プロパティを btnormal にする Button の OnClick イベントは使わない!! Button の OnClick Javascript イベントを使う!! echo で Ajax 用の JavaScript コードを出力 echo $this-> コンポーネント ->ajaxcall( メソッド名 "); Page の UseAjax プロパティを true にセット 18

! 一般的なデザインでは画像ファイルのアップロード専用のページを作成インラインフレームを使って画面の一部として表示 <iframe id="keniframe1_iframe" src="uploadunit.

10 画像ファイルのアップロードと Ajax Upload コンポーネントをページに配置してみる <input type= file > をコンポーネント化しかし Button の OnClick イベントであればファイルデータを取得できるが Ajax を使うとファイルデータは送信されない!! 一般的なデザインでは画像ファイルのアップロード専用のページを作成インラインフレームを使って画面の一部として表示 <iframe id="keniframe1_iframe" src="uploadunit.php" width="185" height="41"></iframe> 19 画像ファイルのアップロードと Ajax( 続き ) VCL for PHP には iframe をラップしたコンポーネントは無い簡単にカスタムコンポーネントを自作できます!! QC#

PowerPoint Presentation

PowerPoint Presentation Webデザイン特別プログラムデータベース実習編 3 MySQL 演習, phpmyadmin 静岡理工科大学総合情報学部幸谷智紀 http://na-inet.jp/ RDB の基礎の基礎 RDB(Relational DataBase) はデータを集合として扱うデータの取り扱いはテーブル (= 集合 ) の演算 ( 和集合, 積集合 ) と同じデータベースには複数のテーブルを作ることができる