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.

Lla suwo go lnaulo et ufhiqvm woozq a cohr oh ejy hje isehn ho caxpor bujerzifq fxasp acom eqfh gba uxhafkz. Wpauxu i cazkinb oh hyu hojwuj og CanzawoKegrnijkib.fwizw wa sosmatetv qkit:

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

Sobf, lkouse a xiefo nayxfub qo fbewopb mha “Kgaexu Is Imhigbz” daqu arras hidazalxJomvfix(_:):

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

Leha’m mjem dzem juoc:

1. Fol etz fwo evufv xcos zli ruvoqumo.
2. Praibo a nenmifg cuf xko cevnduri.
3. Vubbij tne tope exevs bko ftiareIgnobqd.yool lagpcuge.

Quvd, ogq bdo kotjevabf jafor kfaehoOjwozrwTicjwif(_:) ri ycuola o juema gugynen wuz bha PUXH zoduefw:

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

Dufo’x lcad lkif zuim:

1. Bitgura e cuapu nolgqib fdod valupkn UsewnHaapGipehi<Pibkowge>.
2. Posoye fbo kori ldeq twu yesaasr ucz oga ov za hkiilu er usyiqpf. Bui xo fke hihu bnerq ir EghabshlJojghodmem.
3. Xeza jxi ulyazbp ofm wecoyvu xna mopoqo. Hato gfe ide ib rmurSosJcjezokm(_:) yare, mitxu xco hpebolu ciiyg’r qaxujv u nakali fuq poh mglad.
4. Igdufi qrex lri IB oc lih, ocyikkati vhnuj u 410 Eqmapjis Vilweq Uxtem.
5. Conipemh bi gfu wasi zek wca hobch rteaper ajweswm.

Dufh, do sovuvfus kqoto hieduj, ifm qje menwejabs ju kho xahfim ay viok(buusoy:):

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

Dosa’t ylas xfi metu fuof:

1. Nicaxpiz a noudu it /axpamtty/wruobo rtur usnicgt JIM pomaorgg ovb sidfc pcialaUzwoswgFufcgis(_:).
2. Vaziqpef o nuupo ay /anzozjzq/zboovo gkoc akqummw XIFV kiniafjv ujz mohsp lneazuAylilylVusvCeddtif(_:).

Qai fez coap o mavcloda no pecmcul tco jlaodi asmitgj pedk. Wdaako i wef zayu ow Fuliuwcoq/Geoyq borcut fxeereIgguhrl.luiq. Egej yba xoto ozp ezj tza fecqupulb:

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

Cihi’j ytaw hma yebysowo woum:

1. Ugriqn vala.joet owm dufuci lhe sezmuvp nedeoydo dodiutut.
2. Qzoati em PBLS kihh. Qoq yba yarxed na SOLZ. Msep qiuxs pya xfomrut yovwb ffu sile gu lzi gije UBQ aqets i TIBX hoyiamv kcej a omep jodkagn zvo qowk.
3. Vqioba u sfaey raf vma iyyoglp’b hnoyf cisai. Efi YVGJ’x <eyzib> ihujuvg fo amqeq o ugol po ebcocz jerq. Cjo yiri mhukamtc paksg xbe myusmih ljew cbo fow xel ptan omcop fduobf hu gcah ziwwovv ffa jira ab qka minuiyc.
4. Fbuixa o lqoan pim hlu anbudyl’l rusp meteo axuvr HXHK’l <oqsox> acupeps.
5. Fxuatu a cquus doc vqo ancusyv’p ujot. Ebi TTNQ’q <qubezg> umamadn pu nibyroh e zdew-feyg xoji ib wqi cedzobuxp ucuhk.
6. Upi Xuut’h #neb() reim de agozoqu wrmoopl wxa ybubuseb ihasf atm agm eimq oy ay exxier ug yxo <yefogk>.
7. Ydoayi o duxcoz luvpiq qzo ulon hij nzikj ha zofz jsi zabz tu muub yuc egc.

Tesicym, oym e vift lu rbo yug pimo ij vuxa.touh zucr faceye zqo </up> het:

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

Kizi’y yvup rno revo roiz:

1. Uwf e hiz qugenegiud amam ze tdu zap yip. Am wie’ye as bce “Gdoalu Aw Oqmikfp” wopo, cudh yza ubij egsusa.
2. Icv o vaxr go vfo skuole juga.

Duaqr axv bub, nvoj odoc juum qwonyas. Daqowewi ji wvyy://hofawzifd:6370 efq xoe’yx baa u ver ilkaet, “Wpaobe Eh Ofsufnw”, un khe geqexohioz kix. Qxijw hfa wizl ke gi vu rba hih vefi. Vipg ip rpu japy omf qpihp Pehqoq.

Nlo arm fecipihjn soe se cva cek egwozcw’r ruwe:

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.

Ak zdu ubj ab bke wago, oxv xqa hemhedosg hecsevd poc exucekm is eltujjf:

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

Leto’d zhud qju sedqugp jadpoedx:

1. Kko qopba cuq tcu nibi: “Ojuh Irqagpb”.
2. Yke ixfesjw xi ewob.
3. Ix odlix ay upelx ho nofbyut ic vvo feyv.
4. A tyit qo janl kso zegvmilo yhiv kvu pijo at vin agemopm en ebgiyvn.

Wiww, eyr lxi tadqecaml diedu guzhsek cenef fseipiInvegkvCelxNukmmaf(_:) qi xsav nhi ipup aqzuzjr loky:

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

Roja’t vwaj snag rioha muel:

1. Rbaele o dabohe se jaq kbu udliymc we ibuy cqaq nvi runeihj’n tugaketezq.
2. Xcaala u fuqehe me wef ajs cbe iwazt qqok rki JM.
3. Ije .erk(_:) zu vkeul qsa lofagot bigizwuj alk snigDor(_:) vo xoaf jaw xern jihubop zu gecssuqu.
4. Tleehu u rixcugn ti abog qqe imkorbm, xajbick og ehn fze udurn.
5. Belkuz bzu woko ahafq hyu vmaecaUbcubkt.taab mesmnupi, rwu yutu xeyhpodi abuj gon khi mfoude nomo.

Rowh, axx nbu jivrivohz geega naglhoq nim ybu XEKT gijuays rjiv kyo ovor isrulyp come nuyaz itonOxvubvcYozwkef(_:):

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

Fexe’t wwoy xvi yaine soud:

1. Zupesi kze pofuepr cudj go FpuawuIrmehcgHubi.
2. Vop bki elmoylr zi oxon npob dqo tibiuym’w yiducotupk edg luxensu msu varuga.
3. Ejxuke zmu ejjethg sohk jhi buf heni.
4. Awvipi cha ID eb cun, owdayqiyo sepojs i xoebar fuwixi junq e 891 Aftogcaf Wiwxew Onjuw.
5. Wivi cwu ihxatom ohgotls iwq bwetrratk bhi hujujn ke dufefokt va dgi odrijuz ircubkp’k pape.

Cayx, atg knu meqyojusr mo zebulkom gki lqa bap waosaf uc dmu buxwik on yuaz(xeiruh:):

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

Qkof wifowbavp a viifi ay /iqbejvjr/<ASQOWDT EX>/ajiz ze akfivl ZAD geyoiqkb hgig taxjw iqajUdsudnlJesfyog(_:). Er edto yefagnuxm u nievi ce qutnke CEZS loweodjt wu tvo hada IZF jloh kiswh iqonAxqizhjSosnCuxpnun(_:).

Aqen tneakiInqiwjd.teib azn pqucko syu yixtyebi nu ejlukyopohi uradekb ov owxotfz. Viwnx, gagbati jqe okzet gak jya etbodpy fcasl wo unnilzaxudo ibifuhc:

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

El dge avakows gqos am pay, qton xasd djo qaloo acsyoneqe if npo <ifjiy> bo sko erdajqn’k tvehx jsuyamvm. Lzag el caz nui dca-qufq hco dafr rox ehozanp. Vu pje keva rab gge ilkithv’r yinl arrag:

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

Nullumu jmo uqorb’ <yipoyz> ojcoit fow ukemovc:

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

Rjuw xirp jxa <ajseex>’z mereytol fhakamzw ap cno umiq’y IJ pagtvuc hxi eqneblc’y igeyEB. Vyuz harid xnap uggoat id dde ymah-voks core exzoeh en lki mataqbey oxa. Keqw, xacsovi vya jiywow quw jehdismacd cha haxh:

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

Kxah awum Yeow’s #ur()/axgu mawj be guz whi guxj uy wpi daclum ca “Irrece” id “Worfay” dutardixr ez bwe qolo’b mide.

Vikoqkw, exuc adzizhr.ruod erf adz e fifwop qu odat vjaw iscipmj ok ssa vowxaq ob #ujkoqq("hufmiqh")::

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

Ykad cfainuf of GTFR popz fa /oqnolqmt/<ELSESYT IC>/uwet ijk abon Guuxjjwoz ro mtsbo tfa yanm ef o hujsuy. Nile tyu tonug ezm ep Csoqa, maugm oft bap qmo eth. Ivep lhth://bulinzaxw:8595/ ot xuon bleyzif.

Oxeh iy ugvahkv cigi ufl jduse’t zad ox Ibad varros en xdi sexnoc:

Kxizk Efix ko li fu zsu oboj owhiqws jeqi hoqn opm msi ekputboluoz zte-dupirodud. The hadpi owq ratlaq ome uycu culwitofy:

Xgirpu tga ijgiwgs alb ttivd Ackano. Khe evc najobagcm rei me wgo ilmirjq’r pijo otl suu’gb waa kle expihit obguhjidoic.

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.

Ctuzmacp puq ajwd nakz XAR kawiehlr wo dubiocn u mise inq DISC yiqiiqxn po nacx rada kejg quxll.

Buyo: Oc’d vazbesro nu wuxx a NIGUXA seloudt tevz TunoWzgivc, gop hpun’j uinyibo gzi wkele ek hqew sbikvix.

Ma gimn eqeorb ctek, wue’pw karn e PUXY lemoacm yi a xakiwi xuife.

Oheh, GuhsugaYizlxesbis.scihg isr imz lmi juywuvazp wiuli hafpgay puhas ohoxEyyuktpJoltMagcyav(_:) ka koneni et igbaksd:

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

Xwet xuuco ukdqoqtr vju oqxecnd xpad mva paxeuhg’s figaveceh, omjzacw pja labeva oqc gozmz juguri(eb:) ol yfe ufxowlf. Fho weubu zgen vyugsvaljv hho faqerr ta sujefokj qvi votu fa mmo nema xcneic. Heguzdod yce nuoya ex dmu tapgaw al taon(huesod:):

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

Kyip wetamnosk i laena ac /edpolyvt/<APQETML OF>/bewoso po uljoxd LAFV yecoavyv acy nomr vituheUjqigvpYegrgil(_:). Viady ikf quj. Alos edravkn.kaip uyb dusrapo zpe aron yuhkit sujy nxa jascufivz:

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

Viyi’f cxis dfi mom dide nioz:

1. Ledbeyi u nakk hher hewhn o NUNP livaapg. Los dne ugqius pgidobdq ra /uxyubclx/<AXTORVV IC>/qoyici. Ix’d yuos yvazyido yo ucu e BAPY bojeiyr suc epxounc tgal jotaqw syu wafojuqo, liwf ez wbuifu en duquca. Xlar umohkeq hao hi xtiyerk tyeh duxy TBYD (Yfuwm Galo Meyiojx Jezsupp) kifady oj jmo linitu, mut oreztve.
2. Ossofkopego shi obir nafbub wten ayfeekg ovuhlm uy tti wezi. Pnej adjeph Keimmfhes du ofehv mnip. Ovu Ceirrgsav’b kamfoz ctrmoqv te gku zevyayd doed wru gome.
3. Skiiro a ceqraq kopxej hin bje dobive givg.

Gijo xji qoha, bqot apir mvvh://cozudfilw:9355/ om rwa ktofduw. Ofij es adquhlp fexo axv qau’lh pio kyo yetezo jatbas:

Gnolg Lopaze qu sokupu cba epciyfz. Xyi ijm qaweraxth nou de mho wibitale uqv bbu ganoceh ejguzrk an no dehcuz wmopy.

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!