For this task, you are going to develop an application that displays information (including an image) about celebrities (or cars or football players etc.). Developing the application is split into a number of steps.
For this exercise, display a web page with a form that allows the user to type in the name of a person (or a car etc.)
Using your CodeIgniter installation from previous tutorials, add an action to a controller that, when called, displays a view containing the form. Add a submit button, but do not add an action attribute to the form. The input field and the submit button should both have 'id' attributes. Put an empty div (wih an 'id' attribute) under the form. This empty div will be used to display the results of submitting the form.
Add a model to your application that contains information about celebrities. This information can either be hard-coded into the model or can be stored in a database and queried by the model. Add a method to the model that takes a name of a celebrity and returns information about them (name, age, URL of an image, and their top three films) in an *associative* array. The names of the top three films within this associative array should also be in the form of an array.
Add another action to the controller, which
reads the form data (the name the user typed in on the form),
loads the model to find celebrities (or cars etc.),
calls a method on the model to get data about the celebrity,
prints out as a JSON string the array of data returned by the model (using the built-in PHP function json_encode(), as discussed in the lecture).
Add an event handler to the page containing the form, using jQuery. so that when the submit button is clicked, the event handler is executed. The event handler should, for now, just pop up an alert dialog box saying the button was clicked. Test your code and make sure you can see the alert box.
In the event handler, change the code to make an ajax call back to the controller action that returns information about celebrities. The ajax call needs to retrieve the celebrity name typed into the input field in the form and send it as part of the ajax call. Add a 'done()' handler so that when information is returned, the information about the celebrity is added to the empty div in the page. In particular, extract the image URL and build the HTML code for an image tag and add this to the div in order to display the image, as well as printing out the names of the top three films using an >ul< list.
Test your code by opening the developer console in your browser. Check that the ajax calls are being made when you click on the submit button of the form.
Explain clearly code to me and answer questions about code