Recherche de site Web

Comment déployer un site Web HTML5 sur un serveur LAMP dans Ubuntu

Dans les deux précédents articles de cette série, nous avons expliqué comment configurer Netbeans dans une distribution de bureau Linux en tant qu’IDE pour développer des applications web. Nous avons ensuite procédé à l’ajout de deux composants principaux, jQuery et Bootstrap, afin de rendre vos pages adaptées aux mobiles et réactives.

  • Comment créer un projet HTML5 de base dans Ubuntu à l’aide de Netbeans - Partie 1
  • Comment écrire une application adaptée aux mobiles à l’aide de JQuery et Bootstrap – Partie 2

Comme vous aurez rarement affaire à du contenu statique en tant que développeur, nous allons maintenant ajouter des fonctionnalités dynamiques à la page de base que nous avons configurée dans la partie 2. Pour commencer, listons les conditions préalables et abordons-les avant d’aller de l’avant.

Conditions préalables

Afin de tester une application dynamique dans notre machine de développement avant de la déployer sur un serveur LAMP, nous devrons installer certains packages.

Étant donné que nous utilisons un bureau Ubuntu pour écrire cette série, nous supposons que votre compte utilisateur a déjà été ajouté au fichier sudoers et qu’il a reçu les autorisations nécessaires.

Installation de packages et configuration de l’accès au serveur de base de données

Veuillez noter que lors de l’installation, vous pouvez être invité à entrer un mot de passe pour l’utilisateur root de MySQL. Assurez-vous de choisir un mot de passe fort, puis continuez.

Ubuntu et dérivés (également pour d’autres distributions basées sur Debian) :

$ sudo apt update && sudo apt install apache2 php php-common php-mysql mysql-server filezilla

Fedora/CentOS/RHEL et aussi pour d’autres distributions basées sur RHEL) :

$ sudo yum update && sudo yum install httpd php php-common php-mysql mysql-server filezilla

Une fois l’installation terminée, il est fortement recommandé d’exécuter mysql_secure_installation commande pour sécuriser votre serveur de base de données.

$ sudo mysql_secure_installation

Vous serez invité à fournir les informations suivantes :

  • Changer le mot de passe root ? [O/n]. Si vous avez déjà défini un mot de passe pour l’utilisateur root MySQL, vous pouvez ignorer cette étape.
  • Supprimer les utilisateurs anonymes ? [O/n] y.
  • Interdire la connexion root à distance ? [O/n] y (Comme il s’agit de votre environnement de développement local, vous n’aurez pas besoin de vous connecter à votre serveur de base de données à distance).
  • Supprimer la base de données de test et l’accès à celle-ci ? [O/n] y
  • Recharger les tables de privilèges maintenant ? [O/n] y.

Création d’un exemple de base de données et chargement des données de test

Pour créer une base de données exemple et charger des données de test, connectez-vous à votre serveur de base de données :

$ sudo mysql -u root -p

Vous serez invité à entrer le mot de passe de l’utilisateur root MySQL.

À l’invite MySQL, tapez

CREATE DATABASE tecmint_db;

et appuyez sur Entrée :

Créons maintenant une table :

USE tecmint_db;
CREATE TABLE articles_tbl(
   Id INT NOT NULL AUTO_INCREMENT,
   Title VARCHAR(100) NOT NULL,
   Author VARCHAR(40) NOT NULL,
   SubmissionDate TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
   PRIMARY KEY ( Id )
);

et remplissez-le avec des exemples de données :

INSERT INTO articles_tbl (Title, Author) VALUES ('Installing Filezilla in CentOS 7', 'Gabriel Canepa'), ('How to set up a LAMP server in Debian', 'Dave Null'), ('Enabling EPEL repository in CentOS 6', 'John Doe');

Ajout de liens symboliques dans l’annuaire du serveur Web

Étant donné que Netbeans, par défaut, stocke les projets dans le répertoire personnel de l’utilisateur actuel, vous devrez ajouter des liens symboliques qui pointent vers cet emplacement. Par exemple

$ sudo ln -s /home/ubuntu/NetBeansProjects/TecmintTest/public_html /var/www/html/TecmintTest

ajoutera un lien logiciel appelé TecmintTest qui pointe vers /home/gabriel/NetBeansProjects/TecmintTest/public_html.

Pour cette raison, lorsque vous pointez votre navigateur sur http://localhost/TecmintTest/, vous verrez en fait l’application que nous avons configurée dans la partie 2 :

Configuration d’un FTP et d’un serveur Web distants

Étant donné que vous pouvez facilement configurer un serveur FTP et Web avec les instructions fournies dans la partie 9 – Installer et configurer un serveur FTP et Web sécurisé de la série RHCSA dans Tecmint, nous ne les répéterons pas ici. Veuillez vous référer à ce guide avant de poursuivre.

Transformer notre application en une application dynamique

Vous penserez probablement que nous ne pouvons pas faire grand-chose avec les exemples de données que nous avons ajoutés à notre base de données plus tôt, et vous avez raison, mais ce sera suffisant pour apprendre les bases de l’intégration de code PHP et les résultats des requêtes vers une base de données MySQL dans vos pages HTML5.

Tout d’abord, nous devrons changer l’extension du document principal de notre application en .php au lieu de html :

# mv /var/www/html/TecmintTest/index.html /var/www/html/TecmintTest/index.php

Ensuite, ouvrons le projet dans Netbeans et commençons à apporter quelques modifications.

1. Ajoutez un dossier au projet nommé includes où nous allons stocker les applications php backend.

2. Créez un fichier nommé dbconnection.php à l’intérieur comprend et insérez-le avec le code suivant :

<?php
    $host = "localhost";
    $username = "root";
    $password = "MyFancyP4ssw0rd";
    $database = "tecmint_db";

    //Establish a connection with MySQL server
    $mysqli = new mysqli($host, $username, $password,$database);

    /* Check connection status. Exit in case of errors. */
    if (mysqli_connect_errno()) {
        printf("Connect failed: %s\n", mysqli_connect_error());
        exit();
    }
    $mysqli -> query("SET character_set_results = 'utf8', character_set_client = 'utf8', character_set_connection = 'utf8', character_set_database = 'utf8', character_set_server = 'utf8'");

    $records = array();
    $query = "SELECT Title, Author, SubmissionDate FROM articles_tbl;";
    $result = $mysqli->query($query) or die($mysqli->error);
    $data = array();

    while ( $row = $result->fetch_assoc() ){
        $data[] = json_encode($row);
    }
    echo json_encode( $data );
?>

Comme indiqué dans l’image suivante :

Ce fichier sera utilisé pour se connecter au serveur de base de données, pour l’interroger et pour renvoyer les résultats de cette requête dans une chaîne de type JSON à consommer par l’application frontale avec une légère modification.

Notez que vous utilisez généralement des fichiers distincts pour effectuer chacune de ces opérations, mais nous avons choisi d’inclure toutes ces fonctionnalités dans un seul fichier par souci de simplicité.

3. Dans index.php, ajoutez l’extrait suivant juste en dessous de la balise body d’ouverture. C’est la façon dont jQuery appelle une application PHP externe lorsque le document web est prêt, ou en d’autres termes, à chaque fois qu’il se charge :

<script>
    $(document).ready(function(){
        $.ajax({
            url: 'includes/dbconnection.php',
            datatype: 'json',
            type: 'POST',
            success: function(data){
                var output = $.parseJSON(data);
                for(var i =0;i < output.length;i++)
                {
                  var item = output[i];
                  $("#title").append("<br>"+item.Title);
                  $("#author").append("<br>"+item.Author);
                  $("#submissiondate").append("<br>"+item.SubmissionDate);
                }
            }}
        );
    });
</script>

4. Maintenant, ajoutez un identifiant unique (le même qu’à l’intérieur de la boucle for ci-dessus) à chaque ligne du div avec une ligne de classe en bas de index.php :

<div class="row">
    <div class="col-md-4" id="title" style="text-align: center"><strong>Titles</strong></div>
    <div class="col-md-4" id="author" style="text-align: center"><strong>Authors</strong></div>
    <div class="col-md-4" id="submissiondate" style="text-align: center"><strong>Published on:</strong></div>
</div>

Si vous cliquez maintenant sur Exécuter le projet, vous devriez voir ceci :

Il s’agit essentiellement des mêmes informations que les informations renvoyées lorsque nous avons exécuté la requête à partir de notre invite client MySQL précédemment.

Déploiement sur un serveur LAMP à l’aide de Filezilla

Lancez Filezilla à partir du menu Dash et entrez l’adresse IP du serveur FTP distant et vos informations d’identification. Cliquez ensuite sur Connexion rapide pour vous connecter au serveur FTP :

Accédez à /home/gabriel/NetBeansProjects/TecmintTest/public_html/, sélectionnez son contenu, cliquez dessus avec le bouton droit de la souris et sélectionnez Télécharger.

Ceci, bien sûr, suppose que l’utilisateur distant indiqué dans Nom d’utilisateur doit écrire des permissions sur le répertoire distant. Une fois le téléchargement terminé, pointez votre navigateur vers l’emplacement souhaité et vous devriez voir la même page qu’auparavant (veuillez noter que nous n’avons pas configuré la base de données MySQL locale sur l’hôte distant, mais vous pouvez facilement le faire en suivant les étapes du début de ce tutoriel).

Résumé

Dans cet article, nous avons ajouté des fonctionnalités dynamiques à notre application web en utilisant jQuery et un peu de JavaScript. Vous pouvez vous référer à la documentation officielle de jQuery pour plus d’informations, ce qui vous sera très utile si vous décidez d’écrire des applications plus complexes. Pour conclure, nous avons également déployé notre application sur un serveur LAMP distant à l’aide d’un client FTP.

Nous sommes impatients d’entendre votre opinion sur cet article - n’hésitez pas à nous contacter en utilisant le formulaire ci-dessous.

Articles connexes: