Development of Web Programming Interactive Learning Multimedia in Vocational Middle School

When the world changed to be hit by the COVID-19 pandemic, many things happened, this outbreak became a big problem and changed many aspects, one of which was the world of education. This requires the readiness of educators and students to adopt technology-based learning. Educators and students are required to continue to develop and improve technology-based literacy. Interactive multimedia is one of the learning media that utilizes technology. The use of multimedia in learning is able to make students think critically, become problem solvers, and are more likely to seek information, and have more hope in learning. Through this research, researchers try to provide alternatives and solutions, namely developing web-based interactive multimedia learning. The research method used is a 4D model which consists of four stages, namely the define, design, develop, and disseminate stages. With web-based multimedia, it is hoped that students can access learning multimedia from anywhere and anytime. As well as the interactive nature and advantages of combining media such as audio, text, video, images, graphics, and sound can attract the attention of students so that they are more interested and active in the learning process.


INTRODUCTION
Technology is an important factor in forming a new learning ecosystem during the covid 19 pandemic. The use of technology makes it easier for the learning process to be done anywhere, anytime, without space and time limits. Covid 19 has changed the learning system from a face-to-face paradigm to a virtual classroom. Putri (2018) states that virtual classes are held without face-toface but are carried out directly between educators and students on a websitebased basis. Dasopang (2017) states that learning is an activity or activity carried out by someone consciously and intentionally. Mayer (2021) states that learning is a change in knowledge caused by experience. This definition involves three parts, the first is that learning involves changes in students, the second is that the changes are known to the students, and the third is changes caused by the experiences of students in the learning environment.
Online learning is divided into synchronous, asynchronous, and dynamic learning, or what is commonly referred to as blended learning. Synchronous learning is virtual learning that requires all learning activities through online classes. Asynchronous learning is another learning process that takes place offline; This learning model requires students and educators to upload and download materials while the internet connection is stable. While dynamic learning can be interpreted as a learning activity that involves synchronous and asynchronous learning models in each process (Basri, Husain, & Modayama, 2020).
This demands the readiness of educators and students to adapt to technology-based learning. Educators and students are required to continue to develop and improve technology-based literacy. Interactive Multimedia is one of the learning media that utilizes technology. The use of multimedia in learning is able to make students think critically, become problem solvers, and are more likely to seek information and have more hope in learning (Munir, 2012).
In the world of education, the notion of learning media proposed by Suharti, Sumardi, & Hanafi (2020) is all tools that are implemented/used by educators with students in the teaching and learning process in order to facilitate learning success. According to Batubara (2020), Effective Learning Media has an important role in determining the success of the information transfer process between two people who are communicating using certain media. Surjono (2017) Stated that multimedia, viewed in terminology, is a combination of various media such as text, images, video, sound, animation, and others which are integrated and synergistic through computers or other electronic equipment to achieve certain goals.
Munir (2012) The term Multimedia in Education provides an overview of a computer system in which there are all media, both text, graphics, audio/sound, animation, and video which are in one software model and describe an educational program. Likewise, Rajendra & Sudana (2017) revealed that multimedia is a combination and integrity between text, graphics, sound, animation, and video. That the application of multimedia technology for education can provide effective results in learning. Visualization of media can facilitate material packaged in multimedia, which includes text, animation, sound, and video according to the desired material (Purba, et al., 2020). Limbong & Simarmata (2020) revealed that multimedia is the use of computer technology that can process and present and combine text, sound, image, animation, audio, and video file types with tools and connections so that users can easily perform navigation, and interact, create or communicate. Cairncross & Mannion (2001) revealed that multimedia can create a highquality learning environment. A key element of multiple media, control over the user's choice of information and interactions, can enhance learning. Interactive Multimedia can be a problem if the needs of students are not taken into account, so the design must be based on the needs, interests of users and be informed about their strengths and weaknesses.
Interactive is a new technology with enormous potential that can change the way of learning, the way to get information and the way to entertain (Ilmiani, Ahmadi, Rahman, & Rahmah, 2020). Interactive Multimedia allows students and educators to control the media or information content displayed, with technological advances, educators and students can make commands to audio files, videos, or both (Rajendra & Sudana, 2017). Fikri & Madona (2018) said that interactive multimedia is a multimedia that is equipped with a controller that can be operated by the user, so that the user can choose anyone for the next process.
According to Fadli & Hakiki (2020) Interactive media are media that are designed to be able to provide feedback quickly as if the media were providing interaction to users, so that users can choose what to expect for the next step. Meanwhile, according to Bates (2015) Multimedia consists of linear multimedia such as video, and interactive multimedia such as learning applications, the web, and the virtual world Learning with interactive learning media aims to facilitate the teaching and learning process and foster creativity and innovation of educators in designing the learning process Saluky (2016). With interactive multimedia, the teaching and learning process is different, because the material that was previously delivered using the monotonous lecture method can now be varied with displays that include text, sound, moving images, and videos.
Interactive Learning Multimedia is one of the media that can be used to deliver learning materials to students very effectively and efficiently (Wibawanto, 2017). Indrawan, Wijoyo, Wiguna, & Wardani (2020) state that if a multimedia application, the use of multimedia is given the ability to control the existing elements, then the multimedia is called interactive multimedia.
Based on the description above, it can be said that interactive learning multimedia is a tool to create more varied learning, whereby utilizing technology now it will be very easy for educators to convey information or learning materials to students.
Web-based learning media is one of the technology-based learning media that can be used as a support for the learning process. (Rhomdani, 2016). Presenting multimedia, storing, processing, and presenting hyperlinks are the main characteristics that become the great potential of web-based learning media (Saluky, 2016).
The State 1 Sajingan Besar Vocational High School (SMK Negeri 1 Sajingan Besar) is located in a border area which is usually better known for its limited social, economic, and educational facilities and infrastructure. But in reality, SMK with a concentration of technology has the facilities and technology to support a complete learning process. This is the initial capital to increase the education level of the people in the border areas.
Internet and computer access provided at SMK Negeri 1 Sajingan Besar can reach all students. However, the use of technology in the learning process has not been fully felt by students. Based on interviews with Software Engineering (RPL) teachers at SMK Negeri 1 Sajingan Besar, the teaching and learning process still uses very conventional methods. Students experience difficulties and are less active, the material is quite complicated-while in practice the material for web programming has not been implemented. Learners become less understanding of the basics of web programming. Learning activities are more dominant using lecture methods and presentations using PowerPoint. Therefore, it is necessary to develop learning media that can increase student learning motivation so that students are enthusiastic about learning materials it is expected to improve learning outcomes. Saragih & Ansi (2020) states that effectiveness is the result to be achieved in the learning process. In this study, the product to be developed is interactive multimedia learning, the effectiveness of which is measured is how students respond to the media and learning outcomes after using the media can be seen whether the media is successful or not applied to students, especially in SMK Negeri 1 Sajingan Besar.

METHODS
The research method is development research, commonly known as Research and Development (RnD). Mills & Gay (2019) argue that (RnD) research needs and develop products to meet those needs. Priyanto (2009) states that development is an engineering process from considerations compiled together to form a product. Development can be said to be an action or deed that makes something better than before. In the world of education, development is very close to the media. Media is a tool in the teaching and learning process. Its usefulness will continue to be improved following the development of the times and the latest technology. In the development of many things that can be done, the researcher defines that development can be done by adding value to the usefulness of a product or increasing technical, theoretical, conceptual, moral, and spiritual abilities with proper training or education. Mills & Gay (2019) argue that the purpose of RnD in education is not to test or test theory but rather to develop effective products for use in schools. Likewise, Mering (2020) stated that the RnD that was tested was the validity of the media; in other words, RnD was the process of standardizing the developed media. In this research plan, the research method emphasizes the results of the designed products and their effectiveness. The orientation of this research development design is a web-based interactive multimedia software product designed as attractive as possible and supports educators and students in controlling the media.
The development model used in this research is the development of the 4D model. The reason for choosing the development model is because it uses a holistic design process that cycles design which is more systematic from high to low level, less fragmented, more creative, more effective, and more efficient. The stages in the 4D Model are Define, Design; Develop, and Disseminate.

Results
The results of the research that has been done in the development of interactive learning multimedia on web programming materials are as follows:

Multimedia Development Design
The process of developing interactive learning multimedia uses a 4-D development model from Thiagarajan, which consists of four stages, namely define, design, develop, and disseminate.
The definition stage starts with the initial final analysis, which aims to identify and determine the basic problems faced in the learning process at SMK Negeri 1 Sajingan Besar, then analyzes students to determine the characteristics. Next is the formulation of the concept, which aims to identify and detail and compile the main materials that will be given to students, namely HTML, CSS, JavaScript, and PHP, into interactive learning multimedia that is developed. After that, the task formulation is carried out, which aims to make assignments consisting of pre-test, post-test, and quizzes that refer to the formulation of the previous concept. Finally, in the definition process, it is to specify learning objectives that are in accordance with basic competencies, namely discussing the basic concepts of web programming, terms in web programming, using a text editor, getting to know HTML, CSS, Javascript, PHP and implementing navigation structures.
In the design stage, the first step in this stage is to prepare a test of reference criteria based on the formulation of the concept and the formulation of tasks carried out at the definition stage. Next, select the media, namely web-based interactive learning multimedia developed with the Visual Studio Code text editor and the Web Browser from Google Chrome. After that, choose the format by designing the appearance and content of the interactive learning multimedia according to the 2013 learning materials and curriculum. Finally, doing the initial design of the product as a prototype of the developed interactive learning multimedia.
The development stage this stage is carried out to produce the final product of interactive learning multimedia through revisions from media experts, material experts, design experts, and developer trials through student responses. Aspects of assessment on media expert validation are related to language, presentation, media effects, and overall appearance. Aspects of assessment on the validation of design experts in the form of titles, materials, material steps, physical media, and aspects of material assessment adapted to web programming materials at SMK Negeri 1 Sajingan Besar.
Validation is carried out after the input and suggestions from the validator are received and then corrected accordingly. In the revision of the media expert, there were four suggestions received, namely. 1. the problem of inappropriate links was fixed by adjusting the link; 2. Sound adjustment, color selection, and navigation buttons are improved by changing the display according to the suggestions given by the validator; 3. customization to mobile devices improved by adding PC or mobile menu options; and 4. The quiz variations on the questions were improved by adding some questions to the media.
For revisions to the material, there is one suggestion that is accepted and immediately corrected, namely to streamline the material so that it is more efficient and also complete. For the revision of the design expert, there are two suggestions, namely 1) the display on the mobile is too small to be corrected by changing the appearance so that it can be easily read, and 2) improving the quiz menu by removing the image on the quiz menu when it is opened via mobile so that the text can be read.
The results of media experts, on the linguistic aspect, obtained an average of 4.05; from the presentation aspect, it was 3.92; from the media effect aspect, it was 4.06, and from the overall appearance aspect, it was 3.57. The results of material experts viewed from the aspect of material suitability are 4.09. The results of design experts, in the title aspect of 4.17, the aspect of the material steps of 4.84, the material aspect of 4.25, and the physical aspect of the media are 4.
The average results after making improvements and suggestions from experts can be recapitulated as follows:

Figure 2 : Average Validity of Multimedia
From the picture above, it is known that the average validity for media experts is 3.9, which is included in the "valid" category (3 < 4), for material experts, is 4.09, it is included in the "very valid" category (4 < 5), and the design expert, namely 4.32, was included in the "very valid" category (4 < 5). The conclusion from the validation results of the experts is that the interactive learning multimedia developed is feasible to be used as a learning medium for students at SMK Negeri 1 Sajingan Besar.
Based on the interactive learning multimedia developer trial, it was found that the highest media aspect was found in 3 assessment items, namely "ease of operation", "easy access to media anywhere," and "accessing media with smartphones, laptops, or computers" with a percentage value of 100%. As for the aspect of media content, the highest percentage of the assessment items is "material suitability" of 87.5%. In the aspect of media language, the highest percentage is found in 2 assessment items, namely "use of language that is easy to understand" and "word writing" by 100%. From these results, the average percentage of student responses in the developer trial was 82.9% with the "positive" criteria. Multimedia that has gone through this stage can be said to be ready for the next stage, namely providing student response questionnaires and tests for learning outcomes after using the interactive multimedia learning.

Multimedia effectiveness
The effectiveness of interactive learning multimedia developed can be seen through the response to interactive learning multimedia and student

Ahli Media
Ahli Materi Ahli Desain learning outcomes after using interactive learning multimedia that has been developed. The details of these activities are as follows: a. Student Response Student responses were carried out to all students of Software Engineering class XI 1 and 2 with a total of 48 students by providing a questionnaire via google form; from the Media Aspect, the assessment item that obtained the highest percentage score was "ease of accessing media through smartphones, laptops, computers" amounted to 86.98%, for the Media Content aspect the assessment item that received the highest percentage value was "images and videos that make it easier to understand the learning material" at 83.33%, for the Media Language Aspect the assessment item that received the highest percentage value was "the use of language easy to understand" by 81.77%. From the results of these responses, the average percentage was obtained with a value of 81.91%, with "positive" criteria. Based on this, it can be concluded that students' response to interactive multimedia learning is outstanding. b. Student Learning Outcomes Student learning outcomes consist of pre-test and post-test. The pre-test and post-test are given to see students' learning outcomes before and after using interactive multimedia learning on web programming materials. Students are given a pre-test before using the developed interactive learning multimedia. After the interactive learning multimedia was revised according to experts and input from trials at the event stage, then the multimedia was given to students of class XI Software Engineering, namely RPL 1 and RPL 2 classes as many as 48 students. After using the interactive learning multimedia develops-test, students were given a post-test to measure the students' knowledge and understanding of the web programming material in the interactive learning multimedia. The data obtained are as follows: From the data above, it can be seen that there are differences in the pretest and post-test results. These differences indicate an increase in learning outcomes before and after using interactive multimedia learning. The average result before using multimedia is 37.33 and after using multimedia is 59.97, 22.64. Based on the student's score, it is known that the score is still below the Minimum Completeness Criteria. This is based on the lack of time for applying learning multimedia so that students do not systematically study the material contained in the interactive learning multimedia.
Based on the T-test to test the difference between the two pre-test and post-test scores of students. The results obtained based on the calculations carried out are the value of sig (2-tailed) of 0.000 <0.05 and the value of t arithmetic > t table, (23.778) > (2.35). It can be said that there are differences in learning outcomes before and after the use of interactive multimedia learning web programming materials. Referring to Effect Size. of 2.83 with the category "Strong Effect."

Discussion
The design and stages in the development of interactive learning multimedia use a 4D model consisting of four stages, namely the define, design, develop, and dissemination stages. In the Define stage, initial analysis, student analysis, concept analysis, and task analysis are carried out. Furthermore, the determination and definition of the specification of learning objectives are carried out. At the Design stage, four activities were carried out, namely Preparation of Reference Test Criteria, Media Selection, Format Selection, and Initial Product Design. In the third stage of Developing there are two activities, namely Expert Assessment and Developer Trial. In this activity prior to validation, the researcher made improvements and suggestions given by the experts. The expert assessment was carried out by media experts with an average result of 3.9 in the "valid" category, material experts with an average result of 4.09 in the "very valid" category and design experts with an average score of 4.32 in the " very valid". Developer trials with an average value of 82.9% with "positive" criteria. The last stage of Disseminate, namely the dissemination stage so that the multimedia that has been developed can be used by students. In essence, interactive learning multimedia in this study can be said to be valid and can be used as a learning media that can assist in the teaching and learning process for educators and students, but it is hoped that further research can include the Create, Read, Update, and Delete (CRUD) feature in the developed multimedia, to make it easier for educators to replace or adjust the content of the material in the multimedia The developed interactive learning multimedia profile can be accessed boldly and captivatingly, on the display a menu will appear to access interactive learning multimedia via a mobile phone or computer. After that, an initial screen will appear containing several menus, namely material, SK KD, Quiz, Help, About, and Download. On the material page, there is web programming material from HTML, CSS, JavaScript, and PHP. The material is given examples and video tutorials to make it easier for students to understand the material. The SK KD page contains SK 2.1 and KD 2.2 which are adapted to the material at SMK Negeri 1 Sajingan Besar. On the quiz page, there are 10 questions that are randomly generated, accompanied by an answer key and the value of the evaluation of the question. The instructions page contains the instructions contained in interactive multimedia learning that was developed to make it easier for students to use it. The about menu contains information and social media for interactive learning multimedia developers. The last menu is the download menu which contains raw files from interactive learning multimedia that can be used by students to access offline. The researcher is aware that the Learning Multimedia developed still has shortcomings in design and material. It is hoped that educators and students will continue to learn in improving the developed media so that in the future there will be more perfect multimedia than this developed interactive learning multimedia.
The effectiveness of the use of interactive learning multimedia is done by looking at the responses of students and student learning outcomes before and after using the learning multimedia that has been developed. The results of the responses from 48 students are with an average value of 81.91% with "positive" criteria. The average student learning outcomes for the pre-test was 37.33 and for the post-test was 59.97, with a difference of 22.64. On average, the results of students are still below the threshold value but based on the results of the T-test that the sig (2-tailed) value is 0.000 < 0.05 and the t value is > t table, (23.778) > (2.35), These results show a significant difference between before and after using interactive multimedia learning on web programming materials. The effect size test was carried out to determine the level of effectiveness in the use of interactive learning multimedia with a value of 2.83 with the "Strong Effect" category. From the test results, it can be said that interactive learning multimedia that can be developed can be categorized as "effective".
In the use of multimedia learning, students must be able to learn independently, to increase the independence of students by providing direct mentoring features as a substitute for educators who will not be fully developed by the media, as well as developing multimedia use features, which make it easier for educators to monitor and find out how much times the students access the learning multimedia. so that in the future multimedia learning can be more efficient.
Based on research conducted by Arif & Mukhaiyar (2020) states that interactive multimedia has more value than other media because it can increase students' motivation, activity, and learning outcomes with multimedia advantages that can provide text, image, video, sound, and animation displays. with presentations that can lead to reciprocal actions with users. As well as research by Santhalia & Sampebatu (2020) states that learning multimedia that is developed effectively can improve students' understanding of the concept of knowledge and research from Santhalia & Sampebatu (2001) with the results that through this media students are able to explain the knowledge being taught. This is proven and in line with this research, that the interactive multimedia developed can be effective in helping the teaching and learning process during a pandemic.

CONCLUSION
This research has succeeded in developing interactive multimedia learning at State Vocational High School 1 Sajingan Besar, using a 4D model consisting of four stages, namely define, design, develop, and disseminate stages. Multimedia can be accessed through any device that is connected to the internet so that it can be used anywhere and anytime. The multimedia display contains several menus, namely material, SK KD, Quiz, Help, About, and Download. The effectiveness of the developed multimedia has been tested by looking at student responses and student learning outcomes along with trials of experts in the field of material, design, and media with good results. so it can be said that the developed multimedia is valid and effective for use by students.

CONFLICT OF INTEREST
Concerning the research, authorship, and publication of this paper, the author(s) reported no potential conflicts of interest.