An online gravestone design system based on jQuery ...

2018 International Conference on Computing, Mathematics and Engineering Technologies – iCoMET 2018

WebGraveStone: An online gravestone design system based on jQuery and MVC framework Abdul Wajid, Pan Junjun

Adeel Akbar

Muhammad Ali Mughal

School of Computer Science & Engineering Beihang University, Beijing 100191, China [email protected]

Department of Computer Science & Software Engineering International Islamic University Islamabad, Pakistan

School of Automation Science & Electrical Engineering Beihang University Beijing 100191, China

Abstract— In 21st century fast convenient and reliable access to the internet, the commodity management and online shopping have attracted various industries. Gravestone- which is relatively uncommon as compared to other commodities is used by various Christian and Muslim societies as a headstone in cemeteries for their deceased ones as memorials. In this paper, a gravestone design and ordering application based on PHP, jQuery and MVC framework have been designed and developed with MySQL database. This system not only efficiently helps managers to manage various stone types, their colors, sizes availability information and various frames for selected sizes but also allows customers to design the headstone for their beloved ones. The system allows them to input the details for the deceased person and to choose the design, style, font, and place for the text elements over selected stone. This paper also explains how MVC framework is implemented in the system and jQuery is employed to meet customer design needs. System data modeling and access techniques are also discussed. Developed system has been utilized in a granite company and actual operation has exhibited that the presented designer and shopping application is stable, efficient and safe. Keywords— Data Modeling; Cemetery; Granite Application; Model View Controller; jQuery; AJAX

I. INTRODUCTION The rapid development of computing power and telecommunication technologies in past two decades have transformed the world into an era of networking and information. Benefiting from the internet, peoples who even though stay at home are able to collect required commodities using shopping cart applications. In this situation, businesses are transforming to “paperless office” and have clear advantages, particularly in fast search and space utilization. Online shopping cart applications can efficiently decrease the intermediate links among products, make a purchase of commodities easier, save time and provide convenience to businesses and consumers. Granite headstone, an uncommon commodity, involves a variety of sizes and shapes. These headstones are priced based on the size and color of the stone along with the design to be engraved over the stone surface. When we talk about the gravestone as a memorial, each customer is looking to present the deceased one’s name along with his date or year of birth and date or year of death over the stone. The place where the corpse and cremated remains are

buried is known as a cemetery and it is noted that the religious rites for the entombment vary from religion to other religions and country to other countries [1]. Hence, the grave headstone design requirement varies from customer to customer. Because of the distinct information and design requirements, it causes fuss while designing manually and querying these headstones. With recent developments in internet and computing, we can quickly and accurately deal with these distinct design requirements, thus facilitating grave headstone management in cemetery sector more conveniently. In recent years online sales systems are getting popular day by day. Most of these inventory and sales systems are developed using PHP, ASP.NET or JSP. With the invention of HTML5, CSS stylesheet and client-side scripting technologies including jQuery and bootstrap framework, website development has entered in the new era [2]. With proper utilization of these tools and frameworks, developers have started to develop goodlooking, dynamic and responsive websites. Z. Li et al developed jewelry selling system based on MVC framework [3]. Xiaopei Liu et al. designed and implemented CRM system based on MVC framework [4]. Pawel Olejnik et al. developed an aircraft control system application based on Apache and MVC framework [5]. Zhongming Xie et al. designed an application for lighting energy consumption monitoring platform based on MVC and entity framework [6]. Xu Liang et al. designed and implemented an online taxpaying system based on MVC framework [7]. In this paper, a gravestone design and order management system-based jQuery, bootstrap, and MVC(Model-ViewController) framework have been designed and developed. This paper is composed of five sections. Section two presents the general system design and module functionalities. Data modeling and accessing mechanism are described in section three. Application of jQuery in the system is discussed in section four while section five reveals the real user interfaces of the system. In the end characteristics and performance of the system is summarized II. SYSTEM DESIGN Methodology plays the key role to arrange and manipulate the study and develop a working system. The methodology opted in this study have been presented in Fig. 1 compromising five key stages of system development process.

978-1-5386-1370-2/18/$31.00 ©2018 IEEE

TABLE I.

A. Data Acquisition and Requirement Identification Gravestone related data was obtained from various businesses and cemeteries. These memorials are categorized in Grass markers, Bevels, Slants, and Upright Units. Each stone category has multiple sizes for single grave and companion graves. Some popular sizes used in industry have been presented in Table I. These memorials are cut and designed from different granite types and colors, some commonly used colors are presented in Table II. Further, these stones are available with various polish standards. The stone type, size, color and polish standards play the important role in the calculation of final price for the memorial. For this study, a series of interviews were held with stakeholders involved in gravestone design business and requirements have been identified. B. System framework: Model-View-Controller MVC an abbreviation for Model View Controller framework is a standard design pattern. In MVC, Model is responsible for handling the database data; the View is responsible for presenting the user interface in the browser, and the Controller handles the user input and is responsible for the communication among Model and View [8]. For improved security, reusability, flexibility and easy understanding of code to developers, the Model-View-Controller (MVC) framework have been implemented in this online gravestone design and ordering system [9]. MVC framework separates the view layer from business logic layer as portrayed in Fig. 2. The Model consists of two layers including business logic layer (BL) and data access layer(DAL). Business Logic Layer defines all entity objects including Customer, Product, Order, and Email. These entity objects deal with the business requirements associated with them. At Data Access Layer PDO entity data model have been used for communication among database and business logic entities. To explain the functionality and communication of MVC, an example calls for querying “Received Orders List” have been exhibited in Fig. 3 to illustrate the complete activity. For this scenario, the process is completed in following five steps starting from entering the query in the browser by the user to getting feedback results. It is assumed that the user is already authenticated as an Administrator. STEP1: Administrator enters order query URL in the browser (/order/allorders) and submits. This user action directs a command to order controller.

Fig. 1. System design methodology.

TABLE II.

VARIOUS STONE COLORS USED IN CEMETERY.

Memorial color

Image

Memorial color

American Black

Autumn Mist

Bahama Blue

Barre Grey

Blue Pearl

Canadian Mahogany

Canadian Pink

China Pink

Flash Black

Galaxy Black

Georgia Blue

India Mist

India Red

Missouri Red

Mountain Rose

Newbury Gray

Image

Model

Controller

Entity Objects Customer Product View

PDO Entity Data Model

MySQL Database

Upright Units

3’- 6” x 1’- 0” x 0’- 4” [C] 4’- 0” x 1’- 0” x 0’- 4” [C] 3’- 0” x 1’- 0” x 0’- 6” [C] 3’- 0” x 1’- 0” x 0’- 8” [C] 2’- 6” x 0’- 10” x 1’- 6” 3’- 0” x 0’- 10” x 1’- 4” [C] 3’- 0” x 0’- 10” x 1’- 6” [C] 3’- 0” x 0’- 8” x 2’- 0” [C] 3’- 6” x 0’- 6” x 2’- 0” [C] 3’- 6” x 0’- 8” x 2’- 2” [C] 4’- 0” x 0’- 6” x 2’- 0” [C]

Browser

Slants

Commonly used size (W x D x H) 1’- 8” x 0’- 10” x 0’- 4” 2’- 0” x 1’- 0” x 0’- 4” 1’- 8” x 0’- 10” x 0’- 6” 2’- 0” x 1’- 0” x 0’- 6” 1’- 8” x 0’- 10” x 1’- 4” 2’- 0” x 0’- 10” x 1’- 4” 2’- 0” x 0’- 10” x 1’- 6” 2’- 0” x 0’- 6” x 1’- 8” 2’- 6” x 0’- 6” x 1’- 8” 2’- 6” x 0’- 6” x 1’- 8” [C] 3’- 0” x 0’- 6” x 1’- 8” [C]

Order Email

User Interface

Business Logic

Data Access

Fig. 2. MVC framework for gravestone design and ordering system.

1 Browser

Memorial type Grass Markers Bevels

VARIOUS STONE SIZES USED IN CEMETERY.

Order Controller

2 3

Order Model

4 5 Order View

Fig. 3. The affiliation of Model, View, and Controller in the system.

STEP2: Order controller receive query data; the constraints are transferred to order model to get all orders which are not archived. STEP3: Order model sends the resultant data to order controller.

View Contact Information Account Setup

Customer



Login

Outstanding Quote List

STEP4: Order controller sends the result data to related order view (in this case allorders.php).

C. Functional module After series of interviews with stakeholders involved in gravestone design business, functional and non-functional requirements for the system have been identified. Functional requirements for Customer perspective and shop-owner perspective are modeled as use case diagram using UML and portrayed in Fig. 4 and Fig. 5. Based on these functional requirements we have divided the online gravestone design and ordering system into five modules.



View Quote



Change Password

STEP5: User gets the complete list of Orders along with actions i.e. “View Order”, “Archive” and “Delete”. The controller’s role is very important in this system, it deals with the user's request, communicate with the model, and choose an appropriate view to render output.

Place Order



Create New Stone Quote

Modify Quote

View Price Sheet Remove Quote

Fig. 4. Functional requirements in customer perspective.

After Authetication

Administrator (Shop-Owner)

New Customer Account Design Setup

Color Setup

Sizes Setup

Pricing Setup

Archive Order

Received Orders List

View Order



1) Authentication module identifies administrator(shopowner) and customer identity and provides the services and operations accordingly. This module also manages the information related to various customers, allows the administrator to create or remove customer account, customer to register an account and change the account password when required. 2) Product management module is the key module for the system and is primarily available to the administrator and allows to not only change the sizes, colors, and design-frames for the selected product but also allows to define pricing for the product for each product variant. 3) Order management module holds all the information relating to orders including designed image and associated customer. The administrator can view the list of received orders and order details including a designed image for each order. The administrator can also archive the order upon delivery. 4) Quote module is primarily available to the customers and allows them to choose the product, select its size and color variant and design the custom grave headstone based on selected design frame. This design process is discussed in detail in section IV of this paper. This module also allows the customer to save the quote temporarily and view, remove and modify the selected quote later on. This module also calculates the price involved and present it on the order screen. Once the customer finalized the design and is satisfied with the price involved, he or she can submit the quote as an order. 5) Price sheet module is available for both administrator and customer and presents a base price table for all product variants by presenting sizes at y-axis and color at the x-axis.

Archived Orders List

Remove Order



Un-archive Order

Product Colors

Modify Product



Product Sizes



Product Design Frames

Fig. 5. Functional Requirements in Shop-Owner Perspective.

III. DATA MODELING AND ACCESS Online gravestone design system uses MySQL database as data source. MySQL is freely available and is commonly used for web development. The database holds three types of information i.e. User or Customer information, Product information, and Order information. With regards to Customer information section, two tables have been created including Customer and Billing. Customer table contains basic customer data including authentication information while Billing table contains customer’s billing address and relevant information. For Product information section six tables are created. These tables include Product, Stone Size, Design Frame, Stone Color, Stone Color Polish and Product Base Price. Product table holds basic product information for all products, Stone Size holds data for various sizes available the product design, Stone Color holds the list of various colors and variants used as headstone memorial, Stone Color Polish contains polish standards if and where available for stone colors and finally Product Base Price contains the price of each product based on its size, color, and polish variant. For Order information, two tables are created including Order holding all the data relating to ordered product, its design frame information, text elements, the customer

associated and cemetery information for delivery. The second table in this category is Cemetery Address, which is a global list of cemeteries. The entity data model used in this system have been presented in Fig. 6.

Product Base Price

Design Frames

JQUERY IN THE SYSTEM

Stone Colors

In modern web development AJAX, a short name for Asynchronous JavaScript and XML, is a natural mixture of several technologies and is commonly applied for asynchronous communications with web server [10,11]. jQuery is a fast, concise and commonly used excellent Ajax library which works on the principle “WRITE LESS, DO MORE” and simplifies the development of dynamic HTML web pages [12]. jQuery is very light-weight, easy to use and flexible as compared to other JavaScript frameworks. It works using its powerful selector (called “$”) and aids in handling various events, producing transformations, animations and other server-side tasks from client browser without any postbacks [13,14]. In the web environment, this post back is a very critical task which involves bandwidth utilization and unnecessary pressure over the web-server. jQuery is also fully compatible with CSS3 and can interact with other frameworks on the web including web services [15,16]. Hence, jQuery with the aids of AJAX makes things easier and is the right package causing every API very useful [17].

Stone Colors Polish

Billing Address

Product

Customer

Cemetry Address

Order / Quote

Fig. 6. Grave headstone system entity data model.

Start

Select HeadStone Type

End

Select Stone Size

In this system, jQuery is primarily employed for the customer quote process. To design and order the memorial, a customer goes through various steps indicated in the flow diagram presented in Fig. 7. During the stone design process, jQuery has been implemented to achieve following requirement without post-back operation. 1) Design Frame Selection: whenever the customer chooses a different frame from the list, the old frame is removed, a new frame is added and all text elements are reset to default positions. 2) The appearance of text elements: when a customer types the deceased one’s information including first name, last name, date of birth, date of death etc. These elements appear on the canvas on their default positions according to the selected frame. 3) Font Selection: there are four font options implemented in the system and when customer select the required font, font family for all text element is changed. 4) Element Selection and Reposition: once the text elements are placed on the canvas, the customer can select any element using the mouse for reposition etc. Once selected, the customer can not only reposition the element using arrow buttons or mouse to the canvas but also change the font size for the element to meet the design needs. 5) Canvas to Image at Server: at the completion of the design process, when the user presses the NEXT button to input shipping and contact information, the jQuery script not only generates the image from on-screen canvas but also upload the image to the web-server for further utilization on confirmation pages and e-mails. A dynamic image naming technique is employed to avoid server-side conflicts.

Stone Size

Receive Email Containing Your Designed Stone Image

Select Stone / Color

Select Design Frame Confirm your Design

HeadStone Type = Upright

Yes

Select Die Option No

Input Family Contact and Shipping Information

Select Base Option

Select Design Type

Select Font Input Right Side Deceased Person Information Companion HeadStone

True

False

Input Left Side Deceased Person Information

Adjust Location and Size of Each Text Element

IV.

Input Information

Fig. 7. Headstone design flow chart.

V.

USER INTERFACE

In grave memorial design and ordering system, various technologies have been used to design the user interface. These include HTML5, CSS3, JavaScript and Bootstrap framework. Using these technologies, it has been ensured that all the pages in the web application are responsive in the layout. Responsive

layout adjusts their size according to device location on which the website is being used. MVC framework has been implemented using PHP combined with HTML and CSS to develop various pages in the system and jQuery has been used at client side to implement dynamic features of the application without post back. Upon entering the URL in the browser, a login interface appears for user or customer for authentication purpose. The login interface is presented in Fig. 8. Based on the provided credentials, the system shows the home page either Administrator or Customer. Homepage appeared for administrators is portrayed in Fig. 9 and for customers is portrayed in Fig. 10. If the customer is new he or she can jump to registration interface directly and create a new account for authentication. From the home page an administrator can create new users, manage customers, manage administrators, add or remove the sizes to the library, add or remove stone colors to the library, add or remove designs to the library and modify products by setting or removing available sizes, colors and designs for the product as presented in Fig. 11. From the homepage an administrator can also view orders list, archived orders list, view, archive, un-archive and remove any order. For customers, the homepage has links to create a new quote, open outstanding quotes, see active orders and download a pdf version of basic price sheet containing product type and size on the vertical axis and stone color at horizontal axis. Fig 12 displays the first screen to start new quote and Fig. 13 displays the design canvas at the final screen of designing and getting a quote for a gravestone.

Fig. 10. Homepage for the customer.

Fig. 11. Modify product page.

Fig. 12. Create new quote page

Fig. 8. Login interface on a small tablet in landscape(800x600).

Fig. 9. Homepage for administrators.

Fig. 13. Headstone design process - jQuery in action.

CONCLUSION The grave headstone is an uncommon commodity mostly used by Christians and Muslims in the cemeteries as memorials for their deceased relatives. Each of them is different from other as the engraved text is always different. In this paper, we have presented an online designer for the purpose coupled with complete order management system to help not only the customers but also the stakeholders in the granite industry. Latest technologies including MVC framework, Bootstrap, and jQuery AJAX has been used along with PHP and MySQL to design and implement browser server structure. HTML, CSS, and bootstrap are employed to design the user interface. The overall interface of the system is very clean, stable and fast. Developed system has been implemented in a granite company and tested by various stakeholders including actual customers. The actual operational testing reveals that developed designer is convenient and fast the ordering system is stable and data operation is efficient and safe.

[5]

[6]

[7]

[8] [9]

[10] [11] [12]

REFERENCES [1]

[2]

[3]

[4]

A.M. Ab Halim. “E-Kubur System. First Degree Dissertation from the University of Kuala Lumpur”. Retrieved July 10, 2012, from http://rps.bmi.edu.my/fyp/submission/S111/Degree/51262208048/uploa ds/E-Kubur%20System.pdf “HTML5 specification finalized.” [Online]. Available: https://arstechnica.com/information-technology/2014/10/html5specification-finalized-squabbling-over-who-writes-the-specscontinues/. [Accessed: 31-Oct-2017]. Z. Li, K. Jia, Z. Li, and M. Yao, “Design and implementation of jewelry selling system based on.NET MVC framework,” in Proceedings - 2012 International Conference on Computer Science X. Liu, H. Zou, T. Fei, C. Zhu, and Y. Geng, “Design and implementation of CRM system based on MVC framework,” Proc. 2012 9th Int. Conf. Fuzzy Syst. Knowl. Discov. FSKD 2012, no. Fskd, pp. 2656–2659, 2012.

[13] [14]

[15]

[16] [17]

P. Olejnik, J. Murlewski, B. Sakowicz, and A. Napieralski, “Aircraft control system application based on apache struts MVC framework,” Exp. Des. Appl. CAD Syst. Microelectron. - Proc. 9th Int. Conf. CADSM 2007, pp. 408–411, 2007. Z. Xie, H. He, Y. Li, and J. Jia, “Design and application of lighting energy consumption monitoring platform based on MVC and entity framework,” 2014 IEEE Int. Conf. Inf. Autom. ICIA 2014, no. July, pp. 473–477, 2014. X. Liang, K. Chi, and M. Huang, “Design and implement for Internet taxpaying system based on spring MVC,” Proc. 2015 4th Int. Conf. Comput. Sci. Netw. Technol. ICCSNT 2015, no. Iccsnt, pp. 425–430, 2016. Liu Ke, “The MVC framework and its application in Web application development”, Computer Applications and Software,2006 Liu Kunbiao, “Web application development research based on the MVC pattern”, Journal of Zhejiang transportation vocational technical college,2013 Dave Crane, Eric Pascarello, Ajax In Action, Manning, 2006, pp. 10-12 D. Paulson, "Building Rich Web Applications with AJAX", Computer, Vo1.38, No.1 0, pp. 14-17, 2005 Karl Swedberg, Jonathan Chaffer, “Learning jQuery: Better Interaction Design and Web Development with Simple JavaScript Techniques”, pp. 2-5,2009 G. Venkat, “Why jQuery”, Vishwak Lab’s White Paper, 19th February 2009, Vishwak Solutions Pvt. Ltd. Jinpeng Wei, Lenin Singaravelu, and Calton, “A Secure Information Flow Architecture for Web Services Platforms”, IEEE Transactions on Services Computing, Vol. 1, No. 2, April – June 2008. S. Bertram, M. Boniface, M. Surridge, N.Briscombe, M. Hall-May, “On Demand Dynamic Security for Risk-Based Secure Collaboration in Clouds”, 3rd IEEE International Conference on Cloud Computing, 2010. Bear Bibeault, Yehuda Katz, “jQuery in Action”, 2nd ed, Manning, 2012, pp.50-52 R. Dhand, “Reducing web page postbacks through jQuery Ajax calls in a trust-based framework,” in Proceedings: Turing 100 - International Conference on Computing Sciences, ICCS 2012, 2012, pp. 217–219