In this section, it's all about system screenshots. I will list down all the screenshots of the webapp webpages.
Home Page
Home Page
On the homepage, if user is anonymous, it will show session information and a login button. If user is logged in, it will show the user's information and a logout button.
Login Page
Login Page A page only accessible to anonymous users. It's a simple form which has instant AJAX validation.
Register Page
Register Page
A register page for new users to register into the system. It's a simple form which has instant AJAX validation.
It has features like:
-
The interesting part is, if you select the "Enter Voucher Code" input field and click on "Scan QR Code" button and scan the QR code, the voucher code will be automatically filled in the input field. This is done using the QR Code Scanner.
-
Check if the voucher code is valid instantly using AJAX.
-
Check if the username is available instantly using AJAX.
Reset Password Page
Reset Password Page A page for users to reset their password.
Dashboard Page
Dashboard Page
A dashboard page for users to view their information and their vouchers. It also has a button, submit meter reading,view last bill, top-up account, and logout.
Submit Meter Reading Page
Submit Meter Reading Page
A page for users to submit their meter reading. It has a form which has instant AJAX validation.
View Last Bill Page
View Last Bill Page A page for users to view their last bill. It has a table which shows the last bill information.
An action button, Pay, is also available for users to pay their last bill.
Top-up Account Page
Top-up Account Page
A page for users to top-up their account.
It has features like:
-
Scan QR Code to fill in the voucher code automatically into the input field (same as register page)
-
Validate voucher code instantly using AJAX.
Admin Dashboard Page
Admin Dashboard Page A dashboard page for admin users to view their information and their vouchers. It also has a button, submit meter reading,view last bill, top-up account, and logout.
Set/Update Tariff Page
Set/Update Tariff Page A page for admin users to set/update tariff.
View All meter readings Page
View All meter readings Page A page for admin users to view all meter readings submitted by users.
View All Bills Page
View All Bills Page A page for admin users to view all bills generated by the system.
View Single Bill Page
View Single Bill Page A page for admin users to view a single bill.
View statistics Page
View statistics Page
A page for admin users to view statistics of the system.
You can enter your own barcode number into the system. Each energy voucher has a unique 8-digit code called an Energy Voucher Code (EVC). To register, a customer must either scan the voucher's QR code or enter the EVC manually. A newly created customer account is pre-loaded with £200 energy credit.
Below are a list of valid EVC (Energy Voucher Code) which can be used for testing purpose. A customer must enter one of the following EVC (or scan its QR code) to complete the registration or top up the account. (You might create additional test cases yourself https://www.qr-code-generator.com/ and update the line of code with your custom created code here)
