Otu esi ebunye weebụsaịtị HTML5 na sava LAMP na Ubuntu

N'isiokwu abụọ gara aga nke usoro isiokwu a, anyị kọwara otu esi edozi Netbeans na nkesa desktọpụ Linux dịka IDE iji mepụta ngwa weebụ. Anyị gara n'ihu ịgbakwunye isi ihe abụọ, jQuery na Bootstrap, iji mee ka ibe gị nwee enyi na enyi na nke na-anabata ya.

Otu esi emepụta ihe bụ isi HTML5 Project na Ubuntu Iji Netbeans – Nkebi nke 1
Otu esi ede ngwa enyi na ekwentị mkpanaaka site na iji JQuery & Bootstrap – Nkebi nke 2

Dị ka ị na-agaghị adịkarị na-emeso ọdịnaya static dị ka onye nrụpụta, anyị ga-agbakwunye ọrụ dị ike na ibe bụ isi nke anyị hibere na Nkebi nke 2. Iji malite, ka anyị depụta ihe ndị achọrọ wee lebara ha anya tupu ịga n'ihu.

Iji nwalee ngwa dị ike na igwe mmepe anyị tupu ebuga ya na sava LAMP, anyị ga-achọ itinye ụfọdụ ngwugwu.

Ebe anyị na-eji desktọpụ Ubuntu dee usoro isiokwu a, anyị chere na etinyelarị akaụntụ onye ọrụ gị na faịlụ sudoers wee nye ikike dị mkpa.

Ịwụnye ngwugwu na ịhazi ohere ịnweta sava DB

Biko mara na n'oge nrụnye enwere ike ịkpali gị itinye paswọọdụ maka onye ọrụ mgbọrọgwụ MySQL. Jide n'aka na ịhọrọ paswọọdụ siri ike wee gaa n'ihu.

Ubuntu na usoro (nakwa maka nkesa Debian ndị ọzọ):

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

Fedora/CentOS/RHEL yana maka nkesa dabere na RHEL ndị ọzọ):

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

Mgbe nrụnye mechara, a na-atụ aro ka ị gbaa iwu mysql_secure_installation iji chekwaa sava nchekwa data gị.

$ sudo mysql_secure_installation

A ga-akpali gị maka ozi ndị a:

gbanwee mgbọrọgwụ okwuntughe? [Y/n]. Ọ bụrụ na i tinyelarị paswọọdụ maka onye ọrụ mgbọrọgwụ MySQL, ị nwere ike ịgafe nzọụkwụ a.
Wepu ndị ọrụ amaghị aha? [Y/n] y.
Kwepu nbanye mgbọrọgwụ n'ime oge? [Y/n] y (Ebe ọ bụ na nke a bụ gburugburu mmepe obodo gị, ịgaghị achọ ijikọ na sava DB gị n'ebe dị anya).
Wepu nchekwa data nnwale wee nweta ya? [Y/n] na
Bugharịa tebụl ihe ùgwù ugbu a? [Y/n] y.

Ịmepụta ọdụ data nlele na nbudata data ule

Iji mepụta nchekwa data nlele wee buru ụfọdụ data nnwale, banye na sava DB gị:

$ sudo mysql -u root -p

A ga-akpali gị itinye paswọọdụ maka onye ọrụ mgbọrọgwụ MySQL.

Na ngwa MySQL, pịnye

CREATE DATABASE tecmint_db;

wee pịa Tinye:

Ugbu a, ka anyị mepụta tebụl:

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

ma tinye ya na 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');

Na-agbakwụnye njikọ ihe atụ na ndekọ ihe nkesa Weebụ

Ebe ọ bụ na Netbeans, na ndabara, na-echekwa ọrụ na ndekọ ụlọ onye ọrụ ugbu a, ị ga-achọ ịgbakwunye njikọ ihe atụ na-arụtụ aka na ebe ahụ. Ọmụmaatụ,

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

ga-agbakwunye njikọ dị nro akpọrọ TecmintTest nke na-atụ aka na /home/gabriel/NetBeansProjects/TecmintTest/public_html.

Maka nke ahụ, mgbe ị na-atụ aka na ihe nchọgharị gị na http://localhost/TecmintTest/, ị ga-ahụ ngwa anyị hibere na Nkebi 2:

Ịtọlite FTP dịpụrụ adịpụ na sava weebụ

Ebe ị nwere ike ịhazi FTP na sava Weebụ ngwa ngwa yana ntuziaka enyere na Nkebi 9 - Wụnye ma hazie FTP nchekwa na sava Weebụ nke usoro RHCSA na Tecmint, anyị agaghị emeghachi ha ebe a. Biko rụtụ aka na ntuziaka ahụ tupu ịga n'ihu.

Na-atụgharị ngwa anyị ka ọ bụrụ nke dị ike

Eleghị anya ị ga-eche na anyị enweghị ike iji data nlele nke anyị gbakwunyere na nchekwa data anyị na mbụ, ma ị bụ eziokwu, mana ọ ga-ezuru ịmụta isi mmalite nke itinye koodu PHP na nsonaazụ nke ajụjụ na MySQL DB. na ibe HTML5 gị.

Nke mbụ, anyị ga-achọ ịgbanwe ndọtị nke isi akwụkwọ nke ngwa anyị ka ọ bụrụ .php kama html:

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

Mgbe ahụ, ka anyị mepee ọrụ ahụ na Netbeans wee malite ime mgbanwe ụfọdụ.

1. Tinye nchekwa na oru ngo akpọrọ gụnyere ebe anyị ga-echekwa ngwa php backend.

2. Mepụta faịlụ aha ya bụ dbconnection.php n'ime gụnyere ma tinye koodu a:

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

dị ka egosiri na foto a:

A ga-eji faịlụ a jikọọ na ihe nkesa nchekwa data, iji jụọ ya, yana weghachi nsonaazụ ajụjụ ahụ na eriri JSON nke ngwa frontend ga-eri ya na obere mgbanwe.

Rịba ama na ị ga-eji faịlụ dị iche iche rụọ ọrụ nke ọ bụla, mana anyị họọrọ itinye ọrụ ahụ niile n'otu faịlụ maka ịdị mfe.

3. Na index.php, tinye snippet ndị a dị n'okpuru mkpado ahụ mmeghe. Nke ahụ bụ ụzọ jQuery nke ịkpọ ngwa PHP mpụga mgbe akwụkwọ weebụ dị njikere, ma ọ bụ na okwu ndị ọzọ, oge ọ bụla ọ na-ebu:

<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. Ugbu a, tinye id pụrụ iche (dị ka n'ime maka loop n'elu) na ahịrị ọ bụla dị na div na ahịrị klaasị na ala 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>

Ọ bụrụ na ị pịa Run Project, ị ga-ahụ nke a:

Nke a bụ otu ihe ahụ dị ka ozi eweghachiri mgbe anyị gbara ajụjụ a site na onye ahịa MySQL ozugbo ozugbo.

Na-ebuga na sava LAMP site na iji Filezilla

Mepee Filezilla site na menu Dash wee tinye IP nke sava FTP dịpụrụ adịpụ yana nzere gị. Wee pịa Quickconnect iji jikọọ na sava FTP:

Gaa na /home/gabriel/NetBeansProjects/TecmintTest/public_html/, họrọ ọdịnaya ya, pịa aka nri na ha wee họrọ Bulite.

Nke a, n'ezie, na-eche na onye ọrụ dịpụrụ adịpụ egosiri na Aha njirimara ga-ede ikikere na ndekọ ndekọ dịpụrụ adịpụ. Mgbe nbudata ahụ zuru, tụọ ihe nchọgharị gị gaa na ebe ịchọrọ ma ị ga-ahụ otu ibe ahụ dị ka ọ dị na mbụ (biko mara na anyị edobebeghị nchekwa data MySQL na mpaghara dịpụrụ adịpụ, mana ị nwere ike ime ya ngwa ngwa na-eso usoro site na. mmalite nke nkuzi a).

Nchịkọta

N'ime edemede a, anyị agbakwunyela ọrụ dị ike na ngwa weebụ anyị site na iji jQuery na obere Javascript. Ị nwere ike na-ezo aka na jQuery docs gọọmentị maka ozi ndị ọzọ, nke ga-enyere gị aka ma ọ bụrụ na ị kpebie ide ngwa ndị dị mgbagwoju anya. Na-achịkọta ọnụ, anyị etinyela ngwa anyị na sava LAMP dịpụrụ adịpụ site na iji onye ahịa FTP.

Anyị nwere obi ụtọ ịnụ echiche gị gbasara akụkọ a - nweere onwe gị ịkpọtụrụ anyị site na iji ụdị dị n'okpuru.