一个简单的成绩查询系统
fengxiaot Lv4

寒假在家闲着没事,复习了一下大学计算机基础学的简单的SQL语句,利用PHP+MySQL做了一个简单的成绩查询系统。


HTML

以下是 index.html ,目前没有实现的功能在于 <option> 不能根据数据库实时更新,需要手动添加项目。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>查询期中成绩</title>
<link rel="stylesheet" href="css/input.css">
<link rel="stylesheet" href="css/footer.css">
</head>

<html>
<body>
<script type="text/javascript" size="150" alpha='0.3' zIndex="-1" src="js/ribbon.min.js"></script>

<div class="box">
<h2>物理试验班期中成绩查询系统</h2>
<form action="result.php" method="POST">
<input type="text" name="sno" placeholder="学号" required>
</br>
<select name="subject">
<option value="Calculus1">工科数学分析I</option>
<option value="Calculus2">工科数学分析II</option>
<option value="Matrix">线性代数</option>
</select>
</br>
<input type="submit">
</form>
</div>

<div class="footer">
<a href="https://beian.miit.gov.cn/">BeiAn</a>
</div>

</body>
</html>

CSS

以下是 input.css ,主要控制查询框的样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
.box{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
/*实现块元素百分比下居中*/
background-color: rgba(233, 233, 233, 0.1);
padding:50px;
box-sizing:border-box;
box-shadow: 0px 0px 20px rgba(144,144,144,.2);
border-radius: 15px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.box h2{
margin:0 0 30px;
padding:0;
color: rgb(63,63,63);
text-align:center;
}
.box input[type="text"]
{
position:relative;
width: 100%;
padding:10px 0;
font-size:16px;
color:rgb(63,63,63);
letter-spacing: 1px;
margin-bottom: 30px;
border: none;
border-bottom: 1px solid rgb(63,63,63);
outline:none;
background: transparent;
}
.box select
{
position:relative;
width: 100%;
padding:10px 0;
font-size:16px;
color:rgb(63,63,63);
letter-spacing: 1px;
margin-bottom: 30px;
border: none;
border-bottom: 1px solid rgb(63,63,63);
outline:none;
background: transparent;
}
.box input[type="submit"]
{
background: transparent;
width: 100%;
border:none;
outline:none;
font-size: 16px;
color: rgb(118,118,118);
background: rgba(144, 144, 144, 0.2);
padding:15px 20px;
margin-top: 10px;
cursor: pointer;
border-radius:10px;
}

/* Phones */
@media (max-width: 768px)
{
.box
{
width: 90%;
}
}

/* Tablets */
@media (min-width: 768px)
{
.box
{
width:450px;
}
}

/* PC */
@media (min-width: 992px)
{
.box
{
width:450px;
}
}

/* desktop */
@media (min-width: 1200px)
{
.box
{
width:450px;
}
}

接下来是 footer.css ,控制备案信息的样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
a:hover, a:active {
color: #06c !important;
}

a:link, a:visited {
color: #50505c;
text-decoration: none;
}

.footer{
position: fixed;
left: 0px;
bottom: 10%;
width: 100%;
z-index: 9999;
text-align: center;
}

PHP

以下是查询页面 result.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>查询结果</title>
<link rel="stylesheet" href="css/input.css">
<link rel="stylesheet" href="css/footer.css">
</head>

<html>
<body>

<script type="text/javascript" size="150" alpha='0.3' zIndex="-1" src="js/ribbon.min.js"></script>

<?php
$servername = "localhost";
$username = "username";
$password = "yourpassword";
$dbname = "score";

// create connection
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection Failed:" . $conn->connect_error);
}

mysqli_query($conn, "set names utf8");
$result = mysqli_query($conn, "SELECT * FROM study WHERE sno = ".$_POST["sno"]);

if ($result->num_rows > 0)
{
$row = mysqli_fetch_assoc($result);
$fetch = True;
} else
{
$fetch = False;
}

switch ($_POST["subject"])
{
case "Calculus1":
$subjname = "工科数学分析I";
break;
case "Calculus2":
$subjname = "工科数学分析II";
break;
case "Matrix":
$subjname = "线性代数";
break;
}

?>

<div class="box">
<h2>物理试验班期中成绩查询系统</h2>
<table style="border-spacing: 0px 1rem; width: 100%">
<tr>
<td>学号: <?php if ($fetch) echo $row['sno']; else echo "Query Failed."; ?></td>
<td>姓名: <?php if ($fetch) echo $row['stu']; else echo "Query Failed."; ?></td>
</tr>
<tr>
<td>科目: <?php if ($fetch) echo $subjname; else echo "Query Failed."; ?></td>
<td>成绩: <?php if ($fetch) echo $row[$_POST["subject"]]; else echo "Query Failed."; ?></td>
</tr>
</table>

</div>

<div class="footer">
<a href="https://beian.miit.gov.cn/">Beian</a>
</div>

</body>
</html>