Dreamweaver CS5.5の発売間近

dreamweaver CS5.5がもうすぐ発売になります。cs5の発売から約1年での発売はHTML5やcss3の対応強化やiphoneやAndroidの台頭によるスマートフォンサイトの機能強化を目指したものと考えられます。

dreamweaver CS5.5の新機能

  • CSS3およびHTML5のサポート
  • jQueryの統合
  • phoneGapでAndroidおよびiOSのネイティブアプリケーションを構築
  • Adobe BrowserLabとの連携

以上の4点が主な新機能として紹介されています。私の会社のサイトもスマートフォンサイトに対応したサイトを作成するつもりですので、発売されたら導入してみようと考えています。

Dreamweaverによる動的サイトの作成

さて、皆さんはDreamweaverで簡単にデータベースを利用したサイトを作成できるのをご存じでしょうか。いろいろな書籍を見てもホームページの作成の仕方は事細かに書かれていますが、この辺は申し訳程度しか記載がありません。

そこでこのサイトで数回にわたりdreamweaverでデータベースを利用したPHPサイトの作成方法を紹介していきたいと思います。

データベースの作成

それでは、サイトの作成の前にデータベースを作成します。私が利用しているファイヤバードでの設定方法を説明します。ほかのレンタルサーバーでも基本的にはそんなにかわらないと思います。

①メールアドレスとパスワードを入力してログインします。

②「アカウント管理ツール 」画面で「サーバー管理ツール」をクリックします。わかってしまえば簡単なのですが、最初ここがわからずに焦りました。

③ここがファイヤバードの管理画面です。データベース設定をクリックします。

④データベース設定画面で「MySQL追加」をクリックし、データベース名を入力(今回は、個人のDVD、ブルーレイの管理サイトを作成予定)、文字コードを選択して、確認画面をクリックします。

⑤次の確認画面でよければ「確定する」ボタンをクリックします。するとデータベース設定画面に戻り、新しいデータベースが作成されています。ただし、ここでは権限設定ユーザが作成されていませんので、追加可能ユーザから選択して追加ボタンをクリックすると、新しいデータベースが利用できるようになります。

⑥次に、同じデータベース設定画面で、基本的なテーブルを作成しますので、phpmyadminタブをクリックしてしてください。

⑦phpmyadminの管理画面に移動すると、左側のメニュー箇所に新しく作成されたデータベースがあるはずでので、それをクリックして開いてください

⑧「このデータベースにはテーブルがありません」と表示されますので、テーブル名を入力して、フィールド数を記入します。フィールドは後で追加できますので、とりあえず4つ程度でいいと思います。実行するボタンをクリックすると新しいテーブルが作成されます。

⑨とりあえず下のような設定で新しいテーブルを作成して、保存するをクリックします。

⑩すると新しいテーブルが作成されます。次回はDreamweaverのデータベース接続の設定方法について書いていきたいと思います。

タグ

2011年5月9日 | コメント/トラックバック(0) |

カテゴリー:Dreamweaver 簡単PHP

Dreamweaverで簡単PHPサイト作成(2)

Dreamweaverからのデータベース接続設定

それでは、今日はDreamweaverからのデータベース接続設定をしたいと思います。

①まず最初に、Dreamweaverのメニュー画面からDreameweaverサイト作成の項目をクリックします。

②サイト名(任意)を入力し、保存用のローカルフォルダを指定ししたら、保存ボタンをクリックします。

③サーバーを選択し、「+」ボタンをクリックします。

④サーバーの接続名、ドメイン名、アカウント名、パスワードを入力したら、テストボタンをクリックします。接続が確認されたら保存ボタンをクリックします。

⑤リモート、テストの両方にチェックを入れ、保存をクリックします。

⑥サーバーの設定が決まったら、データベースの接続を設定します。データベースタブを開き、「+」をクリックし、「Mysql接続」をクリックします。

⑦接続名(任意)、Mysqlサーバー名、ユーザー名、パスワードをそれぞれ入力したら、データベースの横の選択ボタンをクリックします。

⑧前回作成したデータベース(Cabinet)を選択し、「Mysql接続」の画面に戻ったら、「OK」ボタンをクリックします。

⑨これで、データベースパネルに前回作成したテーブルが表示されているはずです。

それでは、次回はいよいよ本題(Dreamweaverで簡単PHPサイト作成)に入りたいと思います。

タグ

2011年5月12日 | コメント/トラックバック(0) |

カテゴリー:Dreamweaver 簡単PHP

Dreamweaverで簡単PHPサイト作成(3)

前回作成したデータベース(Cabinet)のテーブル(DVD)は、テーブル構造を定義しただけなので、データは全く入力されていません。phpMyAdminでデータを入力する方法もありますが、せっかくですので、データベースへデータを入力するページから作成することにします。

①Dreamweaverの「ようこそ」画面で新規作成のPHPをクリックします。

Dreamweaverでテーブルの作成

②一般タグのテーブルをクリックします。

③テーブルダイアログボックスでテーブルサイズ(行数、列数、テーブルの幅)を入力し、左ヘッダーを選択。「OK」ボタンをクリックします。サイズも幅も後で変更可能ですので、適当でかまいません。

④テーブルの左側から日付、Title、コメントを入力し、最後の行の2列をドラッグして両方のセルを選択します。下の「選択したセルを結合」ボタンをクリックします。

フォームボタンの作成

⑤結合したセルをクリックして、フォームタブのボタンをクリックします。

⑥属性は特に何も入力しなくてもかまいません。そのまま「OK」をクリックします。

⑦「フォームタグを追加しますか」という注意が出ますが、「いいえ」をクリックします。

テキストフィールドの作成

⑧送信ボタンが作成されました。次に、1行2列目のセルをクリックして、フォームタグのテキストフィールドをクリックします。

⑨同じように「フォームタグを入力しますか」の画面が出ますが、やはり無視して「いいえ」ボタンをクリックすると、カーソルの位置にテキスト入力用のフィールドが作成されます。同じように2行2段目にもテキストフィールドを入力します。

テキストエリアの作成

⑩次の「コメント」は、文章が長くなってもいいように、テキストエリアにします。3行2列目にカーソルを移動したら、フォームタブのテキストエリアをクリックします。

フォームエリアの作成

⑪これで一応データ入力用のテーブルは作成しましたが、このままではデータを送信することができません。テーブルの前にカーソルを移動して、フォームタブのフォームをクリックします。

⑫すると、テーブルのすぐ上に赤い点線の枠でフォームエリアが作成されます。

テーブルをフォームエリアへ移動

⑬テーブルの外枠をクリック(選択)して、「Ctrl+X」(切り取り)、赤い枠(フォームエリア)の中をクリックして、「Ctrl+V」(貼り付け)で、テーブルをフォームエリアの中に移動します。最初にフォームエリアを作成しておくとこの作業は必要ないのですが、後からフォームエリアを作成したいときも結構ありますので、この方法を覚えておいてください。

サーバービヘイビア

⑭次にデータベースのサーバービヘイビアをクリックします。「+」ボタンをクリックすると、メニューが出てきますので、レコードの挿入ボタンをクリックします。

⑮フォーム、データベース、テーブルを選択します。列のTitleをクリックして、それに値を一覧から選びます。今回は値の名前をつけませんでしたので、自動的に名前が作成されています。できれば、データベーステーブルのフィールド名と入力用テキストエリアの名前を同じにしておけば、Dreamweaverが自動的に値を選択してくれます、選択ミスもなくなって楽です。

⑯更新後の移動先は、きちんと入力されたかどうか確認するためにも、一覧画面に移動するようにした方がいいと思います。移動先のページは前もって作成していてください(空白でもかまいません)。「OK」ボタンをクリックすれば、サーバービヘイビアが作成されているはずです。

⑰コードを表示してみれば、PHPのコードが自動的に作成されているのがわかると思います。

次回は入力したデータを表示するページを作成してみたいと思います。

タグ

2011年5月12日 | コメント/トラックバック(0) |

カテゴリー:Dreamweaver 簡単PHP

Dreamweaverで簡単PHPサイト作成(4)

ファイルのアップロード

それでは、前回作成したファイルのアップロードをします。

①ファイルパネルを開き→ローカルビューを選択→ルートフォルダを選択→「ファイルをPUTする」ボタンをクリックします。ついでに中身は空でかまいませんので、DVD_info.php、DVD_list.phpファイルも作成してアップロードしておきます。

データの入力

②アップロードが終了したら、実際にデータを入力してみましょう。URLを直接入力します。http://winroad.ever.jp/DVD_insert.php ちなみに、コメントの箇所は備考に変更しておきましたので、悪しからず。
尚、上記urlはテスト用に使っていますので、今は、実際に入力することができます。後々ページにパスワードをかけるやり方も書いていきたいと思います。

③データが入力されたら、DVD_info.phpのページへ移動します。ただ、DVD_info.phpのページはまだデータが表示できるように作成してませんので、これからデータを表示できるように作成していきます。

マスター詳細ページセット

④マスター詳細ページセットを使えばリスト全体のページと詳細説明のページを自動的に作成できます。DVD_info.phpとDVD_list.phpというページを作成しておきます。この2つのページを作成していない方は作成しておいてください。中身は空白でかまいません。

⑤DVD_info.phpのページを開いて、データを挿入したい箇所をクリックして、挿入タブの「マスター詳細ページセット」をクリックします。

⑥レコードセットの名前を入力し→接続名とテーブル名を選択→ソートを降順にして、テストを入力します。

⑦テストSQLステートメントを見てみると、Titleと日付が逆に入力されています。それに「Content」の内容が文字化けしています。

⑧いったん「OK」ボタンをクリックして、元の画面に戻ったら、キャンセルを2度押して、「マスター詳細ページセット」の前に戻ります。

⑨修正する前に、テキストフィールドの名前も変更しておきましょう。「DVD_insert.php」のファイルを開き、テキストフィールドをクリックします。下のプロパティの名称をデータベースのフィールド名と同じにしておきます。このとき、大文字、小文字もしっかりと同じにしておきます(※PHPでは大文字のファイル名と小文字のファイル名は同じ名前でも別ファイルとして扱います)。

⑩文字化けに関しては、MySQLの文字コードもファイルの文字コードもUTF-8なので、問題はないはずです。Dreamweaverの内部コードの問題でしょうか。不明です。とりあえず先に進みます。

⑪レコードセット作成のところまできたら、今度は「OK」をクリックします。

⑫サーバービヘイビアにレコードセットが作成されているのを確認したら、再度「マスター詳細ページセット」をクリックします。

⑬基本的に入力するのは、詳細ページ名だけでかまわないと思います。ただ、項目数が多いとき、一覧表に全部の項目が出てきては、詳細ページと一覧表のページが内容的に同じになりますので、マスターページは不要な項目は「-」で削除してください。とりあえず[date]を削除しておきます。

それ以外の項目の使い方は後々わかってくると思います。

⑭「OK」ボタンをクリックしたら、サーバービヘイビアとテーブルが自動生成されています。

⑮DVD_list.phpを開いてみても、同じようにサーバービヘイビアとテーブルが自動生成されています。

⑯それでは、実際にブラウザを開いて確認してみましょう。

⑰IDの列の数字をクリックすると、詳細ページへ移動します。

それでは今日はここまでにします。

タグ

2011年5月13日 | コメント/トラックバック(0) |

カテゴリー:Dreamweaver 簡単PHP

Dreamweaverで簡単PHPサイト作成(5)

データ削除のためのページ作成

今日は、間違えて入力したデータを削除するためのページを作成してみたいと思います。

①まず削除用のファイル(Delete.php)を作成します。中身は空でかまいません。そして、DVD_infoのページの下に、削除の文字を入力。それをドラッグして選択(反転)します。

②下のプロパティのリンクの箇所をドラッグするとリンク先を自動的に入力してくれます。直接手打ちする方法と、右のフォルダのアイコンから選択する方法もあります(好きな方法を選んでください)。

③delete.phpを選択し、サーバービヘイビアのレコードの削除をクリックします。

④プライマリーキーをIDにして、削除後の移動先をDVD_info.phpに指定。「OK」ボタンをクリックします。

⑤delete.phpのページのコードをのぞいてみると、PHPが自動生成されています。

⑥さて、これでDVD_list.phpのページから削除の文字をクリックすれば、データは削除されるのでしょうか。いいえ、このままでは削除はされません。なぜなら、これはDVD_list.phpのページからdelete.phpのページへリンクを張っただけなのです。削除するためには、DVD_list.phpのページからdelete.phpのページへ削除するデータのIDを渡してやらなければならないのです。

⑦ソースコードの【<a href=”delete.php】の後に【?=】と入力し、バインディングタブのレコードセットを開き、IDを【delete.php?ID=】の後に、ドラッグします。

⑧すると、【?ID=】の後に、PHPコードが入力されています。

⑨それでは、DVD_listのページに戻って、削除の文字をクリックしてみましょう。

⑩確かに重複していたデータが削除されています。

本日はここまでにします。

 

タグ

2011年5月17日 | コメント/トラックバック(0) |

カテゴリー:Dreamweaver 簡単PHP

Dreamweaverで簡単PHPサイト作成(6)

データ更新(訂正)用のページ作成

今日は、データ更新用のページを作成したいと思います。更新用のフォームを一から作成するのは面倒ですので、DVD_insert.phpのページを使い回ししたいと思います。

①DVD_inseri.phpのページを開いて、ファイル→別名で保存をクリックします。

②DVD_update.phpの名前で保存します。

③保存したら、フォームの下にあるhidden(非表示フィールド)を削除します。

④更新するデータを紐付けするためにID用の行を作成します。カーソルを日付フィールドに移動して、右クリック→テーブル→行の挿入とクリックしていきます。

⑤挿入した1行1列目に表題をIDと入力し、1行2列目にカーソルを移動します。フォームタブの非表示フィールドボタンをクリックします。

⑥非表示フィールドが挿入されたら非表示フィールド名を「ID」に変更します。

⑦サーバービヘイビアのレコードの更新をクリックします。

⑧データベースのフィールド名と入力フォームのフィールド名を全く同じにしておけば、対応する値はDreamweaverが自動的に割り当てます。更新後の移動先(DVD_info.php)を入力して、「OK」ボタンをクリックします。

⑨次に、バインディングのレコードセット(クエリー)をクリックします。

⑩「フィルター」で【ID】、条件を【=(完全一致)】を選択します。比較方法は【URLパラメーター】で比較対象は【ID】とします。「OK」ボタンをクリックします。

⑪作成されたレコードセットの【ID】を1行2列目にドラッグすると、{Recordset1.ID}というコマンドが作成されます。

⑫続けてID以外の箇所もそれぞれドラッグします。

⑬ついでにボタンの名前も変更しておきましょう。送信ボタンをクリックして、プロパティの【送信】の文字を【更新】に変更しましょう。

⑭さて、これで完成でしょうか。いいえ大事なことが抜けています。最初にドラッグした⑪の{Recordset1.ID}は表示のためのコマンドです。肝心のデータ(ID)を送信するためには、hiddenフィールドの中に入れなければなりません。

⑮なぜ、IDをテキストフィールドではなくhiddenフィールドにしたのかわかりますでしょうか。IDをテキストフィールドにしておくと、間違ってIDを書き換えてしまう可能性があります。すると、全く別のデータが誤って更新される可能性があるのです。そのためIDはhiddenフィールドにして送信するのが基本です。

⑯それでは、DVD_update.phpを実際に使用するための設定をしましょう。まず、DVD_list.phpのページに削除と同じように更新用のリンクを作成します。

⑰次も削除と同じように、【<a href=”DVD_update.php】の後に、【?ID=】を入力して、レコードセットのIDをドラッグしてきます。

⑱これで、一応完成です。それでは実際に使用してみましょう。DVD_info.phpのページで訂正するデータのIDをクリックします。

⑲更新のリンクをクリックします。

⑳訂正して「更新」ボタンをクリックします。

㉑修正されているのが確認できると思います。

以上で本日は終わります。ご苦労様でした。

タグ

2011年5月18日 | コメント/トラックバック(1) |

カテゴリー:Dreamweaver 簡単PHP

Dreamweaver CS5.5発売

Dreamweaver CS5.5が発売されました

新しもの好きの私は、早速渋谷のビックカメラで購入してきました。今日から『Dreamweaverで簡単PHPサイト作成』は、CS5.5で作成していきたいと思います。

尚、同じ名前のカテゴリが増えたので、カテゴリも作り直しました。Dreameweaverの新機能もそのうち紹介したいと思います。

検索用のページ作成

今日は、検索のページを作成していきたいと思います。検索のページは検索用のページと検索結果のページを別々に作る方法と検索と検索結果を同じページに表示する方法があります。それぞれ説明していきたいと思います。

①それでは、検索ページ(DVD_search.php)と検索結果ページ(DVD_search_result.php)を先に作っておきましょう。いつもと同じように中身は空でかまいません。

②まず、DVD_search.phpのファイルを開き、フォームタブのフォームをクリックして、フォームを作成します。

③作成されたフォームの中をクリックし、一般タブのテーブルをクリック。テーブルの行と列を入力、ヘッダーを選択し、「OK」をクリックします。

④作成されたテーブルの1行目に表題を入力、2行目にカーソルを移動。フォームタブのテキストフィールドをクリックし、出てきたダイアログのIDに【Title】と入力し、「OK」をクリックします。

⑤作成されたテキストフィールドの右にカーソルを移動し、フォームタブの「ボタン」をクリックします。出てきたダイアログの「OK」をクリックします。

⑥検索ページがわかりやすいように「送信」ボタンをクリックし、プロパティの「値」を【検索】に変更しておきましょう。

⑦フォーム全体をタグセレクタを使って選択し、アクションに検索結果を表示するページ(DVD_serach_result.php)を指定します。メソッドは「POST」でも「GET」でも可能ですが、今回は「GET」で送信します。

⑧次に、検索結果のページを作成します。検索結果のページ(DVD_search_result.php)を開き、「バインディング」パネルの「+」をクリックして「レコードセット(クエリー)」を選択します。

⑨「名前」を入力し、「接続」「テーブル」を選択します。「フィルター」は検索条件の【Title】を指定し、曖昧検索の【を含む】を選択します。ソートは検索後にわかりやすいように(複数検索した場合見つけやすいように)自分で決めてください。「OK」をクリックします。

⑨レコードセットが作成されたら、データを表示するためのテーブルを作成します。「一般」タブの「テーブル」をクリックし、2行4列でテーブルを作成します。

⑩「バインディング」パネルから、テキストを表示する項目をページにドラッグします。

⑪2行目をすべて選択し、「サーバービヘイビア」タブの「+」をクリックし、リピート領域を選択します。

⑫レコードセットを選択し、表示回数を入力。「OK」をクリックします。

現状では、レコードセットは一つしかありませんので、別段選択する必要はありませんが、複雑なページを作成する場合、1ページにレコードセットが3つ、4つという可能性もありますので、レコードセット名はわかりやすい名前にしておいた方がいいです。

⑬2行目の上のほうに「リピート」の文字が表示されているはずです。

途中ですが、今日は時間がないのでここまでにします。続きはまた後日。

急いで書いたので、間違えている箇所があるかもしれません。後日見直します。悪しからず。

タグ

2011年5月21日 | コメント/トラックバック(0) |

カテゴリー:Dreamweaver 簡単PHP

DreamweaverでPHP 検索ページ作成2

前回の続きを書きたいと思います。前回は、検索結果ページのリピートを作成したところまでです。

ナビゲーションの挿入

検索した場合、検索結果の数が少ないときは問題ないのですが、検索結果がリピート回数より多い場合は、表示されません。そのため検索結果の前後を表示するためのナビゲーションを挿入する必要があります。

①テーブルの下にカーソルを移動して、「データ」タブの「レコードセットナビゲーションバー」を選択します。

②ナビゲーションバーが表示されます。続いて、ナビゲーションバーの下にカーソルを移動して、「レコードセットナビゲーションステータス」をクリックします。

③レコードセットを確認して、「OK」ボタンをクリックします。

④これで、ナビゲーションバーとナビゲーションステータスが完成しました。

ブラウザで確認

それでは実際にブラウザで確認してみましょう。

①http://winroad.ever.jp/DVD_search.phpのページを開き、「愛」と検索してみましょう。

②『愛』という文字を含んだタイトルの映画が全6件のうち5件が表示されています。「ナビゲーションバー」の「次へ」をクリックすると、残りの検索結果が表示されます。尚、検索の都合上、前回の設定(検索表示数を10から5に変更)を一部変更しています。

本日はここまでにします。

タグ

2011年5月24日 | コメント/トラックバック(1) |

カテゴリー:Dreamweaver 簡単PHP

DreamweaverでPHP 検索ページ作成3

検索窓と検索結果を同じページに表示

今回は、データの検索窓と検索結果を同じページ内に配置する方法を書いていきたいと思います。

①まず、以前作成した検索用のページ(search.php)をコピーして、search_and_result.phpという名前のページを作成します。

②作成したページの検索窓テーブルの下にカーソルを移動して、一般タブのテーブルをクリックします。2行4列のテーブルを作成したら、1行目に項目名を記入します。

③サーバービヘイビアのレコードセットをクリックします。

④名前(任意)を決め、接続先とテーブルを選択します。フィルターを「Title」にし、検索条件を曖昧検索の「を含む」にします。比較方法を今回はフォーム変数にして、比較対象を「Title」にします。「OK」ボタンをクリックします。

⑤バインディングを開き、レコードセットの各項目を該当の箇所へドラッグします。

⑥タグセレクターの「form#form1」をクリックし、「プロパティインスペクタ」のアクションのファイル名を削除して、メソッドを「GET」にします。

③次に前回と同じようにレコードセットナビゲーションバーを挿入します。検索結果表示用テーブルの下にカーソルを移動し、データタブのレコードセットナビゲーションバーをクリックします。

④レコードセットを選択。表示方法を今回はイメージにしてみます。「OK」ボタンをクリックします。

⑤次にレコードセットナビゲーションステータスをクリックします。ダイアログボックスが表示されたら「OK」をクリックします。

⑥検索結果テーブルの2行目を選択し、サーバービヘイビアのリピート領域をクリックします。

⑦レコードセットを選択し、表示件数を入力(今回は5にします)。「OK」ボタンをクリックします。

⑧これで一応完成です。それでは、実際に試してみましょう。『愛』と入力して検索ボタンをクリックして、検索結果が表示されたらOKです。

⑨尚、前回は指摘しなかったのですが、この検索結果のページには重大な欠陥があります。検索窓に何も入力しないで、検索ボタンを押してみましょう。するとすべてのデータが表示されます。わざとそうしたいのなら別ですが、すべてのデータが表示されるというのは、まずいので多少の手直しをします。

NULL値検索の修正

①サーバービヘイビアのレコードセットをクリックして、レコードセットダイアログボックスが表示されたら、「詳細設定」をクリックします。

②SQL文を多少いじりますが、そんなに難しくはありませんので、覚えてください。

③3行目の『WHERE Title LIKE %colname%』のあとに『AND colname is not NULL』と入力して、『OK』をクリックします。

④これで、何も検索値を入力していないのに検索結果が返ってくることはなくなりました。只、値が何もないのに検索結果のテーブルが表示されるのは、見た目が悪いので、検索結果が何もないときは検索結果テーブルは表示されないようにしましょう。

⑤タグセレクターでテーブル全体を選択し、サーバービヘイビアの領域の表示→レコードセットが空でない場合に表示とクリックします。出てきたダイアログボックスのレコードセットを選択し、「OK」をクリックします。

これで、検索結果が空の場合はテーブルが表示されないようになります。以上、本日はここまでにします。

タグ

2011年5月25日 | コメント/トラックバック(5) |

カテゴリー:Dreamweaver 簡単PHP

このページの先頭へ