General Information
Instructor:
| Geoffrey Towell Park Science Building 526-5064 gtowell at brynmawr dot edu http://cs.brynmawr.edu/~gtowell |
Lecture Hours: Monday / Thursday 8:10-9:30
Room: Park 180
Lab: Thursday 9:40-11:00
Office Hours: 4-6pm Wednesday and Thursday
Office hours will be by zoom. Meeting code: 232 840 6920. I have provided the password in email
Text
Course Description:
Video OverviewIntroduction to the creation of interactive and dynamic web content. Students study the technologies and concepts for adding interactive content to web pages (client-side programming), and receive, store, read, and supply information clients (server-side programming). In this context, thcourse will cover client-side concepts like HTML, CSS, and Javascript. On the server side, we will cover server-side programming languages, data storage, and databases. Finally, we will discuss design and development of apps (Android/iOS) as an alternative to browser-based systems.
Course Intro Errata: early on I say my email is gtowell@brynmawr.com it is, of course, gtowell@brynmawr.edu
Important Dates
- Sep 10, First lecture
Assignments
Assignments will be specified in terms of IO behavior. That said, we will be discussing specific programming approaches and languages in class. The expectation is that you will use those things discussed in class to accomplish the assignments. If you wish to go another direction and do somethinhg totally different I will likely approve your request. But do ask first. .As a general rule I will not closely grade program code. I will, however, read it and expect to be able to understand what I read. Therefore, the code should be commented to the level that an independent, intelligent, and motivated person can review and understand what was done and -- potentially -- extend or fix the program. Comments should be written at the level such that, if you picked up your own code 2 years from now you could understand what you did and how the program works.
There will be several small-ish introductory assignments (approximately 1 week) that are intended to get everyone on a common footing with respect to the topic area. After that, the class will be broken into groups each of whom may get a different assignment. For each of the group assignments I will give a some suggestions; you will choose from among these suggestions. You may also suggest something of your own. Each person will present to the class on a group project once. There will be 3 of these group assignments.
- Homework 1: HTML: Due Sep 16 prior to 11:59pm
- Homework 2: SQL: Due Sep 27 prior to 11:59pm
- Homework 3: PHP: Due Oct 4 prior to 11:59pm My answers Note there are lots of ways to answer many of the queries, My answers just illustrate a solution.
- Homework 4: Javascript for Games: Due Oct 25 prior to 11:59pm Video of game play. Oct 11, I added a second video of the play of a full game. This full game video includes some things that are NOT required. For instance, there are a interludes after the completion of the second and fifth levels. The number of colors increases after the second and fifth levels, Also, there is a graph should scored at the end of the game. (All would be fine to have, none of these are required.)
- Homework 5: HTML, Javascript, PHP and MySql:
Due Nov 15 prior to 11:59pm - Homework 6: Android with PHP and MySQL:
Labs
Labs are intended to take about 90 minutes. If you cannot complete the lab in 90 minutes, stop; turn in what you have completed and say that you ran out of time. You might want to finish on your own, but this is not required.- Lab 1: Getting started and HTML: Sep 10
- Lab 2: A bunch of SQL queries: Sep 17. Answers
- Rot13 encryption using PHP: Sep 24.
- Javascripting: Oct 8
- Animations and the Javascript canvas: Oct 22 Answer To see the changes from the original code, search for LAB5 in the source.
- Installing Android Studio: Oct 29
Additional Readings
If I assign (or suggest) additional readings, they will be listed here. At the very least, some stuff about PHP will be hereLectures
- Week 0, course Introduction
Course Intro Errata: early on I say my email is gtowell@brynmawr.com it is, of course, gtowell@brynmawr.edu -
Lecture 1, Sept 10
- Lecture Notes
- Today's lecture was based on chapters 2 and 3 of the Murrell book. We also touched on Chapter 4.
- Separating preparation and presentation in Java
- The Checkerboard example (To see the html underlying these pages, load the page then "view source". For example, on chrome, you can view source by View Menu / Developer / View Source. (These menu items are from a Mac, they my be slightly different on other computers.) Firefox also has a way to View Source. Safari, by default, does not.
-
Lecture 2, Sept 14
- Lecture Notes
- Today's lecture was based on chapter 5 of Murrell and a bit of Gilmore.
- All of the SQL commands from class
-
Lecture 3, Sept 17
- Lecture Notes
- Today's lecture was based on chapter 5 of Murrell and a bit of Gilmore.
- SQL from the first part of class (These are actually left-overs from Monday)
- SQL from the remainder of class
-
Lecture 4, Sept 21
- Lecture Notes
- Finishing up the intro to SQL and starting an intro to PHP. PHP is mostly covered in the Gilmore book. (There are also innumerable on-line resources)
- SQL for hurricanes
- first hello world, it has no actual PHP run
- second hello world Has PHP but not really run
- third hello world Actually uses PHP run
- fourth hello world multiple php blocks, variables live across blocks run
- final hello worldfunctions, scoping run
- Arrays in phpeverything is a map run
- foreach loops run
- server superglobal run
- headersdata that comes from the browser run
- php from command linewith command line args
-
Lecture 5, Sept 24
- Lecture Notes
- Finishing up the intro to SQL and starting an intro to PHP. PHP is mostly covered in the Gilmore book. (There are also innumerable on-line resources)
- server superglobal run
- headers data that comes from the browser run
- php from command line with command line args
- Primes under 1000Via the Sieve of Eratosthenes run
- More Primes Still the sieve, using the same space, but preselect candidates for the sieve run
- Obfuscated Hello Word Rube Goldberg lives run
- form1 run
- receive input from form1 run
- form2 send input to sess.php run
- php sessions run
- Lecture Notes
- Finishing up PHP intro. PHP and SQL. Starting on client-side programming, Javascript.
- READ https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript
- form1 run
- receive input from form1 run
- form2 send input to sess.php run
- php sessions run
- try to separate code from presentation run
- Getting separation by using include run The included PHP code
- One random line from shakespeare run
- A stopwatch in javascript run
- RPN calculator in javascript run
- Lecture Notes We got to slide 20
- Arrays Creation and indexing
- Arrays and wrting to the document
- Objects
- V1 multiplication table
- V2 multiplication table
- V3 multiplication table
- V4 multiplication table
- the php for v4
- Check user input
- One random line from shakespeare run
- checkboard returns
- checkboard returns
- Lecture Notes
- arrays can have holes!!
- V2 multiplication table
- V3 multiplication table
- V4 multiplication table
- the php for v4
- Check user input
- checkboard returns
- checkboard returns
- Base JS with button action
- Same as d1, but with JQuery
- d2, but using more querying
- more like base javascript
- click on elements
- balls from divs
- one step animation
- continuous animation
- drawing to html canvas
- get the position of a click on the canvas.
- Lecture Notes
- Base JS with button action
- Same as d1, but with JQuery
- d2, but using more querying
- more like base javascript
- click on elements
- an issue from Lab4
- another issue from Lab4
- JQuery to the rescue
- event loop 1
- event loop 2
- 2a
- 3
- balls from divs
- one step animation
- continuous animation
- drawing to html canvas
- get the position of a click on the canvas.
- Lecture Notes
- Hit Counting
- hit counting v2
- hit count v3
- page with hit count widget
- page with hitcount widget, improved
- once more, with promises
- Polling html php
- Long Polling html php
- Server Side Events html php
- Towers of Hanoi system intro and timing php results
- Lecture Notes
- Server Side Events html php
- Loggin in create users the login page AJAX user login Session maintenance do actual logging in
- Towers of Hanoi system intro and timing php results
- Lecture Notes
- Towers of Hanoi system intro and timing php results
- Towers of Hanoi update 1 save php get data line graph
- Towers of Hanoi update 2 bar graph Google graph
- Database creation create the same data 4 times!
We only got to slide 7 in the lecture notes
- Lecture Notes
- The app used in this lecuure. This is in a gzipped, tar-ball. This app is almost completely undocumented. However, the lecture notes do a pretty thorough job of documenting the interesting parts.
- Lecture Notes
- The app used in part 2 of the lecture. This is in a gzipped, tar-ball.
- Scope and timeout in Javascript This reprises a part of a lecture from early November that few people attended.
- Lecture Notes
- Queries on the rocket database This is an ungodly mess of stuff I worked with in preparing the slides.
Course Policies
Communication
Participation includes asking questions,
contributing answers, proposing ideas, and providing constructive
comments.
As you will discover, I am a proponent of two-way communication
and I welcome feedback during the semester about the course. I am available to answer questions, listen to concerns, and
talk about any course-related topic (or otherwise!). Come to
office hours (via zoom. While the weather cooperates we can also meet outside in the Park courtyard). In the Fall of 2020 office hours will be virtual and through zoom.
Please
stay in touch with me, particularly if you feel stuck on a topic
or assignment and can't figure out how to proceed. Often a quick
e-mail, or face-to-face (via zoom in fall 2020) conference can reveal solutions
to problems and generate renewed creative and scholarly energy. It
is essential that you begin assignments early.
Grading
At the end of the semester, final grades will be calculated as a weighted average of all grades according to the following weights. (These weights are subject to change, without notice.)
| Percent | Topic |
|---|---|
| 24% | 3 1-week(ish) solo assignments at the start of the course |
| 60% | 3 3 week(ish) small group assignments |
| 4% | 1 presentation on a group project |
| 8% | 2 3-5 minute in class presentations topics I assign |
| 4% | Labs and Class Participation |
Incomplete grades will be given only for verifiable medical
illness or other such dire circumstances.
ALL work submitted for grading should be entirely YOUR OWN (or that of a group if you are working in a group). Sharing of programs, code snippets, etc. is not permitted under ANY circumstances.
Submission, Late Policy, and Making Up Past Work
No assignment will be accepted after it is past due. However, you will have 2 24 hour late pass. This late pass can be used by simply sending me email -- before the due date. The late passes cannot be used to delay in-class presentation.
No past work can be "made up" after it is due.
No regrade requests will be entertained one week after the graded work is returned in class.
Exams
If you have any questions as to what types of collaborations are allowed, please feel free to ask.
Links
Learning Accommodations
Students requesting accommodations in this course because of the impact of disability are encouraged to meet with me privately early in the semester with a verification letter. Students not yet approved to receive accommodations should also contact Deb Alder, Coordinator of Accessibility Services, at 610-526-7351 in Guild Hall, as soon as possible, to verify their eligibility for reasonable accommodations. Early contact will help avoid unnecessary inconvenience and delays.This class may be recorded.
Created on August 2020. Subject to constant revision.