MemberApp promise view - Express

データ一覧

./views/members/index.ejs

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>MemberApp - index</title>
</head>
<body>
    <div id="wrapper">
        <div id="header">
            <h1>Member Index</h1>
        </div>
        <div id="content">
            <ul>
                <li><a href="/add">作成</a></li>
            </ul>
            <table>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Age</th>
                </tr>
                <% for(let i in users){ %>
                    <% let obj = users[i]; %>
                    <tr>
                        <td><%= obj.id %></td>
                        <td><%= obj.name %></td>
                        <td><%= obj.age %></td>
                        <td>
                            <a href="/show/<%= obj.id %>">show</a>
                            <a href="/edit/<%= obj.id %>">edit</a>
                            <a href="/delete/<%= obj.id %>">delete</a>
                        </td>
                    </tr>
                <% } %>
            </table>
        </div>
    </div>
</body>
</html>

個別のデータの表示

./views/members/show.ejs

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>MemberApp - Show</title>
</head>
<body>
    <div id="main">
        <div id="header">
            <h1>Member Show</h1>
        </div>
        <table>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Age</th>
            </tr>
            
            <tr>
                <td><%= user.id %></td>
                <td><%= user.name %></td>
                <td><%= user.age %></td>
            </tr>
        </table>
    </div>
</body>
</html>

データの追加

./views/members/add.ejs

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>MemberApp - Add</title>
</head>
<body>
    <div id="main">
        <div id="header">
            <h1>Member Add</h1>
        </div>
        <form method="post" action="/add">
            <table>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                </tr>
                <tr>
                    <td><input type="text" name="name" id="name"></td>
                    <td><input type="text" name="age" id="age"></td>
                </tr>
            </table>
            <p><input type="submit" value="作成"></p>
        </form>
    </div>
</body>
</html>

データの編集

./views/members/edit.ejs

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>>MemberApp - Edit</title>
</head>
<body>
    <div id="main">
        <div id="header">
            <h1>Member Edit</h1>
        </div>
        <form action="/edit" method="post">
            <input type="hidden" name="id" value="<%= user.id %>">
            <table>
                <tr>
                    <td><input type="text" name="name" id="" value="<%= user.name %>"></td>
                </tr>
                <tr>
                    <td><input type="text" name="age" id="" value="<%= user.age %>"></td>
                </tr>
                <tr>
                    <td><input type="submit" value="更新"></td>
                </tr>
            </table>
        </form>
    </div>
</body>
</html>

データの削除

./views/members/delete.ejs

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>MemberApp - Delete</title>
</head>
<body>
    <div id="main">
        <div id="header">
            <h1>Member Delete</h1>
        </div>
        <table>
            <tr>
                <th>ID</th>
                <th>NAME</th>
                <th>AGE</th>
            </tr>
            <tr>
                <td><%= user.id %></td>
                <td><%= user.name %></td>
                <td><%= user.age %></td>
            </tr>
        </table>
        <form action="/delete" method="post">
            <input type="hidden" name="id" value="<%= user.id %>">
            <p><input type="submit" value="削除"></p>
        </form>
    </div>
</body>
</html>