This essay has been submitted by a student. This is not an example of the work written by our professional essay writers.
You must create a server-side page, on a platform of your choice, to accept the meter readings from customers and write them to a CSV Comma Separated Value text file on the server for later import into a database. The form page should show their last meter reading for their information. A helpful personalized message should be displayed to the user so that they know submission has taken place successfully. Validate that the CSV file has been written properly by importing it into a spreadsheet package and making sure that each value appears in a different cell. You are expected to show example output and describe the functionality of your code in the report. Your actual code should be included in an appendix. Don't forget to relate your solution back to the requirements.
In this task I need to create a server side page which will enable the user to enter their meter reading. Information given will be saved in the server in CSV format for later on to be saved in a database. Besides, in this page, user will be able to see their last meter reading for their information. A completion message will be displayed for the user to inform them that their submission has been done. I have to check that the CSV file has been written properly by importing it into a spreadsheet package and creating some example output.
User will access their information by signing into their page. They have to authenticate themselves with user ID and password provided by the company. Following image shows the sign in page.
Figure: Sign in page
User will enter data like above image to authenticate.
I have created a server side page for accepting the meter reading from the user. Through this page users will be able to enter their meter reading through the internet so that the energy company doesn't have to do it manually. Successfully logged in customers will see following page-
Figure: Main information page
As was the proposal, user is given their last reading. This page is showing the reading as 387 as example last entry. Even the corresponding date of the last entry is displayed for the user.
The current date is also displayed for the user so that they don't make any mistake when they enter their current date for new reading.
Entering the data:
Now the user is to enter their new reading that will be added to their old reading. To perform entering new reading user needs to enter the current date first, then user will enter their new meter reading. Following image show the process-
Figure: Entering data
User enters their data in this page under the section labeled by "Enter your current reading". They will enter the date and current reading where the date has to be same with the date displayed.
After hitting the submit button, everything goes ok then the data will be saved in CSV format against corresponding ID in the order of date of entry. Following sections show the output events.
Message of completion:
User needs to know whether their data has been submitted successfully. For this we have already entered our date and current reading for a particular ID. When the Submit button is hit, following image shows what happens.
Figure: Completion page
User is provided with a message (actually a new page) that his entered data is added to the database to the corresponding date. User is also provided with buttons for going back to main page or directly to sign in page.
What if data is failed to be added?
If data is failed anyhow, for example any mistake with date entry, then following page will appear-
Figure: Failure message.
User is provided with warning that entered date has been a problem for data to be added. This warning will help the user to repair their mistake by hitting back button and going to the main page again.
Now the testing will be done for being sure that the data has been added successfully. Some example entries will be used here which are already stored for authentication purposes.
Opening saved file in spreadsheet package
Now the saved file has to be checked for the succession of the operation. As it was said, files have to be in CSV format and must be opened with a spreadsheet package being presented of each value in an individual cell.
Following image shows the example output-
Figure: Auto saved data table
This example output has been done with entering some random data within different date, but off course from the prelisted authenticated users. Here the specified description of the events will be-
Some random files have been entered for testing.
Files have been saved in CSV format in the local host.
The corresponding date is also saved with the meter reading.
From this saved files, the last entry and the date will be displayed for user's privileges.
This page also shows that the new reading has been appended with the last reading.
So the user can always be updated with his reading's gross amount.
User ID and Password file:
This page above is the main operation page. Before this, user had to login with valid user ID and password that was predefined in another database. Following image shows the database that holds the user ID and password-
Figure: User ID and password database.
Passwords and user name in this page will be given to the clients. Using this password and user ID, users will be able to enter the main page for accessing the information. The valid users will get their entrance resource from here.
Functionality of my code
Sign in page:
Figure: Code working behind login facility
Sign in facility using the User ID and Password is established by this portion of code. This scripting collect the user ID and password from the database and let the user enter into their page if valid.
Selected portion indicates the PHP coding for connecting the page with the database. By this code, user's entry will be added to the database and last reading will be shown.
I have created a server side page for accepting new meter reading. The report is prepared with description and relevant imagery. The functionality of coding is described with imagery. An appendix is made to include actual coding.
Report 2 - Task 2
Individual user must have their privacy with accessing the site. So they have to log in with valid user ID and password given by the company. Here they won't be able to keep any filed empty.
Figure 2: Log in page check empty field.
Empty password field:
User may enter user ID without password. Like following:
Figure 2: Password check
User is warned for keeping an empty password. Following message will appear-
Successfully logged in user will come to following page corresponding to his ID.
Figure 2: Main Page
In this page the date is displayed so that the user gets the date from the page, not from the computer. This will help them not to make any mistake.
Validation of date:
Following image shows that the error messages is provided when user enters invalid date or keep it empty.
Figure 2: Validation message for date.
User now knows that his date has to be corrected before he can proceed further.
Reading field empty:
User can't keep the reading field empty or enter 0 as amount. If they do then following thing would happen-
User will get following message in this case:
Validation of unit amount:
Unit amount that is entered by the user must be in decimal and whole number. User also won't be able to keep the field empty. Following image shows the occurrence.
Figure 2: Validation of data type.
For user have input a non-numeric data, he has been requested to give a numeric data. For a clear look the alert is-
If user has entered a floating number, following thing will occur-
Figure 2: Data validation.
User is requested to enter Integer. For clear look-
Functions for checking empty field in the log in page:
Figure 2: Function
Selected portion of the above image shows the functions created by java scripting for checking whether the field is empty for user ID and password. Technical detail is-
Language: Java Scripting.
Condition used: if â€¦â€¦. else if.
This scripting will check whether the user ID and password field is empty. If empty then user won't be able to enter their main page.
Function for checking date validation in the main page:
Figure 2: Function for date validation in the main page.
Showdate (): From the code displayed above, function named showdate () would show the current date in the entry page so that the user don't make any mistake with entering the current date.
Datecompare (): from the code displayed works for validating the entered date by the user. First the date is displayed in the first field in the form, and then the value is transferred in the select date field and compared for the validation.
Decimalcompare (): From the code displayed above, mentioned code works for validating whether the data entered by user is decimal whole number. If it is not then user will get warning to enter numeric or whole number.
From the code shown above, "window.alert" action performs the job of displaying different alert messages according to condition set in the scripting and based upon user's mistake when feeling the form.