SE成長痛日記

アラサーSEが技術力を高めるために日々感じる痛みを綴るBlogです。

JSFでWEBページを作成する　その3

JavaEE7

前回作成したJSFページをいじって 入力フォームを備えたページにしてみます。

某掲示板ぱくって名前とメアドと投稿内容を指定できるformを作成してみました。

で、出力されたHTMLは以下みたいな感じです。

<html xmlns="http://www.w3.org/1999/xhtml"><head id="j_idt2">
        <title>Facelet Title</title></head><body>
<form name="j_idt5" id="j_idt5" action="/javaWebApplication-1.0-SNAPSHOT/faces/sample.xhtml" enctype="application/x-www-form-urlencoded" method="post">
<input name="j_idt5" type="hidden" value="j_idt5">
<label>名前</label><input name="j_idt5:j_idt8" type="text"><label>e-mail</label><input name="j_idt5:j_idt11" type="text">
            <div><textarea name="j_idt5:j_idt13" rows="10" cols="50"></textarea>
            </div><input name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" type="hidden" value="2296767451131191362:61443582680465282" autocomplete="off">
</form>
</body></html>

JSFでWEBページを作成する　その２

JavaEE7

前回JSFでページ作ったときに、追加されたweb.xmlを見ていたのですが、 ひとつ重要なことを見逃してました。

    <servlet>
        <servlet-name>Faces Servlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>/faces/*</url-pattern>
    </servlet-mapping>

JSFのサーブレットを動作させるURLのパターンは/faces/*です。

/faces含んでないとサーブレット動きません。

ということで、faces含みのURLで動作させると、今度こそ動きました。 http://localhost:18080/javaWebApplication-1.0-SNAPSHOT/faces/sample.xhtml

JSFでWEBページを作成する

JavaEE7

前回作成したからのWEBアプリケーションプロジェクトにJSFでWEBページを作成したいと思います。

WEBページフォルダを右クリックして、JSFページを選択して、ファイル名「Sample」と入力し、 finishを押下します。

この状態で一度実行してみます。

http://localhost:18080/javaWebApplication-1.0-SNAPSHOT/sample.xhtml

「Hello from Facelets」と表示され、JSFの追加ができました。

netbeansを使用してgithubのリポジトリにプロジェクトを登録する

JavaEE7

前回作成したWEBアプリケーションプロジェクトをgithubのリポジトリとして登録します

参考にしたサイト qiita.com

大きな流れは以下。

githubにリポジトリ作成 netbeansでプロジェクトのローカルgitリポジトリを作成してコミット ローカルリポジトリをgithubにプッシュ

まずgithubにリポジトリを作ります。

次に、netbeansでローカルリポジトリを作成します。

プロジェクトを右クリック Versioninng → initialize git repositoryで作成

次にgit → commitでファイルをコミットします。 これでローカルリポジトリに変更が反映されました。

最後に、ローカルの内容をリモートにプッシュします。

git -> remote -> pushを選択します。 その後、画面の表示に従って、finishを押下。

無事,githubに登録されました。 github.com

Apache NetBeans10.0でwebアプリケーションプロジェクトを作る その２

JavaEE7

前回、起動ボタンが出ていなかったので調べました。

どうやらApache netbeansでは、Java EEが同梱されていないみたいです。

英語のサイトを参考に、Java EEを使えるように設定しました。

Java EE/Jakarta EE Support for NetBeans 9 - DZone Java

まず、tools->pluginから、settingを開きます。 次に「add」を押下し、次のサイトを追加します。 「NetBeans 8.2 Plugin Portal」 「http://updates.netbeans.org/netbeans/updates/8.2/uc/final/distribution/catalog.xml.gz」

その後、「available plugin」へ移動し、「java ee base」を選択、installを行います。 f:id:hirohisoEx:20190401234432p:plain

これでJava EEをプロジェクトから選択できるようになります。

次にAPサーバを追加します。

wildflyをインストールします。。。。 （決して、glass fish の追加に失敗したわけではない）

普通にサイトから落としたZIPを解凍、 server -> add で解凍したフォルダのパスを指定します。

f:id:hirohisoEx:20190401234529p:plain
サーバ追加後

その後、new projectでWEb Applicationが作成できるようになっているので、 Server にwildflyを選択してプロジェクトの作成をします。 f:id:hirohisoEx:20190401234619p:plain では試しに起動してみます。

実行ボタンを押下。

ビルド/デプロイは通ったみたいです。

特にブラウザ起動しないけど、立ち上がっているのでしょうか？ まずは「http://localhost:18080」にアクセス。wildflyが立ち上がっていることを確認します。

「http://localhost:18080/javaWebApplication-1.0-SNAPSHOT/」にアクセスすると。 Hello Worldが表示されており、無事WEBアプリケーションプロジェクトを作ることができたようです。

(2019/4/1)ちょっと写真などを貼り付けたり 説明を補足

Apache NetBeans10.0でwebアプリケーションプロジェクトを作る

JavaEE7

(2019/4/1) この記事は失敗談なので、その２をみることをおすすめします。

しばらくプログラミングから離れてる間に（管理/リーダという名のExcelをごにょごにょするお仕事してました） Netbeansがver10.0にしかも運営がapache財団になっていました。

ということで、WEBアプリケーションプロジェクトを新規作成するところまでやってみました。

インストール手順は省略（どや）

日本語化されてないので、全部英語です。

8.1とお同じ要領で、File から　New Projectを選択して MavenのWeb Applicationを、、、、て無いぞ！

Mave for Achetypeでよいんだろうか？

今後、JSFとかお試し実装したいのでJava EEでのWEBアプリケーションできる ArchTypeを選択したいです。

ee8で検索して、でてきたArchTypeの説明見ながら 「javaee8-war-archetype」を選択してみた。

なんで失敗するんだろーねー Failed to execute goal org.apache.maven.plugins:maven-archetype-plugin:2.4:generate (default-cli) on project standalone-pom: Directory LaboProject already exists - please run from a clean directory -> [Help 1]

To see the full stack trace of the errors, re-run Maven with the -e switch. Re-run Maven using the -X switch to enable full debug logging.

For more information about the errors and possible solutions, please read the following articles:

結局わけもわからず「webapp-javaee7」を使用するとプロジェクトが作成できた

よし、あとは実行するだけです。

ん。。。？

実行ボタンが非活性で実行できません。

今日はここままでにします。

ひとり疑似プロジェクトでスキルを高める(実装編 ログイン機能 -1-）)

さてさて、思い立ってから約1ヶ月半。 本来の目的の実装周りにようやく到着してきました。。。。

ではまず、手始めにログイン周りの実装を行いたいと思います。

ここで検討すべきなのは、Java EEにおける認証機能。 とりあえず調べるとレルムというものを用いて行なうようです。

参考にしたの

WEBページ

たかがレルムされどレルム GlassFish で始める詳細 JDBC レルム | 寺田 佳央 - Yoshio Terada

Javaの道：Tomcat（１３．JDBCレルムによるFORM認証）

GlassFishのJDBCレルムを利用する - Programming Studio

OTN Japan - はじめてのOracle9iデータベース：サンプルスキーマを作ってみよう

本

Java EE 7徹底入門: 標準Javaフレームワークによる高信頼性Webシステムの構築

概要

Java EE では、レルムというものに格納されたユーザID/パスワード グループ情報を参照して認証を行なうそうです。

さらに、WEBで公開された各種リソースに対して、 グループごとにアクセス権を設定してセキュリティを担保します。 これを認可といいます。

また、レルムは抽象的なものであり、ファイルに情報を格納することもあれば DBやLDAPを用いることも出来るようです。

今回はDBに情報を待たせたいと思います。

Java EE 環境準備

今回は、GlassFish + NetBeans8.1 + Mavenで開発環境を整えます。

まずは、NetBeansを立ち上げて、 「新規プロジェクト」→「Maven」→「Webアプリケーション」と選択。 サーバはflassFish4.1、Java EEは7を選択。

なんか色々ダウンロードしてきて、こんな感じにプロジェクトが作られました。 （実はあまりMavenしらない人）

f:id:hirohisoEx:20160827215819p:plain

色々な記事で、以下の部分を次のように書き換えてたけどいるのかなぁ。 今回webだけしか使わないからいらないかも、とりあえずこのまま。

「javaee-web-api」→ 「javaee-api」

画面のハリボテ準備

まずは、ログイン画面とログイン画面後のTOP画面を用意しておきましょう。

「新規」→「その他」→「JavaServer Faces/JSFページ」を選択して、 login.xhtmlを作成します。

f:id:hirohisoEx:20160827215927p:plain

で、このページのレイアウトを編集。

つぎに、このページに対する管理Beanも作成しておきます。 「新規」→「その他」→「JavaServer Faces/JSF管理対象Beans」を選択して、 loginBeans.javaを作成します。

f:id:hirohisoEx:20160827215938p:plain

画像とは違い、実際はスコープをviewスコープにしました。

でココらへんで一回起動・・・あれ？起動しない。。。。＼(^o^)／

知らべてみると、そもそもGlassFishがプロジェクトを認識してくれていない・・・ どうやらパスに全角文字が入っているとダメみたいだ、なのでパス変更

でも動かない＼(^o^)／ｵﾜﾀ

NetBeansからだと、実行時のエラーが全くわからないため、 ビルドされたwarを直接glassfishの管理コンソールから、 デプロイしてみた。するとこんなエラーが。。。

f:id:hirohisoEx:20160827215859p:plain

あ、loginBeans.javaをSerializableに してなくてエラーになっていたようです。。。

で、気を取り直して実行したら、表示されました。

f:id:hirohisoEx:20160827215951p:plain

めでたしめで・・（もうちっとだけ続きます）

DB設定

では今度はユーザ情報を格納するためのDBを用意します。 今回作成するテーブル構成はこんな感じ。

Java EEの認証仕様に合わせて、グループテーブルを追加しています。

参考サイトではJava DBでしたが、 今回はOracle Database Express Editionを使用したいと思います。

まずは、表領域と接続ユーザを作成します。

表領域

create TABLESPACE study_support
datafile 'C:\ORACLEXE\APP\ORACLE\ORADATA\XE\study_support' size 10m;

接続ユーザ

CREATE USER study_con IDENTIFIED BY admin
DEFAULT TABLESPACE "STUDY_SUPPORT"
TEMPORARY TABLESPACE "TEMP";

この後、connect,Resourcesロール + create Table権限(※)を与えました。

※：Resourcesロールを付与すればテーブル作成出来ると思ってたのに謎

最後にこんなテーブルを用意します。

f:id:hirohisoEx:20160827220006p:plain

GlassFishの設定

あとは、レルムの設定です。 まずはglassfishの管理コンソールに入ります。 http://localhost:4848/common/index.jsf

server-config security realmとたどり Neｗから新規作成 ページに移ります。

で以下のような設定を行ないます。

f:id:hirohisoEx:20160827220019p:plain

ここまでで、環境的な設定は終わり。 次回は、実際に実装してみて動作するか確認していきます。