Wie erstelle ich eine dynamische Website mit PHP/Javascript/HTML/CSS?-CSS-Tutorial-php.cn

Wie erstelle ich eine dynamische Website mit PHP/Javascript/HTML/CSS?

WBOY

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

nach vorne

773 Leute haben es durchsucht

Wie erstelle ich eine dynamische Website mit PHP/Javascript/HTML/CSS?

Übersicht

Eine dynamische Website ist eine Website, bei der Benutzer Anfragen vom Client an den Server senden und Daten im Backend rendern. Da PHP eine serverseitige Skriptsprache ist, spielt sie eine wichtige Rolle bei der Erstellung dynamischer Websites. Einige dynamische Websites ähneln einem Website-Admin-Panel oder Suchinhalten für bestimmte Benutzer. Daher werden auf der Clientseite der Website HTML, CSS und JavaScript verwendet, um das Benutzer-Frontend zu erstellen, und PHP wird als Back-End-Skriptsprache verwendet, um Benutzerdaten zu rendern, abzurufen und an den Benutzer zurückzusenden das Frontend. p>

Algorithmus

Laden Sie den XAMPP-Server von der offiziellen Website herunter und installieren Sie ihn.
Jetzt starten Sie den Apache-Server, um die Website auf Ihrem lokalen Computer auszuführen.
Öffnen Sie nun den Ordner „htdocs“ im XAMPP-Ordner im Verzeichnis.
Erstellen Sie nun einen Ordner mit dem Namen „dynamicWeb“.
Erstellen Sie nun eine Hauptdatei „index.php“, um mit dem Aufbau der Website zu beginnen.
Fügen Sie nun das HTML-Boilerplate zur Datei „index.php“ hinzu.
Fügen Sie nun das HTML-Formular zur Seite hinzu, wobei die spezifischen Werte der Methoden- und Aktionsattribute „POST“ bzw. „data.php“ sind. „data.php“ ist die Backend-Datei zum Schreiben von PHP-Skripten.
Fügen Sie nun über den Absenden-Button zwei Eingabefelder zum Formular hinzu, als Name und Technologie.
Erstellen Sie nun im selben Ordner eine „data.php“-Datei.
Verwenden Sie PHP mit und ohne PHP-Tags.

<?php?>

Nach dem Login kopieren

Erstellen Sie nun eine if-Syntax, um zu prüfen, ob die Serveranforderung POST oder GET ist.

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

Nach dem Login kopieren

Erstellen Sie nun eine Variable als Name, die den Namen des Kunden speichert.

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

Nach dem Login kopieren

Wenn es sich bei der Anfrage um einen POST handelt, erstellen Sie eine Klasse namens „MyTech“ und eine öffentliche Variable „Benutzername“.

class MyTech{
   public $username;
}

Nach dem Login kopieren

Erstellen Sie nun drei Funktionen: frontend(), backend() und Database() und übergeben Sie den Parameter „name“ an die Funktion.

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

Nach dem Login kopieren

Erstellen Sie nun eine weitere if-else-Funktion dafür, die über das Frontend die folgenden Einträge prüft.

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

Nach dem Login kopieren

Wenn die Bedingung erfüllt ist, erstellen Sie ein Objekt dieser Klasse, andernfalls drucken Sie eine Warnung aus.

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

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

Nach dem Login kopieren

Verwenden Sie nun die Funktion „history.back()“ außerhalb des schließenden PHP-Tags, um einen HTML-Button zu erstellen, der auf die Seite verweist

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

Nach dem Login kopieren

Dynamische Website mit PHP ist fertig.
Öffnen Sie nun Ihren Browser und geben Sie „localhost/dynamicWeb“ in die Adressleiste ein

http://localhost/dynamicWeb/

Die Website wird mit ihrer Funktionalität geöffnet.

Beispiel

Dies ist ein Beispiel, anhand dessen Sie lernen können, dynamische Websites mit HTML, CSS, JavaScript und PHP zu erstellen. Der Frontend-Teil wird mit HTML und CSS erstellt und das serverseitige Scripting erfolgt mit PHP. In diesem Beispiel haben wir eine Funktion erstellt, bei der es ein Formular gibt, in dem der Benutzer über eine Schaltfläche seinen Namen und den technischen Namen eingeben kann, zu dem er die Informationen abrufen möchte. Wenn der Benutzer die Schaltfläche auslöst, werden Informationen vom Frontend an den Server gesendet und die Daten werden gerendert und an den Benutzer zurückgesendet.

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

Fazit

PHP ist eine großartige serverseitige Skriptsprache, die Entwicklern beim Einbetten von HTML-Code hilft. Um PHP-Projekte skalierbarer zu machen, können wir auch PHP-Frameworks wie Laravel, Symphony Cakephp usw. verwenden, daher sind dies die beliebtesten Frameworks. Im obigen Beispiel haben wir die Konzepte von Klassen und Objekten verwendet, um Benutzerdaten abzurufen. Wir können jedoch auch eine MySQL-Datenbank verwenden, was die Erstellung dynamischer Websites hilfreicher macht. Wenn also ein Benutzer eine Anfrage an den Server sendet, ruft der Server die Daten aus der Datenbank ab und sendet dem Benutzer nur die spezifischen Informationen, die der Benutzer angefordert hat.

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine dynamische Website mit PHP/Javascript/HTML/CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!