Pangkalan data pertama: simpan produk dalam MySQL

Pangkalan data pertama: simpan produk dalam MySQL

Halaman yang kita bina setakat ini menyimpan nilai dalam fail. Sebaik sahaja anda menutup pelayar atau menukar kod, nilai itu hilang. Kalau anda belum mengikuti bab nilai dan keputusan, mulakan di situ dahulu.

Pangkalan data menyelesaikan masalah itu. Ia menyimpan data di luar halaman, kekal selepas pelayan dimulakan semula, dan boleh dibaca oleh banyak halaman sekaligus.

Apa itu pangkalan data, secara ringkas

Bayangkan sebuah almari fail. Setiap laci menyimpan satu jenis dokumen, dan setiap dokumen mempunyai ruang yang sama: nama, tarikh, jumlah.

Dalam pangkalan data, almari itu dipanggil pangkalan data, laci dipanggil jadual, dan satu dokumen dipanggil baris. Ruang pada setiap dokumen dipanggil lajur.

Kita akan mencipta satu jadual bernama produk, dengan lima lajur: id, sku, nama, harga dan stok.

Kenapa kita tidak menaip data dalam kod

Sebelum ini, tiga produk ditulis sebagai tiga kotak berasingan dalam index.cfm. Ia berfungsi, tetapi ia mempunyai tiga kelemahan yang akan menyusahkan anda tidak lama lagi.

Pertama, menambah produk bermakna mengubah kod. Kedua, dua orang tidak boleh mengemas kini senarai yang sama tanpa bertembung. Ketiga, tiada rekod siapa mengubah apa dan bila.

Pangkalan data menyelesaikan ketiga-tiganya. Ia menyimpan data di luar kod, membenarkan banyak halaman membaca data yang sama, dan boleh menyimpan sejarah perubahan apabila kita mula menambah jadual gerakan stok.

Itu sebabnya bab ini penting walaupun ia kelihatan hanya satu langkah teknikal.

Pasang WampServer

WampServer memasang tiga perkara sekali gus di Windows: Apache, MySQL dan PHP. Kita hanya memerlukan MySQL, tetapi ketiga-tiganya datang dalam satu pemasang.

1. Muat turun WampServer 64-bit daripada wampserver.com.
2. Jalankan pemasang dan terima tetapan lalai. Ia mungkin meminta anda memasang Visual C++ Redistributable dahulu; pautannya ada pada pemasang itu.
3. Selepas selesai, buka WampServer dari menu Start.
4. Lihat ikon kecil di penjuru kanan taskbar. Hijau bermakna semua perkhidmatan berjalan. Jingga bermakna sebahagian berhenti, biasanya Apache kerana port 80 sudah digunakan.

Kita tidak menggunakan Apache daripada WampServer, kerana Lucee sudah berjalan di port 8080 seperti yang diterangkan dalam bab pemasangan. Jadi kalau ikon menjadi jingga kerana Apache, MySQL mungkin masih berjalan. Klik ikon itu dan lihat menu untuk memastikan MySQL bertanda hijau.

Cipta pangkalan data dalam phpMyAdmin

phpMyAdmin ialah laman web yang membolehkan anda mengurus pangkalan data tanpa menaip arahan terminal. Ia datang bersama WampServer, jadi tiada pemasangan tambahan.

1. Buka pelayar dan pergi ke http://localhost/phpmyadmin.
2. Masuk dengan pengguna root dan kata laluan kosong. Itu tetapan lalai WampServer. Kalau anda meminta kata laluan, kosongkan sahaja medan itu.
3. Klik New di sebelah kiri.
4. Taip nama pangkalan data: inventori.
5. Pilih collation utf8mb4_unicode_ci, kemudian klik Create.

Sekarang anda mempunyai almari kosong. Seterusnya kita letak satu laci di dalamnya.

Cipta jadual produk

Klik pangkalan data inventori di sebelah kiri, kemudian buka tab SQL. Tampal arahan ini dan klik Go.

CREATE TABLE produk (
    id INT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
    sku VARCHAR(40) NOT NULL UNIQUE,
    nama VARCHAR(150) NOT NULL,
    harga DECIMAL(12,2) NOT NULL DEFAULT 0.00,
    stok INT NOT NULL DEFAULT 0
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

Seterusnya, masukkan tiga baris contoh. Buka tab SQL sekali lagi dan jalankan:

INSERT INTO produk (sku, nama, harga, stok) VALUES
('BRS-001', 'Beras 5kg', 18.50, 10),
('KPI-001', 'Kopi 500g', 12.00, 3),
('GLA-001', 'Gula 1kg', 3.20, 0);

Klik Browse pada jadual produk, dan anda sepatutnya melihat tiga baris.

Perhatikan bahawa harga disimpan sebagai DECIMAL(12,2), bukan FLOAT. Wang tidak boleh menggunakan nombor perpuluhan biasa kerana ia boleh membundarkan senyap, dan lama-kelamaan jumlahnya tidak sepadan.

Sambungkan Lucee kepada pangkalan data

Sekarang kita beritahu Lucee cara bercakap dengan MySQL. Kita menggunakan satu fail khas bernama Application.cfc, yang berjalan secara automatik untuk setiap permintaan dalam folder itu.

Cipta fail baharu bernama Application.cfc di dalam C:\inventori, dan taip:

component {
    this.name = "inventori-mini";

    this.datasources["inventori"] = {
        type: "mysql",
        host: "127.0.0.1",
        port: 3306,
        database: "inventori",
        username: "root",
        password: ""
    };
}

Mari kita fahami setiap baris:

• this.name memberi nama kepada aplikasi ini, supaya Lucee menyimpan tetapannya secara berasingan.
• this.datasources["inventori"] mencipta sambungan bernama inventori, iaitu nama yang akan kita gunakan dalam halaman.
• type memberitahu Lucee jenis pangkalan data.
• host, port, database, username dan password ialah butiran sambungan.

Kalau anda menetapkan kata laluan root dalam phpMyAdmin, letakkan kata laluan itu di baris password. Jangan biarkan ia kosong jika pangkalan data anda memerlukan kata laluan.

Perangkap yang saya sendiri terserempak semasa menulis bab ini: kunci itu mesti type, bukan driver. Kalau anda menulis driver: "mysql", Lucee tidak memberi ralat pada fail itu, tetapi ia juga tidak mendaftarkan sambungan. Halaman kemudian akan mengadu bahawa pangkalan data tidak wujud.

Baca data dalam halaman

Gantikan index.cfm anda dengan kod ini:

<!doctype html>
<html lang="ms">
<head>
    <meta charset="utf-8">
    <title>Inventori Mini</title>
    <style>
        body { font-family: system-ui, sans-serif; max-width: 620px; margin: 60px auto; padding: 0 20px; }
        h1 { font-size: 1.5rem; }
        .baris { border-bottom: 1px solid #e2e8f0; padding: 10px 0; }
        .nama { font-weight: 600; }
        .butiran { color: #64748b; font-size: 0.92rem; }
    </style>
</head>
<body>
    <h1>Senarai Produk</h1>

    <cfquery name="senaraiProduk" datasource="inventori">
        SELECT sku, nama, harga, stok
        FROM produk
        ORDER BY nama
    </cfquery>

    <cfoutput>
    <cfloop query="senaraiProduk">
        <div class="baris">
            <div class="nama">#nama#</div>
            <div class="butiran">#sku# - RM#numberFormat(harga, "0.00")# - #stok# unit</div>
        </div>
    </cfloop>
    </cfoutput>
</body>
</html>

Hasil sebenar pada rig ujian kami: tiga baris daripada jadual produk, bukan ditaip dalam kod.

Muat semula pelayar. Anda sepatutnya melihat tiga produk, disusun mengikut nama: Beras, Gula, Kopi.

Perhatikan bahawa <cfloop> sekarang mempunyai query="senaraiProduk", corak yang sama seperti gelung senarai dalam bab sebelumnya, tetapi dengan sumber data yang berbeza. Ia tidak lagi mengulang senarai teks; ia mengulang baris yang datang daripada pangkalan data. Di dalam gelung, nama lajur boleh digunakan terus, seperti #nama# dan #harga#.

Inilah perubahan besar dalam siri ini. Data tidak lagi ditaip dalam kod. Kalau anda menambah baris keempat dalam phpMyAdmin dan memuat semula halaman, produk itu akan muncul tanpa anda mengubah kod.

Kenapa belum guna cfqueryparam

Dalam bab ini, query kita tidak menerima apa-apa input daripada pelawat. Ia sentiasa mengambil semua produk. Kerana itu tiada risiko suntikan SQL di sini.

Sebaik sahaja kita menerima carian atau borang daripada pelawat, setiap nilai mesti melalui <cfqueryparam>. Kita akan buat itu dalam bab carian dan bab borang. Jangan tangguhkan tabiat itu sehingga anda menulis query pertama yang menerima input. Kalau anda mahu memahami akibatnya sekarang, artikel suntikan SQL ini menunjukkan contoh sebenar.

Ralat lazim

"Access denied for user 'root'@'localhost'". Kata laluan dalam Application.cfc tidak sepadan dengan yang ditetapkan dalam MySQL. Kosongkan atau betulkan, kemudian simpan dan muat semula.

"Datasource [inventori] doesn't exist". Biasanya kunci type tertulis sebagai driver, atau fail Application.cfc bukan dalam folder projek. Semak kedua-duanya.

"Can't connect to MySQL server". MySQL belum berjalan. Klik ikon WampServer dan pastikan MySQL bertanda hijau.

Halaman memaparkan senarai kosong. Jadual wujud tetapi tiada baris. Jalankan semula arahan INSERT dalam phpMyAdmin.

Ikon WampServer jingga. Biasanya Apache tidak dapat menggunakan port 80 kerana aplikasi lain sedang menggunakannya. Untuk siri ini, MySQL yang penting, bukan Apache.

Apa yang anda sudah ada

Anda mempunyai pangkalan data sebenar, satu jadual, tiga baris data, dan halaman yang membacanya. Itu asas kepada setiap aplikasi yang menyimpan rekod.

Bab seterusnya mengemas halaman ini: menambah header dan footer yang dikongsi, memaparkan data dalam jadual HTML, dan menyediakan tempat untuk butang tambah produk. Kalau anda mahu melihat keseluruhan pelan sebelum meneruskan, bab pengenalan menyenaraikan semua 14 bab.

Soalan Lazim

Boleh saya menggunakan Laragon atau XAMPP dan bukan WampServer? Boleh. Apa yang penting ialah MySQL berjalan di port 3306 dengan pengguna root. Langkah phpMyAdmin hampir sama; XAMPP juga menyediakannya di localhost/phpmyadmin.

Adakah WampServer menggunakan MySQL atau MariaDB? Kebanyakan versi WampServer menyertakan kedua-duanya. Pilih MySQL untuk siri ini supaya arahan SQL sepadan. MariaDB juga berfungsi untuk bab ini, tetapi nama perkhidmatannya berbeza.

Perlukah saya biarkan WampServer berjalan sentiasa? Hanya semasa belajar. Ia menggunakan memori. Anda boleh hentikan dari ikon taskbar apabila tidak digunakan.

Kenapa harga tidak boleh guna FLOAT? Kerana nombor perpuluhan binari tidak dapat mewakili 0.10 dengan tepat. Untuk wang, gunakan DECIMAL, yang menyimpan nilai tepat.

Boleh saya ubah data melalui phpMyAdmin sahaja? Boleh, dan ia berguna semasa belajar. Tetapi aplikasi sebenar perlu menyediakan borang sendiri, kerana pengguna akhir tidak akan membuka phpMyAdmin.

Sumber

• Muat turun WampServer: wampserver.com/en/download-wampserver-64bits
• Dokumentasi Lucee untuk datasource: docs.lucee.org
• Rujukan cfquery: docs.lucee.org/reference/tags/query.html
• Rujukan cfqueryparam: docs.lucee.org/reference/tags/queryparam.html
• MySQL: jenis data DECIMAL: dev.mysql.com/doc/refman/8.4/en/fixed-point-types.html