如何将网页连接到数据库（本地和在线） [英] How to connect a web-page to a database (locally and online)
问题描述
我使用MySQL构建了一个附带表的数据库，现在我需要能够使用Javascript连接到服务器来插入和提取数据。例如，当我创建一个用户帐户时，在HTML中输入信息并使用Javascript收集后，我需要能够存储用户信息，以后当我需要显示订单时，我需要能够使用特定的OrderStatus拉出所有订单以显示在表格中。
我需要首先能够显示如何在本地执行此操作，这应该是更容易的任务如果可能的话，然后在线上线。
我使用我的MySQL工作台6.3构建了数据，但我不知道如何将它连接到我的网页上已经有了，我也想知道SQL Server是否比MySQL更好用？另外，在我的情况下，我能用的最好的服务器是什么，它允许我从任何笔记本电脑或工作站使用服务器而不是在本地使用服务器？
请我需要一些反馈意见，这样我就能以正确的方式进行指导，节省一些时间来完成这个网页。
下面是创建一个代码的代码帐号，我需要在数据库上测试这个代码，并确保它正确连接。
我尝试过：
I built a database with the attached tables using MySQL, Now I need to be able to use Javascript to connect to the server to insert and pull data. For example, when I'm creating a user account, after the information has been inputted in the HTML and collected using Javascript, I need to able to store the user information, and later when I need to display orders, I need to be able to pull all orders with a specific OrderStatus to show in a table.
I need to first be able to show how to do this locally, which should be the easier task, and then over online if possible.
I built the data with my MySQL workbench 6.3, but I don't know how to connect it to the web pages that I already have, I'm also wondering if SQL Server will work better than MySQL? In addition, What is the best server that I could in my case which will allow me to use the server from any laptop or workstation instead of having it locally?
Please I need some feedback on this so I could be directed in the right way and save some time to work on finishing this web page.
Below is the code for creating an account, and I need to test this code on a database and make sure that it is connecting right.
What I have tried:
<!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>
推荐答案
如果您可以使用Firebase存储数据，则无需PHP即可存储和检索数据。如果你仍然想使用MYSQL，那么无论你尝试过什么都不可能。尝试使用node.js.
If you can use Firebase for storing data, you can store and retrieve data without PHP. If you still want to use MYSQL, it is not possible with whatever you have tried. Try with node.js.
这篇关于如何将网页连接到数据库（本地和在线）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
