Fashion House Portal

Project
Introduction
We are the trainee of Trainees of ESAD-CS course of ROUND 09 under the IDB-
BISEW project. After successful completion of training courses, we got a
chance to develop a project under the guidance of our Instructor.
Immediately we decided to develop a functional, professional system ready
to be used or installed. We formulate a set of primary goals:

Use .NET Framework 4.0 and Visual studio 2010

Develop a Web-based system using ASP.NET 4.0
Deploy it and Stage it on some server so that we can show it during our
job-hunting
Use AJAX technology
Use LINQ/EF Technology
We then consulted our instructor. We conducted a survey on portal local
business organization. Our instructor informed us that in our country there is no
appropriate site of fashion, style or garment based products. We immediately
decided to portal for a fashion house.
Requirement
The system will allow users to view products on various categories, Comment
on product review, rate top design.

The system will allow administrators to manage products, analyze visitors

comments, and pick choice trends.

The USE case diagram shows the requirements in broad sense:

View Product

Comment on Product
User
Admin

Rate Style

Update Product

Analyze

In General

There must registrations system for Admin

Only members are allowed to let comments
The must be security organization to protect administrative resources
from illegal access
Non-function requirement:

The system should be interactive as much as possible

The system should use asynchronous processing
After initial load, the system update only selective portion of the
interface based on user actions
Technology requirements

Use ASP.NET 4.0

Use AJAX technology
Take advantage of MS Visual Studio AJAX Extension and Libraries
Use LINQ technology (at minimum level)
User popular third-party ASP.NET Control for better performance
Conform to XHTML standard as close as possible
Cross browser support
Use Table-less layout
Use CSS and Themes for consistent look and feel
Page Layout:
Goals:
Tables less layout
Follow XML standard (XHTML-Transitional standard is chosen)
Logical content organization
Easy navigation
Cross-browser compatible

Fashion House

Mast Head

Menu Link 1

Menu Link 2

Menu Link 3

Main Content

Footer
Project Development
Layout and primary look and feel
The layout and presence is controlled by a single css.
The CSS Code:
/* DEFAULTS
----------------------------------------------------------*/

body
{
background: #b6b7bc;
font-size: .80em;
font-family: "Helvetica Neue" , "Lucida Grande" , "Segoe UI" , Arial, Helvetica, Verdana, sans-serif;
margin: 0px;
padding: 0px;
color: #696969;
}

a:link, a:visited
{
color: #034af3;
}

a:hover
{
color: #1d60ff;
text-decoration: none;
}

a:active
{
color: #034af3;
}

p
{
margin-bottom: 10px;
line-height: 1.6em;
}

/* HEADINGS
----------------------------------------------------------*/

h1, h2, h3, h4, h5, h6

{
font-size: 1.5em;
color: #666666;
font-variant: small-caps;
text-transform: none;
font-weight: 200;
margin-bottom: 0px;
}
h1
{
font-size: 1.6em;
padding-bottom: 0px;
margin-bottom: 0px;
}

h2
{
font-size: 1.5em;
font-weight: 600;
}

h3
{
font-size: 1.2em;
}

h4
{
font-size: 1.1em;
}

h5, h6
{
font-size: 1em;
}

/* this rule styles <h1> and <h2> tags that are the
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
margin-top: 0px;
}

/* PRIMARY LAYOUT ELEMENTS

----------------------------------------------------------*/

.page
{
width: 960px;
background-color: #fff;
margin: 20px auto 0px auto;
border: 1px solid #496077;
}

.header
{
position: relative;
margin: 0px;
padding: 0px;
 background: #4b6c9e;
width: 100%;
}

.header h1
{
font-weight: 700;
margin: 0px;
padding: 0px 0px 0px 20px;
color: #f9f9f9;
border: none;
line-height: 2em;
font-size: 2em;
}

.main
{
padding: 0px 3px;
margin: 0px 8px 0px 4px;
min-height: 420px;
}

.leftCol
{
padding: 1px 0px;
margin: 1px 8px 8px 0px;
width: 200px;
min-height: 200px;
float: left; /* border: solid 1px black;*/
}
.rightCol
{
padding: 1px 0px;
margin: 1px 8px 8px 0px;
width: 700px;
min-height: 200px;
float: left; /* border: solid 1px black;*/
}

.footer
{
color: #4e5766;
padding: 8px 0px 0px 0px;
margin: 0px auto;
text-align: center;
line-height: normal;
}

/* TAB MENU
----------------------------------------------------------*/

div.hideSkiplink
{
background-color: #3a4f63;
width: 100%;
}

div.menu
{
padding: 4px 0px 4px 8px;
}

div.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
z-index: 99999;
}

div.menu ul li a, div.menu ul li a:visited

{
background-color: #465c71;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}

div.menu ul li a:hover
{
background-color: #bfcbd6;
color: #465c71;
text-decoration: none;
}

div.menu ul li a:active
{
background-color: #465c71;
color: #cfdbe6;
text-decoration: none;
}

/* FORM ELEMENTS
----------------------------------------------------------*/

fieldset
{
margin: 1em 0px;
padding: 1em;
border: 1px solid #ccc;
}

fieldset p
{
margin: 2px 12px 10px 10px;
}

fieldset.login label, fieldset.register label, fieldset.changePassword label

{
display: block;
}

fieldset label.inline
{
display: inline;
}

legend
{
font-size: 1.1em;
font-weight: 600;
padding: 2px 4px 8px 4px;
}

input.textEntry
{
width: 320px;
border: 1px solid #ccc;
}

input.passwordEntry
{
width: 320px;
border: 1px solid #ccc;
}

div.accountInfo
{
width: 42%;
}

/* MISC
----------------------------------------------------------*/

.clear
{
clear: both;
}

.title
{
display: block;
float: left;
 text-align: left;
width: auto;
}

.loginDisplay
{
font-size: 1.1em;
display: block;
text-align: right;
padding: 10px;
color: White;
}

.loginDisplay a:link
{
color: white;
}

.loginDisplay a:visited
{
color: white;
}

.loginDisplay a:hover
{
color: white;
}

.failureNotification
{
font-size: 1.2em;
color: Red;
}

.bold
{
font-weight: bold;
}

.submitButton
{
text-align: right;
padding-right: 10px;
}

#CategoryMenu li
{
width: 180px;
}
Project Structure
BSTC consists of functional units
1. An user interface project that contains the web applications for both
user and administration pages,
2. Business objects used to define constants, classes and interfaces
required by the other two units.
The first task is to sketch out the general structure of the solution so that later
we can fill out the implementation. The web application structure is like
below:
Root

root

Account App_data Styles Scripts Images

Men s Wear Women s Wear Brand Items Product review

Setting up the Database
The Portal contains Products, Products are categorized.

Category

1
*
Product

ASP.NET Application Configuration

<add name="ApplicationServices" connectionString="data
source=.\SQLEXPRESS;Integrated
Security=SSPI;AttachDBFilename=|DataDirectory|\aspnetdb.mdf;User
Instance=true"
providerName="System.Data.SqlClient" />
<add name="ConnectionString" connectionString="Data
Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\FashionHouse.m
df;Integrated Security=True;User Instance=True"
providerName="System.Data.SqlClient" />

Security Configurations
<authentication mode="Forms">
<forms loginUrl="~/Account/Login.aspx" timeout="2880"/>
</authentication>
<membership>
<providers>
<clear/>
<add name="AspNetSqlMembershipProvider"
type="System.Web.Security.SqlMembershipProvider"
connectionStringName="ApplicationServices"
enablePasswordRetrieval="false" enablePasswordReset="true"
requiresQuestionAndAnswer="false" requiresUniqueEmail="false"
maxInvalidPasswordAttempts="5" minRequiredPasswordLength="6"
minRequiredNonalphanumericCharacters="0" passwordAttemptWindow="10"
applicationName="/"/>
</providers>
</membership>
<profile>
<providers>
<clear/>
<add name="AspNetSqlProfileProvider"
type="System.Web.Profile.SqlProfileProvider"
connectionStringName="ApplicationServices" applicationName="/"/>
</providers>
</profile>
<roleManager enabled="false">
<providers>
<clear/>
<add name="AspNetSqlRoleProvider"
type="System.Web.Security.SqlRoleProvider"
connectionStringName="ApplicationServices" applicationName="/"/>
<add name="AspNetWindowsTokenRoleProvider"
type="System.Web.Security.WindowsTokenRoleProvider"
applicationName="/"/>
</providers>
</roleManager>
Master Page
Fashion House

Mast Head
Placeholder
Menu Link 1

Menu Link 2

Menu Link 3

Placeholder

Footer
Sequence of events

User Default UI CS Code DB Utility

Initiate

Request

Action

Action

View Products

Build

Screen Shoots