Create Desktop Application with PHP

Here we will show you how you can create a web-based desktop application using PHP, CSS, HTML, and JavaScript with the help of PHP Desktop. In fact, PHP Desktop is an easy and simple solution we can use to create very powerful and complex desktop application.

What Is PHP Desktop?

PHP Desktop is an open source project founded by Czarek Tomczak in 2012 to provide a way for developing native desktop GUI applications using web technologies such as PHP, HTML5, JavaScript and SQLite.

Mind you, the development workflow you are used to while creating web applications remains the same. The step of turning an existing website into a desktop application is basically a matter of copy and paste.

PHPDesktop is an all-made container that will just swallow your project. With that, you can easily transform an existing website into a desktop application without any modification. When you download PHP Desktop, you will have some set of files and folders; among them you will have a folder called www in which you will just paste your entire application.

For those who have used WampServer, Xamp or EasyPhp, it won't be a problem to understand the concept. When you are using these local servers, you usually create your projects into a particular folder called www, htdocs, or  localweb. It differs from one server to another, but the concept remains the same. That particular folder helps your web server to know where to run your application (website) from.

PHP Desktop works the same way. The difference is that PHP Desktop does not require any particular installation; it is an all-in-one portable set of all these local servers have and it does all you can do with WampServer or Xamp and others in the same family.

PHP Desktop comes with a .exe file. Whenever you run that .exe, it will go into the www folder and run your index file. I am going to explain this process later in this tutorial.

How Does It Work?

PHP Desktop takes advantage of most web technologies to help PHP achieve our goal. PHP Desktop itself is a software that can embed yours in itself. So when you install PHP Desktop, you will now put your own application in PHP Desktop's folders. When you launch PHP Desktop it will go and read/parse your application therefor display/run it.

PHP Desktop Embeds all services your application may need before running. The main elements are the web server (Mongoose), the PHP Server, and a database Engine (Sqlite). To provide a universal interfacing it embeds a browser (actually Chrome or Internet Explorer). The browser now can help us interpret JavaScript, HTML and CSS.

So there is no need to install any other server or parser before using it.

Create Your Very First Desktop Application With Php

It is very simple to create a desktop application with PHP.

• Download PHP Desktop (with Chrome or Internet Explorer)
• Create a new folder and name it MyApp
• Unzip the content of PHP Desktop Inside
• You should have something like this in your folder MyApp:

I downloaded the one embedding Chome. No matter the one you have downloaded, what matters the most is the highlighted file, it is an executable (.exe) file.

1) Double click on that file to run it. 

You should get something like this:

What Happened ?

PHP Desktop is very smart. When you clicked on the launcher, it went in a special folder to look for any available application, and this special folder is nothing than the www folder. Go ahead and open the www folder you should see something like this:

Surprised!, this files are what PHP Desktop listed when we clicked on the launcher.

Note: These files are .php files.

Click on any of them. You should see its content.

These files are sample file to help you know that PHP Desktop can do everything these files are doing. Among them you have functionalities like cookies, environment variables, forms, iframes, javascript, etc. That means your php application can do almost everything.

Why Two Windows Prompted And What Are They For?

By default, PHP Desktop prompts up two windows. The first one (bigger) is chrome/explorer. This is where your application will reside. User's will interact with it through that window. You will be able to change it if you like.

The second window (small and black console) is the debugging interface (log console). It help you see if any error occurred while running your application, very useful in development phase.

Another Thing To Notice

You should know that in production we won't need that black console, and we may also need to resize the main window, etc; these are settings.

PHP Desktop comes with a special file called settings.json. This file will help us configure some behaviors of PHP Desktop.

So, for example if we don't want PHP Desktop to prompt the log console, we can open the settings.json file with any text editor and locate this:

"debugging": {
"show_console": true,
"subprocess_show_console": false,
"log_level": "DEBUG4",
"log_file": "debug.log"
}

Then change the value of show_console into false like that:

"debugging": {
"show_console": false,
"subprocess_show_console": false,
"log_level": "DEBUG4",
"log_file": "debug.log"
}

Then run PHP Desktop again. pfff gone!


Now Let's Us Add Our Own Application

Go in the www folder in your MyApp folder and delete all files inside.

Create a simple file and name it index.php with the following content:

<html>
<head>
    <title>MyApp</title>
</head>
<body>

    <h1>PHP Desktop is awesome</h1>

    <div style="background-color:blue; color:white; padding:2em; font-size:3em">
        <?= "And PHP agrees!" ?>
    </div>

</body>
</html>

now move your index.php file in the www (if you didn't create it inside www) folder and launch PHP Desktop.


You should get something like this:

You can see that PHP Desktop has recognized your index.php as the first file to launch. That's the job of Mongoose server (the embeded web server). Plus, Our HTML and CSS codes were parsed, and the PHP code too was interpreted. So you are good to go, try it with other codes.

Note: Look at Mongoose as Apache Server

Note: Our title in title tag doesn't show. The title of our application window should be set in the settings.json in the following object:

 "main_window": {
        "title": "PHP Desktop Chrome",
        "icon": "",
        "default_size": [1024, 768],
        "minimum_size": [800, 600],
        "maximum_size": [0, 0],
        "disable_maximize_button": false,
        "center_on_screen": true,
        "start_maximized": false,
        "start_fullscreen": false
    }

You can see this object can help you influence the application's window.


So, What Now?

Yes, you have you application ready? you can just take your folder MyApp drop it anywhere in your computer. Anytime you want to start it just click on the launcher, or create a shortcut to it.

Bahh, that's not what we said we wanted. We need one executable file that we can send to the client then he can install the application himself.

Yes, of course. I was forgetting it lol.

In order to do that we will need another special and little software called Inno Steup.


What does that one do again?!

We will simply ask Inno Setup take the content of our folder MyApp and transform it into a self-installing package. And at the end we will have a simple setup.exe file that can be sent to our client for installation.

In essence to to that, follow the steps bellow:

1.Download Inno Setup

2.Install it

If something like this shows up, choose "Create a new empty script file"

3. now go to File > New

This wizard will appear:

Do not check the "Create a new empty script file"

4. Click on Next

This wizard will appear:

Here we need to make some settings for your application:

Application name: MyApp

Application version: 0.0.1

Application publisher: iT Tutors Age Ltd (Your company or your name)

Application website: www.phpocean.com (Or your website)

5. Now click on next again

This wizard will appear:

Here we need to precise the name of the folder that will contain our application once installed in the user's computer. When you install an application, it usually goes in the C:\Program Files or C:\Program Files (x86). So we will keep the Application destination folder by default.

Now let's change Application folder name into : MyApp

6. Click on Next

This wizard will appear:

Here is where serious things happen. First Application main executable name. On the wizard we have MyProg.exe (The encircled area). This is a default testing file from Inno Setup. We need to change it otherwise when we launch our application it will go and launch Inno Setup's test application.

So click on Browse, browse your folder to our MyApp folder, and double click on phpdesktop-chrome.exe.

Next is the the small white area with the lebel Other application files. This part too is very important and very delicate to manage. First it means:

If you have other files that make up your application a part from the executable file added on top, add all of them here.

So normally you have to bring all files in the MyApp folder in here except the phpdesktop-chrome.exe file one by one What is something hard and slow.

I personally usually go in my folder and highlight all files, except the  phpdesktop-chrome.exe then drag all and drop it in the small area. Simple and fast.

So at the end, you should have something like this:

7. Then click Next again

This wizard will appear:

this one is self-explanatory. It is the name on which you will click to launch the application after you've click on windows start menu. There other options you can activate too.

8. Click Next again

This wizard will appear:

This are your application documentation files: The license file, the instructions file before installation and the instruction file at the end of installation.

While this is not a must but if you want a serious software you can add it. So create three different text files(license.txt, before-install.txt, and end-install.txt) somewhere in your computer. Then browse each one and add them to the respective fields.

Whatever content you put in each, the user will see it while installing your software - try it and see.

9. Then click on next

This wizard will appear:

These are the languages you offer your clients for the installation wizard of your software. So, when their about to install it, they can choose the language the installation wizard should show instructions.

You can choose French and English or more.

10. Click on next again

This wizard will appear:

The Custom compiler output folder is where you want Inno Setup to place your finale Executable file at the end for you. So Browse it and choose a folder in your computer (I chosed my desktop folder).

The Compiler output base file name is the name you want your finale executable to have. You can keep the  setup or change it into MyAppSetup like me.

The Custom Setup icon, is the icon for your executable file. The file has to be a .ico file. For now just leave it.

And leave the password field too then click on next then next again then finish

After that Inno Setup will prompt this:

Just click Yes

It will ask you again if you want to save the generated code somewhere for further use. Say Yes if you want to keep it, choose where to save it in your computer and save it. If you don't want, just click on no.

Then Inno Setup will start compiling our files into an executable file.

Make sure you close PHP Desktop before getting here otherwise it will prompt an error that the elements are being used somewhere else.

If everything happen fine, you should get something like this:

Now go in the folder where you asked Inno Setup to save your executable file. In my case i chose my desktop.

So, this is what I got there:

I have my executable file called MyAppSetup and when I hover my mouse on it I have this:

All details are considered. Cool!

To install it just double click it and follow the instructions of the install wizard.

Thanks for watching this tutorial.

Labels: exe file with php, php desktop application, create exe file in php.