Monitorizarea Online a Activității Școlare Coordonator științific: Conf.dr.ing. Alexandru Boicea Absolvent: Pudak Nurberdiyev BUCUREȘTI 2017 Contents… [626388]

UNIVERSITATEA POLITEHNICA BUCUREȘTI
FACULTATEA DE AUTOMATICĂ ȘI CALCULATOARE
DEPARTAMENTUL CALCULATOARE

PROIECT DE DIPLOMĂ

Monitorizarea Online a Activității Școlare

Coordonator științific:
Conf.dr.ing. Alexandru Boicea

Absolvent: [anonimizat]
2017

Contents
1. Introduction ………………………….. ………………………….. ………………………….. ………………………….. …………… 4
2. State of the Art ………………………….. ………………………….. ………………………….. ………………………….. ……….. 6
2.1 Current state ………………………….. ………………………….. ………………………….. ………………………….. …… 6
2.2 Related work ………………………….. ………………………….. ………………………….. ………………………….. ….. 6
2.3 Solution ………………………….. ………………………….. ………………………….. ………………………….. …………. 8
3. Used Technologies ………………………….. ………………………….. ………………………….. ………………………….. …. 9
3.1 C#………………………….. ………………………….. ………………………….. ………………………….. …………………. 9
3.2 .NET Framework ………………………….. ………………………….. ………………………….. ………………………. 11
3.3 Entity Framework and LINQ ………………………….. ………………………….. ………………………….. ………. 12
3.4 Microsoft SQL Server ………………………….. ………………………….. ………………………….. ………………… 14
3.5 HTML and CSS ………………………….. ………………………….. ………………………….. ………………………… 15
3.6 JavaScript and jQuery ………………………….. ………………………….. ………………………….. ………………… 16
3.7 Razor Engine ………………………….. ………………………….. ………………………….. ………………………….. . 17
4. Design Architecture ………………………….. ………………………….. ………………………….. ………………………….. . 18
5. Implementation ………………………….. ………………………….. ………………………….. ………………………….. …….. 28
5.1 Model —View —Controller (MVC) ………………………….. ………………………….. ………………………….. 28
5.2 Teacher’s role ………………………….. ………………………….. ………………………….. ………………………….. . 31
5.3 Parents’ role ………………………….. ………………………….. ………………………….. ………………………….. …. 33
5.4 Admin’s role ………………………….. ………………………….. ………………………….. ………………………….. … 34
5.5 View Models ………………………….. ………………………….. ………………………….. ………………………….. … 34
6. Conclusion ………………………….. ………………………….. ………………………….. ………………………….. …………… 38

The summary should describe the context in 2 -3 phrases and give details about the
project functionality and implementation in 3-5 phrases.
This doc ument provides about how to obtain progresses of students in schools/ high schools.
Explains why do it is important for parents and children’s future and how is it would be to follow.

PUDAK NURBERDIYEV

1. Introduction

Nowadays technology has ad vanced a lot. Very rarely we can find a person who has
no internet access . At the same time, education system is still very important for the future
of our community. Many hours of individual’s life are wasted due to missing proper
education tools. In early years , each student had notebooks to keep all grades from school
each year.
In these days parents are very busy and hard to follow their children. Isn’t it great if
they had an application online and to be able check sometimes grades and activities of their
child? How much progresses students did one month ago , or one year ago etc .? Parents
always love to hear good things.
So, this app lication is about making all students’ grades, ava ilable online. Involved
participants are Teachers, Students, and Parent s. Parents will be notified every week and on
special occas ions. Application is a tool for parents to follow their children online, without
coming to school or any extra unnecessary energy. All the activities for each day for each
student will be entered o nline. Activities like tests, exams, projects, homework, absences,
presents, excuses , or late. Sometimes teachers can share information to the whole school,
and all of this will be visible for parents. If parents can see every homework theirs kids
needs to do, there will be an obligation for kids to do it for sure until deadline. There will be
a huge pressure but they will learn lots of things. Otherwise, kids will come home from
school they can lie about not having any homework. Parents won’t have any choi ce to not
believe because they can’t see homework. And students will get to the PCs and play games
all day long. Parents are having hard time to control kids. But this application will solve all
these problems. Because they can check officially what homewo rk, information, class work
etc., their children will have.
This document is divided for six chapters. First one is introduction. Second is State of
the art w hich explains the motivations and objectives . Comparisons with existing
applications or solution s. Clarifies why this application is needed. Third one is about Used
Technologies . Fourth is about Database and its design. Fifth is about implementation of the
application. Last one is conclusion s.
This document will provide us with all needed informatio n from objectives to till
developing and building the application.
Used technologies are generally from Microsoft. Like Microsoft SQL Server, and for
frameworks are ASP.NET, MVC (Model – View – Controller), Razor Engine. Implemented
languages are C#, HTML, CSS, JavaScript, and jQuery.
Used programs are Microsoft Visual Studio, Microsoft Management Studio (for
Database). We have very big database tables. We have 21 tables. And all of them are
needed for sure. This project is not an easy one, it is very serio us project we did.
All the information in this document is reflected from one of the international
schools in Bucharest. Because the author had a chance to work and experience one year in
that school. He taught students from ages 12 to 14. And believes th at something like this is

Article title

very important in all kind s of aspects. Sometimes parents come and say, “you never give
homework to our students, why?” Of course, he was giving homework all the time but
parent s couldn’t follow them. So, awesome thing is you go b ack to that days when you gave
homework and prove them that they were wrong.

PUDAK NURBERDIYEV

2. State of the Art

In this chapter, we will discuss about current state of problems . Then related work
which shows solutions already exist or related . Then our solution , which answers for
questions like Why this solution? What are our project’s advantages?

2.1 Current state

As it is included in the chapter introduction, parents need to follow their children
somehow because of curiosity they h ave. They may ask questions like, what are they
learning (children) ? What activities are the y doing every day? Are they behaving well? Is
there any problem? What grades they took today etc. Basically, they have too many
questions and they want to know ev ery detail. This happens especially with parents of
primary students. Obviously because they are very young and naive.
Current state of this problem is that we assume most of the private schools use a
platform for both parents and teachers, but in governm ent schools they don’t. Maybe
because of missing infrastructures or ability to adapt new technologies or prices. Point is
there is a problem.
As SurveyMonkey .com mentioned about why parents’ involvements are so
important for growth of children. [1] Bott om line here is to involve parents as much as
possible. Offering them right infrastructures, right treatments. Activities they are involved
like PTA (Parents – Teacher Association ) meetings. In the next section, related work what
kind of solutions we alrea dy have

2.2 Related work

There are plenty of suitable applications. Like ClassDojo , Edmodo , or many other
applications. Let’s analyze each one of them.
For ClassDojo , great application for website and mobile application. It helps to
connect teachers, st udents, and parents. But for each class, for each lesson you need to add
each parent. Too much work to do. Parent can see the student’s positive and negative
aspects much more detailed (Figure 1) [2]. It’s also great to use for teachers. Because
teacher ca n include easily attendance of students. The kids also seem to like those monster
icons. Each student has its own avatar. Negative aspect of class dojo is to display
everybody’s dojos (points). Some of them have more positive dojos, some of them have
only negative dojos. It might affect public shaming for those students who have more

1 Parents Survey for K -12 schools https://www.surveymonkey.com/mp/harvard -education -surveys/
2 http://mrraddish -lakecable.weebly.com/class -dojo -discipline -plan.html

Article title

negative dojos. And public shaming doesn’t educate children. It reduces face to face
communication between student and teacher.
For Edmodo , great website for
many users on internet. It’s outstanding
website to stay connected between
teacher and students. Parents can easily
follow each post from teacher. You can
see parent’s user interface from Figure 2.
Parent can easily see their child’s
progress and work through Edmodo
groups. But there are few disadvantages,
like it is very problematic to use on
iPads. Sometimes student cannot login
even though all information is correct.
From iPad, many steps to upload
something or give assignment. Edmodo is
more likely for teacher/studen t
communication. It is not that specifically for parents. And the most disadvantages thing in
Edmodo is that it is not user friendly. Requires too much time to learn the system. Students
mix everything when turning in assignment. Or even for teacher , shari ng something from
google drive needs to change sharing permissions. Limited options for creating quiz zes. [3][4]

Figure 2. Edmodo for parents' UI [5]

3 Pros and Cons. http://rebecca -davies.net/2013/05/22/pros -and-cons -of-edmodo/
4 Pros a nd Cons, Schoology vs Edmodo. https://www.quora.com/Learning -Management -Systems -What -are-
the-pros -and-cons -of-Schoology -vs-Edmodo
5 What do parents see on parent account https://support.edmodo.com/hc/en -us/articles/205008574 -What –
Do-Parents -See-on-a-Parent -Account Figure 1. ClassDojo

PUDAK NURBERDIYEV

2.3 Solution

Of course, it not correct way to compare our project with Edmodo or ClassDojo.
Because those projects are thought and worked by many people. Many pr ogrammers had
hands on them. Edmodo and ClassDojo are very big companies. Which provides services for
many people. But our project is worked by very few people.
Advantages of our project are first ly; this project is specifically done for parents.
Secondl y, our project is done with combination of ClassDojo and Edmodo. The things that
are very helpful from ClassDojo is behavioral control of students by using positive comments
or negative comments. Each positive/negative comment have details as well. Like ne gative
comment s for “not paying attention ”, “talking during the lesson ”, “not finishing class work”,
“talking back to the teacher”, “disturbing others” etc. Positive comments can be like “for
answering questions” , “being active during class”, “helping othe rs”, “doing homework” etc.
From Edmodo, similarities are for managing parents with information, grades of students.
Seeing listed students for each class.
The important thing is simplicity and productivity of our project. No ads, no money
to use this app lication. For example, to use google classroom, you need to buy their domain
first, to set available for all students. it doesn’t allow other domains [6]. So, the whole school
must use one domain. Google classroom is also another great application to use f or teacher –
student communication. But my point is you need buy the google domain which will have
Gmail interface.

Figure 3. Google classroom [7]

6 https://productforums.google.com/forum/#!topic/google -education/xbnJybsLma8
7 http://alicekeeler.com/2016/04/29/google -classroom -make -everything -assignment/

Article title

3. Used Technologies

Used technologies are generally from Microsoft. Like Microsoft SQL Server, and for
frameworks are ASP.NET, MVC (Model – View – Controller), Razor Engine.
Implemented languag es are C#, HTML, CSS, JavaScript, and jQuery.
Used programs are Microsoft Visual Studio, Microsoft Management Studio (for
Database). In next sections, you will find more details about all these technologies.

3.1 C#

C# is a mixture between C and C++ progra mming languages. It’s developed by
Microsoft to compete with Java programming language. Anders Hejlsberg lead its
development team . Design goal of C# is to be simple, modern, and general -purpose
language. In the beginning, it was called “Cool”, which means “C-like Object Oriented
Language”. Microsoft had considered keeping the name “Cool” as the final name of the
language, but chose not to do so for trademark reasons. By the time the .NET project was
publicly announced at the July 2000 Professional Develope rs Conference, the language had
been renamed C#, and the class libraries and ASP.NET runtime had been ported to C#. [8]
Here are some properties of C# below:
• C# is a n object -oriented, multi -paradigm, structured, generic, event -driven, and
concurrent progra mming language. [9]
• C# first appeared in 2000 developed and designed by Microsoft . [10] And its last
release is in 7th of March 2017, version 7.0. [11]
• Filename extension is “.cs”
• Supports strong type checking, array bound checking, warnings of uninitialize d
variables
• Has automated garbage collection. Which means deallocates all memory in ram
reserved for code program.

For evolution of C# you can see Table 1. Below we will discuss about each versions of C#. [12]
C# 1.0 was released with Visual Studio 2002 . C# 1.0 was first language that developer
adopted to build .NET applications. It doesn’t have generics. That means it doesn’ t
understand what “List<Student> students = List<Student>();” is. Then in 2003
C# 1.1 came with Visual Studio 2003, which supports for ASP.NET mobile controls. C#

8 History of C# programming language: http://aboutcsharpprogramming.blogspot.ro/2012/09/ history -of-c-
programming.html
9 C# Terms: http://www.webopedia.com/TERM/C/C_sharp.html
10 C# Preview: https://www.infoq.com/minibooks/emag -c-sharp -preview
11 C# 7.0 new: features and details. http://www.c -sharpcorner.com/Resources/3564/new -features -in-c-shar p-
7-0.aspx
12 Evolution of C# programming language: http://www.kunal -chowdhury.com/2012/07/evolution -of-c-10-50-
what -are-new.html#o4qcbx807fzFQkKl.97

PUDAK NURBERDIYEV

version 1.0, mostly looks like combination of C and C++. Contains basic features of coding,
such as operators, statements, loops, variables, strings, functions, classes, methods, and
events. People thought this is just like java, but it is not. Both are object oriented but not
same. [13]
C# 2.0 was released with Visual Studio 2005. Supports generics, Nullable type,
Anonymous methods, Partial Class, iterator blocks, static classes, and Covariance and
Contra -variance. Also has .NET Framework 2.0. Partial classes allow implementation of a
class between several files, with each file containing some parts of class. Static class is like
once you initialize a static class, later it will never allow you to initialize or inherit one mo re
time. Only allows static members. Nullable type is for using “NULL” inside a code.
C# 3.0 was released in 2007 with visual studio 2008/2010, and .NET Framework
3.0/3.5. Major new features are functional programming languages, inspired by such as
Haske ll, and directed by LINQ (Language -Integrated Query) . LINQ is used for many types of
data sources. It is very similar with syntaxes of SQL. In C# 3.0 there are some improvements
for initializing objects or collections. One of the main improvement is lambda expressions.
Like “students.Where(c => c.age < 18); ”. Here c variable is used as one of the
student from all students, to filter students who are under 18 years old.
C# 4.0 was released in 2010 with visual studio 2010 and .NET Framework 4 .0. Major
new fe atures are dynamically typed languages and frameworks . Like
“int Age(dynamic obj) { return obj.age; } ”.
C# 5.0 was released in 2012 with visual studio 2012 and .NET Framework 4.5. Major
features are “async programming”, and “caller information”. Async p rogramming means for
example we create a form window with a button and if you click button which does another
action , you cannot do anything else to the first form. Because it is sequential. But in C# 5.0 it
is not the case, first form doesn’t have to wait for button request.
C# 6.0 was released in 2015 with visual studio 2015, and .NET Framework 4.6. Major
features are exception filters, “await in catch/finally blocks ”, String interpolation.
C# 7.0 was released in 2017 with visual studio 2017. Major fe atures are tuples, ref
returns and locals, local functions, and out variables.

C#
Version Date Visual
Studio .NET
Framework Updates
C# 1.0 2002 2002/2003 1.0/1.1 • Basic features
C# 2.0 2005 2005 2.0 • Generics
• Nullable type
• Anonymous methods
• Partial class
• Iterator blocks
• Static classes
• Covariance and contra –
variance
C# 3.0 2007 2008/2010 3.0/3.5 • LINQ

13 https://stackoverflow.com/questions/31693/what -are-the-differences -between -generics -in-c-sharp -and-
java -and-templates -i

Article title

• Initializing objects or
collection
• Lambda expressions
C# 4.0 2010 2010 4.0 • Dynamically typed language
• Frameworks
C# 5.0 2012 2012 4.5 • Async programming
• Caller information
C# 6.0 2015 2015 4.6 • Exception filters
• Await, catch, finally blocks
• String inte rpolation
C# 7.0 2017 2017 4.6.2 • Tuples
• Ref return and locals
• Local functions
• Out variables

Table 1. Evolution of C# [14][15][16]

3.2 .NET Framework
So, question here is what is .NET Framework? Why do we need this? .NET
Framework is a runtime environment or platform providing services and extensive libraries
to applications and developers. You may say “Okay, I understand” but still we have so many
programming languages . Each has their own benefits, “ why .NET , what are we missing
here” ? Each application has its own purposes like applications for Web, applications for
Business, or applications for graphics. But each has their own runtime, dev elopment tools,
editors, and their own libraries. Although many of their functions provide same purposes.
Like input/output or math functions. Overtime this created a split between many
applications of tools and runtime environment . These has no reusabilit y of any resources
across different platform and that’s why we needed .NET Framework. One runtime
environment, one editor , one set of libraries for all programming languages. That means all
compatible languages for .NET Fra mework . .NET Framework is develop ed by Microsoft that
mainly runs in Microsoft Windows. It supports Microsoft based .NET languages and other
programming languages as well.
.NET Framework has two parts, one is FCL (Framework Class Library) and the other
one is CLR (Common Language Runtime) . FCL has class libraries and provide language
interoperability across several programming languages. CLR is a virtual machine , part of
Microsoft .NET Framework, to take over the execution of .NET programs. The CLR provides
services like memory management, type safety, exception handling, garbage collection,
security, and thread management. In CLR virtual machine, managed code source codes are
executed. All programming languages that are drifted for .NET Framework is executed in
CLR. Because CLR means Commo n language runtime. So, it must be common, and it must
contain numerous languages. FCL and CLR form .NET Framework.

14 http://www.tutorialsteacher.com/csharp/csharp -version -history
15 https://stackoverflow.com/questions/247621/what -are-the-correct -version -numbers -for-c
16 https://www.codeproject.com/Reference/696530/Net -and-Csharp -release -history

PUDAK NURBERDIYEV

Below , in Figure 4 you can see more details about version history of .NET
Framework. In the picture, there are LINQ and Entity Framewor k as well. Both are big
concepts of .NET Framework. And in this project, we used both specifically.
On the right side, you see Figure 5 which is about Architectural Overview of Common
Language Infrastructure. CLI contains Common Language Runtime and Commo n
Intermediate Language. By using this, it helps us to tie with many languages supported by
the framework. It doesn’t be like only for one language. That’s why it is common.

Figure 4. .NET Framework versions [17] Figure 5. Architectural Overview of CLI [18]

3.3 Entity Framework and LINQ
Before working and managing data base with code was very wasteful of tim e and
monotonous job to do. It needed to write SQL code every time to connect with database
and use commands like UPDATE, INSERT, SELECT, or DELETE. The aim of entity framework is
to make the life easier for us to work with database. What Entity framework does is object –
relational mapping (ORM) for ADO.NET. It was part of .NET Framework but since version 6 it
is separate. They separated because entity framework is a big concept. E ntity Framework
support s the development of data -oriented software application s. It is an object -relational

17 https://e n.wikipedia.org/wiki/.NET_Framework_version_history
18 https://en.wikipedia.org/wiki/.NET_Framework

Article title

mapper. Which means that a data from database can be represented as objects, classes, or
collection of objects.
So, why should we script SQL every time we need to do something with database?
Waste of time. When we work with Entity framework which means we work with objects or
collection of objects we simply must access objects names and its properties. When we edit
something from objects it will be marked as “edited” by ORM. Then when you save all the
changes It automatically updates database with commands like INSERT, DELETE, and
UPDATE. So, whatever changes we do for objects, will be reflected to a database.
Some people cannot code with SQL because it may seem to them very hard. But
there is LINQ in .NET Framework, which is very like SQL coding. It is easier to code and
understand. Here is a picture below in Figure 6 to understand what LINQ look s like. If you
pay attention to the picture, it is way too easier than SQL codes. Here in LINQ code,
“Customers ” is an object from E ntity Framework and filters with Where if the city field is
equal to “Boston ”. Then select those indexes whom are from Boston but take only fields
“Name ” and “Address ”. And make it equal to local variable “ result ”. As we discussed
Lambda expression before, here c is looped for every customer from “ Customers ” object.

Figure 6. LINQ Example [19]

First Entity Framew ork version was released in 2008 along with .NET Framework 3.5.
For the first time, developers criticized it. They even voted for “Vote of No Confidence ”.
Approximately 1000 of developers voted. [20] The second version of Entity Framework was
released as pa rt of .NET Framework 4.0 in 2010 and named Entity Framework 4.0. This
meant a response for the critics of first release. Last version was released in 2016, named
Entity Framework Core 1.0.
See below, Figure 7, for generate d entity framework entities. Thos e two tables which
are “student” and “Parents” are directly generated from Database. Database can be from
Microsoft SQL Server, DB2, MySQL, Oracle, or any other databases. If we look at student’s
navigation properties, we can see only a “Parent” reference. But in Parents’ navigation
properties we can see “students” (plural) . That means student can only has one parent but
parents can have many students which are their children. All the fields from each table are

19 https://www.codeproject.com/Articles/19154/Understanding -LINQ -C
20 http://efvote.wufoo.com/forms/ado -net-entity -framework -vote -of-no-confidence/

PUDAK NURBERDIYEV

from database, if we want to access a field, l ets’ say “FullName” of a “student”. Then we
access like data model name (point) table name (point) field.

Figure 7. Entities

When we work with EF, we should be very careful because slightest mistake can ruin
a whole project. And later finding the bug and fixing it, is much harder.

3.4 Microsoft SQL Server
“Microsoft SQL Server is a relational database management system, that supports
wide variety of transaction processing, business intelligence and analytics applications in
corporate IT environments. Its’ one of the three market -leading database technologies,
along with Oracle Database and IBM’s DB2 .” [21]
Microsoft Management Studio tool manages Microsoft SQL server for creating
database or creating/deleting tables, inserting/e diting data etc. See below Figure 8 for
management studio.
The reason that I chose this is because I thought it will be much easier to use all
technologies just from one company which is Microsoft. But in fact, I can use oracle
database or DB2 as well. Another factor is that it has its’ own management studio which is

21 http://se archsqlserver.techtarget.com/definition/SQL -Server

Article title

so easy to practice. Like opening a table or inserting data, or making relations between
tables etc. The program with user interface is always better plus SQL server has a
community support.
It was first released in 1989, almost 30 years.

Figure 8. Microsoft SQL Server with Management Studio [22]

3.5 HTML and CSS
Hyper Text Markup Language (HTML) is the standard markup language for creating
web pages and web applications. With Cascading Style Sheets (CSS) you can put more design
on it. Webservers send HTML codes to our device s and we view them by our web browsers.
It is a simple file with file extensions “. htm” or
“.html ”. Between servers and clients only these files
are transferred. Much more detailed only HTML,
CSS, JavaScript, and other codes are transferred.
HTML is consis ted of many tags. Like <html> ,
<head>, <body> and so on.
It was released first publicly in 1993 by Tim
Berners -Lee. Last release is in 2014 which is famous
HTML5 was published .

You can see on the left side, how an html
code looks like in Figure 9. You can put html codes in
any file editor you want. E.g. notepad, notepad++,
visual studio, vim or emacs. A nd in any file, you want but with .htm/.html file extension .
Html code starts with <!DOCTYPE html> code.

Figure 9 HTML Code

PUDAK NURBERDIYEV

Basically, HTML gives a structure to our webpages. It is the basics of pages.

Cascading Style Sheets is a style sheet language used for design of markup web
pages. File extension is .css.

With CSS we can design contents, aspects
such as layout, colors, and fonts. CSS can also help
with responsi veness. Responsive means suitable for
all devices as dimensions . CSS is easy code, it has
syntaxes which can be like any ki nd of words of
course it should valid. CSS codes can be stored
external, like in a file linked with all html files or it
can be insid e an html code . It can be in various
types like css codes can be inside <style> tag or it
can be in style attribute. CSS really saves a lot of
our time by designs because html never intended
to have any tags for design purposes .
First release was in 1996 with css1 version .
Last version is CSS3 which was found in 2012 with
lots of cool stuffs.

3.6 JavaScript and jQuery
JavaScript is a script language which helps webpages to be more functional and more
helpful for users. JavaScript can allow us to do more complex things on webpages. People
always thought that JavaScript is like Java programming language, but in fact it is not.
JavaScript was inspired from Scheme. Without JavaScript, our webpage going to be very
boring because it is a static information onl y. But if we could animate our webpages or do
some video playbacks, animate pictures, change of colors, transformation, updating
webpage without refreshing, giving likes like on Facebook, graphics, maps and so on. All of
them are possible by JavaScript. Firstly, it was named LiveScript, but later they changed it to
JavaScript because trademark policies. JavaScript is one of the most famous programming
languages at the moment. Predicted amount shows that approximately 1 0 million popular
web pages used in 201 7.
• JavaScript is working with Document Object Model (DOM).
• It has “ .js” file format.
• It was found by Brendan Eich in 1995 .
• Last release was in 2016.
• Developers are Netscape Communications Corporation, Mozilla Foundation,
Ecma International. Figure 10. CSS code example

Article title

We can see b elow in Figure 11 , a glimpse of JavaScript code. We can import JS codes
just like we do for CSS, externally or internally. Below we imported it inside Script tag s. But
you can also link it to a file.

Figure 11. JavaScript code

“jQuery is a fast and concise JavaScript Library created by John Resig in 2006 with a
nice motto – Write less, do more .
jQuery simplifies HTML document traversing, event handling animating, and Ajax
interactions for rapid web development. “ [23]
Last vers ion 3.2.1 was released in March 2017. Its’ repository is in
github.com/jquery/jquery. jQuery is a n MIT licensed product.
The reason that we used jQuery in our project is because it eliminates many lines of
JavaScript codes and resolves it in few lines. Anyway, motto of jQuery is write less, do more.

3.7 Razor Engine
Razor is server -side markup
language. That means we can use
server -side codes in the place where
HTML , CSS, JavaScript codes written. It
is a great way to code, very easy to
implement. We can do complex codes
like doing some changes for database
or accessing global variables etc. Razor
pages have .cshtml or .vbhtml file
formats. It was first released in June
2010 by Microsoft along with Visual
studio 2010.
On the Figure 12, razor engine

23 https://www.tutorialspoint.com/jquery/jquery -overview.htm Figure 12. Razor engine

PUDAK NURBERDIYEV

code starts with “@” symbol. These codes are dynamic when we run the project, first only server –
side codes are executed (which are inside “@ { … } ”), then other parts of page executed .

4. Design Architecture

Since, this project is very big, we have so many tabl es on our database. It is big
project because you are kind managing approximately 500-800 students. We have 21 tables
at the moment. It may vary later for different purposes. In this chapter, we discussed about
all these tables and its properties. Each tab le has its own purpose.
For Database, we used Microsoft SQL Server. For this we first created a database
called “DBProject”. Then we created a scheme called “test” and after that tables. Purpose of
scheme is just to make sure all tables are organized and together.
Let’s start exploring our database by usernames and passwords. We have so far 4
roles. Teachers’ role, students’, parents’, and administrator’s. For the part with usernames
and passwords, Model -View -Controller (MVC) creates automatically databas e. When we
first start to create project in visual studio it helps us to save our time by creating this
database which is very helpful. In Figure 13, we can see that there are 2 data connections.
One is “DBProjectEntities” and the other one is “DefaultConn ection”.

Figure 13. Database for usernames and passwords

Article title

DBProjectEntities is the connection to the SQL Server. But DefaultConnection is a database
for usernames and passwords. It has the following tables:
• AspNetRoles – is for determining which user has those
4 roles (teacher, student admin, parents) .

• AspNetUserClaims – is different type than
AspNetRoles. In roles when a user is set to that role, it
will have full credentials accesses for that role. But in Claims, you may have access
for user emails, or user’s age etc., but not the role itself.

• AspNetUserLogins – is for holding information about 3rd party/external logins.

• AspNetUserRoles – is information about already created users. UserId is hashed and
its roleId is from AspNetR oles in Figure 14. In Figure 15, first user has role of admin,
and second user has role of student.

Figure 15. AspNetUserRoles

• AspNetUsers – is table about the users that are already being created. (See Figure
16). As you can see usernames and passwords are hashed. Even developers cannot
see those information, which is very cool implementation from ASP.NET.

Figure 16. AspNetUsers

Now Lets, analyz e table student. It has 8 rela ted tables. Table student is very
important since all of our work are about students. Look at the Figure

Figure 14. AspNetRoles

PUDAK NURBERDIYEV

Student (test)
StudentId
FullName
Name
Surname
Age
GenderId
Address
Email
Birthday
ParentsId
ClassId
FormTeacherId
GPA
HomeworkId
RegisteredDate
EndDate
GraduationDate
ActiveDiscipline (test)
StudentId
Points
PositiveC…
Negative…
GreenCar…
RedCardId
AbsentsId
ExcusedId
TardyId
Parents (test)
ParentsId
FatherNa…
MotherN…
Email
EmailOpt…
Password
StudentId
FatherBir…
MotherB…
Address
Registere…
EndDateTeacher (test)
TeacherId
FullName
Name
Surname
Age
GenderId
Address
ClassId
Email
Registere…
StartedD…
EndDate
Homework (test)
Homewo…
Homewo…
Homewo…
MaterialId
Homow…
Homewo…
TeacherId
StudentIdTest (test)
TestId
TestDate
MaterialId
TestGrade
TestDescr…
StudentId
TeacherIdProject (test)
ProjectId
ProjectD…
MaterialId
ProjectGr…
ProjectD…
StudentId
TeacherIdExam (test)
ExamId
ExamDate
MaterialId
ExamGrade
ExamDes…
StudentId
TeacherId
FormClass (test)
ClassId
ClassName
ClassYear
TeacherId
StudentId

Figure 17. Student table and all related tables

As you can see, related tables are Parents, Teacher, FormClass, Di scipline, Test,
Homework, Exam, and Project. In each tables’ name, there is parenthesis of word “test”,
that’s because all of them are in same scheme called “test”.

Student table has following columns:

Article title

StudentId – int, not null, primary key. Represents student table.

FullName – nvarchar(50), not null, Full name of user, you may ask why do I have it, because
there are already columns of Name and Surname. Well, name and surname will only contain
name and surname, they won’t include middle names. Or some Arab students have long
names.

Name – nvarchar(50), not null.
Surname – nvarchar(50), not null.
Age – int, not null.
GenderId – this is not related to the table “gender” but we used it as a E num.

Address – nvarchar(50), can be null. Some students may leave away from parents. Normally,
only parents’ address will be enough. But who knows, we needed take care of all
possibilities.

Email – nvarchar(50), can be null. Usually emails that were given from school domain. E.g .
firstname.lastname@isb.ro

Birthd ay – datetime, not null.
ParentsId – int, not null. Related to the Parent table.

ClassId – int, not null. Related to the FormClass table. We didn’t user the name as
“FormClassId” because it is too long. ClassId is very simple name.

FormTeacherId – int, n ot null. Related to the Teacher table. Here we used FormTeacherId
because a student can only have one teacher which is form teacher. Of course, many
teachers can teach the student but not all of them can be his/her form teacher.

GPA – float, can be null, average of whole year grades.
HomeworkId – int, can be null. Related to the table Homework.

RegisteredDate – datetime, not null. Because if a student is inserted into database we know
that there must be a registered date.

EndDate – datetime, can be nu ll. If the student left school or contract expiration.
GraduationDate – datetime, can be null. Graduation date of student.

Active – bit, not null. If the contract of student expired or left the school or any other
possible reasons, we deactivate from th is column.

Let’s look at parents —student —teacher relations. (Figure 18)

PUDAK NURBERDIYEV

Figure 18. Parents –student –teacher relation s

Parents – Student : One to Many relations . Parents can ha ve many students. But a student
cannot have many pare nts.

Teacher – Student : One to Many relations. Teacher can have many students in his/her class.
Because here teacher is related as a form teacher. Form teacher means that each teacher
needs to have a class which he/she is responsible. Form teachers’ job are to be the first
person for contacting reasons by parents, or any other Senior Management Team (SMT) .
So, Form teacher for sure can have many students but only one class. Student can not have
many form teachers that’s why it ’s one to many relations.

As we mentioned above teacher can only have one class for being form teacher.
There is a column classId in teacher table.
ClassId is int, can be null, and is not related to the table FormClass because some teachers
don’t have form class or any other spec ial class. Usually teachers from ICT, music, or Art.

Columns from the tables parents and teacher are nothing that special, they are just
like the table Student.

Now let’s analyze table FormClass and student relations. Foreign keys are ClassId
from For mClass table and ClassId from Student table.
FormClass – Student is one to many relations. One form class can have many students in the
class. But one student cannot have many form classes. (Figure 19)

Article title

Figure 19. FormClass – student – discipline tables

Discipline – Student is one –to–one relation. Table Discipline is about student’s all
behavioral records are stored. Like behavioral points, gained from columns like Positive
comment or Green cards. Also lost points from Negat ive comments or Red cards. After that
student’s presence, absence, excused or tardy. So, this means each student must have its
own discipline table record. The foreign keys are StudentId and StudentId from each table.

On the next page Figure 20, we have tables Test, Project, Homework, exam, and
student. All of them are having one—to—many relations. One student can have many
exams, tests, homework, or projects. But One exam, test, homework, and project cannot
have many students. Seems very unlogic, how com e one exam cannot have many students?
In the classroom during the exam don’t they all have same papers? Or All class don’t have
same homework? Well it even confused me at first. Honestly It looks unlogic to me as well.
But If we pay attention:
– Where are we going to store exam result for a student, or homework, test, project
results?
– Where do we need to put them?
That’s correct we need to put each table’s result in that table. That means each student will
have his/her own exam, test, project, homework tab les separately . When a homework is
given to the whole class, each student in that class will have a separate homework table. So
that teacher can grade for each student.
And another advantage of this structure is that we can access all exams, projects,
tests, and homework done be a student from the beginning of time till present . Which is
very helpful , in time consuming for data accesses .

PUDAK NURBERDIYEV

Figure 20. Test, Project, Exam, and Homework tables

Now, below we explained what kind o f rules are applied regarding the discipline
policies . First, when we start the school every student will have a 40 discipline points. That is
a default number. This point is modified only by Negative, Positive comments or Red card,
Green cards.
– Positive comment adds +1
– Negative comment is -1
– Green card adds +3
– Red card subtract s -3

• Positive comment , is given by teacher when student impresses with something, like
answering teachers question, doing the given task well, behaving well during the class,
being active, or helping other classmates etc. Of course , this totally depends on the
teacher, but these are just examples. Usually teachers give positive comments so easily.

• Negative comment , is opposite of positive comments. Not behaving well, not able to
answer questions, not paying attention, disturbing others, not doing the classwork,
playing with phones or any other digital devices while should n’t, etc. There are again
many reasons to give negative comments but again depends on the teacher, so that
stude nts don’t make headaches for the teachers. During the class teacher must first
warn student verbally, then to give negative comment.

• Green card , is given when a student does something exceptional. It can be something
like for being first to finish tasks, or doing the best project in the class, or solving

Article title

some thing which is very hard or have n’t taught by teacher, or winning one of first 3
places in competitions. All those difficult challenges are usually awarded with green
cards. And green card has 3 point s. You can either take 3 positive comments or one
green card.

• Red card , is opposite of green card, which a student makes a real headache for the
teacher during the class or doing something outside the class which makes headaches
for school. During the cl ass after 3 warnings, student will get red card. First one is verbal,
second one is negative comment and third one is red card.

Figure 21. Discipline and related tables except student table.

Tables are CommentNegative, Com ment Positive, CommentGreen, and CommentRed. These
tables have similar columns each .
• Each related table own s their ID – int, not null.
• TeachersId – int, not null, which teacher gave that comment ?
• LessonId – int, not null. I n which lesson it happened ?
• Reason – nvarchar(MAX), can be null, what is the reason ? Comments of teachers .
• StudentId – int, not null, For which student it was given ?

PUDAK NURBERDIYEV

There are other tables which are related to Discipline table. They are PR_Absent,
PR_Excused, and PR_Tardy. They repre sent ab sence s, excused, or tardy’s of each student.
PR meant to Presence. I used PR prefix so that all of these tables will be listed on the same
rows in Tables folder from database. All of them again have similar columns:
• Each with their own ID, like ExcusedId – int, not null.
• Each with their date, like TardyDate – datetime, can be null.
• Each with their PeriodId, like AbsentPeriodId – int, not null. Not related to Period
table because Period table is used as Enum
• StudentId – int, not null. To which student was gi ven?

All the mentioned tables have one —to—many relations with Discipline table. Because one
comment can not be given to many students because each of these tables have StudentId
column, specific for one student, but one student can have as many comment s as possible.

Now let’s discuss following tables from Figure 22.

Figure 22. Lesson and related tables

Lesson table is related to FormClass, Information, and Teacher tables.
– Teacher – Lesson relation. One teacher can have many lessons and one lesson can
only be taught by one teacher. So, there is one —to – many relation s. Also teachers
can teach many other subjects as well. L ike Geography and English etc. That’s why
we have MaterialId in Lesson table.
– FormClass —Lesson relation. O ne class can have many lessons, but one lesson can be
done with only one class . So, we have one —to—many relations .
– Information —Lesson relation. One lesson can have an information or not. Because it
InformationId can be null. But an information can be give n to many in many lessons.
So one —to—many relations.

Article title

Lesson table has following columns:
• LessonId – int, not null. Representative of table Lesson.
• TeacherId – int, not null. Related to the teacher table. Which teacher is teaching that
lesson with that mate rial (subject).
• MaterialId – int, not null. Not related to material table. Because it is used as enum.
• PeriodId – int, not null. Not related to any table because table Period is used as
enum.
• ClassId – int, not null. Related to the FormClass table.
• Informa tionId – int, can be null. Related to the Information table.

Information table has following columns:
• InformationId – int, not null. Representative of information table.
• InformationText – nvarchar(MAX), not null. What is this information about.
• FormClassI d – int, not null. To which class was given this information.

Then we have other tables like Material, Gender, and Period. These tables are used as
enums. They are not related to any tables.

(a)

(b)
(c)

Figure 23. Inserted datas for tables Period (a), Material (b) and Gender (c)

PUDAK NURBERDIYEV

5. Implementation

In this chapter , we talk ed about Model —View —Controller (MVC) first because the
project is implemented with MVC framework. It is very important that we understand. Then
we talk ed about how we implemented, what type of data accesses we used. Mainly we
showed our codes and explained patterns of how they work.
In this chapter, we couldn’t explain all of our codes and work, because it takes very
long to time to explain every thing. Instead we explained only few things which we thought
important and showed how they look when executed.

5.1 Model —View —Controller (MVC)

“The Model -View -Controller (MVC) is an architectural pattern that separates an
application into three main logi cal components: the model , the view, and the controller.
Each of these components are built to handle specific development aspects of an
application. MVC is one of the most frequently used industry -standard web development
framework to create scalable and extensible projects.” [24]

Figure 24. MVC [25]

Model represents data for project. All da ta from database. Mode l can be updated or
manipulated (See Figure 24) . If the user views model that means user views data. Whatever
updates are going to the View. Whatever data manipulations are coming to the Model.

24 https://www.tutorialspoint.com/mvc_framework/mvc_framework_introduction.htm
25 https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93control ler#/media/File:MVC -Process.svg

Article title

View represent how the code and projec t looks like. It is basically razor engine with
‘.cshtml’ file extensions. User only sees View , but updates from model are coming to View.
Controller is server -side of application. It is the brain of project. All the controls are
going through from here. User uses controller. User clicks something at this action comes to
Controller then controller gets data through model and redirects to the view. Which user
sees from View.
These three are cycle of how an application works. Controller is the brain, Model is
the resources, and View is how it looks. For Model, we showed you before many pictures in
the last chapter. For view check below Figure 25. Look at how View is using Model, by
simply writing variable ‘Model’, accesses to data.

Figure 25. View example of Manage page

In this view, it has the model of IndexViewModel. Which is derivation of columns from some
tables. This view code represents the page Manage after you login. It checks if the Model
(user) has password already, if yes then, show the link for changing password and text
“Change your password”. If not, then show the text “Create” and redirect to the actionlink
“SetPassword”. To see how the view of this code above looks, check Figure 26.

PUDAK NURBERDIYEV

Figure 26. Manage page for user

And the controller example is in Figure 27. This code is about ‘Teachers Controller ’.
Variable ‘db’ is access to our database from sql server. Remember entity framework? Look
how simple is that now to access database and modify . Variable ‘teachers’ is equal to all
teachers who are active and ordered by their classes. If the user has teacher role, which
means if the user is teacher then return data for only that teacher. Otherwise send all
teachers to the View. This is for admin users. Because admin needs to be able to see
everything.

Figure 27. Controller example

Article title

5.2 Teacher ’s role

Teachers first needs to register for the application. Anybody can register for the
website from “…/Account/Register ” link but it will be an ordinary user. Only admin can
create and verify a teacher user. User needs to write email address for the username and
password. For registering, there must be a “Confirm password”. (Figure 28)

Figure 28. Register page

After registering, admin will check it and gives the role of teacher. Because the application is
not for public, it is only for the school which is applied . After this process teacher will be
able to login.
For users of teachers, there is a tab which is Timetable. In Timetable tab teachers will
be able see the programs of each week with date and today’s date. It is so easy for teachers
because all they need to do is access application and see the timetable (Figure 29) . They
don’t have to dr aw or print anything. All they need is a device and internet. It can also be
PCs or laptops. In the timetable, cool thing is maybe you are teaching more than one
subject. And maybe more classes. Everything is organized in the timetable. It even
highlights which day with light green color. Even highlights the lesson time you are teaching
now with yellow color.

PUDAK NURBERDIYEV

Figure 29. Timetable

For example, in the figure 29, the teacher is only teaching subject “Information and
Communicatio n Technology ” (ICT) . All the above lessons are taken from table “Lesson” from
database. And if we click each lesson, immediately it will show us the students list and
options like positive/negative/red/green comments. Or to mark some students tardy,
absent , or excused. Teacher can also give homework for everybody or information to be
sent. Also , most importantly grades for tests, homework, exam s, or projects.
In this page, whatever the teacher changes will be visible to parents. When parents
login they can only see those changes for their child ren.
If the teacher has a form class then he/she is able to see that class specifically. Just
like parents do, but for all students. For parents, they can view only for their children but
form teachers can see for all students from that form class. Form teachers can see all the
comments for all students. They can see all grades and absences, all the activities we can
imagine. The reason which we added this option is because when parents see some bad
results from childr en, they for sure contacts first form teachers for clarification. “Is there
something wrong with my children?”, “what can we do for our children?”. Some expert
parents are even trying to blame teachers, for their child’s bad results. And try to express
their satisfactions through form teachers. As we can see form teachers are first contacted
person between school and parent relations. So, of course form teachers should see all
details of each student.

Article title

5.3 Parents’ role

There is not much roles for Parent s, because they are usually planned to view
activities, details, or news about what is going on. Because they are busy with work and
stuff so they won’t be able to do more than just checking’s. But this being able to check or
view all those, are very impor tant for them and for students. Because otherwise if students
understand that nobody cares about them or nobody verifies what grades they got etc.,
student won’t grow as a better and successful person. This proven fact for many years in all
over the world.
Parents, first login to their account. And all they can do is to check all activities their
children got involved. Other than that , they can see school news on home page. And can
email teachers or form teacher. All activities are listed as a table and so rted by date. Each
row shows detailed all information.
E.g. “Period 3 | Math | Homework | Calculat e the area of geometrical shape from
your book page 35, exercise 6.7 . | Email Teacher (button) | Date “

Figure 30. Login page

PUDAK NURBERDIYEV

From that moment, parent saw that his/her child got homework, and in the evening
student plays games or things which are useless, parent will say that “ Look you have
homework on math, did you do it? ” This puts a real pressure on kid and needs to the
homework now because his/her parent will ask again.

5.4 Admin’s role

We didn’t implement that much interface for admin because of little time we had.
But admin can always add/modify data from database. Admin’s main job is to decide which
users will have their rol es between student/teacher/parents.
As I mentioned before admin needs to create all users for everybody. Because it is
not a public website, it is for a private school. If they allow all users to register for
themselves what if that website is shared wit h other people and they also end up to
register. Result, there will be many users on database. Now it is very hard for admin to sort
out which one of them are from school. If any kind problems happen with the application
only admin needs to sort out.
Of course, admin also has some interfaces, like adding, creating students, editing
their information, or deleting them, (Figure 33).

5.5 View Models

View models are used when we try to use columns from different tables. Remember
entity framework, it represe nts all the tables from database. But in our views (pages) we
don’t always want to display the table directly. Instead we may need to display some parts
from student table and then some parts from Form class table and Materials table and
Homework table. So, to display all this in one page, we need view models. We cannot send
all those tables just for one page. It will slow us down. Or we sometimes want to display
only few columns from a table . View models are used for pages. Because in Figure 24, in
cycle o f MVC, Model is connected to View. Model is sending data to View pages. Every page
must have a model.
View models are having ‘.cs’ file format just like controller files have. And views are
placed in “Views” folder from our project root. Models are stored in “Models” folder, and
Controllers are in “Controllers” folder. In our project, we used quite a lot of view models
because we have many pages. For each page either we need to send table itself or view
models. And these models are on first line of each pa ge.
Like: @model IEnumerable <Project.Models. ClassViewModel >
Here IEnumerable means this page gets a list of “ClassViewModel ” model. So that, it will be
listed in each rows of table. Look at how the model written,
Project.Models.ClassViewModel. Project is our root folder then (dot) as I mentioned above
Models folder where all models are stored, (dot) name of the model. To use this model in
the page you need to use word “Model”. So, when we see word Model in every page , don’t

Article title

think that all of them are same variable data source. Model in page s, represents @model of
that page.

Figure 31. View model class

In the Figure 31, we can see our “StudentViewModel” model class . This model is for
index page of Student Controller. If we look at it closer, we didn’t use all columns from
student table. We only used some of them which we needed for page index.
[Key] represent primary key. Above, our primary key is StudentId. All the other
variables are owned by class StudentViewModel, just like in java. First, we introduce public
or private variables, then we introduce default constructors and methods . In the picture one
of our constructor is public StudentViewModel() {} .
FormClass, Parent and Teacher are related tables. Since student table c an only have
one FormClass, Parent and Teacher it is one —to—many related. If it was inverse then we
would have a list for each one of them.

PUDAK NURBERDIYEV

(a)

(b)

Figure 32. (a) Constructor of StudentViewModel. (b) Controller that used StudentViewModel

As we can see in Figure 32 (a), there is another constructor for StudentViewModel,
this time with parameter “student”. Parameter “student” co mes from Figure 32 (b) line 26,
.Select(managee => new StudentViewModel (managee)) . Here manage e is one of the
students which is active = tru e. And later ordered by their Class Name. So, every time new
student looped through line 26, Figure 32(a) is called with the variable student (=managee ).
All the managee values are passed to the public variabl es of Figure 31.
If the user has “student” role then only his/her information will be shown, else all
students’ information. Because this is done for admin interface. Admin needs to view all
students, teachers , and parents. If the user is in role for “st udent” then from variable
“studentsViewModel” we check each one of their email address, if matches, just return to
the page as a model. Only those which matches. Logically , there is only one email address
that is going to match.

Article title

Figure 33. Example of admin view for students

Results of Figure 31, and 32 we have Figure 33. All those codes’ result is above.
Students are listed they are from class 8I, for m teacher is Bogdan Sarykuliyev .

And below in Figure 34, we have another example of teachers . There are Teachers,
Class information, and Materials on the left side. Table is with teacher’s name and their
subjects that are teaching.

Figure 34. Teachers table

PUDAK NURBERDIYEV

6. Conclusion

Before technology were n’t very famous , a teacher used to put each student’s grade
on a notebook and on student’s notebook with his signature signed. Maybe this system is
still used by some poor countries where technology is not that advanced . This opened a
door for student s to hide their marks. Because there is a possibility of being scared or
ashamed to show their grades to parents. They may lie or change grades.

Offering such an academic application will simplify the process and will help in
growth of everybody’s intel lect and education . Much directly said, the project will simplify
the relationship s between professor , parent, student, and the work each of them has to do.
It solve s distance problems, and offers many different facilities, like online information , free
and quick communication between members , forums and communities, automated
processes to save time, etc. It will reduce the plagiarism, a positive thing for both professors
and the students. The parents too will feel closer to the on -going a ctivity of their kids. If all
the above are fulfilled, then this project will reach its goals.

Factors which may delay the development of the pr oject are the following:

– The cooperation between the appropriate government branch (if the projec t
instance will be dealing with schools in groups) and the school staff dedicated to the
project, or just the school staff (if the project instance will be dealing with private
schools). Must be said that the above is an essential factor which decides t he success
of the project.
– The minimum internet infrastructure and system requirements

Eventually there are other alternatives to this project. But there is no chance of
duplication or conflict, because this project has unique and new content, and implemented
by us. There will be no third parties included in the implementation process. There are some
new creative ideas and observes. Otherwise there is no point of doing it.

Future improvements are