Blockchain code Metaverse VR

Crypto×VR×SmartContract(451)

スポンサーリンク

//tips

//smart contract

掲示板アプリ作成に伴うindex.ejsの生成。ローカルストレージへの対応を組み込んでいる。

<!DOCTYPE html>
<html lang="ja">

<head>
<meta http-equiv="content-type"
content="text/html; charset=UTF-8">
<title>ミニメッセージボード</title>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" crossorigin="anonymous">
<%# ローカルストレージからIDの値を取り出し、それに応じて処理 %>
<script>
function init(){
//localStorage.getItemで引数にキーを指定して呼び出し
//キーと値をペアで保存されているのでキーを指定すれば値も取得できる
var id=localStorage.getItem('id');
//idがなければログインページへ
if(id==null){
//現在表示されているページはlocationオブジェクトのhrefという値で設定されている
location.href='./login';
}
//idを取り出せた場合、その値を設定
document.querySelector('#id').textContent='ID:'+id;
//form内の非表示フィールドvalueへの値設定
//どのIDクライアントのform送信かわかるようにするため
document.querySelector('#id_input').value=id;
}
</script>
</head>

<body class="container" onload="init();">
<header>
<h1 class="display-4">メッセージボード</h1>
</header>
<div role="main">
<p>※メッセージは最大10個まで保管されます。</p>
<form method="post" action="/">
<p id="id"></p>
<input type="hidden" id="id_input" name="id">
<div class="form-group">
<label for="msg">Message</label>
<input type="text" name="msg" id="msg" class="form-control">
</div>
<input type="submit" value="送信" class="btn btn-primary">
</form>

<table class="table">
<% for(var i in data){ %>
<%- include('data_item',{val:data[i]}) %>
<% } %>
</table>
</div>
</body>
</html>

次にテーブルのテンプレート作成。

<%# メッセージテーブルに使用するパーシャルテンプレート作成 %>
<%# dataより抽出されたものをincludeからこちらに値を送りテンプレートを作成させる %>
<%# 値はjson形式のためjsオブジェクトに変換する必要がある %>

<% if(val !=''){ %>
<% var obj=JSON.parse(val); %>

<tr>
<th><%= obj.id %></th>
<td><%= obj.msg %></td>
</tr>

<% } %>

これとは別にログインページの作成も行う。ログインページで行うのはidを入力してもらい、それを保存すること。保存先はローカルストレージ(webブラウザ)となっている。

<!DOCTYPE html>
<html lang="ja">

<head>
<meta http-equiv="content-type"
content="text/html; charset=UTF-8">
<title>ミニメッセージボード</title>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" crossorigin="anonymous">
<%# ローカルストレージからIDの値を取り出し、それに応じて処理 %>
<script>
function setId(){
//id_inputのDOMオブジェクトから値を取り出し保存
var id=document.querySelector('#id_input').value;
localStorage.setItem('id',id);
location.href='/';
}
</script>
</head>

<body class="container" onload="init();">
<header>
<h1 class="display-4">メッセージボード</h1>
</header>
<div role="main">
<p>あなたのログインネームを入力ください。</p>
<div class="form-group">
<label for="id_input">Login name:</label>
<input type="text" id="id_input" class="form-control">
</div>
<%# ボタンが押されたら関数を実行し保存 %>
<button onclick="setId();" class="btn btn-primary">送信</button>
</div>
</body>
</html>

データ保存用のtxtファイルも作成。

ここからはapp.jsにてメインプログラムを書いていく。

そして npm install ejsにてこのフォルダにもejsを導入。node app.jsで出来栄えを確認。

人気の記事

1

コロナによる需要変化 コロナパンデミックの影響で、人々は外に出られなくなり、自宅で過ごす時間が増えました。 この自粛ムードの中、下記のようなビジネスの需要変化が引き起こされています。 【利用者減少】 ...

2

米国レストランの決済時に毎日お世話になっていた「Square」のビジネスモデルについて本日はふれていきたいと思います。 「Square」とは、ネットにつながったモバイル端末と専用のカードリーダーを用意 ...

3

無料でネットショップを開けるアプリとして多くの人に驚きを与えたBASE株式会社が、2019年10月25日東証マザーズに上場しました。2020年2月時点で90万店を超えるショップを抱えるまでに成長してい ...

4

2011年にサービスを開始してから圧倒的な成長率を誇るインテリア通販サイト 【FLYMEe/フライミー】を皆さんご存じでしょうか。 「自分のイメージするインテリア、本当に欲しいインテリアがどこにあるの ...

5

ナイキのSNKRSが、なぜこれほどまでに人気なのか?調べてみました。 きっかけは米国での友達との会話。彼は自分のシューズをみせて、「これ20万円もしたんだぜ。」と語ってくれました。 あまり靴に興味がな ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HACKER , 2022 All Rights Reserved Powered by AFFINGER5.