Yang Fan MOBILE FOOD ORDERING APPLICATION - CORE

Transcription

Yang FanMOBILE FOOD ORDERINGAPPLICATIONTechnology and Communication2014

1(1)VAASAN AMMATTIKORKEAKOULUUNIVERSITY OF APPLIED SCIENCESInformation TechnologyABSTRACTAuthorFan YangTitleMobile Food Ordering ApplicationYear2014LanguageEnglishPages82Name of Supervisor Dr. Ghodrat MoghadampourThe purpose of this thesis was to build a food ordering client server applicationfor Tom Yum Thai Oy, which is a Thai restaurant in Vaasa.For the customer, this application provides a view of current food information(category, name, image,price, description etc.) on the website and Androidapplication. The customer can order food from these two platforms. For theadministrator in restaurant, this application offers a series of operations to add,update, delete and query the information of food, food order and employees.The application includes three parts: Background Management Platform, WebsiteForeground Public Page and Android Application. The Background ManagementPlatform was implemented with S2SJ, a combination of Struts 2 framework,Spring framework and JPA framework. Servlet and JSP were used in the WebsiteForeground Public Page. The Android Application is obviously based on Androidframework.So far, all core functions were developed successfully and the progress of theproject was most rewarding and generated an excellent experience inprogramming.KeywordsStruts 2, Spring, JPA, MySql, Servlet/JSP, Android, MobileFood Ordering Application

1(82)ACKNOWLEDGEMENTSFirstly I would like to give a big appreciation to my supervisor Dr. GhodratMoghadampour, for his patient guidance and support during conducting the wholethesis.Moreover, I would like to give my gratitude to other teachers, especially GaoChao, Antti Virtanen and Santiago Chavez Vega for the quality education. FinallyI also need thank all the people whose names are not mentioned here for their helpon study and life.Vaasa, Finland, 2013/4/12Fan Yang

2(82)CONTENTS1INTRODUCTION. 62Technology overview . 72.1Struts 2 Framework . 72.2Spring Framework . 102.3JPA Framework . 122.4Android Framework . 123Application Description . 153.1Functional Description . 163.1.1 Background . 163.1.2 Website Foreground Public Page . 223.1.3 Android Application. 243.2Class Hierarchy . 263.2.1 Background Management Platform . 263.2.2 Website Foreground Public Page and Android Application . 323.3Sequence Diagram . 373.3.1Background Management Platform . 373.3.2Website Foreground Public Page and Android Application . 424DATABASE AND GUI DESIGN . 444.1Database Design . 44

3(82)4.2GUI Design . 514.2.1 Background Management Platform . 514.2.2 Website Foreground Public Page . 574.2.3 Android Application. 595IMPLEMENTATION . 645.1Adding Food in Background Management Platform . 645.2Display Food Information in Website Public Page . 655.3Order Food in Website Public Page . 665.4Display Food Information in Android Application . 685.5Order Food In Android Application . 716TESTING . 757CONCLUSIONS . 79REFERENCES . 82APPENDICES

4(82)LIST OF FIGURES AND TABLESFigure 1. Struts 2 request processing/2/Figure 2. Struts 2 Architecture/2/Figure 3. Spring Framework Architecture /3/Figure 4. Android ArchitectureFigure 5. Use Case diagram for administratorFigure 6. Order state changing flowFigure 7. Use case diagram for customerFigure 8. Use case diagram for customer in Android ApplicationFigure 9. Order Module Controller StructureFigure 10. Employee Module Controller StructureFigure 11. Product Module Controller StructureFigure 12. Module StructureFigure 13. Controller structure in Website Foreground PublicPageFigure 14. Controller structure in Android ApplicationFigure 15. Module structureFigure 16. Background Management Platform LoginFigure 17. Product Category ManagementFigure 18. Product Information ManagementFigure 19. Order ManagementFigure 20. Customer Purchase sequence diagramFigure 21. Entity Relationship DiagramFigure 22. Login pageFigure 23. Management main pageFigure 24. Category List View PageFigure 25. Category Adding pageFigure 26. Product List View pageFigure 27. Add Product pageFigure 28. Product Style pageFigure 29. Order List View pageFigure 30. Order Detail Display View pageFigure 31. Dishes Display pageFigure 32. Customer Login pageFigure 33. Shopping Cart pageFigure 34. Launch WindowFigure 35. Register WindowFigure 36. Dishes Display Main WindowFigure 37. Dish Detail Information WindowFigure 38. Shopping Cart WindowFigure 39. Dish Modify WindowFigure 40. Order Confirmation 31p.32Table 1. Users Class EntityTable 2. OrderFoods Class 60p.60p.61p.62p.62p.63

Table 3. Order Class EntityTable 4. Employee Class EntityTable 5. IDCard Class EntityTable 6. ProductInfo Class EntityTable 7. ProductType Class EntityTable 8. ProductStyle Class EntityTable 9. The application-testing table part 1Table 10. The application-testing table part 2Table 11. The application-testing table part 35(82)p.45p.46p.47p.48p.49p.49p.75p.77p.78

16(82)INTRODUCTIONWith the rapid development of information technology, web application andAndroid application have been increasing in recent years. Compared with thedesktop application, the advantages of web application for users are:- No need to install and update- Easily visit through browsersThe advantage of the Android application:- Mobile application is convenient to carry- Global partnerships and large install base- Powerful development framework- Open marketplace for distributing appsBased on the advantages of both applications, I motivated myself to develop acombination project between web and Android application.Tom Yum Thai Restaurant in Vaasa sells Chinese and Thai food. Due to thecheaper prices and delicious food, more and more people select to eat in thisrestaurant. Meanwhile, with the number of customers increasing, the new problemoccurs. Because the space of the restaurant is limited, the restaurant can only seata certain number of customers at the time, therefore, the full customer resourcecannot be utilized.Mobile Food Ordering Application is the key to solve this problem. Using thisapplication, the customers need not go to the restaurant by themselves, but theycan order the dishes through computers and Android mobiles anywhere.The Background Management platform in this application was designed for theadministrator. The Administrator will be able to manage food dishes, dish ordersand company employees here.

27(82)TECHNOLOGY OVERVIEWThe administrator part was developed with struts2 framework, spring frameworkand JPA framework, while the display part of website for customers isimplemented with servlet/JSP. MySql was chosen as a database for the project.The Android part was developed with the Android framework. Following the coreframeworks will be generally introduced in this application.2.1 Struts 2 Framework“Apache Struts 2 is an elegant, extensible framework for creating enterprise-readyJava web applications.” /1/Struts 2, the next generation product of Struts, is the new framework mergedbased on Struts 1 framework technology and WebWork framework technology.The core of Struts 2 is WebWork. /1/Figure 1. Struts 2 request processing/2/

8(82)As shown in Figure 1, it illustrates the Request Lifecycle in Struts2 applications.When the FilterDispatcher in the server receives the request sent from the user, itwill determine the appropriate Action. As the same time, interceptors configuredfor applying the common functions, such as validation and file upload are appliedto the Request. Then the action method executes the related operations and theResult renders the output. Then the request returns through the interceptor in thereverse order. Finally the control returned in the servlet container will send theoutput to the user browser. /2/The Struts 2 allows us to define exception handlers and inceptors. Using theexception handler, we can define the exception-handling procedure on global andlocal basis. When the framework catches the exception, it will display theexception details information on the page. The inceptors configured to apply thefunctionalities, such as workflow, validation etc. are used to specify the“request-processing lifecycle” for an action. /2/Figure 2. Struts 2 Architecture/2/

9(82)Figure 2 depicts the architecture of Structs 2 Framework. It also shows the initialrequest going to the servlet container, such as tomcat, which is then passedthrough the standard filter chain. The filter chain includes: ActionContextCleanUp filter, FilerDispatcher and ActionProxy. /2/!Action ContextCleanUp filter:This filter is optional and useful when integration has to be done with othertechnologies. /2/!FilterDispatcher:The FilterDispatcher uses the ActionMapper to determine whether to invoke anAction or not when it is called. If the action needs to be invoked, theFilterDispatcher delegates the control to the ActionProxy. /2/!ActionProxy:The ActionProxy takes help from the Configuration Files manager initialized fromthe struts.xml. Then the ActionProxy creates an ActionInvocation. TheActionInvocation process invokes the Interceptors (if configured) and the action.The ActionInvocation looks for a proper result. Then the result that involves therendering of JSP or templates is executed. /2/The Interceptors are executed again in the reverse order. Finally the responsereturns through the filters configured in the web.xml file. The ThreadLocalActionContext will not be cleaned if the ActionContectCleanUp filter isconfigured, otherwise. /2/

10(82)2.2 Spring FrameworkThis section gives details about all the modules available in Spring Framework.About 20 modules, which can be used based on an application requirement, areprovided in the Spring Framework.Figure 3. Spring Framework Architecture /3/The main layers seen in Figure 3 will be described below.!Core Container:The Bean module provides BeanFactory. The Core module provides thefunctional parts of framework, including the IoC and Dependency Injectionfeatures. The Context module builds on the solid base provided by the Coreand Beans module and it is a medium to access any objects defined andconfigured. The ApplicationContext interface is the focal point of the Context

11(82)module. The Express Language module provides a powerful expressionlanguage for querying and manipulating an object graph at runtime. /3/!Data Access/Integration:The JDBC module provides a JDBC-abstraction layer that removes the needto do tedious JDBC related coding. The ORM module provides integrationlayers for popular object-relational mapping APIs, including JPA, JDO,Hibernate, and iBatis. The OXM module provides an abstraction layer thatsupports Object/XML mapping implementations for JAXB, Castor,XMLBeans, JiBX and XStream. The JMS module contains features forproducing and consuming messages. The Transaction module supportsprogrammatic and declarative transaction management for classes thatimplement special interfaces and for all your POJOs. /3/!Web:The Web module provides basic web-oriented integration features such asmultipart file-upload functionality and the initialization of the IoC containerusing servlet listeners and a web-oriented application context. TheWeb-Servlet module contains Spring’s module-view-controller (MVC)implementation for web applications. The Web-Struts module contains thesupport classes for integrating a classic Struts web tier within a Springapplication. The Web-Portlet module provides the MVC implementation tobe used in a portlet environment and mirrors the functionality of Web-Servletmodule. /3/!Miscellaneous:The AOP module provides an aspect-oriented programming implementationallowing the definition of method-interceptors and pointcuts to cleanlydecouple a code that implements functionality that should be separated. TheAspects module provides integration with AspectJ that is again a powerfuland mature aspect oriented programming (AOP) framework. TheInstrumentation module provides class instrumentation support and class

12(82)loader implementation to be used in certain application servers. The Testmodule supports the testing of Spring components with JUnit or TestNGframeworks. /3/2.3 JPA Framework“The Java Persistence API, sometimes referred to as JPA, is a Java programminglanguage application programming interface specification which describes themanagement of relational data in application using Java Platform, Standardedition and Java Platform, Enterprise Edition.” /4/Persistence in this context covers three areas: /4/1. the API itself, defines in the javax.persistence package2. the Java Persistence Query Language (JPQL)3. object/relational metadata2.4 Android FrameworkAndroid is known as a mobile operating system based on the Linux Kernel. It ismainly designed for touchscreen mobile devices such as smartphone and tablecomputers. Meanwhile, the Android operating system is widely used in televisions,games consoles, digital cameras and other electronics because of its open andcustomizable features. Android was developed initially by Android, Inc. andbought by Google in 2005. /5/The source code for Android is available under free and open-source softwarelicenses. It means that the device manufactures, wireless carriers and enthusiastdevelopers can freely modify and distribute the software. Most Android devicesship with a combination of open source and proprietary. /5/Today, Android has become the most popular mobile OS, and is the leader insmartphone market in the world. More and more customers select mobile phones

13(82)with the Android operating system as their first choice. Meanwhile, mounts ofprogrammers throw themselves into the Android application development camp.The major features of Android architecture are shown as shown in Figure 4 below.Figure 4. Android Architecture/5/!Linux KernelAt the bottom of the layers is Linux Kernel. It provides a basic systemfunctionality, such as memory management, device management etc. Also, ithandles the things that Linux is good at such as networking.

!14(82)LibrariesOn top of Linux Kernel is a set of libraries including open-source Web browserengine WebKit, SQLite database, libraries to play and record audio and video,SSL libraries and so on.!Android RuntimeThis section provides a key component called Dalvik Virtual Machine that is akind of Java Virtual Machine designed for Android. The Android runtime alsooffers a set of core libraries: it enables developers to develop Android applicationsusing the standard Java programming language.!Application FrameworkThe Application Framework layer provides many higher-level services toapplications in the form of Java classes. Application developers are allowed tomake use of these services in their applications.!ApplicationsAll the Android applications will be found at the top layer. The application writtenby the developer will be installed on this layer only.

315(82)APPLICATION DESCRIPTIONThere are certain requirements the proposed application must fulfil to meet theobjectives of the project.The requirements to be achieved:In Background Management Platform:!Administrator can add and modify food categories.!Administrator can add, modify and query food information.!Administrator can add, modify and query employee information.!Administrator can manage orders produced from the web application andAndroid application.In the Website Public Page and Android Application:!Customer can view food information, such as category, name, price, image,description and so on.!Customer can order food.!Customer can modify food item, food amount in Shopping Cart.!Produce food order.The requirements that should be achieved:!The project supports internationalization, customer can select differentlanguage environments according to their real requirements.The requirements nice to be achieved:!Permission Management in Background Management Platform!Query Dish Function in Website Public Page

16(82)3.1 Functional DescriptionDestine Food System is divided into two parts in terms of roles, the backgroundfor the administrator, the website foreground public pages and the Androidapplication for user. Functions corresponding to each role will be introduced indetail in the following.3.1.1Background Management PlatformFigure 5 is a use case diagram to illustrate the main functions in the backgroundfor the administrator. The detailed description of functions is as follows:Figure 5. Use Case diagram for administrator

17(82)Log In/OutProperties:" Username" PasswordWhen the administrator connects the background management platform url, a login interface will be displayed. The administrator needs to input correct usernameand password to log into the main page of the background management page. Oneadmin username and password is pre-set when the application is initialized.Add Food CategoryProperties:" Category Name" NoteWhen the administrator clicks “Category Manage”, a list view of dish categorywill be displayed. On the bottom of the list view page, there are two buttons:“Add Category” and “Query”. While clicking the “Add Category” button, thepage will be linked to a dish-adding interface, the administrator can add a newdish category here.Query Food CategoryProperties:"Category NameAlso, clicking the “Query” Button, a dish category query interface will bedisplayed, here the administrator can query current existing dish categoryaccording to the category name.Modify Food Category

18(82)Properties:" Category Name" NoteIn addition, in the category list view page, the administrator can modify theexisting dish category by clicking “Modify” button.Add Food InfoProperties:" Product Name" Product Category" Market Price" Sell Price" Product Code" Product Style Image" Product DescriptionWhen the administrator wants to add dishes, “Product Manage” just needs to beclicked; the right frame page will jump to a list view page of dishes. On the page,the detailed information of existing dishes will be shown, such as Product Code,Product Name, Category Belong, Sell Price, the state of sale, etc.Modify Food InfoProperties:" Product Name" Product Category

19(82)" Market Price" Sell Price" Product Code" Product Style Image" Product DescriptionThe administrator can modify food information by clicking “Modify“ button.Query Food InfoProperties:" Product Name" Product Category" Sell Price" Product CodeThe administrator can query food information according to different conditionsabove.Sale/Stop to saleIn addition, this project provides “On Sale” and “Stop Sale” functions. Usingthese functions, the administrator can manage the state of dish sale.Add Employee InfoProperties:" Login Account" Login Password

20(82)" Repeat Password" Employee Name" Employee Photo" Id Number" Birthday" Address" Telephone" Email (optional)" Degree (optional)" School (optional)In the Employee Management module, the administrator can view the informationof existing employees in the company by clicking “Employee Manage”. Thefunctions of “Add“ and “Modify employee“ are also provided in the project. Theemployee accounts added can be used to log in this background managementplatform. In addition, according to the real request, when an employee leaves thecompany, the administrator can mark leave for this employee using “Mark Leave”function, it means that the employee account will be invalid to log in thebackground management platform.Query Employee InfoProperties:" User Name" Real Name

21(82)By clicking the “Employee Query” link, the administrator can query companyemployees by the user name (log in account) or the employee’s real name.Change Order StatesFigure 6 is a use case diagram for the order flow to illustrate the flow of orderstate. When the customer purchases the dishes no matter what platform they are in(website or Android application). The order of dishes will be produced andshowed in the background management platform.Figure 6. Order state changing flowThe dish order is divided into five states: Unexamined, Wait Deliver, Delivered,Received and Cancelled. The default state of produced order is Unexamined, theadministrator can load the order to check the detailed information, for example,dish items, amount, price and customer information. After checking theUnexamined order, the administrator can decide to change the state of order, if theorder is examined, the order state is changed to Wait Deliver, otherwise, the stateis changed to Cancelled. As the simpler flow, the order state goes throughDelivered, till Received. When order in Unexamined, Wait Deliver, Delivered,

22(82)Received state, it can be cancelled, once the dish is delivered, the order cannot becancelled. In the Order Manage module, this project provides five order state links,“Order Unexamined”, “Order Wait Deliver”, “Order Delivered”, “OrderReceived”, “Order Cancelled”. In each link, there are the orders of related state. Inaddition, the “Order Query” link is used to query the order according to OrderCode Or Buyer Name.3.1.2Website Foreground Public PageFigure 7 shows the core functions provided for customers in this application.Figure 7. Use case diagram for customerRegisterWhen the customer wants to purchase dishes on the website, first, he needs toregister an account by clicking “Register” button to enter the register page, andthen just filling in User Name, Password and Repeat Password. If the customer

23(82)register is successful, a page will display to inform the customer, also if there is aregister fault, such as the User Name already exists, a friendly warning messagewill be given on the register page. Note that in the register form, there is avalidation function written by JavaScript to validate whether the information filledby the customer is valid or not. Only if all information is valid, the operation ofregister will be successful.Log InAfter registering, the customer can log in with the correct User Name andPassword to the website to purchase the dishes.View DishesTo click “Online Order” tab, the customer can view the current dishes accordingto different categories. Every dish item has two buttons: Order and Detail. Thecustomer can click the “Detail” Button to view the detailed information (bigimage, material of dish, price, etc.) of dishes. By clicking “Order” Button, the dishitem you select will be added to the shopping cart.Shopping CartThe dish items purchased by the customer will be added to the shopping cart. Thecustomer can view the dish items he/she purchases, unit price, dish amount andtotal price. The default amount for each dish item is one, the customer can updatethe amount according to his own requirement. After modifying the amount,customer needs to click “Update” button to update the dish amount. Also, if thecustomer needs to delete some dish item, it is easily implemented by clicking“Delete” Button following each dish item. On this Shopping Cart page, threebuttons (“Clear Cart”, “Continue to Buy”, “Produce Order”) are shown. “ClearCart” button means that the customer can delete all dish items in the shopping cart.To click “Continue to Buy” button, the page will be linked to dishes display page,the customer can continue shopping. By Clicking “Produce Order” Button, theapplication will produce an order for dish items purchased by the customer, theorder produced will shown in background management platform. At the same

24(82)time, the remainder of the page will display to inform the customer. This is theentire purchasing process for the customer to order dish on the website platform.3.1.3Android ApplicationThe Android application also provides the similar functions to those on websiteforeground public page.Figure 8. Use case diagram for customer in Android ApplicationRegisterCompared with the website foreground public pages, the customer must registeran account first to view the information of dishes. When the customer launchesthe Destine Food Client application on an Android mobile, a pop-up window willdisplay. The customer needs click the “Register” Button for the first time to usethis application. After clicking, the customer will see the Register window, thenhe needs to fill in a valid username and password to finish the registering task.

25(82)When the customer’s registering is successful, the window will jump back to thelog in window automatically.Log InWhen the customer has a valid account, just fill the username and password inrelated fields, then “Enter” Button is clicked, and the dishes display window willbe shown. At the same time, if the customer wants to enjoy the music whileordering dishes, the music play button is given.View DishesIn the dishes display window, there are three tab views for three different dishcategories. Each tab view contains the corresponding dishes. The customer canview the dish information via clicking the tab views. To click some dish item, theoptional menu will come out, and the customer can view the details of dish or addthe dish to the shopping cart.Shopping CartOnce the customer clicks the “Add to Cart” button, the pop-up window of dishamount will appear, in this window, the customer needs to fill in the integernumber and click “Order” button to confirm. Now the customer should go to theshopping cart window. The dish items the customer ordered will be shown as alist view here. The application will calculate the sub price and total priceautomatically. If the customer wants to delete some dish item or modify the dishamount, clicking anywhere of the dish item row will produce a pop-up window todisplay to let the customer do related operations. In addition, the customer alsocan clear the shopping cart, continue to purchase dishes and confirm the ordersimilarly to the operations on the website. Also, the produced order will be shownin the background management platform.

26(82)3.2 Class Hierarchy3.2.1 Background Management PlatformThe Background Management Platform part is architected with Struts2 framework,Spring framework and JPA framework, and it makes use of classical conceptknown as MVC, short for model, view and controller. This inside structure will beanalysed in detail in the following.3.2.1.1 Controller Class DiagramOrder Module:As Figure 9 shows, the administrator can change the state of dish order by usingthese methods.Figure 9. Order Module Controller Structure!execute():

27(82)Implement this method to jump to a JSP page.!cancleOrder():Cancel the dish order.!confirmOrder():Change order state from “Unexamined” to “Wait Deliver”!turnDelivered();Change order state from “Wait Deliver” to “Delivered”!turnReceived():Change order state from “Delivered” to “Received”Employee Module:The administrator can make a series of operations shown in Figure 10 regardingemployees. Also, employees can use their own function given in the system, suchas log in, log out and so on.

Figure 10. Employee Module Controller Structure!execute():Implement this method to jump to a JSP page.!editEmployee():Modify the current existing employee information.!editEmployeeUI():Jump to modify employee information page.!exist():Measure whether the employee account exists or not when registering.!leave():28(82)

29(82)Mark an employee in leave situation when an employee leaves company.!query():Query an employee according to the account name or employee’s real name.!regEmployee():Employee registers.!regEmployeeUI():Jump to employee register page.Product Module:In the product module, the administrator can control the related operations fordishes.Figure 11. Product Module Controller Structure

!execute():Implement this method to jump to a JSP page.!disable():Stop to sale some dish.!add():Add dishes.!edit():Edit current existing dish.!editUI():Jump to edit dish page.!queryUI():Jump to query dish UI!selectUI():Select dish category for dish when adding a dish.

2.2 Spring Framework This section gives details about all the modules available in Spring Framework. About 20 modules, which can be used based on an application requirement, are provided in the Spring Framework. Figure 3. Spring Framework Architecture /3/ The main layers seen in Figure 3 will be described below. ! Core Container: