极客笔记CSS 如何使用PHP / javascript / HTML / CSS创建动态网站
动态网站是用户通过客户端向服务器端发送请求，并在后端渲染数据的网站。由于PHP是一种服务器端脚本语言，因此在创建动态网站时起主要作用。一些动态网站例如网站管理员面板或特定用户的搜索内容。因此，在网站的客户端使用HTML，CSS和JavaScript创建用户前端，而PHP作为后端脚本语言用于渲染和检索用户数据，并将其返回给前端用户。
步骤
- 从官方网站下载并安装XAMPP服务器。
-
现在启动apache服务器以在本地计算机上运行网站。
-
现在打开您目录中XAMPP文件夹中的“htdocs”文件夹。
-
创建一个名为“dynamicWeb”的文件夹。
-
现在创建一个主要的“index.php”文件来开始构建网站。
-
现在在“index.php”文件中添加HTML样板。
-
现在在页面上使用方法和动作属性将HTML表单添加到页面上，属性值分别为“POST”和“data.php”。 “data.php”是后端文件，其中包含PHP脚本。
-
现在在表单中添加两个输入字段，作为名称和技术，以及提交按钮。
-
现在在同一文件夹中创建一个“data.php”文件。
-
使用开放和关闭的PHP标签来使用PHP。
<?php?>
- 现在创建一个语法来检查服务器请求是POST还是GET。
if($_SERVER["REQUEST_METHOD"]=="POST"){}
- 现在创建一个名为 “name” 的变量，该变量将存储客户端的名称。
$name = $_POST['name'];
$tech = strtolower($_POST['tech']);
- 如果请求是POST，则创建一个名为“ MyTech”的类，并创建一个公共变量“用户名”。
class MyTech{
public $username;
}
- 现在创建三个函数：frontend()、backend() 和 database()，这些函数都接受参数“name”。
public function frontend(uname){
echo "Hello ".uname .', your FrontEnd Content is here. '. "<li>HTML</li> <li>CSS</li> <li>Bootstrap</li> <li>JavaScript</li> <li>ReactJs</li>";
}
public function backend(uname){
echo "Hello ".uname .', your BackEnd Content is here.'."<li>NodeJs</li><li>ExpressJs</li><li>Middlewares</li><li>Http Methods</li>";
}
public function database(uname){
echo "Hello ".uname .', your Database Content is here.'."<li>MySql</li><li>MongoDB</li><li>DynamoDB</li><li>Casandra</li><li>PostgreSql</li>";
}
- 现在创建另一个if-else函数，并通过前端检查以下条目。
if (tech == "frontend" ||tech == "backend" || $tech == "database") {}
- 如果条件满足，则创建该类的对象，否则打印警告。
$myObj= new MyTech();
$myObj->$tech($username=$name);
else{
echo "Hello ". $name .", ". $tech ." will be uploaded shortly.";
}
- 现在在php闭合标签外创建一个包含函数”history.back()”的HTML按钮。
<html>
<body>
<button onclick="history.back()">◀ Back</button>
</body>
</html>
-
动态网站已经准备就绪。
-
现在打开浏览器，在地址栏中键入“localhost/dynamicWeb”。
http://localhost/dynamicWeb/
- 网站将以其功能打开。
示例
以下是一个示例，您可以学习如何使用HTML、CSS、JavaScript和PHP创建动态网站。其中，前端部分是使用HTML和CSS创建的，服务器端脚本则使用PHP完成。在此示例中，我们创建了一个功能，其中有一个表单，用户在表单中输入他的名字和他想要检索信息的技术名称，并附带一个按钮。当用户点击按钮时，前端的信息将被发送到服务器上进行处理，并将数据渲染并发送回用户。
index.php
<html>
<head>
<title>Dynamic Web</title>
<style>
* {
margin: 0;
padding: 0;
}
#dropFrame {
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
display: flex;
align-items: center;
justify-content: center;
}
#myDrop {
width: 20rem;
box-shadow: 0 0px 47px #00000021;
display: flex;
padding: 2rem;
border-radius: 0.8rem;
flex-direction: column;
gap: 1rem;
}
select,
input {
width: 100%;
padding: 0.5rem;
border-radius: 5px;
outline: none;
border: 1px solid rgb(199, 199, 199);
}
button {
padding: 0.5rem 2rem;
width: fit-content;
border-radius: 5px;
background-color: green;
color: white;
outline: none;
border: none;
cursor: pointer;
margin: auto;
}
</style>
</head>
<body onload="popUp()">
<div id="dropFrame">
<form action="data.php" method="post" id="myDrop">
<div style="text-align:center;color:green;font-weight:700;">tutorialspoint.com</div>
<div>
<input type="text" placeholder="Write your name" name="name" id="name" required />
</div>
<div>
<input type="text" name="tech" id="tech" placeholder="Choose your technology*" />
</div>
<div>
<label style="color:red">Available Technologies</label>
<li>Frontend</li>
<li>Backend</li>
<li>Database</li>
</div>
<button type="submit">Get Content</button>
</form>
</div>
</body>
</html>
data.php
<?php
if(_SERVER["REQUEST_METHOD"]=="POST"){
name = _POST['name'];
tech = strtolower(_POST['tech']);
class MyTech{
publicusername;
public function frontend(uname){
echo "Hello ".uname .', your FrontEnd Content is here.'."<li>HTML</li><li>CSS</li><li>Bootstrap</li><li>JavaScript</li><li>ReactJs</li>";
}
public function backend(uname){
echo "Hello ".uname .', your BackEnd Content is here.'."<li>NodeJs</li><li>ExpressJs</li><li>Middlewares</li><li>Http Methods</li>";
}
public function database(uname){
echo "Hello ".uname .', your Database Content is here.'."<li>MySql</li><li>MongoDB</li><li>DynamoDB</li><li>Casandra</li><li>PostgreSql</li>";
}
}
if (tech == "frontend" ||tech == "backend" || tech == "database") {
myObj= new MyTech();
myObj->tech(username=name);
}else{
echo "Hello ". name .", ".tech ." will be uploaded shortly.";
}
}
?>
<html>
<body>
<button onclick="history.back()">◀ Back</button>
</body>
</html>>
结论
PHP是一种很好的服务器端脚本语言，可以帮助开发人员将HTML代码嵌入其中。为了使PHP项目更具可扩展性，我们还可以使用PHP框架，如Laravel、Symfony和CakePHP，它们是最流行的框架。在上面的示例中，我们使用了类和对象的概念来获取用户数据，但我们也可以使用MySql数据库，使得动态网站更加有用。因此，当用户向服务器发送请求时，服务器从数据库中检索数据，并仅向用户发送用户所请求的特定信息。