Jurnal Ilmu Pendidikan (JIP) Vol.
Issue 1.
June 2024, pp.
ISSN: 0215-9643
e-ISSN: 2442-8655 Analysis and Design of Responsive Web-Based Learning Media Equipped with Pomodoro Feature in the Course of Software Engineering Syaad Patmantharaa,1, .
Muhammad Ricky Perdana Putrab,2,*.
Dila Umnia Sorayaa,3 aUniversitas Negeri Malang.
Jalan Semarang No.
Lowokwaru.
Malang 65145.
Indonesia bUniversitas Amikom Yogyakarta.
Jl.
Ring Road Utara.
Sleman.
Yogyakarta 55281.
Indonesia ft@um.
2 muhammad.
ricky@students.
ft@um.
*corresponding author
ARTICLE INFO
Article history Received Feb 03, 2024 Revised April 02, 2024 Accepted June 19, 2024 Keywords Learning Media Web Pomodoro Software Engineering ABSTRACT The development of information and communication technology has brought about changes in the field of education, one of which is the emergence of web-based learning.
Based on preliminary observation data collected through questionnaires, students still expressed uncertainty about their understanding of software engineering (SE) materials.
The current learning media for SE include PowerPoint (PPT), e-modules, and instructional videos, which students find less engaging and challenging to comprehend.
Additionally, students face distractions like games and social media, leading to difficulty maintaining focus while studying.
The objectives of this research are .
to analyze user and system needs and .
to design webbased responsive learning media for the software engineering course, equipped with a Pomodoro The research method used is research and development (R&D) with the 4D Thiagarajan development model, consisting of four stages: define, design, develop, and disseminate.
However, only the definition and design stages were carried out due to research limitations.
The presentation of data analysis results involves .
needs analysis, which includes frontend analysis, learner analysis, task analysis, concept analysis, and specifying instructional objectives.
system design, which includes context diagrams and data flow diagrams.
database design, which includes Entity Relationship Diagram (ERD) and database file structure.
initial design in the form of a prototype.
technology design for development and implementation.
instructional media testing design.
This is an open-access article under the CCAeBY license.
Introduction Indonesia is a country that pays great attention to education for its citizens.
It is stated in the 1945 Constitution of the Republic of Indonesia Article 31, paragraph 2: "Every citizen is obliged to attend basic education, and the government is obliged to pay for it.
Policies on education, such as the 12-year compulsory education that began in 2013 called the universal secondary education program, are a continuation of the .
nine-year compulsory education program.
(Margiyanti & Maulia, 2.
Then, the Merdeka Belajar Kampus Merdeka policy initiated by the Indonesian Minister of Education.
Culture.
Research and Technology Nadiem Makarim in 2020 (Ramadhan & Megawati.
Education is one of the indicators to assess the human development index.
In 2021.
Indonesia's HDI 29 and increased compared to the previous year, namely 71.
94 (Sutono, 2.
http://dx.
org/10.
17977/um048v30i1p8-19 The development of modern times, accompanied by the emergence of technology, has transformed all fields of life into digital, and education is no exception.
Education that used to use books and conducted in the classroom can now be done anywhere and anytime using desktop or mobile devices, known as e-learning.
E-learning is a learning process based on electronic media and internet networks to facilitate the exchange of knowledge and information and improve learners' skills.
(Diva & Hikmawan, 2.
One of the implementations of elearning is responsive web-based learning media.
Responsive web-based learning media can support and display multimedia content, including text, images, audio, video, and animation.
The web display can be designed to adjust the user's screen .
without reducing the content displayed so that it adds value to the user (Wahyono et al.
, 2.
ISSN: 0215-9643
e-ISSN: 2442-8655 Jurnal Ilmu Pendidikan (JIP) Vol.
Issue 1.
June 2024, pp.
Various educational institutions utilize information and communication technology to support the learning Based on the results of observations in 2022 in the Universitas Negeri Malang, it was found that the agency already has facilities and infrastructure such as computer laboratories and Wi-Fi .
ireless fidelit.
hotspots that can be accessed by students through their mobile devices such as laptops and smartphones for free.
Unfortunately, students have not utilized these facilities properly because they are often used to access games and social media.
Students should utilize these facilities to learn independently through responsive web-based learning media that can be accessed on all desktop platforms, such as Windows.
Linux, and MacOS, or mobile, such as Android, iOS, and Symbian.
Based on initial observation data conducted by distributing questionnaires to students of the Informatics Engineering Education study program class of 2019 and 2020, some students still answered doubtfully about their understanding of software engineering material.
The learning media used at this time, namely PowerPoint (PPT), e-modules, and learning videos, are considered by students to be less interesting and difficult to understand.
Another difficulty students face while learning is that many distractions interfere with learning focus and Examples of sources of distraction include student activities outside campus, such as joining organizations and communities, and other activities, such as playing games, watching movies, and working both part-time and freelance.
Based on these problems, it is necessary to analyze and design responsive web-based learning media that can be used to deliver material because it is practical and easily accessible anywhere and anytime online with devices with various operating system platforms and screen sizes.
This makes it easier for lecturers and students to exchange information synchronously and asynchronously without being hindered by space and time.
The problem of learning distraction or attention residue can be reduced by applying the Pomodoro learning technique.
(Tarwiyah et al.
, 2.
Attention residue occurs when attention or focus is diverted to other things that should be focused on current The human brain is designed not to multitask because it causes mental fatigue, affecting productivity.
(Afra et al.
, 2.
So, applying the Pomodoro technique can increase student productivity in learning.
The Pomodoro learning technique was introduced by Francesco Cirillo in 1980.
Pomodoro is done by combining study time with rest time, namely setting 25 minutes to focus on learning and 5 minutes to rest repetitively (Arviani et al.
, 2.
After repeating four times, the break time can be extended to 15 to 30 minutes.
Features to support the Pomodoro learning technique will be developed and installed on responsive web-based learning media with data processing on the client side so as not to affect web access speed.
Displayed guidance and warning notifications so users can more easily apply the Pomodoro technique without opening third-party Visually, the cycle of the Pomodoro technique is depicted in Fig.
Fig.
Pomodoro Learning Technique Cycle Some practical research on implementing the Pomodoro technique was carried out on the Lockscreen of the Android-based lock timer application.
(Muriyatmoko et al.
, 2.
The research aims to prevent smartphone users from staring at the screen for too long so that their eyes are not tired.
Based on the Pomodoro cycle, there is a warning when it's time to rest, and the screen will enter the lock screen.
After the break time is over, the screen can be used again.
The weakness of this research is that the application developed can only be accessed through Android and cannot be multiplatform.
Furthermore, the implementation of the Pomodoro technique for learning was carried out at SMK Muhammadiyah 2 Malang.
(Rafliyanto & Mukhlis, 2.
The background of the problem is the difficulty of students in understanding the material provided by educators.
The study results are that the Pomodoro technique can help students not to be distracted and train them to get used to managing study time.
In line with this research, the Pomodoro technique at a professor learning studio in Madiun City (Arviani et al.
, 2.
The study results show that the Pomodoro technique helps students concentrate more by utilizing time efficiently.
Then, previous research related to the analysis, design, and development of web-based learning media designed media for the subject of information and communication Patmanthara et.
al (Analysis and Design of Responsive Web-Based Learning Media Equipped with Pomodoro Feature in the Cours.
Jurnal Ilmu Pendidikan (JIP) Vol.
Issue 1.
June 2024, pp.
technology at Al-Hidaya Islamic High School (Fitri et al.
The media design includes framework, system flow, user interface (UI), or user experience (UX).
This research results only design, and there is no request for feedback from external parties such as students or In addition, the weakness of the research is that the design is incomplete because there is no data flow diagram (DFD) or entity relationship diagram (ERD).
Another research study on the topic of designing learning media with Berdu.
ID with econophysics materials (Assiddiqi et al.
, 2.
The study used a Waterfall development methodology.
By distributing student response questionnaires, the learning media that has been designed gets a percentage value of 87.
15%, so it is very good to use.
The weaknesses of this research are the absence of DFD.
ERD, and UI/UX design, which is less attractive and still rigid due to limited customization ISSN: 0215-9643 e-ISSN: 2442-8655 II.
Method This study uses a research and development method called research and development (R&D).
Sugiyono .
states that research and development (R&D) methods produce certain products and test their effectiveness.
The development model used in this study is 4D (Four D), developed by Thiagarajan, .
The 4D model consists of four main stages: define, design, develop, and However, the research has limitations.
It only discusses the analysis and design of learning media, so the stages to be carried out are only the defining and design The stages and sub-stages are visually presented in Fig.
Learning media as a web-based module for the Basic Software and Game Development (DPPLG) subject of class X RPL SMK Negeri 1 Kepanjen.
(MaAowa et al.
The research was conducted by giving the media to The T-test is done to see whether there is a significant change before and after using the media.
The T-test results show a significant change and hypothesis H1 is accepted.
The weakness of this study is the incomplete and less detailed media design.
Specifically, research on learning media that implements the Pomodoro technique has not been carried out by previous researchers.
Most previous research on learning media implements learning models such as problem-based learning.
(Munawarah et al.
, 2.
project-based learning (Kusumawati & Prapanca, 2.
, inquiry learning (Apriani & Napitupulu, 2.
, selfregulated learning (Utami et al.
, 2.
, blended learning (Pratiwi & Silalahi, 2.
And so on.
In addition, the development also still uses third-party tools that are only needed to manage content, such as Google Sites.
(Adzkiya & Suryaman, 2.
and Moodle LMS (Pratiwi & Silalahi, 2.
This research will use a web programming language requiring code from scratch.
As a form of contribution to the topic of learning media analysis and design, this research focuses on designing learning media that implement the Pomodoro technique based on the data that has been collected.
To ensure that the research conducted is not widened, problem boundaries are formulated.
namely, this research is a documentation of the results of analysis and design using the 4D method from Thiagarajan, does not disseminate media because it is still in the design stage and has not been developed in the form of a prototype or Minimum Viable Product (MVP).
The objectives of this study include .
analyzing user and system needs and .
designing responsive web-based software engineering course learning media equipped with Pomodoro features that have been developed.
Fig.
4D Development Model The defining stage aims to determine and define the learning process and system needs and collect information about the developed product.
This stage was carried out by distributing an initial observation questionnaire with aspects of opinion related to Software Engineering (SE) material, device specifications owned by students, knowledge of the Pomodoro technique, and student interest in learning media products.
Before being disseminated to research subjects, the supervisor validated the questionnaire.
The questionnaire was completed by undergraduate students of Informatics Engineering Education who have taken or are taking software engineering courses.
The defining stage has sub-stages:
front-end analysis, learner analysis, task analysis, concept analysis, and specifying instructional objectives.
After the defining stage, the next stage is the design The design stage aims to design the initial concept of responsive web-based learning media with Pomodoro features in software engineering courses.
The results of the Patmanthara et.
al (Analysis and Design of Responsive Web-Based Learning Media Equipped with Pomodoro Feature in the Cours.
ISSN: 0215-9643 e-ISSN: 2442-8655 previous analysis are used as a reference for designing learning media.
The sub-stages of the design stage are test preparation, media selection, format selection, and initial design or prototype products.
The research location was the Department of Electrical Engineering and Informatics.
Universitas Negeri Malang, and the research time was carried out in the 2022/2023 academic year.
The chosen research subjects were undergraduate Informatics Engineering Education students who had taken or were taking SE courses.
The data collection method was done by distributing questionnaires to the research subjects.
The questionnaire is written in Google Forms to be easily accessible and filled in by the subject.
The results of data analysis are presented based on the flow proposed by (Rahadi et al.
, 2.
NAMELY .
needs analysis based on the sub-stages of the defining stage, namely frontend analysis, learner analysis, task analysis, concept analysis, and specifying instructional objectives, .
system design includes context diagrams and data flow diagrams, .
database design includes Entity Relationship Diagram (ERD) and database file structure, .
initial design in the form of prototypes, .
design of development and use technology and, .
design of learning media testing methods.
Aspect Learner Concept Task analysis i.
Results After distributing questionnaires to students who are research subjects, the data obtained will be analyzed using the research method above.
After the analysis stage is complete, proceed to the design stage.
The design stage is based on the analysis results and specifically leads to developing the learning media system.
The following are the results of the analysis and design of learning media.
Need Analysis The needs analysis was obtained from initial observation data conducted in August 2022 by distributing questionnaires through Google Forms.
The results of the needs analysis are presented in Table 1.
Table 1.
Need Analysis Result Aspect Front end Learner Jurnal Ilmu Pendidikan (JIP) Vol.
Issue 1.
June 2024, pp.
Analysis Result The Department of Electrical Engineering and Informatics.
Universitas Negeri Malang, already has adequate internet facilities based on wireless fidelity.
Students have not utilized these facilities for learning and learning activities but are used to access social media and games.
The learning media currently available, namely PowerPoint, e-modules, learning videos, books, and the internet, are considered by students to be less interesting.
Students still do not understand the software engineering course material well.
Specifying Analysis Result Students have difficulty learning software engineering material because they find the material difficult to understand, there are many distractions while learning, the learning media is not interesting, and the lecturer's explanation is difficult to understand.
Students already have mobile and desktop devices with various operating systems and screen sizes that can be used to access the Internet.
Students are interested in learning media that combines multimedia content and applies the Pomodoro technique.
The learning media is developed on a responsive web basis to be accessed on all operating systems and any screen size.
Learning materials were adjusted to the Universitas Negeri Malang curriculum in 2019 and 2020, and 9 topics were covered.
The material topics include software and software engineering concepts, development process models, software quality assurance, analysis modeling, design engineering, objectoriented software engineering, programming language selection and SOLID principles, software testing, and maintenance.
Assignments are aimed at achieving minimum competencies based on the Course Learning Outcomes.
Assignments are given in groups and per learning topic with variations such as discussion papers, analysis reports, practicum reports, and journal article reviews.
This aspect is a summary of concept analysis and task analysis.
Topics, objectives, and learning assignments are presented as a Semester Lecture Plan.
System Design The system design is based on the results of the needs System design is made in three forms, namely context diagrams, data flow diagrams, and flowcharts, each with a purpose.
A context diagram or context diagram is a diagram that describes the input-output process and the scope of a system in general.
(Satyaninggrat et al.
, 2.
The context diagram of the system can be seen in Fig.
Furthermore, the data flow diagram (DFD) level 0 was prepared to elaborate on the context diagram.
DFD
describes the logic model of where data comes from, how the data process flows, where data is stored, what processes and interactions are involved between the system and data (Safwandi, 2.
Based on the context diagram, the system process is broken down into five processes: authentication, homepage, user guide, learning content, and user.
Each process interacts with the data store .
s a representation of the database tabl.
DFD level 0 of the system can be seen in Fig.
Patmanthara et.
al (Analysis and Design of Responsive Web-Based Learning Media Equipped with Pomodoro Feature in the Cours.
Jurnal Ilmu Pendidikan (JIP) Vol.
Issue 1.
June 2024, pp.
ISSN: 0215-9643
e-ISSN: 2442-8655 Fig.
Context Diagram Fig.
DFD Level 1 Authentication Process Fig.
DFD Level 0 The authentication process in the system is broken down into three sub-processes: registration, login, and password reset.
As a form of system security, the password reset feature requires the user's email to send the reset link.
The data stores involved in this process are user and user DFD level 1 of the authentication process can be seen in Fig.
Fig.
DFD Level 1 Homepage Process http://dx.
org/10.
17977/um048v30i1p8-19 ISSN: 0215-9643 e-ISSN: 2442-8655 Jurnal Ilmu Pendidikan (JIP) Vol.
Issue 1.
June 2024, pp.
The homepage process organizes data on the learning media homepage display.
Three things are displayed: the last activity, the last material, and the last evaluation results accessed by the user.
The data stores involved are user activity, learning material, and evaluation.
DFD level 1 of the homepage process can be seen in Fig.
The user guide process is a process that manages the content of the learning media usage guide.
This process contains two sub-processes: reading the user guide and managing the special use guide for lecturers and User guide management includes CRUD .
reate, read, update, delet.
DFD level 1 of the user guide process can be seen in Fig.
Fig.
DFD Level 1 User Guide Process Fig.
DFD Level 1 Learning Content The learning content process is a process that organizes learning content management.
There are three subprocesses for lecturers and administrators and three subprocesses for students.
Lecturers and administrators can perform content management (CRUD) on the material, evaluation, and feedback subprocesses.
Meanwhile, students can view materials and do evaluations and Four data stores are involved: Learning Materials.
Learning evaluation, feedback, and user DFD level 1 of the learning content process can be seen in Fig.
The user process is a process that aims to manage all user accounts and view user activity.
Administrators can only access this process, so this feature is hidden in the student user role.
Even if it is accessed via a uniform resource locator (URL), it will not be able to enter this feature because the system has been set up in such a way for system security.
DFD level 1 of the user process can be seen in Fig.
Database Design Database design is divided into entity relationship diagram design and database file structure design.
ERD is the most widely used visualization tool for database design and represents how entities are interrelated in the database (Azzahra & Anggoro, 2.
Then, the database file structure is visual, and data types are added to each attribute .
f the entit.
drawn previously on the ERD.
The tools used to design the database are web draw.
io and the results are shown in Fig.
10 and Fig.
Patmanthara et.
al (Analysis and Design of Responsive Web-Based Learning Media Equipped with Pomodoro Feature in the Cours.
Jurnal Ilmu Pendidikan (JIP) Vol.
Issue 1.
June 2024, pp.
ISSN: 0215-9643
Fig.
DFD Level 1 User Process Fig.
ERD
http://dx.
org/10.
17977/um048v30i1p8-19 e-ISSN: 2442-8655
ISSN: 0215-9643
e-ISSN: 2442-8655 Jurnal Ilmu Pendidikan (JIP) Vol.
Issue 1.
June 2024, pp.
Fig.
Relational Database Diagram Initial Design The initial design is in the form of a prototype.
Before creating a prototype, the first step is to design wireframes, then mockups, and proceed to prototypes.
Wireframes are the initial framework before a web page or application is designed, referred to as low-fidelity.
(Hartawan, 2.
Furthermore, wireframes are used as the basis for developing mockups, which are depictions of design concepts and are referred to as medium-fidelity (Iskandar et al.
, 2.
Wireframes and mockups were created with the help of Figma software, which professionals widely use to design UI/UX applications.
Meanwhile, prototype development is done using Visual Studio Code software as a text editor for coding.
The results of the initial design can be seen in Table 3.
Table 2.
Initial Design Interface Deskto Patmanthara et.
al (Analysis and Design of Responsive Web-Based Learning Media Equipped with Pomodoro Feature in the Cours.
Deskto Jurnal Ilmu Pendidikan (JIP) Vol.
Issue 1.
June 2024, pp.
Interface ISSN: 0215-9643 e-ISSN: 2442-8655 Interface Deskto Mobile Technology Design Technology design is determined based on the technology needed and used to support developing responsive web-based learning media for software engineering courses.
Technology design is divided into hardware, software, and user.
The following is a detailed design of the development technology used.
Hardware The minimum specification of hardware, both desktop and mobile versions, that can be used to access learning media is to access the internet with a connection type of at least 3G and a minimum speed of 100Kb/s.
It can be installed in a web browser that supports JavaScript .
n more detail explained in the software sectio.
Software Software means an operating system or computer Android is the operating system that can be used to access this learning media.
Meanwhile, the computer program needed is a browser that supports JavaScript, such as Google Chrome.
Mozilla Firefox.
Safari, and Microsoft Edge.
The learning media development technology uses the PHP framework Laravel version 9 and the CSS framework Bootstrap version 5.
3, which already supports dark mode as an additional feature of the learning .
User The learning media that has been developed requires people to use it.
This represents the user role and affects the process access rights, as described in the system design User roles and their duties are .
administrator, in charge of managing learning content and users.
lecturer, in charge of managing learning content.
students, have the right to use learning media as a learning supplement and fill in feedback as a basis for making future media improvements.
Pomodoro Implementation The Pomodoro technique is developed objectively .
, meaning that the Pomodoro feature can be Patmanthara et.
al (Analysis and Design of Responsive Web-Based Learning Media Equipped with Pomodoro Feature in the Cours.
ISSN: 0215-9643 e-ISSN: 2442-8655 Jurnal Ilmu Pendidikan (JIP) Vol.
Issue 1.
June 2024, pp.
installed or integrated on a web platform or stand alone as an application.
Therefore, the development of the Pomodoro feature is done with JavaScript, and the jQuery library is utilized to make code simpler and easier to In the learning media, the Pomodoro feature is displayed with a pop-up .
, which has a clock icon at the top .
and, when clicked, will display the Pomodoro time.
To add to the user experience, this feature adds a 'kring' bell tone as a marker or notification when study time or break begins.
When it is breaking time, all click access on the learning media is turned off so users can rest first.
Testing The software testing design is carried out using the black box testing method, which is done by looking at the input and output of the software without paying attention to the structure of the code writing.
Black box testing can show errors in the application system, such as errors in functions or missing features.
(Ichsanudin et al.
, 2.
preparation for testing, test cases, result expectations, result realities, and explanations of these results must first be compiled.
Usually, test cases are compiled in tabulation format using Microsoft Office Excel.
Testing is done after the learning media has been developed as a whole or in prototype form.
IV.
Discussion The analysis and design of responsive web-based learning media implementing the Pomodoro technique have been documented above in order, sequence, and In this section, the media design that has been carried out will be compared and interpreted with previous relevant research to provide knowledge and ensure the contribution of the research that has been carried out.
This comparison also aims to identify the strengths and weaknesses of the approach used and potential future improvements and innovations.
The Android-based lock screen application has provided new insights for media development, namely, when it is time for Pomodoro to sound, the screen display or user interaction with the system can be temporarily blocked to ensure users can rest first (Muriyatmoko et al.
Furthermore, learning media can be tested in real life on students or college students, and they are expected to get feedback from users to improve the learning media, as done (Arviani et al.
, 2021.
Rafliyanto & Mukhlis.
Research related to the analysis and design of learning media conducted by (Assiddiqi et al.
, 2023.
Fitri et al.
MaAowa et al.
, 2.
are used to conduct this The lack of documentation in these studies has been closed or completed in this study so that the components of system analysis and design include analyzing user needs using Thiagarajan et al.
's 4D grand the system design starts from the context diagram to DFD Level 1, database design includes ERD and file structure, initial media design with the concept of lowfidelity, namely wireframe and medium-fidelity, mockup, technology design include tools used to run learning media including hardware, software, and user specifications, explanation of the implementation of the Pomodoro technique in learning media, and learning media testing plan before being disseminated to the public using the black box testing method.
The novelty and contribution of this research is the design of learning media for web-based software engineering courses that implement the Pomodoro learning technique to reduce learning distraction.
explained earlier, most previous studies have implemented learning models and not learning techniques, so it is hoped that this concept can be continued in the development In addition, it is developed from scratch by writing code so that the results of this research product are more authentic than using templates or third parties that only need to be customized and filled with content.
It is expected that this research can be a pioneer or pilot project of learning media with Pomodoro technique features to overcome user learning distraction.
Conclusion This research uses Thiagarajan's 4D method with two stages: defining and designing the reason.
This is the limitation of this research, which only focuses on analyzing and designing media based on the results of initial observations or pre-research by distributing questionnaires to informatics education students with the condition that they have taken or are taking software engineering courses.
The Pomodoro technique is implemented in media design to reduce learning distractions because the technique can overcome attention Suggestions for further research, namely with the results of this study, it is hoped that it can be continued to the development stage until the dissemination of learning media so that the product can be accessed generally to meet the needs of academic supplements or meet the needs of lifelong learners.
In addition to the Pomodoro technique, it can be combined with learning models such as those found in previous research.
Another topic is comparing learning outcomes before and after using this learning media.
References