szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[oktatas:web:nodejs|< NodeJS]]

====== Pug ======

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2021
  * [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== A pug =====

A Pug egy template motor Node számára.
Egy könnyen olvasható egyszerű szintaktikájú 
nyelvből készít HTML-t.


{{:oktatas:web:nodejs:pug_mukodese.png?200|}}


A Pug webhelye:
  * https://pugjs.org/


===== NodeJS telepítés =====

Elsőként telepíteni kell NodeJS-t és a hozzátartozó npm csomagkezelőt.

==== Debian tárolóból ====

  apt install nodejs

===== Pug telepítés =====

Rendszergazdaként:
  npm i -g pug-cli

Ellenőrizzük a verziót:
  pug --version

===== Szintaxis kiemelés =====

Atom esetén:
  apm install language-pug

===== Mintaoldal =====

Készítsünk egy projektet:
  mkdir projekt01
  cd projekt01
  mkdir html
  touch index.pug

Indítsuk el a pug-t, amely az index.pug fájlból azonnal elkészíti az index.html fájlt:
  pug -w -P . -o ./html

Valami ehhez hasonlót kell látni:
<code>
watching test.pug
rendered /home/janos/dev/gyak/npm/projekt02/html/test.html
</code>

A kapcsolók rendre:
  * -w Watch vagyis, figyeljük megadott könyvtárat.
  * -P Szépített kimenet.
  * . Az aktuális könyvtárat figyeljük.
  * -o Milyen könyvtárba írja a változásokat.

Készítsünk egy weboldalt:
<code pug index.pug>
doctype html
html(lang='hu')
  head
    meta(charset='utf-8')
    title Helló
  body
    h1 Helló Világ
</code>


Ha megnézzük a kimenetet, akkor egy index.html fájlt találunk, aminek a tartalma:
<code html index.html>
<!DOCTYPE html>
<html lang="hu">
  <head>
    <meta charset="utf-8">
    <title>Helló</title>
  </head>
  <body>
    <h1>Helló Világ</h1>
  </body>
</html>
</code>

===== Behúzások =====

A behúzások fontosak a .pug fájlban. 
Ha azt írom:

<code>
div
  p helló
</code>

A kimenete:
<code html>
<div>
  <p>helló</p>
</div>
</code>

De ha egy vonalba írom a div és p elemeket:
<code>
div
p helló
</code>

Akkor a div nem tartalmazza a p elemet. 
<code>
<div></div>
<p>helló</p>
</code>

Láthatjuk, hogy a PUG fájlban nem írunk lezáró taget az egyszerűség kedvéért. 
Több információért: 
  * https://pugjs.org/


===== DOCTYPE ======

Generálhatunk dokumentum típusdefiníciót. A Pug alapértelmezetten
HTML5 dokumentum típusdefiníciót generál, de rávehető
más típusokra is. 


Ha szeretnénk nyomatékosítani a HTML5-t:
  doctype html
Ez a következő HTML kódot generálja:
  <!DOCTYPE html>

XHTML doctype sort a következő Pug bejegyzés generál:
  doctype strict

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


Transitional doctype sor generálása:
  doctype transitional

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


Több információ:
  * https://pugjs.org/language/doctype.html (2021)


===== Tagek =====


<code>
ul
  li alma
  li körte
  li barack
  li szilva
</code>


Eredmény:

<code html>
<ul>
  <li>alma</li>
  <li>körte</li>
  <li>barack</li>
  <li>szilva</li>
</ul>
</code>

===== Osztályok és azonosítók =====


<code>
div.gyumolcsok
  ul
    li alma
    li körte
    li barack
    li szilva
</code>

<code html>
<div class="gyumolcsok">
  <ul>
    <li>alma</li>
    <li>körte</li>
    <li>barack</li>
    <li>szilva</li>
  </ul>
</div>
</code>


Azonosítóval
<code pug>
div#gyumolcsok
  ul
    li alma
    li körte
    li barack
    li szilva
</code>


<code html>
<div id="gyumolcsok">
  <ul>
    <li>alma</li>
    <li>körte</li>
    <li>barack</li>
    <li>szilva</li>
  </ul>
</div>
</code>

A div elem elhagyható. Ha csak az osztály vagy az azonosító nevét írjuk
ponttal vagy # karakterrel, akkor div elem lesz belőle. 

  .elso

Eredménye:
  <div class="elso"></div>


Vagy azonsítóval:
  #elso
Eredménye:
  <div id="elso"></div>


===== Attribútumok =====

Az attribútumokat zárójelben a tag neve után adjuk meg. 
A karakterkódolás beállítása például:

  meta(charset='utf-8')

Eredménye:
  <meta charset="utf-8">


Egy link href attribútuma:
  a(href='index.html') Főoldal

Eredménye:
  <a href="index.html">Főoldal</a>

Az attribútumok mehetnek több sorba is:

<code>
input.adatok(
  type='text'
  name='teljesnev'
  placeholder='Írd ide a neved'
  )
</code>

Eredménye:
  <input class="adatok" type="text" name="teljesnev" placeholder="Írd ide a neved">


===== Szövegek és szövegblokkok =====


  p Lorem ipsum dolor est amet

<code>
p
  | Első sor
  | Második sor
</code>


<code>
p.
  Multos do ingeniis non quorum, proident magna possumus admodum ex senserit 
  dolore quid commodo minim ut arbitror aliqua dolore eu quem. Admodum tempor 
  velit senserit multos si laboris cillum occaecat. Iis nulla singulis, ita non 
  ipsum proident, expetendis elit ea offendit domesticarum, ea ipsum singulis 
  despicationes.Qui nulla proident. Te elit relinqueret, malis constias 
  arbitrantur. Ea cillum id fugiat.
</code>


===== Megjegyzések =====


<code>
// Első blokk
div.elso
</code>

Eredménye:

<code html>
<!-- Első blokk-->
<div class="elso"></div>
</code>


Ha HTML oldalon nem szeretném, hogy szerepeljen, csak a Pug
fájlban szeretném megjegyzésként látni:

<code pug>
//- Első blokk
div.elso
</code>


Több soros megjegyzés:
<code pug>
// 
  Megjegyzés első sora
  Második sora

div.elso 
</code>


Eredménye:
<code html>
<!-- 
Megjegyzés első sora
Második sora

-->
<div class="elso"> </div>
</code>

===== JavaScript =====
==== Pufferelt és nem pufferelt kód ====



Kétféle JavaScript kódot használhatunk:
  * pufferelt
  * nem pufferelt

A nem pufferelt kódok mindig (-) karakterrel kezdődnek, és
nem jelennek meg a HTML kimenetben.
A pufferelt kódok mindig (=) karakterrel kezdődnek, és eredményeik
megjelennek a HTML kimenetben.

<code pug>
//- Erre a névre később hivatkozhatok a Pug fájlban:
- const nev = "János"

//- Kiértékelődik JavaScript kifejezésként:
p=2*5
</code>


A fenti kód eredménye:
  <p>10</p>


Biztonsági okokból a pufferelt kód HTML escape szekvenciával
jelenik meg. Pug kód:
  p= '<br>'

Eredménye:
  <p>&lt;br&gt;</p>

==== Behelyettesítés =====

Behelyettesítést a #{} karakterek segítségével tehetünk a Pug kódba.

<code pug>
- const nev = "János"
p A neved #{nev}
</code>

Eredménye:
  <p>A neved János</p>

==== Iteráció ====

<code pug>
//- Iteráció

- const gyumolcsok = ['alma', 'körte', 'szilva', 'barack']

ul
  each gyumolcs in gyumolcsok
    li= gyumolcs
</code>

Eredmény:
<code html>
<ul>
  <li>alma</li>
  <li>körte</li>
  <li>szilva</li>
  <li>barack</li>
</ul>
</code>


Kulcsokkal:
<code>
- const gyumolcsok = ['alma', 'körte', 'szilva', 'barack']

ul
  each gyumolcs, index in gyumolcsok
    li= index + ': ' + gyumolcs
</code>

<code html>
<ul>
  <li>0: alma</li>
  <li>1: körte</li>
  <li>2: szilva</li>
  <li>3: barack</li>
</ul>
</code>

==== Szelekció ====

<code>
//- Szelekció

- var nev = 'János'

if nev
  p= nev
</code>

Eredmény:
<code html>
<p>János</p>
</code>


<code>
//- Szelekció

- 
  var dolgozo = {
    nev: 'Nagy János',
    telepules: 'Szolnok',
    fizetes: '8500000'
  }

if dolgozo.fizetes
  p= dolgozo.nev
</code>

Eredmény:
<code html>
<p>Nagy János</p>
</code>

===== Pug és Express =====

<note important>Használat közben, ügyeljünk arra, hogy a express webszerver nem alkalmazza 
a JavaScript állományokban elvégzett változtatásokat, azt mindig újra kell
indítani. Különösen routing használatánál.

Megoldás lehet a [[https://nodemon.io/|nodemon]] használata.
</note> 


  npm install express

Hozz létre egy app.js fájl, majd szerkeszd:

<code javascript app.js>
const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Helló Világ');
});

app.listen(8000, () => {
  console.log('Hallgatózás a 8000-s porton...');
});
</code>

  node app


==== Nézet ====

  npm install pug
  mkdir views
  touch views/index.pug



<code>
projekt01/
  |-node_modules/
  |-views/
  |  `-index.pug
  |-app.js
  |-package-lock.json
  `-package.json
</code>


<code javascript app.js>
const express = require('express');
const app = express();

app.set('view engine', 'pug');

app.get('/', (req, res) => {
  res.render('index');
});

app.listen(8000, () => {
  console.log('Hallgatózás a 8000-s porton...');
});
</code>


<code pug index.pug>
doctype html
html(lang='hu')
  head
    meta(charset='utf-8')
    title Helló
  body
    h1 Helló
    p Helló Világ
</code>

  node app

===== Adatok JSON adatbázisból =====

==== JSON szerver futtatása ====


<code>
{
  "dolgozok": [
    {
      "id": 1,
      "fullname": "Nagy János",
      "city": "Szolnok",
      "salary": 8400000
    },
    {
      "id": 2,
      "fullname": "Páros Lajos",
      "city": "Szeged",
      "salary": 3430000
    },
    {
      "id": 3,
      "fullname": "Aranyos Enikő",
      "city": "Szolnok",
      "salary": 4245000
    },
    {
      "id": 4,
      "fullname": "Bárány Tamás",
      "city": "Miskolc",
      "salary": 2850000
    }
  ]
}
</code>


  npm i -g json-server

  json-server --watch dolgozok.json --port 6000

==== Weblap ====

<code>
mkdir projekt01
cd projekt01
npm init -y

npm install express pug axios
</code>


<code>
projekt01/
  |-node_modules/
  |-views/
  |  `-index.pug
  |-app.js
  |-package-lock.json
  `-package.json
</code>

Hozzuk létre az index.pug fájlt:

<code pug views/index.pug>
doctype html
html(lang='hu')
  head
    meta(charset='utf-8')
    title Helló
  body
    h1 Dolgozók
    
    table
      tr
        th Név
        th Település
        th Fizetés
      each dolgozo in dolgozok
        tr
          td #{dolgozo.fullname}
          td #{dolgozo.city}
          td #{dolgozo.salary}

</code>

Majd az app.js:

<code javascript app.js>
const express = require('express');
const app = express();
const axios = require('axios');

app.set('view engine', 'pug');

app.get('/', (req, res) => {
  axios.get('http://localhost:6000/dolgozok')
    .then(resp => {
      res.render('index', { dolgozok: resp.data})
    });
});

app.listen(8000, () => {
  console.log('Hallgatózás a 8000-s porton...');
});

</code>

Futtassuk a weblapot:
  node app

Nézzük meg a böngészőben:
  localost:8000

===== Többszörösen használt fájlok =====




<code pug views/layout.pug>
doctype html
html(lang='hu')
  head
    meta(charset='utf-8')
    title Zöld Zrt
  body
    h1 Zöld Zrt

    nav
      ul
        li
          a(href="/addform") Hozzáad
        li
          a(href="/") Lista
    block content
 
</code>



<code pug views/index.pug>
extends layout.pug

block content
  h2 Dolgozók
    
  table
    tr
      th Név
      th Település
      th Fizetés
    each dolgozo in dolgozok
      tr
        td #{dolgozo.fullname}
        td #{dolgozo.city}
        td #{dolgozo.salary}

</code>


<code pug views/addform.pug>
extends layout.pug

block content
  h2 Új dolgozó
  
  label(for="nev") Név
  input#nev(type="text", name="nev")
  br
  
  label(for="telepules") Település
  input#telepules(type="text", name="telepules")
  br
</code>    


A routing a következő képen néz ki:
<code javascript app.js>
const express = require('express');
const app = express();
const axios = require('axios');

app.set('view engine', 'pug');

app.get('/', (req, res) => {
  axios.get('http://localhost:6000/dolgozok')
    .then(resp => {
      res.render('index', { dolgozok: resp.data})
    });
});

app.get('/addform', (req, res) => {
  res.render('addform');
});

app.listen(8000, () => {
  console.log('Hallgatózás a 8000-s porton...');
});
</code>



===== Forrás =====

  * https://pugjs.org/ (2021)
  * https://www.sitepoint.com/a-beginners-guide-to-pug/ (2021)
szit

Felhasználói eszközök

Eszközök a webhelyen

Eszközök az oldalon
