PHP and MySQL®: Create-Modify-Reuse

6.3. Code and Code Explanation

Now that you have a basic understanding of how JavaScript can make a behind-the-scenes request, I will continue with the file manager's code. As I progress you will see how all this integrates into the project so the entire page does not need to be reloaded after each action.

6.3.1. Main Interface

The main interface must present the user with a listing of files and directories on the server and a way to manage them. HTML provides the structure while PHP and JavaScript will work hand-in-hand to add the functionality.

The initial HTML code doesn't display any file listing content. Instead, a div element can be assigned the id file_datagrid and act as a placeholder. The JavaScript XMLHttpRequest object will send a request to PHP and retrieve an HTML snippet showing the information. The snippet will then be assigned to the div's innerHTML property to be displayed. A new snippet will be requested each time something changes, saving the user from needless page reloads.

<div class="datagrid" id="file_datagrid"></div>

img tags will display the action icons on the page which users will be able to click to download the selected file or open a directory, create a new directory, upload a file, and rename and delete entries. They aren't surrounded by a tags as I will be assigning onclick handlers to turn them into clickable elements. Instead, they will be assigned appropriate ids.

<img src="img/open.gif" id="btn_open" title="Download/Open" alt="Download/Open"/> ...