CMPE 280 Web UI Design and Development August 29 Class Meeting Department of Computer Engineering San Jose State University Fall 2017 Instructor: Ron Mak www.cs.sjsu.edu/~mak
Basic Info Office hours Website TuTh 3:00 – 4:00 PM ENG 250 Faculty webpage: http://www.cs.sjsu.edu/~mak/ Class webpage: http://www.cs.sjsu.edu/~mak/CMPE280/index.html Syllabus Assignments Lecture notes
Permission Codes? If you need a permission code to enroll in this class, see the department’s instructions at https://cmpe.sjsu.edu/content/Undergraduate-Permission-Number-Requests Complete the Google form at https://docs.google.com/a/sjsu.edu/forms/d/e/1FAIpQLSe9YgAea-QsgLZof-KIMmuQthoChL4micudyRukgWneiByN2A/viewform
Links to Pages Demo <body> <h1>Links</h1> <p> An absolute link to the <a href="http://localhost/basics/paragraphs.html"> Paragraphs and Headings </a> page has the complete URL: <strong>http://localhost/examples/paragraphs.html</strong> </p> A relative link to the <a href="tables.html">Tables</a> page has a URL that is relative to the directory of the current page: <strong>tables.html</strong> ... </body> Demo
Links to Anchor Tags Demo <body> ... <h1>Links to Anchor Tags</h1> <p> A link to the the <a href="#lorem">lorem</a> anchor tag on this page uses the location <strong>#lorem</strong>. Place the anchor tag before the line you want to jump to. </p> You can also jump to the <a href="lists.html#nested">nested</a> anchor tag on the Lists page using the location <strong>lists.html#nested</strong> <a name="lorem"></a> <h1>Lorem ipsum</h1> Lorem ipsum dolor sit amet ... </body> Demo
Images <body> <p> An <em>inline image</em> <img src="images/RonCats2a.jpg"/> of my two cats. </p> An inline image <a href="cats.html"><img src="images/RonCats1a.jpg"/></a> can serve as a link! </body> </html>
Images, cont’d Demo
Take roll!
Serving Web Pages A web server serves web pages. Displayed on the client side by web browsers. Web pages can be static or dynamic. Static web pages: .html HTML files that the web server reads from disk. A static page always displays the same content. Dynamic web pages: .js Generated by JavaScript code on the server. Contains dynamic content.
node.js The Apache web server is very popular. It’s the A in LAMP (Linux, Apache, MySQL, PHP). In this class, we will use the node.js web server. A lean and fast web server. Created in 2009 as an alternative to the Apache web server. Programmed with JavaScript. Traditionally, JavaScript is a client-side language for programming web browsers. Created by NetScape in 1995.
node.js, cont’d Uses the open-source Google Chrome V8 JavaScript engine. Just-in-time compilation, automatic inlining, dynamic code optimization, etc. Single-threaded event loop handles connections. Each connection invokes a JavaScript callback function. Handle non-blocking I/O. Spawn threads from a thread pool.
node.js and Express Install node.js: https://nodejs.org/en/ node.js relies on packages for functionality. Install packages with npm, the node package manager. A package we will use is Express. Install at the Linux/Mac OS/DOS command line: npm install express –g npm install nodeunit -g
Form Data A user can input data into an HTML form displayed on a client-side web browser. When the user presses a Submit button, the browser sends to form data to a specified JavaScript program running on the web server. The JavaScript program can use the data to Query the back-end database. Generate a new HTML page to send to the user’s client-side web browser.
Ways to Send Form Data A browser sends form data to a JavaScript program on the web server when the user presses the submit button. The action attribute of the <FORM> tag indicates where to send the form data. Two methods to send form data: get and post.
Ways to Send Form Data, cont’d Get method The form data is appended to the target URL. Good for small amounts of data. The data is visible: Post method The data is sent via environment variables. Good for larger amounts of data. Slightly more secure than the get method. http://localhost:8080/text-response?firstName=Ron&lastName=Mak
Three-Tier Web Application Architecture Client-side web browser Form data Server-side web server (.html .js images, etc.) Static (.html) or dynamically generated (.js) web pages Back-end database server, e.g. MongoDB Queries Data
Text Input: Client-Side HTML Page <body> <form action="text-response" method="get"> <fieldset> <legend>User input</legend> <p> <label>First name:</label> <input name="firstName" type="text" /> </p> <label>Last name:</label> <input name="lastName" type="text" /> <input type="submit" value="Submit" /> </fieldset> </form> </body> text.html
Text Input: Server-Side JavaScript Code text.js var bodyParser = require('body-parser'); var express = require('express'); var lineReader = require('line-reader'); var name = 'text'; var html_file_name = name + '.html'; var response_name = name + '-response'; // Create the app. var app = express(); // Use the bodyParser() middleware for all routes. app.use(bodyParser()); Before running the server: npm install body-parser npm install line-reader text.html text-response
Text Input: JavaScript Code, cont’d // Read and send the HTML file. app.get('/' + html_file_name, function(req, res) { var html = ''; lineReader.eachLine(html_file_name, function(line, last) { html += line + '\n'; if (last) { res.send(html); return false; } else { return true; }); }); /text.html routes to here. Callback function! Callback function! Append the entire HTML file contents into string html with line feeds. After reading the last line, send the html string to the client. Return false to stop reading.
Text Input: JavaScript Code, cont’d // Process the form data and send a response. app.get('/' + response_name, function(req, res) { var firstName = req.param('firstName'); var lastName = req.param('lastName'); var html = 'Hello, ' + firstName + ' ' + lastName + '!'; res.send(html); } ); app.listen(8080); /text-response routes to here. Fetch the “get” form values. Send the dynamically generated HTML. The node.js web server listens to port 8080.
Checkbox Input: HTML Page <body> <form action="checkbox-response" method="post"> <fieldset> ... <p> <label>Any formatting?</label> <input type="checkbox" name="strong" value="strong" /> Strong! name="em" value="em" /> Emphasized! </p> </fieldset> </form> </body> checkbox.html
Checkbox Input: JavaScript Code ... var name = 'checkbox'; // Process the form data and send a response. app.post('/' + response_name, function(req, res) { var firstName = req.body.firstName; var lastName = req.body.lastName; var html = 'Hello, ' + firstName + ' ' + lastName + '!'; if (req.body.strong) { html = '<strong>' + html + '</strong>'; } if (req.body.em) html = '<em>' + html + '</em>'; res.send(html); } ); checkbox.js /checkbox-response routes to here. Fetch the “post” form values.
Radio Button Input: HTML Page <body> <form action="radio-response" method="post"> <fieldset> ... <p> <label>Direction></label> <input type="radio" name="direction" value="coming" checked /> Coming value="going" /> Going </p> </fieldset> </form> </body> Every radio button in the same group must have the same name (e.g., direction). radio.html
Radio Button Input: JavaScript Page ... var name = 'radio'; // Process the form data and send a response. app.post('/' + response_name, function(req, res) { var firstName = req.body.firstName; var lastName = req.body.lastName; var direction = req.body.direction; var html; if (direction === 'coming') { html = 'Hello'; } else if (direction === 'going') html = 'Good-bye'; else html = 'You are SO confused'; radio.js /radio-response routes to here.
Radio Button Input: JavaScript Page, cont’d html = html + ', ' + firstName + ' ' + lastName + '!'; if (req.body.strong) { html = '<strong>' + html + '</strong>'; } if (req.body.em) html = '<em>' + html + '</em>'; res.send(html); } );
Select List Input: HTML Page <body> <form action="select-response" method="post"> <fieldset> ... <p> <label>Language?</label> <select name="language"> <option value="english" selected>English</option> <option value="french">Français</option> <option value="german">Deutsch</option> </selct> </p> <input type="submit" value="Submit" /> </fieldset> </form> </body> select.html
Select List Input: JavaScript Code select.js ... var name = 'select'; // Process the form data and send a response. app.post('/' + response_name, function(req, res) { var firstName = req.body.firstName; var lastName = req.body.lastName; var direction = req.body.direction; var language = req.body.language; var error = 'You are SO confused'; var html; /select-response routes to here.
Select List Input: JavaScript Code, cont’d // Process language and direction. if (direction === "coming") { switch (language) { case "english": html = "Hello"; break; case "french": html = "Bonjour"; case "german": html = "Guten tag"; default: html = error; } }
Select List Input: JavaScript Code, cont’d else if (direction === "going") { switch (language) { case "english": html = "Good-bye"; break; case "french": html = "Au revoir"; case "german": html = "Auf wiedersehen"; default: html = error; } } else html = error;
Select List Input: JavaScript Code, cont’d html = html + ', ' + firstName + ' ' + lastName + '!'; if (req.body.strong) { html = '<strong>' + html + '</strong>'; } if (req.body.em) html = '<em>' + html + '</em>'; res.send(html); } );
Requirements Elicitation Requires communication between the developers and customers. Customer: users, clients, and stakeholders Client: who pays for your application Stakeholder: whoever else is interested in the success of your application (e.g., shareholders) Customers can validate the requirements. Create a contract between the customer and the developers.
Requirements Elicitation, cont’d Result: a Functional Specification written non-technically so that the customers can read and understand it.
Bridging the Gap Customers Software developers Have a general idea of what the system should do. Have little experience with software development. Are experts in their domain. Software developers May have little knowledge of the application domain. Have experience with software technology. Are geeks with poor social skills.
Functional Requirements What the system (the application) shall be able to do or allow users to do. The application shall use GPS to determine the user’s location. The application must default to the option most frequently chosen by the users. The application must allow the user to choose between a text display or a graphics display. The user shall be able to make an online withdrawal or deposit.
Functional Requirements, cont’d Describe the interactions between the system and its environment independent of its implementation.
Nonfunctional Requirements Usability, reliability, performance, supportability, etc. The application must respond to user input within 5 seconds. The application shall run on the Windows, Mac, and Linux platforms. The new GUI must resemble the old GUI. Error messages shall be displayed in English and Spanish. Constraints that the system must meet.
Requirements are Strong Statements Use strong declarative statements with “shall” and “must”. The application shall use GPS to determine the user’s location. The application must respond to user input within 5 seconds.
Requirements Must Be… Complete Consistent Clear Correct Are all system features and constraints described by requirements? Consistent No two requirements can contradict each other. Clear Each requirement must be unambiguous. Correct No errors in the requirements.
Requirements Must Be, cont’d Realistic Can the system be implemented? Verifiable Can the system be tested? Traceable Can each requirement be traced to an application function or constraint? Can each application function or constraint be traced to a requirement?
Requirements Must Be, cont’d Understandable Requirements must be written in non-technical jargon-free language that is meaningful to both the application’s developers and the application’s customers.
Reminder: By Wednesday, August 31 Form teams. Email me your team information. team name team members and email addresses Brainstorm about what web application you want to develop this semester.