Header, footer dan jadual HTML yang kemas

Header, footer dan jadual HTML yang kemas

Halaman anda sekarang berfungsi, tetapi ia kelihatan seperti senarai tanpa bentuk. Kalau anda belum menyambungkan pangkalan data, mulakan dengan bab pangkalan data. Ia juga akan menjadi masalah apabila anda menambah halaman kedua, kerana header dan footer perlu ditulis semula.

Bab ini menyelesaikan dua perkara itu: satu tempat untuk bahagian yang berulang, dan satu jadual yang mudah dibaca.

Kenapa kita perlukan include

Bayangkan anda mempunyai lima halaman: senarai produk, tambah produk, ubah produk, stok dan laporan. Setiap satu memerlukan tajuk yang sama, menu yang sama dan footer yang sama.

Kalau anda menyalin bahagian itu ke setiap fail, satu perubahan kecil pada menu bermakna lima fail perlu diedit. Lama-kelamaan, satu daripada lima itu akan tertinggal, dan laman anda menjadi tidak konsisten.

<cfinclude> menyelesaikan masalah itu. Ia memberitahu Lucee supaya mengambil kandungan fail lain dan meletakkannya di tempat itu, seolah-olah anda menyalinnya sendiri.

Kenapa struktur ini penting kemudian

Apabila projek ini membesar, anda akan menambah halaman tambah produk, halaman ubah, halaman stok dan halaman laporan. Setiap satu memerlukan tajuk, menu dan footer yang sama.

Dengan include, anda mengubah satu fail dan semua halaman mengikutinya. Tanpanya, setiap halaman menyimpan salinan sendiri, dan salinan itu akan berbeza sedikit demi sedikit sehingga tiada siapa tahu versi mana yang betul.

Prinsip ini dipanggil "jangan ulang diri sendiri", dan ia bukan tentang kekemasan semata-mata. Apabila satu pepijat ditemui dalam header, anda membaikinya sekali sahaja, bukan lima kali. Apabila satu pautan menu berubah, semua halaman mengikut.

Anda tidak perlu memahami istilah itu untuk menggunakannya. Cukup ingat satu soalan: adakah bahagian ini akan muncul di lebih daripada satu halaman? Kalau ya, jadikan ia include.

Cipta folder includes

Di dalam C:\inventori, cipta satu folder bernama includes. Kita akan letak dua fail di dalamnya.

Fail pertama, includes/atas.cfm, mengandungi semua yang muncul sebelum kandungan utama:

<!doctype html>
<html lang="ms">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Inventori Mini</title>
    <style>
        body { font-family: system-ui, sans-serif; margin: 0; background: #f8fafc; color: #0f172a; }
        .kepala { background: #0f172a; color: #e2e8f0; padding: 22px 20px; }
        .kepala h1 { margin: 0; font-size: 1.35rem; }
        .kepala p { margin: 4px 0 0; color: #94a3b8; font-size: 0.9rem; }
        .bekas { max-width: 760px; margin: 26px auto; padding: 0 20px; }
        table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 10px; overflow: hidden; }
        th, td { padding: 11px 14px; text-align: left; border-bottom: 1px solid #e2e8f0; }
        th { background: #eef2f6; font-size: 0.85rem; text-transform: uppercase; letter-spacing: .04em; color: #475569; }
        td.nombor { text-align: right; font-variant-numeric: tabular-nums; }
        .kaki { max-width: 760px; margin: 30px auto; padding: 0 20px 30px; color: #64748b; font-size: 0.85rem; }
    </style>
</head>
<body>
<header class="kepala">
    <h1>Inventori Mini</h1>
    <p>Kedai Pak Ali</p>
</header>
<main class="bekas">

Fail kedua, includes/bawah.cfm, menutup apa yang dibuka:

</main>
<footer class="kaki">
    <p>Dibina dengan Lucee 7.</p>
</footer>
</body>
</html>

Perhatikan bahawa fail pertama membuka <body> dan <main>, manakala fail kedua menutupnya. Corak ini sama seperti gelung dalam bab nilai dan keputusan: satu pembuka, satu penutup, dan kandungan di tengah. Ini helah yang berguna: kandungan di tengah boleh berubah, tetapi pembalut di sekelilingnya kekal sama.

Gunakan include dalam index.cfm

Sekarang gantikan index.cfm anda dengan versi ini. Perhatikan dua baris <cfinclude> di bahagian atas dan bawah.

<cfinclude template="includes/atas.cfm">

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

<table>
    <thead>
        <tr>
            <th scope="col">SKU</th>
            <th scope="col">Nama</th>
            <th scope="col">Harga</th>
            <th scope="col">Stok</th>
        </tr>
    </thead>
    <tbody>
        <cfoutput>
        <cfloop query="senaraiProduk">
            <tr>
                <td>#sku#</td>
                <td>#nama#</td>
                <td class="nombor">RM#numberFormat(harga, "0.00")#</td>
                <td class="nombor">#stok#</td>
            </tr>
        </cfloop>
        </cfoutput>
    </tbody>
</table>

<cfinclude template="includes/bawah.cfm">

Hasil sebenar pada rig ujian kami: header dan footer datang daripada dua fail include.

Muat semula pelayar. Anda sepatutnya melihat tajuk gelap di atas, jadual putih dengan empat lajur, dan footer kecil di bawah.

Memahami jadual HTML

Jadual ialah satu-satunya cara yang betul untuk memaparkan data berbaris dan berlajur. Kalau HTML masih baru bagi anda, artikel pengenalan Lucee menerangkan bagaimana CFML dan HTML bekerjasama. Kalau anda menggunakan <div> untuk data jadual, pembaca skrin tidak dapat memahami hubungan antara harga dan produk.

<cfoutput> diletakkan di luar <cfloop> dalam contoh ini. Itu bermakna semua tanda # di dalamnya akan diproses. Kalau anda meletakkannya di dalam <cfloop> sahaja, ia juga berfungsi, tetapi meletakkannya di luar lebih mudah dibaca apabila gelung itu panjang.

Satu lagi butiran kecil: gunakan <th scope="col"> pada sel tajuk. Ia memberitahu pembaca skrin bahawa sel itu menerangkan lajur di bawahnya, bukan baris di sebelahnya. Anda tidak akan nampak bezanya di skrin, tetapi pengguna pembaca skrin akan merasainya.

Perhatikan kelas nombor pada sel harga dan stok. Ia menjajarkan angka ke kanan, supaya senarai harga mudah dibandingkan secara menegak. Ini perkara kecil yang membezakan jadual yang kemas daripada jadual yang hanya berfungsi.

Mengapa harga tidak dijajarkan ke kiri

Cuba lihat senarai harga yang dijajarkan ke kiri: RM8.50, RM120.00, RM9.00. Mata anda perlu melompat untuk membandingkan nilainya.

Apabila dijajarkan ke kanan, digit terakhir bertemu pada garis yang sama, dan perbandingan menjadi serta-merta. Ini amalan biasa dalam laporan kewangan, dan ia mudah dilakukan dengan satu baris CSS.

Ralat lazim

"File not found: includes/atas.cfm". Laluan dalam cfinclude dikira dari fail yang sedang dijalankan, bukan dari akar pelayan. Kalau index.cfm berada di C:\inventori, maka includes/atas.cfm bermaksud C:\inventori\includes\atas.cfm.

Jadual muncul tanpa tajuk. Anda mungkin terlupa <thead> atau menulis <td> dan bukannya <th> pada baris pertama.

Tanda # muncul sebagai teks. <cfoutput> tidak membalut kawasan itu, atau ia ditutup terlalu awal.

Halaman bertindih atau terpotong. Biasanya tag pembuka dan penutup tidak seimbang antara dua fail include. Kira semula <div>, <main> dan <body>.

Include berfungsi, tetapi perubahan tidak muncul. Pastikan anda menyimpan fail yang betul. Apabila menggunakan include, halaman yang dipanggil mungkin tidak berubah, tetapi fail di dalam includes yang berubah.

Apa yang anda sudah ada

Anda mempunyai susun atur yang dikongsi, jadual yang boleh dibaca, dan struktur fail yang boleh berkembang. Bab seterusnya menambah borang, supaya anda boleh memasukkan produk baharu dari laman sendiri tanpa membuka phpMyAdmin. Borang itu akan menggunakan semula susun atur yang anda baru bina, jadi kerja hari ini akan berbayar serta-merta.

Inilah titik di mana projek berhenti menjadi latihan dan mula menjadi alat yang boleh digunakan. Kalau anda mahu melihat semula keseluruhan pelan, bab pengenalan menyenaraikan semua 14 bab.

Soalan Lazim

Boleh saya mempunyai lebih daripada dua include? Boleh, dan anda akan menambahnya kemudian. Contoh biasa ialah includes/menu.cfm dan includes/semakan-login.cfm.

Adakah cfinclude memerlukan sambungan .cfm? Fail itu boleh bernama apa sahaja, tetapi menggunakan .cfm mengelakkan fail itu dimuat turun secara langsung oleh pelawat.

Kenapa tidak guna CSS framework sahaja? Boleh, tetapi untuk pemula, menulis dua puluh baris CSS sendiri lebih mudah difahami daripada mempelajari kelas framework. Anda boleh bertukar kemudian tanpa mengubah struktur jadual.

Adakah jadual ini berfungsi pada telefon? Ia mengecil mengikut lebar skrin, tetapi lajur yang banyak akan menjadi sempit. Untuk data yang banyak, corak lain diperlukan, dan kita akan bincangkan dalam bab laporan.

Boleh saya letak query di dalam include? Boleh secara teknikal, tetapi elakkan. Include sepatutnya mengandungi paparan, bukan logik pangkalan data. Simpan query dalam halaman utama supaya mudah dicari.

Sumber

• Rujukan cfinclude: docs.lucee.org/reference/tags/include.html
• Elemen jadual HTML: developer.mozilla.org/en-US/docs/Web/HTML/Element/table
• Aksesibiliti jadual: developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Advanced
• Rujukan cfoutput: docs.lucee.org/reference/tags/output.html