Teaching Web Application Skills Using Web Server ...

Teaching Web Application Skills Using Web Server Extensions In a General Education Course G. Anderson A.O. Eyitayo Department of Computer Science University of Botswana Private Bag UB 00704 Gaborone, Botswana {andersong,eyitayo}@mopipi.ub.bw Abstract In this paper we discuss an approach used in teaching a Web Application Skills General Education course. The approach involved using Microsoft FrontPage Server Extensions (FPSE) installed on a Web server, which permitted students to develop relatively advanced Web sites without being involved in programming issues. Examples are given of the sort of Web site features that can be incorporated into lab exercises and projects using our approach. With our approach, there is the possibility for students to focus on artistic design issues rather than technical issues. We describe some of the technical challenges encountered, including configuration of the Web server and network components. In addition to using FPSE for teaching Web development courses, our recommendations include using FPSE as infrastructure for academic staff and student Web sites. Key Words: Digital Scholarship Infrastructure and Resources; Digital Scholarship Education, Training and Support; Challenges and Issues of Digital Scholarship

1. INTRODUCTION The World Wide Web (WWW or Web) could be regarded as the most important Information Technology (IT) revolution of the 1990s (Hong, 1997). It has penetrated all aspects of society. A huge percentage of organizations (both commercial and noncommercial) with enough resources have Web sites. First impressions are very important and the impression one gets of an organization by visiting its Web site could last a long time. Web sites have evolved from containing static Web pages that contain content that does not change from user to user or over the course of a user’s interaction with the Web site, to dynamic applications with Web pages containing content that changes each time they are accessed, depending on certain factors. With the proliferation of the Web, it is important for all students in a university to have an understanding of the way it works and how to develop Web sites. Students studying Computer Science or Information Systems get to learn advanced technical details about how to build Web sites and Web applications. These courses usually involve a significant amount of programming using Web scripting languages like JavaScript and Web application frameworks like PHP. General Education Courses are meant to provide introductory knowledge about an area outside of a student’s major so it makes sense that students not majoring in Computer Science or Information Systems do a General Education course on Web skills. Such a course should teach the

basics of Web applications without going into advanced details, to students who would not normally learn such material in their programmes. However, without advanced knowledge, students are usually limited in the type of Web sites they can develop in the lab. In this paper we make a contribution to the teaching of Web application General Education courses by reporting on the use of a Web server add-on package: Microsoft FrontPage Server Extensions (FPSE) in teaching a General Education course in the University of Botswana: Web Application Skills (taught in Semester 1 2006/2007). This package permits fairly advanced dynamic Web sites to be developed in a WYSIWYG (What You See Is What You Get) manner without resorting to programming. Students are thus able to get a considerable amount of hands-on experience. We also suggest using FPSE for another use: to rapidly put up Web sites such as university student or staff Web sites. This paper is organized as follows: Section 2 discusses related work, Section 3 discusses the Web development curriculum as used in the Web Application Skills course and compares to those used in another course in the University of Botswana, Section 4 discusses FPSE and the sort of Web development that can be done using it, Section 5 discusses lessons learned, Section 6 discusses technical issues associated with installing and using FPSE and section 7 has the conclusion. 2. RELATED WORK Developing Web sites involves producing files (Web pages) located on Web servers that are downloaded by web browsers. These files contain text to be displayed as well as markup tags that dictate how various Web page components are displayed and interact with other resources. There are various frameworks (e.g. PHP (The PHP Group, 2007), Zope (Zope Corporation, 2007), ASP.NET (Microsoft Corporation, 2007), JSP (Sun Microsystems, 2007), ColdFusion (Adobe Systems Incorporated, 2007)) and tools available which make the process of creating Web sites easy. Some tools generate Web pages with markup automatically in a WYSIWYG manner, so the developer does not need to know the syntax of the markup. Frameworks provide various programming objects making the development of dynamic Web sites easy. Various university Web development courses select appropriate tools and frameworks so that students can focus on appropriate parts of the process (Adams, 2004). Adams (2004) used Zope, an open-source Content Management System, when teaching Web development in his Distributed Computing course in Grand Valley State University, USA. He chose Zope because his students were Information Systems students and he did not want them bogged down in programmatic details. His students could therefore create dynamic Web sites without actually writing programs. Dynamic Web sites are those where the content of the Web pages displayed in a Web browser is dependent on certain factors which change according to time, or the person visiting them, for example. The Zope development interface is Web-based so students could update their Web sites from anywhere in the Internet. However, they had to learn the language of Zope, which involves using a large number of complex tags in Web pages. Our approach using FPSE does not require knowledge of any tagging language. Wang (2006) designed a Web development course for Computer Science students. He discusses how he took the audience into account in his design. Our approach is

different because it is catered for a different type of audience: students not required to have in-depth knowledge of programming Web applications. Adams (2007) discusses a new approach to teaching Web development targeted at Information Systems students. He notes that the structure of the course, including topics covered and tools used depends on (1) Instructor Knowledge, (2) Student Interest, (3) Needs of Industry, (4) Availability of a Development Environment (labs and servers), and (5) Availability of Instructional Resources (e.g. books, tutorials, lab materials, etc.). His approach involves integrating various types of features into a Web application as they are taught. Our approach is different because it focuses on use of a software tool enabling certain topics to be covered practically, rather than on what sort of project to use as an example. Higgs and Sabin (2005) required that their students create online portfolios in their introductory computing course. They picked appropriate software for the creation of the portfolio, which included FPSE. The reason given was that their students were not involved in programming and needed an easy way to create their portfolios. Advantages of using FPSE given included the following features: hit counters (keeping track of the number of times a web page is accessed), data collection (via forms), email processing, database processing (reading from and writing to databases), automatic navigation updates and easy configuration and modification of the overall Web site navigation scheme. Our approach is different because the focus is on teaching Web development, while the approach in (Higgs and Sabin, 2005) is focused on creating online portfolios, and covers just enough to accomplish that task. Taylor et al. (2005) used a Web development tool in teaching their second year Web development course to IT students. The name of the tool was not give but it was a WYSIWYG tool. Their goal was to incorporate technical as well as artistic components into their course and they avoided much technical content (e.g. programming) by using such a tool. Our approach tries to make the most of limited lab time by allowing students to carry out on dynamic Web site creation. The artistic component is not focused on as much as in (Taylor et al., 2005). Very importantly also, our approach involves the use of a Web server extension (FPSE), whereas none was used by Taylor et al, meaning their students would still struggle if they attempted to develop dynamic Web sites. 3. WEB DEVELOPMENT CURRICULUM Web Application Skills is a General Education course. Therefore Computer Science and Information Systems students are not allowed to register for the course, since they have other courses in their programmes that cover WWW concepts and applications. Web Application Skills is a 2 credit course and students attend a 1 hour lecture and a 2 hour lab every week. Students learn about how the World Wide Web works and basics of how to develop Web sites. Students have all passed the prerequisite course: Computing and Information Skills Fundamentals, where they learnt computer skills such as File Management, Word Processing, Spreadsheets, Databases, Web Browsing, and Operating Systems. Web Application Skills includes the following topics: The Internet, intranet and Web technologies; Systems development and the Web application development cycle;

Web-Based Systems concepts, structure and applications; Web application development tools; HTML components and syntax; Web planning, design, and implementation using programmatic (e.g. scripting) and non-programmatic approaches (e.g. WYSIWYG tools); Use of tables and pictures; Validation and verification, error checking; Qualities of a good web site; Static versus Dynamic web concepts; Practical Web application development exercises involving programmatic and non-programmatic approaches. The Department of Computer Science offers another course for Computer Science and Information Systems students: Web Technology and Applications (Department of Computer Science, 2005). This is a 3 credit course, with students attending 2 one-hour lectures and a 2 hour lab every week. The topics covered are similar to Web Application Skills, but in more depth. Also, all students would have done 2 programming courses before registering for it, allowing for more advanced practical exercises and projects, usually involving programming. Given the limited lecture and lab time and the student background for Web Application Skills, it is important to have appropriate software for ease of learning of Web development concepts that will also allow advanced practical topics like dynamic Web site development to be investigated. We made this possible by using FPSE. 4. WEB DEVELOPMENT WITH FPSE 4.1. FPSE Functionality FrontPage Server Extensions (FPSE) is a Web server software extension that enables Microsoft FrontPage to communicate with Web servers and provide additional Web site functionality. FPSE has to be installed on a Web server in order to be used. To take advantage of the extensions, the Web developer has to use a Microsoft Web development application such as FrontPage 2002 or better (a more recent tool from Microsoft is Microsoft Expressions Web). With this combination, Web sites are developed on the developer’s client computer and then published (copied to the Web server). FPSE enables the developer to see which files on the Web site have changed on his client and allow for selective update of the Web site, whereby only some files are copied to the Web server. Publishing is done through HTTP, the same protocol used to access Web pages, so there is no need for additional file transfer software to be installed on the Web server. FrontPage is a Web authoring application with WYSIWYG functionality. This means that Web pages can be developed without writing HTML code, the language of the World Wide Web. With FPSE, Web components are inserted into pages as they are created in FrontPage. The following Web components would normally require programming to implement but are made possible by FPSE using simple insertion into Web pages and dialog box configuration (Microsoft Corporation, 2003): • Hit Counters: This component keeps track of how many times a Web page has been accessed. • Web Search: This component creates a search engine capable of searching the Web pages in a Web site for specified text.

• • • •

•

Included Content: This component displays a graphical image or contents of a Web page in an active Web page at specified times. Link Bar: This component displays a bar of hyperlinks pointing to pages in the active Web site or outside. Table of Contents: This component displays a table of contents of a Web site, generated automatically. Top 10 List: This component generates a top 10 list for a Web site of one of the following: Visited Pages, Referring Domains, Referring URLs, Search Strings used in search engines to find the Web site, Visiting Users, Operating Systems used by site visitors, and Browsers used by visitors. Form Handler: Data from forms can be stored in a delimited file or sent via email. It can also be stored in a Microsoft Access database.

FPSE also provides Source Control (Shelly et al., 2002): This feature ensures that all developers in a team are using the latest version of a file on a Website; files are not incorrectly removed, deleted, or modified; and that 2 people are not editing the same file at the same time. Figure 1 is a screenshot of a Web page created using FrontPage featuring components supported by FPSE (the Link Bar and Form, for example).

Figure 1: A Web Using Frames and Including a Form Linked to a Database: FPSE Makes Creating Such Web Pages Easy

4.2. Integration into Web Application Skills curriculum Web Application Skills students used Microsoft FrontPage 2003 as their Web authoring software and IIS 6 (Internet Information Services) with FPSE installed. Table 1 shows possible Web curriculum practical components in a Web development course showing (i) coverage in a typical Computer Science Web development course using Web Technology and Applications as a point of reference (Computer Science column), (ii) coverage in a General Education course without use of FPSE (GE No FPSE column), and (iii) coverage in a General Education course using FPSE (GE FPSE column). The course this paper is reporting on belongs to the last column. Table 1: Coverage of Web Development Practical Components Ref# Practical Component Computer GE No GE Science FPSE FPSE 1 Themes 2 Text Editing 3 Tables 4 Image File Formats 5 Photo Gallery 6 Link Bars 7 Navigation Structure 8 Image Maps 9 Bookmarks 10 Frames 11 Forms: Text box, check box, list box, push buttons. 12 Database: Storing data from forms 13 Database: Displaying selected data 14 Database: Editing data in a Web page 15 SubWebs (sub-websites with independent properties e.g. security) 16 Source Control 17 Web Site Search Note that Section 4.1 lists some FPSE-enabled components that are not in the table, because they are not typically covered in web development courses. Also, topics like Link Bars and Navigation structure are covered under “GE No FPSE” but are much more powerful when using FPSE. From Table 1, one can see that with FPSE, the coverage of Web site features in a General Education Web development course is much more than without FPSE. It is even more than in a typical Computer Science Web development course. Of course, the Computer Science course involves quite a bit of programming, with more lab time, so students may understand how features like Forms work behind the scenes better. However, a typical Computer Science course would expose its students to less than 83% of what a GE course with FPSE would enable, if we were to count topics, as shown in Table 1.

4.3. Support Methods The labs using FrontPage and FPSE were supported with lecture notes and WebCT quizzes. The text used for the course [14] has lecturer resources which include readymade WebCT quiz question banks. Students were also introduced to programming using JavaScript, a client-side scripting language. Although they were General Education students, the lecturer felt it important to give students an appreciation for what programming involves. This is necessary for an appreciation of difficulty in programming and could be useful later in the students’ lives if they become managers, for example. 4.4. Other Uses Students worked on a 6 week lab project which involved creating a personal Web site for themselves. This involved use of advanced features like database access. This demonstrates that FPSE could be very useful in creating personal Web sites for students and even staff of academic departments. Such people are not professional programmers and when trying to develop their own personal Web pages, they typically do a small amount of background reading. This reading time could be spent studying the use of FrontPage or a similar tool, and FPSE. 5. TECHNICAL ISSUES The following are some of the problems we encountered in getting FrontPage Server Extensions to work. 5.1. FPSE Installation Problems The Department of Computer Science has a computer used as a Web server. This Web server computer runs the Web server software. The Web server software is responsible for responding to client computers requests by supplying them with the Web pages they are requesting. There is a problem installing FPSE on a Web server when the file storage was not located on the same computer. To deal with this problem, a dedicated computer was set up. 5.2. Web Login Problems Once we had the dedicated server with IIS and FPSE installed, we created Webs (i.e. a folder) for each student. A Web is a Web site for the student. After the main student Web folders are created, a special FPSE administration command has to be used to apply ownership rights so that each Web is associated with usernames and passwords that can be used for login and publishing (i.e. updating a Web site with Web pages and other files). We could not find documentation of this procedure on Microsoft’s or even other web sites. 5.3. Web Update Problems Students experience a problem publishing their Web sites due to a firewall blocking some of the communication between student computer in the lab and the Web server. The problem was resolved when a computer not affected by the firewall was used. With the largest Webs (those created towards the end of the lab project), the Web sites could not be updated. Students were asked to compress (zip) their Web sites and upload them into a WebCT course assignment created specially for this purpose. The lecturer then downloaded the Web sites and published them himself, so students could also access their Web sites as they normally do.

5.4. Software Compatibility Problems There are compatibility problems between the Web authoring software, the Web server software, the operating system running on the Web server computer, and FPSE. For example, the following combination causes to Web publishing error messages to be generated: FrontPage 2003, IIS 6, Windows Server 2003 SP1, and FPSE 2002. Some of these problems were solved after the course had ended by using other versions of software. 6. LESSONS LEARNED It should be noted that using a Web server and FPSE is much more powerful than using WebCT to teach Web development. WebCT has features that enable students to display Web pages in the online course for presentation purposes, but students cannot create their own database-driven, dynamic Web sites as they can with our approach. It is important to find a good practical text for use during labs. Our recommendation, though, is to develop lab exercises from scratch. We found that the lab exercises in the practical text we used were too long, so students did not have enough time to think carefully about that they were doing. Given the technical difficulties we had, it is important that IT support resources be available when attempting to use FPSE. 7. CONCLUSION Our approach of using FPSE for teaching Web Application Skill was a success. Students were able to develop Web sites with features they would not normally do using conventional approaches. FPSE offers a way for students to be introduced to Web development without the intimidating environment of the programmatic approach. The technical problems encountered were eventually addressed and we now have the knowledge to deal with such problems quickly. Problems with the structure of lab exercise can also easily be addressed, given that we now know the pace of the students; custom lab exercises can easily be created. 8. REFERENCES Adams, D.R. (2004). Teaching Web Development Using Zope. Journal of Computing Sciences in Colleges, 20(4), 63-70. Adams, D.R. (2007). Integration Early: A New Approach to Teaching Web Application Development. Journal of Computing Sciences in Colleges, 23(1), 97-104. Adobe Systems Incorporated. (2007). Adobe ColdFusion 8. Retrieved November 17th, 2007, from http://www.adobe.com/products/coldfusion/. Department of Computer Science. (2005). Department of Computer Science Handbook 2005/2006. Gaborone, Botswana: University of Botswana. Higgs, B., and Sabin, M. (2005). Towards Using Online Portfolios in Computing Courses. Proceedings of the 6th Conference on Information Technology Education (SIGITE’05), October 20-22, 2005, 323-328.

Hong, S. (1997). Teaching Web Applications Development to Information Systems Students. Proceedings of the 12th International Academy for Information Management Annual Conference, Atlanta, Georgia, December 12-14, 1997. Microsoft Corporation. (2003) Microsoft FrontPage 2003 Offline Help. Microsoft Corporation. (2007). The Official Microsoft ASP.NET 2.0 Site. Retrieved November 17, 2007, from http://www.asp.net. Shelly, G.B., Cashman, T.J., and Mick, M.L. (2002). Microsoft FrontPage 2002 Comprehensive Concepts and Techniques. Boston, MA, USA: Course Technology. Sun Microsystems. (2007). JavaServer Pages Technology. Retrieved November 17th, 2007, from http://java.sun.com/products/jsp/. Taylor, M.J., Salces, F.S., and Duffy, S.P. (2005). Teaching Web Site Design: Science or Art? Journal of Further and Higher Education. 29(4), 331-340. The PHP Group (2007). PHP: Hypertext Preprocessor. Retrieved November 17th, 2007, from http://www.php.net. Wang, S. (2006). A Practical Way to Teach Web Programming in Computer Science. Journal of Computing for Small Colleges. 22(1), 211-220. Zope Corporation (2007). Zope Community. Retrieved November 17th, 2007, from http://www.zope.org.