Com implementar el lloc web HTML5 en un servidor LAMP a Ubuntu
En els dos articles anteriors d'aquesta sèrie, vam explicar com configurar Netbeans en una distribució d'escriptori Linux com a IDE per desenvolupar aplicacions web. A continuació, vam procedir a afegir dos components bàsics, jQuery i Bootstrap, per tal que les vostres pàgines siguin adaptables i responsives.
- Com crear un projecte HTML5 bàsic a Ubuntu amb Netbeans - Part 1
- Com escriure una aplicació per a mòbils amb JQuery i Bootstrap - Part 2
Com que poques vegades tractaràs contingut estàtic com a desenvolupador, ara afegirem una funcionalitat dinàmica a la pàgina bàsica que vam configurar a la part 2. Per començar, enumerem els requisits previs i els abordem abans de seguir endavant.
Per provar una aplicació dinàmica a la nostra màquina de desenvolupament abans de desplegar-la en un servidor LAMP, haurem d'instal·lar alguns paquets.
Com que estem utilitzant un escriptori Ubuntu per escriure aquesta sèrie, suposem que el vostre compte d'usuari ja s'ha afegit al fitxer sudoers i s'ha concedit els permisos necessaris.
Instal·lació de paquets i configuració de l'accés al servidor de base de dades
Tingueu en compte que durant la instal·lació és possible que se us demani que introduïu una contrasenya per a l'usuari root de MySQL. Assegureu-vos que trieu una contrasenya segura i, a continuació, continueu.
Ubuntu i derivats (també per a altres distribucions basades en Debian):
$ sudo apt update && sudo apt install apache2 php php-common php-mysql mysql-server filezilla
Fedora/CentOS/RHEL i també per a altres distribucions basades en RHEL):
$ sudo yum update && sudo yum install httpd php php-common php-mysql mysql-server filezilla
Quan s'hagi completat la instal·lació, és molt recomanable que executeu l'ordre mysql_secure_installation per protegir el vostre servidor de base de dades.
$ sudo mysql_secure_installation
Se us demanarà la informació següent:
- Vols canviar la contrasenya d'arrel? [S/n]. Si ja heu establert una contrasenya per a l'usuari root de MySQL, podeu ometre aquest pas.
- Vols eliminar usuaris anònims? [S/n] y.
- No permeteu l'inici de sessió root de forma remota? [S/n] i (Com que aquest és el vostre entorn de desenvolupament local, no haureu de connectar-vos al vostre servidor de base de dades de forma remota).
- Vols eliminar la base de dades de prova i accedir-hi? [S/n] i
- Torneu a carregar les taules de privilegis ara? [S/n] y.
Creació d'una base de dades de mostra i càrrega de dades de prova
Per crear una base de dades de mostra i carregar algunes dades de prova, inicieu sessió al vostre servidor de base de dades:
$ sudo mysql -u root -p
Se us demanarà que introduïu la contrasenya per a l'usuari root de MySQL.
A l'indicador de MySQL, escriviu
CREATE DATABASE tecmint_db;
i premeu Enter:
Ara creem una taula:
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 ) );
i ompliu-lo amb dades de mostra:
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');
Afegir enllaços simbòlics al directori del servidor web
Com que Netbeans, de manera predeterminada, emmagatzema els projectes al directori inicial de l'usuari actual, haureu d'afegir enllaços simbòlics que apunten a aquesta ubicació. Per exemple,
$ sudo ln -s /home/ubuntu/NetBeansProjects/TecmintTest/public_html /var/www/html/TecmintTest
afegirà un enllaç suau anomenat TecmintTest que apunta a /home/gabriel/NetBeansProjects/TecmintTest/public_html.
Per aquest motiu, quan apunteu el vostre navegador a http://localhost/TecmintTest/, veureu realment l'aplicació que vam configurar a la part 2:
Configuració d'un FTP i un servidor web remots
Com que podeu configurar fàcilment un servidor FTP i web amb les instruccions que es proporcionen a la part 9: instal·lació i configuració del servidor web i FTP segur de la sèrie RHCSA a Tecmint, no les repetirem aquí. Consulteu aquesta guia abans de continuar.
Convertint la nostra aplicació en una dinàmica
Probablement penseu que no podem fer gaire amb les dades de mostra que hem afegit a la nostra base de dades anteriorment, i teniu raó, però n'hi haurà prou per aprendre els fonaments bàsics d'incrustar codi PHP i els resultats de les consultes a una base de dades MySQL. a les vostres pàgines HTML5.
En primer lloc, haurem de canviar l'extensió del document principal de la nostra aplicació a .php en lloc d'html:
# mv /var/www/html/TecmintTest/index.html /var/www/html/TecmintTest/index.php
Aleshores, obrim el projecte a Netbeans i comencem a fer algunes modificacions.
1. Afegiu una carpeta al projecte anomenada includes on emmagatzemarem les aplicacions php de fons.
2. Creeu un fitxer anomenat dbconnection.php dins inclou i inseriu-lo amb el codi següent:
<?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 );
?>
tal com s'indica a la imatge següent:
Aquest fitxer s'utilitzarà per connectar-se al servidor de bases de dades, per consultar-lo i per tornar els resultats d'aquesta consulta en una cadena semblant a JSON que l'aplicació d'interfície el consumirà amb una lleugera modificació.
Tingueu en compte que normalment utilitzareu fitxers separats per dur a terme cadascuna d'aquestes operacions, però hem optat per incloure tota aquesta funcionalitat en un sol fitxer per simplificar.
3. A index.php, afegiu el fragment següent just a sota de l'etiqueta del cos d'obertura. Aquesta és la manera jQuery de trucar a una aplicació PHP externa quan el document web està llest, o en altres paraules, cada vegada que es carrega:
<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. Ara, afegiu un identificador únic (igual que dins del bucle for anterior) a cada línia del div amb una fila de classe a la part inferior d'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>
Si ara feu clic a Executar projecte, hauríeu de veure això:
Aquesta és essencialment la mateixa que la informació que es va tornar quan vam executar la consulta des del nostre client MySQL anteriorment.
Implementació a un servidor LAMP mitjançant Filezilla
Inicieu Filezilla des del menú Dash i introduïu la IP del servidor FTP remot i les vostres credencials. A continuació, feu clic a Connexió ràpida per connectar-vos al servidor FTP:
Navegueu a /home/gabriel/NetBeansProjects/TecmintTest/public_html/, seleccioneu-ne el contingut, feu-hi clic amb el botó dret i seleccioneu Carrega.
Això, per descomptat, suposa que l'usuari remot indicat a Nom d'usuari ha d'escriure permisos al directori remot. Quan s'hagi completat la càrrega, apunteu el vostre navegador a la ubicació desitjada i hauríeu de veure la mateixa pàgina que abans (tingueu en compte que no hem configurat la base de dades MySQL local a l'amfitrió remot, però ho podeu fer fàcilment seguint els passos de l'inici d'aquest tutorial).
Resum
En aquest article, hem afegit una funcionalitat dinàmica a la nostra aplicació web mitjançant jQuery i una mica de JavaScript. Podeu consultar els documents oficials de jQuery per obtenir més informació, cosa que us serà molt útil si decidiu escriure aplicacions més complexes. Per acabar, també hem desplegat la nostra aplicació a un servidor LAMP remot mitjançant un client FTP.
Estem encantats d'escoltar la vostra opinió sobre aquest article; no dubteu a contactar amb nosaltres mitjançant el formulari següent.