CS 315 Internet Programming

Syllabus for this class

Exams

• There will be two in class exams and a comprehensive final.
• Exam One Terms and Concepts Know these for Exam One, which is Friday, 28 February 2020
• exam1part5.php and exam1part5.phps shows an answer to Part 5 of Exam 1.

Project Milestones

• There will be a project proposal assignment and four milestones.
• Project Proposal is due 27 January 2020
• Milestone 1 of your project, focusing on HTML/CSS, is due by 21 February 2020.
• Milestone 2 of your project, focusing on PHP, is due by 6 March 2020
• Milestone 3 of your project, focusing on Javascript, is due by 3 April 2020

Homework

• There will be about 6 homework assignments.
• Homework 1 Assigned: 24 January 2020, Due: 3 February 2020
• Homework 2 Assigned: 3 February 2020, Due: 12 February 2020
• Homework 3 Assigned: 14 February 2020, Due: 24 February 2020
• Homework 4 Assigned: 4 March 2020, Due: 23 March 2020 27 March 2020

Textbook Webpage

• Web Programming: Step by Step

Using the ice Web Server

This class is going to use ice.truman.edu, a Math/CS department Linux machine, as our web server. A quick lab to get you started building a web page on ice is available at web.html. You do not need to turn in this lab. Just do it for your own knowledge. Please let me know if you have any trouble connecting to ice. Wherever the lab says "sand" you can replace it with the word "ice".

Ice is configured to only allow web access from Truman IP addresses. Thus, by default, people from outside Truman won't be able to see your web site. For most purposes that is probably fine. If you would like your website to be visible outside of the Truman IP space, then look at how to allow access.

All of the w3.org validator sites are allowed to access ice web pages, so all of the validation methods I will show you should work.

XHTML Examples

• Wikipedia HTTP Protocol page has a useful primer on the HTTP protocol
• simple XHTML (old style) file
• HTML5 version of simple page
• Javascript for toolbar operations as discussed in class
• Examples showing HTML5 usage.
• Frame example used in class DON'T
• My schedule as a table example

CSS Examples

• Image presentation advice
• Information Architecture, Fourth Edition by Arango, Morville and Rosenfield, 2015 is a detailed look at important ideas about how to organize and design web sites.
• Information Architecture thoughts that are totally irrelevant to Truman.
• Inline style example
• Document style example
• External style example
• CSS Zen Garden look here for lots of examples
• CSS for tables examples.
• CSS Box Model from W3Schools.
• CSS Float examples from W3Schools.
• A longer discussion of the box model
• boxout.html from Essential Guide showing a way to create a boxout, with related file boxout.css.
• two-divs.html with related CSS two-divs.css shows how to create a sidebar with faux-column backgrounds. pinkflag.com/colin-newman.php shows a real website that uses this idea.
• multiple-boxouts.html and related file multiple-boxouts.css show how to extend the boxouts idea easily to multiple boxouts.
• Position-related Javascript
• ACM Queue Magazine article about Mobile Web Development

Javascript Examples

• Head First Javascript Programming is a good simple introduction to Javascript.
• Examples of Javascript as discussed in class
• Old Javascript examples
• debugdemo.html buggy Javascript example to show how to detect errors
• More Goodman examples from Javascript and DHTML Cookbook form validation example and dynamic form example
• exampleHTML5.php shows form validation that HTML5 alone can do, exampleJS.php with Javascript file check.js shows what Javascript based form validation can do. Notice PHP-based validation is always used as well. There are .phps files for all PHP files.
• Position-related Javascript
• A simple AJAX example
• Another AJAX example with hack2.js and hack2.phps on the backend.
• Article about Javascript for email address validation that has some good points.

Non-PHP CGI Examples

• Really old Java Applet and Servlet files
  • The Wel2.java applet code and wel2.html file.
  • The Clock.java applet code and clock.html file.
  • Greeting.java is a simple Java servlet.
  • Survey.java is a servlet that plays the same role as the Perl consumer electronic survey.
• Other Really old CGI examples
  • CGI in Ada (broken link, but you really can do CGI in Ada)
  • CGI in C
  • reply.html, which calls reply.perl

PHP Examples

• phpinfo.php just calls the phpinfo() function to return information about the PHP environment on sand.
• Learning PHP, MySQL & Javascript, 4th edition is a good Safari book that introduces PHP.
• Programming PHP is a pretty good reference with lots of PHP examples.
• How to create a PHPS file
• How to limit access to a directory, which is especially useful for PHP files.
• powers.php is a simple script. The source is here.
• sorting.php shows various sorting functions. The source is here.
• popcorn3.html is yet another version of the popcorn form. popcorn3.phps is the source for the code that processes it.
• date.phps shows preg_match and preg_split. Try it using date.php.
• uploadf12.phps is a simple example of using PHP for file uploads that I use for CS 180. This is disabled.
• W3Schools Filter documentation. Useful way to simplify cleaning up inputs.
• sports.html uses AJAX to show results of a survey as soon as you click on a choice. hacks2_5.js is the Javascript. sport.phps is the backend PHP. sport.dat is the underlying data file. checkbox.html adds dynamic checkboxes. hacks2_7.js is the underlying Javascript.
• appendExample.php with accompanying appendExample.phps is a PHP program (in a single file) that appends output to an existing file and prints the results out. Might be useful for Milestone 2.
• W3 Schools PHP mail() page. This shows how to use PHP to send email. Note that this doesn't work on ice, because ice does not have a mail server. But sand does.
• prefs.html is a form that lets you set preferences using cookies. prefs.php (with source in prefs.phps) is the PHP that processes the form and sets a cookie. prefs-demo.php is code that demonstrates the use of the preferences (with source prefs-demo.phps)
• prefs-session.html is a form that lets you set preferences using a session. prefs-session.php (with source in prefs-session.phps) is the PHP that processes the form and starts the session. prefs-session-demo.php is code that demonstrates the use of the preferences (with source prefs-session-demo.phps). See endsession.phps to see how to end a session.
• hello.php with hello.phps source from the Ajax with PHP 5 book.
• phpmyadmin is a nice tool to give you access to your mysql database over the web.
• W3Schools Prepared Statements example document. Scroll down to find the PDO version of the example.
• An (updated) step-by-step guide to setting up your tables in a Mysql database should help you get started. The online Mysql manual is especially helpful.
• An example of pages that allow you to insert and select elements from a simple database table using the PDO commands in a correct way. bookInsert.phps and bookTable.phps are links to the source files.
• An older example of something similar to the above that uses older technology is also still available. booklistpub.php is a site that uses forms and a database to keep information about books. bookreportpub.php shows the manipulatable stored data. Sources are in booklistpub.phps and bookreportpub.phps and bookstuff.txt (which has the SQL table information).
• An online tutorial takes you through the process of using PHP and MySQL with PDO to let users set up username/passwords, then authenticates them against these passwords and remembers this using sessions. Not all of this is totally up-to-date, but I don't think sand/ice support the absolute most up-to-date way to do this. A local version of this that works uses files index.phps, home.phps, config.phps, logout.phps, session.phps, and class/userClass.phps. Go to index.php to try it all out. The database definition is available at users.sql.txt.
• Useful code sniplets for Perl and PHP.
• Perils of SQL injection
• a directory full of authentication example files.
• A more recent example of how to use PDO to do authentication in PHP with a database backend.
• A good tutorial that describes the components of Rails.
• A quick look at Ruby on Rails in action.
• Ruby on Rails demo on YouTube.
• Node JS vs Ruby on Rails video on YouTube.

XML Examples

• example1.xml is a simple well-formed XML file. Browsers recognize this as XML and have a special way of presenting it. The exact contents of the XML can be seen when you View Source.
• example2.xml shows a valid XML document. It is valid because it conforms to the DTD included at the top of the file.
• bookexample.xml is another example of a more complex DTD.
• ex2extdtd.xml shows example2 with an external DTD file. ex2.dtd is the external DTD file.
• attexample.xml shows an example of a DTD that declares attributes.
• schema-example.xml is an XML file that can be validated using the schema schema-example.xsd.
• A W3C Website that has both a DTD and an XML Schema definition for the XML Schema language.
• meditate.xml is an XML file that has its display formatted using meditate.css.
• meditate2.xml is an XML file that has its display formatted using meditate2.css. This shows how to use :before and :after pseudo-elements with the content CSS attribute to add text to the displayed file.
• planets.xml is an XML file that is transformed using a really simple XSLT style sheet planets.xsl. (You need to use View Source to see the xsl file.)
• planets2.xml is the same XML file with a more interestingly complex XSLT style sheet planets2.xsl.
• xhtml1-strict.dtd is a local copy of the XHTML 1.0 Strict DTD
• In theory, you can extend XHTML by adding new tags. You define the tags in a DTD that includes the XHTML DTD, such as extend.dtd. You say how to present the new tags using CSS, such as extend.css. In theory you could use the tags in XHTML, such as extend.html, but browsers don't notice, because they don't look at DTDs. But you can make this work as XML, such as extend.xml.

Fun stuff

• This page has a Perl regular expression for validating email addresses. Incredible.
• Links to a gazillion different web resources.