Dynamic Web Design 2017-18

Course notes

Here are links to course notes, tutorials etc. Material will be updated and extended (or cut) as required, so should not be considered as the final version until the lecture it relates to has happened. This page itself may well be revised as we go along.

First of all, here is the handbook page.

Additionally to the lecture notes, there are:
some introductory talk slides (PDF), and a video of this talk;
This year, we are using the Fat-Free Framework for PHP (https://fatfreeframework.com/), which some of these notes do not take into account. This is OK, in that all the normal PHP approaches still work, but you will not need to study the "vanilla PHP" method for connecting to databases, for example.

For those who haven't looked at HTML & CSS before… you should look at these viewtorials as soon as possible (password is atrium):
https://vimeo.com/109699027 - HTML
https://vimeo.com/110455453 - CSS
https://vimeo.com/111536732 - Box Model

Information about our local web hosting server (playground) can be found at https://www.wiki.ed.ac.uk/display/ECAIT/Experimental+web+server (and is also discussed under (2) below) – note especially the FAQ link on the right hand side.

Lecture notes:

  1. Instructions for using local servers
  2. Introduction and Forms with PHP
  3. Databases with PHP [not using Fat-Free Framework]
  4. Jules' notes on database design (PDF), the zipped source files for the blog example, and the screencast of his tutorial. And further blog code.
  5. More PHP [updated for Fat-Free Framework]
  6. Evaluation/usability
  7. Conditional expressions plus cookies/sessions:
    NEW! A viewtorial on implementing login with a session in F3 -- code for this, with some additional comments, can be downloaded here. The demo can be viewed and played with here (with username guest, password guest).
    This is cookietest.php, and this is login.php; here you can read as text the PHP file for the cookies example, and here is the one for the login example ...
    A video of the lecture (very poor quality) is at https://vimeo.com/119117628.
  8. Further PHP (and the ImageServer)
    There is now a Fat-Free Framework version of the ImageServer: here are the notes, and here is the zipped code.
    [OLD VERSION: Here are the ImageServer notes, and here you can download the zipped imageserver code. This is the improved version, "imageserver1.1", which fixes security bugs detected by Geoff Lee. It has many comments in it. Note you will need to put the unzipped code into your html folder, and create a folder called "upload" at the same level as the html folder, not inside it, which your images will be uploaded into. A video of the lecture is at https://vimeo.com/119556314.] Just let me know if you have any problems with this.
  9. Javascript and APIs: here are links to Jules' notes –
    http://ddm.ace.ed.ac.uk/dynamic/apiflickr.html
    There used to be notes here for the Google Maps APIs; however, Google have changed the API so these are now out of date, and Google's own notes are now much better. So just look at the Google documentation here.
  10. Javascript and jQuery notes
    Zipped code for AJAX and jQuery examples, based on Jules' originals. The video of the lecture is at https://vimeo.com/121459052.
  11. Mobile web apps. As yet, no notes on this, but the application I talked through is imageMobile.html. (Note that this is on playground, and there are restrictions on it being elsewhere because the getJSON function which it uses has cross-site access restrictions.) Simply view source, or save it and open in an editor, to see the code, which has been improved somewhat and may be improved more later (at least with more comments). The video is at https://vimeo.com/122085161.
  12. Flash Remoting
    Once again, I have not been able to write up notes for this as yet (the old ColdFusion ones are useless). However, you can download from here the zipped Flash and PHP files. The Actionscript in the DDM version of the photo gallery is well commented. Note the README file in the Flash folder, which contains a number of important points. As ever, if you have any questions, just ask.
  13. XML
  14. Further APIs
    Notes for material on Txttools API etc.

Note that not all of these things will necessarily be referred to in this year's lectures or tutorials.

The following tutorials are not needed, given that we are using the Fat-Free Framework. the PHP forms tutorial (zipped source files here); and
the PHP database tutorial (zipped source files here —  modified from the version in the tutorial so as not to reveal my password!).

Any problems, just let me know ...
John.