Home > Article > Backend Development > User interface design and optimization of PHP online voting system
User interface design and optimization of PHP online voting system
Introduction:
With the development of the Internet, various online voting systems are becoming more and more widely used . As an open source, feature-rich server-side scripting language, PHP has become one of the preferred languages for building online voting systems. In this article, we will explore how to design and optimize the user interface of an online voting system in PHP.
1. Interface design
<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. Interface optimization
<!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; } ?>
Summary:
Through reasonable user interface design and optimization, we can improve the user experience of the PHP online voting system. This article introduces technologies such as concise and clear layout design, visual data display, and responsive design. At the same time, we also added PHP code to prevent users from voting repeatedly. I hope these sample codes will be helpful for you to build the user interface of your PHP online voting system!
The above is the detailed content of User interface design and optimization of PHP online voting system. For more information, please follow other related articles on the PHP Chinese website!