搜尋

首頁 >web前端 >css教學 >如何使用PHP/javascript/HTML/CSS建立動態網站？

如何使用PHP/javascript/HTML/CSS建立動態網站？

WBOY
WBOY轉載
2023-08-27 11:49:09793瀏覽

如何使用PHP/javascript/HTML/CSS建立動態網站？

概述

動態網站是使用者從客戶端向伺服器端發送請求，並在後端渲染資料的網站，由於PHP是伺服器端腳本語言，因此它在建立動態網站時起著主要作用。有些動態網站就像是網站管理面板或特定使用者的搜尋內容。因此，在網站的用戶端使用 HTML、CSS 和 JavaScript 來建立使用者前端，並使用 PHP 作為後端腳本語言來渲染和檢索使用者資料並將其發送回前端的使用者。 p>

演算法

  • 從官方網站下載並安裝XAMPP伺服器。

  • 現在啟動 apache 伺服器以在本機電腦上執行網站。

  • 現在開啟目錄中 XAMPP 資料夾中的「htdocs」資料夾。

  • 現在建立一個名為「dynamicWeb」的資料夾。

  • 現在建立一個主「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"){}

  • 現在建立一個變數作為名稱，它將儲存客戶端的名稱。 

$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中文網其他相關文章！

php JavaScript laravel mysql css html if 并发 对象 history 算法 database 数据库 apache http
陳述：
本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除
上一篇：在 CSS 中使用 margin-right 屬性下一篇：在 CSS 中使用 margin-right 屬性

相關文章

看更多