ウェブページとモーダル
Webアプリケーションで新しいページやモーダルウィンドウを作成する方法
ほとんどのWebアプリケーションを作成する上で最も重要なステップは、データベースとの連携を整理することです。データベースからどのようにデータを取得するか、ユーザーの画面にどのように表示するか、そしてこのデータをどのように管理し削除するか。
コースの新しいモジュールが専念するのは、これらの質問です。第3モジュールでは、都市や国の情報を記録するためのデータベースを作成し、モデルを設計しました。今度は、このデータベースを使った作業を整理します。次のようなことをしなければならない。
- データベースから情報を出力するためのテーブルを作成する
- データベースにデータを追加する方法と、データを削除する方法を学びます。
- ユーザーフレンドリーなインターフェイスを作成するために、モーダルウィンドウの仕組みを学ぶ
- リンクされたテーブルの仕組みを理解する
ページ
まずは準備の段階から。アプリが大きくなってきて、1ページでは窮屈になってきました。少なくとももう1ページ作成する必要があります。左のメニューに追加しましょう。
作成したページを「World」と呼び、アイコンとわかりやすいURLを設定しましょう。
モーダルウィンドウ
作成したページに新しい国を追加する機能が必要です。そのためには、必要なデータを入力するモーダルウィンドウと、このモーダルウィンドウを開くためのボタンが必要です。
モーダルウィンドウは特別なコンポーネントです。ページ上の特定の場所を占有せず、同時に、コンポーネントのプロパティ（コンポーネントに固有の設定）と新しいページのプロパティ（他のコンポーネントを追加するための独自のキャンバス）を兼ね備えています。モーダルを配置する最も適切な場所は、ページ下部の領域です。モーダル コンポーネントと同様に、緑色でハイライト表示されます。
適切な名前を付けて、ボタンを押すとモーダルウィンドウが表示されるというシンプルな動作を指定する必要があります。
次のステップは、必要なデータを入力することです。前のモジュールで X と Y の値を渡したときに、すでに同様の操作を行いました。今度は、データ型が異なることと、入力フィールドがモーダルウィンドウであることを除いて、同じことを行う必要があります。
データベースには、国に関する最も基本的な情報が記録されています。これは、その名前 (String 型 ) と一般的な説明 (Text) です。これらは、あなたが追加する必要がある入力フィールドです。
