DEV Community: MMJ

From a HTML JS PHP Website to an Installable Desktop Application

MMJ — Sun, 22 May 2022 14:29:25 +0000

If you developed a website or a web app it’s very easy to transform it in an installable desktop application. Here’s how.

STEP 1

Go to this repo https://github.com/cztomczak/phpdesktop by Czarek Tomczak, then search for downloads. As I’m working with Windows, I used PHP Desktop v57.0 for Windows release (https://github.com/cztomczak/phpdesktop/releases/tag/chrome-v57.0-rc).

Download the zip file and extract the content wherever you want. Rename the folder as you prefer, you could use the name of your website. Let’s call it Myapp.

This is a sort of container with a self-contained web server (Mongoose) and PHP 7.1.3.
For example, launching the exe file called phpdesktop-chrome.exe will “read” what’s inside the Myapp/www folder. That’s where you will have to move your entire website to.

STEP 2

Erase what’s inside Myapp/www folder and copy there your entire website (don't put inside a sub folder). Be careful that any resource used in your website should be available inside that folder, locally, or available online if you don’t mind your desktop application will need internet connection to work. If, for example, you used CDNs, then your desktop application will not work properly without connection.

STEP 3

Rename the Myapp/phpdesktop-chrome.exe file, you can use the name of your application, let’s put Myapp.exe

At this point I suggest testing the application by double clicking on myapp.exe and be sure everything works as expected. If you find some bugs due to the different environment you can debug it as a normal website from that same window, inspecting it with devtool and working on the Myapp/www folder files in your IDE.

STEP 4

To make your website look like a real desktop application you’ll need to change some of the main settings you can find in the Myapp/settings.json file.
The things I suggest you change are:

Under debugging:

"show_console": false,

This will prevent the debug console to opening

Under main_window:

"title": "Application Name",
"icon": "www/img/applicationicon.ico",

These will change the window title and the icon of the application's window.

"start_maximized": true,

Because you may want to make the app start maximized and not in a small window.

Under chrome: Here there are some options about the enabling/disabling of devtool, f5 reloading and other browser related features you may want to be disabled, cause they look good on a website but not on a local application.

STEP 5

At this point we have a portable program to run, we could in fact create a shortcut to the Myapp.exe file, put it anywhere and all should work as an application. But that’s not the goal. We want an installable desktop application that anyone can install and run on pc.

To achieve that we need another tool: Inno Setup (https://jrsoftware.org/isinfo.php).
This is a free software that will transform our Myapp folder into an installable .exe file.
So, download and install this software https://jrsoftware.org/isdl.php

After installing, if the software didn't open automatically, open it and choose Create a new script using the Script Wizard (that’s the simplest way to go), then click next.
This wizard is pretty self-explanatory, I’ll just point out some details that could be tricky:

In the Application Files page, you have to select you exe file in the first input (in our case Myapp/Myapp.exe) and in the Other application files click on Add folder and choose the entire folder Myapp.
In the Application File Association page, uncheck the checkbox.
In the Setup Install Mode page, I suggest you to leave Administrative install mode option checked or allow user to choose that (last checkbox).
In the Compiler Settings page, in the first input select where you want the installer exe file will be created to, then select a name for that file and choose its icon (that will be the icon for the shortcut too if you choose to create one).
At the end, a script will be generated, and you’ll be asked if you want to run it immediately. You can do it right away and/or save the script and open it later with the same program then run it. I suggest saving the script anyway: after trying your desktop application you may need to change something you forgot or that doesn’t work properly, so after making some changes in your code you’ll just have to rerun the same script saved, avoiding to make it from scratch through the wizard again. Either way, run the script.
After the script compiling, you’ll find your installer exe file in the location you specified, and that’s it. This will work as any other desktop application ready to be installed: it will copy the entire folder Myapp into programs path (or anywhere depending on the user choice and yours during the wizard setup) and create a shortcut where you want.

CONCLUSIONS

Hope this is helpfuls in some way and if you stayed with me so far, I thank you giving some more tips and a desktop application I created from my “The Hangman” web game (described here https://dev.to/mmj/php-hangman-game-4b26).

Downloadable Hangman game -> https://bit.ly/3yR8D8j

SPECIAL TIPS

What if I need to change PHP version?

If you need to change PHP version, you can download the version you need from here https://www.php.net/downloads.php
Once you downloaded that, you can extract into the php folder of the project deleting what was in it. That’s it.

What if my application needs a database?

Nothing prevents you from using an external online DB as long as it is reachable, its configuration will let users connect to it and you are ok with a desktop application that needs internet to work. You could even serve APIs to do so.
But if you need a portable DB inside the application, that will work locally and even without connection, you can use SQLite which is an embedded database that runs on the host machine storing everything on a single file, so it can lies inside the project folder itself.
In order to use that I suggest you download SQLite browser (https://sqlitebrowser.org/). This tool will help you managing your SQLite DB, creating tables, editing records, and run queries.
If you already built a small website with a MySql database, chances are you just have to dumb your db, run query to create it with SWLite and change the connection type to the DB. The rest will work as it was or will need a slight refactoring.

What if used a .htaccess redirect to index.php for friendly URLs?

It happened that the first website of mine I tried to transform in a desktop application had a very simple routing system based on the reroute to the index.php set in the .htaccess file (with Apache web server).
Now, Mongoose doesn’t support .htaccess but you can manage the redirect to one page file within the settings.json of the project folder.
You can set the index here

"index_files": ["index.html", "index.php"],

And set the file redirection in case of not-found page here

"404_handler": "/index.php",

That should do the trick. But I had to add a little step cause I used this type of rewriting in the .htaccess

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?q=$1 [NC,L,QSA]

which will let you grab the requested URL like this

$_GET['q']

This of course did not work anymore, and I had to use

$_SERVER['REQUEST_URI'];

so to make it work both with Apache and Mongoose I did something like this

$q = isset($_GET['q']) ? $_GET['q'] : substr($_SERVER['REQUEST_URI'], 1);

PHP Hangman Game

MMJ — Sat, 14 May 2022 15:54:11 +0000

Hello to everyone.

In these days I’ve found an old project of mine and I decided to give it some refactoring.
It’s a very simple Hangman Game developed using PHP & JS.
It can be played in English or in Italian and you can play against the PC, which will chose a random word you'll have to guess among 60 thousand for each language, or you can play it with a friend inserting a custom word.
A working example is HERE
But there I’ve created a public GitHub repo too: Hangman Repo

Any feedback is welcome.

Hope you enjoy 😊

Collatz Conjecture Sequence API Generator

MMJ — Mon, 23 Aug 2021 16:32:15 +0000

Hi everyone. In these days I want to practice building and consuming an API. So, I developed a very simple API that returns a Collatz Conjecture sequence from a given number.
Basically, we are talking about a numeric sequence following this rule: given a Natural number greater than 0 (any positive integer), if this is odd, the next number in the sequence will be 3 times the previous plus 1. If it’s even, the next number will be half the previous. The conjecture states that, no matters what the first number is, the sequence will end in a 4->2->1 loop.
Everything is explained in detail on the website itself: pgxstudio.com/collatzconjecture

As stated in the documentation, this is meant to be an open API but also an open-source free project. The source code, under MIT Licence, is available here: github.com/MasonMassyJames/CollatzConjecture.
Please feel free to use it, partially or wholly, as you need to. A link to the source and the reporting of author name is not required but appreciated.
If you have any advice or correction about it or if you feel this documentation lacks something, I'll be glad to know.

Here I’m going to paste the README so you can check the features and the usage.

Collatz Conjecture

The API

Introduction
How It Works
Output & Examples
Errors
Usage Tips & PHP Call Examples

Introduction

I developed this website and its related API to practice. This
is a very simple PHP REST API working with a single URL and a single
HTTP verb: GET. No authentication is required. The purpose is to provide
a Collatz Conjecture sequence from a starting number specified by
the user in the request.

Note: this application has a limit about the size of the starting number
provided to generate the sequence and this size is less the size of the
greatest number tested by mathematicians to disprove the Collatz
Conjecture. Hence, no number supplied to this API will escape the final
4->2->1 loop. Having said that, my goal was to create something quite
realistic, even if only "virtually", therefore the limit size of the
starting number can be easly changed and the logic used to build up the
sequence is not "blinded" to just stop when the sequence hit "1" but is
able to find ANY other loop could occur.

How It Works

The single endpoint of this API is

GET | https://pgxstudio.com/collatzconjecture/API/{startingNumber}/[limit]

Parameters specifications:

Parameter	Description
{startingNumber}	Required. Must be a Natural number greater than zero (positive integer). This is the number the sequence calculation starts from.
[limit]	Optional. Must be a Natural number (positive integer). If zero or no parameter is given, no limit is applied. If a valid number is given, the number sequence length is limited up to that number.

Output & Examples

For any request a JSON formatted reply is provided.

Basing on the request, the response is a JSON with this info:

"status" : a string with value "ok" or "error"

Plus this info if the request is valid and no error occurred:

"sequence" : a JSON holding the indexed number sequence 
"odd" : the number of odd numbers present in the sequence   
"even" : the number of even numbers present in the sequence

Else this info if the request is invalid or an error occured:

"error_code" : the code number of the error (list of errors below)  
"message" : a string message related to the specific error occurred

Example of successful request without limit parameter

Request:

GET | https://pgxstudio.com/collatzconjecture/API/6

Response:

    {
       "status":"ok",
       "sequence":{"0":6,"1":3,"2":10,"3":5,"4":16,"5":8,"6":4,"7":2,"8":1}, 
       "odd":3,
       "even":6
     }

Example of successful request with limit parameter

Request:

GET | https://pgxstudio.com/collatzconjecture/API/6/4

Response:

     {
       "status":"ok",
       "sequence":{"0":6,"1":3,"2":10,"3":5}, 
       "odd":2,
       "even":2
     }

Example of failed request

Request:

GET | https://pgxstudio.com/collatzconjecture/API/string

Response:

     {
       "status":"error",
       "error_code":3, 
       "message":"ERROR. Starting number must be a positive integer between 1 and 1000000000000."
     }

Errors

Here's the list of possible errors coming from API

Error Code	Message	Description
1	"ERROR. Too many parameters in request."	The GET URL used is passing other parameters besides the starting number and the limit.
2	"ERROR. Too few parameters in request."	The GET URL used is not passing the starting number.
3	"ERROR. Starting number must be a positive integer between 1 and [MAX_STARTING_NUMBER]"	The starting number parameter is passed but is not a positive integer or it is 0 or it is greater than the maximum number allowed (set in the `API/include/bootstrap.php` and now is set to 1'000'000'000'000).
4	"ERROR. Limit number be a positive integer."	The limit parameter passed is not a positive integer.
5	"ERROR. Unknown error. Something went wrong."	Something got f*cked up somehere and I have no clue :(

Source Code & Examples

Project tree

In the previous image you can see the complete project tree you will
find in the github repo github.com/MasonMassyJames/CollatzConjecture. The application consuming the API is written in a functional-procedural style, while the API is an Object driven architecture. The JS client-side logic interpreting JSON and showing graphs lies in the scripts.js file. The API lies in the the omonym folder you can see in details in the image below.

So, if you need just the API, all it takes is inside that folder, you
can grab it and put it in your project. The API is built with its own
.htaccess and even if you change the request like

https://www.yourwebsite.com/something/somethingelse/API

it will work unless you change the name of the API folder. If you plan
to change it just set it accordingly in API/include/bootstrap.php
and it will work again.

  // Define API folder name (used to ensure correctness
  // of request array no matter the url of the API is)
  define("API_FOLDER", 'API');

In this same file you can set the MAX accepted number for the starting
number.

Example of a PHP Call to the API

      function call_CC_API($num, $limit) {

        // Build url: if no limit is set, 
        // append only one parameter (url/$number/[$limit]) 
        $url = BASE_API_URL . $num;
        $url .= $limit ? '/' . $limit : '';

        $curl = curl_init();

        curl_setopt($curl, CURLOPT_URL, $url);
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);

        $result = curl_exec($curl);

        curl_close($curl);

        return $result;

      }

In this function I passed the (previously checked) starting number and
limit provided by the user. Then I built the URL string basing on the
presence of the limit value. The BASE_API_URL is a constant defined at
the beginning of the same file (function.php).

Sharing Local Server with Local Network (XAMPP)

MMJ — Sun, 13 Jun 2021 12:25:54 +0000

In this simple step-by-step tutorial I’m gonna explain how to share a local server (using XAMPP) with your local network in order to share DB, folders in httpdocs (local websites) and even start a XAMPP server on other machines running a local website that connects to a DB in the shared server. That last feature was the most important for me to achieve because I needed to work with a teammate on the same project, each one on a local copy but both connected to the same DB, managing changes with a git repository on Github.

I found many similar tutorials online, but none was merging all I needed, so I decided to share my solution. Hope this can help even with different environment too.

STEP 1 – Getting static IPs for your machines

That’s not mandatory, but it’s the easiest and safest way to go.
There are many ways to do so and internet is full of good tutorials.
Here’s a video: https://bit.ly/3zrB8HA
And here’s an article: https://bit.ly/2So11HC

STEP 2 – Change some XAMPP settings

After setting static IP addresses let’s make an example assuming we have a machine sharing its XAMPP (which I’ll name “server” from now on) with IP 192.168.1.10 and another machine that will connect to the server (which I’ll name “client” from now on) with IP 192.168.1.11

You need to change some XAMPP server configuration in the server machine. I suggest to make a backup copy of the files we are going to change.
To reach the files you need to change, click on the Apache Config button in the XAMPP Control Panel as the image shows.

FIRST CHANGE: Now click on the httpd.conf and look for the part where it says



# Change this to Listen on specific IP addresses as shown below to 
# prevent Apache from glomming onto all bound IP addresses.

Here you have to add the local IP address of your “server”, in this example 192.168.1.10. So, we’ll have



# Change this to Listen on specific IP addresses as shown below to 
# prevent Apache from glomming onto all bound IP addresses.
#
Listen 127.0.0.1:80
Listen 192.168.1.10:80 #(IP PC SERVER)

SECOND CHANGE: Open again the Apache Config button in the XAMPP Control Panel and click on httpd-xampp.conf

Here we have to find where it says



    <Directory "C:/xampp/phpMyAdmin">

We have to grant access, so we need to change it like this:



   <Directory "C:/xampp/phpMyAdmin">
        AllowOverride AuthConfig
        Require all granted
        ErrorDocument 403 /error/XAMPP_FORBIDDEN.html.var
    </Directory>

Step 3 – Firewall Settings

This can be different basing on your machine and firewall settings.
Anyway, port 80 must be reachable from client but not open for anybody from anywhere.

To achieve that I had to turn off a blocking rule and adding one to open port 80.

To do so open your firewall configuration, in this example I use windows firewall: click on windows logo, type “firewall” then press enter.
In next window click on advanced settings.

Then click on Inbound rules and look for a blocking rule (red prohibition sign) that says “Apache HTTP Server”. If you find it, right click on it and choose disable.

After that, staying on Incoming rules section, click on New rule… in the upright corner.

In each step of the wizard to create rule choose:

Custom
All programs
Protocol: TCP, Local port: Specific port – 80
Remote IP address: 192.168.1.11 (client machine)
Allow the connection
Uncheck Public
Give name and description + finish button

At this point if server machine starts XAMPP, the client can reach the server using its browser using the url http://192.168.1.10 as it was on the server machine, so it can reach phpadmin and DBs (http://192.168.1.10/phpmyadmin) or any website in the htdocs folder (http://192.168.1.10/AnyLocalWebsiteFolder).

Anyway, it could be still impossible for any machine to start its own XAMMP, open a local copy of the same project and connect it to the DB on the server machine.

To make it work, we need another step.

Step 4 – Adding PhpMyAdmin Users

We finally have to add a user with all privileges for each machine (server included) in PhpMyAdmin, in our example we have to add root@192.168.1.10 and root@192.168.1.11

Now each machine can work freely on their local copy of the project, using a git versioning on a remote common repository, connecting on a single local DB on the server machine.

The snippet defining constants to build the connection will be the same for every machine



    } else if ($_SERVER['HTTP_HOST']=="localhost" || $_SERVER['HTTP_HOST']=="192.168.1.10"){
      // Local Development Server 
      DEFINE ('MASTER_BASE_URL', 'http://localhost');

      DEFINE ('DB_USER', 'root');
      DEFINE ('DB_PASSWORD', '');
      DEFINE ('DB_HOST', '192.168.1.10');
      DEFINE ('DB_NAME', 'db_name');
    } else {

Client machine(s) will run its XAMPP working on its local copy and checking the results on its local http://localhost/LocalWebsiteFolder, but connection will be correctly set on the server DB.

I'm aware that there could be many other ways to achive what I've described, if you know any and you think it's even easyer, please let me know. This is just the solution I came up with after smashing my head to the wall countless times.
Anyway, I hope it helps.

Is coding kind of like making art?

MMJ — Sat, 29 May 2021 10:54:12 +0000

I usually ask myself questions about the most trivial things. Among these there is also investigating why I like a given thing or why I don’t.
I have often wondered why I like coding and, writing music since I was a teenager, I think I have identified several things that these two have in common.

The first similarity I found is that inspiration is needed. Although it seems counterintuitive for those unfamiliar with the world of coding, inspiration is a very important help. In music is even essential. The inspiration you need to fix a bug and the one you need to complete a chorus are really very similar because the two draw on both experience and creativity.

Creativity is another aspect in common as well as the fluctuating state that can affect: many times, in both writing music and coding, a person can feel stuck, without creativity, remaining unproductive for a long time, even ending up thinking that he/she is not made to continue writing code or music, while other times creativity flows copiously, and he/she becomes extremely productive.

In addition to inspiration and creativity, in writing music and coding you need to know how to get out of the lines and know how to adapt, to improvise, but always staying within the rules because, if you violate the basic rules, in music you’ll get a note out of tune or something unlistenable, while in coding... well, I certainly don't have to specify what happens.

Furthermore, both for music and for coding, you need to study and practice a lot, you need to learn and execute. In both cases discipline and repetition (even boring) of the basics is necessary but all this is still fun and rewarding if you have passion. Here, even passion is an element in common: if you write music or code, you need passion, otherwise... it shows.

Finally, when you complete a large section of code or a song you get a great satisfaction: I clearly feel a “completeness” feeling, having created something of my own and that works as I imagined.

So, is coding like making art? No, it is certainly not the same thing because they are very different in a lot of aspects but, as I have described, they have some interesting similarities.
Do you agree with my thinking? Is there any other similarity I missed?

Accessors in Laravel - quick view with example

MMJ — Sun, 28 Mar 2021 12:02:01 +0000

First thing first: what’s an accessor?
An accessor is a custom method we can create inside a model and that can get and manipulate an attribute of that model. Its result can be a new attribute of that model or “substitute” an existing one.

Real case scenario: for instance, if we have a model mapping to an “album” table that has a “thumb” field in which the name of its thumbnail is stored. When we retrieve that value and put it in the src of a img tag, it can be annoying to build the path and then print that value at the end, especially if we have a lot of images.

We can build our accessor that creates a new attribute of that model and that will return the complete url for us. The name of the method must be built in this way: get{Name}Attribute. The “Name” can be what you want but if you use the name of the album’s field you are retrieving, the value of the field will be automatically passed.
So, in the album model we can write:

    public function getPathAttribute(){
        return 'pathToThumbsFolder/'.$this->thumb;
    }

Or using the field name

    public function getThumbAttribute($value){
        return 'pathToThumbsFolder/'.$value;
    }

When we have an instance of an album, this accessor will let us write

$album->thumb

Where we want to get or print the full url to the thumbnail.
Of course, we can set that path in the .env file and use something like env('ALBUM_THUMB_DIR') as path in this method.

Further example: it can help building an if statement to show a default image if album has no thumbnail make the html code cleaner.

    public function getThumbAttribute($value){
        return $value?'pathToThumbsFolder/'.$value:'pathToDefaultImage/default.jpg';
   }

This can be very helpful, save a lot of code and make it cleaner because every time you need to retrieve a value manipulating it first you have only one place to do it and possibly change it later.

Can you still save your soul?

MMJ — Wed, 03 Mar 2021 18:54:05 +0000

Have you ever thought about how to clean your soul? Now there is someone who can do it for you. Find out how much time you have left before it's too late.

No. I don't think such things exist but, who knows?
Just a small landing page I made for fun :)

Take a look

Watch it on Codepen

JFF - Who are these guys?

MMJ — Wed, 24 Feb 2021 17:36:38 +0000

No code was harmed in the writing of this post

A Dice Game... as it was then and as it is now #reviewyourself

MMJ — Sun, 21 Feb 2021 14:26:00 +0000

A few days ago, I found an old folder on my pc that dates to the time when I was starting to study web development.
Inside this folder I found an exercise I made up to practice which consisted in developing a dice game for two players.
Obviously, it's a very simple code, but looking back at it I was surprised the way I developed it and I realized how different I am now both as a developer and as a person.
The interesting thing, as well as revealing the use of bad practices, was reviewing the logic with which I faced problems and found solutions, following paths that I hardly recognize as "mine".
So, I decided to put on codepen both that old version of the game and a new developed version as I would develop it now, leaving the frontend scaffolding intact, changing only the JS logic.
I did this just for fun as now, being a backend developer, that’s not what I’m focused on, but I think this can be a good exercise in general and can help to understand yourself, looking from the outside and observing your own path to improve.

#reviewyourself

If you get inspired from this and post something alike, please use the same hashtag and let me know in the comment section :)

Here are the two versions of the game:

Old Version

New Version

The struggle of faking data

MMJ — Sat, 13 Feb 2021 15:17:50 +0000

Who must test applications by creating fake data for invented users can often get through the day with a serious lack of imagination.
Of course, we often work with frameworks or libraries that offer tools to, for example, populate DBs with very realistic data. But other times to test small applications you have to rely on the imagination only. This can be annoying and can also affect the speed of work at times.
For these cases and to avoid entering names like John Doe, Foo, Asd or even 123, I point out one of the many sites that creates fake data for free.
This one is very complete: it gives you even coordinates, zodiac sign, credit card data, etc. and let you choose many options like nationality, age range and so on. Hope it will be useful :)
If you know similar websites feel free to suggest me.

Fake Name Generator

Generate a unique random code to store in DB

MMJ — Sun, 07 Feb 2021 16:01:24 +0000

In this post I will show one of the methods I usually choose to generate unique random code.

First, the function that will return the string code.

function generateCode(int $size = 10){
  $chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVZYabcdefghijklmnopqrstuvwxyz';
  $code = substr(str_shuffle($chars), 0, $size);
  return $code;
}

EXPLAN: A very simple function that accept an integer as attribute which will be the length of our code, in this case if the legth is not given, a 10 is passed by default.
Then we set a string of characters we want to be used to build our code.
Then the code itself is built by shuffling the string and get a substring from the first character as long as indicated by the int we pass in the function.

For this to be unique, we can search the table we want to interact with

      // Generate + update code
      do {
        // Generate code
        $code = generateCode();
        // Loop to search for an identical code, if found generate another one
        $stmt = $conn->prepare("SELECT count(id) from tablename where code = ?");
        $stmt->bind_param("s", $code);
        $stmt->execute();
        $result = $stmt->get_result();
        $row_code = $result->fetch_row();
      } while ($row_code[0]!=0);
      // Update record
      $stmt = $conn->prepare("UPDATE tablename SET code = ? WHERE id = ?");
      $stmt->bind_param("si", $code, $id);
      $stmt->execute();

EXPLAN: with a do-while we can call the function and get a first-try code. Then we search for it in the table with a select. In the while we check if the result is different from zero (the code already exists). If it exists, the loop will keep running and create codes until a really brand new one is created. Then the code will exit the loop and we can do something with this unique code, maybe update an existing record.

Of course, the shorter are the codes and the fewer are the characters used to build them, the higher will be the risk to have a very long and resources sucking code.

If you have any suggestion or correction about this, I'll be glad to hear about it.