Design presentation mybasketball com
1 / 54

Design Presentation - - PowerPoint PPT Presentation

  • Uploaded on

Design Presentation - Group 8 Yufei , Yu, Chang, Tangyao. Slides Contents . Web function & web structure Database Design Page content & Function design Future improvement & Experience Work Distribution & Acknowledgement. Web Function. Account Registration Auto Login

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about ' Design Presentation -' - beth

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Design presentation mybasketball com

Design Presentation-

Group 8

Yufei, Yu, Chang, Tangyao

Slides contents
Slides Contents

  • Web function & web structure

  • Database Design

  • Page content & Function design

  • Future improvement & Experience

  • Work Distribution & Acknowledgement

Web function
Web Function

  • Account Registration

  • Auto Login

  • Email Password

  • Visit as Guest

  • Cookies Encrypt

  • Set personal Information

  • View Personal Information

Web function1
Web Function

  • Upgrade Account

  • Forums and Comments

  • Create/Join/Leave Groups

  • Create/Join/Leave Games

  • Chat Room

Web framework
Web Framework

  • Client side

    • HTML & CSS (page content)

    • Javascript & Jquery (API and animation)

  • Server side

    • SQL Database (data storage)

    • C# code behind (function implement)

Session state store
Session State Store

  • Use Cookies

    • There are two ways to share data in different pages, Session state and Cookies.

    • We use cookies to store these data.

    • The cookies in web has been encrypt. It is more secure and easy to use.

Database design
Database Design

  • 6 Tables

    • Users: (users’ information)

    • Comments: (comment content)

    • Groups: (groups information)

    • GnU: (bridge Groups and Users)

    • Games: (games information)

    • AnU: (bridge Games and Users)

Database design1
Database Design

  • Users

    • UserID: (Primary Key)

    • UserName: (account name)

    • Password: (password)

    • Email: (email address)

    • FirstName: (first name)

    • LastName: (last name)

    • Age: (age)

    • Sex: (sex)

    • Upgrade: (account type)

    • ImgPath: (portrait picture path)

Database design2
Database Design

  • Comments

    • Id: (Primary Key)

    • ForumName: (name of forum)

    • CMessage: (content of comments )

    • Ctime: (time of comments)

    • CUser: (comment user)

Database design3
Database Design

  • Groups

    • GroupID: (Primary Key)

    • GroupName: (name of group)

    • GroupIntro: (creator of group)

Database design4
Database Design

  • GnU(Bridge Table)

    • GUid: (Primary Key)

    • UserID: (Foreign Key)

    • GroupID: (Foreign Key)

Database design5
Database Design

  • Games

    • GaID: (Primary Key)

    • GName: (game name)

    • GIntro: (game introduction)

    • GLat: (game location: latitude)

    • GLng: (game location: longitude)

    • Gtime: (game time)

    • GCre: (creator of game)

    • GTyp: (type of game)

Database design6
Database Design

  • AnU (Bridge Table)

    • AUid: (Primary Key)

    • GaID: (Foreign Key)

    • UserID: (Foreign Key)

Database design continue
Database Design Continue

  • and Query String

    • is more powerful than SQL Query builder

    • Basic UPDATE/DELETE/INSERT are implemented simply by SQL Query builder

    • Complicated SELECT are implemented by After select the data we need, we can update, delete or insert the database

Database design continue1
Database Design Continue

  • implement

    SqlConnectionconn = new SqlConnection(connString);


    SqlCommandcmd = new SqlCommand(“SQL", conn);

    SqlDataReaderrdr = cmd.ExecuteReader();

    StringBuildercmts = new StringBuilder();

    while (rdr.Read())


    //The operate of selected data



Database design continue2
Database Design Continue

  • Data Interaction

    • All the data is stored in Database

    • The data used as condition is put in labels from database, then code behind read data from labels

    • (Using labels as medium makes debug and test much easier)

    • and SQL Query builder manipulate data directly

Page content registration
Page Content- Registration

Function design registration
Function Design- Registration

  • Write new rows in Users table via INSERT query, include UserName, PassWordand Email

  • The other columns of Users will be filled with default value

  • Use for error checking, include UserName and Email must be different

  • 5 different Labels will show the different type of errors, 4 Textbox for input

Page content cookies login
Page Content- Cookies & Login

Function design cookies login
Function Design- Cookies & Login

  • When users login in the website, HttpCookie will generate a new cookie, which stores Username, generate time, life period and auto-login flag

  • Check username and password which user types in, through

  • Cookies will be used in storing session state

  • Use 2 Textbox for input, 1 Label for error check

Page content cookies encryption
Page Content- Cookies Encryption

Function design cookies encryption
Function Design- Cookies Encryption

  • Encrypt via FormsAuthentication.Encrypt(ticket) when generate new cookies;

  • Decrypt cookies via FormsAuthentication.Decrypt(ticket) when using cookies’ information.

Page content email
Page Content- Email

Function design email
Function Design- Email

  • Get the email address of user via

  • Implement Email sending through MailMessage() and SmtpClient()

  • The email content is password retrieved from Users table

  • 1 Label for error check, 1 Textbox for input

Function design guest
Function Design- Guest

  • When login as guest, users can only use forum function.

  • Use 1 Label store the status of visitor: Users or Guests

  • Achieve identity judgment via this label’s content

Page content set personal info
Page Content- Set Personal Info.

Function design set personal info
Function Design- Set Personal Info.

  • Modify Users table via UPDATE query builder, include FirstName, LastName, Age, Sex, and imgPath

  • 4 Textbox for input, 1 FileUpLoad for picture upload, 1 Label for error check

Function design upload and compress picture
Function Design- Upload and compress Picture

  • Upload original pictures in /Picture folder, while storing the corresponding compressed pictures in /Picture/Nailed folder

  • Using original pictures’ path as source of compression

  • Store the compressed pictures’ path in User tables’ imgPath column

  • Compression function are achieved via MakeThumNail(), which processes picture by (height = original height * width / original width)

Page content upgrade account
Page Content- Upgrade Account

Function design upgrade account
Function Design- Upgrade Account

  • Using a flag bit for account type. 1 is primier user , 0 is normal user

  • Store this flag in Users table Upgrade column

  • Select the corresponding row in Users table via

  • Set default value as 0, after upgrade click, change value to 1

Page content view personal info
Page Content- View Personal Info.

Function design view personal info
Function Design- View Personal Info.

  • 7 Labels for showing information, 1 Image for showing portrait, 1 DropDownList for user selection

  • Select user via, then retrieve UserName, FirstName, LastName, Age, Sex, Upgrade, Email respectively

Page content forum
Page Content- Forum

Function design forum
Function Design- Forum

  • There 3 different forums, each forum has an embededYoutube video

  • For each Forum, store a new comment in Comments table via INSERT query, include ForumName, Cmessage, CTime and CUser

  • Retrieve comments from Comments table via, use StringBuilder data type store them

  • 1 Textbox for input, 1 multiline Label and Panel for showing, JS alert for error checking

Function design chat
Function Design- Chat

  • Transplanting the Chat Demo of Prof. Skinner

  • Using Application State storing chat messages and users online

  • Refresh part of the page content via AJAX Extensions, Timer, ScriptManager and UpdatePanel

Page content group
Page Content- Group

Function design group
Function Design- Group

  • 2DropDownList and 1 Listbox for showing all/user created/user joined groups respectively.

  • JS alert for error checking

  • Configure data source to all groups’ DropDownList and created groups’ Listbox

  • Selecting the groups user joined in from Groups table and bridge table GnU, through

  • Achieve the leave group function via DELETE selected rows in bridge table GnU

Page content create group
Page Content- Create Group

Function design create group
Function Design- Create Group

  • 1 Textbox for input, 1 Label for storing username, JS for error check

  • Insert a new row in Groups table via INSERT query, include GroupName and GroupIntro

Page content view join group
Page Content- View & Join Group

Function design view join group
Function Design- View & Join Group

  • 1 DropDownList for selecting, 2 Label for showing information

  • Retrieve group name from Groups table, by

  • Find members in group by nesting

Function design game
Function Design- Game

  • The implementation of Game is similar to Group

  • 3Listbox for showing all/user created/user joined games respectively.

  • JS alert for error checking

  • Configure data source 3 Listbox respectively

  • Find the groups which user joined in by bridge table AnU, through

  • Achieve the leave game function by DELETE query of bridge table AnU

Page content create game
Page Content- Create Game

Function design create game
Function Design- Create Game

  • 3 Textbox for input, 1 DropDownList for game type selection, JS for error check

  • Store latitude and longitude of google maps marker in Games table

  • Insert a new row in Games table by INSERT query, include the whole columns

Page content view join game
Page Content- View & Join Game

Function design view join game
Function Design- View & Join Game

  • 1 DropDownList for selection, 5 Label for showing information

  • Retrieve game name, time, type and creator from Games table, by

  • Retrieve game’s latitude and longitude from Games table, show this location in google maps marker

  • Find members in game by nesting

Function design google maps api
Function Design- Google Maps API

  • Implement google maps via Javascript, in create and view/join games pages respectively

  • Store latitude and longitude of marker in Games table via INSERT query when create a new game

  • Retrieve latitude and longitude via, then draw a marker in maps

  • Print games information in infoWindow()

  • Achieve 2 new controls, Home and Zoom

Future improvement
Future Improvement

  • UI beautify

    • CSS template

    • Jquery and Javascript Effects

  • Expand each table’s content

    • Provide more information

  • Reduce Database Redundancy

    • Database 3NF

  • Improve Error Check

Gains experiences
Gains & Experiences

  • The best way of manage data is in server side

  • Write Override classes and functions which manipulate the data is important

  • In future development, we should design the framework of website before coding


  • Prof. Skinner

    • For knowledge we learned and Chat demo

  • Lance

    • For helping us debug

  • Zhaobo Yu

    • For Petshop, IIS and .net Framework introduction