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

Dans les deux articles précédents de cette série, nous avons expliqué comment configurer Netbeans dans une distribution de bureau Linux en tant qu'EDI pour développer des applications Web. Nous avons ensuite ajouté 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 prérequis et abordons-les avant d’aller de l’avant.

Conditions préalables

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

Puisque 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 a obtenu 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 serez peut-être invité à saisir un mot de passe pour l'utilisateur root 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 également 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 la commande mysql_secure_installation pour sécuriser votre serveur de base de données.

sudo mysql_secure_installation

Les informations suivantes vous seront demandées :

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] o.
Interdire la connexion root à distance ? [O/n] o (Puisqu'il s'agit de votre environnement de développement local, vous n'aurez pas besoin de vous connecter à distance à votre serveur de base de données).
Supprimer la base de données de test et y accéder ? [O/n] o
Recharger les tables de privilèges maintenant ? [O/n] o.

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

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

sudo mysql -u root -p

Vous serez invité à saisir 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 un tableau :

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 le répertoire du serveur Web

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

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

ajoutera un lien symbolique 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 réellement l'application que nous avons configurée dans la Partie 2 :

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

Puisque vous pouvez facilement configurer un FTP et un serveur 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 allons je ne les répéterai pas ici. Veuillez vous référer à ce guide avant de continuer.

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 il suffira d'apprendre les bases de l'intégration du code PHP et des résultats des requêtes dans 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

Ouvrons ensuite le projet dans Netbeans et commençons à apporter quelques modifications.

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

2. Créez un fichier nommé dbconnection.php à l'intérieur de includes 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 frontend avec une légère modification.

Notez que vous utiliserez 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 sous la balise d'ouverture body. C'est la manière jQuery d'appeler une application PHP externe lorsque le document Web est prêt, ou en d'autres termes, à chaque chargement :

<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 (identique à celui de la boucle for ci-dessus) à chaque ligne du div avec une ligne de classe en haut. 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 l'invite de notre client MySQL plus tôt.

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

Lancez Filezilla depuis le menu Dash et saisissez l'IP du serveur FTP distant ainsi que vos informations d'identification. Cliquez ensuite sur Quickconnect pour vous connecter au serveur FTP :

Accédez à /home/gabriel/NetBeansProjects/TecmintTest/public_html/, sélectionnez son contenu, faites un clic droit dessus et sélectionnez Télécharger.

Ceci, bien sûr, suppose que l'utilisateur distant indiqué dans Nom d'utilisateur doit avoir des autorisations en écriture 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'avant (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 de le 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 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 ravis de connaître votre avis sur cet article – n’hésitez pas à nous contacter en utilisant le formulaire ci-dessous.