Students apply user-centered design principals, database structures and server side scripting to design and develop content for server-based dynamic delivery. Attention will be paid to design issues relating to the display of dynamic content on the screen and how that dynamic content will be delivered.

Instructor: John Keston
Meeting Times and Location:
Monday / Wednesday
Room P108, Pence Building, 2:00pm – 5:00pm

Syllabus:
IM4420 Dynamic Web Apps Spring 2010

Week 1 | Week 2 | Week 3 | Week 4 | Week 5 | Week 6
Week 7 | Week 8 | Week 9 | Week 10 | Week 11

http://en.wikipedia.org/wiki/Open_source
An article about the Free Software Foundation by John Keston

Download: PHP Problem Set 1
1. All PHP problems within a “set” are due by the beginning of class on the next day that the class meets.
2. Each solution must be available via links on the OLS or comparable hosting and copied to the drop off drive.
3. Solutions to each problem set will be given during demonstrations on the day that they are due.
4. Grades will be collected during the solution demonstrations by an assigned classmate.

Session 2: Today we’ll be watching Revolution OS. “Revolution OS is a 2001 documentary which traces the history of GNU, Linux, Free Software and the Open Source movement. It features several interviews with prominent people, including Richard Stallman, Michael Tiemann, Linus Torvalds, Larry Augustin, Eric S. Raymond, Bruce Perens, Frank Hecker and Brian Behlendorf. It was directed by J.T.S. Moore.” – Wikipedia

After watching the film we will have a brief discussion about it and then begin going over the requirements for our first assignment. Our first assignment involves researching Open Source applications that use PHP and MySQL. We will compare and contrast a minimum of two OS projects keeping in mind that we will be implementing one of the examples.

Dynamic Web Applications – Research Project
Due: Session 1, Week 3

Write a six page double spaced research paper comparing and contrasting two Open Source web application projects. Use the resources listed to browse existing projects. Make sure that at least one of the projects you select uses PHP and MySQL. A prominent example for us is aim.aiiresources.com, which uses the popular content management system (CMS) – Joomla. Take your time and browse many examples until you find two that capture your interests. Make sure that you answer each of the following questions in your research. We will discuss your papers in class on Session 1, week 3. Note: please do not include WordPress as one of your examples because we are using it for the first project.

1. Why did you select each of your projects? What was it that attracted you to each example?

2. What sort of features are available in each project and how can they be applied as solutions for typical web based needs?

3. What are the requirements for implementing each example? What technologies are involved? Is a database required, etc.?

4 . Address the history of each project. What are the current versions? How long have the projects been active and who makes up the community surrounding them?

5. How would you use these projects? What kind of businesses or organizations could make use of these projects and how?

Delivery: Post your research paper to the Dynamic Web Applications forum on aim.aiiresources.com, and turn in a stapled paper copy to me for grading.

Resources:
www.freshmeat.net – The webs largest index of mostly unix and cross-platform software
www.sourceforge.net - A complete database of Open Source projects.
www.opensourcecms.com – Try before you bu… install.
CMS Matrix

aim.aiiresources.com
www.audiocookbook.org
www.opensourcecms.com
www.cmsmatrix.org
www.thegoldenmean.com
bmwmcq.org.au
www.jazzclube.com

Session 2: Today I’ll be demonstrating the installation process of WordPress. Some of the tools we will look at for this process are SSH (Secure Shell), FTP, Dreamweaver, and phpMyAdmin (Web based MySQL database manager). I will demonstrate how to set the permissions and troubleshoot error messages that arise during the installation process. Be prepared by downloading the latest version of WordPress, and make sure that your hosting environment supports the minimum requirements (the OLS will work).

Dynamic Web Applications – Open Source Implementation Project
Due: Session 2, Week 5

The purpose of this project is to learn the ins and outs of the installation, implementation and customization of dynamic, web-based, Open Source applications. We will be implementing WordPress, which uses the LAMP (Linux, Apache, MySQL, PHP) architecture, on your own hosting environment or the OLS. After successfully implementing the software fully test the software and then customize it by changing the look and adding and removing features or functionality. Follow the outline below as a guideline for your procedure.

1. Evaluate The OS Project Requirements
   • Check and compare the version of the server software required (PHP, MySQL, etc.)
   • Make sure your hosting platform is compatible (XP vs Linux / Apache vs IIS, etc.)
2. Review the Installation Documentation (readme files, etc.)
3. Download and Decompress the Software
4. Upload the Software to the Server
5. Setup the Database if Required
6. Follow Installation Procedures
7. Test the Installation
   • User Areas
   • View Content
   • Check Functionality
   • Administrative Areas
   • Add Content
   • Edit Content
   • Delete Content
8. Add Live Content *
9. Change the Look/Feel (re-skin/theme)
10. Customize
• Add Features
• Change Features
• Remove Features

WordPress Specific Requirements:
1. Extend your implementation by installing 3-5 WordPress plugins that fit the topic of your project.
2. Create a custom theme (you may start by modifying an existing WordPress theme).
3. Use “Template Tags” to extend your theme.

* Decide on a topic for your content. You might invite others to contribute content, or write abstracts of relevant articles.

Download: PHP Problem Set 2
1. All PHP problems within a “set” are due by the beginning of class on the next day that the class meets.
2. Answers must be available via links on the OLS or comparable hosting and copied to the drop off drive.
3. Solutions to each problem set will be given during demonstrations on the day that they are due.
4. Grades will be collected during the solution demonstrations by an assigned classmate.

Ultimate Linux Reference Guide for Newbies

Session 2: Now that we all have a good start on the Open Source Implementation project it is time to start discussing our next and final project which involves either extending an application like WordPress by writing plugins or hacking the framework, or developing a dynamic web application of your own. There are many types of applications that are acceptable for this project. Here’s a list of a few examples to get you started.

1. E-Commerce – Developing a custom e-commerce system is an excellent asset for clients and employers.
2. Dynamic Content Management – The point is to allow the customer to edit their content without help from a developer.
3. Forums / Message Boards – These tools are important to community sites and organizations.
4. News / Blogging – News sites and blogs are a large part of the content on the internet and can be quite useful tools.
5. Calendar / Event Manager – Another example of useful tools for community sites, and others.

Other examples may also be acceptable. Consult with me about your ideas regularly. Once you have decided what sort of application you’ll be developing you need to start the planning stage. Start by writing a summary of what the application will do followed by a list of features. Try to think of all the details and requirements for each of the features. Make notes of web sites that have similar tools and resources that apply to what you are building. Later we will discuss the formal requirements for the planning stage, but I want you to start thinking about your projects right away.

Download: PHP Problem Set 3
1. All PHP problems within a “set” are due by the beginning of class on the next day that the class meets.
2. Answers must be available via links on the OLS or comparable hosting and copied to the drop off drive.
3. Solutions to each problem set will be given during demonstrations on the day that they are due.
4. Grades will be collected during the solution demonstrations by an assigned classmate.

1. Do you write from the ground up or use a framework?
1. If a framework, which one?
2. If not, plan ahead for an extended timeline
3. Consider security issues and cost of development cycle
2. What features will be required? Details regarding each feature are very important in the planning stage.
3. Is a database needed? Most often it will be needed, but in some cases it’s not necessary.
4. Illustrate the forms and other web pages in the application. This will help you discover features and structure.
5. Define the database schema. Think about how many tables will be needed and how the tables are joined.

Session 2: In class today we will be reviewing some SQL syntax, focusing on the DDL. I’ll be going over a few examples of CREATE TABLE statements and discussing the datatypes involved. In lab I’ll be looking at everyone’s progress so far. The Implementation Projects are due a week from today. At this stage you should be finished with steps 1 through 8 and working on steps 9 and 10. Manipulating the look/feel/design and adding/customizing features is the most time consuming aspect of this kind of development so make sure that you’re spending most of your time on these steps.

CREATE TABLE statement examples

Reading Assignments:
Explanation of Database Indexes
MySQL Documentation for the ENUM datatype
MySQL Documentation for Foreign Key Constraints

Template Tag Explanation Assignment:
In class on session 1 of week 5 please be prepared to describe the details about one of the template tags that you are using in your implementation project. Do research so that you can tell us what features the template tag has and what arguments are necessary to produce those behaviors.

Web Applications Final Project Plan Requirements
(In progress)

1. Title Page (include TOC, etc.)
2. Project Overview
3. Feature List (w/Brief Descriptions for each Feature)
4. Database Flowchart / Schema
5. Wireframes (make sure forms are included)

Also: Template Tag Explanation Assignment Due Today

Session 2: Today we will be presenting our Open Source Implementation Projects. Presenting your project is required and worth a minimum of one half of one grade point. As you present, discuss why you selected the software you used, how you customized the features and what you did to change the visual nature of the front end.

The following code example displays a tag cloud in your sidebar and then prevents tag with only one topic from being show in the cloud.

<?php
    $defaults = array('smallest' => 11, 'largest' => 27, 'unit' => 'px', 'number' => 100,
                      'format' => 'array', 'orderby' => 'name', 'order' => 'ASC');
    $tags_array = wp_tag_cloud($defaults);
    //print_r($tags_array);
    $needle = ' topics';
    foreach( $tags_array as $tag ) {
        if ( stristr($tag,$needle) ) {
            echo( $tag." " );
        }
    }
?>

WordPress Plugin Developer Resources:
Writing a WordPress Plugin
Your First WordPress Plugin (Video)

Session 2: Today we will analyze some examples that are further developed. We will look at a working version of these examples and then take a quick look at some of the source code, paying particular attention to new functions and techniques.

WordPress Plugin Exercise:
1. Write a WordPress plugin to display the “age” of a post
2. Display the days, hours, and minutes in a human readable form
3. Try using the template tag the_time()
4. Try also using the WordPress function human_time_diff()

Final Project Schedule:
Session 2, Week 7 – Final project concept presentations (explain to class your concept)
Session 1, Week 8 – Final project development plans due (paper copies of finished devplans)
Session 2, Week 8 – First of three progress reports (show code, get feedback, etc.)
Session 1, Week 9 – Second progress report
Session 1, Week 10 – Discuss take home final essay questions
Session 1, Week 10 – Third progress report
Week 11 – Final presentations

Session 2: Template engines are another tool to help build complex web based applications. Usually the purpose of a template engine is to help separate the presentation layer from the logic, or back-end. One example of an Open Source templates engine project is Smarty. Here’s a brief description from their website:

Although Smarty is known as a “Template Engine”, it would be more accurately described as a “Template/Presentation Framework.” That is, it provides the programmer and template designer with a wealth of tools to automate tasks commonly dealt with at the presentation layer of an application. I stress the word Framework because Smarty is not a simple tag-replacing template engine. Although it can be used for such a simple purpose, its focus is on quick and painless development and deployment of your application, while maintaining high-performance, scalability, security and future growth.

There are hundreds of AJAX resources and tutorials available online as well as books. Here’s a list of some of the more popular online resources available:
JQuery
MooTools
ajaxwith.com
The AJAX Revolution
Round-up of 30 AJAX Tutorials
AJAX, Get Started, Resources & Tutorials

Session 2: Steal This Film is a documentation of events during the Spring of 2006 regarding actions taken by the MPAA against the Swedish Bittorrent tracker site The Pirate Bay. The film highlights the futility of action by the MPAA and RIAA against file sharing, and also provides an insight into how the application Bittorrent works as well as torrent tracking database and search site tools. The film can be downloaded (without violation of any copyright laws) from stealthisfilm.com.

Creative Commons – This portal to free media provides a license to protect free content from being commercialized.
The Freesound Project – This excellent library offers over 1 terabyte of sounds (not songs) licensed under Creative Commons.
ccMixter – A community music site featuring remixes also licensed under Creative Commons.
archive.org – Internet digital library formed in 1996. Content includes film, music, images and more.
The Prelinger Archives – Over 1,000 public domain films from the worlds of government and advertising.

Session 2: Fine tuning the source code in your applications typically happens in the development stage, however sometimes (either due to a lack of planning, or unrealistic deadlines) the priority is to make it work and fix it later if there’s time and a budget. Today I’ll show you a couple examples of how I have fine tuned my project. Most of these examples do not change the functionality, but shorten the code or make it more efficient.

1. Web applications have a significant impact on the way we lead our lives today. Social networks like Twitter, Facebook, and Myspace along with e-commerce sites like eBay, Amazon and iTunes have changed the way our society operates. Beyond email and instant messaging, how have web applications effected your day to day activities? Are these effects on our lives positive or negative and in what way?

2. If you had the means to create any kind of web enabled, interactive application that doesn’t currently exist what would it do? How would it improve your personal life, workflow, art, or community?

3. Out of all the web applications we have looked at in this class, what do you find the most functional and well developed? What makes this application stand out? What purpose does it serve and how do organizations and individuals use this software?

4. What role do you think Open Source software and Open Content will play in the future? Will sites like Wikipedia play a role or are they too unreliable to be taken seriously? Will Open Source software be viable or are we better off using propriety software?

Session 2: Final project progress reports are scheduled for today.

Session 2: Final presentations. Take home final essay questions due.