前回はNode.JSでsqlite3をつかう方法を紹介しましたが、今回は簡易掲示板のようなものをつくります。

⇒ 動作確認はこちらから

Node.JSとsqlite3で簡易掲示板もどきを作る

まずnpmでexpressとejsをインストールします。

そしてindex.ejs、new_update.ejs、err.ejsというファイルを作成します。

index.ejs

new_update.ejs

err.ejs

ローカルサーバーを立てる

まずはローカルサーバーを立てます。これでhttp://localhost:65003/でアクセスできます。

index.js

トップページにアクセスされたときの処理

トップページにアクセスされたらこれまでに登録されているデータを表示します。

select * from table_postsでテーブルからすべてのレコードを取得して表示させます。

index.js

新しくデータを登録する処理

次に新しくデータを登録する処理を示します。トップページに./newpostへのリンクがあるので、これをクリックしたら新規投稿のページを表示させます。

投稿されたデータを更新するときも同じnew_update.ejsを使います。更新するときはすでに投稿されているデータを表示させます。新規投稿のときはなにも登録されていないので空欄ですが、名前の部分は「名無しさん」にしておきます。

index.js

新規投稿ページの[送信する]ボタンがクリックされたらPOSTで送られたデータ処理をおこないます。長文の書き込みが行なわれると困るので、送信データのサイズは5KB以内に制限しています。制限を超えた場合は「送信データのサイズは5KB以内にしてください」と表示させるとともに、is413フラグをセットしてデータベースへの登録ができないようにします。

is413フラグがfalseの場合はデータベースにデータを登録してトップページにリダイレクトします。すると登録されたデータ、名前と投稿文、投稿時刻と更新時刻(新規投稿の場合は両者は同じ時刻になる)が一番下に表示されます。

index.js

更新の処理

次に更新の処理を示します。投稿者の名前の横に[更新 削除]というリンクがあります。urlはhttp://localhost:65003/update<id>です。/update<id>にアクセスされた場合はデータ更新用のページを表示させます。これは新規投稿のページと同じnew_updateを使っています。ページタイトルと送信ボタンをおしたらどこにPOSTリクエストされるのかが違います。そして最初に更新対象になるデータ(投稿者名と投稿文)を表示させます。

またデータベース内にidが同じものが見つからない場合(ページ内のリンクをクリックするのではなく、ユーザーが自分でurlをブラウザに入力した場合など)は「404 ページが見つからない」というエラーメッセージを表示させます。

index.js

送信ボタンをおしたら同じページにPOSTされます。その処理を示します。

ここでも送信データのサイズは5KB以内に制限します。制限を超えた場合は「送信データのサイズは5KB以内にしてください」のメッセージが表示され、データベースの更新はおこなわれません。正常に処理がおこなわれるときは、新しい投稿者名、投稿文でデータベースの更新がおこなわれます。また最終更新時刻も更新処理がおこなわれた時刻に変更されます。最後にトップページにリダイレクトします。

index.js

削除の処理

削除の処理を示します。投稿者の名前の横にある[削除]のリンクがクリックされたらデータベースから投稿を削除します。urlはhttp://localhost:65003/delete<id>です。データベース内にあるidが同じものが削除されます。そして処理が終わったらトップページにリダイレクトされます。

index.js

存在しないページにアクセスしたとき

最後に存在しないページにアクセスしたときの処理を示します。この場合は「404 ページが見つからない」と表示させます。

index.js

とりあえず完成!

⇒ 動作確認はこちらから