読者です 読者をやめる 読者になる 読者になる

ゼロからはじめるWEBプログラミング入門

未経験者でも初心者でも関係なく、とにかくWEBサイトを作るところから始めるブログ!

(3) 新しいページ(画面)を作成 [Spring Boot]

Ⅰ.WEBプログラミング入門


f:id:sbc-web:20170212181711j:plain


はじめに

今回は新しいページを作成する方法を解説します。

今回作成する内容

概要

新規のWEBページを追加します。

画面

f:id:sbc-web:20170218145233p:plain

作成済されている画面の内容

  • コントローラー(AppController.java
  • 画面/HTMLファイル(index.html)


コントローラー(AppController.java

MVCでいうコントローラーの部分がこのAppController.javaです。

クライアントからのリクエストを受け付けてレスポンスを返すサーバ側の処理部分。 リクエストのパスをRequestMappingアノテーションで指定し、表示するHTMLファイル名を戻り値に設定します。

パスとHTMLファイルを指定

f:id:sbc-web:20170212174322p:plain

設定値
パス HTMLファイル名
/ index (拡張子は省略)


画面/HTMLファイル (Index.html)

MVCでいうビューの部分。

resourceの中の「templates」フォルダに格納するのがルール。 HTMLで画面に表示する内容を記載しています。

f:id:sbc-web:20170212175711p:plain


新しいWEBページの作成手順

  1. コントローラー(AppController.java)にsecondの処理を追加
  2. 画面(second.html)を作成
新規作成するページ内容
パス HTMLファイル
second second


1. コントローラー(AppController.java)にsecondの処理を追加

ポイント

新たにsecondというメソッドを定義し、パスとHTMLファイルにsecondを設定する。

AppController.java
@Controller
public class AppController {

    @RequestMapping("/")
    public String index(){
        return "index";
    }
    
    // ↓↓↓ 以下の処理を追加 ↓↓↓
    @RequestMapping("/second")
    public String second(){
        return "second";
    }
}


2. 画面(second.html)を作成

ポイント

templatesフォルダにindex.htmlをコピーして作成した「second.html」というファイルを新規作成

f:id:sbc-web:20170212221744p:plain

second.html
<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8"/>
   <title>second</title>
</head>
<body>
    <h3>WEBプログラミング入門 2ページ</h3>
    2番目のページ
</body>
</html>


動作確認

新しいページが作成出来たので起動して確認します

アプリケーションを起動

f:id:sbc-web:20170212222006p:plain


画面表示

f:id:sbc-web:20170212222627p:plain

おわりに

今回は新しいWEBページを作成しました。
静的なページは作成できたので、次回はクライアントからデータを受け取り、その値によりページの表示が変わる動的なWEBページを作成します。