XAMPP Project Dashboard

Overview

The XAMPP Project Dashboard is a web-based tool that provides an interface to view, search, and open local web development projects stored in the htdocs directory of XAMPP. It allows users to easily navigate to their projects and open them in Visual Studio Code.

Features

• Project Listing: Automatically lists all projects (directories) in the XAMPP htdocs folder.
• Search Functionality: Enables searching for projects by name.
• Open in VS Code: Provides a button to open projects directly in Visual Studio Code.
• Last Accessed Date: Displays the last modification date of each project.
• Page Refresh Button: Refreshes the page without resubmitting the form.
• phpMyAdmin Access: Quick access to phpMyAdmin from the dashboard.

Installation

Prerequisites

1. Install XAMPP and ensure Apache is running.
2. Install Visual Studio Code and add it to the system path (code command should be available in the terminal).

Setup Instructions

1. Place the dashboard folder inside the htdocs directory.
2. Ensure the following folder structure:

   htdocs/
   ├── dashboard/
   │   ├── index.php
   │   ├── bootstrap.css
   │   ├── bootstrap.bundle.js
   │   ├── bootstrap.js
   │   ├── resources/
   │   │   ├── vscIcon.png
   

3. Open http://localhost/dashboard/ in your browser.

Usage

Collapsing the Menu

• Click on the "XAMPP Project Dashboard" title at the top of the page.

• This will collapse the menu, giving you access to additional options, including:

• Refresh Page button: Refresh the page without resubmitting the form.
• phpMyAdmin Access: Quick access to phpMyAdmin for managing databases.

Searching for a Project

1. Enter the project name in the search bar.
2. Click the "Search" button to filter the projects.

Opening a Project in VS Code

1. Click the "Open in VS Code" button next to the project.
2. The project will be opened in Visual Studio Code.

Allow always open project when accessing localhost/ or 127.0.0.1/

• Update the index.php file in the XAMPP htdocs folder to redirect to your project by modifying it as follows:

  <?php
  header('Location: '.$uri.'/your_desired_name/');
  exit();
  ?>

Code Explanation

PHP Backend

• Scans the htdocs directory for project folders.
• Handles the form submission to search projects and open them in VS Code.
• Uses shell_exec to run the VS Code command.

JavaScript

• The refreshPage() function reloads the page without form resubmission to avoid duplicate requests.

Example PHP Code Snippet

if (isset($_POST['open_code'])) {
    $projectDir = $_POST['open_code'];
    $escapedDir = escapeshellarg($projectDir);
    $command = "code $escapedDir";
    shell_exec($command);
    echo "VS Code opened for: " . htmlspecialchars($projectDir);
}

Troubleshooting

VS Code Not Opening

• Ensure VS Code is installed and added to the system path.
• Try running code in the command prompt to verify.
• Check file paths for Windows compatibility (use double backslashes \\).

No Projects Found

• Ensure there are directories inside htdocs.
• Check folder permissions.

shell_exec Not Working

If shell_exec is not functioning, follow these steps:

1. Check if PHP has shell_exec enabled by running:

   var_dump(function_exists('shell_exec'));

2. If disabled, enable it in php.ini by removing it from the disable_functions list:

   disable_functions =

3. Restart Apache after making changes.
4. Ensure the PHP script has sufficient execution permissions.

License

This project is open-source and can be freely modified and distributed.

---

Enjoy using the XAMPP Project Dashboard!

A PetzTech contribution 2025-2026