Section 3.20. Test drive

3.20. Test drive

Even though there is plenty of work left to do, go ahead and take the coffee maker for a test drive. Be sure you've added the sendRequest(), getSize(), getBeverage(), and orderCoffee() functions to coffee.js, and then load coffee.html in your web browser.

Enter in an order, and see what happens. Then, enter in another order... are both coffee makers being used?

Jim's large mocha is brewing on the first coffee maker.

Bob's order is brewing over on the seecond coffee maker.

Brain Power

Notice that once an order is placed, the person's name and order details stay filled in. Could this cause problems? What do you think we should do to avoid any confusion?

I think it's confusing to have an order brewing, and have the details of that order still showing on the order form. Can't we clear the form when an order is placed?

Let's clear the form when an order is placed

Right now, your officemates enter their coffee order and click "Order Coffee". The coffee order is sent to a coffee maker, and brewing begins. But the order is still shown on the screen, and co-workers could be a little confused by that order still being on the screen. It would be a lot easier if once an order got sent to a coffee maker, the details were cleared from the form.

You can clear a form using the reset() method. Let's add some JavaScript to orderCoffee(), in coffee.js, to clear the order form whenever an order is sent to a coffee maker:

 var status = getText(coffeemakerStatusDiv1); if (status == "Idle") {   replaceText(coffeemakerStatusDiv1,            "Brewing " + name + "'s " +             size + " " + beverage); document.forms[0].reset(); There are two places in coffee. js where you send a request to a coffee maker. var url = "coffeemaker.php?name=" + escape(name) +               "&size=" + escape(size) +               "&beverage=" + escape(beverage) +               "&coffeemaker=1";   sendRequest(url); } else {  var coffeemakerStatusDiv2 =     document.getElementById("coffeemaker2-status"); status = getText(coffeemakerStatusDiv2); if (status == "Idle") {    replaceText(coffeemakerStatusDiv2,               "Brewing " + name + "'s " +               size + " " + beverage); In both places, get the first form on the web page, and call reset() on the form. document.forms[0].reset(); var url = "coffeemaker.php?name=" + escape(name) +               "&size=" + escape(size) +               "&beverage=" + escape(beverage) +               "&coffeemaker=2"; 

Jim enters his coffee order just like before...

...and then clicks "Order Coffee"...

...which runs the orderCoffee() JavaScript function...

Let's try these changes out.

...which sends the order to the first coffee maker, and then resets the form.

Now, there's no confusion for the next person who wants to order a coffee.

PHP ...at a glance

It's time to get the server making some coffee so we can start serving drinks to your hard working co-wokers.

The PHP coffee maker script just loops for a while to simulate coffee brewing. Here's the code we used for coffeemaker.php:

 The script starts by getting all the data sent as part of the request URL. <?php $name = $_REQUEST['name']; $size = $_REQUEST['size']; $drink = $_REQUEST['drink']; $coffeemaker = $_REQUEST['coffeemaker']; for ($i = 0; $i < 50000000; $i++) { This loop just kills time... and simulates brewing coffee. // brewing Here's where you can plug in your own Internet-enabled coffee maker code. } echo $coffeemaker . $name; Once brewing is done, the script returns the number of the coffee maker that finished, and the name of the person whose order is ready. So this might look like "1Jim" if the first coffee maker finished an order for Jim, or "2Mary" if the second coffee maker finished an order for Mary. ?> You can download coffeemaker.php from http://www.headfirstlabs.com, or check out all the code listings in Appendix 2.