CODE CREATIVE
SAVING COOKIES
Sending data using a form
TASK #1
TASK:
Add a
form
below the "Cookies per Second" div box.

HINT:
Use the form structure found here to add a form in the appropriate location.

CHECK UP:
Watch the video below to check that you completed the task.
TASK #2
TASK:
Add
hidden
inputs for each value to be saved.

HINT:
Create hidden inputs to the form that mirror what you would like to save in the database, namely the number of
cookies
, the
cps
, and the
number
of each building owned.

CHECK UP:
Watch the video below to check that you completed the task.
TASK #3
TASK:
Add a submit button that says ‘save’, whose action goes to cookie_save.php.

HINT:
Add an input of type
submit
and set the value attribute to
submit
ensuring that text is written on the button.

CHECK UP:
Watch the video below to check that you completed the task.
TASK #4
TASK:
Receive the
POST
array in
cookie_save.php
.

HINT:
Create a set of variables whose names
mirror
the name values of each input. Store the data that is in the $_POST array into these variables for ease of use.

CHECK UP:
Watch the video below to check that you completed the task.
TASK #5
TASK:
Connect to the database.

HINT:
You will need to create a set of variables that store the name of the
host
,
user
,
password
, and
database
. Use this data as arguments in the mysqli_connect function to connect to the database.

CHECK UP:
Watch the video below to check that you completed the task.
TASK #6
TASK:
Select the appropriate table and prepare and run the UPDATE query setting all the number of buildings in the database.

HINT:
You will need to create a variable to store the query and prepare it according to the example above. After preparing the query, you will need to run the query using the
mysqli_query
function.

CHECK UP:
Watch the video below to check that you completed the task.
TASK #7
TASK:
Create columns in the database to receive the data from the UPDATE query.

HINT:
You will need to create a variable to store the query and prepare it according to the example above. After preparing the query, you will need to run the query using the
mysqli_query
function.

CHECK UP:
Watch the video below to check that you completed the task.
TASK #8
TASK:
Check that your web application does save values into the database.

HINT:
You will need to create a variable to store the query and prepare it according to the example above. After preparing the query, you will need to run the query using the
mysqli_query
function.

CHECK UP:
Watch the video below to check that you completed the task.
TASK #9
TASK:
Use the header function to send the application back to cookie_clicker.

HINT:
You can send the program to an html file by using the
header
function. Do this to send the program back to
cookie_clicker
after the database transaction is complete.

CHECK UP:
Watch the video below to check that you completed the task.
TASK #10
TASK:
Create a function in your JS file that will set the values of the hidden input fields appropriately.

HINT:
You will need to create a variable to store the query and prepare it according to the example above. After preparing the query, you will need to run the query using the
mysqli_query
function.

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.