この記事ではjQueryとCSSで画像にキャプションをつけるためのコードを解説します．HTML上に配置された画像にマウスオーバーした時に，画像のキャプションが表示されるアニメーションをつけていきます．CSSだけでも可能な処理ですが，jQueryを使用してアニメーションをつける方がコードもすっきりと収まります．CSSはその書き方の特性上，かなり読みにくくなってしまいます．「:hover」や「:active」でアニメーションをつけても問題はないですが，アニメーションはjQueryでつける方がいいでしょう．
前回の記事では「mongoose」を使ってデータベースからデータを取得し、ブラウザに表示させましたが、今回はnpm の方で MongoDB が公式で出しているモジュールがあったのでそちらを使用します。
今回は接続から、取得、表示、追加の順に解説します。「/form」のフォームから追加するデータを入力し、「/page_a」で追加したデータの一覧を表示させます。完成イメージは以下の通りです。
続きを読む
前回の記事ではMongoDBのデータベースに接続するところまで作成しました。この記事では実際にデータベースから値を引き出し、ブラウザ上に表示させていきます。データベースにはフォームで値を保存できるようにしたいのですが、今回はデータを直接データベースに格納し、取り出すところをメインとします。ではみていきましょう。
続きを読む
今回は「Express」から「MongoDB」に接続してみたいと思います。MongoD BはMySQLなどのRDBMS(Relational Database Management System)とは違い「NoSQL」と呼ばれるデータベースとなります。
「RDMS」はデータ構造をあらかじめ設定しなければいけないのに対し、「NoSQL」はデータ構造を決めておかなくても良いという特徴があります。また「NoSQL」はSQL言語を必要としないデータベースです。
続きを読む
Node.jsのセッションとは「クライアントごとに情報を保持し続ける機能」のことを指します。このセッションの機能は身近なところでよく使われています。この記事ではセッションの保存、書き込み、読み込みの方法を解説します。
続きを読む
前回の記事では、クエリパラメータを利用してデータを受信しました。今回の記事ではフォームでデータを送信し、送信したデータを画面上に表示させます。フォームによるデータ送信を解説する前に押さえておかなければならない2つのリクエスト方法があります。「GETリクエスト」と「POSTリクエスト」です。まずはそのリクエスト方法について解説した後、フォームの解説を行います。
続きを読む
「Express」でクエリパラメータを取得する方法を解説します。そもそもクエリパラーメータとは何？と思うかもしれません。クエリパラメータの解説も同時に行なって行きます。
続きを読む
この記事では、「index.ejs」によるテンプレートとは別に、「page_a.ejs」を作成して別のページを表示させます。自動生成した直後は「http://localhost:3000/」にアクセスすると、デフォルトページが表示されます。これを「http://localhost:3000/page_a/」にアクセスして別ページを表示させます。
と、その前に、Expressのルーティングの考え方を理解しておきましょう。ルーティング とは、簡単にいうと「どのアドレスにどのような出力をするか」というものです。この仕組みのことをルーティングと呼びます。
続きを読む
