International Journal of Interactive Mobile Technologies (iJIM) – eISSN: 1865-7923 – Vol. 15, No. 20, 2021 Paper—E-Learning Based Web Programming Course in the COVID 19 Pandemic Time E-Learning Based Web Programming Course in the COVID 19 Pandemic Time https://doi.org/10.3991/ijim.v15i20.23749 Dony Novaliendry1,2, Asrul Huda1, Muhammad Rinov Cuhanazriansyah1,3, Hesty Kumala Sani1, Herisvan Hendra1(), Joni Karnando1 1Universitas Negeri Padang, Padang, Indonesia 2National Kaohsiung University of Science and Technology, Kaohsiung, Taiwan 3Universitas Bengkulu, Bengkulu, Indonesia herisvan321@gmail.com Abstract—The learning process in the STKIP PGRI West Sumatra Informat- ics Education Study Program still uses conventional learning methods, namely through face-to-face contact between lecturers and students in the class. The tra- ditional learning method currently taking place has limitations that can hinder the learning process, such as limited time and space to interact with each other, espe- cially during the Covid-19 pandemic. With these conditions, the online learning process is an alternative to support learning in its current state, with technological developments that can simplify the learning process and make the time more flexible and support the learning process anywhere, anytime, and anyone. An electronic learning system (E-Learning) was created from these conditions, which is expected to be an alternative solution for online learning to overcome the STKIP PGRI West Sumatra Informatics Education Study Program’s lim- itations, especially in introductory web programming courses. E-learning is designed using the System Development Life Cycle (SDLC) method supported by the PHP programming language and implementing the Laravel Framework. The learning process using E-learning is designed using localhost as the central server. This study’s results resulted in an E-learning application built based on the analysis and design recommended by the STKIP PGRI West Sumatra infor- matics education study program. With this application, it is hoped that it can simplify the online learning process, especially in existing introductory web programming courses. Keywords—website development, e-learning, laravel, SDLC, learning media 1 Introduction In the modern era like today, information technology is developed according to human needs to help humans carry out their activities. One of them is the number of technologies used in obtaining information. Information technology is currently needed in various fields, including health, business, entertainment, and especially education. iJIM ‒ Vol. 15, No. 20, 2021 117 https://doi.org/10.3991/ijim.v15i20.23749 mailto:herisvan321@gmail.com Paper—E-Learning Based Web Programming Course in the COVID 19 Pandemic Time The influence of information and communication technology in education is increasingly felt in line with the shift in learning patterns from conventional face-to- face learning towards more open and media-driven education. With the influences of technology, education in the future will be more relaxed and two-way, diverse, multi- disciplinary, and related to work productivity and competition. Along with the rapid development of Information Technology (IT), the need for an IT-based teaching and learning (education) concept and mechanism are inevitable [14][15][16]. The idea that became known as E-learning has influenced conventional education’s transformation into digital form, both in content and in the system. The world community has widely accepted the concept of E-learning, as evidenced by the widespread implementation of E-learning in educational institutions (schools, training, and universities) and industrial institutions (Cisco Systems, IBM, HP, Oracle, etc.). The essence of E-learning is a conventional form of learning that is translated into a digital format through internet technology. E-learning can be used in distance education or traditional education, depending on its importance. Developing a learning model is not just presenting subject matter on the internet but needs to be considered logically and holds learning principles. Likewise, a devel- opment design that is simple, personal, fast, and includes online evaluation. Based on the observations made, the Informatics Education Study Program at STKIP PGRI West Sumatra does not yet have its E-learning Website. The authors want to make a unique E-learning application in the Informatics Education Study Program that functions as learning support [17][18][19]. To increase the learning process’s effectiveness, it is necessary to have an E-learning application with acceptable standards accessible by lecturers and students. [6] Explains that E-learning has the nature of flexibility, choice and is dynamic, which means that in the teaching and learning process, it can be done where, when, and whoever is without being limited by space and time. In line with that, [7] explains that the implementation of E-learning is an effort in distributing subject matter via electronic media or the internet so that students can access it anytime from all parts of the world. Whereas in the article [10] is an overall concept of mobile learning and digi- tal learning which includes learning through digital devices (telephone, PDA, etc.) and the online environment in which they are based. From this explanation, two keywords in E-learning can be found, namely flexibility and distribution. Flexibility means that students can choose the time and place to study because they have to come somewhere simultaneously. Distribution means that educators can deliver subject matter using CDs or the internet so that students can access it anywhere, anytime. Laravel is a PHP framework that emphasizes simplicity and flexibility in its design. Just like other frameworks, Laravel is built based on MVC (Model-View-Controller). Laravel includes a command-line tool called “Artisan,” which can be used for bundle packaging and bundle installation. According to a survey conducted by Sitepoint.com in December 2013 in the PHP framework’s popularity, Laravel ranks at the top, making Laravel the best PHP framework for 2014. Currently, Laravel is a framework with an up-to-date version of PHP because Laravel hints at PHP version 5.3 and above. 118 http://www.i-jim.org Paper—E-Learning Based Web Programming Course in the COVID 19 Pandemic Time Aminudin [8] explains the reasons for using Laravel instead of other frameworks 1). Simple coding, 2). There is a superior and convenient generator, Artisan CLI, 3). Schema Builder features for various databases, 4). Migration & Seeding features for multiple databases, 5). Query Builder Features, 6). Eloquent ORM (Object Relational Mapper), 7). Package and Bundle creation features. 2 Methodology This research uses the Waterfall modeling technique, which uses an orderly sequence which is used to improve programming consisting of Analysis, Design, Production/ Implementation, Construction, Testing, and Maintenance [2]. The research method in brief in this study is used to obtain the data required are as follows: 2.1 Planning The stage of collecting data by observing/monitoring the environment, determin- ing problems, concluding the system’s weaknesses and advantages, then provides a temporary picture for solutions by planning globally and providing system objectives. Information data and description of the product to be made. 2.2 Analysis Describing a complete information system into parts (analysis stages; Identity, Understand, Analyze, Report) to identify and evaluate the problems that occur and the expected needs so that improvements can be proposed. 2.3 Design Make a detailed design based on the analysis result report. By making several selected models and selecting the best model from some of the best models, this design’s results can be upgraded into program code. 2.4 Implementation This stage is implementing and evaluating, and thinking about sustainability to answer the system’s needs as long as it uses it. To achieve this, the system needs to be cared for and maintained for the system’s sustainability. Product data offered (website and database). iJIM ‒ Vol. 15, No. 20, 2021 119 Paper—E-Learning Based Web Programming Course in the COVID 19 Pandemic Time 3 System planning 3.1 Context diagram The Context Diagram of the Management of E-learning for the Informatics Education Study Program is show in Figure 1. Context Diagram of E-learning Program is mentioned in Figure 2 and E-learning for the Informatics Education Study Program is shown in Figure 3. Fig. 1. Context diagram of the management of e-learning for the informatics education study program Fig. 2. Context diagram of e-learning program 120 http://www.i-jim.org Paper—E-Learning Based Web Programming Course in the COVID 19 Pandemic Time 3.2 Entity relationship diagram (ERD) Fig. 3. E-learning for the informatics education study program 4 Results and discussion 4.1 Input process a) User input. Before starting E-learning, at the initial stage, you must create a new user account. Every user involved in the learning process using this E-learning Website must be registered in the system. Every new user is required to register first on the registration page. User Registration Form/User Input can be seen in Figure 4. Fig. 4. User registration form iJIM ‒ Vol. 15, No. 20, 2021 121 Paper—E-Learning Based Web Programming Course in the COVID 19 Pandemic Time b) Input group. To be more neatly organized, each learning material should be grouped into categories, for example, grouped according to groups specially made by the lecturer. The group input form can be seen in Figure 5. Fig. 5. Form input group c) Material input. Material input is one of the lecturer home window features that function as a filling material in a file format or video. The material input form can be seen in Figure 6. Fig. 6. Material input form 122 http://www.i-jim.org Paper—E-Learning Based Web Programming Course in the COVID 19 Pandemic Time d) Input coding. Input Coding is essential in this E-learning Website. This system will be an added value because, in this process, students can learn coding online. The input coding form can be seen in Figure 7. Fig. 7. Coding input form e) Input quiz. Quiz input is another essential feature of E-learning because it is only located on the lecturer menu. This quiz input form has two stages, the first is filling in the quiz title, and the exam time can be seen in Figure 8, and the second is the question filling questions, and values can be seen in Figure 9. Fig. 8. Quiz input form iJIM ‒ Vol. 15, No. 20, 2021 123 Paper—E-Learning Based Web Programming Course in the COVID 19 Pandemic Time Fig. 9. Quiz input form 4.2 Processing a) Search. In this form, a group search can be carried out, namely by group name shown in Figure 10. Fig. 10. Search b) User search. In this form, user searches can be carried out, namely based on the user’s name, shown in Figure 11. 124 http://www.i-jim.org Paper—E-Learning Based Web Programming Course in the COVID 19 Pandemic Time Fig. 11. User search form 4.3 Output process a) Home group view. The Home Group Form is a place where lecturers and stu- dents carry out E-learning activities. On this form, there are several features, including the posting feature for information and containing information about the group such as group name, group id, description, and equipped with a meeting on the right side. The homegroup form can be seen in Figure 12. Fig. 12. The home group form display b) Home display of meeting material. In the form home, the material for this meeting is where the materials, quizzes, and assignments that want to be uploaded are located in Figure 13. iJIM ‒ Vol. 15, No. 20, 2021 125 Paper—E-Learning Based Web Programming Course in the COVID 19 Pandemic Time Fig. 13. Meeting material home display form c) Display coding. In this coding form is a page devoted to students who want to learn coding online with the material provided by the lecturer. This form can be seen in Figure 14. Fig. 14. Display coding form d) Quiz view. In the quiz form, this is the core of an ongoing E-learning system. This can be seen in Figure 15. Fig. 15. Quiz display form 126 http://www.i-jim.org Paper—E-Learning Based Web Programming Course in the COVID 19 Pandemic Time e) Value display. The value-form in the E-learning application is in the form of a PDF to make it easier for users to see it. This can be seen in Figure 16. Fig. 16. Value display form f) Timesheet view. The Absent form for E-learning is already in PDF form to make it easier for users to see it. This can be seen in Figure 17. Fig. 17. The absent display form iJIM ‒ Vol. 15, No. 20, 2021 127 Paper—E-Learning Based Web Programming Course in the COVID 19 Pandemic Time 5 Conclusion From the description above, it can be concluded as follows: a. The Learning Management System (E-Learning) in the Informatics Education Study Program of STKIP PGRI West Sumatra can simplify the offline and online learning process, especially in basic web programming. b. The implementation of Waterfall modeling and System Development Life Cycle (SDLC) in this E-learning system can help facilitate the adjustment process for manual learning that runs with the designed E-learning learning process. c. By using E-learning, the learning and teaching process can be done online and does not replace the learning and teaching process in full but only complement the existing learning system. 6 References [1] Awan, P. W (2015). Concept and Implementation of Laravel 5 Programming. Yogyakarta: CV.LOKOMEDIA. [2] Naga malleswari, D., Pavan Kumar, M., Sathvika, D., Ajay Kumar, B (2018). Interna- tional Journal of Engineering & Technology, 7(2.32), 10–13. https://doi.org/10.14419/ijet. v7i2.32.13516 [3] Kusmayadi, E., & Suryantini, H. (2017). Design and Development of Agricultural Library E-Learning Systems. Journal of Agricultural Libraries, 25(2), 71. https://doi.org/10.21082/ jpp.v25n2.2016 [4] Nagarajan, D. P., & Dr. G. Wiselin, J. (2010). Online Educational System (e-learning). Inter- national Journal of U- and e-Service, Science and Technology, 3(4), 37–48. Retrieved from http://www.sersc.org/journals/IJUNESST/vol3_no4/3.pdf [5] Ulva, N. L., Kantun, S., & Widodo, J. (2018). Application of E-Learning with School- ogy Media to Increase Motivation and Student Learning Outcomes in Basic Competen- cies Describing the Concept of Business Entities in the Indonesian Economy. Journal of Economic Education: Scientific Journal of Educational Sciences, Economics and Social Sciences, 11(2), 96. https://doi.org/10.19184/jpe.v11i2.6453 [6] Isaias, P., et al. (2015). E-learning systems, environments, and approaches: theory and implementation. New York: Springer. https://doi.org/10.1007/978-3-319-05825-2_1 [7] Surjono, H. D. (2013). Build e-learning course based on moodle-2rd.Ed. Yogyakarta. [8] Aminudin. (2015). Effective Ways to Learn Laravel Framework, Lokomedia, Yogyakarta. [9] Tanjung, Z. (2009). AMIK Harapan Medan E-learning System Design. Thesis not published. Medan: FMIPA University of North Sumatra. [10] Sujit, K. B., Marguerite, W., & Paul Be ‘langer. (2018). E-learning, M-learning and D-learning: Conceptual definition and comparative analysis: journal E-Learning and Digital Media, 15(4), 191–216. https://doi.org/10.1177/2042753018785180 [11] Susanto, W. E (2017). Web-Based E-learning Design at SMP Negeri 3 Patuk Gunungkidul Yogyakarta, 5(2), 75–82. [12] Desvi Roni, F. S. (2014). E-learning System Design at SMK Negeri 1 Painan Using PHP Programming and MySQL 1-8 Database. [13] Ohorella, Z. A. (2015). Analysis and Design of E-learning Systems at the University of Darussalam Ambon, 1–6. 128 http://www.i-jim.org https://doi.org/10.14419/ijet.v7i2.32.13516 https://doi.org/10.14419/ijet.v7i2.32.13516 https://doi.org/10.21082/jpp.v25n2.2016 https://doi.org/10.21082/jpp.v25n2.2016 http://www.sersc.org/journals/IJUNESST/vol3_no4/3.pdf https://doi.org/10.19184/jpe.v11i2.6453 https://doi.org/10.1007/978-3-319-05825-2_1 https://doi.org/10.1177/2042753018785180 Paper—E-Learning Based Web Programming Course in the COVID 19 Pandemic Time [14] Yang, C., Novaliendry, D., Chen, J., Wattimena, F. Y., Renyaan, A. S., Lizar, Y., & Nasution, T. (2020). Prediction of Mortalityinthe Hemodialysis Patient with Diabetes using Support Vector Machine. Revista Argentina de Clínica Psicológica, XXIX, 219–232. https:// doi.org/10.24205/03276716.2020.823 [15] Novaliendry, D., Wattimena, F. Y., Renyaan, A. S., Lubis, A. S., Ramadhani, D., Lizar, Y., Guci, A., Rais, S., Sriwahyuni, T., Al Kutsi, M. I., Yang, C. H., Verawardina, U., Nasution, T., & Khairul. (2020). Development of an Expert System Application to Detect Vitamin Deficiencies in the Human Body. Revista Argentina de Clínica Psicológica, XXIX, 956–965. https://doi.org/10.24205/03276716.2020.1092 [16] Novaliendry, D., Hendriyani, Y., Yang, C-H., & Hamimi, H. (2015). The Optimized K-Means Clustering Algorithms to Analyezed the Budget Revenue Expenditure in Padang. Proceeding of International Conference on Electrical Engineering, Computer Science and Informatics, 61–64. https://doi.org/10.11591/eecsi.v2i1.771 [17] Krismadinata, Unung, V., Nizwardi, J., Fahmi, R., Sukardi, Putu, S., Dochi, R., Arina, L. L., John, F., Ari, S. R. A., Dony, N. (2020). Blended Learning as Instructional Model in Voca- tional Education: Literature Review. Universal Journal of Educational Research, 8(11b), 5801–5815. https://doi.org/10.13189/ujer.2020.082214 [18] Novaliendry, D., Darmi, R., Hendriyani, Y., Nor, M., & Azman, A. (2020). Smart Learning Media Based on Android Technology. International Journal of Innovation, Creativity and Change., 12(11), 715–735. [19] Dony, N., Muhammad, A., Putra, J., Titi, S., Asrul, H., Yasdinul, H., Dedy, I., Dochi, R., & Sartika, A. (2021). Development of Smart Learning Media Model Based on Android, International Journal of Engineering Research and Technology. ISSN 0974-3154, 14(1), 168–178. 7 Authors Dony Novaliendry, S.Kom., M.Kom., Born and raised in Padang on November 4, 1975. Is the son of Prof. Dr. H. Aljufri B. Syarif, M.Sc (Alm) with Endang Ratna Sulis- tri. The 4th child of 4 siblings. He completed his undergraduate degree at Gunadarma University, majoring in Information Systems and continued his master’s degree at Gad- jah Mada University, majoring in Computer Science. Currently in the completion stage of S3 at the National Kaohsiung University of Science and Technology (NKUST) in Taiwan in the field of Bio-Informatics. Currently interested in developing themselves in the fields of bio-informatics, bio-medics, Artificial Intelligence, Decision Support Sys- tem, Multimedia, Big Data and Data Mining. Email: dony.novaliendry@ft.unp.ac.id Dr. Asrul Huda, S.Kom., M.Kom is currently working at,UniversitasNegeri Padang. Indonesia, as Senior Lecturer. Experienced in Technical Vocational Educa- tion and Training, especially in Electrical Engineering, since 2010 until now. Currently has a degree of Doctorate in Universitas Negeri Padang. Indonesia. Research interest includes TVET, Multimedia Graphic Design, Educational research. Having 17 Pub- lications in Journals. Completed 15 projects and has a vast experience in the field of Multimedia and graphic design. Email: asrulhuda@gmail.com Muhammad Rinov Cuhanazriansyah, was born on 15 November 1991 in Bengkulu City. Come from a simple family with a culture of work in education. He received formal education at SD Negeri 01 Bengkulu City, which is quite well known, and graduated in 2003. Then he continued his studies at SMP Negeri 01 Bengkulu City, graduated in iJIM ‒ Vol. 15, No. 20, 2021 129 https://doi.org/10.24205/03276716.2020.823 https://doi.org/10.24205/03276716.2020.823 https://doi.org/10.24205/03276716.2020.1092 https://doi.org/10.11591/eecsi.v2i1.771 https://doi.org/10.13189/ujer.2020.082214 mailto:dony.novaliendry@ft.unp.ac.id mailto:asrulhuda@gmail.com Paper—E-Learning Based Web Programming Course in the COVID 19 Pandemic Time 2006, and at SMA Negeri 05 Kota Bengkulu, graduated in 2009. Furthermore, follow- ing the selection of SMPTN and accepted in the Department of Informatics, Faculty of Engineering, University of Bengkulu. He has been studying in the Department of Informatics, State University of Bengkulu since 2009 while working freelance as a Data Administrator and assisting lecturers in research as Programmers in several Educational Institutions and Graduated in 2015 with a Thesis entitled “GIS-based Applications for Mapping Fire Prone Areas and Fire Danger Levels with Location Based Service Method and Calculation of Fire Weather Index (FWI) Bengkulu City Case Study”. After earning a Bachelor of Engineering, he got a job as an honorarium at the Rector of Bengkulu University as Administrator of Student Affairs Data and while doing culinary entrepreneurship in Bengkulu City since 2016 until now. In 2020, trying to continue his Masters studies in the Technology and Vocational Education Program at Padang State University until now has the status of a postgraduate student. This author can be contacted at the following address. University Address: Technol- ogy and Vocational Education Program at Padang State University, Jl. Prof. Dr. Hamka, West Freshwater., Kec. Padang Utara, Kota Padang, West Sumatra 25171, Telephone (0751) 7053902. Home address: Jalan Zulkifli No.45 RT/RW 01/02 Kel. Bajak, Kec. Teluk Segara, Bengkulu City, Telephone/Hp. 082160570821. Email: muhrinov15@ gmail.com/hack_rinov15@yahoo.co.id. Hesty Kumala Sani, born in Simpang III Bedeng, West Pasaman, May 25, 1997. Obtained a Bachelor of Education (S.Pd) from Putra Indonesia University “YPTK” Padang in 2020. Currently running a Masters Program at Padang State University. In addition, the author has also received a scholarship during his undergraduate studies at Putra Indonesia University “YPTK” Padang and has also received a Malaysia-Singapore Comparative Study scholarship in 2019 which was given by the campus. The author can be contacted at the email: hestykumala05@gmail.com. Herisvan Hendra is currently working in a Technology and Vocational Educa- tion, Faculty of Engineering, Universitas Negeri Padang, Padang, Indonesia. Email: herisvan321@gmail.com Joni Karnando is currently working in a Technology and Vocational Educa- tion, Faculty of Engineering, Universitas Negeri Padang, Padang, Indonesia. Email: jonikarnando21@gmail.com Article submitted 2021-05-04. Resubmitted 2021-07-06. Final acceptance 2021-07-07. Final version published as submitted by the authors. 130 http://www.i-jim.org mailto:muhrinov15@gmail.com/hack_rinov15@yahoo.co.id mailto:muhrinov15@gmail.com/hack_rinov15@yahoo.co.id mailto:hestykumala05@gmail.com mailto:herisvan321@gmail.com mailto:jonikarnando21@gmail.com