Kuinka ottaa HTML5-verkkosivusto käyttöön LAMP-palvelimella Ubuntussa


Tämän sarjan kahdessa edellisessä artikkelissa selitimme, kuinka Netbeans määritetään Linux-työpöytäjakelussa IDE:ksi verkkosovellusten kehittämiseen. Lisäsimme sitten kaksi ydinkomponenttia, jQuery ja Bootstrap, jotta sivuistasi tulisi mobiiliystävällisiä ja reagoivia.

  • HTML5-perusprojektin luominen Ubuntussa Netbeansin avulla – Osa 1
  • Mobiiliystävällisen sovelluksen kirjoittaminen JQueryn ja Bootstrapin avulla – Osa 2

Koska tulet harvoin käsittelemään staattista sisältöä kehittäjänä, lisäämme nyt dynaamisia toimintoja perussivulle, jonka määritimme osassa 2. Aluksi luettelemme edellytykset ja käsittelemme niitä ennen kuin jatkamme eteenpäin.

Edellytykset

Jotta voimme testata dynaamista sovellusta kehityskoneessamme ennen sen käyttöönottoa LAMP-palvelimella, meidän on asennettava joitain paketteja.

Koska käytämme tämän sarjan kirjoittamiseen Ubuntu-työpöytää, oletamme, että käyttäjätilisi on jo lisätty sudoers-tiedostoon ja sille on myönnetty tarvittavat käyttöoikeudet.

Pakettien asentaminen ja DB-palvelimen pääsyn määrittäminen

Huomaa, että asennuksen aikana sinua saatetaan pyytää antamaan salasana MySQL-pääkäyttäjälle. Varmista, että valitset vahvan salasanan ja jatka sitten.

Ubuntu ja johdannaiset (myös muille Debian-pohjaisille jakeluille):

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

Fedora/CentOS/RHEL ja myös muille RHEL-pohjaisille jakeluille:

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

Kun asennus on valmis, on erittäin suositeltavaa suorittaa mysql_secure_installation-komento tietokantapalvelimen suojaamiseksi.

sudo mysql_secure_installation

Sinua pyydetään antamaan seuraavat tiedot:

  • Vaihdetaanko pääkäyttäjän salasana? [K/n]. Jos olet jo määrittänyt salasanan MySQL-pääkäyttäjälle, voit ohittaa tämän vaiheen.
  • Poistetaanko nimettömät käyttäjät? [Y/n] y.
  • Etä pääkäyttäjän etäkirjautuminen? [K/n] y (Koska tämä on paikallinen kehitysympäristösi, sinun ei tarvitse muodostaa etäyhteyttä tietokantapalvelimeesi).
  • Poistetaanko testitietokanta ja pääsy siihen? [Y/n] y
  • Ladataanko käyttöoikeustaulukot uudelleen nyt? [Y/n] y.

Esimerkkitietokannan luominen ja testitietojen lataaminen

Voit luoda mallitietokannan ja ladata testitietoja kirjautumalla DB-palvelimellesi:

sudo mysql -u root -p

Sinua pyydetään antamaan MySQL-pääkäyttäjän salasana.

Kirjoita MySQL-kehotteeseen

CREATE DATABASE tecmint_db;

ja paina Enter:

Luodaan nyt taulukko:

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

ja täytä se esimerkkitiedoilla:

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

Symbolisten linkkien lisääminen Web-palvelimen hakemistoon

Koska Netbeans tallentaa projektit oletusarvoisesti nykyisen käyttäjän kotihakemistoon, sinun on lisättävä symbolisia linkkejä, jotka osoittavat kyseiseen sijaintiin. Esimerkiksi,

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

lisää pehmeän linkin nimeltä TecmintTest, joka osoittaa osoitteeseen /home/gabriel/NetBeansProjects/TecmintTest/public_html.

Tästä syystä kun osoitat selaimesi osoitteeseen http://localhost/TecmintTest/, näet itse asiassa sovelluksen, jonka määritimme osassa 2:

Etä-FTP:n ja verkkopalvelimen määrittäminen

Koska voit helposti määrittää FTP:n ja verkkopalvelimen kohdassa 9 – Asenna ja määritä RHCSA-sarjan suojattu FTP ja Web-palvelin Tecmintissä annettujen ohjeiden avulla, älä toista niitä täällä. Tutustu tähän oppaaseen ennen kuin jatkat.

Muutamme sovelluksemme dynaamiseksi

Luultavasti luulet, että emme voi tehdä paljon aiemmin tietokantaamme lisätyillä näytetiedoilla, ja olet oikeassa, mutta se riittää, kun opit PHP-koodin upottamisen perusteet ja kyselyjen tulokset MySQL-tietokantaan. HTML5-sivuillasi.

Ensinnäkin meidän on muutettava sovelluksemme pääasiakirjan laajennus muotoon .php html sijaan:

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

Avataan sitten projekti Netbeansissa ja aletaan tehdä muutoksia.

1. Lisää projektiin kansio nimeltä sisältää, johon tallennamme php-taustasovelluksia.

2. Luo tiedosto nimeltä dbconnection.php sisällä includes ja lisää se seuraavalla koodilla:

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

kuten seuraavassa kuvassa näkyy:

Tätä tiedostoa käytetään yhteyden muodostamiseen tietokantapalvelimeen, sen tekemiseen ja kyselyn tulosten palauttamiseen JSON-tyyppisenä merkkijonona, jonka käyttöliittymäsovellus käyttää pienellä muutoksella.

Huomaa, että yleensä käytät erillisiä tiedostoja näiden toimintojen suorittamiseen, mutta päätimme sisällyttää kaikki nämä toiminnot yhteen tiedostoon yksinkertaisuuden vuoksi.

3. Lisää tiedostoon index.php seuraava katkelma heti avaavan body-tunnisteen alle. Tämä on jQuery-tapa kutsua ulkoista PHP-sovellusta, kun verkko-dokumentti on valmis tai toisin sanoen aina, kun se latautuu:

<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. Lisää nyt yksilöllinen tunnus (sama kuin yllä olevassa for-silmukassa) jokaiselle riville div ja luokka rivi index.php-tiedoston alaosa:

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

Jos napsautat nyt Suorita projekti, sinun pitäisi nähdä tämä:

Tämä on pohjimmiltaan sama kuin tiedot, jotka palautettiin, kun suoritimme kyselyn MySQL-asiakasohjelman kehotteesta aiemmin.

Käyttöönotto LAMP-palvelimelle Filezillan avulla

Käynnistä Filezilla Dash-valikosta ja anna FTP-etäpalvelimen IP ja kirjautumistietosi. Napsauta sitten Pikayhteys muodostaaksesi yhteyden FTP-palvelimeen:

Siirry osoitteeseen /home/gabriel/NetBeansProjects/TecmintTest/public_html/, valitse sen sisältö, napsauta niitä hiiren kakkospainikkeella ja valitse Lataa.

Tämä tietysti edellyttää, että Käyttäjänimi-kohdassa mainitun etäkäyttäjän on kirjoitettava etähakemistoon. Kun lataus on valmis, osoita selaimesi haluamaasi paikkaan ja sinun pitäisi nähdä sama sivu kuin aiemmin (huomaa, että emme ole määrittäneet paikallista MySQL-tietokantaa etäisäntään, mutta voit tehdä sen helposti seuraamalla ohjeita tämän opetusohjelman alku).

Yhteenveto

Tässä artikkelissa olemme lisänneet verkkosovellukseemme dynaamisia toimintoja jQueryn ja JavaScriptin avulla. Saat lisätietoja virallisista jQuery-dokumenteista, joista on paljon apua, jos päätät kirjoittaa monimutkaisempia sovelluksia. Lopuksi olemme myös ottaneet sovelluksemme käyttöön LAMP-etäpalvelimella FTP-asiakkaan avulla.

Olemme innoissamme kuullessamme mielipiteesi tästä artikkelista – ota meihin yhteyttä alla olevalla lomakkeella.