› › ›

Making basic js website database loading and saving to csv on server

homesliceukhomesliceuk
edited December 2013 in JavaScript Mode

Hello,

Processing Sketch

In the summer I programmed an interactive installation that collected short texts (15 char max) from typed input and allowed 2 other people to vote the input up and down (3 screens/input stations total).

I should give shout outs to Chrisir, dimkir, PhiLho, GotoLoop, and others for getting me over the hump in making this :)

So there was;

  1. Text Entry Station

  2. Text Search and send to Voting Station

  3. Text Voting Station

The resulting texts and scores were displayed in three extra screens that showed live updates of

  1. The Top Ten Texts Display

  2. The Latest Texts Display

  3. The Bottom Ten Texts Display

All in Processing 2.0 on a Windows 7 PC. I used extended desktop to show the 6 screens with the 1 sketch running all of them.

The Entries are stored in an ArrayList of Class Entry with variables for Index, Score, Text String, and a Voted Boolean.

(The Entries ArrayList is saved incrementally on a timer to a csv with the score in column 0 and the text string in column 1. On closing and reopening, this csv loads the last csv, and the row number of each Entry becomes the Index Variable in each Entry class).

The Entries ArrayList is sorted by a Java comparator on a timer for;

  1. The Youngest unvoted Entry (High Index, Voted Boolean == false)

  2. The Top Ten Scoring Entries (Highest Score)

  3. The Youngest Entries (Highest Index)

  4. The Bottom Ten Scoring Entries (Lowest Score)

Interaction added new Entries to the ArrayList, or changed the Score for Entries by Voting them up or down.

Website Version

I'd like to make my sketch installation into a standalone website, and I've been advised that a simple way to do it is to have a csv on the web server, and access that from a processing .js sketch.

This would be a simple database, but I wonder if anyone could point me in the right direction/offer advice. I have already looked at the processing.js site and started working, enough to find the arraylist and java comparator do not work. ( I can try HashMap, Associative Array, and some other comparator logic I think, but that is not my first worry...)

The key issues I am looking at are as follows;

1. Database - I'm in the dark about web programming, so wanted to have as simple a solution as possible. Is a web server based **csv accessed by processing.js sketch viable? **How would I even set it up? (any pointers for starting welcome, I cannot make sense of the alphabet soup that is out there, and don't even know how to start or what to put where)

2. Can this sort of basic database setup work? - The js sketch would need to save the Entry Array to the web server CSV with each entry or vote. It would also have to access the CSV on a timer to refresh the Entry Array.

3. I managed the processing, but I am awful with Web programming - I've been looking for advice, but cannot see how to even start (although I am trying Schiffmans PHP tuts). The various options I see are PHP, jQuery, mySQL, JSON, Apache, Ajax, XML, nodeJS, ASP.

Dear god, can I make this simply? It's just a two column CSV with a processing.js top.....!!!

I made a diagram of what it should do ideally. Advice on first steps to a limited version would be welcome first. But I wanted to be clear what I was doing.

image alt textefhs

Kind Regards, Jeff Homeslice

Tagged:

Best Answer

Answers

  • mbraendlembraendle
    edited December 2013 Answer ✓

    It's definitely feasible.

    IMO, a light version would involve the following:

    • the CSV file server-side
    • a PHP script that accepts users entries and updates the CSV
    • a PHP script which is accessed by ProcessingJS using loadXML(). The PHP script parses the query parameters in the URL specified in loadXML, reads the CSV, sorts the values server-side and creates an XML response which is then parsed by ProcessingJS using the known XML functions.

    In the full version, the CSV would be replaced by a MySQL database, and the two PHP scripts need to be modified slightly to access it instead of the CSV. The database scheme looks pretty straight-forward to me, a single table with a few fields (timestamp, score, text).

    A few side notes:

    • ProcessingJS works perfectly with ArrayLists.
    • Refresh of data would be done client-side by sending an updated query to the web server.
    • If you want to have a look at a large ProcessingJS project that interacts and interfaces with a database, PHP, AJAX components, and Scalable Vector Graphics, you may consult the LibraryNavigator website and start inspecting the code starting with the web page source code. Contact me off-list if you need further details.
  • homesliceukhomesliceuk

    Thanks so much! That's the sort of info that's very useful right now - cheers.

    I just downloaded Wamp, so am starting with that, and suddenly things look a bit clearer.

    Could I ask you a few things? I put the questions here for everyone's benefit,

    • Would XML add anything really needed? I have seen many pro-CSV posts....
    • What would mySQL bring to this party?
    • Would the new query be just accessing the CSV file again?

    Thanks for your offer, I'll digest this, do some work, and post some results.

    Cheers, Jeff

  • mbraendlembraendle
    • I prefer XML over any other format since it allows to transport a more complex data structure, and due to its definition clearly separates content from markup. Of course you can use loadStrings() with ProcessingJS, too. However, CSV is not CSV. CSV is linear, and may lead to problems if characters that serve as separators (e.g. a comma, or a double-quote) are part of the content.

    • A database essentially would have the following benefits:

      • a way to structure your data (in a data scheme) and store it in a structured manner
      • a way to query and deliver only fragments of data that are of interest (using a query language formulating a query like "send all data that has been stored between 1st and 3rd December 2013, was entered by males, and for which keywords start with the letter A", or "send only the timestamps for the same query"
      • the possibility to sort data by multiple criteria
      • a way to store a time log and even to do rollbacks and restores (what has happened 4 weeks before member X accidentally deleted 5000 records)?

      Appetite starts with eating.

    • yes. If the CSV file is large, a database would be favorable.

Sign In or Register to comment.