CODE CREATIVE
ASYNCHRONOUS
Queries running in the background
TASK #1
TASK:
Create a PHP file called
cookie_load_state
.

HINT:
Create a PHP file by clicking
'File -> New From Template -> PHP -> Blank File'
in Aptana.

CHECK UP:
Watch the video below to check that you completed the task.
TASK #2
TASK:
Start the session, create variables that will contain the id, and connect to the database.

HINT:
You will need to run the
session_start
function at the beginning of your PHP script. Next you will need to create a local variable that will store the user's
id
. Lastly, you will use the
mysqli_connect
method to connect to the database.

CHECK UP:
Watch the video below to check that you completed the task.
TASK #3
TASK:
Prepare and run the SELECT query.

HINT:
You must create the
SELECT
query as outlined in the example above using the condition
WHERE id = "$id"
, where $id stores the user's id number. Then you must run the query using the
mysqli_query
function.

CHECK UP:
Watch the video below to check that you completed the task.
TASK #4
TASK:
Receive the result of the query and create an object that will store the data.

HINT:
You must use the mysql_fetch_array function to retreive the results of the query. Now you must create an object that will store the results by creating an
stdClass
object.

CHECK UP:
Watch the video below to check that you completed the task.
TASK #5
TASK:
Use the object to store the data from the database query. Then encode and send out the data.

HINT:
Create attributes in your object that reflect the names of the data they will store. In each attribute, store the appropriate data from the results of the database query. Lastly, you will need to use
json_encode
to encode the object using JSON and echo the data back to the JS file.

CHECK UP:
Watch the video below to check that you completed the task.
TASK #6
TASK:
Parse the JSON data and store the results in a variable.

HINT:
Going back to the JS file, when the state and status of the xmlHTTP object is valid, use the
parse
method to unpack the JSON data from the PHP file and save it into a JS variable called
myObj
. Lastly, you will need to store the data into their various JS variables.

CHECK UP:
Watch the video below to check that you completed the task.
TASK #7
TASK:
Create a JS function called
print_state
that will reflect the updated number of buildings to the web page.

HINT:
You will need to use
getElementById
to set the
textContent
attribute of each div containing the number of buildings to the appropriate variables. This function should be run
after
the JSON data has been parsed and stored.

CHECK UP:
Watch the video below to check that you completed the task.
TASK #8
TASK:
Create a JS function called
cal_cost
that will calculate the cost of the buildings.

HINT:
You will need to create a function that will use a
loop
and the
number
of each building that was retrieved from the AJAX request to calculate the cost of each building. Then you will need to
store
that value into the correct JS variable.

CHECK UP:
Watch the video below to check that you completed the task.


CHALLENGE EXERCISE
  1. Apply the same algorithm to the other buildings in your web application.
  2. Add the other sound files to your web application: background music, clicking on the cookie, and purchasing a building.