MongoDB
 Computer >> コンピューター >  >> プログラミング >> MongoDB

Node.jsとMongoDBで作るサインアップフォームの実装ガイド

この記事では、名前・メールアドレス・パスワード・電話番号などの入力項目を持つシンプルなユーザーサインアップフォームを作成します。「送信」ボタンをクリックすると、入力されたすべてのユーザー情報がMongoDBデータベースに保存される仕組みです。Node.jsによるWebアプリケーション開発の入門として、ぜひ参考にしてください。

必要なパッケージのインストール

サインアップフォームを作成する前に、以下の依存パッケージがシステムに正しくインストールされていることを確認しましょう。

  • まずはexpressをインストールします。ExpressはHTTPリクエストに応答するためのミドルウェアを設定するために使用される、Node.jsの代表的なWebフレームワークです。

npm install express --save

  • 次に、HTTP POSTデータを読み取るためのbody-parserモジュールをセットアップします。

npm install body-parser --save

  • 最後にmongooseをインストールします。MongooseはNode.jsのMongoDBドライバーの上に構築されたODMライブラリで、データベース操作をより簡単に行えます。

npm install mongoose --save

プロジェクト構成とサンプルコード

  • 以下のファイルを作成し、それぞれ対応するコードをコピー＆ペーストしてください。

    • app.js

    • public フォルダ（新規フォルダを作成し、その中に以下のファイルを配置します）

      • index.html

      • success.html

      • style.css

  • ファイルの準備ができたら、次のコマンドでアプリケーションを起動します。

node app.js

コードスニペット

app.js（サーバー側のメインファイル）

var express=require("express");
var bodyParser=require("body-parser");

const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost:27017/tutorialsPoint');
var db=mongoose.connection;
db.on('error', console.log.bind(console, "connection error"));
db.once('open', function(callback){
    console.log("connection succeeded");
})
var app=express()

app.use(bodyParser.json());
app.use(express.static('public'));
app.use(bodyParser.urlencoded({
    extended: true
}));

app.post('/sign_up', function(req,res){
    var name = req.body.name;
    var email =req.body.email;
    var pass = req.body.password;
    var phone =req.body.phone;

    var data = {
        "name": name,
        "email":email,
        "password":pass,
        "phone":phone
    }
    db.collection('details').insertOne(data,function(err, collection){
    if (err) throw err;
        console.log("Record inserted Successfully");
    });
    return res.redirect('success.html');
})

app.get('/',function(req,res){
    res.set({
        'Access-control-Allow-Origin': '*'
    });
    return res.redirect('index.html');
}).listen(3000)

console.log("server listening at port 3000");

このコードでは、まずMongoDBの「tutorialsPoint」データベースに接続し、接続の成功・失敗をコンソールに出力しています。/sign_upエンドポイントでは、フォームから送信されたPOSTデータを受け取り、「details」コレクションにドキュメントとして挿入した後、成功ページへリダイレクトします。

index.html（サインアップページ）

<!DOCTYPE html>
<html>
<head>
<title> Signup Form</title>
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity=
"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<br>
<br>
<br>
<div class="container" >
<div class="row">
</div>
<div class="main">
    <form action="/sign_up" method="post">
    <h1>Welcome to Tutorials Point - SignUp</h1>
    <input class="box" type="text" name="name" id="name" placeholder="Name" required /><br>
    <input class="box" type="email" name="email" id="email" placeholder="E-Mail " required /><br>
    <input class="box" type="password" name="password" id="password" placeholder="Password " required/><br>
    <input class="box" type="text" name="phone" id="phone" placeholder="Phone Number " required/><br>
    <br>
    <input type="submit" id="submitDetails" name="submitDetails" class="registerbtn" value="Submit" />   <br>
    </form>
</div>
<div class="">
</div>
</div>
</div>
</body>
</html>

このHTMLファイルには、名前・メールアドレス・パスワード・電話番号の4つの入力フィールドを持つフォームが定義されています。各フィールドにはrequired属性が設定されており、未入力のまま送信することはできません。フォームの送信先は/sign_upです。

success.html（登録完了ページ）

<!DOCTYPE html>
<html>
<head>
<title> Signup Form</title>
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity=
"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<br>
<br>
<br>
<div class="container" >
    <div class="row">
    <div class="col-md-3">
</div>
<div class="col-md-6 main">
    <h1> Signup Successful</h1>
</div>
<div class="col-md-3">
</div>
</div>
</div>
</body>
</html>

登録が正常に完了した後に表示されるシンプルな完了ページです。

style.css（スタイルシート）

.main{
    padding:20px;
    font-family: 'Helvetica', serif;
    box-shadow: 5px 5px 7px 5px #888888;
}
.main h1{
    font-size: 40px;
    text-align:center;
    font-family: 'Helvetica', serif;
}
input{
    font-family: 'Helvetica', serif;
    width: 100%;
    font-size: 20px;
    padding: 12px 20px;
    margin: 8px 0;
    border: none;
    border-bottom: 2px solid #4CAF50;
}
input[type=submit] {
    font-family: 'Helvetica', serif;
    width: 100%;
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 16px 32px;
    margin: 4px 2px;
    border-radius: 10px;
}
.registerbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
    opacity: 0.9;
}

グリーンを基調とした洗練されたデザインのスタイルシートです。入力欄には下線スタイルを、送信ボタンには角丸の緑色ボタンを適用しています。

アプリケーションの実行と出力結果

準備が整ったら、Webブラウザで以下のURLにアクセスしてみましょう。登録ページが表示されます。

https://127.0.0.1:3000/index.html または https://localhost:3000/index.html

C:\Users\tutorialsPoint\> node app.js
server listening at port 3000
(node:73542) DeprecationWarning: current URL string parser is deprecated, and will be removed in a future version. To use the new parser, pass option { useNewUrlParser: true } to MongoClient.connect.
(node:73542) [MONGODB DRIVER] Warning: Current Server Discovery and Monitoring engine is deprecated, and will be removed in a future version. To use the new Server Discover and Monitoring engine, pass option { useUnifiedTopology: true } to the MongoClient constructor.
connection succeeded

サインアップページ

Node.jsとMongoDBで作るサインアップフォームの実装ガイド

登録完了ページ

Node.jsとMongoDBで作るサインアップフォームの実装ガイド

MongoDBへのレコード挿入成功

Node.jsとMongoDBで作るサインアップフォームの実装ガイド

補足：非推奨警告への対処法

実行時に「DeprecationWarning」が表示される場合があります。これは古いURL文字列パーサーやサーバー監視エンジンを使用していることを示す警告です。以下のようにオプションを指定することで解消できます。

mongoose.connect('mongodb://localhost:27017/tutorialsPoint', {
    useNewUrlParser: true,
    useUnifiedTopology: true
});

これで、Node.jsとMongoDBを組み合わせた基本的なサインアップフォームの完成です。実際の運用ではパスワードのハッシュ化やバリデーション強化なども検討するとよいでしょう。

  1. PythonでMongoDBを操作する方法|pymongoを使った基本操作入門

    MongoDBは広く利用されているドキュメント指向データベースであり、NoSQLデータベースの一種です。Pythonはpymongoなどのモジュールを介してMongoDBと連携し、データの作成や操作を行うことができます。本記事では、その具体的な方法を解説します。なお、PythonからMongoDBへ接続するには、システムにMongoDBがあらかじめインストールされている必要があります。MongoDBのセットアップ手順については、専用のチュートリアル記事をご参照ください。 pymongoのインストール MongoDBとやり取りするには、pymongoというモジュールが必要です。以下のコマンドを

  2. MongoDBの集約（Aggregation）と投影（Projection）の使い方を解説

    MongoDBの集約と投影とはMongoDBで特定のフィールドだけを抽出しながらデータを加工したい場合、aggregate()メソッドと$projectステージを組み合わせるのが効果的です。$projectは、パイプライン内で指定されたフィールドを持つドキュメントだけを次のステージへ渡す役割を果たします。この記事では、実際にコレクションを作成し、$match・$unwind・$sort・$group・$projectを組み合わせた集約パイプラインの具体的な使い方を解説します。サンプルコレクションの作成まず、insertOne()を使ってドキュメントを含むコレクションを作成します。> db