You are currently viewing Using Complete Source Code, with Database, to Develop an Offline Web Application

Using Complete Source Code, with Database, to Develop an Offline Web Application

  • Post published:September 30, 2016

You might have heard of downloading the whole website for offline use with tools such as HTTrack, etc. Such tools only download the HTML pages, images or static data only. vteam #474 was required to develop an offline version of a web application. This particular application should have the functionality to be used in areas, where there is no internet facility.

To develop such an application, below are the multiple solutions:

  1. Desktop application connected with live web application through API is a good approach only if the application is capable to cache the data locally. If there is no Internet access, it can still serve the users.
    But, the downside of this solution is that it may need a lot of amendments in the live web application to facilitate the desktop API and server with data
  2. Desktop application that is provided with the database dump does not need any amendments in the current web application. But, it requires all the functionality to be implemented in the current application which needs an excessive amount of time and money
  3. Download the complete source code of the application along with database that runs on local machine. This method does not require any new development or rewriting of the application in new language. It can also spare a considerable measure of time and money

After some research, developer Faisal Kaleem found the third solution realistic and beneficial. To implement this solution, following steps were taken:

  1. Prepared portable Apache, MySQL and PHP server
  2. Included the source code into the portable AMP server
  3. Included user data and the database
  4. Created a zip file of the portable server and source code

Once the zip file is downloaded, the user is required to run the package by following the steps mentioned below:

  1. Extract the package
  2. Click on an executable file to run the application
  3. The application is launched in the browser

XAMPP (which was already available as a portable package) is chosen and set on the server. When a user clicks on the download button, a script:

  1. Copies the code files into the XAMPP directory
  2. Copies the user data
  3. Takes database dump in .sql format
  4. Places .sql format database dump in the XAMPP directory

After placing the necessary files in real-time, XAMPP directory compresses the package to begin the downloading process. Once the package is downloaded, the user extracts it by utilizing some unzip utility such as 7zip. After that, place it in a directory and runs batch script (.bat) file.

The .bat file (which can run multiple DOS commands) is then executed by the user. This file:

  1. Starts XAMPP server
  2. Imports the .sql dump into the MySQL server (when the application is run for the first time)
  3. Opens the application in browser

Following commands were written in the .bat file:

SET xampp=%~dp0
PUSHD %xampp%
ECHO Starting Apache Server 
START /B apache\bin\httpd.exe
ECHO Apache Server Started
ECHO Starting MySQL Server
START /B mysql\bin\mysqld --defaults-file=mysql\bin\my.ini --standalone --console --log-warnings=0
ECHO MySQL Server Started
IF NOT EXIST %xampp%\mysql\data\app_db\user.frm (
    ECHO Configuring Application for the first time
    %xampp%\mysql\bin\mysql -u root -palpha app_db < %xampp%\htdocs\app\data.sql
    ECHO Application configured
ECHO Opening application in default browser.
START https://localhost/app
ECHO Application opened in browser
ECHO Do not close this window.
PUSHD %xampp%

While executing the solution, some of the risks were confronted yet overcome as listed below:

  1. The code was shared so that anyone could make amendments. This limitation was overcome by using some code encryption tools such as ionCube or ZendGuard
  2. Sensitive information like other client’s password must be encrypted with non-revertible hashing algorithm. Therefore, bcrypt was used
  3. As the process could take few minutes, so it was made sure that the server was configured with enough resources to avoid ‘timeout’ or ‘memory issues