Creating a Simple Online File Manager with PHP
An online file manager is a web application that allows users to manage files on a server. In this tutorial, we will create a simple online file manager using PHP. We will cover the following functionalities: listing files, creating new files, editing files, and deleting files.
Step 1: Creating the HTML Template
First, let’s create the HTML template for our file manager. We will include a table to display the list of files and a form to create new files.
<!-- html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Online File Manager</title>
<!-- Add some basic styling -->
<!-- CSS -->
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 1rem;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 0.5rem;
text-align: left;
}
th {
background-color: #f2f2f2;
}
button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 10px 2px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Simple Online File Manager</h1>
<!-- File creation form -->
<form action="create_file.php" method="POST">
<label for="filename">Create a new file:</label>
<input type="text" name="filename" id="filename" placeholder="File name" required>
<button type="submit">Create</button>
</form>
<!-- File list table -->
<table>
<thead>
<tr>
<th>File Name</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<!-- We will populate this tbody using PHP -->
</tbody>
</table>
</body>
</html>Step 2: Listing Files
Now that we have our HTML template, let’s use PHP to list the files in a directory. In this example, we will use the current directory for simplicity. You can change the directory according to your needs.
<?php
# PHP
$dir = '.'; // Current directory
$files = scandir($dir); // Get the list of files in the directory
?>Now, we can loop through the $files array and generate table rows for each file. Make sure to exclude ‘.’ and ‘..’ from the list, as they represent the current and parent directories, respectively.
<!-- Add this PHP code block inside the tbody tag -->
<?php
# PHP
foreach ($files as $file) {
if ($file != '.' && $file != '..') {
echo "<tr>
<td>{$file}</td>
<td>
<!-- Edit and delete buttons will be added here -->
</td>
</tr>";
}
}
?>Step 3: Creating New Files
To create new files, we will handle the form submission in a separate PHP file called “create_file.php”. Let’s create this file and add the following code:
<?php
# PHP
if ($_SERVER['REQUEST_METHOD'] == ''POST' && !empty($_POST['filename'])) {
$filename = $_POST['filename'];
// Create the file if it doesn't exist
if (!file_exists($filename)) {
$handle = fopen($filename, 'w');
fclose($handle);
header('Location: index.php'); // Redirect back to the main page
} else {
echo "File already exists!";
}
}
?>Step 4: Editing Files
To edit a file, we need to create a new PHP file called “edit_file.php” and implement a form that loads the contents of the selected file. We will also need to create a link to this file in the main file list.
<!-- Add this link in the actions column of the main file list -->
<a href="edit_file.php?file=<?php echo urlencode($file); ?>">Edit</a>Now, let’s create the “edit_file.php” file with the following code:
<?php
# PHP
if (isset($_GET['file'])) {
$file = urldecode($_GET['file']);
// Check if the file exists
if (file_exists($file)) {
$content = file_get_contents($file);
} else {
header('Location: index.php');
}
}
?>
<!-- html -->
<!DOCTYPE html>
<html>
<head>
<title>Edit File</title>
<!-- Add CSS for styling -->
</head>
<body>
<h1>Edit File: <?php echo $file; ?></h1>
<form action="save_file.php" method="POST">
<input type="hidden" name="filename" value="<?php echo $file; ?>">
<textarea name="content" rows="20" cols="80"><?php echo htmlspecialchars($content); ?></textarea>
<br>
<button type="submit">Save</button>
</form>
</body>
</html>Step 5: Saving Edited Files
To save the edited files, we will create another PHP file called “save_file.php”. This file will handle the form submission from “edit_file.php”.
<?php
# PHP
if ($_SERVER['REQUEST_METHOD'] == 'POST' && !empty($_POST['filename']) && !empty($_POST['content'])) {
$filename = $_POST['filename'];
$content = $_POST['content'];
file_put_contents($filename, $content);
header('Location: index.php'); // Redirect back to the main page
}
?>Step 6: Deleting Files
Finally, let’s implement the file deletion functionality. Add a delete link to the actions column of the main file list.
<!-- Add this link in the actions column of the main file list -->
<a href="delete_file.php?file=<?php echo urlencode($file); ?>">Delete</a>Now, create a new PHP file called “delete_file.php” and add the following code:
<?php
# PHP
if (isset($_GET['file'])) {
$file = urldecode($_GET['file']);
// Check if the file exists and delete it
if (file_exists($file)) {
unlink($file);
}
header('Location: index.php'); // Redirect back to the main page
}
?>That’s it! You now have a simple online file manager using PHP. It allows you to list files, create new files, edit files, and delete files. Of course, this is a basic implementation, and you can improve the functionality and user interface according to your requirements.