如何使用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数据库,这使得创建动态网站更加有用。因此,当用户向服务器发送请求时,服务器从数据库中检索数据,并仅向用户发送用户请求的特定信息。

更新于: 2023年8月16日

1K+ 次浏览

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告

© . All rights reserved.