Reka bentuk antara muka pengguna dan pengoptimuman sistem pengundian dalam talian PHP-tutorial php-php.cn

Reka bentuk antara muka pengguna dan pengoptimuman sistem pengundian dalam talian PHP

王林

Lepaskan： 2023-08-09 20:46:01

asal

1616 orang telah melayarinya

Reka bentuk antara muka pengguna dan pengoptimuman sistem pengundian dalam talian PHP

Pengenalan:
Dengan perkembangan Internet, pelbagai sistem pengundian dalam talian semakin digunakan secara meluas. Sebagai sumber terbuka, bahasa skrip bahagian pelayan yang kaya dengan ciri, PHP telah menjadi salah satu bahasa pilihan untuk membina sistem pengundian dalam talian. Dalam artikel ini, kami akan meneroka cara mereka bentuk dan mengoptimumkan antara muka pengguna sistem pengundian dalam talian dalam PHP.

1. Reka bentuk antara muka

Reka bentuk susun atur yang ringkas dan jelas
Reka bentuk antara muka pengguna yang baik boleh memberikan pengalaman yang mesra pengguna. Apabila mereka bentuk antara muka pengguna sistem pengundian, kita harus memberi perhatian kepada kesederhanaan dan kejelasan susun atur. Sistem pengundian biasa harus mengandungi bahagian teras berikut:
Tajuk soalan
Senarai pilihan
Butang mengundi

<html>
<head>
<title>投票系统</title>
</head>
<body>
<h2>问题标题</h2>
<form method="post" action="">
  <ul>
    <li><input type="radio" name="option" value="option1">选项1</li>
    <li><input type="radio" name="option" value="option2">选项2</li>
    <li><input type="radio" name="option" value="option3">选项3</li>
  </ul>
  <input type="submit" value="投票">
</form>
</body>
</html>

Salin selepas log masuk

Paparan data visual
Dalam sistem pengundian, pengguna bukan sahaja mengundi, tetapi juga perlu memahami undian semasa keadaan. Oleh itu, adalah perlu untuk menambah paparan data visual pada antara muka pengguna.

<html>
<head>
<title>投票系统</title>
<style>
.chart {
  display: inline-block;
  width: 200px;
  height: 20px;
  background-color: #ccc;
}
.option1 {
  background-color: green;
}
.option2 {
  background-color: orange;
}
.option3 {
  background-color: blue;
}
</style>
</head>
<body>
<h2>问题标题</h2>
<form method="post" action="">
  <ul>
    <li><input type="radio" name="option" value="option1">选项1</li>
    <li><input type="radio" name="option" value="option2">选项2</li>
    <li><input type="radio" name="option" value="option3">选项3</li>
  </ul>
  <input type="submit" value="投票">
</form>
<h3>投票结果</h3>
<div class="chart option1" style="width: 60%"></div>
<div class="chart option2" style="width: 30%"></div>
<div class="chart option3" style="width: 10%"></div>
</body>
</html>

Salin selepas log masuk

2. Pengoptimuman Antara Muka

Reka Bentuk Responsif
Memandangkan pengguna kini menggunakan pelbagai peranti berbeza untuk mengakses halaman web, kami perlu menggunakan reka bentuk responsif pada sistem pengundian untuk menyesuaikan diri dengan peranti dengan saiz skrin yang berbeza.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>投票系统</title>
<style>
/* 布局样式 */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f1f1f1;
}
.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}
/* 表单样式 */
form {
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
}
/* 图表样式 */
.chart {
  display: inline-block;
  height: 20px;
  background-color: #ccc;
  margin-bottom: 10px;
}
.option1 {
  background-color: green;
}
.option2 {
  background-color: orange;
}
.option3 {
  background-color: blue;
}
</style>
</head>
<body>
<div class="container">
  <h2>问题标题</h2>
  <form method="post" action="">
    <ul>
      <li><input type="radio" name="option" value="option1">选项1</li>
      <li><input type="radio" name="option" value="option2">选项2</li>
      <li><input type="radio" name="option" value="option3">选项3</li>
    </ul>
    <input type="submit" value="投票">
  </form>
  <h3>投票结果</h3>
  <div class="chart option1" style="width: 60%"></div>
  <div class="chart option2" style="width: 30%"></div>
  <div class="chart option3" style="width: 10%"></div>
</div>
</body>
</html>

Salin selepas log masuk

Menghalang pengundian berulang
Untuk memastikan ketepatan keputusan pengundian, kami perlu mengehadkan pengundian pengguna untuk mengelakkan pengguna mengundi berulang kali. Ini boleh dicapai dengan menambahkan logik berikut pada kod PHP:

<?php
session_start();

// 检查用户是否已经投过票
if (isset($_SESSION['hasVoted']) && $_SESSION['hasVoted']) {
  die('您已经投过票了！');
}

// 用户点击投票按钮时执行的逻辑
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  // 处理投票逻辑
  // ...

  // 标记用户已经投过票
  $_SESSION['hasVoted'] = true;
}
?>

Salin selepas log masuk

Ringkasan:
Melalui reka bentuk dan pengoptimuman antara muka pengguna yang munasabah, kami boleh meningkatkan pengalaman pengguna sistem pengundian dalam talian PHP. Artikel ini memperkenalkan teknologi seperti reka bentuk reka letak yang ringkas dan jelas, paparan data visual dan reka bentuk responsif. Pada masa yang sama, kami juga menambah kod PHP untuk menghalang pengguna daripada mengundi berulang kali. Saya harap kod contoh ini akan membantu anda membina antara muka pengguna sistem pengundian dalam talian PHP anda!

Atas ialah kandungan terperinci Reka bentuk antara muka pengguna dan pengoptimuman sistem pengundian dalam talian PHP. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!