ENGLISH REVIEW: Journal of English Education p-ISSN 2301-7554, e-ISSN 2541-3643 Volume 11, Issue 2, June 2023 https://journal.uniku.ac.id/index.php/ERJEE 451 ADVANCING ENGLISH LANGUAGE LEARNING: INNOVATIONS IN WEB-BASED LEARNING MEDIA DEVELOPMENT Siti Maesyaroh Faculty of Computer Science, Informatics Engineering Study Program, Universitas Kuningan, Indonesia Email :siti.maesyaroh@uniku.ac.id Nida Amalia Asikin Department of English Education, Universitas Kuningan, Indonesia Email: nida.amalia.asikin@uniku.ac.id Daswa Faculty of Computer Science, Informatics Engineering Study Program, Universitas Kuningan, Indonesia Email: daswa@uniku.ac.id APA Citation: Maesyaroh, S., Asikin, N. D., & Daswa. (2023). Advancing English language learning: Innovations in web-based learning media development. English Review: Journal of English Education, 11(2), 451-460. https://doi.org/10.25134/erjee.v11i2.7468 Received: 09-02-2023 Accepted: 29-04-2023 Published: 30-06-2023 INTRODUCTION Currently, there is a growing demand for proficiency in English. In addition, there is a need for interactive and engaging learning media to assist students in improving their English language skills (Januarisman and Ghufron; 2016). EFL learners need to possess the skill to effectively express their intended meaning using spoken and written language. Teachers evaluate this competence by employing various techniques to assess the learners' speaking and writing capabilities, with the goal of achieving a level of proficiency comparable to that of native speakers (Asikin, 2017). In the 4.0 era, integrated learning media is crucial in creating an effective teaching and learning environment, especially for those learning English as a second language. The utilization of technology in the learning process has been further reinforced by the COVID-19 pandemic. SMP Negeri 1 Garawangi is one of the schools that still implements a teacher-focused approach to learning, where the teacher delivers instruction using traditional materials such as books or PowerPoint and utilizes paper-based assessments to evaluate students. However, this learning method presents a few problems. Firstly, the limited two-hour duration of school sessions may result in suboptimal learning outcomes. Secondly, conventional teaching methods can bore students and reduce their interest in learning (Maesyaroh, 2019). Lastly, using books or paper for evaluation can be time-consuming. Considering these challenges, it is essential for teachers to integrate education with digital technology (Yuniarti, Asikin, and Thamrin: 2021). In the modern era of digital advancements, teachers have an essential role that extends beyond the simple transmission of information. Their responsibilities encompass designing, organizing, and coordinating various learning activities within the classroom setting (Darsih & Asikin, 2020). Thus, it is necessary to develop interactive and engaging learning media for junior high school students to learn English, utilizing information technology and learning applications to achieve Abstract : SMP Negeri 1 Garawangi Kuningan is a junior high school that employs traditional methods of English learning, such as books and paper, for evaluation purposes. However, this manual learning system presents numerous issues, including longer assessment processes, susceptibility to damage, and a teacher- centered approach that may bore students and reduce their interest in learning. Consequently, there is a need for innovative web-based English learning media for junior high school students to facilitate learning and comprehension outside of school hours. This research aimed to produce an English learning application that is both engaging and easy to use. A qualitative descriptive method was utilized, based on direct observation and theoretical learning media principles. The development of the system utilized the Extreme Programming method, which consists of four stages: planning, design, coding, and testing. The outcome of the study reveals that the English learning application was widely accepted and utilized by students to learn English after school hours. Keywords: English; extreme programming; learning media application; web. Siti Maesyaroh, Nida Amalia Asikin, & Daswa Advancing English language learning: Innovations in web-based learning media development 452 optimal learning outcomes. The strategy referred to as Technology-Enhanced Language Learning (TELL) strives to improve the effectiveness of teaching and learning by integrating technology into the process (Kirkwood & Price, 2013). This research presents an innovative approach to learning media development by creating a mobile phone or personal computer application. This application is designed to enable students to learn English conveniently outside of school hours and assess their progress through evaluations. The study's findings are significant for the future of language learning as they offer an insight into how technology can be harnessed to improve education. Research in the field of language learning has shown that the use of technology can enhance language acquisition, improve student engagement, and promote autonomous learning (Kukulska-Hulme, 2016). Moreover, mobile learning applications have become increasingly popular in recent years due to their accessibility, flexibility, and convenience (Traxler, 2016). Additionally, the integration of technology in language education has been found to promote the development of various skills, including critical thinking, communication, and digital literacy (Nikolov & Mihaljević Djigunović, 2019). Furthermore, research has shown that technology- enhanced language learning can improve language proficiency, particularly in the areas of vocabulary, grammar, and pronunciation (Levy & Stockwell, 2006). Thus, the development of a mobile learning application for English language education, as demonstrated in this study, is an effective means of improving language learning outcomes. It allows for autonomous and interactive learning, provides students with opportunities to practice and develop language skills beyond the traditional classroom setting, and promotes the acquisition of digital literacy skills. Furthermore, the advantages of using learning media applications have been demonstrated in various previous studies. For example, a study conducted by Erwin and Anik (2016) titled "Development of Web-Based Learning Media for Natural Science Subjects for Class VII Students" used the Borg & Gall research method and the Alessi & Trollip development method. The research included preliminary research and information gathering, planning, developing preliminary form of product, initial field trial, revision on the main product, main field testing, revision of field trial products, operational field testing, revision of the final product, and product dissemination and implementation. The results showed that the web-based science learning media was effective in improving student learning outcomes based on pretest and posttest evaluation data. Another study conducted by Heni and Hary (2017) titled "Development of Web-Based Learning Media to Measure Student Learning Outcomes in Basic Computer Network Subjects Computer and Network Engineering Expertise Program" used the ADDIE development model, which involves the analyze, design, development, implementation, and evaluation stages. The results of the study revealed a significant increase in the average score from the pre-test to the post-test, indicating that the developed web-based learning media efficiently improved student learning outcomes in the Basic Network subject. In addition, Yogi and Ahmad (2021) conducted a study titled "Development of Web-Based Learning Media to Improve Student Skills in Basic Web Programming Courses at STKIP Muhammadiyah Muara Bungo" using the Research and Development with 4D development method, which includes the Define, Design, Develop, and Disseminate stages. The study found that web-based learning media can be an effective supporting medium for the learning process and evaluating learning, which ultimately improves student learning outcomes (Putra and Ridoh, 2021). Therefore, it can be concluded that web-based learning media can significantly contribute to improving student learning outcomes and can be utilized as a supportive tool in the learning process. This research is built on the foundation of ten previous studies that focus on web-based English learning media. Firstly, Hamdan, Nawfal, and AlShammari (2018) found that gamification significantly improves English language learning outcomes. Secondly, Zheng and Cheng (2018) emphasized the importance of personalization in web-based English learning media development and its positive impact on learner motivation and engagement. Furthermore, Chen et al. (2018) explored the potential of AI in providing personalized feedback and content recommendations. The fourth study by Stockwell and Hubbard (2013) reviewed the benefits and challenges of mobile learning in web-based English learning media development. Kukulska- Hulme and Viberg (2018) examined the use of augmented reality in web-based English learning media development and its potential to create immersive learning experiences. Additionally, ENGLISH REVIEW: Journal of English Education p-ISSN 2301-7554, e-ISSN 2541-3643 Volume 11, Issue 2, June 2023 https://journal.uniku.ac.id/index.php/ERJEE 453 Chen and Zhou (2018) reviewed the use of adaptive learning and its potential to improve learning outcomes. The role of online communities in web-based English learning media development and their impact on learner motivation and engagement were explored by Li and Li (2018). Wang et al. (2018) examined the impact of social media on web-based English learning media development and its potential to facilitate collaborative learning and peer-to-peer interactions among learners. Elola and Oskoz (2018) discussed the potential of virtual worlds and their impact on learner engagement and motivation. Lastly, Thomas (2016) provided an overview of the latest trends in web-based English learning media development, including gamification, personalization, and adaptive learning, and their impact on learner outcomes. In conclusion, the field of web-based English learning media development is continuously evolving, and the ten research studies highlighted above shed light on the latest trends and technologies used in this field. These findings can guide the design and development of effective web-based English learning media that cater to the diverse needs and learning styles of learners, leading to improved learning outcomes. METHOD The research method used in this study is a qualitative descriptive approach, which involved data gathered from direct observation and literature studies on the application of English learning media. This methodology is in line with the framework proposed by Creswell and Creswell (2018). To ensure the research process was well- structured, a flowchart was created to illustrate the various stages involved in the study. By following this workflow, the research was conducted systematically, leading to reliable and valid findings. A visual representation of the research stages is presented in Figure 1. Figure 1. Research stages The research utilizes the extreme programming system development method, which falls under the category of agile software development approaches. Extreme programming is an object- oriented software engineering process that emphasizes teamwork among small to medium- sized teams. This approach is particularly suited for projects with rapidly changing requirements, as it provides flexibility and adaptability (Supriyatna, 2018). Figure 2. Extreme programming method (Supriyatna, 2018) The extreme programming (XP) method comprises four stages that must be completed for system development. The first stage is Planning, which involves identifying problems, analyzing needs, and setting a development schedule. The second stage is Design, which includes modeling activities such as system modeling, architectural modeling, and database modeling using Unified Modeling Language (UML) and class diagrams. The third stage is Coding, which involves implementing the modeling into a user interface using the structured PHP programming language and MySQL for database management. The final Siti Maesyaroh, Nida Amalia Asikin, & Daswa Advancing English language learning: Innovations in web-based learning media development 454 stage is Testing, in which the system is tested for errors during application and to ensure it meets user needs. Blackbox testing method is used in this study. To collect the data needed for this study, the author utilized several methods. Direct observation was made of class VII students at SMP Negeri 1 Garawangi during the process of learning English, from the delivery of learning materials to evaluation. Literature review was conducted by studying relevant documents, journals, and literature related to online learning media. Interviews were also conducted with English teachers to obtain data relevant to the research object. By utilizing these methods, problems can be identified and addressed throughout the research process, leading to more reliable results. RESULTS AND DISCUSSION In this study, the main outcome of the research is a web-based learning media application for junior high school students. The development process of the application was carried out using the Extreme Programming method. The following are the series of activities that were conducted to create the application: Planning The first stage of the system development process was planning. In this stage, the author identified the problems and prepared the schedule for the development of the learning media application. Moreover, the author selected the appropriate tools and software to be used in building the application. The hardware and software used in the application development process were documented and presented in Table 1: Table 1. Application development requirements Hardware Software a. Laptop Processor Core i3 b. RAM 8GB c. HDD 120GB d. Mouse e. Printers a. Microsoft Windows 11 b. Adobe Dreamweaver CS5 c. XAMPP 1.8.6 d. Google Chrome For hardware and software used in implementing the application can be seen in table 2. Table 2. Application implementation needs No. Need Server Computer Client computer 1. Hardware PC Processor Core i5 10GB of RAM HDD 500GB Mouse PC Processor Core i3 RAM 8GB HDD 240GB Mouse Keyboards Keyboards 21' LCD Monitors Printers 21' LCD Monitors Printers 2. Software Windows 10 Xampp 1.8.6 Google Chrome Windows 10 Google Chrome Based on observations and interviews, the study identified the following problems in English learning: (1) Limited time in school for English instruction resulting in suboptimal student outcomes. (2) Traditional methods using books or PowerPoint contribute to student boredom and disinterest. (3) Evaluation procedures still involve books and paper, causing delays in the assessment process. The schedule for implementing web-based English learning media application development for junior high school students can be seen in table 3. Table 3. System development schedule Design To design the learning media, the author starts with system modeling, architectural modeling, and system modeling, all of which use the Unified Modeling Language (UML). The design of the system requirements and business processes for the English learning media application is depicted using a use case diagram, which is shown in Figure 3. Figure 3. Use case diagrams ENGLISH REVIEW: Journal of English Education p-ISSN 2301-7554, e-ISSN 2541-3643 Volume 11, Issue 2, June 2023 https://journal.uniku.ac.id/index.php/ERJEE 455 Based on the use case diagram, use case scenarios can be created as follows: Table 4. Use case scenarios for doing exercises Use Case Name UC03 Actor Student Purpose Displays questions randomly and generates the correct number of questions Preconditions The actor has entered the name and is on the main page of the system Scenario Actor System 1. Students work on English practice questions 2. The questions that are worked on consist of several types including, multiple choice, essay, matching answers and completing sentences that are displayed randomly. 3. Students answer practice questions and press the Save button. 4. The system will match the answers with the answer keys and save the number of correct questions in the database. Coding After completing the design stage, the next step is to start coding, which involves implementing the models that have been created into a user interface using a programming language. In this study, the application was developed using the PHP programming language and the CodeIgniter framework. The coding phase resulted in the creation of an English language learning media application for junior high school students. Once the application is launched, the main page will be displayed as the first screen. Figure 4. Main page Figure 4 is the main page when the user runs the application, where on that page there is a main menu that can be accessed by the user, namely Learning English, Exams, and Learning Materials. On the Exam menu there is a feature for practicing English questions, where the user is asked to enter a name before working on the questions. Figure 5. Name input form Figure 5 shows the input form for entering a name before working on the questions. This application displays several types of questions such as multiple choice, matching, completing, and essay which can be seen in Figure 6. Figure 6. English question page After working on the questions, the user can see the value and questions that were answered correctly on the Exam Result menu with a display like in Figure 7. Siti Maesyaroh, Nida Amalia Asikin, & Daswa Advancing English language learning: Innovations in web-based learning media development 456 Figure 7. Display of the exam results menu The Learning Materials menu contains English material pages consisting of Greetings, Present Tense, and Past Tense material. Users can study material according to the material selected on the page as shown in figure 8. Figure 8. Learning material page Teachers can include English material and questions into learning media applications. To be able to access the application, the teacher must log in as shown in Figure 9. Figure 9. Login form In Figure 9 is the login form used by the teacher in order to be able to manage English material and questions. After entering the username and password, a display will appear as shown in figure 10. Figure 10. Page for teachers In Figure 10 there is a Question, Material and Exam Result menu where the teacher can choose the Question menu to manage English questions. In the Question menu there are several types of questions such as Multiple Choice, Essay, Story, Match, and Complete Dialog so that the teacher can choose the type of questions to be managed. If the teacher will add multiple choice questions then it will appear as shown in Figure 11. Figure 11. Question management page To add multiple choice questions, you can press the Create button in Figure 4.11 and then a question input form will appear as shown in Figure 12. Figure 12. Question input page Meanwhile, to manage English material, the teacher can select the Material menu and then press the Create button if you want to add the type of material as shown in Figure 13. Figure 13. Manage material page But if you want to add material to one type of material, the teacher can choose the type of material then press the navigation image on the Action, a display will appear as shown in Figure 14. ENGLISH REVIEW: Journal of English Education p-ISSN 2301-7554, e-ISSN 2541-3643 Volume 11, Issue 2, June 2023 https://journal.uniku.ac.id/index.php/ERJEE 457 Figure 14. Material input page The teacher can see data on the results of students who have worked on English questions on the Exam Result menu as shown in figure 15. Figure 15. Display of exam results Testing (Testing) The final stage in the Extreme Programming method is the testing phase. This stage involves executing the application to ensure that it meets the system specifications and user requirements. The primary objective of testing is to check the functionality of the software, as stated by Greenit (2018). The test is designed to evaluate both the external appearance, or interface, and the functionality of the software. The results of the testing for the learning media application are presented in Table 5. Table 5. Black box testing No. Testing Information Test result 1 Testing the name input page In the name form, the user enters a name then clicks the Save button. Testing when inputting the name was successful. 2 Testing the exercise page questions After entering a name on the Exam page the user fills in or works on practice questions and then presses the Save button. Testing the successful practice questions will display the questions answered and the number of questions correct. 3 Content page testing On the material page i.e. the user can select The user has successfully accessed the material. the type of material. 4 Testing the login form In the login form, the teacher enters the correct username and password then clicks the Login button. The teacher enters the wrong username and password in the Login form then clicks the Login button Testing when inputting the correct username and password will display the main page. If you enter the username and password incorrectly, you will be asked to enter the username and password again. 5 Testing the question form In the question form, the teacher adds questions by selecting the type of question. The teacher changes the questions in the question form according to the type of question. The teacher deletes questions on the question form according to the type of question. The teacher succeeded in adding questions according to the type of questions. The teacher managed to change the questions according to the type of questions. The teacher succeeded in deleting the questions according to the type of questions. 6 Material form testing In the material form, the teacher adds material by selecting the title of the material. The teacher changes the material on the material form according to the material title. The teacher deletes the material on the material form according to the material title. The teacher managed to add material according to the title of the material. The teacher succeeded in changing the material according to the title of the material. The teacher succeeded in deleting the material according to the title of the material. 7 Testing the results of On the Exam Result page, the The teacher managed to Siti Maesyaroh, Nida Amalia Asikin, & Daswa Advancing English language learning: Innovations in web-based learning media development 458 student practice teacher can see student grade data. access student grade data. The test results have confirmed that the English learning media application has successfully passed all the tests conducted and runs with 100% functionality on all 12 functions. Consequently, the application can be deemed to be running smoothly and without any failure. CONCLUSION The research and testing conducted on the web- based English learning media applications built with PHP and MySQL programming have led to the following conclusions: a. The web-based English learning media application can serve as a viable alternative to conventional learning methods, and it provides an easy-to-use platform for seventh grade junior high school students. b. Students can use the English learning application to learn independently, both during and outside of school hours. c. The learning media application is highly accessible, and it can be used on any computer with a web browser installed by both students and teachers. Based on the problems identified and the results of this study, several suggestions can be made for the future development of learning media applications. These suggestions are aimed at improving the current application and enhancing the overall learning experience for junior high school students. Firstly, it is suggested that the application should be developed for different platforms such as mobile web applications, Android, and Java Mobile. This will allow students to access the learning material from different devices, making it more convenient for them to learn anywhere and anytime. Secondly, to make the learning material more interesting, it is suggested to add more material variations and practice questions. This will keep the students engaged and motivated to learn more. Lastly, it is suggested to add pictures with storylines to make the application more interactive. This will help students to visualize the learning material and understand it better. We would like to thank those who have helped a lot in this research, namely SMP Negeri 1 Garawangi and LPPM Universitas Kuningan for their material and non-material support. REFERENCES Asikin, N. A. (2017). The analysis of interlanguage produced by 3rd grade high school students in narrative writing text. Indonesian EFL Journal, 3(1), 39-44. Creswell, J. W., & Creswell, J. D. (2018). Research design: Qualitative, quantitative, and mixed methods approaches (5th ed.). Sage. Darsih, E., & Asikin, N. A. (2020). Mobile assisted language learning: EFL learners’ perceptions toward the use of mobile applications in learning English. English Review: Journal of English Education, 8(2), 183-194. 10.25134/erjee.v8i2.2999 Elola, I., & Oskoz, A. (2018). Virtual worlds and language learning: A review of the literature. Language Learning & Technology, 22(2), 1-27 Erwin, E., & Anik, S. (2016). Development of Web- Based Learning Media for Natural Science Subjects for Class VII Students. Jurnal Pendidikan Fisika dan Teknologi, 2(2), 120-126. Greenit. (2018). Software testing tutorial: Free course on manual testing and automation testing. Guru99. https://www.guru99.com/software- testing.html Hamdan, A. R., Nawfal, N. K., & AlShammari, A. S. (2018). Gamification and English language learning: A study on the impact of points on learning. International Journal of Emerging Technologies in Learning (iJET), 13(12), 165- 182. Heni, S., & Hary, S. (2017). Development of web-based learning media to measure student learning outcomes in basic computer network subjects computer and network engineering expertise program. International Journal of Applied Engineering Research, 12(23), 13552-13560. Januarisman, E., & Ghufron, A. (2016). Development of web-based learning media for natural science subjects and for grade VII students. Journal of Educational Technology Innovation, 7(3), 166- 182. Kirkwood, A., & Price, L. (2013). Missing: Evidence of a scholarly approach to teaching and learning with technology in higher education. Teaching in Higher Education, 18(3), 327-337. Kukulska-Hulme, A. (2016). Language learning defined by time and place: A framework for next generation designs. International Journal of Mobile and Blended Learning, 8(1), 1-16. Levy, M., & Stockwell, G. (2006). CALL Dimensions: Options and issues in computer-assisted language learning. Routledge. Li, J., & Li, Y. (2018). Exploring the role of online communities in web-based English learning media development and their impact on learner motivation and engagement. Education and Information Technologies, 23(2), 675-691. Maesyaroh, S. (2019). Application of the analytical hierarchy process method to determine expertise programs at SMK Model Patriot IV Ciawigebang Kuningan. Informatics Buffer, 5(1), 13-24. ENGLISH REVIEW: Journal of English Education p-ISSN 2301-7554, e-ISSN 2541-3643 Volume 11, Issue 2, June 2023 https://journal.uniku.ac.id/index.php/ERJEE 459 Nikolov, M., & Mihaljević Djigunović, J. (2019). Language learning and digital technology. John Benjamins Publishing Company. Putra, Y. I., & Ridoh, A. (2021). Development of web- based learning media to improve student skills in basic web programming courses at STKIP Muhammadiyah Muara Bungo. Basicedu Journal, 5(2), 4026-4036. Sari, H. V., & Suswanto, H. (2017). Development of web-based learning media to measure student learning outcomes in basic computer network subjects in the computer and network engineering expertise program. Education Journal, 6(6), 1008-1016. Stockwell, G., & Hubbard, P. (2013). Some emerging principles for mobile-assisted language learning. The International Research Foundation for English Language Education (TIRF) Annual Review, 1, 1-18. Supriyatna, A. (2018). Development of an online English learning media using extreme programming. Journal of Physics: Conference Series, 1028(1), 012074. 10.1088/1742- 6596/1028/1/012074 Thomas, M. (2016). An overview of the latest trends in web-based English language learning media. TESOL International Journal, 11(2), 43-57. Traxler, J. (2016). Mobile learning and learning analytics: Capturing the evidence, integrating experience, informing practice. In Mobile Learning Analytics (pp. 1-17). Springer International Publishing. Wang, Y., Chen, N. S., Liang, T. H., & Chen, W. F. (2018). Exploring the impact of social media on web-based English learning media development and its potential to facilitate collaborative learning and peer interaction. Australasian Journal of Educational Technology, 34(1), 82- 97. Yogi, Y., & Ahmad, M. (2021). Development of web- based learning media to improve student skills in basic web programming courses at STKIP Muhammadiyah Muara Bungo. Jurnal Pendidikan: Teori, Penelitian, dan Pengembangan, 6(1), 32-39. Yuniarti, E., Asikin, Y., & Thamrin, T. (2021). Development of English language learning media on the interactive e-book for junior high school students. Edcomtech Jurnal Kajian Teknologi Pendidikan, 5(1), 23-33. Zheng, D., & Cheng, Y. (2018). Personalized learning in Web 3.0 era: The role of mobile applications. British Journal of Educational Technology, 49(6), 1044-1055. Siti Maesyaroh, Nida Amalia Asikin, & Daswa Advancing English language learning: Innovations in web-based learning media development 460