Microsoft Word - 04_TI_Karto Iskandar_PENGGUNAAN ASP.NET AJAX v5 -a2t-- 1.docx
Usage of ASP.NET AJAX… (Karto Iskandar; Andrew Thejo Putranto) 29
USAGE OF ASP.NET AJAX
FOR BINUS SCHOOL SERPONG WEB APPLICATIONS
Karto Iskandar1; Andrew Thejo Putranto2
1,2Computer Science Department, School of Computer Science, Bina Nusantara University
Jln. K.H. Syahdan No. 9 Palmerah, Jakarta Barat, 11480
1karto_i@binus.edu; 2aputranto@binus.edu
ABSTRACT
Today web applications have become a necessity and many companies use them as a communication
tool to keep in touch with their customers. The usage of Web Application in current time increases as the number
of internet users has been rised. For reason of Rich Internet Application, the desktop application developer was
moved to web application developer with AJAX technology. BINUS School Serpong is a Cambridge Curriculum
base International School that uses web application for access every information about the school. By using
AJAX, performance of web application should be improved and the bandwidth usage is decreased. Problems that
occur at BINUS School Serpong is not all part of the web application that uses AJAX. This paper introduces
usage of AJAX in ASP.NET with C# programming language in web application BINUS School Serpong. It is
expected by using ASP.NET AJAX, BINUS School Serpong website performance will be faster because of
reducing web page reload. The methodology used in this paper is literature study. Results from this study are to
prove that the ASP.NET AJAX can be used easily and improve BINUS School Serpong website performance.
Conclusion of this paper is the implementation of ASP.NET AJAX improves performance of web application in
BINUS School Serpong.
Keywords: ASP.NET, AJAX, web application, BINUS School Serpong
INTRODUCTION
Website is commonly owned by each organization. The website functions vary adapted to the
purpose and needs of the organization. One is able to obtain timely and accurate information related to
the organization and the various things that may not have been known, such as organization address
and contact. The website can also be used as a promotion. Promotion is done in various ways, either
through videos, photos, or articles that include advantages and benefits of the organization.
Bina Nusantara (BINUS) is a private organization in Indonesia that stirs in the field of
education. One of the BINUS Group main strengths in creating and operating activities and academic
services to BINA NUSANTARA Group stakeholders is the implementation of IT (one of them is a
web application) in every aspect of the process of academic and academic support. IT Directorate
Established in 1981 under the name EDP. In August 2005, BINA NUSANTARA Foundation decided
to change the status of the IT department of the Directorate. IT Directorate is responsible not only for
supporting BINUS UNIVERSITY but also all business units in BINUS Group. IT Directorate is now
led by the Director of IT. Currently, IT Directorate is located on the campus Syahdan. The office is
located on the 2nd floor of Building H.
BINUS School Serpong is part of BINUS Group which accepts students from kindergarten to
high school. BINUS School Serpong has three web applications for students, parents, and staff. The
applications are BINUSMaya School Student, BINUSMaya School Parent and Staff Desk.
30 ComTech Vol. 7 No. 1 March 2016: 29-39
BINUSMaya Student usually used by students in BINUS School Serpong to see class schedules,
announcements and score. There was also a private message feature that serves as a notification to a
particular student (specific) and attendance to determine the list of attendance. Features in
BINUSMaya Parent is not much different from the BINUSMaya Student, only, parent could see all the
children who attend school in BINUS School Serpong. BINUSMaya parent can also be used to order
books online at a specific time period, payment can be by credit card or ATM BCA. Staff Desk is the
main application used by the staff in BINUS School Serpong and is the main application of the 3
existing applications. Staff Desk can use to enroll new students, upload a book list, set the score of the
students, and many more. In the future, staff desk will be replaced with BINUSMaya School Staff.
BINUS School Serpong uses ASP.NET as the standard for web development because
ASP.NET is a unified Web development model that includes the services necessary to build enterprise
web applications with minimal coding and offers a free licensing agreement. ASP.NET AJAX is a set
of extensions to ASP.NET developed by Microsoft to implement AJAX functionality. ASP.NET
AJAX is released under the Microsoft Public License (Ms-PL). AJAX also includes some basic
components of server side to support asynchronous call coming from the client.
This paper discussed about the implementation of ASP.NET AJAX web applications in
BINUS School Serpong as a method that can improve the performance of the web page so access to
the information will be faster. The purpose of this paper proves that the ASP.NET AJAX
implementation can improve BINUS School Serpong website performance and can be used easily.
METHODS
This research uses method of literature study and development using ASP.NET. The
methodology of application development uses incremental model. Some terms and technologies used
in this study are: AJAX, ASP.NET, ASP.NET AJAX, and some default control from AJAX. Some
literature used as references can be found in the Bibliography.
Incremental Software Development
According to Pressman (2009) there are many situations in which initial software
requirements are reasonably well defined, but the overall scope of the development effort precludes a
purely linear process. In addition, there may be a compelling need to provide a limited set of software
functionality to users quickly and then refine and expand on that functionality in later software
releases. In such cases, you can choose a process model that is designed to produce the software in
increments.
Referring to Figure 1, the incremental model applies linear sequences in a staggered fashion as
calendar time progresses. Each linear sequence produces deliverable “increments” of the software in a
manner that is similar to the increments produced by an evolutionary process flow.
Usage of ASP.NET AJAX… (Karto Iskandar; Andrew Thejo Putranto) 31
Figure 1 Incremental Process Model
For example, word-processing software developed using the incremental paradigm might
deliver basic file management, editing, and document production functions in the first increment; more
sophisticated editing and document production capabilities in the second increment; spelling and
grammar checking in the third increment; and advanced page layout capability in the fourth increment.
It should be noted that the process flow for any increment can incorporate the prototyping paradigm.
When an incremental model is used, the first increment is often a core product. That is, basic
requirements are addressed but many supplementary features (some known, others unknown) remain
undelivered. The core product is used by the customer (or undergoes detailed evaluation). As a result
of use and/or evaluation, a plan is developed for the next increment. The plan addresses the
modification of the core product to better meet the needs of the customer and the delivery of additional
features and functionality. This process is repeated following the delivery of each increment, until the
complete product is produced.
The incremental process model focuses on the delivery of an operational product with each
increment. Early increments are stripped-down versions of the final product, but they do provide
capability that serves the user and also provide a platform for evaluation by the user. Incremental
development is particularly useful when staffing is unavailable for a complete implementation by the
business deadline that has been established for the project. Early increments can be implemented with
fewer people. If the core product is well received, then additional staff (if required) can be added to
implement the next increment. In addition, increments can be planned to manage technical risks. For
example, a major system might require the availability of new hardware that is under development and
whose delivery date is uncertain. It might be possible to plan early increments in a way that avoids the
use of this hardware, thereby enabling partial functionality to be delivered to end users without
inordinate delay.
AJAX
According to Sabah (2011) Web applications refer to applications accessed via Web browser
over a network and developed using browser-supported languages (e.g., HTML, JavaScript). For
execution, Web applications depend on Web browsers and include many familiar applications such as
online retail sales, online auctions, and webmail.
32 ComTech Vol. 7 No. 1 March 2016: 29-39
The recent explosion of Web 2.0 applications have changed user expectations regarding web
experience. Users now expect web pages to behave like desktop applications, react to mouse
movements and key strokes individuals and update only a small portion of a web page at a time. While
a number of existing technologies to create Rich Internet Applicaton of the most popular and widely
used is AJAX (Luce, 2008).
According to Dissanayake and Dias (2014), RIA applications can be described as a hybrid of
desktop applications and web applications, inherit the good features of both types of application. Since
web giants like Google and Facebook began offering a very rich feature set with increased
interactivity and user experience through their RIA, user currently expects to feel the same wealth of
features, in other web applications they use too. Environment has created a good demand for RIA
design and development tools and techniques.
According to Kumar and Aravazhi (2013), in the International Journal on Recent and
Innovation Trends in Computing and Communication, Asynchronous JavaScript and XML or AJAX,
is a group of web development techniques interrelated used to create interactive web applications or
rich internet application. With AJAX, web applications can retrieve data from the server
asynchronously in the background without interfering with the display and behavior of the existing
page. The use of AJAX has led to an increase in interactive animation on web pages. Data retrieved
using the XML Http Request object, or through the use of Remote Scripting in browsers that do not
support it. XML is a language that is defined by the World Wide Web Consortium, which is the body
that sets standards for the Web. XML replace other markup languages, such as Hypertext Markup
Language (HTML). In HTML all HTML elements that can be used is predetermined, whereas XML is
a meta-markup language because it allows making our own Markup Language.
ASP.NET
According to Mishra (2014), ASP.NET is a unified Web development model that includes the
services necessary to build enterprise web applications with minimal coding and offers a free licensing
agreement. This is event-driven programming model and part of the .NET Framework. ASP.NET
pages have access to the .NET Framework classes and web applications can be coded in any language
that is compatible with the Common Language Runtime (CLR), including C # and VB.
ASP.NET AJAX
ASP.NET AJAX is a set of extensions to ASP.NET developed by Microsoft to implement
AJAX functionality. ASP.NET AJAX is released under the Microsoft Public License (Ms-PL). One of
the main changes AJAX Web programming brought is that it depends on the browser take a more
active role in a process. Besides the browser only render HTML stream and execute special small
block script, AJAX has some client-script library for facilitating new a synchronous call back to the
server. AJAX also includes some basic components of server side to support new a synchronous call
coming from the client. In fact there is a community supported AJAX Control Tool kit is available for
ASP.NET AJAX implementation. In Figure 2 we can see the comparison and ASP.NET AJAX
Library Extension for AJAX.
Usage of ASP.NET AJAX… (Karto Iskandar; Andrew Thejo Putranto) 33
Figure 2 AJAX and ASP.NET AJAX
ASP.NETAJAX runs on the browser: (1) Microsoft Internet Explorer (Versi>= 6.0), (2)
Mozilla Firefox (Versi>= 1.5), (3) Opera (Versi>= 9.0), (4) Apple Safari (Versi>= 2.0) and (5) Google
Chrome. At first, AJAX seems to introduce some new complexities into ASP.NET programming.
However, AJAX promises to produce a richer experience for the user. Due to the support of ASP.NET
AJAX is almost no problem, additional complexity is reduced well. When building a website, there are
several reasons that may be selected to use the ASP.NET AJAX.
First, ASP.NET AJAX UI introduces elements of website that is usually found in desktop
applications, such as rectangle rounding, callouts, progress indicators, and popup windows running on
different browsers. Second, AJAX introduces a partial update web page. With some of the refresh web
pages that have been updated, the user waiting time is significantly reduced. This brings Web-based
applications much closer to desktop applications related to the perception of the performance of the
UI.
Third, AJAX supported by most popular browsers, not just Internet Explorer. AJAX runs on
Mozilla Firefox and Apple Safari. Although it still requires some effort to balance the richness of UI
and the ability to reach a wider audience, the fact that AJAX depends on the features available in most
modern browsers to make it easier to balance is achieved.
Fourth, AJAX introduces a large number of new capabilities. While ASP.NET controls and
page-rendering standard model provides great flexibility and extensibility to the web site
programming, AJAX brings a new concept, namely the control extender. Attaching the extender
control server-side controls that exist (such as TextBox, ListBox and DropDownList) at run time and
add a new client-side appearance and behavior to control. Sometimes control extender can even call a
Web service that has been established to obtain data to populate the list box. (eg, AutoComplete
extender). Fifth, AJAX improves authentication, profiling and personalization services in ASP.NET
Form. ASP.NET support for authentication and personalization gives a great advantage for Web
developers.
34 ComTech Vol. 7 No. 1 March 2016: 29-39
Many ASP.NET AJAX support to be in a collection of server-side control output for AJAX-
style rendering to the browser. The whole process ASP.NET page-rendering applications are broken
down into small pieces. Each individual bit rendering is handled by a class derived from
System.Web.UI.Control. The wholework of server-side control is to create an HTML element that
puts output in the output stream so that they appear correctly in the browser. For example, the control
ListBoxcreateatag. TextBoxcontroltomakeantag. ASP.NET AJAX
server-side control makes AJAX-style scripts and HTML to the browser. ASP.NETAJAXcontrols
support consist of server-side script code along with the client.
Script Manager Control
Script Manager control manages the text source for the page. The main task is to register
Script Manager control script AJAX Library with the page so that the client script can use system
extensions. Script Manager also allow partial webpage rendering and supports localization and
customuser script. Every site that wants to use the ASP.NET AJAX must include an instance of the
Script Manager control on any page that uses AJAX functionality.
This is the most important in the case of the master page. Master page typically use Script
Manager Control. However, ASP.NET throws an exception if there is a second Script Manager object
found on a particular page Script Manager control through a proxy. Of course, as mentioned, this also
applies to user control as well.
Update Panel Control
Update Panel is ASP.NET server control that update on a specific part of a web page without
reloading. Through a mechanism called a synchronous postback, HTML webpage on the area covered
by the control and then sent by the server a synchronously through the AJAX request.
ASP.NET controls that have been defined as the content in the Update Panel postbacks can
cause both synchronous (traditional) or asynchronously, using the trigger/triggers. Trigger is an event
that comes from ASP.NET control which causes the Update Panel to refresh the content of the update
panel. Through the trigger, an asynchronous postback with the controls can be started also expressed
outside the area covered by the ASP.NET page Update Panel control. ASP.NET code example with
update panel:
In the above code, there is a button inside update panel with id btnPrintAttendance, and to be
able to download files from the server, it is necessary to trigger that triggers the update panel to
update/refresh its content so that the file can be downloaded.
Update Panel control supports partial page updates by tying certain shared server side controls
and the events that cause them to make. Update Panel control causes some parts of a webpage to
refresh instead of whole pages (as happens during a typical HTTP postback).
Usage of ASP.NET AJAX… (Karto Iskandar; Andrew Thejo Putranto) 35
Update Progress Control
Update Progress control provide status information on the page in the partial renewal of the
Update Panel control. You can customize the Update Progress control default content and layout. To
prevent flashing when partial-page updates are very fast, you can specify the delay before the Update
Progress control is displayed (Shepherd, 2010).
RESULTS AND DISCUSSIONS
Figure 3 shows the software development process, where in the first increment,
AutoCompleteExtender and ScriptManagerControl implemented, in the second increment,
CalendarExtender and UpdatePanelControl, and the last is ModalPopupExtender.
Figure 3 Software Development Process
As seen in Table 1, there are some features that can be used easily to improve website
performance in BINUS SCHOOL Serpong Web Application.
Table 1 BINUS SCHOOL Serpong Web Application Line of Code
Feature Line of Code
AutoCompleteExtender 30
CalendarExtender 15
ModalPopUpExtender 15
ScriptManagerControl 5
UpdatePanelControl 15
36 ComTech Vol. 7 No. 1 March 2016: 29-39
AJAX Control Toolkit
AJAX Control Toolkit which are used in BINUS SCHOOL SerpongWeb Application is
Modal Pop Up Extender and some Auto Complete Extender. At the staff desk at this time, there are
still many usage of Calendar Extender, but in BINUSMaya School Staff, calendar extender will be
replaced with a new design and not using the AJAX Control Toolkit anymore.
Auto Complete Extender
Auto Complete Extender only used on some of the modules in BINUSMaya School which is
quite a lot of data. Its use is associated with its autocomplete Text Box and look much like google
search, it's just that the design using the BINUSMaya School design. Here is an example of using the
Staff Desk website, namely the use of the staff desk Auto Complete Extender(Figure 4) and the
BINUSMaya School Staff (Figure 5).
Figure 4 Example Usage of Auto Complete Extender in Staff Desk Website
Figure 5 Example Usage of Auto Complete in BINUSMaya School Staff Web Page
Usage of ASP.NET AJAX… (Karto Iskandar; Andrew Thejo Putranto) 37
Calendar Extender
Calendar Extender usually used in conjunction with a TextBox, so that when the date has been
chosen in Calendar Extender then the date will appear in the predetermined TextBox. Its format could
be arranged, the staff desk to usedd/MM/yyyyformat, ie day, month, and year. The date format needs
to be considered because, it technically will change how background code reading the date format if
the date format changes. The following example of applicability Calendar Extender BINUS School
Serpong staff desk website (see figure 6).
Figure 6 Usage of Calendar Extender at Staff Desk Website
Modal Pop Up Extender
Modal Pop Up Extender normally used associated with button/link button and ASP.NET
Panel. So when the user click on a button/link button, then a Modal Pop Up Extender can be
displayed. The example can be seen in Figure 7 (staff desk website) and in Figure 8 (BINUSMaya
School Staff website)
Figure 7 Usage of Modal Pop Up Extender at Web Staff Desk
38 ComTech Vol. 7 No. 1 March 2016: 29-39
Figure 8 Usage of Modal Pop Up Extender at BINUSMaya School Staff
Script Manager Control
Script Manager Control used in the master page on BINUSMaya School and is used to register
all the scripts that will be used on the master page in BINUSMaya School so that the entire page that
uses the master page will automatically use the scripts that have been registered in the Script Manager
Control. Usually these scripts are scripts that are used to design a website that would be used on any
webpage in BINUSMaya School.
Update Panel Control
Update Panel Control is also used in the masterpage so that every postback on the page, the
Update Panel will be updated/refreshed. Its use is followed by Content Template tag which is useful to
determine which parts of which will be updated when the Update Panel is running. Also, Trigger is
normally used when there is a function associated with the file download /upload. Without Trigger,
files can not be uploaded/downloaded. In Figure 9, it can be seen loading display on the BINUSMaya
School Staff web page.
Figure 9 Loading after Button Click and Usage of Update Panel at BINUSMaya School Staff
Usage of ASP.NET AJAX… (Karto Iskandar; Andrew Thejo Putranto) 39
CONCLUSIONS
BINUS School web applications uses many AJAX Control Toolkit features, among others
Auto Complete Extender on the module and the SCP Create Create Exploration Week, Calendar
Extender on Feedback and Suggestion and Modal Pop Up Extender on Feedback and Suggestion.
Besides, it can use other features such as Update Panel on the master page to save bandwidth and
speed.
By using Auto Complete Extender on BINUS School web application, then when the user
uses the Create SCP and Create Exploration Week modules, users only need to remember one
keyword only to input the data so it does not need to look further names will be input because there are
auto complete the serves as a suggestion to the data in the input. Another feature is Calendar Extender
the one used on the Feedback and Suggestion module. Calendar Extender allows a user to select a date
without confusion with the date format should be in input and also minimizes typing errors, because
with the calendar, the user can more thoroughly by looking at the calendar month and year. Next is the
Modal Pop Up Extender feature of the AJAX Control Toolkit which enables the use of popup on the
BINUS School web page.
REFERENCES
Dissanayake, N. R., & Dias, K. A. (2014). What does the AJAX Rich Internet Applications need to
Support the Rapid Application Development? International Journal of Information
Technology and Computer Science (IJITCS), 15(3).
George, S. (2010). Microsoft ASP.NET 4 Step by Step. Washington: Microsoft Press.
Kumar, S. R., & Aravazhi, R.. (2013). A Study on Ajax in Web Applications with Latest Trends.
International Journal on Recent and Innovation Trends in Computing and Communication,
6(1), 563-564.
Luce, T. (2008). AJAX in the Classroom. Issues in Information Systems, 9(1), 152-159.
Mishra, A. (2014). Critical Comparison of PHP and ASP.NET for Web Development, International
Journal of Scientific & Technology Research, 3(7), 331-333.
Pressman, R. S. (2009). Software Engineering: A Practitioner’s Approach. New York City: McGraw-
Hill.
Sabah, A. F. (2011). Developing Web Applications. International. Journal of Software Engineering
and Its Applications, 5(2), 57-68.