**ISLAMIC EDUCATION CONTENT PLATFORM** **FOR SECONDARY SCHOOL STUDENTS** \*\*double blind review, please do not include author information here\*\* \*\* Only include author information after the article has been reviewed \*\* Received Date: \*date Accepted Date: \*date Published Date: \*date **HIGHLIGHTS** - Issues in Islamic education which use conventional teaching and learning method. - Design concept of web-based platform for Islamic education content. - Web-based Architecture as a development model for IECP. ABSTRACT *The rapid development of information technology has affected various aspects of life including education at the school level. However, conventional teaching and learning methods are still used in secondary schools, especially for Islamic subjects. One of the ways to help students learn better in Islamic subjects is by implementing a web-based content platform in the context of Islamic education. This is a learning tool to support the teaching and learning process using various media such as educational video materials for secondary school students, because multimedia elements will make learning more interesting especially for Islamic subjects that require memorization, reading, and comprehension. Another desired goal is for teachers to be able to manage their Islamic lessons online. In developing web applications, appropriate development methodologies have been implemented using Waterfall Model as a guideline. The waterfall model has different development phases such as analysis, design, implementation, testing and finally documentation. The web-based Islamic Education Content Platform (IECP) was designed using the principles of Eight Golden Rules of Interface Design by Shneiderman and developed using Visual Studio Code with PHP and MySQL databases. It was assessed by obtaining Expert Review (ER) through a set of questionnaires given to four experts and fifteen respondents through User Acceptance Test (UAT). The results of ER indicate that web-based IECP is suitable for use and currently need to be refined and improved. Meanwhile, the UAT results show that web-based IECP is generally accepted and believed to be beneficial, especially to secondary school students and teachers.* *Keywords: Islamic education content, web-based platform, e-learning* # **INTRODUCTION** Islamic education is a form of spiritual and academic education that leads to continuous physical development from the beginning to the end of human life (Musyarif et al., 2020). Creative teachers' attitudes towards the selection and implementation of different learning approaches or methods affect the quality of learning in Islamic education. Therefore, teachers are encouraged in developing innovative attitudes in learning management, such as the selection and use of various approaches, methods, and learning tools conforming to the needs of their students and the learning objectives of Islamic teaching rather than using textbooks only (Tanjung, 2018). Several learning platforms have been established to offer information, software, and services to educate teachers and students, to enhance their educational delivery and content management. Unlike textbooks, learning platforms involve students more in Islamic subjects because of their various functions and interactive features, which make it possible for the management, communication, and creation of multimedia learning content (CAE, 2020). However, there are few learning platforms available, especially for secondary school Islamic education, that can assist teachers in managing their learning materials. Students may have limited access to Islamic teaching materials provided by their teachers through the traditional teaching methods. Moreover, they cannot have multiple forms and learning materials (Ishak & Abdullah, 2013). Therefore, the development of IECP aims to establish a web platform to assist the teaching and learning of Islamic subjects to increase students’ interest in the learning process and their ability to learn remotely. Meanwhile, this platform is needed by teachers to publish and preserve their teaching materials effectively. # **METHODOLOGY** In this study, the Software Development Waterfall Model was implemented to describe a specific process workflow. Five process phases: analysis, design, implementation, testing, and documentation were involved in this study. Each phase involved has different tasks and goals to implement and achieve. The waterfall model is the right choice for this study because each phase has its results and also an evaluation process that makes it easy to manage (Lvivity Team, 2018). Another advantage of this waterfall model is that the phases do not overlap as they are processed and completed sequentially. The first activity in the analysis phase is to gather information and define the project. Once the specifications are clearly defined, the next step is the system design. This is followed by the development phase and testing phase. Finally, all activities are documented in the documentation phase. Figure 1 shows the development model of IECP which is based on waterfall model. ![](611fd1e6ba79a_media/media/image1.png) **Figure 1:** IECP Development Model **Analysis Phase** Activities in this phase started from collecting and analysing all requirements, resources, and information related to Islamic education, secondary schools, web-based technologies, learning platforms and other needs for the development. The main objective was to establish the IECP requirements. **Design Phase** The design phase is very important to represent the IECP design process describing the tasks involved in designing site maps, activity diagrams, and storyboards. Site maps and activity diagrams were created using NCH software to describe the dynamic aspects of the system. The last activity was a storyboard sketch using Balsamiq software. **Sitemap** The sitemap outlines the entire process that takes place on the IECP design. Figure 2 shows the sitemap of IECP, which consists of the first web page and the main menu. There are four main activities in the IECP, namely *Islamic lesson*, *exercise*, *admin* and *group chat* which show the main functions provided in this web application. Under *Islamic lesson*, users can play uploaded video lessons and view document files while at the download page, users will be able to download Islamic lessons. In addition, at the practice page, it shows all the exercises that have been made by the teacher and the students can answer them and see the scores obtained. Finally, users can have live interactive discussions and communication with teachers and other students as well in the *group chat*. ![](611fd1e6ba79a_media/media/image2.png) **Figure 2:** Sitemap of IECP Design **Activity Diagram** The activity diagram illustrates the progression from one activity to another in the IECP. It outlines the sequence of activities in the IECP, for example, when a user starts the IECP, there will be a first page of the web platform before the user enters the login page. To enter the IECP platform, users have to choose their category, whether the user is a student or a teacher, but for new users, they are required to register before they are allowed to login. After that the user can access the main page menu of the web application. Here, users can see a navigation bar and a sidebar showing *Islamic lesson*, *exercise*, *download* and *group chat*. These are the main activities offered by IECP. In the first main menu, *Islamic lesson*, users can view the lessons that the teacher has added to the IECP. It has two categories: Video and PDF. The next menu is *Exercise*, where the user can answer all the questions related to the topic of Islamic lessons created by the teachers. Next, the user can go to the download page. The download page displays a list of all Islamic lessons that have been added by the teacher. *Group Chat* is one of the main functions in the IECP where users can type a message there and others will be able to see the message that has been sent. This way, students and teachers can have a session of discussion. **Storyboard** Storyboards outline the flow and design of IECP. The entire storyboard was created using Balsamiq. The purpose of this activity was to generate ideas and design concepts at the early stage of the design process. Figure 3 illustrates the storyboard design used as a guide to design the layout of the IECP.

Answer Exercise

Upload Islamic lesson

Play Video

View pdf

Group Chat

Download Islamic lesson
**Figure 3**: IECP Sketch Storyboard Design **Implementation Phase** During the implementation phase, the first activity was to set up the database server on the localhost. This activity was performed using the XAMPP software. The project was programmed with PHP code using Visual Studio Code software editor, and MySQL database to create and manipulate the database. PhpMyAdmin was used to have direct interaction with database management. After all the coding process was done, the project was uploaded to 000webhosting. Figure 4 illustrates a simple web server setup for the IECP implementation activities. ![](611fd1e6ba79a_media/media/image9.png) **Figure 4:** IECP System Architecture **Testing Phase** At the end of the expansion phase, evaluation of the usefulness of the IECP was achieved with the help of expert evaluation and user acceptance testing (UAT). The UAT was implemented with the target users, who were 13-year-old high school students and Islamic subject teachers. Due to the Covid-19 outbreak, the testing was performed online combined with a questionnaire survey technique for expert review. The results were used to refine the IECP. **Documentation Phase** The documentation phase is the final stage of this methodology. Records are very crucial in laying the foundation for the accuracy, traceability, and history of both individual documents and full IECP project documentation (Verma, 2020). Therefore, it is important for the documents to be well organized, easy to read, and appropriate. The whole IECP development process and project implementation, from the first phase to the end, starting with the analysis, design, implementation, and testing of requirements, were concluded at the documentation phase. # **FINDINGS AND DISCUSSIONS** The discussion focuses on the testing of the data collection from the experts and respondents on the IECP to draw a conjecture on the data collected. Based on the questionnaires distributed, the results were calculated in terms of percentage of five options in google form, which include, *Strongly Disagree* (1), *Disagree* (2), *Not Sure* (3), *Agree* (4) and lastly *Strongly Agree* (5). **Expert Review** The Expert Review was conducted with four experts: three teachers from Sekolah Menengah Kebangsaan (SMK) Serendah Selangor who teach Islamic subjects and a lecturer with expertise in Information Systems from the Faculty of Computer Science and Mathematics, UiTM Perlis. The purpose of this survey was to find any kind of improvements in the context of user interfaces, processes, and design principles for IECP. **Table 1:** IECP Questionnaire of Expert Review | **Visibility of the system** | **Percentage (%)** | | | | | | ---------------------------------------------------------------------------------------------------------------------------------- | ------------------ | - | -- | --- | -- | | | 1 | 2 | 3 | 4 | 5 | | It is always clear what is happening from each action you perform in the web application of IECP. | | | 50 | 50 | | | **Match between system and real world** | 1 | 2 | 3 | 4 | 5 | | Are the buttons name being familiar and easy to understand? | | | | 75 | 25 | | **User control and freedom** | 1 | 2 | 3 | 4 | 5 | | It is easy to navigate around in the IECP to manage Islamic Lesson? | | | | 75 | 25 | | **Consistency and standards** | 1 | 2 | 3 | 4 | 5 | | Does the IECP’s menu structure match the task structure? | | | | 100 | | | **Recognition rather than recall** | 1 | 2 | 3 | 4 | 5 | | Does the IECP give option value about which Islamic title for the exercise to be created for to avoid the overhead of user memory? | | | | 100 | | | **Flexibility and efficiency of use** | 1 | 2 | 3 | 4 | 5 | | It is easy to use and find highly desirable information about Islamic lesson in the IECP. | | | | 25 | 75 | | **Aesthetic and minimalist design** | 1 | 2 | 3 | 4 | 5 | | The IECP’s application structure is simple and clear without unnecessary complications. | | | | 75 | 25 | | Colour choices in IECP allow for easy readability of all the information about Islamic lesson. | | | 25 | 25 | 50 | The results show that 50% of experts are *not sure* that it is always clear about what happens from every action performed in the IECP. This is because good interaction design and good user experience will always provide clear, visible and understandable feedback from the user interface to increase effectiveness, but in this IECP there are some actions that do not provide feedback, and some do. 75% of experts *agree* that it is easy to navigate the IECP to manage the content of Islamic lessons. This is because, all the navigation menus in the IECP are simple menus in a fixed sidebar that are consistent on every page the user visits. The navigations are also designed with icons and words that the user can understand to perform the task efficiently. 100% of experts *agree* that the menu structure fits the task structure. This is because the IECP uses understandable link labels and common metaphors similar to real life and made the concepts in the platform fit the task structure for example, manage student will lead to a student page where user can manage it. 75% of experts *agree* that the structure of the IECP is simple and clear without unnecessary complications. A simple system will make it better, understandable and make it easier for users to adapt to it and interact with what has been offered on the web. The structure of the IECP uses a grid-based layout, which makes the design structure and content more orderly. The grid helps to align elements on the page making it clean and clear. 50% of respondents *strongly agree* that the choice of colours in the IECP facilitates the reading of all information about Islamic lesson. Readability is one of the most important aspects in the usability of web design, where colour plays an important role in it. The IECP uses a darker colour for the sidebar, but to improve user readability, white colour for the label is used to make it contrast and clear for user to read it effectively. Overall, the experts *agree* that the web application is good for students to learn Islamic subjects in a digital way. **User Acceptance Test (UAT)** Ten secondary school students and five teachers from Sekolah Menengah Kebangsaan Bakti, Penang were selected for the evaluation of web applications through the User Acceptance Test (UAT). The objective of UAT was to test respondents’ acceptance of the IECP. It also aimed to get the views of respondents for the improvement of the IECP. The test was performed online because of the Covid-19 outbreak. **Table 1:** IECP Questionnaire of UAT | | **Percentage (%)** | | | | | | --------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | --- | --- | ---- | ---- | | **Perceived usefulness** | 1 | 2 | 3 | 4 | 5 | | Using IECP would help me to store Islamic lesson online. | | | | 20 | 80 | | Using IECP would enable me to access lesson quickly. | | | 6.7 | 26.7 | 66.7 | | Using IECP would enhance my effectiveness in learning Islamic education subject as materials is presented in various different type of files. | | | 6.7 | 33.3 | 60 | | Using IECP would help teacher to manage Islamic lesson online. | | 6.7 | | 20 | 73.3 | | Using IECP to manage Islamic lesson and exercise will make learning more interesting than traditional ways of learning using textbook. | | | 6.7 | 33.3 | 60 | | Using IECP would enable to do revision anywhere and anytime. | | | | 26.7 | 73.3 | The results show that 80% of the respondents *strongly agree* that owning a laptop and smartphone allows them to study Islamic education subjects online as most students currently have both technologies as a necessary requirement in making their online classes, and daily work become more efficient. 66.7% of respondents strongly agree that assuming they have access to the IECP, they intend to use it again in the future. The reason they *strongly agree* with this statement is that respondents feel that the IECP can help organize teaching materials for Islamic education subjects and students can easily access Islamic education subjects with more various materials. 33.3% of respondents *agree* that it is easy for them to adapt to the interface of the IECP while using it. This is because the user interface was designed based on the Shneiderman’s Eight Golden Rules that maintains its consistent, minimalism and clean appearance across web applications. Based on the perceived usefulness questions, it was found that about 6.7% of them *disagree* that using the IECP helps teachers manage Islamic lessons online. The reason for this difference of opinion is because when the respondent wants to manage Islamic lessons, it is difficult for the teachers to identify their uploaded materials because all the other teachers who have uploaded will be displayed there too. Respondents may delete or update other teachers ’materials without realizing it, causing them frustration. 66.7% and 73.3% of respondents *strongly agree* and *agree* that using the IECP would enable them to access lessons quickly and do revision anywhere and anytime. This is because the IECP is designed specifically for students to enable them to access certain lessons faster, for example, if a teacher has uploaded an Islamic lesson, students can simply log in via smartphone or laptop to learn new lessons. This made it easier for certain students to study the material anywhere and anytime, especially those who had difficulty learning, memorizing, and understanding lessons in Islamic subjects in school, which resulted in strong agreement among the respondents. This also indicates that none of the respondents *disagree* that using the IECP would increase the effectiveness in learning Islamic education subjects as the material is presented in various types of files. One of the reasons is that respondents are able to learn the subject of Islamic education by using educational videos that could increase student engagement with video content from reading and memorizing textbooks only. In the last section, questions regarding perceive ease of use were asked to identify respondents’ experiences and satisfaction while using the IECP. Initially, from the responses of the respondents in this survey most of them were positive that the IECP is a useful system to be used in managing Islamic subjects and to assist students in self-study. Out of the 15 respondents, 73.3% *strongly agree* and 26.7% of them *agree*. This is very gratifying because they always use conventional methods in teaching and learning Islamic subjects in schools and do not use the same system as before. Moreover, the functions provided by the IECP such as managing various types of files for lessons, making exercises easy and fast and group chats may be the reason why this platform is very useful for respondents to continue using it. 13.3% of respondents *strongly disagree* that Islamic lesson videos that have been uploaded on the IECP are easy to play. The reason for this statement is, when the respondent wants to play an Islamic lesson video, the video is loaded very frustratingly slow, and the respondent has to wait for quite a long time for it to appear resulting in strong disagreement for this question. Another reason that causes this problem is because of the poor performance of the web hosting used in this project, as the IECP uses 000webhost which is a free web hosting which means hosting along with countless other websites makes the website slow. 53.3% of respondents *strongly agree* and 33.3% of them *agree* that the IECP interface (buttons and icons) is an easy way to perform system functions. This is due to the respondents’ familiarity with all the names used for buttons and icons in the IECP, for example, the exercise button indicates exercise, the chat icon represents group chat, and the book icon represent Islamic lessons. # **CONCLUSION AND RECOMMENDATIONS** In conclusion, based on the findings of the expert evaluation, the majority of experts agree that the IECP is an effective learning platform, and can be further improved. Based on the results of UAT, although there are some disagreements, most of the respondents agree that the IECP is a good efficient platform and able to provide many benefits and advantages to users, especially teachers and secondary school students in the context of Islamic education. This indicates that the objective to evaluate the usefulness of the IECP was achieved. The project was completed comprehensively to define the goals of the IECP. As a direction for enhancement, several recommendations have been proposed to improve the IECP. In addition, it could be a guide for future researchers to further enhance the IECP. Teachers and students would benefit from the IECP developed in this study, as this would make learning sessions more engaging for the students. In addition, they can learn remotely anytime and anywhere, as well as to improve the students’ ability to understand their studies. Besides, the fun of learning can be increased and instilled in the students, since the materials can be presented by the instructors in various forms like videos, pictures, PDF files or slides. As stated by Haryanto (2020), the learning platform enables the teachers to engage with the students. Finally, the IECP allows the students to improve their self-directed learning skills in learning Islamic education subjects (Pan, 2017). # **REFERENCES** CAE. (2020). 9 Advantages of Learning Platforms or LMS. 1-7. Retrieved 2021, Jun 10, from https://www.cae.net/lms-learning-platforms-advantages/ Hartanto, W. (2020). Penggunaan E-learning sebagai media. 1-8. Retrieved November 23, 2020, from Ishak, M. S. B. H., & Abdullah, O. C. (2013). Islamic education in Malaysia: A study of history and development. Religious Education, 108(3), 298-311. https://doi.org/10.1080/00344087.2013.783362 Lvivity Team. (2018). Waterfall methodology: Advantages and disadvantages, and when to use it? Retrieved November 29, 2020, from https://lvivity.com/waterfall-model Musyarif, Halik, A,. Ezalia, E., R, I. E., Elizabeth, G., My, W. A. N. H., Norhanim, A., Wahidah, A., Ym, C., Rahimah, A., Chin, J. G., Juliana, I., Hamid, A., Gunasagaran, K., Amir, J., John, P., Azmi, A., Mangantig, E., Hockham, C., Anne Tan, J.-A. (2020). Perspective of Islamic education to value continuity and culture. Tarbiya Islamia: Jurnal Pendidikan Dan Keislaman, 10(2), 1-9. https://doi.org/10.1155/2010/706872 Pan, W. (2017). Benefits of digital learning platform over traditional. 1-6. http://www.panworldeducation.com/2017/03/23/benefits-of-%09digital-learning-over-traditional-education-methods/ Tanjung, E. F. (2018). Improving the quality of religious Islamic education learning through collaborative learning approach in SMP Al-Muslimin Pandan district Tapanuli Tengah. 231(Amca), 205-207. https://doi.org/10.2991/amca-18.2018.56 Verma, E., (2020). Project documentation and its importance. Retrieved December 8, 2020, from https://www.simplilearn.com/project-documentation-article