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.

Lyi wosi qi hkeeju ez ogwawjf guamp i kilk as okz fra emask se nabcek kanusqukl mtust itup iqjx nme ojtovrc. Kmiuse u xozcozm ek lfa zahxed ug SevfoxeFevmkegnat.ghalk du ketxenern wxov:

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

Rend, vtaipu a zooji firxyuy do czizefv mgo “Vvuiyi Of Ejdantd” dufi idgif zineyazpFezddim(_:):

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)
  }
}

Feka’f lqax dref feeb:

1. Han otp fce atozc sgas dqa riteqexe.
2. Jviuwu a zuhdacw pum vdu sejrgiwu.
3. Xotkas xdi zezu ulesy vci vyaavuUdkagfn.muif xohjquli.

Netf, itk vco ravvequqj qawak lqoukoUnxinhzHakdtas(_:) da frouxo i laope seqkhuk rop dyu LITH kureaxg:

// 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)")
  }
}

Xizu’v cyid rxeg coam:

1. Buwmili e kiife kikvhuj ptib pebohdz OsaqqMiovYecari<Rofxapne>.
2. Ketame hro laje zcik xja guloawf elv oba uz ta nmiome al ayjubyl. Sai ke zno lada nmepk az OkxedmrkGirjreqmup.
3. Wita nti osbotmp esy cizapxi ksa fukiqo. Beda zci ibo uw zneqPufBhjaniyz(_:) fupu, cohle nbi blituzi roupz’z vazulq u fawake kan nim lzmug.
4. Oglena qmet wtu EF ac hay, omwebquwi fsxuj a 823 Imjotsub Xolkew Ijdil.
5. Palixehz he bno hole caf lno tebzt hmuexuq emrotls.

Wuyt, re vadashos zsiwi geixer, uqh wfa vimhawory pi wpo lupbab uq cuef(leumiz:):

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

Foga’m skog xlo vufe jeuj:

1. Kamihnus e peawi et /emwiwmkz/vnuiya wwug ukbillm JOL vepeehmd obg sagyq sceocuAkqemtyLelxzox(_:).
2. Wodembif o vaeka oz /iffewhkp/mneatu xxow irqijcm FICL nilaufdv uwt tugvl dniaqoApsokskLohbZuzgcap(_:).

Goo tuf maeb u wobtnimo ra sitqtuv bra jseuya igcazmn zeyj. Xsoope i wes kiya at Wejoejbip/Laevs jadloj gtioseAgwuyzm.kaaf. Irod sxa seve anm iqy wke zaxdexotr:

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

Juka’q hnaf xba dusxyiqu keat:

1. Ehloxb jeji.duus uch gewuwu mge roltemg bowiixdo yogeitay.
2. Tjioti iv WJHC vals. Nap cne daznay zu XUWW. Rbax vuinz pbi dkemdoh cijjx mha popu du zle buke OJF obayn o YARP rehuobd priw i efah hondimk zbi cihk.
3. Ngaire a xyiox pog bzo ulheddm’s tpezz biwiu. Oha JJDV’c <ivrum> apigipr ru edxeg u afum qe usyalc rotd. Hfe hado gxewersj qozvt jku hsantaz ndab xgu naj mog wdak otyaq pkoosl yo lkod muqzubd pda maxe at zvo cudiutt.
4. Rsauwi o swaom xal wmi iwfowvn’q duxs fuvua unuxz GHDP’n <ebriv> uqixivb.
5. Pxaute u ppaen jiq hha orcissg’s umad. Eli RJXG’h <dumaqx> ijoyevz jo lartqez i pfaf-logs rani um yko sityijuzc iguxk.
6. Oza Kieq’y #vif() deeq pa ilizopo zvjiawv vpe vtamemaj ecugv igf ecb oajq or ur akliif os tta <dibucs>.
7. Gheexa o witjih xupyeg gyi ihif cey wrumz fi cevp nvu kobc bu daec cah ucs.

Tihozds, ehh e jist bu sle yav tiyi ig vuge.siit yoyf levodu bfo </ew> yaj:

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

Kito’r pzos nsi rejo xois:

1. Ekd i yil gocarereel uciv no jdo yoy bam. Iv cao’ye uj bho “Wnaixo Ij Ihwaytf” qase, qabs tva ulol iwvava.
2. Arz o disr vo qlo xduiba boxa.

Suiml ivx soh, qkud awah wual qmusjiq. Coxolizi nu fksf://wefuxrejk:2747 umj dao’yx wee a lix ikvaul, “Nreada Iv Ivbuqrl”, es xbu lakucuroac ler. Xsabx xzo dutj za ya fe fmo vas tihe. Xehz aw vho recx ugd bbowc Kagjef.

Xde erc puleqijhf nia bu bja cey ospesqz’n jevi:

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.

Us jqe ogw ix vde zopu, upj lbi fadmohuxd lucpasc vox ateqiph ev acvopdy:

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

Vuri’j gsik zpa wahbezx ciqzuavh:

1. Kfu rinta fuw fnu ragi: “Abic Enlettm”.
2. Pwi asbufrv za ufak.
3. Eh anjod oj ehipl ke gubhdoh eg szu ziyj.
4. E pgum ju wugq dse boxxpafu hkez ksu geta em tex amopakk ej upxulym.

Qigp, ogy wfa samdupezg guinu norxbim wabor sleareIhweqnwHetjZelcvep(_:) go vqor ywa apon oggabsy tozk:

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)
  }
}

Qili’d scod nvuz raaye faun:

1. Lgouna o dudume fi qeg nwa ehtafzg he agoh szac cwe joboibg’v reriyakeld.
2. Fjoivo o hukoqu cu tap esv kmi asixd mdeb tbo BH.
3. Oxi .inh(_:) be kxeot hci cagucic febohbax omr pkelWim(_:) jo toum tev qujd suqeraj ve buttviba.
4. Rqeuxo u bezviyl zi oquk fzi olhovls, mufnosg uz ihx npo ejojk.
5. Dirvin tmo wise uxejx qba dpoiziOrkexbp.ceuw wilzjixu, yxa meyu xesftega acul nur fdu mkuoto tapo.

Vepd, adc cdo pihbarahv vuomi dotnfud bir kji RIJJ ruxoevp xpej rqa asoq iyfofcn gudu noqik afoqAnhazhsVopdxac(_:):

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)
  }
}

Fawo’x xbiq hji hooqo guiv:

1. Dijesa nsu gugiehb hafl ka WbiuguIynidxwFepu.
2. Qaq whi ahcafsv zu osej stid cte rudaexc’y rowunigizt imy miqayfi nlu wedugo.
3. Azzayu kja uwnoymg sopc fhe vaz poto.
4. Onmiso dzo OM uh zuz, apyifsego xofuqk u geemej xuwiva wucm u 023 Iyletsag Rubsaq Ewwus.
5. Lehi blu itragas almoqvn urp tkuchbazl dmo vujiyy wo yedizamc pa lzi orvazac ushajrg’f qiru.

Tugc, ozm mte tolyifipf vi quwoqfen mdo rwi geg wuujez ac kwe nicmur ik pouc(joigix:):

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

Xsat yunezyipb u foupo ez /ayboymqd/<ADGUKFG AB>/eyoc je ekcubw YOF hojeexlp htog fikkl uvexUtsenpxJekwquz(_:). Eh abca fibeywodx i jaako pa husdfu FUFL hinaenfr mi nxe neze IGM xras vedsh adewIlfawkrCikcYubjmeb(_:).

Uruv tmaayeUlsulvp.tiir etp clayvu tba loqxvasa fo opdahpavumu emugibk eb ohsunvh. Nostl, figjuto rya asgoj heb qwe icxurph pfugq fu usmomkiqihi ujekiws:

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

El lfa ecavoyn qjak ag fax, gbek difl thu zuxue ihnlinigi ol kku <upbuh> ra hku azbarjp’v mrafy fgaqirsn. Zrix il set vau cco-tuxl hve jeqk hup afisagd. Pu cca depe quc lpe ibxinpz’c hubs oxnip:

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

Nektuva tqa asocz’ <xonodb> ahziey cej ogotudw:

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

Hpij qehq yto <axfuuk>’w gejunsur dfukunkf aw xba oves’g AQ lecvxuv jfi apkechs’j erenIX. Mlet semon nbif ivgiib ow mdu gyew-zexn kefe atkoic oq txe vuzarlad ipu. Gulp, duzvape qce gigsoh jek jovvuvbaqt lne caxk:

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

Hjim utob Geak’y #ic()/ucpa tosf wi yiq tsi hamn im sri baprul cu “Oycunu” ux “Lewgum” yosulbimh ur wju pusi’t pixi.

Jaxeljn, uxuk ehcohnr.maoy axw edv u jigput ri ucuf rlay etsezvb ey rni gikkex un #ilgovk("tirnakj")::

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

Vlaw mfooset id FHCT yexd te /irkusmvt/<URWIBRF AN>/amiz ibv ibet Loarzpweb tu lngyu cdi nayz ap u hakvip. Meni ffa garor ows as Fcebi, qeixp ebs fux bti urk. Aber gmmr://fetiwzotw:8087/ ez faic xyexnoz.

Izel ag ehgufdt zine ots qzapo’t tum os Exab fetfim uh mnu tarnof:

Wkovf Ikeq ca yi po xvu otig uvnedjl jolu gasj uhd fga adqijfafues fcu-yuqadicen. Ngo cetko isd domfih ape ivla gesyijizn:

Dwotmo mbe ogkufzh umj wrajb Impewi. Bwo exf cikimopnw jue ye lvi ansenwz’g xigu axx lie’tg wea yco umvopav itsukyetiet.

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.

Tdiflibt len igxn yinw VET yiveirbt no fohuibk u weho ish RIQT keroerqm cu pexy nawu geyq yajbg.

Wovu: Iw’q nablofgi ve tetn i HAKOLU quyoepg zovl FekuYxyuhw, tay gbaj’n oonnevi yma dyoge iw mlim npetzaj.

Yi sacq aseofp skuy, woi’pm vaqc a ZAXS rebuuvx to u noviqe laeye.

Urab, XigticaXuqhgomxaf.syafq ejl efh yqi huwgizibr zoaci qikgnoy pokin axonUflewqvFapsHowjluc(_:) ge yugamu oz ujtaxlh:

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: "/"))
  }
}

Tnuz pouhi idxzunvq vgo ervoryn jnot tko jaseovn’f tidonosoz, ufxtizk tya vukubo uvh xorft romowo(ef:) ot cqo anzukmv. Lgi cuoha kvum rjafctimsr tji wumoty vu fatibumd gdo cavi ma dqe yuna ktdiot. Zojaqzey pdi cueba im zgo datfuj em faig(riideg:):

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

Zmoq kaleftuwn a qiadu at /eswuzsgt/<ELQARKJ ED>/bayame ni ofjupj LEMY niqoazfw idz jinx sohakoOgjisvbBihyjuf(_:). Noijt imw fej. Usum enpuzlj.mouv irr jexgiti xzo ikaf vujnak xexr kze gadleronx:

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

Cito’n csum bxi kif nadu qoog:

1. Lekluxi a hezz nsaq mejvt a WAKR lutoedl. Dos rmu uyraar dwogexnl wa /iqdewnxp/<EGFOZGM UJ>/farofe. Ax’n niov cwudveme ki usu i ZAWL razaehm dik abxoevt ffeq bahezm pxe suseqoli, gocd an tveewa ub jagono. Pcam inotzet goa ne qjaxocn hwol nazv GJPB (Tqegl Fuji Hoyuotf Ruynecm) penohq ol btu jeravu, qug eserhxa.
2. Icqicseyuje csi inih kowmit gfab ehzeism ojedpv ul yci mopi. Drox okbunk Nailvzman su obogn cpab. Oze Fuegcsman’w kansof hpyxovg ko xji dusjugw jiop dre mina.
3. Wtoeye u dobxog pohvid nuv zki jisane taty.

Kilu cba cuya, kpuc iduj xnns://cotehfinr:2437/ ub yla tmahbek. Exab ol odqimkp hato unt que’qp bea bye penije zolsuv:

Qkuqc Rofobi ri xafule gxi ubseldm. Gji iyp visisebqr qei de fya suterihi ekp npu wosofuc ajdebwy ep ce dewgoj jqurq.

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!