Hvernig á að dreifa HTML5 vefsíðu á LAMP Server í Ubuntu
Í fyrri tveimur greinum þessarar seríu útskýrðum við hvernig á að setja upp Netbeans í Linux skjáborðsdreifingu sem IDE til að þróa vefforrit. Við héldum síðan áfram að bæta við tveimur kjarnahlutum, jQuery og Bootstrap, til að gera síðurnar þínar farsímavænar og móttækilegar.
- Hvernig á að búa til grunn HTML5 verkefni í Ubuntu með því að nota Netbeans – Part 1
- Hvernig á að skrifa farsímavænt forrit með JQuery & Bootstrap – Part 2
Þar sem þú munt sjaldan fást við kyrrstætt efni sem þróunaraðili, munum við nú bæta kraftmikilli virkni við grunnsíðuna sem við settum upp í hluta 2. Til að byrja skulum við skrá forsendurnar og takast á við þær áður en haldið er áfram.
Til þess að prófa kraftmikið forrit í þróunarvélinni okkar áður en það er dreift á LAMP þjón, þurfum við að setja upp nokkra pakka.
Þar sem við erum að nota Ubuntu skjáborð til að skrifa þessa röð, gerum við ráð fyrir að notandareikningnum þínum hafi þegar verið bætt við sudoers skrána og veitt nauðsynlegar heimildir.
Setja upp pakka og stilla aðgang að DB Server
Vinsamlegast athugaðu að meðan á uppsetningu stendur gætir þú verið beðinn um að slá inn lykilorð fyrir MySQL rót notandann. Gakktu úr skugga um að þú veljir sterkt lykilorð og haltu síðan áfram.
Ubuntu og afleiður (einnig fyrir aðrar Debian-byggðar dreifingar):
$ sudo apt update && sudo apt install apache2 php php-common php-mysql mysql-server filezilla
Fedora/CentOS/RHEL og einnig fyrir aðrar dreifingar byggðar á RHEL):
$ sudo yum update && sudo yum install httpd php php-common php-mysql mysql-server filezilla
Þegar uppsetningunni er lokið er eindregið mælt með því að þú keyrir mysql_secure_installation skipunina til að tryggja gagnagrunnsþjóninn þinn.
$ sudo mysql_secure_installation
Þú verður beðinn um eftirfarandi upplýsingar:
- Breyta rótarlykilorðinu? [J/n]. Ef þú hefur þegar stillt lykilorð fyrir MySQL rót notandann geturðu sleppt þessu skrefi.
- Fjarlægja nafnlausa notendur? [Y/n] y.
- Viltu leyfa rótarinnskráningu fjarstýrt? [Y/n] y (Þar sem þetta er staðbundið þróunarumhverfi þitt, þarftu ekki að tengjast DB-þjóninum þínum í fjartengingu).
- Fjarlægja prófunargagnagrunn og aðgang að honum? [J/n] y
- Endurhlaða forréttindatöflur núna? [Y/n] y.
Að búa til sýnishornsgagnagrunn og hlaða prófgögnum
Til að búa til sýnishornsgagnagrunn og hlaða inn prófunargögnum skaltu skrá þig inn á DB netþjóninn þinn:
$ sudo mysql -u root -p
Þú verður beðinn um að slá inn lykilorðið fyrir MySQL rót notandann.
Í MySQL hvetjunni, sláðu inn
CREATE DATABASE tecmint_db;
og ýttu á Enter:
Nú skulum við búa til töflu:
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 fylltu það út með sýnishornsgögnum:
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');
Bætir táknrænum tenglum í vefþjónsskrána
Þar sem Netbeans, sjálfgefið, geymir verkefni í heimaskrá núverandi notanda, þarftu að bæta við táknrænum tenglum sem vísa á þá staðsetningu. Til dæmis,
$ sudo ln -s /home/ubuntu/NetBeansProjects/TecmintTest/public_html /var/www/html/TecmintTest
mun bæta við mjúkum hlekk sem heitir TecmintTest sem bendir á /home/gabriel/NetBeansProjects/TecmintTest/public_html.
Af þeirri ástæðu, þegar þú bendir vafrann þinn á http://localhost/TecmintTest/, muntu í raun sjá forritið sem við settum upp í hluta 2:
Setja upp fjarstýrðan FTP og vefþjón
Þar sem þú getur auðveldlega sett upp FTP og vefþjón með leiðbeiningunum í hluta 9 – Settu upp og stilltu öruggan FTP og vefþjón RHCSA seríunnar í Tecmint, munum við ekki endurtaka þær hér. Vinsamlegast skoðaðu þá leiðbeiningar áður en lengra er haldið.
Breytum forritinu okkar í Dynamic One
Þú munt líklega halda að við getum ekki gert mikið með sýnishornsgögnin sem við bættum við gagnagrunninn okkar áðan, og það er rétt hjá þér, en það mun vera nóg til að læra undirstöðuatriðin við að fella inn PHP kóða og niðurstöður fyrirspurna í MySQL DB á HTML5 síðunum þínum.
Í fyrsta lagi þurfum við að breyta framlengingu aðalskjals umsóknar okkar í .php í stað html:
# mv /var/www/html/TecmintTest/index.html /var/www/html/TecmintTest/index.php
Þá skulum við opna verkefnið í Netbeans og byrja að gera nokkrar breytingar.
1. Bættu möppu við verkefnið sem heitir include þar sem við munum geyma bakenda php forrit.
2. Búðu til skrá sem heitir dbconnection.php inside include og settu inn með eftirfarandi kóð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 );
?>
eins og sýnt er á eftirfarandi mynd:
Þessi skrá verður notuð til að tengjast gagnagrunnsþjóninum, til að spyrjast fyrir um hann og til að skila niðurstöðum þeirrar fyrirspurnar í JSON-líkum streng til að nota af framendaforritinu með smá breytingum.
Athugaðu að venjulega myndir þú nota aðskildar skrár til að framkvæma hverja af þessum aðgerðum, en við völdum að innihalda alla þessa virkni í einni skrá til einföldunar.
3. Í index.php skaltu bæta við eftirfarandi broti rétt fyrir neðan meginmálsmerkið. Það er jQuery leiðin til að hringja í utanaðkomandi PHP app þegar vefskjalið er tilbúið, eða með öðrum orðum, í hvert skipti sem það hleður:
<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. Bættu nú við einstöku auðkenni (sama og inni í for lykkjunni hér að ofan) við hverja línu í divinu með bekkjaröð neðst á 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>
Ef þú smellir núna á Run Project ættirðu að sjá þetta:
Þetta er í meginatriðum það sama og upplýsingarnar sem skilað var þegar við keyrðum fyrirspurnina frá MySQL biðlarabeiðni okkar áðan.
Dreifing á LAMP miðlara með Filezilla
Ræstu Filezilla úr Dash valmyndinni og sláðu inn IP ytri FTP netþjóninn og skilríki þín. Smelltu síðan á Quickconnect til að tengjast FTP þjóninum:
Farðu í /home/gabriel/NetBeansProjects/TecmintTest/public_html/, veldu innihald þess, hægrismelltu á þau og veldu Upload.
Þetta gerir auðvitað ráð fyrir því að ytri notandinn sem tilgreindur er í Notandanafn þurfi að skrifa heimildir á ytri möppunni. Þegar upphleðslunni er lokið skaltu beina vafranum þínum á viðkomandi stað og þú ættir að sjá sömu síðu og áður (vinsamlega athugið að við höfum ekki sett upp staðbundna MySQL gagnagrunninn á ytri hýsilinn, en þú getur auðveldlega gert það með því að fylgja skrefunum frá upphaf þessarar kennslu).
Samantekt
Í þessari grein höfum við bætt kraftmikilli virkni við vefforritið okkar með því að nota jQuery og smá JavaScript. Þú getur vísað í opinberu jQuery skjölin fyrir frekari upplýsingar, sem mun vera mjög gagnlegt ef þú ákveður að skrifa flóknari forrit. Að lokum höfum við einnig sent forritið okkar á ytri LAMP miðlara með FTP biðlara.
Við erum spennt að heyra álit þitt á þessari grein - ekki hika við að hafa samband við okkur með því að nota formið hér að neðan.