Kif Tiskjera Websajt HTML5 fuq Server LAMP f'Ubuntu


Fiż-żewġ artikoli preċedenti ta 'din is-serje, spjegajna kif twaqqaf Netbeans f'distribuzzjoni tad-desktop Linux bħala IDE biex tiżviluppa applikazzjonijiet tal-web. Imbagħad ipproċediet biex inżidu żewġ komponenti ewlenin, jQuery u Bootstrap, sabiex il-paġni tiegħek ikunu faċli għall-mowbajl u jirrispondu.

  • Kif Toħloq Proġett HTML5 Bażiku f'Ubuntu billi tuża Netbeans – Parti 1
  • Kif tikteb App li tiffavorixxi l-mowbajl billi tuża JQuery u Bootstrap – Parti 2

Peress li rari se tittratta kontenut statiku bħala żviluppatur, issa se nżidu l-funzjonalità dinamika mal-paġna bażika li waqqafna fil-Parti 2. Biex tibda, ejjew elenka l-prerekwiżiti u nindirizzawhom qabel nimxu 'l quddiem.

Sabiex nittestjaw applikazzjoni dinamika fil-magna tal-iżvilupp tagħna qabel ma niskjerawha għal server LAMP, ikollna bżonn ninstallaw xi pakketti.

Peress li qed nużaw desktop Ubuntu biex niktbu din is-serje, nassumu li l-kont tal-utent tiegħek diġà ġie miżjud mal-fajl sudoers u ngħata l-permessi meħtieġa.

Installazzjoni ta' Pakketti u Konfigurazzjoni ta' Aċċess għas-Server DB

Jekk jogħġbok innota li waqt l-installazzjoni tista' tiġi mitlub li ddaħħal password għall-utent għerq MySQL. Kun żgur li tagħżel password b'saħħitha u mbagħad kompli.

Ubuntu u derivattivi (ukoll għal distribuzzjonijiet oħra bbażati fuq Debian):

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

Fedora/CentOS/RHEL u wkoll għal distribuzzjonijiet oħra bbażati fuq RHEL):

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

Meta l-installazzjoni tkun kompluta, huwa rakkomandat ħafna li tħaddem il-kmand mysql_secure_installation biex tiżgura s-server tad-database tiegħek.

$ sudo mysql_secure_installation

Inti se tintalab għall-informazzjoni li ġejja:

  • Ibdel il-password tal-għeruq? [I/n]. Jekk diġà ssettja password għall-utent għerq MySQL, tista' taqbeż dan il-pass.
  • Tneħħi utenti anonimi? [I/n] y.
  • Ma tħallix il-login ta' l-għeruq mill-bogħod? [I/n] y (Peress li dan huwa l-ambjent tal-iżvilupp lokali tiegħek, ma jkollokx bżonn tikkonnettja mas-server DB tiegħek mill-bogħod).
  • Tneħħi d-database tat-test u aċċess għaliha? [I/n] y
  • Reload it-tabelli tal-privileġġi issa? [I/n] y.

Ħolqien ta' Database ta' kampjun u Tagħbija ta' Data tat-test

Biex toħloq kampjun tad-database u tgħabbi xi dejta tat-test, idħol fis-server tad-DB tiegħek:

$ sudo mysql -u root -p

Inti se tintalab biex iddaħħal il-password għall-utent għerq MySQL.

Fil-pront MySQL, ittajpja

CREATE DATABASE tecmint_db;

u agħfas Enter:

Issa ejja noħolqu 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 )
);

u timlaha b'dejta tal-kampjun:

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

Żieda ta' links simboliċi fid-direttorju tal-Web Server

Peress li Netbeans, awtomatikament, jaħżen proġetti fid-direttorju tad-dar tal-utent attwali, ser ikollok bżonn iżżid links simboliċi li jindikaw dak il-post. Pereżempju,

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

se żżid soft link imsejħa TecmintTest li tipponta lejn /home/gabriel/NetBeansProjects/TecmintTest/public_html.

Għal dik ir-raġuni, meta tipponta l-browser tiegħek lejn http://localhost/TecmintTest/, fil-fatt tara l-applikazzjoni li waqqafna fil-Parti 2:

Twaqqif ta' FTP u Webserver mill-bogħod

Peress li tista' faċilment twaqqaf FTP u Web server bl-istruzzjonijiet ipprovduti fil-Parti 9 – Installa u Konfiguraw Secure FTP u Web Server tas-serje RHCSA f'Tecmint, aħna mhux se nirrepetuhom hawn. Jekk jogħġbok irreferi għal dik il-gwida qabel ma tkompli.

Nibdlu l-applikazzjoni tagħna f' Waħda Dinamika

Probabbilment taħseb li ma nistgħux nagħmlu ħafna bid-dejta tal-kampjun li żidna mad-database tagħna qabel, u għandek raġun, iżda jkun biżżejjed li titgħallem l-affarijiet bażiċi tal-inkorporazzjoni tal-kodiċi PHP u r-riżultati tal-mistoqsijiet f'DB MySQL. fil-paġni HTML5 tiegħek.

L-ewwelnett, ser ikollna bżonn nibdlu l-estensjoni tad-dokument ewlieni tal-applikazzjoni tagħna għal .php minflok html:

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

Imbagħad ejja niftħu l-proġett f'Netbeans u nibdew nagħmlu xi modifiki.

1. Żid folder mal-proġett imsemmi jinkludi fejn se naħżnu l-applikazzjonijiet php backend.

2. Oħloq fajl bl-isem dbconnection.php ġewwa jinkludi u daħħal mal-kodiċi li ġej:

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

kif indikat fl-immaġni li ġejja:

Dan il-fajl se jintuża biex jgħaqqad mas-server tad-database, biex jagħmel mistoqsija tiegħu, u biex jirritorna r-riżultati ta 'dik il-mistoqsija fi string simili għal JSON biex jiġu kkunsmati mill-applikazzjoni ta' frontend b'modifika żgħira.

Innota li tipikament tuża fajls separati biex twettaq kull waħda minn dawn l-operazzjonijiet, iżda għażilna li ninkludu dik il-funzjonalità kollha f'fajl wieħed għal raġunijiet ta' sempliċità.

3. F'index.php, żid is-snippet li ġej eżatt taħt it-tikketta tal-ġisem tal-ftuħ. Dak huwa l-mod jQuery kif issejjaħ app PHP esterna meta d-dokument tal-web ikun lest, jew fi kliem ieħor, kull darba li jgħabbi:

<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. Issa, żid id uniku (l-istess bħal ġewwa l-for loop hawn fuq) għal kull linja fid-div b'ringiela ta 'klassi fil-qiegħ ta' 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>

Jekk issa tikklikkja Mexxi Proġett, għandek tara dan:

Dan huwa essenzjalment l-istess bħall-informazzjoni rritornata meta għamilna l-mistoqsija mill-pront tal-klijent MySQL tagħna aktar kmieni.

Skjerament għal server LAMP bl-użu ta 'Filezilla

Tnedija Filezilla mill-menu Dash u daħħal l-IP tas-server FTP remot u l-kredenzjali tiegħek. Imbagħad ikklikkja Quickconnect biex tikkonnettja mas-server FTP:

Innaviga lejn /home/gabriel/NetBeansProjects/TecmintTest/public_html/, agħżel il-kontenut tiegħu, ikklikkja fuqhom bil-lemin u agħżel Ittella.

Dan, ovvjament, jassumi li l-utent remot indikat fl-Isem tal-Utent irid jikteb il-permessi fuq id-direttorju remot. Meta t-tlugħ ikun lest, ippunta l-browser tiegħek lejn il-post mixtieq u għandek tara l-istess paġna bħal qabel (jekk jogħġbok innota li aħna ma waqqafniex id-database MySQL lokali għall-host remot, iżda tista 'faċilment tagħmel dan billi ssegwi l-passi minn il-bidu ta’ dan it-tutorja).

Sommarju

F'dan l-artikolu, żidna funzjonalità dinamika mal-applikazzjoni tal-web tagħna billi tuża jQuery u ftit JavaScript. Tista' tirreferi għad-dokumenti uffiċjali ta' jQuery għal aktar informazzjoni, li tkun ta' għajnuna kbira jekk tiddeċiedi li tikteb applikazzjonijiet aktar kumplessi. Fil-għeluq, aħna skjerajna wkoll l-applikazzjoni tagħna għal server LAMP remot bl-użu ta 'klijent FTP.

Aħna eċċitati li nisimgħu l-opinjoni tiegħek dwar dan l-artikolu - tħossok liberu li tikkuntattjana billi tuża l-formola hawn taħt.