Let’s go ahead and install this simple no frills, locally run Web Application…
Table of contents
- Introduction
- Foolish Assumptions and Installation Tips
- How to install (overview)
- Download and install the Java environment (JRE and JDK) onto your PC / computer
- Download the data ready to load onto the Application Database
- Download, install and start “XAMPP for Windows” Control Panel
- Load the Application Database data
- Download and install Standalone Web App (HomeFinance-v02.00)
- Run the Application
- Close the Application
1. Introduction
Please Note: do not be put off by some of the technical terms, length of this document or even if it feels like it’s getting a little complicated, just follow this simple guide step by step and this will ensure you have the application up and running in no time 🙂 !
2. Foolish Assumptions and installation tips
Computer knowledge
If you have no real programming or technical experience, don’t worry at all! This guide has been written with people like yourself in mind. It is assumed, however, that you do know the basics of how to:
- Operate a basic text editor
- Find your way around a computer…you can cut and paste and edit documents
- Find your way around a web browser
3. How to install (overview)
What you will be downloading / installing
Get a feel for what you will be doing! Me…I always look for an overview. I like to see what I’m doing from top down.
So…
You will be downloading open source tools / applications (apps), which are free! You may not be used to downloading tools and apps, but please be assured, downloading these things is very commonplace in the world of the technical test arena. Therefore, it is a great way of getting used to it 🙂 ! Something I was introduced to at the very start of my IT experience.
The downloading of the open source stuff will be explained in simple terms. This will be followed by the setting up of a database and then the downloading and installing of the application itself…please, please do not not be intimidated by the technical terms, just follow the guide…step by step!
Again…think overview…
There are 6 main components to getting the the application up and running (which are explained in more detail in their relevant sections):
- Download and install the Java environment (JRE and JDK) onto your PC / computer
- Download the data that will be used for the HomeFinance application’s database (DB)
- Download and install XAMPP, a place that will hold the HomeFinance DB
- Load the HomeFinance database data
- Download and install the Standalone Application (HomeFinance-v02.00)
- Run the application
Simples 🙂 !
4. Download and install the Java environment (JRE and JDK) onto your PC / computer:
In order to run the HomeFinance java application, you will need a java runtime environment (JRE) and a java development kit (JDK) installed on your machine.
What System Type is your PC?
Before downloading the JRE and JDK, you will need to find out what system type your PC has, so go into Windows File Explorer as follows:
- Right click on “This PC”, as below, and then choose “Properties”:
- You should now see “System type”, as below, showing whether it’s 64 bit or 32 bit (x86). This info will be used later:
Install Java JDK
The HomeFinance application was built using a JDK version “jdk1.8.0_281”, therefore, it is important that you install this version in the default directory that is specified by the JDK installer (i.e. C:\Program Files\Java\jdk1.8.0_281):
- To download the “JDK – 1.8.0_281”, go to Oracle’s java download page for version 281:
https://www.oracle.com/uk/java/technologies/javase/javase8u211-later-archive-downloads.html
- Scroll down until you see the following, please ensure it is the “Java SE Development Kit 8u281” section you are looking at:
- Depending on the machine you have, as you will have discovered in “What System Type is your PC?” above, either click on Windows x86 (32 bit machine) or Windows x64 (64 bit machine). This will download the JDK installation file to your download directory (if you need to sign in, then it will automatically download after the sign in has been successful)
- As Oracle own the Java JRE / JDK, you will probably see an Oracle account sign in form displayed, as follows. Either enter an existing Oracle account username and password, if you have one, or just register for a new one, this is FREE and easy to do
- Once you enter your username and password details, the JRE / JDK will start to download
- Go into your download directory and double click (dependant upon the machine you have) “jdk-8u281-windows-x64.exe” or “jdk-8u281-windows-i586.exe”. Note: again, please ensure that you have downloaded the right file that begins with “jdk-8u281“ and is an “exe” file
- You will receive a pop up asking “Do you want this app to make changes to your device”, click Yes and then “Next” when the Java Wizard shows:
- Click “Next” when the options window shows and wait for the installation to complete, then follow the other screens below:
Check that the installation has completed successfully.
Open the Windows Command prompt by typing in “cmd” in the Windows Search box and clicking enter:
- Enter cd C:\Program Files\Java\jdk1.8.0_281 as below
- Then, you should see this…
- Great stuff…that’s the JRE and JDK installed 🙂 !
5. Download the data ready to load onto the Application Database
You will now need to download files, so as to use them to create a database and its data for the HomeFinance app, in order to do that click me.
- You may get a security warning about downloading a ZIP file. Override this, by pressing “Allow Access” and continue:
- After a few seconds, a zip file (HomeFinanceFiles.zip) will appear in your PC’s download directory:
- Double click the “HomeFinanceFiles.zip” file (open as File Explorer if asked) and extract the contents to the download directory for later use
- You should now have 3 files in your download directory:
- homefinance-V02.00-SystTest.zip
- homefinancesystemtest – DDL load – V02.00.sql
- homefinancesystemtest – SQL data load – V02.00.txt
6. Download, install and start “XAMPP for Windows” Control Panel
So, this section is a little longer than the previous ones…but if you follow it slowly and carefully, then all will be well. You are now over half way to getting the application up and running 🙂 !
The HomeFinance application has data stored in a database (a MySql Database (DB)). For the DB to be accessed, it must be up and running. This is where XAMPP comes in.
XAMPP provides a server platform (Apache) and server Database (MariaDB, which is compatible with MySql) for the HomeFinance application database to run on. Don’t worry about all these technical terms…they will become commonplace soon enough 🙂 !
XAMPP comes with:
- Apache – an open-source web server that runs almost half of the websites on the internet
- MariaDB – an open-source server database that is fully compatible with MySQL
- phpMyAdmin – this is an interface that allows access to MariaDB databases. Allowing us to create and manage our DB data
- PHP – this is a server-side programming language that we will not be using
Download and Install XAMPP
- Go to the XAMPP website www.apachefriends.org and follow the instructions below:
- Click on “XAMPP for windows” to download the installer:
- In your Download directory, you will see an exe file something like xampp-windows-x64-8.0.7-0-VS16-installer.exe, where 8.0.7 will be replaced by the newest xampp version, use that and double click the file
- You will receive a pop up asking “Do you want this app to make changes to your device”, click Yes
- Override any virus checks by switching off your virus checker if needs be
- The following message will be displayed. This is just a warning message not to install XAMPP in the C:\Program Files directory. You will override this in the next few steps. Click OK:
- You will be presented with a Setup Wizard. Click Next
- In the Select Components dialog box, for our setup, deselect as below:
- In the Installation Folder dialog box, type the location where you want XAMPP installed (me personally…I install all my development apps / tools into my own directory, C:\Apps, that I have made) then click Next
Make sure you avoid the folders C:\Program Files and C:\Program Files(x86).
My personal way of working Note: I actually install most of my development applications by putting them in my own directory (as above: C:\Apps), rather than installing in the default directories such as c:/Program File. The reason why I do this? As a developer / automation tester you may need to have several versions of development applications and having them in one place just makes it easier for me to see what I have installed and easier to copy applications over to another machine. This is just my own preference 🙂 :
- The next step is just to deselect something:
- Once you choose your language, the Setup Wizard lets you know that Bitnami for XAMPP provides installers for content management systems such as WordPress and Drupal etc. deselect “Learn More About Bitnami for XAMPP” and Click OK
- Click Next to begin the installation
- NOTE: If you see a Windows Security Alert dialog box, when you start a server, select the Private Networks check box, deselect the Public Networks check box, and then click Allow Access
- Click Allow Access
Running the “XAMPP for Windows” Control Panel
- When the install is complete, click Finish
- deselect the Do You Want to Start the Control Panel Now check box, as this is covered below, showing you how to start the Control Panel normally
(The XAMPP Control Panel controls the applications downloaded with XAMPP. Here, you can stop and start these apps)
Opening XAMPP and starting the Apache web server and MySql DB
To get our HomeFinance application up and running, we are only interested in the Apache web server and the MySQL database system. For best results, start XAMPP with administrator privileges, as follows:
- Click Windows Start
- Scroll down to find the XAMPP folder in the All Apps list, as below, and then right-click XAMPP Control Panel, click More and click Run as Administrator:
- Note: If you’re the administrator of your PC, click Yes. Otherwise, you need to enter the username and password of the PC’s administrator account
- When asked to, choose a language. This will only happen the first time you run the Control Panel. Select the language and click Save
- The XAMPP Control Panel will now be displayed:
- For our purposes:
- Start both the Apache server and MySql server by clicking the relevant “Start” button. The text of the 2 buttons will now change to Stop, which can be clicked again to stop the servers
Good show…you have now got the DB up and running by starting the Apache server and started the DB 🙂 . Next you will be loading some data onto the DB for the HomeFinance to use.
7. Load the Application Database data
Create the DB tables:
In section Running the “XAMPP for Windows” Control Panel we started both the Apache and MySql servers, having done this we can now open the Database Administration Application (phpMyAdmin) so as to create a DB and load some data ready for you to use the HomeFinance app:
- In a Chrome browser, enter localhost/dashboard/ in the address bar, as follows, and click enter:
- If you receive a security message, then override this
- You will be faced with the Apache Friends web application:
- Click phpMyAdmin, in the menu bar, which will take you into the DB admin application
- To create your DB:
- Click “New” in the left hand menu (LH menu):
- Enter the Database name: homefinancesystemtest and click the Create button
- Create tables and data:
- In the LH menu – click on the newly created homefinancesystemtest DB name
- Click the SQL tab
- To create the tables:
- Open the following text file (using Windows Notepad) from your download directory that you downloaded in section “5. Download the data ready to load onto the application Database“:
homefinancesystemtest – DDL load – V02.00.sql
- Cut and paste the text from the above file into the SQL tab
- Click go
- This will have now created the tables in the new DB
- To confirm that tables have been created, click on the homefinancesystemtest name in the LH menu and you should now see the tables that have been created:
Load data into the Database
- To create the test data:
- Open the text file (using Notepad):
homefinancesystemtest – SQL data load – V02.00.txt
- Cut and paste text from the above file into the SQL tab:
- Click go
- This will have now created the data in the new DB
- We will check the data has been loaded correctly via the application, once the application has been installed in the next step
Now you’re flying…that is the hard bit done and next…you’ll install the web application itself!
8. Download and install Standalone Web App (HomeFinance-v02.00)
This final step will see you installing the application. In order to do this, you need to first extract the files from the HomeFinance zipped up (compressed) file and then move them to the root directory on the c: drive, as below:
Download and install application
You will have downloaded the HomeFinance application (homefinance-V02.00-SystTest.zip) in “5. Download the data ready to load onto the application Database“. This file should now be residing in your Download directory. Double click the file (and open it with File Explorer), to see:
- Drag and drop the homefinance-V02.00-SystTest file onto the c:\ root directory. Click on the c:\ root directory. You should now see the file:
9. Run the Application
Starting / running the HomeFinance application
- Open the Windows Command prompt
- Move to the HomeFinance app’s bin directory, as below, by entering:
cd C:\homefinance-V02.00-SystTest\bin
- Enter the following command, so as to run the application:
homefinance -Dplay.http.secret.key=abcdefghijk
- This should now start the HomeFinance web app (which can be found on the localhost server on port 9000):
Viewing the application
- To view the application:
- Open a tab in google
- Enter in the address bar: http://localhost:9000/login
- To logon to the application, enter:
- Name: foo10
- Password: foo10
- You should now see a list of Accounts available to foo10:
10. Close the Application
To close the application, you just need to go back into the Windows Command prompt and:
- Click the keys Ctr and Y simultaneously…twice!
- Once you have done that, you should see:
- You then need to click Y and the job will terminate
Finished!
Brilliant! You have now completed the downloading, installation and running of your very own Web Application that you can test against!
So…to learn how to use this application, see the How To Use guide. However, I would love to hear your thoughts…the good or the bad! So, please leave any comments that you have by visiting my Contact me page 🙂 !