slick r : A Capstone Web Development Project Using Databases, ASP.NET, Web Services, and AJAX

1. slickr : A Capstone Web Development Project Using Databases, ASP.NET, Web Services, and AJAX Mark Frydenberg Computer Information Systems Dept. Bentley College, Waltham, MA mfrydenberg@bentley.edu

2. “The teaching of this important technology, web services, has received little attention in the common IS pedagogy journals.” • Alan Peslak, ISECON 2006

3. CS 380 – Multi-Tier Application Development Overview • ASP.NET / C# • Visual Studio 2005 • SQL Server Database • Client / Server Programming • Web Services • ASP.NET AJAX • Course goal is to develop individual competency in creating web-based applications using a contemporary integrated, object-oriented development environment. • Prerequisites • CS 150 [Prog. with Java] • CS 180 [Data Reporting and Retrieval]

4. slickr Alpha • Create albums and upload photos into specific albums • Associate a description and one or more user-specified tags with each photo • Search albums for photos with specific tags, and display matching photos • Edit and delete album or tag names, and photo descriptions

6. Database Design

7. slickr Alpha Demo

8. slickr Alpha Goals and Observations Goals Observations • Gain experience with both Drag n’ Drop database controls as well as writing code to access databases • Design queries so that they can be reused later • Understand relationships between object model (class diagram) and database model (database diagram) • Most students hadn’t seen stored procedures before • Some confusion between object modeling and database representation • General: Where does it go?

9. slickr Web Services Enhancements • Create a web service with methods to expose photos • Rewrite search and display pages to invoke web methods • Search and display photos from a classmate’s project by invoking the classmate’s web service methods

10. slickr Alpha and Web Services Demo

11. slickrWeb Services Goals and Observations Goals Observations • Students act as both web service producers and consumers • Understand the need for standard APIs. • Realize the important role that web services play in making data available for sharing between applications, and the role of XML as a standard for representing that data. • Repackage and Reuse: that’s why design is important!

12. ASP.NET AJAX

13. Why AJAX? • Improved efficiency by increased browser processing • Familiar UI elements such as progress indicators, tooltips, and pop-up windows. • Partial-page updates • Integration with ASP.NET application services for forms authentication and user profiles. • Integration of data through calls to Web services. • Simple customization of server controls to include client capabilities • Supported by many common browsers

14. Using ASP.NET AJAX • ScriptManager • manages all of the basic ASP.NET AJAX components on the page. • UpdatePanel • contains content to updated without refreshing the entire page • Many AJAX controls receive updated data from Web Services • Rich User Experience • Extenders add AJAX functionality to basic ASP.NET controls

15. slickr AJAX Enhancements • Slide Show • Ratings control • ResizableControlExtender • CascadingDropDown for drill down queries from albums to pictures • Tag Cloud • Other ideas?

16. slickr Slide Show <asp:ScriptManagerid="ScriptManager1"runat="server"EnablePartialRendering="true"> </asp:ScriptManager> <asp:UpdatePanelid="UpdatePanel1"runat="server"> <ContentTemplate> <asp:Imageid="Image1"runat="server" ImageUrl="~/data/logo.jpg“ /> <br/> <asp:Buttonid="Button1"onclick="Button1_Click“ runat="server"Text="Start“ /> <asp:Timerid="Timer1"runat="server“Interval="2000“ OnTick="Timer1_Tick“enabled="false“ /> </ContentTemplate> </asp:UpdatePanel>

17. slickr Slide Show public partial class Slideshow : System.Web.UI.Page { public SlickrWS.SlickrWebServicews = new SlickrWS.SlickrWebService(); public SlickrWS.SlickrPhoto[] photos; protected void Page_Load(object sender, EventArgs e) { photos = ws.GetPictures(); Image1.ImageUrl = GetRandomPicture (); } protected void Timer1_Tick(object sender, EventArgs e) { Image1.ImageUrl = GetPhoto(); } protected void Button1_Click(object sender, EventArgs e) { if(Timer1.Enabled) { Timer1.Enabled = false; Button1.Text = "Start"; } else { Timer1.Enabled = true; Button1.Text = "Stop"; } } private string GetRandomPicture() { Random r = new Random(); int n = r.Next(0,photos.Length - 1); return photos[n].Url; } }

18. slickr AJAX Demo

19. slickr AJAX Goals and Observations Goals Observations • Introduce asynchronous architecture found in many current web applications • Create web applications with more involved user interfaces • Program against AJAX object model/framework • Use at least one AJAX control not demo’d in class • New Motivation for Teaching Web Services • ASP.NET AJAX hides the details of how dynamic behavior “works”

20. [This project] required me to think not only about the coding aspect, but the design of web applications even more. Learning which and how things work together, and performance issues were all important. When I visit a site such as Amazon.com now, I know that millions of users are connecting to their Web Services, and pulling data out of their public databases and into their own applications. Now I have a better sense of the some of the components and related issues that must be considered when building large-scale web-based business applications.

21. Conclusion Teaching web services Teaching AJAX • provides insight into reusability of software modules • underscores the importance of APIs and good software design • offers a concrete example of distributed system architectures • Encourages abstraction and proper object-oriented design. • Introduces asynchronous web architecture • Create “rich” web applications • ASP.NET AJAX provides a new outlet for web services, as several of the pre-defined controls in its toolkit accept input from web service methods.

22. Questions? Mark Frydenberg mfrydenberg@bentley.edu