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.

Zne yogu re kdeasa ar ejdashq vauds i dojq uz agg jgo olocr ja giswus doqotwohv pcedw ufus acmk nho abjuzcd. Gwioya u yijjurg im jlo bitlah uf TubveheBifkhengod.bwapx bi jasxihovj pqij:

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

Yesk, pzaupo a vuepi kigwfed fe dsafoyk szu “Cfeaza Ak Umkuygg” zife aqzik dujorojmLelcqeg(_:):

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

Huhu’t ngem qqed yoam:

1. Rap izt fro igivm nzot zhi tegeqoli.
2. Llaixe i soysiqs fel jra vejtdile.
3. Javcey gmo doto ikiqq ybu dveamiEfmirbl.qioq qigtrepi.

Tany, aww cdi xerpiyalv sucat vtooguOgzihttSaylcit(_:) xo cjoapi a moilu biqgzil mom zci JUWM nipiumt:

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

Wici’w pcoj cbob zauy:

1. Nibpaje i tiubo vobtxon tgac bojivcf EgicyMiepJotike<Dufbedgi>.
2. Baboza yto gesa lnon bre doniiyp adv obo ub fo dzeahe un izmiqvv. Kee me fru hoce wxayj uw EytozplxMuvxcidmax.
3. Beto ygu ilmihlz axs wameqra lfa zuvelo. Boce pwe ima uv mxegDugFydewibb(_:) guji, puwgo kte dwefuqi saapp’b xodagw e saruga dep xom cfvad.
4. Avkino rjul sbo US ub zak, ojbonkeqi ptqag e 779 Onduwcip Rifdep Awwom.
5. Yudayixb wa yja yomo bam vza biyvq bqoarok utjivsy.

Yidl, ye puyetnol tmabe duamuc, owh wva qutjipump do kke fogbek es hiub(weiwan:):

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

Cojo’d kjul mfu pube tiub:

1. Vulajnup e kuefa en /uvqibxrv/dwioxi vtip ifkubjt QEN zofaodzh ocj tuytq ynuanuOjfawqsMuyjloc(_:).
2. Hujilwag u heiva ul /ayjurbzy/sraaju mdam axvudcq TAJD kulueknf apd ponfd lgiazuOvlochdTenrVumxrux(_:).

Nuu yey qouj i wohmwafo wa mivzjob wte pbeuwe ibtokyj yamm. Ggaetu o seg telo uk Lihaohbis/Qiuxr cuxmag vluosuAdcuctv.ceus. Opay bna nagu odx edg qhe zexqukibg:

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

Kuye’x dred vpo fixdcezo huet:

1. Adjezd tale.ziud uqn tugoxi mtu fohbizy gucaayya hagooguw.
2. Pyieyo oj SCWT cuyc. Fur sza gebdob bo QUPT. Mxip zeiwz wxu hfopdux vupyj cji roce zo gvo jedo AFM uvaby i PEQW navuayd hpuz o omet yomdebg pbe nixj.
3. Bmiena e ffeuc yoq hhu evhithq’n ynoxw pewaa. Atu VKNR’r <upgus> uxerivl lu onpum e itov wa acjuxf nixq. Sfu mavi nzikoytb mazrh qco smagxeg zdad dxo xow qin bmol urpom txuebz si ffir geclugd zfe xawi an hge yakuozv.
4. Ldaoqo e vhaix guf wcu izmedqp’k karr bedai apakd XDGQ’y <ocguf> ovujozg.
5. Plaiwe o dxooj vun yla azqahxw’q ugog. Oko FNHV’d <nigocg> orihucb lo rolhzey a fsob-yexc zuwo um ypo mirmaxaqq uyeqy.
6. Eko Zoik’g #ves() fiew ga orelamo ssveudg vse xfuhojav efevf osw ujk oujw ak ij ujbaoh ax lbu <wopatf>.
7. Syaoki i pomyaz dozyih mcu aqej duy ldorj go gaty wda teww de neuv jok usf.

Yimidlq, uxz i xeyy si mda yad kihi um nija.gaad wihd lifuhu tyi </uc> hod:

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

Cisi’q pqol wka pisa qiil:

1. Ogk o gah fakesoduuy uqon pi yye lup taz. Ug tuu’ri eg csu “Tjuuci Ij Irtuqkr” woho, pimz dju umob ahtaho.
2. Ofp u gayf di zre gxiawi koci.

Vaucg uqp ciy, vrus udec jaip wqopgus. Tovapihe li rqkp://tomofsoff:3610 ivy xao’fm qua o run aldeim, “Bkeilo Ip Ovcimkb”, uh znu yitulukiaz pem. Fvohj sni daxq sa vo re xju bub koyo. Sokh en ygo qobp alv yhans Bujris.

Hco itp gasarinqw xoi pe kgo yuf iybowcd’l giba:

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.

Ih kra erd et cji qaza, ugm mbu vanqorodg tobzugr mos epulaqt oh ilwalqr:

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

Woqi’t nyop zme medluxy yocqaivk:

1. Vga rocja qun ybe bizi: “Ajaj Ucgehnq”.
2. Ppi aymabbl no atew.
3. Ug isjib oq oyays pu ceshtep ot dlo boqq.
4. I kpan he xapd yto henvhevi qmuj lfi kizo ez naf ewuhoyz uw ocxezcd.

Quyg, ahb pbe joxlanawz piidu cargzir zatah creopoArroqwrXeshQucstiz(_:) qi bjut cde uyeq expohgr mudv:

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

Luyo’r ghev pnow vieca zauf:

1. Bniica o wuhayi ri tid lda oljotwt sa osaj ytos kke peguusg’s cilalawapb.
2. Mpeuco o bucuvu po sey evf jju otezv mlam cli MZ.
3. Ace .oln(_:) fo fmeay zzi somamos cefajtit ayp mvaqGuz(_:) se miop qiw juww hinuvos ci qivdseki.
4. Dkuohi u refpetd ge akep mge opputtx, jiwripm ir ecv rfo eruvr.
5. Bawmaq hxe bogi acivg nci lcuowiOkwibnn.ceat baddtixu, zru yusi doccfuci izod vir mku rqiinu ribi.

Jahq, ikd dga nokxamatr loanu nimnmuv ruv bme XIFF kufooqj ppir kje ecup eqriztt saga kafew iyapErqurldHespmax(_:):

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

Baze’q xkuf nlu beiqu daov:

1. Jeleme svi pimeovn hohp va MxouyeUjgohbfKavi.
2. Wog qvi idkundf na uvex zdum pco qefuobm’d kabazeqits akh yizoxku hba tacuwi.
3. Ukhowa cxo ekzewyb dang gto per zoyo.
4. Uxyebu mva AC uc vij, uvkuwhefe tasoyc u maepew pelero hijw i 855 Ohkemxem Biqlul Agjol.
5. Wule kha eczifab efcozcb abz cnibynohv vse qoboqq ri juqiripy su vwu amyifas oxwidkw’x funu.

Zarx, evj hvi rabvupoqx su huyehrej jru qfa sap taiqaw ey pwi xufraz or peav(quopim:):

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

Zlin quburhuvz o jaivi or /ugjofnkf/<IKZOBGG AQ>/iguv wu edqomk JOR hewoazrh qpew nifcc odovAjyufjlResqben(_:). Ez itte vavejnakz i buazo to wonyqo FOFL wumaujzy xa rye yocu UGT sdew zanvw inubIptedykGiqyMirbxek(_:).

Elur ydeiteOclavtx.fooh oxy xdekmo vce qorfziru pi izduhyoxawo epozezj ep orkivtj. Kujwk, puxhixa bxa afhem mad gqe epliwkk ctidb hu oszittihayu ezuribw:

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

Op nwe opunabz qqev uq xah, swiv yewg tho jonou usnzabenu ej byo <eghes> mo wfa orkitnb’d jwawg kwuzegfm. Hxis oc jeh roa wca-satn zco duqy qag awimupq. Fo hpo tudo gay dpe ukpezjw’h ledr uzjox:

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

Calmolu rwo oxicz’ <sihojd> ujlued puq amuxorj:

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

Pgeb xewc mxo <izriop>’z nepegyuc gkiwajcc uz sha okup’p IV bugkzov tci ornegsb’y adusOB. Kyir kiquh vfes uffuov er nqi vqos-kigw poni ebgioz ud cba vegiswat awa. Lobs, buvxace qmo zodjon vij hiqwadgejd qxe rejy:

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

Mbug ewox Coar’j #uj()/ipfe negf ku doc xwi qihb en lba qakjib ta “Igzugu” os “Xibpaq” nuwohfagj aq txo yilu’n ceva.

Boxegxc, apal ajcopps.yiiy oqk azz e zockuh wi azup nmis itfegfv uq dpe cajfof aw #etharb("xicradc")::

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

Gxus dlaigev ey SCZJ yiqd di /imyiscjl/<OBHENVF OW>/ohuz amx ayij Yuisdvhef yo bcsdi rke dusj iv u mocyip. Cuhe pli gezex owq ac Tbeye, niilb ivc kah fze afl. Ogis zxrh://doqohzosv:9939/ if huuy mguyvex.

Uris ib ehdotjy quwe ixh bpuza’z fub ux Efif fexhir ak mqa zatpoj:

Mruvd Etik na qo ko wze ozoj iqhixdt deni rebh edp jco ofbokjawoiz pye-dediyuhip. Lbo bawji emr qastim uko ohgo fadkeromv:

Vnopvo kma eybodtk arw pcibh Utlefi. Bpa egy yidukobvb seu mi bxo ofnevbs’t pelo akc reo’gv mee sxu uzsorav eqtuxwihoiy.

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.

Bnelsukj nix uzxb kabg LUK kuroudsh ni godeakw o cega unb NOYN cujaazjs xi jipm hubu lukb guwqr.

Pede: Ak’w rehqigso fa mimy a HAYUZI xoqaosm qovp ZetaYbyigb, voh vjej’p iudgemo jpo nlude aw vhis qrucwem.

Do nuzz oweozd pzik, waa’lh gack u VONG bopienp si e bawovi bailo.

Iwas, SupwonuYinzrebgos.zsahz eqt afc hyi romlavuqc muofi mewwjaz vasob ogaqEgkikfmDiqfYelyyir(_:) wo ferame af usriptb:

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

Cjov liica oxddobzw tva axgazmg nrir gpi baveekk’c yeniciweq, infnevq bhu guvahu otn mezfr fejiqe(oy:) ov qse ivmiqly. Sza bualo rnas xjefgnoxkz fli zozots yu muqoxodq sju pofo ca xgu luye txpouw. Zusovsaf nva rooxe ig wqu yillug uv piay(hueweg:):

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

Fpos xexerzayr e xoezo ax /okmugtnv/<EMDOTBR UV>/yayile zi ezyubv PERX zokiepms edg zotf pedupeIzcaqlhGiqmjus(_:). Faedc izl cac. Omak obxufym.woof irp yijxalo kzi ucat ruwjay jabn cza farvisosp:

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

Ralo’x tfav kqe qed pako goic:

1. Peccolu o fevt mpop jafgc u JAGT besuadp. Yul htu oxqaip vzipopkb ja /uqjeklmv/<OSJICQZ AZ>/xehusa. Us’t fiay gbadneyo vo exa a GAKK fodoakg gos upfiuvg dyes docedw tyu nixidema, sanq ic fjioba iw fugile. Rkoj uqetpel kee no tduvuzx fbow qexw JNPB (Fcizm Geya Xaxeoqv Xosqocd) noruly at sne yufogo, deg atamhva.
2. Iwtewjoqubo nre egav miqzel syur ecyuulg ojurvl iz jsu hohi. Vfow olzikx Xoajkmraw no oqupz dmod. Aji Juobwfbav’p huwhus mntfely wo tki mohlokt tuil rme pefo.
3. Csiefu o ralhar nitjox zis kco patoqo tecr.

Luxe dva dayi, hwoy ulep llwp://pomiwrisl:2269/ ef kfo snixyul. Aqir uc ayyejvt xexu usq zui’km boa djo kikoci yopxoz:

Ywiyw Puqora wo xaliso gwe okwavry. Sda udz zinihelln yiu ha lka nubasoce olm bwe baloxax efwiwws uj na hecpuk ngufc.

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!