DiagrammER: A Web Application to Support the Teaching-Learning Process of Database Courses Through the Creation of E-R Diagrams

This paper presents a web application to support the teachinglearning process of undergraduate database courses, which allows students to practice their knowledge on data modelling using Entity-Relationship (E-R) diagrams. The web application is oriented to teachers and students: teachers prepare examples and exercises, which can have associated E-R diagrams; on the other hand, students are able to design E-R diagrams, which they can review at any time, they also have the option of viewing and solve some of the exercises designed by the teacher. The development of the web application is explained; a comparison of similar existing E-R diagram systems is presented; and the operation of the web application is shown through the creation of an E-R diagram. The results of an instrument applied to students for the evaluation of the web application are provided. Keywords—Entity-relationship diagram, educational technology, relational database, educational web application.


Introduction
With the emergence of web 2.0, new web tools appeared that have allowed students to stop being only receivers of information. These tools have given the opportunity to interact, create, share and acquire knowledge. Furthermore, they offer simulation instruments, collaborative work, self-assessment tools, among others, which allow improving the effectiveness of the teaching-learning process [1]. Although there is a wide variety of web tools that help students practice their knowledge, the web application presented in this paper was developed focusing on the practice of Entity-Relationship (E-R) diagrams.
The extension of the Internet and its insertion into educational institutions has created various applications and support tools, which are available for multiple technologies, such as mobile applications, telecommunications, video games, among others. [2]. Information and Communication Technologies (ICT) have offered better teaching-learning experiences, through resources that promote and facilitate the acquisition of knowledge by the recipient and have opened the possibilities of creating new forms of teaching [3]. Web applications are one of these possibilities, which allow the practice of knowledge that helps the student to analyse their own performance, evaluate it and act according to their self-evaluation [4].
Learning by doing is a useful type of learning, which is why the tools that allow practice contribute to the teaching-learning process. Examples of these tools are the diagramming applications, which allow the user to represent ideas and details of the structure of a particular problem. They also reveal logic errors and missing details in the design, that is, allow students to make a logical design that allows them to solve a specific problem. Another advantage of these tools is that they allow the student to develop logical thinking to give a graphical solution to a problem [5]. These tools can use different techniques for drawing, such as free-form, drag-and-drop drawing of elements and tools that are fully programmatic [3].
The E-R model is useful to translate the meaning of the data into a conceptual schema, which can then be translated into a relational model for implementation in a real database. Databases are a collection of data that represent relevant information of a company, university, business, etc. In order to describe the logical structure of a database, there are conceptual tools that detail data, relationships, semantics and consistency constraints. Currently, the E-R diagram has become the conceptual framework of databases, which is why many attempts have emerged to develop web tools that help in solving problems using E-R diagrams. Due to the importance of the E-R model, the web application described in this paper was developed.
The rest of the paper is organized as follows. Section 2 presents the context and motivation to develop diagrammER. Section 3 describes some existing tools related to the developed web application, providing a comparative table with the most relevant features of each tool. The development of the web application is shown in section 4. The operation of the web application is illustrated in section 5, through the creation of an E-R diagram. The results of an instrument applied to students for the evaluation of the web application are provided in section 6. Finally, conclusions and future work are presented in section 7.

Context and Motivation
There are flowchart diagrams to represent programming procedures, in the same way that there are E-R diagrams in the case of database design, which are a graphical tool for designing databases. The E-R model is a conceptual tool for data description, which consists of entities, relationships and attributes to detail a real situation. The model allows to maintain an overview of the design and favours communication between designers [6]. The E-R model was proposed by Peter Chen in 1976, which considers the world as a set of entities and the relationships between them. Entities are distinguished from other objects, which in turn are described by a set of attributes; a relationship is the association of several entities [7]. The E-R diagram graphically consists of the following basic elements: 1) Rectangles, which represent a set of entities. 2) Ellipses, which represent attributes. 3) Diamonds, which symbolize the relationships between sets of entities. 4) Lines, which link attributes with entity sets and entity sets with relationships.
Although much of the features of databases can be modelled with the basic E-R model, there are some aspects that can be better expressed through the features of the extended E-R model, which incorporates the concepts of subclass and superclass with the associated concepts of specialization and generalization.
This model allows the designer to verify if the scheme satisfies all the data requirements and that there are no conflicts of redundancy or inconsistency [7]. Database E-R modelling contains concepts that are easy to learn, however doing the practice is not that easy. One of the main drawbacks is that for each given problem there may be more than one correct E-R model. Consequently, for success in the learning process students require continuous practice.
Since E-R diagrams are very important for the design of databases, a tool is required that allows the knowledge acquired during the class to be practiced, since if the student masters them perfectly, it will be easier to transfer the meaning of the data from a problem to a conceptual schema, which can then be translated into a relational model for implementation in a real database.
In the Information Technology and Systems undergraduate degree from our faculty, the course of Databases is taught, in which the data modelling topic is covered, among other contents. For this reason, diagrammER was developed to create E-R diagrams, which allows students to practice E-R modelling through exercises and examples, which can be saved and recovered at any time.
Although there are various tools of this type on the web, there are some limitations for users since they only allow them to generate a limited number of diagrams, or even not all the figures are available to develop extended E-R diagrams. Therefore, the developed web application solves these problems and facilitates the study and creation of such diagrams.

Existing Tools
This section describes some tools similar to the developed web application presented in this paper. The operation and features of the following tools are described: Web tool for Entity-Relationship modelling [8], ER Modeler [9], Diagrams.net [10], Creately [11] and Gliffy [12]. A comparative analysis of the tools is also provided at the end of the section.

Web tool for entity-relationship modelling
This tool [8] was developed to improve teaching and learning at the levels of computer technician and engineer at the Polytechnic University of Girona in Spain. It has two modules: the first module is the student interface and the second is the E-R dia-gram correction module. The student interface has among its features the definition of a problem that must be solved; the different functions to design an E-R diagram; and a button with which the student is communicated with the correction system, which will give him feedback on the solution he has proposed. The solution proposed by the student is automatically corrected in the E-R diagram correction module.
This tool is useful for introductory database courses; however, a disadvantage is that it does not allow the student to develop logical thinking and determine what the necessary elements are (entities and attributes) to solve the problem, since it automatically provides the attributes that must be used to create the diagram.

ER modeller
ER Modeler [9] is a plug-in that integrates with Eclipse. This tool offers a graphical development environment that supports the extensible mark-up language (XML) and the data definition language (DDL). It also allows connection to a database and the option of creating a special type of E-R diagram. It should be noted that this tool not only allows the user to design a logical data model, but also supports the physical data design model. It is a tool that is used as a pedagogical support, since its functionality is used to teach students the main concepts of database design. ER Modeler is composed of the primary function module, which has two independent plug-ins: E-R diagram editor plug-in, which allows the creation of E-R diagrams; and the plug-in for the generation of DDL. The E-R model editor plug-in contains the diagram editor, for creating and editing E-R diagrams. The editor contains the three basic objects of E-R diagrams: entity, relationship and attributes.

Diagrams.net
It is a free online tool [10] for creating diagrams, built from the mxGraph tool. It is available for personal, academic and research use; and it allows creating various diagrams such as UML diagrams, E-R diagrams, flowchart diagrams, among others. Diagrams.net is a system that allows dragging and dropping of objects. Regarding E-R diagrams, it only has the basic elements for this model. This tool has a workspace, an object search area, a basic toolbar, an edit bar, and an object edit area. The work area allows dragging and dropping of objects; the object search area has an object search box, and has a list with the name of the collections available in the system; the basic toolbar has the menus for file, edit, view, format, help, among others; the edit bar has a zoom button, a button to change the font and size, there are buttons to create connectors between objects, and finally a button to design the workspace. The object editing area allows the user to edit the selected object; change the font, background and line colour, in addition to selecting the font, alignment and font size; the user can also change the size and position of the figure.

Creately
It is a web diagramming tool [11] developed by the Australian company Cinergix Pty Ltd; it was launched to the market in September 2009. This tool was created mainly for the benefit of web designers, business consultants, software developers, and students. Among the diagrams that can be created in the system are the following: flowchart diagrams, user interface models, database diagrams, class diagrams, among others. The tool allows the selection of objects, dragging and dropping them. The most important features and elements of the system are the following: user management, creation and modification of diagrams, basic elements area, contextual toolbar, basic toolbar, features and collaboration area, work area, tutorial of use.

Gliffy
This tool [12] was founded in 2005 by Chris Kohlhardt and Clint Dickson in San Francisco, California; it is a web application that allows the user to create, share, and collaborate with diagrams. Gliffy has several collections of models for diagram design, such as the following: UML, flow, network, organization charts, E-R, among others. The most important features of the tool are the following: user management, tutorial of use, workspace area, object section, search box, menu bar, edit bar, style context menu, edit saved diagrams. Gliffy allows the user to move an item along with its connections; in addition to being able to change the cardinality of the connections. Focused on the E-R model, it only has the basic elements. This tool has no cost for the creation of the first five diagrams and the possibility that another user can collaborate on the diagrams. However, if you want to create more diagrams and collaborate with more than one user, it is necessary to pay one of the packages that are offered.

3.6
Other systems analysed In this section there are some other systems that were analysed, which are also relevant, but for which not enough information was found to make an appropriate comparison with the other tools or because they describe diagram evaluation methods.
The automatic E-R diagram marking tool is a review tool [13], which allows the student to practice the diagramming of E-R models and obtain feedback; the approach they have taken to review the diagrams is divided into five stages, which are: segmentation, assimilation (image translation), identification (connections), aggregation (associations between two elements) and integration (sense of the diagram).
The formative assessment tool for conceptual database design [14] is a web application designed to give support to teaching and learning conceptual database design using UML class diagrams; this environment is a tool for formative assessment since it is capable of correcting automatically UML class diagrams exercises providing immediate feedback to the student; it has been used in introductory database courses.
The conceptual modelling tool for database systems (CODASYS) is a tool [15] that aims to help novice designers in the design of E-R diagrams; the system is intended to prevent database modelling errors. The main contribution of this system is the collec-tion of information about the various areas of cognitive science, rules and heuristics that have been tried to integrate into database theory and some empirical findings from the behaviour of beginning designers in modelling data.
The web tool for teaching data modelling [16] is an interactive instrument that provides data modelling exercises to improve student understanding of E-R diagram design. This tool uses classical database normalization; it has a main window, which has fields to enter the elements; a result window, in which the student will see the normalized result; and an E-R diagram window, where the diagram is drawn.
The e-learning model presented in [17] shows the relationship between XML and relational database models and its potential as a technology to support teaching and learning processes; it discusses how relational database models and XML can work together and illustrates their implications in the development of e-learning systems.

Comparison table
This section provides an explanation of each of the features found after reviewing the previously presented E-R diagram tools. Table 1 shows a comparison of functionalities of the tools discussed previously and diagrammER. The tools shown in Table 1 are the following: T1) Web tool for Entity-Relationship modelling; T2) ER Modeler; T3) Draw.io; T4) Creately; T5) Gliffy; and T6) diagrammER. The tick indicates that the tool has the functionality, while the cross indicates that the tool does not have it.

12) Transformation E-R to relational model
Web tool: This feature indicates that the tool is a web application.
iJET -Vol. 15, No. 19, 2020 Dragging and dropping objects: It indicates that items can be manipulated by dragging and dropping them on a work area.
Feedback: This feature indicates that it is possible to evaluate the diagrams and send error messages after evaluation.
Creating objects from an element: It indicates that it is possible to create an object automatically when selecting it (entity, relationship or attribute). For example, attributes could be created from an entity.
Zoom: This feature allows the user to focus on the work area; the user can zoom in or zoom out.
Problem description: It indicates that there is an area in which a problem to be solved is described.
Entities, relationships and simple attributes: This feature indicates the use of figures as rectangles for the entities, ellipses that represent attributes, diamonds to symbolize the relationships between entities, and lines to link the figures.
Entities, relationships and extended attributes: It indicates the use of elements as a rectangle with double lines for a set of weak entities, ellipse with double lines that represent multivalued attributes, among others.
User management: This feature indicates that is has a module to allow user registration and access.
Saving diagrams: It indicates that the user can save diagrams in the tool, so they can be viewed at any time.
Editing diagrams: This feature indicates that the tool allows modifying the diagram as many times as necessary.
Transformation E-R to relational model: It allows the user to transform an E-R diagram to a relational diagram.
Menu of created diagrams: This feature indicates that the tool has an area that allows the student to visualize the diagrams created during previous sessions.
Customization: It allows the user to format diagrams, by changing font color and size, border type, among others.
Collaborative work: This feature indicates that the system allows more than one student to work on a diagram at the same time from different places.
Diagram export: It indicates that the tool has the functionality of exporting a diagram to an image or a PDF file.
Solved exercises: This feature indicates that the system or tool provides the solution to the proposed exercises.
Free use: It indicates that the tool has no cost to use it. Tutorial: This feature indicates that the tool has a tutorial of how to use it.

Development of the Web Application
This section presents the development of the web application; the modules that compose it are explained; the interface prototypes are presented; and the technologies and tools used to develop it are described.

Modules
The modules that compose the web application are the following: User registration module: It is used for user registration and to make the distinction between a student and a teacher, since each user will be able to carry out different activities in the web application.
Diagram creation module: It is used to create E-R diagrams. This tool has the following areas: Diagram saving module: It is used to save an E-R diagram. This module contains a space to assign a name to the diagram. It is worth mentioning that the diagram must be kept considering its connections, design and changes made.
Exercise editing module: It is only available to the teacher, since it allows creating an exercise, where the user describes the exercise and assigns a title for the exercise. The teacher can associate an E-R diagram with the exercise.
Exercise visualization module: This module lists the exercises designed by the teacher. This module shows the title and description of the exercises, also if they have an associated diagram it allows the user to edit it or simply view it.

Interface prototypes
The design of the web application interface to create E-R diagrams was represented thorough prototypes, which were created with the web tool MockFlow [18]. It should be noted that only the prototype of editing a diagram is shown in this section. Figure 1 illustrates the interface prototype to create E-R diagrams.

Fig. 1. Interface prototype to create a diagram in diagrammER
The left panel of Figure 1 shows the created diagrams area on the top, and the container of figures area is shown at the bottom; the center panel shows the work area, where the user can drag and drop figures to create a diagram; the right panel has the editing area, where the user can change the size of the figures, the type, the color, among other aspects related to the figures that are placed on the work area. It should be noted that the prototype has a menu on the top, with the following options: save a diagram, new diagram, export a diagram, exercises and help.

Technologies and tools used
There were several technologies and tools used for the development of the system presented in this paper. Some of them are described in the following paragraphs.
Java Server Pages (JSP): It is a Java technology that allows to develop dynamic web pages, combining static HTML with HTML dynamically generated. JSP files were used for the creation of dynamic web pages, where information is input to the web application, extracted from the database and processed. JavaScript: It is an interpreted programming language, designed to make interactive and dynamic web pages. This language is based on objects because it has an implementation of the Document Object Model (DOM), which is a model that translates the structure of an HTML document to a tree of objects when the document is interpreted by a web browser. JavaScript was used for the dynamic creation of figures, movement of figures on the work area, and change of style attributes.
Cascading Style Sheets (CSS): It is a language for styles used to change the presentation of a web page, such as the background color or font size. CSS were used for the presentation of the web application to create E-R diagrams, and also for the default design of the figures that are dragged and dropped on the work area.
NetBeans: It is an Integrated Development Environment (IDE), which allows to write, compile, debug and execute programs. NetBeans allowed to concentrate the creation of all the files of the project, such as Java classes, JSP files, CSS files, JavaScript files, among others.
Apache Tomcat: It is a web server and servlet container, which allows to compile JSP files that are converted into servlets. Apache Tomcat was used as a web server, servlet container, and for processing all the JSP files of the system.
MySQL: It is a Relational Database Management System (RDBMS) based on the Structured Query Language (SQL), multi-threaded, multi-user and multi-platform, which is widely used for storing data in web applications for different platforms. MySQL was used for the creation of the relational database of the web application.
Balsamiq Mockups: It is an application for creating prototypes for web graphical interfaces, with the aim of showing them to the students and teachers in early stages of the development process. Balsamiq Mockups was used to create interface prototypes very quickly, which were used to validate and test the interface.

Scalable Vector Graphics (SVG):
It is an open standard language that is part of HTML. It is used to make 2D vector drawings. It is a graphic format based on XML with a markup language. SVG was vital for the development of diagrammER, since the figures used to design the E-R diagrams are SVG objects.

Operation of the Web Application
In this section the web application is presented in operation, through the creation of an E-R diagram step by step, showing its functionality to drag and drop figures on the work area, link and move figures, add text to figures and change styles. Figure 2 shows the interface of diagrammER; the left panel shows the saved diagrams at the top, and the figures to create a diagram are at the bottom; the center panel is the work area, where the user (teacher or student) can create an E-R diagram by dragging and dropping figures. Figure 2 shows three figures that have been dragged and dropped on the work area: 2 ellipses, which represent the attributes in an E-R diagram; and a rectangle, which represents an entity in an E-R diagram. The user can move any of these figures freely on the work area.

Fig. 2. Interface of diagrammER with an entity and two attributes
In Figure 3 the user has dragged and dropped four more figures on the work area, for a total of seven figures: four ellipses, which represent attributes in an E-R diagram; two rectangles, which represent entities in an E-R diagram; and a diamond, which represents a relationship in an E-R diagram. Figure 3 also shows the links that the user has established between an entity and its attributes. These links must be established appropriately for entities, attributes and relationships.
In Figure 4 the user has created a simple E-R diagram, with two entities, five attributes and a relationship; the links established that the first entity has two attributes and the second entity has three attributes; the entities are connected through a relationship. Figure 4 also shows the text that the user has input into the diamond (relationship). It should be noted that text can be input in any of the figures. Figure 5 shows the E-R diagram with some text in its entities, attributes and relationship. It also shows the panel of styles on the right side, where the user can change the font face, font size, font color, background color of the figure, line color and dimensions (width and height) of the figure.   Figure 6 illustrates the functionality of the panel of styles. It shows the changes the user has already made to the style of the relationship figure: font face changed to Helvetica, font size to 15 pixels, and font color to crimson. It also shows that the first entity changed its dimensions: height to 90 pixels and width to 115 pixels. Figure 7 shows the E-R diagram once the user has finished applying styles to all the figures in the diagram. This diagram can be saved to the system; it can be modified; and it can also be incorporated into an exercise designed by the teacher. Evaluation Instrument The web application presented in this paper belongs to the category of digital content [19], since it has educational materials that offer diverse contents and activities related to any area of knowledge, which can be accessed on the Internet through a web browser and are aimed at students or teachers. Since this web application aims to support the teaching-learning process of database topics, the target audience are undergraduate students who study subjects with this content. In particular, the population that participated in the evaluation reported in this section was composed of 23 students (7 women and 16 men) who attended the course Databases at our faculty.
To evaluate the web application an evaluation instrument was created, which was designed to assess the following aspects: interface design, functionality and didactic features. The evaluation scale used was the following: 1) Very suitable 2) Suitable 3) Little suitable 4) Not suitable Table 2 shows the evaluation instrument and the results for the interface design aspect.

Conclusions and Future Work
This paper presented diagrammER, a web application to support the teachinglearning process of database courses through the creation of E-R diagrams. The web application was developed to support the students of the Information Technology and Systems undergraduate program at our faculty, in the practice E-R modelling. The web application allows students to design their diagrams and save them; these diagrams can be retrieved and edited later; it also allows students to see exercises and examples developed by teachers. Teachers can create and design exercises, which may have an associated diagram. It should be noted that if the teacher wants to create a diagram without an exercise, the web application allows him to design the diagram and save it without any problem; the exercise can be linked to the diagram later.
It was carried out a comparative analysis of tools similar to diagrammER, and the most relevant features were highlighted. The implementation of the web application was also presented, where its modules were explained, the interface prototypes were shown and the technologies and tools used were described. The operation of the web application was illustrated through the creation of an E-R diagram step by step, showing its functionality to drag and drop figures (entities, attributes and relationships) on the work area; link and move figures, add text to figures and change styles.
The use of diagrammER was evaluated with students who attended a Database course, through an evaluation instrument that measured aspects of interface design, functionality and didactic features. The results obtained in the evaluation of the interface design aspect reflected a favourable opinion and acceptance of the majority of the students, since 65% of them mentioned that the interface of the web application is very suitable or suitable. Regarding the evaluation of the functionality aspect, 74% of the students considered that the way to create an E-R diagram in the web application is very suitable or suitable. Finally, in the evaluation of the didactic features aspect, 74% of the students interviewed considered that the web application with its examples and exercises is very suitable or suitable for supporting the teaching-learning process of the E-R model, which is part of a database course. The joint work of the teacher with the students is very important in the development and evaluation of web applications of this type, since the main users of these works are the students.
It is planned the incorporation of more functionality for diagram editing and the automatic evaluation of the diagrams generated with the web application. Finally, it is planned to put the system on a web server so that more students can test it and make the necessary adaptations to have a more robust system.