Modelling a web site using WebML: an example Davide Pozzi - corso di Basi di Dati 2 Politecnico di...

Modelling a web site using WebML: an example

www.boo.com

Davide Pozzi - corso di Basi di Dati 2

Politecnico di Milano

Facoltà di Ingegneria di Como

Objectives of this work

• Analysis of an existing web site using WebML

• This analisys does not want to be exhaustive, only some parts of the site will be examined

Description

• BOO.COM presents various shelves• Each shelf contains wears• For each wear there is a user-controlled rotable-image and zoomable-image• Each wear has a dress-room to try it on• There is a little avatar, Miss Boo, who guides users of the site giving them

suggestions

The site to be modeled is the one of boo.com, aSwedish streetwear e-tailer, who sells worlwide.The analisys will cover the collections of wears.

Site modelling: step1

Structure: Shelf

• A shelf contains many wears

<ENTITY id=“Shelf”> <ATTRIBUTE id=“ShelfName” type=“Image”/> <ATTRIBUTE id=“NumberOfWears” type=“Integer”/> <ATTRIBUTE id=“Category” type=“Text”/> <ATTRIBUTE id=“Type” type=“Text”/> <ATTRIBUTE id=“Sex” type=“Image”/> <RELATIONSHIP id=“Shelf2Wear” to=“Wear” inverse=“Wear2Shelf” mincard=“0” maxcard=“N”/></ENTITY>

Structure: Wear

• Wear is an entity<ENTITY id=“Wear”> <ATTRIBUTE id=“Name” type=“Text”/> <ATTRIBUTE id=“Description” type=“Text”/> <ATTRIBUTE id=“Sex” type=“Image”/> <ATTRIBUTE id=“Picture” type=“Image”/> <ATTRIBUTE id=“Price” type=“Float”/> <ATTRIBUTE id=“Colour” type=“Image”/> <ATTRIBUTE id=“Size” type=“Text”/> <ATTRIBUTE id=“Brand” type=“Text”/>

<RELATIONSHIP id=“Wear2Shelf” to=“Shelf” inverse=“Shelf2Wear” mincard=“1” maxcard=“N”/> <RELATIONSHIP id=“Wear2Dress-room” to=“Dress-room” inverse=“Dress-room2Wear” mincard=“1” maxcard=“1”/> <RELATIONSHIP id=“Wear2Zoom” to=“Zoom” inverse=“Zoom2Wear” mincard=“1” maxcard=“1”/> <RELATIONSHIP id=“Wear2Spin” to=“Spin” inverse=“Spin2Wear” mincard=“1” maxcard=“1”/> </ENTITY>

Structure: Dress-Room

• Dress-Room is an entity

<ENTITY id=“Dress-room”> <ATTRIBUTE id=“Item2Try” type=“Image”/> <ATTRIBUTE id=“Model” type=“Image”/> <ATTRIBUTE id=“UserSex” type=“Text”/>

<RELATIONSHIP id=“Dress-room2Wear” to=“Wear” inverse=“Wear2Dress-room” mincard=“1” maxcard=“1”/></ENTITY>

Structure: Zoom and Spin• Zoom is an entity (representing a zoomable

image)

• Spin is an entity (representing a rotable image)

<ENTITY id=“Zoom”> <ATTRIBUTE id=“ItemPicture” type=“Image”/> <ATTRIBUTE id=“UserSex” type=“Text”/>

<RELATIONSHIP id=“Zoom2Wear” to=“Wear” inverse=“Wear2Zoom” mincard=“1” maxcard=“1”/></ENTITY>

<ENTITY id=“Spin”> <ATTRIBUTE id=“ItemPicture” type=“Image”/> <ATTRIBUTE id=“UserSex” type=“Text”/>

<RELATIONSHIP id=“Spin2Wear” to=“Wear” inverse=“Wear2Spin” mincard=“1” maxcard=“1”/></ENTITY>

Structure: Avatar

• Avatar is an entity

<ENTITY id=“Avatar”> <ATTRIBUTE id=“AvatarPix” type=“Image”/> <ATTRIBUTE id=“Suggestion” type=“Text”/> <ATTRIBUTE id=“Balloon” type=“Image”/></ENTITY>

Structure Schema

Shelf

Avatar

Wear1:N0:N

1:1

1:1 1:1

1:1

1:1

1:1

Spin Zoom

Dress-room

Composition: Shelves /1

• Shelves are first-class objects

• A data unit is provided

• The data unit includes some attributes

ShelfInfo

Shelf

ShelfInfo: attributes

ShelfName

NumberOfWears

Composition: Shelves /2

• Each shelf is related with wears (by means of the Shelf2Wear relation)

• An index unit is provided

• The index unit uses some attributes of wear

rel:Shelf2Wear

WearIndex

WearIndex: included attributes

Brand Name

Price

Picture

Shelf Page• In the shelf page there may be an index and a

scroller of the shelves subdivided by wear brand, so we have to include a scroller unit and an index unit, this one with the brand attribute of wear as key

• To be included into the index unit, the wear brand attribute must be first imported into the shelf entity

<ENTITY id=“Shelf”> ... <ATTRIBUTE id=“ImpWearBrand” type=“String” value=“Self.Shelf2Wear.Brand”/> ...</ENTITY>

Shelf Page• The same page shows a shelf (with shelf scroller

and index) and its wear index• The page is composed including the data unit, two

index unit and a scroller unit

ShelfInfo

Shelf

ShelfIndex

ShelfShelf

key=ImpWearBrand

ShelfPage

ShelfScroller

rel:Shelf2Wear

WearIndex

Units: XML syntax<DATAUNIT id=“ShelfInfo” entity=“Shelf”> <INCLUDE attribute=“ShelfName”/> <INCLUDE attribute=“NumberOfWears”/></DATAUNIT>

<INDEXUNIT id=“WearIndex” relation=“Shelf2Wear”/> <DESCRIPTION Key=“Code”/> </INDEXUNIT>

<INDEXUNIT id=“ShelfIndex” entity=“Shelf”/> <DESCRIPTION Key=“ImpWearBrand”/></INDEXUNIT>

<SCROLLERUNIT id=“ShelfScroller” entity=“Shelf” fist=“no” last=“no” previous=“yes” next=“yes”/>

Page: XML syntax

<PAGE id=“ShelfPage”> <UNIT unitid=“ShelfInfo”/> <UNIT unitid=“WearIndex”/> <UNIT unitid=“ShelfIndex”/> <UNIT unitid=“ShelfScroller”/></PAGE>

Composition: Wears• Wears are first-class objects• A data unit is provided, which includes all

attributes• Three index units are provided, for the

relations Wear2Zoom, Wear2Spin, Wear2Dress-Room.

• Each index uses one attribute of zoom, spin and dress-roomWearInfo

Wear rel:Wear2Zoom

key=UserSexZoomIndex

rel:Wear2Dress-room

key=UserSexDressRoomIndex

rel:Wear2Spin

key=UserSexSpinIndex

WearInfo: attributesBrand

Name

Description

Picture

Size

Sex

ColoursPrice

Indexes: included attribute

UserSex

WearPage• The same page shows all wear attributes

and the indexes of zooms, spins and dress-rooms

• The page is composed including one data unit and three index units

WearInfo

Wear

WearPage

rel:Wear2Zoom


rel:Wear2Spin


rel:Wear2Dress-room


Units: XML syntax

<DATAUNIT id=“WearInfo” entity=“Wear”> <INCLUDEALL/></DATAUNIT>

<INDEXUNIT id=“ZoomIndex” entity=“Zoom”/> <DESCRIPTION Key=“UserSex”/></INDEXUNIT>

<INDEXUNIT id=“SpinIndex” entity=“Spin”/> <DESCRIPTION Key=“UserSex”/></INDEXUNIT>

<INDEXUNIT id=“DressRoomIndex” entity=“Dress-Room”/> <DESCRIPTION Key=“UserSex”/></INDEXUNIT>

Page: XML syntax

<PAGE id=“WearPage”> <UNIT unitid=“WearInfo”/> <UNIT unitid=“DressRoomIndex”/> <UNIT unitid=“ZoomIndex”/> <UNIT unitid=“SpinIndex”/></PAGE>

Composition: Dress-Room

• Each wear can be tried in a dress-room

• A data unit includes some attributes of the dress-room

• The data unit is enclosed into a page

Dress-RoomInfo

Dress-Room

Dress-RoomPage

Dress-RoomInfo: attributes

Model

Item2Try

Unit, Page: XML syntax

<DATAUNIT id=“Dress-RoomInfo” entity=“Dress-Room”> <INCLUDE attribute=“Model”/> <INCLUDE attribute=“Item2Try”/></DATAUNIT>

<PAGE id=“Dress-RoomPage”> <UNIT unitid=“Dress-RoomInfo”/></PAGE>

Composition: Zoom

• For each wear there is a zoom (zoomable image)

• A data unit includes one attribute of zoom


ZoomInfo

Zoom

ZoomPage

ZoomInfo: attributes

ItemPicture

Composition: Spin

• For each wear there is a spin (rotable image)

• A data unit includes one attribute of spin


SpinInfo

Spin

SpinPage

SpinInfo: attributes

ItemPicture

Composition: Avatar• The avatar is always present to help (the

shelf and wear page are “AND-composed” with the avatar page)

• A data unit includes all attributes of avatar• The data unit is enclosed into a page

AvatarInfo

Avatar

AvatarPage

AvatarInfo: attributes

BalloonSuggestion

AvatarPix

Composition: summary /1ShelfInfo

Shelf

ShelfIndex

ShelfShelf

key=ImpWearBrand

ShelfPage

ShelfScroller

rel:Shelf2Wear

WearIndex

AvatarInfo

Avatar

AvatarPage

Compositon: summary /2

AvatarInfo

Avatar

AvatarPage

WearInfo

Wear

WearPage

rel:Wear2Zoom


rel:Wear2Spin


rel:Wear2Dress-room


Composition: summary /3

Dress-RoomInfo

Dress-Room

Dress-RoomPage

ZoomInfo

Zoom

ZoomPage

SpinInfo

Spin

SpinPage

From Shelf to Wears• Navigation from a shelf to a wear is very

easy given the WearIndex in the shelf pageShelfInfo

Shelf

ShelfIndex

ShelfShelf

key=ImpWearBrand

ShelfPage

ShelfScroller

rel:Shelf2Wear

WearIndex

WearInfo

Wear

WearPage

rel:Wear2Zoom


rel:Wear2Spin


rel:Wear2Dress-room


From Wear to Shelf• Starting from a wear’s page it is possible to reach a shelf

through a multiindex page composed of three indexes, each one using a different attribute of shelf

• After the index search, the page of a shelf must be shown

multiindex

Type

Sex

Category

ShelfIndex1

rel:Wear2Shelf

key=CategoryShelfIndex2

rel:Wear2Shelf

key=Type

ShelfIndex3

rel:Wear2Shelf

key=Sex

ShelfInfo

Shelf

ShelfIndex

ShelfShelf

key=ImpWearBrand

ShelfPage

ShelfScroller

rel:Shelf2Wear

WearIndex

From Wear to

Shelf

WearInfo

Wear

WearPage

rel:Wear2Zoom


rel:Wear2Spin


rel:Wear2Dress-room


MultiIndexPage

From Wear to Shelf• There is another option: starting from a wear’s page it is

possible to reach a shelf via a filtered search page (QuickSearch page), connected to the multiindex page via a non contextual link

non-contextual link

ShelfIndex1

rel:Wear2Shelf

key=Category

ShelfIndex2

rel:Wear2Shelf

key=Type

ShelfIndex3

rel:Wear2Shelf

key=Sex

ShelfFilter

Shelf

ShelfIndex

ShelfShelf

key=ImpWearBrand

ShelfPage

ShelfScroller

rel:Shelf2Wear

WearIndex

From Wear to

ShelfShelf

MultiIndexPage

QuickSearchPage

ShelfInfo

(from WearPage)

QuickSearch Page

From Wear to Zoom, Spin and Dress-Room

• This navigation brings from a wear to its zoom, spin and dress-room

• All the pages are “AND-composed”

Dress-RoomInfo

Dress-Room

Dress-RoomPageZoomInfo

Zoom

ZoomPageSpinInfo

Spin

SpinPage

WearInfo

Wear

WearPage

rel:Wear2Zoom


rel:Wear2Spin


rel:Wear2Dress-room


AND-composed pages, an example: a wear and its spin (and the avatar)

Modelling a web site using WebML: an example Davide Pozzi - corso di Basi di Dati 2 Politecnico di...

Documents

Transcript of Modelling a web site using WebML: an example Davide Pozzi - corso di Basi di Dati 2 Politecnico di...