Presentation
Download
Report
Transcript Presentation
Presentation
CDnow
Project adviser:
Prof. Michel Buffa
Project members:
Alex, Sébastien, Nicolas,
Adriaan, Jörn, Thomas
Agenda
Introduction
Demo
Project cut in 2 parts
1. Business logic & Presentation layer
based on JSP/Servlets & XML/XSL
German Teams Work
2. Backend Work
all Database Management
French Teams Work
Outlook
What is the project about
Testing new technologies
Make a CDnow.com clone
Implementing possibility to download
MP3´s via this page
Thinking of extensions
Structure of Project „CD-Now“
German Side
French Side
Web Session +
interactive Logic Database Logic
Shopping Chart
Stored whithin the Session
JSP +
Web server
Pics +
MP3
Form Request
XML + XSLT
Website
In
Browser
Load on Demand
JDBC
Location Info
DB
FreeDB
Once imported
Used if enabled
Cookies
Agenda
Introduction
Demo
Project cut in 2 parts
1. Business logic & Presentation layer
based on JSP/Servlets & XML/XSL
German Teams Work
2. Backend Work
all Database Management
French Teams Work
Outlook
Demo
www.cdnow.com
CDNow-Clone
Agenda
Introduction
Demo
Project cut in 2 parts
1. Business logic & Presentation layer
based on JSP/Servlets & XML/XSL
German Teams Work
2. Backend Work
all Database Management
French Teams Work
Outlook
JSP
JSP
About JSP
Key feature for the project
Java Beans
How did we use JSP for our project?
Parameter handling
Why did we only use one JSP Page?
Session management
About JSP (Example-code)
<html>
<head>
<title>
JSP Example 2
</title>
</head>
<body>
<h1>JSP Example 2 at <%= new java.util.Date() %> o‘clock</h1>
<%
String sn1;
String sn2;
int n1,n2;
sn1 = request.getParameter("n1");
sn2 = request.getParameter("n2");
n1 = Integer.parseInt(sn1);
n2 = Integer.parseInt(sn2);
out.println("The numbers were " + sn1 + " and " + sn2);
out.println("<br>");
out.println("The sum is " + (n1+n2));
%>
</body>
</html>
Key feature for the project
Integration with the Java platform
JSP is a key component of the Java
platform
JAVA is the native scripting language
We have all the advantages of JAVA:
Portable
Platformindependant
JDBC for communication with a wide variety
of databases
...
Java Beans and JSP
Small finished program components
Re-usable
Contains the business and data logic for
an application
Through JSP easily integrated in a web
application
How did we use JSP for our
project?
We only have one JSP-page:
<jsp:useBean id="pg" class="cdnow.Core"/>
<jsp:useBean id="param"
class="cdnow.Parameter"/>
<jsp:setProperty name="param" property="*" />
<%=
pg.generatePage(param)
%>
Parameter handling
Example-request:
http://miageprojet.unice.fr:8085/cdnow/index.jsp?
op=search&opt=artist&artist=jackson
JAVABean Parameter
public class Parameter {
private String op;
private String opt;
...
public void setOp (String x) {
op = x;
}
...
}
Why did we only use one JSP
Page?
Just one service point
Easy to maintain
All other code is pure java
Easier to test
Can be developed using any java
programming environment (like e.g.
JBuilder)
Session management
JSP-server automatically creates
important objects (implicit objects)
We outreach the implicit object session to
the bean Core
<% pg.setSession(session) %>
Object session shares information for one
user across multiple pages while visiting
the web site
XML & XSL
XML & XSL
Why we used XML
What is XML ?
What is XSL ?
How we used it?
What is XML
XML (Extensible Markup Language)
User extensible markup language
Domain-specific markup languages
Seperation of contents from presentation
Human-readable
Well-formed
XML-Tree-structure / Validation
Easy to access / rearrange
Schemas
DTD (Document Type Definition)
XML-Tree-Example
XML-File
<document>
<publication>
<author>
<firstname>Peter</firstname>
<lastname>Mustermann</lastname>
<adress>
<street>L 15,16</street>
<postalcode>68161</postalcode>
<city>Mannheim</city>
</adress>
</author>
<abstract>… </abstract>
</publication>
</document>
XML-Tree
document
publication
abstract
firstname
street
author
lastname
city
adress
postalcode
Album-Search (XML)
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="cd-now-stylesheet.xsl"?>
<album_search parameter="d=a&f=f&s=d&“ loggedIn="Yes“>
<result>
<album>
<title>Titel of album 1</title>
<interpret>Interpret of album 1</interpret>
<genre>Genre of album 1</genre>
</album>
<album>
<title>Titel of album 2</title>
<interpret>Interpret of album 2</interpret>
<genre>Genre of album 2</genre>
</album>
</result>
</album_search>
What is XSL
XSL (Extensible Stylesheet Language)
Used to present the data of an XML-file
Consists of 3 parts:
XSLT (XSL Transformation)
XPath (Expression Language to access parts of the XML doc)
XSL FO (XSL Formatting Objects)
Different kind of output
html
pdf
txt
Can contain several scripts
Javascript
Perlscript
Template Album-Search
<xsl:template match="album_search">
<h1>Album - Search - Result</h1>
<xsl:if test="result">
…
<th>number:</th><th align="left">title:</th><th align="left">interpret:</th><th align="left">genre:</th>
…
<xsl:for-each select="//album">
…
<td align="center"><b><xsl:value-of select="position()"/></b></td>
…
<td><A>
<xsl:attribute name="href">
?<xsl:value-of select="//@parameter"/>
op=search&opt=interpret&interpret=
<xsl:value-of select="interpret"/>
</xsl:attribute>
<xsl:value-of select="interpret"/></A></td>
</xsl:for-each>
</xsl:if>
<xsl:if test="no_result">
<h4>No matching files for "<font color="#FF0000"><xsl:value-of select="//@album"/></font>" were
found!
<br/><br/>Please try searching again!</h4><br/><br/>
<input type="button" name="New Search" value="New Search" onClick="history.back()"/>
</xsl:if>
</xsl:template>
Login-Check
<xsl:template name="logincheck">
<xsl:if test="//@loggedIn='Yes'">
<form action="?" method="get">
<input type="hidden" name="op" value="logout"/>
<div align="center"><input type="submit" value="logout"/></div>
</form>
</xsl:if>
<xsl:if test="//@loggedIn='No'">
<form action="?" method="get">
<input type="hidden" name="op" value="register"/>
<div align="center"><input type="submit„ value="Register"/></div>
</form>
</xsl:if>
</xsl:template>
How did we use it?
1. Client sends a request to the Servlet
2. JSP generates an XML-File
3. An universal XSL-Stylesheet matches
the generated XML-File
4. Both are parsed online with Xalan
5. An HTML-File is send back to the
Browser
Development Steps
What features should be implemented
For each site/feature :
DTD (define tags and attributes)
Defined Tags & Attributes
Tags
Attributes
Classic_search
Interpret_search
Album_search
Track_search
User_profile
Message
loginCheck
Welcome
News
Download
buy
loggedIn
Parameter
Development Steps
What sites should be implemented
For each function :
DTD (define tags and attributes)
XML
XSL-template
Main design of the webpage
Main Page
<xsl:template match="/">
<html>
<head>
<title>Shop</title>
</head>
<body>
<…>
Screenshot Mainframe
Album-Search
Scenario
A typical first visit to „CD-Now“
shopping chart
UserID
Prefs.
From now on all
XML is parsed to HTML
XSLT
usingan
an personal
default XSLT
Server
Store UserID
creates session
in session using
Store
preferences
in
session
and shopping chart
JSP +
Web server
User
browses
the content
of CD-Now
User
User
decides
wants
tototo
Subscribe
buy
to CD-Now
User
decides
set
his
preferences
Open
Location
in title
Browser
and
and
download
provides
a
the
music
desired
and provides the desired information
information
User gets the desired page
Usergets
getsthe
confirmation
User
welcome page
on success
User is allowed do
download th File
Load on Demand
Website
In
Browser
User may store
File on Disk
UserID stored in Cookie
Cookies
HD
UserID
Pics +
MP3
Bill
the Userfrom
and DB
Get
information
Store
Create
preferences
an
Useraccount
DB
get in
theXML
location
ofinthe
format
In DB
desired
File
DB
User
Prefs.
Bill
A typical follow up visit to „CD-Now“
shopping chart
UserID
Prefs.
User authentificates
Browser
User
buys UserID
himself
by sends
password
to Webserver
an MP3
Website
In
Browser
If no active Session is found
An new one is created, reading
preferences from the DB
JSP +
Web server
User
is gets
requested
User
personal
to
authentificate
welcome
message
User
is notified
by
password
on success
User may now
download the
desired File
Cookies
HD
UserID
Pics +
MP3
Billing detail are
stored in the DB
DB
User
Prefs.
Bill
Agenda
Introduction
Demo
Project cut in 2 parts
1. Business logic & Presentation layer
based on JSP/Servlets & XML/XSL
German Teams Work
2. Backend Work
all Database Management
French Teams Work
Outlook
MySQL
The RDBMS we used : MySQL
Free, rather powerful RDBMS.
Easy to set up.
Numerous addons available:
Administration
PHPMyAdmin
through
a
web
front-end
:
JDBC drivers available, direct support from servlet
runners like Resin, Tomcat, etc…
PHPMyAdmin view
The data model in the MUSIC
database
4 main tables : ALBUM, CUSTOMER,
ORDERS, TRACK
ALBUM and TRACK data have been imported from
a popular CD content database available
on the Internet : FREEDB (www.freedb.org)
CUSTOMER and ORDER are updated on the fly
as internet users register and order goods from
our e-commerce site
Example : ALBUM Table
FreeDB
The FreeDB database (1)
Each audio CD holds a unique DiscId
A few years ago, the CDDB popular
database was created (www.cddb.com),
mainly for ripping audio CDs to mp3
format with the right ID3 tags
These tags correspond to the artist name, genre, album title,
track titles and so on…
The primary key for getting the right data is the DiscId
Example of CDDB use : Winamp
The FreeDB database (2)
Unfortunately, CDDB become commercial
in 1999, free access was closed.
Here came FreeDB, the public domain
clone of CDDB. Holds now about 400.000
albums !!!
Does not rely on a relational database
Very raw format (dirs and files)
Not very well documented
Example of a FreeDB file
# xmcd CD database file
#
# Track frame offsets:
#
150
#
23217
#
43691
#
66120
#
83075
#
102804
#
120729
#
140522
#
161712
#
177744
#
198020
#
221391
#
240078
#
# Disc length: 3525 seconds
#
# Revision: 0
# Processed by: cddbd v1.4b41PL1 Copyright (c) Steve
Scherf et al.
# Submitted via: CD2WAV32(EN) R3.17
#
DISCID=aa0dc30d
DTITLE=SPITZ / RECYCLE Greatest Hits of SPITZ
DYEAR=1990
DGENRE=MISC
TTITLE0=Kimi ga omoide ni naru maeni
TTITLE1=Sora mo toberu hazu
TTITLE2=Aoi kuruma
TTITLE3=Spider
TTITLE4=Robinson
TTITLE5=Namida ga kirari
TTITLE6=Cherry
TTITLE7=Nagisa
TTITLE8=Scarlet
TTITLE9=Yume ja nai
TTITLE10=Unmei no hito
TTITLE11=Tsumetai hoho
TTITLE12=Kaede
EXTD=
EXTT0=
EXTT1=
EXTT2=
EXTT3=
EXTT4=
EXTT5=
EXTT6=
EXTT7=
EXTT8=
EXTT9=
EXTT10=
EXTT11=
EXTT12=
PLAYORDER=
Problems encountered with
FreeDB
We planned first to use a freeDB server.
We tried to set up a FreeDB server on the miageproject
machine, without success.
We then thought about using directly one of the numerous
freeDB servers
Problem : where to get the DiscId from ?
Solution :
We used a PHP script to import the FreeDB content to our
MySQL database.
Many advantages : indexing, complex requests now possible,
import script can be run remotely (in order to update the
ALBUM/TRACK content).
JDBC
Bridge java/MySQL
Made through the JDBC API.
Servlets are run by the Resin/Caucho software.
Free for non commercial use, better than Tomcat (hot recompilation really
works)
Easy to set up.
Java code:
Class.forName("com.caucho.jdbc.mysql.Driver");
String url = "jdbc:mysql-caucho://miageprojet:8085/music";
connection = DriverManager.getConnection(url,"music","wolfgang");
Bridge with the German team (1)
We wrote all the classes/methods that
deal with the RDBMS.
Encapsulation of all the requests.
Kind of “black box“ made of 15 classes
The German side corresponds only through 2 classes
GetFromDatabase
WriteToDatabase
Bridge with the German team (2)
The parameters classes
To get information from the DB :
SearchParameter classes :
SearchParameterAlbum
SearchParameterCustomer
SearchParameterOrders
SearchParameterTrack
To write / modify the DB :
ParametersToWrite classes :
…
Bridge with the German team (3)
GetFromDatabase class
Constructor gets SearchParameter object
GetFromDatabase gfdb=new GetFromDatabase(SearchParameter);
Request started by :
SearchParameter[ ][ ] sp = gfdb.getResult();
getResult() :
Gets SearchParameters values
Makes the corresponding sql query
Connects the database
Bridge with the German team (4)
WriteToDatabase class
Constructor gets a ParametersToWrite object and the
needed operation
WriteToDatabase wtdb = new WriteToDatabase(
3 methods inside :
insert()
update()
delete()
parameterToWrite ,
WriteToDatabase.UPDATE );
Methods actions :
Get ParametersToWrite values
Make the corresponding sql operation
Connect the database and perform the operation
Bridge with the German team (5)
Looks simple ?
However, fine tuning has been necessary
Limit the amount of data transferred when a request produces a lot
of hits
Search web interface gets complex as the data model grew,
very complex requests need a sophisticated implementation…
JDBC/SQL is hard to debug (no typing, no checks
at compilation time…)
Better solution exists . SQL/J, java Blend, EJBs…
Agenda
Introduction
Demo
Project cut in 2 parts
1. Business logic & Presentation layer
based on JSP/Servlets & XML/XSL
German Teams Work
2. Backend Work
all Database Management
French Teams Work
Outlook
Outlook
Not all functionality implemented yet
Caddy
Billing
…
Automatic CD storing
Security
Advanced and sophisticated queries
Thank you for your
attention.