Conception de l'interface utilisateur et optimisation du système de vote en ligne PHP
Introduction :
Avec le développement d'Internet, divers systèmes de vote en ligne sont de plus en plus largement utilisés. En tant que langage de script côté serveur open source et riche en fonctionnalités, PHP est devenu l'un des langages préférés pour la création de systèmes de vote en ligne. Dans cet article, nous explorerons comment concevoir et optimiser l'interface utilisateur d'un système de vote en ligne en PHP.
1. Conception de l'interface
<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>
<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>
2. Optimisation de l'interface
<!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>
<?php session_start(); // 检查用户是否已经投过票 if (isset($_SESSION['hasVoted']) && $_SESSION['hasVoted']) { die('您已经投过票了!'); } // 用户点击投票按钮时执行的逻辑 if ($_SERVER['REQUEST_METHOD'] === 'POST') { // 处理投票逻辑 // ... // 标记用户已经投过票 $_SESSION['hasVoted'] = true; } ?>
Résumé :
Grâce à une conception et à une optimisation raisonnables de l'interface utilisateur, nous pouvons améliorer l'expérience utilisateur du système de vote en ligne PHP. Cet article présente des technologies telles qu'une conception de mise en page concise et claire, l'affichage visuel des données et une conception réactive. Dans le même temps, nous avons également ajouté du code PHP pour empêcher les utilisateurs de voter à plusieurs reprises. J'espère que ces exemples de codes vous seront utiles pour créer l'interface utilisateur de votre système de vote en ligne PHP !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!