🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

【คัดลอกแล้วใช้ได้ทันที】พื้นฐาน SQL: ก้าวแรกในการจัดการฐานข้อมูลสำหรับนักสร้างเว็บไซต์

“ฐานข้อมูลกับ SQL ดูยุ่งยาก...”“เหมือนต้องพิมพ์อะไรบนหน้าจอสีดำเต็มไปหมด” สำหรับคนทำเว็บหลายคน อาจรู้สึกว่าเรื่องนี้เป็นโลกที่ห่างไกล และต้องมีความรู้ฝั่งเซิร์ฟเวอร์ถึงจะเข้าใจได้

แต่ถ้าคุณสามารถทดลองใช้ SQL ได้ทันทีผ่านเบราว์เซอร์ของคุณโดยไม่ต้องตั้งค่าอะไรยุ่งยากเลยล่ะ? สนใจลองดูไหม?

บทความนี้เป็นเหมือน "ชุดเริ่มต้นแบบลงมือทำ" สำหรับนักสร้างเว็บไซต์ที่ไม่เคยใช้ SQL มาก่อน จุดประสงค์เดียวคือ ให้คุณรู้สึกถึงความสนุกและสะดวกของ SQL ผ่านโค้ดที่สามารถคัดลอกและใช้งานได้ทันที เมื่อคุณอ่านจบ คุณจะได้ก้าวแรกของการจัดการฐานข้อมูลและรู้สึกตื่นเต้นกับ SQL มากกว่าที่เคยกลัวมัน

SQL และฐานข้อมูลคืออะไร?

ถ้าเปรียบเทียบกับสิ่งใกล้ตัว...

เริ่มจากการเข้าใจคำศัพท์กันก่อน แทนที่จะอธิบายแบบเทคนิค เราจะเปรียบเทียบกับสิ่งที่คุ้นเคย:

การเรียนรู้ SQL ก็เหมือนกับการได้เวทมนตร์ที่สามารถดึงข้อมูลที่ต้องการจากคลังข้อมูลขนาดใหญ่ได้อย่างอิสระ

เริ่มต้นอย่างง่าย! สร้างตารางฝึกกันก่อน

ก่อนจะไปต่อ เรามาเตรียมตารางทดลองที่ชื่อว่า “Users” ซึ่งจะมี ID, ชื่อ, อายุ และเมืองของผู้ใช้

โค้ดด้านล่างนี้ใช้สำหรับสร้างตารางและเพิ่มข้อมูลตัวอย่าง 5 แถว ไม่ต้องเข้าใจทั้งหมดตอนนี้ แค่ลองดูโครงสร้างก็พอ

โค้ดตัวอย่าง: สร้างตารางและเพิ่มข้อมูล

CREATE TABLE Users (
    id INT PRIMARY KEY,
    name VARCHAR(50),
    age INT,
    city VARCHAR(50)
);

INSERT INTO Users (id, name, age, city) VALUES
(1, 'Tanaka', 25, 'โตเกียว'),
(2, 'Sato', 32, 'โอซาก้า'),
(3, 'Suzuki', 20, 'โตเกียว'),
(4, 'Takahashi', 40, 'ฟุกุโอกะ'),
(5, 'Watanabe', 28, 'โอซาก้า');

พื้นฐานจริงๆ! ใช้ SELECT เพื่อดึงข้อมูล

คำสั่งที่ใช้บ่อยที่สุดใน SQL คือ SELECT ซึ่งใช้ดึงข้อมูลจากตาราง เป็นพื้นฐานของทุกอย่าง

เช่น หากคุณต้องการดึงข้อมูลทั้งหมดจากตาราง Users ให้เขียนแบบนี้:

โค้ดตัวอย่าง: ดึงข้อมูลทั้งหมด

SELECT * FROM Users;

มาดูรายละเอียดกัน:

เข้าใจง่ายใช่ไหม? คุณกำลังสั่งว่า “ขอทุกข้อมูลจาก Users!”

ตัวอย่างเพิ่มเติม: ดึงเฉพาะข้อมูลที่ต้องการ

ในหลายกรณี เราไม่ได้ต้องการข้อมูลทั้งหมด แต่อยากได้ข้อมูลเฉพาะที่ตรงเงื่อนไข นั่นคือหน้าที่ของ WHERE

เช่น หากคุณต้องการดูเฉพาะผู้ใช้ที่อยู่ในโตเกียว ให้เขียนว่า SELECT * FROM Users WHERE city = 'โตเกียว'

โค้ดตัวอย่าง: ดึงข้อมูลแบบมีเงื่อนไข

SELECT * FROM Users WHERE city = 'โตเกียว';

SELECT * FROM Users WHERE age >= 30;

เพียงแค่เปลี่ยนเงื่อนไขใน WHERE คุณก็สามารถเลือกดึงข้อมูลจากฐานข้อมูลได้อย่างยืดหยุ่น นี่คือจุดแข็งของ SQL

【ลงมือจริง】คัดลอกแล้วรัน SQL ด้วย HTML อย่างเดียว!

ถึงเวลาทดลองของจริง! โค้ดด้านล่างนี้เป็น HTML ที่ทำงานได้ทันที ให้คุณทดสอบ SQL ได้ในเบราว์เซอร์ของคุณเอง

คลิกปุ่มคัดลอก จากนั้นวางในโปรแกรมแก้ไขโค้ด เช่น VSCode แล้วบันทึกชื่อว่า “sql-practice.html” จากนั้นเปิดด้วยเบราว์เซอร์ (เช่น Chrome)

พิมพ์คำสั่ง SELECT ลงในช่องด้านซ้ายแล้วคลิก “รัน SQL” ผลลัพธ์จะแสดงเป็นตารางด้านขวา ลองเปลี่ยนคำสั่งและดูผลลัพธ์กัน!

โค้ดตัวอย่าง: HTML ที่สามารถรัน SQL ได้โดยตรง

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <title>สภาพแวดล้อมสำหรับรัน SQL</title>
    <style>
        body { font-family: sans-serif; display: flex; gap: 20px; padding: 20px; background-color: #f9f9f9; }
        .container { flex: 1; display: flex; flex-direction: column; background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
        textarea { height: 150px; border: 1px solid #ccc; border-radius: 4px; padding: 10px; font-family: monospace; font-size: 14px; margin-top: 10px;}
        button { background-color: #007bff; color: white; border: none; padding: 10px 15px; border-radius: 4px; cursor: pointer; margin-top: 10px; font-size: 16px; }
        button:hover { background-color: #0056b3; }
        table { border-collapse: collapse; width: 100%; margin-top: 10px; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #f2f2f2; }
        #error { color: #d9534f; font-weight: bold; margin-top: 10px; }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.10.3/sql-wasm.js"></script>
</head>
<body>
    <div class="container">
        <h3>ป้อนคำสั่ง SQL</h3>
        <textarea id="sql-input">SELECT * FROM Users;</textarea>
        <button onclick="executeSql()">รัน SQL</button>
        <div id="error"></div>
    </div>
    <div class="container">
        <h3>ผลลัพธ์</h3>
        <div id="result-table"></div>
    </div>
    <script>
        let db;
        async function initDb() {
            try {
                const config = { locateFile: filename => `https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.10.3/${filename}` };
                const SQL = await initSqlJs(config);
                db = new SQL.Database();
                const initialSql = `
                    CREATE TABLE Users (id INT, name VARCHAR(50), age INT, city VARCHAR(50));
                    INSERT INTO Users (id, name, age, city) VALUES
                    (1, 'Tanaka', 25, 'โตเกียว'), (2, 'Sato', 32, 'โอซาก้า'), (3, 'Suzuki', 20, 'โตเกียว'),
                    (4, 'Takahashi', 40, 'ฟุกุโอกะ'), (5, 'Watanabe', 28, 'โอซาก้า');
                `;
                db.run(initialSql);
                executeSql();
            } catch (e) { document.getElementById('error').textContent = "ล้มเหลวในการเริ่มต้น DB: " + e.message; }
        }
        function executeSql() {
            const sqlInput = document.getElementById('sql-input').value;
            const errorEl = document.getElementById('error');
            const resultEl = document.getElementById('result-table');
            errorEl.textContent = '';
            resultEl.innerHTML = '';
            try {
                const results = db.exec(sqlInput);
                if (results.length > 0) { resultEl.appendChild(createTable(results[0])); }
            } catch (e) { errorEl.textContent = "ข้อผิดพลาด: " + e.message; }
        }
        function createTable(result) {
            const table = document.createElement('table');
            const thead = document.createElement('thead');
            const tbody = document.createElement('tbody');
            const headerRow = document.createElement('tr');
            result.columns.forEach(col => {
                const th = document.createElement('th');
                th.textContent = col;
                headerRow.appendChild(th);
            });
            thead.appendChild(headerRow);
            result.values.forEach(row => {
                const tr = document.createElement('tr');
                row.forEach(cell => {
                    const td = document.createElement('td');
                    td.textContent = cell;
                    tr.appendChild(td);
                });
                tbody.appendChild(tr);
            });
            table.appendChild(thead);
            table.appendChild(tbody);
            return table;
        }
        initDb();
    </script>
</body>
</html>

สิ่งที่ควรรู้! ข้อควรระวังในการใช้ SQL

แม้ว่า SQL จะทรงพลังมาก แต่ก็มีข้อควรระวัง โดยเฉพาะเมื่อใช้งานในแอปพลิเคชันเว็บไซต์ เช่น การโจมตีที่เรียกว่า SQL Injection

SQL Injection คือการที่ผู้ไม่ประสงค์ดีใส่คำสั่ง SQL ลงในฟอร์มต่าง ๆ เพื่อเข้าถึงหรือทำลายข้อมูลโดยไม่ได้รับอนุญาต

วิธีป้องกันพื้นฐานคือ อย่าใส่ข้อมูลที่ผู้ใช้ป้อนเข้าไปตรง ๆ ในคำสั่ง SQL แต่ควรใช้ “placeholder” หรือ parameterized query เพื่อความปลอดภัย

สรุป: ก้าวต่อไป

ผ่านการคัดลอกและวางง่าย ๆ หวังว่า SQL จะดูเป็นมิตรมากขึ้นสำหรับคุณ ไม่จำเป็นต้องใช้หน้าจอสีดำ เพียงแค่พิมพ์คำสั่งที่ถูกต้องเท่านั้น

บทความนี้เน้นแค่ SELECT แต่ยังมีคำสั่งอื่น ๆ เช่น UPDATE และ DELETE ให้ลองใช้ใน HTML ที่เราเตรียมไว้

เมื่อคุณสามารถควบคุมฐานข้อมูลได้อย่างคล่องแคล่ว ศักยภาพในการเป็นนักพัฒนาเว็บไซต์ของคุณก็จะเพิ่มขึ้นอย่างมาก