Assignment 3: Server-Side Introduction Description and purpose:

Specifications / Instructions

Make sure you make a proper .gitignore to ignore anything that is not part of your site and commit to your repo.

Once you are set up with the basic files from the starter code, upload the two files, index.html, and process.php to your server.

If you enter nothing in one or both boxes, and press submit, you will see something like this If you enter something into both text boxes, and press submit,

Use the try again link to see how it works.

Study the code and comments in process.php to make sure you understand all of it and note all of the following things:

This is NOT the proper way to write PHP and output HTML back to the client. This is an exercise simply to show you how you can make the round trip from client to server and back again.

The techniques used in this starter code violate both division-of-concerns and procedural programming best practices. If you have not already, read Best Practices on Web Programming carefully and make sure you understand division-of-concerns and that we are violating this best practice (we are mixing PHP and HTML and failing to make proper functions). We will not do that again in this class.

We are doing things this way (the wrong way) for a reason, to keep it simple and to study how we can post data to the server, and follow the general programming process of 1) Input 2) validate 3) process 4) output All programming follows that process, remember it.

Once you are comfortable that you understand what is happening and how the demo code works you will begin to write your own application as described in the next steps. Ready to code...

Follow both these instructions and the instructions in the comments in the starter code.

Change the index HTML page to be a complete and proper web page. You must have all standard parts of a web page in place and correct.

Leave the form tag itself alone, but alter the form fields on the page to have the following input fields A text box for title. The user will enter their title like Mr., Mrs., Ms., Sir, Madam, Dr., Doctor, Lord, Lady, His Illustrious Majesty, Darth, Prince, Princess, etc. A text box for favorite drink. A text box for a pets name. A text box for favorite fictional place, for example, Rivendell, Mordor, Death Star, Gallifrey, etc. A text box for favorite real place, for example, like Wisconsin, Cleveland, Texas, Antarctica.

All text boxes must conform to the following: have either placeholder text or a label telling the user what to enter (your choice, or both).

unique id and namattributees for all text fields. max length of 64. do not use any HTML5 validation features like required or any input checking at all. do not use any JavaScript.

Style your page to be interesting and professional. It must conform to the following:

Do not violate division-of-concerns in index.html. You must have all your styling in CSS and all of it must be in a main.css file. This file can be in the root of your site alongside your other files or in a css directory (usingCSScss directory is the proper way).

Mobile-first css, Mobile-friendly, Responsive. There are notes on this in the Notes folder on Blackboard if you do not know what those are.

Make sure you give the user proper instructions on what the user should be entering.

All images must be in an images directory (except the favicon which always goes in the root)

You must have a favicon and it must be at the root of the site. Modify the process.php file to do all of the following: Do complete input checking which means:

trim the input of leading and trailing white space

sub-string the input to be a max of 64 characters

strip tags of any HTML tags If any of the input ends up empty because of the previous step (or because they didnt enter something), report back to the user Im sorry, your input was not valid. and give them a try again link. If all the input is not empty, process it the following way:

Concatenate the parts together to make ONE string like this (for example): Lord Pepsi Snuggles of Mordor and Idaho (i.e. title drink pet fictional-place real-place)

Report back to the user, You are followed by the whole title you put together.

Also report the length of each part of the whole title and the length of the title as a whole (including spaces). For example Lord is 4 characters, Pepsi is 5 characters and your whole title is 37 characters! How you display this is up to you.

If the whole title is >= 30 characters total, report back, Thats a heck of a title!

If the whole title < 30 characters total, report back, Thats a cute little title.

The page you send back to tell the user their title must be a complete and proper web page. This will mean you will mix a lot of PHP and HTML. This is an extremely bad practice and should never be done. We are allowing this so we can fix it in the next assignment (which is more complex but is proper practice). You can see examples of bad practice versus good practice on the Best Practices page.

The page you send back to tell the user their title must be styled professionally and with all the same requirements as index.html.

You must use at least one image on the page you send back. All images must be in the images/ directory.

idedx.html

Process php

	* This is a simple demo to demonstrate how you can access and process
	* information posted to the server. Alter this file according to the
	* instructions in the assignment. Note that you will NOT normally
	* do things this way, but this will serve as an introduction
	* to server side processing and then we will fix it in subsequent
	* assignments.
	* The output of this page MUST be a complete and properly structured
	* mobile-friendly, mobile-first, responsive webpage. To do that you
	* will purposefully violate both division of concerns and some procedural
	* programming best practices so as to create a simple and easy to
	* understand solution. We will then use this example as a guide
	* for how to do things properly in subsequent assignments.
	// *EXCEPT* FOR THE COMMENTS THAT SAY,
	// LEAVE THOSE IN PLACE TO SHOW IN *YOUR* CODE WHERE YOU DID EACH STEP.
	// YOU MAY BREAK UP STEPS 3 AND 4 IF YOUR SOLUTION REQUIRES IT, BUT
	// MAINTAIN THE ORDER of.. step 3: PROCESSING, step 4: OUTPUT
	* This next line is simply to demonstrate the use of the var_dump()
	* and to show the contents of the system global variable $_POST.
	* This is an example of a debug statement.
	var_dump($_POST);
	* STEP 1: INPUT: Do NOT process, just get the data.
	/* */
	if (!empty($_POST['text1']) && !empty($_POST['text2'])) {
	// extract the data from the global $_POST (if it exists) into local variables.
	// NEVER work with $_POST directly, get away from it as fast as possible.
	$text1 = $_POST['text1'];
	$text2 = $_POST['text2'];
	} else {
	$text1 = "";
	$text2 = ""; }
	/* * */
	* STEP 2: VALIDATION: Always clean your input first!!!!
	* Do NOT process, only CLEAN and VALIDATE.
	* ****************************************************** */
	// clean up the variables (a little) by removing leading and trailing white space
	// follow the instructions in the assignment for further cleaning steps
	$text1 = trim($text1);
	$text2 = trim($text2);
	if (!empty($text1) && !empty($text2)) {
	* if you have valid data from steps 1 and 2. Your code must always have
	* a safety feature similar to this.
	* Do not delete this comment.
	* */
	// the following code shows how you can access parts of the $_POST array
	echo "you entered: \"". $text1 . "\" for text box 1 ";
	$length = strlen($text1);
	if ($length > 0) {
	echo "the length of your first input is: " . $length . " ";
	}
	echo " ";
	echo "you entered: \"" . $text2 . "\" for text box 1 ";
	$length = strlen($text2);
	if ($length > 0) {
	echo "the length of your second input is: " . $length . " ";
	}
	echo " ";
	echo 'try again ';
	} else {
	echo "you did not enter anything one or both text boxes. ";
	echo 'try again ';
	}