貸出管理Ｗｅｂアプリ

備品の貸出管理Webアプリ

使用言語

HTML/CSS、JavaScript、PHP、MySQL

使用ライブラリ

jQuery

制作環境

XAMPP、Visual Studio Code

使用テンプレート

無料のホームページテンプレート配布サイトからテンプレートをお借りしました。

配布サイト：https://template-party.com/index.html

使用テンプレート：https://template-party.com/template/tp_biz52/tp_biz52_black/

概要

備品の貸出、返却を行うことができるWebアプリです。

登録されている備品の貸出、返却の申請を行うことができます。貸出は登録されている利用者に限り可能です。

貸出を行う備品、利用者の登録も行うことができます。

機能紹介

①貸出・返却機能

カテゴリや備品名から、登録されている備品を検索し、貸出を行うことができます。

貸し出す備品を選択後、利用者、貸出日、返却予定日などの申請を行い、貸出を実行します。

返却ページに移動すると、未返却の備品が表示されているので、備品を選択し、返却日を登録することで返却を実行できます。

②登録機能

貸出をする備品、利用者を登録できます。

登録を実行すると登録内容が表示されます。

後述のリストで登録されている内容が確認できます。

③リスト表示機能

貸出の状況や記録、登録されている備品や利用者の一覧が確認できます。

貸出状況：貸出中の備品

貸出記録：過去に貸し出した備品の一覧

貸出品リスト：登録されている備品の一覧

利用者リスト：登録されている利用者の一覧

④ドロップボックス連動

貸出のページや、備品登録の画面で、カテゴリを選択する際、2つのドロップダウンボックスを連動させ、カテゴリを変更したらその内容に合わせて小カテゴリのボックスの内容が変更されるように設定しました。

ここの機能を実装するためにJavaScriptのライブラリであるjQueryを利用しています。

⑤メニューバー内の詳細メニューの表示

画面左のメニューバーにカーソルを合わせると、メニューが開くようになっていますが、そのうち、「リスト」「登録」の項目にカーソルを合わせると詳細メニューが開くように設定しました。

詳細メニューは薄い水色で表示され、通常のメニューと判別できるようになっています。

成果と展望

まだ不十分な点はありますが、貸出管理アプリとして必要な機能は実装することができ、PHPについても学ぶことが出来ました。

改善点や実装が間に合わなかったの機能もあるので、今後も改善をしていきたいです。