【第六回】画面からサーバーのメソッドへの移動

Javaウェブアプリ開発

はじめに

DreamHanksの松下です。

前回の記事で簡単なログイン画面の表示までを解説しました。
今回はログイン画面にパスワードを入力して、それをサーバーに送るまでを解説します。

連載記事まとめ

 

JSPを知る

 

JSPは実はjava!?

HTMLタグを記述しているので、クライアントサイドで動いているものだと
勘違いするかもしれません。

しかし、JSPはサーバー内部で動くものです。

プログラマが画面をデザインしやすいようにHTMLタグで書かれていますが、
最終的にはコンパイルされて機械語に訳されて、アクセスがあったときに
HTMLタグをWebブラウザに描画します。

JSPはJavaServer Pageの略で中身はJAVAです。

役割としては、2つあります。
・画面を描画(デザイン)する。
・画面で入力されたものを、サーブレット(コントローラ)と受け渡しをする。

 

ライブラリについて

JSPの上記にあるこの記述は、ライブラリをJSPに注入しています。

基本的にJSP内で使われるタグの形式は下記の3つです。
・html
・JSTL
・Spring MVCのJSPタグ

JSTLとは

JSTLはJavaServer Pages Standard Tag Libraryです。
クライアント側でループ処理や計算処理をしたい場合に、このライブラリを使います。

種類 説明
core forEach、if、変数の参照/設定などの基本的なタグ
fmt 数値や日付のフォーマットなど
xml XML文書の解析、XSLスタイルシート
functions 文字列一般関数(containsなど)
sql SQLを発行し、データベース操作する関数

上記の表の内容ができます。

しかし、ほとんど「core」しか使いません。

今回も「core」のみを使用します。

「<f:input>」と「<input>」の違いについて

<f:input>がSpring MVCのJSPタグです。
<input>はhtmlのタグです。

HTMLのタグは画面入力された内容を、Modelに受け渡さないものを画面に描画するために使います

具体的な例としては
・値を受け渡さない画面の制御のためだけの、チェックボックスを描画する
・Submitボタンを描画する

Spring MVCのJSPタグは逆にModelに値を受け渡すために使います。

具体的な例としては
・Model(Form)をJSPに定義する
・画面で入力された値をModelに受け渡す
・action(URL)を定義する

 

prefixについて

ライブラリの末尾に記述されているprefixについて注目いたします。

本来は下記のようにcoreまで記述しなくてはいけませんが、
このように訳して記述できるようにするためのものです。

<core:forEach> ⇒ <c:forEach>
<form:form> ⇒ <f:form>

※Formタグ(画面の内容をサーバーに送る架け橋)

modelAttributeについて

formタグ内で「modelAttribute=”loginForm”>」と記述しています。

これは、このJSP内で(画面入力されたものが)この箱(loginForm)に詰め込まれますよ
という意味です。

つまり、詰め込む箱はどれなのか?を定義するものです。

 

Controllerで行った@ModelAttribute/model.addAttributeとの違い

前回のControllerでmodelのアトリビュートを行いました。
Formタグのアトリビュートとの違いは「JSPにどの箱を持っていくのか?」です。

画面のアトリビュート ⇒ コントローラで入力値が使える。
Contorllerのアトリビュート ⇒ 画面で渡された値が使える。

 

どのようにしてloginForm(画面で生成した箱)に値をつめるのか?

下記のSpring MVCのJSPタグを使います


◆Pathingを行う

「path=”password”」はloginForm.javaにあるpasswordエンティティと対応しています。

そして入力された値はSetterメソッドを使って、loginForm.javaにあるpasswordに設定されます

これはSpringMVCモデルの最も強力な点の一つです。
画面からSetterメソッドを内部的に使って、loginForm.javaに設定できるなんて素晴らしくないですか??

 

submitについて

submitボタンを押下することで、画面で入力された内容を最終的にpathingして
formタグのactionに記述されているURLに遷移するように実行します。

このsubmitボタンはformタグに対して1つある。1対1の関係です。

遷移先はサーバーにあるメソッドです。
<f:form action=”${pageContext.request.contextPath }/member/loginProcess”

 

さいごに

次回は入力されたパスワードの入力内容が、正しい形式でできているか?を確認するために
ヴァリデーションチェックについて解説していきます。

お読みいただきありがとうございました。

 

 

コメント