RUNNING EXPERIMENTS on the web USING Processing

Combining: PROCESSING, JavaScript, HTML, CSS, PHP, & mySQL code

prepared by Inga Jonaityte Wednesday, November 27, 2013

Starter kit •  WEB ADRESS

–  Domain (e.g. experiment.it) –  Subdomain (e.g. experiment. website.it)

•  Web server –  To host webpage files –  To host your mySQL database

•  software –  Website design: e.g. Dreamweaver (or any free text editor) –  Applet coding: Processing 2.03 –  FTP transfer: e.g. FileZilla –  Creating a local server (optional):

•  MAMP (Mac, Apache, MySQL, and PHP) •  WAMP (Windows, Apache, MySQL, and PHP)

HTML-CSS-JAVASCRIPT-PHP-MySQL •  File TYPES:

– PHP script (*.php) – HTML document (*.html) – CSS code (*.css) – Javascript (*.js) – Processing (*.pde) – MySQL database (*.sql)

PHP - communicates with the MySQL server to retrieve records based on a

user’s query

DINAMIC Web Application

AppLICATIION Server •  Web Server •  Serves/Stores HTML •  Interprets PHP

Database Server •  Stores / Serves Data •  MySQL Client (Browser)

• HTML, CSS, & XML • JavaScript & Java Applet

internet

Web server

input, parameters

HTML response

MVC (Model-View-Controller ) model •  Functionality :

–  MODEL: •  maintaining data, the software logic, database

access) •  PHP scripts (manage variables or that access data

stored in MySQL database) –  VIEW:

•  the user interface, display components, presentation to end user

•  HTML (to create the basic structure of the view) •  CSS (to give the shape to this basic structure) •  JavaScript generator

–  CONTROLLER: •  communication between users and model,

handling events that affect model & view •  JavaScript •  AJAX

Controller

View Model

MCV TRIAD – DETAILED STRUCTURE

Model •  Encapsulates  applica-on  state  •  Responds  to  state  queries  •  Exposes  applica-on  func-onality  •  No-fies  views  of  changes  

View •  Renders  the  models  •  Requests  updates  from  models  •  Sends  user  gestures  to  controller  •  Allows  controller  to  select  view  

View Selection

State Query

State Change

Method Invocations

User Gestures

Change Notification

Events Controller

•  Defines  applica-on  behavior  •  Maps  user  ac-ons  to  model  

updates  •  Selects  view  for  response  •  One  for  each  func-onality  

•  Intermediary between the model and the view

•  Any other resources needed to process the HTTP request and generate the web page

•  Handling interaction with data: retrieve, insert, update information in the database

•  Returning data without formatting

•  The info is being presented to the user •  Applying formatting to resulting data for

presentation

MVC architecture

VIEW LAYER

MODEL LAYER

CONTROLER LAYER

internet

Layout

View Logic

Template

Action

Front controller

DATABASE Data Access

Data Abstraction

1

9

2

3

6

7

8

4

5

What happens at EACH ROUND OF THE GAME?

VIEW LAYER

MODEL LAYER

CONTROLER LAYER

internet

GAME

Sends data to PHP

JS Gets user data

from .PDE, shows game

to user

DATABASE

Data Stored In Database

1

7 4

5

3

6

the LANGUAGE DISTRIBUTION

•  according to physical machines : –  Server Side: PHP & MySQL –  Client (user) Side: HTML/CSS, JavaScript

& Processing

HTML, cSS Display

User, Client

Form, parameters

HTML response

SQL Query / Data

Result set

WEBSERVER Running PHP interpreter

MySQL Database

Web 2.0: Dynamic web –  JavaScript

•  specifies web page interactivity and presentation

•  talk with PHP code on the web server to update data or presentation (either on server or web page)

•  performs data handling & server requests in background

•  can –  change all the HTML elements, attributes &

CSS styles –  remove existing or add new HTML

elements & attributes –  react to all existing HTML DOM events –  remove and create new HTML events

DOM = Document Object Model CSS = Cascading Style Sheets

control appearance of web elements in a HTML document, style the data

PHP - handles main work on web server and retrieves data MySQL - manages and stores data

AJAX –  AJAX = Asynchronous JavaScript and XML.

–  AJAX is a technique for creating fast and dynamic web pages.

–  AJAX is the art of exchanging data with a server, and updating parts of a web page - without reloading the whole page.

–  AJAX uses a combination of: •  XMLHttpRequest object (to exchange data asynchronously with a server) •  JavaScript/DOM (to display/interact with the information) •  CSS (to style the data) •  XML (often used as the format for transferring data)

PHP: FORMS <div id="formDiv"> <form name="registration"

id="regForm" action="login.php" onsubmit="return formValidation();" method="POST">

<ul> <li><label for="username">

Username*:</label></li> <li><input type="text" name="username" id="usernameID" size="50" /> <p class = "feedBack”

id="usernameFeedback" > </p> </li> …

Calls login.php

Uses POST method

AJAX: EXAMPLE Contains the user’s

query

PHP script out

POST

reg.php

login.php

POST method

TESTING YOUR *.PDE SKETCH IN A BROWSER

•  Running your *.PDE sketch in JavaScript automatically generates a web-export folder with your *.PDE sketch and processing.js files inside of it.

•  Note: it is better not to use any add-on libraries in your sketch code as these libraries might not work properly in JavaSript.

<!DOCTYPE html> <html>

<head>

<meta charset="utf-8"> <title>WELCOME TO THE GAME!</title>

<script type = "text/javascript" src = "jquery.js”> </script>

<script src=\"processing.js\"></script>

</head> <body>

<h1>Processing.js Test</h1>

<p>This is my web-based experiment sketch:</p> <canvas id="mysketch"

data-processing-sources="mysketch.pde"></canvas>

</body>

</html>

Javascript: INCLUDING your *.PDE sketch in HTML

•  Processing.js converts your Processing code to JavaScript and runs it. Processing.js is written in JavaScript, and uses HTML5's <canvas> element.

•  Here, Processing.js is loaded to run mysketch.pde sketch on the web.

•  mysketch.pde is my sketch that we wish to run on the webpage, placed inside <canvas> element

•  JavaScript elements are loaded in the <head> section of a HTML file.

Place code in between: <body>

…. </body>

The name of .pde sketch

EXAMPLE: Adding *.PDE sketch to HTML CODE

EXAMPLE: Adding *.PDE sketch to HTML CODE

Making JAVASCRIPT SEE THE *.pde SKETCH IN HTML

var mysketch = Processing.getInstanceById('mysketchid');

This gives a direct reference to the sketch, and

everything in it, allowing to call any function and

examine and modify any variable that is in the

sketch.

SEND DATA FROM *.PDE FILE TO Javascript Lets look closer Element #1: interface

Element #2: bindJavascript(..) function

Element #3: javascript object

SEND DATA FROM *.PDE SKETCH TO javascript Define at the

very beginning

the variables to send to Javascript

Element #1: interface

SEND DATA FROM *.PDE SKETCH TO javascript

Send current round values to Javascript (repeats at

each one of 200 rounds)

Element #4: actual sending of data (place it in the sketch where you need it)

IN HTML, CREATE JAVASCRIPT FUNCTION for binding This defines a function that checks whether

processing.js has loaded our sketch”mysketch” yet.

If not, it tries again 250ms later.

we pass the javascript "this" value (refers to the global javascript environment for the current window), and tell processing "this conforms to your JavaScript interface (element #1), then it looks for “processingToJavasript(int round…) function

Javascript code inside webpage:

getting data from

*.PDE sketch and sending

it to PHP

Lets look closer at this part

JS (In html): GET DATA FROM *.PDE & SEND TO PHP <script type=\"text/javascript\"> // GET DATA FROM PROCESSING function processingToJavascript( roundNum, wCase, vCase, pCase, joinedRandomNumbers, joinedWeights,sumFaceValue, decision, confLevel, reactionTime, feedbackTime, confTime) { // SEND DATA TO PHP (jquery) $.post(\"inGame.php\",{username:username, roundNumPHP:roundNum, wCase:wCase, vCase:vCase, pCase:pCase, joinedRandomNumbersPHP:joinedRandomNumbers, joinedWeightsPHP:joinedWeights, sumFaceValuePHP:sumFaceValue, decisionPHP:decision, confLevelPHP:confLevel, reactionTimePHP:reactionTime, feedbackTimePHP:feedbackTime, confTimePHP:confTime}); </script>

PHP script called To send data to

database (see next page)

Javasript Function coresponds to function

defined in *.PDE file

PHP script config.php (that

contains connection

information: login & password) called

To connect to database

PHP script executes mysql query inserting the above variables in correspoding

database

TIP: Session VARIABLES IN PHP – A visitor accessing your web site is assigned

an unique id, the so-called session id. – A PHP session variable is used to store for a

user session that is available for all pages.

Reg.php login.php endGame.php

SESSION VARIABLES

POST& GET POST& GET game.php POST& GET

Cpanel & phpMyAdmin

phpMyAdmin •  Mysql

–  is a database system used on the web –  is a database system that runs on a server –  the data in MySQL is stored in tables.

PhpMYADMIN INTERFACE

Create new table

Edit structure

(variables) of each

table

4 tables inside the “Chernoff database”

Export tables

One by one

Enter SQL Query to extract

specific data

EXAMPLE: “USER TABLE” DATA from html FORM

EXAMPLE: “GAME TABLE” DATA FROM *.PDE FILE

Comment table

EXAMPLE: COMMENTS TABLE DATA FROM *.PDE FILE

DATA EXTRACTION FROM TABLES: SQL Basics Queries

DDL (Data Definition Language) DML (Data Manipulation Language)

•  SELECT - extracts data from a database

•  UPDATE - updates data in a database

•  DELETE - deletes data from a database

•  INSERT INTO - inserts new data into a database

•  CREATE DATABASE - creates a new database

•  ALTER DATABASE - modifies a database

•  CREATE TABLE - creates a new table

•  ALTER TABLE - modifies a table

•  DROP TABLE - deletes a table

•  CREATE INDEX - creates an index (search key)

•  DROP INDEX - deletes an index

“SELECT” is useful for extracting specific data from multiple tables of your database

EXTRACT: RESPONDENT DATA EXAMPLE #1: RESPONDENTS’ DATA (variables selected & joined from 2 tables):

“SELECT” SYNTAX:

EXAMPLE #1: Choose SQL tab to enter your Query: SELECT…

EXAMPLE #1: Preview of a table generated by the Query above. Press “Go” button to complete data exporting.

EXAMPLE #1: Exporting data using custom CSV format for Excel 2008 and later

EXTRACT: EXPERIMENT DATA EXAMPLE #2: GAME DATA (variables selected & joined from 2 tables):

EXAMPLE #2: Choose SQL tab to enter your Query: SELECT…

EXAMPLE #2: Preview of a table generated by the Query above. Press “Go” button to complete data exporting.

EXAMPLE #2: Exporting data using custom CSV format

Online resources •  Processing.JS:

–  http://processingjs.nihongoresources.com/processing%20on%20the%20web/ –  http://forum.processing.org/two/categories/javascript –  http://processingjs.org/articles/jsQuickStart.html

•  Processing sketches on the web: –  http://sketch.processing.org/ –  http://sketchpad.cc/ –  http://studio.processingtogether.com/ –  http://jsfiddle.net/ –  http://hascanvas.com/ –  www.openprocessing.org

•  Processing: –  http://processing.org/

•  PHP & more: –  http://www.w3schools.com/ –  http://www.php.net –  http://www.tizag.com –  http://www.phpfreaks.com