Cara menggunakan membuat faq dengan bootstrap

Question

Form login adalah halaman yang didalamnya terdapat sebuah inputan utnuk memasukan username dan password sebagai akses untuk masuk kedalam aplikasi. Halaman ini sangat penting keberadaannya dalam sebuah aplikasi, karena mampu mengatur atau membedakan jenis

Table of Contents Show

Tutorial Membuat Login Form dengan Bootstrap
Kesempatan tidak selalu datang dua kali...
© daelamiagusmuharam
Kesempatan tidak selalu datang dua kali...
© daelamiagusmuharam
Langkah langkah membuat FAQ?
Apa fungsi dari class collapse pada bootstrap?
Apa itu halaman FAQ?
Apakah bootstrap itu template?

Form login adalah halaman yang di dalamnya terdapat sebuah inputan untuk memasukan username dan password sebagai akses untuk masuk ke dalam aplikasi. Halaman ini sangat penting keberadaannya dalam sebuah aplikasi, karena mampu mengatur atau membedakan jenis user yang akan menggunakan halaman tersebut.

Template form login merupakan halaman yang cocok dijadikan studi kasus bagi pemula untuk mengasah kemampuan sekaligus belajar memperdalam ilmu dalam bidang web design.

Pada kesempatan kali ini, saya akan menuliskan tutorial membuat template form login dengan Bootstrap. Tetapi, dalam tutorial ini tidak semuanya menggunakan library bootstrap, ada juga beberapa kode yang hanya menggunakan css dan html yang saya buat sendiri. Ini bertujuan untuk menyesuaikan tampilan halaman karena saya juga belum sepenuhnya menguasai penggunaan library Bootstrap.

Baca Juga : Apakah Figma Tetap Gratis Setelah Diakuisisi Adobe? Ini 4 Aplikasi Alternatifnya

Sebelum memulai ke tahapan membuat tutorial, saya akan menjelaskan bagian-bagian yang nanti digunakan dalam template login formini. Lihat gambar di bawah ini.

gambar 1. Tampilan login form (sumber gambar pribadi)

Header yang saya maksud adalah bagian atas dari halaman loginform. Di bagian ini, saya akan memasukan textlogo pada sisi kiri (ZIYADA) dan form login pada sisi kanan.

Hero adalah bagian tengah atau bisa disebut juga bagian utama pada halaman loginform ini. Di bagian ini saya akan memasukan beberapa text dengan menggunakan heading 1 dan 3 di sebelah kiri, dan form daftar di sebelah kanan.

Pada footer saya akan memasukan credit yang berada pada sisi kanan.

Sangat wajib bagi kalian untuk menginstall aplikasi code editor apabila ingin langsung mempraktekan tutorial ini. Berikut beberapa code editor populer yang bisa kalian download langsung dengan mengklik link yang sudah saya sediakan.

1. Notepad++

2. Sublime text

3. Visual Studio Code

Silahkan pilih salah satu lalu install ke dalam komputer masing-masing. Agar artikel ini tidak terlalu panjang, saya akan memulai tahapan-tahapan tutorial membuat template form login dengan Bootstrap ini. Yuk simak!

Header

Pertama, buka code editor favorit kalian lalu buat dua buah file dengan nama index.html dan style.css lalu simpan kedua file tersebut ke dalam folder yang bernama loginform.

gambar 2. Folder loginform (sumber gambar pribadi)

Pada file html saya akan membuat terlebih dulu bagian header, hero, dan footer. Untuk membuatnya, cukup masukkan syntax di bawah ini.




    
    
    
    Document

Kemudian klik tab style.css, lalu masukkan syntax di bawah ini.

*{
    margin: 0;
    padding: 0;
}
html{
    scroll-padding-top: 80px;

}
body{
    font-family: 'Roboto', sans-serif;
    font-size: 20pt;
}
h1{
    color: #2f3542;
    line-height: 50px;
    font-family: 'Poppins', sans-serif;
    font-size: 20pt;
    font-weight: 300;
}
h3{ 
    color: #1289A7;
    line-height: 75px;
    font-family: 'Poppins', sans-serif;
    font-size: 18pt;
    font-weight: 300;
    margin: auto;
}
.header{
    width: 100%;
    height: 80px;
    background-color: #0652DD;
    margin: auto;
}
.hero{
    width: 100%;
    height: 90%;
    padding: 50px 0px 0px 100px;
    background-color: #dfe4ea;
}
.footer{
    width: 100%;
    height: 100px;
    text-align: right;
    padding-right: 280px ;
}

Di dalam div class header, saya akan membuat 3 buah kolom. Pembuatan kolom ini menggunakan bantuan library dari Bootstrap, jadi sebelum memasukan syntax kolom ke dalam div class header, masukan dulu source library Bootstrap ke dalam tag head pada html. Saya juga akan memasukan link source font Google yang akan saya gunakan dan memasukan link source file style.css yang sudah dibuat. Setiap source akan saya berikan komentar. Untuk lebih jelasnya lihat gambar di bawah ini.


	
	
	login form

Masuk ke tab style.css untuk memberikan style pada text logo dan box login. Masukkan syntax di bawah ini.

.textlogo{
    color: #ecf0f1;
    line-height: 75px;
    font-family: 'Poppins', sans-serif !important;
    font-size: 35pt;
    margin: auto;
    padding-left: 90px;
}
.boxlogin{
    padding-top: 15px;
}

Setelah itu, saya akan membuat tiga buah kolom di dalam div class header di mana kolom tersebut berada di kiri, tengah dan kanan. Kolom kiri akan digunakan untuk memasukan textlogo, kolom tengah akan dikosongkan, dan kolom kanan akan diisi dengan form login. Untuk membuatnya, masukkan syntax seperti di bawah ini.


        

            

                
ZIYADA
            
            
            
                

                    
                        

                            Email address
                            
                        
                        
                            Password
                            
                        
                        Log in

Hero

Untuk membuat bagian hero, kalian harus beralih ke tab index.html. Di sini saya akan mengisi div class hero dengan text hero dan form daftar. Dalam div class hero terdapat dua kolom yang sama panjang. Kolom kiri saya isi dengan div class texthero untuk menambah keterangan pada halaman form login. Sementara pada kolom sebelah kanan saya isi dengan form daftar yang di dalamnya terdapat beberapa inputan yaitu username password dan ulangi password. Silahkan bisa lihat syntax di bawah ini.


        

            

                
Kesempatan tidak selalu datang dua kali...  
                
                    Mari Bergabung Bersama Saya
                
            
            
                

                    

                        

                            
Sign In
                            
                                
                                    
Email address
                                    
                                
                                
                                    
Password
                                    
                                
                                
                                    
Ulangi Password
                                    
                                
                                
                                    Submit
                                    
lupa password

Selanjutnya, berikan style pada div class formhero danatur ulang panel Bootstrap. Buka tab style.css lalu masukkan syntax berikut.

.formhero{
    padding: 0px 120px 0px 0px;
}
.panel{
    border-radius: 15px !important;
}

Footer

Footer berisi tentang keterangan copyright, caranya buka tab index.html lalu masukkan syntax di bawah ini.

    
            
© daelamiagusmuharam

Lalu buka tab style.css dan masukkan syntax di bawah ini.

.footer{
    width: 100%;
    height: 100px;
    text-align: right;
    padding-right: 280px ;
}

Demikian tutorial membuat template form login dengan Bootstrap. Untuk memudahkan, saya akan memuat syntax index.html dan style.css secara lengkap seperti di bawah ini.

index.html




    
    
    login form
    
    
    
    
    
    
    
    


    
        

            

                
ZIYADA
            
            
            
                

                    
                        

                            Email address
                            
                        
                        
                            Password
                            
                        
                        Log in 
                    
                
            
        
    
    
        

            

                
Kesempatan tidak selalu datang dua kali...  
                
                    Mari Bergabung Bersama Saya
                
            




            
                

                    

                        

                            
Sign In
                            
                                
                                    
Email address
                                    
                                
                                
                                    
Password
                                    
                                
                                
                                    
Ulangi Password
                                    
                                
                                
                                    Submit
                                    
lupa password
                                
                                
                            
                        
                    
                
            
        
    
    
            
© daelamiagusmuharam

style.css

*{
    margin: 0;
    padding: 0;
}
html{
    scroll-padding-top: 80px;

}
body{
    font-family: 'Roboto', sans-serif;
    font-size: 20pt;
}
h1{
    color: #2f3542;
    line-height: 50px;
    font-family: 'Poppins', sans-serif;
    font-size: 20pt;
    font-weight: 300;
}
h3{ 
    color: #1289A7;
    line-height: 75px;
    font-family: 'Poppins', sans-serif;
    font-size: 18pt;
    font-weight: 300;
    margin: auto;
}
.header{
    width: 100%;
    height: 80px;
    background-color: #0652DD;
    margin: auto;
}
.hero{
    width: 100%;
    height: 90%;
    padding: 50px 0px 0px 100px;
    background-color: #dfe4ea;
}
.footer{
    width: 100%;
    height: 100px;
    text-align: right;
    padding-right: 280px ;
}

0

Sekian tutorial dari saya. Semoga bermanfaat!

Artikel ini merupakan kontribusi dari peserta program Gamelab Indonesia. Isi dari artikel ini tidak mewakili pandangan dari tim Gamelab Indonesia.

Langkah langkah membuat FAQ?

Cara Membuat FAQ yang Efektif.

Pastikan Laman FAQ Mudah Ditemukan. ... .

Kumpulkan Semua Pertanyaan dan Pilih. ... .

3. Hindari terlalu banyak pertanyaan. ... .

4. Jika perlu, perjelas dengan gambar. ... .

Tulis Pertanyaan dari POV Pelanggan. ... .

6. Gunakan Format Tanya Jawab. ... .

7. Susun Jawaban dengan Singkat & Jelas. ... .

Berikan Jawaban Sejujur Mungkin..

Apa fungsi dari class collapse pada bootstrap?

Collapse Bootstrap 4 – Collapse pada bootstrap digunakan untuk menampilkan dan menyembunyikan suatu konten (Toggle). Komponen collapse ini memiliki sebuah tombol yang bertugas sebagai pemicu suatu konten disembunyikan atau ditampilkan.

Apa itu halaman FAQ?

G2's Learn Hub menuliskan, FAQ adalah kumpulan pertanyaan yang sering dilontarkan oleh pelanggan atau calon pelanggan. FAQ sendiri merupakan singkatan dari frequently asked questions. Nah, FAQ page adalah satu halaman web yang memuat semua frequently asked questions, lengkap dengan jawabannya.

Apakah bootstrap itu template?

Bootstrap adalah front-end framework atau framework css yang sengaja dibangun untuk memudahkan pendesain web dalam membuat website atau membuat template website.