成績登記

以下是由python web所架的成績繳交網站當幹部小老師的，~~都懶得輸入成績~~，所以我寫了個好東西如果怕對方輸入假成績，還有上傳圖片的功能 第一次玩python web哈哈

整體佈局

1
.
2
├── app.py
3
├── grades.csv
4
├── templates
5
│   ├── index.html
6
│   └── success.html
7
└── uploads
8
    └── 4.jpg

1
from flask import Flask, request, render_template, redirect, url_for
2
import os
3
app = Flask(__name__)
4
UPLOAD_FOLDER = 'uploads'
5
os.makedirs(UPLOAD_FOLDER, exist_ok=True)
6

7
@app.route('/')
8
def index():
9
    return render_template('index.html')
10

11
@app.route('/submit', methods=['POST'])
12
def submit():
13
    seatNumber = request.form['seatNumber']
14
    score = request.form['score']
15
    photo = request.files['photo']
16

17
    if photo:
18
        filename = f"{seatNumber}.jpg"
19
        photo.save(os.path.join(UPLOAD_FOLDER, filename))
20

21
    with open('grades.csv', 'a') as file:
22
        file.write(f'{seatNumber}, {score}\n')
23

24
    return redirect(url_for('success'))
25

26
@app.route('/success')
27
def success():
28
    return render_template('success.html')
29

30
if __name__ == '__main__':
31
    app.run(host='0.0.0.0', port=60000)

1
<!DOCTYPE html>
2
<html lang="zh-Hant">
3
<head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>地科成績</title>
7
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
8
  <style>
9
    .container {
10
      margin-top: 40px;
11
    }
12
    .card {
13
      border-radius: 10px;
14
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
15
      transition: box-shadow 0.3s ease-in-out;
16
    }
17
    .card:hover {
18
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
19
    }
20
    .btn-primary {
21
      background-color: #7778d3;
22
      border: none;
23
      color: white;
24
      padding: 10px 24px;
25
      text-align: center;
26
      text-decoration: none;
27
      display: inline-block;
28
      font-size: 16px;
29
      border-radius: 5px;
30
      transition-duration: 0.4s;
31
      cursor: pointer;
32
    }
33
  </style>
34
</head>
35
<body>
36
  <div class="container">
37
    <div class="row">
38
      <div class="col-md-6 offset-md-3">
39
        <div class="card p-4">
40
          <h2 class="text-center mb-4">地科成績</h2>
41
          <form action="/submit" method="POST" enctype="multipart/form-data">
42
            <div class="form-group">
43
              <label for="seatNumber">座號：</label>
44
              <input type="number" class="form-control" id="seatNumber" name="seatNumber" required>
45
            </div>
46
            <div class="form-group">
47
              <label for="score">分數：</label>
48
              <input type="number" class="form-control" id="score" name="score" required>
49
            </div>
50
            <div class="form-group">
51
              <label for="photo">上傳照片：</label>
52
              <input type="file" class="form-control-file" id="photo" name="photo" accept="image/*" required>
53
            </div>
54
            <button type="submit" class="btn btn-primary btn-block">提交</button>
55
          </form>
56
          <div id="result" class="mt-3 text-center"></div>
57
        </div>
58
      </div>
59
    </div>
60
  </div>
61

62
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
63
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
64
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
65
</body>
66
</html>

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
    <title>提交成功</title>
7
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
8
    <style>
9
        .container {
10
            margin-top: 20%;
11
        }
12
        .alert-success {
13
            font-size: 24px;
14
            text-align: center;
15
        }
16
    </style>
17
</head>
18
<body>
19
    <div class="container">
20
        <div class="row">
21
            <div class="col-md-6 offset-md-3">
22
                <div class="alert alert-success">
23
                    成績已成功提交！
24
                </div>
25
            </div>
26
        </div>
27
    </div>
28
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
29
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
30
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
31
</body>
32
</html>

Thanks for reading!

Sun Jul 21 2024

390 words · 5 minutes

Daily 不知道