Software Programming in IPT using a Simplified AJAX Architecture. 9/27/2013 Dave McGuinness

Transcription

1 Software Programming in IPT using a Simplified AJAX Architecture 9/27/2013 Dave McGuinness

2 Introduction The term AJAX (Asynchronous JavaScript and XML) was coined by Jesse James Garrett (Garrett, 2005) to describe a new approach to web-based programming typified at that time by Google Maps and Google Suggest. Garrett described AJAX separately as both a technology and a framework for development of web applications. Since 2005, there have been widespread adaptations of the AJAX concept to suit a broad range of web development requirements. There has been no ratification of any agreed standard for the structure or implementation of AJAX which is not a programming language itself, but rather is an approach that allows for the use of a range of programming languages. This gives the AJAX user the flexibility to harness familiar technologies while creating a more positive experience for the user. On the other hand, the lack of agreed standards and specific definitions for AJAX, make it more difficult to place in a formal education context. Because AJAX lacks definition, it is harder to explain as content knowledge. However, because it is simplifies and enhances the experience of building webbased applications Ajax is easier to impart as process knowledge. The intended use of this technology in the classroom is to be a focus in the teaching of Information processing and Technology, a subject that combines Knowledge and Application into one assessment dimension. As such, the participation (Sfard, 1998) in the development of practical applicability based on the acquisition of an uncertain knowledge may be a beneficial outcome for students of the subject. Rationale Software programming continues as a core topic in the 2010 syllabus for Information Processing and Technology (IPT). Historically, in engaging with this topic, IPT teachers have used commercial integrated development environments (IDEs) based on desktop application technologies such as Microsoft Visual Basic or Borland (now Embarcadero) Delphi as the programming tool of choice. These technologies have presented problems for IPT teachers and students: in regard to prohibitive costs and/or complex licensing issues; in relation to conceptual complexity of the object-orientated and encapsulation model of the IDEs; and also because desktop applications are becoming increasingly less relevant to IPT students, as web-based technologies form the dominant paradigm. One approach taken by IPT teachers, to address this issue of relevance and context, has been to experiment with replacing the desktop IDE with an approach to teaching programming using HTML and the JavaScript and/or PHP languages. This has been only partially effective because, mostly, the freely available web-based languages lack an obvious cohesive structure linking client-side and server-side technologies in a way that is accessible to beginning programmers. Using the AJAX framework as a linking technology can provide articulation of the various elements of web-based programming so that they become usable in the Software Programming topic. Further, the selective application of AJAX can allow the development by high school students of the type of online applications they might expect to encounter in their own personal internet use. Materials The AJAX approach uses tools that are all free and freely available to students in Queensland schools. At some schools, including Urangan High where I teach, students are taught basic coding skills in HTML/CSS, JavaScript, PHP and SQL from Year 9 or 10 in an ICT/IPT preparation subject. Education Queensland provides all students with access to online web space with PHP and MySQL enabled on request. There are a range of freeware programmers editor software programs available that will run from a USB drive, however, I find that CodeLobster PHP Edition (CodeLobster - Handy Code Tools) has the best range of features to aid the coding process. The convenience to teachers of having all tools provided by their education department cannot be understated. This free set of tools meets the specification of frugal innovation (Tiwari & Herstatt, 2012) in that is low-cost, fault resistant and also widely available and widely used in the internet community. Thus, skills developed in this technique are transferrable and marketable. It is also important to note that the low-cost Page 1

3 nature of these technologies does not only apply to the fact that they are free, but also that set-up, maintenance costs, and management time are also minimised. Methodology A teacher attempting to implement a new approach to software programming in IPT should first have a confident grasp on the processes required. Prior to attempting to implement the AJAX model in the classroom, I first explored the concepts more deeply in an extended programming project. As a realistic test of the applicability of AJAX to the IPT classroom, I adapted an application originally built using a desktop IDE architecture into an online application built using the AJAX architecture. ES-Builder was an expert system shell application tha t I developed in the period using Borland Delphi as the programming language. This application is familiar to IPT teachers as it has widespread use in Queensland IPT classrooms. The proof of concept in this project was first to develop the web-based version of ES-Builder to equal and possibly enhance the experience of using the desktop application. This project was successfully completed in September 2012 and the application is available online and is currently in use in some IPT classrooms. The experience gained in this project led to the formalising of a structured approach to teaching with AJAX in the IPT classroom. The diagram below sets out the basic relationships in this structure. For Ajax to be accessible to students, more clarification of these concepts is required. Intending students should already be familiar with the concept of linking DOM events to JavaScript functions and should be able to diagram the process and implement this in code. Page 2

4 This diagram illustrates the simplicity of this adapted approach: 1. All visual user interface components are structured in HTML as DOM elements and styled using CSS style sheets. 2. The link between the DOM elements and the JavaScript code is via the handling of DOM Events (in this example the onchange event). The event-handler in the HTML code is always linked to one or more JavaScript functions stored in a separate file. 3. The JavaScript function accesses data stored on the web server via an AJAX request. 4. The AJAX Request function (encapsulated in prototyoe.js calls a PHP script. 5. The PHP script connects to the MySQL database and runs SQL queries to access the required data. 6. The response from the PHP script is returned to the original JavaScript function as plain text. 7. The onsuccess part of the function interprets the response text and acts on the result, changing the content of the original HTML document. The AJAX Request can be easily abstracted into that structure by using the Prototype (Prototype Core Team) code library which simplifies the server call to: var objrequest = new Ajax.Request(strUrl, objoptions); This function call can them be included in a consistent function structure that includes all the required parts to complete the work needed. This basic function structure (as shown in the next diagram) can then be adapted and re-used as many times as necessary to complete all the functions required for the application. Page 3

5 The code sample shows how sound coding practice can be used to refine and communicate the process. A consistent naming scheme for identifiers is used to tie the elements of the function together and keep it simple. For example, the PHP script that is called from the function is given the same name as the function. This assists students in tracking which parts go where. Maintaining a consistent naming scheme for DOM objects, JavaScript variables, PHP variables and SQL column names also will help students to make the required links to make it all work. Reflection In the classroom, this new approach to teaching students about developing online software applications has worked well. There was the usual take up time as students acquainted themselves with the structures and the initial stream of debugging required as processes are worked through. Once students were able to have their first successes with the AJAX architecture, it became easier for them to transfer this skill on to the next problem, and the next. Where, generally, students can be shown a programming structure or concept, they may be able to sometimes repeat it successfully to solve a similar problem. In this approach, all problems become very similar, thus it is easier for students to transfer their knowledge to the new problem. Also, because the overall bigger picture is less complex than a desktop IDE, and the online environment is more familiar, students appear less threatened by the apparent complexity of the work. Conclusions This simplified AJAX framework has the potential to provide IPT students with marketable skills while have sufficient depth and complexity to allow the demonstration of very high levels of achievement in the Analysis and Synthesis dimension of the IPT assessment criteria as well as the Knowledge And Application dimension. Delivered in the right way and in the appropriate context, students should feel empowered to enhance their programming skills while producing software constructions relevant to the Information Technology industry of today. Recommendations While there is still demand for the development of desktop applications, the work is quickly leaving this domain as everything moves into the Browser. Indeed, Google is promoting an operating system that is delivered solely from within the browser. To keep IPT relevant in the 2010s and beyond, IPT teachers need to be moving away from VB, C++ and Delphi and engaging with newer web-based technologies for teaching software programming. AJAX is an approach that should be given due consideration as a real alternative. However, there are no shortcuts for teachers in moving to this free and open architecture, as, in all aspects of ICT education, the teacher must know their topic well before taking it into the classroom. Bibliography CodeLobster - Handy Code Tools. (n.d.). Retrieved August 11, 2012, from Garrett, J. J. (2005, February 18). Ajax: A New Approach to Web Applications. Retrieved August 28, 2012, from Adaptive Path: McGoo Software. (2012, September 2). Retrieved from ES-Builder Web: Prototype Core Team. (n.d.). Retrieved August 8, 2012, from Prototype Javascript Framework: Page 4

6 Sfard, A. (1998, March). On Two Metaphors for Learning and the Dangers of Choosing Just One. Educational Researcher, 27(2), Tiwari, R., & Herstatt, C. (2012). Assessing India's lead market potential for cost-effective innovations. Journal of Indian Business Research, 4(2), Page 5