How To Build And Distribute Desktop Apps Using PHP And PHPDesktop: A Step-by-Step Guide

dev_olatunji

Oladipupo Isaac Tunji

Posted on August 24, 2024

How To Build And Distribute Desktop Apps Using PHP And PHPDesktop: A Step-by-Step Guide

PHP - even though it happens to be a very powerful and influential programming language - is mostly underrated by a lot of programmers who probably do not use it or have used it in its former days.

Today, I want to share with you the power of PHP and what you can do with it.

Voila! Let's go šŸ›©ļø

In this guide, i will walk you through the process of creating executable desktop applications using PHPDesktop - a tool that allows developers to package their PHP web applications into standalone desktop executables. I'll also delve into how to compile these applications and customize them by removing the default PHPDesktop logo.

PART 1. Introduction to PHPDesktop

WHAT IS PHP DESKTOP?

PHPDesktop is an open-source project that enables developers to run PHP applications as desktop applications without needing a browser or a web server. It integrates the Chrome Embedded Framework (CEF) - which is open source as well and most of our modern browsers are built on it - for rendering the HTML/CSS/JavaScript part of the app, allowing you to use your web development skills to create desktop applications. By using PHPDesktop, you can bundle your PHP scripts, HTML files, and other assets into a single executable file that can be distributed and run/installed on any Windows machine.

PART 2. Setting Up the Development Environment

Before we start to build our desktop application, we first need to set up the development environment.

How To Set Up The Development Environment

Step 1: Download PHPDesktop

  1. Visit the PHPDesktop GitHub page at (https://github.com/cztomczak/phpdesktop).

  2. Choose the version that suits your needs as PHPDesktop is available in multiple variants, including PHP 5.4, 5.6, and 7.x. For modern applications, you should choose the latest version.

  3. Download the ZIP file for your preferred version and extract it to a directory on your computer.

Step 2: Prepare Your PHP Application

Assuming you already have a PHP web application/files, place your application files (copy and paste them [I mean the projects] ) inside the www directory of the extracted PHPDesktop folder. This www directory is the root directory where PHPDesktop serves your application from and is similar to the public_html or www folder on any web server you've ever used before.

Step 3: Configure PHPDesktop

To configure PHPDesktop, you need to edit the settings.json file located at the root directory of PHPDesktop files. This file allows you to specify various settings for your desktop application, such as the window title, dimensions, icon, and more.

(by the way, if you are having difficulties doing this by yourself, you want extended features for your app such as generating product keys or you want me to handle your web projects, you can always reach out to me by commenting under this post Thanks. You can find more details about me on my buy me a coffee page as well.

So, here's how the settings file looks like. Let's continue our journey. šŸ„°

Basic Configuration:

json
{
"application": {
"main_window": {
"title": "My Desktop App",
"icon": "app_icon.ico",
"default_size": {
"width": 800,
"height": 600
},
"minimum_size": {
"width": 600,
"height": 400
}
},
"php_interpreter": "php\\php.exe",
"app_mode": true,
"start_url": "http://127.0.0.1:54007/"
}
}

- title: The title of your application window.

  • icon: The path to your application's icon. Replace app_icon.ico with your custom icon file and ensure its a dot ico image too.
  • default_size: The default size of your application window.
  • minimum_size: The minimum size of the application window.
  • php_interpreter: The path to the PHP executable.
  • start_url: The URL to load when the application starts. For local development, this is typically the local server address.
Enter fullscreen mode Exit fullscreen mode

Step 4: Test Your Application

Once you've configured PHPDesktop, you can run phpdesktop-chrome.exe (or the equivalent executable depending on your PHPDesktop version) to test your application. If everything is set up correctly, your PHP application should load in a standalone window.

PART 3. Compiling the Application

Now that your application is running within PHPDesktop, the next step is to compile it into a standalone executable. This will package your PHP scripts, HTML files, and other assets into a single file that can be distributed and run without requiring the end user to install PHP, DBMS or any other dependencies.

Step 1: Prepare the Application/PHPDesktop Directory

Before compiling, ensure that your PHPDesktop/application directory is properly organized. At this point, your directory should look something like this:

/phpdesktop/
ā”‚
ā”œā”€ā”€ /www/ # Your PHP application files
ā”‚
ā”œā”€ā”€ php/ # PHP interpreter directory
ā”‚
ā”œā”€ā”€ settings.json # PHPDesktop configuration file
ā”‚
ā””ā”€ā”€ phpdesktop-chrome.exe #
PHPDesktop executable

Make sure that all necessary files are in place and that you've tested the application thoroughly.

Step 2: Use Inno Setup Or Any Other Compiler Of Your Choice To Create An Installer For Distribution.

Although this is not strictly necessary, creating an installer for your application can enhance the user experience. Inno Setup is a free installer for Windows programs. Here's how you can create an installer:

  1. Download and install Inno Setup from (https://jrsoftware.org/isinfo.php).

  2. Create a new script and configure it to include the PHPDesktop directory.

  3. Specify the output executable's name, the installation directory, and other settings as per your requirement.

  4. Compile the script to generate the installer.

This step is optional but recommended if you want to provide a professional installation experience for your users.

Step 3: Compress and Distribute

If you don't want to create an installer, you can simply compress the entire PHPDesktop directory into a ZIP file and distribute it. Ensure that the phpdesktop-chrome.exe file is included, as this is the executable your users will run to start your application.

Part 4. Customizing the Application

After all you've done, you still realize the logo doesn't change?

One of the common customizations every developer wants is to be able to remove or replace the PHPDesktop logo that appears when the application starts. I will use this section to guide you through that process.

Step 1: Removing or Replacing the PHPDesktop Logo

To customize or remove the PHPDesktop logo, you will need a resource editor like Resource Hacker.

Here's how to do that.

  1. Download Resource Hacker:

  2. Open PHPDesktop Executable:

    • Launch Resource Hacker and open phpdesktop-chrome.exe.
  3. Navigate to the Logo Resource:

    • In Resource Hacker, navigate to the Bitmap section in the tree view. You'll find the logo file here, usually named 101, 102, etc.
    • Right-click on the logo and choose "Replace Resource."
  4. Replace or Remove the Logo:

    • To replace the logo, click on "Open file with new bitmap," select your custom logo, and replace it.
    • To remove the logo, you can either delete the resource or replace it with a blank image.
  5. Save the Changes:

    • After making the changes, save the modified executable. You may want to save it as a different file to keep a backup of the original.
  6. Test the Application:

    • Run the modified executable to ensure that the logo has been replaced or removed successfully.

Step 2: Update Application Icons

If you want to further customize your application, you can update the icons used by PHPDesktop. This involves replacing the "app_icon.ico" file referenced in the settings.json file and ensuring that the executable uses the new icon.

  • Create or Find a New Icon:

    • Design a custom icon for your application using an icon editor or an online tool.
    • Save the icon as .ico format.
  • Replace the Icon:

    • Replace the existing app_icon.ico file in the PHPDesktop directory with your custom icon.
    • Update the settings.json file to reference the new icon if you've saved it with a different name.
  • Rebuild the Executable:

    • If you've made significant changes, consider using Resource Hacker to embed the new icon into the executable itself.
  1. Distribution and Final Considerations

After compiling and customizing your application, it's time to distribute it to your customers/users. Now, I want to give you my own two Naira strategies to help you with distribution and they are:

  • Testing: Test your application on different Windows environments to ensure compatibility.
  • Documentation: Provide clear instructions on how to install and use the application.
  • Licensing: If you used third-party source codes or libraries, it's important to include their licences or agreements too.
  • Offer Support: Create a channel of support system that attends to client's who might have a problem with your app.

Oya, this na my blessings to ya'll šŸ˜„šŸ˜Š

I want to believe that, by reading this far, you've found so much value in my contents and as well are interested to try it out. However, as an expert in handling these types of projects, I can surely deliver to your amazement seamlessly and with deadlines. So, you can quickly send me a breakdown of what you want to achieve and we can work together to bring your ideas to life.

Subscribe to my profile ooo šŸ˜€

Coming Next

  1. The Business Side Of Tech : Tech And Where The Money Is.

  2. How To Build Desktop Apps With PHPBROWSERBOX

If you miss am, na you Sabi

I can't explain how much I love you all on dev.to šŸ„°

I also have a video tutorial on this which costs only $20 and another where you'll get to learn how to create activation codes for distribution and it costs $50 only.

I drink coffee too. Buy me a coffee while you wait for my next post.

https://buymeacoffee.com/olatunji

Await my next post.

šŸ’– šŸ’Ŗ šŸ™… šŸš©
dev_olatunji
Oladipupo Isaac Tunji

Posted on August 24, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related