G Saunders' Home Page

INFO465 - Senior Projects in IS - Summer 2019

Notes:

(8/9 Mid-Morning) Final Grades are posted for your review, will be posted to eServices Friday afternoon. Please let me know any errors or omissions you may see.

My eyes are clear enough this morning that I coould leave the meds out and see your docs just fine, and the act didn't blind me, only fuzzed up a bit, will get the meds on them and stop looking at stuff on paper. The doc's new prescriptions seem to be working. Thanks to those who've wished me well. I hope this is the last of this recent spate of blindness, that will leave me only lame...

(8/5) I learned this morning that grades aren't due tomorrow, Tuesday, so there's no crunch needed and I have let my eyes rest, where grading stuff unavoidably stresses them and must be rationed. I expect to be back to grading later this evening and more tomorrow. Team points are all that's left to grade for 465, docs and PAYGO Fees...

(8/4 Early Evening) Points have been updated to include all the individual projects and early team projects. The last two team projects will be graded next with advice from Rowdy Chihuahua about PAYGO fees netted from this summer's hustle and how team members participated. I picked up the few projects slid under my office door. I might not see any Fs, but there are certainly a couple of Ds, lots of As, Bs...

(8/3) Commission points were be scored from this: Commissions at the Deadline. It takes a little bit of doing to earn commissions from 2017Winter partners and I'm delighted to post points for all who did it.

(8/3) I'm delighted to see so many 7.5+ SQL Quizzes! I've seen wildly original queries and lots of others where a sample query has been dug out and tweaked for this semester's result. The net out of Umbrella fees, which I'd added as a very simple query, was nowhere in the samples, and it was the most-missed query, accounts for almost all of the 3 out of 4 scores...

(8/1) I was asked how I check Dlv #2. This is what I usually do. If yours wouldn't get many points tonight go fix it and I'll check them starting Saturday afternoon...

After authenticating I'll run the referrals report and if nothing's there will look for whatever may have been done with the form. There should be a couple of applicants there. All of the pages accessed need the LoginAdvice right-justified at the upper-right corner of the window. If there's a form I'll scan it to see that it has all the controls in the specs. Then, the Submit button will be clicked on the empty form to see if the JavaScript works. If it does, I'll make selections among the radio buttons and check boxes, leaving the top of the form empty, expecting to see a list of appropriate error messages and all the radio buttons, check boxes, and selects set as the user left them. Then, I'll fill in and submit the form and go look for it in the report.

(8/1) I've been distressed at the lack of questions and requests for early critique of Project #4, and the time for it is rushing past. As mentioned in class Tuesday, I cannot handle 11th hour tech support and don't try. It's time for me to grade everything I see. For people still working at the individual projects, I'll answer questions in email through Saturday mid-day, then set to grading...

A good question came in email from a team working at Project #4 near the 11th hour, and answered it simlar to this:

The Use Case diagram for a app like 2017Winter reflects the menus an actor get, so an arrow for each actor points to an oval with the headers for their menu choices in it.

If you arrange the actors from hi to low in authority you can draw a line that inherits from lower to higher. Everybody can log in, a logged in user can access their account menu, fulfillment can do all that plus fulfill orders, managers can do..., Site Managers can do...

A class diagram should reflect the software, so any block you draw in that is labelled with the name of a script in /home/2017Winter or /home/2017Winter/Web. They're easy to see since they're in the URL at the top of the browser. The assignment asks for enough to explain the order entry, fulfillment, and accounting. SiteSettings, LogIn.php, Controller.php, AccountOwner.php, AccountManager.php, and and eight or ten other scripts are important.

As related in class and on the class' page, none of the sample sketches provided are accurate for 2017Winter, so merely copying the samples won't get many points. Get your stuff for Project #4 from the system, the project is to make diagrams that are accurate for 2017Winter...

(7/31) The Commissions on Web Shop Referrals report was showing no commissions for the few sales that earned them. And it was falsely showing commissions for details that were not fulfilled. It was corrected when questioned in email a little while ago, as Rowdy Chihuahua was settling PAYGO fees.

(7/30) Mr Al-Khori and others seeking points for Commissions: The report 'Commissions on Web Shop Referrals' from Your Account menu at 2017Winter has been updated to show Details for this semester's commissions, most recent first. Full credit will only be posted for those who sell the correct item to the correct customer and show their real or fictitious name at 2017Winter in the Commission To column.

Take care as you're setting up your items for commission that you've accurately customized the feature before clicking the buy me button. ItemId should be an item in your team's shop and match the item the customer clicks. CommissionTo is your AcctId at 2017Winter. Log in as one of your fake customers with an Eland credit card so it's easy to complete the sale...

(7/24) Teams, make Project #4 something that you'd like to show to an interviewer when they ask you what you did for your Senior Project! Make it detailed and descriptive, be able to talk about what the 2017Winter app is, how it does the accounting, how it nets out fees and pays commissions, how it handles sessions, and how much you enjoyed working on it. Few get hired without some artifacts that show what they can do, preferably in a portfolio of your stuff you can carry around and in your github account. Nobody gets hired who complains that their senior projects instructor was an idiot and they didn't learn anything.

(7/23) Thanks to those working on Dlv #2 and Project #2 who have reminded me the kinds of problems I see from those working behind and trying to catch up...

I will not call a project complete that does not have MEANINGFUL NAMES for variables, objects, and HTML input elemnts! For example, it is 100% wrong to take a control named SEStatesVisited and use it to select flavors for ice cream without changing the names of the files, input elements, and variables in your app.

These scripts use extract() on $_POST to make the variables for input elements on the form, so any spelling errors and misnamed inputs will result in warnings or errors about undeclared variables. I won't even try to debug past the first improperly named element.

TAIL THE LOG TO DEBUG PHP AND HTML!!! I'll no longer be polite when somebody asks what's wrong and they're not TAILING THE LOG!!!! We wasted 20 minutes last night trying to solve a problem for one student who said there were no errors in the log and I didn't check. Errors in logic that don't put errors in the log are difficult to debug, so I tried without success. When I insisted on TAILING THE LOG THE ERROR WAS OBVIOUS WITHIN SECONDS!

KEEP THE TAIL OF THE LOG VISIBLE WHILE YOU WORK!!!!!!!! I posted a screen shot that shows terminal windows open with the TAIL OF THE LOG ALWAYS VISIBLE AT THE LEFT. Please do it that way.

Debug JavaScript using Chrome or FireFox and their Developer Tools' Web Console! You'll need to edit the JavaScript to get your form and input elements named correctly.

Make sure the session_name() is the same in all your scripts! SiteSettings.php in your home directory and SeSDoCLogIn.php in your web directory are the only two places it's set in the sample code. LogIn.php sets up the session after it authenticates a user and SiteSettings.php is required at the top of every script that uses the session. If you're getting an error that $UserId is not defined it's likely because the session_names are inconsistent. You'll need to close and reopen your broswer to clear this error.

(7/16) The SQL Quiz was announced as 7/23 in class but I've pushed it back to the 25th to allow time for a demo in class and time to look at joins and other SQL basics.

Teams should be working together as application analysts to figure out the the status of Orders and Details from purchases made by the fictitious customers assigned in class through fulfillment and netting out Umbrella fees. Teams should be able to write the SQL for any of the management reports in All Trial Balances for ledger and QOH...

Rowdy Chihuahua reports that few teams have read and done the steps in 'Teams Setup Shops'! Job 1 for Project #4 is to document how 2017Winter works and it can't be done without working it. Please check out All Trial Balances and make your team's trial balance good-looking, including umbrella fees paid &c...

(7/9) Dates have been relaxed for Project #1 deliverables, check below. There are a lot of students this summer without unix command line expertise so I'm happy to give time for tech support.

(7/9) We'll look at Project #1 Dlv #2 and Project #2 in class on the 11th.

Several students have made Dlv #2 work as it is at SeSDoC and are asking about rebranding and customizing the form. Advice is to always tail the log when working with server-side code -- always keep another terminal open that's tailing ssl_error_log...

(6/27, updated 7/9) Due Dates for Individual Projects #1 & 2:

Most students deny any prior instruction in 'database programming' so this is an intro for most students. The 'referral form' at SeSPoP-Southeastern Society for the Preservation of Preservation has links in the nav bar to introductory stuff about database programming for the web with PHP and MySQL and a detailed discussion of the sample code. It's affiliated organization SeSDoC-Southeastern Society for the Demonstration of Checkboxes has sample code that will lead to a good project #2. The 'About the Form' link on the SeSDoC home page has detailed notes about the sample code...

SeSDoC shows technique for making checkboxes and radio buttons from lists of values in a 'flat file',for editing data on forms. Please include this feature in your project, which should demonstrate text input, textarea, multi-selections from long lists, radio buttons, and check boxes with multi-checks. Having a standards-compliant form that works in your portfolio can be very valuable at an interview...

Demonstrate your mastery of the command line and the vi editor as you work. Info465.us logs all activity so a good-looking log is a good way to demonstrate mastery. If you want to demonstrate mastery early and use other tools that may be arranged. Otherwise, use vi to edit all html, css, and php code. Use the command line to navigate. Use an sftp client only for moving graphics or css framework into place, then edit text files with vi. I regularly hear from students who were distressed that an employer or internship opportunity was lost because they had no skill at the command line.

Project #1 is to develop a standards-compliant web form and place it as a 'referral form' for your ficitious individual hustle, more or less allied with your team's partner organization. Items placed on the site's home page will be sold for a big commission at Project #3. We stop short of actually updating a database because it would be unwise to put forms up that update a database without authentication and authorization. Your form should work as well as the one at SeSDoC or SeSPoP, should make a preliminary edit with JavaScript and a server-side edit in PHP and always return the form with all the controls set the way the user left them.

Project #2 is to authenticate users using their 2017Winter credentials and allow them to enter referral forms and save them in your database. It's important to name all the form's input elements exactly the same as the columns in the table. The sample code from Dlv #2 can easily be modified for authentication and database update if Dlv #2 is done with a database in mind.

(6/24) The SQL quiz will be July 11th. Sample quizzes, one with answers and the other without, have been placed in your home directory. The quiz will be 1:15 in class, will ask you to edit a file like the sample quiz without answers using the vi editor. It's suggested to open two terminal sessions, run mysql in one to work out your queries and edit the quiz in the other. The mysql command line editor isn't good for working through longer queries so another terminal session running vi or a text editor open on the desktop may be helpful. Please work early and get questions answered before the quiz. Most quiz queries require joins and some of them may require two or more joins, some using 'as' to cast multiple joins to the same table, to get the results...

(6/13) Please log into your account at info465.us using the credentials on the label handed out in class. Skills at the unix/linux command line and with the vi/vim editor are of the essence for this course. Activity at 2017Winter and info465.us is logged and will be used when scoring team and individual projects. The best way to get these points is to work at the command line, use vim to edit all components of the individual projects, and never copy any stuff from Windows or Mac editors to the server...

info465.us has been set up for the summer, will be used to score individual projects. After teams set up shops and get accounting done we'll start on Individual Project #1, working server side with HTML, CSS, SQL, and PHP...

(6/13) The first team deliverables are due the 20th. Teams should be able to do the first bullets under Please Provide on Paper: organization name, products, manager and crew. The last bullet asks for memoranda, journals, and good-looking trial balance according to GAAP. This will be demo'd on the board Tuesday, don't miss it...

The Analysis of the Get an Account Process is also due on Thursday in the form of a UML state transition or sequence diagram.

The instructor observes that only a few students have any idea what SQL is or how to use a command line to examine a database and expects that will be remedied soon...

Stale notes will be moved to Prior Notes when there are some...

Class Meetings:

Most specs and advice are given in class, verbally, some are here...

Demo OE, Fulfillment, and ACH at 2017Winter

This is a quick demo of the fake PAYGO 2017Winter that will be used in several exercises and projects this semester...

Teams Setup Shops:

Assignment: Teams of three or four confabulate a shop to operate under the umbrella of 2017 Winter. Get graphics together that meet the specs for transparency or equal size for at least three products or services...

Here are Notes about Setting up a PAYGO partnership at 2017Winter.

Demo: A sample accounting for startup and a day of operations for a ficitious hussle similar to the case studies teams are confabulating. This is to introduce or review double-entry accounting concepts: Numbered Ledger Accounts: 1-Assets, 2-Liabilities, 3-Equity, 4-Income, 5-Expenses; Assets and Expenses are increased by Debits; Liabilities, Equity, and Income are increased by Credits; Docs: Memoranda aka Orders & Details, Journals, Ledger; Debits equal Credits on Orders, each Journal, and the Ledger Trial Balance. If we get the correct ledger codes on Details a manager approves the rest of the accounting can easily be automated...

Each team please provide on paper for Rowdy Chihuahua's attention:

After a demo of the PAYGO Unbrella 2017 Winter accounts will be set up.

Accounting:

Team Assignment - Analysis of the Get an Account Process

Get organized in teams of three or four and each get an account at 2017Winter. Please, do it _one at a time_ and pay careful attention to the process. And, strive to NOT CREATE DUPLICATE Accounts!

As each team member gets their new Account use the database to track AcctStatus, AcctStatusDT, AcctStatusById during the enrollment of a new Account. Each team, draw a state transition diagram and notes about how the process may be improved. The customer asked to gather contact data and have the new Account holder verify email address before a manager's approval for the next steps and assignment of Roles. There have been reports of 'problems' in registration.

You'll need to use a real email address so you can get the approval code. It looks like your @vcu.edu or @mymail.vcu.edu account will work, mail may go into the spam folder, but it needs to be tested for the new semester. Email addresses will be scrubbed at the end of the semester and aren't displayed anywhere except in your Account record and to students who can use SQL. If you don't want to use one of your email addresses, you can use yourid@info465.us and use 'mail' at the command line to get the approval code.

You're welcome to use a fictitious name, an anagram of your real name is helpful, to avoid your name showing up in a google search. Use a fake address and phone number.

2017Winter Database

Projects and a quiz use the database at 2017Winter. Please gain familiarity with it. Here's a connection string with select authority that will work from the command line at info465.us:

mysql -u2017Winter -pWinter2018 2017Winter

Use W3School's SQL Tute for an introduction to SQL. The database server at info465.us is MariaDB which at this point is a direct drop-in replacement for MySQL which most Linux distros avoid because it's Oracle's property...

Here are sample quiz questions: SQL Samples. Here are sample quiz questions with answers: SQL Questions & Answers.

Here is a sketched Database ERD of a database similar to 2017Winter showing the tables that have to do with accounting. Table names and PK/FK relationships are accurate, some column names are not quite. Use SQL's DESCRIBE command to get the exact column names at 2017Winter.

ERD

Here's a sketch of the whole database and file system for a system similar to 2017Winter. Tables with dashed lines around them might show up in some other season to help with distribution functions.

ERD

The Rest of the Page is being Re-organized...

Working Server Side

Click Logging in and working at info465.us for references about working at the command line at info465.us. User ids and passwords were shown in class, expecting that the first command on-line will be passwd...

Mobile First, Responsive HTML5 and CSS3 Forms

Demo'd SeSDoC forms: Mobile first, responsive, valid html5 and css.

These links were visited and examined in class. They are all dead-simple HTML and CSS, just enough to clearly demonstrate semantic markup of content and forms.

Project #1: Learn Linux, vi, and make sample code work in your web directory

This 20-point project is to put up a demo site that gets all the specs below and will launch from your link at info465.us.

Dlv #1 is 5 points: demo a valid, mobile friendly, responsive site that launches from your link at info465.us, identifies your fictitious organization and shows off three items for sale. Get your SiteThumb image or animation in place and set the name of your fictitious hussle into your settings. Use similarly-sized product images with transparent backgrounds, or use identically sized product images. Size images no larger than the largest they'll be displayed on the page, no distortion or pixelation.

It's valuable to be able to pick up code and modify it for the purpose at hand, so Copying/tweaking class samples is fine but it shouldn't look exactly like the samples when the project is delivered.

Learning a framework or using it again is better. BootStrap, W3CSS or other frameworks make good additions to a portfolio and are the easiest way to get a working, mobile-first, responsive website together. The class' coding samples are easy to stick into most any template, so when we get into server-side scripting the sample code will be easy to adapt into a framework...

Dlv #2 is 15 points: add an application form to demo JavaScript and PHP.

The project is to explore a linux web server, develop proficiency with the command line environment and the vi editor, learn or practice debugging, and demo mobile-friendly, responsive features of HTML5 and CSS3. Sample code is provided in PHP and JavaScript to present a standards-compliant, mobile-friendly html form and validate it browser-side with JavaScript and also server-side with PHP. If you're using the sample code, please plan to customize it as you go along so the end result doesn't look much like the samples. 5 bonus points will be posted for students who abandon the instructor's samples and get all the specs with other stuff.

If you've already done responsive HTML/CSS 'from scratch' this might be a good time to learn a CSS or CSS/JavaScript framework! The PHP examples deliver forms and content by replacing strings in an html template so they are easily adaptable to a template done up with Bootstrap, Foundation, or an even heavier CSS/JavaScript framework.

Gain familiarity with the Linux command line at info465.us and use it to copy text files, scripts, css, and html from /home/SeSDoC and /home/SeSDoC/web or your framework to your home directory and web directory and tweak them into webpage that shows up from your link at info465.us.

Next, study the features of HTML5, CSS3, PHP and JavaScript in the sample code for semantic markup, responsive web design, and form handling. The SeSPoP and SeSDoC pages have links to Tutes for all these topics.

Decide whether you'll adapt the sample code at SeSDoC or Resp for your project, or start from scratch, or use a lightweight CSS framework like W3Schools RWD tute, W3CSS, Bootstrap, or something heavier with more pizzazz. Exploring AJAX and jQuery are also worthwhile while you've got a server at your fingertips if web designer is something you'd like to be.

The sample code at SeSDoC uses 'html templates' and is very easy to fit SeSDoCForm.php and other reports into an html template made from a css3 framework like W3CSS, Skeleton, BootStrap...

Make the html and css suit the fictitious organization, business, or hustle you confabulate for your case study. The index page will become a store-front that earns commissions on sales of at least three products or services. Choose a thumbnail image to represent your site at info465.us and make the site comply with the SiteThumb spec (at the bottom of the Thumbnail page at info465.us) so your site appears in the gallery at info465.us. Transparent backgrounds are attractive, animated gifs of a few dozen frames are fun to see.

Specs for Project #1 Dlv #2:

If you're working from the samples provided, consider the acronymns SeSDoC and SeSPoP as the property of these ficititious organizations and they should not appear in the file or variable names involved in your website. The info465.us enforces these and other specs.

All form elements, variables, and objects should share the same meaningful name, consistently applied so that columns in the database, names and ids of html form elements, file names, and variable names in JavaScript and php code, are all named the same.

No embedded or in-line Styles! This is what 'separate style from content' means! All CSS must be 'external', in a local file linked in the head of the document! If there is an exception, add a style for it in the external style sheet. If there is some reason you must embed or use in-line styles to achieve some effect, please discuss it with the instructor.

All pages must be consistently styled with the same or similar external css3.

If a semantic element exists, use it. Do not use plain divs with ids or classes named like header, footer, menu, aside, or any other CSS3 semantic selector. Don't use frames or iframes, named or otherwise. Make your page a very clear demo of the best markup for semantics and style!

Use CSS3's semantic elements for page layout to best advantage: As a minimum, structure your page layout using: header, main, aside, and footer.

Use CSS3's semantic elements to mark up content: p, h1-6, ul, ol, li, strong, and em, table, td, tr...

Use CSS3's form elements to mark up forms: fieldset, legend, and label.

The elements in the sample form at SeSDoC define an html form in a standards-compliant way so that is usable in a mobile device without any stretching or tapping and is also accessible for handicapped persons and search engines.

Use a grid scheme for responsive design. The samples use the '12 grid' scheme from W3School's RWD tute with Row and Col defined in CSS, amenable to folding for tablets and phones. This also appears in W3CSS and the equivalent is in BootStrap and Skeleton.

Optionally, semantic elements article and section may be used to organize featured products or items, newsletters, blogs, and other complex web documents. Styling an article is a good way to implement material web design features like cards.

Wildcard classes of CSS3 make it easy to adapt a multi-Column grid system to any kind of device by being clever with object names like 'Col-' or 'Card' to adapt seamlessly with any sized viewport. W3Schools RWD and W3CSS show how to use these wildcard features. These features are well used in most CSS3 Frameworks!

CSS styles make it easy to make accordion or drop-down interfaces for the user, or change from a hamburger to a menu when the window gets big enough. Many CSS3 transitions are now supported by current versions of all common browsers and most vendor-specific styles may be retired. There's a lot of value in learning how to do these with native jQuery or one of the frameworks that uses jQuery -- these are the slickest and doing them the way Google does it is a good thing!

Serve all graphics, fonts, libraries, frameworks, and styles directly from your web directory at info465.us and be ready to report on their bulk. Quick loading speed on a slow network is of the essence. Google guidelines favor lightweight pages that load fast even on a 3G network. Limit the size of graphics for products on the home page to something less than half a megabyte. Size all images for their max dimension as used on your site. (If it's 300px wide on the page don't link to an image that is 2000px wide in the img tag, and don't use dimensions in css or html to make large images fit.) Use a photo-editor on your desktop or online to size images. Make sure all re-sizing results in sharp images and doesn't result in unsightly artifacts...

Set the permissions for your web and any of its sub-directories to 705. Set the permissions for all files in your home and web directories to 604. The intent here is that the web server can read these files but others in the info465 group can't.

Specs for The Form in Dlv #2

Project #1's 1st deliverable was a single page, mobile-friendly at google and valid at w3c, website for some fictitious shop or organization allied under 2016Winter's umbrella.

The 2nd deliverable is a two-page site that launches from the link at info465.us, showcases at least three products on the home page, and has a form on the second page that has been customized to suit membership or other relationship with your ficititious organization. All css is external, html5 and css3 validates at W3C validators, and all pages score Awesome on Google's mobile friendly test.

Project #2 will be to add user authentication and update the database using the form built in Project #1 Dlv #2.

The PHP or Python-generated form must work at least as well as the sample code provided at SeSDoC, meeting these finer specs:

Open Lab

Tech support for learning the command line and vi and Project #1, Dlv #2...

Things not looking right in the browser? Maybe getting an empty page back or missing an img? Tailing the log might help: Open a new ssh window and log in to info465.us. Use this to show the tail of the log and follow it, replacing 'yourlogin' with your login id at info465.us.

tail -f /var/log/httpd/ssl_error_log | grep yourlogin 

This will show errors produced by html or scripts from your directory when you load or refresh a page so keep it visible while you work. Use ctrl-c to stop tailing the log.

Please use the references! There's a month's time to get up to speed with mobile-first, responsive design with css3, html, form elements, JavaScript, and PHP... Validate early and validate often! W3Schools, Google, and Mozilla are all excellent references, have been revamped to cover mobile-first, responsive design. Consider W3Schools as introductory stuff, followed by Google's authoritative guidelines, and Mozilla's very detailed docs. The CSS Zen Garden is worth a stroll...

Some hints on debugging:

In short:

If you're programming without the developer and debugging tools running, you're just guessing and frustrating yourself and ticking off the intructor in lab, and will likely inject numerous errors in the code while blindly trying stuff.

Keep the debuggers visible at all times even if everything appears OK since they may be showing warnings that detract from a professional result.

Here is a screenshot suggesting a juxtaposition of putty or Mac terminals and a browser while debugging. A quick mouse-click or Alt-Tab moves among browser and code windows. The tail of the log is always visible so it's easy to see it jump if/when there is an error in a script...

Screenshot

Click Debugging PHP and MySQL for videos...

Developer's Tools vary a lot from browser to browser! Some even takes lotsa seconds to load and cause the fans to come on just to show all the charts and graphs! The instructor usually debugs with FireFox Developer Tools, W3C, and Google, then Chrome on an Android, then Safari on a tablet, then with FireFox Developer Tools, then Chrome on a notebook, then Edge. Make sure you know how to refresh components in whatever Developer's Tools you use since many ISPs cache static content and don't recognize file changes on the server! Firefox and Chrome's source views flag some HTML and CSS errors, are quicker than the W3C Validators. FireFox and Chrome both allow Ctrl-u to get to source code, others substitute their own overblown developer's tools.

Tail The Error Log!

Keep the tail of the error log visible at all times as you code! If you're getting an empty page back or unexpected results from a PHP script, or missing an image /var/log/httpd/ssl_error_log will likely show the error.

Open a new ssh window and log in to info465.us. Use a command like this to show the tail of the log and follow it, replacing 'yourlogin' with your login id at info465.us.

tail -f /var/log/httpd/ssl_error_log | grep yourlogin 

This will show errors produced by html or by PHP or other web scripting languages from your directory when you load or refresh a page so keep it visible while you work.

Use ctrl-c to stop tailing the log.

If you haven't been tailing the log and wonder about recent errors, you can grep them out of the error log like this, replacing yourlogin with your login id:

grep yourlogin /var/log/httpd/ssl_error_log

If there are no errors in httpd/ssl_error_log but the script isn't producing the correct web page, place echo statements followed by exit at strategic points in the PHP code so you can _see_ what's going on before the HTML is pitched.

Something like this might be helpful:

echo $View; exit;
Or, use print_r to show superglobals or arrays:
print_r($_POST,false); exit;
at the top of a script would show the POST data submitted from an HTML form to remove any doubts what's in the POST data...

Debugging JavaScript: From FireFox or Chrome's Menu at the right of the title/search bar, choose More Tools → Developer Tools and figure out how to use it from any of several on-line resources.

To get a quick look at errors from JavaScript use the Console tab with Preserve Log set to capture errors from statements in <script, onClick, and other HTML elements. Position the console so you can see the error messages as the page loads and events are triggered. Double-click on an error to be jerked to the errant line of code.

Use the W3C HTML and CSS validators early and often and don't continue debugging until they are valid. Design for mobile first with viewport set, then tweak @media queries for larger displays. Use Google's mobile friendly test, try W3C mobile validator for more of a challenge.

Team Project: UML State Chart

Use info465.us/2017Winter's Log In or Get An Account dialog, at the upper right where 'Web 2' says it should be, for each team member. Do it one at a time while Rowdy Chihuahua or Rhue Pinscher are available to authorize accounts. Watch the process carefully so the team can get an accurate state transition diagram together for the project's deliverable.

If anything's unclear in the process or some non-fluency is discovered please document it so we can get it to the attention of the developers next time we can catch them.

Errata: info465.us is not set up to get email to you @vcu.edu, but works almost everywhere else. Using a gmail or other email account where you can click on a link to validate your email is easiest. If you don't want to use a real email address, use your userid@info465.us and the command line's mail to read the email validation code.

The 2017Winter database is available so you can closely track the value of AcctStatus to get the state chart accurate. A select-only connection string is:
mysql -u2017Winter -pWinter2018 2017Winter

PHP code is available read-only in /home/2017Winter/Web.

Project #2 Assigned - Authenticate Users, Establish a Secure Session, Menu, Update Database, Report...

Demo in class showed PHP's session_name, session_start, session_destroy and also looked at a session cookie under the i-spot in the browser and session data kept in /var/lib/php/session on the server. LogIn.php authenticates via web-service at 2016Winter by opening a pipe to handle a request with userid and password and response with not-valid or user's name. LogOut.php uses session_destroy to clear all the data from the session on the server. Every 'protected' php script requires SiteSettings.php which blocks access to pages if a browser's not logged in and redirects the browser to LogIn.php or index.html. Find these features in the code and be prepared to explain them.

Modify your site at info465.us to work similar as the example at info465.us/tinstructor, making a link like 'Members' prominent on your existing page. The project is to make your site authenticate users with 2016Winter credentials and provide forms and content to logged-in users only. If somebody tries to access a 'protected' url, they should be directed to the LogIn script for authentication, then to the url they attempted to reach.

The specs for the behavior of the form are the same as Project #1, all input elements should be returned with text, checks, and selections the same as the user entered. And the user should be able to re-submit a form if they notice an error. The specs for Project #1 were intended to make a form that can easily be secured and used to update a database.

The sample scripts are available from the command line in /home/tinstructor/ and /home/tinstructor/web/.

/home/tinstructor/SiteSettingsSample.php is available to copy and modify to suit your Site. Leave the functions intact. Edit at the top and bottom to supply _your_ SessionName and database credentials. Take care not to clobber your existing SiteSettings.php when fitting the new script in your account.

Copy these scripts to your web directory: TemplateSeSDoCForm.html, SeSDoCLogIn.php, SeSDoCController.php, SeSDoCLogOut.php, and SeSDoCApplicants.php. SeSDoCCommissions.php is not available to copy. After you've made them run, edit them to suit your site and database.

SeSDoCForm.php differs from the earlier example. Don't copy it over your existing form's script. Copy the changed parts to your script:

Here's a class diagram of a project similar to your Project #2:

MVC Thumbnail

Notes about SQL scripting at the command line are at MySQL/MariaDB Scripting and were demo'd in class.

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

Please take care not to destroy your working php script as you add code to support 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. HTML form handling, securing web pages, and updating a database in a structured environment are inherently complex tasks. Make sure you're keeping copies of your working scripts before each session so you've got something recent to roll back to.

Code Review

Structured Notation Page 1   Structured Notation Page 2  

Structured Notation Page 3   Structured Notation Page 4  

Project #3 - Earn and report commissions

This is 10 points for individual effort and 10 points for teams. Teams setup Items in their shop at 2016Winter to be sold under the PAYGO commission agreement by each of the associates. This is demonstrated in the 'Click to Buy' links for Pacioli's books at info465.us/tinstructor.

Each student's shop at 2016 Fall has a link added to report commissions earned on the three items offered.

Teams contrive several purchases at their shops and the shops of other teams using the fake accounts with credit acconts issued by an ELand ACH.

Shops need a good-looking trial balance put together with at least a dozen orders and journals showing startup and a couple day's operations. QOH for items in the store should be reasonable to support on-line sales.

Project #4 - Document 2016 Winter

Teams thoroughly document the 2016 Winter PAYGO Umbrella's system as built. Team members note which portions they authored, and all team members should be involved enough with the project so they can claim it as an exhibit in their professional portfolio. Individuals, or those fired from a team, may negotiate a subset of the UML Diagrams and other documents. All documents must use recognized shapes from the UML suite of diagrams. Project #4 must be submitted in printed form and also in a single pdf submitted through BlackBoard.

Bring work to class for feedback early. None will be offered between the last class and the exam. The exam time is to collect projects not help debug them or tweak them to specs after critique...

Sketch of Similar Application as at 2016Winter

MVC/Class Diagram

This a rough Class Diagram for the MVC-Model View Controller scheme similar to 2016Spring. The UML doesn't have a MVC in its set of diagrams quite yet, but the Class Diagram is easilty adapted to reflect the popular design pattern. The blocks in a UML Class Diagram typically show Name of the class, its methods, and its properties. Here, to make it fit a MVC, the block represents a model (aka script) instead of a class. 'View' is substituted for method, where the models consistently use HTML GET or POST data in $_REQUEST['View'] to control their output.

The biggest block in the diagram is Controller.php, 'the controller', which surveys the environment for a logged in user and provides a menu of the models and views appropriate for their authority and roles. Please, improve on the diagram if you choose to use it as a model for your Class diagram, and make it a tighter fit to 2016Winter.

Its important for somebody wanting work in app dev to have a ready reference to a Model View Controller and be able to talk about it, sketch it, or sit down and develop with it. The MVC is a popular and powerful design pattern implemented in many development environments in many ways. Visual Studio's MVC is highly abstract with a steep learning curve, which it's well worth climbing since it takes best advantage of the .NET Framework. Django is in many ways a MVC, as are other frameworks for application development.

State Transition Diagram aka State Chart

This is a rough UML State Chart, or state transition diagram, for Orders OStatus from check-out through fulfillment in an application similar to 2016Winter. It's reflects changes from 2016Winter that involve a shipping desk after the ACH authorizes the credit card.

2017Summer State Chart


G Saunders,
Dept of Information Systems
VCU School of Business

G Saunders Wings

Content © 1999 - Today
By G Saunders
Images are Available on the Web