Lecture 6: More Arrays & HTML Forms. CS 383 Web Development II Monday, February 12, 2018

Transcription

1 Lecture 6: More Arrays & HTML Forms CS 383 Web Development II Monday, February 12, 2018

2 Lambdas You may have encountered a lambda (sometimes called anonymous functions) in other programming languages The simplest way of thinking about a lambda is if we need a callback function for something that isn t a function in PHP (such as array_map) but we don t want to define a function like addone($n) that adds one to a number Essentially, in place of the string for the function we want to use, we add a function definition what excludes the function name 1

3 Lambda with array_map Example: Suppose we wanted to take an array and square each element: <?php $a = array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10); $b = array_map(function($x) {return $x*$x;}, $a);?> Value now held in b: $b = array(1, 4, 9, 16, 25, 36, 49, 64, 81, 100); 2

4 serialize & unserialize serialize creates a storable representation of a value Although it works with most types/objects, it is particularly useful for arrays For example, if you have entries in a MySQL table with a wide range of different variables that would make creating a column for each inefficient/unrealistic, you can serialize the array to add it, and unserialize the array when it is extracted 3

5 serialize & unserialize Example: <?php $a = array( array("sub" => "CS", "num" => "383", "title" => "Web Development II"), array("sub" => "MTH", "num" => "111", "title" => "Calculus I"), ); $s = serialize($a); print $s;?> 4

6 serialize & unserialize Result: a:2:{i:0;a:3:{s:3:"sub";s:2:"cs";s:3:"num ";s:3:"383";s:5:"title";s:18:"web Development II";}i:1;a:3:{s:3:"sub";s:3:"MTH";s:3:"nu m";s:3:"111";s:5:"title";s:10:"calculus I";}} 5

7 Forms We should be mostly familiar with forms in HTML In general: o Wrap all of the form fields/inputs in <form> tags o Form tags have an action and a method o Add fields, mostly <input>s with different types o <input> have different names o We may need hidden fields o Include a submit button 6

8 <form> The two key attributes to the <form> tag are: o action: The URL/file that the script should forward to o method: GET: Requests data from the specified source (action) POST: Submits data from the specified source (action) 7

9 <form> Pros GET Page can be cached by a browser POST SOLVES ALL OF THE CONS OF GET Cons Page is captured in history (including HTML) Can t submit a file Easier for user to manipulate URLs have a character limit Hidden variables shown in URL User can t refresh page without error warning 8

10 Form Inputs Form inputs (usually <input> but sometimes <option> or <textarea>) all have a name attribute to assign a unique identifier (just like a variable) We can then reference that name as a key in the $_POST array (just as we did with $_GET) 9

11 Validation & Security In CS 283, you learned how to use Javascript to validate user input (such as, making sure they entered a valid number) However, there are some concerns with this: o Users can potentially, in some instances, disable Javascript to prevent the Javascript that validates input from executing o The users can create their own webpages with forms that submit to the website 10

12 Validation & Security For example, you cannot save your password on the portal login page in your browser s manage files screen The reason why? They don t want someone to potentially access your account if you leave your computer to access grades, financial information, etc. The Solution : Create your own webpage with the same form and input names that lists the same action as the form on the portal login page 11

13 Validation & Security Example: o You build a page called which displays a form and includes Javascript for validating form inputs o The form submits to which processes the results of the form o Somebody visits your page and wants to submit something that the Javascript validates against, so they make their own form at that submits to We do not want this it potentially opens up a security hole 12

14 Validation & Security The solutions: o Validate the data a second time, through the server-side (PHP) rather than the client-side o Check the referer of where the script came from You would validate your input from the form just as you validated the input from Lab 2 where you checked the value of n in the query string (it existed, and was an integer greater than 2) 13

15 Validation & Security The referrer is the URL that directed the user to the second URL It is stored in the environment variable $_SERVER["HTTP_REFERER"] 14

16 Validation & Security Back to our example: o When written, it should contain a check that $_SERVER["HTTP_REFERER"] == o When the other person submits their form at to it should find that the referred does not match the expected list, and not process the input 15

17 Inputs with Multiple Responses When you use a checkbox, you are setting up the user to input multiple options if they choose to Example: <form action="submit.php" method="post"> Favorite Subject:<br> <input type="checkbox" name="favsub" value="cs"> CS <input type="checkbox" name="favsub" value="mth"> MTH <input type="checkbox" name="favsub" value="phy"> PHY <input type="submit" name="submit" value="submit!"> </form> 16

18 Inputs with Multiple Responses If we check all three boxes, we might expect to see all three values However, if we put print_r($_post); in submit.php, the result is: Array ( [favsub] => PHY [submit] => Submit! ) 17

19 Inputs with Multiple Responses The solution? Change the value of the name attribute to favsub[] (an array) Now, suppose we still check all three boxes, the result in submit.php is: Array ( [favsub] => Array ( [0] => CS [1] => MTH [2] => PHY ) [submit] => Submit! ) 18

20 Inputs with Multiple Responses We can also define explicitly which index the form items are in Suppose we changed the name attribute to favsub[1] for CS, favsub[2] for MTH, and favsub[3] for PHY, and we submit the form only checking CS and PHY Now, suppose we still check all three boxes, the result in submit.php is: Array ( [favsub] => Array ( [1] => CS [3] => PHY ) [submit] => Submit! ) 19

21 Inputs with Multiple Responses We can use the same technique with anything we might be collecting multiple values for, such as: o Radio buttons not to collect multiple responses for the same question, but a single response from a list of questions In this case, it is much safer to assign indexes rather than let PHP do it when the order matters 20

22 Uploading Files Last week, we talked about everything related to forms except uploading files As we ve talked about already, you can only upload a file through the POST method 21

23 Uploading Files We will use an <input> with the type file We also need to add an additional attribute to the <form> tag 22

24 Example form: Uploading Files <form action="upload.php" enctype="multipart/formdata" method="post"> <!-- optional hidden field to specify maximum file size of form, must be defined before the file field --> <input type="hidden" name="max_file_size" value="1024"> <input type="file" name="myfile"> <input type="submit" name="submit" value="upload"> </form> 23

25 Uploading Files When we submit our form, we have our variables stored in $_POST as we usually do Because we added the enctype attribute, we also have a variable called $_FILES $_FILES is a multi-dimensional array The keys to $_FILES are the names we gave the fields in our form 24

26 Uploading Files The array for each key contains the following associative keys: o name: The (original) name of the file uploaded o type: The mime type of the file o tmp_name: The full path and filename of the temporary location on the server where the file was uploaded (usually, in /tmp/, with a random name) o error: The error code associated with the upload o size: The size of the file, in bytes 25

27 Uploading Files The error codes are as follows: o 0: No error o 1: File exceeded maximum size set in php.ini o 2: File exceeded maximum size set in hidden MAX_FILE_SIZE form field o 3: File only partially uploaded o 4: No file was uploaded o 6: The temporary folder where the files are to be saved does not exist o 7: File could not be written to the disk o 8: A PHP extension stopped the file upload 26

28 Uploading Files When you use multiple fields with the name and empty array key brackets, such as somevar[], it works differently than it does with other fields You would not access these with $_FILES["someVar"][0]["name"], $_FILES["someVar"][1]["name"], etc. You would use $_FILES["someVar"]["name"][0], $_FILES["someVar"]["name"][1], etc. 27

29 Uploading Files Once the file has been uploaded to the temporary directory on the server, you should move it somewhere else to either process it or store it You can do this with the function: move_uploaded_file($tmp_name, $destination) This function verifies that the file was uploaded through a POST form by PHP 28

30 Uploaded Files Example to the above, in upload.php: <?php if($_file["myfile"]["error"] == 0) { move_uploaded_file($_file["myfile"]["tmp_n ame"], "/var/www/html/cs383/uploads/". $_FILES["myFile"]["name"]); } else { print "There was an error uploading the file."; }?> 29

31 Uploaded Files REMEMBER: With our configuration with AssignUserId, files inside your webdocs can be accessed through your website; thus, you will want to move uploaded files into a directory outside of your webdocs when you process them 30