Designing of Web-Based Learning Media for Senior High School During The Covid-19 Pandemic

. The learning process of Senior High School level is done by various methods. In the current pandemic condition, a learning process is needed that is implemented with strict health protocols. One alternative method of the effective and online learning processes is by learning to use web-based learning media. The creation of learning media in this study uses a prototype model, which consists of listening to needs, building mock-ups and evaluating mock-ups. As a sample of research is SMAS Wiyata Mandala Balai Batang Tarang, with data collection techniques used consisting of interviews, observations and library studies. The media designed in this study provides facilities to three (3) level users, namely administration, teachers and students. Administration can manage administrative data, majors, subjects, classes, students, teachers, teaching teachers, announcements and access student achievement reports. Teachers can manage to manage teaching materials, problem banks, meeting schedules and access student achievement reports. Students can access modules, work on weekly meeting questions and access the grades in the meeting results. This designed learning media is expected to help SMAS Wiyata Mandala Balai Batang Tarang in carrying out the learning process and can improve student achievement even in the midst of the pandemic.


INTRODUCTION
The condition of the 2019 corona virus disease (Covid-19) pandemic which has hit almost all countries throughout the world, presents its own challenges to the education sector, especially Primary and Secondary Education. In fighting the Covid-19 outbreak, the Government has implemented Health Protocols including prohibiting crowding, social distance, maintaining physical distance (physical distancing), wearing masks and getting used to always wash hands.  19), in general changes: Face-to-face learning in educational units in the 2020/2021 academic year and 2020/2021 academic year is carried out in stages throughout Indonesia with the following conditions: a. Education units located in the GREEN and YELLOW ZONE areas based on data onto the National COVID-19 Handling Task Force (https://covid19.go.id/petarisiko) can conduct face-to-face learning in education units after obtaining permission from the local government through the local government agency. provincial or district / city education, regional offices of the provincial Ministry of Religion, and district / city Ministry of Religion offices according to their respective authorities based on the approval of the local task force to accelerate handling of COVID-19; b. Education units located in the ORANGE and RED ZONE areas based on data onto the National Covid-19 Handling Task Force, are prohibited from carrying out faceto-face learning processes of educational units and continue to learn from home (BDR) activities. [1] Learning is a teaching and learning activity, which is usually only done face-toface. With advances in information technology, learning activities can also be carried out through the media, namely the website, which will make the learning process more efficient, effective, and flexible so that it is not fixed on face-to-face.
Learning is a learning and teaching activity that occurs directly, where there is an interaction between students and teachers. Learning activities carried out by students can encourage change in students, both to improve student knowledge, understanding, and skills which are constant. [2].
Learning is an activity carried out between two actors, namely teachers as educators and students as students, educators, namely actors who provide teaching material while student actors are recipients of teaching materials. [3]. It is concluded that learning is a learning and teaching activity that is carried out consciously between students and teachers, where the parties interact which shows the process of delivering and receiving teaching materials with predetermined targets. This learning is able to encourage changes in students both in attitudes and in science. With the learning process, the delivery of educational teaching materials can be achieved at the right target.
Based on the above background, it is necessary to have a method that can guarantee the learning process of schools, especially at the high school level. One method that can be done and applied is Online Learning. Online learning is a learning method that uses internet networks with accessibility, connectivity, flexibility, and the ability to generate various types of learning interactions. The research stated by Zhang et al., (2004) shows that the use of the internet and multimedia technology is able to change the way of conveying knowledge and can be an alternative to learning carried out in traditional classrooms. [4]. At the implementation level, online learning requires the support of mobile devices such as smartphones or cellphones, laptops, computers, tablets, and iPhones which can be used to access information anytime and anywhere. [5] Learning is not only fixated on conventional learning systems, but there is already a learning system that uses media. Learning using this media, such as a website, is an effort to take advantage of the development of information technology. Online learning media is infrastructure used in learning activities that is used as a communication tool, computer devices and internet networks as learning media. [3] Online learning media is a means used to support teaching and learning activities in the form of components such as computers, information systems and internet networks that allow students to do distance learning. [2]. Online learning media is a tool used to assist learning and teaching activities online or online so that the interaction process can be channeled into face-to-face, effective and efficient teaching.
Based on the definition, it can be concluded that online learning media is a transition to teaching and learning activities that are usually carried out conventionally by switching to using a medium, namely a website which is an effort to utilize the development of information technology.
The use of web-based technology has a major contribution to the world of education, including the achievement of distance learning goals. Various media can also be used to support the implementation of online learning. For example, virtual classes use Google Classroom, Edmodo, and Schoology services [6][7] [8], and instant messaging applications such as WhatsApp. [9]. Online learning can even be done through social media such as Facebook and Instagram. [10]. Online learning connects students with learning resources (databases, experts / instructors, libraries) that are physically separated or even far apart but can communicate with each other, interact or collaborate (directly / synchronously and indirectly / asynchronously). Online learning is a form of distance learning that utilizes telecommunications and information technology, for example the internet, CD-ROOM. [11].
The teaching and learning process is basically a process of communication and knowledge transfer in the form of delivering messages from sender to receiver. In the process of delivering the message, a medium is needed so that the message can be received properly. Media or facilities are a very important component in a communication process. The level of effectiveness of the learning media used is very influential on the extent to which a communication role will be accepted by the recipient quickly and precisely or vice versa. [12]. The very rapid development of information and communication technology (ICT) has influenced various aspects of human life, including the interaction between teachers and students. These interactions require the support of innovative, creative, precise, and effective instructional media. [13].
Previous research on Web-based learning (WBL) was carried out by Taruna Nasution in 2015. The research concluded that "Web base learning is learning that requires technological tools, especially information technology such as computers and internet access. In practice, web-based learning utilizes internet facilities as a medium for delivering learning information (materials) such as websites, e-mails, mailing lists, and news groups. " [14].
Next is the research conducted by Boy Indrayana and Ali Sadikin in 2020. The research reports that (1) Students are interested in the application of e-learning. (2) the application of e-learning makes it easier about students to attend lectures. (3) The application of e-learning can prevent transmission of covid-19 on campus. The application of e-learning has obstacles to students that live in remote areas. The application of e-learning makes students become independent and have the courage to express their opinions. [15] The problem of this study is the use of conventional learning methods, while having to follow government regulations regarding the implementation of learning during this pandemic. This study aims to design a web-based learning media (Webbased learning). This research is limited to the design of web-based learning media (Web-based learning) at Wiyata Mandala High School.

II. METHODS
Research with the research sample is Wiyata Mandala Senior High School Balai Batang Tarang, Sanggau Regency, West Kalimantan using the Prototype Model Software Development method and data collection techniques in the form of observation, interviews and literature study.

Model of Software Development Model Prototype
The method used in this software development uses a prototype model or which is a software development method in the form of a circular cycle, where there are staging that show each activity in carrying out system development in the design being carried out.
The prototype model is one of the models of software development methods that are suitable for designing an information system, because this prototype model functions to explore customer requirements in more detail but has a high risk of increasing project costs and time [16]. The stages of the prototype model [16] are described as follows: 1. Listening to needs At this stage the authors conducted the first stage of the prototype model, where data was collected by listening to customers in order to obtain the data needed. The customer referred to here be the object of research at SMAS Wiyata Mandala Balai Batang Tarang. Data collection was carried out by means of observation and direct interviews. Regarding how the conventional learning system is and what are the obstacles between students and teachers in the process of implementing conventional learning systems and finding out what kind of learning system they need. Broadly speaking, it is in this analysis process that the author has got a picture of the learning system that will be designed, such as features and functions of the software.

Build or improve a mock-up
At this design stage the writer identifies the design for the program display, interface and algorithm on the system to be designed. This is based on the problem in question and looks for a solution like what the customer expects. With functional goals from both students, teachers and admins. This design is made using UML symbol diagrams from use case diagrams, activity diagrams, sequence diagrams, class diagrams, ERD and LRS. [17][18].

View or test mock-ups
This stage is the last stage of the prototype model. This stage aims to get responses, responses and evaluations from SMAS Wiyata Mandala Balai Batang Tarang. The author only makes a system design, if SMAS Wiyata Mandala Balai Batang Tarang gives a positive response or conforms to the system being designed, then it can be continued at the stage of making the system. If the design of this system cannot satisfy the Wiyata Mandala Senior High School of Balai Batang Tarang, the design of this system will be evaluated and tested until specifications are found in accordance with the wishes.

Data collection technique
Data collection techniques in this study were carried out to discuss problems by explaining, describing, explaining, and interpreting or writing a situation or event which was then analyzed so that a conclusion or subject matter was discussed or to obtain a fact of the state of the learning method in SMAS. Wiyata Mandala Balai Batang Tarang. The following data collection techniques are used:

Observation
Observation is a direct data collection technique carried out at the research site by researchers on existing objects and subjects in order to find existing problems and find out the conditions of the school. The author directly observes the learning activities carried out by SMAS Wiyata Mandala Balai Batang Tarang. From these observations, the writer immediately noted the problems that were found during the observation, systematically without any questions and communication that had to involve other people at Wiyata Mandala High School, Balai Batang Tarang.

Interview
The technique of collecting data by interview is a question and answer activity from two directions. To get data and information from respondents about an existing learning system problem that can also be supporting data from observation activities, in order to get complete and accurate information. Interviews were conducted by the author of the teachers, staff and students at Wiyata Mandala Senior High School, Balai Batang Tarang to obtain information on problems that occurred in these learning activities.

Literature studies
It is a technique of collecting data by the author by quoting some of the readings related to the web-based learning system at SMAS Wiyata Mandala Balai Batang Tarang. Reference sources in the form of literature, books, journals and reference sources from the internet exist to provide a strong theoretical basis.

Needs Analysis
Needs analysis is a stage of identifying the functional requirements of the program associated with the proposed activity process. [19]. The analysis of the needs for the design of an information system for web-based learning learning media is as follows: A. User Requirements In the design of the information system for web-based learning learning media, there are three (3) levels of users in operating web-based learning learning media, namely: Needs Scenario Administration Section, Scenarios for Teacher's Section Needs, Student's Part Needs Scenario. B. System Requirements 1. Users must log in first to be able to access the application by entering a username and password so that the privacy of each user is maintained. 2. Users must log out when finished using the application. 3. The system can display and process data processing in accordance with the available menu. 4. The system can display data on the value of each meeting when students have finished working on the assignments for each meeting. 5. The system prints reports according to the search criteria

Use Case Diagram Design
The analysis of user requirements that has been described in the previous subchapter will be the basis of designing the system. The needs analysis will be modeled on a use case diagram. The results of modeling the user needs analysis into a use case diagram for the design of an information system for web-based education learning media for SMAS Wiyata Mandala Balai Batang Tarang can be seen in the image of:

Activity Diagram Design
Activity diagram is a description of the activities for each use case as shown in Figure 1. Activity diagrams in this study consist of: Activity diagram logins, Activity diagrams managing TU data, Activity diagrams manage department data, Activity diagrams manage subject data, Activity diagrams manage class data, Activity diagrams manage student data, Activity diagrams manage teacher data,Activity diagrams manage teaching teacher data, Activity diagrams manage announcements, Activity diagrams access student achievement reports, Activity diagrams manage teaching material data, Activity diagrams manage question bank data, Activity diagrams make homework, Activity diagrams manage meeting schedules, Activity diagram settings, Activity diagram download module, Activity diagrams do the problems, Activity diagrams of doing homework, Chat activity diagram, Activity diagram logout.
Here the authors describe some samples of the results of modeling activity diagrams for the design of a web-based learning media information system for webbased education at SMAS Wiyata Mandala Balai Batang Tarang which can be seen in the following figure.

Activity diagrams login
The business activities of the use case of Figure 1. will be modeled into an activity diagram. The results of modeling business activities from the login use case can be seen in the following figure :

Fig 2. Activity Diagram Login
The picture above explains how to enter the web-based learning learning media information system. First, the user must enter a username and password, then it is validated by the system. If successful, the user can access the main page according to the predetermined access level.

Prototype Design
At this stage, it will be explained about the interface design of web-based learning media at Wiyata Mandala Balai Batang Tarang High School which consists of three (3) access levels, namely Administration, Teachers and Students. The results of the interface design can be seen in the following figure.

A. Design of Administration Access Level Prototype
Administration is a user of the design of web-based learning media at Wiyata Mandala Senior High School Balai Batang Tarang. The results of the interface design for the administrative level are: 1. Administration login display; 2. Administration dashboard display; 3. Display TU data; 4. Display add data TU; 5. Display student data; 6. Display added student data; 7. Data display of majors; 8. Display added data majors; 9. Display of subject data; 10. Display added subject data; 11. Display class data; 12. Display added class data; 13. Display teacher data; 14. Display added teacher data; 15. Display teaching teacher data; 16. Display added teaching teacher data; 17. Display announcements; 18. Display added announcement data; 19. Display student achievement reports.
The following is the author describes some sample displays at the Administration level:

Display login administration
The login page is a user validation checking page. Administration must fill in a username and password in order to access web-based learning. The interface design for the login page (administration) can be seen in the following figure:

Administration dashboard display
The back-end (administrator) special dashboard can be accessed by the Administration if it has passed a series of validations at the login stage. This page is the main menu that provides sub menu processing, which consists of master data (TU data, students, majors, subjects, classes and teachers), managing (teaching teachers and announcements) accessing student achievement reports and logging out. The interface design for the dashboard (administration) can be seen in the following figure:

B. Design of Teacher Access Level Prototype
The teacher is a user of the web-based learning media design at Wiyata Mandala Senior High School Balai Batang Tarang. The results of the interface design for the teacher level are as follows: 1. Teacher login display; 2. Teacher dashboard display; 3. Display teaching material data; 4. Display added teaching material data; 5. Display question bank data; 6. Display add question bank data; 7. Display PR data; 8. Display added PR data; 9. Display meeting schedule data; 10. Display added meeting schedule data; 11. Chat display; 12. Display student achievement reports.
The following is the author describes some sample displays at the Teacher level: Teacher login view.
The login page is a user validation checking page. Teachers must fill in a username and password in order to access web-based learning. The interface design for the login page (teacher) can be seen in the following figure: The following is the author describes some sample displays at the Student level:

Display student login
The student login page is a page that functions as user validation, especially students. Students are required to fill in a username and password in order to access the web-based learning dashboard page.

Software Design
The software design is made using the UML method, including in the form of entity relationship diagrams (ERD), logical record structures (LRS), file specifications, class diagrams, sequence diagrams, and hardware and software specifications.

Entity Relationship Diagram (ERD)
Database design modeling using entity relationship diagrams (ERD) aims to describe the entities, attributes and relationships contained in the web-based learning media information system database at SMAS Wiyata Mandala Balai Batang Tarang. The results of entity relationship diagram (ERD) database design modeling can be seen in the following figure:

Logical Record Structure (LRS)
Based on the Entity relationship diagram (ERD) above, a logical record structure (LRS) can be described which aims to provide a clearer picture of the entities, attributes and relationships that are formed on a web-based learning database. The results of database modeling using a logical record structure (LRS) for the database on the design of a web-based learning media information system at SMAS Wiyata Mandala Balai Batang Tarang can be seen in the following figure. To determine the effectiveness and usefulness of the web-based learning media that has been made in this study, a survey was conducted on both students and teachers at SMAS Wiyata Mandala Balai Batang Tarang. The survey is created using the Google Form application and is given after the user tries to use the media as a whole. This survey aims to determine the level of media acceptance by students and teachers. The following are the items of the survey questions that have been distributed: 1. Does this web media help in the delivery or acceptance of lessons? 2. Be the teaching material presented in accordance with the teaching material? 3. Be the navigation of the web media displayed easy to understand? 4. Be the web media response speed good? 5. Be the information conveyed by the web media clear? 6. Can the use of web media save time? 7. Be web media easy to use? 8. Be the appearance and aesthetics of this web media attractive? 9. Be the home page display on this web media attractive? 10. Be the overall web media good?

IV. CONCLUSION
The results of the analysis that has been carried out based on the web-based learning media of SMAS Wiyata Mandala Balai Batang Tarang which have been designed and made in the form of a prototype, it can be concluded that: this web-based learning media for SMAS Wiyata Mandala Balai Batang Tarang provides facilities that are very helpful for administrators in managing administrative data, majors, subjects, classes, students, teachers, teaching teachers, announcements and access student achievement reports. From the teacher's point of view, the web-based learning media at SMAS Wiyata Mandala Balai Batang Tarang provides facilities that really help teachers to manage teaching materials, question banks, schedule meetings to make homework, chat and access student achievement reports. And in terms of students, the web-based learning media for SMAS Wiyata Mandala Balai Batang Tarang provides a very easy and interesting means of following the learning process such as accessing teaching materials or modules, doing homework, chatting, working on weekly meeting questions according to the provisions made by the teacher. and access the value of the outcome of the meeting.