Belajar CrootJS Hingga Mini Project Login & Register

 CrootJS hadir sebagai alternatif ringan berbasis JavaScript dengan pendekatan modular menggunakan ES Module

1. Apa itu CrootJS?

CrootJS adalah library modular berbasis JavaScript yang membantu developer membangun interaksi dinamis tanpa bergantung pada framework besar. menggunakan pendekatan ES Module, sehingga kita dapat mengimpor fungsi tertentu sesuai kebutuhan.

2. Menggunakan CrootJS via CDN

karena CrootJS berbasis ES Module, kita harus menggunakan: 

- HTML :


Contoh:


3. Mini Project: Login & Register

ikuti langkah-langkah berikut ini yaa

1. Buka github.com dan pastikan kamu sudah punya akun yaa jika belum kamu bisa membuat akun terlebih dahulu.

Alternatif lain jika tidak menggunakan github.com, kamu bisa menggunakan aplikasi Visual Studio Code (VSCode)

2. Setelah kamu berhasil masuk, kamu bisa membuat repository baru dengan klik "repository" di pojok kanan atas 

3. Setelah itu klik "New Repository" untuk membuat repository baru


4. Setelah berhasil membuat repositori baru, selanjutnya kalian membuat file baru dengan nama index.html (file utama sebuah website)


Beginilah kira kira tampilan isi file nya..


5. Selanjutnya kamu buka browser, dan cari "code html login page"

Jadi kita tidak perlu menulis sendiri kodenya dari awal, kita cukup copy saja code yang sudah tersedia, nahh kalau aku menggunakan login form dari sini

6. Pilih tampilan login page yang kamu suka 



7. Salin kode HTML

Salin code html yang disedian disana lalu tempelkan ke file github yang sudah kamu buat tadi, setelah itu jangan lupa klik "commit changes" setiap kaliap kamu selesai menulis atau mengedit file tersebut 


8. Buat file baru lagi namanya style.css

Lalu salin code style css di website tadi dan tempelkan di file style.css ini

9. download image yang disediakan disana

jangan lupa download gambarnya dan upload juga ke repository github kamu tadi, beginilah kira kira tampilannya

10. Selanjutnya buat lagi file baru namanya script.js

11. Membuat code untuk script.js

Disini kita bisa memanfaatkan teknologi AI untuk membuatnya, kita tinggal kirimkan 2 file (html dan css) yang sudah di buat tersebut ke ChatGPT dan kasih promp "disini aku lampirkan file html dan css, selanjutnya tolong buatkan file script.js nya", selanjutnya tinggal salin code nya dan tempelkan di file script.js yang sudah di buat tadi.


12 Langkah terakhir, buka laman https://croot.js.org/ lalu scroll ke bawah dan klik "Explore CDN Library"

13. klik "Files"


14. Salin code "Copy HTML" 




15. Lalu kembali ke file html mu dan tempelkan code tersebut di paling bawah seperti pada gambar dibawah ini


Tampilan akhir file nya seperti ini

16. Mendapatkan link github pages, pertama klik "settings"

17. klik "pages"

18. ubah "None" menjadi "main" lalu save


19. Kembali ke "code"

20. Klik "about"

21. Klik kotak tersebut sehingga menjadi ceklis biru seperti pada gambar, setelah itu klik "save and changes"

22. Tunggu beberapa saat, lalu akan muncul link github pages anda


Selamat anda telah berhasil membuat mini project login yang interaktif

Beginilah contoh yang sudah jadinya.. 

https://fauzan-ajaa.github.io/crootJS/









Komentar

Posting Komentar

Postingan populer dari blog ini

Belajar Web API Jadi Gampang: Contoh POST Sederhana pakai JScroot & webhook.cool

Gambar
💻 Belajar Web API Sederhana: Kirim Data dari Website dengan POST (JScroot + webhook.cool) Dalam dunia web development modern, hampir semua website yang kita gunakan tidak berdiri sendiri. Di balik tampilan yang kita lihat, ada proses komunikasi antara website (frontend) dan server (backend) yang terjadi terus-menerus. Komunikasi inilah yang disebut API. API (Application Programming Interface) bisa dipahami sebagai jembatan yang menghubungkan website dengan server. Ketika sebuah website ingin mengambil data atau mengirim data, dia tidak bisa melakukannya langsung ke database. Website harus “berbicara” melalui API. Cara berbicara ini biasanya menggunakan HTTP request, seperti GET untuk mengambil data dan POST untuk mengirim data. Kalau kita sederhanakan, GET itu seperti kita membaca informasi dari server, sedangkan POST adalah ketika kita mengirimkan sesuatu ke server, misalnya form, pesan, atau input dari user. Di tutorial ini kita akan fokus pada POST karena kita akan membuat website ...
Baca selengkapnya

TUTORIAL MENGGUNAKAN CROOTJS untuk LOGIN PAGE

Gambar
Di zaman yang serba canggih ini teknologi semakin berkembang, hampir semua orang fokus terhadap perkembangan teknologi hingga hari ini, hampir seluruh manusia pasti pernah merasakan kebermanfaatan perkembangan teknologi yang serba canggih pada zaman ini. Semua orang berlomba-lomba untuk menciptakan platform-platform digital demi bisa mempermudah pekerjaan manusia, salah satu platform nya yaitu C rootJS . CrootJS adalah library JavaScript ringan yang dirancang untuk memudahkan pembuatan website interaktif tanpa kerumitan framework besar seperti React atau Vue. Dengan konsep yang ringan dan berbasis Vanilla JavaScript, CrootJS memungkinkan developer mengelola event, manipulasi DOM, serta logika aplikasi. Kali ini kita akan bahas contoh penggunaan CrootJS untuk Login page. Ikuti langkah-langkah ini ya: 1. Pertama kamu bisa akses CrootJS di browser kesayangan kalian, cari pada menu search lalu ketik "croot js" atau kamu bisa klik link croot.js.org 2. Setelah itu kamu pilih websit...
Baca selengkapnya

membuat organisasi di github untuk projek ATsGengg

Gambar
 1. buka github.com dan login, jika belum mempunyai akun pilih create an account, jika sudah maka tampilan homepage awal nya akan muncul 2. tekan logo profile di ujung atas kanan dan pilih menu organizations 3. pilih new organizations, lalu pilih yang free dan  isi nama organisasi dengan nama yang kalian inginkan, dan ubah privasinya menjadi publik agar bisa diakses oleh siapapun 4. jika sudah pilih menu repositories dan pilih new repository, isi dengan nama yang diinginkan, contoh ATsAPI karena saya ingin membuat api untuk organisasi tersebut 5. klik logo + dan pilih create new file lalu isi nama filenya dengan index.html, untuk contoh seperti di dalam gambar 6. lalu buat file style.css untuk gaya tampilan dari index tersebut 7. setelah membuat file css nya, berikutnya buat file main.js untuk menghubungkan ke api yang kita pilih 8. pilih settings pada repository tersebut dan pilih menu pages lalu ubah branch menjadi main, agar kita mendapatkan link dari repository tersebut 9....
Baca selengkapnya