かんがるーさんの日記

最近自分が興味をもったものを調べた時の手順等を書いています。今は Spring Boot をいじっています。

Spring Boot でログイン画面 + 一覧画面 + 登録画面の Webアプリケーションを作る ( その4 )( HTMLファイル作成2 )

概要

Spring Boot でログイン画面 + 一覧画面 + 登録画面の Webアプリケーションを作る ( その3 )( HTMLファイル作成 ) の続きです。

  • 今回の手順で確認できるのは以下の内容です。
    • HTMLファイルの作成、確認

ソフトウェア一覧

参考にしたサイト

手順

登録画面 ( 入力→確認→完了 ) の作成

  1. Project View で /static を選択した後コンテキストメニューを表示し、「New」->「Html5(BS3)」を選択します。「New Html5(BS3)」ダイアログが表示されたら countryInput と入力した後「OK」ボタンをクリックします。countryInput.html が新規作成されてエディタで開かれた後「Add Files to Git」ダイアログが表示されますので「Yes」ボタンをクリックします。

  2. countryInput.html の内容をリンク先の内容に変更します。

  3. ブラウザで http://localhost:8080/countryInput.html にアクセスします。以下の画像の画面が表示されます。

    f:id:ksby:20150110111729p:plain

  4. Project View で /static を選択した後コンテキストメニューを表示し、「New」->「Html5(BS3)」を選択します。「New Html5(BS3)」ダイアログが表示されたら countryConfirm と入力した後「OK」ボタンをクリックします。countryConfirm.html が新規作成されてエディタで開かれた後「Add Files to Git」ダイアログが表示されますので「Yes」ボタンをクリックします。

  5. countryConfirm.html の内容をリンク先の内容に変更します。

  6. ブラウザで http://localhost:8080/countryConfirm.html にアクセスします。以下の画像の画面が表示されます。

    f:id:ksby:20150110111911p:plain

  7. Project View で /static を選択した後コンテキストメニューを表示し、「New」->「Html5(BS3)」を選択します。「New Html5(BS3)」ダイアログが表示されたら countryConfirm と入力した後「OK」ボタンをクリックします。countryComplete.html が新規作成されてエディタで開かれた後「Add Files to Git」ダイアログが表示されますので「Yes」ボタンをクリックします。

  8. countryComplete.html の内容をリンク先の内容に変更します。

  9. ブラウザで http://localhost:8080/countryComplete.html にアクセスします。以下の画像の画面が表示されます。

    f:id:ksby:20150110113300p:plain

  10. Ctrl+F2 を押して Tomcat を停止します。

commit、GitHub への push

  1. IntelliJ IDEA のメイン画面のメニューから「VCS」->「VCS Operations Popup...」を選択します。

  2. VCS Operations」メニューが表示されます。「Commit Changes...」を選択します。

    f:id:ksby:20150110120821p:plain

  3. 「Commit Changes」ダイアログが表示されます。Commit Message を入力後、「Commit」ボタンのドロップダウンメニューから「Commit and Push...」を選択します。途中に「TODO」ダイアログが表示されたら bootstrap.css.map のファイルの ToDo ですので無視して「Commit」ボタンをクリックします。

    f:id:ksby:20150110121319p:plain

  4. 「Push Commits」ダイアログが表示されます。「Push」ボタンをクリックします。

    f:id:ksby:20150110122800p:plain

  5. GitHub へローカルの 1.0.x_makehtml branch の内容が送信されます。完了すると画面左下に以下の画像のメッセージが表示されます。

    f:id:ksby:20150110123523p:plain

GitHub から Pull Request

  1. https://github.com/ksby/ksbysample-webapp-basic にアクセスします。

  2. 画面上部に以下の画像と同じ内容が表示されていますので、「Compare & pull request」ボタンをクリックします。

    f:id:ksby:20150110124118p:plain

  3. pull request の作成画面が表示されますので、左上の base の branch を 1.0.x に変更し、comment を入力した後、「Create pull request」ボタンをクリックします。

    f:id:ksby:20150110125548p:plain

Pull Request の確認、1.0.x_makehtml → 1.0.x へ merge

  1. https://github.com/ksby/ksbysample-webapp-basic/pulls にアクセスします。登録した pull request が表示されていますのでクリックします。

    f:id:ksby:20150110131340p:plain

  2. pull request の画面が表示されますので、「Files changed」タブをクリックします。

    f:id:ksby:20150110132123p:plain

  3. pull request で変更されたファイルの内容が表示されますのでレビューします。

    f:id:ksby:20150110132356p:plain

  4. ソースレビューが完了したら、ローカルで動作を確認します。まずは IntelliJ IDEA側で branch を 1.0.x に戻します。メイン画面のメニューから「VCS」->「VCS Operations Popup...」を選択します。

  5. VCS Operations」メニューが表示されます。「Branches...」を選択します。

  6. 「Git Branches」メニューが表示されます。「1.0.x -> origin/master」->「Checkout」を選択します ( 一番左側に変更したい branch が表示されているメニューを選択します )。

    f:id:ksby:20150110210208p:plain

  7. もう1度同じ操作をして「Git Branches」メニューを表示すると Current branch が 1.0.x に変わっていることが確認できます。確認用の branch を作成しますので「New Branch」を選択します。

    f:id:ksby:20150110210748p:plain

  8. 「Create New Branch」ダイアログが表示されますので、#2 の Pull Request を確認するので 1.0.x-pr2 と入力して「OK」ボタンをクリックします。

  9. 1.0.x-pr2 に 1.0.x-makehtml の変更内容を merge します。メイン画面のメニューから「VCS」->「VCS Operations Popup...」を選択後「VCS Operations」メニューが表示されたら「Branches...」を選択します。

  10. 「Git Branches」メニューが表示されます。「1.0.x-makehtml -> origin/1.0.x-makehtml」->「Merge」を選択します。

    f:id:ksby:20150110214156p:plain

  11. 変更内容がマージされます。Gradle Tasks View から build を選択して BUILD SUCCESSFUL のメッセージが表示されることを確認した後、bootRun を選択して Tomcat を起動後、動作を確認します。確認終了後 Ctrl+F2 を押して Tomcat を停止します。

  12. 1.0.x branch へ切り替えて 1.0.x-pr2 の内容を merge します。メイン画面のメニューから「VCS」->「VCS Operations Popup...」を選択後「VCS Operations」メニューが表示されたら「Branches...」を選択します。

  13. 「Git Branches」メニューが表示されます。「1.0.x -> origin/1.0.x」->「Checkout」を選択します。

    f:id:ksby:20150110215639p:plain

  14. 再度メイン画面のメニューから「VCS」->「VCS Operations Popup...」を選択後「VCS Operations」メニューが表示されたら「Branches...」を選択します。

  15. 「Git Branches」メニューが表示されます。「1.0.x -> origin/1.0.x」->「Checkout」を選択します。

    f:id:ksby:20150110215942p:plain

  16. ローカルの 1.0.x の内容を GitHub へ push します。メイン画面のメニューから「VCS」->「VCS Operations Popup...」を選択後「VCS Operations」メニューが表示されたら「Push...」を選択します。

    f:id:ksby:20150110220232p:plain

  17. Push Commits ダイアログが表示されます。「Push」ボタンをクリックします。

    f:id:ksby:20150110220557p:plain

  18. https://github.com/ksby/ksbysample-webapp-basic/tree/1.0.x にアクセスします。Pull Request が 0件になっており、1.0.x branch に /static ディレクトリが merge されていることが確認できます。

    f:id:ksby:20150110221052p:plain

  19. 今回 Issue を作成して作業していたのですが、「Merged」のアイコンが表示されて merge されていることが確認できました。Merge された内容は「Merged」アイコンが表示されているログのリンクをクリックした先の画面で確認できます。画面下部の「Close issue」ボタンを押して Issue をクローズします。

    f:id:ksby:20150110221849p:plain

  20. 不要になった 1.0.x-makehtml、1.0.x-pr2 branch を削除します。「Git Branches」メニューを表示してから、それぞれ「1.0.x-makehtml -> origin/1.0.x-makehtml」->「Delete」、「1.0.x-pr2 -> origin/1.0.x-pr2」->「Delete」、「origin/1.0.x-makehtml」->「Delete」を選択して削除します。

    f:id:ksby:20150110223509p:plain

    f:id:ksby:20150110223720p:plain

    f:id:ksby:20150111000335p:plain

※他の人から Pull Request をもらったらどうするのかを手順として書きたかったのですが、おそらくその場合には 1)Pull Requestをもらった人の branch を Checkout する、2)マージする branch の確認用 branch を作成する、3)確認用 branch に Checkout した branch をマージする、4)確認、5)問題なければ commit&push、するものと思われます。

※簡単な Merge は GitHub 上でソースレビュー後 Merge pull request ボタンを押して対応、そうでないものはローカルに取得して動作確認してから merge → commit&pull でいけばいいと思われます。

ソースコード

countryInput.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <title>Countryデータ登録画面(入力)</title>

    <!-- Bootstrap core CSS -->
    <link href="/css/bootstrap.min.css" rel="stylesheet"/>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="/js/html5shiv.min.js"></script>
    <script src="/js/respond.min.js"></script>
    <![endif]-->

    <!-- Custom styles for this template -->
    <style>
    <!--
    body {
        padding-top: 50px;
    }
    .navbar-brand {
        font-size: 24px;
    }
    .form-group {
        margin-bottom: 5px;
    }
    h1 {
        margin-bottom: 20px;
    }
    -->
    </style>
</head>

<body>
    <nav class="navvar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">ナビゲーションボタン</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <div class="navbar-brand">WebApp - Basic</div>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav  navbar-left">
                    <li><a href="#"><span class="glyphicon glyphicon-search"></span> 検索/一覧</a></li>
                    <li class="active"><a href="#"><span class="glyphicon glyphicon-pencil"></span> 登録</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="/logout"><span class="glyphicon glyphicon-log-out"></span> ログアウト</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container">
        <div class="row">
            <div class="col-sm-push-2 col-sm-10"><h1>Countryデータ登録</h1></div>
        </div>

        <div class="row">
            <div class="col-xs-12">
                <form method="post" action="#" class="form-horizontal">
                    <div class="form-group">
                        <label for="Code" class="control-label col-sm-2">Code</label>
                        <div class="col-sm-2">
                            <input type="text" name="code" id="code" class="form-control input-sm" value="" placeholder="JPN"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="name" class="control-label col-sm-2">Name</label>
                        <div class="col-sm-4">
                            <input type="text" name="name" id="name" class="form-control input-sm" value="" placeholder="Japan"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="continent" class="control-label col-sm-2">Continent</label>
                        <div class="col-sm-4">
                            <input type="text" name="continent" id="continent" class="form-control input-sm" value="" placeholder="Asia"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="region" class="control-label col-sm-2">Region</label>
                        <div class="col-sm-4">
                            <input type="text" name="region" id="region" class="form-control input-sm" value="" placeholder="Eastern Asia"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="surfaceArea" class="control-label col-sm-2">SurfaceArea</label>
                        <div class="col-sm-2">
                            <input type="text" name="surfaceArea" id="surfaceArea" class="form-control input-sm" value="" placeholder="377829.00"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="population" class="control-label col-sm-2">Population</label>
                        <div class="col-sm-2">
                            <input type="text" name="population" id="population" class="form-control input-sm" value="" placeholder="126714000"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="localName" class="control-label col-sm-2">LocalName</label>
                        <div class="col-sm-6">
                            <input type="text" name="localName" id="localName" class="form-control input-sm" value="" placeholder="Nihon/Nippon"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="governmentForm" class="control-label col-sm-2">GovernmentForm</label>
                        <div class="col-sm-6">
                            <input type="text" name="governmentForm" id="governmentForm" class="form-control input-sm" value="" placeholder="Constitutional Monarchy"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="code2" class="control-label col-sm-2">Code2</label>
                        <div class="col-sm-1">
                            <input type="text" name="code2" id="code2" class="form-control input-sm" value="" placeholder="JP"/>
                        </div>
                    </div>

                    <div class="col-xs-12"> </div>
                    <div class="text-center">
                        <button type="button" value="confirm" class="btn btn-primary">確認</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="/js/jquery.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="/js/ie10-viewport-bug-workaround.js"></script>

    <script type="text/javascript">
    <!--
    $(document).ready(function() {
        $('#code').focus();
    });
    -->
    </script>
</body>
</html>
  • Template から以下の点を変更しています。

    • title を記入しました。
    • <div class="container">...</div> 内に登録画面(入力)の HTML を記入しました。
    • 画面初期表示の focus が #code にセットされるよう Javascript を修正しました。

countryConfirm.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <title>Countryデータ登録画面(確認)</title>

    <!-- Bootstrap core CSS -->
    <link href="/css/bootstrap.min.css" rel="stylesheet"/>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="/js/html5shiv.min.js"></script>
    <script src="/js/respond.min.js"></script>
    <![endif]-->

    <!-- Custom styles for this template -->
    <style>
    <!--
    body {
        padding-top: 50px;
    }
    .navbar-brand {
        font-size: 24px;
    }
    .form-group {
        margin-bottom: 5px;
    }
    h1 {
        margin-bottom: 20px;
    }
    -->
    </style>
</head>

<body>
    <nav class="navvar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">ナビゲーションボタン</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <div class="navbar-brand">WebApp - Basic</div>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav  navbar-left">
                    <li><a href="#"><span class="glyphicon glyphicon-search"></span> 検索/一覧</a></li>
                    <li class="active"><a href="#"><span class="glyphicon glyphicon-pencil"></span> 登録</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="/logout"><span class="glyphicon glyphicon-log-out"></span> ログアウト</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container">
        <div class="row">
            <div class="col-sm-push-2 col-sm-10"><h1>Countryデータ登録</h1></div>
        </div>

        <div class="row">
            <div class="col-xs-12">
                <form method="post" action="#" class="form-horizontal">
                    <div class="form-group">
                        <label for="Code" class="control-label col-sm-2">Code</label>
                        <div class="col-sm-2">
                            <p class="form-control-static" id="Code">JPN</p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="name" class="control-label col-sm-2">Name</label>
                        <div class="col-sm-4">
                            <p class="form-control-static" id="name">Japan</p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="continent" class="control-label col-sm-2">Continent</label>
                        <div class="col-sm-4">
                            <p class="form-control-static" id="continent">Asia</p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="region" class="control-label col-sm-2">Region</label>
                        <div class="col-sm-4">
                            <p class="form-control-static" id="region">Eastern Asia</p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="surfaceArea" class="control-label col-sm-2">SurfaceArea</label>
                        <div class="col-sm-2">
                            <p class="form-control-static" id="surfaceArea">377829.00</p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="population" class="control-label col-sm-2">Population</label>
                        <div class="col-sm-2">
                            <p class="form-control-static" id="population">126714000</p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="localName" class="control-label col-sm-2">LocalName</label>
                        <div class="col-sm-6">
                            <p class="form-control-static" id="localName">Nihon/Nippon</p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="governmentForm" class="control-label col-sm-2">GovernmentForm</label>
                        <div class="col-sm-6">
                            <p class="form-control-static" id="governmentForm">Nihon/Constitutional Monarchy</p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="code2" class="control-label col-sm-2">Code2</label>
                        <div class="col-sm-1">
                            <p class="form-control-static" id="code2">JP</p>
                        </div>
                    </div>

                    <div class="col-xs-12"> </div>
                    <div class="text-center">
                        <button type="button" value="update" class="btn btn-primary">登録</button>
                        <button type="button" value="back" class="btn btn-default">戻る</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="/js/jquery.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="/js/ie10-viewport-bug-workaround.js"></script>

    <script type="text/javascript">
    <!--
    -->
    </script>
</body>
</html>
  • Template から以下の点を変更しています。

    • title を記入しました。
    • <div class="container">...</div> 内に登録画面(確認)の HTML を記入しました。
    • 画面下部の画面専用の Javascript は削除しました。

countryComplete.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <title>Countryデータ登録画面(完了)</title>

    <!-- Bootstrap core CSS -->
    <link href="/css/bootstrap.min.css" rel="stylesheet"/>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="/js/html5shiv.min.js"></script>
    <script src="/js/respond.min.js"></script>
    <![endif]-->

    <!-- Custom styles for this template -->
    <style>
    <!--
    body {
        padding-top: 50px;
    }
    .navbar-brand {
        font-size: 24px;
    }
    .form-group {
        margin-bottom: 5px;
    }
    -->
    </style>
</head>

<body>
    <nav class="navvar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">ナビゲーションボタン</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <div class="navbar-brand">WebApp - Basic</div>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav  navbar-left">
                    <li class="active"><a href="#"><span class="glyphicon glyphicon-search"></span> 検索/一覧</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-pencil"></span> 登録</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="/logout"><span class="glyphicon glyphicon-log-out"></span> ログアウト</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container">
        <div class="row">
            <div class="col-sm-push-2 col-sm-10"><h1>Countryデータ登録</h1></div>
        </div>

        <div class="row">
            <div class="col-xs-12"> </div>
            <div class="col-xs-12">
                <div class="col-sm-2"> </div>
                <div class="col-sm-10" style="font-size: 120%;">登録が完了しました</div>
            </div>

            <div class="col-xs-12"> </div>
            <div class="text-center">
                <button type="button" value="input" class="btn btn-primary">次のデータを登録する</button>
                <button type="button" value="toCountryList" class="btn btn-default">検索/一覧画面へ</button>
            </div>
        </div>

    </div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="/js/jquery.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="/js/ie10-viewport-bug-workaround.js"></script>

    <script type="text/javascript">
    <!--
    -->
    </script>
</body>
</html>
  • Template から以下の点を変更しています。

    • title を記入しました。
    • <div class="container">...</div> 内に登録画面(完了)の HTML を記入しました。
    • 画面下部の画面専用の Javascript は削除しました。

履歴

2015/01/10
初版発行。