一个简单的成绩查询系统
fengxiaot Lv4
  2021-01-12 17:50:16 2021-01-12 17:50  

寒假在家闲着没事，复习了一下大学计算机基础学的简单的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>