フリーランス チャレンジ!!

フリーランス チャレンジ!!

週休4日制に俺はなる!

Eclipse + Spring でログイン画面を簡単に作成!!

 

みなさん、コウタロウです!!

 

今日はタイトルについて。

 

 

最初の準備

下記の記事を参考に、Springの準備をして下さい。

"Hello world"と表示されればOKです。

www.ksakae1216.com

 

HTMLテンプレートを使う

今は、わざわざイチから画面を作る必要はありません。

オシャレで洗練されたHTMLテンプレートが数多くあるので、HTMLテンプレートを使って、簡単にオシャレなログイン画面をサクッと作っちゃいましょう!!

 

テンプレートをダウンロード

Google検索で"ログイン テンプレート"と検索すると使えるテンプレートがたくさん出てきます。

今回は、下記から1つ利用させてもらってログイン画面を作成します。

sounansa.net

 

利用するのはこれにします、URLをクリックするとcodepenのページが開きます。

https://codepen.io/haykou/pen/kEeFH

f:id:ksakae1216:20170320163724j:plain

画面右下にあるExportボタンを押下し、ログイン画面一式(HTML、CSS)を自分のPCにダウンロードします。

 

テンプレートをEclipseへ格納

ダウンロードしたZIPを解凍すると、index.htmlcssディレクトリがあるのでこれをEclipseのほうへコピーします。

f:id:ksakae1216:20170320223049j:plain

まずは、cssディレクトリ"src/main/webapp/resources"配下に、

index.htmlは"src/main/webapp/Web-INF/views"ディレクトリ配下に置いて下さい。

※ハードコピー撮り忘れてindex.htmlではなく、変更後のlogin.jspになってます。すいません。。。

 

次にファイル名を変更します。index.htmlから"login.jsp"へ変更して下さい。

f:id:ksakae1216:20170320165341j:plain

 

コントローラー作成

それではログイン用のコントローラーを作成します。

f:id:ksakae1216:20170320165446j:plain

上記、"src/main/java"の"jp.org.web"配下のHomeController.javaをコピーしてLoginController.javaを作成して下さい。

※パッケージエクスプローラー上でHomeController.javaをコピーしてそのまま貼り付ければ貼付け後のソース名を聞かれるのでLoginController.javaにしてくれればOKです。

 

f:id:ksakae1216:20170320165828j:plain

無事にLoginController.javaができました。

 

中身はシンプルにします。

gist5da40d8faf41d2bed978a8c22505c09e

 

URLが"/login"だったら、login.jspを表示するだけです。

 

また、login.jspも内容を少し書きかえます。

gistaea87a792bbb340830810f75468b11b7

 

これでTomcatを起動し下記URLをブラウザに入力して下さい。

http://localhost:8080/web/login

 

すると

f:id:ksakae1216:20170320225400j:plain

 

ほら表示されました。

 

最後に

テンプレートを使うと簡単ですね。

 

時間かけずに成果を出すには、利用できるものはどんどん利用しましょう。

HTMLテンプレートを使えば、このログイン画面でも10分くらいで作成できますよ。

 

【関連記事】 

www.ksakae1216.com

 

www.ksakae1216.com