AJAX and Cookies

Lab 10: JavaScript Events, AJAX, and Cookies

Your events schedule

The purpose of today's lab is to work with PHP and JavaScript together, and in the process reinforce our lectures on AJAX and cookies. For this lab, you will search through the events offered by your unit/ECA and save the results in a cookie.

Part 0 - Setting up and data creation (10%)

Directory: You must create a folder on your web drive called "Lab10" (without the quotes) and store your work in that directory.Copy your unit/ECA files from Lab08 or Lab 07 into Lab10 directory. All the work for this lab should be in Lab10 directory.
Using a plain-text editor (e.g. Atom, vim, emacs), create a new file called "events.txt" that contains events for your unit/ECA, in a comma separated format, one event per row. A sample file, showing the required format, is shown below. Your code should work for any number of events in the file, as long as the file has the specified format:
```
EventName,Date,Time
Registration,12/12/2020,0800-1200
Breakfast,12/12/2020,0800-0900
Keynote talk,12/14/2020,0930-1030
```

Your goal is to create a web page where the users can search through the events and display the events satisfying the seach criteria.

Part 1 - Provide the CSV file via JSON - (45%)

Create a PHP script "events.php" that will:
- Receive a GET parameter named "search"
- Construct an array containing the first line in the events.txt file and all the lines in the events.txt file that contain the "search" parameter as a substring
- Return (through echo) the content of the constructed array back as a JSON encoded array. Hint: Review and use the json-encode function to create the JSON encoding from your array
- Provide no other content (no HTML, CSS, or other text)
Test your events.php script by invoking it from the browser (including sending a value for the "search" GET parameter)

Part 2 - Use AJAX to search events (80%)

In this part, you will allow the user to search through the events offered by your unit/ECA. This will involve client side scripting via JavaScript and AJAX. Specific requirements:

Create a new webpage searchEvents.html. The webpage should have a meaningful title and heading and include one form (no method or action required) with a search box (text input field) for the user to enter their search term and two buttons: "Search" and "Save", as well as an empty table element (with an id) for "Available Events". The content of the table will be populated dynamically using Java Script.
Every time the user types a character in the search box, or when the user clicks the "Search" button,
- make an AJAX call to the events.php script with the value of the search box as the "search" parameter (that should return a JSON encoded array.)
- store the returned JSON encoded array in a global Java Script variable called "myEvents"
- populate the "Available Events" table with information about the available events received from the server. The resulting table should have three columns (for event, date, and time) and as many rows as the number of elements in the array received from the server.
Hint: it is strongly encouraged to write a function to populate the table
Hint: the simplest solution to populate the table is to construct a string with the content of the table based on the array received and then set this string as the value for innerHTML attribute of the DOM table.
```
        var tableContent = "";
        //construct table content by looping through the received array and using the split() string method in JS
        ...
        //set innerHTML property of the table
        domTable.innerHTML = tableContent;
        
```

Part 3 - Remember user selections (95%)

When the user clicks the "Save" button, store the value of the myEvents variable (which should have the latest JSON encoded array with the events returned by the user search) in a single cookie named events valid for 90 days.
Write the code so when the user returns to the site, if the events cookie is not empty, the page displays the events saved in the cookie in the Available Events table.

Challenge Problem - Just a bit more (100%)

Add a second table "MyEvents" to the page. When the user clicks on a row in the "Available events" table, the content of that row is added to the "MyEvents" table.

General Requirements and Deliverables

You must use PHP, JavaScript, AJAX, Dynamic HTML, and cookies to accomplish this.
Your files for this lab must be named events.txt (or events.csv), events.php, searchEvents.html
Functions: You must make appropriate use of functions to break up your code.
Documentation: As always, you should have appropriate comments. As a start, each function should have a brief summary of its purpose.
Links: Create one link in your top-level IT350.html page under the heading 'Lab10' that links to the searchEvents.html page.
Always put a README.txt file in the lab directory. At a minimum this file should have:
- *Lab number
- *Your name and alpha
- *Collaborations in completing this lab (people, online sources used outside the course website)
- *How far you got (through which part did you finish)? If you tried any additional parts beyond the one you completed, what did you do?
- *How long this lab took you
- Any suggestions to improve the lab
- Any comments needed for the instructor to review the lab (usernames, passwords, etc.)
Note that * items are required for every lab submitted.
All of your files should be in a folder called Lab10 in your public_html/IT350 folder. Your instructor will assume that your web page is viewable at http://midn.cs.usna.edu/~mXXXXXX/IT350/Lab10/searchEvents.html where XXXXXX is your alpha number.
All labs must be complete and saved to the midn.cs.usna.edu drive before you submit your assignment. Do NOT modify your web files after you have submitted your assignment (unless you resubmit, which you can do as often as you like up until the deadline.)
Submit all files to the online submissions system (submit.cs.usna.edu) on or before the due date, this is Lab10. Use the command line submit script and capture the entire contents of the directory, the easiest way to do this would be to cut and paste the following while logged onto the server or a workstation:
```
                            cd ~/public_html/IT350
                            ~/bin/submit -c=IT350 -p=Lab10 Lab10
                            
```
This assumes that the submit script is located in ~/bin/ and is executable.