Design presentation mybasketball com
This presentation is the property of its rightful owner.
Sponsored Links
1 / 54

Design Presentation - Mybasketball.com PowerPoint PPT Presentation


  • 36 Views
  • Uploaded on
  • Presentation posted in: General

Design Presentation - Mybasketball.com. 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

Download Presentation

Design Presentation - Mybasketball.com

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- Mybasketball.com

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 page structure

Web Page Structure


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

  • ADO.net and Query String

    • ADO.net is more powerful than SQL Query builder

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

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


Database design continue1

Database Design Continue

  • ADO.net implement

    SqlConnectionconn = new SqlConnection(connString);

    conn.Open();

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

    SqlDataReaderrdr = cmd.ExecuteReader();

    StringBuildercmts = new StringBuilder();

    while (rdr.Read())

    {

    //The operate of selected data

    }

    conn.Close();


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)

    • ADO.net 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 ADO.net 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 ADO.net

  • 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 ADO.net

  • 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 ADO.net

  • 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 ADO.net, 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 ADO.net, 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 ADO.net

  • 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 ADO.net

  • Find members in group by nesting ADO.net


Page content game

Page Content- Game


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 ADO.net

  • 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 ADO.net

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

  • Find members in game by nesting ADO.net


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 ADO.net, 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


Work distribution

Work Distribution


Acknowledgement

Acknowledgement

  • Prof. Skinner

    • For knowledge we learned and Chat demo

  • Lance

    • For helping us debug

  • Zhaobo Yu

    • For Petshop, IIS and .net Framework introduction


Thank you

Thank you!


  • Login