Forms

We need a way to update the dogs table so let's go ahead and create a new form.

<form v-name="create_dog" >
  <input name="name" type="text" placeholder="name" required />
  
  <textarea name="description" placeholder="description" required />
  
  <label>Smelly
  	<input name="smelly" type="range" min=0 max=10 value=5 step=1 required />
  </label>
  
  <label>Cheeky
  	<input name="cheeky" type="range" min=0 max=10 value=5 step=1 required />
  </label>
  
  <button type="submit" >create</button>
  
  <v-action>
    <v-sql>
  	insert into dogs (name, description, smelly, cheeky) values (
  		$.body.name,
  		$.body.description,
  		$.body.smelly,
  		$.body.cheeky
  	);
    </v-sql>
  </v-action>
</form>

Now most parts of the form should be self explanitory if you've ever made a page in HTML before, but the <v-action> part is where the magic happens.

Alright let's try it out! You should now be able to add new dogs to the page. Of course we've only added one attribute "smell" to the form but see if you can add the rest.

But we didn't just add a form to the ui and a handler, we have also defined an API endpoint. In your browser you can now navigate to http://localhost:3000/_api/ and see a new endpoint has been created. You can even call it directly and add new dogs to your file.

Adding an error page

Let's add an error page to handle any errors that might be thrown in our page. Edit the

<main class="container" >
  <v-try>
    <v-include src="./main.vtml" />
  </v-try>
  <v-catch>
    Error: $error.message
  </v-catch>
</main>