CSCI 3355 Topic Outline in "Semi-Chronological" Order
This page may be continually revised/updated as the course progresses.

Classes begin in this course on Tuesday, January 9, 2024, and you should make a special effort to be present online for the first class and recitation/lab.

Course material

The assigned text for this course is the online zyBook, but additional material will include online documents, as well as sample files and code from various sources. Material presented and discussed in our live online sessions will not necessarily appear on the course website, but since you will be responsible for everything covered in class and/or recitations, it will be important that you attend both classes and recitations.

What you should know before taking this course

• You are expected to be reasonably familiar with HTML5 and CSS3, and how to validate each of these against their respective standards. Refer to our zyBook and the W3Schools site for review and/or reference.
• You are also expected to be reasonably familiar with JavaScript, both as a programming language and its use in the browser. Refer to our zyBook and the W3Schools site for review and/or reference. Note that, historically, the naming sequence of the JavaScript programming language went something like this: Mocha -> LiveScript -> JavaScript -> ECMAscript

Of course you will need to learn more about HTML5, CSS3 and JavaScript as the course progresses and you work on your website development. Of particular interest and utility are the following:

• W3.CSS and W3.JS: These two libraries are available by inclusion from the W3Schools website. They may be new to you, but you should find them very useful, both for learning more about CSS and JavaScript, and for actual use in developing your website. A big advantage of using these libraries is that they allow easy testing and experimentation. W3.CSS in particular is quite powerful and versatile, and has responsive design "built-in".

Overview of the course and our development environment

1. Welcome, introduction, and course structure, including the three main websites (Brightspace, legacy, and zyBook)
2. Grading scheme
3. Discussion of the zyBook relevant to this course
   • The same zyBook that was used for CSCI 2355 is again relevant for this course, with the earlier sections serving as an excellent review (if needed) and the later sections more directly dealing with the material covered in the current course.
   • Questions on the Breakout Room exercises and the final exam will be based on any material assigned in the zyBook or covered in the live sessions.
4. Course website overview, including additional resources
5. Brief look at the various Amazing Stuff website versions
6. Description of course accounts and the submission procedure
7. Discussion of the development environment and some of the software tools we'll use, as outlined below

Things you should know about our development environment:

1. We will be using Linux, and you will have a new course account on the ps.cs.smu.ca server, with a username like u##. This machine is actually a virtual Linux server running Ubuntu, and has all the software we will need: PHP, phpMyAdmin, MySQL, MongoDB, and (possibly) NodeJS. You will be assigned your account at the appropriate time.
2. To access our Linux server, you can use a Windows machine on campus (where you would use your s-number account), or from home using either a Windows or Mac machine.

Client-side (Windows and/or Mac) software:

1. The Firefox, Chrome, and Edge Browsers
2. For Firefox or Chrome, the "Web Developer" browser add-on written by Chris Pederick is a handy one to have, especially for web page validation
3. Visual Studio Code is the recommended software for editing markup and code for your website, since it is cross-platform and you can use it to log in and work directly on the server.
4. KiTTY on Windows or ssh on Windows or the Mac can be used for a "terminal emulation"-type connection to our Linux server
5. WinSCP for Windows or Cyberduck for the Mac, or any similar program, can be used for file transfer
6. Adobe Reader for access to pdf documents

Server-side (Linux) software:

1. There are lots of editors, but the nano editor is a simple one available at the command line, and if you are a Vim user you can expect to find it there as well. But ... by far the best option is to install Visual Studio Code on your local machine and use it to connect to, and work directly on, the server.
2. When you log into Linux via KiTTY or ssh or any similar program, you will have a command-line window open on Linux, so you will need to know how to navigate around in your Linux account and do simple tasks like moving, copying or deleting files, and creating, populating and deleting subdirectories, as well as some basic familiarity with Linux file and directory permissions for web development.
3. On the Linux system you will find the ispell spellchecker a handy tool. To use it give the following command (for example):

   ispell filename.ext
   

Discussion topics for our online sessions

The following material on PHP and MySQL is directly relevant for the development of your website. There are zyBook chapters dealing with these topics and other chapters or chapter subsections contain additional material that you may need or find helpful as well, but getting comfortable first with PHP and then with MySQL is what you should start working on immediately, since both of these will be crucial throughout the course and your website development.

PHP: See the zyBook Chapters 12 and 13 (and W3Schools PHP)

• What is PHP?
  PHP is a server-side programming language that runs on the server and sends its output to the browser for display, usually via echo but possibly with some version of print, and requires a filename with a .php extension.
• Delimiters
  PHP code must be enclosed by an opening delimiter <?php and a closing delimiter ?>.
• Processing Modes
  When processing a file containing both HTML and PHP code, the PHP processor may be in either of two modes: the read/copy mode, in which it simply "sends what it sees" to the browser, or the interpret/execute/translate mode, in which it first processes the PHP code, then sends the result to the browser.
• Getting environment info
  Running the phpinfo() function will show all the settings in your local PHP environment.
• Runtime errors and warnings
  Running a PHP script may generate a parse error, a fatal error or a warning (what used to be a notice will now show up as a warning in the latest PHP)
• Case sensitivity
  Case sensitivity in PHP is a bit strange: variables and constants are case sensitive, but functions and keywords are not.
• Data types
  PHP has the following data types:

  string uses single or double quotes, but double quotes allow variable interpolation whereas single quotes do not.
  --The string concatenation operator in PHP is the period (.), not the plus sign (+) that you might expect.
  --The double quote, single quote, newline, tab, dollar sign and backslash can all be escaped within double quotes, but only single quote and backslash can be escaped within single quotes.
  --A "hard newline" (entered by pressing Enter in an editor) can also be included in a PHP string.
  --Outputting the built-in constant PHP_EOL will output the correct newline character for the current platform.

  integer, float, boolean (with values TRUE and FALSE), array, object, null (with value NULL) and various resource types such as files).

• Output
  PHP prefers using echo (which returns nothing) for output (it can use parentheses or not, and can output a comma-separated list of values); print (which returns 1) can also use parentheses or not, but can only output a single value; printf can be used to print formatted output; and sprintf can be used to return a formatted string.
• Variables and constants
  Variables and constants are case sensitive, variable names must start with a $ and should use typical camel-style capitalization for names; constants cannot start with a $ and should have names that are all caps, with an underscore separating words in the name; constants can be defined with the const keyword or define(CONST_NAME, value) in which CONST_NAME can also include a concatenated variable such as NAME . $i.

  Predefined constants: INF, TRUE, FALSE, PHP_EOL

• Getting variable info
  The var_dump(variable) function call will output the type and value of variable.
• Operators
  PHP has the following operators:
  arithmetic (+, -, *, /, %, **, ++ and -- with the usual precedence)
  compound assignment (+=, -=, *=, /=, %=, .=)
  relational/comparison (<, <=, >, >=, ==, != or <>, ===, !==, <=>
  logical (&&, ||, !=)
  Note that <=> is often referred to as the "spaceship operator".

  Note that when a string is compared to a number with any comparison operator besides the identical and non-identical operators, the string is first converted into a number and then compared. When two strings are compared, if the strings being compared start with a numeric character (a digit or plus or minus sign), the numerical strings are first converted into a number before the comparison, which is done character by character. Good practice is to use === and !== when comparing strings for equality.

  Note as well that when a string appears in an arithmetic expression, the string is first converted into a number before the expression is computed. If a string can't be converted to a number, it is converted to 0. Strings with leading text are converted to 0, while in strings with trailing text the trailing text is ignored.

  And note that && has a higher precedence that ||, but generally it is best to use parentheses to avoid the possibility of a logical expression being evaluated incorrectly.

• Comments
  PHP has three kinds of comments: // and # for single-line and /* */ for multi-line.
• Including files
  PHP allows one file to be included into another, using either include() or require(). The included file can be plain text, HTML or another script such as JavaScript, or PHP itself.
  
  If include() fails, the script will display a warning message carry on, but if require() fails, the script will display a fatal error message and terminate.
  
  If only a file name is supplied, the PHP include_path is searched first, then the current directory; if a full path is given, only that is searched.
  
  include_once() and require_once() are the same as include() and require(), but their use guarantees that the same file will not be included more than once, thus avoiding a potential variable or function redefinition problem.
• PHP's REPL: To enter PHP's command-line REPL (Read-Eval-Print Loop) enter the command php -a, and to run a PHP file at the command line enter php -f file.php.
• Conditionals
  if, if...else, if...elseif...else, with braces required if more than one statement and recommended in any case, and note that elseif can be used as shorthand for else if.
  
  switch (with break) uses == to compare an expression's value (typically integer or string) to several cases and executes the first one that matches or the default block if none match
• Loops
  while, do...while, for, foreach (for use with arrays)
  break jumps out of the current loop
  continue jumps out of the current loop iteration and starts a new one
  goto (which should be avoided) jumps to another section of the program
• Arrays
  -- Indexed arrays may be created by [v1, v2, v3] or by array(v1, v2, v3)
  -- Associative arrays may be created by [k1=>v1, k2=>v2, k3=>v3] or by array(k1=>v1, k2=>v2, k3=>v3)
  -- But most arrays are probably best thought of as a collection of key/value pairs, even in the integer-indexed case.

  Access array values (for reading or writing) using square brackets [ ] with an index or a key. If adding a new value with empty brackets, the next highest index is used. Either of the following loops will access all of the values in the array:
  foreach ($indexedArray as $value) {} or
  foreach ($assocArray as $key => $value) {}

  print_r($a) prints the array
  count($a) returns the number of elements in the array
  array_push($a, v1, v2, v3) adds values to the end of the array
  array_pop() removes the last element of the array
  array_unshift() and array_shift() add/remove values to/from the front of an array

  PHP also has multidimensional arrays: $a = [k1=>$a1, k2=>$a2, k3=>$a3]

  Array sorting functions:
  sort() sorts an indexed array in ascending value order
  asort() sorts an associative array in ascending value order
  ksort() sorts an associative array in ascending key order
  rsort(), arsort(), and krsort() perform similary, but in reverse order

  $s the (0-based) array that contains the command-line inputs when running PHP at the command line, including the script name at index 0.

  The list() function can assign the values of an array to individual variables given as its parameters.

  Superglobal arrays are used to access web information from PHP scripts on web pages:
  $_SERVER
  $_SESSION
  $_GET
  $_POST
  $_COOKIE
  $_REQUEST
  
  These are special PHP arrays used to access server and web page data from PHP scripts:
  $_FILES
  $_ENV
  $_GLOBALS

• Functions
  Programmer-defined PHP functions are very much like programmer-defined JavaScript functions, defined with the function keyword, no return type, and with or without a return statement.

  PHP has local (to-the-function) scope and global (access-from-all-functions) scope but to access a global variable a function must explicity modify the name of the global variable using the global keyword. PHP also static scope, which permits a function to retain the value of a local variable between function calls if that variable is modified with the static keyword.

  Function names are case-insensitive and both underscores and camel case are used, though PHP itself uses underscores.

  Function parameters may have default values.

  Pass-by-value is the default parameter-passing mechanism in PHP, but placing an & before a parameter name makes it a pass-by-reference parameter.

  A PHP function can have a variable-length argument list. That is, function name(...$a) is a function that can be called with any number of arguments, all of which will go into the array $a, and can then be accessed from that array in the body of the function.

• Classes
  In PHP classes and objects are quite similar to their Java/C++ counterparts, with, of course, some syntax differences. You will find a good overview in the zyBook Section 12.9 and also in the W3Schools information starting at this page. You may or may not wish to use PHP object-oriented programming on your websites, since the classic procedural approach works just fine for our purposes.
• Regular expressions
  -- ordinary characters vs. meta characters
  -- character classes and negative character classes
  -- shorthand notation
  -- quantifiers and anchors
  -- delimiters and pattern modifiers
  
  Advanced concepts:
  -- parentheses and capturing (with and without back references)
  -- greedy evaluation vs lazy evaluation
  -- look ahead and look behind
  
  See the links under the Regular Expressions item in the menu at the left, and work through the online sample programs as well as any sample code discussed in class.
• Built-in PHP functions to know (there are many more than those listed here):
  • Math (functions and constants)
    intdiv(), rand(min, max) and srand(), round(), ceil(), floor(), max(n1, n2, n3, ...), min(n1, n2, n3, ...), abs(), pow(), log(), M_PI, M_E, M_LN2, M_LOG10E, M_SQRT2
  • Strings
    strlen(s), strrev(s), str_replace(old, new, s), strtolower(s), strtoupper(s), strcmp(s1, s2), ord(s), strpos(s, substr), substr(s, start, length), strpbrk(s, charlist), str_word_count(), [l|r]trim(s [, "trim_chars"])
  • Date/Time
    date(), date_create(), getdate(), date_format(), date_diff(), checkdate(), time(), mktime(),
    Note that a DateTime object represents a specific date and time, current server date and time by default, and a DateInterval object represents a time duration.
  • Regular Expressions
    preg_match($r, $s), preg_match($r, $s, $m), preg_match_all($r, $s, $m)
preg_replace($r, $replacement, $s), preg_grep($r, $s), preg_split($r, $s)
    filter_var($s, SOME_FILTER_CONSTANT)
  • Forms
    isset(), trim(), htmlspecialchars()
filter_var() is just one of several filter functions
  • Arrays
    count($a) or sizeof($a), in_array($a, value),
    array_keys($a), array_values($a)
array_unique($a), array_count_values($a), array_fill_keys($keys_array, value)
explode(separator, $a), implode($a)
array_push($a, v1 [, v2 ...]), array_pop($a)
array_shift(a$), array_unshift($a, value)
sort($a), rsort($a), asort($a), arsort($a), ksort($a), krsort($a)
print_r($a), list($a)
  • Files
    include(), require()
fopen("path/file", "mode"), fclose(file_handle), unlink("path/file")
fwrite(file_handle, output)
fread(file_handle, num_bytes), feof()
file_get_contents("file/path|url"), fgets(file_handle, num_bytes)
  • JSON
    json_decode(JSON_file_handle), json_encode($PHP_array)
  • Misc
    phpinfo(), var_dump(), die(), exit()
• Error handling
  If error_log has a value set in the configuration file php.ini, PHP can send errors to that file, but during development it's best to display error messages in the browser (but in a production environment display_errors = 0 should be set). Developers can also write custom messages to the error_log file or email an error message with error_log() function.
• Cookies
• Sessions
• User authentication
• PHP Data Objects
• Relational databases and SQL
• MySQL and MySQLi
• Third-party web APIs