CSE 135: Server-Side Web Languages

Summer 2017 | University of California, San Diego CSE Department

Homework #3 - CRUD Exploration - Soundboard App

This homework presents an opportunity to explore a common style of Web application known as a CRUD application. Students should note the homework is not meant to present production caliber thinking given the shortness of available time.

We will build a simple CRUD application for managing SoundBoards. We will use this app to store collections of sounds, images and text on subject(s) that may interest you. Sounds and images can be found online as sample content but you should not use NSFW content in your app. You should be able to store in your database the following information:

  • A collection of soundboards each with title and an indication if the board is public or not
  • A collection of sounds for each individual board including a sound name, an image for the sound and the actual sound
  • Users including a login id, email address, first name, last name and password, and if they are the administrator or not
  • Logging information including number of access of each soundboard, sound, login attempts, login fails, login success, logouts

Your application must:

  • Use HTML5 valid markup
  • Use Twitter Bootstrap or your own CSS
  • Use JavaScript or jQuery if appropriate (no advanced libraries like Polymer, Vue, Angular or React)
  • Use PHP or NodeJS (Express or Plain)
  • Use mySQL
  • Be hosted on your public facing server
  • Provide a list view of the soundboards both public boards and private boards when logged in
  • Support pagination on the list view (5,10,20,all)
  • Sort the columns by clicking headers (single column sort, poster column is excluded from sort)
  • Have an add record feature to submit new data
  • Validate data sent for addition (server and optionally client-side)
  • Have an edit record feature to modify data
  • Validate data that is updated (server and optionally client-side)
  • Provide a delete mechanism with a confirmation dialog to avoid accidental deletions
  • Have a user sign-up mechanism
  • Have a login and logout mechanism
  • Support Admin users who can add/edit/delete users as well as any soundboard or sound they like

Your application may:

  • Provide a server-side only version with server-rendered templates
  • Provide a JavaScript/SPA style application with client renderings and an Ajax/REST approach
  • Provide a robust works both with and without JavaScript solution
  • Borrow logos from the reference version

Your application should:

  • Be written with performance in mind (think RAIL!)
  • Be written with security in mind
  • Attempt to separate concerns and exhibit solid programming style

Your application may not:

  • Use Firebase like the reference version
  • May not use code from the reference version
  • If you have taken CSE134 it is encouraged that you attempt to build the JavaScript and/or Robust version, if you have not taken 134 you may attempt the other form but the server-side solution should be your first priority of focus.

    Back to CSE135


  • 10pts for login/registration and authentication
  • 20pts for sound and soundboard CRUD
  • 5pts for logging
  • 5pts for data validation and sanitization
  • 5pts for database organization and set-up
  • 5pts for code quality and organization
  • 5pts for visual execution markup and CSS
  • 5pts for Readme and discussion explaining app

Total: 60pts

The "robust" version is worth 10pts of extra credit

Please indicate that you are done to the TAs via e-mail by 11:59 PM Sunday 9/3. Your code should be in your repo at that time. Any other turn-in logistics will be provided in Slack