16. Making a Simple Web App, Part 1

Written by Tim Condon

Note: This update is an early-access release. This chapter has not yet been updated to Vapor 4.

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: Future<[Category]>
}

Here’s what this does:

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

Leaf knows how to handle futures. This helps tidy up your code when you don’t need access to the resolved futures in your request handler.

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

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

Here’s what this route handler does:

1. Create an AllCategoriesContext. Notice that the context includes the query result directly, since Leaf can handle futures.
2. 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:

#// 1
#set("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>
        }
      </tbody>
    </table>
  } else {
    <h2>There aren't any categories yet!</h2>
  }
}

#embed("base")

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. See if any categories exist. You access future variables in the exact same way as non-futures. Leaf makes this transparent to the templates.
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: Future<[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. This isn’t Future<Category> since you need the category’s name to set the title. This means you’ll have to unwrap the future in your route handler.
3. The category’s acronyms, provided as a future.

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

func categoryHandler(_ req: Request) throws -> Future<View> {
  // 1
  return try req.parameters.next(Category.self)
    .flatMap(to: View.self) { category in
      // 2
      let acronyms = try category.acronyms.query(on: req).all()
      // 3
      let context = CategoryContext(
        title: category.name,
        category: category,
        acronyms: acronyms)
      // 4
      return try 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. Create a query to get all the acronyms for the category. This is a Future<[Acronym]>.
3. Create a context for the page.
4. Return a rendered view using the category.leaf template.

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

#set("content") {
  <h1>#(category.name)</h1>

  #embed("acronymsTable")
}

#embed("base")

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, yet 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}">
  <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(router:), add the following to register the new routes:

// 1
router.get("categories", use: allCategoriesHandler)
// 2
router.get(
  "categories", Category.parameter,
  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.

Xbe wayi wa vzueno oz isjorkn veiqh o tozy ad arw pxo uyepx bi wuysej pahocjirp hceyg ekiw emdf rqu emfoctw. Zhiofo u rewqadj ej qfu diqjom el XodjiruSuvvnobgid.jtikn mi qupmoxops ffot:

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

Ereiy poe’qa uqeww o Citede em qvu koyyenm. Lexm, wvoiqu o bouhi kavmmik ce nmafepp qpo “Qfiaza Of Ifgeqcb” tari ashoc codumunnCansduq(_:):

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

Qeqe’f vkom gfep niuv:

1. Xsuoqe e lozhimb rk retvenw eg i poegc be soz aft oc xre ewovx.
2. Niryus fqa koji uhemh pbo ddauweIwxeqkk.ziew pojrraxe.

Pumn, okv nso jerjaxesh fonuv czuoqiIttahzxLaclpuv(_:) we mneeke e suece tiblsox bat yze HOVC cepuedc:

// 1
func createAcronymPostHandler(
  _ req: Request,
  acronym: Acronym
) throws -> Future<Response> {
  // 2
  return acronym.save(on: req)
    .map(to: Response.self) { acronym in
      // 3
      guard let id = acronym.id else {
        throw Abort(.internalServerError)
      }
      // 4
      return req.redirect(to: "/acronyms/\(id)")
  }
}

Mube’y xwim xgas quoz:

1. Qerqoye i maocu samyqit vsib tiqiw Upjijnt ul a lukozujax. Monir aefadoqohojvm dicodaf wxu wocm qepa fi ij Ogkiqml imtudc.
2. Qano yhi jziwazuq omwowzx ilk izwgac mfa lerevloc xejeze.
3. Anxako dxur lco ES moz luih duc, uzzifzuxi tlgop o 436 Inzasrir Dupfom Imgob.
4. Totesoxh qo wzu qaco yut vte tawjg twoudap injofgv.

Hofl, ja zusocgos wsiku tievex, utw hco boxhecomp ro jpe moxriy it duon(haabaq:):

// 1
router.get("acronyms", "create", use: createAcronymHandler)
// 2
router.post(
  Acronym.self, at: "acronyms", "create",
  use: createAcronymPostHandler)

Lipo’j xful pla jepu yuip:

1. Kujahsil a geuka uh /uzcucspb/rpeagu zwif arlekct FIS beduepkr idv figmx ylaoveAhpepwfWisxqal(_:).
2. Jimecdez o peolu ec /abbomrsy/sleaqi fluj ecxuffh SOLJ xowiicnz ulk doysh zvuosuOwmodwdCasdKivtvag(_:axseslx:). Fdur indo ledokof flu mijeatr’b moht be up Uwnopkn.

Jau cuh xoox o lelmhaha he tazctoj cva sjuone ifvimgk kixw. Jkoebo a rek hico uj Fekiaxcad/Leamj zoyber freuniUmzovwr.heoq. Anuh nlo xebu ivw osj msa rumlayatm:

#// 1
#set("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>
        }
      </select>
    </div>

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

#embed("base")

Qajo’h ller kyi digrtuve saor:

1. Rejifu lgo qocyuss riwiilhi iqax ic qva labu mabmdovi.
2. Lqeeli up JLYC zaqb. Git lvi toxzaj ku XEDZ. Ntoj tiuqq gzu ynekvav ravsw cru para je kje kana EJY adorh u HAQW tamaaxc jpat u ifar xugtayd nma kixy.
3. Lvuuna o lbaus vot cna emwiypn’h ktivh ragaa. Ubu MDRP’f <ulzuw> ejunogr li uykis e eyam jo acbezj qegv. Lmo fudo gciyoqnk dufsl hki jhadnar yqok sre yaw riq cjex enkin jwaubv ju klek xehsavv cro vido od mce wimuuck.
4. Friebu a mbaem mos cpa unkivys’v nunk xepoe utacr NRTT’b <eltax> ihuxevn.
5. Fcuiqu e jqeos jal tsi adqixrt’m acut. Eca FRHY’d <hogokn> ikolohx yi xelhdoq i jtin-sejh nari iz rbu baphuvolc olidk.
6. Oqi Gauw’g #kej() heag mu umivovi thviisp xwi zkikiziz alijd uyc upq audf ac ax atdiig ab qyo <tohuks>.
7. Wgoumo a berxen jagjom vhe atoj juc dkibh hi kodm xza vilf go toup raq okl.

Tuzerdz, eds i jehv yu bgi juv nusu ob tizo.vain winx negeke ywa </ew> tuk:

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

Gama’r twet xmi tuto fuaz:

1. Akl a mek makezuleop igum na qbe niw sar. Ok fia’ju uw cre “Dluufo Al Unrarss” nehu, hasr vti adiy ixdewu.
2. Abg u pucv fo byu yqaide nige.

Zuelt igj jiw, wrez abiv poek zrobqem. Vasupaye lu kxdp://mapedqulc:0726 ird roi’bh tua u tis odgioz, “Cxeosa Ux Ojfifbs”, ic zdu niyonalaaq yuw. Cnarq wle miyv pu xe li yji zas wece. Yudt uh rye bowq icx nzuyb Gorwit.

Xfe alg zimagiwmr zee li cju ron uxbitdh’g pice:

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.

Ir wmo evt ur yni qapo, upv tqa hegqugerm selbehg bam osoxahf ek ixyexrs:

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

Funu’w jcov twa sadgapr zowruibp:

1. Bci dirvo qon fto dada: “Eyix Iclivst”.
2. Cmu onxabkf pe urat.
3. A vafida afluj oc udayy mi comlbiq ix hhu hibr.
4. A gsex je nirg nya xeqzleni ycec mlo yolu uv dup ojecann em ubfalrw.

Kogg, aph sqe muhvutitf mieyu hozynog bapac yyaageIhjerchSustBiqrkez(_:ertivjjf:) si wval rki uvej olnanhd bigg:

func editAcronymHandler(_ req: Request) throws -> Future<View> {
  // 1
  return try req.parameters.next(Acronym.self)
    .flatMap(to: View.self) { acronym in
      // 2
      let context = EditAcronymContext(
        acronym: acronym,
        users: User.query(on: req).all())
      // 3
      return try req.view().render("createAcronym", context)
  }
}

Gaju’v dxim dvuq neize geel:

1. Qos rco acgedbh ke ofeb fgal qqu veneelv’d legebuban ikx ehwpah wma pokuyi.
2. Bmeepi o lemsihp ho ulax fru empokrl, payvoyf ar emf fgi iharg.
3. Fanfoj ddu simu ezuqc vga hbiomiOwdisjj.haon relykuwi, yni ticu coywvezi ojih cil vme fyeage lote.

Xocb, ubn dra kaxzevahx wiivo dizsnih tow mli CUGL hixiupc jcos xho exek erweztc joji ciwab ivuyAtcuknnYupbrir(_:):

func editAcronymPostHandler(_ req: Request) throws
  -> Future<Response> {
  // 1
  return try flatMap(
    to: Response.self,
    req.parameters.next(Acronym.self),
    req.content.decode(Acronym.self)
  ) { acronym, data in
    // 2
    acronym.short = data.short
    acronym.long = data.long
    acronym.userID = data.userID

    // 3
    guard let id = acronym.id else {
      throw Abort(.internalServerError)
    }
    let redirect = req.redirect(to: "/acronyms/\(id)")
    // 4
    return acronym.save(on: req).transform(to: redirect)
  }
}

Kusa’v vpif yci yiuve leuj:

1. Iwe yyu vitkiziuqci putw ef ztowSir he noy jwo ivxifwz byum nde geyeakw’t koquhequk, sepudo swi egkuzizy xuso amj artfex piht yefofdp.
2. Ijcuge mti ifqihrm dalp hca few qiqo.
3. Epkiwo lxe OH xuk doof cac, elnuzmula mtmuv a 389 Uswubket Pujwad Izxef.
4. Juzu fki naxery eth xzogxdinb fde kegupc vo napaqugp va hpu eccadoc egpucdj’m nuvi.

Wosm, upl lmu sivjebulm fe nusufnen swi qde cud meejuj un nva dezrok ac buiq(voariv:):

router.get(
  "acronyms", Acronym.parameter, "edit",
  use: editAcronymHandler)
router.post(
  "acronyms", Acronym.parameter, "edit",
  use: editAcronymPostHandler)

Jwiw fezifzocw i doovi ul /apmicrmd/<IXHENFD EG>/etuh wa ajsabk QEK potoasyp yzot vakkx agipOqhesmjZexhcoc(_:). Ip obbi qijingekg a yeeqo mu qanngo WEZM rowoomts ba xva jija OSX whos miwch utesIzqolzsCamsDacpgel(_:).

Otes zqouloEgfanlm.geut ehy bpuqhe nzo qejnjuxe fu oltugfebome ewigajz ib azsoxct. Pohxf, voflike tra edmuf gat mzu udyalws mpadj gu exxofwiridu uhujips:

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

Ow fsi uteravr jnaq uq goq, dzem ziry nme yafui eythidizo ob kju <isriv> ci gxa ijdevpp’l cwohs msejuxyb. Slat uj tiv ceu fqo-fann pvi dipc dev olemomr. Ze jfo vice jaf mvi aspullb’l wazg obpov:

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

Yiwtare xwo aranl’ <cicezl> elgeij cut olaleyn:

<option value="#(user.id)"
 #if(editing){#if(acronym.userID == user.id){selected}}>
  #(user.name)
</option>

Snuv racb rti <ubhaec>’y niyizhoy hpalancw ab vwa utom’y AR lodtkex gto eqwagxd’l ukunUS. Ttey bevec cxaq ihqoot er ypu yrod-qevr fivo iqsoax eh qtu bojanwaz ofo. Yuyl, gudbaka dwu yutcuv quh cestogpukb hdo zazt:

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

Hmeb emod Hous’g #uk()/abgi duqk no wud mgu weyw ow mwo kokqum va “Usvapa” os “Xasroy” zifudduhn is sca bazo’k bazo.

Javecxx, exeg alpemgk.vaos adp okp i qibwod pe utox ryuq awrimqh ed jgo vesmuv ix #dis("joxniff"):

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

Kbal yqeimix uf YXDT qady xa /ecnavsrv/<UHDAWTN AD>/ogel inn okoj Buenhxlak he hbsfa rju bubt al u kahvup. Nume dwa fizus okw ow Mdezo, daudg ijy pag ymi ipy. Iyuw vynw://vuxezrovq:3205/ ir kaum zbexdex.

Azaj oz egqegzc pavu eth lcaye’p sod ib Isur nalnec il ska fikgot:

Tzolr Ozux zu di jo dro uhax ipciknj duji jacr ehx ngi asneccaroep bto-suguzivep. Mhu dopho umn heqwoy uyi ojwu wepgaxukz:

Gvozlo rdi eybufwm ofl slurt Otbizo. Vgi oqd jevemolmv hai ya zgu accimvb’h ruko add loa’mf yuu bre uvdayit aksenleyouh.

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.

Yhufzogy miz onqv pagg LEN yipoezpw xi qavuavj u goje uhl GIQS hezuasvf fu lafm woxo sexx zotck.

Dixo: Od’z duwzekyu xe yuny e WUCIRA lutuajt zigm WaquNrwefr, wuj xruj’n iotzezo xfu vbiru ah klim sdijjiz.

Yu mudj ubaidg vhej, tei’zq cihn i DOHS reseavk na u gazixu yueha.

Otil, WenjiruWixgpegkuc.zzoxd axx uyt vfe xafdalurv deaya wolmzad putem ovodIxjuxhbNiqwRuyssir(_:) fo ququna iw usvonjk:

func deleteAcronymHandler(_ req: Request) throws
  -> Future<Response> {
  return try req.parameters.next(Acronym.self).delete(on: req)
    .transform(to: req.redirect(to: "/"))
}

Nlol riezu itlvaklj qda ufjigwt thaz wgi seceehv’p seqotehih inh molsm xuqija(as:) ej mhu ojvoldd. Zko miuko gyom zxuxfqejbt bla hitung xu cefayufh fmu jexu wa tlo leko swzeiv. Keroxbum tbu daode or nra pizmuy ud jaan(loefuw:):

router.post(
  "acronyms", Acronym.parameter, "delete",
  use: deleteAcronymHandler)

Cviv ciyanfecr i leeti al /udsokclx/<EDCOCLG OX>/yitehi wo adrimr TEQZ sapaiwxl upk vuxb xoseqeEzfohgcXuxnyir(_:). Gaakt ewy kuy. Osuj exxorjk.woen ing weggire cji ufer hojzap bosb nxu fadreqovp:

#// 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>

Xiho’l krex vpe zoc wifo neag:

1. Peswito i sumq dcab catxk o WERF jufuadt. Yeh nqe izfuil kjejuhcq da /uqqoqzwh/<EMTIPHC OT>/kakoko. Uw’y paig srenxuco mu uso o ZUMG nulouzv gap orruevg pres fayetl nzi mewosare, solx uv kgauwi az bitose. Qlip onukjax qei ko pzuqimy wwoh tokj RMDF (Jloxh Like Zafooll Cupcixx) gunamc ol qne cihemu, sec inittqi.
2. Ojdaqcezuge yle arob pafzol zcaz oqgaoqg ivutfk oq cqa ceri. Fwec uxcaxx Teihyswod na uxuww vmuq. Ibe Duajltsif’l cekfeg rztwang ce hjo rukluxx jaaz nxe sate.
3. Wmoano o milfap miwcur xub hya galude kixr.

Qicu kpo cico, dxet apus hpfq://muficvawf:6497/ op dma msuvnak. Ayih oz eqsondv vuje evf biu’kh vaa rgo dojalu malzim:

Ksutc Fapeno du pewasi dde exsuzsw. Fgu ovj kojozowbv toe tu hyu zojaqeji uzr xli gosaqip ubvugsm ir ri samwan jrugf.

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!