Make Your First Desktop Application With PHP And PHP Desktop

Hi, welcome to this special tutorial. In here, I will be showing 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?

According to the official definition,

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.

- Source : Official Page of PHP Desktop

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.

A Bit Of Story

Back in 2005, I remember once I was called for a store management application. The principle was simple, the manager should be able to add records of new stock and all sales. At the end, the owner should be able to have a clean report of each day and if possible he can select a date or a period.

I told the client I could do it but it will be web based, so it will be using their browser to work. Even though I knew they don't understand what difference that makes it was necessary for me to try to make it clear for them. Fortunately, the client accepted it that way.

I made the application using EasyPhp. So to run the application, I had to install EasyPhp on the client's PC. You may tell me oh yeah there is no problem in that. Indeed, it seems like there is no problem, but such system/methodologies encounters a lot of problems such as:

• EasyPhp must be ON before the application runs otherwise they will receive a 404 error.
• I had to install the entire EasyPhp with all its modules while I needed just few.
• Whenever EasyPhp refuses to start, they have to call me
• If somebody mistakenly uninstall EasyPhp thinking it is a strange software, the entire application goes with all the records. Pffff.
• My database could easily be accessed.
• My application could be hacked by anyone using my URLs because they were visible.
• If they needed the same application in another store, I would have had to make the same process in that store by myself because they cannot install it themselves.
• Etc.

Definitely, it wasn't the perfect solution. Even though I did not have any problem, I cannot consider it as a good solution. I was just lucky. After that I had two others I did in the same way but I was never satisfied of my work until I have come to meet PHP Desktop.

I think you can understand the real problem we can face when it comes to a desktop applications with PHP. I knew they must be a way; otherwise my skills in PHP would have been used only for websites.

PHP Desktop comes to reduce (if not to solve) all these problems and gives a new horizon of software development experience:

• There is no need again to embed all modules for nothing, only required ones.
• No need to install any web server before, everything is embedded
• No need to worry about browser compatibility because PHP Desktop comes with an embedded browser
• The browser is very light, and does not have all boring tools such as address bar, favorite bar, history bar, etc. After all we will not need them.
• You can make the entire application an .exe file and send it to you clients so that they can install it themselves
• PHP Desktop can also act as a packager for pure HTML5/JS applications
• No memory leaks
• You can use it for Perl, Ruby and Python
• Etc.

Not wonderful ?!

What Do We Want?

Basically any PHP programmer would have liked to create any desktop application. Create an executable (.exe) application that he can easily share or sent to his client(s). Any client can simply install the application following an installation wizard without any struggle or any need of the programmer.

Unfortunately, if you are really into PHP programming you should know by now that isn't actually possible. Since PHP is an interpreted programming language you can't compile your project files into a single executable (.exe) file, and that's were the big problem is.

Most programming languages that are specialized in desktop application like Java have some libraries that provides then some set of elements (button, menus, color, shapes, etc.) to help create a software interface. Actually PHP doesn't have such thing, PHP is fully a scripting language. People have tried to create some extensions ( like PHP-GTK ) to provide such ability to the language, but still the problem is remains not totally solved.

Furthermore, PHP can be combined with HTML and JavaScript. And we know HTML tags can be styled with css... getting better. We can't imagine the limits of CSS in terms of designing. So, that's where PHP Desktop takes its power from.

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.

1. Download PHP Desktop (with Chrome or Internet Explorer)
2. Create a new folder and name it MyApp
3. Unzip the content of PHP Desktop Inside

You should have something like this in your folder MyApp:

I downloaded the one embeding 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 fileadded 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.exethen 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.

Samples [EDIT]

People asked me to provide them some sample of application done with PHP Desktop for real use case. Download a sample of an executable file here[38.9 MB].

Once installed to access the application use: Username: admin - password: admin

Bellow is some screenshot of applications I did:

Conclusion

Hope you enjoyed this long tutorial. I did not want to miss something because it is something very tricky. But, still they may be something you couldn't get well. just ask it down here in comment.

This tutorial is a very simple one in this process. They are many things you need to consider when using PHP Desktop, like the window settings, environment settings, Usage of frameworks, accessing the computer files and hardware, etc.

We'll try our best to make another tutorial that shows you how you can actually create a full software with PHP Desktop considering some advanced aspects of it.

• Tweet
• Share
• Share
• Share
• Share