Aptech Jakarta
Kategori
  • Android
  • Aplikasi
  • Gadget
  • Game
  • Teknologi
  • Website
  • Windows

Wedding Organizer Surabaya | Wedding Organizer Gresik | Wedding Organizer Malang | Wedding Organizer Madura | Wedding Organizer Mojokerto | Wedding Organizer Jakarta | Wedding Organizer Bogor | Wedding Organizer Depok | Wedding Organizer Tangerang | Wedding Organizer Bekasi

Catering Surabaya | Catering Gresik | Catering Malang | Catering Mojokerto | Catering Jakarta | Catering Bogor | Catering Depok | Catering Tangerang | Catering Bekasi | Catering Jakarta Murah | Catering Bogor Murah | Catering Depok Murah | Catering Tangerang Murah | Catering Bekasi Murah

Supplier Sayur | Supplier Buah | Hosting Gratis
Catering Surabaya
 | Catering Gresik | Catering Malang | Catering Mojokerto | Catering Jakarta | Catering Bogor | Catering Depok | Catering Tangerang | Catering Bekasi

Catering Surabaya | Catering Malang | Catering Gresik | Catering Mojokerto | Catering Jakarta | Catering Bogor | Catering Depok | Catering Tangerang | Catering Bekasi

ApTech Jakarta
  • Beranda
  • Catering Jakarta
  • Catering Bogor
  • Catering Depok
  • Catering Tangerang
  • Catering Bekasi
  • Teknologi

Desain Aman Form Login Menggunakan Jquery Accordion

  • Mei 9, 2013
  • admin
0

SHARES

ShareTweet

Terkadang kejadian ini pasti pernah dialami pembaca sekalian. Ketika kita sedang login mengetikkan username atau password, tak disangka password yang kita ketikkan tanpa sengaja malah mengarah di bagian input username. Hal ini menyebabkan password yang kita masukkan terlihat di bagian username dan tentunya berbahaya jika ada orang di samping kita. Itulah salah satu kelemahan dari desain form login pada umumnya.

Login Dengan Accordion

Login Dengan Accordion

Lihat Demo

Dari situlah saya mencoba berinisiatif untuk merancang sebuah desain yang ketika kita mengetikkan username maka input password tidak aktif, pun ketika kita mengetik password sebaliknya alias input username tertutup dan tidak aktif. Oleh karena itu, saya mencoba beberapa eksperimen sederhana dan menemukan ide form login dengan kombinasi akordion / jquery Accordion. Anda bisa melihat secara langsung demonya terlebih dahulu.

Sebelumnya saya berterima kasih kepada egrappler.com yang telah memberikan artikel tutorial tentang Accordion ini. Berikut adalah beberapa library yang Anda perlukan untuk merancang desain form login yang aman menggunakan Jquery Accordion.

  • Contents

    • 1 Library Jquery dari Google API
    • 2 Library Javascript menggunakan jquery.akordeon.js
    • 3 Beserta paket css dari jquery.akordeon.css yang telah saya modifikasi
    • 4 Paket Bootstrap js dan css

    Library Jquery dari Google API

  • Library Javascript menggunakan jquery.akordeon.js

  • Beserta paket css dari jquery.akordeon.css yang telah saya modifikasi

  • Paket Bootstrap js dan css

Pertama di bagian head kita perlu mengembed semua library javascript dan css yang telah kita download


<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js“></script>
<link href=”css/bootstrap.css” rel=”stylesheet” type=”text/css” />
<link href=”css/jquery.akordeon.css” rel=”stylesheet” type=”text/css” />
<link href=”css/demo.css” rel=”stylesheet” type=”text/css” />
<script src=”js/bootstrap.min.js” type=”text/javascript“></script>
<script src=”js/jquery.akordeon.js” type=”text/javascript“></script>

view raw

gistfile1.html

hosted with ? by GitHub

Kemudian kita membuat body utama untuk form login yang terdiri dari input username dan password, disini saya masih menggunakan tag div default demo dari Jquery Akordeon. Silahkan ketik kode ini di dalam tag Body


<form>
<fieldset>
<div id=”demo-wrapper“>
<div class=”akordeon” id=”buttons“>
<div class=”akordeon-item expanded“>
<div class=”akordeon-item-head“>
<div class=”akordeon-item-head-container“>
<div class=”akordeon-heading“>
Username
</div>
</div>
</div>
<div class=”akordeon-item-body“>
<div class=”akordeon-item-content“>
<input type=”text” class=”input-large” placeholder=”Ketik Username Anda“>
</div>
</div>
</div>
<div class=”akordeon-item“>
<div class=”akordeon-item-head“>
<div class=”akordeon-item-head-container“>
<div class=”akordeon-heading“>
Password
</div>
</div>
</div>
<div class=”akordeon-item-body“>
<div class=”akordeon-item-content“>
<input type=”password” class=”input-large” placeholder=”Password“>
</div>
</div>
</div>
</div>
<button class=”btn btn-large btn-block” id=”submit” type=”button“>Submit</button>
</div>
</fieldset>
</form>

view raw

gistfile1.html

hosted with ? by GitHub

Selanjutnya kita perlu menambah script yang fungsinya akan membaca tag class akordeon agar berjalan sebagaimana mestinya. Masukkan script di bawah pada bagian Head struktur html Anda.


<script type
admin

Previous Article
  • Aplikasi
  • Teknologi

Bagaimana Phonegap Bekerja Dalam Membangun Aplikasi ?

  • Mei 8, 2013
  • admin
View Post
Next Article
  • Aplikasi
  • Teknologi

Membuat Project Aplikasi Phonegap Menggunakan MDS Applaud

  • Mei 10, 2013
  • admin
View Post

Tinggalkan Balasan Batalkan balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Pos-pos Terbaru
  • 8 HP Untuk Main Call of Duty Mobile Terbaik 2023
  • Game Esports Terbaik
  • Rekomendasi 10 Game Browser Terbaik
  • Aplikasi Pengunci Aplikasi Android Terbaik
  • 6 Smartwatch Terbaik 1 Jutaan Tahun 2022, Super Canggih!
Arsip
Kategori
  • Android
  • Aplikasi
  • Gadget
  • Game
  • Teknologi
  • Website
  • Windows
Wedding Organizer

Wedding Organizer Surabaya | Wedding Organizer Gresik | Wedding Organizer Malang | Wedding Organizer Madura | Wedding Organizer Mojokerto | Wedding Organizer Jakarta | Wedding Organizer Bogor | Wedding Organizer Depok | Wedding Organizer Tangerang | Wedding Organizer Bekasi

Partner

Catering Surabaya | Catering Gresik | Catering Malang | Catering Mojokerto | Catering Jakarta | Catering Bogor | Catering Depok | Catering Tangerang | Catering Bekasi | Catering Jakarta Murah | Catering Bogor Murah | Catering Depok Murah | Catering Tangerang Murah | Catering Bekasi Murah

External Link

Supplier Sayur | Supplier Buah | Hosting Gratis
Catering Surabaya
 | Catering Gresik | Catering Malang | Catering Mojokerto | Catering Jakarta | Catering Bogor | Catering Depok | Catering Tangerang | Catering Bekasi

Catering Surabaya | Catering Malang | Catering Gresik | Catering Mojokerto | Catering Jakarta | Catering Bogor | Catering Depok | Catering Tangerang | Catering Bekasi

Blog Teknologi Jakarta
Berita dan artikel teknologi dan Informasi Jakarta

Input your search keywords and press Enter.