CRUD dengan CFML menggunakan teg asas: tutorial untuk pemula

Kalau awak baru bermula dengan CFML, ini tutorial yang betul untuk mula. Kita bina satu aplikasi senarai ringkas dengan EMPAT operasi asas, menggunakan TEG CFML sahaja. Tiada rangka kerja, tiada pakej tambahan, tiada sintaks lanjutan. Hanya teg yang sama yang awak akan jumpa dalam sistem CFML sebenar.

Empat operasi itu ialah baca, tambah, kemas dan padam. Kita akan belajar satu demi satu, dan setiap satu akan kita uji sebelum meneruskan. Ini penting kerana cara belajar yang paling cepat menyerah ialah menulis seratus baris kod dan baru mahu mengujinya pada akhirnya.

Aplikasi yang dibina di sini benar-benar berjalan, dan boleh dicuba terus di https://thalhah.my/demo/crud sebelum awak menulis satu baris pun.

Faham dahulu: apa itu CRUD

CRUD ialah singkatan empat perkara yang hampir setiap sistem lakukan terhadap data, iaitu Create, Read, Update dan Delete. Sistem tempahan, sistem inventori dan sistem keahlian semuanya melakukan empat benda yang sama, cuma pada jadual data yang berbeza.

• ▸ Create (tambah) menerima data baharu daripada borang, kemudian menyimpannya.
• ▸ Read (baca) mengambil data daripada pangkalan data dan memaparkannya pada halaman.
• ▸ Update (kemas) mengubah data yang sudah ada, contohnya membetulkan ejaan nama.
• ▸ Delete (padam) membuang satu baris yang tidak lagi diperlukan.

Sebab itu CRUD ialah latihan pertama yang berbaloi dalam mana-mana bahasa. Ia cukup kecil untuk difahami sepenuhnya, dan cukup lengkap untuk mengajar perkara yang sama yang akan awak gunakan pada projek besar.

Empat teg yang akan kita gunakan sepanjang tutorial ini

CFML menggunakan teg, iaitu arahan yang ditulis dalam bentuk seperti HTML. Kalau awak tahu HTML, bentuk ini sudah biasa dengan mata awak. Empat teg di bawah ini sudah mencukupi untuk membina aplikasi lengkap.

• ▸ cfquery menjalankan arahan SQL terhadap pangkalan data.
• ▸ cfqueryparam menyelitkan nilai dengan cara yang selamat. Kita akan bincangkan sebabnya pada bahagian seterusnya.
• ▸ cfif membuat keputusan, sama seperti if dalam bahasa lain.
• ▸ cfloop mengulangi sesuatu, dalam kes kita mengulangi setiap baris data untuk dipaparkan.

Nama teg tidak sensitif pada huruf besar atau kecil. cfquery, CFQUERY dan CfQuery semuanya teg yang sama. Dalam tutorial ini kita tulis dengan huruf kecil supaya senang dibaca.

Langkah satu: sediakan jadual

Kita mula dengan jadual kerana aplikasi tanpa tempat menyimpan data hanyalah borang yang tidak berguna. Jadual ini ada dua medan yang boleh diisi, dan satu medan id yang dicipta sendiri oleh pangkalan data.

CREATE TABLE demo_crud (
  id      INT AUTO_INCREMENT PRIMARY KEY,
  nama    VARCHAR(60)  NOT NULL,
  nota    VARCHAR(140) NOT NULL,
  dicipta DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

Medan id itu yang paling penting, dan ia satu-satunya cara kita menandakan baris tertentu kemudian. Apabila kita mahu memadam satu baris, kita tidak memberitahu pangkalan data nama baris itu. Kita memberitahunya nombor id.

Langkah dua: baca data (Read)

Kita mula dengan operasi baca kerana ia tidak mengubah apa-apa. Kalau kita tersilap, tiada data rosak. Cara selamat belajar ialah mula dengan bahagian yang tidak boleh memusnahkan apa-apa.

<cfquery name="qSenarai" datasource="biz">
    SELECT id, nama, nota, dicipta
    FROM demo_crud
    ORDER BY dicipta DESC
</cfquery>

Tiga bahagian dalam teg ini perlu difahami. Atribut name memberi nama kepada hasil pertanyaan itu, supaya kita boleh menggunakannya kemudian. Atribut datasource memberitahu Lucee pangkalan data mana yang hendak ditanya, dan nama itu ialah nama sambungan yang awak daftarkan dalam panel pentadbir Lucee. Bahagian dalam teg pula ialah arahan SQL sebenar.

Untuk memaparkan hasilnya, kita ulangi setiap baris menggunakan cfloop di dalam blok cfoutput.

<cfoutput>
<cfloop query="qSenarai">
    #qSenarai.nama# - #qSenarai.nota#<br>
</cfloop>
</cfoutput>

Baris qSenarai.nama bermaksud ambil medan nama daripada baris semasa. Apabila cfloop selesai, setiap baris dalam jadual sudah dipaparkan mengikut urutan yang kita minta.

Langkah tiga: borang, dan bagaimana ia "diproses"

Sebelum kita boleh menyimpan apa-apa, kita perlukan borang. Bahagian ini sering mengelirukan pemula, jadi mari kita jelaskan aliran data dari awal hingga akhir.

<form method="post" action="/demo/crud">
    <input type="hidden" name="tindakan" value="tambah">
    <label for="nama">Nama</label>
    <input type="text" id="nama" name="nama">
    <label for="nota">Nota</label>
    <input type="text" id="nota" name="nota">
    <button type="submit">Tambah</button>
</form>

Apabila pengguna menekan butang, pelayar menghantar nama dan nilai setiap medan ke halaman yang dinyatakan dalam atribut action. Di dalam CFML, nilai-nilai itu boleh dibaca sebagai form.nama dan form.nota apabila permintaan itu berbentuk POST.

• ▸ method="post" bermakna data dihantar dalam badan permintaan, bukan pada alamat. Ia sesuai untuk apa-apa yang mengubah data.
• ▸ name="nama" menentukan nama yang akan digunakan oleh CFML untuk membaca nilai itu, iaitu form.nama.
• ▸ Medan tersembunyi tindakan memberitahu halaman itu apa yang pengguna mahu lakukan. Inilah cara satu halaman mengendalikan empat operasi berbeza.
• ▸ attribute id pula untuk label dan gaya paparan, bukan untuk menghantar data. Pemula selalu mencampurkan kedua-duanya.

Bahagian "proses" itu sebenarnya mudah sahaja. Pada awal fail, kita periksa sama ada permintaan ini permintaan POST, kemudian lihat nilai tindakan, dan jalankan arahan pangkalan data yang berpadanan.

<cfif cgi.request_method eq "POST">
    <cfif form.tindakan eq "padam">
        <!--- arahan padam --->
    <cfelseif form.tindakan eq "kemas">
        <!--- arahan kemas --->
    <cfelse>
        <!--- arahan tambah --->
    </cfif>
</cfif>

Struktur ini berulang dalam hampir setiap aplikasi CFML yang akan awak jumpa. Periksa permintaan, tentukan tindakan, kemudian jalankan arahan. Kalau awak faham tiga baris ini, awak sudah faham cara hampir semua borang di web berfungsi.

Langkah empat: tambah data (Create)

Sekarang kita boleh menulis bahagian simpan. Perhatikan dua perkara dalam kod di bawah, iaitu cara nilai dimasukkan, dan cara pengesahan berlaku sebelum arahan itu dijalankan.

<cfset nama = trim( form.nama )>
<cfset nota = trim( form.nota )>

<cfif len( nama ) lt 2 or len( nota ) lt 1>
    <cfset mesej = "Nama dan nota tidak boleh kosong.">
<cfelse>
    <cfquery datasource="biz">
        INSERT INTO demo_crud ( nama, nota )
        VALUES (
            <cfqueryparam value="#nama#" cfsqltype="cf_sql_varchar" maxlength="60">,
            <cfqueryparam value="#nota#" cfsqltype="cf_sql_varchar" maxlength="140">
        )
    </cfquery>
</cfif>

Fungsi trim membuang ruang kosong di hadapan dan di belakang, kerana pengguna selalu tersalah taip ruang tanpa menyedarinya. Pemeriksaan panjang pula berlaku dahulu, dan hanya kalau ia lulus barulah arahan simpan dijalankan. Susunan inilah yang betul. Sahkan dahulu, simpan kemudian.

Langkah lima: padam data (Delete)

Padam ialah operasi yang paling pendek, tetapi paling berbahaya kalau tersilap. Ia hanya perlukan satu perkara, iaitu baris mana yang ingin dibuang.

<cfquery datasource="biz">
    DELETE FROM demo_crud
    WHERE id = <cfqueryparam value="#val( form.id )#" cfsqltype="cf_sql_integer">
</cfquery>

Fungsi val memastikan nilai id itu nombor bulat. Kalau seseorang menghantar teks dan bukan nombor, val akan menjadikannya nombor atau kosong, dan arahan itu tidak akan melakukan apa-apa yang tidak dijangka.

Langkah enam: kemas data (Update)

Operasi kemas ialah yang paling banyak langkahnya, kerana pengguna perlu melihat data lama dahulu, mengubahnya, kemudian menyimpan. Kita bahagikan kepada dua bahagian.

Bahagian pertama berlaku apabila pengguna menekan pautan Kemas pada satu baris. Pautan itu membawa nombor id pada alamat, dan halaman mengambil baris itu untuk diletakkan ke dalam borang.

<cfquery name="qSatu" datasource="biz">
    SELECT nama, nota FROM demo_crud
    WHERE id = <cfqueryparam value="#val( url.id )#" cfsqltype="cf_sql_integer">
</cfquery>

<cfset nama = qSatu.nama>
<cfset nota = qSatu.nota>

Bahagian kedua berlaku apabila borang itu dihantar semula. Kali ini kita mengemas kini baris yang sama, dan bahagian WHERE itulah yang menentukan baris mana.

<cfquery datasource="biz">
    UPDATE demo_crud SET
        nama = <cfqueryparam value="#nama#" cfsqltype="cf_sql_varchar" maxlength="60">,
        nota = <cfqueryparam value="#nota#" cfsqltype="cf_sql_varchar" maxlength="140">
    WHERE id = <cfqueryparam value="#val( form.id )#" cfsqltype="cf_sql_integer">
</cfquery>

Satu tabiat kecil yang menyelamatkan banyak masalah

Selepas mana-mana arahan yang mengubah data, saya syorkan supaya halaman itu melencong ke halaman lain menggunakan cflocation, kemudian memaparkan mesej daripada alamat itu.

<cflocation url="/demo/crud?ok=tambah" addtoken="no">

<!--- kemudian, pada bahagian atas halaman --->
<cfset okMesej = url.ok ?: "">
<cfif okMesej eq "tambah"><cfset mesej = "Baris baharu telah ditambah."></cfif>

Kenapa perlu susah-susah. Kerana tanpa langkah ini, pengguna yang menekan butang muat semula selepas menambah data akan menambah baris yang sama sekali lagi. Ia dipanggil penghantaran berulang, dan ia berlaku pada waktu yang paling menyusahkan, iaitu apabila seseorang menyangka sesuatu gagal sedangkan ia berjaya.

Perhatikan juga baris pertama dalam contoh kedua itu, dan cara ia ditulis dalam dua langkah. Ada sebab untuk itu, dan sebabnya ada dalam bahagian seterusnya.

Tiga perkara yang saya uji, dan hasilnya

Tiga perkara di bawah ini bukan petua daripada internet. Saya menjalankannya pada pelayan ini semasa menyiapkan tutorial, dan hasilnya kadang-kadang bukan seperti yang saya jangkakan.

• ▸ Tanda # hanya dikira di dalam cfoutput atau di dalam atribut teg. Di luar itu, ia dipaparkan sebagai teks biasa. Halaman awak akan kelihatan seperti kod yang rosak kalau awak tersalah letak.
• ▸ Operator ?: tidak boleh diletakkan terus di dalam syarat cfif. Bentuk seperti cfif url.ok ?: "" eq "tambah" menghasilkan ralat pelayan 500 dalam Lucee. Ambil nilai itu ke dalam pemboleh ubah dahulu, kemudian bandingkan.
• ▸ cfqueryparam yang melebihi had maxlength menghasilkan ralat pelayan 500, bukan mesej yang mesra. Sebab itu panjang input mesti disemak dahulu, supaya pengguna melihat mesej yang jelas dan bukannya halaman ralat.

Dua daripada tiga perkara itu ialah ralat pelayan yang sebenar, dan kedua-duanya berlaku pada halaman contoh ini sebelum saya membaikinya. Sebab itu saya tulis di sini. Tutorial yang mengajar hanya laluan yang berjaya akan meninggalkan awak bingung pada kali pertama sesuatu yang gagal.

Kenapa cfqueryparam, dan bukan cantum teks

Perhatikan bahawa setiap nilai daripada borang dimasukkan menggunakan cfqueryparam dan bukan dicantumkan terus ke dalam pertanyaan. Perbezaannya bukan soal gaya penulisan.

Bayangkan seseorang menaip nama seperti ini pada borang awak, iaitu perkataan yang diikuti dengan tanda petikan dan arahan SQL yang lengkap. Sistem yang mencantum teks akan menganggap arahan tambahan itu sebagai sebahagian daripada pertanyaannya, dan ia akan menjalankannya. Pengguna itu baru sahaja menghantar arahan kepada pangkalan data awak, bukan data.

cfqueryparam menutup pintu itu kerana nilai dihantar berasingan daripada arahan. Pangkalan data menerima arahan yang sudah siap, dan hanya kemudian menerima nilai untuk diisi ke dalamnya. Cara ini juga mengendalikan tanda petikan dalam nama yang sah seperti nama dengan apostrof, yang sebelum ini menyebabkan sistem lama gagal.

Cuba sendiri

Halaman contoh di https://thalhah.my/demo/crud berjalan pada pelayan ini menggunakan kod yang sama seperti dalam tutorial ini. Awak boleh mencuba tambah, kemas dan padam di situ sebelum menjalankannya pada komputer sendiri. Data demo dikosongkan sendiri setiap 30 minit, jadi tiada apa yang rosak kalau awak mencuba sesuatu yang tidak sepatutnya.

Apabila awak sudah mencuba, susunan belajar yang saya syorkan ialah salin fail itu ke pelayan awak sendiri, tukar nama jadualnya, dan ubah satu perkara kecil, contohnya menambah satu medan baharu. Perubahan kecil yang berjaya lebih berguna daripada projek baharu yang tidak pernah siap.