如何使用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.