PA3 Teaching Data Structure 1. System Description The Data Structure Web application is written in JavaScript and HTML5. It has been divided into 9 pages: Singly linked page, Stack page, Postfix expression page, Infix expression page, Queue page, Prefix expression page, Doubly linked list page, Circular linked list page and Tutorial page. Each pages includes a basic operation such as addition buttons, delete buttons, Push button, Pop button, Enqueue button and Dequeue button. The system is allowing the user to press all buttons. After the user press any button, the system will perform a calculation using JavaScript to display animation of a java code of each basic operation. 1.1 Perspective The relationship between Web Application and other systems and users is shown in Figure 1. Users HTML browser Client Application Server Student User Interface Data Lecturer Anyone interested in data structure HTML + JavaScript Output from sever side Application Logic Web Pages (HTML) Figure 1: Perspective Block Diagram The system is allowing the users to press all buttons and will receive the action or texts input from the user and then start calculation using JavaScript. After finish the calculation, the web application will display the animation and java code of each basic operation. For example if the user press the remove first button, the java of remove first will appear and the first node will fade away then the next node will be the first node. The user will see a difference of each operation. Teaching Data Structure 1
User Interface Processing PA3 1.2 Functions The functions of Web Application are shown in Figure 2. Web Application Server Buttons Screen (Show the basic operation code) Screen (Display an animation) Addition Deletion Push/ Pop Enqueue Dequeue Data Application Logic Speed 1/ 2/ 3 Create an animation (JavaScript) Repeat/ undo Figure 2: Function Block Diagram The functions are summarized as: The Screen: connect to the server and display an animation after Create an animation (JavaScript). The Screen: connect to the server and display a code after Create an animation (JavaScript). The addition buttons: connect to the server (Application logic) and it will create an animation (JavaScript) after finish application logic process then display an The deletion buttons: connect to the server (Application logic) and it will create an animation (JavaScript) after finish application logic process then display an The Push buttons: connect to the server (Application logic) and it will create an animation (JavaScript) after finish application logic process then display an Teaching Data Structure 2
The Pop buttons: connect to the server (Application logic) and it will create an animation (JavaScript) after finish application logic process then display an The Enqueue buttons: connect to the server (Application logic) and it will create an animation (JavaScript) after finish application logic process then display an The Dequeue buttons: connect to the server (Application logic) and it will create an animation (JavaScript) after finish application logic process then display an The Speed1 buttons: connect to the server (Application logic) and the speed will change after finish application logic process. It will display an animation of basic operation with speed1 on screen. The Speed2 buttons: connect to the server (Application logic) and the speed will change after finish application logic process. It will display an animation of basic operation with speed2 on screen. The Speed3 buttons: connect to the server (Application logic) and the speed will change after finish application logic process. It will display an animation of basic operation with speed3 on screen. The repeat buttons: connect to the server (Application logic) and the basic operation will be repeat after finish application logic process. It will repeat an animation of basic operation on screen. The undo buttons: connect to the server (Application logic) and the basic operation will be undo after finish application logic process. It will undo an animation of basic operation on screen. Teaching Data Structure 3
Navigation The basic operation and features PA3 2. Detailed design 2.1 Data structure Web application flow chart Singly linked list - Group of addition - Group of deletion - Undo and repeat S-List Stack Push/ Pop/ Empty/ Reverse/ Palindrome checking S-List Stack (Postfix Expression) - Start HOME PAGE S-List Stack (Infix Expression) - Start S-List Queue - Enqueue/ Dequeue/ Empty S-List Queue (Prefix Expression) - Start Doubly linked list - Group of addition - Group of deletion - Undo and repeat Figure 3: Web Application Flow Chart Circular linked list Tutorial Video - Group of addition - Group of deletion - Undo and repeat Teaching Data Structure 4
Data Structure web application Flow Chart show how a user would normally use the web application by traversing through several web page: Singly linked list page: This page includes a group of addition, deletion, speed, undo and repeat. Stack page: This page includes Push/ Pop/ Empty/ Reverse/ Palindrome checking, speed. Postfix expression page: This page includes start, speed and a group of number, operand and parenthesis. Infix expression page: This page includes start, speed and a group of number, operand and parenthesis. Queue page: This page includes enqueue, dequeue, empty, start, speed. Prefix expression: This page includes Push/ Pop/ Empty/ Reverse/ Palindrome checking, speed and a group of number, operand and parenthesis. Doubly linked list page: This page includes a group of addition, deletion, speed, undo and repeat. Circular linked list page: This page includes a group of addition, deletion, speed, undo and repeat. Tutorial page: This page is a video tutorial to guide the users. All of the data structure buttons are placed in one page so, the users are able to access every page from clicking the buttons of each data structure at home page and it will automatically change to the selected data structure page. The database is not requiring because this web application is simple and the collection of information is not necessary. Teaching Data Structure 5
2.2 How the users using this web application flow chart Start Yes Do you want to learn data structure? No Stop Yes Do you want to learn how to use this web application? No Open Tutorial video Open web application END Select data structure type from home page Learn data structure END Figure 4: the user Flow Chart The user s flow chart describes how the user using this web application. The users can use this web application step by step as a figure 4 which is open the web application and then make a decision to use this web application. Teaching Data Structure 6
2.3 User interface design Figure 5 : Home page When the user open this web application, It will show this home page which includes the buttons of various data structure buttons such as Singly linked page, Stack page, Postfix expression page, Infix expression page, Queue page, Prefix expression page, Doubly linked list page, Circular linked list page and Tutorial page. Figure 6 : Singly linked list page The users are able to access this page via Singly linked list button from home page. This page includes the buttons of basic operations such as groups of addition for adding a new node at any positions, a group of deletion for remove the node at any position, a group of speed, a group of undo and repeat and java code. The screen will display the animation when the users press any basic operation buttons. Teaching Data Structure 7
Figure 7 : Stack page The users are able to access this page via Stack button from home page. This page includes the buttons of basic operations such as pop, push, empty, reverse, palindrome checking, a group of speed and java code. The screen will display the animation when the users press any basic operation buttons. Figure 8 : Postfix expression page The users are able to access this page via Postfix expression button from home page. This page includes the buttons of basic operations such as groups of number, operand, parenthesis, a group of speed and java code. The screen will display the animation after the users input the expression and press start buttons. Teaching Data Structure 8
Figure 9 : Infix expression page The users are able to access this page via Infix expression button from home page. This page includes the buttons of basic operations such as groups of number, operand, parenthesis, a group of speed and java code. The screen will display the animation after the users input the expression and press start buttons. Figure 10 : Queue page The users are able to access this page via Queue button from home page. This page includes the buttons of basic operations such as dequeue, enqueue, empty, a group of speed and java code. The screen will display the animation after the users input the expression and press start buttons. Teaching Data Structure 9
Figure 11 : Prefix expression page The users are able to access this page via Prefix expression button from home page. This page includes the buttons of basic operations such as groups of number, operand, parenthesis, a group of speed, and java code. The screen will display the animation after the users input the expression and press start buttons. Figure 12 : Doubly linked list page The users are able to access this page via Doubly linked list button from home page. This page includes the buttons of basic operations such as groups of addition for adding a new node at any positions, a group of deletion for remove the node at any position, a group of speed, a group of undo and repeat and java code. The screen will display the animation when the users press any basic operation buttons. Teaching Data Structure 10
Figure 13 : Circular linked list page The users are able to access this page via Circular linked list button from home page. This page includes the buttons of basic operations such as groups of addition for adding a new node at any positions, a group of deletion for remove the node at any position, a group of speed, a group of undo and repeat and java code. The screen will display the animation when the users press any basic operation buttons. Teaching Data Structure 11