創建數據庫文件
源碼:
mysql -u root -p --登錄數據庫
create database test; --創建數據庫
use test; --進入數據庫
create table account --創建數據表
(id int(10) unsigned auto_increment primary key,
username varchar(30) not null,
password varchar(30) not null)
default charset=utf8;
insert into account --插入數據
(username, password)
values
("123","123456");
創建登錄頁面
源碼(源碼來自:源碼之家 http://www.mycodes.net/190/9600.htm):
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>login</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
</head>
<body>
<div class="container demo-1">
<div class="content">
<div id="large-header" class="large-header">
<canvas id="demo-canvas"></canvas>
<div class="logo_box">
<h3>歡迎你</h3>
<form action="login.php" name="f" method="post">
<div class="input_outer">
<span class="u_user"></span>
<input name="username" class="text" style="color: #FFFFFF !important" type="text" placeholder="請輸入賬戶">
</div>
<div class="input_outer">
<span class="us_uer"></span>
<input name="password" class="text" style="color: #FFFFFF !important; position:absolute; z-index:100;"value="" type="password" placeholder="請輸入密碼">
<div class="mb2">
<input class="act-but submit" type="submit" style="width: 330px ; height: 50px ; color: #FFFFFF" value="登錄" />
</div>
</form>
</div>
</div>
</div>
</div>
<script src="js/TweenLite.min.js"></script>
<script src="js/EasePack.min.js"></script>
<script src="js/rAF.js"></script>
<script src="js/demo-1.js"></script>
</body>
</html>
(注:相關的js、img、css文件夾省略)
服務器端的PHP代碼:
<?php session_start(); header("Content-type:text/html;charset=utf-8"); $link = mysqli_connect('localhost','root','toor','test'); if (!$link) { die("連接失敗:".mysqli_connect_error()); } $username = $_POST["username"];//用戶名 $password = $_POST["password"];//密碼 if($username == "") { echo"<script type='text/javascript'>alert('請填寫用戶名');location='index.html'; </script>"; } if($password == "") { echo"<script type='text/javascript'>alert('請填寫密碼');location='index.html';</script>"; } $sql = "select * from account_information"; $result = mysqli_query($link, $sql); $rows = mysqli_fetch_array($result); echo "<script type='text/javascript'>alert('登陸成功');location='test_hello.html';</script>"; ?>
效果圖: