DEVELOPMENT OF WEB-BASED INTERACTIVE MULTIMEDIA FOR HUMAN RESOURCE MANAGEMENT LEARNING IN VOCATIONAL HIGH SCHOOLS

The purpose of this study is to find out the feasibility and the effectiveness of web-based interactive multimedia called EMMASY. This multimedia was developed for learning automation of the personnel administration in vocational high schools. The type of this research is a research and development using the design of learning multimedia development from Alessi and Trollip which includes planning, design, and development. At the development stage, alpha test was conducted by the experts of media and materials to determine the feasibility followed by beta test by the users to find out the usefulness and summative test to find out the effectiveness. In summative test, the sampling technique was purposive. The data of Interviews and observation were analysed descriptive-qualitatively while the data of questionnaire and tests were analysed descriptivequantitatively. The results showed that EMMASY is very feasible as a learning multimedia with the media-expert's score of 93.12% and the material-expert's score of 93.75%. The result of the usability test showed a score of 79.6% with feasible category. The result of summative test using independent samples t-test showed t-test significance value of 0.008 less than 0.05. In addition, tobs > ttable (9.009 > 2.048) meaning that there is significant mean score difference of the students' knowledge in experimental and control classes; so EMMASY is considered effective to improve students' understanding of human-resource-management materials.

negara.Based on the preliminary observation, the competencies studied in the productive subjects by the students and then most often done in internship are administrations, from the process of making, receiving, collecting, datacollection and copying, and documenting data /information, and others obtained in the work unit.In fact, during the learning process at schools, students find it difficult to understand productive subjects.
Based on the results of the preliminary observation on August 10, 2017, it was found that one of the productive subjects considered difficult to be understood is personnel administration.In terms of instructional media used by the teachers, they have been combined but limited only to theoretical learning in the classroom.Then, viewed from the facet of the learning method in discussion, the media were quite interesting for the students, but they often found the information through internet so that they felt the materials were not in accordance with the test questions.In addition, during the internship program, they said that they got the task of organizing office personnel documents.The task is different from what is taught at schools because students do not practice or have simulation related to the flow of human resource management in the work-field.In fact, practical learning for vocational students is very important so that they easily understand the theory to master the competence as expressed by (Damarjati (2016) on the official website of www.psmk.kemdikbud.go.id that practical learning for vocational students is important for the assessment of their success that must be "Hands-on" or in accordance with performance in the work-field.
The results of the preliminary survey indicate that the students of class XI of the Office Administration (XI AP) in SMK Negeri 1 Bawang still find it difficult to understand the personnel administration materials.A total of 57 from 81 students representing the XI AP 1, XI AP 2 and XI AP 3 classes stated that personnel administration materials are difficult to understand because the subject matter is related to the government regulation on employment and the articles that must be memorized.Then, the results of students' needs-analysis showed that 80 of 81 students stated that the development of instructional media on personnel administration is needed so that the class is not boring and the materials are more-easily under-302 − Jurnal Pendidikan Vokasi Volume 8, No 3, November 2018 stood.A total of 78 from 81 students agreed that the developed media can be used to practice in personnel administration learning.According to them, if the learning is done by direct practice such as making the office personnel documents, they will be more familiar with the flow of human resource management, not only memorize its provisions of the articles in the government regulation.In line with Drake, Ahern, Roche, & Winner (2014, p. 178), teaching and learning activities that include group collaboration, task visualization, and simulation through laptops, internet, and hands-on experiments are the elements that can enrich students' understanding.
Based on the result of the interview with the teacher of personnel administration subject, in teaching for 3 years, learning has been conducted more by memorizing the articles of the Government Regulation on Civil Servants.It makes the students difficult to understand the materials because they do not practice directly.In fact, the materials of personnel administration are about procedural knowledge.Procedural knowledge is an understanding of how to apply learned concepts in problem-solving situations Wolfer (2000, p. 2).The teacher also stated that in the latest curriculum structure, there is a competency unit related to operating software applications.Therefore, it is very necessary that the learning media can be used for student practice so that they do not get bored to learn personnel administration.
Based on the result of the interview with the teacher of personnel administration subject, there is a gap, in which the basic competencies that must be mastered by the students, have not been supported with adequate learning media so that the use of ICT media is needed.As revealed by Kim (2011, p. 1)), students can not understand theories and concepts clearly when the technology approach to practice in learning is lacking.The concept of learning in vocational high schools requires the latest facilities for practice.The necessary facilities can be the innovation in the development of learning media.Teachers must understand how to teach using classroom learning media that can trigger students' interests (Pate, 2016, p. 91).
The media developed in the subject of personnel administration in vocational high schools can be web-based interactive learning multimedia used as simulation media in applying the automation of human-resource-mana-gement.The cognitive learning multimedia theory developed by (Mayer & Moreno (2003, p. 44) mentions that the content displayed in the learning multimedia will affect the thinking process of the students which then strongly influences their long-term understanding on the materials being studied.Web-based learning media will make them more independent in building complex knowledge by linking scientific ideas and will facilitate teachers in monitoring the learning activities of each student (Petra, Jaidin, Perera, & Linn, 2016, p. 263).Web-based multimedia can be used for simulation in learning which will facilitate the students in understanding the materials.
The result of the research by Nkhoma et al. (2014, p. 45) revealed that learning with game simulation has positive effects on cognitive learning outcomes.Trieb (2016, p. 301) also suggested that web-based applications can build students' interests and can strongly enrich their interactive communication skills.The advantage of the use of web-based learning media as simulation media in learning will be in accordance with the characteristics of the complex human-resource-management materials which require database and data integration to produce documents.Today's software to develop webs is RDBMS (Relational Database Management System).Utilizing RDB can make the software more interactive and make it easier to organize different types of data formats (Nigrelli et al., 2013, p. 101).
The characteristics of basic competencies in personnel administration in accordance with the Curriculum 2013 include: grouping employment policies, making office personnel documents (in procurement, transfers, employee positions, leaves, performance evaluation, and the dismissal of employees), and managing individual employee documents.The basic competecies containing procedural knowledge are ultimately expected to be practised, and students can understand the flow by applying web-based interactive multimedia on the automated human-resource-management. The use of multimedia together with case-based learning approaches improves overall students' performances (Bider, Henkel, Kowalski & Perjons, 2015, p. 130).The use of technology in learning will make students more easily understand the taught materials and support skills acquisition in accordance with the expected competencies (Hassan, Puteh, & Buhari, 2015, p. 324).

303
A research and development of webbased interactive multimedia on the competency of Office Administration in vocational high schools was conducted by Ashari (2015, p. 92) who developed a computerized simulation learning media on archiving called Manual and Electronic Recordkeeping Simulator (M.E.R.S).The difference between his research and the current research is that the media developed in this study is used for simulation learning media of personnel administration so that there are differences in the materials and the variation of simulation features tailored to the needs of the users, teachers and students.
A research-and-development is closely related to the use of Information and Communication Technology (ICT).The utilization of technology on some media can support collaboration activities between teachers and students so that students can be more active and interactive in the learning process.Based on the grand theory of multimedia learning, dualcoding theory (Paivio, 2006, p. 2), Schüler, Scheiter, & van Genuchten (2011, p. 210), multimedia in the forms of images and texts bring up different representations pointing to the same information in long-term memory.As a result, the information is more likely to be available and accessible when compared to text-only.According to this hypothesis, the effect of multimedia in learning depends on the students' access to information in long-term memory.Meanwhile, Clark (1994, p. 27) stated that media delivery (web-based or face-toface) is less important than learning methods in developing declarative and procedural knowledge.On the other hand, Bruno, Silva, Silva, & Teixeirav (2012, p. 201) found that the use of webs as learning media platforms can be a solution for storing and sharing learning materials more easily because of the centralized information.
Based on the above description, the researcher developed an interactive learning multimedia as a solution to the problems found in the learning of personnel administration.The purpose of this research and development is to find out the feasibility of EMMASY as a simulation learning media on the automation of human-resource management to improve students' understanding of the personnel administration materials in terms of procedural knowledge.The second objective is to test the effectiveness of EMMASY as a simulation learning media to improve students' understanding of personnel administration materials in terms of procedural knowledge.

RESEARCH METHOD
This research is a Research and Development (R&D), which aims to produce a product that can be used to fix and improve the quality of education, covering various aspects of education.In this study, the researcher developed a learning media product in the form of interactive multimedia on the automation of human-resource management called EMMA-SY to improve students' understanding on human-resource materials in class XI of Office Administration.With regard to interactive multimedia, Alessi & Trollip (2001, pp. 410-413)  The data of the study were collected using the following techniques: interview, observation, questionnaire, and tests.Interview was used to obtain initial information about the problems faced by the teacher and the students related to human-resource-management learning.Observation was undertaken to observe the learning process of human-resource administration related to the media used so far.In addition, questionnaire used in this research was Likert-scale questionnaire.It was used for the validation of the experts of materials and media at the time of the alpha test.It was also used to assess the students' responses in the beta test on the use of the developed EMMASY interactive multimedia.Further, the tests used during summative test were pre-test and post-test to find out the effectiveness of EMMASY interactive multimedia as simulation learning media that can help the students understand the humanresource-management materials in terms of procedural knowledge.

Defining Fields or Scopes
Determining the goal of producing interactive multimedia product of EMMASY with a focus on human-resource-management materials in class XI of Office Administration Expertise Competence in the vocational high school.

Defining Students' Characteristics
The students of Class XI of Office Administration at SMK 1 Bawang consist of 108 students with the division of 5 males and 103 females.Their knowledge in ICT has been very good.This is because they have learned Digital Simulation and Office Technology accompanied by the advances in technology and internet.Most students have got e-mails and some social media accounts like Facebook, Twitter, and others.Based on these characteristics, they need up-to-date learning media in line with technological developments in businesses and industries.

Creating Planning Documents
1) Preparing human-resource-management materials and matching the personnel administration materials and the sources with the syllabus to process accordingly.
2) Collecting and determining resources to complete the required documents, such as video tutorials, audio, and animations.
3) Summarizing lengthy and complicated materials so that the students can moreeasily understand.

Supporting Resources
Analysing the supporting resources conducted on August 10, 2017.Based on the obtained data during the preliminary survey of the computer laboratory, it was found that the facilities owned by the school to support the lesson were very adequate.These facilities include a computer lab, internet network, wi-fi hotspot, and LCD projector.The availability of wi-fi hotspot helps the students to access internet in the school environment.

Brainstorming
Brainstorming was done to get ideas.This was done to determine the materials to be included in the web-based EMMASY multimedia.Brainstorming was conducted by discussing with the teacher and the advisers related to the material content planned in the making of the multimedia.

Design
This stage was carried out by analysing the concepts and tasks related to the materials, translating the results of needs and material analysis to produce the design that is considered to represent the overall needs, as well as doing evaluation and revision in every opportunity on all aspects that need to be evaluated and revised.After translating the results of needs and material analysis, the researcher made the blueprint of EMMASY interactive multimedia design.The system design stage is the following stage of the data and information needs analysis phase by designing flowcharts and storyboards.In the blue-print of EMMASY application design, especially in the simulation section, there are flowcharts consisting of Usecase Diagram design.

Development
At this stage, EMMASY was developed based on the design that had been prepared.The process comprises of:

Preparing Texts
The first stage that researcher did on development was to prepare the texts.The preparation of the texts in question was to prepare all the materials and the data that would be inserted into the multimedia according to the storyboard.The data are in the forms of materials, titles, menus, and everything that support the texts (materials and questions) in the making of EMMASY multimedia.The materials to be displayed are referenced from the curriculum, syllabus, and lesson plan.The assessment of the syllabus and the lesson plan used in this multimedia development research was the result of collaboration with the teacher of personnel administration subject in SMK Negeri 1 Bawang Banjarnegara with the basic competence of Applying the Automation of Human Resource Management.Then, the next step is to determine and collect the materials from the labor law and the module on personnel administration materials after the design stage of multimedia learning as a reference in preparing the materials of learning multimedia on applying automation of human-resource management.

Creating dismissal and retirement documents using computer applications
Source: The Syllabus of Human-resourcemanagement Subject

Making Web-based EMMASY
After collecting the materials, the researcher analysed the concept related to the materials on the multimedia that would be developed and collected the materials in the forms of texts, images, and animations from various sources.Next was describing the product prototype in more details with regard to the features of the product ranging from the functions of the developed multimedia, materials, simulations, evaluation features, and other information related to the developed multimedia.The product developed is interactive webbased multimedia called EMMASY which stands for Employee Management Learning System.This product has the following spesifications:

Software
The software used in the development of EMMASY are Sublime Text 3 as text editor, LAMPP as localhost server, Phpmyadmin as database processor, Inkscape and GIMP for image and design processing, and Mozilla Firefox browser version 39, and the latest Google Chrome used to perform EMMASY trials.

Programming Language
The programming language applications used in making and developing EMMASY were HTML5, CSS3, PHP5, Javascript, JQuery, and MySQL.HTML5, CSS3, Javascript, and JQuery were used as client-sides while PHP5 and MySQL were used as serversides and as database processing.The User Interface (UI) and User Experience (UX) used Bootstrap framework library and other libraries such as fastclick, sweetalert, ionicon, glyphicon, and animate plug-in.

Hardware
The hardware used in the making and the development of interactive web-based EMM-ASY prototype are two laptops with minimum of 2GB RAM, Intel Core i3 Processor with Ubuntu 17.04 Linux Operating System, and Windows 10.These devices were used to build, design, develop, and test EMMASY on different operating systems.

Multimedia Content
After collecting the materials, the researcher analysed the concept related to the materials on the multimedia that would be developed and collected the materials in the 306 − Jurnal Pendidikan Vokasi Volume 8, No 3, November 2018 forms of texts, images, and animations from various sources.Next was describing the product prototype in more details with regard to the features of the product ranging from the functions of the developed multimedia, materials, simulations, evaluation features, and other information related to the developed multimedia.EMMASY Multimedia is accessible on the website, http://emmasy.smkn1bawang.sch.id.The product prototype is divided into three main parts:

Materials
The materials can be uploaded by the teacher of human-resource-management subject who gets verification from the administrator.The uploaded file formats are video, pdf, images (jpeg/PNG), and doc.Students can read and download the files of the materials.

Simulation
In the simulation section, there are features to apply the automation of humanresource management, ranging from recruitment, selection, performance evaluation, transfers and promotion, the application of leaves, and the dismissal of employees.

Evaluation
In the evaluation phase, teachers can upload multiple-choice questions to measure students' understanding at the end of the simulation session of human-resource administration.There are three parts in this phase -pretest, exercises, and post-test.To start the simulation, the students must first do the pre-test, to measure the initial knowledge before using EMMASY.

Input Media
The media to be included into the website come from various sources including the materials in the forms of pdf, doc, and video file formats.The materials with doc and pdf formats were uploaded by the teachers.The uploaded videos come from the works of the Office Administration students, YouTube.com, and internet.On the other hand, the animation files obtained from the internet have been modified using GoAnimate to be more effective and communicative.The questions on the evaluation menu were prepared based on the questions used by the teacher of personnel administration subject.The questions on the evaluation menu were prepared based on the questions used by the teacher of personnel administration subject.

Combining the Components
The Components collected previously were arranged and combined to make the display of web-based multimedia more interactive and systematic.The Components collected previously were arranged and combined to make the display of web-based multimedia more interactive and systematic.

Trials
The design of this product test refers to the design of the development trial developed by Alessi and Trollip (2001, pp. 548-550) located at the development stage.Trial design was conducted to determine the weaknesses of the product produced and to determine the level of its effectiveness in the learning process.Formative test design was carried out through two stages of testing, namely alpha test and beta test.Both tests were to determine the feasibility of the developed media.The required steps for the formative test are as follows:

Alpha Test
Alpha test is the ultimate test for testing media product performed by competent experts.It was done by the material and media experts to validate the product (formative evaluation).The material experts consist of practitioners, 1 teacher of Personnel Administration and 1 lecturer of Human Resource Management (MSDM).The media experts consist of 1 information-system practitioner and 1 academician of educational technology.The alpha test was done by testing the product by an expert, followed by the first revision process of the developed media.Source: The date processed in 2018 Based on the results of the learning multimedia assessment by media experts, the feasi-bility percentage score from the aspect of media display is 91.87% and of the software is 94.37% so that the average feasibility percentage is 93.12%.The scores indicate that EMM-ASY multimedia is categorized as very feasible Source: The data processed in 2018 Based on the assessment table of multimedia learning by material experts, the feasibility percentage of the trustworthiness is 96.87%, of the material depth is 90.62%, of the newness aspect is 93.75%, and of the readability aspect is 93.75% so that the average feasibility percentage is 93.75%.The scores indicate that the material feasibility category of EMMASY is very feasible.

Beta Test
Beta test is a revised final product test according to the experts' recommendations on the alpha test.It was conducted by performing a limited test to determine the feasibility of using EMMASY interactive multimedia objectively by making a questionnaire about user satisfaction in terms of usability aspect.In beta test, a sample of 9 students with high, medium, and low ability levels was selected based on the teacher's recommendation.The beta test on learning media was carried out after the feasibility test by the media and material experts.It was conducted by filling out the questionnaires by the students after trying to use EMMASY learning media.There were 9 students consisting of three students with high ability, three with moderate ability, and the others with low ability.The questionnaire consists of 20 questions in the ISO standard 9241: 11 (ISO/IEC, 2011) and Rubin & Chisnell (2008, pp. 4-5).The result of the beta test by students are shown in Table 4.
The results of the students' evaluation on EMMASY web-based multimedia show that from 20 questions, the score obtained is 573 from 720 showing the percentage of 79.6% with "feasible" category.Based on the score, it can be concluded that the web-based EMMASY interactive multimedia is feasible and and can be used as a medium of personnel administration learning on the basic competence of Making Office Personnel Documents using Com-puter Applications in Vocational High Schools of Office Administration Expertise Competence.Source: The data processed in 2018

Summative Test
Summative test was conducted in the form of field test with pretest-posttest design.The data collection instrument used to determine the effectiveness of this product was a written test of multiple-choices with the questions about procedural knowledge to measure the students' levels of understanding.The ready-to-use media were then implemented to the students to find out the differences caused by the use of web-based multimedia.The summative test was conducted on 30 students selected purposively (purposive sampling) by looking at the differences in the levels of understanding of the materials viewed from the test results before and after the treatment using EMMASY web-based simulation learning multimedia.The observed class was class XI of Office Administrative.The data were analysed using quantitative-descriptive statistical test technique and prerequisite test consisting of several types of tests such as normality and homogeneity tests.T-test was used for Hypothesis testing.
The final product testing was done through summative test to find out the effectiveness of EMMASY multimedia using pretest-posttest design in the form of multiplechoice questions about the procedural knowledge of human-resource administration.The effectiveness test was carried out using onegroup-pretest-posttest design.The two groups divided into the experimental and control groups were first given a pre-test to determine the initial condition, whether there is a difference.Based on the results of the test, different treatments were given and ended with a posttest to measure the students' understanding from both groups.
The results of the summative test through t-test (independent samples test) in the pre-test between the experimental and the control classes show that the significance value of ttest is 0.312 greater than 0.05 and tobs < ttable (1019 < 2.048).Thus, H0 is accepted.It shows that there is no significant difference in the mean of the students' learning outcomes in the pretest between experimental and control classes.Then, treatment was given to the experimental class using EMMASY multimedia in personnel administration learning while usual discussion method was given to the control class without EMMASY multimedia.The results of post-test show that the average score of the students in the experimental class is 89.67 while that in the control class is 85.91.Based on these results, the learning outcome of the experimental class is superior to that of the control class.The students' ability in achieving the learning outcomes has already represented the understanding of the materials being studied since multiple-choice questions are about procedural knowledge.As described by Piontek (2008, p. 3), multiple-choice questions can measure a wide range of knowledge, including students' understanding of terminology, facts, principles, methods, and procedures, as well as their ability to apply, interpret and justify.
The average knowledge score of the students from the experimental class in pretest is 56.92.After the treatment with simulation learning using EMMASY, the average score increases to 89.67.These results indicate that there is an increase in students' learning outcomes in terms of the knowledge score in the subject of personnel administration after using EMMA-SY multimedia in learning.The scores of the students' knowledge in the experimental class are greater than those in the control class because of the treatment using EMMASY as a simulation learning media of personnel administration.It shows that EMMASY multimedia is effective to be used as simulation media of personnel administration learning to improve students' understanding in terms of procedural knowledge.
Volume 8, No 3, November 2018 EMMASY multimedia is made webbased to make it flexible and accessible anywhere either using smartphone or laptop so that it is easier for students to learn the materials because the ease of use of the media selected can support the effectiveness of learning.As mentioned by Aloraini (2012, p. 76), the use of multimedia programs can provide more effective and more influential experiments than the use of technology separately in learning.Interactive learning media can lead to two-way communication between teachers and students which can increase the students' activities and influence their learning outcomes.The findings of this study are supported by previous research results that interactive-technology-based learning media have significant effect to improve students' learning outcomes (Aloraini, 2012;Prastiyo, Djohar, & Purnawan, 2018;Wibisono, Baedowi, & Indrawati, 2017).

CONCLUSIONS
Based on the results of the research and the discussions, it can be concluded that EM-MASY interactive multimedia is feasible and effective for use as simulation media of personnel administration learning.The effectiveness is based on the increasing scores of the students' knowledge.The average score of the students' knowledge in pre-test (before using EMMASY) is 56.92 and that in post-test (after using EMMASY) increases to 89.67.The increase is supported by the t-test result between the experimental and the control classes which shows a significant difference with the significance value of 0.008 < 0.05.The average knowledge score of the experimental class is 89.67 while that of the control class is 85.91.Based on the difference of the knowledge scores after the experimental class received treatment in the form of the use of EMMASY interactive multimedia as a simulation media in personnel administration learning, it can be concluded that the students' understanding in the experimental class is better viewed from the knowledge score compared to the students' understanding in the control class.
The development of web-based EMMA-SY interactive multimedia is feasible to be used as a simulation media in personnel administration learning and is effective to improve students' understanding of personnel administration materials.The existence of web-based EMMASY facilitates students in obtaining learning materials, attracts them to learn it, and allows them to simulate as the personnel administration staff who works and performs the process of human resource management activities from beginning to end.
This research and development has produced findings that the development of web-based EMMASY interactive multimedia can determine students' understanding and provide insight and media references for teachers.The design of learning can be made by the teacher in accordance with the existing developments, one of which is the development of technology.Learning design with media based on contemporary technology is more effective to trigger students' enthusiasm and motivation as stated by Surjono (2017, p. 48).Based on this explanation, EMMASY can be used as a simulation medium for teachers in personnel administration learning and effective to improve students' understanding of personnel administration materials based on the human resource management system.
Based on the result of the effectiveness test of EMMASY web-based interactive multimedia as simulation media of personnel administration learning in the vocational high school, it is expected that in the future the media can be developed again for other schools with other basic competence scopes that have not been developed in this study.
Figure 1.The stages of development

Table 1 .
The Developed Basic Competencies

Table 2 .
The Results of Media Trial

Table 3 .
Results of Material Experts' Analyses

Table 4 .
The Results of Beta-Test Analyses