AJAX FUNCTIONALITY COMPONENTS
Each component must be built within the following guidelines:
* Full cross-browser and cross-platform compatibility is required and must be successfully tested by the provider. We will also fully test your solution prior to milestone completion.
* Components are to be demonstrated separately, then finally working in conjunction with each other.
* The PHP must contain comments to describe what is happening and each function and class must be labelled descriptively (eg get_users_default_language($userid))
* The database calls and user inputs are to be strictly checked for expected type, maximum length and protected against ALL SQL injection attacks.
* The code must be neat, indented correctly and will be checked by our own in-house PHP coders prior to milestone completion.
* Existing code/libraries may be used, but all non-essential functionality must be removed to help ensure that the components are as light-weight as possible.
COMPONENT 1: DRAG AND DROP ORDERING
This component will allow users to order rows within a table with drag and drop functionality. Once the row is located in the new position, the code will save the new ordering of the records by updating the appropriate records within the database so that the positioning of the row is correct the next time the page is loaded. The handle for the drag and drop functionality will be located on the left-hand side of the table row.
COMPONENT 2: AJAX AND MODAL WINDOW EDITING/ADDITION
This component will allow users to add new or edit existing data sets without needing to navigate to a separate page.
When the user clicks on the “Add new Record” link, or clicks on the “Edit Record” link associated with each row of data in the table, a modal window appears and the background is greyed out at 50% opacity. The modal window retrieves its content via AJAX - If a record ID is passed into the modal window, then the AJAX call will return a form to edit the information with the existing details pre-populated. If no record ID is passed to the modal window, then the AJAX call will return the same form without the pre-populated data.
On submit, the data will be sent to the server-side and verified.
If the data is valid, then it will be saved to the database (update or insert depending on whether the user is editing or adding data) and then the modal window will close, the opacity returned to 100% on the modal layer, and the table of data will be updated using AJAX to reflect the updated dataset. If the data submitted from the modal window form is incomplete, then the form will be reloaded into the modal window and the user will be given an opportunity to complete the information successfully.
For the purposes of testing, you will need to use a form with the following input fields: Text box, Select dropdown, Checkboxes and Radio buttons.
COMPONENT 3: AJAX FILE UPLOADING
This component will allow users to upload multiple files in real time from the one page using AJAX. The component will be used alongside traditional form-based text inputs. The component will display a progress bar as each file is being uploaded and will display a filetype icon of the file uploaded (PDF, DOC, XLS formats) or the thumbnail of each image (GIF, JPEG, PNG) below the file selection input box after the file have been successfully uploaded. Up to 10 files will be able to be saved. The files will be saved to a specified directory on the server, and details of each file stored in a DB table. [File upload in Elance Job Posting would be an excellent place to start for this component – see [url removed, login to view]]