miércoles, 12 de abril de 2023

C4 - Web Applications for Everybody Specialization - COURSE 4

 JavaScript, jQuery, and JSON

LECTURES COURSE 4


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!

WEEK 1 - Introduction to JavaScript
We take a quick look at the JavaScript language. We assume that you already know PHP - so it is a pretty quick introduction focusing on what is different about JavaScript.
00:00 - Welcome to the Course
3:24 - JavaScript Overview
13:33 - Basic JavaScript
23:16 - JavaScript - Core Language Features
27:24 - JavaScript - Variables and Expressions
37:46 - JavaScript - Arrays and Control Structures
41:35 - Code Walkthrough: JavaScript
53:26 - JavaScript - Document Object Model
1:07:14 - Code Walkthrough: Document Object Model (DOM)
1:13:40 - Bonus: Brendan Eich - Inventing JavaScript
1:25:13 - Bonus: Office Hours Seattle, Washington
1:28:16 - Code Walkthrough - Javascript/Profiles
1:38:24 - Installing MAMP on Macintosh
1:45:15 - Installing MAMP on Windows10
1:59:35 - Installing XAMPP on Windows10
2:08:41 - Windows: Using NGrok with the Autograder
2:13:46 - Macintosh: Using NGrok with the Autograder

WEEK 2 - JavaScript Objects
We do a quick look at how the JavaScript language supports the Object-Oriented pattern. This is the second time we look at the OO pattern so we focus on the unique aspect of how JavaScript approaches OO.
2:23:22 - JavaScript - Object Oriented Concepts
2:28:32 - JavaScript - Building Objects
2:36:19 - JavaScript - Object Life Cycle
2:42:31 - Bonus: Office Hours Seoul, South Korea

WEEK 3 - Using JQuery
This is a brief introduction to the JQuery library which is widely used to do in-browser manipulation of the Document Object Model(DOM) and event handling.
2:51:55 - jQuery Basics
3:11:33 - Code Walkthrough: jQuery Basics
3:24:25 - Forms and jQuery
3:37:28 - Code Walkthrough: Forms and JQuery
3:48:53 - Bonus: John Resig - JQuery
3:58:41 - Bonus: Office Hours, Barcelona
4:00:52 - Code Walkthrough: Profiles, Positions and JQuery

WEEK 4 - JSON - JavaScript Object Notation
In this section we look at JavaScript Object Notation (JSON). JSON is commonly used as a syntax to exchange data between code running on the server (i.e. in PHP) and code running in the browser (JavaScript/JQuery).
4:25:57 - JavaScript Object Notation (JSON)
4:34:32 - JSON and jQuery
4:46:06 - Code Walkthrough: JavaScript Object Notation
5:00:35 - JSON Chat
5:13:56 - Code Walkthrough: JSON Chat
5:25:21 - Code WalkThrough - JSON CRUD
5:34:44 - Code Walkthrough: Profile, Positions, Education, and JSON
6:08:48 - Bonus Office Hours: Montreal, Quebec
6:13:31 - Fun: Chuck Pretends he is a Travel Show (Paris)

Don't forget to subscribe and like that helps me keep uploading videos

THANK'S FOR WATCHING

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, we'll look at the JavaScript language, and how it supports the Object-Oriented pattern, with a focus on the unique aspect of how JavaScript approaches OO. We'll explore a brief introduction to the jQuery library, which is widely used to do in-browser manipulation of the Document Object Model (DOM) and event handling. You'll also learn more about JavaScript Object Notation (JSON), which is commonly used as a syntax to exchange data between code running on the server (i.e. in PHP) and code running in the browser (JavaScript/jQuery).

It is assumed that learners have already taken the Building Web Applications and Building Database Applications in PHP courses in this specialization.

WEEK 1 - Introduction to JavaScript

We take a quick look at the JavaScript language. We assume that you already know PHP - so it is a pretty quick introduction focusing on what is different about JavaScript.

RESOURCES

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

Assignment Specification: JavaScript/Profiles
In this next assignment you will write a simple resume database that support Create, Read, Update, and Delete operations (CRUD). You will also move user information into its own table and link entries between two tables using foreign keys. You will also add some in-browser JavaScript data validation.

Sample solution
You can explore a sample solution for this problem at http://www.wa4e.com/solutions/res-profile/

Resources
There are several resources you might find useful:

Recorded lectures, sample code and chapters from www.wa4e.com:
  • Review the SQL language
  • Using PDO in PHP
  • JavaScript
How to validate a form in JavaScript on StackOverflow.

Documentation from www.php.net on how to use PDO to talk to a database.

General Specifications
Here are some general specifications for this assignment:
  • You must use the PHP PDO database layer for this assignment.
  • Your name must be in the title tag of the HTML for all of the pages for this assignment.
  • All data that comes from the users must be properly escaped using the htmlentities() function in PHP. You do not need to escape text that is generated by your program.
  • You must follow the POST-Redirect-GET pattern for all POST requests. This means when your program receives and processes a POST request, it must not generate any HTML as the HTTP response to that request. It must use the "header('Location: ...');" function and either "return;" or "exit();" to send the location header and redirect the browser to the same or a different page.
  • All error messages must be "flash-style" messages where the message is passed from a POST to a GET using the SESSION.
  • Please do not use HTML5 in-browser data validation (i.e. type="number") for the fields in this assignment as we want to make sure you can properly do server side data validation. And in general, even when you do client-side data validation, you should still validate data on the server in case the user is using a non-HTML5 browser.
Databases and Tables Required for the Assignment

You will need to have a users table as follows:

CREATE TABLE users (
  user_id INTEGER NOT NULL AUTO_INCREMENT,
  name VARCHAR(128),
  email VARCHAR(128),
  password VARCHAR(128),
  PRIMARY KEY(user_id)
) ENGINE = InnoDB DEFAULT CHARSET=utf8;

ALTER TABLE users ADD INDEX(email);
ALTER TABLE users ADD INDEX(password);

You will also need to add a Profile table as follows:

CREATE TABLE Profile (
  profile_id INTEGER NOT NULL AUTO_INCREMENT,
  user_id INTEGER NOT NULL,
  first_name TEXT,
  last_name TEXT,
  email TEXT,
  headline TEXT,
  summary TEXT,
  PRIMARY KEY(profile_id),
  CONSTRAINT profile_ibfk_2
  FOREIGN KEY (user_id)
  REFERENCES users (user_id)
  ON DELETE CASCADE ON UPDATE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

This table has a foreign key to the users table.

The Screens for This Assignment
We are going to have a number of screens (files) for this assignment. Functionality will be moved around from the previous assignment, although much of the code from the previous assignment can be adapted with some refactoring.
  • index.php Will present a list of all profiles in the system with a link to a detailed view with view.php whether or not you are logged in. If you are not logged in, you will be given a link to login.php. If you are logged in you will see a link to add.php add a new resume and links to delete or edit any resumes that are owned by the logged in user.
  • login.php will present the user the login screen with an email address and password to get the user to log in. If there is an error, redirect the user back to the login page with a message. If the login is successful, redirect the user back to index.php after setting up the session. In this assignment, you will need to store the user's hashed password in the users table as described below.
  • logout.php will log the user out by clearing data in the session and redirecting back to index.php. This file can be very short - similar to the following:
<?php // line 1 added to enable color highlight

session_start();
unset($_SESSION['name']);
unset($_SESSION['user_id']);
header('Location: index.php');
  • add.php add a new Profile entry. Make sure to mark the entry with the foreign key user_id of the currently logged in user. (create)
<?php // line 1 added to enable color highlight


$stmt = $pdo->prepare('INSERT INTO Profile
  (user_id, first_name, last_name, email, headline, summary)
  VALUES ( :uid, :fn, :ln, :em, :he, :su)');

$stmt->execute(array(
  ':uid' => $_SESSION['user_id'],
  ':fn' => $_POST['first_name'],
  ':ln' => $_POST['last_name'],
  ':em' => $_POST['email'],
  ':he' => $_POST['headline'],
  ':su' => $_POST['summary'])
);

  • view.php show the detail for a particular entry. This works even is the user is not logged in. (read)
  • edit.php edit an exsiting entry in the database. Make sure the user is logged in, that the entry actually exists, and that the current logged in user owns the entry in the database. (update)
  • delete.php delete an entry from the database. Do not do the delete in a GET - you must put up a verification screen and do the actual delete in a POST request, after which you redirect back to index.php with a success message. Before you do the delete, make sure the user is logged in, that the entry actually exists, and that the current logged in user owns the entry in the database. (delete)
If the user goes to an add, edit, or delete script without being logged in, die with a message of "Not logged in".

You might notice that there are several common operations across these files. You might want to build a set of utility functions to avoid copying and pasting the same code over and over across several files.

Storing Users and Hashed Password in the Database
In this assignment, we are going to allow for more than one user to log into our system so we will switch from storing the account and hashed password in PHP strings to storing them in the database. The salt value will remain in the PHP code.

Once you create the users table above, you will need to insert a user record into the "users" table using this SQL:

INSERT INTO users (name,email,password)

VALUES ('UMSI','umsi@umich.edu','1a52e17fa899cf40fb04cfc42e6352f1');

The above password is the salted MD5 hash of 'php123' using a salt of 'XyZzy12*_'. You will need this user in the database to pass the assignment. You can add other users to the database if you like.

The salt value remains in the PHP code while the stored hash moves into the database. There should be no stored hash in your PHP code. You can compute the salted hash of any password / salt combination using this PHP code:

Salt-O-Matic 2000

Since the email address and salted hash are stored in the database, we must use a different approach than in the previous assignment to check to see if the email and password match using the following approach:

$check = hash('md5', $salt.$_POST['pass']);

$stmt = $pdo->prepare('SELECT user_id, name FROM users

WHERE email = :em AND password = :pw');

$stmt->execute(array( ':em' => $_POST['email'], ':pw' => $check));

$row = $stmt->fetch(PDO::FETCH_ASSOC);

Since we are checking if the stored hashed password matches the hash computation of the user-provided password, If we get a row, then the password matches, if we don't get a row (i.e. $row is false) then the password did not match. If he password matches, put the user_id value for the user's row into session as well as the user's name:

if ( $row !== false ) {

$_SESSION['name'] = $row['name'];

$_SESSION['user_id'] = $row['user_id'];

// Redirect the browser to index.php

header("Location: index.php");

return;

...

Make sure to redirect back to login.php with an error message when there is no row selected.

Login Data Validation in JavaScript

In addition to the PHP data validation in the previous assignment, you need to add JavaScript based data validation on the login.php screen that pops up an alert() dialog if either field is blank or the email address is missing.


This is done using an onclick event on the form submit button that calls a JavaScript function that checks the data, puts up an alert box if there is a problem and then returns true or false depending on the validity of the data.

     <input type="password" name="pass" id="id_1723">
     <input type="submit" onclick="return doValidate();" value="Log In">
     ...

This is a partial implementation of the doValidate() function that only checks the password field.

function doValidate() {
         console.log('Validating...');
         try {
             pw = document.getElementById('id_1723').value;
             console.log("Validating pw="+pw);
             if (pw == null || pw == "") {
                 alert("Both fields must be filled out");
                 return false;
             }
             return true;
         } catch(e) {
             return false;
         }
         return false;
     }

Make sure to retain the PHP data validation checks as well given that any in-browser checks can be bypassed by a determinied end-user.

Profile Data validation

When you are reading profile data in add.php or edit.php, do the following data validation:
  • All fields are required. If one of the fields is left blank put out a message like
All fields are required

and redirect back to the same page.
  • The email address must include an @ sign in the text. If there is no @ sign in the email address issue a message of the form:
Email address must contain @

and redirect back to the same page.

To redirect back to the same page when the page requires a GET parameter (i.e. like edit), you need to add the GET parameter to the URL that you put in the location header using a technique similar to the following:

header("Location: edit.php?profile_id=" . $_POST["profile_id"]);

You may need to change profile_id to match the GET parameter your code is expecting and the name of the hidden parameter in your form (and $_POST) data.

Submitting Your Assignment
As a reminder, your code must meet all the specifications (including the general specifications) above. Just having good screen shots is not enough - we will look at your code to see if you made coding errors. For this assignment you will hand in:
  1. A screen shot (including the URL) of your index.php with the user logged in three resumes in the list.
  2. A screen shot (including the URL) of your edit.php showing the error message for a bad email address
  3. A screen shot (including the URL) of your delete.php showing that you are showing the confirmation screen before the delete is being done.
  4. A screen shot of your Profile database table showing three rows
  5. Source code of index.php
  6. Source code of login.php
  7. Source code of edit.php
  8. Source code of delete.php
Database Setup Detail
If you have been doing all the previous assignments, you should have a database set up. Here is the SQL if you are just starting on this assignment:

    CREATE DATABASE misc DEFAULT CHARACTER SET utf8 ;
     GRANT ALL ON misc.* TO 'fred'@'localhost' IDENTIFIED BY 'zap';
     GRANT ALL ON misc.* TO 'fred'@'127.0.0.1' IDENTIFIED BY 'zap';
     USE misc;   (If in the command line)
     CREATE TABLE users (
          user_id INTEGER NOT NULL AUTO_INCREMENT,
          name VARCHAR(128),
          email VARCHAR(128),
          password VARCHAR(128),
          PRIMARY KEY(user_id),
          INDEX(email)
     ) ENGINE=InnoDB CHARSET=utf8;
     ALTER TABLE users ADD INDEX(email);
     ALTER TABLE users ADD INDEX(password);
     INSERT INTO users (name,email,password)
          VALUES ('Chuck','csev@umich.edu','1a52e17fa899cf40fb04cfc42e6352f1');
     INSERT INTO users (name,email,password)
          VALUES ('UMSI','umsi@umich.edu','1a52e17fa899cf40fb04cfc42e6352f1');

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:
  • Add an optional URL field to your tables and user interface. Validate the URL to make sure it starts with "http://" or "https://". It is OK for this to be blank. If this is non-blank show the image in the table view in index.php and in the view.php file.
  • Medium Difficulty: Use the PHP cURL library to do a GET to the image URL from within PHP and if the URL does not exist, issue an error message to the user and do not add the profile.
  • This is a bit tricky so please don't try if it feels confusing. Change the program so it supports multiple users and each user can only edit or delete profiles that match their user_id. Insert a second row into the users table with the same or a diffferent hashed password. This way you can log in with one user name, add some profiles, logout and log in as another user, add some profiles and then logout and log back in as the original user and the Edit/Delete buttons will only appear for the profiles owned by the user.
  • Advanced: Change the index.php so that it has a search field. Use the LIKE operator in the WHERE clause. You can use a LIKE operator on any column (including numbers) and you can use the LIKE column on all of the columns as well.
  • Super Advanced: If there are more than 10 profiles, only show 10 at a time and put up Next and Back buttons as appropriate. Use count query to determine number of rows and a a LIMIT clause in your tables query to return the correct range of rows.
Auto-Grader: JavaScript / Profiles
In this assignment you will write a simple resume database that support Create, Read, Update, and Delete operations (CRUD). You will also move user information into its own table and link entries between two tables using foreign keys. You will also add some in-browser JavaScript data validation.

Assignment: https://www.wa4e.com/assn/res-profile/
Solution: https://www.wa4e.com/solutions/res-profile/

Peer-Grader: JavaScript / Profiles
In this assignment you will write a simple resume database that support Create, Read, Update, and Delete operations (CRUD). You will also move user information into its own table and link entries between two tables using foreign keys. You will also add some in-browser JavaScript data validation.

Assignment: https://www.wa4e.com/assn/res-profile/
Solution: https://www.wa4e.com/solutions/res-profile/

Installation Handouts
Setting up your PHP/MySql Development 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:

Ask Ubuntu: How to set up a LAMP stack

Submitting your code to the autograder
Some of the auto graders in this course 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.

Using Ngrok and the Autograder on a Macintosh
Using Ngrok and the Autograder on Windows-10

If you have the more advanced skills to put your applications up on the Internet with a real domain name, you do not need to use a tunnel program.

WEEK 2 - JavaScript Objects

We do a quick look at how the JavaScript language supports the Object-Oriented pattern. This is the second time we look at the OO pattern so we focus on the unique aspect of how JavaScript approaches OO.

RESOURCES

Sample Code & Embedded Links
WEEK 3 - Using JQuery

This is a brief introduction to the JQuery library which is widely used to do in-browser manipulation of the Document Object Model(DOM) and event handling.

Assignment Specification: Profiles, Positions and JQuery

RESOURCES

Sample Code & Embedded Links
Assignment Specification: Profiles, Positions and JQuery
In this next assignment you will extend our simple resume database to support Create, Read, Update, and Delete operations (CRUD) into a Position table that has a many-to-one relationship to our Profile table.

This assignment will use JQuery to dynamically add and delete positions in the add and edit user interface.


Sample solution

You can explore a sample solution for this problem at http://www.wa4e.com/solutions/res-position/

Additional Resources
Additional Table Required for the Assignment

This assignment will add one more table to the database from the previous assignment. We will create a Position table and connect it to the Profile table with a many-to-one relationship.

CREATE TABLE Position (
  position_id INTEGER NOT NULL AUTO_INCREMENT,
  profile_id INTEGER,
  rank INTEGER,
  year INTEGER,
  description TEXT,
  PRIMARY KEY(position_id),
  CONSTRAINT position_ibfk_1
    FOREIGN KEY (profile_id)
    REFERENCES Profile (profile_id)
    ON DELETE CASCADE ON UPDATE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

There is no logical key for this table.

The rank column should be used to record the order in which the positions are to be displayed. Do not use the year as the sort key when viewing the data.

Including JQuery
You should include the JQuery JavaScript along with the bootstrap CSS in your code similar to the following:

<head>
...
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
...
</head>

The Screens for This Assignment

We will be extending the user interface of the previous assignment to implement this assignment. All of the requirements from the previous assignment still hold. In this section we will talk about the additional UI requirements.
  • add.php You will need to have a section where the user can press a "+" button to add up to nine empty position entries. Each position entry includes a year (integer) and a description.
  • view.php Will show all of the positions in an un-numbered list.
  • edit.php Will support the addition of new position entries, the deletion of any or all of the existing entries, and the modification of any of the existing entries. After the "Save" is done, the data in the database should match whatever positions were on the screen and in the same order as the positions on the screen.
  • index.php No change needed.
  • login.php No change needed.
  • logout.php No change needed.
  • delete.php No change needed.
If the user goes to an add, edit, or delete script without being logged in, die with a message of "ACCESS DENIED".

Optional: Not required for the assignment- You might notice that there are several common operations across these files. You might want to build a set of utility functions to avoid copying and pasting the same code over and over across several files. If you decide to do this, first get the assignment working with the code in each php file. Then move / create 1 function at a time, remove the code from 1 php file, test. Then remove the code from the other files.

Data validation
In addition to all of the validation requirements from the previous assignment, you must make sure that for all the positions both the year and description are non-blank and that the year is numeric.

All fields are required

or

Year must be numeric

Handling the Input From Multiple Positions

If you look at the sample implementation, it only allows a maximum of nine positions in the form. This is checked and enforced in the JavaScript for both the add.php and edit.php code.

The logic is somewhat simple and gets confusing when there is a combination of adds and deletes. It will never add more than nine new or total positions, but if you delete some of the positions, you do not get a postion "back" to re-add unless you press "Save". So if you add eight positions and then delete five positions without pressing "Save", you can only add one more entry rather than four more entries.

This makes the JavaScript more simple and you are welcome to take the same approach.

The result is that if you add two positions and delete one position, you will end up with a form that looks like the following in the generated document object model:

<div id="position1">
  <p>Year: <input type="text" name="year1" value="">
  <input type="button" value="-" onclick="$('#position1').remove();return false;"></p>
  <textarea name="desc1" rows="8" cols="80"></textarea>
</div>

<div id="position3">
  <p>Year: <input type="text" name="year3" value="">
  <input type="button" value="-" onclick="$('#position3').remove();return false;"></p>
  <textarea name="desc3" rows="8" cols="80"></textarea>
</div>

In a sense we are simulating an array with the naming convention of the fields with the number at the end of the field. A way to handle multiple inputs with a naming convention like this is to use code like the following:

<?php // line 1 added to trigger color syntax highlight

function validatePos() {
  for($i=1; $i<=9; $i++) {
    if ( ! isset($_POST['year'.$i]) ) continue;
    if ( ! isset($_POST['desc'.$i]) ) continue;

    $year = $_POST['year'.$i];
    $desc = $_POST['desc'.$i];

    if ( strlen($year) == 0 || strlen($desc) == 0 ) {
      return "All fields are required";
    }

    if ( ! is_numeric($year) ) {
      return "Position year must be numeric";
    }
  }
  return true;
}

Note that we handle gaps by simply checking the data that is present and skipping any data that is missing.

Setting the Foreign Key for Positions

When you are building the add.php code to add a new profile and some number of positions, you need to insert the profile_id as a foreign key for each of the position rows. But since you have not yet added the profile you do now know the profile_id which will be selected by the database.

Fortunately there is a way to ask PDO for the most recently inserted primary key after the insert has been done using the lastInsertId() method provided by PDO. Here is some sample code:

<?php // line 1 added to trigger color syntax highlight

// Data is valid - time to insert

$stmt = $pdo->prepare('INSERT INTO Profile (user_id, first_name, last_name, email, headline, summary) VALUES ( :uid, :fn, :ln, :em, :he, :su)');

$stmt->execute(array(
':uid' => $_SESSION['user_id'],
':fn' => $_POST['first_name'],
':ln' => $_POST['last_name'],
':em' => $_POST['email'],
':he' => $_POST['headline'],
':su' => $_POST['summary'])
);

$profile_id = $pdo->lastInsertId();

...

$stmt = $pdo->prepare('INSERT INTO Position (profile_id, rank, year, description) VALUES ( :pid, :rank, :year, :desc)');

$stmt->execute(array(
':pid' => $profile_id,
':rank' => $rank,
':year' => $year,
':desc' => $desc)
);

$rank++;
The variable $profile_id contains the primary key of the newly created profile so you can include it in the INSERT into the Postion table.

Note: The 'Summary' field uses the HTML textarea which does not contain a value attribute to write the data. Therefore, a different syntax is required:

<textarea>$variable</textarea>

Dealing with Changes to Positions When Editing

When you implement edit.php the user can do any combination of adds, removals, or edits of the position data. So when you are processing the incoming POST data, you need to somehow get the data in the database to match the incoming POST data.

One (difficult) approach is to retrieve the "old" positions from the database, and loop through all old positions and figure out which need to be deleted, updated, or inserted. If you want to try to do that for this assignment - feel free - but consider it an "extra challenge".

For your first implementation of handling the POST data in edit.php just delete all the old Postion entries and re-insert them:

Clear out the old position entries

<?php // line 1 added to trigger color syntax highlight

// Clear out the old position entries
$stmt = $pdo->prepare('DELETE FROM Position WHERE profile_id=:pid');
$stmt->execute(array( ':pid' => $_REQUEST['profile_id']));

Insert the position entries

<?php // line 1 added to trigger color syntax highlight

// Insert the position entries

$rank = 1;
for($i=1; $i<=9; $i++) {
  if ( ! isset($_POST['year'.$i]) ) continue;
  if ( ! isset($_POST['desc'.$i]) ) continue;

  $year = $_POST['year'.$i];
  $desc = $_POST['desc'.$i];
  $stmt = $pdo->prepare('INSERT INTO Position
    (profile_id, rank, year, description)
    VALUES ( :pid, :rank, :year, :desc)');

  $stmt->execute(array(
  ':pid' => $_REQUEST['profile_id'],
  ':rank' => $rank,
  ':year' => $year,
  ':desc' => $desc)
  );

  $rank++;

}

This approach has the nice advantage that you are reusing code between edit.php and add.php. The only difference is that in edit.php you just remove the existing entries first.

Submitting Your Assignment
As a reminder, your code must meet all the specifications (including the general specifications) above. Just having good screen shots is not enough - we will look at your code to see if you made coding errors. For this assignment you will hand in:
  • A screen shot (including the URL) of your add.php showing two positions
  • A screen shot (including the URL) of your edit.php showing one position modified, one position deleted and one new position
  • A screen shot (including the URL) of your view.php showing the correct new positions after the edit is complete
  • A screen shot (including the URL) of your add.php showing the error message for a bad year
  • A screen shot of your Postition database table showing at least three rows
  • Source code of add.php
  • Source code of view.php
  • Source code of edit.php
General Specifications
Here are some general specifications for this assignment:
  • You must use the PHP PDO database layer for this assignment. If you use the "mysql_" library routines or "mysqli" routines to access the database, you will receive a zero on this assignment.
  • Your name must be in the title tag of the HTML for all of the pages for this assignment.
  • All data that comes from the users must be properly escaped using the htmlentities() function in PHP. You do not need to escape text that is generated by your program.
  • You must follow the POST-Redirect-GET pattern for all POST requests. This means when your program receives and processes a POST request, it must not generate any HTML as the HTTP response to that request. It must use the "header('Location: ...');" function and either "return" or "exit();" to send the location header and redirect the browser to the same or a different page.
  • All error messages must be "flash-style" messages where the message is passed from a POST to a GET using the SESSION.
  • Please do not use HTML5 in-browser data validation (i.e. type="number") for the fields in this assignment as we want to make sure you can properly do server side data validation. And in general, even when you do client-side data validation, you should still validate data on the server in case the user is using a non-HTML5 browser.
Optional Challenges
Try to so the more inticate approach to updating positions in edit.php without using the "delete all the previous positions" trick. It will help if you add the position_id form markup that you generate for the positions that came from the database when edit.php starts.

Database Setup Detail
If you have been doing all the previous assignments, you should have a database set up. Here is the SQL if you are just starting on this assignment:

CREATE DATABASE misc DEFAULT CHARACTER SET utf8 ;

GRANT ALL ON misc.* TO 'fred'@'localhost' IDENTIFIED BY 'zap';
GRANT ALL ON misc.* TO 'fred'@'127.0.0.1' IDENTIFIED BY 'zap';

USE misc; (If in the command line)

CREATE TABLE users (
  user_id INTEGER NOT NULL AUTO_INCREMENT,
  name VARCHAR(128),
  email VARCHAR(128),
  password VARCHAR(128),
  PRIMARY KEY(user_id),
  INDEX(email)
) ENGINE=InnoDB CHARSET=utf8;

ALTER TABLE users ADD INDEX(email);
ALTER TABLE users ADD INDEX(password);

INSERT INTO users (name,email,password) 
VALUES ('Chuck','csev@umich.edu','1a52e17fa899cf40fb04cfc42e6352f1');

INSERT INTO users (name,email,password) 
VALUES ('UMSI','umsi@umich.edu','1a52e17fa899cf40fb04cfc42e6352f1');

Auto-Grader: Profiles, Positions and jQuery
In this assignment you will add a many-to-one relationship to represent how a Profile will reference multiple positions. You will use jQuery to build a dynamic User Interface where position entries are added in the browser.

Assignment: https://www.wa4e.com/assn/res-position/
Solution: https://www.wa4e.com/solutions/res-position/

Peer-Grader: Profiles, Positions and jQuery
In this assignment you will add a many-to-one relationship to represent how a Profile will reference multiple positions. You will use jQuery to build a dynamic User Interface where position entries are added in the browser.

Assignment: https://www.wa4e.com/assn/res-position/
Solution: https://www.wa4e.com/solutions/res-position/

WEEK 4 - JSON - JavaScript Object Notation

In this section we look at JavaScript Object Notation (JSON). JSON is commonly used as a syntax to exchange data between code running on the server (i.e. in PHP) and code running in the browser (JavaScript/JQuery).

RESOURCES

Sample Code & Embedded Links
Assignment Specification: Profiles, Positions, and Education
In this next assignment, you will extend our simple resume database to support Create, Read, Update, and Delete operations (CRUD) into a Education table that has a many-to-one relationship to our Profile table and a many-to-many relationship to an Institution table. We will add an jQuery autocomplete field to our user interface.

This assignment will also feature a jQuery auto-complete field when entering the name of the school.

Sample solution
You can explore a sample solution for this problem at http://www.wa4e.com/solutions/res-education/

Resources
There are several resources you might find useful:
Additional Tables Required for the Assignment

This assignment will add one more table to the database from the previous assignment. We will create Education and Institution tables and connect them to the Profile table.

CREATE TABLE Institution (
  institution_id INTEGER NOT NULL KEY AUTO_INCREMENT,
  name VARCHAR(255),
  UNIQUE(name)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

CREATE TABLE Education (
  profile_id INTEGER,
  institution_id INTEGER,
  rank INTEGER,
  year INTEGER,
  CONSTRAINT education_ibfk_1
    FOREIGN KEY (profile_id)
    REFERENCES Profile (profile_id)
    ON DELETE CASCADE ON UPDATE CASCADE,
  CONSTRAINT education_ibfk_2
    FOREIGN KEY (institution_id)
    REFERENCES Institution (institution_id)
    ON DELETE CASCADE ON UPDATE CASCADE,
  PRIMARY KEY(profile_id, institution_id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

You must create the Institution table first so that the CONSTRAINTS in the Education table work properly.

Like in the Position table, the rank column should be used to record the order in which the positions are to be displayed. Do not use the year as the sort key when viewing the data.

You should also pre-insert some University data into the Institution table as follows:

INSERT INTO Institution (name) VALUES ('University of Michigan');
INSERT INTO Institution (name) VALUES ('University of Virginia');
INSERT INTO Institution (name) VALUES ('University of Oxford');
INSERT INTO Institution (name) VALUES ('University of Cambridge');
INSERT INTO Institution (name) VALUES ('Stanford University');
INSERT INTO Institution (name) VALUES ('Duke University');
INSERT INTO Institution (name) VALUES ('Michigan State University');
INSERT INTO Institution (name) VALUES ('Mississippi State University');
INSERT INTO Institution (name) VALUES ('Montana State University');

This will allow you to have some university names pop up when you are typing ahead in the School field.

JavaScript and CSS
To make this work use the following JavaScript / CSS in your document's head area:

Optional : As shown in the code walkthrough. Copy lines 3-11 into a new file, head.php, remembering to add the require_once(scriptname); as needed.

<head>
...
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/ui-lightness/jquery-ui.css">

<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
...
</head>

Type Ahead
If you look a the sample implementation, the actual typeahead code in the browser is pretty simple starting with the text field that we want to add the auto-complete to:

School: <input type="text" size="80" name="edu_school1" class="school" value="" />

This is a normal input tag to which we have added the "school" class. We attach typeahead code to this input box using the following jQuery code:

$('.school').autocomplete({ source: "school.php" });

This simply says that we want to have autocomplete active for all input tags with a class of "school" and to call the script school.php with the partially typed school name using the following calling sequence (make sure your are logged in to the sample application before accessing this URL):

http://www.wa4e.com/solutions/res-education/school.php?term=Univer

The term is whatever has been typed into the input field so far. The HTTP response from the school.php is a JSON array of items to displayed as the autocomplete list:

["University of Cambridge","University of Michigan", "University of Oxford","University of Virginia"]

After error checking and session checking the code to return the list of universities that match the prefix typed so far looks as follows:

$stmt = $pdo->prepare('SELECT name FROM Institution WHERE name LIKE :prefix');
$stmt->execute(array( ':prefix' => $_REQUEST['term']."%"));
$retval = array();
while ( $row = $stmt->fetch(PDO::FETCH_ASSOC) ) {
  $retval[] = $row['name'];
}

echo(json_encode($retval, JSON_PRETTY_PRINT));

Note : To return the correct HTTP response from school.php for the JSON array, it requires a Content header to be sent before the data. See the sample code json-01.zip/JSON.php, links in the Resources section at the top of this page.

The Screens for This Assignment
We will be extending the user interface of the previous assignment to implement this assignment. All of the requirements from the previous assignment still hold. In this section we will talk about the additional UI requirements.
  • add.php You will need to have a section where the user can press a "+" button to add up to nine empty education entries. Each education entry includes a year (integer) and a school name.
  • view.php Will show all of the education entries in an un-numbered list and the positions in another un-numbered list.
  • edit.php Will support the addition of new position or education entries, the deletion of any or all of the existing entries, and the modification of any of the existing entries. After the "Save" is done, the data in the database should match whatever positions and education entries were on the screen and in the same order as the positions on the screen.
  • index.php No change needed.
  • login.php No change needed.
  • logout.php No change needed.
  • delete.php No change needed.
If the user goes to an add, edit, or delete script without being logged in, die with a message of "ACCESS DENIED".

Optional : You might notice that there are several common operations across these files. You might want to build a set of utility functions to avoid copying and pasting the same code over and over across several files. In the lecture these are shown as head & util.php. If you decide to do this remember to load these before any script or functions are called.

For example, Code Walkthrough: Profile, Positions, Education, and JSON @ 07:36 edit.php, the require at the top.

Data validation
In addition to all of the validation requirements from the previous assignment, you must make sure for the education entries - year, description and institution name are non-blank and that all years are numeric.

All fields are required

or

Year must be numeric

Submitting Your Assignment
As a reminder, your code must meet all the specifications (including the general specifications) above. Just having good screen shots is not enough - we will look at your code to see if you made coding errors. For this assignment you will hand in:
  • A screen shot (including the URL) of your add.php showing one existing Education institution and one new education institution
  • A screen shot (including the URL) of your edit.php showing one education entry modified, one education entry deleted and one new education entry
  • A screen shot (including the URL) of your view.php showing the correct new education entry after the edit is complete
  • A screen shot (including the URL) of your add.php showing the error message for a bad year
  • A screen shot of your Education database table showing at least three rows
  • A screen shot of your Institution database table showing at least one new row inserted when the institution name did not match an existing instutition
  • Source code of add.php
  • Source code of view.php
  • Source code of edit.ph
  • Source code any file in your application that you choose (i.e. util.php)
General Specifications
Here are some general specifications for this assignment:
  • You must use the PHP PDO database layer for this assignment. If you use the "mysql_" library routines or "mysqli" routines to access the database, you will receive a zero on this assignment.
  • Your name must be in the title tag of the HTML for all of the pages for this assignment.
  • All data that comes from the users must be properly escaped using the htmlentities() function in PHP. You do not need to escape text that is generated by your program.
  • You must follow the POST-Redirect-GET pattern for all POST requests. This means when your program receives and processes a POST request, it must not generate any HTML as the HTTP response to that request. It must use the "header('Location: ...');" function and either "return" or "exit();" to send the location header and redirect the browser to the same or a different page.
  • All error messages must be "flash-style" messages where the message is passed from a POST to a GET using the SESSION.
  • Please do not use HTML5 in-browser data validation (i.e. type="number") for the fields in this assignment as we want to make sure you can properly do server side data validation. And in general, even when you do client-side data validation, you should still validate data on the server in case the user is using a non-HTML5 browser.
Auto-Grader: Profiles, Positions, and Education
In this assignment you will extend our simple resume database to support Create, Read, Update, and Delete operations (CRUD) into a Education table that has a many-to-one relationship to our Profile table and a many-to-many relationship to an Institution table. We will add an JQuery autocomplete field to our user interface.

Assignment: https://www.wa4e.com/assn/res-education/
Solution: https://www.wa4e.com/solutions/res-education/

Peer-Grader: Profiles, Positions, and Education
In this assignment you will extend our simple resume database to support Create, Read, Update, and Delete operations (CRUD) into a Education table that has a many-to-one relationship to our Profile table and a many-to-many relationship to an Institution table. We will add an JQuery autocomplete field to our user interface.

Assignment: https://www.wa4e.com/assn/res-education/
Solution: https://www.wa4e.com/solutions/res-education/


 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...