如何使用 PHP/javascript/HTML/CSS 创建动态网站?

htmlcssweb developmentfront end technology更新于 2024/12/9 22:04:17

概述

动态网站是指用户从客户端向服务器端发送请求，并在后端渲染数据的网站。由于 PHP 是一种服务器端脚本语言，因此它在创建动态网站时起着主要作用。有些动态网站类似于网站管理面板或特定用户的搜索内容。因此，网站的客户端使用 HTML、CSS 和 JavaScript 来创建用户前端，而 PHP 则用作后端脚本语言，用于在前端渲染和检索用户数据并返回给用户。

算法

从官方网站下载并安装 XAMPP 服务器。
现在启动 Apache 服务器，在本地计算机上运行网站。
现在打开目录下 XAMPP 文件夹中的"htdocs"文件夹。
现在创建一个名为"dynamicWeb"的文件夹。
现在创建一个主"index.php"文件来开始构建网站。
现在将 HTML 样板添加到"index.php"文件中。
现在添加 HTML 表单添加到页面，其 method 和 action 属性的值分别为"POST"和"data.php"。"data.php"是后端文件，用于编写 PHP 脚本。
现在在表单中添加两个输入字段，分别为 name 和 technology，并添加提交按钮。
现在在同一文件夹中创建一个"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 结束标记之外使用函数"history.back()"创建一个 HTML 按钮到页面

<html>
   <body>
   <button onclick="history.back()">◀ Back</button>
   </body>
</html>

使用 PHP 编写的动态网站已准备就绪。
现在打开浏览器并在地址栏中输入"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{
        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 项目的可扩展性，我们还可以使用 Laravel、Symphony CakePHP 等 PHP 框架，这些框架目前非常流行。在上面的例子中，我们使用了类和对象的概念来获取用户数据，但我们也可以使用 MySql 数据库，这使得构建动态网站更加便捷。因此，当用户向服务器发送请求时，服务器会从数据库中检索数据，并仅向用户发送用户请求的特定信息。