検索
ホームページウェブフロントエンドCSSチュートリアル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 上級チュートリアル (5): Web ページでデータベースを使用する方法

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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


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

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

データを追加します 击 お気に入りテーブルをダブルクリックし、データなしの空のテーブルを開きます

対応するフィールドにデータを入力します、IDはデータを必要としません WebMatrix 上級チュートリアル (5): Web ページでデータベースを使用する方法

合計 4 つのレコードになりました WebMatrix 上級チュートリアル (5): Web ページでデータベースを使用する方法

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

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

、、スタイリング、ボディなど。新しい CSTHML ページを作成し、名前を付けます。 datamovies.cshtml.

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>

静的リストには 5 つのコンテンツが必要な場合、データベース内のデータが 1 つ追加される必要があります。ページにプッシュされます。ページはデータベースにレコードがいくつあるかを知りません。そのため、N
  • が生成されるため、ループで追加する必要があります

    まず、ページに次のことを伝えましょうdatamovies.cshtml の先頭にデータベース情報を追加します。

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

    「@」は、Razor エンジンが実行する必要があるコードを表します。この構文は、Java、C++ などのプログラミング言語でよく知られています。 、C、または C#


    この時点で、コードは次のようになります。

    @{  
           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>

    データベースからデータを取得しましたが、ページには静的なコンテンツが表示されたままです。まず、、1 つだけ残します

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

    Razor エンジンを使用してループにデータを追加します。ページに移動して @foreach

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

    これでコードが表示されます。この効果は 4 つあります。データベース内のレコードは合計 4 回循環されました


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

    しかし、データベース内のコンテンツを取得できませんでした。コードを次のように変更する必要があります。 このようにして、クエリされたデータを取得できます

    WebMatrix 上級チュートリアル (5): Web ページでデータベースを使用する方法今度はデータベースに別のデータを追加し、合計 5 つのデータがあります


    ページを開きます再度、5つのデータのリストが表示されます

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

    上記は、WebMatrix の上級チュートリアル (5): Web ページでデータベースを使用する方法です。さらに関連する内容については、PHP 中国語 Web サイト (www.php.cn) に注目してください。



  • 声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    cohost.orgの失われたCSSトリックcohost.orgの失われたCSSトリックApr 25, 2025 am 09:51 AM

    この投稿では、Blackle Moriは、CohostのHTMLサポートの限界を押し広げようとしている間に見つかったハックのいくつかを示します。あえてこれらを使用してください、あなたもCSS犯罪者とラベル付けされないようにしてください。

    カーソルの次のレベルCSSスタイリングカーソルの次のレベルCSSスタイリングApr 23, 2025 am 11:04 AM

    CSSを備えたカスタムカーソルは素晴らしいですが、JavaScriptを使用して次のレベルに物事を引き出すことができます。 JavaScriptを使用して、カーソル状態間で移行し、カーソル内に動的テキストを配置し、複雑なアニメーションを適用し、フィルターを適用できます。

    Worlds Collide:スタイルクエリを使用したキーフレーム衝突検出Worlds Collide:スタイルクエリを使用したキーフレーム衝突検出Apr 23, 2025 am 10:42 AM

    2025年には、互いに互いに跳ね返る要素を伴うインタラクティブなCSSアニメーションは、CSSにPongを実装する必要はありませんが、CSSの柔軟性とパワーの増加はLee&#039;の疑いを補強します。

    UI効果にCSSバックドロップフィルターを使用しますUI効果にCSSバックドロップフィルターを使用しますApr 23, 2025 am 10:20 AM

    CSSバックドロップフィルタープロパティを使用してユーザーインターフェイスをスタイルするためのヒントとコツ。バックドロップフィルターを複数の要素間でレイヤー化する方法を学び、それらを他のCSSグラフィカル効果と統合して、精巧なデザインを作成します。

    微笑んでいますか?微笑んでいますか?Apr 23, 2025 am 09:57 AM

    まあ、SVG&#039;の組み込みのアニメーション機能は、計画どおりに非推奨されることはありませんでした。確かに、CSSとJavaScriptは負荷を運ぶことができる以上のものですが、以前のようにSmilが水中で死んでいないことを知っておくのは良いことです

    「かわいい」は見る人の目にあります「かわいい」は見る人の目にありますApr 23, 2025 am 09:40 AM

    イェーイ、テキストワラップのジャンプを見てみましょう:サファリテクノロジーのプレビューにかなり着陸してください!しかし、それがChromiumブラウザーでの仕組みとは異なることに注意してください。

    CSS-Tricks XLIIIを記録しますCSS-Tricks XLIIIを記録しますApr 23, 2025 am 09:35 AM

    このCSS-Tricksアップデートは、アルマナック、最近のポッドキャスト出演、新しいCSSカウンターガイド、および貴重なコンテンツを提供するいくつかの新しい著者の追加の大幅な進歩を強調しています。

    Tailwind&#039;の@Apply機能は、響きよりも優れていますTailwind&#039;の@Apply機能は、響きよりも優れていますApr 23, 2025 am 09:23 AM

    ほとんどの場合、人々はTailwind&#039;の@Apply機能を紹介します。このように展示されたとき、@Applyはまったく有望な音をしません。だからobvio

    See all articles

    ホットAIツール

    Undresser.AI Undress

    Undresser.AI Undress

    リアルなヌード写真を作成する AI 搭載アプリ

    AI Clothes Remover

    AI Clothes Remover

    写真から衣服を削除するオンライン AI ツール。

    Undress AI Tool

    Undress AI Tool

    脱衣画像を無料で

    Clothoff.io

    Clothoff.io

    AI衣類リムーバー

    Video Face Swap

    Video Face Swap

    完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

    ホットツール

    SAP NetWeaver Server Adapter for Eclipse

    SAP NetWeaver Server Adapter for Eclipse

    Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

    DVWA

    DVWA

    Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

    SublimeText3 Mac版

    SublimeText3 Mac版

    神レベルのコード編集ソフト(SublimeText3)

    メモ帳++7.3.1

    メモ帳++7.3.1

    使いやすく無料のコードエディター

    VSCode Windows 64 ビットのダウンロード

    VSCode Windows 64 ビットのダウンロード

    Microsoft によって発売された無料で強力な IDE エディター