ใช้ Google Sheets เป็นฐานข้อมูลสำหรับเว็บของคุณ

bysemicon -
0


        ในบทบทความที่ผ่านมาเราได้เรียนรู้วิธีดึงข้อมูลจาก Google sheet โดยใช้ google visualization API ด้วยจาวาสคริปต์ มาแล้ว วันนี้เราจะมาใช้ Google Sheets เป็นฐานข้อมูลสำหรับเว็บ โดยใช้ google visualization API ดึงข้อมูลมาแสดง

1. สร้างไฟล์ google sheets บันทึกข้อมูลของเว็บไซต์

ABCDEF
ModelColorIDYearofficial URLImg url


2. สร้างไฟล์ styles.css


p {
    margin-bottom: 5px !important;
}

h1.site-title {
    text-align: center;
    font-family: 'Sriracha', sans-serif;
    font-weight: 500;
    padding-top: 1.75rem;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    padding: 75px;
}

.product-brand {
    font-family: 'K2D', sans-serif;
    font-weight: 500;
    font-size: 1.15rem;
    margin-top: 10px;
    margin-bottom: 5px;
}
.product-text {
    font-family: 'K2D', sans-serif;
    font-size: 1.15rem;
    font-weight: 500;
    color: rgb(90, 90, 90);
}

img.product-img {
    max-width: 100%;
    object-fit: cover;
    transition: all 0.3s ease-in-out;
    transform: scale(0.9);
}

img.product-img:hover {
    transform: scale(0.95);
}

button.btn-outline-dark {
    font-family: 'K2D', sans-serif;
    font-size: 1.15rem;
    font-weight: 400;
    padding: 5px 10px;
    margin-top: 10px;
}

footer { 
    font-family: 'K2D', sans-serif;
    font-weight: 600;
    font-size: 1.15rem;
    display: flex;
    justify-content: space-between;
    padding: 25px 75px;
    border: solid 1px #000000;
    border-width: 1px 0;

}


3. สร้างไฟล์ index.html


  <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="styles.css">

        <!-- Google Fonts -->
        <link href="https://fonts.googleapis.com/css2?family=Charmonman&family=K2D&family=Sriracha&display=swap" rel="stylesheet">
        <!-- Bootstrap css -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
        <!-- Aos css -->
        <link href="https://semisailom.github.io/ggSheetFetchApi/assets/css/aos.css" rel="stylesheet">
        <!-- Main Script api -->
        <script src="api.js" async defer></script>

    </head>
    <body>
        <!-- Header -->
        <h1 class="site-title"> Wichy Store - Fetch Products from Google Sheet </h1>
        
        <!-- Products Display -->
        <div class="products-grid"></div>

        <!-- Aos js -->
        <script src="https://semisailom.github.io/ggSheetFetchApi/assets/js/aos.js"></script>
        <script>
            AOS.init();
        </script>

        <!-- JavaScript Bundle with Popper -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
    </body>

    <footer>
        <p>Powered by Wichy</p>
        <p>&copy; 2022 - Air Jordan Store</p>
    </footer>
</html>


4. สร้างไฟล์ api.js และนำ sheet ID ของ Google Sheets ที่สร้างไว้ นำมาใส่แทน xxxxx

//Url to Google
const sheetId = 'xxxxx';
const url = 'https://docs.google.com/spreadsheets/d/${sheetId}/gviz/tq?';
const productsContainer = document.querySelector('.products-grid');
    fetch(url)
    .then(res => res.text())
    .then(response =>{

        //Parsing the JSON
        const data = JSON.parse(response.substr(47).slice(0,-2));
        //consologeando el JSON
        console.log(data);

        //Iterating over the JSON to create the products
        data.table.rows.forEach(product => {

            const productCard = document.createElement('div');
            productCard.classList.add('product-card',);
            productCard.setAttribute('data-aos', 'fade-up');
            productCard.innerHTML = `
                <div class="product-card__image">
                    <img class="product-img" src="${product.c[4].v}" alt="${product[0]}">
                </div>
                <div class="product-card__info">
                    <h2 class="product-brand">Model: ${product.c[0].v}</h2>
                    <p class="product-text">Color: ${product.c[1].v}</p>
                    <p class="product-text">Year: ${product.c[3].v}</p>
                    <a class="product-link" href="${product.c[5].v}" target="_blank">
                    <button type="button" class="btn btn-outline-dark">More...</button>
                    </a>
                </div>
            `;
            productsContainer.appendChild(productCard);
        }
    );
}).catch(error => console.log(error)); //catch error in case the JSON cannot be parsed

5. เปิดไฟล์ index.html บนเบราว์เซอร์ เราควรจะสามารถดึงข้อมูลและแสดงข้อมูลดังตัวอย่าง




Tags:
แสดงความคิดเห็น (0)
ใหม่กว่า เก่ากว่า