MERN School Management System

SISTEM MANAJEMEN SEKOLAH

Sederhanakan manajemen sekolah, organisasi kelas, dan tambahkan siswa dan pengajar.
Lacak kehadiran dengan lancar, nilai kinerja, dan berikan umpan balik.
Akses catatan, lihat tanda, dan komunikasikan dengan mudah.

[Video Youtube](https://youtu.be/ol650KwQkgY?si=rKcboqSv3n-e4UbC)

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

Tentang

Sistem Manajemen Sekolah adalah aplikasi berbasis web yang dibangun menggunakan tumpukan MERN (MongoDB, Express.js, React.js, Node.js). Hal ini bertujuan untuk mengefektifkan manajemen sekolah, pengorganisasian kelas, dan memfasilitasi komunikasi antara siswa, guru, dan administrator.

Fitur

• Peran Pengguna: Sistem mendukung tiga peran pengguna: Admin, Guru, dan Siswa. Setiap peran memiliki fungsi dan tingkat akses tertentu.

• Dasbor Admin: Administrator dapat menambahkan siswa dan guru baru, membuat kelas dan mata pelajaran, mengelola akun pengguna, dan mengawasi pengaturan sistem.

• Pelacakan Kehadiran: Guru dapat dengan mudah mencatat kehadiran di kelas mereka, menandai siswa hadir atau tidak, dan membuat laporan kehadiran.

• Penilaian Kinerja: Guru dapat menilai kinerja siswa dengan memberikan nilai dan umpan balik. Siswa dapat melihat nilai mereka dan melacak kemajuan mereka dari waktu ke waktu.

• Visualisasi Data: Siswa dapat memvisualisasikan data kinerja mereka melalui bagan dan tabel interaktif, membantu mereka memahami kinerja akademik mereka secara sekilas.

• Komunikasi: Pengguna dapat berkomunikasi dengan mudah melalui sistem. Guru dapat mengirimkan pesan kepada siswa dan sebaliknya, mendorong komunikasi dan kolaborasi yang efektif.

Teknologi yang Digunakan

• Bagian depan: React.js, Material UI, Redux
• Bagian Belakang: Node.js, Express.js
• Basis Data: MongoDB

Instalasi

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

Buka 2 terminal di jendela/tab terpisah.

Terminal 1: Menyiapkan Backend

 cd backend
npm install
npm start

Buat file bernama .env di folder backend. Di dalamnya tulis ini:

MONGO_URL = mongodb://127.0.0.1/school

Jika Anda menggunakan MongoDB Compass, Anda dapat menggunakan tautan basis data ini tetapi jika Anda menggunakan MongoDB Atlas, alih-alih tautan ini, tulis tautan basis data Anda sendiri.

Terminal 2: Menyiapkan Frontend

 cd frontend
npm install
npm start

Sekarang, navigasikan ke localhost:3000 di browser Anda. API Backend akan berjalan di localhost:5000 .

Solusi Kesalahan

Anda mungkin mengalami kesalahan saat mendaftar, baik kesalahan jaringan atau kesalahan pemuatan yang berlangsung tanpa batas waktu.

Untuk mengatasinya:

1. Navigasikan ke frontend > .env .

2. Batalkan komentar pada baris pertama. Setelah itu, hentikan terminal frontend. Buka terminal baru dan jalankan perintah berikut:

 cd frontend
npm start

Setelah menyelesaikan langkah-langkah ini, coba daftar lagi. Jika masalah masih berlanjut, ikuti langkah-langkah tambahan berikut untuk mengatasinya:

1. Navigasikan ke file frontend > src > redux > userRelated > userHandle.js .

2. Tambahkan baris berikut setelah pernyataan import:

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

3. Ganti semua instance process.env.REACT_APP_BASE_URL dengan REACT_APP_BASE_URL .

PENTING: Ulangi proses yang sama untuk semua file lain dengan "Handle" di namanya.

Misalnya di folder redux ada folder lain seperti userRelated . Di folder teacherRelated , Anda akan menemukan file bernama teacherHandle . Demikian pula, folder lain berisi file dengan "Handle" di namanya. Pastikan untuk memperbarui file-file ini juga.

Masalah muncul karena file .env di frontend mungkin tidak berfungsi untuk semua pengguna, sementara itu berfungsi untuk saya.

Selain itu:

• Saat menguji proyek, mulailah dengan mendaftar daripada masuk sebagai tamu atau menggunakan login biasa jika Anda belum membuat akun.

  Untuk menggunakan mode tamu, navigasikan ke LoginPage.js dan berikan email dan kata sandi dari proyek yang sudah dibuat di sistem. Ini menyederhanakan proses login, dan setelah membuat akun, Anda dapat menggunakan kredensial Anda.

Langkah-langkah ini akan mengatasi kesalahan jaringan di frontend. Jika masalah terus berlanjut, jangan ragu untuk menghubungi saya untuk bantuan lebih lanjut.

Hapus Fitur Solusi Tidak Berfungsi

Saat mencoba menghapus item, Anda mungkin menemukan pesan popup yang menyatakan, "Maaf, fungsi hapus telah dinonaktifkan untuk saat ini." Pesan ini muncul karena saya telah menonaktifkan fungsi hapus di situs langsung saya untuk mencegah tamu menghapus item. Jika Anda ingin mengaktifkan fitur hapus, ikuti langkah-langkah berikut:

1. Navigasikan ke file frontend > src > redux > userRelated > userHandle.js .

2. Jika Anda belum membuat perubahan apa pun, Anda harus menemukan fungsi deleteUser di baris 71. Fungsi ini dapat dikomentari. Ini mungkin terlihat seperti ini:

 // 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));
//     }
// }

3. Batalkan komentar di atas fungsi deleteUser dan beri komentar pada fungsi deleteUser yang sedang berjalan dari baris 87 hingga baris 90 :

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

4. Jika sebelumnya Anda telah memodifikasi kode, Anda mungkin menemukan fungsi deleteUser di baris yang berbeda. Dalam hal ini, batalkan komentar pada kode asli dan beri komentar pada kode saat ini.

5. Selanjutnya, navigasikan ke folder frontend > src > pages > admin . Di sini, Anda akan menemukan folder berbeda yang diberi akhiran "Terkait". Buka setiap folder dan cari file yang diawali dengan "Tampilkan".

6. Buka setiap file dengan "Show" sebagai awalan dan cari fungsi bernama deleteHandler . Misalnya:

 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"));
  //   })
}

7. Ini adalah contoh cuplikan dari ShowClasses . Di file lain dengan "Tampilkan" sebagai awalan, mungkin berbeda.

8. Batalkan komentar pada kode yang diberi komentar di dalam fungsi deleteHandler dan beri komentar pada kode yang ada. Seharusnya terlihat seperti ini:

 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" ) ) ;
    } )
}

9. Ulangi langkah-langkah ini untuk setiap file lainnya. Dalam beberapa kasus, fungsi deleteHandler juga dapat ditemukan di file yang diawali dengan "View". Periksa file-file itu dan ulangi proses yang sama.

Jika masalah terus berlanjut, jangan ragu untuk menghubungi saya untuk bantuan lebih lanjut.

Jangan lupa untuk meninggalkan bintang untuk proyek ini jika menurut Anda solusinya bermanfaat. Terima kasih!

Penyebaran

• Render - sisi server
• Netlify - sisi klien