PHP 101

By Margaret May

Organized by Elena Levine

Partially based on a GDI class created by Sylvia Richardson

Welcome!

Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.

Some "rules"

  • We are here for you!
  • Every question is important.
  • Help each other.
  • Have fun.
https://github.com/Roenok/gdi-intro-php-mysql

What we will cover today

  • Go over homework
  • Refresher
  • Forms!!

----- Refresher!! -----

What We Have Learned. PHP...

  • is a compiled or interpreted? interpreted
  • is server-side or client-side? server-side
  • has database support (true || false)? true
  • lets you build webpages that can dynamically respond to user input (true || false) true
  • manipulate things in the browser without going back to the server (true || false) false
  • allows you to write DRY code which stands for Don't Repeat Yourself

----- Forms!! -----

Let's make a form!








Let's break it down: form tag


... ... ... ... ...

http://www.w3schools.com/tags/tag_form.asp

Adding an: input tag


... ... ... ...

http://www.w3schools.com/html/html_forms.asp

Let's break it down: label tags


		...
		...
		
...
... ...

http://www.w3schools.com/tags/tag_label.asp

Let's break it down: text input fields


	...
	

...

...

http://www.w3schools.com/tags/tag_input.asp

Putting it all together!








Exercise 1!

Copy and paste the following code into a file called form.php.








Open form.php in a browser and press the Submit button and watch what happens.

Click here to run my form.php!

What happened when we pressed the Submit button?

We made a basic HTML form to collect some data, and then sent it to another PHP file. Of course, that file does not exist yet.

Exercise 2: Let's fix it!

Create a new file called process-info-1.php and place it in the same folder as form.php. Rename form.php to form-1.php. Press the Submit button again.


						<?php 
	$fullname = $_GET['fullname']; 
	$email = $_GET['email']; 
	
	echo 'The Full Name you entered was: ' . $fullname;
	echo 'The Email you entered was: ' . $email;
						?>
					

Click here to run my answer!

Yay! No more gigantic error!!

Notice what happened.

  • Our first file called out to our second file when we clicked the Submit button.
  • We printed any text we had entered into the various form fields.

You did it! Great job!

Let's break down process-info-1.php


						<?php 
	$fullname = $_GET['fullname']; 
	$email = $_GET['email']; 
	...
						?>
					
  • Notice $_GET
  • $_GET is a superglobal
  • $_GET is a variable
  • $_GET is an array

http://www.w3schools.com/php/php_superglobals.asp

Superglobals...

  • accessible regardless of scope
  • are unvalidated/unfiltered

http://www.w3schools.com/php/php_superglobals.asp

Specifically for $_GET

  • When you submit a form, PHP will add each of your text field and text areas into the $_GET variable as key => value pairs
  • Text field name attribute becomes key
  • Actual text the user enters becomes value
$_GET = [
	'fullname' => 'what you entered for fullname before clicking submit',
	'email' => 'what you entered for email before clicking submit',
]					
					

List of PHP Superglobal Variables

  • $_POST
  • $_GET
  • $_SERVER
  • $_REQUEST
  • $_FILES
  • $_ENV
  • $_COOKIE
  • $_SESSION

http://www.w3schools.com/php/php_superglobals.asp

Exercise 3!

  1. Go back to your form and enter Maggie May for Full Name and anyone@example.com for Email and click the Submit button.
  2. Copy the text in the URL field of your browser.
  3. Open a new browser tab.
  4. Paste the text you copied into the URL of this new browser tab and hit enter.
  5. In the new tab, change the full name and email to your name and email address and hit enter.
  6. Describe what happens. What happens to the at symbol @ in the URL of the email address field?

Adding to our form












<textarea name="comments" rows="5" cols="40"/>

http://www.w3schools.com/tags/tag_textarea.asp

Let's break it down: adding a text field and a text area


	...
	





...

New Text Field


	...
	


...
  • Exactly the same as Full Name and Email fields
  • Not required to be filled in to submit our form - but notice that there is no code enforcing this

And something new: a Text Area


	


  • Has rows and columns
  • Value gets saved in $comment variable

http://www.w3schools.com/tags/tag_textarea.asp

Exercise 4!

  1. Rename form-1.php to form-2.php.
  2. Rename process-info-1.php to process-info-2.php.
  3. In form-2.php, update the form action to call out to process-info-2.php.
  4. In process-info-2.php, add code to print out both Web Site and Comments.

Click here to run my answer!

Good Job!

But we are not done yet....

Security!

Can anybody spot any security risks in our program?

Hint: it has something to do with the fields in our form...

Exercise 5!

Important: use localhost/XAMPP server for this exercise. This may not work on other servers.

Expose the security risk. To do this:

  1. Open/go back to form-2.php.
  2. In the comments field, enter:
    A Nasty Site
  3. Click the Submit button.
  4. Notice what happens.
  5. Try changing the link tag and see what happens.

Notice that we now have a link on our second/results page.

An Injection Attack

  • Where a hacker finds a way to insert code
  • There are different types of Inject Attacks:
    • HTML
    • JavaScript
    • SQL

SQL Injection

http://xkcd.com/327/

Good news! PHP gives us ways to protect our code!

htmlspecialchars

Exercise 6!

  1. Rename form-2.php to form-3.php.
  2. Rename process-info-2.php to process-info-3.php.
  3. In form-3.php, update the form action to call out to process-info-3.php.
  4. In process-info-3.php, make a call to htmlspecialchars to protect ourselves from nasty input in the Comments text area. Run your program and see what happens. Hint: use the ENT_QUOTES flag.

Click here to run my answer!

Homework

  1. Split Full Name into 2 fields, First Name and Last Name
  2. Make First Name and Last Name required fields
  3. Limit the amount of text a user can enter in the Comments field to 100 characters.