INFO250 - Programming Languages

Announcements

(6/7) About avoiding HTML/JavaScript/style tag injections that can mess up your web pages: It's a good idea to protect against these going into the database using a function like PHP's strip_tags. But, since we may have let them into the database it would be OK to keep them from defacing a page by using PHP's htmlspecialchars function to replace HTML tags like < with their html codes. Here, it would be safe to loop through the SQL result set and make the substitution before extracting it, like this:

  while ($AMA = mysql_fetch_assoc($MAResults)) {
    foreach ($AMA as $key => $anAMA) {
    $AMA[$key] = htmlspecialchars($anAMA);
  }
  extract($AMA);

This has the side-effect of us being able to _see_ attempts to inject tags. Try it...

(6/5) Sample Exam Questions are posted. The exam will be mostly 'open resources', asking about language and other features from your projects.

(6/5) Beware the HTML Injection! The sample code for database programming for the web does OK to avoid SQL injecions. But, it doesn't protect against HTML, style, or JavaScript injections! They're easy to demonstrate. Protect your form from these annoying vulnerabilities...

(5/26) Dlv #4: !!! Make sure your session_name is appropriate for your site in: LogIn.php, LogOut.php, AllowLoggedIn.php and anywhere else it may be used !!!

There will be a scoring fest on next Wednesday using a form like this Dlv 4 Scoring Form. Each student scores three other students' sites on these criteria from a list available to logged in users at info250.us/tinstructor.

(5/25) Dlv #5 is described below, is due by the last day of classes for 15 points. An 'exam project' will be assigned soon, will count for half of the exam points. A comprehensive written exam will be given at the exam time, details to be posted soon.

(5/10) Heads Up: On the 22nd room 123 will be used for SOL exams and we'll meet in the cafeteria instead, so please bring your notebook computer. Ms Snagg will provide power strips for those who need them.

(4/26, 5/1) Errata: Please update your remote login script to include the name of your site in the post data sent to 2016Winter in an authentication request. It's shown at line 23 in the sample script SeSDoCLogin.php.

Make sure to change the session name from SeSDoC to something that identifies your site in your log in script, AllowLoggedIn, and anything else that uses the session. Session names cannot start with numbers and shouldn't have any spaces in them.

Add a 'Login Status' at the upper-right of each of the secured pages, similar to the example at info250.us/tinstructor. It should include a Log Out button.

Your 'link to reports' and other report pages need to be PHP or Python scripts so that they can require the AllowLoggedIn.php function to protect the pages.

Click Prior Announcements to see earlier announcements and assignments...

Class Meetings and Projects

Prior Class Meetings and Projects have been moved to INFO250 Timeline...

(2/3) Database and Database Programming for the Web

'LAMP' is prevalent in job listings, stands for Linux/Apache/MySQL/PHP. A couple of other popular Ps are the modern Python and the ancient Perl. The instructor can help with PHP and asks those with no prior experience at database programming for the web to use PHP. Anybody who has already had PHP is encouraged to use these next deliverables as their first assignment witb their new programming language.

After learning SQL, these exercises use some of HTML's features for communicating with a server via HTTP: GET data included in URLs, and POST data in HTML FORM elements.

• GET data usually follows a question mark in a URL, just after the domain, directory, and resource requested as 'variable=value' pairs separated by &.
• If the resource is a script written in PHP or any other server-side language, the GET data is exposed to the code via Linux's CGI-Common Gateway Interface. PHP uses the predefined, superglobal array $_GET as an interface to the CGI so that the value of a GET pair like 'WhichReport=ByRegion' shows up in a PHP script as $_GET['WhichReport'].
• GET data is commonly used for navigation. If a browser's back-arrow is clicked the GET data is included. It's easily messed with by users and must be thoroughly sanitized wherever it could be used to inject SQL or cause a site to break.
• POST data is held in HTML FORMs' input elements such as input, select, text, textarea. GET data is limited to relatively short strings. POST data can be quite large and can include text keyed into a form and multi-part form data such as jpgs or pngs uploaded to a website.
• The contents of an input element like '<input type="text" name="StreetAddress" />' would be found in $_POST['StreetAddress'] when the FORM is submitted to a script. An input element that allows multiple selections is returned as an array, where the name would be like FavoriteStates[]
• POST data is only marginally more difficult for a user/cracker to mess with and must also be sanitized so that crackers' probes are logged and handled gracefully.
• $_COOKIE is a super global used to interface with COOKIE data placed in a browser. PHP uses 'session cookies' to maintain the state of sessions if they are available, otherwise it can use GET data to hold the session id in a browser. $_SERVER holds the data transmitted with a GET or POST request that identifies the browser.
• $_REQUEST can be used when the source of the data may be from GET, POST, or COOKIE.

(2/3) Database and Database Programming →

(2/27) HTML Forms, Validation with JavaScript and PHP

SeSDoC, a subsidiary of SeSPoP located at info250.us/SeSDoC exists to help explain forms, checkboxes, JavaScript form validation, and PHP.

Form handling was key to the success of 'Web 2' way back in the mid-'90s when the WWW started getting content from web browsers, allowing web users to post 'active content', buy things on-line, and do many of the things on the web that we take for granted today. HTML 2 added form-based uploads, made COOKIE data more powerful, and strenthened the DOM-Document Object Model so that JavaScript could evolve as the standard browser-side scripting language. About the same time, semi-proprietary approaches to active content like Microsoft's Active-X and Adobe's Flash came on the scene and confused web development for years as CSS and JavaScript were less capable of jazzing up the user interface. XHTML attempted to tighten web standards and was instrumental in eliminating the 'cross browser' differences in rendering pages that had plagued web developers. Recently, 2014, HTML5 and CSS3 emerged as new and more capable standards with all the components for mobile-friendly, responsive websites and are replacing Active-X and Flash.

Here are some important concepts for HTML form handling:

• HTML FORMs: method, action, onSubmit.
• HTML Input elements: text, textarea, password, select & options, radio buttons, check boxes, submit buttons. Check boxes and multi-select options can return arrays to the server in POST data. HTML file elements handle upload of graphics and other files.
• JavaScript can examine elements in the DOM and block submit to the server if they aren't reasonable.
• HTTP Request objects allow JavaScript to submit queries to a server and get back responses 'in the background' without refreshing a whole page. These are the parts needed to do AJAX-Asynchronous JavaScript and XHTML.
• jQuery is a widely-accepted JavaScript library used by sites like Google, Facebook, and many others. It enhances form handling and other effects like 'fades', 'easing in', and 'live updates' of selections.
• PHP can pitch a blank form, edit GET and POST data received from the CGI when the form is submitted, and return form as user submitted it with any error messages.

Dlv #1: For 5 points, make the SeSDoC application work in your site, from a home page link that points to your confabulated organization's membership application. Next, noobs plan to modify the form, JavaScript, and PHP to suit your organizations. Advanced students, put the form up in your language for your organization and make it work at least as well as the SeSDoC form does, highlighting errors and returning the form with the inputs checked as the gentle user left them...

Dlv #2: For 15 points, modify the samples to collect membership applications for an organization that you confabulated. It must meet these finer specs:

• At first view, the user sees an empty form with input elements labelled and grouped within captioned fieldsets. The form demonstrates at least these input elements: text, textarea, checkboxes with multiple checks, radio buttons, and a select with multiple options.
• The form is constrained to a max width of 800px and centered in a browser and is responsive for easy use in either a browser or a mobile-phone.
• Make the form gather first and last names, and a mailing address with street, extra line, city, state, and zip. The other fieldsets for your form may resemble those at SeSDoC but should gather other data. All form elements and variables in HTML and PHP must be meaningfully named. Consider SeSDoC as a proprietary, trademarked, society so all of your components should be named appropriate for your confabulated organization.

• When the Submit button is clicked a JavaScript function validates the input, looking for all required fields to be filled in and requiring that buttons or checkboxes be selected. A form submitted with errors gets an alert with a list of error messages and is not submitted to the server.
• The PHP script that receives the form's POST data validates it, too.
• If there are errors in the form submitted by the user it is re-presented to the user with the errors flagged, preferably with large asterisks in a contrasting color, and all the original text, checked checkboxes, and selected options set as the user submitted them.
• If the form validates with no errors, the form is shown with the text and controls clicked as they were submitted and a note advising the user that the form appears valid but may be revised and re-submitted.
Remove
• Make a site with at least 3 pages, consistently styled with an external css, mobile-friendly and valid html and css. Make clear links to your SeSPoP database reports and the new form. (Was prior posted only in the announcements section...)

(3/25) Design Docs as Built

Due beginning of class the 7th for 15 Points. Please show progress and complete early, then add Authentication to your site...

• Detailed structured notation showing the algorithm for reading a text file with options for a field and adding multi-option selects, checkboxes, and radio buttons to an html form.
• Structure Chart or Class Diagram showing the overall design of your three+ page site as built in your home and web directories. (Use this as a time to clean up your site and give everything a meaningful name.)
• Use this exercise as an opportunity to clean up your multi-page site, ensure that all vestiges of SeSDoC are removed, get consistent navigation among the pages, and get ready to add authentication, protected content, and database update to your site...

Code Review

(4/17) Dlv #3 Authentication, Session Cookies and Server-side Sessions, Protected Content

Due 4/21 For 5 Points:

• Go online to info465.us/2016Winter, click Log In, and get thru the multi-step enrollment process for a new account at 2016 Winter. Use a fakey name, polite, that may is somehow similar to your name but not likely to be returned by google. Use an email address that will accept email from info465.us. These will be obfuscated after the enrollment. The userid and password at 2016Winter will be used to log into your individual sites for Dlv #3.
• Find /home/tinstructor/web/SeSDoCLogIn.php & SeSDoCForm.php, figure out how they work and sketch high-level structured notation that empahsizes views, variable names, structures, and operators. Clearly show: how a URI with GET data is used with a socket is used for authentication at 2016 Winter; how the 3 Strikes rule is enforced by in the Log In; what happens to SESSION data at Log In and Log Out; when and how a record is inserted into or updated in the database; use of header and Location to redirect

Due 5/1 For 15 Points:

Modify your site at info250.us to work similar as the examples at info250.us/tinstructor or Eastern Box Turtle Association at 2016 Summer Shops, using data gathered on your application form.

Your pages with the membership application form, member list, report selection page, and reports must be 'protected' so they are only available to users authenticated at 2016Winter. Please make sure the pages are protected before modifying your 'Form.php' script to update the database. Attempts to access protected pages should lead nowhere, the home page, or somewhere else without any inputs.

The specs for the behavior of the form are the same as Project #1. In another attempt to get better-looking webwork for these final projects, please meet all these requirements: (Bullets added to prior wall of text 5/4)

• All input elements should be returned with text, checks, and selections the same as the user entered.
• Error messages should be appropriate and have red asterisks.
• Make sure all variables, input elements, and scripts are meaningfully named. Remove/replace all references to SeSPoP and SeSDoC.
• The user should be able to re-submit a form if they notice an error.
• Make labels on forms all the same width so labels and input fields are aligned, as in the samples at tinstructor.
• The report selection page must clearly, neatly displayed without much extra text, as in the samples.
• Check boxes and radio buttons must be displayed across the form where there is room, as in the samples.
• Format PHP and HTML perfectly to highlight the structure of the script or web page.
• Content areas should not spread across a wide-open browser, should be constrained in a centered container 800 or 960px wide.
• The intent here is that points are earned for professional results, not sloppy work...

The sample scripts are available from the command line in /home/tinstructor/web. SeSDoCForm.php differs from the earlier version: It has a function UpdateMemberApp() that inserts a new or updates an existing record in your table; and, the code that supports the View == 'Submit Form' has been tweaked to 1) call UpdateMemberApp if a valid form has been submitted and 2) put MAId in a hidden input.

Please take care not to destroy your working website as you add code to support authentication and database update! Make local backup copies so it's easy to revert to working code if you hose up the script while adding database update...

Dlv #4: Database Create, Edit Insert/Update Records

Due 3/29 for 5 Points: Make a database that fits your application form using an SQL script. Insert a couple of records using the command line. Note: Multi-selects are stored pipe-delimited in text fields.

The user id for your individual MySQL/MariaDB database is the same as your id at info465.us and passwords are the upper-case 1st letter from your first name and the last 4 lower-case letters from your last name. Rowdy Chihuahua's connect string would be: mysql -urchihuahua -pRahua rchihuahua

Notes about SQL scripting at the command line are at SQL Scripting and were demo'd in class. Do write a script, don't key the definition into the clumbsy mysql/mariadb command line or you can't save it, tweak it, reuse it...

Debugging SQL is easy with most of the sample scripts, which blab the invalid SQLStmt to help debugging but would inform some cracker about the names and structure of the database! Copy the SQLStmt, only what's inside the leading a trailing apostrophe, paste it into a waiting MariaDB command line, add a semi-colon, a reap a terse error message that's usually very useful for finding the error...

This project has been kicked down the road for weeks to become a 20 pointer mercilessly scored on its presentation with reference to all prior-stated specs, errata, or advice in class. Please make your project comply in all regards for max points!

(5/25) Dlv #5: Upload and Edit Nbrs file, Calc Central Tendency & Histogram

Use FileZilla, or Mac users can use scp, to copy the files with .nbrs extension from /home/tinstructor/Nbrs to your desktop or documents directory to be uploaded as you exercise Central Tendency Stats in the next step, and later to test your stats. They're the same files that were available for CLI exercises near the beginning of the course...

Dlv #5 is to recycle code from the earlier CLI project that displays stats for central tendency and draws a histogram in a terminal window. The CLI code can be mashed into the sample provided at /home/tinstructor/web/SeSDoCStats.php to make a histogram like This Example.

Your Dlv #5 should behave at least as well as the dialog for Upload a File for Analysis under Central Tendency Stats at GSX's Menu, available to those with credentials at 2016Winter. Please note: The code at /home/gsx/web is not available to copy for this exercise, but the site is available for reference.

SeSDoCStats.php is available for copying at /home/tinstructor/web. It's got syntax and logic for making a form to upload a file, sanitize it, move it to a file on the server, edit and count the numeric records, accumulate the sum, and calculate the mean for the numbers in the file. Dlv #5 is to add median, mode, standard deviation, and a histogram to the report...

'About SeSDoCStats.php' under Central Tendency Stats SeSDoCStats.php is available to those authenticating through 2016Winter. It has some discussion of the project and suggests solutions.

The intent here is that each student works independently to assemble their own project by combining their earlier CLI stats code with the sample code at /home/tinstructor/web, and that no student will copy any other student's files in any degree of completion.

Suggested:

• Check out the script /home/tinstructor/web/SeSDoCStats.php and discussion about it at About SeSDoCStats.php. PHP's super-global variable $_FILES[][] is loaded with a file or files from HTML <input type="file" elements. Figure out how the Views that are provided work: First, Upload File, and Calc Stats. Plan to beef up Calc Stats to make a histogram and supporting stats.
• Add a directory named UploadNbrs in your home directory and change its permissions to 777 so it will be available for apache to move uploaded nbrs files to it. It also makes the data available for anybody else, so 777 is a _negative_ example of an unsafe practice for most applications.
• Copy /home/tinstructor/SeSDoCStats.php to your web directory;
• Change the name and template to suit your site;
• Add a link to your menu; test and debug it.
• When it's working, set to adapting your CLI stats script to work on the web. Suggested steps are at About SeSDoCStats, linked above...

Retrospective:

We've done a lot: Topics and Deliverables.

Stuff from the past, may be reused...