html+js+css数据库安装页源码-忆思阁博客-专注精品资源分享

图片[1]-html+js+css数据库安装页源码-忆思阁博客-专注精品资源分享

html页源码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>数据库安装</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f1f1f1;
    }

    #form {
      margin: auto;
      width: 500px;
      padding: 20px;
      background-color: #fff;
      border-radius: 5px;
      box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
    }

    h1 {
      text-align: center;
    }

    input[type=text], input[type=password] {
      width: 100%;
      padding: 12px 20px;
      margin: 8px 0;
      display: inline-block;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
    }

    .button {
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 10px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 10px 0;
            cursor: pointer;
            border-radius: 5px;
            width: 45%;
    }

    button:hover {
      background-color: #45a049;
    }

    .error {
      color: red;
    }
        .log {
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            margin-top: 20px;
            padding: 10px;
            height: 200px;
            overflow: auto;
        }
  </style>
</head>
<body>
  <div id="form">
    <h1>数据库安装</h1>
    <form>
      <label for="hostname">主机名：</label>
      <input type="text" id="hostname" name="hostname" placeholder="输入主机名" value="localhost">

      <label for="username">用户名：</label>
      <input type="text" id="username" name="username" placeholder="输入用户名" value="root">

      <label for="password">密码：</label>
      <input type="password" id="password" name="password" placeholder="输入密码">

      <label for="database">数据库名称：</label>
      <input type="text" id="database" name="database" placeholder="输入数据库名称" value="testdb">

	  <button type="button" class="button" onclick="testConnection()">检测连接</button>
      <button type="button" class="button" onclick="installDatabase()">安装数据库</button>
    </form>
	<div class="log" id="log"></div>
  </div>

  <script>
        function writeToLog(message) {
            var log = document.getElementById('log');
            var p = document.createElement('p');
            p.innerHTML = message;
            log.appendChild(p);
        }
  
    function testConnection() {
      var hostname = document.getElementById("hostname").value;
      var username = document.getElementById("username").value;
      var password = document.getElementById("password").value;
      var database = document.getElementById("database").value;

      var xhr = new XMLHttpRequest();
      xhr.open("POST", "4.php");
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      xhr.onreadystatechange = function () {
        if (xhr.status === 500) {
			writeToLog('《连接失败》 ' + this.responseText);
        } else if(this.responseText != ""){
            writeToLog('《连接成功》' + this.responseText);
        }
      };
      xhr.send("test=net" + "&hostname=" + hostname + "&username=" + username + "&password=" + password + "&database=" + database);
    }

    function installDatabase() {
      var hostname = document.getElementById("hostname").value;
      var username = document.getElementById("username").value;
      var password = document.getElementById("password").value;
      var database = document.getElementById("database").value;

      var xhr = new XMLHttpRequest();
      xhr.open("POST", "4.php");
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      xhr.onreadystatechange = function () {
        if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
          if (xhr.status === 500) {
			writeToLog('《安装失败》' + this.responseText);
          } else {
			writeToLog('《数据库安装成功》' + this.responseText);
          }
        }
      };
      xhr.send("hostname=" + hostname + "&username=" + username + "&password=" + password + "&database=" + database);
    }
  </script>
</body>
</html>

PHP页源码

<?php

// 获取POST请求参数
$host = $_POST['hostname'];
$username = $_POST['username'];
$password = $_POST['password'];
$database = $_POST['database'];

// 连接到MySQL
$mysqli = @new mysqli($host, $username, $password, $database);

// 检查连接是否成功
if ($mysqli->connect_error) {
  http_response_code(500);
  echo '无法连接到数据库服务器: ' . $mysqli->connect_error;
  exit();
}elseif($_POST['test']=="net"){
	echo '数据库服务器连接成功！';exit();
}

// 创建数据库
if (!$mysqli->query('CREATE DATABASE IF NOT EXISTS ' . $database)) {
  http_response_code(500);
  echo '无法创建数据库: ' . $mysqli->error;
  exit();
}else{
	echo '创建数据库成功！';
}

// 选择数据库
if (!$mysqli->select_db($database)) {
  http_response_code(500);
  echo '无法选择数据库: ' . $mysqli->error;
  exit();
}else{
	echo '选择数据库成功！';
}




// 创建"users"表 字段:uid(整数型且为主键) name(文本型且不能为空) qq(文本型 可以为空)
if (!$mysqli->query('CREATE TABLE IF NOT EXISTS users (
  uid INT(11) NOT NULL AUTO_INCREMENT,
  name VARCHAR(255) NOT NULL,
  qq VARCHAR(255),
  PRIMARY KEY (uid)
)')) {
  http_response_code(500);
  echo '无法创建用户表格: ' . $mysqli->error;
  exit();
}else{
	echo '创建用户表users成功！';
}

// 创建"class"表格 字段:id(整数型且为主键) name_class(文本型 可以为空)
if (!$mysqli->query('CREATE TABLE IF NOT EXISTS class (
  id INT(11) NOT NULL AUTO_INCREMENT,
  name_class VARCHAR(255),
  PRIMARY KEY (id)
)')) {
  http_response_code(500);
  echo '无法创建课程表格: ' . $mysqli->error;
  exit();
  
}else{
	echo '创建课程表class成功！';
}

echo '安装数据库成功！';

?>

文章版权归作者所有，未经允许请勿转载。

THE END