We'll begin by covering the fundamentals of HTML reporting and how you can create your own stats reports using a simple json configuration file. Whether you're an experienced coder or a complete beginner, this section will equip you with the knowledge you need to get up and running swiftly.
Here is a list of things you should ensure you have on your mac before starting:
• The HTML Report Template .zip folder which you can download at the bottom of this list
• Web browser such as Safari, Chrome or Firefox
• Text editor such as Sublime Text or VS code which will help highlight the syntax and avoid tedious coding errors
• Local web server such as MAMP or a Piston Server to run your html reports on
• An outline of what you want to create and a sprinkle of creativity!!
Click the download button above to get your zip file
Extract the zip file to somewhere appropriate on your mac (desktop is fine..!)
Test your new template report by viewing it offline using a MAMP server or with your Piston server. MAMP allows you to run your HTML files on a local server for testing purposes. Without a server your data will not calculate.
a) To set up a free MAMP server, download and install MAMP from the website, then follow the setup instructions.
b) Once installed you can go to 'file' > 'settings' > 'server' tab to configure the folder where your unzipped report folder lives - simply click 'choose' and select the parent directory.
c) On the mamp window, click the 'start' button in the top right corner - if your server is already running you will see that it is green and has the word 'stop' written beneath it which indicates that if you click it again it will stop the server.
d) Lastly go to a web browser like Safari or Chrome and enter 'localhost:8888' into the url and you should see your new report
Now you can start customising the 'config_home' JSON file like the one below! This can be found in the json folder of the extracted zip. If you right-click 'config_home.json' and choose 'Open With' and then select your text editor of choice such as Sublime Text or VS code.
To get acquainted with the functions in this config file, please head to the next section.