Design Presentation- Mybasketball.com

Group 8Yufei, 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• Email Password• Visit as Guest• Cookies Encrypt• Set personal Information• View Personal Information

Web Function

• Upgrade Account• Forums and Comments• Create/Join/Leave Groups• Create/Join/Leave Games• Chat Room

Web Page Structure

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

• 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

• 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 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 Design

• Comments– Id: (Primary Key)– ForumName: (name of forum)– CMessage: (content of comments )– Ctime: (time of comments)– CUser: (comment user)

Database Design

• Groups– GroupID: (Primary Key)– GroupName: (name of group)– GroupIntro: (creator of group)

Database Design

• GnU (Bridge Table)– GUid: (Primary Key)– UserID: (Foreign Key)– GroupID: (Foreign Key)

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 Design

• AnU (Bridge Table)– AUid: (Primary Key)– GaID: (Foreign Key)– UserID: (Foreign Key)

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 Continue

• ADO.net implement SqlConnection conn = new SqlConnection(connString); conn.Open(); SqlCommand cmd = new SqlCommand(“SQL", conn); SqlDataReader rdr = cmd.ExecuteReader(); StringBuilder cmts = new StringBuilder(); while (rdr.Read()) { //The operate of selected data } conn.Close();

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

Function Design- Registration

• Write new rows in Users table via INSERT query, include UserName, PassWord and 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

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

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

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

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

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

• 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

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.

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

Function Design- Forum

• There 3 different forums, each forum has an embeded Youtube 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

• 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

Function Design- Group

• 2 DropDownList 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

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

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

Function Design- Game

• The implementation of Game is similar to Group• 3 Listbox 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

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

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

• 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

• 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

• 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

Register/Cookies/Encrypt

Email DBDesign

UploadPicture

Google

MapsAPI

Forum/Group/Games

UIBeautify

Test PPT

YufeiWang

O O O O O

YuLu

O O O O

ChangLiu

O O O

TangyaoLi

O O O

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!