PAPER OPEN ACCESS 7KHGHVLJQRIOHDUQLQJPHGLDXVLQJ ...

11
Journal of Physics: Conference Series PAPER • OPEN ACCESS The design of learning media using JavaScript and its implementation in the local web server To cite this article: S Laini et al 2021 J. Phys.: Conf. Ser. 1839 012010 View the article online for updates and enhancements. You may also like CERN’s new era for calorimeters Dave Barney - Organic Light Emitting Devices for Lighting Joseph J. Shiang - Is One of the E’s in IEEE for Environmental? James M. Fenton - This content was downloaded from IP address 65.21.228.167 on 15/10/2021 at 03:32

Transcript of PAPER OPEN ACCESS 7KHGHVLJQRIOHDUQLQJPHGLDXVLQJ ...

Page 1: PAPER OPEN ACCESS 7KHGHVLJQRIOHDUQLQJPHGLDXVLQJ ...

Journal of Physics Conference Series

PAPER bull OPEN ACCESS

The design of learning media using JavaScript andits implementation in the local web serverTo cite this article S Laini et al 2021 J Phys Conf Ser 1839 012010

View the article online for updates and enhancements

You may also likeCERNrsquos new era for calorimetersDave Barney

-

Organic Light Emitting Devices for LightingJoseph J Shiang

-

Is One of the Ersquos in IEEE forEnvironmentalJames M Fenton

-

This content was downloaded from IP address 6521228167 on 15102021 at 0332

Content from this work may be used under the terms of the Creative Commons Attribution 30 licence Any further distributionof this work must maintain attribution to the author(s) and the title of the work journal citation and DOI

Published under licence by IOP Publishing Ltd

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

1

The design of learning media using JavaScript and its

implementation in the local web server

S Laini1 A N Kalam1 S Anjelina1 S Alfat1

1Departement of Physics Education Teaching and Education Faculty Halu Oleo

University HEA Mokodompit Street Kendari 93232 Indonesia

E-Mail sayahdinalfatuhoacid

Abstract The ranking of Indonesian science competencies at the global level in 2018 was in

the 70th of 78 countries The low student learning activities is one of the trigger factors One

impacts the use of learning media which is not appropriate such as decreased learning

motivation which ultimately impacts the low student learning activities This research intends

to design learning media based on offline using JavaScript programming language and

combined in a local network system The method used is Research and Development The

specifications of the tools and materials used are MAC Mini Intel Core I7 Quad-Core 36 GHz

16 GB DDR4 memory and SATA 2 TB HDD The use of learning media is expected to

overcome several problems in conventional learning and become one of the solutions to

distance learning systems

1 Introduction

Based on data of the Program for International Student Assessment (PISA) in 2018 Indonesia was the

lower ranking in the world PISA was an international assessment method that becomes an indicator to

measure student competence at the global level The competence of science score Indonesiarsquos ranks

was at 70th of 78 countries [1] Basically the quality of a countrys education depends on the learning

activities that were carried out [2] In learning activities there were two very important elements such

as learning methods and media They are interrelated with another The learning media was a tool that

can be delivered and distributed knowledge from learning resources structurally so to create effective

and efficient environmental learning [3] Generally the media is a communication tool which has a

purpose to optimize the teaching and learning process [4] Meanwhile the objectives of the learning

media as follow 1) the teaching materials become more standardized 2) the learning becomes more

interesting and interactive 3) the increasing quality of learning 4) the learningrsquos time becomes more

efficient 5) the increasing motivation of student 6) the learning can be done anytime and anywhere

and 7) the role of teaching staff is maximized [5] Specifically the learning media has three forms as

follows audio visual and audio-visual The audio is media which is then recorded sound form [6]

Visual media are a form of media such as pictures models or other tools have given the real

experiences to a student in the learning process [7] Audio-visual has characteristics such as images

sounds and interactive printed media and facilitates students to understand abstract concepts [8] One

of the three media audio-visual was the most optimal and compatible learning media which is used in

the learning process [9] In addition the use of audio-visual is believed as the solver problem in the

learning process [10] In learning media the use of audio-visual is utilizing Information and

Communication Technology

The Information and Communication Technology has an important role in developing and

increasing the quality of learning [11] Currently there are many forms of utilization the information

and communication technology in education who has been carried out such as Google Drive

application [12] Edmodo [13] Google Classroom [14] Ms Excel [15] Adobe Flash [16] Matlab

[17] and GeoGebra [18] However overall the media are closed source that means users need quite an

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

2

expensive cost [19] In addition these applications are not familiar with students Teaching and

learning activities teachers must implicate compatible learning media so that has results that are by

specified outcomes [20] Currently one of the most popular applications used to design learning media

is JavaScript JavaScript is a dynamic and popular programming language [21] Furthermore this

application can be accessed through a web browser such as Google Chrome Mozilla Firefox Safari

and others Equally important this application can be combined with HTML and CSS to generate

learning media with backgrounds animated videos and other interesting interactive menus In

addition because the final appearance of JavaScript in the form of a web page allows this application

to be accessed with the help of a local web server

Local web server is offline internet network system which the provider websites can be accessed of

charge in certain areas for free [22] This system is not new to information systems and networks in

schools This is because some schools have used this network system to facilitate school

administrators in managing school data Moreover this system is used for the online examination

system and student assessment in schools [23] However this system has not been maximally utilized

for the learning media provider and storage system [24] More specifically this system can be

developed into a virtual class-based learning tool which overall the teaching materials are provided

directly by the teacher himself Realize about this so considered necessary to existence an attractive

and structured interactive JavaScript-based learning media design and its application on the local web

server system that can be applied to the education system Generally the objective of the study

consists of two big points as follows (1) to design learning media using JavaScript programming

language (2) combining websites as learning media in the local network system

2 Method

The method used in this research was used Research and Development This research was conducted

to result in a product and test the product [25] Generally the research has the main two stages as

follows

21 Learning Media Design

This stage intends to design learning media using the JavaScript programming language which

integrated with Visual Studio Code application [26] This application like a text editor which is

integrated the JavaScript programming language In addition we use Notepad ++ which displayed

programming language worksheets more clearly [27] The main teaching materials for this learning

media are Stationary and Traveling Waves which are the main topic in Senior High School at

semester XI To design the media we use the laptop with specifications Acer Aspire ES1-432 series

Intelreg Celeronreg Processor N3350 Intelreg HD Graphics 500GB HDD 2GB DDR3 L Memory HD

LED True cinematic view Create a Local Web Server

22 Create a Local Web Server

To design the Local Web Server system we use Web Server for Chrome this application is a free

download [28] To design this system we use computers with specifications namely MAC Mini Intel

Core I7 Quad-Core 36 GHz 16 GB DDR 4 memory 2 TB SATA HDD Then to access the learning

media from the server to the laptop user we used the Router with the specifications namely TP-LINK

3G 4G Router MR3420 [29] Here since the research is an outset study the network topology design

for Local Web Server was designed without using Raspberry Pi or direct researchers using a computer

server with specifications as mentioned above The operating system for this server uses MacOS

Catalina version 10152 [30] An illustration of network topology design will be seen in Figure 1

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

3

Figure 1 Network topology design

Figure 2 Flowchart the local web server

Since the research is used Research and Development we used the Laboratory of the Physics

Education Department Teaching and Education Faculty Halu Oleo University as a place to carry out

the two principal stages above Not only completing the two principal stages above but this research

will also test the results obtained from the two stages above by using several additional tools such as

Handphone and Laptops To be clearer all stages the research can be illustrated in Figure 2 This

activity carried out around the Physical Education Department Laboratory This is because the data

storage server (router) is around that location

Figure 3 Flowchart research methods

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

4

3 Testing and Implementation

That Improving student learning outcomes teachers can use the offline method without having to

face-to face in class Here this research intends to develop learning media for educational institutions

using the JavaScript and its implementation to the webserver system

a Making Learning Media Using JavaScript

The learning media be made using the JavaScript in a visual studio code application To create the

media researchers divided learning media into 4 main pages as in Figure 4 Which every main page

content can be accessed offline

Figure 4 Display the learning media main page

To create of page in Figure 4 The first step is to save the data and extension file HTML The next

step is to write the command or syntax according to Figure 5 on some of these command lines there

are some functions commonly used in HTML-based web creation such as ldquolt DOCTYPE htmlgtrdquo

ldquolthtmlgtrdquo ldquoltheadgtrdquo ldquoltbodygtrdquo these commands fourth functions are functions that must be

present in every web-based creation HTML or JavaScript While other functions such as lttitlegt

ldquoltheadergtrdquo ldquolthgtrdquo ldquoltagtrdquo ldquoltnavgtrdquo ldquoltpgtrdquo ldquoltsectiongtrdquo ldquolttennisgtrdquo and color are additional

functions to modify the appearance of HTML pages

Figure 5 JavaScript program to HTML

Because on that page a hyperlink will be displayed which connects with main page to other pages

the ldquohrefrdquo function becomes the main function to create the hyperlink The main point of ldquohrefrdquo is

connectivity between HTML pages so it must be remembered the address of the file that must be

connected Some ldquohrefrdquo rules are as follows

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

5

Table 1 Description of href function

Syntax Description href = indexhtml indexhtml directly in the main folder href = indexhtml indexhtml is on the previous folder href = Materiindexhtml indexhtml is in the main material folder href = Materiindexhtml indexhtml is in the Material folder outside the main

folder

In Figure 5 The page display does not have a background For this reason this section will explain

the background settings on HTML pages The background settings command can be seen in Figure 6

These three functions have respective roles such as the header intends to set the appearance of the

heading part nav has the function to set the navigation menu of the main menu section while the

footer has the function of regulating the display at the bottom of the HTML page In the three

commands above an additional command was included ldquobackground-colorrdquo ldquopaddingrdquo

ldquobackgroundrdquo ldquotext-alignrdquo ldquofont-sizerdquo and ldquocolorrdquo which commands have their respective roles

and also those commands are optional which while the command is not activated then the default

system applies For more details about the commands in the ldquoheaderrdquo ldquonavrdquo and ldquofooterrdquo can be

seen through the web page [31] The display of the use of commands in Figure 6(a) can be seen in

Figure 6 (b)

(a) (b)

Figure 6 (a) Settings program background layout and (b) Display HTML page background

After making the initial appearance of the media above the next step is to enter the material content

because some content consists of images and videos For that we will explain how to input images

and videos To include images in the material it is necessary to create an image folder in the main

folder this aims to make it easier to find the program file that is displayed The coding used to insert the

image is ldquoltimg src = file_namejpggtrdquo functions to call a file written according to the name of the

image then in the coding it is necessary to add a style function consisting of ldquowidthrdquo ldquoheightrdquo and

ldquomargin -rightrdquo The entered program language can be seen in Figure 7(a) and the display of the

results obtained from programming can be seen in Figure 7(b) As for inserting videos coding used is

very easy because it has the same function in the program inserting images but in video coding the

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

6

functions that need to be used are ltvideogt and ltvideogt as coding for calling videos additional

functions that need to be used namely a type that serves to find out the type of video data entered

(a) (b)

Figure 7 (a) Image program input and (b) HTML display after inserting images

To included images in the material it is necessary to create an image folder in the main folder this

aims to make it easier to find the program file that is displayed The syntax used to insert an image is

ltimg src = filenamejpggt the syntax function is to call a file written according to the name of the

image Some additional functions such as width height and margin-right also added to Syntax above

It aims to adjust the appearance of images on HTML pages The program command used can be seen

in Figure 7(a) and the display of the results obtained from programming can be seen in Figure 7(b)

Similar to the image input command the video input command also has the same Syntax However

Syntax video has additional functions namely ltvideogt and ltvideogt which aim to display videos

on HTML pages In addition additional functions type are inputted on file call commands For more

details about the program can be seen in Figure 8

(a) (b)

Figure 8 (a) Inserting program video to HTML and (b) Video display results on HTML pages

Presently lets make learning media with content that contains mathematical equations and symbols

Making equations on HTML pages is similar to making equations and mathematical symbols on

LaTeX [32] However there are additional commands such as lines (7) ndash (15) in Figure 9(a) this

command is a library for managing the display of mathematical equations and symbols This command

must be in every mathematical equation and symbol creation

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

7

Figure 9 (left) Inputting equations in HTML and (right) Results displayed on HTML pages

The making of this media intends to help teachers and students in the teaching and learning process

Teachers can create their own media with the desired design so that it helps students get good and free

learning at school In addition the benefits of using these learning media can be accessed offline then

the teacher can make questions and quiz in the JavaScript program the teacher does not need to prepare

a piece of paper to record students answers with these web pages students can answer via the web and

upload past students answers sent then the accumulated value can come out from the answer worked

on By using the JavaScript programming language the learning media can be used easily Because

the time given is very short we only fill in some of the content in it such as material animation

video and images for more details can be seen in Figure 10

Figure 10 Layout Display of (a) Homepage (b) Material (c) Questions and (d) References

b Making Learning Media Using JavaScript

This is an important part of this research Here we will integrate the learning media that was created in

the previous session using a local web server To design this system we use a router as a liaison

between the server and client which means we use a wireless system to connect one device to another

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

8

(server and client) Illustration of connectivity processes between routers servers and clients are seen

in Figure 11 For the record we use an offline network system that is not connected to the internet

network This is seen by the presence of the red cross symbol in Figure 11

The application of a local web server for sharing learning media data using JavaScript programming

language was tested on 11 students or clients in the Physics Education Laboratory Building FKIP

Halu Oleo University In general the test shows that the local web server can provide access to

information to all clients without connecting to the internet or being offline Besides that to access each

page can be done quickly and most importantly compatible with all devices The trial process can be

seen in Figure 11 From this trial it can be used in schools to become alternative teaching and learning

in virtual classrooms [33]

Figure 11 Illustration of Display Router Used Using 1 Server and 11 Clients

(a) (b) (c)

Figure 12 The Local Web Server Testing Process (a) Media Folders (b) Web Media (c) Clients with

11 Students

4 Summary and Recomendation

Research on the design of learning media using the JavaScript programming language and implemented

on the local web server system has been carried out Some things to note in this study are this learning

media is very easy to make and most importantly easy to use This is proven by the programming

language that has been integrated into the Visual Studio Code application and Notepad ++ Not only

that but JavaScript can also be paired up in HTML and CSS languages To make it easier for users to

input data in the form of videos images and animations The use of a local web server that functions

like file sharing so that data is on the server computer can be accessed using a computer which has

entered IP address Here to prove it we use 12 laptop clients simultaneously that are connected using

a router This research is preliminary so in the future we want to continue by testing the media in

several schools in Kendari In addition this research will be more interesting if integrating the media

into the RTRW Net network system [34] This can help overcome information gaps in schools in

which internet access is limited

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

9

Acknowledgments

Thanks to the Rector of Halu Oleo University and the Chairman of Education and Teacher Training

Faculty And also to our friends who help us to complete our research

References

[1] A Pininta ldquoIndonesias Low Student in PISA Nadiem Prepares these 5 Strategiesrdquo

wwwkompascom 2020 httpsedukasikompascomread20200405154418571 indonesias-

low-student-in-pisa-nadiem-prepares-these-5-strategiespage=all (accessed Jul 14 2020)

[2] C Sunaengsih 2016 The Impact of Learning Media on the Quality of Learning on Accredited A

Elementary Schools Elem Sch Pulpit J 3 (2) pp 183ndash190

[3] B Widiantoro and R Lusia 2015 The Schoon-Based Media Development of E-Learning Media

on Basic Competence Understands the Atomic Model of Semiconductors in SMKN 1 Jetis

Mojokerto Educ J Electr Eng 04 (2) pp 501ndash506

[4] Sohibun and F Y Ade 2017 Virtual Class Based Media Development Using Google Drivesrdquo

Teach Tarb Journals 2 (2) p 121

[5] I M Astra and D Ruharman 2012 Mobile Learning Application for Physics Using Adobe Flash

as a Supporting Instructional Media Educ Cult Journals 18 pp 174ndash180

[6] A Wicaksono 2017 The Role of Audio Media in Improving the Learning Process of a Shorts

Story Appreciation J Islam Multidiscip 2 (1) p 67

[7] A Baidawi 2016 Using Visual Media in Teaching Speaking J Lang Lit 10 (1) p 54

[8] R Fuady and A A Mutalib 2018 Audio-Visual Media in Learning J K6 Educ Manag 1 (2) pp

1ndash6

[9] N Asikin and E Daningsih 2018 Development Audio-Visual Learning Media of Hydroponic

System on Biotechnology Topik For Senior High Schools 174 pp 197ndash201

[10] Suyitno 2015 Pembuatan Media Pembelajaran Audio-Visual Untuk Materi Sistem Pemindah

Tenaga Otomotif J Pendidik Tek Otomotif 05 (02) pp 210ndash218

[11] Budiman 2014 The Role of Information Technology and Communication in Education J

Islam Educ 8 (I) pp 31ndash43

[12] R M Rish K Bylen H Vreeland and C C Wimberley 2015 Using Google Drive to Write

Dialogically with Teachers in Handbook of Research on Teacher Education in the Digital Age

Pennslyvania IGI Global 357ndash379

[13] H Marsquoazi and K Janfeshan 2018 The effect of Edmodo social learning network on Iranian EFL

learners writing skill Cogent Educ 5(1) pp 1ndash17

[14] K R Heggart and J Yoo 2018 Getting the most from google classroom A pedagogical

framework for tertiary educators Aust J Teach Educ 43 (3) pp 140ndash153

[15] S W Palocsay I S Markham and S E Markham 2010 Utilizing and teaching data tools in Excel

for exploratory analysis J Bus Res 63 (2) pp 191ndash206

[16] S D Aji M N Hudha C Huda and G Gufran 2018 Computer Animation with Adobe Flash

Professional Cs6 in Newtonrsquos Law in IOP Conference Series Materials Science and

Engineering 288 (1) pp 1ndash4

[17] D Ibrahim 2011 Engineering simulation with MATLAB Improving teaching and learning

effectiveness Procedia Computer Science 3 pp 853ndash858

[18] Rahmat Fahinu S Alfat and E Maryanti 2019 The Effect of STAD cooperative model by

GeoGebra assisted on increasing studentsrsquo geometry reasoning ability based on levels of

mathematics learning motivation Journal of Physics Conference Series 1315 (1)

[19] A Baarah A Aloqaily Z Salah M Zamzeer and M Sallam 2019 Machine learning approaches

for predicting the severity level of software bug reports in closed source projects Int J Adv

Comput Sci Appl 10 (8) pp 285ndash294

[20] D Nafisah and A Ghofur 2020 The Development of the Android Barcode Based Media Study

for IPS J Educ Learn Technol 1 (2) pp 144ndash152 2020

[21] C Surya and M Jannah Desain Web bagi pemula menggunakan html dan css (Jakarta PT Elex

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

10

Media Komputindo)

[22] D Rachmawan D Irwan and H Argyawati 2016 Application of Cargo Techniques on Local

Web Server by NTH Methods Using Microtics J Comput Sci Res Embed Log Syst 4(2) pp

98ndash108

[23] Y Meisella Kristania I Maryani and A Iqbal 2017 The Web-Based Academic Information

System of Texting in SMKN 2 Banyumas J Sci dan Manag 5(2) pp 82ndash89

[24] S Ramdhani and D Kurnia 2018 The Engineering of Computerized Web-Based Test System

Using an Open-Source Operating System in SD Swasta Alwashiyah 639 Medan J Comput

Sci Bus 9 pp 1932ndash1945

[25] M Kamal 2020 Research and Development ( R amp D ) Tadribat Drill Madrasah Aliyah Class X

Teaching Materials Arabic Language J Hist Educ Humanit 4(1) pp 10ndash18

[26] S Ohri 2017 TypeScript 2X by Example (Birmingham Packt Publishing Ltd)

[27] C Kesuma and M D Juniati 2020 The System for Small-Village Administration Information

(SIAKSA) is Web-Based in Alangamba Village of Cilacap District J Speed-Sentra Res Eng

Educ 12 (1) p 1

[28] R C Iskandar Aki Sridhar 2019 Web Development with Angular and Bootstrap Embrace

Responsive Web Design and Build Adaptive Angular Web Applications (3rd Editio

Birmingham UK Packt Publishing Ltd)

[29] F N Ugwoke and K C Okafor 2017 Cloud-DLT A Disruptive Cloud based Digital Library

using Lean Design Technique Circ Comput Sci 201 (01) pp 27ndash36

[30] N H Ahmad 2020 Tableau For Beginner Data Analysis and Visualization 101 (Bandung

Haszeli Ahmad

[31] N Ifada 2019 Interactive Web Programming Learning Using CMS Media Teachers and

Students in SMKN 1 Kamal Sci J Pangabdhi 5(2)

[32] V A Nechitailenko 2016 Converting LaTeX to HTML5 and EPUB3  A case study 4 pp 1ndash5

[33] R Satra and A M Mude 2019 The Performance Assessment System is Devoted to Society

ILKOMAS 1 (1) pp 1ndash7

[34] O W Purbo 2007 Practical Guidance RTRW-Net amp Wajanbolic Antenna (Jakarta Info

Komputer)

Page 2: PAPER OPEN ACCESS 7KHGHVLJQRIOHDUQLQJPHGLDXVLQJ ...

Content from this work may be used under the terms of the Creative Commons Attribution 30 licence Any further distributionof this work must maintain attribution to the author(s) and the title of the work journal citation and DOI

Published under licence by IOP Publishing Ltd

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

1

The design of learning media using JavaScript and its

implementation in the local web server

S Laini1 A N Kalam1 S Anjelina1 S Alfat1

1Departement of Physics Education Teaching and Education Faculty Halu Oleo

University HEA Mokodompit Street Kendari 93232 Indonesia

E-Mail sayahdinalfatuhoacid

Abstract The ranking of Indonesian science competencies at the global level in 2018 was in

the 70th of 78 countries The low student learning activities is one of the trigger factors One

impacts the use of learning media which is not appropriate such as decreased learning

motivation which ultimately impacts the low student learning activities This research intends

to design learning media based on offline using JavaScript programming language and

combined in a local network system The method used is Research and Development The

specifications of the tools and materials used are MAC Mini Intel Core I7 Quad-Core 36 GHz

16 GB DDR4 memory and SATA 2 TB HDD The use of learning media is expected to

overcome several problems in conventional learning and become one of the solutions to

distance learning systems

1 Introduction

Based on data of the Program for International Student Assessment (PISA) in 2018 Indonesia was the

lower ranking in the world PISA was an international assessment method that becomes an indicator to

measure student competence at the global level The competence of science score Indonesiarsquos ranks

was at 70th of 78 countries [1] Basically the quality of a countrys education depends on the learning

activities that were carried out [2] In learning activities there were two very important elements such

as learning methods and media They are interrelated with another The learning media was a tool that

can be delivered and distributed knowledge from learning resources structurally so to create effective

and efficient environmental learning [3] Generally the media is a communication tool which has a

purpose to optimize the teaching and learning process [4] Meanwhile the objectives of the learning

media as follow 1) the teaching materials become more standardized 2) the learning becomes more

interesting and interactive 3) the increasing quality of learning 4) the learningrsquos time becomes more

efficient 5) the increasing motivation of student 6) the learning can be done anytime and anywhere

and 7) the role of teaching staff is maximized [5] Specifically the learning media has three forms as

follows audio visual and audio-visual The audio is media which is then recorded sound form [6]

Visual media are a form of media such as pictures models or other tools have given the real

experiences to a student in the learning process [7] Audio-visual has characteristics such as images

sounds and interactive printed media and facilitates students to understand abstract concepts [8] One

of the three media audio-visual was the most optimal and compatible learning media which is used in

the learning process [9] In addition the use of audio-visual is believed as the solver problem in the

learning process [10] In learning media the use of audio-visual is utilizing Information and

Communication Technology

The Information and Communication Technology has an important role in developing and

increasing the quality of learning [11] Currently there are many forms of utilization the information

and communication technology in education who has been carried out such as Google Drive

application [12] Edmodo [13] Google Classroom [14] Ms Excel [15] Adobe Flash [16] Matlab

[17] and GeoGebra [18] However overall the media are closed source that means users need quite an

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

2

expensive cost [19] In addition these applications are not familiar with students Teaching and

learning activities teachers must implicate compatible learning media so that has results that are by

specified outcomes [20] Currently one of the most popular applications used to design learning media

is JavaScript JavaScript is a dynamic and popular programming language [21] Furthermore this

application can be accessed through a web browser such as Google Chrome Mozilla Firefox Safari

and others Equally important this application can be combined with HTML and CSS to generate

learning media with backgrounds animated videos and other interesting interactive menus In

addition because the final appearance of JavaScript in the form of a web page allows this application

to be accessed with the help of a local web server

Local web server is offline internet network system which the provider websites can be accessed of

charge in certain areas for free [22] This system is not new to information systems and networks in

schools This is because some schools have used this network system to facilitate school

administrators in managing school data Moreover this system is used for the online examination

system and student assessment in schools [23] However this system has not been maximally utilized

for the learning media provider and storage system [24] More specifically this system can be

developed into a virtual class-based learning tool which overall the teaching materials are provided

directly by the teacher himself Realize about this so considered necessary to existence an attractive

and structured interactive JavaScript-based learning media design and its application on the local web

server system that can be applied to the education system Generally the objective of the study

consists of two big points as follows (1) to design learning media using JavaScript programming

language (2) combining websites as learning media in the local network system

2 Method

The method used in this research was used Research and Development This research was conducted

to result in a product and test the product [25] Generally the research has the main two stages as

follows

21 Learning Media Design

This stage intends to design learning media using the JavaScript programming language which

integrated with Visual Studio Code application [26] This application like a text editor which is

integrated the JavaScript programming language In addition we use Notepad ++ which displayed

programming language worksheets more clearly [27] The main teaching materials for this learning

media are Stationary and Traveling Waves which are the main topic in Senior High School at

semester XI To design the media we use the laptop with specifications Acer Aspire ES1-432 series

Intelreg Celeronreg Processor N3350 Intelreg HD Graphics 500GB HDD 2GB DDR3 L Memory HD

LED True cinematic view Create a Local Web Server

22 Create a Local Web Server

To design the Local Web Server system we use Web Server for Chrome this application is a free

download [28] To design this system we use computers with specifications namely MAC Mini Intel

Core I7 Quad-Core 36 GHz 16 GB DDR 4 memory 2 TB SATA HDD Then to access the learning

media from the server to the laptop user we used the Router with the specifications namely TP-LINK

3G 4G Router MR3420 [29] Here since the research is an outset study the network topology design

for Local Web Server was designed without using Raspberry Pi or direct researchers using a computer

server with specifications as mentioned above The operating system for this server uses MacOS

Catalina version 10152 [30] An illustration of network topology design will be seen in Figure 1

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

3

Figure 1 Network topology design

Figure 2 Flowchart the local web server

Since the research is used Research and Development we used the Laboratory of the Physics

Education Department Teaching and Education Faculty Halu Oleo University as a place to carry out

the two principal stages above Not only completing the two principal stages above but this research

will also test the results obtained from the two stages above by using several additional tools such as

Handphone and Laptops To be clearer all stages the research can be illustrated in Figure 2 This

activity carried out around the Physical Education Department Laboratory This is because the data

storage server (router) is around that location

Figure 3 Flowchart research methods

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

4

3 Testing and Implementation

That Improving student learning outcomes teachers can use the offline method without having to

face-to face in class Here this research intends to develop learning media for educational institutions

using the JavaScript and its implementation to the webserver system

a Making Learning Media Using JavaScript

The learning media be made using the JavaScript in a visual studio code application To create the

media researchers divided learning media into 4 main pages as in Figure 4 Which every main page

content can be accessed offline

Figure 4 Display the learning media main page

To create of page in Figure 4 The first step is to save the data and extension file HTML The next

step is to write the command or syntax according to Figure 5 on some of these command lines there

are some functions commonly used in HTML-based web creation such as ldquolt DOCTYPE htmlgtrdquo

ldquolthtmlgtrdquo ldquoltheadgtrdquo ldquoltbodygtrdquo these commands fourth functions are functions that must be

present in every web-based creation HTML or JavaScript While other functions such as lttitlegt

ldquoltheadergtrdquo ldquolthgtrdquo ldquoltagtrdquo ldquoltnavgtrdquo ldquoltpgtrdquo ldquoltsectiongtrdquo ldquolttennisgtrdquo and color are additional

functions to modify the appearance of HTML pages

Figure 5 JavaScript program to HTML

Because on that page a hyperlink will be displayed which connects with main page to other pages

the ldquohrefrdquo function becomes the main function to create the hyperlink The main point of ldquohrefrdquo is

connectivity between HTML pages so it must be remembered the address of the file that must be

connected Some ldquohrefrdquo rules are as follows

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

5

Table 1 Description of href function

Syntax Description href = indexhtml indexhtml directly in the main folder href = indexhtml indexhtml is on the previous folder href = Materiindexhtml indexhtml is in the main material folder href = Materiindexhtml indexhtml is in the Material folder outside the main

folder

In Figure 5 The page display does not have a background For this reason this section will explain

the background settings on HTML pages The background settings command can be seen in Figure 6

These three functions have respective roles such as the header intends to set the appearance of the

heading part nav has the function to set the navigation menu of the main menu section while the

footer has the function of regulating the display at the bottom of the HTML page In the three

commands above an additional command was included ldquobackground-colorrdquo ldquopaddingrdquo

ldquobackgroundrdquo ldquotext-alignrdquo ldquofont-sizerdquo and ldquocolorrdquo which commands have their respective roles

and also those commands are optional which while the command is not activated then the default

system applies For more details about the commands in the ldquoheaderrdquo ldquonavrdquo and ldquofooterrdquo can be

seen through the web page [31] The display of the use of commands in Figure 6(a) can be seen in

Figure 6 (b)

(a) (b)

Figure 6 (a) Settings program background layout and (b) Display HTML page background

After making the initial appearance of the media above the next step is to enter the material content

because some content consists of images and videos For that we will explain how to input images

and videos To include images in the material it is necessary to create an image folder in the main

folder this aims to make it easier to find the program file that is displayed The coding used to insert the

image is ldquoltimg src = file_namejpggtrdquo functions to call a file written according to the name of the

image then in the coding it is necessary to add a style function consisting of ldquowidthrdquo ldquoheightrdquo and

ldquomargin -rightrdquo The entered program language can be seen in Figure 7(a) and the display of the

results obtained from programming can be seen in Figure 7(b) As for inserting videos coding used is

very easy because it has the same function in the program inserting images but in video coding the

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

6

functions that need to be used are ltvideogt and ltvideogt as coding for calling videos additional

functions that need to be used namely a type that serves to find out the type of video data entered

(a) (b)

Figure 7 (a) Image program input and (b) HTML display after inserting images

To included images in the material it is necessary to create an image folder in the main folder this

aims to make it easier to find the program file that is displayed The syntax used to insert an image is

ltimg src = filenamejpggt the syntax function is to call a file written according to the name of the

image Some additional functions such as width height and margin-right also added to Syntax above

It aims to adjust the appearance of images on HTML pages The program command used can be seen

in Figure 7(a) and the display of the results obtained from programming can be seen in Figure 7(b)

Similar to the image input command the video input command also has the same Syntax However

Syntax video has additional functions namely ltvideogt and ltvideogt which aim to display videos

on HTML pages In addition additional functions type are inputted on file call commands For more

details about the program can be seen in Figure 8

(a) (b)

Figure 8 (a) Inserting program video to HTML and (b) Video display results on HTML pages

Presently lets make learning media with content that contains mathematical equations and symbols

Making equations on HTML pages is similar to making equations and mathematical symbols on

LaTeX [32] However there are additional commands such as lines (7) ndash (15) in Figure 9(a) this

command is a library for managing the display of mathematical equations and symbols This command

must be in every mathematical equation and symbol creation

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

7

Figure 9 (left) Inputting equations in HTML and (right) Results displayed on HTML pages

The making of this media intends to help teachers and students in the teaching and learning process

Teachers can create their own media with the desired design so that it helps students get good and free

learning at school In addition the benefits of using these learning media can be accessed offline then

the teacher can make questions and quiz in the JavaScript program the teacher does not need to prepare

a piece of paper to record students answers with these web pages students can answer via the web and

upload past students answers sent then the accumulated value can come out from the answer worked

on By using the JavaScript programming language the learning media can be used easily Because

the time given is very short we only fill in some of the content in it such as material animation

video and images for more details can be seen in Figure 10

Figure 10 Layout Display of (a) Homepage (b) Material (c) Questions and (d) References

b Making Learning Media Using JavaScript

This is an important part of this research Here we will integrate the learning media that was created in

the previous session using a local web server To design this system we use a router as a liaison

between the server and client which means we use a wireless system to connect one device to another

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

8

(server and client) Illustration of connectivity processes between routers servers and clients are seen

in Figure 11 For the record we use an offline network system that is not connected to the internet

network This is seen by the presence of the red cross symbol in Figure 11

The application of a local web server for sharing learning media data using JavaScript programming

language was tested on 11 students or clients in the Physics Education Laboratory Building FKIP

Halu Oleo University In general the test shows that the local web server can provide access to

information to all clients without connecting to the internet or being offline Besides that to access each

page can be done quickly and most importantly compatible with all devices The trial process can be

seen in Figure 11 From this trial it can be used in schools to become alternative teaching and learning

in virtual classrooms [33]

Figure 11 Illustration of Display Router Used Using 1 Server and 11 Clients

(a) (b) (c)

Figure 12 The Local Web Server Testing Process (a) Media Folders (b) Web Media (c) Clients with

11 Students

4 Summary and Recomendation

Research on the design of learning media using the JavaScript programming language and implemented

on the local web server system has been carried out Some things to note in this study are this learning

media is very easy to make and most importantly easy to use This is proven by the programming

language that has been integrated into the Visual Studio Code application and Notepad ++ Not only

that but JavaScript can also be paired up in HTML and CSS languages To make it easier for users to

input data in the form of videos images and animations The use of a local web server that functions

like file sharing so that data is on the server computer can be accessed using a computer which has

entered IP address Here to prove it we use 12 laptop clients simultaneously that are connected using

a router This research is preliminary so in the future we want to continue by testing the media in

several schools in Kendari In addition this research will be more interesting if integrating the media

into the RTRW Net network system [34] This can help overcome information gaps in schools in

which internet access is limited

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

9

Acknowledgments

Thanks to the Rector of Halu Oleo University and the Chairman of Education and Teacher Training

Faculty And also to our friends who help us to complete our research

References

[1] A Pininta ldquoIndonesias Low Student in PISA Nadiem Prepares these 5 Strategiesrdquo

wwwkompascom 2020 httpsedukasikompascomread20200405154418571 indonesias-

low-student-in-pisa-nadiem-prepares-these-5-strategiespage=all (accessed Jul 14 2020)

[2] C Sunaengsih 2016 The Impact of Learning Media on the Quality of Learning on Accredited A

Elementary Schools Elem Sch Pulpit J 3 (2) pp 183ndash190

[3] B Widiantoro and R Lusia 2015 The Schoon-Based Media Development of E-Learning Media

on Basic Competence Understands the Atomic Model of Semiconductors in SMKN 1 Jetis

Mojokerto Educ J Electr Eng 04 (2) pp 501ndash506

[4] Sohibun and F Y Ade 2017 Virtual Class Based Media Development Using Google Drivesrdquo

Teach Tarb Journals 2 (2) p 121

[5] I M Astra and D Ruharman 2012 Mobile Learning Application for Physics Using Adobe Flash

as a Supporting Instructional Media Educ Cult Journals 18 pp 174ndash180

[6] A Wicaksono 2017 The Role of Audio Media in Improving the Learning Process of a Shorts

Story Appreciation J Islam Multidiscip 2 (1) p 67

[7] A Baidawi 2016 Using Visual Media in Teaching Speaking J Lang Lit 10 (1) p 54

[8] R Fuady and A A Mutalib 2018 Audio-Visual Media in Learning J K6 Educ Manag 1 (2) pp

1ndash6

[9] N Asikin and E Daningsih 2018 Development Audio-Visual Learning Media of Hydroponic

System on Biotechnology Topik For Senior High Schools 174 pp 197ndash201

[10] Suyitno 2015 Pembuatan Media Pembelajaran Audio-Visual Untuk Materi Sistem Pemindah

Tenaga Otomotif J Pendidik Tek Otomotif 05 (02) pp 210ndash218

[11] Budiman 2014 The Role of Information Technology and Communication in Education J

Islam Educ 8 (I) pp 31ndash43

[12] R M Rish K Bylen H Vreeland and C C Wimberley 2015 Using Google Drive to Write

Dialogically with Teachers in Handbook of Research on Teacher Education in the Digital Age

Pennslyvania IGI Global 357ndash379

[13] H Marsquoazi and K Janfeshan 2018 The effect of Edmodo social learning network on Iranian EFL

learners writing skill Cogent Educ 5(1) pp 1ndash17

[14] K R Heggart and J Yoo 2018 Getting the most from google classroom A pedagogical

framework for tertiary educators Aust J Teach Educ 43 (3) pp 140ndash153

[15] S W Palocsay I S Markham and S E Markham 2010 Utilizing and teaching data tools in Excel

for exploratory analysis J Bus Res 63 (2) pp 191ndash206

[16] S D Aji M N Hudha C Huda and G Gufran 2018 Computer Animation with Adobe Flash

Professional Cs6 in Newtonrsquos Law in IOP Conference Series Materials Science and

Engineering 288 (1) pp 1ndash4

[17] D Ibrahim 2011 Engineering simulation with MATLAB Improving teaching and learning

effectiveness Procedia Computer Science 3 pp 853ndash858

[18] Rahmat Fahinu S Alfat and E Maryanti 2019 The Effect of STAD cooperative model by

GeoGebra assisted on increasing studentsrsquo geometry reasoning ability based on levels of

mathematics learning motivation Journal of Physics Conference Series 1315 (1)

[19] A Baarah A Aloqaily Z Salah M Zamzeer and M Sallam 2019 Machine learning approaches

for predicting the severity level of software bug reports in closed source projects Int J Adv

Comput Sci Appl 10 (8) pp 285ndash294

[20] D Nafisah and A Ghofur 2020 The Development of the Android Barcode Based Media Study

for IPS J Educ Learn Technol 1 (2) pp 144ndash152 2020

[21] C Surya and M Jannah Desain Web bagi pemula menggunakan html dan css (Jakarta PT Elex

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

10

Media Komputindo)

[22] D Rachmawan D Irwan and H Argyawati 2016 Application of Cargo Techniques on Local

Web Server by NTH Methods Using Microtics J Comput Sci Res Embed Log Syst 4(2) pp

98ndash108

[23] Y Meisella Kristania I Maryani and A Iqbal 2017 The Web-Based Academic Information

System of Texting in SMKN 2 Banyumas J Sci dan Manag 5(2) pp 82ndash89

[24] S Ramdhani and D Kurnia 2018 The Engineering of Computerized Web-Based Test System

Using an Open-Source Operating System in SD Swasta Alwashiyah 639 Medan J Comput

Sci Bus 9 pp 1932ndash1945

[25] M Kamal 2020 Research and Development ( R amp D ) Tadribat Drill Madrasah Aliyah Class X

Teaching Materials Arabic Language J Hist Educ Humanit 4(1) pp 10ndash18

[26] S Ohri 2017 TypeScript 2X by Example (Birmingham Packt Publishing Ltd)

[27] C Kesuma and M D Juniati 2020 The System for Small-Village Administration Information

(SIAKSA) is Web-Based in Alangamba Village of Cilacap District J Speed-Sentra Res Eng

Educ 12 (1) p 1

[28] R C Iskandar Aki Sridhar 2019 Web Development with Angular and Bootstrap Embrace

Responsive Web Design and Build Adaptive Angular Web Applications (3rd Editio

Birmingham UK Packt Publishing Ltd)

[29] F N Ugwoke and K C Okafor 2017 Cloud-DLT A Disruptive Cloud based Digital Library

using Lean Design Technique Circ Comput Sci 201 (01) pp 27ndash36

[30] N H Ahmad 2020 Tableau For Beginner Data Analysis and Visualization 101 (Bandung

Haszeli Ahmad

[31] N Ifada 2019 Interactive Web Programming Learning Using CMS Media Teachers and

Students in SMKN 1 Kamal Sci J Pangabdhi 5(2)

[32] V A Nechitailenko 2016 Converting LaTeX to HTML5 and EPUB3  A case study 4 pp 1ndash5

[33] R Satra and A M Mude 2019 The Performance Assessment System is Devoted to Society

ILKOMAS 1 (1) pp 1ndash7

[34] O W Purbo 2007 Practical Guidance RTRW-Net amp Wajanbolic Antenna (Jakarta Info

Komputer)

Page 3: PAPER OPEN ACCESS 7KHGHVLJQRIOHDUQLQJPHGLDXVLQJ ...

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

2

expensive cost [19] In addition these applications are not familiar with students Teaching and

learning activities teachers must implicate compatible learning media so that has results that are by

specified outcomes [20] Currently one of the most popular applications used to design learning media

is JavaScript JavaScript is a dynamic and popular programming language [21] Furthermore this

application can be accessed through a web browser such as Google Chrome Mozilla Firefox Safari

and others Equally important this application can be combined with HTML and CSS to generate

learning media with backgrounds animated videos and other interesting interactive menus In

addition because the final appearance of JavaScript in the form of a web page allows this application

to be accessed with the help of a local web server

Local web server is offline internet network system which the provider websites can be accessed of

charge in certain areas for free [22] This system is not new to information systems and networks in

schools This is because some schools have used this network system to facilitate school

administrators in managing school data Moreover this system is used for the online examination

system and student assessment in schools [23] However this system has not been maximally utilized

for the learning media provider and storage system [24] More specifically this system can be

developed into a virtual class-based learning tool which overall the teaching materials are provided

directly by the teacher himself Realize about this so considered necessary to existence an attractive

and structured interactive JavaScript-based learning media design and its application on the local web

server system that can be applied to the education system Generally the objective of the study

consists of two big points as follows (1) to design learning media using JavaScript programming

language (2) combining websites as learning media in the local network system

2 Method

The method used in this research was used Research and Development This research was conducted

to result in a product and test the product [25] Generally the research has the main two stages as

follows

21 Learning Media Design

This stage intends to design learning media using the JavaScript programming language which

integrated with Visual Studio Code application [26] This application like a text editor which is

integrated the JavaScript programming language In addition we use Notepad ++ which displayed

programming language worksheets more clearly [27] The main teaching materials for this learning

media are Stationary and Traveling Waves which are the main topic in Senior High School at

semester XI To design the media we use the laptop with specifications Acer Aspire ES1-432 series

Intelreg Celeronreg Processor N3350 Intelreg HD Graphics 500GB HDD 2GB DDR3 L Memory HD

LED True cinematic view Create a Local Web Server

22 Create a Local Web Server

To design the Local Web Server system we use Web Server for Chrome this application is a free

download [28] To design this system we use computers with specifications namely MAC Mini Intel

Core I7 Quad-Core 36 GHz 16 GB DDR 4 memory 2 TB SATA HDD Then to access the learning

media from the server to the laptop user we used the Router with the specifications namely TP-LINK

3G 4G Router MR3420 [29] Here since the research is an outset study the network topology design

for Local Web Server was designed without using Raspberry Pi or direct researchers using a computer

server with specifications as mentioned above The operating system for this server uses MacOS

Catalina version 10152 [30] An illustration of network topology design will be seen in Figure 1

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

3

Figure 1 Network topology design

Figure 2 Flowchart the local web server

Since the research is used Research and Development we used the Laboratory of the Physics

Education Department Teaching and Education Faculty Halu Oleo University as a place to carry out

the two principal stages above Not only completing the two principal stages above but this research

will also test the results obtained from the two stages above by using several additional tools such as

Handphone and Laptops To be clearer all stages the research can be illustrated in Figure 2 This

activity carried out around the Physical Education Department Laboratory This is because the data

storage server (router) is around that location

Figure 3 Flowchart research methods

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

4

3 Testing and Implementation

That Improving student learning outcomes teachers can use the offline method without having to

face-to face in class Here this research intends to develop learning media for educational institutions

using the JavaScript and its implementation to the webserver system

a Making Learning Media Using JavaScript

The learning media be made using the JavaScript in a visual studio code application To create the

media researchers divided learning media into 4 main pages as in Figure 4 Which every main page

content can be accessed offline

Figure 4 Display the learning media main page

To create of page in Figure 4 The first step is to save the data and extension file HTML The next

step is to write the command or syntax according to Figure 5 on some of these command lines there

are some functions commonly used in HTML-based web creation such as ldquolt DOCTYPE htmlgtrdquo

ldquolthtmlgtrdquo ldquoltheadgtrdquo ldquoltbodygtrdquo these commands fourth functions are functions that must be

present in every web-based creation HTML or JavaScript While other functions such as lttitlegt

ldquoltheadergtrdquo ldquolthgtrdquo ldquoltagtrdquo ldquoltnavgtrdquo ldquoltpgtrdquo ldquoltsectiongtrdquo ldquolttennisgtrdquo and color are additional

functions to modify the appearance of HTML pages

Figure 5 JavaScript program to HTML

Because on that page a hyperlink will be displayed which connects with main page to other pages

the ldquohrefrdquo function becomes the main function to create the hyperlink The main point of ldquohrefrdquo is

connectivity between HTML pages so it must be remembered the address of the file that must be

connected Some ldquohrefrdquo rules are as follows

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

5

Table 1 Description of href function

Syntax Description href = indexhtml indexhtml directly in the main folder href = indexhtml indexhtml is on the previous folder href = Materiindexhtml indexhtml is in the main material folder href = Materiindexhtml indexhtml is in the Material folder outside the main

folder

In Figure 5 The page display does not have a background For this reason this section will explain

the background settings on HTML pages The background settings command can be seen in Figure 6

These three functions have respective roles such as the header intends to set the appearance of the

heading part nav has the function to set the navigation menu of the main menu section while the

footer has the function of regulating the display at the bottom of the HTML page In the three

commands above an additional command was included ldquobackground-colorrdquo ldquopaddingrdquo

ldquobackgroundrdquo ldquotext-alignrdquo ldquofont-sizerdquo and ldquocolorrdquo which commands have their respective roles

and also those commands are optional which while the command is not activated then the default

system applies For more details about the commands in the ldquoheaderrdquo ldquonavrdquo and ldquofooterrdquo can be

seen through the web page [31] The display of the use of commands in Figure 6(a) can be seen in

Figure 6 (b)

(a) (b)

Figure 6 (a) Settings program background layout and (b) Display HTML page background

After making the initial appearance of the media above the next step is to enter the material content

because some content consists of images and videos For that we will explain how to input images

and videos To include images in the material it is necessary to create an image folder in the main

folder this aims to make it easier to find the program file that is displayed The coding used to insert the

image is ldquoltimg src = file_namejpggtrdquo functions to call a file written according to the name of the

image then in the coding it is necessary to add a style function consisting of ldquowidthrdquo ldquoheightrdquo and

ldquomargin -rightrdquo The entered program language can be seen in Figure 7(a) and the display of the

results obtained from programming can be seen in Figure 7(b) As for inserting videos coding used is

very easy because it has the same function in the program inserting images but in video coding the

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

6

functions that need to be used are ltvideogt and ltvideogt as coding for calling videos additional

functions that need to be used namely a type that serves to find out the type of video data entered

(a) (b)

Figure 7 (a) Image program input and (b) HTML display after inserting images

To included images in the material it is necessary to create an image folder in the main folder this

aims to make it easier to find the program file that is displayed The syntax used to insert an image is

ltimg src = filenamejpggt the syntax function is to call a file written according to the name of the

image Some additional functions such as width height and margin-right also added to Syntax above

It aims to adjust the appearance of images on HTML pages The program command used can be seen

in Figure 7(a) and the display of the results obtained from programming can be seen in Figure 7(b)

Similar to the image input command the video input command also has the same Syntax However

Syntax video has additional functions namely ltvideogt and ltvideogt which aim to display videos

on HTML pages In addition additional functions type are inputted on file call commands For more

details about the program can be seen in Figure 8

(a) (b)

Figure 8 (a) Inserting program video to HTML and (b) Video display results on HTML pages

Presently lets make learning media with content that contains mathematical equations and symbols

Making equations on HTML pages is similar to making equations and mathematical symbols on

LaTeX [32] However there are additional commands such as lines (7) ndash (15) in Figure 9(a) this

command is a library for managing the display of mathematical equations and symbols This command

must be in every mathematical equation and symbol creation

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

7

Figure 9 (left) Inputting equations in HTML and (right) Results displayed on HTML pages

The making of this media intends to help teachers and students in the teaching and learning process

Teachers can create their own media with the desired design so that it helps students get good and free

learning at school In addition the benefits of using these learning media can be accessed offline then

the teacher can make questions and quiz in the JavaScript program the teacher does not need to prepare

a piece of paper to record students answers with these web pages students can answer via the web and

upload past students answers sent then the accumulated value can come out from the answer worked

on By using the JavaScript programming language the learning media can be used easily Because

the time given is very short we only fill in some of the content in it such as material animation

video and images for more details can be seen in Figure 10

Figure 10 Layout Display of (a) Homepage (b) Material (c) Questions and (d) References

b Making Learning Media Using JavaScript

This is an important part of this research Here we will integrate the learning media that was created in

the previous session using a local web server To design this system we use a router as a liaison

between the server and client which means we use a wireless system to connect one device to another

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

8

(server and client) Illustration of connectivity processes between routers servers and clients are seen

in Figure 11 For the record we use an offline network system that is not connected to the internet

network This is seen by the presence of the red cross symbol in Figure 11

The application of a local web server for sharing learning media data using JavaScript programming

language was tested on 11 students or clients in the Physics Education Laboratory Building FKIP

Halu Oleo University In general the test shows that the local web server can provide access to

information to all clients without connecting to the internet or being offline Besides that to access each

page can be done quickly and most importantly compatible with all devices The trial process can be

seen in Figure 11 From this trial it can be used in schools to become alternative teaching and learning

in virtual classrooms [33]

Figure 11 Illustration of Display Router Used Using 1 Server and 11 Clients

(a) (b) (c)

Figure 12 The Local Web Server Testing Process (a) Media Folders (b) Web Media (c) Clients with

11 Students

4 Summary and Recomendation

Research on the design of learning media using the JavaScript programming language and implemented

on the local web server system has been carried out Some things to note in this study are this learning

media is very easy to make and most importantly easy to use This is proven by the programming

language that has been integrated into the Visual Studio Code application and Notepad ++ Not only

that but JavaScript can also be paired up in HTML and CSS languages To make it easier for users to

input data in the form of videos images and animations The use of a local web server that functions

like file sharing so that data is on the server computer can be accessed using a computer which has

entered IP address Here to prove it we use 12 laptop clients simultaneously that are connected using

a router This research is preliminary so in the future we want to continue by testing the media in

several schools in Kendari In addition this research will be more interesting if integrating the media

into the RTRW Net network system [34] This can help overcome information gaps in schools in

which internet access is limited

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

9

Acknowledgments

Thanks to the Rector of Halu Oleo University and the Chairman of Education and Teacher Training

Faculty And also to our friends who help us to complete our research

References

[1] A Pininta ldquoIndonesias Low Student in PISA Nadiem Prepares these 5 Strategiesrdquo

wwwkompascom 2020 httpsedukasikompascomread20200405154418571 indonesias-

low-student-in-pisa-nadiem-prepares-these-5-strategiespage=all (accessed Jul 14 2020)

[2] C Sunaengsih 2016 The Impact of Learning Media on the Quality of Learning on Accredited A

Elementary Schools Elem Sch Pulpit J 3 (2) pp 183ndash190

[3] B Widiantoro and R Lusia 2015 The Schoon-Based Media Development of E-Learning Media

on Basic Competence Understands the Atomic Model of Semiconductors in SMKN 1 Jetis

Mojokerto Educ J Electr Eng 04 (2) pp 501ndash506

[4] Sohibun and F Y Ade 2017 Virtual Class Based Media Development Using Google Drivesrdquo

Teach Tarb Journals 2 (2) p 121

[5] I M Astra and D Ruharman 2012 Mobile Learning Application for Physics Using Adobe Flash

as a Supporting Instructional Media Educ Cult Journals 18 pp 174ndash180

[6] A Wicaksono 2017 The Role of Audio Media in Improving the Learning Process of a Shorts

Story Appreciation J Islam Multidiscip 2 (1) p 67

[7] A Baidawi 2016 Using Visual Media in Teaching Speaking J Lang Lit 10 (1) p 54

[8] R Fuady and A A Mutalib 2018 Audio-Visual Media in Learning J K6 Educ Manag 1 (2) pp

1ndash6

[9] N Asikin and E Daningsih 2018 Development Audio-Visual Learning Media of Hydroponic

System on Biotechnology Topik For Senior High Schools 174 pp 197ndash201

[10] Suyitno 2015 Pembuatan Media Pembelajaran Audio-Visual Untuk Materi Sistem Pemindah

Tenaga Otomotif J Pendidik Tek Otomotif 05 (02) pp 210ndash218

[11] Budiman 2014 The Role of Information Technology and Communication in Education J

Islam Educ 8 (I) pp 31ndash43

[12] R M Rish K Bylen H Vreeland and C C Wimberley 2015 Using Google Drive to Write

Dialogically with Teachers in Handbook of Research on Teacher Education in the Digital Age

Pennslyvania IGI Global 357ndash379

[13] H Marsquoazi and K Janfeshan 2018 The effect of Edmodo social learning network on Iranian EFL

learners writing skill Cogent Educ 5(1) pp 1ndash17

[14] K R Heggart and J Yoo 2018 Getting the most from google classroom A pedagogical

framework for tertiary educators Aust J Teach Educ 43 (3) pp 140ndash153

[15] S W Palocsay I S Markham and S E Markham 2010 Utilizing and teaching data tools in Excel

for exploratory analysis J Bus Res 63 (2) pp 191ndash206

[16] S D Aji M N Hudha C Huda and G Gufran 2018 Computer Animation with Adobe Flash

Professional Cs6 in Newtonrsquos Law in IOP Conference Series Materials Science and

Engineering 288 (1) pp 1ndash4

[17] D Ibrahim 2011 Engineering simulation with MATLAB Improving teaching and learning

effectiveness Procedia Computer Science 3 pp 853ndash858

[18] Rahmat Fahinu S Alfat and E Maryanti 2019 The Effect of STAD cooperative model by

GeoGebra assisted on increasing studentsrsquo geometry reasoning ability based on levels of

mathematics learning motivation Journal of Physics Conference Series 1315 (1)

[19] A Baarah A Aloqaily Z Salah M Zamzeer and M Sallam 2019 Machine learning approaches

for predicting the severity level of software bug reports in closed source projects Int J Adv

Comput Sci Appl 10 (8) pp 285ndash294

[20] D Nafisah and A Ghofur 2020 The Development of the Android Barcode Based Media Study

for IPS J Educ Learn Technol 1 (2) pp 144ndash152 2020

[21] C Surya and M Jannah Desain Web bagi pemula menggunakan html dan css (Jakarta PT Elex

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

10

Media Komputindo)

[22] D Rachmawan D Irwan and H Argyawati 2016 Application of Cargo Techniques on Local

Web Server by NTH Methods Using Microtics J Comput Sci Res Embed Log Syst 4(2) pp

98ndash108

[23] Y Meisella Kristania I Maryani and A Iqbal 2017 The Web-Based Academic Information

System of Texting in SMKN 2 Banyumas J Sci dan Manag 5(2) pp 82ndash89

[24] S Ramdhani and D Kurnia 2018 The Engineering of Computerized Web-Based Test System

Using an Open-Source Operating System in SD Swasta Alwashiyah 639 Medan J Comput

Sci Bus 9 pp 1932ndash1945

[25] M Kamal 2020 Research and Development ( R amp D ) Tadribat Drill Madrasah Aliyah Class X

Teaching Materials Arabic Language J Hist Educ Humanit 4(1) pp 10ndash18

[26] S Ohri 2017 TypeScript 2X by Example (Birmingham Packt Publishing Ltd)

[27] C Kesuma and M D Juniati 2020 The System for Small-Village Administration Information

(SIAKSA) is Web-Based in Alangamba Village of Cilacap District J Speed-Sentra Res Eng

Educ 12 (1) p 1

[28] R C Iskandar Aki Sridhar 2019 Web Development with Angular and Bootstrap Embrace

Responsive Web Design and Build Adaptive Angular Web Applications (3rd Editio

Birmingham UK Packt Publishing Ltd)

[29] F N Ugwoke and K C Okafor 2017 Cloud-DLT A Disruptive Cloud based Digital Library

using Lean Design Technique Circ Comput Sci 201 (01) pp 27ndash36

[30] N H Ahmad 2020 Tableau For Beginner Data Analysis and Visualization 101 (Bandung

Haszeli Ahmad

[31] N Ifada 2019 Interactive Web Programming Learning Using CMS Media Teachers and

Students in SMKN 1 Kamal Sci J Pangabdhi 5(2)

[32] V A Nechitailenko 2016 Converting LaTeX to HTML5 and EPUB3  A case study 4 pp 1ndash5

[33] R Satra and A M Mude 2019 The Performance Assessment System is Devoted to Society

ILKOMAS 1 (1) pp 1ndash7

[34] O W Purbo 2007 Practical Guidance RTRW-Net amp Wajanbolic Antenna (Jakarta Info

Komputer)

Page 4: PAPER OPEN ACCESS 7KHGHVLJQRIOHDUQLQJPHGLDXVLQJ ...

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

3

Figure 1 Network topology design

Figure 2 Flowchart the local web server

Since the research is used Research and Development we used the Laboratory of the Physics

Education Department Teaching and Education Faculty Halu Oleo University as a place to carry out

the two principal stages above Not only completing the two principal stages above but this research

will also test the results obtained from the two stages above by using several additional tools such as

Handphone and Laptops To be clearer all stages the research can be illustrated in Figure 2 This

activity carried out around the Physical Education Department Laboratory This is because the data

storage server (router) is around that location

Figure 3 Flowchart research methods

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

4

3 Testing and Implementation

That Improving student learning outcomes teachers can use the offline method without having to

face-to face in class Here this research intends to develop learning media for educational institutions

using the JavaScript and its implementation to the webserver system

a Making Learning Media Using JavaScript

The learning media be made using the JavaScript in a visual studio code application To create the

media researchers divided learning media into 4 main pages as in Figure 4 Which every main page

content can be accessed offline

Figure 4 Display the learning media main page

To create of page in Figure 4 The first step is to save the data and extension file HTML The next

step is to write the command or syntax according to Figure 5 on some of these command lines there

are some functions commonly used in HTML-based web creation such as ldquolt DOCTYPE htmlgtrdquo

ldquolthtmlgtrdquo ldquoltheadgtrdquo ldquoltbodygtrdquo these commands fourth functions are functions that must be

present in every web-based creation HTML or JavaScript While other functions such as lttitlegt

ldquoltheadergtrdquo ldquolthgtrdquo ldquoltagtrdquo ldquoltnavgtrdquo ldquoltpgtrdquo ldquoltsectiongtrdquo ldquolttennisgtrdquo and color are additional

functions to modify the appearance of HTML pages

Figure 5 JavaScript program to HTML

Because on that page a hyperlink will be displayed which connects with main page to other pages

the ldquohrefrdquo function becomes the main function to create the hyperlink The main point of ldquohrefrdquo is

connectivity between HTML pages so it must be remembered the address of the file that must be

connected Some ldquohrefrdquo rules are as follows

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

5

Table 1 Description of href function

Syntax Description href = indexhtml indexhtml directly in the main folder href = indexhtml indexhtml is on the previous folder href = Materiindexhtml indexhtml is in the main material folder href = Materiindexhtml indexhtml is in the Material folder outside the main

folder

In Figure 5 The page display does not have a background For this reason this section will explain

the background settings on HTML pages The background settings command can be seen in Figure 6

These three functions have respective roles such as the header intends to set the appearance of the

heading part nav has the function to set the navigation menu of the main menu section while the

footer has the function of regulating the display at the bottom of the HTML page In the three

commands above an additional command was included ldquobackground-colorrdquo ldquopaddingrdquo

ldquobackgroundrdquo ldquotext-alignrdquo ldquofont-sizerdquo and ldquocolorrdquo which commands have their respective roles

and also those commands are optional which while the command is not activated then the default

system applies For more details about the commands in the ldquoheaderrdquo ldquonavrdquo and ldquofooterrdquo can be

seen through the web page [31] The display of the use of commands in Figure 6(a) can be seen in

Figure 6 (b)

(a) (b)

Figure 6 (a) Settings program background layout and (b) Display HTML page background

After making the initial appearance of the media above the next step is to enter the material content

because some content consists of images and videos For that we will explain how to input images

and videos To include images in the material it is necessary to create an image folder in the main

folder this aims to make it easier to find the program file that is displayed The coding used to insert the

image is ldquoltimg src = file_namejpggtrdquo functions to call a file written according to the name of the

image then in the coding it is necessary to add a style function consisting of ldquowidthrdquo ldquoheightrdquo and

ldquomargin -rightrdquo The entered program language can be seen in Figure 7(a) and the display of the

results obtained from programming can be seen in Figure 7(b) As for inserting videos coding used is

very easy because it has the same function in the program inserting images but in video coding the

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

6

functions that need to be used are ltvideogt and ltvideogt as coding for calling videos additional

functions that need to be used namely a type that serves to find out the type of video data entered

(a) (b)

Figure 7 (a) Image program input and (b) HTML display after inserting images

To included images in the material it is necessary to create an image folder in the main folder this

aims to make it easier to find the program file that is displayed The syntax used to insert an image is

ltimg src = filenamejpggt the syntax function is to call a file written according to the name of the

image Some additional functions such as width height and margin-right also added to Syntax above

It aims to adjust the appearance of images on HTML pages The program command used can be seen

in Figure 7(a) and the display of the results obtained from programming can be seen in Figure 7(b)

Similar to the image input command the video input command also has the same Syntax However

Syntax video has additional functions namely ltvideogt and ltvideogt which aim to display videos

on HTML pages In addition additional functions type are inputted on file call commands For more

details about the program can be seen in Figure 8

(a) (b)

Figure 8 (a) Inserting program video to HTML and (b) Video display results on HTML pages

Presently lets make learning media with content that contains mathematical equations and symbols

Making equations on HTML pages is similar to making equations and mathematical symbols on

LaTeX [32] However there are additional commands such as lines (7) ndash (15) in Figure 9(a) this

command is a library for managing the display of mathematical equations and symbols This command

must be in every mathematical equation and symbol creation

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

7

Figure 9 (left) Inputting equations in HTML and (right) Results displayed on HTML pages

The making of this media intends to help teachers and students in the teaching and learning process

Teachers can create their own media with the desired design so that it helps students get good and free

learning at school In addition the benefits of using these learning media can be accessed offline then

the teacher can make questions and quiz in the JavaScript program the teacher does not need to prepare

a piece of paper to record students answers with these web pages students can answer via the web and

upload past students answers sent then the accumulated value can come out from the answer worked

on By using the JavaScript programming language the learning media can be used easily Because

the time given is very short we only fill in some of the content in it such as material animation

video and images for more details can be seen in Figure 10

Figure 10 Layout Display of (a) Homepage (b) Material (c) Questions and (d) References

b Making Learning Media Using JavaScript

This is an important part of this research Here we will integrate the learning media that was created in

the previous session using a local web server To design this system we use a router as a liaison

between the server and client which means we use a wireless system to connect one device to another

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

8

(server and client) Illustration of connectivity processes between routers servers and clients are seen

in Figure 11 For the record we use an offline network system that is not connected to the internet

network This is seen by the presence of the red cross symbol in Figure 11

The application of a local web server for sharing learning media data using JavaScript programming

language was tested on 11 students or clients in the Physics Education Laboratory Building FKIP

Halu Oleo University In general the test shows that the local web server can provide access to

information to all clients without connecting to the internet or being offline Besides that to access each

page can be done quickly and most importantly compatible with all devices The trial process can be

seen in Figure 11 From this trial it can be used in schools to become alternative teaching and learning

in virtual classrooms [33]

Figure 11 Illustration of Display Router Used Using 1 Server and 11 Clients

(a) (b) (c)

Figure 12 The Local Web Server Testing Process (a) Media Folders (b) Web Media (c) Clients with

11 Students

4 Summary and Recomendation

Research on the design of learning media using the JavaScript programming language and implemented

on the local web server system has been carried out Some things to note in this study are this learning

media is very easy to make and most importantly easy to use This is proven by the programming

language that has been integrated into the Visual Studio Code application and Notepad ++ Not only

that but JavaScript can also be paired up in HTML and CSS languages To make it easier for users to

input data in the form of videos images and animations The use of a local web server that functions

like file sharing so that data is on the server computer can be accessed using a computer which has

entered IP address Here to prove it we use 12 laptop clients simultaneously that are connected using

a router This research is preliminary so in the future we want to continue by testing the media in

several schools in Kendari In addition this research will be more interesting if integrating the media

into the RTRW Net network system [34] This can help overcome information gaps in schools in

which internet access is limited

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

9

Acknowledgments

Thanks to the Rector of Halu Oleo University and the Chairman of Education and Teacher Training

Faculty And also to our friends who help us to complete our research

References

[1] A Pininta ldquoIndonesias Low Student in PISA Nadiem Prepares these 5 Strategiesrdquo

wwwkompascom 2020 httpsedukasikompascomread20200405154418571 indonesias-

low-student-in-pisa-nadiem-prepares-these-5-strategiespage=all (accessed Jul 14 2020)

[2] C Sunaengsih 2016 The Impact of Learning Media on the Quality of Learning on Accredited A

Elementary Schools Elem Sch Pulpit J 3 (2) pp 183ndash190

[3] B Widiantoro and R Lusia 2015 The Schoon-Based Media Development of E-Learning Media

on Basic Competence Understands the Atomic Model of Semiconductors in SMKN 1 Jetis

Mojokerto Educ J Electr Eng 04 (2) pp 501ndash506

[4] Sohibun and F Y Ade 2017 Virtual Class Based Media Development Using Google Drivesrdquo

Teach Tarb Journals 2 (2) p 121

[5] I M Astra and D Ruharman 2012 Mobile Learning Application for Physics Using Adobe Flash

as a Supporting Instructional Media Educ Cult Journals 18 pp 174ndash180

[6] A Wicaksono 2017 The Role of Audio Media in Improving the Learning Process of a Shorts

Story Appreciation J Islam Multidiscip 2 (1) p 67

[7] A Baidawi 2016 Using Visual Media in Teaching Speaking J Lang Lit 10 (1) p 54

[8] R Fuady and A A Mutalib 2018 Audio-Visual Media in Learning J K6 Educ Manag 1 (2) pp

1ndash6

[9] N Asikin and E Daningsih 2018 Development Audio-Visual Learning Media of Hydroponic

System on Biotechnology Topik For Senior High Schools 174 pp 197ndash201

[10] Suyitno 2015 Pembuatan Media Pembelajaran Audio-Visual Untuk Materi Sistem Pemindah

Tenaga Otomotif J Pendidik Tek Otomotif 05 (02) pp 210ndash218

[11] Budiman 2014 The Role of Information Technology and Communication in Education J

Islam Educ 8 (I) pp 31ndash43

[12] R M Rish K Bylen H Vreeland and C C Wimberley 2015 Using Google Drive to Write

Dialogically with Teachers in Handbook of Research on Teacher Education in the Digital Age

Pennslyvania IGI Global 357ndash379

[13] H Marsquoazi and K Janfeshan 2018 The effect of Edmodo social learning network on Iranian EFL

learners writing skill Cogent Educ 5(1) pp 1ndash17

[14] K R Heggart and J Yoo 2018 Getting the most from google classroom A pedagogical

framework for tertiary educators Aust J Teach Educ 43 (3) pp 140ndash153

[15] S W Palocsay I S Markham and S E Markham 2010 Utilizing and teaching data tools in Excel

for exploratory analysis J Bus Res 63 (2) pp 191ndash206

[16] S D Aji M N Hudha C Huda and G Gufran 2018 Computer Animation with Adobe Flash

Professional Cs6 in Newtonrsquos Law in IOP Conference Series Materials Science and

Engineering 288 (1) pp 1ndash4

[17] D Ibrahim 2011 Engineering simulation with MATLAB Improving teaching and learning

effectiveness Procedia Computer Science 3 pp 853ndash858

[18] Rahmat Fahinu S Alfat and E Maryanti 2019 The Effect of STAD cooperative model by

GeoGebra assisted on increasing studentsrsquo geometry reasoning ability based on levels of

mathematics learning motivation Journal of Physics Conference Series 1315 (1)

[19] A Baarah A Aloqaily Z Salah M Zamzeer and M Sallam 2019 Machine learning approaches

for predicting the severity level of software bug reports in closed source projects Int J Adv

Comput Sci Appl 10 (8) pp 285ndash294

[20] D Nafisah and A Ghofur 2020 The Development of the Android Barcode Based Media Study

for IPS J Educ Learn Technol 1 (2) pp 144ndash152 2020

[21] C Surya and M Jannah Desain Web bagi pemula menggunakan html dan css (Jakarta PT Elex

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

10

Media Komputindo)

[22] D Rachmawan D Irwan and H Argyawati 2016 Application of Cargo Techniques on Local

Web Server by NTH Methods Using Microtics J Comput Sci Res Embed Log Syst 4(2) pp

98ndash108

[23] Y Meisella Kristania I Maryani and A Iqbal 2017 The Web-Based Academic Information

System of Texting in SMKN 2 Banyumas J Sci dan Manag 5(2) pp 82ndash89

[24] S Ramdhani and D Kurnia 2018 The Engineering of Computerized Web-Based Test System

Using an Open-Source Operating System in SD Swasta Alwashiyah 639 Medan J Comput

Sci Bus 9 pp 1932ndash1945

[25] M Kamal 2020 Research and Development ( R amp D ) Tadribat Drill Madrasah Aliyah Class X

Teaching Materials Arabic Language J Hist Educ Humanit 4(1) pp 10ndash18

[26] S Ohri 2017 TypeScript 2X by Example (Birmingham Packt Publishing Ltd)

[27] C Kesuma and M D Juniati 2020 The System for Small-Village Administration Information

(SIAKSA) is Web-Based in Alangamba Village of Cilacap District J Speed-Sentra Res Eng

Educ 12 (1) p 1

[28] R C Iskandar Aki Sridhar 2019 Web Development with Angular and Bootstrap Embrace

Responsive Web Design and Build Adaptive Angular Web Applications (3rd Editio

Birmingham UK Packt Publishing Ltd)

[29] F N Ugwoke and K C Okafor 2017 Cloud-DLT A Disruptive Cloud based Digital Library

using Lean Design Technique Circ Comput Sci 201 (01) pp 27ndash36

[30] N H Ahmad 2020 Tableau For Beginner Data Analysis and Visualization 101 (Bandung

Haszeli Ahmad

[31] N Ifada 2019 Interactive Web Programming Learning Using CMS Media Teachers and

Students in SMKN 1 Kamal Sci J Pangabdhi 5(2)

[32] V A Nechitailenko 2016 Converting LaTeX to HTML5 and EPUB3  A case study 4 pp 1ndash5

[33] R Satra and A M Mude 2019 The Performance Assessment System is Devoted to Society

ILKOMAS 1 (1) pp 1ndash7

[34] O W Purbo 2007 Practical Guidance RTRW-Net amp Wajanbolic Antenna (Jakarta Info

Komputer)

Page 5: PAPER OPEN ACCESS 7KHGHVLJQRIOHDUQLQJPHGLDXVLQJ ...

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

4

3 Testing and Implementation

That Improving student learning outcomes teachers can use the offline method without having to

face-to face in class Here this research intends to develop learning media for educational institutions

using the JavaScript and its implementation to the webserver system

a Making Learning Media Using JavaScript

The learning media be made using the JavaScript in a visual studio code application To create the

media researchers divided learning media into 4 main pages as in Figure 4 Which every main page

content can be accessed offline

Figure 4 Display the learning media main page

To create of page in Figure 4 The first step is to save the data and extension file HTML The next

step is to write the command or syntax according to Figure 5 on some of these command lines there

are some functions commonly used in HTML-based web creation such as ldquolt DOCTYPE htmlgtrdquo

ldquolthtmlgtrdquo ldquoltheadgtrdquo ldquoltbodygtrdquo these commands fourth functions are functions that must be

present in every web-based creation HTML or JavaScript While other functions such as lttitlegt

ldquoltheadergtrdquo ldquolthgtrdquo ldquoltagtrdquo ldquoltnavgtrdquo ldquoltpgtrdquo ldquoltsectiongtrdquo ldquolttennisgtrdquo and color are additional

functions to modify the appearance of HTML pages

Figure 5 JavaScript program to HTML

Because on that page a hyperlink will be displayed which connects with main page to other pages

the ldquohrefrdquo function becomes the main function to create the hyperlink The main point of ldquohrefrdquo is

connectivity between HTML pages so it must be remembered the address of the file that must be

connected Some ldquohrefrdquo rules are as follows

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

5

Table 1 Description of href function

Syntax Description href = indexhtml indexhtml directly in the main folder href = indexhtml indexhtml is on the previous folder href = Materiindexhtml indexhtml is in the main material folder href = Materiindexhtml indexhtml is in the Material folder outside the main

folder

In Figure 5 The page display does not have a background For this reason this section will explain

the background settings on HTML pages The background settings command can be seen in Figure 6

These three functions have respective roles such as the header intends to set the appearance of the

heading part nav has the function to set the navigation menu of the main menu section while the

footer has the function of regulating the display at the bottom of the HTML page In the three

commands above an additional command was included ldquobackground-colorrdquo ldquopaddingrdquo

ldquobackgroundrdquo ldquotext-alignrdquo ldquofont-sizerdquo and ldquocolorrdquo which commands have their respective roles

and also those commands are optional which while the command is not activated then the default

system applies For more details about the commands in the ldquoheaderrdquo ldquonavrdquo and ldquofooterrdquo can be

seen through the web page [31] The display of the use of commands in Figure 6(a) can be seen in

Figure 6 (b)

(a) (b)

Figure 6 (a) Settings program background layout and (b) Display HTML page background

After making the initial appearance of the media above the next step is to enter the material content

because some content consists of images and videos For that we will explain how to input images

and videos To include images in the material it is necessary to create an image folder in the main

folder this aims to make it easier to find the program file that is displayed The coding used to insert the

image is ldquoltimg src = file_namejpggtrdquo functions to call a file written according to the name of the

image then in the coding it is necessary to add a style function consisting of ldquowidthrdquo ldquoheightrdquo and

ldquomargin -rightrdquo The entered program language can be seen in Figure 7(a) and the display of the

results obtained from programming can be seen in Figure 7(b) As for inserting videos coding used is

very easy because it has the same function in the program inserting images but in video coding the

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

6

functions that need to be used are ltvideogt and ltvideogt as coding for calling videos additional

functions that need to be used namely a type that serves to find out the type of video data entered

(a) (b)

Figure 7 (a) Image program input and (b) HTML display after inserting images

To included images in the material it is necessary to create an image folder in the main folder this

aims to make it easier to find the program file that is displayed The syntax used to insert an image is

ltimg src = filenamejpggt the syntax function is to call a file written according to the name of the

image Some additional functions such as width height and margin-right also added to Syntax above

It aims to adjust the appearance of images on HTML pages The program command used can be seen

in Figure 7(a) and the display of the results obtained from programming can be seen in Figure 7(b)

Similar to the image input command the video input command also has the same Syntax However

Syntax video has additional functions namely ltvideogt and ltvideogt which aim to display videos

on HTML pages In addition additional functions type are inputted on file call commands For more

details about the program can be seen in Figure 8

(a) (b)

Figure 8 (a) Inserting program video to HTML and (b) Video display results on HTML pages

Presently lets make learning media with content that contains mathematical equations and symbols

Making equations on HTML pages is similar to making equations and mathematical symbols on

LaTeX [32] However there are additional commands such as lines (7) ndash (15) in Figure 9(a) this

command is a library for managing the display of mathematical equations and symbols This command

must be in every mathematical equation and symbol creation

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

7

Figure 9 (left) Inputting equations in HTML and (right) Results displayed on HTML pages

The making of this media intends to help teachers and students in the teaching and learning process

Teachers can create their own media with the desired design so that it helps students get good and free

learning at school In addition the benefits of using these learning media can be accessed offline then

the teacher can make questions and quiz in the JavaScript program the teacher does not need to prepare

a piece of paper to record students answers with these web pages students can answer via the web and

upload past students answers sent then the accumulated value can come out from the answer worked

on By using the JavaScript programming language the learning media can be used easily Because

the time given is very short we only fill in some of the content in it such as material animation

video and images for more details can be seen in Figure 10

Figure 10 Layout Display of (a) Homepage (b) Material (c) Questions and (d) References

b Making Learning Media Using JavaScript

This is an important part of this research Here we will integrate the learning media that was created in

the previous session using a local web server To design this system we use a router as a liaison

between the server and client which means we use a wireless system to connect one device to another

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

8

(server and client) Illustration of connectivity processes between routers servers and clients are seen

in Figure 11 For the record we use an offline network system that is not connected to the internet

network This is seen by the presence of the red cross symbol in Figure 11

The application of a local web server for sharing learning media data using JavaScript programming

language was tested on 11 students or clients in the Physics Education Laboratory Building FKIP

Halu Oleo University In general the test shows that the local web server can provide access to

information to all clients without connecting to the internet or being offline Besides that to access each

page can be done quickly and most importantly compatible with all devices The trial process can be

seen in Figure 11 From this trial it can be used in schools to become alternative teaching and learning

in virtual classrooms [33]

Figure 11 Illustration of Display Router Used Using 1 Server and 11 Clients

(a) (b) (c)

Figure 12 The Local Web Server Testing Process (a) Media Folders (b) Web Media (c) Clients with

11 Students

4 Summary and Recomendation

Research on the design of learning media using the JavaScript programming language and implemented

on the local web server system has been carried out Some things to note in this study are this learning

media is very easy to make and most importantly easy to use This is proven by the programming

language that has been integrated into the Visual Studio Code application and Notepad ++ Not only

that but JavaScript can also be paired up in HTML and CSS languages To make it easier for users to

input data in the form of videos images and animations The use of a local web server that functions

like file sharing so that data is on the server computer can be accessed using a computer which has

entered IP address Here to prove it we use 12 laptop clients simultaneously that are connected using

a router This research is preliminary so in the future we want to continue by testing the media in

several schools in Kendari In addition this research will be more interesting if integrating the media

into the RTRW Net network system [34] This can help overcome information gaps in schools in

which internet access is limited

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

9

Acknowledgments

Thanks to the Rector of Halu Oleo University and the Chairman of Education and Teacher Training

Faculty And also to our friends who help us to complete our research

References

[1] A Pininta ldquoIndonesias Low Student in PISA Nadiem Prepares these 5 Strategiesrdquo

wwwkompascom 2020 httpsedukasikompascomread20200405154418571 indonesias-

low-student-in-pisa-nadiem-prepares-these-5-strategiespage=all (accessed Jul 14 2020)

[2] C Sunaengsih 2016 The Impact of Learning Media on the Quality of Learning on Accredited A

Elementary Schools Elem Sch Pulpit J 3 (2) pp 183ndash190

[3] B Widiantoro and R Lusia 2015 The Schoon-Based Media Development of E-Learning Media

on Basic Competence Understands the Atomic Model of Semiconductors in SMKN 1 Jetis

Mojokerto Educ J Electr Eng 04 (2) pp 501ndash506

[4] Sohibun and F Y Ade 2017 Virtual Class Based Media Development Using Google Drivesrdquo

Teach Tarb Journals 2 (2) p 121

[5] I M Astra and D Ruharman 2012 Mobile Learning Application for Physics Using Adobe Flash

as a Supporting Instructional Media Educ Cult Journals 18 pp 174ndash180

[6] A Wicaksono 2017 The Role of Audio Media in Improving the Learning Process of a Shorts

Story Appreciation J Islam Multidiscip 2 (1) p 67

[7] A Baidawi 2016 Using Visual Media in Teaching Speaking J Lang Lit 10 (1) p 54

[8] R Fuady and A A Mutalib 2018 Audio-Visual Media in Learning J K6 Educ Manag 1 (2) pp

1ndash6

[9] N Asikin and E Daningsih 2018 Development Audio-Visual Learning Media of Hydroponic

System on Biotechnology Topik For Senior High Schools 174 pp 197ndash201

[10] Suyitno 2015 Pembuatan Media Pembelajaran Audio-Visual Untuk Materi Sistem Pemindah

Tenaga Otomotif J Pendidik Tek Otomotif 05 (02) pp 210ndash218

[11] Budiman 2014 The Role of Information Technology and Communication in Education J

Islam Educ 8 (I) pp 31ndash43

[12] R M Rish K Bylen H Vreeland and C C Wimberley 2015 Using Google Drive to Write

Dialogically with Teachers in Handbook of Research on Teacher Education in the Digital Age

Pennslyvania IGI Global 357ndash379

[13] H Marsquoazi and K Janfeshan 2018 The effect of Edmodo social learning network on Iranian EFL

learners writing skill Cogent Educ 5(1) pp 1ndash17

[14] K R Heggart and J Yoo 2018 Getting the most from google classroom A pedagogical

framework for tertiary educators Aust J Teach Educ 43 (3) pp 140ndash153

[15] S W Palocsay I S Markham and S E Markham 2010 Utilizing and teaching data tools in Excel

for exploratory analysis J Bus Res 63 (2) pp 191ndash206

[16] S D Aji M N Hudha C Huda and G Gufran 2018 Computer Animation with Adobe Flash

Professional Cs6 in Newtonrsquos Law in IOP Conference Series Materials Science and

Engineering 288 (1) pp 1ndash4

[17] D Ibrahim 2011 Engineering simulation with MATLAB Improving teaching and learning

effectiveness Procedia Computer Science 3 pp 853ndash858

[18] Rahmat Fahinu S Alfat and E Maryanti 2019 The Effect of STAD cooperative model by

GeoGebra assisted on increasing studentsrsquo geometry reasoning ability based on levels of

mathematics learning motivation Journal of Physics Conference Series 1315 (1)

[19] A Baarah A Aloqaily Z Salah M Zamzeer and M Sallam 2019 Machine learning approaches

for predicting the severity level of software bug reports in closed source projects Int J Adv

Comput Sci Appl 10 (8) pp 285ndash294

[20] D Nafisah and A Ghofur 2020 The Development of the Android Barcode Based Media Study

for IPS J Educ Learn Technol 1 (2) pp 144ndash152 2020

[21] C Surya and M Jannah Desain Web bagi pemula menggunakan html dan css (Jakarta PT Elex

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

10

Media Komputindo)

[22] D Rachmawan D Irwan and H Argyawati 2016 Application of Cargo Techniques on Local

Web Server by NTH Methods Using Microtics J Comput Sci Res Embed Log Syst 4(2) pp

98ndash108

[23] Y Meisella Kristania I Maryani and A Iqbal 2017 The Web-Based Academic Information

System of Texting in SMKN 2 Banyumas J Sci dan Manag 5(2) pp 82ndash89

[24] S Ramdhani and D Kurnia 2018 The Engineering of Computerized Web-Based Test System

Using an Open-Source Operating System in SD Swasta Alwashiyah 639 Medan J Comput

Sci Bus 9 pp 1932ndash1945

[25] M Kamal 2020 Research and Development ( R amp D ) Tadribat Drill Madrasah Aliyah Class X

Teaching Materials Arabic Language J Hist Educ Humanit 4(1) pp 10ndash18

[26] S Ohri 2017 TypeScript 2X by Example (Birmingham Packt Publishing Ltd)

[27] C Kesuma and M D Juniati 2020 The System for Small-Village Administration Information

(SIAKSA) is Web-Based in Alangamba Village of Cilacap District J Speed-Sentra Res Eng

Educ 12 (1) p 1

[28] R C Iskandar Aki Sridhar 2019 Web Development with Angular and Bootstrap Embrace

Responsive Web Design and Build Adaptive Angular Web Applications (3rd Editio

Birmingham UK Packt Publishing Ltd)

[29] F N Ugwoke and K C Okafor 2017 Cloud-DLT A Disruptive Cloud based Digital Library

using Lean Design Technique Circ Comput Sci 201 (01) pp 27ndash36

[30] N H Ahmad 2020 Tableau For Beginner Data Analysis and Visualization 101 (Bandung

Haszeli Ahmad

[31] N Ifada 2019 Interactive Web Programming Learning Using CMS Media Teachers and

Students in SMKN 1 Kamal Sci J Pangabdhi 5(2)

[32] V A Nechitailenko 2016 Converting LaTeX to HTML5 and EPUB3  A case study 4 pp 1ndash5

[33] R Satra and A M Mude 2019 The Performance Assessment System is Devoted to Society

ILKOMAS 1 (1) pp 1ndash7

[34] O W Purbo 2007 Practical Guidance RTRW-Net amp Wajanbolic Antenna (Jakarta Info

Komputer)

Page 6: PAPER OPEN ACCESS 7KHGHVLJQRIOHDUQLQJPHGLDXVLQJ ...

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

5

Table 1 Description of href function

Syntax Description href = indexhtml indexhtml directly in the main folder href = indexhtml indexhtml is on the previous folder href = Materiindexhtml indexhtml is in the main material folder href = Materiindexhtml indexhtml is in the Material folder outside the main

folder

In Figure 5 The page display does not have a background For this reason this section will explain

the background settings on HTML pages The background settings command can be seen in Figure 6

These three functions have respective roles such as the header intends to set the appearance of the

heading part nav has the function to set the navigation menu of the main menu section while the

footer has the function of regulating the display at the bottom of the HTML page In the three

commands above an additional command was included ldquobackground-colorrdquo ldquopaddingrdquo

ldquobackgroundrdquo ldquotext-alignrdquo ldquofont-sizerdquo and ldquocolorrdquo which commands have their respective roles

and also those commands are optional which while the command is not activated then the default

system applies For more details about the commands in the ldquoheaderrdquo ldquonavrdquo and ldquofooterrdquo can be

seen through the web page [31] The display of the use of commands in Figure 6(a) can be seen in

Figure 6 (b)

(a) (b)

Figure 6 (a) Settings program background layout and (b) Display HTML page background

After making the initial appearance of the media above the next step is to enter the material content

because some content consists of images and videos For that we will explain how to input images

and videos To include images in the material it is necessary to create an image folder in the main

folder this aims to make it easier to find the program file that is displayed The coding used to insert the

image is ldquoltimg src = file_namejpggtrdquo functions to call a file written according to the name of the

image then in the coding it is necessary to add a style function consisting of ldquowidthrdquo ldquoheightrdquo and

ldquomargin -rightrdquo The entered program language can be seen in Figure 7(a) and the display of the

results obtained from programming can be seen in Figure 7(b) As for inserting videos coding used is

very easy because it has the same function in the program inserting images but in video coding the

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

6

functions that need to be used are ltvideogt and ltvideogt as coding for calling videos additional

functions that need to be used namely a type that serves to find out the type of video data entered

(a) (b)

Figure 7 (a) Image program input and (b) HTML display after inserting images

To included images in the material it is necessary to create an image folder in the main folder this

aims to make it easier to find the program file that is displayed The syntax used to insert an image is

ltimg src = filenamejpggt the syntax function is to call a file written according to the name of the

image Some additional functions such as width height and margin-right also added to Syntax above

It aims to adjust the appearance of images on HTML pages The program command used can be seen

in Figure 7(a) and the display of the results obtained from programming can be seen in Figure 7(b)

Similar to the image input command the video input command also has the same Syntax However

Syntax video has additional functions namely ltvideogt and ltvideogt which aim to display videos

on HTML pages In addition additional functions type are inputted on file call commands For more

details about the program can be seen in Figure 8

(a) (b)

Figure 8 (a) Inserting program video to HTML and (b) Video display results on HTML pages

Presently lets make learning media with content that contains mathematical equations and symbols

Making equations on HTML pages is similar to making equations and mathematical symbols on

LaTeX [32] However there are additional commands such as lines (7) ndash (15) in Figure 9(a) this

command is a library for managing the display of mathematical equations and symbols This command

must be in every mathematical equation and symbol creation

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

7

Figure 9 (left) Inputting equations in HTML and (right) Results displayed on HTML pages

The making of this media intends to help teachers and students in the teaching and learning process

Teachers can create their own media with the desired design so that it helps students get good and free

learning at school In addition the benefits of using these learning media can be accessed offline then

the teacher can make questions and quiz in the JavaScript program the teacher does not need to prepare

a piece of paper to record students answers with these web pages students can answer via the web and

upload past students answers sent then the accumulated value can come out from the answer worked

on By using the JavaScript programming language the learning media can be used easily Because

the time given is very short we only fill in some of the content in it such as material animation

video and images for more details can be seen in Figure 10

Figure 10 Layout Display of (a) Homepage (b) Material (c) Questions and (d) References

b Making Learning Media Using JavaScript

This is an important part of this research Here we will integrate the learning media that was created in

the previous session using a local web server To design this system we use a router as a liaison

between the server and client which means we use a wireless system to connect one device to another

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

8

(server and client) Illustration of connectivity processes between routers servers and clients are seen

in Figure 11 For the record we use an offline network system that is not connected to the internet

network This is seen by the presence of the red cross symbol in Figure 11

The application of a local web server for sharing learning media data using JavaScript programming

language was tested on 11 students or clients in the Physics Education Laboratory Building FKIP

Halu Oleo University In general the test shows that the local web server can provide access to

information to all clients without connecting to the internet or being offline Besides that to access each

page can be done quickly and most importantly compatible with all devices The trial process can be

seen in Figure 11 From this trial it can be used in schools to become alternative teaching and learning

in virtual classrooms [33]

Figure 11 Illustration of Display Router Used Using 1 Server and 11 Clients

(a) (b) (c)

Figure 12 The Local Web Server Testing Process (a) Media Folders (b) Web Media (c) Clients with

11 Students

4 Summary and Recomendation

Research on the design of learning media using the JavaScript programming language and implemented

on the local web server system has been carried out Some things to note in this study are this learning

media is very easy to make and most importantly easy to use This is proven by the programming

language that has been integrated into the Visual Studio Code application and Notepad ++ Not only

that but JavaScript can also be paired up in HTML and CSS languages To make it easier for users to

input data in the form of videos images and animations The use of a local web server that functions

like file sharing so that data is on the server computer can be accessed using a computer which has

entered IP address Here to prove it we use 12 laptop clients simultaneously that are connected using

a router This research is preliminary so in the future we want to continue by testing the media in

several schools in Kendari In addition this research will be more interesting if integrating the media

into the RTRW Net network system [34] This can help overcome information gaps in schools in

which internet access is limited

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

9

Acknowledgments

Thanks to the Rector of Halu Oleo University and the Chairman of Education and Teacher Training

Faculty And also to our friends who help us to complete our research

References

[1] A Pininta ldquoIndonesias Low Student in PISA Nadiem Prepares these 5 Strategiesrdquo

wwwkompascom 2020 httpsedukasikompascomread20200405154418571 indonesias-

low-student-in-pisa-nadiem-prepares-these-5-strategiespage=all (accessed Jul 14 2020)

[2] C Sunaengsih 2016 The Impact of Learning Media on the Quality of Learning on Accredited A

Elementary Schools Elem Sch Pulpit J 3 (2) pp 183ndash190

[3] B Widiantoro and R Lusia 2015 The Schoon-Based Media Development of E-Learning Media

on Basic Competence Understands the Atomic Model of Semiconductors in SMKN 1 Jetis

Mojokerto Educ J Electr Eng 04 (2) pp 501ndash506

[4] Sohibun and F Y Ade 2017 Virtual Class Based Media Development Using Google Drivesrdquo

Teach Tarb Journals 2 (2) p 121

[5] I M Astra and D Ruharman 2012 Mobile Learning Application for Physics Using Adobe Flash

as a Supporting Instructional Media Educ Cult Journals 18 pp 174ndash180

[6] A Wicaksono 2017 The Role of Audio Media in Improving the Learning Process of a Shorts

Story Appreciation J Islam Multidiscip 2 (1) p 67

[7] A Baidawi 2016 Using Visual Media in Teaching Speaking J Lang Lit 10 (1) p 54

[8] R Fuady and A A Mutalib 2018 Audio-Visual Media in Learning J K6 Educ Manag 1 (2) pp

1ndash6

[9] N Asikin and E Daningsih 2018 Development Audio-Visual Learning Media of Hydroponic

System on Biotechnology Topik For Senior High Schools 174 pp 197ndash201

[10] Suyitno 2015 Pembuatan Media Pembelajaran Audio-Visual Untuk Materi Sistem Pemindah

Tenaga Otomotif J Pendidik Tek Otomotif 05 (02) pp 210ndash218

[11] Budiman 2014 The Role of Information Technology and Communication in Education J

Islam Educ 8 (I) pp 31ndash43

[12] R M Rish K Bylen H Vreeland and C C Wimberley 2015 Using Google Drive to Write

Dialogically with Teachers in Handbook of Research on Teacher Education in the Digital Age

Pennslyvania IGI Global 357ndash379

[13] H Marsquoazi and K Janfeshan 2018 The effect of Edmodo social learning network on Iranian EFL

learners writing skill Cogent Educ 5(1) pp 1ndash17

[14] K R Heggart and J Yoo 2018 Getting the most from google classroom A pedagogical

framework for tertiary educators Aust J Teach Educ 43 (3) pp 140ndash153

[15] S W Palocsay I S Markham and S E Markham 2010 Utilizing and teaching data tools in Excel

for exploratory analysis J Bus Res 63 (2) pp 191ndash206

[16] S D Aji M N Hudha C Huda and G Gufran 2018 Computer Animation with Adobe Flash

Professional Cs6 in Newtonrsquos Law in IOP Conference Series Materials Science and

Engineering 288 (1) pp 1ndash4

[17] D Ibrahim 2011 Engineering simulation with MATLAB Improving teaching and learning

effectiveness Procedia Computer Science 3 pp 853ndash858

[18] Rahmat Fahinu S Alfat and E Maryanti 2019 The Effect of STAD cooperative model by

GeoGebra assisted on increasing studentsrsquo geometry reasoning ability based on levels of

mathematics learning motivation Journal of Physics Conference Series 1315 (1)

[19] A Baarah A Aloqaily Z Salah M Zamzeer and M Sallam 2019 Machine learning approaches

for predicting the severity level of software bug reports in closed source projects Int J Adv

Comput Sci Appl 10 (8) pp 285ndash294

[20] D Nafisah and A Ghofur 2020 The Development of the Android Barcode Based Media Study

for IPS J Educ Learn Technol 1 (2) pp 144ndash152 2020

[21] C Surya and M Jannah Desain Web bagi pemula menggunakan html dan css (Jakarta PT Elex

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

10

Media Komputindo)

[22] D Rachmawan D Irwan and H Argyawati 2016 Application of Cargo Techniques on Local

Web Server by NTH Methods Using Microtics J Comput Sci Res Embed Log Syst 4(2) pp

98ndash108

[23] Y Meisella Kristania I Maryani and A Iqbal 2017 The Web-Based Academic Information

System of Texting in SMKN 2 Banyumas J Sci dan Manag 5(2) pp 82ndash89

[24] S Ramdhani and D Kurnia 2018 The Engineering of Computerized Web-Based Test System

Using an Open-Source Operating System in SD Swasta Alwashiyah 639 Medan J Comput

Sci Bus 9 pp 1932ndash1945

[25] M Kamal 2020 Research and Development ( R amp D ) Tadribat Drill Madrasah Aliyah Class X

Teaching Materials Arabic Language J Hist Educ Humanit 4(1) pp 10ndash18

[26] S Ohri 2017 TypeScript 2X by Example (Birmingham Packt Publishing Ltd)

[27] C Kesuma and M D Juniati 2020 The System for Small-Village Administration Information

(SIAKSA) is Web-Based in Alangamba Village of Cilacap District J Speed-Sentra Res Eng

Educ 12 (1) p 1

[28] R C Iskandar Aki Sridhar 2019 Web Development with Angular and Bootstrap Embrace

Responsive Web Design and Build Adaptive Angular Web Applications (3rd Editio

Birmingham UK Packt Publishing Ltd)

[29] F N Ugwoke and K C Okafor 2017 Cloud-DLT A Disruptive Cloud based Digital Library

using Lean Design Technique Circ Comput Sci 201 (01) pp 27ndash36

[30] N H Ahmad 2020 Tableau For Beginner Data Analysis and Visualization 101 (Bandung

Haszeli Ahmad

[31] N Ifada 2019 Interactive Web Programming Learning Using CMS Media Teachers and

Students in SMKN 1 Kamal Sci J Pangabdhi 5(2)

[32] V A Nechitailenko 2016 Converting LaTeX to HTML5 and EPUB3  A case study 4 pp 1ndash5

[33] R Satra and A M Mude 2019 The Performance Assessment System is Devoted to Society

ILKOMAS 1 (1) pp 1ndash7

[34] O W Purbo 2007 Practical Guidance RTRW-Net amp Wajanbolic Antenna (Jakarta Info

Komputer)

Page 7: PAPER OPEN ACCESS 7KHGHVLJQRIOHDUQLQJPHGLDXVLQJ ...

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

6

functions that need to be used are ltvideogt and ltvideogt as coding for calling videos additional

functions that need to be used namely a type that serves to find out the type of video data entered

(a) (b)

Figure 7 (a) Image program input and (b) HTML display after inserting images

To included images in the material it is necessary to create an image folder in the main folder this

aims to make it easier to find the program file that is displayed The syntax used to insert an image is

ltimg src = filenamejpggt the syntax function is to call a file written according to the name of the

image Some additional functions such as width height and margin-right also added to Syntax above

It aims to adjust the appearance of images on HTML pages The program command used can be seen

in Figure 7(a) and the display of the results obtained from programming can be seen in Figure 7(b)

Similar to the image input command the video input command also has the same Syntax However

Syntax video has additional functions namely ltvideogt and ltvideogt which aim to display videos

on HTML pages In addition additional functions type are inputted on file call commands For more

details about the program can be seen in Figure 8

(a) (b)

Figure 8 (a) Inserting program video to HTML and (b) Video display results on HTML pages

Presently lets make learning media with content that contains mathematical equations and symbols

Making equations on HTML pages is similar to making equations and mathematical symbols on

LaTeX [32] However there are additional commands such as lines (7) ndash (15) in Figure 9(a) this

command is a library for managing the display of mathematical equations and symbols This command

must be in every mathematical equation and symbol creation

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

7

Figure 9 (left) Inputting equations in HTML and (right) Results displayed on HTML pages

The making of this media intends to help teachers and students in the teaching and learning process

Teachers can create their own media with the desired design so that it helps students get good and free

learning at school In addition the benefits of using these learning media can be accessed offline then

the teacher can make questions and quiz in the JavaScript program the teacher does not need to prepare

a piece of paper to record students answers with these web pages students can answer via the web and

upload past students answers sent then the accumulated value can come out from the answer worked

on By using the JavaScript programming language the learning media can be used easily Because

the time given is very short we only fill in some of the content in it such as material animation

video and images for more details can be seen in Figure 10

Figure 10 Layout Display of (a) Homepage (b) Material (c) Questions and (d) References

b Making Learning Media Using JavaScript

This is an important part of this research Here we will integrate the learning media that was created in

the previous session using a local web server To design this system we use a router as a liaison

between the server and client which means we use a wireless system to connect one device to another

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

8

(server and client) Illustration of connectivity processes between routers servers and clients are seen

in Figure 11 For the record we use an offline network system that is not connected to the internet

network This is seen by the presence of the red cross symbol in Figure 11

The application of a local web server for sharing learning media data using JavaScript programming

language was tested on 11 students or clients in the Physics Education Laboratory Building FKIP

Halu Oleo University In general the test shows that the local web server can provide access to

information to all clients without connecting to the internet or being offline Besides that to access each

page can be done quickly and most importantly compatible with all devices The trial process can be

seen in Figure 11 From this trial it can be used in schools to become alternative teaching and learning

in virtual classrooms [33]

Figure 11 Illustration of Display Router Used Using 1 Server and 11 Clients

(a) (b) (c)

Figure 12 The Local Web Server Testing Process (a) Media Folders (b) Web Media (c) Clients with

11 Students

4 Summary and Recomendation

Research on the design of learning media using the JavaScript programming language and implemented

on the local web server system has been carried out Some things to note in this study are this learning

media is very easy to make and most importantly easy to use This is proven by the programming

language that has been integrated into the Visual Studio Code application and Notepad ++ Not only

that but JavaScript can also be paired up in HTML and CSS languages To make it easier for users to

input data in the form of videos images and animations The use of a local web server that functions

like file sharing so that data is on the server computer can be accessed using a computer which has

entered IP address Here to prove it we use 12 laptop clients simultaneously that are connected using

a router This research is preliminary so in the future we want to continue by testing the media in

several schools in Kendari In addition this research will be more interesting if integrating the media

into the RTRW Net network system [34] This can help overcome information gaps in schools in

which internet access is limited

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

9

Acknowledgments

Thanks to the Rector of Halu Oleo University and the Chairman of Education and Teacher Training

Faculty And also to our friends who help us to complete our research

References

[1] A Pininta ldquoIndonesias Low Student in PISA Nadiem Prepares these 5 Strategiesrdquo

wwwkompascom 2020 httpsedukasikompascomread20200405154418571 indonesias-

low-student-in-pisa-nadiem-prepares-these-5-strategiespage=all (accessed Jul 14 2020)

[2] C Sunaengsih 2016 The Impact of Learning Media on the Quality of Learning on Accredited A

Elementary Schools Elem Sch Pulpit J 3 (2) pp 183ndash190

[3] B Widiantoro and R Lusia 2015 The Schoon-Based Media Development of E-Learning Media

on Basic Competence Understands the Atomic Model of Semiconductors in SMKN 1 Jetis

Mojokerto Educ J Electr Eng 04 (2) pp 501ndash506

[4] Sohibun and F Y Ade 2017 Virtual Class Based Media Development Using Google Drivesrdquo

Teach Tarb Journals 2 (2) p 121

[5] I M Astra and D Ruharman 2012 Mobile Learning Application for Physics Using Adobe Flash

as a Supporting Instructional Media Educ Cult Journals 18 pp 174ndash180

[6] A Wicaksono 2017 The Role of Audio Media in Improving the Learning Process of a Shorts

Story Appreciation J Islam Multidiscip 2 (1) p 67

[7] A Baidawi 2016 Using Visual Media in Teaching Speaking J Lang Lit 10 (1) p 54

[8] R Fuady and A A Mutalib 2018 Audio-Visual Media in Learning J K6 Educ Manag 1 (2) pp

1ndash6

[9] N Asikin and E Daningsih 2018 Development Audio-Visual Learning Media of Hydroponic

System on Biotechnology Topik For Senior High Schools 174 pp 197ndash201

[10] Suyitno 2015 Pembuatan Media Pembelajaran Audio-Visual Untuk Materi Sistem Pemindah

Tenaga Otomotif J Pendidik Tek Otomotif 05 (02) pp 210ndash218

[11] Budiman 2014 The Role of Information Technology and Communication in Education J

Islam Educ 8 (I) pp 31ndash43

[12] R M Rish K Bylen H Vreeland and C C Wimberley 2015 Using Google Drive to Write

Dialogically with Teachers in Handbook of Research on Teacher Education in the Digital Age

Pennslyvania IGI Global 357ndash379

[13] H Marsquoazi and K Janfeshan 2018 The effect of Edmodo social learning network on Iranian EFL

learners writing skill Cogent Educ 5(1) pp 1ndash17

[14] K R Heggart and J Yoo 2018 Getting the most from google classroom A pedagogical

framework for tertiary educators Aust J Teach Educ 43 (3) pp 140ndash153

[15] S W Palocsay I S Markham and S E Markham 2010 Utilizing and teaching data tools in Excel

for exploratory analysis J Bus Res 63 (2) pp 191ndash206

[16] S D Aji M N Hudha C Huda and G Gufran 2018 Computer Animation with Adobe Flash

Professional Cs6 in Newtonrsquos Law in IOP Conference Series Materials Science and

Engineering 288 (1) pp 1ndash4

[17] D Ibrahim 2011 Engineering simulation with MATLAB Improving teaching and learning

effectiveness Procedia Computer Science 3 pp 853ndash858

[18] Rahmat Fahinu S Alfat and E Maryanti 2019 The Effect of STAD cooperative model by

GeoGebra assisted on increasing studentsrsquo geometry reasoning ability based on levels of

mathematics learning motivation Journal of Physics Conference Series 1315 (1)

[19] A Baarah A Aloqaily Z Salah M Zamzeer and M Sallam 2019 Machine learning approaches

for predicting the severity level of software bug reports in closed source projects Int J Adv

Comput Sci Appl 10 (8) pp 285ndash294

[20] D Nafisah and A Ghofur 2020 The Development of the Android Barcode Based Media Study

for IPS J Educ Learn Technol 1 (2) pp 144ndash152 2020

[21] C Surya and M Jannah Desain Web bagi pemula menggunakan html dan css (Jakarta PT Elex

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

10

Media Komputindo)

[22] D Rachmawan D Irwan and H Argyawati 2016 Application of Cargo Techniques on Local

Web Server by NTH Methods Using Microtics J Comput Sci Res Embed Log Syst 4(2) pp

98ndash108

[23] Y Meisella Kristania I Maryani and A Iqbal 2017 The Web-Based Academic Information

System of Texting in SMKN 2 Banyumas J Sci dan Manag 5(2) pp 82ndash89

[24] S Ramdhani and D Kurnia 2018 The Engineering of Computerized Web-Based Test System

Using an Open-Source Operating System in SD Swasta Alwashiyah 639 Medan J Comput

Sci Bus 9 pp 1932ndash1945

[25] M Kamal 2020 Research and Development ( R amp D ) Tadribat Drill Madrasah Aliyah Class X

Teaching Materials Arabic Language J Hist Educ Humanit 4(1) pp 10ndash18

[26] S Ohri 2017 TypeScript 2X by Example (Birmingham Packt Publishing Ltd)

[27] C Kesuma and M D Juniati 2020 The System for Small-Village Administration Information

(SIAKSA) is Web-Based in Alangamba Village of Cilacap District J Speed-Sentra Res Eng

Educ 12 (1) p 1

[28] R C Iskandar Aki Sridhar 2019 Web Development with Angular and Bootstrap Embrace

Responsive Web Design and Build Adaptive Angular Web Applications (3rd Editio

Birmingham UK Packt Publishing Ltd)

[29] F N Ugwoke and K C Okafor 2017 Cloud-DLT A Disruptive Cloud based Digital Library

using Lean Design Technique Circ Comput Sci 201 (01) pp 27ndash36

[30] N H Ahmad 2020 Tableau For Beginner Data Analysis and Visualization 101 (Bandung

Haszeli Ahmad

[31] N Ifada 2019 Interactive Web Programming Learning Using CMS Media Teachers and

Students in SMKN 1 Kamal Sci J Pangabdhi 5(2)

[32] V A Nechitailenko 2016 Converting LaTeX to HTML5 and EPUB3  A case study 4 pp 1ndash5

[33] R Satra and A M Mude 2019 The Performance Assessment System is Devoted to Society

ILKOMAS 1 (1) pp 1ndash7

[34] O W Purbo 2007 Practical Guidance RTRW-Net amp Wajanbolic Antenna (Jakarta Info

Komputer)

Page 8: PAPER OPEN ACCESS 7KHGHVLJQRIOHDUQLQJPHGLDXVLQJ ...

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

7

Figure 9 (left) Inputting equations in HTML and (right) Results displayed on HTML pages

The making of this media intends to help teachers and students in the teaching and learning process

Teachers can create their own media with the desired design so that it helps students get good and free

learning at school In addition the benefits of using these learning media can be accessed offline then

the teacher can make questions and quiz in the JavaScript program the teacher does not need to prepare

a piece of paper to record students answers with these web pages students can answer via the web and

upload past students answers sent then the accumulated value can come out from the answer worked

on By using the JavaScript programming language the learning media can be used easily Because

the time given is very short we only fill in some of the content in it such as material animation

video and images for more details can be seen in Figure 10

Figure 10 Layout Display of (a) Homepage (b) Material (c) Questions and (d) References

b Making Learning Media Using JavaScript

This is an important part of this research Here we will integrate the learning media that was created in

the previous session using a local web server To design this system we use a router as a liaison

between the server and client which means we use a wireless system to connect one device to another

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

8

(server and client) Illustration of connectivity processes between routers servers and clients are seen

in Figure 11 For the record we use an offline network system that is not connected to the internet

network This is seen by the presence of the red cross symbol in Figure 11

The application of a local web server for sharing learning media data using JavaScript programming

language was tested on 11 students or clients in the Physics Education Laboratory Building FKIP

Halu Oleo University In general the test shows that the local web server can provide access to

information to all clients without connecting to the internet or being offline Besides that to access each

page can be done quickly and most importantly compatible with all devices The trial process can be

seen in Figure 11 From this trial it can be used in schools to become alternative teaching and learning

in virtual classrooms [33]

Figure 11 Illustration of Display Router Used Using 1 Server and 11 Clients

(a) (b) (c)

Figure 12 The Local Web Server Testing Process (a) Media Folders (b) Web Media (c) Clients with

11 Students

4 Summary and Recomendation

Research on the design of learning media using the JavaScript programming language and implemented

on the local web server system has been carried out Some things to note in this study are this learning

media is very easy to make and most importantly easy to use This is proven by the programming

language that has been integrated into the Visual Studio Code application and Notepad ++ Not only

that but JavaScript can also be paired up in HTML and CSS languages To make it easier for users to

input data in the form of videos images and animations The use of a local web server that functions

like file sharing so that data is on the server computer can be accessed using a computer which has

entered IP address Here to prove it we use 12 laptop clients simultaneously that are connected using

a router This research is preliminary so in the future we want to continue by testing the media in

several schools in Kendari In addition this research will be more interesting if integrating the media

into the RTRW Net network system [34] This can help overcome information gaps in schools in

which internet access is limited

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

9

Acknowledgments

Thanks to the Rector of Halu Oleo University and the Chairman of Education and Teacher Training

Faculty And also to our friends who help us to complete our research

References

[1] A Pininta ldquoIndonesias Low Student in PISA Nadiem Prepares these 5 Strategiesrdquo

wwwkompascom 2020 httpsedukasikompascomread20200405154418571 indonesias-

low-student-in-pisa-nadiem-prepares-these-5-strategiespage=all (accessed Jul 14 2020)

[2] C Sunaengsih 2016 The Impact of Learning Media on the Quality of Learning on Accredited A

Elementary Schools Elem Sch Pulpit J 3 (2) pp 183ndash190

[3] B Widiantoro and R Lusia 2015 The Schoon-Based Media Development of E-Learning Media

on Basic Competence Understands the Atomic Model of Semiconductors in SMKN 1 Jetis

Mojokerto Educ J Electr Eng 04 (2) pp 501ndash506

[4] Sohibun and F Y Ade 2017 Virtual Class Based Media Development Using Google Drivesrdquo

Teach Tarb Journals 2 (2) p 121

[5] I M Astra and D Ruharman 2012 Mobile Learning Application for Physics Using Adobe Flash

as a Supporting Instructional Media Educ Cult Journals 18 pp 174ndash180

[6] A Wicaksono 2017 The Role of Audio Media in Improving the Learning Process of a Shorts

Story Appreciation J Islam Multidiscip 2 (1) p 67

[7] A Baidawi 2016 Using Visual Media in Teaching Speaking J Lang Lit 10 (1) p 54

[8] R Fuady and A A Mutalib 2018 Audio-Visual Media in Learning J K6 Educ Manag 1 (2) pp

1ndash6

[9] N Asikin and E Daningsih 2018 Development Audio-Visual Learning Media of Hydroponic

System on Biotechnology Topik For Senior High Schools 174 pp 197ndash201

[10] Suyitno 2015 Pembuatan Media Pembelajaran Audio-Visual Untuk Materi Sistem Pemindah

Tenaga Otomotif J Pendidik Tek Otomotif 05 (02) pp 210ndash218

[11] Budiman 2014 The Role of Information Technology and Communication in Education J

Islam Educ 8 (I) pp 31ndash43

[12] R M Rish K Bylen H Vreeland and C C Wimberley 2015 Using Google Drive to Write

Dialogically with Teachers in Handbook of Research on Teacher Education in the Digital Age

Pennslyvania IGI Global 357ndash379

[13] H Marsquoazi and K Janfeshan 2018 The effect of Edmodo social learning network on Iranian EFL

learners writing skill Cogent Educ 5(1) pp 1ndash17

[14] K R Heggart and J Yoo 2018 Getting the most from google classroom A pedagogical

framework for tertiary educators Aust J Teach Educ 43 (3) pp 140ndash153

[15] S W Palocsay I S Markham and S E Markham 2010 Utilizing and teaching data tools in Excel

for exploratory analysis J Bus Res 63 (2) pp 191ndash206

[16] S D Aji M N Hudha C Huda and G Gufran 2018 Computer Animation with Adobe Flash

Professional Cs6 in Newtonrsquos Law in IOP Conference Series Materials Science and

Engineering 288 (1) pp 1ndash4

[17] D Ibrahim 2011 Engineering simulation with MATLAB Improving teaching and learning

effectiveness Procedia Computer Science 3 pp 853ndash858

[18] Rahmat Fahinu S Alfat and E Maryanti 2019 The Effect of STAD cooperative model by

GeoGebra assisted on increasing studentsrsquo geometry reasoning ability based on levels of

mathematics learning motivation Journal of Physics Conference Series 1315 (1)

[19] A Baarah A Aloqaily Z Salah M Zamzeer and M Sallam 2019 Machine learning approaches

for predicting the severity level of software bug reports in closed source projects Int J Adv

Comput Sci Appl 10 (8) pp 285ndash294

[20] D Nafisah and A Ghofur 2020 The Development of the Android Barcode Based Media Study

for IPS J Educ Learn Technol 1 (2) pp 144ndash152 2020

[21] C Surya and M Jannah Desain Web bagi pemula menggunakan html dan css (Jakarta PT Elex

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

10

Media Komputindo)

[22] D Rachmawan D Irwan and H Argyawati 2016 Application of Cargo Techniques on Local

Web Server by NTH Methods Using Microtics J Comput Sci Res Embed Log Syst 4(2) pp

98ndash108

[23] Y Meisella Kristania I Maryani and A Iqbal 2017 The Web-Based Academic Information

System of Texting in SMKN 2 Banyumas J Sci dan Manag 5(2) pp 82ndash89

[24] S Ramdhani and D Kurnia 2018 The Engineering of Computerized Web-Based Test System

Using an Open-Source Operating System in SD Swasta Alwashiyah 639 Medan J Comput

Sci Bus 9 pp 1932ndash1945

[25] M Kamal 2020 Research and Development ( R amp D ) Tadribat Drill Madrasah Aliyah Class X

Teaching Materials Arabic Language J Hist Educ Humanit 4(1) pp 10ndash18

[26] S Ohri 2017 TypeScript 2X by Example (Birmingham Packt Publishing Ltd)

[27] C Kesuma and M D Juniati 2020 The System for Small-Village Administration Information

(SIAKSA) is Web-Based in Alangamba Village of Cilacap District J Speed-Sentra Res Eng

Educ 12 (1) p 1

[28] R C Iskandar Aki Sridhar 2019 Web Development with Angular and Bootstrap Embrace

Responsive Web Design and Build Adaptive Angular Web Applications (3rd Editio

Birmingham UK Packt Publishing Ltd)

[29] F N Ugwoke and K C Okafor 2017 Cloud-DLT A Disruptive Cloud based Digital Library

using Lean Design Technique Circ Comput Sci 201 (01) pp 27ndash36

[30] N H Ahmad 2020 Tableau For Beginner Data Analysis and Visualization 101 (Bandung

Haszeli Ahmad

[31] N Ifada 2019 Interactive Web Programming Learning Using CMS Media Teachers and

Students in SMKN 1 Kamal Sci J Pangabdhi 5(2)

[32] V A Nechitailenko 2016 Converting LaTeX to HTML5 and EPUB3  A case study 4 pp 1ndash5

[33] R Satra and A M Mude 2019 The Performance Assessment System is Devoted to Society

ILKOMAS 1 (1) pp 1ndash7

[34] O W Purbo 2007 Practical Guidance RTRW-Net amp Wajanbolic Antenna (Jakarta Info

Komputer)

Page 9: PAPER OPEN ACCESS 7KHGHVLJQRIOHDUQLQJPHGLDXVLQJ ...

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

8

(server and client) Illustration of connectivity processes between routers servers and clients are seen

in Figure 11 For the record we use an offline network system that is not connected to the internet

network This is seen by the presence of the red cross symbol in Figure 11

The application of a local web server for sharing learning media data using JavaScript programming

language was tested on 11 students or clients in the Physics Education Laboratory Building FKIP

Halu Oleo University In general the test shows that the local web server can provide access to

information to all clients without connecting to the internet or being offline Besides that to access each

page can be done quickly and most importantly compatible with all devices The trial process can be

seen in Figure 11 From this trial it can be used in schools to become alternative teaching and learning

in virtual classrooms [33]

Figure 11 Illustration of Display Router Used Using 1 Server and 11 Clients

(a) (b) (c)

Figure 12 The Local Web Server Testing Process (a) Media Folders (b) Web Media (c) Clients with

11 Students

4 Summary and Recomendation

Research on the design of learning media using the JavaScript programming language and implemented

on the local web server system has been carried out Some things to note in this study are this learning

media is very easy to make and most importantly easy to use This is proven by the programming

language that has been integrated into the Visual Studio Code application and Notepad ++ Not only

that but JavaScript can also be paired up in HTML and CSS languages To make it easier for users to

input data in the form of videos images and animations The use of a local web server that functions

like file sharing so that data is on the server computer can be accessed using a computer which has

entered IP address Here to prove it we use 12 laptop clients simultaneously that are connected using

a router This research is preliminary so in the future we want to continue by testing the media in

several schools in Kendari In addition this research will be more interesting if integrating the media

into the RTRW Net network system [34] This can help overcome information gaps in schools in

which internet access is limited

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

9

Acknowledgments

Thanks to the Rector of Halu Oleo University and the Chairman of Education and Teacher Training

Faculty And also to our friends who help us to complete our research

References

[1] A Pininta ldquoIndonesias Low Student in PISA Nadiem Prepares these 5 Strategiesrdquo

wwwkompascom 2020 httpsedukasikompascomread20200405154418571 indonesias-

low-student-in-pisa-nadiem-prepares-these-5-strategiespage=all (accessed Jul 14 2020)

[2] C Sunaengsih 2016 The Impact of Learning Media on the Quality of Learning on Accredited A

Elementary Schools Elem Sch Pulpit J 3 (2) pp 183ndash190

[3] B Widiantoro and R Lusia 2015 The Schoon-Based Media Development of E-Learning Media

on Basic Competence Understands the Atomic Model of Semiconductors in SMKN 1 Jetis

Mojokerto Educ J Electr Eng 04 (2) pp 501ndash506

[4] Sohibun and F Y Ade 2017 Virtual Class Based Media Development Using Google Drivesrdquo

Teach Tarb Journals 2 (2) p 121

[5] I M Astra and D Ruharman 2012 Mobile Learning Application for Physics Using Adobe Flash

as a Supporting Instructional Media Educ Cult Journals 18 pp 174ndash180

[6] A Wicaksono 2017 The Role of Audio Media in Improving the Learning Process of a Shorts

Story Appreciation J Islam Multidiscip 2 (1) p 67

[7] A Baidawi 2016 Using Visual Media in Teaching Speaking J Lang Lit 10 (1) p 54

[8] R Fuady and A A Mutalib 2018 Audio-Visual Media in Learning J K6 Educ Manag 1 (2) pp

1ndash6

[9] N Asikin and E Daningsih 2018 Development Audio-Visual Learning Media of Hydroponic

System on Biotechnology Topik For Senior High Schools 174 pp 197ndash201

[10] Suyitno 2015 Pembuatan Media Pembelajaran Audio-Visual Untuk Materi Sistem Pemindah

Tenaga Otomotif J Pendidik Tek Otomotif 05 (02) pp 210ndash218

[11] Budiman 2014 The Role of Information Technology and Communication in Education J

Islam Educ 8 (I) pp 31ndash43

[12] R M Rish K Bylen H Vreeland and C C Wimberley 2015 Using Google Drive to Write

Dialogically with Teachers in Handbook of Research on Teacher Education in the Digital Age

Pennslyvania IGI Global 357ndash379

[13] H Marsquoazi and K Janfeshan 2018 The effect of Edmodo social learning network on Iranian EFL

learners writing skill Cogent Educ 5(1) pp 1ndash17

[14] K R Heggart and J Yoo 2018 Getting the most from google classroom A pedagogical

framework for tertiary educators Aust J Teach Educ 43 (3) pp 140ndash153

[15] S W Palocsay I S Markham and S E Markham 2010 Utilizing and teaching data tools in Excel

for exploratory analysis J Bus Res 63 (2) pp 191ndash206

[16] S D Aji M N Hudha C Huda and G Gufran 2018 Computer Animation with Adobe Flash

Professional Cs6 in Newtonrsquos Law in IOP Conference Series Materials Science and

Engineering 288 (1) pp 1ndash4

[17] D Ibrahim 2011 Engineering simulation with MATLAB Improving teaching and learning

effectiveness Procedia Computer Science 3 pp 853ndash858

[18] Rahmat Fahinu S Alfat and E Maryanti 2019 The Effect of STAD cooperative model by

GeoGebra assisted on increasing studentsrsquo geometry reasoning ability based on levels of

mathematics learning motivation Journal of Physics Conference Series 1315 (1)

[19] A Baarah A Aloqaily Z Salah M Zamzeer and M Sallam 2019 Machine learning approaches

for predicting the severity level of software bug reports in closed source projects Int J Adv

Comput Sci Appl 10 (8) pp 285ndash294

[20] D Nafisah and A Ghofur 2020 The Development of the Android Barcode Based Media Study

for IPS J Educ Learn Technol 1 (2) pp 144ndash152 2020

[21] C Surya and M Jannah Desain Web bagi pemula menggunakan html dan css (Jakarta PT Elex

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

10

Media Komputindo)

[22] D Rachmawan D Irwan and H Argyawati 2016 Application of Cargo Techniques on Local

Web Server by NTH Methods Using Microtics J Comput Sci Res Embed Log Syst 4(2) pp

98ndash108

[23] Y Meisella Kristania I Maryani and A Iqbal 2017 The Web-Based Academic Information

System of Texting in SMKN 2 Banyumas J Sci dan Manag 5(2) pp 82ndash89

[24] S Ramdhani and D Kurnia 2018 The Engineering of Computerized Web-Based Test System

Using an Open-Source Operating System in SD Swasta Alwashiyah 639 Medan J Comput

Sci Bus 9 pp 1932ndash1945

[25] M Kamal 2020 Research and Development ( R amp D ) Tadribat Drill Madrasah Aliyah Class X

Teaching Materials Arabic Language J Hist Educ Humanit 4(1) pp 10ndash18

[26] S Ohri 2017 TypeScript 2X by Example (Birmingham Packt Publishing Ltd)

[27] C Kesuma and M D Juniati 2020 The System for Small-Village Administration Information

(SIAKSA) is Web-Based in Alangamba Village of Cilacap District J Speed-Sentra Res Eng

Educ 12 (1) p 1

[28] R C Iskandar Aki Sridhar 2019 Web Development with Angular and Bootstrap Embrace

Responsive Web Design and Build Adaptive Angular Web Applications (3rd Editio

Birmingham UK Packt Publishing Ltd)

[29] F N Ugwoke and K C Okafor 2017 Cloud-DLT A Disruptive Cloud based Digital Library

using Lean Design Technique Circ Comput Sci 201 (01) pp 27ndash36

[30] N H Ahmad 2020 Tableau For Beginner Data Analysis and Visualization 101 (Bandung

Haszeli Ahmad

[31] N Ifada 2019 Interactive Web Programming Learning Using CMS Media Teachers and

Students in SMKN 1 Kamal Sci J Pangabdhi 5(2)

[32] V A Nechitailenko 2016 Converting LaTeX to HTML5 and EPUB3  A case study 4 pp 1ndash5

[33] R Satra and A M Mude 2019 The Performance Assessment System is Devoted to Society

ILKOMAS 1 (1) pp 1ndash7

[34] O W Purbo 2007 Practical Guidance RTRW-Net amp Wajanbolic Antenna (Jakarta Info

Komputer)

Page 10: PAPER OPEN ACCESS 7KHGHVLJQRIOHDUQLQJPHGLDXVLQJ ...

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

9

Acknowledgments

Thanks to the Rector of Halu Oleo University and the Chairman of Education and Teacher Training

Faculty And also to our friends who help us to complete our research

References

[1] A Pininta ldquoIndonesias Low Student in PISA Nadiem Prepares these 5 Strategiesrdquo

wwwkompascom 2020 httpsedukasikompascomread20200405154418571 indonesias-

low-student-in-pisa-nadiem-prepares-these-5-strategiespage=all (accessed Jul 14 2020)

[2] C Sunaengsih 2016 The Impact of Learning Media on the Quality of Learning on Accredited A

Elementary Schools Elem Sch Pulpit J 3 (2) pp 183ndash190

[3] B Widiantoro and R Lusia 2015 The Schoon-Based Media Development of E-Learning Media

on Basic Competence Understands the Atomic Model of Semiconductors in SMKN 1 Jetis

Mojokerto Educ J Electr Eng 04 (2) pp 501ndash506

[4] Sohibun and F Y Ade 2017 Virtual Class Based Media Development Using Google Drivesrdquo

Teach Tarb Journals 2 (2) p 121

[5] I M Astra and D Ruharman 2012 Mobile Learning Application for Physics Using Adobe Flash

as a Supporting Instructional Media Educ Cult Journals 18 pp 174ndash180

[6] A Wicaksono 2017 The Role of Audio Media in Improving the Learning Process of a Shorts

Story Appreciation J Islam Multidiscip 2 (1) p 67

[7] A Baidawi 2016 Using Visual Media in Teaching Speaking J Lang Lit 10 (1) p 54

[8] R Fuady and A A Mutalib 2018 Audio-Visual Media in Learning J K6 Educ Manag 1 (2) pp

1ndash6

[9] N Asikin and E Daningsih 2018 Development Audio-Visual Learning Media of Hydroponic

System on Biotechnology Topik For Senior High Schools 174 pp 197ndash201

[10] Suyitno 2015 Pembuatan Media Pembelajaran Audio-Visual Untuk Materi Sistem Pemindah

Tenaga Otomotif J Pendidik Tek Otomotif 05 (02) pp 210ndash218

[11] Budiman 2014 The Role of Information Technology and Communication in Education J

Islam Educ 8 (I) pp 31ndash43

[12] R M Rish K Bylen H Vreeland and C C Wimberley 2015 Using Google Drive to Write

Dialogically with Teachers in Handbook of Research on Teacher Education in the Digital Age

Pennslyvania IGI Global 357ndash379

[13] H Marsquoazi and K Janfeshan 2018 The effect of Edmodo social learning network on Iranian EFL

learners writing skill Cogent Educ 5(1) pp 1ndash17

[14] K R Heggart and J Yoo 2018 Getting the most from google classroom A pedagogical

framework for tertiary educators Aust J Teach Educ 43 (3) pp 140ndash153

[15] S W Palocsay I S Markham and S E Markham 2010 Utilizing and teaching data tools in Excel

for exploratory analysis J Bus Res 63 (2) pp 191ndash206

[16] S D Aji M N Hudha C Huda and G Gufran 2018 Computer Animation with Adobe Flash

Professional Cs6 in Newtonrsquos Law in IOP Conference Series Materials Science and

Engineering 288 (1) pp 1ndash4

[17] D Ibrahim 2011 Engineering simulation with MATLAB Improving teaching and learning

effectiveness Procedia Computer Science 3 pp 853ndash858

[18] Rahmat Fahinu S Alfat and E Maryanti 2019 The Effect of STAD cooperative model by

GeoGebra assisted on increasing studentsrsquo geometry reasoning ability based on levels of

mathematics learning motivation Journal of Physics Conference Series 1315 (1)

[19] A Baarah A Aloqaily Z Salah M Zamzeer and M Sallam 2019 Machine learning approaches

for predicting the severity level of software bug reports in closed source projects Int J Adv

Comput Sci Appl 10 (8) pp 285ndash294

[20] D Nafisah and A Ghofur 2020 The Development of the Android Barcode Based Media Study

for IPS J Educ Learn Technol 1 (2) pp 144ndash152 2020

[21] C Surya and M Jannah Desain Web bagi pemula menggunakan html dan css (Jakarta PT Elex

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

10

Media Komputindo)

[22] D Rachmawan D Irwan and H Argyawati 2016 Application of Cargo Techniques on Local

Web Server by NTH Methods Using Microtics J Comput Sci Res Embed Log Syst 4(2) pp

98ndash108

[23] Y Meisella Kristania I Maryani and A Iqbal 2017 The Web-Based Academic Information

System of Texting in SMKN 2 Banyumas J Sci dan Manag 5(2) pp 82ndash89

[24] S Ramdhani and D Kurnia 2018 The Engineering of Computerized Web-Based Test System

Using an Open-Source Operating System in SD Swasta Alwashiyah 639 Medan J Comput

Sci Bus 9 pp 1932ndash1945

[25] M Kamal 2020 Research and Development ( R amp D ) Tadribat Drill Madrasah Aliyah Class X

Teaching Materials Arabic Language J Hist Educ Humanit 4(1) pp 10ndash18

[26] S Ohri 2017 TypeScript 2X by Example (Birmingham Packt Publishing Ltd)

[27] C Kesuma and M D Juniati 2020 The System for Small-Village Administration Information

(SIAKSA) is Web-Based in Alangamba Village of Cilacap District J Speed-Sentra Res Eng

Educ 12 (1) p 1

[28] R C Iskandar Aki Sridhar 2019 Web Development with Angular and Bootstrap Embrace

Responsive Web Design and Build Adaptive Angular Web Applications (3rd Editio

Birmingham UK Packt Publishing Ltd)

[29] F N Ugwoke and K C Okafor 2017 Cloud-DLT A Disruptive Cloud based Digital Library

using Lean Design Technique Circ Comput Sci 201 (01) pp 27ndash36

[30] N H Ahmad 2020 Tableau For Beginner Data Analysis and Visualization 101 (Bandung

Haszeli Ahmad

[31] N Ifada 2019 Interactive Web Programming Learning Using CMS Media Teachers and

Students in SMKN 1 Kamal Sci J Pangabdhi 5(2)

[32] V A Nechitailenko 2016 Converting LaTeX to HTML5 and EPUB3  A case study 4 pp 1ndash5

[33] R Satra and A M Mude 2019 The Performance Assessment System is Devoted to Society

ILKOMAS 1 (1) pp 1ndash7

[34] O W Purbo 2007 Practical Guidance RTRW-Net amp Wajanbolic Antenna (Jakarta Info

Komputer)

Page 11: PAPER OPEN ACCESS 7KHGHVLJQRIOHDUQLQJPHGLDXVLQJ ...

ICOLSSTEM 2020Journal of Physics Conference Series 1839 (2021) 012010

IOP Publishingdoi1010881742-659618391012010

10

Media Komputindo)

[22] D Rachmawan D Irwan and H Argyawati 2016 Application of Cargo Techniques on Local

Web Server by NTH Methods Using Microtics J Comput Sci Res Embed Log Syst 4(2) pp

98ndash108

[23] Y Meisella Kristania I Maryani and A Iqbal 2017 The Web-Based Academic Information

System of Texting in SMKN 2 Banyumas J Sci dan Manag 5(2) pp 82ndash89

[24] S Ramdhani and D Kurnia 2018 The Engineering of Computerized Web-Based Test System

Using an Open-Source Operating System in SD Swasta Alwashiyah 639 Medan J Comput

Sci Bus 9 pp 1932ndash1945

[25] M Kamal 2020 Research and Development ( R amp D ) Tadribat Drill Madrasah Aliyah Class X

Teaching Materials Arabic Language J Hist Educ Humanit 4(1) pp 10ndash18

[26] S Ohri 2017 TypeScript 2X by Example (Birmingham Packt Publishing Ltd)

[27] C Kesuma and M D Juniati 2020 The System for Small-Village Administration Information

(SIAKSA) is Web-Based in Alangamba Village of Cilacap District J Speed-Sentra Res Eng

Educ 12 (1) p 1

[28] R C Iskandar Aki Sridhar 2019 Web Development with Angular and Bootstrap Embrace

Responsive Web Design and Build Adaptive Angular Web Applications (3rd Editio

Birmingham UK Packt Publishing Ltd)

[29] F N Ugwoke and K C Okafor 2017 Cloud-DLT A Disruptive Cloud based Digital Library

using Lean Design Technique Circ Comput Sci 201 (01) pp 27ndash36

[30] N H Ahmad 2020 Tableau For Beginner Data Analysis and Visualization 101 (Bandung

Haszeli Ahmad

[31] N Ifada 2019 Interactive Web Programming Learning Using CMS Media Teachers and

Students in SMKN 1 Kamal Sci J Pangabdhi 5(2)

[32] V A Nechitailenko 2016 Converting LaTeX to HTML5 and EPUB3  A case study 4 pp 1ndash5

[33] R Satra and A M Mude 2019 The Performance Assessment System is Devoted to Society

ILKOMAS 1 (1) pp 1ndash7

[34] O W Purbo 2007 Practical Guidance RTRW-Net amp Wajanbolic Antenna (Jakarta Info

Komputer)