Web Application Development With JavaScript Validation – Notes And Tasks

BCO1148 Application Development Using JavaScript and HTML

Interfaces for the Pseudocode and Wireframe Implementation

The web application development involves various languages for designing, validation data storage and styling however in our case I have an application regarding the Notes of the tasks that are provided to be done where the details are captured and stored in the database.

From the previous assignment I have implemented the interfaces for the pseudocodes and the wireframe that were provided ,these shows the utilization of the javascript to perform various validation process to the records that are saved in the indexed database .

Below are the interfaces that are implemented from the various wireframe diagrams as follows:

1. php interfaces. 

1. The add.html interface. 

• This is add.php interface showing the results after saving the records. 

1. This is the delete interface that is used to give a warning before deleting the file . 

1. The interfaces for editing the records. 

After  making changes below are the results.

The interface showing the urgent tasks.

Interface showing the most important tasks.

The interface showing none of urgent or important tasks.

Interface showing the pending tasks.

Interface displaying the completed tasks. 

However the below are the use of the JavaScript has helped in the process of validating the data input into the database ,this is shown by the following validation images

Validating the adding of the notes into the database.

Validating the editing of the records .

Validating the deleting of the records.

Below is the sample source codes used for the validation process together with HTML file used in the application.

Source codes.

<script>  

 function validateform(){  

var title=document.form1.TITLE.value;

var description=document.form1.DESCRIPTION.value;

var category=document.form1.CATEGORY.value;  

    if (title==null || title==””){  

      alert(“Title cannot be left blank”);  

      return false;  

    }

else if(description==null || description==””){  

      alert(“Description cannot be blank”);  

      return false;

}

else if(category==null || category==””){  

      alert(“category cannot be left blank”);  

      return false;

}

    }  

    </script>  

1. The HTML source codes.

<p align=”center”>Add a new note</p>

<form action=”add.php” method=”post” name=”form1″ onsubmit=”return validateform()”>

        <table width=”25%” border=”0″>

            <tr>

                <td>TITLE</td>

                <td><input type=”text” name=”TITLE”></td>

            </tr>

            <tr>

                <td>DESCRIPTION</td>

                <td><input type=”text” name=”DESCRIPTION”></td>

            </tr>

            <tr>

                <td>CATEGORY</td> 

<td><input type=”radio” name=”CATEGORY” value=”Urgent”/>Is it urgent?</td>

  </tr>

<tr>

<td></td>

<td><input type=”radio” name=”CATEGORY” value=”Important”/>Is it important?</td>

            </tr>

            <tr>

                <td></td>

                <td><input type=”submit” name=”Submit” value=”ADD NEW TASK”></td>

            </tr>

        </table>

    </form>

The application developed required to be tested and this is to show the efficiency of the system and how it operates .

This is an application to be developed to store the records of some notes and tasks that need to be handled with their priority and urgency ,however this system should assist the user to get quick understanding of the tasks available.

The system developed has been used to store the records of the notes ,however this application is simple to use and can be used to show the status of the tasks which can be either pending or completed .

The system however helps the user to show the categories of the tasks which are either urgent, important or none and it is displayed in a simplified format which can be understood by the users.

In this testing process there are a number of outcomes that I anticipate and these shows the efficiency of the system ,below are some of the expected outcomes.

1. The system should show all available tasks in the database.
2. The system should show all pending tasks waiting  to be done.

• The system should also show the completed tasks that are successfully completed.

1. The system should display the urgent tasks that need to be attended to first.
2. The system will also display the important tasks and they will also be given some priorities as well .
3. The system will also indicate the validation of the records entered to the database to be accurate.

• The system will also prevent unexpected deletion of the records.

1. Situation Before (Screen shot of the GUI)

Before the use of the javascript there were various loopholes in the systems where the records stored could be blank or inaccurate ,however the system records could be deleted without any warning to the users.

Below are the screenshots indicating the nature of system before.

1. Records stored with blank fields as below. 

1. Records updated without any message. 

• Records deleted without warning messages to the users.
• Situation After (Screen shot of the GUI)

After the implementation of the javascript validation in the system there are great achievements where the invalid data entry is controlled , the erroneous deletion of the record is prevent  and also the editing of the record is also validated as in the screen shots below.

After the testing process there are positive outcomes where all the limitation that exhibited before the use of the javascript for validation were eliminated ,however the javascript has helped the user to be able to do various operations successfully which includes:

1. The valid saving of the records.
2. The prevention of saving of the blank fields in the database is controlled.

• The accuracy in database records editing is maintained without entering inaccurate values in the database.

1. The deletion of the records is also controlled and thus the user require to confirm before deleting the records.  

Reference. 

Morgan,N.(2015). JavaScript for Kids: A Playful Introduction to Programming .New York: No Starch Press.

Haverbeke,M.(2014). Eloquent JavaScript: A Modern Introduction to Programming New York:

No Starch Press, Incorporated.

Crockford,D.(2016). JavaScript: The Good Parts. California:O’Reilly MediaLanguage.

Herman,D.(2015). Effective JavaScript: 68 Specific Ways to Harness the Power of JavaScript. Paris: Addison-Wesley Professional.

Flanagan,D.(2015). JavaScript: The Definitive Guide.California:O’Reilly  publishers.