Student Affairs Website Project

Website Description

This website is made for the staff of student affairs at Cairo University - Faculty of Computers and Artificial Intelligence.

The project consists of 8 web pages in total.

Main Page

• A screenshot from the page:

• This is the main interface for all the course projects we choose from the student affairs system project to design and implement.
• You can press on the student affairs system sentence to continue to the actual project.

Home Page

• A screenshot from the page:

• This is the main interface for the student affairs system project.

Add Student Page

• A screenshot from the page:

• An employee can add a new student to the database using a form including the:
  • name
  • ID
  • GPA
  • email
  • date of birth
  • gender
  • status (Active or Inactive)
  • current level
  • department
  • mobile number

Search/Update/Delete Student Page

• A screenshot from the page:

• An employee can show all active students and search for a specific student by his name.
• An employee can select a specific student and either delete or edit this student's information or assign a department for him.

Edit Student Page

• A screenshot from the page:

• An employee enters this page after selecting a specific student from the Search/Update/Delete Student Page and choosing the edit/delete option.
• An employee can either update the information of the selected student or delete the student from the database.

Select Department Page

• A screenshot from the page:

• An employee enters this page after selecting a specific student from the Search/Update/Delete Student Page and choosing the select department option.
• An employee can assign a specific department for the selected student whose level is greater than or equal to 3.

Show All Page

• A screenshot from the page:

• An employee can show all Active or Inactive students.
• An employee can filter students' information to a specific set of information.
• An employee can change the status for a selected student to become either Active or Inactive.

About Page

• A screenshot from the page:

• All team members are shown on this page along with the supervisors professors.

Dark mode

Project Phases

First Phase

Project Requirements

- Build the main pages using HTML ( main skeleton )

Working steps

- Website planning 
- UI/UX design on adobe xd 
- HTML

Second Phase

Project Requirements

- Style the pages with CSS 
- Write JavaScript to make user interaction  

Working steps

- Refine HTML 
- CSS 
- JavaScript 

Third and Final Phase

Project Requirements

- Build the Backend with the Django framework

Working steps

- Refine HTML, CSS, JS 
- Add Ajax 
- Work on the dark mode version 
- Design SQL Database for the project and integrate to project ( SQLite )
- Build a backend with Django 

Setting up the environment 🛠

1. Make sure python v3.7 or higher is installed

- To get the python version installed Execute the following:

$ python --version
Python 3.9.6

2. Make Sure Git is installed

- To get the git version installed Execute the following:

$ git --version
git version 2.28.0.windows.1

3. Execute the following commands in your terminal after changing your directory to the desired path

$ mkdir project && cd project
$ python -m venv venv

For Windows Users:

$ venv\Scripts\activate

For Linux Users:

$ source venv/bin/activate

Then

$ git clone https://github.com/BemwaMalak/Student_Affairs_System.git && cd Student_Affairs_System
$ pip install -r requirements.txt

These are the credentials for Django admin super user:
username: admin
password: 123