Website-Suche

So stellen Sie eine HTML5-Website auf einem LAMP-Server in Ubuntu bereit

In den beiden vorherigen Artikeln dieser Serie haben wir erläutert, wie Sie Netbeans in einer Linux-Desktop-Distribution als IDE einrichten, um Webanwendungen zu entwickeln. Dann haben wir zwei Kernkomponenten hinzugefügt, jQuery und Bootstrap, um Ihre Seiten mobilfreundlich und reaktionsschnell zu gestalten.

  • So erstellen Sie ein grundlegendes HTML5-Projekt in Ubuntu mit Netbeans – Teil 1
  • Wie man mit JQuery & Bootstrap eine mobilfreundliche App schreibt – Teil 2

Da Sie als Entwickler selten mit statischen Inhalten zu tun haben werden, werden wir nun die Basisseite, die wir in Teil 2 eingerichtet haben, um dynamische Funktionen erweitern. Lassen Sie uns zunächst die Voraussetzungen auflisten und ansprechen, bevor wir fortfahren.

Voraussetzungen

Um eine dynamische Anwendung auf unserem Entwicklungscomputer zu testen, bevor wir sie auf einem LAMP-Server bereitstellen, müssen wir einige Pakete installieren.

Da wir einen Ubuntu-Desktop verwenden, um diese Serie zu schreiben, gehen wir davon aus, dass Ihr Benutzerkonto bereits zur sudoers-Datei hinzugefügt und mit den erforderlichen Berechtigungen versehen wurde.

Installieren von Paketen und Konfigurieren des Zugriffs auf den DB-Server

Bitte beachten Sie, dass Sie während der Installation möglicherweise aufgefordert werden, ein Passwort für den MySQL-Root-Benutzer einzugeben. Stellen Sie sicher, dass Sie ein sicheres Passwort wählen, und fahren Sie dann fort.

Ubuntu und Derivate (auch für andere Debian-basierte Distributionen):

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

Fedora/CentOS/RHEL und auch für andere RHEL-basierte Distributionen):

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

Wenn die Installation abgeschlossen ist, wird dringend empfohlen, mysql_secure_installation Befehl auszuführen, um den Datenbankserver zu sichern.

$ sudo mysql_secure_installation

Sie werden aufgefordert, die folgenden Informationen einzugeben:

  • Ändern Sie das Root-Passwort? [J/n]. Wenn Sie bereits ein Kennwort für den MySQL-Root-Benutzer festgelegt haben, können Sie diesen Schritt überspringen.
  • Anonyme Benutzer entfernen? [J/n] y.
  • Root-Anmeldung aus der Ferne nicht zulassen? [J/n] y (Da dies Ihre lokale Entwicklungsumgebung ist, müssen Sie keine Remote-Verbindung zu Ihrem DB-Server herstellen).
  • Entfernen der Testdatenbank und des Zugriffs darauf? [J/n] y
  • Privilegientabellen jetzt neu laden? [J/n] y.

Erstellen einer Beispieldatenbank und Laden von Testdaten

Um eine Beispieldatenbank zu erstellen und Testdaten zu laden, melden Sie sich bei Ihrem DB-Server an:

$ sudo mysql -u root -p

Sie werden aufgefordert, das Passwort für den MySQL-Root-Benutzer einzugeben.

Geben Sie an der MySQL-Eingabeaufforderung Folgendes ein:

CREATE DATABASE tecmint_db;

und drücken Sie die Eingabetaste:

Erstellen wir nun eine Tabelle:

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

und füllen Sie es mit Beispieldaten:

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

Hinzufügen von symbolischen Links im Webserver-Verzeichnis

Da Netbeans Projekte standardmäßig im Home-Verzeichnis des aktuellen Benutzers speichert, müssen Sie symbolische Links hinzufügen, die auf diesen Speicherort verweisen. Zum Beispiel

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

fügt einen Softlink namens TecmintTest hinzu, der auf /home/gabriel/NetBeansProjects/TecmintTest/public_html verweist.

Wenn Sie also mit Ihrem Browser auf http://localhost/TecmintTest/ zeigen, sehen Sie tatsächlich die Anwendung, die wir in Teil 2 eingerichtet haben:

Einrichten eines Remote-FTP und Webservers

Da Sie mit den Anweisungen in Teil 9 – Secure FTP und Webserver der RHCSA-Serie in Tecmint einfach einen FTP- und Webserver einrichten können, werden wir diese hier nicht wiederholen. Bitte lesen Sie diesen Leitfaden, bevor Sie fortfahren.

Wir verwandeln unsere Anwendung in eine dynamische Anwendung

Sie werden wahrscheinlich denken, dass wir mit den Beispieldaten, die wir zuvor zu unserer Datenbank hinzugefügt haben, nicht viel anfangen können, und Sie haben Recht, aber es wird ausreichen, die Grundlagen des Einbettens von PHP-Code und die Ergebnisse von Abfragen an eine MySQL-Datenbank in Ihren HTML5-Seiten zu erlernen.

Zunächst müssen wir die Erweiterung des Hauptdokuments unserer Anwendung in .php anstelle von HTML ändern:

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

Dann öffnen wir das Projekt in Netbeans und beginnen mit einigen Änderungen.

1. Fügen Sie dem Projekt einen Ordner mit dem Namen includes hinzu, in dem wir Backend-PHP-Anwendungen speichern werden.

2. Erstellen Sie eine Datei mit dem Namen dbconnection.php inside includes und fügen Sie sie mit dem folgenden Code ein:

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

Wie in der folgenden Abbildung gezeigt:

Diese Datei wird verwendet, um eine Verbindung mit dem Datenbankserver herzustellen, ihn abzufragen und die Ergebnisse dieser Abfrage in einer JSON-ähnlichen Zeichenfolge zurückzugeben, die von der Frontend-Anwendung mit einer geringfügigen Änderung verwendet werden kann.

Beachten Sie, dass Sie in der Regel separate Dateien verwenden, um jeden dieser Vorgänge auszuführen, aber wir haben uns der Einfachheit halber dafür entschieden, alle diese Funktionen in einer Datei zu unterbringen.

3. Fügen Sie index.php den folgenden Codeausschnitt direkt unter dem öffnenden body-Tag hinzu. Das ist die jQuery-Methode, um eine externe PHP-App aufzurufen, wenn das Webdokument fertig ist, oder mit anderen Worten, jedes Mal, wenn es geladen wird:

<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. Fügen Sie nun jeder Zeile im div eine eindeutige ID hinzu (die gleiche wie in der obigen for-Schleife) mit einer Klassenzeile am Ende 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>

Wenn Sie jetzt auf Projekt ausführen klicken, sollte Folgendes angezeigt werden:

Dies ist im Wesentlichen identisch mit den Informationen, die zurückgegeben wurden, als wir die Abfrage zuvor über unsere MySQL-Client-Eingabeaufforderung ausgeführt haben.

Bereitstellen auf einem LAMP-Server mit Filezilla

Starten Sie Filezilla über das Dash-Menü und geben Sie die IP des Remote-FTP-Servers und Ihre Anmeldeinformationen ein. Klicken Sie dann auf Quickconnect, um eine Verbindung zum FTP-Server herzustellen:

Navigieren Sie zu /home/gabriel/NetBeansProjects/TecmintTest/public_html/, wählen Sie den Inhalt aus, klicken Sie mit der rechten Maustaste darauf und wählen Sie Hochladen.

Dies setzt natürlich voraus, dass der in Benutzername angegebene entfernte Benutzer Schreibberechtigungen für das entfernte Verzeichnis haben muss. Wenn der Upload abgeschlossen ist, zeigen Sie mit Ihrem Browser auf den gewünschten Speicherort und Sie sollten dieselbe Seite wie zuvor sehen (bitte beachten Sie, dass wir die lokale MySQL-Datenbank nicht auf dem Remote-Host eingerichtet haben, aber Sie können dies ganz einfach tun, indem Sie den Schritten vom Anfang dieses Tutorials folgen).

Zusammenfassung

In diesem Artikel haben wir unserer Webanwendung mithilfe von jQuery und ein wenig JavaScript dynamische Funktionen hinzugefügt. Weitere Informationen finden Sie in der offiziellen jQuery-Dokumentation, die sehr hilfreich ist, wenn Sie sich entscheiden, komplexere Anwendungen zu schreiben. Abschließend haben wir unsere Anwendung auch über einen FTP-Client auf einem Remote-LAMP-Server bereitgestellt.

Wir sind gespannt auf Ihre Meinung zu diesem Artikel – kontaktieren Sie uns gerne über das untenstehende Formular.

Verwandte Artikel: