![Page 1: Design Presentation - Mybasketball.com Group 8 Yufei, Yu, Chang, Tangyao](https://reader037.vdocuments.pub/reader037/viewer/2022110403/56649e6c5503460f94b6b23d/html5/thumbnails/1.jpg)
Design Presentation- Mybasketball.com
Group 8Yufei, Yu, Chang, Tangyao
![Page 2: Design Presentation - Mybasketball.com Group 8 Yufei, Yu, Chang, Tangyao](https://reader037.vdocuments.pub/reader037/viewer/2022110403/56649e6c5503460f94b6b23d/html5/thumbnails/2.jpg)
Slides Contents
• Web function & web structure• Database Design• Page content & Function design• Future improvement & Experience• Work Distribution & Acknowledgement
![Page 3: Design Presentation - Mybasketball.com Group 8 Yufei, Yu, Chang, Tangyao](https://reader037.vdocuments.pub/reader037/viewer/2022110403/56649e6c5503460f94b6b23d/html5/thumbnails/3.jpg)
Web Function
• Account Registration• Auto Login• Email Password• Visit as Guest• Cookies Encrypt• Set personal Information• View Personal Information
![Page 4: Design Presentation - Mybasketball.com Group 8 Yufei, Yu, Chang, Tangyao](https://reader037.vdocuments.pub/reader037/viewer/2022110403/56649e6c5503460f94b6b23d/html5/thumbnails/4.jpg)
Web Function
• Upgrade Account• Forums and Comments• Create/Join/Leave Groups• Create/Join/Leave Games• Chat Room
![Page 5: Design Presentation - Mybasketball.com Group 8 Yufei, Yu, Chang, Tangyao](https://reader037.vdocuments.pub/reader037/viewer/2022110403/56649e6c5503460f94b6b23d/html5/thumbnails/5.jpg)
Web Page Structure
![Page 6: Design Presentation - Mybasketball.com Group 8 Yufei, Yu, Chang, Tangyao](https://reader037.vdocuments.pub/reader037/viewer/2022110403/56649e6c5503460f94b6b23d/html5/thumbnails/6.jpg)
Web Framework
• Client side– HTML & CSS (page content)– Javascript & Jquery (API and animation)
• Server side– SQL Database (data storage)– C# code behind (function implement)
![Page 7: Design Presentation - Mybasketball.com Group 8 Yufei, Yu, Chang, Tangyao](https://reader037.vdocuments.pub/reader037/viewer/2022110403/56649e6c5503460f94b6b23d/html5/thumbnails/7.jpg)
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.
![Page 8: Design Presentation - Mybasketball.com Group 8 Yufei, Yu, Chang, Tangyao](https://reader037.vdocuments.pub/reader037/viewer/2022110403/56649e6c5503460f94b6b23d/html5/thumbnails/8.jpg)
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)
![Page 9: Design Presentation - Mybasketball.com Group 8 Yufei, Yu, Chang, Tangyao](https://reader037.vdocuments.pub/reader037/viewer/2022110403/56649e6c5503460f94b6b23d/html5/thumbnails/9.jpg)
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)
![Page 10: Design Presentation - Mybasketball.com Group 8 Yufei, Yu, Chang, Tangyao](https://reader037.vdocuments.pub/reader037/viewer/2022110403/56649e6c5503460f94b6b23d/html5/thumbnails/10.jpg)
Database Design
• Comments– Id: (Primary Key)– ForumName: (name of forum)– CMessage: (content of comments )– Ctime: (time of comments)– CUser: (comment user)
![Page 11: Design Presentation - Mybasketball.com Group 8 Yufei, Yu, Chang, Tangyao](https://reader037.vdocuments.pub/reader037/viewer/2022110403/56649e6c5503460f94b6b23d/html5/thumbnails/11.jpg)
Database Design
• Groups– GroupID: (Primary Key)– GroupName: (name of group)– GroupIntro: (creator of group)
![Page 12: Design Presentation - Mybasketball.com Group 8 Yufei, Yu, Chang, Tangyao](https://reader037.vdocuments.pub/reader037/viewer/2022110403/56649e6c5503460f94b6b23d/html5/thumbnails/12.jpg)
Database Design
• GnU (Bridge Table)– GUid: (Primary Key)– UserID: (Foreign Key)– GroupID: (Foreign Key)
![Page 13: Design Presentation - Mybasketball.com Group 8 Yufei, Yu, Chang, Tangyao](https://reader037.vdocuments.pub/reader037/viewer/2022110403/56649e6c5503460f94b6b23d/html5/thumbnails/13.jpg)
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)
![Page 14: Design Presentation - Mybasketball.com Group 8 Yufei, Yu, Chang, Tangyao](https://reader037.vdocuments.pub/reader037/viewer/2022110403/56649e6c5503460f94b6b23d/html5/thumbnails/14.jpg)
Database Design
• AnU (Bridge Table)– AUid: (Primary Key)– GaID: (Foreign Key)– UserID: (Foreign Key)
![Page 15: Design Presentation - Mybasketball.com Group 8 Yufei, Yu, Chang, Tangyao](https://reader037.vdocuments.pub/reader037/viewer/2022110403/56649e6c5503460f94b6b23d/html5/thumbnails/15.jpg)
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
![Page 16: Design Presentation - Mybasketball.com Group 8 Yufei, Yu, Chang, Tangyao](https://reader037.vdocuments.pub/reader037/viewer/2022110403/56649e6c5503460f94b6b23d/html5/thumbnails/16.jpg)
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();
![Page 17: Design Presentation - Mybasketball.com Group 8 Yufei, Yu, Chang, Tangyao](https://reader037.vdocuments.pub/reader037/viewer/2022110403/56649e6c5503460f94b6b23d/html5/thumbnails/17.jpg)
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 18: Design Presentation - Mybasketball.com Group 8 Yufei, Yu, Chang, Tangyao](https://reader037.vdocuments.pub/reader037/viewer/2022110403/56649e6c5503460f94b6b23d/html5/thumbnails/18.jpg)
Page Content- Registration
![Page 19: Design Presentation - Mybasketball.com Group 8 Yufei, Yu, Chang, Tangyao](https://reader037.vdocuments.pub/reader037/viewer/2022110403/56649e6c5503460f94b6b23d/html5/thumbnails/19.jpg)
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 20: Design Presentation - Mybasketball.com Group 8 Yufei, Yu, Chang, Tangyao](https://reader037.vdocuments.pub/reader037/viewer/2022110403/56649e6c5503460f94b6b23d/html5/thumbnails/20.jpg)
Page Content- Cookies & Login
![Page 21: Design Presentation - Mybasketball.com Group 8 Yufei, Yu, Chang, Tangyao](https://reader037.vdocuments.pub/reader037/viewer/2022110403/56649e6c5503460f94b6b23d/html5/thumbnails/21.jpg)
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 22: Design Presentation - Mybasketball.com Group 8 Yufei, Yu, Chang, Tangyao](https://reader037.vdocuments.pub/reader037/viewer/2022110403/56649e6c5503460f94b6b23d/html5/thumbnails/22.jpg)
Page Content- Cookies Encryption
![Page 23: Design Presentation - Mybasketball.com Group 8 Yufei, Yu, Chang, Tangyao](https://reader037.vdocuments.pub/reader037/viewer/2022110403/56649e6c5503460f94b6b23d/html5/thumbnails/23.jpg)
Function Design- Cookies Encryption
• Encrypt via FormsAuthentication.Encrypt(ticket) when generate new cookies;
• Decrypt cookies via FormsAuthentication.Decrypt(ticket) when using cookies’ information.
![Page 24: Design Presentation - Mybasketball.com Group 8 Yufei, Yu, Chang, Tangyao](https://reader037.vdocuments.pub/reader037/viewer/2022110403/56649e6c5503460f94b6b23d/html5/thumbnails/24.jpg)
Page Content- Email
![Page 25: Design Presentation - Mybasketball.com Group 8 Yufei, Yu, Chang, Tangyao](https://reader037.vdocuments.pub/reader037/viewer/2022110403/56649e6c5503460f94b6b23d/html5/thumbnails/25.jpg)
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
![Page 26: Design Presentation - Mybasketball.com Group 8 Yufei, Yu, Chang, Tangyao](https://reader037.vdocuments.pub/reader037/viewer/2022110403/56649e6c5503460f94b6b23d/html5/thumbnails/26.jpg)
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 27: Design Presentation - Mybasketball.com Group 8 Yufei, Yu, Chang, Tangyao](https://reader037.vdocuments.pub/reader037/viewer/2022110403/56649e6c5503460f94b6b23d/html5/thumbnails/27.jpg)
Page Content- Set Personal Info.
![Page 28: Design Presentation - Mybasketball.com Group 8 Yufei, Yu, Chang, Tangyao](https://reader037.vdocuments.pub/reader037/viewer/2022110403/56649e6c5503460f94b6b23d/html5/thumbnails/28.jpg)
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
![Page 29: Design Presentation - Mybasketball.com Group 8 Yufei, Yu, Chang, Tangyao](https://reader037.vdocuments.pub/reader037/viewer/2022110403/56649e6c5503460f94b6b23d/html5/thumbnails/29.jpg)
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 30: Design Presentation - Mybasketball.com Group 8 Yufei, Yu, Chang, Tangyao](https://reader037.vdocuments.pub/reader037/viewer/2022110403/56649e6c5503460f94b6b23d/html5/thumbnails/30.jpg)
Page Content- Upgrade Account
![Page 31: Design Presentation - Mybasketball.com Group 8 Yufei, Yu, Chang, Tangyao](https://reader037.vdocuments.pub/reader037/viewer/2022110403/56649e6c5503460f94b6b23d/html5/thumbnails/31.jpg)
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 32: Design Presentation - Mybasketball.com Group 8 Yufei, Yu, Chang, Tangyao](https://reader037.vdocuments.pub/reader037/viewer/2022110403/56649e6c5503460f94b6b23d/html5/thumbnails/32.jpg)
Page Content- View Personal Info.
![Page 33: Design Presentation - Mybasketball.com Group 8 Yufei, Yu, Chang, Tangyao](https://reader037.vdocuments.pub/reader037/viewer/2022110403/56649e6c5503460f94b6b23d/html5/thumbnails/33.jpg)
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 34: Design Presentation - Mybasketball.com Group 8 Yufei, Yu, Chang, Tangyao](https://reader037.vdocuments.pub/reader037/viewer/2022110403/56649e6c5503460f94b6b23d/html5/thumbnails/34.jpg)
Page Content- Forum
![Page 35: Design Presentation - Mybasketball.com Group 8 Yufei, Yu, Chang, Tangyao](https://reader037.vdocuments.pub/reader037/viewer/2022110403/56649e6c5503460f94b6b23d/html5/thumbnails/35.jpg)
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
![Page 36: Design Presentation - Mybasketball.com Group 8 Yufei, Yu, Chang, Tangyao](https://reader037.vdocuments.pub/reader037/viewer/2022110403/56649e6c5503460f94b6b23d/html5/thumbnails/36.jpg)
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 37: Design Presentation - Mybasketball.com Group 8 Yufei, Yu, Chang, Tangyao](https://reader037.vdocuments.pub/reader037/viewer/2022110403/56649e6c5503460f94b6b23d/html5/thumbnails/37.jpg)
Page Content- Group
![Page 38: Design Presentation - Mybasketball.com Group 8 Yufei, Yu, Chang, Tangyao](https://reader037.vdocuments.pub/reader037/viewer/2022110403/56649e6c5503460f94b6b23d/html5/thumbnails/38.jpg)
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 39: Design Presentation - Mybasketball.com Group 8 Yufei, Yu, Chang, Tangyao](https://reader037.vdocuments.pub/reader037/viewer/2022110403/56649e6c5503460f94b6b23d/html5/thumbnails/39.jpg)
Page Content- Create Group
![Page 40: Design Presentation - Mybasketball.com Group 8 Yufei, Yu, Chang, Tangyao](https://reader037.vdocuments.pub/reader037/viewer/2022110403/56649e6c5503460f94b6b23d/html5/thumbnails/40.jpg)
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 41: Design Presentation - Mybasketball.com Group 8 Yufei, Yu, Chang, Tangyao](https://reader037.vdocuments.pub/reader037/viewer/2022110403/56649e6c5503460f94b6b23d/html5/thumbnails/41.jpg)
Page Content- View & Join Group
![Page 42: Design Presentation - Mybasketball.com Group 8 Yufei, Yu, Chang, Tangyao](https://reader037.vdocuments.pub/reader037/viewer/2022110403/56649e6c5503460f94b6b23d/html5/thumbnails/42.jpg)
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 43: Design Presentation - Mybasketball.com Group 8 Yufei, Yu, Chang, Tangyao](https://reader037.vdocuments.pub/reader037/viewer/2022110403/56649e6c5503460f94b6b23d/html5/thumbnails/43.jpg)
Page Content- Game
![Page 44: Design Presentation - Mybasketball.com Group 8 Yufei, Yu, Chang, Tangyao](https://reader037.vdocuments.pub/reader037/viewer/2022110403/56649e6c5503460f94b6b23d/html5/thumbnails/44.jpg)
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 45: Design Presentation - Mybasketball.com Group 8 Yufei, Yu, Chang, Tangyao](https://reader037.vdocuments.pub/reader037/viewer/2022110403/56649e6c5503460f94b6b23d/html5/thumbnails/45.jpg)
Page Content- Create Game
![Page 46: Design Presentation - Mybasketball.com Group 8 Yufei, Yu, Chang, Tangyao](https://reader037.vdocuments.pub/reader037/viewer/2022110403/56649e6c5503460f94b6b23d/html5/thumbnails/46.jpg)
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 47: Design Presentation - Mybasketball.com Group 8 Yufei, Yu, Chang, Tangyao](https://reader037.vdocuments.pub/reader037/viewer/2022110403/56649e6c5503460f94b6b23d/html5/thumbnails/47.jpg)
Page Content- View & Join Game
![Page 48: Design Presentation - Mybasketball.com Group 8 Yufei, Yu, Chang, Tangyao](https://reader037.vdocuments.pub/reader037/viewer/2022110403/56649e6c5503460f94b6b23d/html5/thumbnails/48.jpg)
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
![Page 49: Design Presentation - Mybasketball.com Group 8 Yufei, Yu, Chang, Tangyao](https://reader037.vdocuments.pub/reader037/viewer/2022110403/56649e6c5503460f94b6b23d/html5/thumbnails/49.jpg)
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
![Page 50: Design Presentation - Mybasketball.com Group 8 Yufei, Yu, Chang, Tangyao](https://reader037.vdocuments.pub/reader037/viewer/2022110403/56649e6c5503460f94b6b23d/html5/thumbnails/50.jpg)
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
![Page 51: Design Presentation - Mybasketball.com Group 8 Yufei, Yu, Chang, Tangyao](https://reader037.vdocuments.pub/reader037/viewer/2022110403/56649e6c5503460f94b6b23d/html5/thumbnails/51.jpg)
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
![Page 52: Design Presentation - Mybasketball.com Group 8 Yufei, Yu, Chang, Tangyao](https://reader037.vdocuments.pub/reader037/viewer/2022110403/56649e6c5503460f94b6b23d/html5/thumbnails/52.jpg)
Work Distribution
Register/Cookies/Encrypt
Email DBDesign
UploadPicture
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
![Page 53: Design Presentation - Mybasketball.com Group 8 Yufei, Yu, Chang, Tangyao](https://reader037.vdocuments.pub/reader037/viewer/2022110403/56649e6c5503460f94b6b23d/html5/thumbnails/53.jpg)
Acknowledgement
• Prof. Skinner– For knowledge we learned and Chat demo
• Lance– For helping us debug
• Zhaobo Yu– For Petshop, IIS and .net Framework introduction
![Page 54: Design Presentation - Mybasketball.com Group 8 Yufei, Yu, Chang, Tangyao](https://reader037.vdocuments.pub/reader037/viewer/2022110403/56649e6c5503460f94b6b23d/html5/thumbnails/54.jpg)
Thank you!