如何使用PHP/JavaScript/HTML/CSS创建动态网站?
概述
动态网站是指用户从客户端向服务器端发送请求,数据在后端渲染的网站。由于PHP是一种服务器端脚本语言,因此在创建动态网站时它起着主要作用。一些动态网站例如网站管理面板或特定用户的搜索内容。因此,HTML、CSS和JavaScript用于网站的客户端以创建用户前端,而PHP则用作后端脚本语言来渲染和检索用户数据并将其发送回前端用户。
算法
从官方网站下载并安装XAMPP服务器。
现在启动Apache服务器,以便在本地计算机上运行网站。
现在在目录的XAMPP文件夹中打开“htdocs”文件夹。
现在创建一个名为“dynamicWeb”的文件夹。
现在创建一个主要的“index.php”文件来开始构建网站。
现在将HTML基本结构添加到“index.php”文件中。
现在将HTML表单添加到页面,并分别将method和action属性设置为“POST”和“data.php”。“data.php”是编写PHP脚本的后端文件。
现在向表单添加两个输入字段作为名称和技术,以及提交按钮。
现在在同一文件夹中创建一个“data.php”文件。
使用PHP的开始和结束标签来使用PHP。
<?php?>
现在创建if语法来检查服务器请求是POST还是GET。
if($_SERVER["REQUEST_METHOD"]=="POST"){}
现在创建一个名为name的变量,它将存储来自客户端的名称。
$name = $_POST['name']; $tech = strtolower($_POST['tech']);
如果请求是POST,则创建一个名为“MyTech”的类,并创建一个公共变量“username”。
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结束标签之外,向页面添加一个HTML按钮,该按钮具有“history.back()”函数。
<html> <body> <button onclick="history.back()">◀ Back</button> </body> </html>
使用PHP的动态网站已准备就绪。
现在打开浏览器,并在地址栏中输入“localhost/dynamicWeb”。
https:///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{
public $username;
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数据库,这使得创建动态网站更加有用。因此,当用户向服务器发送请求时,服务器从数据库中检索数据,并仅向用户发送用户请求的特定信息。
数据结构
网络
关系型数据库管理系统
操作系统
Java
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP