TUTORIAL MENGGUNAKAN CROOTJS untuk LOGIN PAGE

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 CrootJS.


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 website yang bertuliskan croot.js.org

3. Setelah kamu klik, kamu akan dibawa menuju tampilan awal website crootJS, cari menu "Get Started" untuk memulainya
4. Kamu akan dibawa pada tampilan document pada crootJS, disitu banyak pilihan menu untuk membantu pekerjaan kamu, untuk mencari menu login kamu perlu scroll kebawah dan cari menu "Login Menggunakan WhatsAuth". Disitu ada kode HTML yang telah siap digunakan

5. Lalu kamu salin kode HTML tersebut dan bawa ke github




6. Di github pastiin kamu sudah memiliki akun ya, jika sudah buat repositroy baru untuk menyimpan file projek nya, letak nya ada di atas kanan


7. Setelah itu kamu buat new repository, beri nama projek kamu dan setting untuk dipublikasi atau tidak.


8. Didalam repository buat file lagi, ada menu untuk tambah file lalu klik, beri nama file tersebut "index.html"




9. Setelah buat file, klik file tersebut untuk edit, lalu kamu bisa tempel kode yang dari crootJS ke dalam file index.html. Jangan lupa untuk commit setelah mengubah data apapun, commit ada di kanan atas







10. Terakhir kamu balik lagi ke crootjs, lalu salin kode main nya




11. Setelah salin, bawa kode tersebut ke github dan buat lagi file main.js di github, lalu paste disana




12. Hampir selesai kamu tinggal upload kode-kode ini menjadi page atau tampilan di website, caranya:
- kamu pergi ke pengaturan repository, kembali ke tampilan awal repository kamu, ada setting di atas, lalu klik.
- setelah di klik kamu cari menu "change repository visibility" di setting general, lalu klik change visibility -> ubah ke publik


13. Setelah menjadi publik, kamu pergi ke menu "page" masih di pengaturan, klik tombol yang masih status "none" lalu ubah ke "main" -> setelah itu save



14. kamu berhasil membuat tampilan website kamu, untuk melihat hasilnya kamu tinggal klik "github page"




15. Langkah paling terakhir, kamu tinggal sesuaikan untuk membuat tampilan yang menarik website kamu, buat kode css nya untuk design UI website. Untuk membuat tampilan yang menarik, kamu bisa design terlebih dahulu tampilan web seperti apa yang kamu inginkan, bisa di design di canva, photoshop dan lain lain.

16. Setelah itu kamu mulai tuangkan ide design tersebut dalam kode css, dapat ditanya ke ai ataupun oleh kamu sendiri

17. Jika sudah memiliki kode nya, buat file baru di repository kamu dengan nama style.css




18. Tuangkan kode tersebut pada file style.css




19. Selanjutnya jika kamu ingin buat home page, maka buat repository baru harus sesuai dengan nama website mu yang awal, misal home page mu "homepage.github.io" lalu untuk tampilan web pertama menjadi "homepage.github.io/websitepertama"

contoh home page

lalu untuk website ke dua yaitu kode yang dari crootjs



20. Isi repository ke dua yaitu index.html dan style.css lagi







21. Dan telah selesai tampilan web mu, hanya tinggal klik website mu untuk melihat hasilnya.


Selamat kamu telah berhasil, jangan lupa untuk commit setelah ada perubahan. Sekian tutorial dari saya terimakasih dan sampai jumpa!

Contoh yang sudah jadi seperti ini:)

https://justip-team.github.io/
https://justip-team.github.io/TUTORIAL-CROOT/








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

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