ONESTOPSOURCE

REPORT
SUBMITTED IN PARTIAL FULFILLMENT OF THE REQUIREMENT FOR
MINOR PROJECT

Duration
02/2021 – 05/2021

SUBMITTED BY -:
Madhav Verma (131/18)
Lovish Dhanda (130/18)
Shrey Chander Soney (155/18)
Tanush Puri (159/18)

Department of Computer Science & Engineering

DAV Institute of Engineering & Technology
Jalandhar, India
 ABSTRACT
This report introduces the process of creating part of a OneStopSource which is a data-driven
website used by the students. This website has four major components: Learning material, User
authentication, Progressive web app, and newsletter Subscription. The major part of the group
component and minor part of marking component are implemented by us and the
implementation details will be introduced in the report. The implementation uses a tool called
Django Framework which is an excellent open source web application frame work for complex
data-driven website development. The major part of this report will introduce how to use
Django to create a database table, web page user interface and inner logic to handle user request
by going through the group component implementation process.
 ACKNOWLEDGEMENT
I am highly grateful to the Dr. Manoj Kumar, Principal, DAV Institute of Engineering
&Technology, Jalandhar, for providing this opportunity to carry out the working of major
project.
The constant guidance and encouragement received from Dr. Harpreet Kaur Bajaj, HoD
Department of Computer Science & Engineering, DAVIET, Jalandhar has been of great help
in carrying out the project work and is acknowledged with reverential thanks. I would like to
express my gratitude to Ms. Shaveta Kalsi, Assistant Professor Department of Computer
Science & Engineering, DAVIET, Jalandhar for his stimulating guidance, continuous
encouragement and supervision throughout the course of present work. Without the wise
counsel and able guidance, it would have been impossible to complete the report in this manner.
I express gratitude to other faculty members of Computer Science & Engineering department
of DAVIET for their intellectual support throughout the course of this work.
 TABLES OF CONTENT

1 Introduction

1.1 Background . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

1.2 Significance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

1.3 Method used ....................................

1.4 Limitation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

2 Preliminary

2.1 Django framework. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

2.1.1 Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

2.1.2 View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

2.1.3 Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

2.2 Python .......................................

3 Project overview

3.1 An overview of the project . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

3.2 An overview of the Django framework development process . . . . . . . . . .

4 Create the database tables

5 Create the User Interface

6 Implement the view function

7 Functionalities implemented in Project

7.1 An overall view of basic functionality . . . . . . . . . . . . . . . . . . . . . . .
7.2 Functionalities in the project scope . . . . . . . . . . . . . . . . . . . . . . . .
7.3 Future Scope of Project. . . . . . . . . . . . . . . . . . . . . . . . . . .

8 Conclusion
9 Bibliography
 INTRODUCTION
This project report will introduce how to build part of a learning platform using the Django
framework. Django is an open source web application frame work which is written in Python.
This course management system built using Django has four major components each of which
has different functionality but similar architecture. In the project report I will demonstrate
details of using Django to build one major component of this system: the group component,
which is my major contribution to the whole system. Also the technique and process which is
showed here can be applied to build the other three components in the course management
system as well as other complex database-driven websites.

1.1 Background

Every Person whether a child or adult who is interested in engineering has challenges to
overcome and search the information regarding the required resource. From Basics of C to
Advance Java and from Cloud to Ruby ,there are thousand of websites available for these
courses to explore each of them and the individual had to look for multiple sites so as to
get the best appropriate resource according to his needs, therefore we design One Stop
Source that is adapted to your managerial requirements. These three systems are logically
related but in reality they are implemented as individual systems and located on different
servers. So the technical maintenance team needs to spend a lot of time and energy to
support these three different systems. Also these systems were built a long time ago and it
is hard for the technical team to maintain and add new functionalities which are required
as time goes by. So the purpose of this project is to create a new integrated scalable course
management system with all the existing functionalities in these three systems, as well as
new functionalities if required.

1.2 Significance

The new learning platform will integrate all existing functionalities of the three systems
as well as other new functions. Thus the technical team only needs to maintain one
system instead of three. The scalability of the new system will allow them to add more
features to the system in future. Students and professors only need to log into one system
to accomplish what they did on the three systems before. This will be more convenient
and significantly improve their efficiency.

1.3 Method Used

This system is built using Django web application framework. Django was originally
developed for the news-oriented site of the world company in Lawrence, Kansas. It
simplifies the development process of complex, data-base driven web applications like a
news-oriented site. Its well-designed framework includes three major parts: model, view
 and template. Our course management system consists of four components which are
grades, marking, group and submission. Each component contains those three parts.
When we develop the course management system, we first design the model of the
relative component for data architecture, then the template for user interface, at last we
implement the view which includes all the functions.

1.4 Limitation

Complex websites such as the oneStopSource usually take some time to test and validate.
The system may have some potential bugs or flaws because of the development time
constraint. However because of the flexibility and powerful functionality of Django, these
bugs or flaws can be fixed.
 PRELIMINARY

2.1 Django framework

Django is an open source web application frame work written in Python. The primary goal of
Django is to make the development of complex, data-based websites easier. Thus Django
emphasizes the reusability and pluggability of components to ensure rapid developments.
Django consists of three major parts: model, view and template.

2.1.1 Model
Model is a single, definitive data source which contains the essential field and behaviour of the
data. Usually one model is one table in the database. Each attribute in the model represents a
field of a table in the database. Django provides a set of automatically-generated database
application programming interfaces (APIs) for the convenience of users.

2.1.2 View
View is short form of view file. It is a file containing Python function which takes web requests
and returns web responses. A response can be HTML content or XML documents or a “404
error” and so on. The logic inside the view function can be arbitrary as long as it returns the
desired response. To link the view function with a particular URL we need to use a structure
called URLconf which maps URLs to view functions.

2.1.3 Template
Django’s template is a simple text file which can generate a text-based format like HTML and
XML. The template contains variables and tags. Variables will be replaced by the result when
the template is evaluated. Tags control the logic of the template. We also can modify the
variables by using filters. For example, a lowercase filter can convert the variable from
uppercase into lowercase.

2.2 Python
Python is the language used to build the Django framework. It is a dynamic scripting language
similar to Perl and Ruby. The principal author of Python is Guido van Rossum. Python supports
dynamic typing and has a garbage collector for automatic memory management. Another
important feature of Python is dynamic name solution which binds the names of functions and
variables during execution.
 PROJECT OVERVIEW

3.1 An overview of the project

Our desired result of the oneStopSource is an integrated web-based system combining several
current systems in use. It will include the following four major components:
• Grade component

This component is basically associated with course assignments and exams. In this
component the instructor can define the assignment/exam details such as assignment/exam
name, percentage, due date and so on. The instructor can also view the grades of every
student in the course or change the formula used for calculating the final grade. A student can
view his/her own grades in all the courses he/she has taken. It also provides functionality
such as import/export student grades from/to an excel sheet.
• Submission component

This component is used to replace the submission system we currently have. It deals with the
student submissions for assignments. It can validate some commonly used file extensions to
see if the submission file is in the correct form and associate the correct submission with the
assignment.
• Marking component

This component is used to mark student assignments and exams. The instructor or the
teaching assistant can mark all questions in an assignment and record some common
problems or mistakes made by the students. The instructor or the teaching assistant can also
mark the assignment associated with a student or with a group if it is a group assignment.
This component also provides functionalities for the instructor to copy the course setup from
one course to another if they are the same course in different semesters or different sections,
thereby saving time. I have been in the marking component development team for a while
and implemented the copy course setup function and functionalities associated with
“common problems”. However these functions have been changed significantly after I
switched to the group component development team. For details of the marking component,
please refer to the project report of Li Tan.
• Group component
The Group component is used by instructors and students to manage groups in the class.
Sometimes there are group assignments, so students can form a group to complete these
assignments. This component allows the instructors and students to create groups. Instructors
can assign students to a group and students can invite other students to the group they belong
to. Besides these four major components, there is another component separate from all the
above four. This component is called core data which contains information such as courses,
students and semesters. This data is used in the above four components.
3.2 An overview of the Django framework development process
To build such a complicated web system, we need three major parts for each component:
database, user interface and the functions to interact in between. Django framework provides
sufficient functionalities to implement these three parts. Corresponding to database, user
interface and functions in between, Django has model, template and view components to deal
with each part respectively. Django’s model component helps programmer to define and
maintain tables in the database, while its template component helps to write html files using a
combination of both html syntax and Django syntax. For those functions in between, Django
provides a view component which reads the input from user interface and makes
corresponding changes in the database.
 CREATE DATABSE OF TABLES

To get started, we need to create a backend of the system which is the database. All the tables
in the database for this learning platform include information for Topics, SubTopics, Users,
Sources, and so forth. These tables are created initially when the project is deployed. Some
information is input into the database at the beginning, such as semester information and course
information. However, most information will be inserted or updated in the database
dynamically. Every time we want to add a new topic, we will insert a tuple into the Group table
to make the database consistent with the real world.
To have a Topics table in the database, we first need to choose which database we are going to
use. Django supports almost all popular databases such as MySQL, sqlite3, and oracle. The
one we used for this oneStopSource is sqlite3. We only need to write one sentence to setup the
database:
DATABASE_ENGINE = ’sqlite3’
Next, we create the Topics table and other tables in the database. Django uses a class called
models.py to represent the database table schema. To create a table we just need to write a new
class derived from model class. Here is an example:

class Topic(models.Model):
author=models.ForeignKey('auth.User',on_delete=models.CASCADE)
title=models.CharField(max_length=200,unique=True)
description=models.TextField()
create_date=models.DateTimeField(default=timezone.now)
pic=CloudinaryField('image')

def __str__(self):
return self.title

class SubTopic(models.Model):
topic=models.ForeignKey('resources.Topic',on_delete=models.CASCADE)
author=models.ForeignKey('auth.User',on_delete=models.CASCADE)
title=models.CharField(max_length=200)
link=models.URLField(blank=True)
 description=models.TextField()

create_date=models.DateTimeField(default=timezone.now)

def __str__(self):
return self.title

class Subscription(models.Model):
email=models.EmailField(max_length=254)

class Request(models.Model):
status_choices=(
("P","Pending"),
("A","Approved"),
("R","Rejected")
)
user=models.ForeignKey('auth.User',on_delete=models.CASCADE,default=1)

newResourceTitle=models.CharField(max_length=200,default='')
description=models.TextField(max_length=1000,default='')
create_date=models.DateTimeField(default=timezone.now)
status=models.CharField(max_length=1,choices=status_choices,default="P")

def __str__(self):
return "Requested Resource : " + self.newResourceTitle
 CREATE THE USER INTERFACE

Although we have created the various tables and can update them using the Django model
component, we should not allow the user to manipulate the database directly. Otherwise it
would be a disaster for both the users and the technical maintenance team. Instead, we create a
user interface to let users interact with the data indirectly. Django provides the template
component to create the user interface for users.
A template is just a simple html file with some Django syntax mixed in. Every template
corresponds to a web page which the users will use to interact with the system. Here is the
template for creating a user :
{%load static %}
<!DOCTYPE html>
<html lang="zxx" class="no-js">
{% load pwa %}
{% progressive_web_app_meta %}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<link rel="shortcut icon" href="{% static 'img/fav.png' %}" />
<meta charset="UTF-8" />
<title>OneStopSource</title>
<link rel="stylesheet" href="{%static 'css/bootstrap.css' %}" />
<link rel="stylesheet" href="{%static 'css/font-awesome.min.css' %}" />
<script src="https://kit.fontawesome.com/ba54f1c27c.js" crossorigin="anonymous"></scri
pt>
<link rel="stylesheet" href="{%static 'css/registration.css'%}"/>
</head>
<body>
<div class="container">
<div class="row flex-column">
<div class="logo">
<a href="/"><img src="{% static 'img/logo.png' %}" alt="" title=""/></a>
 </div>
<div class="col-lg-10 col-xl-6 mx-auto">
<div class="card card-signin flex-row my-5">
<div class="card-body">
<h5 class="card-title text-center">Sign Up</h5>
<form class="form-signin" method="POST">
{% csrf_token %}

<div class="form-label-group">
<input type="text" id='inputFirstname' name='first_name' class="form-
control" placeholder="First Name" required autofocus>
<label for='inputFirstname' >First Name</label>
</div>

<div class="form-label-group">
<input type="text" id='inputLastname' name='last_name' class="form-
control" placeholder="Last Name" required>
<label for='inputLastname'>Last Name</label>
</div>

<div class="form-label-group">
<input type="text" id="inputUserame" name='username' class="form-
control" placeholder="Username" required >
<label for="inputUserame">Username</label>
</div>

<div class="form-label-group">
<input type="email" id="inputEmail" name='email' class="form-
control" placeholder="Email address" required>
<label for="inputEmail">Email address</label>
</div>
 <div class="form-label-group">
<input type="password" id="inputPassword" name='password' class="form-
control" placeholder="Password" required>
<label for="inputPassword">Password</label>
</div>

<button class="btn btn-lg btn-primary btn-block text-

uppercase" type="submit">Signup</button>
<div class="d-block text-center mt-2">
Already have an account ?
<a href="/auth/login">Click here !</a>
</div>

</form>
</div>
</div>
</div>
</div>
</div>

{% if error %}
<script>
alert('{{ error }}');
</script>

{%endif%}

<script src="{% static 'js/vendor/jquery-2.2.4.min.js' %}"></script>

 <script src="{% static 'js/vendor/bootstrap.min.js' %}"></script>
</body>
</html>

Every line surrounded by ”% %” is a Django sentence. Most of them deal with simple “if-else”
and “for” loop. The line surrounded by double curve brackets ” ” is a variable, whose value is
passed from a view function whenever this template has to be displayed. This will be discussed
in the next chapter. The rest of the code is just simple html sentences.
The Signup Page Looks like-:

Other Screenshots of User Interface are -:

 IMPLEMENT THE VIEW FUNCTION
So far we have our backend database and the frontend web page user interface. What we need
now is the logic in between to deal with the user requests and maintain the database. Django
view component provides a set of application programming interfaces to fulfill our need and
help us implement the logic.
The Django view file is where we write our function to achieve the above two goals. First, it is
used to pass parameters to the template and call the right template for the user. Every time we
input a URL in the address bar or click a hyperlink in the system, Django will call the right
view function based on that URL. Then the function will return a template as well as the
corresponding parameters. Thus we can see the actual web page displaying the information we
need. Second, if we submit something such as create group, the function will have an http
request as its input parameter. Based on that parameter the database is updated or the user is
provided the required information. The view function for login is -:

def login(request):
error=''
if request.method == 'POST':
user=authenticate(username=request.POST['username'],password=request.POST['passw
ord'])

if user:
auth_login(request,user)
return HttpResponseRedirect('/')
else:
error='Invalid Username/Password'
context={
'error':error
}

return render(request,'registration/login.html',context)

Other view functions are -:

def signup(request):
error=''
if request.method=='POST':
first_name=request.POST['first_name']
last_name=request.POST['last_name']
username=request.POST['username']
email=request.POST['email']
password=request.POST['password']
user=User.objects.create_user(username,email,password)
if user is None:
error='Some error occured. Please try again !'
else:
user.last_name=last_name
user.first_name=first_name
user.save()

return redirect('/auth/login')

context={
'error':error
}
return render(request,'registration/signup.html',context)

def auth_logout(request):
logout(request)
return redirect('/auth/login')
 FUNCTIONALITIES IMPLEMENTED IN PROJECT

7.1 An overall view of basic functionality

As mentioned earlier , resources app has four tables i.e Topics , SubTopics ,
Subscription ,and Requests and auth app has the users and group table . All the functionalities
of project revolves around these tables. The group component currently has more than ten
templates including that of create group. Other templates are for instructors and students to
view the group list, inviting group members, confirming an invitation, edit group information,
etc. These templates constitute the major user interface of group component and provide
sufficient support for users to perform their desired operations on the web pages created by
these templates.

Group component also has a bunch of view functions for processing the user request. These
functions basically match the purpose of the templates. All the functions, such as viewing
group list, creating a group, inviting a student to a group, and confirming invitation, have
their corresponding templates. With these functions, the group component can deal with
users’ requests and retrieve data from the database to show the desired information to users,
as well as update the database with the change the user made through the web page user
interface.
7.2 Functionalities in project

Login / Signup

The user gets the opportunity to login and signup with his credentials and access the website
and search the needed resource which his best according to him.

There are 2 types of user account -:

1) Admin

Admin has access to add/edit resources , view/edit users , view

newsletter subscription, view /edit requests .

2) Viewer

Viewer has an option to request new resource if he doesn't find the

required resource so he can generate a ticket regarding the same.

Newsletter subscription

Viewers can subscribe the newsletter and will get weekly updates

regarding the new technologies and the new resource that is added up

in the platform. Further the user will be notified by email

Progressive web app

The application can also be installed in mobile phone as if just like an app installed in mobile
therefore user can access directly from his mobile screen rather than visiting the website.
Thus making the system more efficient and flexible.

Responsive website

The website can be operated on any device like mobile, tablet or computer without having
variation in the features .This offers stability and user friendliness to the user.

Google OAuth

User can sign in using his google id also instead of signing up on our website. This provides
the user a greater exposure and accessibility to the website.
7.3 Future Scope of the project

• This project helps the organization to maintain proper relationship and standardization of
the resources and technologies to users.

• This project Deals with a recommendation system that handles the queries and request of
users about the resources that is needed to them and is not available at the platform. Based on
the query the ticket will be created and transferred to administration for processing and
concerned person will provide proper information and service to the user.

• It Reduce human manipulations and does automatic calculations without errors based on the
provided data

• Improves accuracy and timeliness, security.

• Week to Week updates regarding new technologies ,schemes, resources available at the
platform

• Featured with MFA to provide more security to the user.

• An interface to view and edit their own profile.

• Provide method for adjusting account settings such as passwords.

• Mechanism to reset the password in case user forgets it.

 CONCLUSION
The Django framework gives us a simple and reliable way to create the course management
system. It provides powerful functionalities and concise syntax to help programmers deal
with the database, the web page and the inner logic. The experience of developing the group
component in the system also helped me learning a lot of website development with Django.
Within the Django framework, we have successfully accomplished the requirements of the
system. Once this system passes the testing phase, it can be used to serve students and
instructors and substitute several systems currently in service. It will make the work for
instructors to manage the course much easier. It also can simplify the operations for students
with grade book, submission, and group management all in one system. In short, this system
will bring great user experience to both instructors and students. The only limitation for this
course system is that although the developers have been testing it with various use cases, it
may still encounter problems during real time use. However, even if that happens, the
flexibility of Django would provide a simple way to fix the problem, as well as add new
features into the system.
 BIBLIOGRAPHY
[1] Django homepage. http://www.djangoproject.com/.

[2] Python documentation. http://www.python.org/doc.

[3] Django(web framework). http://en.wikipedia.org/wiki/Django.

[4] Django documentation. http://docs.djangoproject.com.

[5] Python(programming language). http://en.wikipedia.org/wiki/Python.