recherche

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

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

WBOY
WBOYavant
2023-08-27 11:49:09761parcourir

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

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

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

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

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

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

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

  • 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") {}

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

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

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

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

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!

php JavaScript laravel mysql css html if 并发 对象 history 算法 database 数据库 apache http
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Utilisation de la propriété margin-right en CSSArticle suivant：Utilisation de la propriété margin-right en CSS

Articles Liés

Voir plus