Giunsa ang Pag-deploy sa HTML5 Website sa usa ka LAMP Server sa Ubuntu

Sa miaging duha ka artikulo niini nga serye, among gipasabot kung giunsa ang pag-set up sa Netbeans sa Linux desktop distribution isip IDE aron makahimo og web applications. Nagpadayon kami sa pagdugang sa duha ka kinauyokan nga sangkap, ang jQuery ug Bootstrap, aron mahimo ang imong mga panid nga mobile-friendly ug responsive.

Unsaon Paghimo ug Basic HTML5 Project sa Ubuntu Gamit ang Netbeans – Bahin 1
Unsaon Pagsulat ug Mobile-Friendly App Gamit ang JQuery & Bootstrap – Bahin 2

Ingon nga panagsa ra nimo atubangon ang static nga sulud ingon usa ka developer, kami karon magdugang dinamikong pagpaandar sa sukaranan nga panid nga among gipahimutang sa Bahin 2. Sa pagsugod, ilista namon ang mga kinahanglanon ug hisgutan kini sa dili pa magpadayon.

Aron masulayan ang usa ka dinamikong aplikasyon sa among makina sa pag-uswag sa wala pa i-deploy kini sa usa ka server sa LAMP, kinahanglan namon nga mag-install og pipila ka mga pakete.

Tungod kay naggamit kami usa ka desktop sa Ubuntu aron isulat kini nga serye, among gihunahuna nga ang imong account sa gumagamit nadugang na sa sudoers file ug gihatagan ang kinahanglan nga mga pagtugot.

Pag-instalar sa mga Pakete ug Pag-configure sa Pag-access sa DB Server

Palihug timan-i nga sa panahon sa pag-instalar mahimo ka nga maaghat sa pagsulod sa usa ka password alang sa MySQL root user. Siguroha nga mopili ka og lig-on nga password ug dayon magpadayon.

Ubuntu ug mga derivatives (alang usab sa ubang mga distribusyon nga nakabase sa Debian):

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

Fedora/CentOS/RHEL ug alang usab sa ubang mga distribusyon nga nakabase sa RHEL):

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

Kung kompleto na ang instalasyon, hugot nga girekomendar nga imong ipadagan ang mysql_secure_installation command aron masiguro ang imong database server.

$ sudo mysql_secure_installation

Ikaw pagaaghaton alang sa mosunod nga impormasyon:

Ilisan ang root password? [Y/n]. Kung nagbutang ka na ug password para sa MySQL root user, mahimo nimong laktawan kini nga lakang.
Kuhaa ang anonymous nga tiggamit? [Y/n] y.
Dili tugotan ang root login sa layo? [Y/n] y (Tungod kay mao man kini ang imong lokal nga development environment, dili nimo kinahanglan nga magkonektar sa imong DB server sa layo).
Kuhaa ang database sa pagsulay ug pag-access niini? [Y/n] y
I-reload ang mga privilege table karon? [Y/n] y.

Paghimo usa ka sample nga Database ug Pag-load sa Data sa pagsulay

Aron makahimo og sample database ug mag-load sa pipila ka test data, log on sa imong DB server:

$ sudo mysql -u root -p

Maaghat ka sa pagsulod sa password alang sa MySQL root user.

Sa MySQL prompt, i-type

CREATE DATABASE tecmint_db;

ug pindota ang Enter:

Karon maghimo ta ug lamesa:

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

ug pun-a kini sa sample data:

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

Pagdugang simbolikong mga link sa direktoryo sa Web Server

Tungod kay ang Netbeans, sa default, nagtipig sa mga proyekto sa direktoryo sa balay sa karon nga tiggamit, kinahanglan nimo nga idugang ang simbolikong mga link nga nagpunting sa kana nga lokasyon. Pananglitan,

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

magdugang ug soft link nga gitawag ug TecmintTest nga nagpunting sa /home/gabriel/NetBeansProjects/TecmintTest/public_html.

Tungod niana nga hinungdan, kung imong itudlo ang imong browser sa http://localhost/TecmintTest/, makita gyud nimo ang aplikasyon nga among gipahimutang sa Bahin 2:

Pagbutang ug Remote FTP ug Webserver

Tungod kay dali ra nimo ma-set up ang usa ka FTP ug Web server nga adunay mga panudlo nga gihatag sa Bahin 9 - I-install ug I-configure ang Secure FTP ug Web Server sa serye sa RHCSA sa Tecmint, dili na namo kini balikon dinhi. Palihug tan-awa kana nga giya sa dili pa magpadayon.

Gihimo ang among aplikasyon nga usa ka Dinamikong Usa

Mahimong maghunahuna ka nga wala kami'y mahimo sa sampol nga datos nga among gidugang sa among database sa sayo pa, ug husto ka, apan kini igo na aron mahibal-an ang mga sukaranan sa pag-embed sa PHP code ug ang mga resulta sa mga pangutana sa usa ka MySQL DB. sa imong HTML5 nga mga panid.

Una, kinahanglan namong usbon ang extension sa nag-unang dokumento sa among aplikasyon ngadto sa .php imbes nga html:

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

Dayon atong ablihan ang proyekto sa Netbeans ug magsugod sa pagbuhat sa pipila ka mga kausaban.

1. Pagdugang og usa ka folder sa proyekto nga gihinganlan naglakip diin kita magtipig sa backend php nga mga aplikasyon.

2. Paghimo ug file nga ginganlag dbconnection.php sulod naglakip ug isulod uban sa mosunod nga code:

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

sama sa gipakita sa mosunod nga hulagway:

Kini nga file gamiton sa pagkonektar sa database server, sa pagpangutana niini, ug sa pagbalik sa mga resulta sa maong pangutana sa usa ka JSON-like string nga gamiton sa frontend application nga adunay gamay nga kausaban.

Timan-i nga kasagaran mogamit ka og bulag nga mga file aron mahimo ang matag usa niini nga mga operasyon, apan gipili namo nga ilakip ang tanan nga gamit sa usa ka file alang sa kayano.

3. Sa index.php, idugang ang mosunod nga snippet ubos lang sa opening body tag. Mao kana ang paagi sa jQuery sa pagtawag sa usa ka eksternal nga PHP app kung andam na ang dokumento sa web, o sa laing pagkasulti, sa matag higayon nga kini mag-load:

<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. Karon, dugangi ug talagsaong id (parehas sa sulod sa for loop sa ibabaw) sa matag linya sa div nga adunay class row sa ubos sa 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>

Kung imong gi-klik karon ang Run Project, kinahanglan nimo nga makita kini:

Kini sa esensya parehas sa impormasyon nga gibalik sa dihang among gipadagan ang pangutana gikan sa among MySQL client prompt sa sayo pa.

Pag-deploy sa usa ka LAMP server gamit ang Filezilla

Ilunsad ang Filezilla gikan sa Dash menu ug isulod ang IP sa hilit nga FTP server ug ang imong mga kredensyal. Dayon i-klik ang Quickconnect aron makonektar sa FTP server:

Pagdala ngadto sa /home/gabriel/NetBeansProjects/TecmintTest/public_html/, pilia ang sulod niini, i-right click niini ug pilia ang Upload.

Kini, siyempre, nagtuo nga ang hilit nga tiggamit nga gipakita sa Username kinahanglan nga magsulat sa mga pagtugot sa hilit nga direktoryo. Kung kompleto na ang pag-upload, itudlo ang imong browser sa gusto nga lokasyon ug kinahanglan nimo nga makita ang parehas nga panid sama sa una (palihug timan-i nga wala pa namon na-set up ang lokal nga database sa MySQL sa hilit nga host, apan dali nimo kini mahimo sa pagsunod sa mga lakang gikan sa pagsugod niini nga panudlo).

Summary

Niini nga artikulo, gidugang namo ang dinamikong gamit sa among web application gamit ang jQuery ug gamay nga JavaScript. Mahimo nimong i-refer ang opisyal nga jQuery docs alang sa dugang nga impormasyon, nga makatabang kaayo kung modesisyon ka sa pagsulat sa mas komplikado nga mga aplikasyon. Sa pagtapos, gi-deploy usab namo ang among aplikasyon sa usa ka hilit nga LAMP server gamit ang FTP client.

Kami naghinam-hinam nga makadungog sa imong opinyon bahin sa kini nga artikulo - ayaw kahadlok sa pagkontak kanamo gamit ang porma sa ubos.