Multilevel supporting system for special forms of learning
(in brief “MSFL”) is being developed in the first instance as
solution for teaching music theory in modern way. MSFL has
features such as front-end layout for teaching and backend
system for administration. System is written with web based
technologies such as PHP, HTML, MySQL and contains some
plugins such as TinyMCE WYSIWYG editor used for the easy
work with document writing. We would like to describe in this
paper all featured modules of the portal with fully outlined
parts of each function. System is written with web based
technologies such as PHP, HTML, MySQL and contains some
plugins such as TinyMCE WYSIWYG editor used for the easy
work with document writing. System has fully featured jQuery
java-script library and special open-source API Vexflow
which can display music staves.
This educational portal serves an environment for
obtaining information in terms of fundamentals of music
theory. The portal has the full-text search mechanism.
Administrators can create any types of the tests that can be
subsequently evaluated.
The aim of this work was to create a Web interface that would
allow students to register on the portal, classify students into
the training courses, create components for tests managing and
develop the simple interface for teaching with many features
connected with the each course.
A content management system (CMS) is a computer system
that allows publishing, editing, and modifying content as well
as site maintenance from a central page. It provides a
collection of procedures used to manage workflow in a
collaborative environment. These procedures can be manual or
computer-based.
The core features of Content Management Systems vary
widely from system to system; many simpler systems
showcase only a handful of features, while others, notably
enterprise systems, are much more complex and powerful.
• Allow for a l arge number of people to share and
contribute to stored data;
• Control access to data based on user role (i.e., define
information users or user groups can view, edit,
publish, etc.);
• Facilitate storage and retrieval of data;
• Control data validity and compliance;
• Reduce duplicate inputs;
• Simplify report writing;
• Improve communication among users.
Define data as almost anything: documents, movies, texts,
pictures, phone numbers, articles etc.Finally, complete content
and organizational editing before formatting. Please take note
of the following items when proofreading spelling and
grammar:
1. Introduction 2. CMS
2.1 - Main features of CMS
Multilevel Supporting System for Special Forms of Learning
1DALIBOR SLOVÁK, 2PETR LÁTAL
Computers and Communications System Department
Faculty of Applied Informatics Tomas Bata University Zlín,
CZECH REPUBLIC
Abstract — We created this system, because meanwhile another similar system does not exist. For the first
usage and testing, multilevel supporting system for special forms of learning is being developed as a web-based
support for teaching music theory. First part of the article is focused on basic description of the project. Main
parts of multilevel supporting system for special forms of learning is described and described are using
technologies for development of system too. In the next part of the article are described some CMS
communications with publication and presentation. System is based on web technologies such as PHP, MySQL
and HTML with fully featured java-script jQuery API and WYSIWYG editor TinyMCE with useful plugins.
Last part is aimed to refer about all developed modules for the Multilevel supporting system for special forms
of learning. We established the data-base structure of composers, music genres and music samples. It was
necessary to create administration system where will be the teacher able to form the music staves and present
them on the web portal. Everything is connected with the learning portal, which allows students to register, to
apply for entry into the classes, receive the information, training and test their knowledge through the test
module.
Keywords: Content management system, CMS Communications, Vexflow API, Cufon Content Management
System Modules, Music stave generator, Quiz generator
Received: May 12, 2021. Revised: December 20, 2021. Accepted: January 17, 2022. Published: February 8, 2022.
WSEAS TRANSACTIONS on ACOUSTICS and MUSIC
DOI: 10.37394/232019.2022.9.1
Dalibor Slovák, Petr Látal
P-ISSN: 1109-9577
1
Volume 9, 2022
A Web Content Management System (WCMS) is a software
system that provides website authoring, collaboration, and
administration tools designed to allow users with little
knowledge of web programming languages or markup
languages to create and manage website content with relative
ease. A robust WCMS provides the foundation for
collaboration, offering users the ability to manage documents
and output for multiple author editing and participation. Most
systems use a Content Repository or a database to store page
content, metadata, and other information assets that might be
needed by the system.
A presentation layer displays the content to website visitors
based on a set of templates. The templates are
sometimes XSLT files.
Most systems use server side caching to improve performance.
This works best when the WCMS is not changed often but
visits happen regularly.
Administration is typically done through browser-based
interfaces, but some systems require the use of a fat client.
A WCMS allows non-technical users to make changes to a
website with little training. A WCMS typically requires a
systems administrator and/or a web developer to set up and
add features, but it is primarily a website maintenance tool for
non-technical staff.
CMS is can be to create in WYSIWYG editors. You do not
know HTML language, because you can use these editors for
creating your web applications. Most of CMS systems are
Open Source Software (OSS). It means, source codes are open
for using and editing via Open source licenses.
CMS communication
Our CMS was developed to simplify the work as much as
possible in creating of the new modules for communication
between modules which have been secured against
unauthorized access. Each page has been lightened by the
administration of code that need not be loaded. The result is a
system that communicates quickly and makes maximum use
of optimized SQL queries.
Each module has its place on the ftp server in the /inc/
admin /. It is very important to have unique component
containing a s et of modifications (have to be named
upravy.php) and a file containing error messages (have to be
named hlasky.php). If you are missing these two files, you will
be notified about this deficiency and asked to remedy it. It is
good to have invented a meaningful file structure for adding,
editing and general overview of the module. Finally is
necessary to have super admin account that allows authorized
user to use the "Settings Module". This module is important
for adding or editing the new modules into the system and has
special forms for security features, classify features and
graphical features.
The header file of language module is usually loaded once
by system.php, which uses the php code filters for parsing
country type and adds the value in the form of two lower case
letter strings to the super global variable.(for example English
has “en”, Czech has “cs”).
Then MySQL database queries the table "layout" and fetch
data from the selected language to the website layout. If the
language module cannot find a match with super global
variable "lang", module will use the default language (in the
case of teaching it is a Czech language). The database than
fetches all data using the $langcore["name_of_the_cell"]
syntax and then simply display the value of the cell by the
PHP function echo. Front-end web interface has simple
switcher for language changing.
Creating of the content in the MSFL system is very simple
and efficient. This system in addition to their fundamental
advantages such as creating and editing pages, deletion from
the database, permitting or disabling content and other
functions has also implemented multi-language support. In
Figure 1 you can see the tree structure of the music portal
website.
Layout of the website is designed for easy and quick user
orientation in the content.
The greatest benefits in terms of content creation, is a simple
environment that avail functions that allows users to work in
similar way as in MS Word. MSFL has an integrated
WYSIWYG TinyMCE plugin with predefined style Office
2007 with many plugins, which facilitate the working.
VexFlow is the application programming interface for the
music notation and can be used as a rendering engine for the
various kinds of the online music learning tools, libraries, and
applications. API is designed to run on HTML5 tag canvas
with scalable vector graphics support.
It is important to note that the VexFlow is a low-level
rendering API. Most applications wants to use something like
VexTab which is a higher-level language for rendering guitar
tablature and music notation.
VexFlow is written completely in JavaScript especially with
jQuery API and using of HTML5 Canvas tag requires no
external libraries or dependencies. For SVG support is
necessary to include the Raphael JavaScript library to draw
vector graphics on the MSFL site.
Fig. 1. Vexflow generated music stave element
2.2 WCMS
2.3 Advanteges of CMS
2.4 Language Module
2.5 Content Creation
2.6 Vexflow API
WSEAS TRANSACTIONS on ACOUSTICS and MUSIC
DOI: 10.37394/232019.2022.9.1
Dalibor Slovák, Petr Látal
P-ISSN: 1109-9577
2
Volume 9, 2022
All modules are created exactly for learning portal and
correspond with author’s idea of music learning management
system.
This is the most important module in the system. User should
have to connect each module with the database and system
very carefully. Fill in the wrong arguments could threaten the
stability of the system. The main page of the module shows
only active modules in the right corner, but you can see the all
modules or only the active or inactive modules by choosing in
select box. Each module has action module. These actions
mean query from the administration to add, edit or view any
module. Each action of the module has checked permissions in
the database so any user cannot access, display or edit module
without permissions.
1) The procedure for creating new module
Create folder for example: "testmodul" on the server in the
directory /inc/admin/. Create files upravy.php, hlasky.php in
this folder. Then we create files testadd.php for adding
content, testedit.php for editing content and manage_test.php
for an overview. This created structure is needed to be linked
with the system. Each module is quite complex so the new
user does not immediately know how to fill form. For these
purposes, each item is described and user should have
problems with fill in necessary fields. For each module you
can create "alias". This option was created for the easy
administration of any tab. It gives possibility to add alias for
any module in any tab fully associated with given module.
These modules are marked with the star in modules manager.
The module acts as a simple interface for adding new products
to the main page of the site. It works with actions such as
adding news, editing news and deletion of the news. It is
important to choose the language equally as in the content
module, name, dates and text news. The validation script will
call you for the revalidation when you not complete all the
boxes prompted. Date of news is facilitated by the simple
jQuery calendar, which can easily offer current date listing of
the months and years by clicking in the text area. The output
data format is similar to the syntax of SQL function now (), so
the work with date is very comfortable in system back-end.
Users of the system are an integral part of the distribution
system management roles. Here you can find ordinary users
who have been registered on the web site and users inserted to
the system as the system administrators. Users are simply
categorized in the group. Module contains tab with the current
distribution of groups in database. Each group has assigned
value. This value means that if the user has higher value, he
has higher permissions with access. For example the group
named super admin has value 3 so this user can access
anywhere. Group named administrators have value 2 so this
user cannot access to the modules management.
Authorized user can easily edit and assign different rights to
another user. Module offer editing such as the password
change and some changes of the user access and all the
personal information.
Photo gallery module was created for fast adding of images
and integration to the system. This module is connected to the
module "folder administration," because of each image
classification. If you do not create the folder tree, you can
upload all the photos into one folder, but this may result in bad
output on the web. Each photo is re-editable, erasable and can
be edited directly on the server. Paging module is implicitly
set to 30 images on the page, but this value can be changed in
the system. Adding photos is a very simple and powered by
link "Add photo". You just fill out the category name,
description of photos and choose a photo from the local
computer.
Image manager contents simple image editor. You can use the
editor for set-up of images directly in database. E.g you can
turn cut or change size of your images. You need not local
image editor in your computer. When your change is over, you
can save your image on the server. Image will be saved into
two files. The first will be original of your picture and second
file will be modified picture. You only see modified version of
your picture, but after renaming of pre-editing original you
can use this file as a real original file.
Fig. 3. Server Image Editor
This is a very strategic module of the system. Each part of
the site is categorized in some way. System will upload
photos, videos, or link different modules (eg "quiz module" or
"course module") depending on the created folder structure.
Folder administration database is the distribution of different
3. Modules
3.1 Managing modules
3.2 News module
3.3 Users and rights
3.4 Photo gallery module
3.5 Server image editor
3.6 Folder administration modul
WSEAS TRANSACTIONS on ACOUSTICS and MUSIC
DOI: 10.37394/232019.2022.9.1
Dalibor Slovák, Petr Látal
P-ISSN: 1109-9577
3
Volume 9, 2022
types of web content. Adding of the new components is
performed by the link "add folder" and again it is important to
select the category to the new folder and select the language.
This is essentially the language module that is used to modify
the language simple layout via the web interface in
administration. We are able to add a new cell to the database
with properties that can then be applied anywhere on the web
by the sophistication of this module. Items are categorized as
the data type, date and name of the item. The item ID cell is
displayed only and cannot be edited because of identifier
which contains necessary information for modification in
database.
This module has similar module components to file
management module, because you can create independent tree
structure of courses. Each course contains a name, description
of the course, password for the course and course leader. It is
possible to set whether the course is active or not. In the list of
courses is the list of registered students and the course leader.
To see the all students named in the course, just click on the
link named registered students. If you want to add student to
the list, just add him using the "add user" link. In the point of
course creation is necessary to select the right category, write
the name of the course than create a password for the course
and associate it with head of the course. It would be good to
create a s hort description of the course, which will be
displayed on the site and will serve as information for
candidates. In the head of course is possible to choose
registered users from select box. If the user does not exist, it is
necessary to create him in the module "Users and rights" and
then add him the appropriate permissions.
Fig. 4. Course management
Module for generating staves is served as the simplified
interface for creating musical staves for the quiz module and
for the presentation of given expressions on the web. The main
features of the module include the name of the stave,
connection with the test and stave status.
From the database perspective the module contains a d ata
section, which is generated by module and stored in a database
as a complete code ready for presentation.
This is the module that generates any types of quiz or test. The
basic properties of this module are the name of the quiz
results, categories, and the basic operations such as editing,
adding and deleting quizzes. For each quiz you can take a look
at the results of every student who completed the quiz. There
is a visible success, the date of attempt and the answers
structure of the student.
The aim of this article was to describe the all features and
modules of the MSFL. System has various kinds of modules
connected together. Administrator can manage, create and edit
all the contents of the portal, manage users and rights, quizzes
and musical stave generator and many other modules.
Administrator requires just a basic knowledge of music theory.
There is required only the syntax for writing the music staves
which can be connected with quiz module and presented on
the web portal. Management is fully featured with the multi-
language administration, so administrators can easily manage
any module in any language.
[1] Henk C.A : van TILBORG (2000). Fundamentals of cryptology, Kluwer
Academic, ISBN 0-7923-8675-2, Norwell.
[2] Schlossnagle, Georgie (2004). PHP 5 advanced programming,
Computer Press, ISBN 80-86815-14-5, Brno.
[3] Composite authors (2007), PHP 5 mastery, Computer Press, ISBN 978-
80-251-1519-0, Brno.
[4] Resig, John (2007). Javascript a AJAX : modern programming of web
applications, Computer Press, ISBN 978-80-251-1824-5, Brno.
[5] Zelinka, Ivan. (1999). Applied informatics, Editorial center, UTB, .
ISBN 80-214-1423-5, Zlin
[6] Castro, Elizabeth (2007). HTML : XHTML a CSS: web site creating.
Computer Press, ISBN 978-80-251-1531-2, Brno.
[7] RESIG, John. (2007) Javascript a AJAX : Moderní programování
webových aplikací. Computer Press, ISBN 978-80-251-1824-5. Brno.
[8] Latal, P. Web portal for teaching music theory: Tomas Bata University,
Faculty of Applied Informatics, Department of Computer and
Communication Systems, 2011, 87 p. Thesis supervisor Ing. Dalibor
Slovak.
[9] Ullman, Larry (2004). HTML : PHP a MySQL, Computer Press, ISBN
80-251-0063-4, Brno.
[10] Composite authors (2007), PHP 5, Computer Press, ISBN 978-80-251-
1519-0, Brno.
[11] Wexflow [available online]:
<http://vexflow.com/docs/tutorial.html>
[12] Cufonlibrary[available online]:
<https://github.com/sorccu/cufon/wiki/About>
[13] Raphael library [available online]: Cufon [available online]:
<http://raphaeljs.com/>
3.7 Site settings
3.8 Courses management
3.9 Sheet of music generator
3.10 Quiz module
4. Conclusion
References
Creative Commons Attribution License 4.0
(Attribution 4.0 International, CC BY 4.0)
This article is published under the terms of the Creative
Commons Attribution License 4.0
https://creativecommons.org/licenses/by/4.0/deed.en_US
WSEAS TRANSACTIONS on ACOUSTICS and MUSIC
DOI: 10.37394/232019.2022.9.1
Dalibor Slovák, Petr Látal
P-ISSN: 1109-9577
4
Volume 9, 2022
