Uniform: the Form Validation Language
Total Page:16
File Type:pdf, Size:1020Kb
Santa Clara University Scholar Commons Computer Engineering Senior Theses Engineering Senior Theses 6-9-2016 Uniform: The orF m Validation Language Sawyer Novak Santa Clara University Reid Palmquist Santa Clara University Douglas Parker Santa Clara University Follow this and additional works at: https://scholarcommons.scu.edu/cseng_senior Part of the Computer Engineering Commons Recommended Citation Novak, Sawyer; Palmquist, Reid; and Parker, Douglas, "Uniform: The orF m Validation Language" (2016). Computer Engineering Senior Theses. 72. https://scholarcommons.scu.edu/cseng_senior/72 This Thesis is brought to you for free and open access by the Engineering Senior Theses at Scholar Commons. It has been accepted for inclusion in Computer Engineering Senior Theses by an authorized administrator of Scholar Commons. For more information, please contact [email protected]. Thesis Senior Design Santa Clara University Santa Clara, California Uniform: The Form Validation Language Submitted in partial fulfillment of the requirements for the degree of Bachelor of Science in Computer Science and Engineering Santa Clara University School of Engineering Authors: Sawyer Novak Reid Palmquist Douglas Parker June 9, 2016 Abstract Digital forms are becoming increasingly more prevalent but the ease of creation is not. Web Forms are difficult to produce and validate. This design project seeks to simplify this process. This project is comprised of two parts: a logical programming language (Uniform) and a web application. Uniform is a language that allows its users to define logical rela- tionships between web elements and apply simple rules to individual inputs to both validate the form and manipulate its components de- pending on user input. Uniform provides an extra layer of abstraction to complex coding. The web app implements Uniform to provide business-level pro- grammers with an interface to build and manage forms. Users will create form templates, manage form instances, and cooperatively com- plete forms through the web app. Uniform’s development is ongoing, it will receive continued support and is available as open-source. The web application is software owned and maintained by HP Inc. which will be developed further before going to market. ii Contents 1 Introduction1 1.1 Digital Forms...........................1 1.1.1 Digital Forms Require Programming Skills.......1 1.1.2 Logically Simple but Hard to Implement........1 1.1.3 We Need a Solution....................2 1.2 Emerging Solutions........................2 1.2.1 Problem 1: Limited Functionality............3 1.2.2 Problem 2: Inadequate Interactive Help.........3 1.2.3 Problem 3: Lack of Mobile Support...........4 1.3 Uniform Validation Language..................4 1.3.1 Why Uniform?......................4 1.3.2 Uniform’s Capabilities..................4 1.3.3 Powerful, Yet Easy to Learn...............5 1.4 Web Application.........................5 1.4.1 Web Application’s Capabilities.............5 1.4.2 Mobility Addressed....................5 2 Document Layout6 I Logical Language6 3 The Logical Solution6 4 Design Philosophy6 5 Requirements7 5.1 Functional Requirements.....................7 5.2 Non-Functional Requirements..................7 5.3 Design Constraints........................8 6 Why Uniform?8 6.1 The Problem: Car Form.....................8 6.1.1 Intended Form Logic...................9 6.1.2 Problems......................... 10 6.2 The Solution: The Uniform Language.............. 10 6.2.1 The Car Problem Revisited............... 10 iii 6.2.2 index.html......................... 11 6.2.3 carForm.ufm........................ 11 7 Uniform Code Structure 12 7.1 Blocks............................... 12 7.2 Selectors.............................. 12 7.3 Tags................................ 13 7.4 Statements............................. 13 7.5 Advanced Features........................ 13 7.5.1 Regular Expressions................... 13 7.5.2 Variables.......................... 14 7.5.3 Applying Rules to Multiple Elements.......... 15 8 Examples in the Real World 15 9 Architectural Design 16 9.1 Lexer and Parser......................... 16 9.1.1 Lexical Components................... 17 9.1.2 Expression Priority.................... 17 9.1.3 Grammar......................... 19 9.2 Ruleset............................... 19 9.3 Evaluator............................. 20 9.4 jQuery Plugin........................... 23 9.5 Server-Side Validation...................... 24 9.6 Install and Usage Guide..................... 25 9.6.1 Client-Side......................... 25 9.6.2 Server-Side........................ 27 9.7 Security.............................. 29 9.7.1 Uniform Ambiguity.................... 29 9.7.2 Server Data Format.................... 30 9.7.3 Extraneous Client Information.............. 33 9.7.4 Server-Side HTML.................... 33 9.7.5 Language Redesign.................... 34 9.7.6 Cross-Script Validation.................. 37 9.7.7 Main Misdirection.................... 38 iv 10 Design Rationale 40 10.1 Usability.............................. 40 10.1.1 Logical Design....................... 40 10.1.2 CSS Format........................ 41 10.2 Efficiency............................. 41 10.2.1 Nested Form Evaluation................. 41 10.3 Design Patterns.......................... 42 10.3.1 Shared Logic....................... 44 11 Technologies Used 47 12 Testing 48 12.1 Unit Testing............................ 48 12.2 User Testing............................ 48 12.2.1 Quiz Results........................ 49 12.2.2 Improvements Suggested................. 49 12.3 Browser Testing.......................... 51 12.4 jQuery Support Testing..................... 51 13 Development Problems and Solutions 51 13.1 Detecting Circular Dependencies................ 51 13.1.1 What is a dependency?.................. 51 13.1.2 What is a circular dependency?............. 52 13.1.3 Can we detect at compile time?............. 52 13.1.4 Why it needs to be this way............... 52 13.1.5 The seemingly easy solution............... 52 13.1.6 The surprisingly hard solution (still doesn’t work)... 53 13.1.7 Decision: Ignore the problem.............. 53 13.2 Server-Side HTML Knowledge.................. 53 II Web Application 54 14 Solving the Human Element and Mobile Use Cases 54 15 System Components 54 15.1 Actors............................... 54 15.2 Form Terminology........................ 55 v 16 Requirements 55 16.1 Functional Requirements..................... 56 16.1.1 Critical.......................... 56 16.1.2 Suggested......................... 56 16.2 Non-Functional Requirements.................. 56 16.2.1 Critical.......................... 56 16.2.2 Recommended....................... 57 16.3 Design Constraints........................ 57 16.4 Post Implementation Evaluation................. 57 16.4.1 Functional Requirements................. 58 16.4.2 Non-Functional Requirements.............. 58 16.4.3 Recommended Features and Design Constraints.... 58 17 Use Cases 58 17.1 Create a Form Template..................... 60 17.2 Issue a Form Instance....................... 60 17.3 Provide Access to a Form Instance............... 61 17.4 View a Form Instance...................... 61 17.5 Fill out a Form.......................... 62 17.6 Communicate through Web App................. 62 18 Activity Diagrams 63 18.1 Client Workflow.......................... 63 18.2 Associate Workflow........................ 65 18.3 Admin Workflow......................... 66 19 Conceptual Model 67 19.1 Landing Page........................... 67 19.2 Template Creation........................ 68 19.3 Instance Creation......................... 69 19.4 Mobile Implementation...................... 70 20 Architectural Design 72 20.1 Data Flow Architecture...................... 72 20.2 System Architecture....................... 73 20.3 Validation............................. 73 20.4 Database Schema......................... 74 vi 21 Technologies Used 78 21.1 Server............................... 78 21.2 Client............................... 78 21.3 Database.............................. 78 22 Design Rationale 78 22.1 Comet............................... 78 22.2 Single Page Application..................... 80 22.3 Technologies............................ 81 22.3.1 Server........................... 81 22.3.2 Client........................... 81 22.3.3 Database......................... 82 22.3.4 Testing........................... 83 23 Testing Plan 83 23.1 Test-Driven Development..................... 83 23.2 Unit Testing............................ 84 23.3 Acceptance Testing........................ 84 23.4 Security Testing.......................... 84 23.4.1 URL Manipulation.................... 85 23.4.2 Cross-Site Scripting.................... 85 23.4.3 Database Injection.................... 86 23.4.4 API Misuse........................ 86 23.5 User Testing............................ 88 23.6 Browser Testing.......................... 88 24 Test Results 88 24.1 User Testing............................ 88 24.1.1 Client........................... 89 24.1.2 Associate......................... 89 24.1.3 Admin........................... 89 24.1.4 Browser Testing...................... 90 25 Install Guide 90 25.1 Installing system dependencies.................. 91 25.1.1 NodeJS.......................... 91 25.1.2 MongoDB......................... 91 25.2 Installing application dependencies............... 91 vii 25.3 Testing the server......................... 92 25.4 Run server............................. 92 25.5 Common errors.........................