Heim >Web-Frontend >CSS-Tutorial >Wie erstelle ich eine dynamische Website mit PHP/Javascript/HTML/CSS?
Wie erstelle ich eine dynamische Website mit PHP/Javascript/HTML/CSS?
- WBOYnach vorne
- 2023-08-27 11:49:09796Durchsuche
Ü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?>
Erstellen Sie nun eine if-Syntax, um zu prüfen, ob die Serveranforderung POST oder GET ist.
if($_SERVER["REQUEST_METHOD"]=="POST"){}
Erstellen Sie nun eine Variable als Name, die den Namen des Kunden speichert.
$name = $_POST['name']; $tech = strtolower($_POST['tech']);
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;
}
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>";
}
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") {}
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.";
}
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>
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>
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>>
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!