Ricerca nel sito web

Come distribuire il sito Web HTML5 su un server LAMP in Ubuntu


Nei due articoli precedenti di questa serie, abbiamo spiegato come configurare Netbeans in una distribuzione desktop Linux come IDE per sviluppare applicazioni web. Abbiamo quindi proceduto ad aggiungere due componenti principali, jQuery e Bootstrap, per rendere le tue pagine ottimizzate per i dispositivi mobili e reattive.

  • Come creare un progetto HTML5 di base in Ubuntu utilizzando Netbeans - Parte 1
  • Come scrivere un'app ottimizzata per dispositivi mobili utilizzando JQuery e Bootstrap - Parte 2

Dato che raramente ti occuperai di contenuti statici come sviluppatore, ora aggiungeremo funzionalità dinamiche alla pagina di base che abbiamo configurato nella Parte 2. Per iniziare, elenchiamo i prerequisiti e affrontiamoli prima di andare avanti.

Prerequisiti

Per testare un'applicazione dinamica nella nostra macchina di sviluppo prima di distribuirla su un server LAMP, dovremo installare alcuni pacchetti.

Poiché stiamo utilizzando un desktop Ubuntu per scrivere questa serie, presumiamo che il tuo account utente sia già stato aggiunto al file sudoers e che abbia ottenuto le autorizzazioni necessarie.

Installazione di pacchetti e configurazione dell'accesso al server DB

Tieni presente che durante l'installazione ti potrebbe essere richiesto di inserire una password per l'utente root di MySQL. Assicurati di scegliere una password complessa e poi continua.

Ubuntu e derivati (anche per altre distribuzioni basate su Debian):

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

Fedora/CentOS/RHEL e anche per altre distribuzioni basate su RHEL):

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

Una volta completata l'installazione, si consiglia vivamente di eseguire il comando mysql_secure_installation per proteggere il server del database.

sudo mysql_secure_installation

Ti verranno richieste le seguenti informazioni:

  • Cambiare la password di root? [S/n]. Se hai già impostato una password per l'utente root MySQL, puoi saltare questo passaggio.
  • Rimuovere gli utenti anonimi? [S/n] S.
  • Non consentire l'accesso root da remoto? [S/n] S (poiché questo è il tuo ambiente di sviluppo locale, non avrai bisogno di connetterti al tuo server DB da remoto).
  • Rimuovere il database dei test e accedervi? [S/n] S
  • Ricaricare le tabelle dei privilegi adesso? [S/n] S.

Creazione di un database di esempio e caricamento dei dati di test

Per creare un database di esempio e caricare alcuni dati di test, accedi al tuo server DB:

sudo mysql -u root -p

Ti verrà richiesto di inserire la password per l'utente root MySQL.

Al prompt di MySQL, digitare

CREATE DATABASE tecmint_db;

e premi Invio:

Ora creiamo una tabella:

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

e compilarlo con dati di esempio:

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');

Aggiunta di collegamenti simbolici nella directory del Web Server

Poiché Netbeans, per impostazione predefinita, memorizza i progetti nella directory home dell'utente corrente, dovrai aggiungere collegamenti simbolici che puntano a quella posizione. Per esempio,

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

aggiungerà un soft link chiamato TecmintTest che punta a /home/gabriel/NetBeansProjects/TecmintTest/public_html.

Per questo motivo, quando indirizzi il tuo browser a http://localhost/TecmintTest/, vedrai effettivamente l'applicazione che abbiamo configurato nella Parte 2:

Configurazione di un FTP remoto e di un server Web

Poiché è possibile configurare facilmente un server FTP e Web con le istruzioni fornite nella Parte 9 – Installazione e configurazione di un server Web e FTP sicuro della serie RHCSA in Tecmint, lo faremo non ripeterli qui. Si prega di fare riferimento a quella guida prima di procedere ulteriormente.

Trasformare la nostra applicazione in una dinamica

Probabilmente penserai che non possiamo fare molto con i dati di esempio che abbiamo aggiunto in precedenza al nostro database, e hai ragione, ma sarà sufficiente imparare le basi per incorporare il codice PHP e i risultati delle query in un DB MySQL nelle tue pagine HTML5.

Innanzitutto, dovremo cambiare l'estensione del documento principale della nostra applicazione in .php invece che in html:

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

Quindi apriamo il progetto in Netbeans e iniziamo ad apportare alcune modifiche.

1. Aggiungi una cartella al progetto denominata include dove memorizzeremo le applicazioni php di backend.

2. Crea un file denominato dbconnection.php all'interno di include e inserisci il seguente codice:

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

come indicato nell'immagine seguente:

Questo file verrà utilizzato per connettersi al server del database, per interrogarlo e per restituire i risultati di tale query in una stringa simile a JSON che verrà utilizzata dall'applicazione frontend con una leggera modifica.

Tieni presente che in genere utilizzeresti file separati per eseguire ciascuna di queste operazioni, ma abbiamo scelto di includere tutte queste funzionalità in un unico file per semplicità.

3. In index.php, aggiungi il seguente snippet appena sotto il tag di apertura body. Questo è il modo in cui jQuery chiama un'app PHP esterna quando il documento web è pronto o, in altre parole, ogni volta che viene caricato:

<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. Ora aggiungi un ID univoco (lo stesso del ciclo for sopra) a ciascuna riga nel div con una riga di classe alla fine fondo di 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>

Se ora fai clic su Esegui progetto, dovresti vedere quanto segue:

Si tratta essenzialmente delle stesse informazioni restituite quando abbiamo eseguito la query dal prompt del nostro client MySQL in precedenza.

Distribuzione su un server LAMP utilizzando Filezilla

Avvia Filezilla dal menu Dash e inserisci l'IP del server FTP remoto e le tue credenziali. Quindi fai clic su Connessione rapida per connetterti al server FTP:

Vai a /home/gabriel/NetBeansProjects/TecmintTest/public_html/, seleziona i suoi contenuti, fai clic con il tasto destro su di essi e seleziona Carica.

Ciò, ovviamente, presuppone che l'utente remoto indicato in Nome utente debba avere i permessi di scrittura sulla directory remota. Una volta completato il caricamento, punta il browser nella posizione desiderata e dovresti vedere la stessa pagina di prima (tieni presente che non abbiamo configurato il database MySQL locale sull'host remoto, ma puoi farlo facilmente seguendo i passaggi da l'inizio di questo tutorial).

Riepilogo

In questo articolo, abbiamo aggiunto funzionalità dinamiche alla nostra applicazione web utilizzando jQuery e un po' di JavaScript. Puoi fare riferimento alla documentazione jQuery ufficiale per ulteriori informazioni, che ti sarà molto utile se decidi di scrivere applicazioni più complesse. In conclusione, abbiamo anche distribuito la nostra applicazione su un server LAMP remoto utilizzando un client FTP.

Siamo entusiasti di sentire la tua opinione su questo articolo: non esitate a contattarci utilizzando il modulo sottostante.