mariaDBの準備
xamppのMySQLはインストールすればたぶん安定して動きます。パスワードはなしのままで結構です。
現在のxamppは(2022/6/24現在)MySQLと表示されていますが、中身はmariaDBです。ただ扱いとしてはMySQLと同じで構いません。そしてJavaと接続するにはJDBCの機構を使ってつなぎますので、ドライバーが必要です。
MySQLとして接続もできますが、今回はmariaDBとして接続しましょう。
mariaDB driverで検索すると
と出てきたらクリックして、mariaDBのサイトにたどり着きましょう。英語かもしれません。
DOWNLOADをクリックして、ダウンロードページに行ってください。
少し下の方で、バージョンを選ぶ場所がありますので、これを操作して自分の環境に合わせます。
私は Java17ですので、+8の 3.0.5を選びました。下にDOWNLOADボタンがあるので、これでjarファイルをダウンロードします。
このjarファイルをコンパイルと実行時に使います。まずは実行時に備えて、xamppのtomcatのlibにコピーします。
こうしておけばTOMCATで実行時にここのlibが自動的に使われるのでエラーが発生しません。
データベースの準備
今回のアプリで使うデータベースを宣言しておきましょう
MemoDataというテーブルを aid int(11) NOT NULL,smemo text NOT NULL,stime datetime NOT NULL,sst int(11) NOT NULL,scategory varchar(30) DEFAULT NULL で作ります。
備忘録を保存するアプリとして使います。
まず、mariaDBと接続できるかのテストのために一度仮のプログラムを作って実験してみましょう。
この中でやっているのは、mariadbのドライバーのロード。ただし、この環境でやるとかならず1回目の起動でロードエラーになるので、catchはやめてあります。
ロードできたら、今回使ったmariaDBのmydbデータベースに接続します。3306ポートがmariaDBのポート番号、MySQLと同じです。ここのところをMySQLでやりたいのであれば、MySQLのドライバーをダウンロードしてjdbc:mysqlに接続してください。どちらでもつながります。
そして、SQL文を作成し、プリペアードステートメントで埋めていきます。日付時刻は面倒くさいことになってます。一度longに変換してから変換です。
成功すれば成功したレコード数が返ってくるので1ならば成功、それ以外は失敗です。これが正しく動くことを確認してからでないと次に進めませんので、ちゃんと実行してください。実行方法は前回の回と同じでMAVENをinstall,compile,packageしてTOMCATで実験してください。
最初の実行で localhost:8080/vsdbaccess でHello, worldが表示されますが、それはデファルトのindex.jspですので関係ありません。その後に /Main を追加して実行すると、出力に SUCCESSと表示されれば成功です。
うまくいっていれば、テストデータがmydbのmemodataテーブルに入っているはずです。確認してください。
MVCモデルを作ってみる
さきほどのMain.javaのように毎回データベースへの接続を書いていると同じようなプログラムが乱立してしまい、見通しがよくありません。そこでMVCモデルという構造を作って、Mでやり取りの構造体や処理、Vで画面の表示、Cが全体のコントロールという風に作っていってみましょう。
Main.javaが最初にパラメータなしのGetを受けて、AraryListにデータベースを詰め込んでjspをPOSTする。JSPのFormからデータがPOSTされればInsertし、またListを返し、DeleteがGETされればDeleteしてListを返すを繰り返します。
まず、このMemoDataのクラスを作って、データベースとのやり取りのひな形を作ります。このようなやり方をJavaBeansといいます。
etlabのフォルダーにmodelフォルダーを作り、その中にMemoData.javaを作ります。
このクラスがデータベースや各メソッドでのデータのやり取りの入れ物になります。
続いて、やり取りの処理ロジックを代行してくれるメソッドを作ります。
etlabフォルダーの中に、daoフォルダーを作りInsertDAO.javaを作成します。実はこの中身は先ほど作った仮のMain.javaとほぼ同じです。中身をコピーしてきて修正してください。
このDAOが、データベースとのやり取りをやってくれるので、これさえあればデータベースのことをこのDAO以外では気にしないで、modelのやり取りとして実行できます。
続いて、このdaoを呼び出す処理ロジックを書きます。
ということで、もともとのMain.javaを改造してデータべースに関わるところのLogicを呼び出せばよいようにしましょう。
で、ついでにMain.javaの場所をetlabの下のservletに移動して、中身をきれいにしましょう。PostはFormからのデータ受信用、Getは画面呼び出し用です。
さて、これでロジックが出来ましたが、あとViewのmain.jspを作って手入力でデータを追加する流れまで作りたいのですが、ここで少し View の見た目を少し考えて、Bootstrapの話を挟みます。
BootStrapで見た目を整える
いままで作ったjspは、どれもCSSを書いていません。そのため、見た目しょぼいです。この見た目がしょぼいというのは実は大問題で、WEB系の出来上がりを見たときに、きれいなものと、何もしてないものを比べると20倍くらい価値の差がでます。しかし、プログラマはとかくデザインは苦手。そこでBootstrapの力を借りましょう。
そこで、main.jspを作りながらこれをBootstrap対応にしていきます。まずはhtml5のひな形から開始
BootstrapはレスポンシブWEBデザインを実現するためのフレームワークで、 bootstrapサイトにあります。今回はインストールしない方法でやります。
Bootstrapサイトのgetting startのintroductionの 2.Include Bootstrap’s CSS and JS.にある、linkとscriptの2行をコピーして、貼り付けます
そのほか、bodyの内側に containerという名前のdivを作成し、各TABの中に class=で bootstrapのパラメータを書いていきます。
例えば、display-3は-1から-5までの大きさの中くらいの大きさ、bg-secondaryは2番目の色=灰色でbackgroudを塗りなさい。text-whiteで文字を白にするなどを設定できます。これらはCSSを書かずにHTMLの中にclassで指定するだけなので、プログラム的に記述出来てプログラムには分かりやすい書き方です。デザイナーには面倒でしょうけど。そして、DOCTYPEの前に、jspでUTF-8を宣言しておきます。これをしないと文字化けがおきます。
その他のやり方は、Bootstrapのdocumentを読んでください。
Formのある画面を作っていく
では、Bootstrapは作りながら覚えましょう。まず、formで囲みます。actionはMain.javaに渡したいので Main 。そしてinputで入力されたデータを POSTで渡したいので methodはPOSTにします。
そしてBootstrap的に、form-groupで囲んで、その中をlabelとinputで記述します。そこでclassをform-controlとして記述します。form-groupでまとめます。
そして、入力してみましょう。うまくいけば、main.jsp->Main.java->InsertLogic->InsertDAOとデータが渡り、MemoDataテーブルに1行書き込みができるはずです。
データ一覧を取得する流れを作る
さきほど、Main.javaの中でInsertLogicからInsertDAOを呼び出す流れを作りました。それと同じでMain.javaの中でListLogicからListDAOを呼び出す流れを作り、main.jspを呼び出すときはいつも一覧を付けて呼び出すように改造しましょう。
まず、ListDAOを作ります。
このプログラムでMemoDataテーブルの内容一覧をArrayListにしてくれます。さてこのプログラムを呼び出す一覧処理を代行するプログラム ListLogic.javaを書きます。
あとは、このロジックをMain.javaで呼び出せばOKです。まずは最初のGetの呼び出しで一覧をデータを添えてフォワードするように変更します。
合わせて、PostのInsertの時も一覧が必要なので、同じ流れにします。
追加部分だけ記述します。続いて、フォワードされた方のmain.jspを改造して、受け取ったArrayListをターブルで表示するところです。
なにもなければ、データがありませんと表示し、あればテーブルに表示します。
削除の流れを作ってみる
先ほどは、DAOから作って一覧を作りましたが、今度は逆に画面から作っていきましょう。さきほど作ったテーブル一覧の最後の列に削除のボタンを作り、各行に配置したボタンを押すと、Main.javaにGetで削除IDを送信するようにしてみましょう。
hrefでMain?delete=1とMainにGetを都バスと、Mainにparameterでdelete=1のデータが渡ります。ここを確認するために、Main.javaにprint文を入れて確認しましょう。
これでidが渡るようになるはずです。データが渡るか確認しましょう。
1番の消去を押すと、JavaScriptの確認が出て、OKを押すと、コンソールにdelete:1が表示されます。
では、DeleteDAOを作りましょう。InsertDAO.javaをコピーして、DELETEにするぐらいで、できます。
続いて、消去処理をDeleteLogic.javaで作ります。
続いて、このDeleteLogicをMain.javaから呼び出します。
Main.javaのdoGetにDeleteLogicを呼び出すところを作ります。最初にコールされたときはパラメータがありませんから、その時は無視して、deleteパラメータが来たら消去を実行して、一覧を返します。
今回は、ここまでで終了です。まだカテゴリーやステータスの対応が残っていますので、改造をしたい人はやってみてください。