Wydział Informatyka

Studia I stopnia (stopień)

Kierunek: Informatyka
Specjalność: Informatyka stosowana .

Denys Horodenko
Nr albumu:…………

Temat: Tworzenie internetowego portalu typu Online

Contester do sprawdzania prac studenckich z zakresu
programowania

Praca magisterska napisana pod kierunkiem:

Prof. zw . dr hab Piotr Palka

Środa Wielkopolska 2023

Środa Wielkopolska 2023
 ABSTRACT

Explanatory note: 63 pp., 20 figures, 10 tables, 18 sources.

Object of development: software for automating the process of checking student
works on programming.
Subject of development: instrumental means of checking student works on
programming.
The goal of the diploma project: development of software to automate the
process of checking student programming works.
The first section provides theoretical information about the tools used to solve
the problem; an analysis and comparative characteristics of technologies for the
development of the designed software are carried out, a selection of tools for solving the
task is made based on the analysis.
In the second section, a system analysis was carried out, a description of the
subject area was carried out, a review and analysis of existing analogues was carried
out, a specification of system requirements, technical and system development support
was provided.
In the third section, practical implementation of the designed system was carried
out, informational, technical and system development support was provided.
The relevance of web service development is determined by the high demand for
such systems, since automation makes interaction more flexible, understandable, open
and standardized, and also provides significant advantages: mobility, contactlessness,
price, scalability, responsiveness to changes in the market for goods and services, speed
and efficiency of commercial operations, etc.

List of keywords: INFORMATION SYSTEM, WEB SERVICE, DATABASE,

PHP, HTML, CSS, MYSQL, JAVASCRIPT.

3
 TABLE OF CONTENTS

ABSTRACT.................................................................................................................... 3
INTRODUCTION........................................................................................................... 6
1. THEORETICAL INFORMATION ABOUT THE TOOLS USED TOSOLVE THE
TASK...............................................................................................................................8
1.1 Analysis of Existing Options for Task Solving...................................................8
1.2 Comparative Characteristics of Technologies for Online-Contester
Development to Check Student Programming Works............................................15
1.3 Analysis of Existing DBMS to Solve the Given Task.......................................19
1.4 Comparative Characteristics of Possible DBMS for Use in Online-Contester
Development to Check Student Programming Works............................................22
1.5 Selection of Tools for Solving the Task Based on the Analysis Performed......25
1.6 Conclusions to the Section................................................................................26
2. ANALYSIS OF THE SUBJECT AREA AND SPECIFICATION OF
REQUIREMENTS FOR ONLINE-CONTESTER FOR CHECKING STUDENT
PROGRAMMING WORKS..........................................................................................27
2.1. Brief Description of the Object Online-Contester for Checking Student
Programming Works...............................................................................................27
2.2 Description of the Subject Area........................................................................28
2.3 Review and Analysis of Existing Analogues....................................................30
2.4. Specification of System Requirements............................................................34
2.5 Technical and System Development Support...................................................38
2.5.1. Rationale for Chossing Technical Means..............................................38
2.5.2.Rationale for Chossing OS and Data Exchange Protocol........................39
2.5.3. Protection Measures against Unauthorized Access to the System.........40
3. APPLICATION DESIGN AND PRACTICAL IMPLEMENTATION.....................42
3.1 Software Product Structure and Algorithms of its Functioning.........................42
3.2 Choosing the Developed Application Architecture...........................................44

4
 3.3 Database Structure Design................................................................................44
3.4 Software Implementation of Application..........................................................46
3.4.1 Header and Footer Software Implementation for Web Pages.................46
3.4.2 Software Implementation of Home Page................................................48
3.4.3 Creating a Page for the Student to Complete the Selected Task.............52
3.4.4 Creating a Page for the Student to Complete the Selected Task.............54
3.4.5 Feedback Page Development..................................................................57
3.4.6 Creating a Registration Page...................................................................59
3.4.7 Creating an Authorization Page..............................................................59
CONCLUSION..............................................................................................................61
LIST OF REFERENCES...............................................................................................62

5
 INTRODUCTION

Automation of any type of service provision is a well-known and widespread

task today. In today's world, no business can do without integrating an information
system in some form into its operations, as this significantly improves both the
convenience and quality of interaction within the business and significantly increases
the reach of the client audience and the ability to interact with it and advertise.
We can talk about a large number of successfully implemented projects in
various industries, in companies of various sizes, using various automation tools. When
we talk about the process automation of checking student programming works, we mean
on-line application development with specific functionality that can be used on any
device. In fact, the concept of a web application has become an integral part of any
process of checking student programming works. The results of the existing data
analysis show that these processes are currently being actively automated in many
modern universities, so the relevance of this development is beyond doubt.
Objective of the Qualifying Work is to improve the process of developing web
services by way of software development and implementation to check student
programming works.
To achieve the goal, the following theoretical and practical tasks were set and
solved in the work:
- Performing the subject area analysis to select the best tools for task solving

- Analyzing the necessary materials to work with programming languages

- Analyzing the necessary materials to work with databases

- Choosing web application architectures

- Performing the subject area analysis

- Elaborating the specification of requirements for web-service being

developed
- Creating a web application user interface

- Creating backend part of the program for interaction with database

- System testing

6
 - Analysis of work results

Object of the Study is software tools for automating the process of checking
student programming works.
Subject of the Study is web-oriented software tools for designing and
developing software for checking student programming works.
Research Methods. In the process of work, general scientific and special
methods were used, which made it possible to study the subject and the object of the
study, to explore directions and ways to optimize the process of checking student
programming works.
Practical Importance of the Results Obtained. Practical importance of a web
service is determined by the high demand for such systems, as process automation
makes interaction more flexible, understandable, open and standardized, and provides
significant advantages: mobility, contactlessness, price, scalability, responsiveness to
changes in the market of goods and services, speed and efficiency of commercial
transactions, etc.

7
 SECTION 1
THEORETICAL INFORMATION ABOUT THE TOOLS USED TOSOLVE THE
TASK

1.1 Analysis of Existing Options for Task Solving

When the stage of online-contester development for checking student

programming works starts, the first thing that the developer will definitely encounter to
create a user interface is HTML (Hypertext Markup Language) and CSS (Cascading
Style Sheets), but these are only tools for page markup. In order to build something
bigger, it is necessary to choose the programming language that is most suitable for
solving the task.
HTML and CSS are markup languages used to create electronic documents (or
pages) and to design websites, respectively. Meanwhile, web programming languages
are more complex and can be divided into two categories: back-end and front-end
languages for web development.
Typically, web development involves server-side scripting (back-end), client-
side scripting (front-end), and database technologies 1.

Request sending
Browser Server

Page sending as HTML, CSS

and JavaScript

Request entering in the Loading

HTML, CSSnJS conversion to Program code execution
address bar
the usual view

Computer File

Figure 1.1 - Chart of Typical Web Application Operation

Let's use LinkedIn as example - the world's largest professional network. To

1
"PHP, MySQL та Dreamweaver MX 2004. Development of Interactive Websites." - St.
Petersburg: BHV-Peterburg, 2005. - 448 pages with illustrations.

8
enable candidates from different regions to connect with others, search for jobs or even
acquire new skills, LinkedIn was programmed in three different programming
languages for web development: JavaScript, Java and Scala, and then used Voldemort
as a distributed database to store the huge number of profiles.
Accordingly, programming languages for web development can be defined as
"complex logical instructions and processes" that help create websites that meet certain
requirements.
So, let's take a look at the most popular programming languages for web
development and determine which of them is the best for solving our task.

JavaScript

Whenever you talk about web development, the name JavaScript is most likely
mentioned 9 out of 10 times. According to the annual reports of various popular
platforms like Stack Overflow and Octoverse, JavaScript is one of the best and leading
programming languages in the world of technologies.
One of the main reasons for this is that a particular language can be used for both
front-end and back-end web development.
Looking at some previous trends and statistics, we can say that the popularity of
Node.js has somehow increased the use of JavaScript as a back-end language for web
development. Meanwhile, the language provides you with great features for server-side
development, such as a lightweight scripting language, dynamic typification,
interpretation, support for object-oriented programming, client-side validation, huge
community support, and much more.
JavaScript frameworks for server-side web development: Next.js, Express,
MeteorJS, etc.
Popular websites using JavaScript: Facebook, Google, eBay, etc 2.

2
"PHP and MySQL Web Development (4th Edition)", Luke Welling, Laura Thomson 848 pages., with ill.;
ISBN 978-5-8459-1574-0, 978-0-672-32916-6.

9
 Figure 1.2 - Example of JavaScript Development

Python

Although Python is quite famous among people for its compatibility with
advanced technologies like machine learning, IoT, data science, etc., this powerful
programming language is widely used and very suitable for server-side web
development also. Even one of the leading IT giants of today, Google, relies heavily on
Python, and it is one of the three main languages used by Google (the other two are Java
and C++).
One of the main advantages of using Python for web development is the huge set
of standard libraries that make the work of developers comparatively easier and more
efficient. Additional outstanding and unique features of Python, such as better code
readability, easier integration with other languages, support for GUI programming,
portability, and many other factors make it a more preferred language among web
developers.
Python frameworks for server-side web development: Django, Flask, Pyramid,
etc.
Popular websites using Python: Spotify, Pinterest, Instacart, etc3.

3
«Joomla! 1.5. User Manual", D.M. Kolisnichenko, with illustrations; ISBN 978-5-8459-1509-2; 2009,
224 p.

10
 Figure 1.3 Example of Python Development

PHP

PHP (or should we say hypertext preprocessor) is an experienced player of web

development in the world. This open source server-side scripting language was created
in 1994 and is specifically used for web development.
Since it is an interpreted language, it also does not require a compiler and can
run on almost all major operating systems such as Windows, Linux, macOS, Unix, etc.,
and has many advantages such as simplicity in development, cross-platform
compatibility,
OOP features, support for various standard databases such as MySQL, SQLite, etc.,
huge community support and much more. In addition, PHP is very secure as a server-
side scripting language, as there are many hash functions available in PHP to encrypt
user data. In particular, for the development of small web applications, it is a good
choice to choose PHP for server web development.
PHP frameworks for server-side web development: Laravel, CodeIgniter,
Symfony, etc.

11
 Popular websites using PHP: WordPress, MailChimp, Flickr, etc 4.

Figure 1.4 - Example of PHP Development

Ruby

Ruby is another programming language that is great for web development. Like
PHP and Python, Ruby is also easy to learn and suitable for beginners.
What makes Ruby special for web development is the Ruby on Rails
environment that powers sites like Github, Shopify, Airbnb, Groupon, GoodReads, and
Kickstarter.
Rails is a model-view-controller (MVC) environment that provides standard
frameworks for databases, web services, and web pages. It encourages and facilitates
the use of web standards such as JSON or XML for data transmission and HTML, CSS,
and JavaScript for user interaction.
The language itself is high-level and purely object-oriented, meaning that "every
value is an object," and Ruby has no primitive data types. It also has strict dynamic
typification and automatic garbage collection, i.e. memory management form.
Ruby's syntax is relatively similar to that of Python and Perl and is quite flexible.
While this makes Ruby easy for programmers to read, it can easily produce

4
Engine for Your Site. CMS Joomla! Slaed, PHP-Nuke». D. Kolesnychenko, St. Petersburg: BHV Peterburg,
368 p.

12
unpredictable runtime errors that are difficult to debug 5.

Figure 1.5 - Example of Ruby Development

Java

Java is another exemplary programming language for server-side web

development. Object-oriented programming language is widely used to develop
enterprise-scale web applications, as well as to develop Android applications, desktop
applications, scientific applications, etc. The main advantage of using Java is that it
works on the principle of "write once and run anywhere", i.e. compiled Java code can be
executed on any platform that supports Java without the need to recompile it. More
specifically, Java code is first compiled into machine-specific bytecode, and this
bytecode is executed on the JVM regardless of the underlying architecture.
Java Frameworks for server-side web development: Spring, Struts, Grails.
Popular websites using Java: LinkedIn, IRCTC, Yahoo, etc 6.

5
Joomla! Practical Guide"., North B., 448, St. Petersburg: SimbolPlyus.
6
"Joomla! Self-Taught", Dan Ramel, BHV-Peterburg, 2008, 448 p

13
 Figure 1.6 - Example of Java Development

C#

C# is one of the few languages that has been consistently ranked among the top
five programming languages by various standard indices for the past few years.
However, it is necessary to know that this general-purpose language was originally
developed by Microsoft primarily for the .Net platform. Along with server-side web
development, C# is now widely used in many areas such as Windows application
development, game development, etc. The language provides you with various useful
features such as fast compilation, interoperability, scalability and upgradability,
component-oriented, structured language and many more. In addition, C# offers a rich
set of libraries that help developers speed up and improve the development process
efficiency. So, if you are looking for a programming language for web development,
you can also try C#.
C# frameworks for server-side web development: .NET
Popular websites using C#: GoDaddy, Marketwatch, Stack Overflow, etc 7.

7
Creating Websites with Joomla! 1.5". Hagen Graf, Williams Publishing House, 304 p., 2009.

14
 Figure 1.7 - Example of C# Development

1.2 Comparative Characteristics of Technologies for Online-Contester

Development to Check Student Programming Works

To analyze the characteristics of the technologies mentioned in the first

paragraph, we will compile comparative tables for comparison by such characteristics
as: Paradigms, Typification, Memory Management, Object-Oriented Capabilities and
Frequency of Use.

Table 1.1

Comparative Characteristics by Paradigms

Possibility C# Java JavaScript PHP Python Ruby

Imperative + + + + + +

Object-Oriented + + + + + +

Functional +/- +/- +/- +/- + +

Reflective +/- +/- + + + +

15
General
+ + + + + +
Programming

Logical - - - - - -

Declarative ¤+/- - +/- + + +

Distributed +/- + - + +/- +/-

Table 1.2

Comparative Characteristic by Typification

Possibility C# Java JavaScript PHP Python Ruby

Static typification + + - - - -

Dynamic typification + - + + + +

Explicit typification +/- + - +/- +/- -

Implicit typification + - + + + +

Implicit type coercion - + + + + +

Table 1.3

Comparative Characteristics of Memory Management Capabilities

Possibility C# Java JavaScript PHP Python Ruby

Creating objects on the

+ - - - - -
stack

16
Unmanaged pointers + - - - - -

Manual memory
+ - - - - -
management

Garbage collection + + + + + +

Table 1.4

Comparative Characteristics According to Functionality

Possibility C# Java JavaScript PHP Python Ruby

Pure function declaration - - - - - -

First class functions + - + + + +

Anonymous functions + + + + + +

Lexical closures + + + + + +

Partial application - - + - + +

Currying + - + + + +

Table 1.5

Comparative Characteristics According to OOP Capabilities

Possibility C# Java JavaScript PHP Python Ruby

Interfaces + + + + + -

17
 Multimethods +/- - - - - -

Mixins - + + + + +

Renaming during
- - - - - -
inheritance

Multiple inheritance - - - - + -

Let's analyze all active sites and get the following chart:

Figure 1.9 - Frequency of Use in Existing Websites

From the performed analysis, we can see that about 79% of sites whose backend
is known use PHP in their design 8.

8
Web Database Application with PHP and MYSQL", 2nd Edition by David Lane, Hugh E. Williams. ©
O'Reilly, May 2004. ISBN: 0-596-00543-1.

18
 1.3 Analysis of Existing DBMS to Solve the Given Task

Regardless of what kind of information system and programming languages it will

be designed with, databases will be used for its full functioning.

Database is a systematic collection of data. They support electronic data storage and
manipulation. Databases greatly simplify data management.
Here's an example of database: online telephone directory uses a database to store
information about persons, phone numbers, and other contact information. Electricity
supplier uses database to manage billing, customer-related issues, fault data
processing, etc.
Let's also consider Facebook. It should store, process, and serve data related to
members, their friends, member actions, messages, advertising, and more. There are
many examples of how to use databases 9.

Application Program on the World Wide Web

Remote database
IP-address
server

Output Input data

data
Web browser - user
Input data
interface
Web server

Output data
Application program IP- Client IP-address
address

Figure 1.10 - Database Operation Chart

So, let's consider the most popular database management systems and
determine which of them will be the best for solving the task.

9
CMS List. Cms Overview. Site about site management systems. [Electronic resource] Access mode:
http://www.cmslist.ru

19
 MySQL

It is one of the most popular relational database systems. Originally an open

source solution, MySQL is now owned by Oracle Corporation. Today, MySQL is the
basis for LAMP application software. This means that it is part of the Linux, Apache,
MySQL and Perl/PHP/Python stack. With C and C++ under the hood, MySQL works
well with system platforms like Windows, Linux, MacOS, IRIX, and others.

Advantages of MySQL:

Free installation. Community version of MySQL is available for free download.

MySQL Community Edition with a basic set of tools for individual use is a good place
to start.
Simple syntax and little complexity. MySQL structure and style are very simple.
Developers even consider MySQL a database with a human language. MySQL is often
used in tandem with PHP programming language.
Cloud compatibility. Business-oriented in nature and originally designed for the
web, MySQL is supported by the most popular cloud providers. It is available on
leading platforms like Amazon, Microsoft and others 10.

MariaDB

MariaDB, an open source fork of MySQL, has commercial support. It operates

under the GNU General Public License and shares the same commands, APIs, and
libraries as MySQL.
Advantages of MariaDB:

Encryption. For MariaDB, an open source means unsafe. In addition to internal

10
MySQL 4 – String functions [Electronic resource] Access mode:
http://www.codenet.ru/db/mysql/mystring4.php

20
security and password validation, MariaDB provides features such as PAM and LDAP
authentication, Kerberos, and user roles. Combined with encrypted tablespaces, tables,
and logs, it creates a high level of data protection.
Wide range of functionality. MariaDB has introduced many new functions over
the past few years. For example, GIS support provides smart storage of coordinates and
requests for location data. Dynamic columns allow a single DBMS to provide SQL and
NoSQL data processing for a variety of needs.
High productivity. Although MariaDB is derived from the MySQL engine, it has
come a long way in terms of performance.

Advanced optimization functions improve thread pool management and data

processing. Thus, when deleting rows from a table, the operating system immediately
accesses the free space, eliminating gaps in the table space 11.

Oracle

Oracle is a relational database management system created and managed by

Oracle Corporation. It currently supports multiple data models such as document,
graph, relational, and key-value data models within a single database. In recent
releases, it has refocused on cloud computing.

Advantages of Oracle:

Innovations for the daily workflow. Starting with Oracle version 12c, when
the software entered the hybrid cloud era, new cloud computing technologies
appeared regularly. With each new release, Oracle tries to keep up with the pace of
innovation, paying special attention to information security, including active data
protection, partitioning, improved backup and recovery.
Powerful technical support and documentation. Oracle provides decent
customer support and provides comprehensive technical documentation for several
resources. That way, you're likely to find a solution to any problem you may have.
11
Web development [Electronic resource] Access mode: http://fcit.tneu.org/web-rozrobka/

21
 Large capacity. Oracle's multi-model solution allows to host and process huge
amounts of data. With the newly released multi-tenancy feature,

the database architecture now makes it easier to package multiple databases and
seamlessly manage them 12.

PostgreSQL

This database management system shares its popularity with MySQL. It is an

object-relational DBMS in which user objects and tabular approaches are combined to
create more complex data structures. In addition, PostgreSQL has a lot in common with
MySQL. It aims to strengthen compliance and extensibility standards. Consequently, it
can handle any workload for both single-machine products and complex applications.
Advantages of PostgreSQL:

Excellent scalability. Vertical scalability is the difference between PostgreSQL

and MySQL DBMS. Considering that almost any specialized software solution tends to
grow, resulting in an expanding database, this particular option is definitely conducive
to business growth and development.
Support for user data types. PostgreSQL initially supports a large number of data
types by default, such as JSON, XML, H-Store, and others. PostgreSQL takes
advantage of this by being one of the few relational databases with strong support for
NoSQL features.
Easily integrated third-party tools. The PostgreSQL database management
system has strong support for additional tools, both free and commercial. Their scope
includes extensions to improve many aspects. For example, ClusterControl provides
impressive assistance in managing, monitoring, and scaling open source SQL and
NoSQL databases.
Open source and community support. Postgres is fully open source and
supported by the community, which strengthens it as a complete ecosystem 13.
12
Astakhova I.F., Tolstobrov A.P., Melnykov V.M. SQL in Examples and Problems. Voronezh, 2001. 160p.
13
A.V. Bielozubov, D.G. Mykolaiev Basics of Working with HTML Editor Abobe Dreamweaver CS5.

22
 1.4 Comparative Characteristics of Possible DBMS for Use in Online-Contester
Development to Check Student Programming Works

For specified DBMS analysis, we will compile comparative tables for

comparison according to such characteristics as: Advantages, disadvantages, frequency
of use.
Table 1.6

Comparative Characteristics of the DBMS Considered

Name Advantages Disadvantages

MySQL Excellently documented It takes a lot of time and effort to

Offers many features, even in get MySQL to do simple tasks that

the free version other systems do automatically,

MySQL package is included
in the standard repositories of
the most common
such as creating incremental
backups.
No XML or OLAP support. Only

distributions of Linux paid support is available for the free

operating system, which version.

allows to install it simply

Supports a set of user

interfaces

Can work with other databases

including DB2 and Oracle.

Educational and Methodological Manual.

23
 Oracle The latest innovations and The cost of Oracle can be very
impressive functionality are prohibitive, especially for small
already implemented in this organizations.
product, as Oracle strives even The system may require significant
against the background of resources immediately after
other DBMS developers. installation.
Oracle is extremely reliable.

MariaDB Performance indicators will let Today, the stability is lower than
you know how the request is that of MySQL, so even on new
being processed. projects it is recommended to install

Extensible architecture and mysql.

plug-ins allow you to The engine is fairly new, so there's

customize the tool to meet no guarantee of further upgrades
your needs. yet.

Encryption is available at the As with other free databases, you

network, server, and will have to pay for support.
application levels.

PostgreSQL It is a scalable solution and Documentation is vague, so you

allows to process terabytes of may have to search for answers to
data. Supports json. Format some questions on the Internet.
There are many defined Configuration can be confusing for
features. inexperienced users.

Number of interfaces are Performance may slow down during

available. batch operations or read requests.

Frequency of Use

Let's analyze all cases of DBMS use and obtain the following chart:

24
 Figure 1.11 - Analysis of DBMS Use

As we can see, about 50% of sites whose backend is known use the MySQL
database in their design 14.

1.5 Selection of Tools for Solving the Task Based on the Analysis Performed

After the analysis and comparative characteristics between the tools that are
relevant in our time and the most suitable for solving our task has been performed, we
have the opportunity to conclude which of them we will use in the process of work
performing.
To write the visual part of Online-Contester Interface for Checking Student
Programming Works, HTML will be used as the main markup for the pages that will
be displayed to the user and
CSS will be used to style these pages and give them the look we need. JavaScript will
be used for dynamic changes. PHP will be used as the language for the backend part, the
analysis showed that this language is the most suitable for the task, as it has a fairly
clear structure, is completely free to use, has good performance indicators and is
excellent for writing web - applications, which is unequivocally confirmed by the
frequency of its use. MySQL was chosen as the DBMS because it is quite easy to use,
has a lot of functionality, is safe, has good speed of operation, and also has an interface
for interacting with PHP. PHPStorm was chosen as the IDE for development, and
14
Databases: Development and Management: Book / Hansem G., Hansem J. - M: Binom, 2010. - 704 p.

25
PHPMyAdmin was chosen to visualize the work with the database.

26
 1.6 Conclusions to the Section

In this section, the main theoretical data on tools for solving the task were given.
The analysis and comparative characteristics of these tools have been carried out. Based
on the analysis performed, the tools that mostly satisfy the task were chosen, in
particular: writing the visual part of Online-Contester Interface for Checking Student
Programming Works, HTML will be used as the main markup for the pages that will be
displayed to the user and CSS wil be used to style these pages and give them the look
we need. JavaScript will be used for dynamic changes. PHP will be used as the
language for the backend part, MySQL was chosen as the DBMS, PHPStorm was
chosen as the IDE for development, and PHPMyAdmin was chosen to visualize the
work with the database.

27
 SECTION 2
ANALYSIS OF THE SUBJECT AREA AND SPECIFICATION OF
REQUIREMENTS FOR ONLINE-CONTESTER FOR CHECKING STUDENT
PROGRAMMING WORKS

2.1. Brief Description of the Object Online-Contester for Checking Student

Programming Works.

The designed object is a web application for automating the process of checking
student programming work.
The web application allows the user to register in the application, log in to the
application, choose the topic according to which he/she submits the work, download the
completed work in a special form, get an assessment according to the check carried out
by the application, leave feedback on the application operation, and make a service
franchise.

Today, there is a great need for automation of services for checking student
works, so you need to have your own strategy to ensure that this task is performed as
automated as possible with the help of the developed software product In order for a
conditional student to hand in a work for review, he or she needs to perform a large
number of actions, such as traveling to a higher education institution, finding a teacher,
and having the teacher check the correctness of the work, which causes a lot of
inconvenience, especially given the large number of students. To solve this problem, the
most effective way will be to create a web application with a clear user interface and the
implementation of the functionality described above.
This system will allow you to check the completed programming task as quickly
and conveniently as possible without leaving your personal computer, which will
improve the quality of this service, significantly increase the comfort of checking
students' work, and free up a lot of time for teachers.

28
 2.2 Description of the Subject Area

Subject area of this thesis is creating a web-application for checking student

programming works.
In order to fully present the application functionality, the following main
processes are highlighted:

- obtaining information about ongoing works that the student can submit;
- possibility of authorization in the application;
- possibility to register in the application;
- possibility to obtain information on the performance of work;
- possibility to upload the completed work to a special form;
- receiving an assessment of the completed task;
- possibility of registering an application franchise;
- possibility to leave feedback on the application's performance.

Figure 2.1 shows a diagram of the development processes for a software product
under design.
Web site developers
Сustomer and its
services Web designer
Web artist
Web programmer

Web site
development
Hosting

Commissioning

Webmaster Web site support

Web administrator

29
 Fig. 2.1 - Diagram of Software Product Development Processes

Let's consider some of the processes of developed application.

Check of the programming work completed gives the user the opportunity to
choose a topic according to which he/she will complete the work, upload a file with the
completed work to a special form, which will be automatically checked and results will
be entered into the database of student results.

Main Stages of the Process:

o Selection of the work topic

o Going to the completed work download page

o Completed work uploading

o Sending work for checking

o Processing the request on the server side

o Receiving the checking result by the user

o Entering the result into the database

o The characteristics of the business process of purchasing the selected

product by the customer are presented in Table 2.1.
Table 2.1

Characteristics of the Process of Checking the Completed Programming Work

Name of Characteristic Characteristic Value

Checking completed
Name of the business process
programming work

30
 Main participants User, Server

Input event Work cheking request

Output event Getting the result

Source documents Result

Business process client User

2.3 Review and Analysis of Existing Analogues

Before starting to develop a certain system, it is necessary to search for its

analogues, determine their advantages and disadvantages in order to avoid making
the same mistakes and use the advantages of the analyzed systems.
Three web resources implementing the functions of the subject area were
analyzed.
Initially, the web application of Jsfiddle Company was chosen for analysis.
Next is the web application of Html-tester Company.
The web application of Code-basics Company was chosen as the third
analogue.
Let's consider in more detail the analogues presented above. First, consider
Jsfiddle application.

Figure 2.2 shows the view of the web application home page

31
 Figure 2.2 - View of the Application Home Page

This application has a very simple and intuitive interface, but very limited
functionality.

The application screen displays 3 fields for entering code in html, css, Javascript
and a field for outputting the result of code execution. Clicking on a tab opens detailed
information attached to it. There is an opportunity to leave feedback on the application.
The application has the ability of user authorization and registration.
Next, let's consider Html-tester web application:
Figure 2.3 shows the view of the web application home page

32
 Figure 2.3 - View of the Web-Application Home Page

This application has even less functionality, navigation through the application is
presented in the form of a horizontal menu. The application allows to check and format
HTML code online. Clicking on a tab opens detailed information attached to it.
Application does not have the ability to authorize and register users.

Finally, let's consider Code-basics application:

Figure 2.4 - View of Web Application Home Page

This application displays examples of mistakes that can be made when writing a

33
code; navigation through the application is presented in the form of a horizontal menu;
it is possible to select a topic on which to complete the task and upload it for checking.
There is also an opportunity to leave feedback about the application. Clicking on a tab
opens detailed information attached to it. The application has the ability of user
authorization and registration.

The comparative characteristics of the software products indicated above are

presented in Table 2.2.
Table 2.2

Comparative Characteristics of Software Products

Company-developer Aiwe.pl Reklama.lviv Webera

Name of the Jsfiddle Html-tester Code-basics

software product

34
 Functionality In this application, In this This application
the user can enter application, the displays examples
the code for user can check of mistakes that can
verification in and format the be made when
html, css, HTML code writing a code;
javascript online, there is no navigation through
programming possibility of the application is
languages and authorization or presented in the
immediately see registration. form of a horizontal
the result, can Clicking on a tab menu; it is possible
register, authorize, opens detailed to select a topic on
configure the information which to complete
interface. The attached to it. the task and upload
interface is easy to it for checking.
use for common There is also an
user. opportunity to leave
feedback about the
application. The
application has the
possibility of
authorization and
registration.

User interface It is intuitive, the It is intuitively It is intuitively

color scheme is understandable; understandable; the
well chosen. the color scheme color scheme is well
is poorly selected. selected.

After reviewing analogous systems, we analyzed all the advantages and

disadvantages of these resources. The advantages include such functions as online
checking of the completed tasks, the possibility to read information about tasks, the
possibility of obtaining a result, possibility of registration and authorization on the

35
 portal, as well as a convenient and intuitive user interface for the common user.
Also, a significant advantage is the possibility to leave feedback on the
application's operation and to make a franchise for cooperation with the application.
The main drawback is the lack of features listed above, as well as unintuitive
and difficult to understand user interface, which makes it difficult to work with the
system.
All of the above advantages and disadvantages were taken into account when
developing the web application to automate the process of checking student
programming works with the intended name "StudentsWorks".

2.4. Specification of System Requirements

A specification of software system requirements is a complete description of the

behavior of the system being developed. It includes many precedents that describe all
the interactions that users have with the software. Precedents are also known as
functional requirements. In addition to precedents, there are also non-functional product
requirements. Non-functional requirements are requirements that impose restrictions on
a project or implementation. The specification of system requirements includes project
glossary, list of functional requirements, list of non-functional requirements 15.
Table 2.3 presents a glossary of the main terms used in the web application
development to automate the process of checking student programming works with the
intented name "StudentsWorks".
Table 2.3

Glossary of the Main Terms Used

Webpage Information resource available on the Internet

that can be viewed using a web browser

15
Technologies of program development and testing [Electronic resource]. Access mode:
http://moodle.ipo.kpi.ua/moodle

36
Internet Service Services provided on the Internet with the help
of special programs
Keywords Words that have a significant semantic load,
they are the key when searching for
information on the Internet or on a website
page.
Contester Program It is a system for checking works and
individual solving of programming tasks,
containing task conditions and possibility of
checking solutions in most modern languages.

Browser Software that allows a user to view

information on the Internet.

DBMS Software that allows the user to create, edit,

save and delete information from databases.

Web-server Hardware providing the user with its resources

and access to remote services

Administrator System user who supports system operations.

Client Person who uses the system to gain access to

certain services
HTML 5 Markup language
PHP Server-side scripting language
JavaScript Scripting language

37
The designed application has the following functions:

- obtaining information about ongoing works that the student can submit;

- possibility of authorization in the application;

- possibility to register in the application;

- possibility to obtain information on the performance of work;

- possibility to upload the completed work to a special form;

- receiving an assessment of the completed task;

- possibility of registering an application franchise;

- possibility to leave feedback on the application's performance.

This project is being developed for the most automated process of checking
student programming works.

Specification of Functional Requirements:

Requirement Name of the

Priority Complexity Contact
ID requirement

Obtaining
User,
1 information Mandatory High
Database
about ongoing
works
Getting
information User,
2 Mandatory High
about the Database
selected work

38
 Authorization
User,
3 in the Mandatory Medium
Database
application
Registration in User,
4 Mandatory Medium
the application Database
Submitting a User,
5 Recommended High
request to Database,
purchase an
application Administrator
franchise
Sending a
feedback on User,
6 Recommended High
application Database
operation
Uploading
7 work for Mandatory Mandatory User
checking
Obtaining
8 the work Mandatory Mandatory User
result

Specification of Non-Functional Requirements:

Name of the
Requirement ID Priority Complexity Contact
requirement

39
 Basic
requirements
for new system User
1 Optional Low
application in Administrator
relation to other
systems

Requirements
for compliance
User
2 with graphical Recommended Low
Administrator
user interface
standards

3 Accessibility Mandatory Medium Administrator

Mean time
4 between Mandatory Medium Administrator
failures

5 Precision Mandatory Medium Administrator

6 Use of resources Recommended Medium Administrator

Requirements for
7 programming Recommended Medium Administrator
technology

2.5 Technical and System Development Support

2.5.1. Rationale for Chossing Technical Means

One of the most important factors to consider when developing a web

application is matching resource requirements with available hardware. The

40
 program should work correctly on compatible equipment.
The project is implemented in a scripting system (PHP), includes a
language interpreter, a set of functions for accessing databases and various
Internet services. The use of this product imposes the following hardware and
software requirements 16:
— Intel Pentium III Processor 866 MHz and above (Intel Pentium IV / Celeron 1800 MHz
is recommended);
— RAM 1024 MB and above;
— disk space of at least 100 MB;
— video card 256MB;
— minimum screen resolution of 1024x768;
— 32-bit Windows operating system (NT/2000/XP/Vista/Seven/10);
— Flash technology support;
— Internet browser: Opera, Mozilla Firefox, Internet Explorer, Google Chrome;
— mouse manipulator;
— keyboard.

For the correct launch of the software product on the server, the following server
hardware and software requirements are defined:
— Operating system - Linux (CentOs, Debian, etc.).
— PHP 7, Mariadb, Nginx, PHP-FPM
— RAM ranging from 2 GB.
— Availability of SSD
— Processor with at least 2 cores.
— Vesta, ISPmanager

16
Types of software testing [Electronic resource] Access mode:
http://qalearning.com.ua/theory/lectures/material/testing-types-functional/

41
 2.5.2. Rationale for Chossing OS and Data Exchange Protocol

Windows Server Standard Edition was chosen for the server, an operating
system designed specifically for small departments of companies and ensures efficient
file and printer sharing, secure Internet connection, centralized deployment of desktop
applications, and web-based solutions for organizing interaction between employees,
partners, and customers.
Windows Server Standard Edition ensures a high level of reliability, scalability
and security.
The Microsoft Windows 10 operating system is chosen for the workstations, as it
has a high level of security, including the ability to encrypt
files and folders for the purpose of corporate information protection; support for mobile
devices to ensure the possibility to work autonomously or connect to a computer in
remote mode; built-in support for high-performance multiprocessor systems; possibility
to work with Microsoft Windows Server and enterprise management systems; effective
interaction with other users around the world thanks to multilingual support capabilities.
The program has the Ukrainian interface, which is convenient for all users of the
enterprise.

2.5.3. Protection Measures against Unauthorized Access to the System

To ensure information security of users’ personal data, these data will be

encrypted using symmetric encryption algorithms. Symmetric encryption involves using
the same key for both encryption and decryption. Two main requirements are applied to
symmetric algorithms: complete loss of all statistical regularities in the encryption
object and the absence of linearity. It is customary to divide symmetric systems into
block and stream systems. In block systems, the initial data are divided into blocks
followed by key transformation. In stream systems, a certain sequence (output gamma)
is produced, which is later superimposed on the message itself, and data encryption
occurs by the stream as the gamma is generated. The communication scheme using a
symmetric cryptosystem is presented in the figure. Where M is plain text, K is a secret

42
key transmitted through a closed channel, En(M) is an encryption operation, and Dk(M)
is a decryption operation.
The substitution operation meets the first requirement of a symmetric cipher by
getting rid of any statistics by shuffling the bits
of the message according to a certain given law. The permutation is necessary to meet
the second requirement - making the algorithm nonlinear. It is achieved by replacing a
certain part of the message of the specified volume with a standard value by referring to
the original array 17.
Symmetrical systems have their advantages and disadvantages compared to
asymmetric ones. The advantages of symmetric ciphers include a high-speed
encryption, a shorter required key length with similar stability, great study and ease
of implementation. The disadvantages of symmetric algorithms are primarily the
complexity of key exchange due to the high probability of breaking the key
secrecy during the necessary exchange, and the complexity of key management in
a large network.

Fig. 2.7 - Storage of Encrypted Data in the Database

17
Transferring files from localhost to server [Electronic resource]. Access mode:
http://joomlaportal.ru/faq/installation-and-update/51-perenos-sajta-slocalhost-na-server

43
 SECTION 3

APPLICATION DESIGN AND PRACTICAL IMPLEMENTATION

3.1 Software Product Structure and Algorithms of its Functioning

Information model reflects the general composition of the information objects of

the automated system being designed and the connections between them.
The program consists of a set of software modules, each of which performs one
or more functions. Table 3.2 shows the assignment of software modules.

Table 3.1

Assignment of Software Modules

No. Designation Assignment

1 Index Module for displaying the home page of the

application, displays interactive blocks for selecting
tasks available for execution and a button for
immediate execution. Also, it has blocks to display
tips for working with the application and thematic
videos.

44
2 Booking Module for implementing the task execution logic
directly, where the task conditions, execution time,
execution language, and logic of interaction with the
database are loaded from the database.

3 Contact_us Module for enabling the user to leave feedback on the

application's performance. It contains a form for
filling in personal data and the feedback itself. After
confirmation, the entered data will be entered into the
feedback database.

4 Franchase Module for entering personal data of a partner

university for the registration of a franchise
application. It contains a data entry form with
personal data fields. After confirmation, if the data is
valid, it will be saved in the franchise database.

5 Header Module for displaying the navigation bar with the

menu and the application logo on the top of the
pages.

6 Footer Module for displaying contact information and

general information about the application in the page
footer.

45
 7 Check Module for implementing the logic of checking the
program code downloaded by the client. After
completing the verification process, it sends the
verification result using the GET method to the
interaction page.

8 Logout Module for implementing user deauthorization logic

in the application.

9 Auth Module for implementing user authorization logic in

the application.

10 Registration Module for implementing user registration logic in the

application.

11 Admin Application administration module

3.2 Choosing the Developed Application Architecture

The designed web application uses 3 main components: a web browser, a

web server and a database, so a client-server architecture will be used. Figure 3.2
shows a component diagram indicating the dependencies between software
modules.

Figure 3.2 – Diagram of Client-Server Components

A client-server architecture is a distributed application structure that

partitions tasks or workloads between the providers of a resource or service called
servers and service requesters, called clients. Often clients and servers communicate

46
 over a computer network on separate hardware, but both client and server may
reside in the same system. Examples of computer applications that use the client–
server model are email, network printing, and the World Wide Web 18.
For this site, the first level of the architecture is the browser, from which all
user operations are performed. On the second level - system logic,

that is, how the web server processes the information. The third level is a DBMS that
stores data for the server.

3.3 Database Structure Design

System under development should be integrated with a web-based product, and

this makes us understand that we need to develop a reference database structure that will
contain the data necessary for the operation of the web application, namely: saving of
image gallery, saveing of feedback, saving of information about tasks to be performed
and all information about them, as well as personal data of users used for authorization.
Database integration is required to optimize the performance of the website with critical
data stored while using the application.
Data from the database will be pulled for further display to the user, so it is
necessary to have a constant connection of the server with the database and the client
with the server. Local hosting of the database together with the web resource was
chosen for this solution.
The next step is to create a table of identifiers, which is shown in Table 3.3.

Table 3.3
Table of Identifiers

Object Property Type Dimension Identifier

User ID Varchar 100 ID

Client-Server Architecture [Electronic resource] Access mode: http://inter.ptngu.com/

18

47
 Role Varchar 100 Role
Table Login Varchar 100 Login
Name Varchar 100 Name
Last Name Varchar 100 Lname
Password Varchar 100 Password
Country Varchar 100 Country
ID varchar 100 msgID
Sender Name varchar 100 senderfname
Feedback Sender's Last
varchar 100 senderlname
Table Name
Sender's email varchar 100 sendereMail
Feedback Varchar 500 Senderfeedback

48
 Name Varchar 100 Name
Surname Varchar 100 Sname
Franchise Company Varchar 100 Company
applicatio Position Varchar 100 Position
n table City Varchar 100 City
Phone Varchar 100 Phone
Email Varchar 100 Email
ID Varchar 100 Id
Table of Poster Varchar 100 Img
Informatio Name Varchar 100 Name
n on Tasks Description Varchar 1000 Description
to Be Right answer Varchar 100 Rightanswer
Performed Time Varchar 100 Time
Language Varchar 100 Language
ID Varchar 100 Id
Table of Name Varchar 100 Name
completed Student login Varchar 100 Login
tasks Performance result Varchar 100 Result
Date performed Varchar 100 Data

3.4 Software Implementation of Application

One of the main design tasks was to create a convenient application interface,
which would allow the user to interact with the functionality.
All data for filling user pages are in the database. Forms sent by the user are also
sent to the database to be processed. Further, the implementation of each page is
described in detail in the subsections.

49
 3.4.1 Header and Footer Software Implementation for Web Pages

Header is a block at the top of the site page that is visible on all pages of the site.
Footer is a block at the bottom of the page. It contains useful, but not essential
information.
Header and Footer are used in order not to write the same code repeatedly on
many web pages. This practice is incredibly convenient and saves a lot of time, and also
makes the code much more readable.

<div class="navbar-brand">
<a href="index.php">
<h1 class="navbar-heading">StudentWorks</h1>
</a>
</div>
<div class="navbar-container">
<nav class="navbar">
<ul class="navbar-menu">
<li><a href="index.php">Main</a></li>
<li><a href="franchase.php">Franchise</a></li>
<li><a href="contact-us.php">Connection</a></li>
<li><a href="logout.php">Go out</a></li>
</ul>
</nav>
</div>

It was decided to place in the footer the links to social networks, as well as
contact information about the application and general information about it. The software
implementation is given below:

div class="footer-section footer-section1">

<h2><i class="fas fa-user-alt"></i> Social networks</h2>
<div class="footer-section-inner-container">
<span><a href="https://ru-ru.facebook.com/elonreevesmusk"><i
class="fab fa-lg fa-facebook-square"></i> Facebook</a></span>
<span><a href="https://twitter.com/elonmusk?ref_src=twsrc
%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor"><i class="fab fa-lg fa-
twitter-square"></i> Twitter</a></span>
<span><a href="https://www.instagram.com/"></i>
Instagram</a></span>
</div>
</div>

<div class="footer-section footer-section2">

<h2><i class="fas fa-map-marked"></i> Contact us </h2>
<div class="footer-section-inner-container">
<p>Contact us to make our service better, any feedback will be

50
considered.</p>
<p>Phone: +2 010 11 39 11 48</p>
<p>E-mail: studentworks@gmail.com</p>
</div>
</div>
<div class="footer-section footer-section3">
<p>© 2022 StudentWorks. Created by Myself. </p>
<a>Advertising</a>
<a>Privacy Policy</a>
<a>Contact </a>
</div>

3.4.2 Software Implementation of Home Page

Interactive blocks were placed on the home page for the user to select a task to
perform and a direct link to go to this task page. Also, the page presents tips for working
with the portal in the form of dynamic icons and video recordings on the topic of
students' work.

<?php
session_start();
if($_SESSION['itlogin'] == ""){
header('Location: /auth.php');
}else{
$login = $_SESSION['itlogin'];
}
$link = mysqli_connect("localhost", "root", "", "students");
$sql = "SELECT * FROM movietable";
?>
<header></header>
<div id="home-section-1" class="movie-show-container">
<h1>welcome , <? echo $login ?></h1>
<h3>Please choose one of the current programming jobs
available to you</h3>
<div class="movies-container">
<?php
if($result = mysqli_query($link, $sql)){
$lines = mysqli_num_rows($result);
if(mysqli_num_rows($result) > 0){
for ($i = 0; $i <= $lines - 1; $i++){
$row = mysqli_fetch_array($result);
echo '<div class="movie-box">';
echo '<img src="'. $row['movieImg'] .'" alt="
">';
echo '<div class="movie-info ">';
echo '<h3>'. $row['movieTitle'] .'</h3>';
echo '<a href="booking.php?id='.
$row['movieID'].'"><i class="fas fa-ticket-alt"></i> Go to
execution</a>';
echo '</div>';

51
 echo '</div>';
}
mysqli_free_result($result);
} else{
echo '<h4 class="no-annot">There are currently no
tasks</h4>';
}
} else{
echo "ERROR: Could not able to execute $sql. " .
mysqli_error($link);
}
// Close connection
mysqli_close($link);
?>
</div>
</div>

This part of the code implements user authorization in the application, if the user
is not authorized, he will be automatically sent to the authorization page. This part also
implements interactive blocks and links for starting tasks available for student to
complete. The task list is loaded from the database when the page is loaded. When
clicking on the task block, the user will be sent to the task performance page along with
the id of this task using the GET method.

<div id="home-section-2" class="services-section">

<h1>How to work with the service ?</h1>
<h3>Step-by-step description of interaction !</h3>
<div class="services-container">
<div class="service-item">
<div class="service-item-icon">
<i class="fas fa-4x fa-video"></i>
</div>
<h2>1. Decide on a task</h2>
<p> Choose one of the tasks available to you </p>
</div>
<div class="service-item">
<div class="service-item-icon">
<i class="fas fa-4x fa-credit-card"></i>
</div>
<h2>2. Go to the task completion page </h2>
<p> Click on the icon of the selected task </p>
</div>
<div class="service-item">
<div class="service-item-icon">
<i class="fas fa-4x fa-theater-masks"></i>
</div>
<h2>3. Complete the task</h2>
<p>Familiarize yourself with the terms of the task and
complete it</p>
</div>

52
 <div class="service-item"></div>

</div>
</div>

This section of code implements a menu with tips for working with the
application. The tips are presented in the form of dynamic icons that light up when you
hover.

<div id="home-section-3" class="trailers-section">

<h1 class="section-title">Do you want to learn the material
better?</h1>
<h3>Check out the lessons from the experts</h3>
<div class="trailers-grid">
<div class="trailers-grid-item">
<img src="img/1.jpg" alt="">
<div class="trailer-item-info" data-video="_uQrJ0TkZlc">
<h3>Python course 1</h3>
<i class="far fa-3x fa-play-circle"></i>
</div>
</div>
<div class="trailers-grid-item">
<img src="img/2.jpg" alt="">
<div class="trailer-item-info" data-video="LzYNWme1W6Q">
<h3>Python course 2</h3>
<i class="far fa-3x fa-play-circle"></i>
</div>
</div>
<div class="trailers-grid-item">
<img src="img/3.jpg" alt="">
<div class="trailer-item-info" data-video="708eH9l4Slk">
<h3>C++course 1</h3>
<i class="far fa-3x fa-play-circle"></i>
</div>
</div>
<div class="trailers-grid-item">
<img src="img/4.jpg" alt="">
<div class="trailer-item-info" data-video="GQp1zzTwrIg">
<h3>C++ course 2</h3>
<i class="far fa-3x fa-play-circle"></i>
</div>
</div>
<div class="trailers-grid-item">
<img src="img/5.jpg" alt="">
<div class="trailer-item-info" data-video="Qgl81fPcLc8">
<h3>Java course 1</h3>
<i class="far fa-3x fa-play-circle"></i>
</div>
</div>
<div class="trailers-grid-item">
<img src="img/6.jpg" alt="">
<div class="trailer-item-info" data-video="eIrMbAQSU34">

53
 <h3>Java course 2</h3>
<i class="far fa-3x fa-play-circle"></i>
</div>
</div>
</div>
</div>

In this part of the code, a block of video tutorials on recommendations for

thematic programming material is implemented. The video will be played when clicking
on the corresponding window with its image.

54
Figure 3.2 - General View of Home Page

55
 3.4.3 Creating a Page for the Student to Complete the Selected Task

General information about the task chosen by the student was placed on the
page of the student's performance of the chosen task. Information about the task is in
database and is extracted from it at user’s request. A form was also placed on the
page for student to write directly the program code which will be checked.
After filling in and pressing Send for Checking button, the code will be
executed in the corresponding module and the execution result will be returned to the
page. After receiving the result, the script will compare it with the correct answer in
the database and enter into the database a request about the result of student task
performance, which the teacher can see using the administration page

<?php
session_start();
$login = $_SESSION['itlogin'];
$id = $_GET['id'];
$link = mysqli_connect("localhost", "root", "", "students");
$movieQuery = "SELECT * FROM movietable WHERE movieID = $id";
$movieImageById = mysqli_query($link,$movieQuery);
$row = mysqli_fetch_array($movieImageById);
$rightanswer = $row['rightanswer'];
if(isset($_GET['result'])){
if($_GET['result'] == $rightanswer){
$answer = 'That's right';
echo "<script>alert('You have successfully completed
the task')</script>";
}
else{
$answer = 'Wrong';
echo "<script>alert('Unfortunately, you did not
complete the task correctly')</script>";
}
$now = date('l jS \of F Y h:i:s A');
$insert_query = "INSERT INTO
bookingTable ( movieName,
bookingTheatre,
bookingType,
bookingDate)
VALUES ( '".$row['movieTitle']."',
'$login',
'$answer',
'$now')";
mysqli_query($link,$insert_query);
exit("<meta http-equiv='refresh' content='0; url=
index.php'>");
}
?>

56
 In this part of the code, a connection to the database is made, information about
the current service is extracted from the database by its ID, which is transmitted by the
GET method along with the page load. After that, the received GET request is checked
to determine the further process of the script.

<div class="booking-panel">
<div class="booking-panel-section booking-panel-section1">
<h1>Please familiarize yourself with the terms and conditions
and complete the task!</h1>
</div>
<div class="booking-panel-section booking-panel-section2"
onclick="window.location.href = 'index.php'">
<i class="fas fa-2x fa-times"></i>
</div>
<div class="booking-panel-section booking-panel-section3">
<div class="movie-box">
<?php
echo '<img src="'.$row['movieImg'].'" alt="">';
?>
</div>
</div>
<div class="booking-panel-section booking-panel-section4">
<div class="title"><?php echo $row['movieTitle']; ?></div>
<div class="movie-information">
<table>
<tr>
<td>The condition</td>
<td><?php echo $row['description']; ?></td>
</tr>
<tr>
<td>Time to perform</td>
<td><?php echo $row['time'] / 1000 . ' minutes'; ?
></td>
</tr>
<tr>
<td>Execution language</td>
<td><?php echo $row['language']; ?></td>
</tr>
</table>
</div>
<div class="booking-form-container">
<form action="check.php" method="POST">
<textarea name="code" style="width: 90%;height: 400px;
background-color: black; font-family: 'Modern No. 20';color: white;
padding: 10px; font-size: 100%;">Enter your program code
here</textarea>
<input name="id" type="hidden" style="width: 0;"
value="<? echo $id?>" >
<button type="submit" value="submit" name="submit"
class="form-btn">Send for verification</button>
</form>

57
 In this part of the code, a page with a description of the task to be performed is
generated using the data received from the database. This code will work with any data
that the administrator enters into the database of tasks. This code is also responsible for
generating a form where the user enters the code of the completed task to be checked.
By clicking Send for Checking button, if the data are valid, it is sent to the verification
module for compilation and checking for correct execution.

Figure 3.3 General View of Task Execution Page

3.4.4 Creating a Page for the Student to Complete the Selected Task

This page contained a form for filing an application to obtain a franchise of the
application by representatives of higher education institutions. After filling out this
form, if the data are valid, it is sent to the application database for further processing by
the application administration.

<?php
$link = mysqli_connect("localhost", "root", "", "students");
?>
<header></header>
<div>
<div mt="150px" class="container">

58
 <div class="row">
<div class="col-3"></div>
<div class="col-6">
<h1><center>To purchase a franchise of the application,
please fill out the form!</center></h1><br>
<form action="" method="POST" >
<div class="box-body">
<div class="step_1">
<div class="form-group">
<label for="First_name">Name :-</label>
<input type="text" class="form-control
first_name " name="name" required>
</div><br>
<div class="form-group">
<label for="Second_name">Surname:-</label>
<input type="text" class="form-control
second_name" name="sname" required>
</div><br>
<div class="form-group">
<label for="birthday">University:-</label>
<input class="form-control birthday"
required type="text" name="company" >
</div><br>
<div class="form-group">
<label for="subject">City:-</label>
<input class="form-control subject"
required type="text" name="position" >
</div><br>
<div class="form-group">
<label for="country">Country:-</label>
<select class="form-control country"
name="country" id="country" >
<?php
$arr =
array("Ukraine","Poland","Latvia","Lithuania","Romania","Kazakhstan","
Other Country");
foreach ($arr as &$value) {
echo "<option>".
$value."</option>";
}?>
</select>
</div><br>
<div class="form-group">
<label for="phone">Phone:-</label>
<input class="form-control phone"
type="tel" placeholder="+(099) 999 99 99)" name="phone" >
</div><br>

<div class="form-group">
<label for="email">Email :-</label>
<input class="form-control email"
required type="text" name="email" >
</div><br>
<div class="box-footer">
<button type="submit" name="submit"
value="submit" class="btn btn-danger">Send</button>
</div>

59
 </div>
</div>
<?php
if(isset($_POST['submit'])){
$insert_query = "INSERT INTO
franchase ( name,
sname,
company,
position,
country,
phone,
email)
VALUES ( '".$_POST["name"]."',
'".$_POST["sname"]."',
'".$_POST["company"]."',
'".$_POST["position"]."',
'".$_POST["country"]."',
'".$_POST["phone"]."',
'".$_POST["email"]."')";
mysqli_query($link,$insert_query);
echo "<script>alert(\"Thank you, after reviewing
the application, our manager will contact you!\");</script>";
}
?>
</form>
</div>
</div>

This code is responsible for connecting to the database, creating a form with
fields for first name, last name, country, city, type of franchise, phone and brief
comment. After clicking the button, if the data are valid, it will be sent to the database,
and a pop-up message will appear on the screen that the application has been sent for
consideration.

60
 Figure 3.4 - Full View of the Application Filling in Page for the Application Franchise
Purchase

3.4.5 Feedback Page Development

This page contained additional information about the application, address, phone
numbers and email of the conditional office, as well as a card with its location was
embedded. Below was a form in which the user can leave feedback on the use of
application.

<?php
$link = mysqli_connect("localhost", "root", "", "students");
?>
<header></header>
<div class="gmap_canvas"><iframe id="gmap_canvas"
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!
1d3262.5815823728194!2d-80.73889560000869!3d35.14211377150105!2m3!1f0!
2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!
1s0x885421a2eb1e7ea9%3A0x338011bddfd77820!2sWeb%20Development

61
%20Company%20Charlotte!5e0!3m2!1sru!2sua!4v1654828127938!5m2!1sru!
2sua" width="600" height="450" style="border:0;" allowfullscreen=""
loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<div class="contact-us-container">
<div class="contact-us-section contact-us-section1">
<h1>Leave your feedback about the service here! </h1>
<form action="" method="POST">
<input placeholder="Your name" name="fName"
required><br>
<input placeholder="Your surname" name="lName" ><br>
<input placeholder="E-mail address" name="email"
required><br>
<textarea placeholder="Message text !" name="feedback"
rows="10" cols="30" required></textarea><br>
<button type="submit" style="margin-left: 3%; width:
20%;" name="submit" value="submit">Send</button>
<?php

if(isset($_POST['submit'])){
$insert_query = "INSERT INTO
feedbackTable ( senderfName,
senderlName,
sendereMail,
senderfeedback)
VALUES ( '".$_POST["fName"]."',
'".$_POST["lName"]."',
'".$_POST["eMail"]."',
'".$_POST["feedback"]."')";
mysqli_query($link,$insert_query);
}
?>
</form>

</div>
<div class="contact-us-section contact-us-section2">
<h1>Address & Information</h1>
<h3>Our numbers</h3>
<p><a href="tel:01011391148">+2 010 11 39 11 48</a><br>
<a href="tel:01011391148">+2 010 11 39 11 48</a></p>
<h3>Address</h3>
<p>El Sherouk City , Suez Desert Road , Cairo 11837 - P.O.
Box 43</p>
<h3>E-mail</h3>
<p><a
href="mailto:cinemareservation@bue.edu.eg">StudentWorks@gmail.com</
a></p>
</div>
</div>

This code is responsible for connecting to the feedback database, displaying and
functioning of the feedback form. To
submit, the user should fill in the form fields and click the submit button, if they are
valid, they will be sent to the feedback database for further processing. Contact

62
information is also displayed on the page.

Figure 3.5 - Full View of the Feedback Page

3.4.6 Creating a Registration Page

A form for user registration in the application was placed on this page.
Registration is mandatory for further use of the service.
The page implements a registration form with fields for login, password, first
name, last name and country of the user.
The logic of the page is responsible for verification of the data validity from the
registration form, and if they are valid, the data will be sent to the user database.

63
 Figure 3.6 - General View of Registration Page

3.4.7 Creating an Authorization Page

This page contains a form for authorization in the application. The data entered
into the form will be checked for matching with the database,
and if they match, the user will be moved to the home page of the portal.
The page implements connection to the database, creating a form with name and
password fields, and checking for their availability in the site's database.

64
Figure 3.7 - General View of Authorization Page

65
 CONCLUSION

During completing the thesis, a work on the study of web application

development technologies using PHP, MySql, HTML, CSS, and JavaScript
technologies was carried out. Based on the results of the work, a web application was
developed to automate process of checking student programming works.
The user and administrator functions have been implemented, which will
provide the ability to authorize, register, view basic information, receive information
about current tasks to be performed, perform tasks, write reviews, purchase an
application franchise by the user, and administer the portal using the administrator
panel.
The created system allows the user to use the site functionality by means of the
user interface. When creating the system, all the pros and cons of the analog systems
selected for comparison were taken into account.
The full analysis of the tools was carried out and the most suitable ones were
selected for designing and programming the system and database. After implementing
the system using the selected programming languages and tools, a performance test was
performed, which proved that the system exercises all the functions we have set.
Since no violations were found, all functions meet the requirements, so the web
resource is ready for full functional work, that is, the system is ready for
implementation, which can be used to automate the process of checking student
programming works.

66
 LIST OF REFERENCES

1. "PHP, MySQL та Dreamweaver MX 2004. Development of

Interactive Websites." - St. Petersburg: BHV-Peterburg, 2005. - 448
pages with illustrations.
2. "PHP and MySQL Web Development (4th Edition)", Luke Welling,
Laura Thomson 848 pages., with ill.; ISBN 978-5-8459-1574-0, 978-0-672-
32916-6.
3. «Joomla! 1.5. User Manual", D.M. Kolisnichenko, with illustrations;
ISBN 978-5-8459-1509-2; 2009, 224 p.
4. Engine for Your Site. CMS Joomla! Slaed, PHP-Nuke». D.
Kolesnychenko, St. Petersburg: BHV-Peterburg, 368 p.
5. Joomla! Practical Guide"., North B., 448, St. Petersburg: SimbolPlyus.
6. "Joomla! Self-Taught", Dan Ramel, BHV-Peterburg, 2008, 448 p.
7. Creating Websites with Joomla! 1.5". Hagen Graf, Williams Publishing House,
304 p., 2009.
8. Web Database Application with PHP and MYSQL", 2nd Edition by David
Lane, Hugh E. Williams. © O'Reilly, May 2004. ISBN: 0-596-00543-1.
9. CMS List. Cms Overview. Site about site management systems. [Electronic
resource] Access mode: http://www.cmslist.ru
10. MySQL 4 – String functions [Electronic resource] Access
mode: http://www.codenet.ru/db/mysql/mystring4.php
11. Web development [Electronic resource] Access mode:
http://fcit.tneu.org/web-rozrobka/
12. Astakhova I.F., Tolstobrov A.P., Melnykov V.M. SQL in Examples and
Problems. Voronezh, 2001. 160p.
13. A.V. Bielozubov, D.G. Mykolaiev Basics of Working with HTML Editor
Abobe Dreamweaver CS5. Educational and Methodological Manual.
14. Databases: Development and Management: Book / Hansem G., Hansem J.
- M: Binom, 2010. - 704 p.

67
15. Technologies of program development and testing [Electronic resource]. Access
mode: http://moodle.ipo.kpi.ua/moodle
16. Types of software testing [Electronic resource]. Access mode:
http://qalearning.com.ua/theory/lectures/material/testing-types-functional/
17. Transferring files from localhost to server [Electronic resource]. Access mode:
http://joomlaportal.ru/faq/installation-and-update/51-perenos-sajta-slocalhost-na-
server
18. Client-Server Architecture [Electronic resource] Access mode:
http://inter.ptngu.com/

68