MERN School Management Systemのダウンロード - MERN School Management Systemソースコードのダウンロード

MERN School Management System

その他のカテゴリー

1.0.0

ダウンロード

学校管理システム

学校管理、クラス編成を合理化し、生徒と教員を追加します。
出席状況をシームレスに追跡し、パフォーマンスを評価し、フィードバックを提供します。
記録にアクセスし、マークを表示し、コミュニケーションを簡単に行えます。

【Youtube動画】(https://youtu.be/ol650KwQkgY?si=rKcboqSv3n-e4UbC)

[LinkedIn](https://www.linkedin.com/in/yogndr/)

について

学校管理システムは、MERN (MongoDB、Express.js、React.js、Node.js) スタックを使用して構築された Web ベースのアプリケーションです。学校管理やクラス編成を合理化し、生徒、教師、管理者の間のコミュニケーションを促進することを目的としています。

特徴

ユーザーの役割:システムは、管理者、教師、学生の 3 つのユーザーの役割をサポートします。各役割には特定の機能とアクセスレベルがあります。
管理者ダッシュボード:管理者は、新しい生徒や教師の追加、クラスや科目の作成、ユーザーアカウントの管理、システム設定の監視を行うことができます。
出席状況の追跡:教師は、クラスの出席状況を簡単に把握し、生徒を出席または欠席としてマークし、出席レポートを作成できます。
パフォーマンス評価:教師は、採点とフィードバックを提供することで生徒のパフォーマンスを評価できます。生徒は自分の成績を確認し、時間の経過とともに進捗状況を追跡できます。
データの視覚化:学生はインタラクティブなグラフや表を通じて自分の成績データを視覚化し、学業成績を一目で理解するのに役立ちます。
コミュニケーション:ユーザーはシステムを通じて簡単にコミュニケーションできます。教師は生徒にメッセージを送信したり、その逆に教師が生徒にメッセージを送信したりして、効果的なコミュニケーションとコラボレーションを促進できます。

使用されている技術

フロントエンド: React.js、マテリアル UI、Redux
バックエンド: Node.js、Express.js
データベース: MongoDB

インストール

git clone https://github.com/Yogndrr/MERN-School-Management-System.git

2 つのターミナルを別々のウィンドウ/タブで開きます。

ターミナル 1: バックエンドのセットアップ

 cd backend
npm install
npm start

バックエンドフォルダーに .env というファイルを作成します。その中にこれを書きます:

MONGO_URL = mongodb://127.0.0.1/school

MongoDB Compass を使用している場合は、このデータベースリンクを使用できますが、MongoDB Atlas を使用している場合は、このリンクの代わりに独自のデータベースリンクを作成します。

ターミナル 2: フロントエンドのセットアップ

 cd frontend
npm install
npm start

次に、ブラウザでlocalhost:3000に移動します。バックエンド API はlocalhost:5000で実行されます。

エラーの解決策

サインアップ中に、ネットワークエラーまたは無期限に続く読み込みエラーのいずれかのエラーが発生する場合があります。

それを解決するには:

frontend > .envファイルに移動します。
最初の行のコメントを外します。その後、フロントエンド端末を終了します。新しいターミナルを開き、次のコマンドを実行します。

 cd frontend
npm start

これらの手順を完了した後、再度サインアップしてみてください。問題が解決しない場合は、次の追加手順に従って問題を解決してください。

frontend > src > redux > userRelated > userHandle.jsファイルに移動します。
import ステートメントの後に次の行を追加します。

 const REACT_APP_BASE_URL = "http://localhost:5000" ;

process.env.REACT_APP_BASE_URLのすべてのインスタンスをREACT_APP_BASE_URLに置き換えます。

重要:名前に「Handle」が含まれる他のすべてのファイルに対して同じプロセスを繰り返します。

たとえば、 reduxフォルダー内には、 userRelatedなどの他のフォルダーがあります。 teacherRelatedフォルダー内に、 teacherHandleという名前のファイルがあります。同様に、他のフォルダーには名前に「Handle」が含まれるファイルが含まれています。これらのファイルも必ず更新してください。

この問題は、フロントエンドの.envファイルがすべてのユーザーに対して機能しない可能性があるために発生しますが、私にとっては機能します。

さらに：

プロジェクトをテストするときは、ゲストとしてログインしたり、まだアカウントを作成していない場合は通常のログインを使用したりするのではなく、サインアップすることから始めます。
ゲストモードを使用するには、 LoginPage.jsに移動し、システム内にすでに作成されているプロジェクトから電子メールとパスワードを入力します。これによりログインプロセスが簡素化され、アカウントの作成後に資格情報を使用できるようになります。

これらの手順により、フロントエンドのネットワークエラーが解決されるはずです。問題が解決しない場合は、お気軽にお問い合わせください。

削除機能が機能しない解決策

アイテムを削除しようとすると、「申し訳ありませんが、削除機能は現在無効になっています。」というポップアップメッセージが表示される場合があります。このメッセージは、ゲストがアイテムを削除できないようにライブサイトの削除機能を無効にしているために表示されます。削除機能を有効にしたい場合は、次の手順に従ってください。

frontend > src > redux > userRelated > userHandle.jsファイルに移動します。
何も変更していない場合は、71 行目にdeleteUser関数があるはずです。この関数はコメントアウトされている可能性があります。次のようになります。

 // export const deleteUser = (id, address) => async (dispatch) => {
//     dispatch(getRequest());

//     try {
//         const result = await axios.delete(`${process.env.REACT_APP_BASE_URL}/${address}/${id}`);
//         if (result.data.message) {
//             dispatch(getFailed(result.data.message));
//         } else {
//             dispatch(getDeleteSuccess());
//         }
//     } catch (error) {
//         dispatch(getError(error));
//     }
// }

deleteUser関数の上のコメントを外し、現在実行中の 87 行目から 90 行目までのdeleteUser関数をコメントアウトします。

 export const deleteUser = ( id , address ) => async ( dispatch ) => {
    dispatch ( getRequest ( ) ) ;
    dispatch ( getFailed ( "Sorry the delete function has been disabled for now." ) ) ;
}

以前にコードを変更したことがある場合は、別の行にdeleteUser関数が見つかる可能性があります。この場合、元のコードのコメントを解除し、現在のコードをコメントアウトします。
次に、 frontend > src > pages > adminフォルダーに移動します。ここには、「関連」という接尾辞が付いたさまざまなフォルダーが表示されます。各フォルダーを開いて、「Show」という接頭辞が付いているファイルを見つけます。
プレフィックスとして「Show」を付けて各ファイルを開き、 deleteHandlerという名前の関数を検索します。例えば：

 const deleteHandler = ( deleteID , address ) => {
  console . log ( deleteID ) ;
  console . log ( address ) ;
  setMessage ( "Sorry, the delete function has been disabled for now." ) ;
  setShowPopup ( true ) ;
  // dispatch(deleteUser(deleteID, address))
  //   .then(() => {
  //     dispatch(getAllSclasses(adminID, "Sclass"));
  //   })
}

これはShowClassesのスニペットの例です。接頭辞として「Show」が付いている他のファイルでは、異なる場合があります。
deleteHandler関数内のコメントアウトされたコードのコメントを解除し、既存のコードをコメントアウトします。これは次のようになります。

 const deleteHandler = ( deleteID , address ) => {
  // console.log(deleteID);
  // console.log(address);
  // setMessage("Sorry, the delete function has been disabled for now.");
  // setShowPopup(true);
  dispatch ( deleteUser ( deleteID , address ) )
    . then ( ( ) => {
      dispatch ( getAllSclasses ( adminID , "Sclass" ) ) ;
    } )
}