WebMatrix 上級チュートリアル (5): Web ページでデータベースを使用する方法

はじめに: Microsoft WebMatrix は、インターネット上で Web サイトを作成、カスタマイズ、公開するために使用できる無料のツールです。

WebMatrix を使用すると、ウェブサイトを簡単に作成できます。オープン ソース アプリケーション (WordPress、Joomla、DotNetNuke、Orchard など) から始めることができ、WebMatrix がアプリケーションのダウンロード、インストール、構成のタスクを処理します。または、すぐに始めるのに役立つ多くの組み込みテンプレートを使用して、自分でコードを作成することもできます。どちらを選択しても、WebMatrix は、Web サーバー、データベース、フレームワークなど、Web サイトの実行に必要なものをすべて提供します。 Web ホストで使用するものと同じスタックを開発デスクトップで使用することで、Web サイトをオンラインにするプロセスが簡単かつスムーズになります。
http://web.ms/webmatrix からダウンロードできます。
WebMatrix、CSS、HTML、HTML5、ASP.NET、SQL、データベースなどの使い方と、簡単な Web アプリケーションの作成方法をわずか数時間で学ぶことができます。内容は次のとおりです:
これまで、WebMatrix を使用して HTML Web ページを作成する方法、カスケード スタイル シート (CSS) を使用して Web ページを効果的にスタイル設定する方法、WebMatrix に組み込まれているレイアウト機能と「Razor」を使用する方法を学習しました。 " 構文を使用して注意を集中させます。他の雑事から気を散らすのではなく、Web ページのコンテンツに集中します。

この章では、既に使用している静的なムービーリストを動的に変換する方法を説明します。実際には、HTML で映画のリストを手動で記述する代わりに、映画のリストをデータベースに置き、WebMatrix にそのデータベースを読み取って HTML を生成させます。このようにして、データベースに簡単に変更を加えたり、Web ページを自動的に更新したりできます。

WebMatrix でデータベースを作成する

まず、WebMatrix で「データベース」ワークスペースを見つけて開きます。ウィンドウの中央に「サイトにデータベースを追加」オプションが表示されます。

このオプションを選択すると、WebMatrix は「Movies.sdf」という名前の新しいデータベースを作成します。 Web サイトの名前が「foo」など異なる場合、WebMatrix はその名前に基づいてデータベースを作成します (つまり、foo.sdf)。

ウィンドウの左側にあるデータベース エクスプローラーにデータベースが表示されます:

データベースにテーブルを追加します

ウィンドウの上部に、実行できる内容を示すツール リボンが表示されます。データベースを使用して、テーブルやクエリの作成、他のデータベースへの移行など、さまざまな操作を実行します。このリボンから、[新しいテーブル] ツールを選択します。選択しても何も起こらない場合は、データベース エクスプローラーで Movies.sdf を選択していることを確認してください。

WebMatrix がテーブルを作成し、列エディターを開きます。これにより、データベース テーブルに新しい列を作成できるようになります。データベース用語では、レコードは特定のエンティティのすべてのデータを指します。したがって、たとえば、個人のデータは、名前、年齢、住所、電話番号の記録である可能性があります。列は、どのレコードに存在するかに関係なく、データの個々の部分の値です。したがって、上の例では、Name と Age が列になります。

そこで、私たちのムービーでは、以下のようなデータベースを作成します:

まず、IDを作成します。 ID は特定のレコードの識別子です。特にこのような単純なデータベースの場合、ID を持っている必要はありませんが、ID を作成することをお勧めします。より複雑なデータベースを構築すると、それらがデータの追跡とクエリにとって重要であることがわかります。

下の画像に示すように、列エディターで詳細を入力します:

これにより、列に「id」という名前が付けられ、値( Null を許可を False に設定します)。次に、そのフィールドを ID として指定します。これは、このフィールドを ID として使用していることをデータベースに伝えることを意味します。この利点は、データベースに新しいレコードを追加するたびに ID が自動的に更新されるため、最新の追加を追跡し、その ID を取得し、新しいレコードを特定することを心配する必要がないことです。

ここで、このフィールドが主キーであることを示します。繰り返しますが、「主キー」はデータベース用語です。キーは特別な値を持つデータベース内の列であり、通常はレコードを選択するときに主に使用します。データベースは、データの検索を簡素化するためにこれらを使用します。たとえば、職場で従業員番号が割り当てられている場合があります。この番号を使用すると、特に従業員が多い企業の場合、番号「333102」を検索する方が、従業員「Nizhoni Benally」を検索するよりもはるかに簡単になるため、追跡が簡単になります。これにより、従業員番号があなたを見つけるためのキーとなります。データ内では多くのキーを使用できますが、主キーが最も重要であると考える必要があります。

そこで、データベースに動画を記録するときに、各動画に ID を付与し、それを主キーとして設定します。

リボンの「新しい列」ボタンを使用して、さらに 3 つの列を作成します。テーブル内に 3 つの名前のない空白の列が表示されます。

最初の空白行を選択し、「Name」という名前を付け、データ型を「ntext」に設定します。 「Is Identity」と「Is Primary Key」が False であることを確認してください。

2 番目の空白行には、「Release Year」という名前を付け、データ型を「bigint」のままにします。

3 番目の空白行には、「Genre」という名前を付け、データ型を「ntext」のままにします。

WebMatrix タイトル バーの [保存] ボタンをクリックします

ダイアログ ボックスが表示され、テーブル名を入力し、「お気に入り」という名前を付けます

[OK] をクリックすると、新しく作成されたテーブルが表示されますフォームの左側に表示されます

対応するフィールドにデータを入力します、IDはデータを必要としません

合計 4 つのレコードになりました

データを使用して Web ページを作成します

先ほど、Web サイトが HTML を含むレイアウトを使用していることを見ました。

datamovies.cshtml コンテンツを静的コンテンツに置き換えます

<div id="movieslist">  
      <ol>  
        <li><a href="#">It&#39;s a wonderful life</a></li>  
        <li><a href="#">Lord of the Rings</a></li>  
        <li><a href="#">The Fourth World</a></li>  
        <li><a href="#">The Lion King</a></li>  
      </ol>  
    </div>

@{  
      var db= Database.Open("Movies");  
      var sqlQ = "SELECT * FROM Favorites";  
      var data = db.Query(sqlQ);  
    }

@{  
       var db= Database.Open("Movies");  
       var sqlQ = "SELECT * FROM Favorites";  
       var data = db.Query(sqlQ);  
     }  
     <div id="movieslist">  
       <ol>  
         <li><a href="#">It&#39;s a wonderful life</a></li>  
         <li><a href="#">Lord of the Rings</a></li>  
         <li><a href="#">The Fourth World</a></li>  
         <li><a href="#">The Lion King</a></li>  
       </ol>  
     </div>

<ol>  
       <li><a href="#">It&#39;s a wonderful life</a></li>  
     </ol>

<ol>  
     @foreach(var row in data)  
       {  
         <li><a href="#">It&#39;s a wonderful life</a></li>  
       }  
     </ol>