[SOLVED] CSCI399 Autumn Session 2015 Assignment 3: ADOdb, Smarty, and more HTML5

CSCI399 Autumn Session 2015

Assignment 3: ADOdb, Smarty, and more HTML5

• Aims
• Objectives • Tasks
• Submission

Aims

5 marks

This assignment will give you a first taste of automated Object Relational Mapping systems with ADOdb, some experience with template style page generation with Smarty, and a little more practice with HTML5.

Objectives

You are to implement a simple PHP application that allows a user to create a “movie” data base, and perform simple searches in the stored data.

The objectives are for you to:

• Learn how to use the ADOdb database library and its ActiveRecord component that implements a simple object relational mapping system.
• Learn how to exploit the Smarty template system and thereby separate HTML page generation from more complex PHP code.
• Exploit the OS drag-and-drop features of HTML5 (as supported by current versions of Chrome and Firefox browsers).

  It’s an easy assignment – particularly if you read through all my examples first.

  Tasks

  You are to create a simple web application that allows a user to create “movie” records and search amongst these records.

The application has the following components:

1. AddMovie
   This component displays a form used to create a new record. Data submitted using the form are checked and used to create an entry in a primary data base table and, possibly, multiple entries in a supplementary table. (Details of the tables are given below).
   The data used to create a movie record included an enumerated category – Fantasy/Sci.Fi, Chick, Drama, Crime, Action, Comedy, Kids, ….
2. Search
   This component displays a very simple form – the user specifies the category of those records that are to be retrieved. The script that processes the category selection will return a page with a table of names of those movies in the selected category; these names act as links to the final component which will display details of a particular movie.
3. DisplayMovie
   This script will be invoked with a “Get” query string argument with the movie identifier. It will respond with a page presenting all details relating to that movie.

Database access is to utilize the ADOdb library. Procedural style use of the library would be appropriate when retrieving names and identifiers of movies in a particular category (Search). The ActiveRecord ORM parts of ADOdb should be exploited when creating and retrieving complete records.

Smarty template style outputs should be used for the search reports and the details of a chosen movie.

Details

Your Netbeans project should be something like mine:

I chose to use MySQL for my database. My table definitions were:

drop table Moviesupps;drop table Moviemains;commit;

create table Moviemains (
id int auto_increment primary key,
movie varchar(45),
mgroup enum (‘FANTASY/SCI.FI’, ‘CHICK’, ‘DRAMA’, ‘CRIME’, ‘KIDS’,

'COMEDY', 'ACTION'),info text

);

create table Moviesupps (
id int auto_increment primary key,
fk_movie int,
photo mediumtext,
photocomment text,
constraint foreign key(fk_movie) references Moviemains(id)

);

In this exercise, I chose a somewhat unusual approach to storing the picture data. On the client, I am using OS “drag-and-drop” to copy pictures into the form – this automatically gives me a “URL data encoded” version of the picture data (a long text string). I upload and store the pictures in the data table in this URL data encoded format. This has the disadvantage of using approximately twice as much storage as a binary picture. There are two advantages. Firstly, I don’t need to code for different picture formats (the URL encoding deals happily with GIF, JPG, PNG etc). Secondly, I can return a complex page with embedded pictures as a single response, and so I do not have to make any provision for separate requests for the picture data.

Adding a movie

The initial form page from the “Add Movie” script should appear something like the version shown below.

The form initially shows:

• A text input for the movie name.
• A select input with the categories.
• A text area for a brief outline.

  There is also a section for supplementary data. These data will consist of pairs of pictures and comments. There is a little Javascript associated with the supplementary data – the script needed to handle OS drag-and-drop of a picture, and code to add extra DOM elements that will make these data part of the form.

Use of the “add data” button in the “Supplementary data” section will result in the creation of additional DOM elements – an element to which a picture file can be dragged (a reduced scale version of the picture will be displayed), and a textarea input for a comment.

OS drag and drop should be used (will work in modern version of Chrome and Firefox):

When all data have been added to the form, the “Create Record” submit button is used to submit the data to the script that creates the database records. The data are submitted using standard www-urlencoded format; the images (as text) and comments are uploaded as photo[] and comment[] multi-valued elements.

The acknowledgement for a successful create operation is trivial:

Search

Search is simple – a form to let the user specify the category, and a report (generated via Smarty and a template) to list the movies (as links to the DisplayMovie script).

Display a movie

The DisplayMovie script will retrieve all data for the selected movie (using ActiveRecord style use of ADOdb) and display these data with the help of Smarty and a template file:

ActiveRecord

Getting the names correct for ADOdb’s ActiveRecords can be a little tricky as it insists on certain naming conventions.

For the MySQL table definitions given earlier, the ActiveRecord mapping will involve:

And

If a retrieved movie record is passed to a Smarty template (as ‘data’), the $data object used by the template would have simple members for movie title ($data->movie), and outline, and an array member for the associated supplementary data ($data->Moviesupps). Each element in the Moviesupps array would have members for photo and photocomment.

Submission

The due date for submission will be announced in lectures; provisionally set for Friday April 24th.

You are to submit a report with:

• An overview of the application
• Your PHP scripts, Smarty .tpl template files, Javascript, and CSS files.
• Evidence for the system working.

  turnin

  For CSCI399, asignments are submitted electronically via the turnin system. For this assignment you submit your assignment via the command:

  turnin -c csci399 -a 3 A3.pdf

  Late submissions would be submitted as:

  turnin -c csci399 -a 3late A3.pdf

  Remember, turnin only works when you are logged in to the main banshee undergraduate server machine. Transfer your report file to banshee using an ftp client. Then login via ssh and run the turnin program.

  Mark distribution

  Overall presentation and appearance of Web site – 1 mark
  Evidence for everything working – 1 mark
  PHP and Smarty template code – 2 marks
  Javascript that handles the supplementary data and the picture file drag-and-drop – 1 mark.