Day 24: thumbnails and detail

Today we will work in a free-form lab with the following objective:

Create a way to display information about a widget and one full-size and three thumbnail pictures of the widget. Allow the users to change which picture is displayed in full-size mode.

You will likely need the <div> instructions from Chapter 8, unless you figured that out on your own based on previous labs.

Upload your lab files and post them to trumpy. Please don't forget to update your trumpy home pages with each lab as they are completed.

Day 22 & Day 23: Madlibs

Today we're going to do 2 things: we're going to look at your code from the other day. I hope those are all amazing.

The second thing we're going to do is we're going to start a madlibs project. Remember madlibs?

First you create a story shell with holes in it, then allow your user to fill in the holes using clues like "noun" and "verb". Then you redisplay the story to the user with the holes filled in using their words. Hilarity ensues.

I am going to leave the exact implementation of the madlibs open to you. We will brainstorm several ways to do this together. Questions:

1. Does this require php or javascript or both?
2. What would each implementation of this project entail? Pros, cons, benefits, shortcomings.
3. What are the various "designs" you can use on the page to make this application? What different techniques could you use? What techniques do you know already that would work in this case? What techniques are covered in your book that would work in this case?

Day 21: Putting it all together

Today we will be back to a lab with individual instruction. I am available via the usual channels for individual consultations through the start of our class on Thursday. Here are your challenges for this week. Read carefully.

WE ARE WORKING FROM CHAPTER 7

On Thursday last week you constructed a form with fields that were sent to a javascript validation routine.

We presumed that the server would pick up the form after the fact. If you worked through the example in chapter 7, you likely ended on Thursday with something that looked a lot like page 314. If not, you likely ended just before this with an example that looked like page 300-301 **OR** 302-303.

Here is your job for this Tuesday:

1. Construct a simple lab21.html form that will show a form to enter data into your widgets table. This will likely look like the html part of what we did in lab 14. (link to lab 14)

2. Have a "submit" button at the bottom that looks like the one on the bottom of page 313 in the javascript book, or like this:

<input type="button" value="Submit to Widgets Table" onclick="enterData(this.form)">

3. Then in the same lab21.html file, make the javascript function(s) to validate the data. This can be a function called enterData() as in the example above. You can also closely follow the example in chapter 7 that is shown on pages 313-314.

What should you validate?

First and foremost, validate for empty fields. You can use the routines you wrote last time, and that are shown on page 302-303.

What else? If you are up for a challenge, you have a price column, you should probably make sure that this is a properly formatted price. Optional.

4. After you've validated that none of the fields are empty in Javascript, you'll pass the successful form over to the php script.

You'll do this in the lab21.html by calling a line similar to the one shown in the example on page 314: form.submit()

(Make sure that the lab21.php script was called in the <form> tag you used to make your form on lab21.html.)

5. In this new file, lab21.php, you'll handle the form data VERY similarly to the way you handled it on Day 14. In fact, your script will likely be identical. Your goal here is to insert the data into the database.

SO - to recap - you'll have 2 files today, lab21.html and lab21.php. Your .html file will have a javascript validation routine in it. Your .php file will be nearly identical to the one you made on Day 14, and will insert the data into the database.

Day 20: Purchase Form

You should have read chapters 2-6 for today. None of the CONCEPTS in these chapters are new. Only the IMPLEMENTATION in this new language might be unfamiliar to you.

Lab for today: A Purchase Form

First, write a form to take a user's name, mailing address address, shipping address, phone number, email address, credit card number and expiration date.

Validate each of these fields according to rules that make sense to you from a business standpoint. What fields are required? What fields are optional? What are the proper data types for each field? Can you restrict the phone number to being just numbers? Can you restrict the zip code field to being just 5 digits and only numeric? What is the best way to do this?

You can use onblur() to validate each field as they fill it in, or you can create a "submit" button that will "submit" the form to a javascript function using onclick() or onsubmit(). (Instead of submitting the form data to a php script, just send it to the javascript function(s) for now. You can print the values in an alert box if you like.)

--STOP HERE AND SHOW ME WHAT YOU'VE DONE--

If you are up for a challenge, do the following:

1. Validate the email address format.
2. Validate the phone number format.

and the most difficult:

3. Implement a credit card number validation routine in Javascript. Here is another description of the Luhn checker:

"For a card with an even number of digits, double every odd numbered digit and subtract 9 if the product is greater than 9. Add up all the even digits as well as the doubled-odd digits, and the result must be a multiple of 10 or it's not a valid card. If the card has an odd number of digits, perform the same addition doubling the even numbered digits instead."

Prompt the user to enter a card number. You can do this in a variety of ways (have them click a button to launch a prompt() box, etc).

Once you have the number, pass this number to a function that performs a series of checks to make sure that this is a valid credit card number. If it is not a valid number, return an error. If it is a valid number, tell the user "thanks".

Here are the checks you will perform:

1. Is this a number? If yes, keep going. If not, return error.
2. Get the length of the entire number - use number.length()
3. Starting at the right, take every other digit and double it. So skip the rightmost digit, and double the next one, and so on.
4. If the result is greater than 10, then add the two digits together.
5. Now add up all the digits. If the sum is divisible by 10, then the number is valid, return success. If not, then the number is not valid, return error.

Hint 1: suppose you have the credit card number stored in a var called "ccnumber". You can use a for loop that increments a counter called "i" and loop through the digits with ccnumber.charAt(i). charAt() will give you a specific digit in the number.

Hint 2: Use the modulus operator, which in Javascript is %. In the algorithm above, step 3 asks you to do something to "every other" digit, starting at the right. How can you determine what every "other digit" is?

First: take the length of the number and divide by 2, take the modulus. The "mod" will either be 0 or 1. (If the number is even, the modulus will be 0, if the number is odd, the modulus will be 1.) Store this mod in a variable.

Next: now that you know whether the number is odd or even, you can determine how to do "every other" digit. Start looping through every digit of the number. (You can start at the left, it's ok. You can use a charAt() and a for loop as described in Hint 1 or on page 192 in your book. Start with a counter set to 0 in your loop.)

Finally: Divide the counter (i) you are looking at by 2 and take the modulus. If the counter you are looking at has a modulus that matches the mod you stored above, then the digit you are looking at is an "every other one" and should be doubled according to the procedure above. If the modulus is NOT matching, this means that you should NOT double this digit.

Day 19: Welcome to Javascript

1. TODAY: functions, onclick, window.prompt, window.alert, conditionals, var data type, parseInt().
   
2. We use <script> tags to enclose Javascript in our pages. <script> tags go in the <head> of the document.


3. We use HTML comment tags to hide script from really old browsers:
   <script type="text/javascript" language="Javascript">
<!-- Hides scripts from really old browsers
function makeAlert()
{
    window.alert("Welcome to my web site.");
}
//ends script hiding -->
</script>


4. Here's a fully functioning script example that we can play with:
   <html>
<head>
<script type="text/javascript" language="Javascript">
<!-- Hides scripts from really old browsers
function makeAlert()
{
    window.alert("Welcome to my web site.");
}
//ends script hiding -->
</script>
</head>
<body>
<br />
Let's all <a href="#" onclick="makeAlert();">Get Alerted!</a>
</body>
</html>


5. In addition to alerting the user, Javascript allows you (the programmer) to "prompt" the user for information, which you can then use for some purpose:
   <html>
<head>
<script type="text/javascript" language="Javascript">
<!-- Hides scripts from really old browsers
function makePrompt()
{
    var name = prompt("Please enter your name: ", " ");
    window.alert(name + ", stay out of trouble!");
}
//-->
</script>
</head>
<body>
<br />
Let's all <a href="#" onclick="makePrompt();">Get Prompted!</a>
</body>
</html>


6. We can also prompt a user for specific inputs, and then take action based on those responses:
   <html>
<head>
<script type="text/javascript" language="Javascript">
<!--
function getDogAge()
{
    var age = prompt("Please enter your age: ", " ");
    var dogage = age * 7;
    window.alert("You may think you're only "
           + age
           + " but, if you were a dog, you would be "
           + dogage
           + " years old!" );
}
//-->
</script>
</head>
<body>
<br />
<a href="#" onclick="getDogAge();">Calculate My Dog Age!</a>
</body>
</html>


7. LAB 1:
   
   • Make a web page called "lab19a.html" in your labs directory.
     
   • Write a javascript function that will prompt the user for 3 exam scores, then print each score in an alert window. (You can use one alert to show all 3 scores)
     
   • Hint: you can use 3 separate variables to store the scores, and 3 separate prompts.
     
   • Now amend your function to show the 3 scores, AS WELL AS the total score.
     
   • Hint: because you're taking numbers from a text input box, you should use parseInt() method to convert the strings to numbers before adding them. Example:
     var score1AsText = prompt("Please enter your score for exam 1: ", " ");
var score1AsNum = parseInt(score1AsText);
     
   • Now add a feature that will AVERAGE the 3 scores and print that in the alert window, along with the 3 scores and the total score.
     
   • Save your page to your web site and add a link to it from the "labs" section of your home page. Upload it to Blackboard.


8. Making Decisions: Javascript allows you (the programmer) to make decisions based on the data that you have available to you. This data can come from the user, the browser environment, or can be hardcoded into the script.
   
9. Decision points consist of (among others):
   
   • Boolean values and Boolean expressions:
     a < b
     a <= b
     a > b
     a >= b
     a == b
     a != b
     
   • These operators are used to test two values (a and b above) against each other. The result is either true or false.
   
   
10. We can combine these operators with the "if" statement in order to construct a decision. The format is as follows:
    if (boolean expression)
{
    statement;
}
    
    
11. Example 1:
    <html>
<head>
<script type="text/javascript" language="Javascript">
<!--
function testAge()
{
    var age;
    age = prompt("Please enter your age: ", " ");
    age = parseInt(age);
    if (age >= 30)
    {
        window.alert("You're " + age + ". If this were Logan's Run, you'd be dead.");
    }
    else
    {
        window.alert("You're " + age + "! Young Whippersnapper!");
    }
}
//-->
</script>
</head>
<body>
<br />
<a href="#" onclick="testAge();">Test My Age!</a>
</body>
</html>
    
12. Example 2:
    <html>
<head>
<script type="text/javascript" language="Javascript">
<!--
function drivingRisk()
{
    var age;
    age = prompt("Please enter your age: ", " ");
    age = parseInt(age);
    var drivingRiskFactor;
    if (age >= 30)
    {
         drivingRiskFactor = "Low";
    }
    else if (age >= 25)
    {
         drivingRiskFactor = "Medium";
    }
    else
    {
         drivingRiskFactor = "High";
    }
    window.alert("You are " + age + ", therefore your driving risk factor is: " + drivingRiskFactor);
}
//-->
</script>
</head>
<body>
<br />
<a href="#" onclick="drivingRisk();">Calculate My Driving Risk!</a>
</body>
</html>


13. LAB 2:
    Make a web page called "lab19b.html" underneath the labs/ directory.
    Write a javascript that will :
    1. prompt the user for their name
    2. prompt the user for their latest 2 test scores
    3. determine whether each of these scores are passing or failing (assume < 60 is failing)
    4. find the total and average of the scores
    5. determine whether the average score is a pass or fail
    6. print out to an alert window a summary of this data:
    
    • the user's name
      
    • the two scores, whether each one is a pass or fail
      
    • the average of the scores, and whether that average score is a pass or fail
    
    7. Hint: one way to do this is with 7 variables (name, test1score, test2score, test1PF, test2PF, average, averagePF)
    8. Hint: you can use a string to indicate "Pass" or "Fail" (assign one of these string values to the test1PF, test2PF, and averagePF variables)
    9. Hint: if you want to format your data in the alert window, use the "\n" character to give yourself a carriage return.
    10. Save your page to trumpy and link to it from your course home page, then upload it to Blackboard.
    

Day 18: user-submitted reviews

Here's what we'll do today:

1. Create a "all products" page that builds a list of all widgets in the database (dynamically)
2. Create a "widget detail" page that displays a product by ID number (dynamically)

^^^ NOTE THESE ITEMS ABOVE ARE VERY SIMILAR TO WHAT YOU CREATED IN LAB FOR DAY 12 ^^^

3. Next to each product, give the user the ability to "submit a review". You can do this 2 ways:
a. put the review form right next to the product
b. have them go to a separate review page (pass along the product id in a hidden field if you do this)

Your reviews should be stored in a database table called "widget_reviews". This table should track the product, the text of the reviews, and perhaps a numeric rating 1-5.

4. In this application, you don't need to track which user submitted a review.

5. Challenge: on the widget detail page, display the average rating for each product

Day 17: Searching with wildcards

Today in class we'll implement an advanced search interface for our "widgets" table.

(While this is certainly not required for homework #3, you may like to add such a feature to your homework web site to go "above and beyond the call of duty".)

Requirements:

1. Create a form interface to allow a variety of searches on "widgets":

a. Search by name (partial name search)
b. Search by price range (you can provide the ranges)
c. Search by description (partial description search - assuming you have a field in your widgets table called "product description" or similar)
d. Other? (is there something else in your widgets table that you can search on?)

2. Create a .php script to handle the results of the search and return the results in a nice listing. What kind of SQL statement will you need in order to do this?

3. Create a link back to the search page or else re-display the search form on the results page.

Questions:

1. Do you need cookies or sessions to do this?
2. Do you need one php page or multiple?

Finishing:

1. Submit your lab to blackboard.
2. Link to it from your course home page on trumpy.