投稿

1月, 2026の投稿を表示しています

1月22日(木)1コマ目

今日、やったこと [評価用課題作成]気象データ検索サイト 今日のホワイトボード 今日はひたすら課題作成でした。 次回は JavaScriptの同期・非同期処理について 

1月15日(木)1コマ目

今日、やったこと [練習問題] ニュース検索・編集サイト 今日のホワイトボード [練習問題] ニュース検索・編集サイト 正解例をあげておきます。 dto/Content.java 配布ファイルどおり。 dao/ContentDAO.java 配布ファイルどおり。 controller/NewsController.java index.html 配布ファイルとおり。 css/style.css 配布ファイルとおり。 js/news.js 次回は 評価用課題を作ってもらいます。

1月8日(木)1コマ目

今日、やったこと [おさらい]REST APIアプリケーション作成(前回のつづき) [練習問題]ニュース検索・編集サイト 今日のホワイトボード [おさらい]REST APIアプリケーション作成 前回はクライアント側の 従業員情報一覧表示 削除 まで作成。今日は、登録、変更を作成。 登録 <input>タグに入力された情報をPOSTコマンドで送信する。 HTMLファイルは前回と同じ。 employee.js 登録用関数insert()と、登録ボタンクリック時にinsert()関数呼び出しを追加。 変更 登録とほぼ同じような処理。 HTMLファイルは変更なし。 employee.js 変更用関数update()と、変更ボタンクリック時にupdate()関数呼び出しを追加。 [練習問題]ニュース検索・編集サイト 見た目は複雑そうに見えるが、1つ1つは今までと同じことをやっている。 次回は ニュース検索・編集サイト作成のつづき。 次々回に、評価用課題を作成してもらいます。

1月6日(火)3コマ目

イメージ
今日、やったこと  [おさらい]REST APIアプリケーション作成(前回のつづき) 今日のホワイトボード  [おさらい]REST APIアプリケーション作成 前回はサーバー側(API作成)を作成。 今日からクライアント側を作成。 サーバー側APIの確認 GETコマンドはWebブラウザのアドレス欄にURLを入力してリクエストすれば確認できる。 POST、PUT、DELETEコマンドはChromeに追加した「Talend API Tester」で確認。 〇POSTコマンド 登録用データはボディ部にJavaScriptのオブジェクト形式で送信。 キーはEmployeeクラスのフィールド名と一致させる。 図 サーバーAPI確認 POST 〇PUTコマンド POSTコマンドと同じように、変更用データはボディ部にJavaScriptのオブジェクト形式で送信。 図 サーバーAPI確認 PUT 〇DELETEコマンド 削除対象のIDだけ送信すればいいので、クエリパラメータで送信。 図 サーバーAPI確認 DELETE クライアント側 HTMLファイル、JavaScriptファイルを下図のように配置。 図 HTML、CSS、JavaScriptの配備 段階をおって作成。 第1段階 従業員情報を全件検索して、表形式で表示。 第2段階 従業員一覧表の各行に選択ボタンを追加。選択ボタンをクリックすると、該当従業員の情報が画面下部に表示される。 第3段階 削除ボタンをクリックすると、選択された従業員が削除される。 クライアント 第1段階 まずは、全件検索した結果を表形式で表示。 HTMLファイル(index.html) JavaScriptファイル(employee.js) クライアント 第2段階 従業員一覧表の各行に選択ボタンを追加。 選択ボタンクリック時に、選択された行の従業員情報を画面下部に表示。 選択ボタンは以前作成したサンプルの削除でも同じようなものを作成済み。 図 選択ボタン HTMLファイル(index.html) Ja...

1月5日(月)2コマ目

今日、やったこと [おさらい]REST APIアプリケーション作成  今日のホワイトボード [おさらい]REST APIアプリケーション作成  冬休み前まで、ちまちまとやっていたREST APIのアプリケーションを作成。 忘れていると思われるので、ちまちまとおさらい。 プロジェクト作成 ①プロジェクトのひな形をコピー 共有フォルダにある"sample"フォルダをEclipseのワークスペースフォルダにコピー。 フォルダ名を"sample"から変更。これがプロジェクト名に。 ②settings.gradleファイル編集 ”rootProject.name”を①で変更したフォルダ名に。 ③Eclipse起動、コピーしたプロジェクトをインポート Employeeクラス、EmployeeDAOクラス作成 提供済み。 一応、ソースコードをあげておきます。 [DTOクラス]dto/Employee.java [DAOクラス]dao/EmployeeDAO.java EmployeeControllerクラス作成 クライアントからのリクエストを受け付けるコントローラクラス。 アノテーションがいっぱいあるが、役割をおさえておくこと。 次回は 作成したAPIの確認とクライアント側(HTML、JavaScript)の作成。