HTML to DynamoDB – Things School

HTML code

Runs in your PC’s local server or hosted in S3/Github

Make sure you change the API endpoint along with path in line 22

<!DOCTYPE html>
<html>
  <head>
    <script>
      function makereq()
      {
        var myHeaders = new Headers();

        // add content type header to object
        myHeaders.append("Content-Type", "application/json");

        var data = JSON.stringify({"name":document.getElementById("namee").value, "email":document.getElementById("email").value, "comments":document.getElementById("comments").value});

        var requestOptions = {
            method: 'POST',
            headers: myHeaders,
            body: data,
            redirect: 'follow'
        };
        // make API call with parameters and use promises to get response

        fetch("https://ulxd7y3xug.execute-api.us-east-1.amazonaws.com/putItem", requestOptions)
        .then(response => response.json())
        .then(data => alert(data));
      }

    </script>
  </head>
  <body>

    <h4>Form</h4>
    <p>Name:</p> 
    <input id="namee" type="text" placeholder="Enter your name:">
    <p>Email:</p> 
    <input id="email" type="text" placeholder="Enter your Email:">
    <p>Comment: </p>
    <textarea id="comments" placeholder="How can I help you?"></textarea><br><br>
    <button onclick="makereq()">Submit</button>
    <br><br>

  </body>
</html>

The HTML forwards the POST request to API gateway

API gateway’s putItems path is configured to host a POST request which is integrated with a lambda function running the following code

Lambda function – putToDDB

Make sure you give the IAM role of this lambda to Put Items on the DDB table

import json
import boto3
from datetime import datetime
from decimal import Decimal

dynamodb = boto3.resource('dynamodb')

def lambda_handler(event, context):
    # TODO implement

    contents = json.loads(event['body'])
    table = dynamodb.Table('demoTable')

    response = table.put_item(
       Item={
            'id': context.aws_request_id,
            'timestamp': int(datetime.now().timestamp()),
            'name': contents['name'],
            'email': contents['email'],
            'comments': contents['comments']
        }
    )
    return {
        'statusCode': 200,
        'body': json.dumps("Submission successful!")
    }