Cara menggunakan Selenium IDE dengan Skrip & Perintah (Tegaskan, Sahkan)

Kami akan menggunakan laman web Mercury Tours sebagai aplikasi web kami yang sedang diuji. Ini adalah sistem tempahan penerbangan dalam talian yang mengandungi semua elemen yang kami perlukan untuk tutorial ini. URL-nya adalah http://demo.guru99.com/test/newtours/, dan ini akan menjadi URL Pangkalan kami.

Buat Skrip dengan Merakam

Mari kita buat skrip ujian pertama kita di Selenium IDE menggunakan kaedah yang paling biasa - dengan merakam. Selepas itu, kami akan melaksanakan skrip kami menggunakan ciri main balik.

Langkah 1

Lancarkan Firefox dan Selenium IDE.
Taipkan nilai untuk URL Pangkalan kami: http://demo.guru99.com/test/newtours/.
Hidupkan butang Rekod dihidupkan (jika belum diaktifkan secara lalai).

Langkah 2 Di Firefox, arahkan ke http://demo.guru99.com/test/newtours/. Firefox akan membawa anda ke halaman yang serupa dengan yang ditunjukkan di bawah.
Langkah 3 Klik kanan pada mana-mana ruang kosong di halaman, seperti pada logo Mercury Tours di sudut kiri atas. Ini akan memaparkan menu konteks Selenium IDE. Catatan: Jangan klik pada objek atau gambar yang berangkai Pilih pilihan "Tunjukkan Perintah Yang Ada". Kemudian, pilih "assertTitle tepat: Selamat Datang: Mercury Tours." Ini adalah arahan yang memastikan tajuk halaman betul.

Langkah 4 Dalam kotak teks "Nama Pengguna" Mercury Tours, ketik nama pengguna yang tidak sah, "tidak sahUNN". Dalam kotak teks "Kata Laluan", ketik kata laluan yang tidak sah, "tidak sahPWD".

Langkah 5 Klik pada butang "Log Masuk". Firefox harus membawa anda ke halaman ini.
Langkah 6 Togol butang rakam untuk berhenti merakam. Skrip anda kini kelihatan seperti yang ditunjukkan di bawah.
Langkah 7 Sekarang setelah kita selesai dengan skrip ujian kita, kita akan menyimpannya dalam kes ujian. Dalam menu Fail, pilih "Simpan Uji Kes". Sebagai alternatif, anda hanya boleh menekan Ctrl + S.
Langkah 8 Pilih lokasi yang anda inginkan, dan kemudian beri nama Test Case sebagai "Invalid_login". Klik butang "Simpan".
Langkah 9. Perhatikan bahawa fail tersebut disimpan sebagai HTML.

Langkah 10.

Kembali ke Selenium IDE dan klik butang Main semula untuk melaksanakan keseluruhan skrip. Selenium IDE harus dapat meniru semuanya dengan sempurna.

Pengenalan Perintah Selenium - Selenese

Perintah Selenese dapat memiliki maksimal dua parameter: target dan nilai.
Parameter tidak diperlukan sepanjang masa. Ia bergantung pada berapa banyak arahan yang diperlukan.

3 Jenis Perintah

Tindakan

Ini adalah arahan yang berinteraksi secara langsung dengan elemen halaman.

Contoh: perintah "klik" adalah tindakan kerana anda berinteraksi secara langsung dengan elemen yang anda klik.

Perintah "type" juga merupakan tindakan kerana anda memasukkan nilai ke dalam kotak teks, dan kotak teks menunjukkannya kepada anda sebagai balasan. Terdapat interaksi dua hala antara anda dan kotak teks.

Aksesori

Ini adalah perintah yang membolehkan anda menyimpan nilai ke pemboleh ubah.

Contoh: perintah "storeTitle" adalah aksesor kerana hanya "membaca" tajuk halaman dan menyimpannya dalam pemboleh ubah. Ia tidak berinteraksi dengan unsur apa pun di halaman.

Ketegasan

Mereka adalah perintah yang mengesahkan jika syarat tertentu dipenuhi.

3 Jenis Teguran

Tegaskan . Apabila arahan "menegaskan" gagal, ujian dihentikan serta-merta.
Sahkan . Apabila arahan "verifikasi" gagal, Selenium IDE mencatat kegagalan ini dan dilanjutkan dengan pelaksanaan ujian.
Tunggu . Sebelum meneruskan ke perintah seterusnya, perintah "waitFor" akan terlebih dahulu menunggu keadaan tertentu menjadi kenyataan.
- Sekiranya keadaan menjadi kenyataan dalam tempoh menunggu, langkahnya akan berlalu.
- Sekiranya keadaan tidak menjadi kenyataan, langkahnya gagal. Kegagalan dicatat, dan pelaksanaan ujian diteruskan ke perintah berikutnya.
- Secara lalai, nilai timeout ditetapkan pada 30 saat. Anda boleh mengubahnya dalam dialog Selenium IDE Options di bawah tab General.

Tegaskan vs Sahkan

Perintah Biasa

Perintah	Bilangan Parameter	Penerangan
buka	0 - 2	Membuka halaman menggunakan URL.
klik / klikAndWait	1	Klik pada elemen yang ditentukan.
type / typeKeys	2	Menaip urutan watak.
verifikasiTitle / assertTitle	1	Membandingkan tajuk halaman sebenar dengan nilai yang diharapkan.
mengesahkanTeksPresent	1	Memeriksa apakah teks tertentu dijumpai di dalam halaman.
sahkanElementPresent	1	Memeriksa kehadiran unsur tertentu.
mengesahkan Jadual	2	Membandingkan isi jadual dengan nilai yang diharapkan.
waitForPageToLoad	1	Menjeda pelaksanaan sehingga halaman dimuat sepenuhnya.
waitForElementPresent	1	Menjeda pelaksanaan sehingga elemen yang ditentukan menjadi wujud.

Buat Skrip Secara Manual dengan Firebug

Sekarang, kita akan membuat semula kes ujian yang sama secara manual, dengan memasukkan arahan. Kali ini, kita perlu menggunakan Firebug.

Langkah 1

Buka Firefox dan Selenium IDE.
Taipkan URL asas (http://demo.guru99.com/test/newtours/).
Butang rakaman harus MATI.

Langkah 2: Klik pada baris kosong paling atas di Editor.

Ketik "buka" di kotak teks Perintah dan tekan Enter.

Langkah 3

Navigasi Firefox ke URL asas kami dan aktifkan Firebug
Dalam panel Selenium IDE Editor, pilih baris kedua (baris di bawah perintah "buka") dan buat perintah kedua dengan menaip "assertTitle" pada kotak Perintah.
Jangan ragu untuk menggunakan ciri pelengkap automatik.

Langkah 4

Di Firebug, luaskan tag untuk memaparkan tag .</li> <li>Klik pada nilai tag <title> (iaitu "Welcome: Mercury Tours") dan tampalkannya ke medan Target di Editor.</li> </ul> </td> </tr> <tr> <td><strong>Langkah 5</strong> <ul> <li>Untuk membuat perintah ketiga, klik pada baris kosong ketiga di Editor dan masukkan "taip" pada kotak teks Perintah.</li> <li>Di Firebug, klik pada butang "Periksa".</li> </ul> </td> </tr> <tr> <td>Klik pada kotak teks Nama Pengguna. Perhatikan bahawa Firebug secara automatik menunjukkan kod HTML untuk elemen tersebut.</td> </tr> <tr> <td><strong>Langkah 6</strong> <p>Perhatikan bahawa kotak teks Nama Pengguna tidak mempunyai ID, tetapi mempunyai atribut NAMA. Oleh itu, kami akan menggunakan NAMA sebagai pencari. Salin nilai NAMA dan tampal ke medan Target di Selenium IDE.</p> <p>Masih dalam kotak teks Sasaran, awalan "userName" dengan "name =", menunjukkan Selenium IDE harus menargetkan elemen yang atribut NAME adalah "userName."</p> <p>Ketik "validUN" di kotak teks Nilai Selenium IDE. Skrip ujian anda sekarang harus seperti gambar di bawah. Kami selesai dengan perintah ketiga. Catatan: Daripada tidak sahUN, anda boleh memasukkan rentetan teks yang lain. Tetapi Selenium IDE peka huruf besar kecil, dan anda menaip nilai / atribut seperti dalam aplikasi.</p> </td> </tr> <tr> <td><strong>Langkah 7</strong> <ul> <li>Untuk membuat perintah keempat, masukkan "type" pada kotak teks Command.</li> <li>Sekali lagi, gunakan butang "Inspect" Firebug untuk mendapatkan pencari kotak teks "Kata Laluan".</li> </ul> <ul> <li> <p>Tampalkan atribut NAME ("kata laluan") ke medan Sasaran dan awalkannya dengan "name ="</p> </li> <li> <p>Taip "tidak sahPW" di medan Nilai di Selenium IDE. Skrip ujian anda sekarang harus seperti gambar di bawah.</p> </li> </ul> </td> </tr> <tr> <td><strong>Langkah 8</strong> <ul> <li>Untuk perintah kelima, ketik "clickAndWait" pada kotak teks Perintah di Selenium IDE.</li> <li>Gunakan butang "Periksa" Firebug untuk mendapatkan pencari butang "Log Masuk".</li> </ul> <ul> <li>Tampalkan nilai atribut NAME ("login") ke kotak teks Sasaran dan awalannya dengan "name =".</li> <li>Skrip ujian anda sekarang harus seperti gambar di bawah.</li> </ul> </td> </tr> </tbody> </table> <p><strong>Langkah 9:</strong> Simpan kes ujian dengan cara yang sama seperti yang kita lakukan di bahagian sebelumnya.</p> <a id="menu-6"></a> <h2>Menggunakan Butang Cari</h2> <p><strong>Butang Cari di Selenium IDE digunakan untuk mengesahkan jika apa yang kami masukkan ke dalam kotak teks Sasaran memang merupakan elemen UI yang betul.</strong></p> <p>Mari kita gunakan kes ujian Invalid_login yang kita buat di bahagian sebelumnya. Klik pada mana-mana arahan dengan entri Sasaran, katakan, perintah ketiga.</p> <p>Klik pada butang Cari. Perhatikan bahawa kotak teks Nama Pengguna dalam halaman Mercury Tours akan diserlahkan sebentar.</p> <p>Ini menunjukkan bahawa Selenium IDE dapat mengesan dan mengakses elemen yang diharapkan dengan betul. Sekiranya butang Cari menyoroti elemen yang berbeza atau tidak ada unsur sama sekali, maka pasti ada yang tidak kena dengan skrip anda.</p> <a id="menu-7"></a> <h2>Laksanakan Perintah</h2> <p><strong>Ini membolehkan anda melaksanakan satu perintah tanpa menjalankan keseluruhan kes ujian</strong> . Cukup klik pada baris yang ingin anda laksanakan dan kemudian klik "Tindakan> Jalankan perintah ini" dari bar menu atau tekan "X" pada papan kekunci anda.</p> <p><strong>Langkah 1.</strong> Pastikan penyemak imbas anda berada di laman utama Mercury Tours. Klik pada arahan yang ingin anda laksanakan. Dalam contoh ini, klik pada baris "type | userName | validUN".</p> <p><strong>Langkah 2.</strong> Tekan "X" pada papan kekunci anda.</p> <p><strong>Langkah 3.</strong> Perhatikan bahawa kotak teks untuk nama pengguna diisi dengan teks "tidak sahUN"</p> <p><strong>Melaksanakan perintah dengan cara ini sangat bergantung pada halaman yang sedang dipaparkan oleh Firefox</strong> . Ini bermaksud bahawa jika anda mencuba contoh di atas dengan halaman utama Google yang dipaparkan dan bukannya Mercury Tours ', langkah anda akan gagal kerana tidak ada kotak teks dengan atribut "userName" di laman utama Google.</p> <a id="menu-8"></a> <h2>Titik permulaan</h2> <p><strong>Titik permulaan adalah petunjuk yang memberitahu Selenium IDE garis mana pelaksanaan akan dimulakan</strong> . <strong>Kekunci pintasannya adalah "S".</strong></p> <p>Dalam contoh di atas, main balik akan bermula pada baris ketiga (taip | kata laluan | tidak sahPW). <strong>Anda hanya boleh mempunyai satu titik permulaan dalam satu skrip ujian.</strong></p> <p>Titik permulaannya mirip dengan Execute Command sehingga bergantung pada halaman yang sedang ditampilkan. Titik permulaan akan gagal jika anda berada di halaman yang salah.</p> <a id="menu-9"></a> <h2>Titik putus</h2> <p>Breakpoints adalah petunjuk yang memberitahu Selenium IDE di mana jeda ujian secara automatik. <strong>Kekunci pintasan adalah "B".</strong></p> <p>Sorotan kuning bermaksud bahawa langkah semasa belum selesai. Ini membuktikan bahawa Selenium IDE telah menghentikan pelaksanaan pada langkah tersebut. <strong>Anda boleh mempunyai beberapa titik putus dalam satu kes ujian.</strong></p> <a id="menu-10"></a> <h2>Langkah</h2> <p>Ini memungkinkan anda untuk melaksanakan perintah yang berjaya satu demi satu setelah menjeda kes ujian. Mari kita gunakan senario di bahagian sebelumnya "Breakpoints."</p> <table> <tbody> <tr> <td width="50%"> </td> <td> <p><strong>Sebelum mengklik "Langkah."</strong></p> <p>Kes ujian berhenti di baris "clickAndWait | login".</p> </td> </tr> <tr> <td width="50%"> </td> <td> <p><strong>Selepas mengklik "Langkah."</strong></p> <p>Baris "clickAndWait | login" dijalankan dan berhenti pada arahan seterusnya (verifikasiTitle | Log masuk: Mercury Tours).</p> <p>Perhatikan bahawa baris seterusnya dijeda walaupun tidak ada titik putus di sana. Ini adalah tujuan utama fitur Langkah - ia melaksanakan perintah yang berjaya satu demi satu untuk memberi anda lebih banyak masa untuk memeriksa hasilnya setelah setiap langkah.</p> </td> </tr> </tbody> </table> <a id="menu-11"></a> <h2>Perkara Penting Yang Perlu Diperhatikan Semasa Menggunakan Format Lain dalam Paparan Sumber</h2> <p><strong>Selenium IDE berfungsi dengan baik hanya dengan HTML - format lain masih dalam mod eksperimen</strong> . Ia adalah <strong>TIDAK dinasihatkan</strong> untuk membuat atau mengedit ujian menggunakan format lain di Source Lihat kerana masih banyak kerja yang diperlukan untuk membuat ia stabil. Berikut adalah pepijat yang diketahui pada versi 1.9.1.</p> <ul> <li>Anda tidak akan dapat melakukan main balik atau beralih kembali ke Jadual Lihat melainkan anda kembali ke HTML.</li> <li>Satu-satunya cara untuk menambahkan perintah dengan selamat pada kod sumber adalah dengan merekodkannya.</li> <li>Apabila anda mengubah kod sumber secara manual, semuanya akan hilang apabila anda beralih ke format lain.</li> <li>Walaupun anda dapat menyimpan kes ujian anda semasa di Source View, Selenium IDE tidak akan dapat membukanya.</li> </ul> <p><strong>Cara yang disyorkan untuk menukar ujian Selenese adalah dengan menggunakan pilihan "Export Test Case As…" di bawah menu File, dan bukan melalui Source View.</strong></p> <a id="menu-12"></a> <h2>Ringkasan</h2> <ul> <li>Skrip ujian boleh dibuat sama ada dengan merakam atau mengetik perintah dan parameter secara manual.</li> <li>Semasa membuat skrip secara manual, Firebug digunakan untuk mendapatkan pencari.</li> <li>Butang Cari digunakan untuk memeriksa bahawa perintah dapat mengakses elemen yang betul.</li> <li>Tampilan Jadual memaparkan skrip ujian dalam bentuk tabel sementara Tampilan Sumber memaparkannya dalam format HTML.</li> <li>Menukar Paparan Sumber ke format bukan HTML masih eksperimen.</li> <li>Jangan gunakan Paparan Sumber dalam membuat ujian dalam format lain. Sebagai gantinya, gunakan ciri Eksport.</li> <li>Parameter tidak diperlukan sepanjang masa. Itu bergantung pada perintah.</li> <li>Terdapat tiga jenis perintah:</li> <ul> <li>Tindakan - berinteraksi secara langsung dengan elemen halaman</li> <li>Aksesor - "membaca" harta elemen dan menyimpannya dalam pemboleh ubah</li> <li>Tegasan - membandingkan nilai sebenar dengan yang diharapkan</li> </ul> <li>Tegasan mempunyai tiga jenis:</li> <ul> <li>Tegaskan - apabila gagal, langkah-langkah yang berjaya tidak lagi dilaksanakan</li> <li>Sahkan - apabila gagal, langkah-langkah yang berjaya masih dilaksanakan.</li> <li>WaitFor - lulus jika keadaan yang ditentukan menjadi kenyataan dalam jangka masa tamat; jika tidak, ia akan gagal</li> </ul> <li>Perintah yang paling biasa adalah:</li> <ul> <li>buka</li> <li>klik / klikAndWait</li> <li>type / typeKeys</li> <li>verifikasiTitle / assertTitle</li> <li>mengesahkanTeksPresent</li> <li>sahkanElementPresent</li> <li>mengesahkan Jadual</li> <li>waitForPageToLoad</li> <li>waitForElementPresent</li> </ul> </ul> </div> </article> </div> </div> </div> </div> </div> <aside class="col-lg-4 sidebar sidebar--right"> <div class="widget widget-popular-posts"> <h2 class="widget-title">Jawatan Popular</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8223663-what-is-write-optimized-dso-in-sap-how-to-create-one" title="Apakah Tulis DSO yang Dioptimumkan dalam SAP? Bagaimana Membuat Satu?" rel="bookmark"><img src="https://cdn.css-code.org/9985253/what_is_write_optimized_dso_in_sap_how_to_create_one_.jpg.webp" loading="lazy" alt="Apakah Tulis DSO yang Dioptimumkan dalam SAP? Bagaimana Membuat Satu?" title="Apakah Tulis DSO yang Dioptimumkan dalam SAP? Bagaimana Membuat Satu?" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8223663-what-is-write-optimized-dso-in-sap-how-to-create-one" title="Apakah Tulis DSO yang Dioptimumkan dalam SAP? Bagaimana Membuat Satu?" rel="bookmark">Apakah Tulis DSO yang Dioptimumkan dalam SAP? Bagaimana Membuat Satu? 2025</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8223664-how-to-become-sap-consultant-skills-required-jobs-salary" title="Bagaimana untuk menjadi Perunding SAP? Kemahiran Diperlukan - Pekerjaan - Gaji" rel="bookmark"><img src="https://cdn.css-code.org/1296139/how_to_become_sap_consultant_skills_required_jobs_salary.png.webp" loading="lazy" alt="Bagaimana untuk menjadi Perunding SAP? Kemahiran Diperlukan - Pekerjaan - Gaji" title="Bagaimana untuk menjadi Perunding SAP? Kemahiran Diperlukan - Pekerjaan - Gaji" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8223664-how-to-become-sap-consultant-skills-required-jobs-salary" title="Bagaimana untuk menjadi Perunding SAP? Kemahiran Diperlukan - Pekerjaan - Gaji" rel="bookmark">Bagaimana untuk menjadi Perunding SAP? Kemahiran Diperlukan - Pekerjaan - Gaji 2025</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8223665-how-to-get-a-sap-certification-cost-eligibility-criteria-and-exam" title="Bagaimana cara mendapatkan Pensijilan SAP? Kos, Kriteria Kelayakan & Peperiksaan" rel="bookmark"><img src="https://cdn.css-code.org/8781325/how_to_get_a_sap_certification_cost-_eligibility_criteria_ampamp_exam.jpg.webp" loading="lazy" alt="Bagaimana cara mendapatkan Pensijilan SAP? Kos, Kriteria Kelayakan & Peperiksaan" title="Bagaimana cara mendapatkan Pensijilan SAP? Kos, Kriteria Kelayakan & Peperiksaan" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8223665-how-to-get-a-sap-certification-cost-eligibility-criteria-and-exam" title="Bagaimana cara mendapatkan Pensijilan SAP? Kos, Kriteria Kelayakan & Peperiksaan" rel="bookmark">Bagaimana cara mendapatkan Pensijilan SAP? Kos, Kriteria Kelayakan & Peperiksaan 2025</a></h3> </div> </div> </li> </ul> </div> <div class="widget widget-popular-posts"> <h2 class="widget-title">ulasan terbaik di bulan</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003109-enabled" title=": diaktifkan - Trik CSS" rel="bookmark">: diaktifkan - Trik CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003110-child" title="Anak - Trik CSS" rel="bookmark">Anak - Trik CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003111-empty" title=": kosong - Trik CSS" rel="bookmark">: kosong - Trik CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003112-first-letter" title=":: huruf pertama - Trik CSS" rel="bookmark">:: huruf pertama - Trik CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003113-first-child" title=": anak pertama - Trik CSS" rel="bookmark">: anak pertama - Trik CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003114-first-line" title=":: barisan pertama - Trik CSS" rel="bookmark">:: barisan pertama - Trik CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003115-hover" title=": arahkan - Trik CSS" rel="bookmark">: arahkan - Trik CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003116-first-of-type" title=": jenis pertama - Trik CSS" rel="bookmark">: jenis pertama - Trik CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003117-focus-within" title=": fokus-dalam - Trik CSS" rel="bookmark">: fokus-dalam - Trik CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003118-focus" title=": fokus - Trik CSS" rel="bookmark">: fokus - Trik CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003119-general-sibling" title="Saudara am - Trik CSS" rel="bookmark">Saudara am - Trik CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003120-invalid" title=": tidak sah - Trik CSS" rel="bookmark">: tidak sah - Trik CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003121-id" title="ID - Trik CSS" rel="bookmark">ID - Trik CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003122-is" title=": ialah () - Trik CSS" rel="bookmark">: ialah () - Trik CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003123-indeterminate" title=": tidak tentu - Trik CSS" rel="bookmark">: tidak tentu - Trik CSS</a></h3> </div> </div> </li> </ul> </div> <div class="widget widget-popular-posts"> <h2 class="widget-title">Artikel Top</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8224610-how-to-set-session-in-codeigniter-with-example" title="Cara Menetapkan Sesi dalam Codeigniter Dengan Contoh" rel="bookmark"><img src="https://cdn.css-code.org/2501134/how_to_set_session_in_codeigniter_with_example.png.webp" loading="lazy" alt="Cara Menetapkan Sesi dalam Codeigniter Dengan Contoh" title="Cara Menetapkan Sesi dalam Codeigniter Dengan Contoh" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8224610-how-to-set-session-in-codeigniter-with-example" title="Cara Menetapkan Sesi dalam Codeigniter Dengan Contoh" rel="bookmark">Cara Menetapkan Sesi dalam Codeigniter Dengan Contoh 2025</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8224611-how-to-upload-image-and-file-in-codeigniter-with-example" title="Cara Memuat Naik Gambar & Fail dalam CodeIgniter (dengan Contoh)" rel="bookmark"><img src="https://cdn.css-code.org/9357352/how_to_upload_image_ampamp_file_in_codeigniter_with_example.png.webp" loading="lazy" alt="Cara Memuat Naik Gambar & Fail dalam CodeIgniter (dengan Contoh)" title="Cara Memuat Naik Gambar & Fail dalam CodeIgniter (dengan Contoh)" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8224611-how-to-upload-image-and-file-in-codeigniter-with-example" title="Cara Memuat Naik Gambar & Fail dalam CodeIgniter (dengan Contoh)" rel="bookmark">Cara Memuat Naik Gambar & Fail dalam CodeIgniter (dengan Contoh) 2025</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8224612-pagination-in-codeigniter-with-step-by-step-example" title="Penomboran dalam Codeigniter dengan Contoh Langkah demi Langkah" rel="bookmark"><img src="https://cdn.css-code.org/3428837/pagination_in_codeigniter_with_step_by_step_example.png.webp" loading="lazy" alt="Penomboran dalam Codeigniter dengan Contoh Langkah demi Langkah" title="Penomboran dalam Codeigniter dengan Contoh Langkah demi Langkah" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8224612-pagination-in-codeigniter-with-step-by-step-example" title="Penomboran dalam Codeigniter dengan Contoh Langkah demi Langkah" rel="bookmark">Penomboran dalam Codeigniter dengan Contoh Langkah demi Langkah 2025</a></h3> </div> </div> </li> </ul> </div> </aside> </div> </div> <footer class="footer footer--dark"> <div class="container"> <div class="footer__widgets"> <div class="row"> <div class="col-lg-4"> <div class="widget"> <h2 class="widget-title">Jawatan Popular</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003666-html5-article-structure-with-hnews" title="Struktur Artikel HTML5 dengan hNews - Trik CSS" rel="bookmark">Struktur Artikel HTML5 dengan hNews - Trik CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003668-meta-refresh" title="Penyegaran Meta - Trik CSS" rel="bookmark">Penyegaran Meta - Trik CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003669-meta-tag-for-forcing-ie-8-to-behave-like-ie-7" title="Meta Tag Kerana Memaksa IE 8 Berkelakuan Seperti IE 7 - Trik CSS" rel="bookmark">Meta Tag Kerana Memaksa IE 8 Berkelakuan Seperti IE 7 - Trik CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003670-meta-tag-to-prevent-search-engine-bots" title="Tag Meta untuk Mencegah Bot Mesin Pencari - Trik CSS" rel="bookmark">Tag Meta untuk Mencegah Bot Mesin Pencari - Trik CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003671-meta-tags-for-instructing-search-bots" title="Meta Tag untuk Mengarahkan Bot Carian - Trik CSS" rel="bookmark">Meta Tag untuk Mengarahkan Bot Carian - Trik CSS</a></h3> </div> </div> </li> </ul> </div> </div> <div class="col-lg-4"> <div class="widget"> <h2 class="widget-title">Pilihan Editor</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003117-focus-within" title=": fokus-dalam - Trik CSS" rel="bookmark">: fokus-dalam - Trik CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003118-focus" title=": fokus - Trik CSS" rel="bookmark">: fokus - Trik CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003119-general-sibling" title="Saudara am - Trik CSS" rel="bookmark">Saudara am - Trik CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003120-invalid" title=": tidak sah - Trik CSS" rel="bookmark">: tidak sah - Trik CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003121-id" title="ID - Trik CSS" rel="bookmark">ID - Trik CSS</a></h3> </div> </div> </li> </ul> </div> </div> <div class="col-lg-4"> <div class="widget"> <h2 class="widget-title">Artikel Top</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8224627-dbms-joins-inner-left-outer-theta-types-of-join-operations" title="DBMS Bergabung: Bahagian Dalam, Kiri Luar, THETA Jenis Operasi Bergabung" rel="bookmark">DBMS Bergabung: Bahagian Dalam, Kiri Luar, THETA Jenis Operasi Bergabung</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8224630-file-system-vs-dbms-key-differences" title="Sistem Fail vs DBMS: Perbezaan Utama" rel="bookmark">Sistem Fail vs DBMS: Perbezaan Utama</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8224631-sql-vs-nosql-whats-the-difference-between-sql-and-nosql" title="SQL vs NoSQL: Apakah Perbezaan Antara SQL dan NoSQL" rel="bookmark">SQL vs NoSQL: Apakah Perbezaan Antara SQL dan NoSQL</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8224632-primary-key-vs-foreign-key-whats-the-difference" title="Kunci Utama vs Kunci Asing: Apakah Perbezaannya?" rel="bookmark">Kunci Utama vs Kunci Asing: Apakah Perbezaannya?</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8224633-clustered-vs-non-clustered-index-key-differences-with-example" title="Indeks Berkelompok vs Tidak Berkelompok: Perbezaan Utama dengan Contoh" rel="bookmark">Indeks Berkelompok vs Tidak Berkelompok: Perbezaan Utama dengan Contoh</a></h3> </div> </div> </li> </ul> </div> </div> </div> <p>© Copyright ms.css-code.org, 2025 Oktober | <a href="https://ms.css-code.org/about-site" title="Mengenai laman web">Mengenai laman web</a> | <a href="https://ms.css-code.org/contacts" title="Kenalan">Kenalan</a> | <a href="https://ms.css-code.org/privacy-policy" title="Dasar Privasi.">Dasar Privasi.</a>. </p> </div> </div> </footer> <link href="https://css-code.org/template/css/style.min.css" rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'" /> </body> </html>