This article will be all about the system that we are going to develop for the Group Project of the Application Frameworks module for 3rd year 1st semester. Basic Functionality that will be delivered through this system are as follows.
- There are 3 user roles admin, instructor and students.
- Admin can create other admins and instructors. Students need to sign up to the system.
- Once admin creates an instructor, it should be notified to the instructor via email.
- Admins can create courses and add instructors to course. Instructors get notifications on new course creations when logged in to the system. After instructor accept the course, Students can join the course.
- Instructors can create assignments and exams for a course with due dates. Student should get notifications on these. Instructor can edit these due dates (only to a date than a original one).
- Students can upload files for assignments and exams before the due date. Instructor should be able to view these files and enter marks for the assignment or exam. Student will get notified on these markings.
- System should be secured and cannot be accessed without proper authentication.
- Authorization should be maintained and students cannot create, edit assignments or exams.
Technology Stack used…
To develop this system, the following technologies/tools were recommended since they were during the module lectures.
- HTML/JavaScript: To design and program the front end
- ReactJS: A JavaScript Front-end library for designing reactive user interfaces.
- NodeJS: To develop the Back-end
- ExpressJS: A framework to develop web applications using NodeJS.
- Spring Boot Framework: Java Web framework to develop Web applications.
- JSON based Web Services: To communicate between Front-end and Back-end
- NoSQL Database: MongoDB will be used as the Database.
The backend service should be an API running JSON based web services. For this project, the backend will be devloped as a RESTful web service.
Workload Distribution…
Four main functionalities of this project this were identified as follows.
- Admin: Responsible for adding new admins and managing the privileges for each admin along with administrating the whole system.
- Course Management: Handling course related functionalities starting from basic CRUD operations to allocating students for each course.
- Student Management: Management of Students by granting permission to enroll on courses, uploading assignments and setting a student profile.
- Instructor Management: This functionality is responsible for Adding new instructors to the system, Assigning courses for each instructor and creating assignments and exams for students.
I was responsible for handling the Admin part of the project. Let’s take a look at some of the interfaces that are finished up to now and the front-end source code.
Admin Dashboard
Student Management
Student Management Settings
Instructor Management
Instructor Management Settings
Now let’s take a look at the front-end source of those interfaces.
navbar.js
import React, {Component} from "react";
// import ReactDom from 'react-dom';
// import Students from '../components/Students';
import {Link, Router, Route} from "react-router-dom";
import Aflogo from '../aflogo.svg';
import "bootstrap/dist/css/bootstrap.css";
import '../App.css';
import Students from "../components/Students";
class NavBar extends Component{
render(){
return(
<nav className="navbar navbar-expand-lg navbar-dark bg-secondary">
<a className="navbar-brand" href='#'>
<img className="App-logo" src={Aflogo}/>
</a>
<button className="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav m-auto">
<li className="nav-item active">
<Link className="nav-link text-white ml-4" to='/students'>
<i className="fas fa-user-graduate"></i> Student Corner <span className="sr-only">(current)</span>
</Link>
</li>
<li className="nav-item">
<Link className="nav-link text-white ml-4" to='/courses'>
<i className="fas fa-book"></i> Courses
</Link>
</li>
<li className="nav-item">
<a className="nav-link text-white ml-4" href="#">
<i className="fas fa-user-circle"></i> Profile
</a>
</li>
</ul>
<form className="form-inline my-2 my-lg-0">
<input className="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"></input>
<button className="btn btn-outline-dark my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
)
}
}
export default NavBar;
SideNav.jsx
import React, {Component} from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import Dialog from '../images/Dialog.png';
import {Link} from "react-router-dom";
export default class SideNav extends Component{
constructor(props) {
super(props);
}
render() {
return (
<div style={{float: 'left', width: '15%', height: '1000px'}}>
<div className='bg-dark text-white text-center'>
<img src={Dialog} alt=""/>
<h3>Ishan</h3>
</div>
<ul className='nav flex-column bg-dark' id='sidenav'>
<li className='nav-item'>
<a href="#" className='nav-link'>
<i className="fas fa-user-plus navbar-brand"></i>Â <span>Admins</span>
</a>
</li>
<li className='nav-item'>
<a href="#" className='nav-link'>
<i className="fas fa-book navbar-brand"></i>Â <span>Notices</span>
</a>
</li>
<li className='nav-item'>
<a href="#" className='nav-link'>
<i className="far fa-calendar navbar-brand"></i>Â <span>Events</span>
</a>
</li>
<li className='nav-item'>
<a href="#" className='nav-link'>
<i className="fas fa-tools navbar-brand"></i>Â <span>Settings</span>
</a>
</li>
<li className='nav-item'>
<Link to='/instructors' className='nav-link'>
<i className="fas fa-chalkboard-teacher navbar-brand"></i>Â <span>Instructors</span>
</Link>
</li>
<li className='nav-item'>
<a href="#" className='nav-link'>
<i className="fas fa-bell navbar-brand"></i>Â <span>Notifications</span>
</a>
</li>
</ul>
</div>
);
}
}
MainAdmin.jsx
import React, {Component} from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import Dialog from '../images/Dialog.png';
import Sampath from '../images/Sampath.png';
import Emblem from '../images/Emblem.png';
import NavBar from "../App";
import SideNav from '../nav-components/SideNav';
import {BrowserRouter as Router} from "react-router-dom";
export default class MainAdmin extends Component{
constructor(props) {
super(props);
}
render() {
return (
<div>
{/*<NavBar />*/}
{/*<SideNav/>*/}
<div className='container'>
<div className='row'>
<h1 className='modal-header'>Admin Dashboard</h1>
</div>
<div className='row'>
<div className='col-4'>
<div className='card'>
<div className='card-header text-truncate'>
<h2 className='modal-header'>Instructors</h2>
<img src={Dialog} alt=""/>
</div>
<div className='card-body'>
<table className='table table-borderless'>
<tbody>
<tr>
<td>No. of Instructors</td>
<td>10</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div className='col-4'>
<div className='card'>
<div className='card-header text-truncate'>
<h2 className='modal-header'>Students</h2>
<img src={Sampath} alt=""/>
</div>
<div className='card-body'>
<table className='table table-borderless'>
<tbody>
<tr>
<td>No. of Students</td>
<td>10</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div className='col-4'>
<div className='card'>
<div className='card-header text-truncate'>
<h2 className='modal-header'>Courses</h2>
<img src={Emblem} alt=""/>
</div>
<div className='card-body'>
<table className='table table-borderless'>
<tbody>
<tr>
<td>No. of Courses</td>
<td>10</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<hr/>
<div className='row'>
<div className='col-5'>
<div className='card'>
<div className='card-header text-truncate'>
<h1 className='modal-header'>Upcoming Events</h1>
</div>
<div className='card-body' id='event'>
<div className='card form-group text-truncate'>
<h5>Event 1</h5>
<p>This is a good event</p>
<div className='text-right'>
<button type='button' className='btn btn-primary'>Update</button>
<button type='button' className='btn btn-danger'>Delete</button>
</div>
</div>
<div className='card form-group text-truncate'>
<h5>Event 2</h5>
<p>This is a good event</p>
<div className='text-right'>
<button type='button' className='btn btn-primary'>Update</button>
<button type='button' className='btn btn-danger'>Delete</button>
</div>
</div>
<div className='card form-group text-truncate'>
<h5>Event 3</h5>
<p>This is a good event</p>
<div className='text-right'>
<button type='button' className='btn btn-primary'>Update</button>
<button type='button' className='btn btn-danger'>Delete</button>
</div>
</div>
<button type='button' className='btn btn-success'>Add Event</button>
</div>
</div>
</div>
<div className='col-5'>
<div className='card'>
<div className='card-header text-truncate'>
<h1 className='modal-header'>Notice Board</h1>
</div>
<div className='card-body' id='notice'>
<div className='card form-group'>
<h5>Notice 1</h5>
<p>This is a good notice</p>
<div className='text-right'>
<button type='button' className='btn btn-primary'>Update</button>
<button type='button' className='btn btn-danger'>Delete</button>
</div>
</div>
<div className='card form-group'>
<h5>Notice 2</h5>
<p>This is a good notice</p>
<div className='text-right'>
<button type='button' className='btn btn-primary'>Update</button>
<button type='button' className='btn btn-danger'>Delete</button>
</div>
</div>
<div className='card form-group'>
<h5>Notice 3</h5>
<p>This is a good notice</p>
<div className='text-right'>
<button type='button' className='btn btn-primary'>Update</button>
<button type='button' className='btn btn-danger'>Delete</button>
</div>
</div>
<button type='button' className='btn btn-success'>Add Notice</button>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
}
Students.jsx
import React, {Component} from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import '../App.css';
export default class Students extends Component{
constructor(props) {
super(props);
this.state = {
spec: '',
fname: '',
lname: '',
year: '',
faculty: '',
specializations: [],
isSpecSelected: false
}
}
handleChange = (e) => {
this.setState({[e.target.name]: e.target.value});
}
handleFacultyChange = (e) => {
let faculty = e.target.value;
if (faculty !== '') {
this.setState({faculty: faculty});
const spec1 = [
'Software Engineering',
'Cyber Secutity',
'Data Science',
'Information Technology'
];
const spec2 = [
'Accounting',
'Business Studies',
'E_Commerce',
'Economy'
];
const spec3 = [
'Mechanical',
'Electircal',
'Civil',
'Textile'
];
const spec4 = [
'LLB',
'forensics'
];
switch (faculty) {
case 'FOC': this.setState({specializations: spec1})
break;
case 'FOB': this.setState({specializations: spec2})
break;
case 'FOE': this.setState({specializations: spec3})
break;
case 'FOL': this.setState({specializations: spec4})
break;
}
}
}
handleSubmit = (e) => {
e.preventDefault();
}
handleClick = (e) => {
e.preventDefault();
let ref = e.target.href;
let refArray = ref.split("#", 2); //extracting the id from the 'href'value
let clickedId = refArray[1];
const divElem = document.getElementById(clickedId); //getting the corresponding element with that id
divElem.classList.remove('fade'); //removing the 'fade' class name from that element
divElem.classList.add('active'); //adding 'active' class name from that element
//after that process is successful, we need to make sure other div elements are invisible
const classNames = document.getElementsByClassName('tab-pane'); //getting all the elements with the given class name
for (let divElem in classNames) {
if (classNames[divElem].id !== undefined) { //checking whether id is available for the given div element
let id = classNames[divElem].id;
if (id !== clickedId) { //to make sure that selected id is not the element we wish to make visible in the browser
classNames[divElem].classList.remove('active');
classNames[divElem].classList.add('fade'); //make other div elements invisible
}
}
}
}
render() {
return (
<div className='container'>
<div className='row'>
<div className='col-12'>
<nav className='navbar navbar-expand-lg justify-content-center bg-primary'>
<ul className='nav nav-tabs'>
<li className='nav-item'>
<a href="#add_student" data-toggle="tab" className='nav-link navbar-brand text-white' onClick={this.handleClick}>Add Students</a>
</li>
<li className='nav-item'>
<a href="#update_student" data-toggle="tab" className='nav-link navbar-brand text-white' onClick={this.handleClick}>Update Students</a>
</li>
<li className='nav-item'>
<a href="#settings" data-toggle="tab" className='nav-link navbar-brand text-white' onClick={this.handleClick}>Settings</a>
</li>
</ul>
</nav>
</div>
</div>
<div className='tab-content'>
<div className='tab-pane container active' id='add_student'>
<div className='card' style={{width: '100%'}}>
<div className='card-header bg-light'>
<h3 className='modal-header'>Add Student</h3>
</div>
<form method='POST' name='add_student_form' onSubmit={this.handleSubmit}>
<div className='card-columns'>
{/*fname column*/}
<div className='card'>
<div className='card-body'>
<div className='form-group'>
<label htmlFor="fname">First Name</label><span className='text-danger'>*</span>
<input type="text" name='fname' className='form-control' placeholder='ishan' onChange={this.handleChange} required/>
</div>
</div>
</div>
{/*lname column */}
<div className='card'>
<div className='card-body'>
<div className='form-group'>
<label htmlFor="lname">Last Name</label><span className='text-danger'>*</span>
<input type="text" name='lname' className='form-control' placeholder='ishan' onChange={this.handleChange} required/>
</div>
</div>
</div>
{/*year column*/}
<div className='card'>
<div className='card-body'>
<div className='form-group'>
<label htmlFor="year">Year</label><span className='text-danger'>*</span>
<select name="year" id="year" className='form-control' onChange={this.handleChange} required>
<option value="">-----</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
</div>
</div>
{/*faculty column*/}
<div className='card'>
<div className='card-body'>
<div className='form-group'>
<label htmlFor="faculty">Faculty</label><span className='text-danger'>*</span>
<select name="faculty" id="faculty" className='form-control' onChange={this.handleFacultyChange} required>
<option value="">-----</option>
<option value="FOC">Faculty of Computing</option>
<option value="FOB">Faculty of Business</option>
<option value="FOE">Faculty of Engineering</option>
<option value="FOL">Faculty of Law</option>
</select>
</div>
</div>
</div>
{/*specilaization column*/}
<div className='card'>
<div className='card-body'>
<div className='form-group'>
<label htmlFor="spec">Specialization</label><span className='text-danger'>*</span>
<select name="spec" id="spec" className='form-control' onChange={this.handleChange} required>
<option value="">-----</option>
{this.state.specializations.map(spec =>
<option value={spec}>{spec}</option>
)}
</select>
</div>
</div>
</div>
</div>
<button type='submit' className='btn btn-success'>Submit</button>
</form>
</div>
</div>
{/*update student*/}
<div className='tab-pane container fade' id='update_student'>
<div className='card'>
<div className='card-header bg-light'>
<h3 className='modal-header'>Update Student</h3>
</div>
</div>
</div>
{/*settings*/}
<div className='tab-pane container fade' id='settings'>
<div className='card'>
<div className='card-header bg-light'>
<h3 className='modal-header'>Settings</h3>
</div>
<div className='card-body'>
<div className='card-columns'>
{/*faculty selection*/}
<div className='card'>
<div className='card-body'>
<div className='form-group'>
<label htmlFor="faculty_select">Faculty</label>
<select name="faculty_select" id="faculty_select" className='form-control'>
<option value="">-----</option>
<option value="Faculty of Computing">Faculty of Computing</option>
<option value="Faculty of Business">Faculty of Business</option>
<option value="Faculty of Engineering">Faculty of Engineering</option>
<option value="Faculty of Law">Faculty of Engineering</option>
</select>
</div>
</div>
</div>
{/*Student ID setting*/}
<div className='card'>
<div className='card-body'>
<div className='form-group'>
<label htmlFor="id_setting">ID starts with</label>
<select name="id_setting" id="id_setting" className='form-control'>
<option value="">-----</option>
<option value="IT">IT</option>
<option value="BM">BM</option>
<option value="EN">EN</option>
<option value="LW">LW</option>
</select>
</div>
</div>
</div>
{/*ID limit*/}
<div className='card'>
<div className='card-body'>
<div className='form-group'>
<label htmlFor="id_limit">ID Limit</label>
<input type="number" className='form-control' name='id_limit' id='id_limit'/>
</div>
</div>
</div>
</div>
<button type='submit' className='btn btn-success'>Submit</button>
</div>
</div>
<div className='card'>
<div className='card-header'>
<h3 className='modal-header'>Current Settings</h3>
</div>
</div>
</div>
</div>
</div>
);
}
}
Instructors.jsx
import React, {Component} from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import '../App.css';
export default class Instructors extends Component{
constructor(props) {
super(props);
this.state = {
spec: '',
fname: '',
lname: '',
year: '',
faculty: '',
specializations: [],
isSpecSelected: false
}
}
handleChange = (e) => {
this.setState({[e.target.name]: e.target.value});
}
handleFacultyChange = (e) => {
let faculty = e.target.value;
if (faculty !== '') {
this.setState({faculty: faculty});
const spec1 = [
'Software Engineering',
'Cyber Secutity',
'Data Science',
'Information Technology'
];
const spec2 = [
'Accounting',
'Business Studies',
'E_Commerce',
'Economy'
];
const spec3 = [
'Mechanical',
'Electircal',
'Civil',
'Textile'
];
const spec4 = [
'LLB',
'forensics'
];
switch (faculty) {
case 'FOC': this.setState({specializations: spec1})
break;
case 'FOB': this.setState({specializations: spec2})
break;
case 'FOE': this.setState({specializations: spec3})
break;
case 'FOL': this.setState({specializations: spec4})
break;
}
}
}
handleSubmit = (e) => {
e.preventDefault();
}
handleClick = (e) => {
e.preventDefault();
let ref = e.target.href;
let refArray = ref.split("#", 2); //extracting the id from the 'href'value
let clickedId = refArray[1];
const divElem = document.getElementById(clickedId); //getting the corresponding element with that id
divElem.classList.remove('fade'); //removing the 'fade' class name from that element
divElem.classList.add('active'); //adding 'active' class name from that element
//after that process is successful, we need to make sure other div elements are invisible
const classNames = document.getElementsByClassName('tab-pane'); //getting all the elements with the given class name
for (let divElem in classNames) {
if (classNames[divElem].id !== undefined) { //checking whether id is available for the given div element
let id = classNames[divElem].id;
if (id !== clickedId) { //to make sure that selected id is not the element we wish to make visible in the browser
classNames[divElem].classList.remove('active');
classNames[divElem].classList.add('fade'); //make other div elements invisible
}
}
}
}
render() {
return (
<div className='container'>
<div className='row'>
<div className='col-12'>
<nav className='navbar navbar-expand-lg justify-content-center bg-primary'>
<ul className='nav nav-tabs'>
<li className='nav-item'>
<a href="#add_instructor" data-toggle="tab" className='nav-link navbar-brand text-white' onClick={this.handleClick}>Add Instructors</a>
</li>
<li className='nav-item'>
<a href="#update_instructor" data-toggle="tab" className='nav-link navbar-brand text-white' onClick={this.handleClick}>Update Instructors</a>
</li>
<li className='nav-item'>
<a href="#settings" data-toggle="tab" className='nav-link navbar-brand text-white' onClick={this.handleClick}>Settings</a>
</li>
</ul>
</nav>
</div>
</div>
<div className='tab-content'>
<div className='tab-pane container active' id='add_instructor'>
<div className='card bg-info' style={{width: '100%'}}>
<div className='card-header bg-warning text-white'>
<h3 className='modal-header'>Add Instructor</h3>
</div>
<form method='POST' name='add_student_form' onSubmit={this.handleSubmit}>
<div className='card-columns'>
{/*fname column*/}
<div className='card'>
<div className='card-body'>
<div className='form-group'>
<label htmlFor="fname">First Name</label><span className='text-danger'>*</span>
<input type="text" name='fname' className='form-control' placeholder='ishan' onChange={this.handleChange} required/>
</div>
</div>
</div>
{/*lname column */}
<div className='card'>
<div className='card-body'>
<div className='form-group'>
<label htmlFor="lname">Last Name</label><span className='text-danger'>*</span>
<input type="text" name='lname' className='form-control' placeholder='ishan' onChange={this.handleChange} required/>
</div>
</div>
</div>
{/*year column*/}
<div className='card'>
<div className='card-body'>
<div className='form-group'>
<label htmlFor="year">Year</label><span className='text-danger'>*</span>
<select name="year" id="year" className='form-control' onChange={this.handleChange} required>
<option value="">-----</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
</div>
</div>
{/*faculty column*/}
<div className='card'>
<div className='card-body'>
<div className='form-group'>
<label htmlFor="faculty">Faculty</label><span className='text-danger'>*</span>
<select name="faculty" id="faculty" className='form-control' onChange={this.handleFacultyChange} required>
<option value="">-----</option>
<option value="FOC">Faculty of Computing</option>
<option value="FOB">Faculty of Business</option>
<option value="FOE">Faculty of Engineering</option>
<option value="FOL">Faculty of Law</option>
</select>
</div>
</div>
</div>
{/*specilaization column*/}
<div className='card'>
<div className='card-body'>
<div className='form-group'>
<label htmlFor="spec">Specialization</label><span className='text-danger'>*</span>
<select name="spec" id="spec" className='form-control' onChange={this.handleChange} required>
<option value="">-----</option>
{this.state.specializations.map(spec =>
<option value={spec}>{spec}</option>
)}
</select>
</div>
</div>
</div>
</div>
<button type='submit' className='btn btn-success'>Submit</button>
</form>
</div>
</div>
{/*update student*/}
<div className='tab-pane container fade' id='update_instructor'>
<div className='card'>
<div className='card-header bg-light'>
<h3 className='modal-header'>Update Instructor Details</h3>
</div>
</div>
</div>
{/*settings*/}
<div className='tab-pane container fade' id='settings'>
<div className='card'>
<div className='card-header bg-light'>
<h3 className='modal-header'>Settings</h3>
</div>
<div className='card-body'>
<div className='card-columns'>
{/*faculty selection*/}
<div className='card'>
<div className='card-body'>
<div className='form-group'>
<label htmlFor="faculty_select">Faculty</label>
<select name="faculty_select" id="faculty_select" className='form-control'>
<option value="">-----</option>
<option value="Faculty of Computing">Faculty of Computing</option>
<option value="Faculty of Business">Faculty of Business</option>
<option value="Faculty of Engineering">Faculty of Engineering</option>
<option value="Faculty of Law">Faculty of Engineering</option>
</select>
</div>
</div>
</div>
{/*Student ID setting*/}
<div className='card'>
<div className='card-body'>
<div className='form-group'>
<label htmlFor="id_setting">ID starts with</label>
<select name="id_setting" id="id_setting" className='form-control'>
<option value="">-----</option>
<option value="IT">IT</option>
<option value="BM">BM</option>
<option value="EN">EN</option>
<option value="LW">LW</option>
</select>
</div>
</div>
</div>
{/*ID limit*/}
<div className='card'>
<div className='card-body'>
<div className='form-group'>
<label htmlFor="id_limit">ID Limit</label>
<input type="number" className='form-control' name='id_limit' id='id_limit'/>
</div>
</div>
</div>
</div>
<button type='submit' className='btn btn-success'>Submit</button>
</div>
</div>
<div className='card'>
<div className='card-header'>
<h3 className='modal-header'>Current Settings</h3>
</div>
</div>
</div>
</div>
</div>
);
}
}
Ishan's blog 