Hvordan distribuere HTML5-nettstedet på en LAMP-server i Ubuntu
I de to foregående artiklene i denne serien forklarte vi hvordan du setter opp Netbeans i en Linux-skrivebordsdistribusjon som en IDE for å utvikle webapplikasjoner. Vi fortsatte deretter med å legge til to kjernekomponenter, jQuery og Bootstrap, for å gjøre sidene dine mobilvennlige og responsive.
- Hvordan lage et grunnleggende HTML5-prosjekt i Ubuntu ved å bruke Netbeans - Del 1
- Hvordan skrive en mobilvennlig app ved hjelp av JQuery & Bootstrap – Del 2
Siden du sjelden vil forholde deg til statisk innhold som utvikler, vil vi nå legge til dynamisk funksjonalitet til den grunnleggende siden som vi satte opp i Del 2. For å begynne, la oss liste opp forutsetningene og adressere dem før vi går videre.
Forutsetninger
For å teste en dynamisk applikasjon i utviklingsmaskinen vår før vi distribuerer den til en LAMP-server, må vi installere noen pakker.
Siden vi bruker et Ubuntu-skrivebord for å skrive denne serien, antar vi at brukerkontoen din allerede er lagt til sudoers-filen og gitt de nødvendige tillatelsene.
Installere pakker og konfigurere tilgang til DB-serveren
Vær oppmerksom på at under installasjonen kan du bli bedt om å angi et passord for MySQL root-brukeren. Pass på at du velger et sterkt passord og fortsett.
Ubuntu og derivater (også for andre Debian-baserte distribusjoner):
sudo apt update && sudo apt install apache2 php php-common php-mysql mysql-server filezilla
Fedora/CentOS/RHEL og også for andre RHEL-baserte distribusjoner):
sudo yum update && sudo yum install httpd php php-common php-mysql mysql-server filezilla
Når installasjonen er fullført, anbefales det på det sterkeste at du kjører kommandoen mysql_secure_installation for å sikre databaseserveren.
sudo mysql_secure_installation
Du vil bli bedt om følgende informasjon:
- Vil du endre root-passordet? [J/n]. Hvis du allerede har angitt et passord for MySQL root-brukeren, kan du hoppe over dette trinnet.
- Vil du fjerne anonyme brukere? [Y/n] y.
- Vil du ikke tillate root-pålogging eksternt? [Y/n] y (Siden dette er ditt lokale utviklingsmiljø, trenger du ikke å koble til DB-serveren eksternt).
- Vil du fjerne testdatabasen og få tilgang til den? [Y/n] y
- Last inn rettighetstabeller på nytt nå? [Y/n] y.
Opprette en prøvedatabase og laste inn testdata
For å opprette en eksempeldatabase og laste inn noen testdata, logg på DB-serveren din:
sudo mysql -u root -p
Du vil bli bedt om å skrive inn passordet for MySQL root-brukeren.
Skriv inn ved MySQL-ledeteksten
CREATE DATABASE tecmint_db;
og trykk Enter:
La oss nå lage en tabell:
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 )
);
og fyll den med eksempeldata:
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');
Legge til symbolske lenker i webserverkatalogen
Siden Netbeans som standard lagrer prosjekter i gjeldende brukers hjemmekatalog, må du legge til symbolske lenker som peker til den plasseringen. For eksempel,
sudo ln -s /home/ubuntu/NetBeansProjects/TecmintTest/public_html /var/www/html/TecmintTest
vil legge til en myk lenke kalt TecmintTest som peker til /home/gabriel/NetBeansProjects/TecmintTest/public_html.
Av den grunn, når du peker nettleseren til http://localhost/TecmintTest/, vil du faktisk se applikasjonen som vi konfigurerte i Del 2:
Sette opp en ekstern FTP og webserver
Siden du enkelt kan sette opp en FTP og Web-server med instruksjonene i del 9 – Installer og konfigurer sikker FTP og webserver i RHCSA-serien i Tecmint, vil vi ikke gjenta dem her. Se veiledningen før du fortsetter.
Gjør om applikasjonen vår til en dynamisk
Du vil sannsynligvis tro at vi ikke kan gjøre mye med eksempeldataene som vi la til databasen vår tidligere, og du har rett, men det vil være nok til å lære det grunnleggende om å bygge inn PHP-kode og resultatene av spørringer i en MySQL DB på HTML5-sidene dine.
Først og fremst må vi endre utvidelsen av hoveddokumentet til applikasjonen vår til .php i stedet for html:
mv /var/www/html/TecmintTest/index.html /var/www/html/TecmintTest/index.php
La oss deretter åpne prosjektet i Netbeans og begynne å gjøre noen modifikasjoner.
1. Legg til en mappe til prosjektet som heter includes hvor vi vil lagre php-applikasjoner i backend.
2. Opprett en fil med navnet dbconnection.php inne i includes og sett inn med følgende kode:
<?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 );
?>
som angitt i følgende bilde:
Denne filen vil bli brukt til å koble til databaseserveren, for å spørre den og for å returnere resultatene av den spørringen i en JSON-lignende streng som skal konsumeres av frontend-applikasjonen med en liten modifikasjon.
Merk at du vanligvis vil bruke separate filer for å utføre hver av disse operasjonene, men vi valgte å inkludere all denne funksjonaliteten i én fil for enkelhets skyld.
3. I index.php legger du til følgende kodebit rett under åpningskoden body. Det er jQuery-måten å kalle en ekstern PHP-app når nett-dokumentet er klart, eller med andre ord, hver gang det lastes:
<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. Legg nå til en unik ID (samme som inne i for-løkken ovenfor) til hver linje i div med en klasse rad ved nederst på 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>
Hvis du nå klikker på Kjør prosjekt, bør du se dette:
Dette er i hovedsak den samme som informasjonen som ble returnert da vi kjørte spørringen fra vår MySQL-klientforespørsel tidligere.
Utplassering til en LAMP-server ved hjelp av Filezilla
Start Filezilla fra Dash-menyen og skriv inn IP til den eksterne FTP-serveren og legitimasjonen din. Klikk deretter Hurtigkobling for å koble til FTP-serveren:
Naviger til /home/gabriel/NetBeansProjects/TecmintTest/public_html/, velg innholdet, høyreklikk på dem og velg Last opp.
Dette forutsetter selvfølgelig at den eksterne brukeren angitt i Brukernavn må skrive tillatelser på den eksterne katalogen. Når opplastingen er fullført, pek nettleseren til ønsket plassering og du skal se samme side som før (vær oppmerksom på at vi ikke har satt opp den lokale MySQL-databasen til den eksterne verten, men du kan enkelt gjøre det ved å følge trinnene fra begynnelsen av denne opplæringen).
Sammendrag
I denne artikkelen har vi lagt til dynamisk funksjonalitet til nettapplikasjonen vår ved hjelp av jQuery og litt JavaScript. Du kan se de offisielle jQuery-dokumentene for mer informasjon, noe som vil være svært nyttig hvis du bestemmer deg for å skrive mer komplekse applikasjoner. Til slutt har vi også distribuert applikasjonen vår til en ekstern LAMP-server ved å bruke en FTP-klient.
Vi er glade for å høre din mening om denne artikkelen - kontakt oss gjerne ved å bruke skjemaet nedenfor.