diff --git a/content/notes/11-mvc-model.md b/content/notes/11-mvc-model.md deleted file mode 100644 index 4356c683a..000000000 --- a/content/notes/11-mvc-model.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: "11-mvc-model" -aliases: -tags: -- cosc203 -- lecture ---- - -![mvc model diagram|400](https://i.imgur.com/Ini1bwk.png) - -# view templates -## pug -pug is a view engine. -``` js -app.set('views', path.join(__dirname, 'views')) -app.set('view engine', 'pug') -``` - -a pug file -- defines an html template - -e.g., -``` pug -doctype html -head - title mytitle - script(type="text/javascript") -``` \ No newline at end of file diff --git a/content/notes/11-view-templates.md b/content/notes/11-view-templates.md new file mode 100644 index 000000000..c19e663d1 --- /dev/null +++ b/content/notes/11-view-templates.md @@ -0,0 +1,44 @@ +--- +title: "11-view-templates" +aliases: +tags: +- cosc203 +- lecture +sr-due: 2022-09-24 +sr-interval: 3 +sr-ease: 250 +--- + +[slides](https://blackboard.otago.ac.nz/bbcswebdav/pid-2972656-dt-content-rid-19051721_1/courses/COSC203_S2DNI_2022/COSC203_lecture11.pdf) + +![mvc model diagram|400](https://i.imgur.com/Ini1bwk.png) + +# view templates +## pug +pug is a view engine. +``` js +app.set('views', path.join(__dirname, 'views')) +app.set('view engine', 'pug') +``` + +a pug file +- defines an html template + +e.g., +``` +doctype html +head + title Pug + script(type= "text/javascript"). + if (foo) bar(1 + 5) +body + h1 Pug - node template engine + #container.col //auto makes div with classs + p You are amazing + p Pug is a terse and simple templating language. +``` + +### extending views +- you can declare a base template and then extend it, replacing jus the bits you want to change + +![extending template example|400](https://i.imgur.com/nwF5Vlc.png) diff --git a/content/notes/cosc-203.md b/content/notes/cosc-203.md index d15d9a048..9edfdaeff 100644 --- a/content/notes/cosc-203.md +++ b/content/notes/cosc-203.md @@ -34,6 +34,7 @@ tags: - [08-web-frameworks](notes/08-web-frameworks.md) - [09-web-databases-networks](notes/09-web-databases-networks.md) - [10-routes-controllers](notes/10-routes-controllers.md) +- [11-view-templates](notes/11-view-templates.md) # Archive