Comment créer un site Web dynamique en utilisant PHP/javascript/HTML/CSS ?-tutoriel CSS-php.cn

Comment créer un site Web dynamique en utilisant PHP/javascript/HTML/CSS ?

WBOY

Libérer： 2023-08-27 11:49:09

avant

776 Les gens l'ont consulté

Comment créer un site Web dynamique en utilisant PHP/javascript/HTML/CSS ?

Vue d'ensemble

Un site Web dynamique est un site Web sur lequel les utilisateurs envoient des requêtes du client au serveur et restituent des données sur le backend. Puisque PHP est un langage de script côté serveur, il joue un rôle majeur dans la création de sites Web dynamiques. Certains sites Web dynamiques ressemblent à un panneau d'administration de site Web ou à un contenu de recherche spécifique à l'utilisateur. Par conséquent, HTML, CSS et JavaScript sont utilisés du côté client du site Web pour créer le front-end de l'utilisateur, et PHP est utilisé comme langage de script back-end pour restituer et récupérer les données de l'utilisateur et les renvoyer à l'utilisateur. le front-end. p>

Algorithme

Téléchargez et installez le serveur XAMPP depuis le site officiel.
Démarrez maintenant le serveur Apache pour exécuter le site Web sur votre ordinateur local.
Maintenant, ouvrez le dossier « htdocs » dans le dossier XAMPP du répertoire.
Créez maintenant un dossier appelé « dynamicWeb ».
Créez maintenant un fichier principal « index.php » pour commencer à créer le site Web.
Ajoutez maintenant le passe-partout HTML au fichier "index.php".
Ajoutez maintenant le formulaire HTML à la page, avec les valeurs spécifiques des attributs de méthode et d'action étant respectivement "POST" et "data.php". "data.php" est le fichier backend pour écrire des scripts php.
Ajoutez maintenant deux champs de saisie au formulaire en utilisant le bouton Soumettre, comme nom et technologie.
Créez maintenant un fichier « data.php » dans le même dossier.
Utilisez les balises php on et off php.

<?php?>

Copier après la connexion

Créez maintenant la syntaxe if pour vérifier si la requête du serveur est POST ou GET.

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

Copier après la connexion

Créez maintenant une variable comme nom qui stockera le nom du client.

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

Copier après la connexion

Si la requête est un POST, créez une classe appelée "MyTech" et créez une variable publique "username".

class MyTech{
   public $username;
}

Copier après la connexion

Créez maintenant trois fonctions : frontend(), backend() et database(), et passez le paramètre "name" à la fonction.

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

Copier après la connexion

Créez maintenant une autre fonction if-else qui vérifie les entrées suivantes via le frontend.

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

Copier après la connexion

Si la condition est remplie, créez un objet de cette classe, sinon imprimez une alerte.

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

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

Copier après la connexion

Utilisez maintenant la fonction "history.back()" en dehors de la balise de fermeture php pour créer un bouton HTML pointant vers la page

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

Copier après la connexion

Le site Web dynamique utilisant php est prêt.
Ouvrez maintenant votre navigateur et tapez « localhost/dynamicWeb » dans la barre d'adresse

http://localhost/dynamicWeb/

Le site Web s'ouvrira avec ses fonctionnalités.

Exemple

C'est un exemple que vous pouvez utiliser pour apprendre à créer des sites Web dynamiques en utilisant HTML, CSS, JavaScript et PHP. La partie front-end est créée en utilisant HTML, CSS et les scripts côté serveur sont réalisés en PHP. Dans cet exemple, nous avons créé une fonctionnalité où se trouve un formulaire où l'utilisateur peut saisir son nom et le nom technique dont il souhaite récupérer les informations à l'aide d'un bouton. Lorsque l'utilisateur déclenche le bouton, les informations du front-end sont envoyées au serveur et les données sont restituées et renvoyées à l'utilisateur.

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>

Copier après la connexion

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

Copier après la connexion

Conclusion

PHP est un excellent langage de script côté serveur qui aide les développeurs à intégrer du code HTML. Afin de rendre les projets PHP plus évolutifs, nous pouvons également utiliser des frameworks PHP tels que Laravel, symphony cakephp, etc., ce sont donc les frameworks les plus populaires. Dans l'exemple ci-dessus, nous avons utilisé les concepts de classes et d'objets pour obtenir les données utilisateur, mais nous pouvons également utiliser la base de données MySql, ce qui rend plus utile la création de sites Web dynamiques. Ainsi, lorsqu'un utilisateur envoie une requête au serveur, le serveur récupère les données de la base de données et envoie à l'utilisateur uniquement les informations spécifiques demandées par l'utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!