Design and Development of A Single Page and Web-based Responsive E-learning System for Higher Education Institutions

Muhammad Lookman Hossain Khan, Agus Setiawan, Iwan Kustiawan


Students now use not only computers or laptops, but also small devices such as mobile phones. The students at higher education institutions spent a lot of time on the internet to find the course materials. Sometimes the teacher sends the materials, but the students who are willing to take a specific course of a semester cannot get a brief concept of the course on before starting the semester. There is now a lot of online education systems on the Internet, but few are a single page and responsive. The purpose of this research is to develop a single page, responsive and web-based e-learning system. The method used in this research is the Rapid Application Development approach which has six stages of the development process, namely Planning, Analysis, Design, Implementation, Testing, and Maintenance. This research was conducted in the Faculty of Technology and Vocational Education, Universitas Pendidikan Indonesia. The students and teachers from the Department of Mechanical Engineering Education participated in this research. The results of this research indicate that with fully functional live chat, the OpenCourseWare system has a high usability test score, highly responsive and awesome features. The OpenCourseWare system is responsive and ajax-based mobile-friendly system that can be used by higher education institutions as an e-learning system based on the results obtained.


OpenCourseWare; information system; E-learning; higher education

Full Text:



Abrahamsson, P., Salo, O., Ronkainen, J., and Warsta, J. (2017). Agile software development methods: Review and analysis. arXiv Preprint arXiv:1709.08439.

Berchet, C., and Habchi, G. (2005). The implementation and deployment of an ERP system: An industrial case study. Computers in Industry, 56(6), 588–605.

Biggs, J. B. (2011). Teaching for quality learning at university: What the student does. McGraw-Hill Education (UK).

Brisebois, M. A., Drummond, B., Mehta, A., Chene, M., and Flannigan, M. (2017). Method and system for customizing a mobile application using a web-based interface. U.S. Patent No. 9,836,446. Washington, DC: U.S. Patent and Trademark Office.

Burbules, N. (2018). Watch IT: The risks and promises of information technologies for education. Routledge.

Carson, S. (2009). The unwalled garden: growth of the OpenCourseWare Consortium, 2001–2008. Open Learning, 24(1), 23–29.

Chopra, R. (2018). Software Testing: A Self-Teaching Introduction. Stylus Publishing, LLC.

Frain, B. (2015). Responsive web design with HTML5 and CSS3. Packt Publishing Ltd.

Grant, R. M. (2016). Contemporary strategy analysis: Text and cases edition. John Wiley & Sons.

Hakami, N. A. M. (2018). An Investigation of the Motivational Factors Influencing Learners’ Intentions to Continue Using Arabic MOOCs. University of Southampton, University Library.

Hua, J., Zhang, M., Wang, K., and Khurshid, S. (2018). Towards practical program repair with on-demand candidate generation. Proceedings of the 40th International Conference on Software Engineering, 12–23.

Hussain, A., and Mkpojiogu, E. O. C. (2015). The effect of responsive web design on the user experience with laptop and smartphone devices. Jurnal Teknologi (Sciences & Engineering), 77(4), 41–47.

Hylén, J. (2006). Open educational resources: Opportunities and challenges. Proceedings of Open Education, 4963.

Jadhav, M. A., Sawant, B. R., and Deshmukh, A. (2015). Single page application using angularjs. International Journal of Computer Science and Information Technologies, 6(3), 2876–2879.

Jones, E., and Brown, S. (2007). Internationalising higher education. Routledge.

Kumar, V., and Jenamani, M. (2017). Context preserving navigation redesign under Markovian assumption for responsive websites. Electronic Commerce Research and Applications, 21, 65–78.

Kupiainen, E., Mäntylä, M. V., and Itkonen, J. (2015). Using metrics in Agile and Lean Software Development–A systematic literature review of industrial studies. Information and Software Technology, 62, 143–163.

Martin, J., and Finkelstein, C. (1989). Information engineering. Prentice Hall Englewood Cliffs, NJ.

McCanne, S., Demmer, M. J., Watson, D. J., and Wu, D. T.-S. (2016). Optimizing communications using client-side reconstruction scripting. Washington, DC: U.S. Patent and Trademark Office.

Mesaros, A., Heittola, T., Diment, A., Elizalde, B., Shah, A., Vincent, E., … and Virtanen, T. (2017). DCASE 2017 challenge setup: Tasks, datasets and baseline system. DCASE 2017-Workshop on Detection and Classification of Acoustic Scenes and Events.

Paulson, L. D. (2005). Building rich web applications with Ajax. Computer, 38(10), 14–17.

Rosenzweig, E. (2015). Successful user experience: Strategies and roadmaps. Morgan Kaufmann.

Siapera, E. (2017). Understanding new media. Sage.

Soma, K., Termeer, C. J. A. M., and Opdam, P. (2016). Informational governance–A systematic literature review of governance for sustainability in the Information Age. Environmental Science & Policy, 56, 89–99.

Souders, S. (2008). High-performance web sites. Communications of the ACM, 51(12), 36–41.

Straker, L., Harris, C., Joosten, J., and Howie, E. K. (2018). Mobile technology dominates school children’s IT use in an advantaged school community and is associated with musculoskeletal and visual symptoms. Ergonomics, 61(5), 658–669.

Sun, J. C., Wu, Y., and Lee, W. (2017). The effect of the flipped classroom approach to OpenCourseWare instruction on students’ self‐regulation. British Journal of Educational Technology, 48(3), 713–729.

Tapia-Leon, M., Rivera, A. C., Chicaiza, J., and Luján-Mora, S. (2018). Application of ontologies in higher education: A systematic mapping study. Global Engineering Education Conference (EDUCON), 2018 IEEE, 1344–1353.

Turkle, S. (2017). Alone together: Why we expect more from technology and less from each other. Hachette UK.

Wimmer, R. D., and Dominick, J. R. (2013). Mass media research. Cengage learning.

Yanuschik, O. V, Pakhomova, E. G., and Batbold, K. (2015). E-learning as a Way to Improve the Quality of Educational for International Students. Procedia-Social and Behavioral Sciences, 215, 147–155.

Zaheer, H., Breyer, Y., Dumay, J., and Enjeti, M. (2019). Straight from the horse’s mouth: Founders’ perspectives on achieving “traction”in digital start-ups. Computers in Human Behavior, 95, 262–274.



  • There are currently no refbacks.

Copyright (c) 2019 Innovation of Vocational Technology Education

Creative Commons License
This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

This journal provides immediate open access to its content on the principle that making research freely available to the public supports a greater global exchange of knowledge.

Lisensi Creative Commons
This work is licensed under a Lisensi Creative Commons Atribusi-BerbagiSerupa 4.0 Internasional.

View My Stats