使用PHP创建一个计算字符串MD5值的页面

/ admin

使用PHP创建一个计算字符串MD5值的页面

使用Bootstrap构建HTML页面

安照之前的文章在网站根目录放置好bootstrap相关的文件。

主要内容是Bootstrap表单的内容，从Bootstrap手册上照搬就行了

<form action="#">
<div class="form-group">
<label for="string">字符串:</label>
<input type="text" class="form-control" id="text">
</div>
<button type="submit" class="btn btn-primary">提交</button>
<input class="btn btn-primary" type="reset" value="重置">
</form>

再添加h1标签，边框，阴影等，最后让所有元素居中显示text-align:center;

效果：

Alt text

PHP部分

点击提交按钮后，数据在当前页处理而不是跳转到其他页。

<form action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">

POST 数据然后进行MD5值的计算

<?php
if(isset($_POST['SubmitButton']))
{
    $str = $_POST['text'];
    echo md5($str);
}
?>

先判断是否点击了提交按钮，再进行下一步计算

完整代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>MD5</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="./static/css/bootstrap.css" rel="stylesheet">
    <link href="./static/css/style.css" rel="stylesheet">
    <script src="./static/jquery/jquery-3.3.1.js"></script>
    <script src="./static/js/bootstrap.js"></script>
    <script src="./static/js/scripts.js"></script>
</head>
<body>
<div class="container content border shadow-lg p-3 mb-5 bg-white rounded">
<h1>
计算MD5值
</h1>
<form action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
<div class="form-group">
<label for="string">字符串:</label>
<input type="text" class="form-control" id="text" name="text">
</div>
<button type="submit" class="btn btn-primary" name="SubmitButton">提交</button>
<input class="btn btn-primary" type="reset" value="重置">
</form>
<div class="output">
<?php
if(isset($_POST['SubmitButton']))
{
    $str = $_POST['text'];
    echo md5($str);
}
?>
</div>
</div>
</body>
</html>

后续问题

  • 表单验证，JS端的验证，PHP端的验证
  • 刷新页面之后不会出现重新提交表单的情况
  • 是否能仅用JS来实现MD5计算
  • 页面更加美化和功能的增多