NodeJS ExpressJS: Template [EX-10]

Template PUG

Pugjs.org
Bootstrap v4.0

/views/layouts/common.pug

2018

html
    head
        link(rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css")
    body
        block content
        block footer

/views/index.pug

index.pug

extends ../layouts/common.pug 

block content
    div(class="container col-3")
        h3(class="text-uppercase text-center alert alert-danger mt-3") Create user
        form(action="/users/create", method="POST")
            label Name
            div(class="input-group mb-3")
                input(name="name", type="text", autocomplete="off" class="form-control" placeholder="Enter name")
                div(class="input-group-append")
                    button(class="btn btn-success") create
        a(href="/users") << back

/views/users/index.pug

index.pug

extends ../layouts/common.pug 

block content
    div(class="container col-3")
        h3(class="text-uppercase text-center alert alert-danger mt-3") User

        a(href='/users/create') Create user

        form(action = "/users/search/name", method="GET")
            div(class="input-group mb-3")
                input(name="name", type="text", autocomplete="off" class="form-control" placeholder="Enter name")
                div(class="input-group-append")
                    button(class="btn btn-success") Search

        ul(class="list-group")
            each user in users
                li(class="list-group-item")
                    span(class="float-left")= user.name
                    a(class="float-right" href='users/'+ user.id) View

/views/users/create.pug

create.pug

extends ../layouts/common.pug 

block content
    div(class="container col-3")
        h3(class="text-uppercase text-center alert alert-danger mt-3") Create user
        form(action="/users/create", method="POST")
            label Name
            div(class="input-group mb-3")
                input(name="name", type="text", autocomplete="off" class="form-control" placeholder="Enter name")
                div(class="input-group-append")
                    button(class="btn btn-success") create
        a(href="/users") << back

/views/users/view.pug

view.pug

extends ../layouts/common.pug 

block content
    div(class="container col-3")
        h3(class="text-uppercase text-center alert alert-danger mt-3") View User
        div(class="alert alert-success")
            b(class="mr-2") Name:
            span= user.name
        a(href="/users") << back

Command: npm start

<< back | next >>