PROG2000 Assign-07 : jQuery and JSON based Text Editor solved


Original Work ?


5/5 - (3 votes)

This assignment can be done with a partner if you wish – or can be done alone. In this assignment, you will be
investigating and using both jQuery (as the front-end to your AJAX calls) and JSON (as a data interchange format).
The idea behind this assignment is to get you to create an online text editor.


• To learn and demonstrate the use of jQuery as a dynamic web technology


1. The client page must allow you to choose a text file from a list, open it, and populate an editable area on
the page

a. The list of allowable files are to be populated from a directory called “MyFiles” that exists on the

b. Keep in mind that the file names are not limited (they can include spaces in the name)

2. The user must be able to make simple text edits in the text edit area

3. The user must be able to save the text to the same file, or a new file on the server

a. Again the directory that the file is to be saved to is a directory called “MyFiles” on the server
b. You do NOT have to support multiple directories on the server.

4. Your text editor does NOT need to support any formatting requirements

a. It just captures text (like Notepad) – no need to allow bold, italics, etc.
b. You do NOT have to support cut/copy/paste programmatically within the editor

5. You must use jQuery to make an AJAX call to populate the file list on the client.

6. You must use jQuery to make an AJAX call to populate the editable text area on the web page.

7. You may use either ASP, PHP or ASP.NET as the server side technology.

8. The data interchange between the server and the client must be in JSON format.

a. This means that sending the file’s contents from the server to the client must be in JSON
b. This also means that sending the (potentially) updated file contents from the client to the server
must also be in JSON
c. This also means that the list of editable files (sent from the server to the client) must be in JSON

9. Make sure to concentrate on the user experience (i.e. the design and flow of the editor application)
a. This includes providing users with feedback as to what is happening within the application
b. Making the application pleasing to the eye and professional looking

Hand in:

1. Ensure that all of the necessary and required files are included in the single submission ZIP file
a. Submit a directory structure that includes any and all web pages, CSS files (if any), images (if any)
as well as any cleaned VS solution
2. Make sure you comment your source code (whether that be a web page or C# source file (in ASP.NET)
appropriately, especially the header comments
3. Also remember that this solution will be tested using Internet Explorer v11 as well as Chrome