Wéi deploy HTML5 Websäit op engem LAMP Server an Ubuntu
An de fréieren zwee Artikelen vun dëser Serie hu mir erkläert wéi Dir Netbeans an enger Linux Desktop Verdeelung als IDE opstellt fir Webapplikatiounen z'entwéckelen. Mir sinn dunn weidergaang fir zwee Kärkomponenten ze addéieren, jQuery a Bootstrap, fir Är Säiten mobilfrëndlech a reaktiounsfäeg ze maachen.
- Wéi e Basis HTML5-Projet an Ubuntu erstellt mat Netbeans - Deel 1
- Wéi schreift een eng mobilfrëndlech App mat JQuery & Bootstrap - Deel 2
Wéi Dir als Entwéckler selten mat statesche Inhalter beschäftegt, wäerte mir elo dynamesch Funktionalitéit op d'Basissäit bäidroen, déi mir am Deel 2 opgeriicht hunn. Fir unzefänken, loosst eis d'Viraussetzungen oplëschten an se adresséieren ier Dir weider geet.
Fir eng dynamesch Applikatioun an eiser Entwécklungsmaschinn ze testen ier se op e LAMP-Server ofgesat gëtt, musse mir e puer Packagen installéieren.
Well mir en Ubuntu Desktop benotze fir dës Serie ze schreiwen, huelen mir un datt Äre Benotzerkont schonn an d'Sudoers Datei bäigefüügt gouf an déi néideg Permissiounen kritt huet.
Packagen installéieren an Zougang zum DB Server konfiguréieren
Notéiert w.e.g. datt während der Installatioun Dir gefuerdert gëtt e Passwuert fir de MySQL Root Benotzer anzeginn. Vergewëssert Iech datt Dir e staarkt Passwuert auswielt an da weider.
Ubuntu an Derivate (och fir aner Debian-baséiert Verdeelungen):
$ sudo apt update && sudo apt install apache2 php php-common php-mysql mysql-server filezilla
Fedora/CentOS/RHEL an och fir aner RHEL-baséiert Verdeelungen):
$ sudo yum update && sudo yum install httpd php php-common php-mysql mysql-server filezilla
Wann d'Installatioun fäerdeg ass, ass et staark recommandéiert datt Dir mysql_secure_installation Kommando ausféiert fir Ären Datebankserver ze sécheren.
$ sudo mysql_secure_installation
Dir wäert fir déi folgend Informatioun gefrot ginn:
- D'Root Passwuert änneren? [J/n]. Wann Dir schonn e Passwuert fir de MySQL Root Benotzer gesat hutt, kënnt Dir dëse Schrëtt iwwersprangen.
- Anonyme Benotzer läschen? [J/n] j.
- Root Login op afstand net zouloossen? [Y/n] y (Well dëst Äert lokalt Entwécklungsëmfeld ass, musst Dir net mat Ärem DB-Server op afstand verbannen).
- Testdatenbank läschen an Zougang dozou? [J/n] an
- Relude Privileg Dëscher elo? [J/n] j.
Eng Prouf Datebank erstellen an Testdaten lueden
Fir eng Prouf Datebank ze kreéieren an e puer Testdaten ze lueden, loggt Iech op Ären DB Server un:
$ sudo mysql -u root -p
Dir wäert gefuerdert ginn d'Passwuert fir de MySQL Root Benotzer anzeginn.
An der MySQL-Prompt, Typ
CREATE DATABASE tecmint_db;
an dréckt Enter:
Loosst eis elo en Dësch erstellen:
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 ) );
a populéiert et mat Proufdaten:
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');
Füügt symbolesch Linken am Web Server Verzeichnis
Zënter Netbeans, Par défaut, Projeten am Heemverzeichnis vum aktuellen Benotzer späichert, musst Dir symbolesch Linken addéieren, déi op dës Plaz weisen. Zum Beispill,
$ sudo ln -s /home/ubuntu/NetBeansProjects/TecmintTest/public_html /var/www/html/TecmintTest
wäert e mëlle Link mam Numm TecmintTest derbäisetzen, deen op /home/gabriel/NetBeansProjects/TecmintTest/public_html weist.
Aus deem Grond, wann Dir Äre Browser op http://localhost/TecmintTest/ weist, gesitt Dir tatsächlech d'Applikatioun déi mir am Deel 2 ageriicht hunn:
E Remote FTP a Webserver opsetzen
Well Dir einfach e FTP a Webserver opbaue kënnt mat den Instruktiounen am Deel 9 - Installéieren a konfiguréieren Secure FTP a Web Server vun der RHCSA Serie zu Tecmint, wäerte mir se net hei widderhuelen. Gitt w.e.g. op dee Guide ier Dir weider geet.
Verwandelt eis Applikatioun an eng Dynamic One
Dir wäert wahrscheinlech denken datt mir net vill mat de Proufdaten maache kënnen, déi mir virdru an eiser Datebank bäigefüügt hunn, an Dir hutt Recht, awer et wäert genuch sinn fir d'Grondlage vum Embedding vu PHP Code an d'Resultater vun Ufroen an eng MySQL DB ze léieren. an Ären HTML5 Säiten.
Als éischt musse mir d'Extensioun vum Haaptdokument vun eiser Applikatioun op .php änneren anstatt HTML:
# mv /var/www/html/TecmintTest/index.html /var/www/html/TecmintTest/index.php
Da loosst eis de Projet an Netbeans opmaachen an ufänken e puer Ännerungen ze maachen.
1. Füügt en Dossier un de Projet mam Numm enthält wou mir Backend php Uwendungen späicheren.
2. Erstellt eng Datei mam Numm dbconnection.php bannen enthält a setzt de folgende Code an:
<?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 );
?>
wéi am folgenden Bild uginn:
Dës Datei gëtt benotzt fir mat dem Datebankserver ze verbannen, et ze froen an d'Resultater vun där Ufro an engem JSON-ähnleche String zréckzebréngen fir vun der Frontend-Applikatioun mat enger liichter Ännerung ze verbrauchen.
Notéiert datt Dir typesch separat Dateie benotzt fir all dës Operatiounen auszeféieren, awer mir hu gewielt fir all dës Funktionalitéit an enger Datei opzehuelen fir Einfachheet.
3. Am index.php füügt de folgenden Ausschnëtt just ënner dem Eröffnungskierper Tag. Dat ass de jQuery Wee fir eng extern PHP App ze ruffen wann d'Webdokument fäerdeg ass, oder an anere Wierder, all Kéier wann et lued:
<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. Füügt elo eng eenzegaarteg ID (selwecht wéi an der for Loop uewen) un all Zeil an der Div mat enger Klasserei um Enn vun 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>
Wann Dir elo op Run Project klickt, sollt Dir dëst gesinn:
Dëst ass wesentlech d'selwecht wéi d'Informatioun, déi zréckkoum wa mir d'Ufro vun eisem MySQL Client Prompt virdru gemaach hunn.
Deploy op e LAMP Server mat Filezilla
Start Filezilla aus dem Dash-Menü a gitt d'IP vum Remote FTP-Server an Är Umeldungsinformatiounen. Da klickt op Quickconnect fir mam FTP-Server ze verbannen:
Navigéiert op /home/gabriel/NetBeansProjects/TecmintTest/public_html/, wielt säin Inhalt, klickt op se a wielt Eroplueden.
Dëst gëtt natierlech ugeholl datt de Fernbenotzer, deen am Benotzernumm uginn ass, Permissiounen am Fernverzeechnes schreiwen muss. Wann den Eroplueden fäerdeg ass, weist Äre Browser op déi gewënschte Plaz an Dir sollt déiselwecht Säit gesinn wéi virdrun (notéiert w.e.g. datt mir déi lokal MySQL Datebank net op den Fernhost ageriicht hunn, awer Dir kënnt dat einfach maachen no de Schrëtt vun den Ufank vun dësem Tutorial).
Resumé
An dësem Artikel hu mir dynamesch Funktionalitéit zu eiser Webapplikatioun bäigefüügt mat jQuery an e bësse JavaScript. Dir kënnt op déi offiziell jQuery Dokumenter bezéien fir méi Informatioun, déi ganz hëllefräich sinn wann Dir décidéiert méi komplex Uwendungen ze schreiwen. Ofschléissend, mir hunn och eis Applikatioun op e Remote LAMP Server ofgesat mat engem FTP Client.
Mir sinn opgereegt Är Meenung iwwer dësen Artikel ze héieren - fillt Iech gratis eis ze kontaktéieren andeems Dir de Formulaire hei drënner benotzt.