CFML pertama anda: tulis kod dalam pelayar

CFML pertama anda: tulis kod dalam pelayar

Dalam bab ini anda menulis kod pertama anda dan melihat hasilnya di skrin. Tiada pemasangan, tiada muat turun, tiada akaun. Anda hanya perlu pelayar.

Matlamat kita bukan memahami segala-galanya hari ini. Matlamatnya ialah melihat satu perkara penting: kod yang anda taip mengubah apa yang muncul di skrin. Selepas anda merasai itu, baki siri ini menjadi lebih mudah.

Sediakan tempat menulis kod

Kita akan menggunakan laman yang membolehkan kod CFML dijalankan terus dalam pelayar. Ia berguna untuk latihan kecil, dan ia menyelamatkan anda daripada memasang apa-apa sebelum anda tahu sama ada anda suka perkara ini. Kalau anda belum tahu apa itu CFML, artikel pengenalan ini menerangkannya dalam lima minit.

1. Buka pelayar dan pergi ke trycf.com.
2. Anda akan nampak satu kotak besar untuk menulis kod, dan butang untuk menjalankannya.
3. Padam apa-apa kod contoh yang ada, supaya kotak itu kosong.

Kalau laman itu tidak boleh dibuka atau meminta akaun di tempat anda, jangan berhenti. Langkau ke bab pemasangan dan kembali ke sini selepas itu. Kod yang sama berjalan di komputer anda.

Kod pertama: satu kotak, satu ayat

Taip kod di bawah ke dalam kotak itu, kemudian jalankan.

<cfset nama = "Aminah">
<cfoutput>Halo, #nama#!</cfoutput>

Anda sepatutnya melihat satu baris di skrin:

Halo, Aminah!

Mari kita bedah dua baris itu, kerana setiap bahagian akan berulang sepanjang siri ini.

<cfset ...> ialah arahan untuk menyimpan sesuatu. Ia tidak memaparkan apa-apa. Ia hanya meletakkan nilai ke dalam kotak yang kita namakan sendiri.

nama ialah nama kotak itu. Kita pilih nama itu; kita boleh menamakannya namaOrang atau x, tetapi nama yang jelas membantu kita seminggu kemudian. Dalam CFML, kotak begini dipanggil pemboleh ubah, dan ia hidup dalam skop tertentu yang diterangkan dalam panduan skop CFML.

= "Aminah" bermaksud isi kotak itu dengan teks Aminah. Tanda petikan menunjukkan bahawa ia teks, bukan arahan.

<cfoutput> ialah arahan untuk memaparkan sesuatu di skrin. Apa-apa di dalamnya akan dihantar kepada pelayar.

Tanda # memberitahu CFML: jangan cetak perkataan ini, cetak isi kotak yang namanya ini. Tanpa #, skrin akan menunjukkan perkataan nama, bukan Aminah.

Kotak yang boleh menyimpan nombor

Kotak yang sama boleh menyimpan nombor, dan nombor boleh dikira.

<cfset harga = 12.50>
<cfset kuantiti = 3>
<cfset jumlah = harga * kuantiti>
<cfoutput>Jumlah bayaran: RM#numberFormat(jumlah, "0.00")#</cfoutput>

Hasilnya:

Jumlah bayaran: RM37.50

Tiga perkara berlaku di sini. Kita menyimpan harga, kita menyimpan kuantiti, kemudian kita menyimpan hasil darab kedua-duanya ke dalam kotak baharu bernama jumlah.

numberFormat ialah fungsi kecil yang memastikan jawapan dipaparkan dengan dua tempat perpuluhan. Tanpa itu, 37.5 akan muncul dan kelihatan seperti harga yang salah.

Perhatikan bahawa kita tidak menulis RM di dalam kotak. Kita menulisnya dalam ayat, dan membiarkan CFML mengisi nombornya.

Buat keputusan dengan cfif

Sekarang kita mahu halaman itu bertindak berbeza mengikut keadaan. Contohnya, beri amaran apabila stok hampir habis.

<cfset stok = 2>
<cfif stok LTE 3>
    <cfoutput>Stok hampir habis. Tinggal #stok#.</cfoutput>
<cfelse>
    <cfoutput>Stok masih mencukupi.</cfoutput>
</cfif>

Hasilnya:

Stok hampir habis. Tinggal 2.

<cfif> membaca syarat. Kalau syarat itu benar, kod di dalamnya dijalankan. Kalau tidak, bahagian <cfelse> yang dijalankan.

LTE bermaksud "less than or equal", iaitu kurang daripada atau sama dengan. Ia ditulis dalam huruf besar supaya mudah dibaca. Anda juga akan jumpa GT untuk lebih besar, EQ untuk sama, dan NEQ untuk tidak sama.

Cuba tukar stok kepada 10 dan jalankan semula. Anda sepatutnya melihat ayat yang berbeza. Inilah kali pertama anda mengubah kod dan melihat halaman itu membuat keputusan sendiri.

Ulang sesuatu dengan cfloop

Kalau kita mempunyai senarai barang, kita tidak mahu menulis satu baris untuk setiap barang. Kita mahu satu arahan yang mengulang.

<cfset barang = "beras,kopi,gula">
<cfloop list="#barang#" index="satu">
    <cfoutput>#satu#<br></cfoutput>
</cfloop>

Hasilnya:

beras
kopi
gula

list memberitahu gelung itu bahawa kita memberinya senarai teks, dipisahkan dengan koma. index="satu" bermaksud: bagi setiap pusingan, letakkan barang semasa ke dalam kotak bernama satu.

<br> ialah arahan HTML untuk pindah baris. Ia bukan bahagian CFML; ia hanya supaya hasilnya tidak bercantum dalam satu baris.

Gelung ini akan menjadi asas kepada jadual produk dalam bab kelima nanti. Bezanya nanti, senarai itu datang daripada pangkalan data, bukan ditaip dalam kod.

Komen: nota untuk diri sendiri

Kadangkala kita mahu menulis nota yang tidak dijalankan. Ia berguna apabila kod itu rumit, atau apabila kita mahu mengingatkan diri sendiri mengapa ia ditulis begitu.

<!--- Ini nota. Ia tidak muncul di skrin. --->
<cfset nama = "Aminah">
<cfoutput>Halo, #nama#!</cfoutput>

Nota itu kekal dalam fail, tetapi pelayar tidak menerimanya. Gunakan ia untuk menerangkan sebab, bukan untuk mengulang apa yang kod sudah jelas katakan.

Tag dan fungsi: dua benda berbeza

Anda mungkin perasan dua bentuk berbeza dalam kod tadi. <cfset> dan <cfoutput> bermula dengan cf dan berbentuk tag. numberFormat(...) ialah fungsi, iaitu arahan yang menerima nilai dan memulangkan hasil.

Perbezaannya mudah: tag mengawal aliran halaman, manakala fungsi mengira sesuatu. Anda akan menggunakan kedua-duanya sepanjang siri ini, dan lama-kelamaan anda akan tahu bila hendak guna yang mana tanpa berfikir.

Fungsi boleh digabungkan. Contohnya numberFormat(harga * kuantiti, "0.00") mengira dahulu, kemudian memformat hasilnya. Apabila anda mulakan projek sebenar, anda akan menulis fungsi sendiri untuk kerja yang berulang. Cara membina fungsi dan komponen dijelaskan dalam panduan fungsi dan CFC, tetapi anda tidak perlu memahaminya hari ini.

Ralat pertama anda, dan mengapa ia bagus

Anda akan tersilap. Itu sebahagian daripada belajar, dan ia tanda anda benar-benar menaip sendiri, bukan menyalin.

Tiga kesilapan paling biasa dalam bab ini:

Tertinggal penutup tag. Kalau anda menulis <cfoutput> tanpa </cfoutput>, CFML akan mengadu. Setiap tag yang dibuka mesti ditutup, kecuali beberapa yang berdiri sendiri seperti <cfset>.

Tanda petikan tidak berpasangan. "Aminah tanpa penutup akan menyebabkan ralat. Perhatikan warna teks dalam editor; kebanyakan editor menukar warna apabila petikan ditutup dengan betul.

Tanda # di luar cfoutput. Menulis Halo, #nama#! tanpa <cfoutput> akan memaparkan tanda # sebagai teks biasa. Tanda itu hanya bermakna di dalam blok output.

Apabila ralat muncul, baca ayat pertama dengan tenang. CFML biasanya menyebut fail dan nombor baris. Pergi ke baris itu, dan lihat sama ada tag atau petikan anda lengkap.

Apa yang anda sudah tahu setakat ini

Anda kini boleh menyimpan nilai, mengira, membuat keputusan, mengulang senarai dan memaparkan hasil. Itu lima perkara yang membentuk hampir semua kod dalam siri ini.

Yang belum ada ialah tempat menyimpan data secara kekal. Setakat ini, semua nilai hilang apabila halaman ditutup. Bab keempat menyelesaikan masalah itu dengan pangkalan data.

Soalan Lazim

Adakah kod ini akan berjalan pada Lucee di komputer saya? Ya. Kod dalam bab ini menggunakan tag asas CFML yang berjalan pada Lucee 7 dan juga Adobe ColdFusion.

Kenapa hasil saya berbeza sedikit, contohnya tiada baris baharu? Mungkin anda terlupa <br> dalam contoh gelung. Itu bukan kerana kod anda salah; ia hanya cara HTML memaparkan teks.

Boleh saya simpan kod ini untuk kemudian? Boleh. Salin ke Notepad atau mana-mana editor teks, dan simpan dengan nama berakhir .cfm. Anda akan menggunakannya dalam bab seterusnya.

Adakah saya perlu menghafal tag ini? Tidak. Anda akan menaipnya berulang kali dalam bab berikutnya, dan ia akan melekat dengan sendiri. Yang penting ialah faham apa yang setiap satu lakukan.

Kalau saya tersilap dan halaman menjadi kosong, apa yang perlu saya buat? Kosongkan kotak dan tampal semula contoh dari artikel ini. Kemudian ubah satu perkara sahaja, dan jalankan semula. Perubahan kecil lebih mudah dikesan daripada perubahan besar.

Bab seterusnya membawa anda keluar dari pelayar: memasang Lucee di komputer sendiri, supaya anda boleh menyimpan fail dan terus bekerja walaupun tanpa internet.

Sumber

• Rujukan tag cfset: docs.lucee.org/reference/tags/set.html
• Rujukan tag cfoutput: docs.lucee.org/reference/tags/output.html
• Rujukan tag cfif: docs.lucee.org/reference/tags/if.html
• Rujukan tag cfloop: docs.lucee.org/reference/tags/loop.html
• Laman latihan dalam pelayar: trycf.com