powerpoint slides (ppt)
TRANSCRIPT
slickr : A Capstone Web Development Project
Using Databases, ASP.NET, Web Services, and AJAX
Mark Frydenberg
Computer Information Systems Dept. Bentley College, Waltham, MA
“The teaching of this important technology, web services, has received little attention in the common IS pedagogy journals.” Alan Peslak, ISECON 2006
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]
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
Database Design
slickr Alpha Demo
slickr Alpha Goals and Observations
GoalsObservations
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?
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
slickr Alpha and Web Services Demo
slickr Web Services Goals and Observations
GoalsObservations
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!
ASP.NET AJAX
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
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
slickr AJAX Enhancements Slide Show Ratings control ResizableControlExtender CascadingDropDown for drill down queries
from albums to pictures Tag Cloud Other ideas?
slickr Slide Show<asp:ScriptManager id="ScriptManager1" runat="server" EnablePartialRendering="true">
</asp:ScriptManager>
<asp:UpdatePanel id="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Image id="Image1"runat="server" ImageUrl="~/data/logo.jpg“ />
<br /> <asp:Button id="Button1" onclick="Button1_Click“ runat="server" Text="Start“ />
<asp:Timer id="Timer1" runat="server“ Interval="2000“ OnTick="Timer1_Tick“ enabled="false“ />
</ContentTemplate></asp:UpdatePanel>
slickr Slide Showpublic partial class Slideshow :
System.Web.UI.Page
{
public SlickrWS.SlickrWebService ws = 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;
}
}
slickr AJAX Demo
slickr AJAX Goals and Observations
GoalsObservations
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”
[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.
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.
