如何使用PHP/javascript/HTML/CSS创建动态网站？-css教程-PHP中文网

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

WBOY

发布： 2023-08-27 11:49:09

转载

1217人浏览过

如何使用php/javascript/html/css创建动态网站？

概述

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

算法

从官方网站下载并安装XAMPP服务器。
现在启动 apache 服务器以在本地计算机上运行网站。
现在打开目录中 XAMPP 文件夹中的“htdocs”文件夹。
现在创建一个名为“dynamicWeb”的文件夹。

立即学习“PHP免费学习笔记（深入）”；
现在创建一个主“index.php”文件以开始构建网站。
现在将 HTML 样板添加到“index.php”文件中。
现在将 HTML 表单添加到页面，方法和操作属性的具体值分别为“POST”和“data.php”。 “data.php”是编写php脚本的后端文件。
现在使用提交按钮将两个输入字段添加到表单中，作为名称和技术。
现在在同一文件夹中创建一个“data.php”文件。
使用打开和关闭 php 标签来使用 php。

<?php?>

登录后复制

现在创建 if 语法来检查服务器请求是 POST 还是 GET。

if($_SERVER["REQUEST_METHOD"]=="POST"){}

登录后复制

现在创建一个变量作为名称，它将存储客户端的名称。

网易天音
网易出品！一站式音乐创作工具！零基础写歌！

76

查看详情

$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>

登录后复制

数据.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数据库，这使得制作动态网站更有帮助。因此，当用户向服务器发送请求时，服务器会从数据库中检索数据，并仅向用户发送用户请求的特定信息。

以上就是如何使用PHP/javascript/HTML/CSS创建动态网站？的详细内容，更多请关注php中文网其它相关文章！