SQL Based Art Database

  1. Parts 0-2 due: November 5
  2. Complete Due: November 14
  • Part 0 - Get the Phone app working as an example.
  • Part 1 - A program that allows the looking up matching artworks by Author, Title, Technique and School.
  • Part 2 - Have a button with each match that displays the artwork.
  • Part 3 - Have an optional pull down for Form and Type to filter all searches by the selected value.
  • Part 4 - Add a notes field to the database. Add a button on each match to see and edit the fields with your notes.
    • Extra creditClick column heading to sort by that column. (can be done with CSS and Javascript)
    • Show picture thumbnails in the matches
    • Add checkboxes to match, then show multiple paintings side-by-side for comparison


Create a SQL based Art database using HTML, Javascript, JQuery, Node.js, and bootstrap.

You will start by looking at the following project: http://cslab.kenyon.edu:8081

You will use this database: art.sql


Step 1 - Get the demo phone app software running from your account and with your Database:

Download the following project and change the port in both javascript files to be your own (>8000): https://github.com/jimskon/PhoneBookNode

Get it running. You will need to:

  1. Download the code: https://github.com/jimskon/PhoneBookNo
  2. Change the port numbers to your own in both .js files
  3. While in the project folder install node packages for mysql and socket io
  4. Create your own version of the database.
  5. Change the database login to use your database, and change the database username and password in the software to be yours
  6. Get the system running with your own database

1. Get the program:

git clone https://github.com/jimskon/PhoneBookNode.git

2. Pick a port number >8000 and change in both files:

phoneApp.js PhoneBookServer.js

3. Install node packages

npm install mysql socket.io

4. The database structure looks like this:

  1. First varchar(30)
  2. Last varchar(30)
  3. Phone varchar(20)
  4. Type enum('Business', 'Friend', 'Family', 'Other')
  5. RecNum int(11)

5. Change the database login credentials in PhoneBookServer.js.

6. Run the program:

node PhoneBookServer.js

and goto: "http://cslab.kenyon.edu:port", where port is the port you chose.

Step 2 - Create The Art Database

You will need to download the art.sql database and load it into you database. art.sql

Use the following command to download the art.sql file to your cslab account:

wget https://cs.kenyon.edu/pub/Main/SoftDevelF2018/art.sql 

Log into your Database:

$ mysql -u username -p 
mysql> use username 
mysql> source art.sql

Go into phpmyadmin to check out the data: https://cslab.kenyon.edu/phpmyadmin

Step 3 - Get the system to work with your database.

Make a clone of the phone system, and start to modify it to work on the art database.

Step 4 - Add the search functions

Allow the looking up matching artworks by Author, Title, Technique and School. Print the matches in a table, The matches should be based on any substring.

Step 5 - Add a button to each match that brings up a modal with the picture of the art.

The user can view the art, and then dismiss

Step 6 - Add a pulldown for each of Form and Type.

If either or both are selected, all searches are limited to ones that match these settings. There is a option in each list to match all.

Step 7 - Add a field to the database for notes.

Add a big field to the database. Then add a button for each match that opens a modal with a text box that displays the note field in a "textarea". The user may edit the text, and hit a "save" button to update.




Topic attachments
I Attachment History Action Size Date Who Comment
PNGpng Screen_Shot_2017-11-13_at_9.21.20_PM.png r1 manage 280.6 K 2017-11-14 - 02:22 JimSkon  
PNGpng Screen_Shot_2017-11-13_at_9.25.46_PM.png r1 manage 152.8 K 2017-11-14 - 02:27 JimSkon  
PNGpng Screen_Shot_2017-11-13_at_9.25.56_PM.png r1 manage 221.2 K 2017-11-14 - 02:27 JimSkon  
PNGpng Screen_Shot_2017-11-13_at_9.26.24_PM.png r1 manage 209.9 K 2017-11-14 - 02:27 JimSkon  
PNGpng Screen_Shot_2018-03-29_at_4.15.48_PM.png r1 manage 125.6 K 2018-03-29 - 20:18 JimSkon  
PNGpng Screen_Shot_2018-03-30_at_10.09.17_AM.png r1 manage 87.4 K 2018-03-30 - 14:09 JimSkon  
PNGpng Screen_Shot_2018-10-31_at_12.20.23_PM.png r1 manage 50.4 K 2018-10-31 - 16:20 JimSkon  
Edit | Attach | Watch | Print version | History: r13 < r12 < r11 < r10 < r9 | Backlinks | Raw View | Raw edit | More topic actions
Topic revision: r13 - 2018-11-14 - JimSkon
This site is powered by the TWiki collaboration platform Powered by PerlCopyright © 2008-2019 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback