Как подключить веб-страницу к базе данных (локально и онлайн)
Я построил базу данных с прикрепленными таблицами с помощью MySQL, теперь мне нужно иметь возможность использовать Javascript для подключения к серверу для вставки и извлечения данных. Например, когда я создаю учетную запись пользователя, после того как информация была введена в HTML и собрана с помощью Javascript, мне нужно иметь возможность хранить информацию о пользователе, а позже, когда мне нужно отобразить заказы, мне нужно иметь возможность вытащить все заказы с определенным статусом Заказа для отображения в таблице.
Мне нужно сначала показать, как это сделать локально, что должно быть проще всего, а затем, если это возможно, через интернет.
Я построил данные с помощью своего MySQL workbench 6.3, но я не знаю, как подключить его к веб-страницам, которые у меня уже есть, мне также интересно, будет ли SQL Server работать лучше, чем MySQL? Кроме того, какой самый лучший сервер я мог бы использовать в моем случае, который позволит мне использовать сервер с любого ноутбука или рабочей станции вместо того, чтобы иметь его локально?
Пожалуйста, мне нужна некоторая обратная связь по этому поводу, чтобы я мог быть направлен в правильном направлении и сэкономить некоторое время, чтобы работать над завершением этой веб-страницы.
Ниже приведен код для создания учетной записи, и мне нужно проверить этот код на базе данных и убедиться, что он правильно подключается.
Что я уже пробовал:
<!DOCTYPE html>
<html>
<head>
<title>Create an user account</title>
<link rel="stylesheet" href="create_user_account.css">
</head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--bootstrap installation-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<body>
<!--title bar-->
<div class="jumbotron jumbotron-fluid bg-warning text-white" style="background: #aaa;">
<div class="container">
<h1 class="display-3">ZEN Restaurant</h1>
<p class="lead">For your breakfast, lunch and dinner</p>
</div>
</div>
<!--entry fields-->
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<div class="border-bottom font-size-menuCat">Create an user account</div>
<br><br/>
<div class="row">
<div class="col-sm-3 col-md-2">
<p class="font-card-info">Username</p>
</div>
<div class="col-sm-3 col-md-4">
<input type="text" class="form-control" style="height:50px" id="account_username"/>
<p><small class="form-text text-muted">Username must have more than 6 characters, less than 30 characters, and contain both letters and numbers.</small></p>
</div>
<div class="col-sm-3 col-md-2">
<p class="font-card-info">Password</p>
</div>
<div class="col-sm-3 col-md-4">
<input type="text" class="form-control" style="height:50px" id="account_password"/>
<p><small class="form-text text-muted">Password must have more than 6 characters, less than 20 characters, and contain both uppercase letters, lowercase letters, and numbers.</small></p>
</div>
</div>
<div class="row">
<div class="col-sm-3 col-md-2">
<p class="font-card-info">First Name</p>
</div>
<div class="col-sm-3 col-md-4">
<input type="text" class="form-control" style="height:50px" id="account_firstName"/>
</div>
<div class="col-sm-3 col-md-2">
<p class="font-card-info">Last Name</p>
</div>
<div class="col-sm-3 col-md-4">
<input type="text" class="form-control" style="height:50px" id="account_lastName"/>
</div>
</div>
<div class="row">
<div class="col-sm-3 col-md-2">
<p class="font-card-info">Address</p>
</div>
<div class="col-sm-3 col-md-4">
<input type="text" class="form-control" style="height:50px" id="account_deliveryAddress"/>
</div>
<div class="col-sm-3 col-md-2">
<p class="font-card-info">City</p>
</div>
<div class="col-sm-3 col-md-4">
<input type="text" class="form-control" style="height:50px" id="account_city"/>
</div>
</div>
<div class="row">
<div class="col-sm-3 col-md-2">
<p class="font-card-info">State</p>
</div>
<div class="col-sm-3 col-md-4">
<input type="text" class="form-control" style="height:50px" id="account_state"/>
</div>
<div class="col-sm-3 col-md-2">
<p class="font-card-info">Zip Code</p>
</div>
<div class="col-sm-3 col-md-4">
<input type="text" class="form-control" style="height:50px" id="account_zipCode"/>
</div>
</div>
<div class="row">
<div class="col-sm-3 col-md-2">
<p class="font-card-info">Phone Number</p>
</div>
<div class="col-sm-3 col-md-4">
<input type="text" class="form-control" style="height:50px" id="account_phoneNumber"/>
</div>
<div class="col-sm-3 col-md-2">
<p class="font-card-info">Email</p>
</div>
<div class="col-sm-3 col-md-4">
<input type="text" class="form-control" style="height:50px" id="account_email"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-3"></div>
<div class="col-md-2 col-sm-3" align="right"><button type="button" class="btn btn-info" onclick="createAccount()">Create Account</button></div>
</div>
</div>
<!--bottom bar-->
<div class="alert sticky-bottom alert-dark text-center" role="alert">
<p><small>®2018. All Rights Reserved.</small></p>
</div>
<!--call js script-->
<script type="text/javascript" src="create_user_account.js"></script>
</body>
</html>
F-ES Sitecore
Клиентский javascript (js, работающий в браузере) не может подключаться к базам данных. Вам понадобится какой - то сервер для подключения, поэтому веб-сервер, такой как IIS или Apache и т. д. Это остановит ваше приложение, работающее автономно на компьютере, но если вы хотите автономное приложение, то html-это неправильная технология для использования. Кроме того, базы данных, как правило, основаны на сервере и также не распространяются.