Yadda ake Sanya Yanar Gizo na HTML5 akan Sabar LAMP a Ubuntu


A cikin labaran biyu da suka gabata na wannan silsilar, mun bayyana yadda ake saita Netbeans a cikin rarraba tebur na Linux azaman IDE don haɓaka aikace-aikacen yanar gizo. Daga nan mun ci gaba da ƙara mahimman abubuwan haɗin gwiwa guda biyu, jQuery da Bootstrap, don sanya shafukanku su kasance masu dacewa da wayar hannu da amsawa.

  • Yadda ake Ƙirƙirar Tsarin HTML5 na asali a cikin Ubuntu Amfani da Netbeans - Part 1
  • Yadda ake Rubutar App na Abokin Waya Ta Amfani da JQuery & Bootstrap - Part 2

Kamar yadda ba safai ba za ku yi ma'amala da abubuwan da ba su dace ba a matsayin mai haɓakawa, yanzu za mu ƙara ayyuka masu ƙarfi zuwa ainihin shafin da muka kafa a Sashe na 2. Don farawa, bari mu lissafa abubuwan da ake buƙata kuma mu magance su kafin ci gaba.

Domin gwada aikace-aikace mai ƙarfi a cikin injin haɓakawa kafin tura shi zuwa uwar garken LAMP, za mu buƙaci shigar da wasu fakiti.

Tun da muna amfani da tebur na Ubuntu don rubuta wannan jerin, muna ɗauka cewa an riga an ƙara asusun mai amfani zuwa fayil ɗin sudoers kuma an ba da izini da suka dace.

Shigar da Fakitin da Haɓaka Samun dama ga uwar garken DB

Lura cewa yayin shigarwa ana iya sa ku shigar da kalmar sirri don mai amfani da tushen MySQL. Tabbatar kun zaɓi kalmar sirri mai ƙarfi sannan ku ci gaba.

Ubuntu da abubuwan haɓaka (har ila yau don sauran rabawa na tushen Debian):

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

Fedora/CentOS/RHEL da kuma don sauran rabawa na tushen RHEL):

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

Lokacin da shigarwa ya cika, ana ba da shawarar cewa ku gudanar da umarni mysql_secure_installation don amintar uwar garken bayananku.

$ sudo mysql_secure_installation

Za a umarce ku don samun bayanai masu zuwa:

  • Canza tushen kalmar sirri? [Y/n]. Idan kun riga kun saita kalmar sirri don tushen mai amfani da MySQL, zaku iya tsallake wannan matakin.
  • Cire masu amfani da ba a san su ba? [Y/n] y.
  • A hana tushen shiga daga nesa? [Y/n] y (Tunda wannan shine yanayin ci gaban gida, ba za ku buƙaci haɗawa da sabar DB ɗinku daga nesa ba).
  • Cire bayanan gwaji da samun dama gare shi? [Y/n] da
  • Sake ɗorawa teburin gata yanzu? [Y/n] y.

Ƙirƙirar samfurin Database da Loading test Data

Don ƙirƙirar samfurin bayanai da loda wasu bayanan gwaji, shiga sabar DB ɗin ku:

$ sudo mysql -u root -p

Za a sa ka shigar da kalmar sirri don mai amfani da tushen MySQL.

A MySQL m, rubuta

CREATE DATABASE tecmint_db;

kuma danna Shigar:

Yanzu bari mu ƙirƙiri tebur:

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

kuma cika shi da samfurin bayanai:

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

Ƙara hanyoyin haɗin yanar gizo na alama a cikin adireshin uwar garken gidan yanar gizo

Tun da Netbeans, ta tsohuwa, tana adana ayyuka a cikin kundin adireshin gida na mai amfani na yanzu, kuna buƙatar ƙara hanyoyin haɗin kai na alama waɗanda ke nuna wurin. Misali,

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

zai ƙara wata hanyar haɗi mai laushi mai suna TecmintTest wanda ke nuna /home/gabriel/NetBeansProjects/TecmintTest/public_html.

Don haka, lokacin da ka nuna burauzarka zuwa http://localhost/TecmintTest/, za ka ga ainihin aikace-aikacen da muka kafa a Sashe na 2:

Saita FTP mai nisa da sabar gidan yanar gizo

Tun da zaka iya saita FTP da uwar garken gidan yanar gizo cikin sauƙi tare da umarnin da aka bayar a cikin Sashe na 9 - Shigar da Sanya Secure FTP da Sabar Yanar Gizo na jerin RHCSA a cikin Tecmint, ba za mu maimaita su anan ba. Da fatan za a koma ga jagorar kafin a ci gaba.

Juya aikace-aikacen mu zuwa Mai Sauƙi

Wataƙila za ku yi tunanin cewa ba za mu iya yin yawa da samfurin bayanan da muka ƙara zuwa bayananmu a baya ba, kuma kuna da gaskiya, amma zai isa ku koyi tushen shigar da lambar PHP da sakamakon tambayoyin MySQL DB. a cikin shafukan HTML5.

Da farko, za mu buƙaci mu canza tsawo na babban takaddar aikace-aikacen mu zuwa .php maimakon html:

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

Sannan bari mu buɗe aikin a cikin Netbeans kuma mu fara yin wasu gyare-gyare.

1. Ƙara babban fayil zuwa aikin mai suna ya haɗa da inda za mu adana aikace-aikacen php na baya.

2. Ƙirƙiri fayil mai suna dbconnection.php ciki ya haɗa da saka tare da lambar mai zuwa:

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

kamar yadda aka nuna a hoto mai zuwa:

Za a yi amfani da wannan fayil ɗin don haɗawa zuwa uwar garken bayanan bayanai, don tambayarsa, da kuma dawo da sakamakon wannan tambayar a cikin sigar JSON mai kama da aikace-aikacen gaba da za a cinye tare da ɗan gyara.

Lura cewa yawanci za ku yi amfani da fayiloli daban-daban don yin kowane ɗayan waɗannan ayyukan, amma mun zaɓi haɗa duk waɗannan ayyukan a cikin fayil ɗaya saboda sauƙi.

3. A cikin index.php, ƙara snippet mai zuwa kusa da alamar buɗe jikin. Wannan ita ce hanyar jQuery ta kiran aikace-aikacen PHP na waje lokacin da takaddar gidan yanar gizo ke shirye, ko a wasu kalmomi, duk lokacin da ta loda:

<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. Yanzu, ƙara id na musamman (daidai da cikin madauki na sama) zuwa kowane layi a cikin div tare da jeren aji a ƙasan 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>

Idan yanzu ka danna Run Project, ya kamata ka ga wannan:

Wannan ainihin daidai yake da bayanin da aka dawo lokacin da muka gudanar da tambayar daga abokin cinikinmu na MySQL tun da farko.

Ana turawa zuwa uwar garken LAMP ta amfani da Filezilla

Kaddamar da Filezilla daga menu na Dash kuma shigar da IP na sabar FTP mai nisa da takaddun shaidarka. Sannan danna Quickconnect don haɗi zuwa uwar garken FTP:

Kewaya zuwa /home/gabriel/NetBeansProjects/TecmintTest/public_html/, zaɓi abinda ke cikinsa, danna dama akan su kuma zaɓi Loda.

Wannan, ba shakka, yana ɗauka cewa mai amfani mai nisa da aka nuna a cikin Sunan mai amfani dole ne ya rubuta izini akan kundin adireshi mai nisa. Lokacin da aka gama ƙaddamarwa, nuna mai binciken ku zuwa wurin da ake so kuma ya kamata ku ga shafin iri ɗaya kamar yadda ya gabata (ku lura cewa ba mu saita bayanan MySQL na gida ba ga mai watsa shiri mai nisa, amma kuna iya yin hakan cikin sauƙi ta bin matakan daga. farkon wannan koyawa).

Takaitawa

A cikin wannan labarin, mun ƙara aiki mai ƙarfi ga aikace-aikacen gidan yanar gizon mu ta amfani da jQuery da ɗan JavaScript. Kuna iya komawa zuwa jQuery docs na hukuma don ƙarin bayani, wanda zai taimaka sosai idan kun yanke shawarar rubuta ƙarin hadaddun aikace-aikace. Ana tattarawa, mun kuma tura aikace-aikacen mu zuwa uwar garken LAMP mai nisa ta amfani da abokin ciniki na FTP.

Muna farin cikin jin ra'ayin ku game da wannan labarin - jin daɗin tuntuɓar mu ta amfani da fom ɗin da ke ƙasa.