Pre-lab

Pre-lab Activity

Refer to the application Lab 6 and the following code to answer the Pre-lab Quiz in Blackboard.

1. functions.php
2. home.php
3. list_all.php
4. find.php
5. delete.php
6. insert.php
7. edit.php

In-lab

Preparation

1. For file and folder names only use lowercase letters and never use spaces.
2. Store all your files in your lab7 folder on the network drive

Connecting to web server via FTP

• Hostname: ftp.sienasellbacks.com
• Username: Your lastname @sienasellbacks.com
• Password: Told to you in lab3
• Settings: Use FTP; SFTP and SCP are not supported; If the option exists, use Passive FTP and IPv6

Setup

1. Download lab7.zip.
2. Un-zip the contents of lab7.zip (it will create a lab6 folder).
3. Rename the folder lab7.
4. Upload your lab7 folder to the server.
5. Using Chrome, navigate to home.php on your server and verify that the application is working.

A. Making the Main Menu Mobile Friendly

Rather than build this web application from scratch we are using a CSS and JavaScript template called Twitter Bootstrap. Bootstrap (as it is called for short) defines many different classes that can be applied to HTML tags. Learn about some of the Navigation styles here

1. In Notepad++, open home.php.
2. Give the ol tag the class name "nav nav-pills"
3. Note the space between the class names "nav" and "nav-pills". Here we are actually applying two different classes.
4. In Chrome, navigate to home.php and you should see that the boring ordered list is now a more attractive horizontal navigation menu. However, you might want to move the "to edit or delete" text inside the correct button.
5. In Notepad++, give the three a tags the class name "btn"
6. In Chrome, navigate to home.php and you should see that each menu link is now an animated button.
7. If you want to know how the style is implemented, you can open css/bootstrap.css and do a search on "btn" to see all the CSS code for decorating and animating the buttons.
8. In Notepad++, give the three a tags the class names "btn btn-primary", "btn btn-info", and "btn btn-warning"
9. In Chrome, navigate to home.php and you should see that each button now has a unique color. The colors actually have semantic meaning. Insert New Player will change the data, so we want to warn the user. An orange-yellow is typically associated with warning signs.
10. Learn more about all the Button styles here.
11. This styling is not just about making the site look better, these buttons are easier to press on mobile and touch-screen devices.

B. Making the Data Tables more Readable

Bootstrap also has different classes that can style tables. Learn more about Table styles here

1. In Notepad++, open list_all.php.
2. Find the table tag, remove border="1" and add the class name "table table-striped table-bordered"
3. Here we are actually applying three different classes.
4. In Chrome, view the output of the list_all.php script to see how the table changed.
5. Remove the "connected successfully" message. Hint: it is not printed in list_all.php.
6. In list_all.php, add the code to print a header (h2) with the text "All Players"
7. These changes are not trivial. Pages should have meaningful headers and Bootstrap's styles make it easier to read tables with many columns.

C. Making the Find Form more Semantic

One of the most important things that Bootstrap provides are classes for forms. Learn more about Form styles here

1. In Notepad++, open find.php.
2. Add a meaningful header to this page. Hint: This script will output different things. Be sure to add meaningful headers in more than one place.
3. Use the Bootstrap form example as a model and make the following changes.
4. Add the attribute role="form" to the form tag.
5. Encapsulate "Last Name" and the two input elements with <div class="form-group">
6. Use <label for="last"> to markup "Last Name:"
7. For the first input tag, add type="text" name="last" id="last" class="form-control" placeholder="Enter Last Name"
8. For the second input tag, add type="submit" class="btn btn-default
9. These CSS styles are specially designed to render properly on mobile devices. And, the label tag and placeholder attribute ensure that the input field is properly described

D. Improving the Find Form

One of the most important things that Bootstrap provides are classes for forms. Learn more about Form styles here

1. In Notepad++, open find.php.
2. Change the script so that it functions like this: find.php
3. Add labels and input fields for First Name and Year Active
4. Be sure to fetch the first name, last name, and year active using the $_GET variable.
5. Only display the form if last name, first name, and year active are null
6. If any of the three fields are NOT null, you will not display the form but instead you will process one of two queries.
7. If year active is null, use this query:
   SELECT * FROM Players WHERE lastname like '$last%' and firstname like '$first%'.
   
   However, be aware of the catch-22, we need to print % right after the value of the variables $first and $last but this changes the variables' names. Thus, we have to concatenate the variables' values and the % symbol.
8. If year active is not null use this query:
   SELECT * FROM Players WHERE lastname like '$last%' and firstname like '$first%' and firstseason <= '$year' and lastseason >= '$year'.
9. Add three new columns to the results table: First Name, First Season, and Last Season. The table field names are firstname, firstseason, and lastseason.
10. Add a back button. Hint: This is just a hyperlink to find.php with no URL parameters. Use the "btn" and "btn-default" classes to make this hyperlink look like a button.
11. In the table results, make the edit and delete action links look like buttons by using the "btn", "btn-warning", and "btn-danger" classes.

E. Improving the Delete Action

Ideally, the delete action should ask for confirmation before it completes. The problem is that as soon as we click the delete link/button, the delete script will be executed. Below are instructions on how to add a confirmation message to the delete functionality.

1. Instead of linking to delete.php?id=1235, we can link to delete.php?id=1235&confirm=no&first=value&last=value&year=value
2. We actually need the first, last, and year values to restore the find function after the user confirms or cancels.
3. In the hyperlink above "value" is replaced with the actual values passed in the URL of the find.php script.
4. In delete.php, we can fetch the URL parameter "confirm."
5. If confirm equals "no," then we print a simple page with a message "Are you sure you want to delete?" and two hyperlinks "Yes" and "No."
6. "No" will link to find.php?first=value&last=value&year=value. Thus, we can restore the previous search results.
7. "Yes" will link to delete.php?id=1235&confirm=yes&first=value&last=value&year=value
8. If confirm equals "yes," then we execute the delete query and do a redirect to the absolute URL "http://www.sienacs.com/lab7/find.php?first=value&last=value&year=value"
9. Alternatively, we can execute the delete query and print a link to the URL above. In class, we will talk about the pros and cons of redirects and how modern applications handle such issues.

Deliverables

1. Upload your completed find.php and delete.php to Blackboard.