افزودن صفحه «درباره» به برنامه

فصل ۱۶.۱.

افزودن صفحه ‘درباره’ به برنامه

هدف شما برای این تمرین افزودن یک صفحه جدید ‘درباره’ به برنامه است. باید به route GET /about نگاشت شود، برای کاربران authenticated و unauthenticated در دسترس باشد، و مشابه این به نظر برسد:

مرحله 1

یک route GET /about ایجاد کنید که به یک handler جدید about نگاشت شود. فکر کنید که کدام middleware stack برای route مناسب است.

نمایش کد پیشنهادی

مرحله 2

یک فایل جدید ui/html/pages/about.tmpl ایجاد کنید، با دنبال کردن همان الگوی template که برای صفحات دیگر برنامه استفاده کرده‌ایم. یک title، heading و برخی placeholder copy برای صفحه ‘درباره’ شامل کنید.

نمایش کد پیشنهادی

مرحله 3

نوار navigation اصلی برنامه را به‌روزرسانی کنید تا یک لینک به صفحه جدید ‘درباره’ شامل شود (لینک باید برای همه کاربران قابل مشاهده باشد، صرف نظر از اینکه logged in هستند یا نه).

نمایش کد پیشنهادی

مرحله 4

handler about را به‌روزرسانی کنید تا فایل about.tmpl که تازه ایجاد کرده‌اید را render کند. سپس بررسی کنید که صفحه جدید و navigation کار می‌کند با بازدید از https://localhost:4000/about در مرورگر خود.

نمایش کد پیشنهادی

کد پیشنهادی

کد پیشنهادی برای مرحله 1

File: cmd/web/handlers.go

package main

...

func (app *application) about(w http.ResponseWriter, r *http.Request) {
    // Some code will go here later...
}

File: cmd/web/routes.go

package main

...

func (app *application) routes() http.Handler {
    mux := http.NewServeMux()

    mux.Handle("GET /static/", http.FileServerFS(ui.Files))

    mux.HandleFunc("GET /ping", ping)

    dynamic := alice.New(app.sessionManager.LoadAndSave, noSurf, app.authenticate)

    mux.Handle("GET /{$}", dynamic.ThenFunc(app.home))
    // Add the about route.
    mux.Handle("GET /about", dynamic.ThenFunc(app.about))
    mux.Handle("GET /snippet/view/{id}", dynamic.ThenFunc(app.snippetView))
    mux.Handle("GET /user/signup", dynamic.ThenFunc(app.userSignup))
    mux.Handle("POST /user/signup", dynamic.ThenFunc(app.userSignupPost))
    mux.Handle("GET /user/login", dynamic.ThenFunc(app.userLogin))
    mux.Handle("POST /user/login", dynamic.ThenFunc(app.userLoginPost))

    protected := dynamic.Append(app.requireAuthentication)

    mux.Handle("GET /snippet/create", protected.ThenFunc(app.snippetCreate))
    mux.Handle("POST /snippet/create", protected.ThenFunc(app.snippetCreatePost))
    mux.Handle("POST /user/logout", protected.ThenFunc(app.userLogoutPost))

    standard := alice.New(app.recoverPanic, app.logRequest, commonHeaders)
    return standard.Then(mux)
}

کد پیشنهادی برای مرحله 2

File: ui/html/pages/about.tmpl

{{define "title"}}About{{end}}

{{define "main"}}
    <h2>About</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at mauris dignissim,
    consectetur tellus in, fringilla ante. Pellentesque habitant morbi tristique senectus
    et netus et malesuada fames ac turpis egestas. Sed dignissim hendrerit scelerisque.</p>
    <p>Praesent a dignissim arcu. Cras a metus sagittis, pellentesque odio sit amet,
    lacinia velit. In hac habitasse platea dictumst. </p>
{{end}}

کد پیشنهادی برای مرحله 3

File: ui/html/partials/nav.tmpl

{{define "nav"}}
<nav>
    <div>
        <a href='/'>Home</a>
        <!-- Include a new link, visible to all users -->
        <a href='/about'>About</a>
         {{if .IsAuthenticated}}
            <a href='/snippet/create'>Create snippet</a>
        {{end}}
    </div>
    <div>
        {{if .IsAuthenticated}}
            <form action='/user/logout' method='POST'>
                <input type='hidden' name='csrf_token' value='{{.CSRFToken}}'>
                <button>Logout</button>
            </form>
        {{else}}
            <a href='/user/signup'>Signup</a>
            <a href='/user/login'>Login</a>
        {{end}}
    </div>
</nav>
{{end}}

کد پیشنهادی برای مرحله 4

File: cmd/web/handlers.go

package main

...

func (app *application) about(w http.ResponseWriter, r *http.Request) {
    data := app.newTemplateData(r)
    app.render(w, r, http.StatusOK, "about.tmpl", data)
}