Presentation Transcript

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 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();
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, 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
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 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
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 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
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 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
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
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!