-
html minimum
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- </head>
- <body>
-
PDO connection
- <?php
- // open connection
- $connection = "mysql:host=localhost;dbname=jhshoppingcart";
- $user = "root";
- $pwd = "";
- $db = new PDO($connection, $user, $pwd);
- ?>
-
form dropdown list min
- <form action="Purchase.html"
- id="itemForm" method="GET"
- onsubmit="return validate()"> <select name="itemSelect"> <option value="-1">
- Choose an Item
- </option>
- ...other options...
- </select>
- </form>
-
how to add dynamic options in select
- <select name="itemSelect">
- <option value="-1">
- Choose an Item
- </option>
- <?php
- $query = $db->query("Select * from items");
- while ($row = $query->fetch())
- {
- $value = $row['itemId'];
- $name = $row['itemName'];
- echo "<option value=" . $value .
- ">" . $name . "</option>";
- }
- ?>
- </select>
-
create a textbox to enter a quantity that will be validated
- <form action="Purchase.html"
- id="itemForm"
- method="GET"
- onsubmit="return validate()">
- <label for="itemQty">
- Enter Quantity
- </label>
- <input type="text" name="itemQty">
- <input type="submit" value="Purchase"/>
- </form>
-
important parts of form tag
- <form
- action="Purchase.html"
- id="itemForm"
- method="GET"
- onsubmit="return validate()"
- >
- </form>
-
what is the JS to validate that a textbox(itemQty) is between 0 and 100.
- function validate()
- {
- var qty=itemForm.itemQty.value;
- if (qty.match(/[^0-9]/)
- ||qty<1
- ||qty>100)
- {
- itemForm.itemQty.style.border="solid
- red";
- validQty='false';
- }
- else
- {
- itemForm.itemQty.style.border
- ="none";
- validQty='true';
- }
- if (validQty=='true')
- return true;
- else
- return false;
- }
-
How do you pass f_itemQty to another page?
- 1st page
- <form ...>
- <input type="text" name="f_itemQty">
- </form>
- 2nd page
- <?php
- $itemQty=$_GET['f_itemQty'];
- echo "<td>".$itemQty."</td>";
- ?>
-
how to retrieve data from a single row from a db select
- $itemID=($_GET["itemSelect"]);
- $query = $db->query("SELECT * FROM items where itemID=$itemID");
- if($row = $query->fetch())
- {
- $itemName = $row['itemName'];
- $itemPrice = $row['itemPrice'];
- $itemDesc = $row['itemDesc'];
- $itemImg = $row['itemImg'];
- }
-
how to echo a row of table data
- <table border="1">
- <tr>
- <?php// open connection
- echo "<td>".$itemName."</td>"
- . "<td><img src =".$itemImg
- ." height=60 width=60></td>"
- . "<td>".$itemDesc."</td>"
- . "<td>".$itemPrice."</td>"
- . "<td>".$qty."</td>";
- </tr>
- </table>
-
How to add a submit button labelled Checkout.
- <form action="checkout.php">
- <input type="submit" value="Checkout"/></form>
-
validate the following
<input type="text" name="f_firstName"/><br>
- <form action="goodbye.php" method="GET"
- id="checkoutId"
- onsubmit="return validate()">
- <script>
- function validate()
- { // validate firstName
- var firstName =
- checkoutId.f_firstName.value;
- if(firstName.search(/[^A-Za-z]/)==-1
- && firstName!="")
- {
- checkoutId.f_firstName.style.border =
- "none";
- validFirstName=true;
- }
- else
- {
- checkoutId.f_firstName.style.border=
- "solid red";
- validFirstName=false;
- }
- if (validFirstName==true && ...)
- return true;
- else
- return false;
- }
- </script>
-
how to add radio buttons
- <input type="radio" name= "f_shipAddress"
- value="same" checked/>
- <label id="shipId1">Use mailing address</label> <label id="shipId2">Use different address</label>
- <input type="radio" name="f_shipAddress" value="different"/>
-
how to create a checkbox
<input type ="checkbox" value="onions" name="toppings[]"/> <label>Onions</label><br/>
-
GET requests are
used to send parameters to server and identify the data to be retrieved(e.g. can be used configure of a database query)
-
GET request parameters are
encoded and are visible as part of the request URL.
-
POST request parameters are use to
send information to the server(usually to be stored on the server.)
-
POST request parameters are
encoded inside the request and are not a visible part of the URL.
-
$_GET and $_POST are __________ arrays consisting of
associative arrays consisting of key/value pairs.
-
$_GET["phone"] will retrieve the value sent from a client...
form with an input element named "phone"
-
name 3 methods to access a database
-
PDO is
new, most flexible, object oriented method
-
php is used to ...
build web pages that contain dynamic content.
-
php consists of HTML tags that...
enclose static content and php<?php...?> tags that enclose dynamic content.
-
Dynamic content is created using...
echo or print statements.
-
client side validation
- ensures that data is valid
- prevents bad data from being sent to the server
- reduces workload on server
-
HTML5 validation
- detects missing data for required fields
- checks simple text patterns for text input format
- provides basic user notifications when errors occur
- simple to code, but limited usefulness.
-
JavaScript validation
- detect many types of input error
- can provide custom user notifications when errors occur
- harder to code than HTML5 but more customizable
- validation of text input formats can be done using pattern matching with regular expressions
-
submitting form data
- data sent to server according to form's action and method attributes values
- data can be prevented from being sent by using onsubmit handler to validate form data
- form data accessed in JS using formId.elementName.value
- If onsubmit handler returns true, data is sent to server.
- If onsubmit handler returns false, data is not sent to server.
-
receiving form data on server
- done using $_GET and $_POST arrays
- $_GET arrays receive information send from client forms that make GET requests(with method="GET")
-
HTML 5 Validation
- required>
- <input type ="email" or url, number, tel, date
- <input type="email" name="email" required placeholder="Enter a valid email address">
- password
- color
- date
- datetime
- datetime-local
- month
- search
- tel
- time
- week
-
HTML5 lastName validation
- <label class="formlabel"> Last Name </label>
- <input type="text" value="Last"
- name="name[]"
- pattern="[A-Z][a-z]*"
- required="required"
- title="Upper case followed by lower case
- e.g. Jones"
- />
-
How to store input elements in an array
- <input type ="checkbox" value="pepperoni"
- name="toppings[]"/>
- <label>Pepperoni</label><br/>
- <input type ="checkbox" value="mushroom"
- name="toppings[]"/>
- <label>Mushrooms</label><br/>
-
validate quantity for digits onkeypress
- <input type="text" name ="qty" value = "1"
- onkeypress="return numVal(event)">
- function numVal(event)
- {
- var charCode = (event.which) ?
- event.which : event.keyCode;
- if (charCode==8||charCode==13 ||
- (charCode>47 && charCode<58))
- return true;
- else
- return false;
- }
-
onload, onclick, onchange, onkeypress
|
|
