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のコードが自動的に作成されているのがわかると思います。

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

このエントリーを含むはてなブックマーク Buzzurlにブックマーク livedoorクリップ Yahoo!ブックマークに登録

トラックバック&コメント

この投稿のトラックバックURL:

コメントをどうぞ

このページの先頭へ