Kako namestiti spletno mesto HTML5 na strežnik LAMP v Ubuntuju

V prejšnjih dveh člankih te serije smo razložili, kako nastaviti Netbeans v namizni distribuciji Linuxa kot IDE za razvoj spletnih aplikacij. Nato smo dodali dve osnovni komponenti, jQuery in Bootstrap, da bi vaše strani naredili prijazne do mobilnih naprav in odzivne.

Kako ustvariti osnovni projekt HTML5 v Ubuntuju z uporabo Netbeans – 1. del
Kako napisati aplikacijo, prijazno do mobilnih naprav z uporabo JQuery & Bootstrap – 2. del

Ker se kot razvijalec le redko ukvarjate s statično vsebino, bomo zdaj osnovni strani, ki smo jo nastavili v 2. delu, dodali dinamično funkcionalnost. Za začetek naštejmo predpogoje in jih obravnavamo, preden nadaljujemo.

Da bi preizkusili dinamično aplikacijo v našem razvojnem stroju, preden jo namestimo na strežnik LAMP, bomo morali namestiti nekaj paketov.

Ker za pisanje te serije uporabljamo namizje Ubuntu, domnevamo, da je bil vaš uporabniški račun že dodan v datoteko sudoers in je dobil potrebna dovoljenja.

Namestitev paketov in konfiguriranje dostopa do strežnika DB

Upoštevajte, da boste med namestitvijo morda pozvani, da vnesete geslo za korenskega uporabnika MySQL. Prepričajte se, da ste izbrali močno geslo in nato nadaljujte.

Ubuntu in izpeljanke (tudi za druge distribucije, ki temeljijo na Debianu):

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

Fedora/CentOS/RHEL in tudi za druge distribucije, ki temeljijo na RHEL):

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

Ko je namestitev končana, močno priporočamo, da zaženete ukaz mysql_secure_installation, da zavarujete strežnik baze podatkov.

$ sudo mysql_secure_installation

Pozvani boste za naslednje informacije:

Želite spremeniti korensko geslo? [Da/n]. Če ste že nastavili geslo za korenskega uporabnika MySQL, lahko ta korak preskočite.
Želite odstraniti anonimne uporabnike? [Y/n] y.
Želite onemogočiti prijavo root na daljavo? [Y/n] y (Ker je to vaše lokalno razvojno okolje, se vam ne bo treba na daljavo povezati s strežnikom DB).
Želite odstraniti testno bazo podatkov in dostop do nje? [Y/n] y
Znova naložiti tabele privilegijev zdaj? [Y/n] y.

Ustvarjanje vzorčne baze podatkov in nalaganje testnih podatkov

Če želite ustvariti vzorčno bazo podatkov in naložiti nekaj testnih podatkov, se prijavite v strežnik DB:

$ sudo mysql -u root -p

Pozvani boste, da vnesete geslo za korenskega uporabnika MySQL.

V poziv MySQL vnesite

CREATE DATABASE tecmint_db;

in pritisnite Enter:

Zdaj pa ustvarimo tabelo:

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

in ga napolni z vzorčnimi podatki:

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

Dodajanje simbolnih povezav v imenik spletnega strežnika

Ker Netbeans privzeto shranjuje projekte v domači imenik trenutnega uporabnika, boste morali dodati simbolične povezave, ki kažejo na to lokacijo. na primer

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

bo dodal mehko povezavo z imenom TecmintTest, ki kaže na /home/gabriel/NetBeansProjects/TecmintTest/public_html.

Iz tega razloga, ko usmerite brskalnik na http://localhost/TecmintTest/, boste dejansko videli aplikacijo, ki smo jo nastavili v 2. delu:

Nastavitev oddaljenega FTP in spletnega strežnika

Ker lahko preprosto nastavite FTP in spletni strežnik z navodili v 9. delu – Namestite in konfigurirajte varen FTP in spletni strežnik serije RHCSA v Tecmintu, jih tukaj ne bomo ponavljali. Preden nadaljujete, si oglejte ta vodnik.

Preoblikovanje naše aplikacije v dinamično

Verjetno boste mislili, da z vzorčnimi podatki, ki smo jih prej dodali v našo bazo podatkov, ne moremo veliko narediti, in prav imate, vendar bo dovolj, da se naučite osnov vdelave PHP kode in rezultatov poizvedb v MySQL DB. na vaših straneh HTML5.

Najprej bomo morali spremeniti razširitev glavnega dokumenta naše aplikacije v .php namesto v html:

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

Nato odprimo projekt v Netbeansu in začnimo izvajati nekaj sprememb.

1. Projektu z imenom vključuje mapo dodajte mapo, kamor bomo shranili zaledne php aplikacije.

2. Ustvarite datoteko z imenom dbconnection.php znotraj vključuje in vstavite z naslednjo kodo:

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

kot je prikazano na naslednji sliki:

Ta datoteka se bo uporabljala za povezavo s strežnikom baze podatkov, za poizvedbo po njej in za vrnitev rezultatov te poizvedbe v nizu, podobnem JSON, ki ga bo uporabljala sprednja aplikacija z rahlo spremembo.

Upoštevajte, da bi običajno za izvajanje vsake od teh operacij uporabljali ločene datoteke, vendar smo se zaradi poenostavitve odločili vključiti vse te funkcije v eno datoteko.

3. V index.php dodajte naslednji odrezek tik pod začetno oznako body. To je način jQuery za klic zunanje aplikacije PHP, ko je spletni dokument pripravljen, ali z drugimi besedami, vsakič, ko se naloži:

<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. Zdaj dodajte edinstven id (enako kot v zgornji zanki for) v vsako vrstico v div z vrstico razreda na dnu 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>

Če zdaj kliknete Zaženi projekt, bi morali videti to:

To je v bistvu enako kot informacije, vrnjene, ko smo prej zagnali poizvedbo iz našega odjemalskega poziva MySQL.

Namestitev na strežnik LAMP z uporabo Filezilla

Zaženite Filezilla iz menija Dash in vnesite IP oddaljenega strežnika FTP in svoje poverilnice. Nato kliknite Quickconnect, da se povežete s strežnikom FTP:

Pomaknite se do /home/gabriel/NetBeansProjects/TecmintTest/public_html/, izberite njeno vsebino, z desno miškino tipko kliknite nanjo in izberite Naloži.

To seveda predpostavlja, da mora oddaljeni uporabnik, naveden v Uporabniško ime, pisati dovoljenja v oddaljeni imenik. Ko je nalaganje končano, usmerite brskalnik na želeno lokacijo in videli boste isto stran kot prej (upoštevajte, da lokalne baze podatkov MySQL nismo nastavili na oddaljeni gostitelj, vendar lahko to preprosto storite po korakih iz začetek te vadnice).

Povzetek

V tem članku smo naši spletni aplikaciji dodali dinamično funkcionalnost z uporabo jQuery in malo JavaScripta. Za več informacij se lahko obrnete na uradne dokumente jQuery, ki vam bodo v veliko pomoč, če se odločite pisati bolj zapletene aplikacije. Na koncu smo našo aplikacijo namestili tudi na oddaljeni strežnik LAMP z uporabo odjemalca FTP.

Veseli smo, da slišimo vaše mnenje o tem članku – kontaktirajte nas prek spodnjega obrazca.