Jinsi ya Kupeleka Tovuti ya HTML5 kwenye Seva ya LAMP huko Ubuntu


Katika nakala mbili zilizopita za safu hii, tulielezea jinsi ya kusanidi Netbeans katika usambazaji wa eneo-kazi la Linux kama IDE ya kuunda programu za wavuti. Kisha tukaendelea kuongeza vipengee viwili vya msingi, jQuery na Bootstrap, ili kufanya kurasa zako ziwe rafiki na sikivu.

  • Jinsi ya Kuunda Mradi wa Msingi wa HTML5 katika Ubuntu Kwa Kutumia Netbeans - Sehemu ya 1
  • Jinsi ya Kuandika Programu Inayotumika kwa Rununu Kwa Kutumia JQuery & Bootstrap - Sehemu ya 2

Kwa vile mara chache hutashughulikia maudhui tuli kama msanidi, sasa tutaongeza utendakazi unaobadilika kwenye ukurasa msingi ambao tumeweka katika Sehemu ya 2. Kuanza, hebu tuorodheshe mahitaji ya lazima na tuyashughulikie kabla ya kusonga mbele.

Ili kujaribu programu inayobadilika katika mashine yetu ya ukuzaji kabla ya kuipeleka kwenye seva ya LAMP, tutahitaji kusakinisha baadhi ya vifurushi.

Kwa kuwa tunatumia kompyuta ya mezani ya Ubuntu kuandika mfululizo huu, tunadhania kwamba akaunti yako ya mtumiaji tayari imeongezwa kwenye faili ya sudoers na kupewa ruhusa zinazohitajika.

Kufunga Vifurushi na Kusanidi Ufikiaji kwa Seva ya DB

Tafadhali kumbuka kuwa wakati wa usakinishaji unaweza kuulizwa kuingiza nenosiri kwa mtumiaji wa mizizi ya MySQL. Hakikisha umechagua nenosiri dhabiti kisha uendelee.

Ubuntu na derivatives (pia kwa usambazaji mwingine wa msingi wa Debian):

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

Fedora/CentOS/RHEL na pia kwa usambazaji mwingine wa msingi wa RHEL):

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

Usakinishaji utakapokamilika, inashauriwa sana utekeleze amri ya mysql_secure_installation ili kulinda seva yako ya hifadhidata.

$ sudo mysql_secure_installation

Utaulizwa habari ifuatayo:

  • Ungependa kubadilisha nenosiri la msingi? [Y/n]. Ikiwa tayari umeweka nenosiri la mtumiaji wa msingi wa MySQL, unaweza kuruka hatua hii.
  • Ungependa kuondoa watumiaji wasiojulikana? [Y/n] y.
  • Ungependa kutoruhusu kuingia kwa mizizi kwa mbali? [Y/n] y (Kwa kuwa haya ni mazingira yako ya uendelezaji wa ndani, hutahitaji kuunganisha kwenye seva yako ya DB kwa mbali).
  • Ungependa kuondoa hifadhidata ya majaribio na uifikie? [Y/n] y
  • Pakia upya majedwali ya upendeleo sasa? [Y/n] y.

Kuunda sampuli ya Hifadhidata na Kupakia Data ya jaribio

Ili kuunda hifadhidata ya sampuli na kupakia data ya jaribio, ingia kwenye seva yako ya DB:

$ sudo mysql -u root -p

Utaulizwa kuingiza nenosiri la mtumiaji wa mizizi ya MySQL.

Kwa haraka ya MySQL, chapa

CREATE DATABASE tecmint_db;

na bonyeza Enter:

Sasa wacha tutengeneze meza:

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

na uijaze na data ya sampuli:

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

Kuongeza viungo vya ishara kwenye saraka ya Seva ya Wavuti

Kwa kuwa Netbeans, kwa chaguo-msingi, huhifadhi miradi katika saraka ya nyumbani ya mtumiaji wa sasa, utahitaji kuongeza viungo vya ishara vinavyoelekeza eneo hilo. Kwa mfano,

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

itaongeza kiungo laini kiitwacho TecmintTest kinachoelekeza kwenye /home/gabriel/NetBeansProjects/TecmintTest/public_html.

Kwa sababu hiyo, unapoelekeza kivinjari chako kwa http://localhost/TecmintTest/, hakika utaona programu ambayo tumeweka katika Sehemu ya 2:

Kuanzisha FTP ya Mbali na Webserver

Kwa kuwa unaweza kusanidi kwa urahisi FTP na seva ya Wavuti kwa maagizo yaliyotolewa katika Sehemu ya 9 - Sakinisha na Usanidi FTP Salama na Seva ya Wavuti ya mfululizo wa RHCSA katika Tecmint, hatutayarudia hapa. Tafadhali rejelea mwongozo huo kabla ya kuendelea zaidi.

Kugeuza programu yetu kuwa Inayobadilika

Labda utafikiri kwamba hatuwezi kufanya mengi na sampuli ya data ambayo tuliongeza kwenye hifadhidata yetu hapo awali, na uko sahihi, lakini itatosha kujifunza misingi ya kupachika msimbo wa PHP na matokeo ya maswali kwa MySQL DB. katika kurasa zako za HTML5.

Kwanza, tutahitaji kubadilisha kiendelezi cha hati kuu ya programu yetu hadi .php badala ya html:

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

Kisha wacha tufungue mradi katika Netbeans na tuanze kufanya marekebisho kadhaa.

1. Ongeza folda kwenye mradi unaoitwa ni pamoja na ambapo tutahifadhi programu za php za nyuma.

2. Unda faili iitwayo dbconnection.php ndani inajumuisha na kuingiza na msimbo ufuatao:

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

kama inavyoonyeshwa kwenye picha ifuatayo:

Faili hii itatumika kuunganisha kwenye seva ya hifadhidata, kuihoji, na kurudisha matokeo ya hoja hiyo katika mfuatano wa JSON ili kutumiwa na programu ya mbele kwa urekebishaji kidogo.

Kumbuka kuwa kwa kawaida ungetumia faili tofauti kutekeleza kila moja ya shughuli hizi, lakini tulichagua kujumuisha utendakazi wote katika faili moja kwa ajili ya kurahisisha.

3. Katika index.php, ongeza kijisehemu kifuatacho chini ya lebo ya sehemu inayofungua. Hiyo ndiyo njia ya jQuery ya kupiga programu ya nje ya PHP wakati hati ya wavuti iko tayari, au kwa maneno mengine, kila wakati inapakia:

<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. Sasa, ongeza kitambulisho cha kipekee (sawa na ndani ya kitanzi hapo juu) kwa kila mstari kwenye div na safu mlalo ya darasa chini ya 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>

Ikiwa sasa utabofya Endesha Mradi, unapaswa kuona hii:

Hii kimsingi ni sawa na habari iliyorejeshwa tulipoendesha swali kutoka kwa upesi wa mteja wa MySQL mapema.

Inapeleka kwa seva ya LAMP kwa kutumia Filezilla

Fungua Filezilla kutoka kwa menyu ya Dashi na uweke IP ya seva ya mbali ya FTP na stakabadhi zako. Kisha ubofye Quickconnect ili kuunganisha kwenye seva ya FTP:

Nenda kwa /home/gabriel/NetBeansProjects/TecmintTest/public_html/, chagua yaliyomo, ubofye kulia juu yake na uchague Pakia.

Hii, kwa kweli, inadhania kuwa mtumiaji wa mbali aliyeonyeshwa kwenye Jina la mtumiaji lazima aandike ruhusa kwenye saraka ya mbali. Wakati upakiaji umekamilika, elekeza kivinjari chako mahali unapotaka na unapaswa kuona ukurasa sawa na hapo awali (tafadhali kumbuka kuwa hatujaweka hifadhidata ya ndani ya MySQL kwa seva pangishi ya mbali, lakini unaweza kufanya hivyo kwa urahisi kufuatia hatua kutoka mwanzo wa somo hili).

Muhtasari

Katika makala haya, tumeongeza utendakazi unaobadilika kwa programu yetu ya wavuti kwa kutumia jQuery na JavaScript kidogo. Unaweza kurejelea hati rasmi za jQuery kwa habari zaidi, ambayo itasaidia sana ikiwa utaamua kuandika programu ngumu zaidi. Kuhitimisha, pia tumesambaza programu yetu kwa seva ya mbali ya LAMP kwa kutumia mteja wa FTP.

Tunafurahi kusikia maoni yako kuhusu makala haya - jisikie huru kuwasiliana nasi kwa kutumia fomu iliyo hapa chini.