Bagaimana untuk membuat laman web dinamik menggunakan PHP/javascript/HTML/CSS?-tutorial css-php.cn

Bagaimana untuk membuat laman web dinamik menggunakan PHP/javascript/HTML/CSS?

WBOY

Lepaskan： 2023-08-27 11:49:09

ke hadapan

806 orang telah melayarinya

Bagaimana untuk membuat laman web dinamik menggunakan PHP/javascript/HTML/CSS?

Gambaran Keseluruhan

Tapak web dinamik ialah tapak web di mana pengguna menghantar permintaan daripada klien ke pelayan dan memaparkan data pada bahagian belakang Memandangkan PHP ialah bahasa skrip bahagian pelayan, ia memainkan peranan utama dalam mencipta tapak web dinamik. Sesetengah tapak web dinamik adalah seperti panel pentadbir tapak web atau kandungan carian khusus pengguna. Oleh itu, HTML, CSS dan JavaScript digunakan pada bahagian klien tapak web untuk mencipta bahagian hadapan pengguna, dan PHP digunakan sebagai bahasa skrip bahagian belakang untuk memaparkan dan mendapatkan semula data pengguna dan menghantarnya semula kepada pengguna pada bahagian hadapan. p>

Algoritma

Muat turun dan pasang pelayan XAMPP dari laman web rasmi.
Sekarang mulakan pelayan apache untuk menjalankan tapak web pada komputer tempatan anda.
Sekarang buka folder "htdocs" di dalam folder XAMPP dalam direktori.
Sekarang buat folder yang dipanggil "dynamicWeb".
Sekarang buat fail "index.php" utama untuk mula membina tapak web.
Sekarang tambahkan boilerplate HTML pada fail "index.php".
Sekarang tambahkan borang HTML pada halaman, dengan nilai khusus kaedah dan atribut tindakan masing-masing ialah "POST" dan "data.php". "data.php" ialah fail bahagian belakang untuk menulis skrip php.
Sekarang tambahkan dua medan input pada borang menggunakan butang hantar, sebagai nama dan teknologi.
Sekarang buat fail "data.php" dalam folder yang sama.
Gunakan php di dalam dan di luar tag php.

<?php?>

Salin selepas log masuk

Sekarang buat sintaks jika untuk menyemak sama ada permintaan pelayan adalah POST atau GET.

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

Salin selepas log masuk

Sekarang buat pembolehubah sebagai nama yang akan menyimpan nama pelanggan.

$name = $_POST['name'];
$tech = strtolower($_POST['tech']);

Salin selepas log masuk

Jika permintaan ialah POST, buat kelas yang dipanggil "MyTech" dan buat pembolehubah awam "nama pengguna".

class MyTech{
   public $username;
}

Salin selepas log masuk

Sekarang cipta tiga fungsi: frontend(), backend() dan database(), dan hantar parameter "nama" kepada fungsi tersebut.

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>";
}

Salin selepas log masuk

Sekarang cipta satu lagi fungsi if-else untuknya yang menyemak entri berikut melalui bahagian hadapan.

if ($tech == "frontend" || $tech == "backend" || $tech == "database") {}

Salin selepas log masuk

Jika syarat dipenuhi, cipta objek kelas ini, jika tidak, cetak amaran.

$myObj= new MyTech();
$myObj->$tech($username=$name);

else{
   echo "Hello ". $name .", ". $tech ." will be uploaded shortly.";
}

Salin selepas log masuk

Sekarang gunakan fungsi "history.back()" di luar teg penutup php untuk mencipta butang HTML yang menghala ke halaman

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

Salin selepas log masuk

Laman web dinamik menggunakan php sudah sedia.
Sekarang buka penyemak imbas anda dan taip “localhost/dynamicWeb” dalam bar alamat

http://localhost/dynamicWeb/

Laman web akan dibuka dengan fungsinya.

Contoh

Ini ialah contoh yang boleh anda gunakan untuk belajar membuat tapak web dinamik menggunakan HTML, CSS, JavaScript dan PHP. Bahagian bahagian hadapan dibuat menggunakan HTML, CSS, dan skrip sebelah pelayan dilakukan menggunakan PHP. Dalam contoh ini, kami telah mencipta ciri di mana terdapat borang di mana pengguna boleh memasukkan namanya dan nama teknikal yang dia ingin mendapatkan semula maklumat menggunakan butang. Apabila pengguna mencetuskan butang, maklumat dari bahagian hadapan dihantar ke pelayan dan data diberikan dan dihantar semula kepada pengguna.

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>

Salin selepas log masuk

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

Salin selepas log masuk

Kesimpulan

PHP ialah bahasa skrip bahagian pelayan yang hebat yang membantu pembangun membenamkan kod HTML. Untuk menjadikan projek PHP lebih berskala, kami juga boleh menggunakan rangka kerja PHP seperti Laravel, simfoni cakephp, dll., jadi ini adalah rangka kerja yang paling popular. Dalam contoh di atas, kami telah menggunakan konsep kelas dan objek untuk mendapatkan data pengguna, tetapi kami juga boleh menggunakan pangkalan data MySql, yang menjadikannya lebih membantu untuk membuat tapak web dinamik. Jadi apabila pengguna menghantar permintaan kepada pelayan, pelayan mendapatkan semula data daripada pangkalan data dan menghantar pengguna hanya maklumat khusus yang diminta pengguna.

Atas ialah kandungan terperinci Bagaimana untuk membuat laman web dinamik menggunakan PHP/javascript/HTML/CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!