An Experiment of Animation Development in Hypertext ... · Preprocessor (PHP) and Hypertext Markup...

© 2020, IJSRCSE All Rights Reserved 45

International Journal of Scientific Research in ___________________________ Research Paper . Computer Science and Engineering

Vol.8, Issue.2, pp.45-51, April (2020) E-ISSN: 2320-7639

An Experiment of Animation Development in Hypertext Preprocessor

(PHP) and Hypertext Markup Language (HTML)

Danial Kafi Ahmad1,2

*, Mariam Farida Ahmad 3, Mohd Nazmi Ahmad

4, Abdullah Syafiq Ahmad

4

1Faculty of Information Technology, INTI International University, Nilai, Malaysia

2Language Centre, National Defence University of Malaysia, Kuala Lumpur, Malaysia

3Department of Statistics Malaysia, Malaysia

4ASA Production, Selangor, Malaysia

* Corresponding author: [email protected]

Available online at: www.isroset.org

Received: 10/Apr/2020, Accepted: 25/Apr/2020, Online: 30/Apr/2020

Abstract— Animation is considered as an important element in Computing Industry as well as in Computing Education.

This research and experiment were about the development of light animation program which implemented the usage of few

web pages to create animation i.e. combination of few different images which were created using combination of Hypertext

Preprocessor (PHP) and Hypertext Markup Language (HTML) scripting language. The developed program visualized the

animation of a movement of an object which last for approximately TWO (2) seconds per cycle. It was found that the

animation is depending on the connection speed as the web page require buffering and jumping (linking) to other web

pages. This research demonstrated the usage of basic animation concept which deployed in digital means. Even so, in

general, it may be considered that they were not many of animation created using both combination of PHP and HTML,

especially in the education aspect. The experiment was conducted by developing a code snippet which integrate the usage

of static image. This is as to reflect the usage of basic animation concept to create motion towards the human vision. There

were few test cases of program requirement created in order for the code to be executed for testing.

Index Terms— Animation, Conventional, Clustering, Testing

I. INTRODUCTION

Animation had been the demanded field in today’s

modern world. This can be seen through the broadcast and

digital industries whereby they provide animation film to

the people. However, the industries were shared by

different cluster of people, for instance the people from the

Information Technology (IT) or computing related fields as

well as from the Mass Communication field. From this

model, the combination of those fields would led to mass or

huge activities regarding animation, which led to the

increasing demanding rate of the animation business today.

Nowadays, there are few platforms or tools for people out

there to develop animation and it’s a common thing to see

animation developer is using the standard tool to develop

the animation. However, there are always improvement

made over the past few years and counting towards the

animation and multimedia industries as well as the

improvement of the platform itself. Being flexible in

having and using the resources is one of the most important

factor which may help the developer to increase the quality

of the developed products when they have an easy access

towards the required facilities. Hypertext Pre Processor

(PHP) and Hypertext Markup language (HTML) are both

scripting language which classified as an open source

which mean the developer will be granted a license without

any cost incur to them and this had actually gave significant

impact towards the software development industries.

Normally, PHP and HTML is used to develop non-

animation elements or software, instead Cascading Style

Sheet (CSS) and JavaScript were used. PHP and HTML

are accessible easily by the developers mainly for

animation in education and this create an opportunity to

educators and developers in this field. This shows that the

usage of both scripting language among educators and

developers should be should be promoted consistently, and

this could be done by proving them the effectiveness of

both languages via research. Therefore it is very important

to have more research on developing animation using

HTML and PHP especially in Malaysia. In this research, a

program of PHP-based and HTML-based to demonstrate

the concept of animation were developed.

The paper were organized into few sections which are

Section I, Section II, Section III, and Section IV which

contain the introduction of the research, the methodology

of the research, and the conclusion with recommendation

respectively.

II. METHODOLOGY

a. SDLC

The development of the software or program was

implemented as according to the Lifecycle of Software

Development (SDLC) which comprise of few phases.

mailto:[email protected]

http://www.isroset.org/

Int. J. Sci. Res. in Computer Science and Engineering Vol.8, Issue.2, Apr 2020


SDLC is important in order to guide the developer towards

systematic and organized approach in writing a program. In

addition, SDLC had affected the level of the security in

within particular software. Researcher stated that the usage

SDLC can affect the security of software by integrating

some techniques i.e. Software Security Rules, Threat

Modelling etc. [1]. Figure 1 shows the model of SDLC

which consist of FOUR (4) phases.

Figure 1. System Development Lifecycle (SDLC) [2]

Table 1. Use Case Diagram Components [2]

However the SDLC had been perceived by the developers

and other related people in a few different context which

led to the few Software Process Models i.e. Waterfall, V

mode etc. In addition the Plan Driven and Non –Plan

Driven which synonyms to the concept of Non-Agile and

Agile respectively had introduce to the different quality of

the software produced either significant or not significant in

terms of the quality. In this experiment, the Modified

Waterfall Model was used in the program’s code

development, as to gain more flexibilities during the

development which comprise of one of the vital steps

which is getting the requirement and the building. The

model allowed the sudden and rapid changes to be

deployed where possible due to the change of requirement

[3].

a1. Software Process Model (Modified Waterfall)

a.1.1 Requirement

a.1.1.1 System Behavior

The program is expected to display several Web Pages

which consist of few different images in a given time to

create a motion towards the human vision. This

requirement (Functional) is required as it is the core

behavior of the program, as required by any other

animation program. The system is expected to be executed

and run in within the TWO (2) seconds per one cycle in

approximately.

a.1.1.2 Development Tools

The PHP and HTML were implemented and used in this

project to write and develop the program. The code snippet

is written in the form of Structural Programming as it is

possible to be implemented without giving any significant

negative impact towards the program. The program is a

Web Based as the language (scripting) used in the research

is PHP and HTML. In addition, Web based is considered as

friendly as it is accessible anywhere via Internet

(Commercial Interconnected Network). The Apache Server

was used in order to run the PHP scripts along with the

HTML scripts. In this experiment, the port of the Apache

was changed to port of 8080 in the httpd.conf, and this

required the request to the server (Cross Platform, Apache,

MariaDB. Perl (XAMPP)) by the client (Browser) to be

made by embedding the port 8080 into the Unified resource

Locator (URL). The nature of the PHP is to develop

computation or framework for functionalities such as

services i.e. validation of login module, calculation of

arithmetic operation etc., while HTML is to create the

interface of the web page, therefore those language were

used to write the code snippet or software. A research done

stated that HTML possess the high ability of functionality

before PHP, PERL, ASP etc. [4]. They found that the

scripting language may be used without requiring any

payed license and this will reduce the difficulties during the

development. The program or codes require the several

web pages to be automatically and alternately displayed

and this is affected by the speed of the execution and

interpretation, as the changes require a good execution

speed, and own the faster speed of the execution [4].

a.1.2 Design

a.1.2.1 Use Case Diagram & Flow Chart

Unified Modelling Language (UML) is a modelling

language in software development that used to represent the

behavior or the structure of a system or software. UML can

be classified into two clusters which are the behavior and

the structure. For instance the behavior diagram comprise

of Use case Diagram, Sequence Diagram, Activity

Diagram, etc., while Structure comprise of Class Diagram,

Entity Relationship Diagram (ERD) etc. The usage of UML

seems quite popular in software development especially in

the subject of ‘Generative Development’ in which the



development of the code or script is based on the diagram

and vice versa. For instance, in an Object Oriented

programming style, the Integrated Development

Environment (IDE) such as Eclipse Studio is providing a

feature of designing and creating a Class Diagram which

consist of attribute and method, which then a script were

generated automatically once the diagram created. These is

somehow reflects the importance of model in programming

to reduce complexity [5]. However, in this project, a Use

Case Diagram concept and information were generally used

in order to visualize the behavior of the program itself.

Since, the program does a light weight functionality,

therefore it is appropriate to focus on the behavior rather

than the structure of the program code. Use Case Diagram

comprises of few symbols for presentation i.e. Rectangle

(System Border), stick figure (Actor), Connector (Include

and Extend), and oval shape (Use Case/Behavior) as shown

in Table 1.

Table 2. Flow Chart Diagram Components[5]

For this project, the Flow Chart concept is used also as a

tool in designing the program or code. Flow chart is able to

provide the developer a visual of how the system is

working in terms of the Functional Requirement (FR).

“Flowchart is a common graphical representation of a

process or step-by-step solution for a problem simply

drawn in the software design stage”. Research found that

flowchart is used to in the design phase before the real

implementation (coding) [6]. In addition, flowchart provide

a convenient way of visualizing the system abstract which

later can be transform into scripting or coding with ease.

Flow chart consist of arrow (flow), diamond shape

(condition), rectangle shape (statement/execution),

trapezium (input/output) as according to Table 2.

a.1.2.2 Client Server Architecture

The program is written in form of Web Based application

therefore it implement the Client Server Architecture. This

architecture require a client (Browser platform) and the

server in order for the exchange of request and response to

occur. “Currently, the client-server technology is widely

used in modern society. The main idea of this concept is

that the client sends a request to the server, and the server,

in its turn, gives a result” [7]. However, for this project, the

localhost server (XAMPP package) is used in which it does

not require the connection of the commercial

interconnected network (Internet) but interconnected

between component (browser and localhost) instead in

within the same machine.

Figure 2. Three Tier-Client Server Architecture [7]

Figure 3. Client Server Component (localhost)

a.1.3 Implementation

a.1.3.1 Code

The program is implementing the structural style

programming in within the code. The style is able to

provide easiness in the development as it does not require

massive integration of codes cluster. The developed

program does not comprise of huge amount of lines of

codes but rather few lines of code which integrated via

hyperlink (<a href= “test.html”>hyperlink</a>) function of

HTML unlike OOP which require massive integration of

codes cluster which stored in a particular class and

package. In addition, the software program implementing

the usage of PHP (header(“refresh:0.5;url=test.php”);)

script as well in order to change from a particular web page

to another web page of the program itself.

a.1.3.2 Installation and Configuration

There few steps that need to be completed in order to

execute the program. Some of the common problem faced

when deploying Apache Server in XAMPP package is the

unavailable port. This is due to the default port which may

be used by other application. In any platform there may be

few configuration that require to be done [8]. Below are the

steps that may be need to be executed in order to run the

Apache Server:



Figure 4. Configuration of port via httpd.conf file.

Figure 5. Control Panel of XAMPP Package.

Figure 6. Configuration of port via httpd.conf script

a.1.4 Testing & Maintenance

Testing were conducted as according to the guidelines of

Malaysian Software Testing Board (MSTB) and the

International Software Testing Board (ISTQB). The

Testing Techniques of White Box Structured and the Black

Box Structured were deployed onto the program code in

order to see the output and their code’s behavior. The

testing level and types were applied onto both of the

techniques in order to achieve the Verification and

Validation (V&V) of the program. Rex Black stated that

the static technique should be done before the dynamic

technique [9].

a.1.4.1. Test Level

There are FOUR (4) test levels conducted on the software

code snippet which are Unit Testing, Integration Testing,

System Testing and Acceptance Testing. Consider the

following models for the level of testing according to the

code snippet. The following symbols of Discrete

Mathematics is used in order to visualize the test object and

their implication. As according to the Susanna S. Epp, the

elements or unit can be represented by using the Set {} and

the range 0<x<n [10].

Set U: {elements}

Let x ∈ U, component(x) -> result(y)

Figure 7. Unit Testing Model

Set U: {elements}

Let xb ∈ U, 1=<b<=5, 1=<z<=5, component(xb) executed

∩ component(xb) executed -> result(yz)

Figure 8. Integration Testing Model

Set U: {elements}

Let xb ∈ U, 1=<b<=5, 1=<y<=5

Figure 9. System Testing Model.

a.1.4.2. Test Type and Technique

Both Functional Requirement (FR) and and Non-Functional

Requirement (NFR) will be implemented on the code

snippet/program in order to achieve the Verification &

Validation (V&V) as opposed to the standard Software

Development Process. The FR and NFR will consist of few

elements i.e. Test Objective, Test Input, Test Procedure,

Expected Output and Actual Result. These will be the basis

of requirement of the Test Case. The Test Objective of the

Test Case will be use as a tool for the Static Technique and

the Dynamic Technique, and these are required in order to

satisfy the standard process of testing. Static Dynamic

involve the activity of finding defects or any potential

defects without executing the program, while Dynamic

Testing is the activity of finding those defects with the

execution or automation of the program. Static Testing is as

important as Dynamic Testing as it is a chain of integrated

process [11]. In addition to that, it is an important activity

to test all possible aspects of the software or system via few

techniques in order to achieve better quality [12].

III. DISCUSSION

a. Algorithm

a1. Coding

Figure 10 shows the code snippet of HTML which consist

of a hyperlink to the next web page (b.php) when clicked.

The hyperlink is labeled as “Play” which means that click

to play the animation. The HTML image tag is used in

order to display the picture (aa.jpg) on the page itself. Both

hyperlink tag and image tag is written in within the HTML

table tag in order to be displayed in a coordinated position.

In addition, there is no PHP script use in the program.

While, Figure 14 shows the code snippet which consist of

HTML hyperlink which labeled as “Stop”, and it redirect to

“a.php” when clicked. In this code snippet, a PHP script is



used to redirect to another web page (c.php) after 0.5

second stay at b.php web page. As similar to a.php, the

code snippet consist of both HTML hyperlink tag and

HTML image tag written in within the HTML table tag.

However, the PHP script (header();) is being written after

the HTML table tag, in within the HTML tag.

Figure 10. Code of the first web page

Figure 11. Code of the second web page

The rest of the code snippet which are c.php, d.php, e.php

share the similar concept of functionality, except for the

image file hold by all the HTML image tag in those

program which are bb.jpg, cc.jpg, and dd.jpg respectively.

Also, the PHP script (header();) used in those program

redirect to a different web page which are d.php, e.php. and

b.php (the second web page).

Figure 12. Code of the third web page

Figure 13. Code of the fourth web page

Figure 14. Code of the fifth web page

a2. Graphical User Interface

There were FIVE (5) web pages in this program which

display the different image on different web pages.

However, the first web page and the second web page

displayed the same image (aa.jpg), but differ in terms of the

hyperlink which are “Play ” and “Stop” respectively as

shown in Figure 15 and Figure 16.

Figure 15. First web page interface

Figure 16. Second web page interface

Figure 17, Figure 18 and Figure 19 shows that the web

page displayed different images among these web pages

which are bb.jpg, cc.jpg, and dd.jp respectively. All of

these program (c.php, d.php and e.php) comprise of “Stop”

hyperlink which allow the animation to be terminated and

stop. Otherwise once the animation stopped, it will redirect

to the first web page as shown in Figure 15.

Figure 17. Third web page interface

Figure 18. Fourth Web Page

Figure 19. Fifth web page interface



b. Testing

b1. Test Log

Testing were conducted towards the program as to achieve

required Verification & Validation (V&V). Therefore Unit

Testing, Integration Testing, and System & Acceptance

Testing were conducted on all of the programs. As shown

in Table 3, the following web pages which are a.php, b.php,

c.php, d.php and e.php were classified as element of

A,B,C,D, and E respectively. The following models of

component(x) -> result(y) indicated that a

program/component is tested which imply to a result which

is either executable or not executable. As according to the

table, all of the Unit/Component had been executed and run

for testing which resulted in no error.

Set U: { Component A-> a.php, Component B -> b.php,

Component C-> c.php, Component D -> d.php,

Component E-> e.php}

Figure 20. Tested components as an elements.

Unit Testing:

Let x ∈ U, component(x) -> result(y)

Figure 21. Unit Testing Modelling with tested components

as elements.

Table 3 shows the testing on each of the component/cluster.

No. Testing execution of component(x)

1 component(x=A) -> result(y=executable)

2 component(x=B) -> result(y= executable)

3 component(x=C) -> result(y= executable)

4 component(x=D) -> result(y=executable)

5 component(x=E) -> result(y= executable)

Table 4 shows that the all of the components were being

tested in a pair as according to the nature of the program

flow which used the linear sequence flow at most of the

time. component(xb=1) ∩ component(xb=2) shows that the

TWO (2) components which are a.php and b.php is

executed as a pair and indicated the result as

result(y1=executable);. Then the component(xb=2)) will be

executed with component(x=b=3) as a pair which then

resulted in execution. The same pattern is implemented

and deployed to other pair of components which are

component(xb=3) ∩ component(xb=4), component(xb=4) ∩

component(xb=5), component(xb=5) ∩ component(xb=2). As

there were FIVE (5) components as well as the pair of

components, therefore the range of b lies between 1 and 5

and z lies between 1 and 5 respectively.

Integration Testing:

Let xb ∈ U, 1=<b<=5, 1=<z<=5,

component(xb=1) executed ∩ component(xb+1) executed ->

result(yz)

Figure 22. Integration Testing modelling with tested

integrated components as elements.

Table 4 shows the testing on each of the integrated

component/cluster

No. Testing execution of component(x)

1 component(xb=1) ∩ component(xb=2) ->

result(y1=executable);









System and Acceptance Testing:

Let xb ∈ U, 1=<b<=5, 1=<y<=5

( )

Figure 23. System Testing Modelling with all tested

components as elements.

(1)

(2)

(3)

(4)

(5)

Figure 23 shows the system testing in form of discrete

mathematical model or expression, which resulted in an

executable without any error either semantic or syntax

which then led to the accepted of the program. The

(((((component(xb=1) ) ∩ component(xb=2) ) ∩

component(xb=3)) ∩ component(xb=4) ) ∩

component(xb=5) ) indicated that all of the pair of

components were executed at a time in order to achieve the

required result which is the motion created by the

combination of the static image. However the brackets ()

indicated that the priority of execution in sequence. The

outer most bracket indicated the last execution in terms of

the sequence. These execution led to the

(((((result(y1=executable)) ∩ result(y2=executable)) ∩



result(y3=executable)) ∩ result(y4=executable) )∩

result(y5=executable) ) which shows that the pair of result

is being executed until completed.

IV. CONCLUSION AND RECOMMENDATION

PHP and HTML may develop animation which came from

the combination of several different static images which

stored in either the local server or web hosting server.

Even though these is sometimes seems not practical as

there were already few tools or platform to develop

animation out there which may provide more efficiencies in

terms of performance etc., but the knowledge or concept

behind those implementation of PHP and HTML seems

vital especially to the education field. For instance, the

speed of the linking (hyperlink) among other web pages

could be investigated at large. Therefore, it would be very

important to have more research regards to animation

implementation which related to PHP and HTML. In

conclusion, PHP and HTML has the ability to produce

animation program which reflects by the concept of motion

picture. In addition, the PHP-based and HTML-based

animation program were very useful especially for

educators who wish to deliver the scripting concept as well

as animation concept at the same time to the students. It is

also to be known that animation is vital in the commercial

advertisement industry whereby it gave significant impact

towards the attractiveness of a particular advertisement

[13]. This could be seen in either digital videos via the

internet or commercial television videos. Therefore, the

usage of programming in creating animation is at least as

important as the growth of the animation in education and

digital video production as well as their related field.

ACKNOWLEDGEMENT

The main author would like to express his gratitude to the

Office of Research Development & Consultancy of INTI

International University for the support in terms of

resources allocation for the research and also to Assoc.

Prof. Dr. Norshima Zainal Shah, Lt. Kol. Dr.

Muhammad Salim bin Muhammad Tufail (B) and Dr. Hoo

Yann Seong for the continuous support to the author in

doing research.

REFERENCES

[1] A. Sharma, P.K. Misra, “Aspects of enhancing security in

software development life cycle,” Advances in Computational

Sciences and Technology, Vol. 10, Issue. 2, pp. 203-210.

[2] I. Sommerville, "Software Engineering 9th Edition," Pearson,

2010.

[3] Jr. Padal, C.M. Salado, L. Mary Jean May, N.P. Sobejana,

“SPAMAST Smart Garbage Bin Monitoring System Using

Wireless Sensor Network,” Journal of Engineering Research

and Reports, pp. 1-16, 2019.

[4] I.F. Amadin, E. Nwelih, “An Empirical Comparison Of: HTML,

PHP, COLDFUSION, PERL, ASP .NET, JAVASCRIPT,

VBSCRIPT, and PYTON AND JSP. Global”, Journal of

Computer Science and Technology, Vol. 10, Issue.12, pp. 9-17,

2010.

[5] I. Nassi, B. Shneiderman, “Flowchart techniques for structured

programming,” ACM Sigplan Notices, Vol. 8, Issue.8, pp. 12-

26, 1973.

[6] U. Gulati, W. Vatanawood, “Transforming Flowchart into

Coloured Petri Nets,” In Proceedings of the 2019 3rd

International Conference on Software and e-Business, pp. 75-80,

2019.

[7] I.A. Barabanova, O.J. Kravets, S.A. Tkalich, and D.I. Mutin,

“Analysis of the intermediate layer work in the three-tier

architecture “client-server” of automation engineering

problems,” In IOP Conference Series: Materials Science and

Engineering, p. 032011, 2019.

[8] D. Mercer, “Drupal 7,” Packt publishing Ltd, United Kingdom,

2010.

[9] R. Black, D. Graham, E. V. Veenendar, and I. Evans,

“Foundations of Software Testing, ISTQB Certification,”

Cengage Learning EMEA, third edition, pp 35-121, 2012.

[10] S.S. Epps, “Discrete mathematics with applications,” Cengage

learning, pp. 76-264, 2010.

[11] A. Spilner, T. Linz, H. Schaefer, “Software Testing Foundations

4th edition,” RockyNook, p 255, 2014.

[12] N. Honest, "Role of Testing in Software Development Life

Cycle", International Journal of Computer Sciences and

Engineering, Vol.7, Issue.5, pp. 886-889, 2019.

[13] D. Goel, R. Upadhyay, “Effectiveness of use of Animation in

Advertising: A Literature Review,” International Journal of

Scientific Research in Network Security and Communication,

Vol.5, Issue. 3, pp. 146-159, 2017.

An Experiment of Animation Development in Hypertext ... · Preprocessor (PHP) and Hypertext Markup...

Documents

Transcript of An Experiment of Animation Development in Hypertext ... · Preprocessor (PHP) and Hypertext Markup...