Filtrage du contenu HTML avant le chargement sur la page à l'aide du didacticiel PHP

Filtrage du contenu HTML avant le chargement sur la page à l’aide du didacticiel PHP

Dans ce tutoriel, vous apprendrez à Filtrer le contenu HTML avant de le charger ou de l’afficher sur la page en utilisant Langage PHP. Le didacticiel vise à fournir aux étudiants en informatique et aux nouveaux programmes PHP une référence pour apprendre à améliorer leurs connaissances et leurs capacités de programmation à l’aide du Langage PHP. Ici, je vais fournir quelques extraits et un exemple de code source qui illustrent l’objectif de ce didacticiel.

Qu’est-ce que le filtrage de contenu ?

Le filtrage de contenu est également connu sous le nom de filtrage de contenu Web, qui est un ensemble de solutions permettant de surveiller, de modifier ou d’analyser le contenu des pages. Ce type de solution ou de fonctionnalité est principalement utilisé dans certains Système de gestion de contenu plates-formes telles que WordPress qui permet aux utilisateurs du site de filtrer et de modifier le contenu de la page ou de l’article avant de l’afficher.

Comment pouvons-nous réaliser le filtrage de contenu en utilisant PHP ?

En utilisant le langage PHP, nous pouvons simplement lire le contenu HTML même en l’affichant sur la page tout en utilisant le ob_start() et ob_get_clean() afin que nous puissions faire quelque chose avec le contenu avant de le charger sur la page. Voir l’exemple ci-dessous pour une meilleure idée.

    <?php
    ?>
    <!-- HTML Content to Filter before loading to Page -->
    <div>
        <h1>Hello World!!!</h1>
    </div>
    <!-- End of HTML Content to Filter before loading to Page -->
 
    <?php 
    // HTML content that can be alter
 
    $altered_content = "{$content}\n<p>This is a sample additional content added to html content</p>";
 
 
    //Load the Filtered HTML Content to Page 
    echo $altered_content;
    ?>

L’extrait ci-dessus montre un moyen simple de filtrer le contenu HTML et de modifier le contenu avant de l’afficher.

Exemple de code source d’application

Voici les scripts d’une application web simple qui démontrent aussi Filtrage du contenu en utilisant PHP. Suivez les instructions pour pouvoir l’exécuter également de votre côté. Cependant, j’ai également fourni quelques instantanés des résultats de l’application.

Tout d’abord, créez un nouveau répertoire nommé pages dans le dossier racine de votre code source. Sauvegardez ce qui suit Fichiers HTML.

about.html

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed faucibus lacus. Quisque sagittis imperdiet viverra. Fusce ac nulla pretium velit ultricies ultricies. In hac habitasse platea dictumst. Cras risus lacus, iaculis eu metus non, <b>rutrum</b> mollis nulla. Vestibulum semper vitae eros pellentesque dapibus. Nulla blandit fermentum faucibus. <b><span style="color:red">Donec nec lobortis</span> diam</b>. Etiam ultrices lectus vulputate velit molestie, eu hendrerit quam auctor. Nullam ex lorem, tincidunt eget euismod ac, <em>euismod vel ligula</em>. Aliquam venenatis mollis massa et bibendum.</p>
 
<img src="./images/img1.jpg" alt="Sample Image">
 
<p><a href=">SourceCodester</a></p>
 
<p><span style="font-family: arial, helvetica, sans-serif; color: rgb(0, 0, 0); font-size: 14px;">Duis tempus nisi at vehicula rutrum. Donec faucibus eros sed magna venenatis hendrerit. Duis nec arcu mollis, interdum ligula at, aliquet lectus. Proin fringilla, odio ac lacinia blandit, neque augue bibendum urna, <em>non mattis urna orci a mi</em>. Suspendisse vitae convallis quam. Integer at vestibulum erat, sit amet porta ante. Integer vel cursus ante. <span style="background-color: rgb(251, 238, 184);"><em>Integer eu massa sit amet lectus ullamcorper imperdiet</em></span>. Donec porttitor felis eu quam eleifend iaculis. In eget nulla orci. <strong>Cras fringilla</strong> dapibus justo, id mattis sapien tempus vitae. Cras congue ipsum eu consectetur tincidunt. Nam dictum rhoncus dui nec porta. </span></p>

about.html

    <img src="./images/img2.jpg" alt="">
    <p><span style="font-family: arial, helvetica, sans-serif; color: rgb(0, 0, 0); font-size: 14px;">Duis tempus nisi at vehicula rutrum. Donec faucibus eros sed magna venenatis hendrerit. Duis nec arcu mollis, interdum ligula at, aliquet lectus. Proin fringilla, odio ac lacinia blandit, neque augue bibendum urna, <em>non mattis urna orci a mi</em>. Suspendisse vitae convallis quam. Integer at vestibulum erat, sit amet porta ante. Integer vel cursus ante. <span style="background-color: rgb(251, 238, 184);"><em>Integer eu massa sit amet lectus ullamcorper imperdiet</em></span>. Donec porttitor felis eu quam eleifend iaculis. In eget nulla orci. <strong>Cras fringilla</strong> dapibus justo, id mattis sapien tempus vitae. Cras congue ipsum eu consectetur tincidunt. Nam dictum rhoncus dui nec porta. </span></p>
 
 
 
    <p><span style="color: rgb(0, 0, 0); font-family: arial, helvetica, sans-serif; font-size: 12px;">Sed eu venenatis felis. Morbi elementum ornare magna ut venenatis. Nunc eget congue sem. Fusce porttitor, lacus sed ultrices laoreet, erat leo bibendum est, id iaculis erat est vel ante. Curabitur congue nulla eget nulla accumsan rhoncus. Sed a tellus libero. Nam varius id nisl tempus finibus. Nullam metus purus, pellentesque a venenatis eu, faucibus at eros. Donec eleifend neque bibendum, pulvinar sapien sit amet, maximus ligula. Etiam aliquet ante enim, molestie condimentum velit gravida in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></p>
 
    <img src="./images/img3.jpg" alt="">

Les scripts HTML donnés sont l’exemple de script HTML qui contient les différents contenus à filtrer. N’oubliez pas de modifier l’exemple de source d’image sur chaque fichier HTML disponible de votre côté.

Ensuite, dans votre dossier racine de code source, créez un nouveau PHP fichier nommé index.php et collez le script suivant. Le code ci-dessous est un combiné PHP et HTML script qui liste le contenu de la page.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PHP - HTML Content Filtering</title>
    <link rel="stylesheet" href=" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
 
    <script src=" integrity="sha512-naukR7I+Nk6gp7p5TMA4ycgfxaZBJ7MO5iC3Fp6ySQyKFHOGfpkSZkYVWV5R7u7cfAicxanwYQ5D1e17EfJcMA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="./jquer-3.6.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary bg-gradient">
        <div class="container">
            <a class="navbar-brand" href="./">PHP - HTML Content Filtering</a>
            <div>
                <a href=" class="text-light fw-bolder h6 text-decoration-none" target="_blank">SourceCodester</a>
            </div>
        </div>
    </nav>
    <div class="container-fluid px-5 my-3">
        <div class="col-lg-8 col-md-10 col-sm-12 mx-auto py-5">
            <h2 class="text-center"><b>HTML Content Filtering Befor Displaying using PHP</b></h2>
            <div class="col-lg-2 col-md-3 col-sm-4 col-xs-4 mx-auto">
                <hr class="bg-primary border-primary opacity-100" style="border-top-width: 4px;">
            </div>
        </div>
        <div class="col-lg-6 col-md-8 col-sm-12 mx-auto">
            <div class="card rounded-0">
                <div class="card-header">
                    <div class="card-title text-muted"><b>List of Sample HTML Content</b></div>
                </div>
                <div class="card-body rounded-0">
                    <div class="container-fluid">
                        <div class="list-group rounded-0">
                            <div class="list-group-item list-group-item-action">
                                <div class="d-flex w-100 justifuc-content-between align-items-center">
                                    <div class="col-auto flex-shrink-1 flex-grow-1">
                                        <b>About Us Page Content</b>
                                    </div>
                                    <div class="col-auto flex-shrink-1">
                                        <a href="view.php?page=about" class="text-muted text-docoration-none"><i class="fa fa-eye"></i></a>
                                    </div>
                                </div>
                            </div>
                            <div class="list-group-item list-group-item-action">
                                <div class="d-flex w-100 justifuc-content-between align-items-center">

  


                                    <div class="col-auto flex-shrink-1 flex-grow-1">
                                        <b>Welcome Page Content</b>
                                    </div>
                                    <div class="col-auto flex-shrink-1">
                                        <a href="view.php?page=welcome" class="text-muted text-docoration-none"><i class="fa fa-eye"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Ensuite, créons l’exemple de fonction de filtrage pour cette application. Le script ci-dessous est nommé filtrage.php. Il contient la fonction qui est appelée lors du filtrage du contenu d’origine et renvoie le contenu modifié.

<?php
 
function filter_content_before($content=""){
    // If HTML content is not empty, filter content
 
        /**
            * Forcing Links to view in new window
            */
        $links_match_count = preg_match_all('/\<a(.*?)\/a\>/', $content, $matches, PREG_OFFSET_CAPTURE);
        if($links_match_count > ){
            // Loop matched links
                foreach($matches[] as $link){
                // Check of links is already set to open into a new window or not
                $link_in_window_count = preg_match_all('/(:?target\s?=\s?["\']_blank["\'])/si', $link[], $new_window_matches, PREG_OFFSET_CAPTURE);
                if($link_in_window_count <= ){
                    $new_link = preg_replace('/(<a\b[^><]*)/i', '$1 target="_blank"', $link[]);
                }
 
            }
        }
 
        /**
            * Labeling Paragraphs
            */
        $paragraph_match_count = preg_match_all('/<p(.*?)>(.*?)<\/p>/si', $content, $paragraph_matches, PREG_OFFSET_CAPTURE);
 
        /**
            * Add label befor and after paragraphs
            */
        if($paragraph_match_count > ){
            $pi = 1;
            foreach($paragraph_matches[] as $paragraph){
                $new_paragraph = "<div class=\"text-muted text-center\"><em>{Start of Paragraph #{$pi}}</em></div>\n";
                $new_paragraph .= $paragraph[]."\n";
                $new_paragraph .= "<div class=\"text-muted text-center\"><em>{End of Paragraph #{$pi}}</em></div>\n";
                // $new_paragraph .= "<div class=\"text-muted text-center\"><hr></div>\n";
                $content = str_replace($paragraph[], $new_paragraph, $content);
                $pi++;
            }
        }
        // print_r($paragraph_match_count);exit;
 
        /**
            * Labeling Images
            */
        $img_match_count = preg_match_all('/<img(.*?)(\/?)>/si', $content, $img_matches, PREG_OFFSET_CAPTURE);
 
        /**
            * Add label befor and after Images
            */
        if($img_match_count > ){
            $ii = 1;
            foreach($img_matches[] as $img){
                $new_img = "<div class=\"text-muted text-center\"><em>{Start of Image #{$ii}}</em></div>\n";
                $new_img .= $img[]."\n";
                $new_img .= "<div class=\"text-muted text-center\"><em>{End of Image #{$ii}}</em></div>\n";
                $ii++;
            }
        }
    }
 
    return $content;
}

Enfin, créons la page de visualisation qui affiche le contenu filtré des scripts HTML sélectionnés. Le fichier ci-dessous est nommé vue.php. Il contient une fenêtre à 2 panneaux qui représente la sortie d’origine des scripts de contenu HTML et celle modifiée. Sur le panneau de gauche, il prévisualise la sortie originale du contenu tandis que l’aperçu du contenu modifié se trouve sur le panneau de droite.

<?php 
require_once('filtering.php');
$original_conent = "No Page Content Selected";
$filtered_conent = "No Page Content Selected";
$page = isset($_GET['page']) ? ucwords($_GET['page']).".html" : "";
    include_once('./pages/'.$page);
    $filtered_conent = filter_content_before($original_conent);
    // echo "<pre>";
    // print_r($filtered_conent);
    // echo "</pre>";
    // exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <?= isset($_GET['page']) ? ucwords($_GET['page'])." Page Content" : "No Page Content Selected" ?> | PHP - HTML Content Filtering
    <link rel="stylesheet" href=" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    [email protected]/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
 
    <script src=" integrity="sha512-naukR7I+Nk6gp7p5TMA4ycgfxaZBJ7MO5iC3Fp6ySQyKFHOGfpkSZkYVWV5R7u7cfAicxanwYQ5D1e17EfJcMA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="./jquer-3.6.1.min.js"></script>
    [email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous">
 
    <style>
        img{
            width: 100%;
            /* max-height:35vh; */
            object-fit:scale-down;
            object-position:center center;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary bg-gradient">
        <div class="container">
            <a class="navbar-brand" href="./">PHP - HTML Content Filtering</a>
            <div>
                <a href=" class="text-light fw-bolder h6 text-decoration-none" target="_blank">SourceCodester</a>
            </div>
        </div>
    </nav>
    <div class="container-fluid px-5 my-3">
        <div class="col-lg-8 col-md-10 col-sm-12 mx-auto py-5">
            <h2 class="text-center"><b>HTML Content View Page</b></h2>
            <div class="col-lg-2 col-md-3 col-sm-4 col-xs-4 mx-auto">
                <hr class="bg-primary border-primary opacity-100" style="border-top-width: 4px;">
            </div>
            <?= isset($_GET['page']) ? ucwords($_GET['page'])." Page Content" : "No Page Content Selected" ?>
        </div>
        <div class="row">
            <!-- Original Page Content Preview Container -->
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                <div class="card shadow-sm rounded-0">
                    <div class="card-header rounded-0">
                        <div class="card-title"><b>Original Page Content Preview</b></div>
                    </div>
                    <div class="card-body rounded-0">
                        <div class="container-fluid">
                            <?php echo $original_conent ?>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End of Original Page Content Preview Container -->
            <!-- Filtered Page Content Preview Container -->
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                <div class="card shadow-sm rounded-0">
                    <div class="card-header rounded-0">
                        <div class="card-title"><b>Filtered Page Content Preview</b></div>
                    </div>
                    <div class="card-body rounded-0">
                        <div class="container-fluid">
                            <?php echo $filtered_conent ?>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End of Filtered Page Content Preview Container -->
        </div>
    </div>
</body>
</html>

Instantanés de sortie

Voici les instantanés de la sortie du script que j’ai fournis ci-dessus.

Contenu de la page « À propos de nous »

Contenu de la page « Bienvenue »

C’est ça! Vous pouvez maintenant tester les exemples d’applications Web de votre côté. J’ai également fourni le fichier zip du code source que j’ai créé pour ce tutoriel. Vous pouvez le télécharger en cliquant sur le Bouton de téléchargement situé sous cet article/contenu.

Voilà! J’espère Cela Filtrage du contenu HTML avant le chargement sur la page à l’aide du didacticiel PHP vous aide avec ce que vous recherchez et que vous trouverez cela utile pour votre situation actuelle et future Projets PHP.

Explorez plus sur ce site Web pour plus Tutoriels et Codes sources gratuits.