CSci-4131 Internet Programing Fall 2017
Programming Assignment 5
Task: In this assignment, you are introduced to server-side programming with PHP. Your task is
to build upon your previous assignments and dynamically create your calendar page. You will need following pages:
• form.php: This page is the PHP version of your “form.html” page from previous assignments. You should handle basic”‘input validation”’ and create the events in this page. After creating the event, the user should be forwarded to the calendar.php page. There is one additional button on the form.php page that will clear all the calendar’s events.
• calendar.php: This page is the PHP version of your “calendar.html” page from previous assignments. You will basically display your calendar and the events you have created and mark them on the google map.
• style.css: Your CSS file which is the same from previous assignments.
Preparation: Unlike previous assignments, the files for this assignment will reside on the server. Therefore, you need to setup your account‘s personal web folder. Please create web pages (.html or .php files) based on the instructions for using CSELabs to create a homepage available at the following link:
http://xxx
The links: http://xxx http://xxx
illustrate how to create and set permissions on your .php files, and set it up your .www directory. Also, they have a tutorial that shows you how to use PHP on the CSELabs machines
For this assignment, you will need to add the files specified above to your home directory (or .www file). Don’t forget to change the permission of these files to 644:
chmod 644 input.php chmod 644 calendar.php
As you saw in CSELabs instructions, you can test your programs via the web browser by accessing the pages:
http://www- users.cselabs.umn.edu/~username/input.php http://www-users.cselabs.umn.edu/~username/calendar.php
Problem Statement: You will have to write PHP code to evaluate the input from the ”‘form.php”’ page, and after evaluation, save the event information to a file named calendar.txt that stores event information in a JSON format (you must add it to existing event information stored in the file, if there is any). The file calendar.txt is a persistent data store – it will store any data added to it until a user clears the data with the clear calendar button. The calendar page will use PHP, HTML, JavaScript and the JSON data stored in the calendar.txt file to create a calendar and place markers on the Google Map (just like your previous assignments).
You should be able to reuse much of your code from Assignment 3, although you will likely have to write new PHP or JavaScript code to obtain the events from the Calendar and to place the markers on the Google map (or use the JSON information stored in and retrieved from the calendar.txt file to place the markers on the Google map). You will need to add new PHP code to enable your code to function from the server side.
1
Since the latitude (lat) and longitude (long) of the addresses on your calendar are not known before you enter them, there are at least two ways to get the lat and long for each event (address) that you will mark on the map. You can get the the lat and long for each unique address on your calendar with PHP using Google maps geocoding API and store the lat and long in the calendar.txt file that stores the address of each calendar event in a JSON format. The following link may be useful if you use the approach above:
Conversely, you can use the JavaScript API to the Google Maps geocoding or places API’s to get the lat and long for each unique address stored in JSON format in the calendar.txt file and use the JavaScript you used for assignment 5 to place markers on the Google map below your calendar each time you display your calendar and map.
Functionality:
• Display the calendar from Assignment 3 without the capability to mouse over text and display pictures – your calendar for this assignment can have more basic styling – make sure the events are displayed in a table that is readable and un-ambiguous. In addition:
• Top navigation bar should work going back and forth between ”calendar” and ”form.php” pages.
• At the start,” calendar” page will display a message, as shown in [Screenshot 1], that the
calendar is empty.
Screenshot 1
• Auserwilladdentriesbygoingto”from.php”pageandfillingouttheform.The
”form.php” page then validates the user input to make sure Event Name, Start Time, End Time, Day, and Location fields on the form all have values. Before or upon submission, the input validation will show errors to the user if one or all of these values are absent from the form as shown in [Screenshot 2].
2
Screenshot 2
• Afterenteringcorrectvalues,like[Screenshot3],atsomepointthe”form.php”filewillupdatethe JSON stored in the calendar.txt file, and then redirect the user automatically to the ”calendar.php” page as shown in [Screenshot 4].
Screenshot 3
3
Screenshot 4
• Thisprocesscanberepeatedmultipletimes,andtheresultisshownin[Screenshot5].
Screenshot 5
4
• The additional Clear Calendar button on the ”‘form.php”’ should clear all the calendar entries and redirect user to the ”‘calendar.php”’ page. It will clear all the events stored in JSON format in the calendar.txt file, and result in displaying the initial state of the calendar (with no events) as shown in [Screenshot1].
Design Guidelines:
• The calendar days should appear in order: Mon-Fri. That is, you cannot show the row for Tuesday before Monday.
• For each day in your calendar, you need to sort the order of the events based on the event’s start time. For example, an event starting at 2:00 PM should come before (i.e., be shown to the left of) an event starting at 4:00 PM on that same day.
• Based on your browser, your time format may end up in military format on the calendar page. i.e. 16:00 – 17:15 for Lecture. This is also acceptable.
Submission Instructions
Include the following files in one zipped file for your submission:
• calendar.php:ThecalendarPHPfileasdescribedabove.
• form.php: The input PHP file as described above.
• style.css:TheCSSstylesheetcontainingyourcodeandlinkedfromtheabove pages.
• README file: includes your student ID, name, and x500 ID.
• Any other files you deem necessary, you will need your JavaScript files from Assignment 3.
Grading Criteria:
1. Submissioninstructionsaremet-10points
2. The Calendar page initial state shows the no entry warning – 5 points
3. Form page checks for input validations and gives appropriate warnings – 5 points
4. All Events are dynamically added to the Calendar – 15 points
5. User is redirected from form page to calendar page after successfully creating a calendar event – 5 points 6. The file calendar.txt is used to persistently store the calendar data in JSON format – 15 points
7. Eventsareshowninthecorrectweekday-10points
8. Events weekdays are all shown in correct order on the calendar page: Mon-Fri – 10 points
9. Events for a day are displayed in sorted order based on their start times. – 5 points
10. Events’ locations are marked up on the map correctly – 10 points
11. Clear Calendar button on the input page works as described – 10 points
5
Bonus Opportunity (25 additional points):
Note – this assignment does not require that the functionality to display pictures from assignment 3 is retained (you don’t have to retain that mouse-over-text picture functionality from assignment 3 to get obtain full credit) (100 points).
To obtain additional bonus credit (25 additional points), use AJAX to implement the mouse-over picture functionality from Assignment 3.
If you do this, when a user moves their mouse over the text in a calendar event, a picture associated with the text (e.g,. a building address) will be displayed (as it was in assignment 3), with the following change. The method you formulate to display the picture (image) must somehow use AJAX to display the picture (image).
To accomplish this, the form displayed in Screenshots 2 and 3 should be amended to include an additional input type url field. The url of the picture (image) should be stored in the JSON file with the rest of the information required by the form as pictured in Screenshots 2 and 3.
This is an all or nothing opportunity – either pictures / images are displayed using AJAX, or no credit. Good Luck!
6