|
|
|
# Having a service is nice, having a service that's useful, priceless
|
|
|
|
|
|
|
|
So far we've been focused on creating the services outer walls, but most people would prefer to live in a house without decent plumbing.
|
|
|
|
|
|
|
|
First things first, lets make sure we are all on the same release.
|
|
|
|
|
|
|
|
## Same procedure as last part, same procedure at every part.
|
|
|
|
|
|
|
|
Run `:!git checkout -f Step-2` and all your wonderful edits (or mistakes) have been washed away, and we are one with the source yet again.
|
|
|
|
|
|
|
|
Press **F5** in vim, to ensure all packages have been installed, and the service is running.
|
|
|
|
|
|
|
|
Lets open it up in the browser, as always [fastapi.ibmi.rocks](https://fastapi.ibmi.rocks)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
As stated, HTML, JS and CSS have been moved out into the _templates_ and _static_ folders, along with some images, to spice up the frontpage.
|
|
|
|
|
|
|
|
A form has been added, that uses Xhr (Async. javascript requests) to the items API.
|
|
|
|
|
|
|
|
What we want now, is a database connection to DB2, so we can do something with this service.
|
|
|
|
|
|
|
|
Before we start on that, we'll review the most significant changes...
|
|
|
|
|
|
|
|
## You get a template, and you get a template, EVERYONE gets a template!
|
|
|
|
|
|
|
|
Don't get me wrong, I like [Chameleon](https://chameleon.readthedocs.io/), but there are almost as many HTML template frameworks, as there are node_modules...\
|
|
|
|
Well no, but you get the idea...
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
You could choose to use Jinja, as FastAPI's tutorials do, or something else, whatever feels good right?\
|
|
|
|
Here is a lightweight example...
|
|
|
|
|
|
|
|
```
|
|
|
|
<!DOCTYPE html>
|
|
|
|
<html lang="en">
|
|
|
|
<head>
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
<title>${title}</title>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<h2>Welcome ${message}</h2>
|
|
|
|
</body>
|
|
|
|
</html>
|
|
|
|
```
|
|
|
|
|
|
|
|
Apart from two placeholders, denoted by `${...}`, that importantly don't prevent the document from validating as HTML, it looks just like HTML right?
|
|
|
|
|
|
|
|
The matching Python function to support that template, would look like this...
|
|
|
|
|
|
|
|
```
|
|
|
|
@app.get("/")
|
|
|
|
@template(template_file='index.html')
|
|
|
|
def index():
|
|
|
|
return {
|
|
|
|
"title": "Document title",
|
|
|
|
"message": "John Doe",
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
[Chameleon](https://chameleon.readthedocs.io/) can do a bunch of stuff, but the above statement is true for every case I have seen,\
|
|
|
|
meaning a designer could open this thing in a design tool, and start working with it without too much worry.
|
|
|
|
|
|
|
|
And while the index.html in the project is larger than this, it doesn't do anything fancy from a template manner.
|
|
|
|
|
|
|
|
The only semi fancy thing it does, is introduce a form element, that uses javascript to talk the the service, but that has nothing to do with any of this, it is just basic javascript, and if we were seriously building a frontend for something like this, I would recommend using a modern frontend framework like Angular, Vue or Lit.
|
|
|
|
|
|
|
|
The mentioned form, is ghetto simple...
|
|
|
|
|
|
|
|
```
|
|
|
|
<form method="GET" onsubmit="return sendForm(this)" action="${prefix}/api/v1/items/${id}">
|
|
|
|
<label for="q">Test API items/{item_id}</label><br/>
|
|
|
|
<input type=text id="q" name="q" value="${q}" />
|
|
|
|
<input type=submit>
|
|
|
|
<div class="formResult" />
|
|
|
|
</form>
|
|
|
|
```
|
|
|
|
|
|
|
|
Old school onsubmit handler, and the action is "hardcoded" apart from using a few placeholders.\
|
|
|
|
The prefix placeholder is worth a mention, it only exists, to support that fact that we are many people working "on-top" of each other.
|
|
|
|
|
|
|
|
In a production environment, it wouldn't be needed at all.
|
|
|
|
|
|
|
|
Review time is over, lets connect that database!
|
|
|
|
|
|
|
|
Proceed to the next page... |
|
|
\ No newline at end of file |
