Scribd
Unggah
2 tayangan

Git & Github

Dokumen ini menjelaskan dua aktivitas terkait pengembangan web, yaitu penggunaan GitHub dan pembuatan form login sederhana menggunakan React. Form login mencakup elemen input untuk username dan password, serta opsi untuk login dengan Facebook dan tautan untuk pemulihan password. Selain itu, dokumen juga menjelaskan penggunaan berbagai teknologi seperti Babel dan React DOM dalam konteks pembuatan antarmuka pengguna.

Diunggah oleh

s22119031
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
2 tayangan

Git & Github

Dokumen ini menjelaskan dua aktivitas terkait pengembangan web, yaitu penggunaan GitHub dan pembuatan form login sederhana menggunakan React. Form login mencakup elemen input untuk username dan password, serta opsi untuk login dengan Facebook dan tautan untuk pemulihan password. Selain itu, dokumen juga menjelaskan penggunaan berbagai teknologi seperti Babel dan React DOM dalam konteks pembuatan antarmuka pengguna.

Diunggah oleh

s22119031
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 5

#Activity 1

• Akun github

• Hasil push folder


• Hasil clone repository
#Activity 2

Login form sedernahana


• Output dari login form sederhana

• <!DOCTYPE html>: Mendefinisikan jenis dokumen HTML.


• <meta name=”viewport” content=”width=device-width, initial-scale=1.0”>:
Mengatur skala tampilan agar form responsif di perangkat mobile.
• <div id="root"></div>: Tempat di mana komponen React akan di-render.
• React: Library JavaScript untuk membangun antarmuka pengguna.
• React DOM: Menghubungkan React dengan DOM HTML.
• Babel: Compiler untuk mentransformasi JSX (JavaScript yang memungkinkan kita
menggunakan HTML-like syntax) ke dalam bentuk JavaScript yang bisa dijalankan browser.
• Background gradient: Saya menggunakan gradasi warna (linear-gradient) yang menyerupai
latar belakang login form Instagram.
• .container: Kotak form dengan latar belakang putih, padding, dan lebar yang sesuai.
• input, button: Elemen input (username, password) dan tombol login dibuat seragam dalam
hal ukuran, padding, dan border.
• .or: Divider antara login dengan username/password dan login dengan Facebook.
• .fb: Link login dengan Facebook.
• .forgot, .signup: Link teks untuk "Forgot password" dan "Sign up."

LoginForm: Komponen React yang menampilkan form login.

• State:

user dan pass: Masing-masing menyimpan nilai input untuk username dan password
menggunakan React.useState.

• handleSubmit (login): Fungsi yang dijalankan saat form dikirimkan. Fungsi ini mencegah
perilaku default browser (yaitu refresh) dan menampilkan alert dengan username yang
diinputkan.
Rendering JSX:

• Form: Mengandung dua elemen input untuk username dan password. Ketika input berubah,
state diperbarui.

• OR Divider: Membagi antara opsi login dengan Facebook dan login dengan form.

• Login with Facebook: Menyediakan link untuk login menggunakan Facebook.

• Forgot Password dan Sign up: Teks kecil di bawah form yang memberi pilihan untuk
pengguna yang lupa password atau ingin membuat akun baru.

ReactDOM.render: Menampilkan komponen LoginForm ke dalam elemen dengan id="root".

Anda mungkin juga menyukai