smart login padasitusweb...

36
SMART LOGIN PADA SITUS WEB MENGGUNAKAN QR-CODE Masdito Bachtiar 5107100052 Pembimbing 1 : Ary Mazharuddin S., S.Kom., M.Comp.Sc. 19810620 200501 1 003

Upload: others

Post on 18-May-2020

15 views

Category:

Documents


0 download

TRANSCRIPT

SMART LOGINPADA SITUSWEBMENGGUNAKANQR-CODEMasdito Bachtiar5107100052

Pembimbing 1 :Ary Mazharuddin S., S.Kom., M.Comp.Sc.19810620 200501 1 003

PENDAHULUAN

INTERNET SEBAGAI KEBUTUHAN HIDUP

Social Networks

Forums

Blogs

BANYAK ACCOUNT

LOGIN MEMBUTUHKAN BANYAK WAKTU

LUPA USERNAME DAN PASSWORD

SOLUSI

RapiCepat

Mudah

?

SMART LOGIN PADA SITUS WEB MENGGUNAKAN QR-CODE

MENGAPA ?

•MAMPU MENGENCODE BANYAK KARAKTER

•KEMAMPUAN ERROR CORRECTION

•DESAIN MENARIK

MENGAPA ?

• LIBRARY BARCODE GENERATOR DAN QR-CODE READER

• JAVA MEDIA FRAMEWORK

Batasan Masalah

• Aplikasi smart login yang dibangun berbasis desktop.• Bahasa pemrograman yang digunakan adalah Java, maka program bisa berjalan jika perangkat yang digunakan memiliki Java Runtime Environment (JRE).

• Aplikasi membutuhkan Java Media Framework (JMF) yang terinstal untuk bisatersambung dengan kamera.

• Aplikasi membutuhkan XAMPP sebagai server Apache dan MySQL lokal untukmenjalankan halaman PHP redirect.

• Program hanya bisa mengenali QR-code yang dibuat oleh program tersebut, karenaQR-code berfungsi sebagai sarana untuk menyimpan indeks database saja.

• Program dapat melakukan multiple login ke beberapa situs web sekaligusmenggunakan 1 QR-code.

Tujuan

• Merancang suatu sistem smart login untuk memanajemen informasi login, sekaligusmelakukan login ke situs web.

• Menginplementasikan penggunaan QR-code sebagai media smart login.• Merancang suatu sistem yg dapat melakukan penginjeksian data login dari aplikasijava ke web browser.

PERANCANGAN DAN IMPLEMENTASI

PENGGUNA BROWSERAPLIKASI DATABASE WEB SERVER

- Simpan Data Profil- Simpan Data Login

- Tampilkan dan Baca List Profil dan Data Login

- Kirimkan Data Login keHalaman PHP Redirect

- Scan QR-code - Redirrect

PENGGUNA

Mendaftarkan profil dan QR-code

Mengisi data login

Menghapus data login

Melakukan smart login dengan QR-code

<include>

<include>

Mendaftarkan profil dan QR-code

Mendaftarkan profil dan QR-code

Pseudocode mendaftarkan profil () {Buka file "user_list.txt";Boolean valid = true;if(textbox nama profil kosong){Tampilkan pesan "Please enter the user name!";valid = false;

}else{Periksa isi file "user_list.txt"if(ditemukan nama yang sama dengan nama profil){Tampilkan pesan "Name is already taken!";valid = false;break;

}if(valid bernilai true){Tulis ("~~"+nama profil yang didaftarkan) pada file;Buat QR code dengan isi nama profil;Tampilkan pesan ("A new user '" + nama profil + "' has been

added.");}}

Mendaftarkan profil dan QR-code

Pseudocode hapus profil () { Buka dan baca file "user_list.txt";if(bukan nama profil yang dihapus){Simpan nama profil;}else{Hapus file database dan QR-code milik profil;Tampilkan pesan ("User '" + nama profil yang dihapus + "' has been deleted.");

}Tulis kembali nama profil yang disimpan ke "user_list.txt";}

Mengisi data login

Mengisi data login

Pseudocode mengisi data login () {Buka file database milik profil; if(Textbox url & username & password tidak kosong) {Simpan data login yang di-input-kan ke file database milikprofil;

}else {Tampilkan pesan ("Can't add data. Fill all the required informations!");

}}

Menghapus data login

Menghapus data login

Pseudocode menghapus data login () { Hapus file database milik profil;Buat file baru dengan nama profil;Tampilkan pesan ("All login data of user '" + nama profil + "' have been cleared." );

}}

Melakukan smart login dengan QR-code

User Sistem

Memindai gambar QR-code Menyimpan gambar QR-code ke dalam file

Decode QR-code

Mencari file txt database sesuai nama di dalam QR-code

Membaca isi file txt per baris

Memecah - mecah string teks menjadi informasi login

Mengirimkan informasi login ke halaman php dummy

Melakukan login ke situs web melalui halaman php dummy

Redirrect ke halaman situs web tujuan

[seluruh isi file txt telah terbaca]

[else]

Melakukan smart login dengan QR-code

Pseudocode smart login () { capture image ();read QRcode();login();}

Pseudocode capture image() {Tangkap salah satu frame gambar kamera, simpan di buffer;Buat file image dengan nama "capture.jpg" dari frame yang disimpan di buffer;

}

Pseudocode membaca QR-code() {Buka file "capture.jpg";Panggil fungsi decoder dari library "QR code";if (file berhasil di-decode){Tampilkan pesan ("[Success]");Kembalikan pesan hasil pembacaan QR-code;}else {Tampilkan pesan("[Failure] ");}}

Melakukan smart login dengan QR-code

Pseudocode login() {Buka file database profil, baca data login;Baca halaman web yang didapat dari data login;Tangkap lokasi field untuk meng-input-kan username danpassword, serta tombol submit;

Buka halaman php redirect untuk menginjeksikan username, password dan mengirim perintah submit;

}

UJI COBA

PLAY ALL VIDEO !!!

PENUTUP

Kesimpulan

• Aplikasi “Smart Login pada Situs Web menggunakan QR-code” telah berhasilmengimplementasikan sistem smart login.

• Aplikasi dapat meng-generate dan men-decode QR-code dengan bantuan dua buahlibrary, yaitu java barcode generator dan java QR-code.

• Aplikasi dapat mengirimkan data ke situs web yang bersangkutan untuk login denganmenggunakan halaman php sebagai redirect untuk menginjeksikan script login.

• Smart login tidak berhasil di seluruh situs web yang dijadikan sasaran eksperimen, dikarenakan terdapat proteksi – proteksi yang dipasang di situs web tersebut.

SARAN

• Pembuatan versi mobile dari aplikasi ini, agar dapat diakses dengan lebih mudahmelalui ponsel.

• Pengembangan script agar dapat menembus proteksi situs web.• Pembenahan tampilan antarmuka agar tampilan aplikasi lebih menarik dan easy to use.

TERIMA KASIH[End of Slide]