Welcome Software engineers ๐ป and UX Designers ๐ฑ.
This repo presents you the "Beloitiwtter" for Beloit College.
You can also preview the website without connection to MS SQL Server here.
Here is a demonstration of fully functioning website.
Beoitwitter.-.Made.with.Clipchamp.1.mp4
HTML
CSS
JQuery
C#
JavaScript
- HTML and CSS deploy the basic structure of web page
<div class="header-search">
<asp:TextBox ID="search" placeholder="CODE: MATH 110" CssClass="search" runat="server"></asp:TextBox>
<asp:TextBox ID="professor" placeholder="FIRST NAME" CssClass="professor" runat="server"></asp:TextBox>
<asp:TextBox ID="time" placeholder="SPRING 2021" CssClass="time" runat="server"></asp:TextBox>
<asp:TextBox ID="depart" placeholder="DEPARTMENT: MATH" CssClass="depart" runat="server"></asp:TextBox>
<asp:Button ID="searchBtn" runat="server" Text="Search" OnClick="searchBtn_Click" />
</div>
.content-right #searchBtn{
width: 342px;
height: 38px;
background: #373531;
border: none;
outline: none;
border-radius: 5px;
color: #fff;
cursor:pointer;
margin-top:10px;
}
- C# takes charge of default functions like loading and freshing
protected void Page_Load(object sender, EventArgs e)
{
//get comment list for index page
getCommentList();
//get user information
Student userInfo = Session["userInfo"] as Student;
//check if already exist
if (userInfo == null)
{
return;
}
this.nick.Text = this.nickName.Text = userInfo.nick_name;
this.userImg.ImageUrl = userInfo.user_avatar;
}
- JQuery and JavaScript take charge of business and functions
<!--back to top box-->
<a href="javascript:void(0)" id="return-box">
<img src="./userIcon/top.jpg" alt="">
</a>
</form>
<!--jquery link-->
<script src="./js/jquery-3.5.1.min.js"></script>
<script src="./js/global.js"></script>
The Entire project adopted the .Net framework and MVC Structure.
Business Logic Layer
A thin function wrapper for access query in DAL
public static List<Comment> getCommentList(int userId)
{
return CommentService.getCommentList(userId);
}
Data Access Layer
Implement C# with SQL query to interact with databases stored in MS SQL Server.
public static List<ShowComment> getIndexCommentList(int pageNum, int pageSize)
{
//split page: page number, comment number each page
int offsetNum = (pageNum - 1) * pageSize;
string sql = string.Format("select c.comment_id,c.title, c.time, c.img, s.user_avatar,
s.nick_name, course.time_offered, p.first_name, p.last_name, course.course_code from comment c left join student s
on c.student_id = s.student_id left join course on course.course_id = c.course_id left join professor p
on p.professor_id = course.professor_id order by time desc offset {0} rows fetch next {1} rows only", offsetNum, pageSize);
//execute sql
SqlDataReader dr = DBHelper.getData(sql);
//save into data model
ShowComment commentInfo = null;
List<ShowComment> commentList = new List<ShowComment>();
while (dr.Read())
{
commentInfo = new ShowComment();
commentInfo.comment_id = dr.GetInt32(0);
commentInfo.title = dr.GetString(1);
commentInfo.time = dr.GetDateTime(2);
commentInfo.img = dr.GetString(3);
commentInfo.user_avatar = dr.GetString(4);
commentInfo.nick_name = dr.GetString(5);
commentInfo.time_offered = dr.GetString(6);
commentInfo.professor_name = dr.GetString(7) + " " + dr.GetString(8);
commentInfo.course_code = dr.GetString(9);
commentList.Add(commentInfo);
}
dr.Close();
//return info
return commentList;
}
Data Model
Object Class for catching data retrieved from SQL server
public class Comment
{
public int comment_id { get; set; }
public int student_id { get; set; }
public int course_id { get; set; }
public string comment_text { get; set; }
public string title { get; set; }
public string img { get; set; }
public int course_rate { get; set; }
public DateTime time { get; set; }
}
Data are stored in MS SQL Server and here are the ER-diagrams.
erDiagram
Students {
string name
string custNumber
string sector
}
Comments {
int comment_id
int students_id
int course_id
string info
}
Courses{
string courser_code
int professor_id
int course_id
string info
}
Course_information{
string course_code
int department_id
string info
}
Departments{
int department_id
string department_name}
Discuss{
int discuss_id
int student_id
string info
}
Professors{
int professor_id
string info
}
Sc{
string course_code
course_id
student_id
}
Students{
int student_id
string info
}
Students ||--|{ Comments : give
Sc }|--|| Students : take
Discuss }o--o| Students : reply
Courses ||--o{ Comments : have
Courses ||--|| Course_information : contain
Professors ||--o{ Courses : teach
Course_information ||--|| Departments : provide