Oh.My.Goodness!
I don't really know where to begin with this solution. There are so many issues with the code. But, we don't learn unless we try. I reckon effort has been shown and should be rewarded with some advice that hopefully should help in the future.
First, a couple of points that need pointing out.
1. While they may seem the same at first glance, PHP treats single quotes (') and double quotes (") quite differently. If a string is wrapped in double quotes, variable names are substituted with the value that the variable holds. In the event that the string contains quotes, you may either escape the quotes by preceding them with a back-slash or by using the other sort of quote. E.g
$someVar = "This is 'easy'.";
or
$someVar = 'This is \'easy\'.';
echo '$someVar'
will produce a very different result to
echo "$someVar";
The first one will show
$someVar
, while the second will show
This is 'easy'.
- I made changes that takes these rules into account on lines 64 & 65, also 108-111 of your code
2. You seem to have forgotten the opening tag for the php code
- I added it to line 31 of your code
3. All of the TD cells in your table were links - probably not really the best way to do it. I've removed the link from the type, size and modified columns. I've also made the name column _appear_ to be a link, through the use of css. This is done because otherwise, you will actually navigate away from your editor and end up setting the filename to the address-bar of the browser.
Again, not really what you want. - I've added the css rules
.fileLink
and
.fileLink:hover
to manage the first column
4. I've left your file-type code as-is. You may wish to change this further - you probably don't want the user to click on a PNG file, only to have its contents appear in the text-area. You can solve that as required.
5. I've added 2 spans above the text area for the purpose of holding the name of the file currently being edited.
6. I've added some javascript to handle mouse clicks on the name of files in the table. This will use ajax to request the contents of the chosen file, paste it into the text-area, set the fileName indicator to the name of the file that was clicked and finally, set the page's scroll position to the fileName indicator, ready for editing.
7a. I haven't bothered at all with the UPDATE button, you'll need to tackle that problem yourself. It is a perfect opportunity to become more familiar with either an ordinary POST-based form submission or an AJAX-based one. It's up to you to decide. You will also need to send the name of the file that is being transmitted in order to save (update) it on the server. You could do that with an input element with the type set to hidden, which was inside the form. I've put one in the appropriate spot and commented it out.
7b. You'll need to have something to submit the updated data and the filename to. Just make another PHP file that saves the data recieved via $_POST to the file specified by the hidden input.
Anyway, you can read more on the xmlHTTPRequest object here:
http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp[
^]
Finally, the code. Please ask questions if you have them. Questions that seek understanding on how to create a solution - requests for the solution will not be welcomed by me.
<!DOCTYPE html>
<head>
<style>
table
{
width: 100%;
padding: 5px 5px 0px 5px;
text-decoration:none;
}
a
{
text-decoration:none;
}
h3
{
padding: 5px 0px 5px 0px;
color:#000;
}
tr
{
height: 20px;
}
.fileLink
{
color: blue;
cursor: pointer;
}
.fileLink:hover
{
text-decoration: underline;
}
#editingFilename
{
color: #f90;
font-weight: bold;
}
</style>
<script>
function requestUrlWithAjax(url)
{
var xmlhttp;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById('ajaxResultTarget').value = xmlhttp.responseText;
document.getElementById('editingFilename').innerHTML = url;
var xPos, yPos, tgtElem;
tgtElem = document.getElementById('editingFilename');
xPos = 0;
yPos = tgtElem.offsetTop;
window.scrollTo(xPos, yPos);
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>
</head>
<body>
<!--
<?php echo "<h3>LIST FILE OF FOLDER</h3>";
$dir = "";
$myDirectory=opendir(".");
while($entryName=readdir($myDirectory))
{
$dirArray[]=$entryName;
}
function findexts ($filename)
{
$filename=strtolower($filename);
$exts=split("[/\\.]", $filename);
$n=count($exts)-1;
$exts=$exts[$n];
return $exts;
}
closedir($myDirectory);
$indexCount=count($dirArray);
sort($dirArray);
print("<table border='1' cellpadding='5' cellspacing='0' class='whitelinks'>\n");
print("<tr><th>Name</th><th>Type</th><th>Size</th><th>Date Modified</th></tr>\n");
for($index=0; $index < $indexCount; $index++)
{
if (substr("$dirArray[$index]", 0, 1) != ".")
{
$name=$dirArray[$index];
$namehref=$dirArray[$index];
$extn=findexts($dirArray[$index]);
switch ($extn)
{
case "png": $extn="PNG Image"; break;
case "jpg": $extn="JPEG Image"; break;
case "bmp": $extn="BITMAP Image"; break;
case "gif": $extn="GIF Image"; break;
case "ico": $extn="Windows Icon"; break;
case "txt": $extn="Text File"; break;
case "log": $extn="Log File"; break;
case "htm": $extn="HTML File"; break;
case "php": $extn="PHP Script"; break;
case "js": $extn="Javascript"; break;
case "css": $extn="Stylesheet"; break;
case "pdf": $extn="PDF Document"; break;
case "zip": $extn="ZIP Archive"; break;
case "docx": $extn="Microsoft Word Document"; break;
case "mp3": $extn="MP# Format Sound"; break;
default: $extn=strtoupper($extn)." File"; break;
}
$size=number_format(filesize($dirArray[$index]))." "."KB";
$modtime=date("M j Y g:i A", filemtime($dirArray[$index]));
$timekey=date("YmdHis", filemtime($dirArray[$index]));
print("
<tr>
<td class='fileLink' onclick='requestUrlWithAjax(this.innerHTML)'>$name</td>
<td>$extn</td>
<td>$size</td>
<td>$modtime</td>
</tr>");
}
}
print("</table>\n");
?>
<br />
<h3>OPEN, EDIT AND SAVE ANY FILE IN LIST FILE OF FOLDER</h3>
<span>Current File: </span><span id='editingFilename'></span><br>
<form name="read_form" method="post" action="">
<!--
<textarea id='ajaxResultTarget' name="read_file" cols="110" rows="35" wrap="off">
</textarea>
<br />
<input type="submit" name="update" value="UPDATE" />
</form>
</body>
</html>