1. Design Presentation - Mybasketball.com Group 8 Yufei, Yu, Chang, Tangyao

2. Slides Contents Web function & web structure Database Design Page content & Function design Future improvement & Experience Work Distribution & Acknowledgement

3. Web Function Account Registration Auto Login Email Password Visit as Guest Cookies Encrypt Set personal Information View Personal Information

4. Web Function Upgrade Account Forums and Comments Create/Join/Leave Groups Create/Join/Leave Games Chat Room

5. Web Page Structure

6. Web Framework Client side – HTML & CSS (page content) – Javascript & Jquery (API and animation) Server side – SQL Database (data storage) – C# code behind (function implement)

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

8. 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)

9. 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)

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

11. Database Design Groups – GroupID: (Primary Key) – GroupName: (name of group) – GroupIntro: (creator of group)

12. Database Design GnU (Bridge Table) – GUid: (Primary Key) – UserID: (Foreign Key) – GroupID: (Foreign Key)

13. 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)

14. Database Design AnU (Bridge Table) – AUid: (Primary Key) – GaID: (Foreign Key) – UserID: (Foreign Key)

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

16. 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();

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

18. Page Content - Registration

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

20. Page Content - Cookies & Login

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

22. Page Content - Cookies Encryption

23. Function Design - Cookies Encryption Encrypt via FormsAuthentication.Encrypt(ticket) when generate new cookies; Decrypt cookies via FormsAuthentication.Decrypt(ticket) when using cookies’ information.

24. Page Content - Email

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

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

27. Page Content - Set Personal Info.

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

29. 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)

30. Page Content - Upgrade Account

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

32. Page Content - View Personal Info.

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

34. Page Content - Forum

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

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

37. Page Content - Group

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

39. Page Content - Create Group

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

41. Page Content - View & Join Group

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

43. Page Content - Game

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

45. Page Content - Create Game

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

47. Page Content - View & Join Game

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

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

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

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

52. Work Distribution Register /Cookies /Encrypt EmailDB Design Upload Picture Google Maps API Forum /Group /Games UI Beautify TestPPT Yufei Wang OOOOO Yu Lu OOOO Chang Liu OOO Tangyao Li OOO

53. Acknowledgement Prof. Skinner – For knowledge we learned and Chat demo Lance – For helping us debug Zhaobo Yu – For Petshop, IIS and.net Framework introduction

54. Thank you!