+-----------------+ | View files: PHP | +-----------------+ Location: /PhotoSite/view/html Filename: loginPage.php ------------------------- Purpose: the login page for the application (including guests that don't need a password) Features: 1) Very specific client- and server-validation messages 2) One form which is used for sign-in and sign-up Filename: fotoPortal.php -------------------------- Purpose: the launch page for the application Features: 1) An "all-in-one" page that uses the
tag to store various content. 2)
's whose visibility is toggled based on a user's navigation choices. The page will look like a home page, then a profile page, etc. 3) Four independent will populate the same array of options. 4) Tres cool! This page contains a JavaScript variable called 'selectedPhotoDiv' which contains all of the code needed to frame a picture. This div will move around when needed(!), by being removed from and added to the DOM. For example, if this div is needed on the
for a profile, it will be placed there. If later, it is needed on the
for search, it will be removed from the profile's DOM tree and added to the search article's DOM tree. 5) Customized links to delete pictures or to add/edit/delete comments. These links are based on a client representation of session state, specifically: - the user_id (users have more rights on their own objects) - the admin flag (administrators have full rights) A client representation of session state avoided frequent server calls, as the page does not have to be refreshed a lot. 6) Reuse of user maintenance form (also on admin page). Note: Originally contained the login form as an "all in one" form, but this was extracted to simplify the session state handling. Also, the login page has a different style sheet. The page used to dynamically switch out the CSS file which was cool, but could be "jarring" for users with lower bandwidth. Filename: admin.php --------------------- Purpose: A menu of options that a system admin can perform. Features: 1) Security check of session state. Page will redirect if an admin is not logged in to prevent direct access to the page via its URL 2) Expandable/collapseable forms for user maintenance 3) A replacement for a dropdown box for profile pic that displays a user's uploaded pictures. Filename: notAnAdmin.php -------------------------- Purpose: Users trying to access admin.php without an active session as an admin are redirected here. Filename: documentation.php ------------------------------ Purpose: To display system documentation Features: 1) Dropdown list which submits an Ajax call upon selection 2) Reading text files from the web server into a scrolling region 3) Use of jQuery/Ajax/PHP to return the contents of these files Filename: goodbye.php ----------------------- Purpose: Destroy session variables and send the user to the login page. Filename: inactivate.php ----------------------- Purpose: Destroy session variables when a user deactivates his/her account +-----------------+ | View files: CSS | +-----------------+ Location: /PhotoSite/view/css All CSS files feature a background-image and fixed positioning. Filename: photoLight.css -------------------------- Purpose: Provide styling for login page. Features: 1) 'Three-div' strategy to achieve both vertical and horizontal centering. Filename: photoDark.css -------------------------- Purpose: Provide styling for all main pages of fotoPortal Features: 1) Sliding menus with mouseover descriptions 2) Use of PgDn/PgUp or the mouse scrollwheel to scroll thru overflowing content without ugly scrollbars (on modern browsers) 3) Fixed footer as well as scrolling instructions bar at the top 4) Use of text- and box- shadowing. Filename: admin.css ---------------------------- Purpose: Provide styling for the admin and documentation pages +----------------------+ | View files: includes | +----------------------+ Location: /PhotoSite/view/includes Filename: footer.php ---------------------- Purpose: Outfit every page with a constant footer Features: 1) The HTML and CSS validators 2) A php function to fetch the last modification date of the file Filename: nav.shtml --------------------- Purpose: Contain the navigation menu for all page which require one Featues: 1) Embedded jQuery (for ease of maintenance) for mouseovers and mouseouts. Filename: userAcctMaintForm.shtml ----------------------------------- Purpose: Allow change of username, password resetting or deletion of account. Built as .shtml so it could be included on the user profile page in the future. Filename: userMaintenanceForm.shtml ------------------------------------- Purpose: Allow every other user administration operation, including adding a first name, last name, inactivating an account, uploading a profile pic, etc. Built as .shtml as it is included in multiple pages, albeit with different listeners. (On the admin page, the control. 2) Initiates Ajax call to server when dropdown changes. 3) Use of jQuery to "change" the dropdown box on initial page load. Filename: portalListeners.js ------------------------------ Purpose: Add all JavaScript listeners to the portal page. Serves a double purpose in showing/hiding the correct page division on page refresh. Features: 1) Use of Ajax and SESSION variables to force the system to click the correct navigation option (using jQuery's trigger() method.) 2) Determines which
s should be visible on page refresh 3) Responds to user activation of checkboxes before content is loaded. For instance, the list of uploaded photos is not generated on initial page load, but is dynamically generated upon the user selection of a checkbox. 4) Dynamic appending, prepending and removal of DOM elements. Filename: loginListeners.js ------------------------------------ Purpose: Add all JavaScript listeners to the login page Features: 1) Form serialization, so that the login form can be submitted. asynchronously to avoid a complete page reload from the server. 2) onKeyPress handlers that respond to the Enter key (key 13) so that the submit button will have its focus set. Filename: login.js -------------------- Purpose: Receive the results of the Ajax login script and adjust the UI. Features: 1) Updates message tags very specifically based on login. error message 2) Invokes the swapCSS JavaScript function on successful login. Filename: adminListeners.js ----------------------------- Purpose: Add all JavaScript listeners to the admin page ------------------------------------- Content Loaders -------------------------- Filename: populateForms.js ---------------------------- Purpose: Populate any data from the database that is needed by a form in the portal page Features: 1) Parses returned JSON data (e.g., a list of hashtags) 2) Loops thru the array of JS objects to build populated with data from the the database. Filename: getPhotoDetails.js ------------------------------ Purpose: To open up the details (including comments) of any picture whose thumbnail was clicked. Features: 1) Automatic navigation to the details section by using a URL hash 2) "Scraping" of its own page to re-present the photo data using jQuery find(). For example, the photo narratives are also present in the list of photos, but in a hidden table cell. A narrative can be retrieved by tr.find(':nth-child(6)').text() In this way, there does not need to be another Ajax call to get any photo metadata. Also uses jQuery .closest() function to find the enclosing table row of an image. 3) Use of the HTML5 "data-*" attributes for a similar purpose to the feature above. In this case, the tag was enriched by the custom attribute "data-user_id" which will be used to determine the privileges manifested in he details section. 4) Role checking. Is the user an admin? Does the photo belong to the user? Is the user a guest and unable to comment? 5) Dynamic labeling and re-labeling of the latest comment, such that the Ajax returned data (newly inserted comments by the user or anyone else) will have an anchor to prepend against. Note that timestamps are used to make sure that only the new comments are loaded upon each inserted comment. ---------------------------------- Special Use Functions ----------------------- Filename: validateFormData.js ------------------------------- Purpose: Provide client-side valiation checks using regexp and field lengths Features: 1) Reusable validation functions. Filename: uploadPhoto.js -------------------------- Purpose: Provide logic for when the upload photo button is pressed. Invokes and receives result from Ajax calls Features: 1) Creating a FormData object to contain all form information. (Note: form serialization will not work, because the $_FILES array will not be populated.) 2) Native Ajax calls (independent of AjaxFunctions.js) which send form data using "data: formData" Filename: deletePhoto.js -------------------------- Purpose: Provide logic for when the delete photo button is pressed. Invokes and receives result from Ajax calls Filename: login.js -------------------- Purpose: Handle the error or success messages from the loginPage and navigate the user to the portal page upon success. ------------------------------------- Utilities -------------------------------- Filename: AjaxFunctions.js ---------------------------- Purpose: Provide helper functions for Ajax calls. Note: Library downloaded from elvis.rowan.edu Filename: date.js ------------------- Purpose: Provide helper functions for working with JS dates Note: Library downloaded from GitHub Filename: ddslick.js ---------------------- Purpose: Replace a standard