ഉബുണ്ടുവിലെ ഒരു LAMP സെർവറിൽ HTML5 വെബ്uസൈറ്റ് എങ്ങനെ വിന്യസിക്കാം

ഈ സീരീസിന്റെ മുമ്പത്തെ രണ്ട് ലേഖനങ്ങളിൽ, വെബ് ആപ്ലിക്കേഷനുകൾ വികസിപ്പിക്കുന്നതിന് ഒരു IDE ആയി ലിനക്സ് ഡെസ്ക്ടോപ്പ് വിതരണത്തിൽ നെറ്റ്ബീൻസ് എങ്ങനെ സജ്ജീകരിക്കാമെന്ന് ഞങ്ങൾ വിശദീകരിച്ചു. നിങ്ങളുടെ പേജുകൾ മൊബൈൽ-സൗഹൃദവും പ്രതികരണശേഷിയുമുള്ളതാക്കുന്നതിനായി jQuery, Bootstrap എന്നീ രണ്ട് പ്രധാന ഘടകങ്ങൾ ചേർക്കാൻ ഞങ്ങൾ തുടർന്നു.

• നെറ്റ്ബീൻസ് ഉപയോഗിച്ച് ഉബുണ്ടുവിൽ ഒരു അടിസ്ഥാന HTML5 പ്രോജക്റ്റ് എങ്ങനെ സൃഷ്ടിക്കാം - ഭാഗം 1
• JQuery & Bootstrap ഉപയോഗിച്ച് ഒരു മൊബൈൽ-സൗഹൃദ ആപ്പ് എങ്ങനെ എഴുതാം - ഭാഗം 2

ഒരു ഡെവലപ്പർ എന്ന നിലയിൽ നിങ്ങൾ സ്റ്റാറ്റിക് ഉള്ളടക്കം അപൂർവ്വമായി കൈകാര്യം ചെയ്യുന്നതിനാൽ, ഞങ്ങൾ ഇപ്പോൾ ഭാഗം 2-ൽ സജ്ജീകരിച്ച അടിസ്ഥാന പേജിലേക്ക് ഡൈനാമിക് പ്രവർത്തനം ചേർക്കും. ആരംഭിക്കുന്നതിന്, മുന്നോട്ട് പോകുന്നതിന് മുമ്പ് നമുക്ക് മുൻവ്യവസ്ഥകൾ ലിസ്റ്റ് ചെയ്ത് അവ പരിഹരിക്കാം.

ഒരു LAMP സെർവറിലേക്ക് വിന്യസിക്കുന്നതിന് മുമ്പ് ഞങ്ങളുടെ ഡെവലപ്uമെന്റ് മെഷീനിൽ ഒരു ഡൈനാമിക് ആപ്ലിക്കേഷൻ പരിശോധിക്കുന്നതിന്, ഞങ്ങൾ ചില പാക്കേജുകൾ ഇൻസ്റ്റാൾ ചെയ്യേണ്ടതുണ്ട്.

ഈ സീരീസ് എഴുതാൻ ഞങ്ങൾ ഒരു ഉബുണ്ടു ഡെസ്ക്ടോപ്പ് ഉപയോഗിക്കുന്നതിനാൽ, നിങ്ങളുടെ ഉപയോക്തൃ അക്കൗണ്ട് ഇതിനകം sudoers ഫയലിലേക്ക് ചേർക്കുകയും ആവശ്യമായ അനുമതികൾ നൽകുകയും ചെയ്തിട്ടുണ്ടെന്ന് ഞങ്ങൾ അനുമാനിക്കുന്നു.

പാക്കേജുകൾ ഇൻസ്റ്റാൾ ചെയ്യുകയും ഡിബി സെർവറിലേക്കുള്ള പ്രവേശനം ക്രമീകരിക്കുകയും ചെയ്യുന്നു

ഇൻസ്റ്റലേഷൻ സമയത്ത് MySQL റൂട്ട് ഉപയോക്താവിനുള്ള പാസ്uവേഡ് നൽകാൻ നിങ്ങളോട് ആവശ്യപ്പെട്ടേക്കാം എന്നത് ശ്രദ്ധിക്കുക. നിങ്ങൾ ശക്തമായ ഒരു പാസ്uവേഡ് തിരഞ്ഞെടുത്തിട്ടുണ്ടെന്ന് ഉറപ്പുവരുത്തുക, തുടർന്ന് തുടരുക.

ഉബുണ്ടുവും ഡെറിവേറ്റീവുകളും (മറ്റ് ഡെബിയൻ അടിസ്ഥാനമാക്കിയുള്ള വിതരണങ്ങൾക്കും):

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

Fedora/CentOS/RHEL കൂടാതെ മറ്റ് RHEL-അധിഷ്ഠിത വിതരണങ്ങൾക്കും):

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

ഇൻസ്റ്റലേഷൻ പൂർത്തിയാകുമ്പോൾ, നിങ്ങളുടെ ഡാറ്റാബേസ് സെർവർ സുരക്ഷിതമാക്കാൻ mysql_secure_installation കമാൻഡ് പ്രവർത്തിപ്പിക്കാൻ ശക്തമായി ശുപാർശ ചെയ്യുന്നു.

$ sudo mysql_secure_installation

ഇനിപ്പറയുന്ന വിവരങ്ങൾക്കായി നിങ്ങളോട് ആവശ്യപ്പെടും:

• റൂട്ട് പാസ്uവേഡ് മാറ്റണോ? [Y/n]. MySQL റൂട്ട് ഉപയോക്താവിനായി നിങ്ങൾ ഇതിനകം ഒരു പാസ്uവേഡ് സജ്ജീകരിച്ചിട്ടുണ്ടെങ്കിൽ, നിങ്ങൾക്ക് ഈ ഘട്ടം ഒഴിവാക്കാം.
• അജ്ഞാത ഉപയോക്താക്കളെ നീക്കം ചെയ്യണോ? [Y/n] y.
• റൂട്ട് ലോഗിൻ വിദൂരമായി അനുവദിക്കരുത്? [Y/n] y (ഇത് നിങ്ങളുടെ പ്രാദേശിക വികസന അന്തരീക്ഷമായതിനാൽ, നിങ്ങളുടെ DB സെർവറിലേക്ക് വിദൂരമായി കണക്റ്റുചെയ്യേണ്ടതില്ല).
• ടെസ്uറ്റ് ഡാറ്റാബേസ് നീക്കം ചെയ്uത് അതിലേക്കുള്ള ആക്uസസ് ചെയ്യണോ? [Y/n] y
• പ്രിവിലേജ് ടേബിളുകൾ ഇപ്പോൾ റീലോഡ് ചെയ്യണോ? [Y/n] y.

ഒരു സാമ്പിൾ ഡാറ്റാബേസ് സൃഷ്ടിക്കുകയും ടെസ്റ്റ് ഡാറ്റ ലോഡുചെയ്യുകയും ചെയ്യുന്നു

ഒരു സാമ്പിൾ ഡാറ്റാബേസ് സൃഷ്uടിക്കാനും കുറച്ച് ടെസ്റ്റ് ഡാറ്റ ലോഡുചെയ്യാനും, നിങ്ങളുടെ DB സെർവറിലേക്ക് ലോഗിൻ ചെയ്യുക:

$ sudo mysql -u root -p

MySQL റൂട്ട് ഉപയോക്താവിനുള്ള പാസ്uവേഡ് നൽകാൻ നിങ്ങളോട് ആവശ്യപ്പെടും.

MySQL പ്രോംപ്റ്റിൽ, ടൈപ്പ് ചെയ്യുക

CREATE DATABASE tecmint_db;

എന്റർ അമർത്തുക:

ഇനി നമുക്ക് ഒരു പട്ടിക ഉണ്ടാക്കാം:

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

സാമ്പിൾ ഡാറ്റ ഉപയോഗിച്ച് അത് പോപ്പുലേറ്റ് ചെയ്യുക:

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

വെബ് സെർവർ ഡയറക്ടറിയിൽ പ്രതീകാത്മക ലിങ്കുകൾ ചേർക്കുന്നു

നെറ്റ്ബീൻസ്, സ്ഥിരസ്ഥിതിയായി, നിലവിലെ ഉപയോക്താവിന്റെ ഹോം ഡയറക്uടറിയിൽ പ്രോജക്റ്റുകൾ സംഭരിക്കുന്നതിനാൽ, ആ ലൊക്കേഷനിലേക്ക് പോയിന്റ് ചെയ്യുന്ന പ്രതീകാത്മക ലിങ്കുകൾ നിങ്ങൾ ചേർക്കേണ്ടതുണ്ട്. ഉദാഹരണത്തിന്,

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

/home/gabriel/NetBeansProjects/TecmintTest/public_html എന്നതിലേക്ക് പോയിന്റ് ചെയ്യുന്ന TecmintTest എന്ന സോഫ്റ്റ് ലിങ്ക് ചേർക്കും.

ഇക്കാരണത്താൽ, നിങ്ങളുടെ ബ്രൗസർ http://localhost/TecmintTest/ എന്നതിലേക്ക് പോയിന്റ് ചെയ്യുമ്പോൾ, ഭാഗം 2-ൽ ഞങ്ങൾ സജ്ജമാക്കിയ ആപ്ലിക്കേഷൻ നിങ്ങൾ കാണും:

ഒരു റിമോട്ട് എഫ്uടിപിയും വെബ്uസെർവറും സജ്ജീകരിക്കുന്നു

ഭാഗം 9-ൽ നൽകിയിരിക്കുന്ന നിർദ്ദേശങ്ങൾ ഉപയോഗിച്ച് നിങ്ങൾക്ക് ഒരു എഫ്uടിപിയും വെബ് സെർവറും എളുപ്പത്തിൽ സജ്ജീകരിക്കാൻ കഴിയുന്നതിനാൽ - Tecmint-ൽ RHCSA സീരീസിന്റെ സുരക്ഷിത FTP, വെബ് സെർവർ എന്നിവ ഇൻസ്റ്റാൾ ചെയ്ത് കോൺഫിഗർ ചെയ്യുക, ഞങ്ങൾ അവ ഇവിടെ ആവർത്തിക്കില്ല. തുടരുന്നതിന് മുമ്പ് ദയവായി ആ ഗൈഡ് പരിശോധിക്കുക.

ഞങ്ങളുടെ ആപ്ലിക്കേഷൻ ഡൈനാമിക് ഒന്നാക്കി മാറ്റുന്നു

ഞങ്ങളുടെ ഡാറ്റാബേസിലേക്ക് ഞങ്ങൾ നേരത്തെ ചേർത്ത സാമ്പിൾ ഡാറ്റ ഉപയോഗിച്ച് ഞങ്ങൾക്ക് കാര്യമായൊന്നും ചെയ്യാൻ കഴിയില്ലെന്ന് നിങ്ങൾ ചിന്തിച്ചേക്കാം, നിങ്ങൾ പറഞ്ഞത് ശരിയാണ്, എന്നാൽ PHP കോഡ് ഉൾച്ചേർക്കുന്നതിന്റെ അടിസ്ഥാനകാര്യങ്ങളും MySQL DB-യിലേക്കുള്ള അന്വേഷണങ്ങളുടെ ഫലങ്ങളും മനസിലാക്കാൻ ഇത് മതിയാകും. നിങ്ങളുടെ HTML5 പേജുകളിൽ.

ആദ്യം, ഞങ്ങളുടെ ആപ്ലിക്കേഷന്റെ പ്രധാന പ്രമാണത്തിന്റെ വിപുലീകരണം html-ന് പകരം .php എന്നതിലേക്ക് മാറ്റേണ്ടതുണ്ട്:

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

അപ്പോൾ നമുക്ക് Netbeans-ൽ പ്രോജക്റ്റ് തുറന്ന് ചില പരിഷ്കാരങ്ങൾ ചെയ്യാൻ തുടങ്ങാം.

1. പ്രോജക്റ്റിലേക്ക് ഒരു ഫോൾഡർ ചേർക്കുക, അതിൽ ഞങ്ങൾ ബാക്കെൻഡ് php ആപ്ലിക്കേഷനുകൾ എവിടെ സംഭരിക്കും എന്നതും ഉൾപ്പെടുന്നു.

2. ഉള്ളിൽ dbconnection.php എന്ന പേരിൽ ഒരു ഫയൽ സൃഷ്uടിക്കുകയും ഇനിപ്പറയുന്ന കോഡ് ഉൾപ്പെടുത്തുകയും ചെയ്യുക:

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

ഇനിപ്പറയുന്ന ചിത്രത്തിൽ സൂചിപ്പിച്ചിരിക്കുന്നതുപോലെ:

ഈ ഫയൽ ഡാറ്റാബേസ് സെർവറിലേക്ക് കണക്uറ്റ് ചെയ്യാനും അത് അന്വേഷിക്കാനും JSON പോലുള്ള സ്ട്രിംഗിൽ ആ അന്വേഷണത്തിന്റെ ഫലങ്ങൾ നൽകാനും ചെറിയ പരിഷ്uക്കരണത്തോടെ ഫ്രണ്ട്uഎൻഡ് ആപ്ലിക്കേഷന് ഉപയോഗിക്കും.

ഈ ഓരോ പ്രവർത്തനങ്ങളും നിർവഹിക്കുന്നതിന് നിങ്ങൾ സാധാരണയായി പ്രത്യേക ഫയലുകൾ ഉപയോഗിക്കുമെന്നത് ശ്രദ്ധിക്കുക, എന്നാൽ ലാളിത്യത്തിനുവേണ്ടി ആ പ്രവർത്തനങ്ങളെല്ലാം ഒരു ഫയലിൽ ഉൾപ്പെടുത്താൻ ഞങ്ങൾ തിരഞ്ഞെടുത്തു.

3. index.php-ൽ, ഓപ്പണിംഗ് ബോഡി ടാഗിന് താഴെ താഴെ പറയുന്ന സ്uനിപ്പെറ്റ് ചേർക്കുക. വെബ് ഡോക്യുമെന്റ് തയ്യാറാകുമ്പോൾ, അല്ലെങ്കിൽ മറ്റൊരു വിധത്തിൽ പറഞ്ഞാൽ, ഓരോ തവണ ലോഡ് ചെയ്യുമ്പോഴും ഒരു ബാഹ്യ PHP ആപ്പിലേക്ക് വിളിക്കുന്നതിനുള്ള jQuery മാർഗമാണിത്:

<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. ഇപ്പോൾ, index.php യുടെ ചുവടെയുള്ള ഒരു ക്ലാസ് വരിയുള്ള div-ലെ ഓരോ വരിയിലും ഒരു അദ്വിതീയ ഐഡി (മുകളിലുള്ള ഫോർ ലൂപ്പിനുള്ളിലെ പോലെ തന്നെ) ചേർക്കുക:

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

നിങ്ങൾ ഇപ്പോൾ Run Project ക്ലിക്ക് ചെയ്യുകയാണെങ്കിൽ, നിങ്ങൾ ഇത് കാണും:

മുമ്പ് ഞങ്ങളുടെ MySQL ക്ലയന്റ് പ്രോംപ്റ്റിൽ നിന്ന് ഞങ്ങൾ അന്വേഷണം നടത്തിയപ്പോൾ ലഭിച്ച വിവരത്തിന് ഇത് അടിസ്ഥാനപരമായി സമാനമാണ്.

Filezilla ഉപയോഗിച്ച് ഒരു LAMP സെർവറിലേക്ക് വിന്യസിക്കുന്നു

ഡാഷ് മെനുവിൽ നിന്ന് Filezilla സമാരംഭിച്ച് റിമോട്ട് FTP സെർവറിന്റെ ഐപിയും നിങ്ങളുടെ ക്രെഡൻഷ്യലുകളും നൽകുക. FTP സെർവറിലേക്ക് കണക്റ്റുചെയ്യാൻ Quickconnect ക്ലിക്ക് ചെയ്യുക:

/home/gabriel/NetBeansProjects/TecmintTest/public_html/ എന്നതിലേക്ക് നാവിഗേറ്റ് ചെയ്യുക, അതിലെ ഉള്ളടക്കങ്ങൾ തിരഞ്ഞെടുക്കുക, അവയിൽ റൈറ്റ് ക്ലിക്ക് ചെയ്ത് അപ്uലോഡ് തിരഞ്ഞെടുക്കുക.

ഉപയോക്തൃനാമത്തിൽ സൂചിപ്പിച്ചിരിക്കുന്ന വിദൂര ഉപയോക്താവ് റിമോട്ട് ഡയറക്ടറിയിൽ അനുമതികൾ എഴുതേണ്ടതുണ്ടെന്ന് ഇത് തീർച്ചയായും അനുമാനിക്കുന്നു. അപ്uലോഡ് പൂർത്തിയാകുമ്പോൾ, നിങ്ങളുടെ ബ്രൗസർ ആവശ്യമുള്ള ലൊക്കേഷനിലേക്ക് പോയിന്റ് ചെയ്യുക, നിങ്ങൾ മുമ്പത്തെ അതേ പേജ് കാണും (ഞങ്ങൾ റിമോട്ട് ഹോസ്റ്റിലേക്ക് പ്രാദേശിക MySQL ഡാറ്റാബേസ് സജ്ജീകരിച്ചിട്ടില്ലെന്നത് ശ്രദ്ധിക്കുക, എന്നാൽ ഇനിപ്പറയുന്ന ഘട്ടങ്ങൾ പിന്തുടർന്ന് നിങ്ങൾക്ക് അത് എളുപ്പത്തിൽ ചെയ്യാൻ കഴിയും. ഈ ട്യൂട്ടോറിയലിന്റെ തുടക്കം).

സംഗ്രഹം

ഈ ലേഖനത്തിൽ, jQuery ഉം അൽപ്പം JavaScript ഉം ഉപയോഗിച്ച് ഞങ്ങൾ ഞങ്ങളുടെ വെബ് ആപ്ലിക്കേഷനിലേക്ക് ഡൈനാമിക് പ്രവർത്തനം ചേർത്തിട്ടുണ്ട്. കൂടുതൽ വിവരങ്ങൾക്കായി നിങ്ങൾക്ക് ഔദ്യോഗിക jQuery ഡോക്uസ് റഫർ ചെയ്യാം, കൂടുതൽ സങ്കീർണ്ണമായ ആപ്ലിക്കേഷനുകൾ എഴുതാൻ നിങ്ങൾ തീരുമാനിക്കുകയാണെങ്കിൽ അത് വളരെ സഹായകമാകും. പൊതിയുന്നു, ഞങ്ങൾ ഒരു FTP ക്ലയന്റ് ഉപയോഗിച്ച് ഒരു റിമോട്ട് LAMP സെർവറിലേക്കും ഞങ്ങളുടെ അപേക്ഷ വിന്യസിച്ചു.

ഈ ലേഖനത്തെക്കുറിച്ചുള്ള നിങ്ങളുടെ അഭിപ്രായം കേൾക്കുന്നതിൽ ഞങ്ങൾ ആവേശഭരിതരാണ് - ചുവടെയുള്ള ഫോം ഉപയോഗിച്ച് ഞങ്ങളെ ബന്ധപ്പെടാൻ മടിക്കേണ്ടതില്ല.