miércoles, 12 de abril de 2023

C1 - Web Applications for Everybody Specialization - COURSE 1

Building Web Applications in PHP
LECTURES COURSE 1


Subscribe to more Courses.
COLLABORATOR CHANNELS
YOUCOURSE - COURSES FROM BEST UNIVERSITYS IN THE WORLD - https://www.youtube.com/@YouCourse
ARQUITECTURAS - ARCHITECTURE CHANNEL, DOCUMENTALS AND MORE - https://www.youtube.com/@ArquitecturasYT
CADESIGNERS - SOFTWARE CHANNEL AND MODELS - https://www.youtube.com/@CADesigners
UNDERGROUND - Subscribe! Free Music - Creative Commons - https://www.youtube.com/@UndergroundMC

FACEBOOK GROUPS
ARQUITECTURAS - ARCHITECTURE CHANNEL - https://www.facebook.com/groups/arquitecturasyt
YOUCOURSE - COURSES FROM BEST UNIVERSITYS IN THE WORLD - https://www.facebook.com/groups/youcourse/
CADESIGNERS - SOFTWARE DESIGN CHANNEL - https://www.facebook.com/groups/cadesignersyt
UNDERGROUND - Free Music - Creative Commons - https://www.facebook.com/groups/undergroundyt

Facebook - https://www.facebook.com/YouCourseYT
Twitter - https://twitter.com/YouCourseYT
Tik Tok - https://www.tiktok.com/@youcourseyt
Kwai - YouCourse - @yourcourse

Thank's For Support!

University of Michigan
The mission of the University of Michigan is to serve the people of Michigan and the world through preeminence in creating, communicating, preserving and applying knowledge, art, and academic values, and in developing leaders and citizens who will challenge the present and enrich the future.

About this Specialization
This Specialization is an introduction to building web applications for anybody who already has a basic understanding of responsive web design with JavaScript, HTML, and CSS. Web Applications for Everybody is your introduction to web application development. You will develop web and database applications in PHP, using SQL for database creation, as well as functionality in JavaScript, jQuery, and JSON.

Over the course of this Specialization, you will create several web apps to add to your developer portfolio. This Specialization (and its prerequisites) will prepare you, even if you have little to no experience in programming or technology, for entry level web developer jobs in PHP.

You’ll demonstrate basic concepts, like database design, while working on assignments that require the development of increasing challenging web apps. From installing a text editor to understanding how a web browser interacts with a web server to handling events with JQuery, you’ll gain a complete introductory overview of web application development.

About this Course
In this course, you'll explore the basic structure of a web application, and how a web browser interacts with a web server. You'll be introduced to the request/response cycle, including GET/POST/Redirect. You'll also gain an introductory understanding of Hypertext Markup Language (HTML), as well as the basic syntax and data structures of the PHP language, variables, logic, iteration, arrays, error handling, and superglobal variables, among other elements. An introduction to Cascading Style Sheets (CSS) will allow you to style markup for webpages. Lastly, you'll gain the skills and knowledge to install and use an integrated PHP/MySQL environment like XAMPP or MAMP.

WEEK 1 - Introduction to Dynamic Web Content

We look at the basic structure of a web application and how a web browser interacts with a web server. We explore the Request-Response Cycle that is the basis of the Hypertext Transfer Protocol (HTTP).

RESOURCES
"The Missing Link" Textbook: Chapters 1, 3, 4

HyperText Transfer Protocol (HTTP) & Request/Response Cycle

Textbook & Course Resources
This course uses an open and free textbook titled "The Missing Link: An Introduction to Web Development and Programming".

https://milneopentextbooks.org/the-missing-link-an-introduction-to-web-development-and-programming/

Please utilize the Resources section for downloadable slides, web links, and other resources by module.

Assignment Specification: Request-Response Cycle
In this next assignment, you are to retrieve the following document in a browser tab with "Developer Mode" enabled so you can examine the HTTP Response headers. You may need to open the URL in a new tab, turn on developer mode, and then press refresh to get the proper data.

http://data.pr4e.org/intro-short.txt

Note: If you look at the headers and not all of the headers are present, it may be that your browser is caching the request. Look for the HTTP Response Code in the developer console. Normally you should see a "200" code indicating a normal document retrieval. If you see a "304" status code, it means that your browser is likely using a cached copy of the file.

To convince your browser to actually retrieve the document, clear your browser cache and re-retrieve the document, or add a key-value pair to the URL like:

http://data.pr4e.org/intro-short.txt?x=12345

And then retrieve that URL. To force a fresh retrieval, simply change the value for x= to any new value and re-retrieve the page until you get a 200 status code.


WEEK 2 - HyperText Markup Language (HTML)

We briefly cover the basics of the HyperText Markup Language (HTML) that is the markup for web pages. We hope that you already have some expertise in HTML and that this is mostly review.

RESOURCES
"The Missing Link" Textbook: Chapters 7-14

Assignment Specification: HyperText Markup Language (HTML)
In this next assignment, you will build a simple valid HTML5 page that demonstrates a number of tags. Your page will be well-formed HTML5, and indicate that it is in the UTF-8 character set:

<!DOCTYPE html>
<html>
  <head>
    <title>Jane Instructor</title>
    <meta charset="UTF-8">
  </head>
  <body>
    ...
  </body>
</html>


Your HTML must pass the validator at: https://validator.w3.org/nu/
Optional: If the HTML validator above suggests you add a lang attribute to the html start tag, it's a warning not an error. It is not required for the assignment. There is no example posted here because the lang code has many values, you might like to check out the w3schools HTML ISO Language page.

The title tag must contain your name or the string indicated by the autograder.


You must have at least one example of each of the following tags: span, p, div, h1, and ul

You must have three a tags and three li tags.

You must have some bold text in the document and some italics text in the document but you cannot use the b or i tags.  The autograder will only grade HTML, and ignore any CSS.


Autograder: HyperText Markup Language (HTML)
You will build and submit a valid HTML page that passes the W3C HTML Validator at https://validator.w3.org/nu/ that has your name in the title tag.

HTML Sample Code (Browse)
HTML Sample Code (Download)

WEEK 3 - Cascading Style Sheets (CSS)

We briefly cover the basics of cascading Style Sheets (CSS) that allow us to style the markup for web pages.



Images, Colors, and Links in CSS
Other Resources
Assignment Specification: Cascading Style Sheets (CSS)10m
In this next assignment, you will develop a Cascading Style Sheet (CSS) to control the look, the feel, and the layout of some provided HTML content. You will transform only text as displayed below:


to the sample below, using only CSS


Pre-Requisites
Please install the Web Developer Toolkit for your browser from Chris Pedrick and know how to use it to disable CSS styles.

CSS Sample Code (Browse)
CSS Sample Code Zip (Download)

Specifications
Take this file and copy/paste the contents into index.htm. Do not edit this file.

Take this file and copy/paste the contents into blocks.css in the same folder as the above file.

Edit the blocks.css and add the CSS rules so the HTML file looks like the above image when you view the index.htm file in your browser

The four boxes have five pixel borders with different colors and five pixels of margin and padding. It is probably simplest to use fixed positioning to get the boxes to be "sticky" to the corners of the screen even when you resize. Make the boxes width be 25% so the width changes as you resize your browser.

Center the link at the top of the page. Use your developer console / inspect element feature of your browser to visit https://www.brainyquote.com/ and find the nav element as shown. There are 2 rules, the 1st starts with a color hint of #f, and the 2nd with #35. Use the full values for the colors and apply them to the link color & background in your index.htm.

Your CSS must pass the validator at: https://jigsaw.w3.org/css-validator

What To Hand In
For this assignment you will submit
  1. Image (JPG or PNG) of your index.htm with the styling applied, not the HTML source code
  2. Image (JPG or PNG) of the source code of your blocks.css file
  3. Image (JPG or PNG) of your blocks.css passing the W3 CSS validator
  4. Image (JPG or PNG) of your browser viewing www.brainyquote.com with all styles turned off
  5. Image (JPG or PNG) of your browser at www.brainyquote.com inspecting the navigation element to find the colors used in the 2 rules as shown in the sample below for your link background and text colors. Remember to add these to the CSS before taking screenshot 1.
Sample Screen Shots
Using inspect element on the https://www.brainyquote.com/


Looking at https://www.brainyquote.com/ using Chris Pedrick's Web Developer add on to turn off all styles:
Passing the CSS validator:

WEEK 4 - Installing PHP and SQL

Our first technical task is to work through the installation steps including installing a text editor, installing MAMP or XAMPP (or equivalent), creating a MySql Database, and writing a PHP program.

RESOURCES
"The Missing Link" Textbook Chapter: 1, 3, 4, 37, 39, 41

Installation Handouts
In this page, you will install a programmer text editor, install a bundled all-in-one PHP/MySql application, and explore that application briefly.

You should only install 1 of these XAMPP or MAMP.

We have separate pages for each of the commonly used Operating Systems:
I've done most of my demos using MAMP on the Macintosh so using MAMP might be easier on Windows. If you encounter a problem getting MAMP to work on Windows, it is OK to use XAMPP.

Please note, MySQL Workbench is not supported for this specialization.

Note - You only need to install one of MAMP or XAMPP. Do not install both as they use the same port settings. They are both all-in-one installers for the same thing - Apache Web Server, MySQL, PHP, phpMyAdmin.
Setting up your PHP/MySql Devlopment Environment
In this page, you will install a programmer text editor, install a bundled all-in-one PHP/MySql application, and explore that application briefly.

We have separate pages for each of the commonly used Operating Systems:
You can use any software you like - I've done most of my demos using MAMP on the Macintosh so using MAMP might be easier on Windows. If you encounter a problem getting MAMP to work on Windows, it is OK to use XAMPP.

Installing LAMP On Linux
We don't have a video about how to install the software on Linux since there are many different Linux systems and most Linux users already know how to install software. In the Linux world, what we call "MAMP" or "XAMPP" is called "LAMP". Actually LAMP came first and the XAMPP / MAMP names are homage to the original Linux / LAMP.

A simple approach is to search for "How to install LAMP on Ubuntu" - put your variant of Linux in the search - You should find lots of pages. If we find good guides, we will list them here:
Assignment Specifications: Installing PHP/MySQL
In this assignment you will install software that will be used during the course. This software includes a programming text editor and a PHP and MySQL Environment. Also as part of this assignment you will learn how to take screenshots and make them into images. The deliverables this the assignment are two peer-graded images of your running software.

If you follow the instructions carefully and look at the handouts and watch the podcasts, this assignment should be pretty straightforward and take less than an hour.

Note: As you install on Windows, you may be asked for permission to open ports or to allow an application through the firewall - say 'yes' to these dialog boxes if they are popping up when you first install or first start your PHP environment.

If you get stuck on this assignment - feel free to get assistance from anyone who can help. All we want is that you have successfully installed the software and can use it on your system. This is not intended as a difficult or challenging assignment.

You should practice taking a few screen shots on your computer and saving them as PNG or JPG files.

Specifications
Install a programming text editor if you don't already have one. I recommend Atom, but you can use NotePad++ (Windows) or TextWrangler (Macintosh). You can use any editor you like but TextEdit (Mac), NotePad(Win), and Microsoft Word at *not* acceptable as program editors.

I suggest XAMPP for Windows and MAMP for Macintosh. They all function very similar. But all the course examples will be with MAMP and the course staff will be most familiar with problem arising when you use MAMP so if you choose another environment you should be prepared to do your own tech support.

Navigate to the phpMyAdmin application select the "SQL" tab and type

SELECT 'January 3, 2017'

Do not use the example date, 'January 3, 2017', replace it by the date you are taking the screen shot, press the "GO" button and then take a screen shot of the resulting page.

Following the instructions in the installation documents, make sure that display_errors = On in your php.ini file. Make the screen shot to show you did it as follows:
  • For MAMP, go to the phpinfo page in your environment and scroll down until you can take a screen shot showing that your php.ini is correct and take a screen shot
  • For XAMPP, go to Apache / Config and open the php.ini file and scroll down to show that display_errors = On and take a screen shot.
  • For Linux, use any editor to open your php.ini file and take a screen shot showing display_errors = On.
For more information on editing the php.ini file please see the week 4 pinned post, php,ini

Submit those two screen shots in the peer-graded assignment.

Sample Screen Shots
The first screen shot for the peer-graded portion of the assignment is the phpMyAdmin as follows:
Don't worry about having fewer databases on the left hand side in your screen shot since you just finished installing your server.

Here a sample of the second screen shot in the peer-graded portion is to verify that display_errors is On in your PHP configuration:
Here is a sample of a screenshot if you are using XAMPP:


WEEK 5 - Introduction to PHP

We begin learning PHP.

RESOURCES

Assignment Specification: Our First PHP Application
In this next assignment, your application will be a single index.php file with some elements in HTML and some elements in PHP. This also verifies that you can do basic HTML and know how to use the 'pre' tag as well as understand how to switch between PHP and HTML when writing a PHP script. Make sure to save your screen shots JPG or PNG files and keep them less than 1MB. You must include the URL bar in all of your screen shots and the software must be running in your PHP server (i.e. file:// urls will not be accepted)

  • Your name must be in the <title> tag like 'Charles Severance PHP'
  • There should be an <h1> tag with your name and text like 'Charles Severance PHP'
  • You should use a <pre> tag to create ASCII art of the first letter of your name four spaces in from the left margin
  • Your code should use PHP to compute the SHA256 of your name and print it out like the sample application. You must compute this in your index.php file. The PHP code to achieve this for 'Charles Severance' is:
print hash('sha256', 'Charles Severance');
  • Open this file and copy-paste its contents into a file named fail.php in the same folder as your index.php. Do not alter this file - do not fix the mistake in the code in this file. The goal is to trigger an error to verify that we see errors in the browser.
  • Open this file and copy-paste in the contents into a file named check.php in the same folder as your index.php. Do not alter this file - do not fix the mistake in the code in this file. The goal is to trigger an error to verify that we see errors in the browser.
If you have a problem with the open in a browser and the copy-paste into a file. Then right click on the links above, and depending on your browser use Save As, Save Link As. After saving the file, use your file manager to rename them.

You must run these files in your PHP server. Make a folder under your htdocs folder and then place your files in that folder. The htdocs folder is in different locations depending on your web server:

Windows XAMPP: c:\xampp\htdocs and MAMP: C:\MAMP\htdocs

MAC MAMP: /Applications/MAMP/htdocs

You may see other options without an htdocs folder, for different operating systems & applications, when an all-in-one installer like MAMP or XAMPP is not used, like Linux.

Ubuntu: /var/www

Raspberry Pi: /var/www/html

You can check the htdocs (a.k.a. DOCUMENT_ROOT) value for your server by scrolling down in your PHPInfo output. You may have changed a setting in your PHP server to move the DOCUMENT_ROOT to another location and that is OK as well.

Just make sure all the files are in a folder somewhere within DOCUMENT_ROOT and that all your testing uses localhost URLs like:

http://localhost:8888/wa4e/php/index.php

If you turn in screen shots with file URLs, like file://, /folder/file, or c:/folder/file, you will get zero points for the assignment.

What To Hand In
For this assignment you will hand in:
  • Image of your application showing the URL bar and the rest of the output.
  • Image of your application showing the URL bar and output of fail.php
  • Image of your application showing the URL bar output of check.php
  • Source code of your index.php
Sample solution
You can explore a sample solution for this problem at https://www.wa4e.com/solutions/php/

Grading
Please do your reviews of the other students submissions carefully. The actual points you award are less important than useful comments about what might be wrong and need fixing. You cannot re-submit your assignment unless the instructor allows you to resubmit.

The total number of points for this assignment is 10. You will get up to 5 points from your instructor. You will get up to 3 points from your peers. You will get 1 for each peer assignment you assess. You need to grade a minimum of 2 peer assignments. You can grade up to 5 peer assignments if you like.

Copyright Creative Commons Attribution 3.0 - Charles R. Severance

WEEK 6 - PHP Arrays

We look at unique aspects of arrays in the PHP language.

RESOURCES
"The Missing Link" Textbook Chapters: 27, 28, 31

Sample Code

Submitting your code to the autograder
Starting with this assignment, some of the auto graders will need to contact your application to test it over the Internet. Since your computer normally has a firewall to block incoming connections from the Internet (a very good thing), we need a special program to temporarily "make a tunnel" through your firewall so the auto grader can contact the Apache server running on your local computer.

You can use NGrok to make this tunnel through your firewall. We provide documentation on how to use this application below as well as video walkthroughs both on YouTube and Coursera.
Auto-grader: Guessing Game
In this assignment you will write a simple guessing game in PHP. You will use a tunnel program like NGROK to turn in your assignment.

Assignment: https://www.wa4e.com/assn/guess/
Solution : https://www.wa4e.com/code/arrays/guess.php?guess=12

NGrok

NGrok is a tool to create temporary secure tunnels from a local server to the Internet. You will use this to submit this assignment to the autograder.

A Note on External Hosting:
External hosting may work for this assignment, however different hosts add scripts to code which may stop the assignment from being graded. It is recommended to use NGrok to submit assignments.

WEEK 7 - PHP Functions

We look at unique aspects of functions in PHP.

RESOURCES
"The Missing Link" Textbook Chapter: 14, 23-28, 31, 32


PHP - Functions
http://php.net/manual/en/function.sort.php

PHP - Modularity
https://github.com/csev/wa4e

Assignment Specification: Reversing an MD5 hash (password cracking)
In this next assignment, we'll build code to reverse an MD5 hash using a brute force technique where we simply 'forward hash' all possible combinations of characters in strings. This would be similar to a situation where an e-commerce site stored hashed passwords in its database and we somehow have gotten our hands on the database contents and we want to take the hashed password and determine the actual plaintext passwords.

This following is a list of people, and their hashed PIN values.

email

pin

hash_pin

csev@umich.edu

????

0bd65e799153554726820ca639514029

nabgilby@umich.edu

????

aa36c88c27650af3b9868b723ae15dfc

pconway@umich.edu

????

1ca906c1ad59db8f11643829560bab55

font@umich.edu

????

1d8d70dddf147d2d92a634817f01b239

collemc@umich.edu

????

acf06cdd9c744f969958e1f085554c8b

You should be able to easily crack all but one of these these PINs using your application.

The simplest brute force approach generally is done by writing a series of nested loops that go through all possible combinations of characters. This is one of the reasons that password policies specify that you include uppper case, lower case, numbers, and punctuation in passwords is to make brute force cracking more difficult. Significantly increasing the length of the password to something like 20-30 characters is a very good to make brute force cracking more difficult.

Partially Working Sample Code
You can play with the 2 letter code version of this application at https://www.wa4e.com/code/crack/ and download a ZIP of the starter code at https://www.wa4e.com/code/crack.zip.

Sample solution
You can explore a sample solution using the 4 digit PIN at https://www.wa4e.com/solutions/crack/

Specifications


Image of the crack application with a successful crack

Your application will take an MD5 value like "81dc9bdb52d04dc20036dbd8313ed055" (the MD5 for the string "1234") and check all combinations of four-digit "PIN" numbers to see if any of those PINs produce the given hash.

You will present the user with a form where they can enter an MD5 string and request that you reverse-hash the string. If you can reverse hash the string, print out the PIN:

PIN: 1234

If the string does not reverse hash to a four digit number simply put out a message like:

PIN: Not found

You must check all four-digit combinations. You must have the value as a string not as an integer. For this shows the right and wrong way to check the has for "1234":

$check = hash('md5', '1234'); // Correct - hashing a string

$check = hash('md5', 1234); // Incorrect - hashing an integer

You should also print out the first 15 attempts to reverse-hash including both the MD5 value and PIN that you were testing. You should also print out the elapsed time for your computation as shown in the sample application.

Consistency Details
In order to make the assignments more consistent, please follow these technical guidelines:
  • Put all of your code to do the cracking in your "index.php" so you can hand in one file. You can have other files (like in the sample solution) that you do not have to hand in.
  • Name the form field where you pass the MD5 into your application "md5"
<input type="text" name="md5" size="40">
  • Use the GET method on your form (i.e. not POST)
What To Hand In
For this assignment you will hand in:
  1. A screen shot of one of the MD5's from the list above/in the spec that you can successfully crack. Include the URL of your page in the screen shot so we can see your GET parameter.
  2. One of the MD5's list above/in the spec does not crack. Using your code, figure out which MD5 in the list does *NOT* crack and show your application not finding the PIN for the MD5. Include the URL of your page in the screen shot so we can see your GET parameter.
  3. Source code of your index.php
Grading
Please review carefully. The actual points are less important than useful comments about what might be wrong and need fixing. You cannot re-submit your assignment unless the instructor allows you to resubmit.

Optional Challenges
This section is entirely optional and is here in case you want to explore a bit more deeply and test your code skillz.

Here are some possible improvements:

  • For fun, crack all of the pins at the top of this document and figure out why each person chose their PIN.
  • You can crack some but not all more complex hashed values using a site like: CrackStation.net. For fun, use this site to crack all the above hash values.
  • Make your application test a more complex character set like, upper case letters, lower case letters, numbers, and common punctuation.
  • Change the code so when it finds a match, it breaks out of all four of the nested loops. So if the PIN turned out to be 1234 it would only run that many times. Hint: Make a logical variable that you set to true when you get a match and then as soon as that becomes true, break out of the outer loops.
  • Make your program handle longer strings - say six characters. At some point when you increase the number of characters and alphabet, it will take longer to reverse crack the string.
  • Change the debug output to print an attempt every 0.1 second instead of only the first 15 attempts.
  • Super Advanced: Make your program handle variable length strings - perhaps looking for a string from 3-7 characters long. At some point just making more nested loops produces too much code and you should switch to a more complex but compact approach that uses a few arrays and a while loop. But this can be tricky to construct and prone to infinite loops if you are not careful. This is probably best not attempted unless you have some background in Algorithms and Data Structures.
As your program increases its character length, or tests longer passwords, it will start to slow down. Make sure to run these on your laptop (i.e. not on a server). Many hosted PHP systems prohibit these kinds of CPU-intensive tasks on their systems.

At some point you might run into a time out where PHP decides that your code is running too long and blows up your application. You can check the variable max_execution_time in your PHPInfo screen to see how many seconds PHP will let your code run before aborting it.

Copyright Creative Commons Attribution 3.0 - Charles R. Severance

WEEK 8 - PHP and HTML Forms

We look at how HTML forms are created and processed in the PHP language.

RESOURCES
"The Missing Link" Textbook Chapter: 14, 27




Using GET and POST with Forms
http://www.wa4e.com/code/forms/form3.php

Model View Controller (MVC)
http://www.wa4e.com/code/forms/guess_mvc.php

Assignment Specification: Rock Paper Scissors
In this assignment we will create a three page web application to play rock, paper, scissors (http://en.wikipedia.org/wiki/Rock-paper-scissors).

Resources
The following modules will be helpful in understanding the aspects of PHP used in this application.
  • Arrays
  • Functions
  • Forms and POST Data
Documentation of how salted hashes work from Wikipedia.

Documentation on how one web page redirects to another in HTTP and PHP.

Documentation from PHP on how the header() function works.

NGROK - A tool to create temporary secure tunnels from a local server to the Internet. You will use this to submit this assignment to the autograder.

A Note on External Hosting:
  • External hosting may work for this assignment, however different hosts add scripts to code which may stop the assignment from being graded. It is recommended to use ngrok to submit assignments.
Sample Code

You can begin by using the starter code for an incomplete/broken version of this application from: https://www.wa4e.com/code/rps.zip

You can play with the broken sample code at https://www.wa4e.com/code/rps/

Sample solution
You can explore a sample solution for this problem at https://www.wa4e.com/solutions/rps/

Specifications


When you first come to the application (index.php) you are told to go to a login screen.

Requirements for the Login Screen
The login.php should be a login screen should present a field for the person's name (name="who") and their password (name="pass"). Your form should have a button labeled "Log In" that submits the form data using method="POST" (i.e. these should not be GET parameters).

The login screen needs to have some error checking on its input data. If either the name or the password field is blank, you should put up a message of the form:

User name and password are required

If the password is non-blank and incorrect, you should put up a message of the form:

Incorrect password

If there are errors, you should come back to the login screen (login.php) and show the error with blank input fields (i.e. don't carry over the values for name="who" and name="pass" fields from the previous post).

You are to use a "salted hash" for the password. The "plaintext" of the password is not to be present in your application source code except in comments. For this assignment, we will be using the following values for the salt and stored hash:

$salt = 'XyZzy12*_';

$stored_hash = '1a52e17fa899cf40fb04cfc42e6352f1';

Note that the sample code is using a different salted hash so you should change the sample code to use this hash.

The stored_hash is the MD5 of the salt concatenated with the plaintext of php123 - which is the password. This is computed using the following PHP:

$md5 = hash('md5', 'XyZzy12*_php123');

In order to check an incoming password you must concatenate the salt plus password together and then run that through the hash() function and compare it to the stored_hash.

If the incoming password, properly hashed matches the stored stored_hash value, the user's browser is redirected to the game.php page with the user's name as a GET parameter using:

header("Location: game.php?name=".urlencode($_POST['who']));

Specifications of the Game Playing Screen
In order to protect the game from being played without the user properly logging in, the game.php must first check the session to see if the user's name is set and if the user's name is not set in the session the game.php must stop immediately using the PHP die() function:

die("Name parameter missing");

To test, navigate to game.php manually without logging in - it should fail with "Name parameter missing".

If the user is logged in, they should be presented with a drop-down menu showing the options Rock, Paper, Scissors, and Test as well as buttons labeled "Play" and "Logout".

If the Logout button is pressed the user should be redirected back to the index.php page using:

header('Location: index.php');

If the user selects, Rock, Paper, or Scissors and presses "Play", the game chooses random computer throw, and scores the game and prints out the result of the game:

Your Play=Paper Computer Play=Paper Result=Tie

The computation as to whether the user wins, loses, or ties is to be done in a function named check() that returns a string telling the user what happened:

// This function takes as its input the computer and human play

// and returns "Tie", "You Lose", "You Win" depending on play

// where "You" is the human being addressed by the computer

function check($computer, $human) {

...

return "Tie";

...

return "You Win";

...

return "You Lose";

...

}

The "Test" option requires that you write two nested for loops that tests all combinations of possible human and computer play combinations:

for($c=0;$c<3;$c++) {

for($h=0;$h<3;$h++) {

$r = check($c, $h);

print "Human=$names[$h] Computer=$names[$c] Result=$r\n";

}

}

The $names variable contains the strings "Rock", "Paper", and "Scissors" in this example. The output of this should look look as follows:


This will allow you to make sure that your check() function properly handles all combinations of the possible plays properly without having to play for a long time as the computer makes random plays.

What To Hand In
For this assignment you will hand in:
  • A screen shot (with URL) of your login.php rejecting an incorrect password
  • A screen shot (with URL) of your game.php correctly showing the 'Name parameter missing' error
  • A screen shot (with URL) of your game.php doing a normal play with the computer making a choice other than Rock
  • A screen shot (with URL) of your game.php doing a correct test run
  • Source code of login.php
  • Source code of game.php

Grading
Please review carefully. The most important aspect of peer-grading is useful comments about what might be wrong and need fixing. You cannot re-submit your assignment unless the instructor allows you to resubmit.

Optional Challenges
This section is entirely optional and is here in case you want to explore a bit more deeply and test your code skillz.

Here are some possible improvements:

  • Instead of using a series of if-elseif-else statements in the check() function, try to compute the win/lose aspect of the game with a simple arithmetic computation using remainder operator ( % )
  • Add some images to the output. Don't replace the required output with images - simply add some images to make it prettier.
Autograder: Rock Paper Scissors
In this assignment we will create a two page web application to play rock, paper, scissors http://en.wikipedia.org/wiki/Rock-paper-scissors - We will only allow logged in users to play the game.

Assignment: https://www.wa4e.com/assn/rps/


Thank's for Reading
at
Labels: , , , , , , , , , ,

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)

Foundations: Data, Data, Everywhere

Google Data Analytics Professional Certificate COURSE 1: Foundations: Data, Data, Everywhere Certified course payment here About this Course...