Helló

[[oktatas:web:nodejs|< Node.js]] ====== Pug ====== * **Szerző:** Sallai András * Copyright (c) 2021, Sallai András * Szerkesztve: 2024 * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC BY-SA 4.0]] * 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/ ===== Node.js telepítés ===== Elsőként telepíteni kell Node.js-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:


watching test.pug
rendered /home/janos/dev/gyak/npm/projekt02/html/test.html

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:


doctype html
html(lang='hu')
  head
    meta(charset='utf-8')
    title Helló
  body
    h1 Helló Világ

Ha megnézzük a kimenetet, akkor egy index.html fájlt találunk, aminek a tartalma:




  
    
    Helló
  
  
    Helló Világ

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


div
  p helló

A kimenete:



  helló

De ha egy vonalba írom a div és p elemeket:


div
p helló

Akkor a div nem tartalmazza a p elemet.



helló

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: XHTML doctype sort a következő Pug bejegyzés generál: doctype strict Transitional doctype sor generálása: doctype transitional Több információ: * https://pugjs.org/language/doctype.html (2021) ===== Tagek =====


ul
  li alma
  li körte
  li barack
  li szilva

Eredmény:



  alma
  körte
  barack
  szilva

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


div.gyumolcsok
  ul
    li alma
    li körte
    li barack
    li szilva



  
    alma
    körte
    barack
    szilva

Azonosítóval


div#gyumolcsok
  ul
    li alma
    li körte
    li barack
    li szilva



  
    alma
    körte
    barack
    szilva

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:

Vagy azonsítóval: #elso Eredménye:

===== 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: Egy link href attribútuma: a(href='index.html') Főoldal Eredménye: Főoldal Az attribútumok mehetnek több sorba is:


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

Eredménye: ===== Szövegek és szövegblokkok ===== p Lorem ipsum dolor est amet


p
  | Első sor
  | Második sor


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.

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


// Első blokk
div.elso

Eredménye:

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


//- Első blokk
div.elso

Több soros megjegyzés:


// 
  Megjegyzés első sora
  Második sora

div.elso

Eredménye:

===== 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.


//- 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

A fenti kód eredménye:

Biztonsági okokból a pufferelt kód HTML escape szekvenciával jelenik meg. Pug kód: p= '
' Eredménye:

<br>

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


- const nev = "János"
p A neved #{nev}

Eredménye:

A neved János

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


//- Iteráció

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

ul
  each gyumolcs in gyumolcsok
    li= gyumolcs

Eredmény:



  alma
  körte
  szilva
  barack

Kulcsokkal:


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

ul
  each gyumolcs, index in gyumolcsok
    li= index + ': ' + gyumolcs



  0: alma
  1: körte
  2: szilva
  3: barack

==== Szelekció ====


//- Szelekció

- var nev = 'János'

if nev
  p= nev

Eredmény:


János


//- Szelekció

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

if dolgozo.fizetes
  p= dolgozo.nev

Eredmény:


Nagy János

===== Pug és Express ===== 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. npm install express Hozz létre egy app.js fájl, majd szerkeszd:


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...');
});

node app ==== Nézet ==== npm install pug mkdir views touch views/index.pug


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


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...');
});


doctype html
html(lang='hu')
  head
    meta(charset='utf-8')
    title Helló
  body
    h1 Helló
    p Helló Világ

node app ===== Adatok JSON adatbázisból ===== ==== JSON szerver futtatása ====


{
  "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
    }
  ]
}

npm i -g json-server json-server --watch dolgozok.json --port 6000 ==== Weblap ====


mkdir projekt01
cd projekt01
npm init -y

npm install express pug axios


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

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


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}

Majd az 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...');
});

Futtassuk a weblapot: node app Nézzük meg a böngészőben: localost:8000 ===== Többszörösen használt fájlok =====


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


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}


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

A routing a következő képen néz ki:


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...');
});

===== Forrás ===== * https://pugjs.org/ (2021) * https://www.sitepoint.com/a-beginners-guide-to-pug/ (2021)