cari

Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk membuat laman web dinamik menggunakan PHP/javascript/HTML/CSS?

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

WBOY
WBOYke hadapan
2023-08-27 11:49:09762semak imbas

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

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

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

  • Sekarang buat pembolehubah sebagai nama yang akan menyimpan nama pelanggan. 

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

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

class MyTech{
   public $username;
}

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

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

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

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

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

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

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

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!

php JavaScript laravel mysql css html if 并发 对象 history 算法 database 数据库 apache http
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Menggunakan harta margin-kanan dalam CSSArtikel seterusnya：Menggunakan harta margin-kanan dalam CSS

Artikel berkaitan

Lihat lagi