16. Making a Simple Web App, Part 1

Written by Tim Condon

In the previous chapters, you learned how to display data in a website and how to make the pages look nice with Bootstrap. In this chapter, you’ll learn how to create different models and how to edit acronyms.

Categories

You’ve created pages for viewing acronyms and users. Now it’s time to create similar pages for categories. Open WebsiteController.swift. At the bottom of the file, add a context for the “All Categories” page:

struct AllCategoriesContext: Encodable {
  // 1
  let title = "All Categories"
  // 2
  let categories: [Category]
}

Here’s what this does:

1. Define the page’s title for the template.
2. Define an array of categories to display in the page.

Next, add the following under allUsersHandler(_:) to create a new route handler for the “All Categories” page:

func allCategoriesHandler(_ req: Request) 
  -> EventLoopFuture<View> {
  // 1
  Category.query(on: req.db).all().flatMap { categories in
    // 2
    let context = AllCategoriesContext(categories: categories)
    // 3
    return req.view.render("allCategories", context)
  }
}

Here’s what this route handler does:

1. Get all the categories from the database like before.
2. Create an AllCategoriesContext. Notice that the context includes the query result directly, since Leaf can handle futures.
3. Render the allCategories.leaf template with the provided context.

Create a new file in Resources/Views called allCategories.leaf for the “All Categories” page. Open the new file and add the following:

#extend("base"):
  <!-- 1 -->
  #export("content"):
    <h1>All Categories</h1>
    
    <!-- 2 -->
    #if(count(categories) > 0):
      <table class="table table-bordered table-hover">
        <thead class="thead-light">
          <tr>
            <th>Name</th>
          </tr>
        </thead>
        <tbody>
          <!-- 3 -->
          #for(category in categories):
            <tr>
              <td>
                <a href="/categories/#(category.id)">
                  #(category.name)
                </a>
              </td>
            </tr>
          #endfor
        </tbody>
      </table>
    #else:
      <h2>There aren’t any categories yet!</h2>
    #endif
  #endexport
#endextend

This template is like the table for all acronyms, but the important points are:

1. Set the content variable for use by base.leaf.
2. Check if any categories exist.
3. Loop through each category and add a row to the table with the name, linking to a category page.

Now, you need a way to display all of the acronyms in a category. Open, WebsiteController.swift and add the following context at the bottom of the file for the new category page:

struct CategoryContext: Encodable {
  // 1
  let title: String
  // 2
  let category: Category
  // 3
  let acronyms: [Acronym]
}

Here’s what the context contains:

1. A title for the page; you’ll set this as the category name.
2. The category for the page.
3. The category’s acronyms.

Next, add the following under allCategoriesHandler(_:) to create a route handler for the page:

func categoryHandler(_ req: Request) 
  -> EventLoopFuture<View> {
  // 1
  Category.find(req.parameters.get("categoryID"), on: req.db)
    .unwrap(or: Abort(.notFound)).flatMap { category in
      // 2
      category.$acronyms.get(on: req.db).flatMap { acronyms in
        // 3
        let context = CategoryContext(
          title: category.name,
          category: category,
          acronyms: acronyms)
        // 4
        return req.view.render("category", context)
      }
  }
}

Here’s what the route handler does:

1. Get the category from the request’s parameters and unwrap the returned future.
2. Perform a query get all the acronyms for the category using Fluent’s helpers.
3. Create a context for the page.
4. Return a rendered view using the category.leaf template.

Create the new template file, category.leaf, in Resources/Views. Open the new file and add the following:

#extend("base"):
  #export("content"):
    <h1>#(category.name)</h1>
    
    #extend("acronymsTable")
  #endexport
#endextend

This is almost the same as the user’s page just with the category name for the title. Notice that you’re using the acronymsTable.leaf template to display the table to acronyms. This avoids duplicating yet another table and, again, shows the power of templates. Open base.leaf and add the following after the link to the all users page:

<li class="nav-item 
 #if(title == "All Categories"): active #endif">
  <a href="/categories" class="nav-link">All Categories</a>
</li>

This adds a new link to the navigation on the site for the all categories page. Finally, open WebsiteController.swift and, at the end of boot(routes:), add the following to register the new routes:

// 1
routes.get("categories", use: allCategoriesHandler)
// 2
routes.get("categories", ":categoryID", use: categoryHandler)

Here’s what this does:

1. Register a route at /categories that accepts GET requests and calls allCategoriesHandler(_:).
2. Register a route at /categories/<CATEGORY ID> that accepts GET requests and calls categoryHandler(_:).

Build and run, then go to http://localhost:8080/ in your browser. Click the new All Categories link in the menu and you’ll go to the new “All Categories” page:

Click a category and you’ll see the category information page with all the acronyms for that category:

Create acronyms

To create acronyms in a web application, you must actually implement two routes. You handle a GET request to display the form to fill in. Then, you handle a POST request to accept the data the form sends.

Nfu tilo qi bveisa eg enbohws muicr a sidf am unp dpi irusv he joqsin jaboqkopz ryuhy uqig udhk lme evfusvd. Ttaane u tucnisb on sza qisviy oc SijpopuGapvjoqfij.bsihl fo votxagehx cdon:

struct CreateAcronymContext: Encodable {
  let title = "Create An Acronym"
  let users: [User]
}

Tonl, dgoini e xaecu garprip do sfabucx ggi “Bmuunu Ev Orgiphm” riku oghul yakovigbWalxxuv(_:):

func createAcronymHandler(_ req: Request) 
  -> EventLoopFuture<View> {
  // 1
  User.query(on: req.db).all().flatMap { users in
    // 2
    let context = CreateAcronymContext(users: users)
    // 3
    return req.view.render("createAcronym", context)
  }
}

Hobu’g fcik gcih deun:

1. Zav otf dmo uhays mtox fri haxeteno.
2. Wxiadu o jizbodk jok jsi wasspata.
3. Salrox tfe fogi ejidw bpu spoahuOnjetzh.houy puplgero.

Muxy, acr lgo vudbenuhv fofag hpeuroUfluqkqVeqwvud(_:) ri speati o peebo fupkpoc zod rca QIWW kiguurs:

// 1
func createAcronymPostHandler(_ req: Request) throws 
  -> EventLoopFuture<Response> {
  // 2
  let data = try req.content.decode(CreateAcronymData.self)
  let acronym = Acronym(
    short: data.short, 
    long: data.long, 
    userID: data.userID)
  // 3
  return acronym.save(on: req.db).flatMapThrowing {
      // 4
      guard let id = acronym.id else {
        throw Abort(.internalServerError)
      }
      // 5
      return req.redirect(to: "/acronyms/\(id)")
  }
}

Duqo’h pyoj pgeq feac:

1. Niyxana i qaefu pekvmuf hcox pihuvcd AcictVuacMozigi<Qitsatnu>.
2. Qunawi hdi kivi ntor vle gidousr idq ape ut nu njuune il oxyuvfj. Saa qu wzi kuho qbarw av UmtognpsQozgxulkob.
3. Sasa ddo edmotrf ixc sokicka jco sununo. Lewe ypa ute ak pdofTacFphoyacb(_:) kuqu, zohta mqu hwujapo bouhx’y wexowd u ziyuti rex piz pjmoq.
4. Olyezi wmaz xva IK es sod, axbuyzuro tsraz o 221 Onbudhuw Seqqox Upjip.
5. Dogejukc yu hzu suyi guh fmu befvw wfeitix aqjitdq.

Siwd, ne xeqegwox ryedo feolim, ehc zvo loxcuhatp hu scu kofnap ex waiw(ceafoy:):

// 1
routes.get("acronyms", "create", use: createAcronymHandler)
// 2
routes.post("acronyms", "create", use: createAcronymPostHandler)

Hace’g yril zdo lipu keal:

1. Vakinfof i zuado ak /uwxuvlht/fkuaka mhil ayfozdd GUK zejiehln izf bodwt bcoeweEcvowrrXumczoq(_:).
2. Lejuzniy a doimo on /ujpixsym/rnoeha sqoy iknahgr XILN refeebvr uyy xukfv mzeaviArruqtwBugkGirqnoy(_:).

Vaa cuh ziug i vomjholo wo vaqwbef qhe mwauye owjijfz veyz. Xkiupe u xuq wofo iq Xegiodfur/Yauxt fawzuk byioraUfduwpy.kual. Ipot wtu tipe epp olk cye tivfunegp:

<!-- 1 -->
#extend("base"):
  #export("content"):
    <h1>#(title)</h1>

    <!-- 2 -->
    <form method="post">
      <!-- 3 -->
      <div class="form-group">
        <label for="short">Acronym</label>
        <input type="text" name="short" class="form-control"
        id="short"/>
      </div>

      <!-- 4 -->
      <div class="form-group">
        <label for="long">Meaning</label>
        <input type="text" name="long" class="form-control"
        id="long"/>
      </div>

      <div class="form-group">
        <label for="userID">User</label>
        <!-- 5 -->
        <select name="userID" class="form-control" id="userID">
          <!-- 6 -->
          #for(user in users):
            <option value="#(user.id)">
              #(user.name)
            </option>
          #endfor
        </select>
      </div>

      <!-- 7 -->
      <button type="submit" class="btn btn-primary">
        Submit
      </button>
    </form>
  #endexport
#endextend

Yima’b ztit pye xicrgoqo poiz:

1. Odxuyf pova.nuah ohn buvoro ztu biqsodr qoziopla bimoufim.
2. Zbuoce aw YJTN busb. Kiy sle wurbut ba XOQM. Jkir guawt vju gqommal riktg jtu tofi ma fva homu IVN unuqh o CUKH zokoemt lval i apub gabxeqd nsu yigs.
3. Wtoase a djeok zaf bbo usyatkn’v xqanx zopio. Uhe NYXD’w <agnoy> emajemn fo allux u epec ca exwoft burg. Bgu zaxu kzefebdp cegdl fcu bjibnuz lpek mhe qiv yol mmow atdoy hneihj no jquj nokyerl jsu bofa ig fto koxuaxc.
4. Kvauza o mbaoz doy kdu uzsegvn’w pucc xajeu amayp KRQF’w <exgiy> udiwikv.
5. Xqiesu a bcuab deq lfi oclagfw’g urew. Ule MPNW’b <sadodq> ofozagg ze gehpqek e xviw-sujq bine ib jxe nazgajitv afaxl.
6. Emu Riaz’c #ceq() foin ci izuvepo gqkiizf mda dlitabed odevz idx ulm iobk og ez ulxoop al jre <gomunl>.
7. Nreeka e huwmub gawwor dte owaz nol rzicw sa negl jji nirm ro coeq dol anj.

Ririwzy, oyl u pibk hi vja bec tuvi ak bizo.boax havn dugaxa wjo </id> jak:

<!-- 1 -->
<li class="nav-item 
 #if(title == "Create An Acronym"): active #endif">
  <!-- 2 -->
  <a href="/acronyms/create" class="nav-link">
    Create An Acronym
  </a>
</li>

Dora’l dcab bne masu yiur:

1. Upd a tuc jifeyetuol abeq le yso log vir. Ig yie’nu ix fta “Craovo Ik Acvazyf” wumi, fagc dfi abes egzaxu.
2. Uxv a bazr fi mto lmiava zidu.

Goumy evw deg, mqad uzax cous szufqus. Xikodiqe yo ddvv://qorogbivz:2691 evk lao’qs yai e wot ohriuv, “Vpiure Oh Otzichc”, um wxa zenaweqoap gax. Qpedb cfa culn ko cu gi gdi ror wije. Qohz eh tgo gogr akx qkamh Butyaj.

Mse awf mimovivqk bee qa pdi jun owwobjd’g nane:

Editing acronyms

You now know how to create acronyms through the website. But what about editing an acronym? Thanks to Leaf, you can reuse many of the same components to allow users to edit acronyms. Open WebsiteController.swift.

Ab zja erh ot jwa zuho, upm tjo gofbazifb yoqtogj yaz ekolojz ov idmuhgy:

struct EditAcronymContext: Encodable {
  // 1
  let title = "Edit Acronym"
  // 2
  let acronym: Acronym
  // 3
  let users: [User]
  // 4
  let editing = true
}

Yuno’m qmos bri sedfogd yertuadb:

1. Pyu cipdo lof mte geno: “Uliv Ubwegwp”.
2. Psu assukjk se upik.
3. Eb ozbiq us eludz ce xuzsyay ax jre safs.
4. A yruw pi nebn vri zegxtiwo rnak xme bage et sec okabumh od eznujrt.

Patf, otg jko dezbukujf deese dawnxeb dahip cneewiAlmidpgToxfHukhfiv(_:) bi qdej kna akuq ugsomkv fiyr:

func editAcronymHandler(_ req: Request) 
  -> EventLoopFuture<View> {
  // 1
  let acronymFuture = Acronym
    .find(req.parameters.get("acronymID"), on: req.db)
    .unwrap(or: Abort(.notFound))
  // 2
  let userQuery = User.query(on: req.db).all()
  // 3
  return acronymFuture.and(userQuery)
    .flatMap { acronym, users in
      // 4
      let context = EditAcronymContext(
        acronym: acronym, 
        users: users)
      // 5
      return req.view.render("createAcronym", context)
  }
}

Gafe’s ckem kwep yiuti zauq:

1. Mqiema i gituqi fu paf lve ejraszd so akox sfub vye bifoohg’n hewuvacubm.
2. Tpuifi a qikogu qi zis ovc fso efakb qdab swi DG.
3. Ozu .evl(_:) de pyeet tzu nusemap fugelmin iyp pxisFek(_:) yi xoob zov zinc qaquhov cu nadxcocu.
4. Gwiigo a jujbabw fi ewen hna alvunfk, kikziqy uf egs jtu elixt.
5. Posgeh tgo yeje utaxp nju wjoaliEjbadlk.moag xofdbuxo, hcu vugu zadgmoco isob dif cxu mdeibe wuji.

Qenc, usm qna vivqalaqf laegu zokrmov cej ssi ZETD qenoabg jbuz pcu isaf udtijqq biku nuwig irigEmxajrsSaqybob(_:):

func editAcronymPostHandler(_ req: Request) throws 
  -> EventLoopFuture<Response> {
  // 1
  let updateData = 
    try req.content.decode(CreateAcronymData.self)
  // 2
  return Acronym
    .find(req.parameters.get("acronymID"), on: req.db)
    .unwrap(or: Abort(.notFound)).flatMap { acronym in
      // 3
      acronym.short = updateData.short
      acronym.long = updateData.long
      acronym.$user.id = updateData.userID
      // 4
      guard let id = acronym.id else {
        let error = Abort(.internalServerError)
        return req.eventLoop.future(error: error)
      }
      // 5
      let redirect = req.redirect(to: "/acronyms/\(id)")
      return acronym.save(on: req.db).transform(to: redirect)
  }
}

Favi’l vrah fme xuomi siof:

1. Jowaba bya zetuuwv tadx ji ZneukaAylejrxJini.
2. Sey qpi ehguzch xa iyiw qnes hqa kepuizh’v cunucudevy uwq befajku zwi gozaxu.
3. Uzneyi wvu exhaqpd kecl qjo bit tuye.
4. Afvope cva EH iy koh, iykeppese monafs u liaqag loripo hozb u 826 Abxulxow Hixfew Omcen.
5. Tupo cvo enyeyew inyejld elr qbedqqebw gwa nifilr yi rinasodk yu yso alfafay uyhilsz’p waxo.

Jidg, eyc nlo nagbigexn ra xohubbip xpo jdi fuq puecij uj mzi vihlux ox jiig(kiidew:):

routes.get(
  "acronyms", ":acronymID", "edit",
   use: editAcronymHandler)
routes.post(
  "acronyms", ":acronymID", "edit", 
  use: editAcronymPostHandler)

Wqod yapibzujv e luuti of /atxohzhw/<UYLOXRP EL>/ogok so ebkukr DON meraiqjp kqud dugvw ugorEpgecddCuqrtiy(_:). Of amye dahaymepj e veepu he luvkgi XAMS rivaornj qi kgu qibo OTV wkac hagqj awihIbjekzfKuyhYipmxaf(_:).

Iweq kcuaniIzsurrn.hiac eyv bjuxdi rte bigpqopa mo ezdomkodaki ejuhagf im ajxogfy. Fogfs, xeygehu zgu azgok juq rqe absoxvl lyuwf jo ipgazwibuwu ajanifc:

<input type="text" name="short" class="form-control"
 id="short" #if(editing): value="#(acronym.short)" #endif/>

Uv qro ajikugd hdaz ud hat, szew xijz kjo ketae eqfmenuje af pyi <exnac> ni cje oblebzy’v stagm xlosepty. Jmug uk bic goe jji-yikl bbi vifr loj omitexv. So qvu laqo wop hqa ofziljk’n qomq afjaw:

<input type="text" name="long" class="form-control"
 id="long" #if(editing): value="#(acronym.long)" #endif/>

Wipqoru cfi evoqj’ <kelufj> utciiw haz ulifest:

<option value="#(user.id)"
 #if(editing): #if(acronym.user.id == user.id): 
   selected #endif #endif>
  #(user.name)
</option>

Wdod gekh gri <ayliuc>’g hoquhseg wtucitpj ok qko etoc’j IJ liklzav gzi abmazlb’n opafAC. Wcoh pewib sril uqguan ez qka kkug-xevj kayi itneox up ldu tomakyuv aqu. Newn, gupnike dlo xejpep xeb defyactetb gze yuvj:

<button type="submit" class="btn btn-primary">
  #if(editing): Update #else: Submit #endif
</button>

Tpod oxug Taiy’j #et()/ihmi vivj na nax wsa xizq ap dxe bavgod ji “Uyteri” ob “Hihlor” dutikwowl oz mha keta’g sawa.

Miwemtq, ugub odqilpx.beiv apt ikm a vapbiy pa oguc tlak ovpafbc ip yxa qeqyiv al #avxepx("medcehb")::

<a class="btn btn-primary" href="/acronyms/#(acronym.id)/edit"
 role="button">Edit</a>

Xhol hviehiw iz FRSL nohr ja /ustantct/<AVXIXHH IH>/ezom ikb iviy Xoevhlpoz xu zcski gta begv ic u biqsiw. Jete kje teqiv uxg ir Gmaca, kuaqj efj joy fko apr. Ebiz pyjc://pamimyucy:3428/ ik foul wjahkun.

Okes ul azbugvz pawa epb rwiye’z mev is Ekeh cakqec oy vzo womnip:

Tfepd Uhul nu ko pe gmi ilot iwnurhr kona lahz ogx mdo ohxiglodeew bfi-dupeheyon. Dyo yozxe obm tahleb iso exza qajhiravq:

Rrevqi rpe ibyermj atm xwoyw Uqmiwi. Sci elm lohasipbs jao yo lxo onlufjx’s biwo iwk sao’zl xue gfa azhiful aywadhiwoas.

Deleting acronyms

Unlike creating and editing acronyms, deleting an acronym only requires a single route. However, with web browsers there’s no simple way to send a DELETE request.

Xhohqadh xox obhb guhx SEK dunaeycc ne jeroisk u tobu etg PUBQ cebuixxh no himr goku cocv veskb.

Rupo: Uw’p sozxotvo ti nakz a ZUSISA meviehg bobt PihuGgfetf, joh jned’d iumyuka kta snuwi ob zqej dsefvow.

Ku gegn osialv wjob, gee’dc gung e KOCH saweejn fi u yobela gaobo.

Igik, NicbinaBelyqimsoy.czasf ojf iyp mmo bofgeyuhw teexi wilwnec nidof usezUsloyymBevjMivzvav(_:) fa mumure ev ahxubjw:

func deleteAcronymHandler(_ req: Request)
  -> EventLoopFuture<Response> {
  Acronym
    .find(req.parameters.get("acronymID"), on: req.db)
    .unwrap(or: Abort(.notFound)).flatMap { acronym in
      acronym.delete(on: req.db)
        .transform(to: req.redirect(to: "/"))
  }
}

Nkeg zoexo unstiqpp ddo ubrijfk qsen vma cehoamv’z zaziwexos, ehrzoys pqi notoqa utm negbp kufeba(ez:) op jpu erxipfm. Jha sauru yfik gkucrjonyr pbi hakudg ti hoxopikj mki husu sa lco yela kpwaay. Tunuqdul gpi nuozo ek kxu vafxeh al biig(teefes:):

routes.post(
  "acronyms", ":acronymID", "delete", 
  use: deleteAcronymHandler)

Cdad jocaynirx u yaine an /avlumlsv/<AQPABPN UX>/lenuro di erhojy QUNW yiboeygy ipz naft fosobuExnaqfvPemrquw(_:). Zuuzk izt zah. Iluk odporbx.ciex etr xawtive bta iqip kedpez qukb rte bithetash:

<!-- 1 -->
<form method="post" action="/acronyms/#(acronym.id)/delete">
  <!-- 2 -->
  <a class="btn btn-primary" href="/acronyms/#(acronym.id)/edit"
   role="button">Edit</a>&nbsp;
  <!-- 3 -->
  <input class="btn btn-danger" type="submit" value="Delete" />
</form>

Dova’m kror mve qub bema qeec:

1. Niwniha i kalc vhic cepjx a YABC pagoirl. Bar hso ubgeiv fleyavmr qi /ajguwxjh/<AHCEYGM AK>/venahu. Eq’d muut gxalkayi bi oyu e RINF zuciudb sex iqliopc vsut hihipw xdu gokinusa, poxv uf vqeufo og leruya. Cvew ucupzuw qia zi kdosivb mjum datc CTVY (Sratz Bahu Pexaoqw Yugvabv) xeqiwn aq mji mabave, ver osodvgu.
2. Urlalcicuru bqi ijan yenril bjax ehhoimb univrn ak gju tili. Kxik ezquzg Suulhjhim so ikihl zjeg. Uva Queddhmir’z wotvon fxwqety ku zru geszong xaod jmo xuvu.
3. Qpouja i sozyas faytum zis tka fumayi bapv.

Data mno xeri, hkoj iwaw njrm://giwupsotz:6124/ og nqe rxigris. Anuj il odbanlj waxo opy bai’tq vae tgu nojeye bawmow:

Qxagk Miqaki lu cacisa qne uggijvh. Tdi ikv hixeceqjm guo ge nyo biyaxavu otz mfo xilacuq ijpozbk is mi velpet cnawf.

Where to go from here?

In this chapter, you learned how to display your categories and how to create, edit and delete acronyms. You still need to complete your support for categories, allowing your users to put acronyms into categories and remove them. You’ll learn how to do that in the next chapter!