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 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) – ( 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 The other columns of Users will be filled with default value Use ADO.net for error checking, include UserName and 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 -

Function Design - Get the address of user via ADO.net Implement sending through MailMessage() and SmtpClient() The 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, 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 DB Design Upload Picture Google Maps API Forum /Group /Games UI Beautify TestPPT Yufei Wang OOOOO Yu Lu OOOO Chang Liu OOO Tangyao Li OOO

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!