why this all of a sudden? I was introduced to php development for a little while now, and i had this in mind with several other things, this would also be a good point to start explaining with code, So where to start. let us define? It starts with what is the requirement? It is
- I want to view files in the server,
- I can traverse through the files with forward and backward traversing,
- i can see the file modification date
- I can see the file ownership information,
- I can see file icons and folder icons.
Lets begin with the first php code.
<?php
//this is the first bit of code that you had to write.
?>
Setting the page structure, since styling the page dynamically, we call the top section first, then we do our logic, then we call the bottom section, this completes the full page structure.
const topSection = "<!DOCTYPE html>
<head>
<title>
fm - FileManager.
</title>
</head>
<body>
";
const bottomSection = "</body>
</html>
";
How do I insert images?
Since all this is being done on only one file, hosting the image on a server then linking the file can be done but why? if you can encode as base64 and use the image in the file. An example would be, since i need to display the files with respective icons (folder, file etc.).
const folderIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAADMCAYAAACcL30dAAAQCUlEQVR4Xu3dfbBtdV3H8bdoIiQDoWbpjKVjIE9BkgyWQ/iQJkpD0oggYfiQTIxctIGJhsIw8GbZwOhIoijy0DAyQ5EXCYNACQwSRERQyKcu4hNiojxdBZtPs7ZzO55z99r7rLXO/v3W+/cXw1lnrd/3te/5nHX2/q3v71EsztgeeAnwMmAP4BeBnwe2W...';
Above is a base64 encoded folder image. to display the image i would just do this.
const folderImage = "<img src='" . images::folderIcon ."' width='10'/>";
````
### Next? Think about a way to represent files in a readable manner.
A good way is a table layout, why because on the left side, file-name's can be shown, while on the right side, owner info, modification date can be shown. this can be implemented in the following way.
php public function tableStructure($fData){ echo “
name | last modified | owner |
---|
where `$fdata’ is the pre constructed each row with all the files and folders. Ill continue the rest on an another post.