Skip to main content

Share Everywhere

Table of contents

In this tutorial, we are going to connect together everything we learned in the previous AWS Tutorial videos and make a static website that calls our API Gateway which then calls our Lambda Functions and finally writes to or reads from our DynamoDB.

Hàm write các bạn tạo tại Lambda Function

// Loads in the AWS SDK
const AWS = require('aws-sdk');

// Creates the document client specifing the region 
// The tutorial's table is 'in us-east-1'
const ddb = new AWS.DynamoDB.DocumentClient({region: 'us-east-1'});

exports.handler = async (event, context, callback) => {
    // Captures the requestId from the context message
    const requestId = context.awsRequestId;
    if( && && event.message) {
        // Handle promise fulfilled/rejected states
        await createMessage(requestId, event).then(() => {
            callback(null, {
                statusCode: 201,
                body: '',
                headers: {
                    'Access-Control-Allow-Origin' : '*'
        }).catch((err) => {
    } else {
        callback(null, {
            statusCode: 400,
            body: 'Bad Request',
            headers: {
                'Access-Control-Allow-Origin' : '*'

// Function createMessage
// Writes message to DynamoDb table Message 
function createMessage(requestId, event) {
    const params = {
        TableName: 'Message',
        Item: {
            'messageId' : requestId,
            'name' :,
            'email' :,
            'message' : event.message

    return ddb.put(params).promise();

Form HTML bên dưới

        async function getMessages() {
            fetch( 'YOUR API URL HERE',  {
                method: 'GET'
            .then(response => response.json())
            .then((response) => {
                response.body.forEach(element => {
                    document.getElementById("messages").innerHTML += "<p>"+element.message+"</p>"; // Adds each message to div
        async function submitMessage() {
            var name = document.getElementById("name").value;
            var email = document.getElementById("email").value;
            var message = document.getElementById("message").value;
            fetch( 'YOUR API URL HERE',  {
                method: 'POST',
                body: JSON.stringify({
                    "name": name,
                    "email": email,
                    "message": message
            .then(response => response.json())
            .then((response) => {
                document.getElementById("messages").innerHTML += "<p>"+message+"</p>"; // Add new message to message list
        getMessages(); // Calls get message on load
        <title>Test Form</title>
        <form onsubmit="submitMessage();return false;">
            <label for="name">Name:</label><br>
            <input type="text" id="name" name="name" value=""/><br>
            <label for="email">Email:</label><br>
            <input type="text" id="email" name="email" value=""/><br>
            <label for="message">Message:</label><br>
            <textarea id="message" name="message" value="" rows="10" cols="30"></textarea><br><br>
            <input type="submit" value="Submit">
      <strong>Messages from DynamoDB</strong>
      <div id="messages">


Kết quả form html

Form html
Bạn cảm thấy bài viết này như thế nào?

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.
12 + 0 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.