The head of the I.T. Department at Skagit Valley College asked me to convert the paper form that was used for submitting an I.T. Project Request. I used my 3DW DevCloud Tools to whip out this project in a small amount of time. My project management cloud is the perfect way to track and complete this project. As you can see from the tabs in the screen shot, I’m logged into my DevCloud, and have my task lists, notes and planning documents right at my fingertips. These powerful tools allow me to compete projects quickly and efficiently, using the best practices and techniques I have honed through the years of web application development at Skagit Valley College.
The Student Life services at Skagit Valley college offer clubs to the students. This service and activities organization requires certain paperwork for the club and organization to stay active and receive funds. The S&A Budget Request Form is a major source of paperwork for these clubs. I have been tasked to create an online form to replace the paper trail for this subject. The forms are very complex with a lot of required information and many dynamically generated fields. This lead to some very complicated problems to solve using my test driven development techniques.
One such problem arises when the users choses “Add another item” to their budget request. I must then adjust the client and server side validation to include the new item, and adjust the balance to reflect the new fields. The client side validation is using JavaScript, but the server side validation is using the ancient language of classic asp also known as vbscript. This is a challenging situation, and I responded with some innovative solutions.
On the client side, adding new rows to the table of “Justification for Budget Request” can be a simple javascript (JQuery) code:
$("#addline_budget").on("click", function(){ // this sets the event handler to capture button press
var new_justification_budget_item_count = Number($("#justification_budget_item_count").val()) + 1; // this keeps track of how many rows are in the table.
$("#addline_budget").closest('tr').prev().after("< tr>< td> my new row< /td>< /tr>");// this will add a new row to the table.
This form has some pre existing conditions that I must work with, for example the system to keep track of what fields are required for the client side validation uses a hidden field with the names of the required field. This actually makes it a little easier to add dynamic validation by simply adding the name of the field into the “required” list.
Due to my years of experience designing custom content management systems, I have been tasked with creating a plug in to the CMS at Skagit Valley College that will allow staff to administer their respective home page image sliders via a web based admin control panel. Features include list of slides, ability to upload new slides, delete slides, arrange the sequence of the slides, and control the display of the slides. The slides are live at www.skagit.edu
The users will also have the ability to administer home page banners. Features include list of banners, ability to upload new banners, assign banner to homepage, delete banners.
The purpose of this project is to reduce webmaster workload by allowing staff to admin their respective home page sliders and banners. I will be taking on the role of Senior Developer for this project, and will perform the duties of all roles including : Information Architect, User Experience Designer, User Interface Designer, Web Application Developer, SQL Database Administration.
I begin with the I/A documentation, the key to every successful project. After creating the Creative Brief, and clearly stating the objectives, purpose, target audience and timeline for the project, I then create the Flowcharts, Wireframes and User Stories.
With all the proper documentation in place, I have a clear project scope and will begin the design, develop and deployment by using my project management cloud.
From the screenshot you can see the hand written notes from meeting with the client, and the task lists that I created for the project. Each task list is filled with the tasks that I need to get done, and notes about each topic. It really helps keep me on track and manage the progress for the project.
I am going to develop an object oriented api for this project, with the application programming interface expressed in javascript and vbscript.
The api to handle the upload of slides will be interesting, since there isn’t a build in method for capturing the form upload data. We are using a third party library to handle the upload, and I haven’t even seen it yet.
I have the list of slides layout in a table, since its the perfect use of tablular data. The list is generated dynamically and injected into the dom via a call to the api. This has the effect of negating my events that I place on the image to have a mouseover thumbnail preview. I need to use the doc delegate that I deved into in a previous article.
Im going to delegate the event to my slides layout table, and then apply it to any td element with the class of “previewzone”. So lets slap it on there and see if it works…
One of my first jobs when helping SVC move from paper to digital workflow was to create a way for students to apply for graduation. This is a significant achievement in for Skagit Valley College because because these paper forms have been used by every graduating student since 1926!
Paper Graduation Application Form
The process toward the end result would not be as effective if I didn’t use my project management cloud to outline the project, make task lists and keep track of progress. The following would be a sample of the task lists I created for this project…
Meet with client and get project scope.
Create all the I/A Design documents including project brief, user case studies, flowcharts and wireframes.
Obtain approval of designs from supervisors and clients.
Develop the application in an Agile Test Driven Development Environment using the Model View Controller programming technique.
Run user tests and edge case scenarios.
Deploy application in student toolbox.
While developing the Diploma and Document Application Form I have come up with an algorithm to plug into any form or content that will transform it into a paperless web application with the following features:
To a developers point of view the best thing is Automation!
Content organized and displayed to the user in an easy to navigate style.
Client side validation for form elements when and where needed.
Form summary and easy ability to make changes before submit.
Takes care of form data submission using Ajax to hand the data on a silver platter to any api.
Here are some screenshots during development when I plug in my css styles library and call a few custom styles.
Screen shots of the diploma application with styles modified by plugging in my 3dw styles library.
Here are some screenshots of the finished product using styles provided by the marketing department.
