PI - Dimas Chandra Widya Pratama - 51417708 [PDF]

  • 0 0 0
  • Suka dengan makalah ini dan mengunduhnya? Anda bisa menerbitkan file PDF Anda sendiri secara online secara gratis dalam beberapa menit saja! Sign Up
File loading please wait...
Citation preview

UNIVERSITAS GUNADARMA FAKULTAS TEKNOLOGI INDUSTRI



PENULISAN ILMIAH



IMPLEMENTASI OPTICAL CHARACTER RECOGNITION (OCR) DAN SCREENSHOT PADA APLIKASI BLOKIR SITUS PORNOGRAFI BERBASIS DESKTOP Nama



:



Dimas Chandra Widya Pratama



NPM



:



51417708



Fakultas



:



Teknologi Industri



Jurusan : Teknik Informatika Diajukan Guna Melengkapi Sebagian Syarat Untuk Mencapai Jenjang Pembimbing : Dr. D. L. Crispina Pardede, DEA. Setara Sarjana Muda Jakarta 2020



PERNYATAAN ORIGINALITAS DAN PUBLIKASI Saya yang bertanda tangan di bawah ini, Nama : Dimas Chandra Widya Pratama NPM



: 51417708



Judul PI



: Implementasi Optical Character Recognition (OCR) dan



IIIIIIIJIJIIJ



Screenshot pada Aplikasi Blokir Situs Pornografi Berbasis



FFFF DDDDDDDDD Desktop Tanggal Sidang



:



Tanggal Lulus



:



Menyatakan bahwa tulisan ini adalah merupakan hasil karya saya sendiri dan dapat dipulikasikan sepenuhnya oleh Universitas Gunadarma. Segala kutipan dalam bentuk apa pun telah mengikuti etika yang berlaku. Mengenai isi dan tulisan adalah merupakan tanggung jawab penulis, bukan Universitas Gunadarma. Demikian pernyataan ini dibuat dengan sebenarnya dan dengan penuh kesadaran.



Bekasi, 10 Januari 2021



Dimas Chandra Widya Pratama



ii



LEMBAR PENGESAHAN



Judul Penulisan Ilimiah



: IMPLEMENTASI OPTICAL CHARACTER



AAAAAAAAAAAAAAAAAAA RECOGNITION (OCR) DAN SCREENSHOT AAAAAAAAAAAAAAAAA



PADA



APLIKASI



BLOKIR



AAAAAAAAAAAAAAAAAA



PORNOGRAFI BERBASIS DESKOP



Nama



: Dimas Chandra Widya Pratama



NPM



: 51417708



Tanggal Sidang



:



Tanggal Lulus



:



SITUS



Menyetujui, Pembimbing



Koordinator PI



(Dr. D. L. Crispina Pardede, D.E.A.)



(Dr. Achmad Fahrurozi, S.Si., M.Si.)



Ketua Jurusan



(Dr. Lintang Yuniar Banowosari, S.Kom., M.Sc.)



iii



ABSTRAKSI Dimas Chandra Widya Pratama, 51417708 IMPLEMENTASI OPTICAL CHARACTER RECOGNITION (OCR) DAN SCREENSHOT PADA APLIKASI BLOKIR SITUS PORNOGRAFI BERBASIS DESKTOP Penulisan Ilmiah, Jurusan Teknik Informatika, Fakultas Teknologi Industri, Universitas Gunadarma, 2020 Kata Kunci : OCR, Screenshot, Pornografi (xiii + 79 + lampiran) Penyebaran aplikasi Virtual Private Network (VPN) gratis membantu masyarakat yang memerlukan akses internet tanpa menggunakan penyedia layanan internet. Namun, sering terjadi penyalahgunaan penggunaan VPN oleh masyarakat, khususnya anak dan remaja, yaitu masyarakat mengakses pornografi tanpa terkena pemblokiran oleh Internet Service Provider (ISP). Tulisan ini membahas implementasi Optical Character Recognition (OCR) dan Screenshot pada aplikasi blokir situs pornografi berbasis desktop yang diharapkan dapat membantu melindungi anak dan remaja dari akses pornografi yang dilakukan menggunakan VPN maupun tanpa VPN. Aplikasi ini mendeteksi kata kunci yang tedapat pada halaman situs yang diakses. Isi kata kunci pada aplikasi ini dapat dimodifikasi sesuai dengan keinginan user. Pembangunan aplikasi ini menggunakan metode SDLC model waterfall. Tahap–tahap yang dilakukan adalah analisis kebutuhan, perancangan, implementasi, dan pengujian. Pembangunan aplikasi dilakukan menggunakan perangkat lunak code editor bernama Visual Studio Code dan bahasa pemrograman Python. Tahap pengujian dilakukan menggunakan metode Black box yang digunakan untuk menguji keberhasilan fungsional dari aplikasi. Hasil pengujian menunjukkan bahwa aplikasi yang dibangun berjalan dengan hasil yang diharapkan. Daftar Pustaka (2015 – 2020)



iv



KATA PENGANTAR Puji syukur kehadirat Tuhan Yang Maha Esa, yang telah memberikan rahmat dan karunia sehingga penulis dapat menyelesaikan penulisan karya ilmiah yang berjudul “IMPLEMENTASI OPTICAL CHARACTER RECOGNITION (OCR)



DAN



SCREENSHOT



PADA



APLIKASI



BLOKIR



SITUS



PORNOGRAFI BERBASIS DESKTOP”. Keberhasilan penyusunan tulisan ilmiah ini tidak lepas dari bantuan dan dukungan berbagai pihak, dan dorongan niat pada penulis. Perkenankan penulis memberikan ucapan terima kasih kepada: 1. Prof. Dr. E. S. Margianti, S.E., M.M., selaku Rektor Universitas Gunadarma. 2. Prof. Dr. Ing. Adang Suhendra, S.Si., S.Kom., M.Sc., selaku Dekan Fakultas Teknologi Industri, Universitas Gunadarma. 3. Dr. Lintang Yuniar Banowosari, S.Kom., M.Sc., selaku Ketua Jurusan Teknik Informatika. 4. Dr. Achmad Fahrurozi, S.Si., M.Si., selaku Koordinator Penulisan Ilmiah FTI. 5. Dr. D. L. Crispina Pardede, D.E.A., selaku Dosen Pembimbing yang telah dengan sabar memberikan bimbingan serta masukan sehingga penulis dapat menyelesaikan penulisan ini dengan baik. 6. Orang Tua penulis yang telah banyak memberikan bantuan baik itu moril maupun materil serta dorongan semangat yang tak ternilai, dan berkat doa serta restu mereka jugalah terlaksananya penulisan ini. 7. Teman–teman kelas yang tidak dapat disebutkan satu persatu telah memberikan banyak nasihat dan saran selama menyelesaikan penulisan ilmiah ini. Penulis menyadari masih terdapat kekurangan pada tulisan ilmiah ini. Penulis berharap kritik dan saran yang membangun sebagai masukan bagi penulisan karya ilmiah berikutnya. Semoga karya ilmiah ini bermanfaat bagi para pembaca. Bekasi, 29 Januari 2020



v



Dimas Chandra Widya Pratama



DAFTAR ISI Halaman HALAMAN JUDUL........................................................................................ i PERNYATAAN ORIGINALITAS DAN PUBLIKASI.................................. ii LEMBAR PENGESAHAN.............................................................................. iii ABSTRAKSI.................................................................................................... iv KATA PENGANTAR...................................................................................... v DAFTAR ISI.................................................................................................... vi DAFTAR TABEL............................................................................................ viii DAFTAR GAMBAR........................................................................................ ix DAFTAR LAMPIRAN.................................................................................... xii 1. PENDAHULUAN................................................................................... 1 1.1. Latar Belakang................................................................................... 1 1.2. Batasan Masalah .............................................................................. 2 1.3. Tujuan .............................................................................................. 2 1.4. Metode Penelitian ............................................................................ 3 1.5. Sistematika Penulisan ...................................................................... 3 2. LANDASAN TEORI............................................................................... 5 2.1. Virtual Private Network (VPN) ....................................................... 5 2.2. Screenshot ........................................................................................ 7 2.3. Optical Character Recognition (OCR) ............................................ 8 2.3.1. Tesseract OCR................................................................................... 10 2.4. Pornografi.......................................................................................... 12 2.5. Python................................................................................................ 13 2.5.1. Indentasi............................................................................................. 15 2.5.2. Operator............................................................................................. 15 2.5.3. Struktur Kontrol................................................................................. 17 2.5.4. List, Tuple, dan Dictionary................................................................ 18 2.5.5. Function dan Method......................................................................... 19 2.5.6. Library............................................................................................... 20 2.5.6.1. Pytesseract......................................................................................... 21 2.5.6.2. Multiple Screen Shots (MSS) dan Pillow (PIL)................................. 22 2.5.6.3. Tkinter................................................................................................ 22 2.5.6.4. Pyinstaller.......................................................................................... 24 2.5.6.5. Pyrebase4........................................................................................... 24 2.5.6.6. Sqlite3................................................................................................ 25 2.5.6.7. Pyautogui........................................................................................... 26 2.5.7. Kelas.................................................................................................. 27 2.5.8. Konstruktor........................................................................................ 27 2.5.9. Inheritance......................................................................................... 28 2.6. Sqlite.................................................................................................. 30



vi



2.7. Firebase Authentication..................................................................... 2.8. Thread................................................................................................ 2.9. Microsoft Visual Studio Code............................................................ 2.10. Figma................................................................................................. 2.11. Algoritma........................................................................................... 2.12. Unified Modelling Language (UML)................................................. 2.13. Struktur Navigasi............................................................................... 2.14. Metode Black Box.............................................................................. 2.15. Systems Development Life Cycle (SDLC).......................................... 3. PERANCANGAN DAN IMPLEMENTASI.......................................... 3.1. Analisis Kebutuhan............................................................................. 3.2. Perancangan........................................................................................ 3.2.1. Perancangan Arsitektur Program........................................................ 3.2.2. Perancangan Interaksi Antar Pengguna.............................................. 3.2.3. Perancangan Algoritma...................................................................... 3.2.4. Perancangan Struktur Navigasi........................................................... 3.2.5. Perancangan Basis Data Sqlite............................................................ 3.2.6. Perancangan Antar Muka Aplikasi..................................................... 3.3. Implementasi....................................................................................... 3.3.1. Implementasi Rancangan Sistem........................................................ 3.3.2. Implementasi Desain.......................................................................... 3.3.3. Implementasi Program........................................................................ 3.3.3.1. Implementasi Basis Data Pada Program............................................. 3.3.3.2. Implementasi Firebase Pada Program................................................ 3.3.3.3. Implementasi Pembuatan Class GUI.................................................. 3.3.3.4. Implementasi Class Halaman Splash Screen...................................... 3.3.3.5. Implementasi Class Halaman Login................................................... 3.3.3.6. Implementasi Class Halaman Register............................................... 3.3.3.7. Implementasi Class Halaman Tentang............................................... 3.3.3.8. Implementasi Class Halaman Ganti Password.................................. 3.3.3.9. Implementasi Class Halaman Sukses Ganti Password....................... 3.3.3.10.Implementasi Class Halaman Sukses Register................................... 3.3.3.11.Implementasi Class Halaman Main.................................................... 3.3.3.12.Implementasi Class Halaman Modifikasi Kata Kunci........................ 3.3.3.13.Implementasi Pada Modul protection dan TestGUI2......................... 3.3.3.14.Implementasi Pada Modul Main dan Function Lainnya.................... 3.4. Pengujian............................................................................................ 4. PENUTUP............................................................................................... 4.1 Kesimpulan......................................................................................... 4.2 Saran................................................................................................... DAFTAR PUSTAKA.......................................................................................



vii



30 31 31 34 36 42 43 45 46 49 49 53 53 55 56 62 64 64 70 70 74 75 76 77 81 82 84 86 88 89 90 91 92 95 97 99 100 118 118 118 119



DAFTAR TABEL



Tabel 2.1. Tabel 3.1. Tabel 3.2. Tabel 3.3. Tabel 3.4. Tabel 3.5. Tabel 3.6. Tabel 3.7. Tabel 3.8. Tabel 3.9. Tabel 3.10. Tabel 3.11. Tabel 3.12. Tabel 3.13. Tabel 3.14.



Halaman Deskripsi Sub Proses Tahap Preprocessing................................ 8 Daftar Kata Kunci Mengandung Arti Pornografi........................ 50 Hasil Pengujian Pada Halaman Splash Screen............................ 101 Hasil Pengujian Pada Halaman Register..................................... 103 Hasil Pengujian Pada Halaman Login......................................... 105 Hasil Pengujian Pada Halaman Tentang..................................... 106 Hasil Pengujian Pada Halaman Sukses Register.......................... 107 Hasil Pengujian Pada Halaman Ganti Password......................... 108 Hasil Pengujian Pada Halaman Sukses Ganti Password............. 110 Hasil Pengujian Kesesuaian Fungsi Button Halaman Main........ 111 Hasil Pengujian Kesesuaian Asset dan widget Halaman Main.... 112 Hasil Pengujian Pada Halaman Modifikasi Kata Kunci.............. 113 Hasil Pengujian Fitur Pemblokiran Pada Website....................... 116 Hasil Pengujian Berdasarkan Kata Kunci Pada Situs.................. 116 Hasil Pengujian Berdasarkan Alamat Situs................................. 117



viii



ix



DAFTAR GAMBAR



Gambar 2.1. Gambar 2.2. Gambar 2.3. Gambar 2.4. Gambar 2.5. Gambar 2.6. Gambar 2.7. Gambar 2.8. Gambar 2.9. Gambar 2.10. Gambar 2.11. Gambar 2.12. Gambar 2.13. Gambar 2.14. Gambar 2.15. Gambar 2.16. Gambar 2.17. Gambar 2.18. Gambar 2.19. Gambar 2.20. Gambar 2.21. Gambar 2.22. Gambar 2.23. Gambar 2.24. Gambar 2.25. Gambar 2.26. Gambar 2.27. Gambar 2.28. Gambar 2.29. Gambar 2.30. Gambar 2.31. Gambar 2.32. Gambar 2.33. Gambar 2.34. Gambar 2.35. Gambar 2.36. Gambar 2.37. Gambar 2.38. Gambar 2.39. Gambar 2.40. Gambar 2.41. Gambar 2.42.



Halaman Akses Situs Pornografi Tanpa Koneksi VPN......................... 6 Akses Situs Pornografi Menggunakan Koneksi VPN............ 6 Hasil Screenshot pada Web Browser...................................... 8 Arsitektur Tesseract OCR....................................................... 10 Adaptive Thresholding............................................................ 11 Operator Aritmatika pada Python........................................... 16 Operator Perbandingan pada Python...................................... 17 Operator Boolean pada Python............................................... 17 Contoh Program Menggunakan Pytesseract........................... 21 Input Hasil Gambar Screenshot Sebuah Situs Web................ 21 Output Program....................................................................... 21 Konsep Inheritance pada Class Diagram............................... 28 Fitur IntelliSense pada Microsoft Visual Studio Code............ 32 Tampilan Outline pada Microsoft Visual Studio Code........... 32 Tampilan Explorer pada Microsoft Visual Studio Code......... 33 Tampilan Terminal pada Microsoft Visual Studio Code........ 33 Tampilan Split pada Microsoft Visual Studio Code................ 34 Tampilan Pengaturan Layer pada Figma................................ 35 Tampilan Pengaturan Design pada Figma.............................. 35 Tampilan Pengaturan Prototype pada Figma......................... 36 Tampilan Pengaturan Code pada Figma................................. 36 Simbol Titik Terminal............................................................ 38 Simbol Arus............................................................................ 38 Simbol Proses......................................................................... 38 Simbol Keputusan................................................................... 38 Simbol Proses Terdefinisi....................................................... 38 Simbol Konektor (On-Page)................................................... 38 Simbol Konektor (Off-Page).................................................. 38 Contoh Penyajian Algoritma Menggunakan Pseudocode...... 39 Algoritma Sekuensial.............................................................. 40 Algoritma Percabangan........................................................... 40 Algoritma Perulangan............................................................. 41 Simbol Use Case..................................................................... 42 Simbol Aktor........................................................................... 42 Simbol Asosiasi...................................................................... 42 Simbol Ekstensi...................................................................... 43 Simbol Include........................................................................ 43 Simbol Generalisasi................................................................ 43 Struktur Navigasi Linier......................................................... 43 Struktur Navigasi Non-Linier................................................. 44 Struktur Navigasi Hirarki........................................................ 44 Struktur Navigasi Campuran.................................................. 45



x



Gambar 2.43. Gambar 2.44. Gambar 2.45. Gambar 2.46. Gambar 3.1. Gambar 3.2. Gambar 3.3. Gambar 3.4. Gambar 3.5. Gambar 3.6. Gambar 3.7. Gambar 3.8. Gambar 3.9. Gambar 3.10. Gambar 3.11. Gambar 3.12. Gambar 3.13. Gambar 3.14. Gambar 3.15. Gambar 3.16. Gambar 3.17. Gambar 3.18. Gambar 3.19. Gambar 3.20. Gambar 3.21. Gambar 3.22. Gambar 3.23. Gambar 3.24. Gambar 3.25. Gambar 3.26. Gambar 3.27. Gambar 3.28. Gambar 3.29. Gambar 3.30. Gambar 3.31. Gambar 3.32. Gambar 3.33. Gambar 3.34. Gambar 3.35. Gambar 3.36. Gambar 3.37. Gambar 3.38. Gambar 3.39. Gambar 3.40. Gambar 3.41. Gambar 3.42.



Contoh Tabel Uji Coba Metode Black Box............................ Model Waterfall...................................................................... Model V–Shaped..................................................................... Model Iterative....................................................................... Konten Pornografi pada Sosial Media Twitter....................... Konten Pornografi pada Sosial Media Facebook................... Konten Pornografi pada Sosial Media Youtube...................... Arsitektur Program Aplikasi “Bad Keywords Detector“........ Use Case Diagram Aplikasi “Bad Keywords Detector“........ Flowchart Algoritma Register................................................ Flowchart Algoritma Login.................................................... Flowchart Algoritma Ganti Password.................................... Flowchart Algoritma Pemblokiran Situs Pornografi.............. Struktur Navigasi Aplikasi “Bad Keywords Detector”........... Struktur Tabel keyword........................................................... Sketsa Halaman Splash Screen............................................... Sketsa Pada Halaman Register............................................... Sketsa Pada Halaman Login................................................... Sketsa Pada Halaman Tentang................................................ Sketsa Pada Halaman Sukses Register.................................... Sketsa Pada Halaman Ganti Password................................... Sketsa Halaman Sukses Ganti Password................................ Sketsa Halaman Main............................................................. Sketsa Halaman Modifikasi Kata Kunci................................. Daftar Akun Terdaftar Pada Firebase.................................... Pengaturan Metode Autentikasi Firebase............................... Template Pada Email Verifikasi............................................. Template Email Pergantian Password.................................... Hasil Desain Halaman Register Pada Figma.......................... Desain Tombol (Button)......................................................... Pembuatan Direktori Virtual Environment Pada CMD.......... Aktivasi Mode Virtual Environment....................................... Proses Instalasi Pyautogui...................................................... Kode Program Untuk Menghubukan Sqlite............................ Konfigurasi Projek Firebase Berbentuk Kode JSON............. Kode Program Menghubungkan Autentikasi Firebase.......... Fungsi create_user.................................................................. Fungsi send_ver...................................................................... Fungsi check_email_ver......................................................... Fungsi reset_pass.................................................................... Class GUI............................................................................... Class Halaman splash_screen................................................ Output dari Class Halaman splash_screen............................. Class Halaman Login.............................................................. Method to_login Pada Class Halaman Login......................... Output Pada Class Halaman Login.........................................



xi



45 47 48 48 49 50 50 54 55 58 59 60 61 63 64 65 65 66 67 67 68 68 69 70 70 71 73 74 75 75 76 76 76 77 78 79 79 80 80 80 82 83 83 84 85 85



Gambar 3.43. Gambar 3.44. Gambar 3.45. Gambar 3.46. Gambar 3.47. Gambar 3.48. Gambar 3.49. Gambar 3.50. Gambar 3.51. Gambar 3.52. Gambar 3.53. Gambar 3.54. Gambar 3.55. Gambar 3.56. Gambar 3.57. Gambar 3.58. Gambar 3.59. Gambar 3.60. Gambar 3.61. Gambar 3.62. Gambar 3.63. Gambar 3.64. Gambar 3.65.



Class Halaman Register.......................................................... Beberapa Method Pada Class Halaman Register.................... Output Pada Class Halaman Register..................................... Class Halaman Tentang.......................................................... Output Pada Class Halaman Tentang..................................... Class Halaman Ganti Password............................................. Output Pada Class Halaman Ganti Password........................ Class Halaman Sukses Ganti Password.................................. Output Pada Class Halaman Sukses Ganti Password............. Class Halaman Sukses Register.............................................. Output Pada Class Halaman Sukses Register......................... Class Halaman Main............................................................... Output Pada Class Halaman Main.......................................... Class Halaman Modifikasi Kata Kunci................................... Output Pada Class Halaman Modifikasi Kata Kunci.............. Modul protection.................................................................... Modul testGUI2...................................................................... Modul Main............................................................................ Function initmain dan close_window_logout......................... Proses Verifikasi Melalui Email Verifikasi Firebase............. Proses Mengganti Password Melalui Email Firebase............ Proses Penambahan Kata Kunci Pada Kamus Kata Kunci..... Kata Kunci Untuk Pengujian Aplikasi....................................



xii



86 87 88 88 89 89 90 91 91 92 92 94 94 96 96 98 98 99 100 102 109 114 115



DAFTAR LAMPIRAN



Halaman LAMPIRAN LISTING ................................................................................. 121 LAMPIRAN OUTPUT .................................................................................. 138



xiii



1. PENDAHULUAN 1.1.



Latar Belakang Kementrian Komunikasi dan Informatika (KOMINFO) telah memblokir



banyak situs berkonten pornografi di internet. KOMINFO menggunakan alat bernama Ais, yaitu alat yang digunakan untuk mengklasifikasi situs pornografi secara cepat dan dikelola oleh Tim Ais. Tim Ais bekerja sebagai patroli siber yang akan melakukan pemblokiran situs melalui laporan kepada Internet Service Provider (ISP) dan pengelolaan laporan aduan konten dari masyarakat dan instansi. Sistem blokir konten negatif/pornografi yang diterapkan KOMINFO belum mampu memblokir akses situs pornografi yang dibantu menggunakan koneksi Virtual Private Network (VPN). Virtual Private Network (VPN) adalah suatu teknologi yang digunakan untuk melakukan pertukaran data melalui jalur khusus yang terenkripsi. Maraknya peredaran penyedia VPN gratis di internet pada desktop memungkinkan anak– anak dan remaja yang menggunakan desktop memiliki resiko untuk mengakses pornografi secara bebas. Hal ini kurang mendapatkan pengawasan dari orang tua maupun pemerintah mengingat desktop masih dibutuhkan oleh pelajar untuk melakukan pembelajaran online dan sarana hiburan selama pandemi COVID - 19 ini. Aplikasi blokir akses pornografi untuk desktop banyak tersedia di internet baik secara gratis maupun berbayar. Banyak metode yang diterapkan aplikasi tersebut untuk mendeteksi situs pornografi seperti pendeteksi warna gambar, pendeteksi bentuk gambar, pendeteksi kata kunci situs web, dan penyaringan menggunakan Domain Name System (DNS). Pendeteksian situs pornografi menggunakan



deteksi



kata



kunci



pada



isi



situs



web



lebih



mudah



diimplementasikan karena tidak membutuhkan server tambahan untuk mengelola DNS. Kata kunci



pada halaman situs web mewakili isi konten pada situs web



1



sehingga melakukan pemblokiran situs web berdasarkan kata kunci dapat dilakukan.



2



2



Teknologi Screenshot dan Optical Character Recognition (OCR) dapat dimanfaat untuk membuat aplikasi blokir pornografi dengan cara mendeteksi kata kunci pada isi situs web. Teknologi screenshot digunakan untuk menangkap isi konten termasuk kata kunci pada situs web yang sedang dibuka. Optical Character Recognition (OCR) merupakan teknologi yang digunakan untuk mengkonversi gambar menjadi teks sehingga dapat dimanfaatkan untuk mengkonversi gambar hasil screenshot menjadi teks agar mudah mengidentifikasi kata kunci yang terdapat pada isi situs web tersebut. Latar belakang tersebut mendorong penulis untuk membuat aplikasi blokir akses situs pornografi menggunakan teknologi screenshot dan OCR. 1.2.



Batasan Masalah Penulis menetapkan beberapa batasan–batasan pada topik yang dibahas:



1. Aplikasi, secara otomatis, merekam gambar layar yang dibuka. 2. Aplikasi, secara otomatis, menutup laman situs web yang terindikasi memuat konten pronografi. 3. User wajib memiliki akun gmail. 4. User wajib memasukkan user id dan password. 5. User dapat menambahkan kata kunci. 6. Aplikasi ini menggunakan Bahasa Indonesia. 1.3.



Tujuan Tujuan yang akan dicapai adalah membangun aplikasi berbasis desktop



yang berfungsi memblokir akses situs yang memiliki konten pornografi menggunakan teknologi screenshot dan OCR. Aplikasi ini diharapkan dapat membantu orang tua dalam melindungi anak dan remaja dari paparan situs pornografi yang dapat diakses melalui VPN maupun tanpa VPN.



3



1.4.



Metode Penelitian Pengembangan aplikasi dilakukan menggunakan metode Software



Development Life Cycle (SDLC) dengan model waterfall. Tahap yang dilakukan: 1.



Analisis Kebutuhan Pada tahap ini dilakukan observasi masalah mengenai masalah konten pornografi yang ditemukan di internet, menentukan fungsi aplikasi yang ingin diterapkan, dan menentukan unsur–unsur yang diperlukan untuk membangun aplikasi.



2.



Perancangan Pada tahap ini dilakukan perancangan arsitektur program, perancangan fungsionalitas sistem, perancangan Use Case Diagram, perancangan alur program



menggunakan



flowchart,



perancangan



struktur



navigasi,



perancangan storyboard, dan perancangan basis data. 3.



Implementasi Tahap ini merupakan tahap pengerjaan projek berdasarkan hasil tahap perancangan. Tahap ini mencakup pembangunan sistem autentikasi Firebase, pembangunan basis data Sqlite, dan proses penyusunan kode program pada Visual Studio Code.



4.



Pengujian Pada tahap ini dilakukan uji coba program yang telah disusun pada tahap implementasi. Pengujian ini dilakukan menggunakan metode Black Box.



1.5.



Sistematika Penulisan Tulisan ilmiah ini dibagi menjadi 4 bab. Bab pertama menguraikan Latar



Belakang, Batasan Masalah, Tujuan, Metode Penelitian, dan Sistematika Penulisan. Bab kedua menguraikan Virtual Private Network (VPN), Screenshot, Optical Character Recognition (OCR), Pornografi, Python, Sqlite, Firebase Authentication, Thread, Visual Studio Code, Figma, Algoritma, Unified Modeling Language (UML), Struktur Navigasi, Metode Black Box, dan System Development Life Cycle (SDLC). Bab ketiga menguraikan pelaksanaan penelitian



4



yang mencakup tahap Analisis Kebutuhan, Perancangan, Implementasi, dan Pengujian. Bab keempat menguraikan Kesimpulan dan Saran.



2. LANDASAN TEORI 2.1.



Virtual Private Network Virtual Private Network (VPN) adalah suatu teknologi yang digunakan



untuk mengakses Local Area Network (LAN) menggunakan server pihak ketiga melalui jaringan publik (internet). Teknologi VPN akan menyediakan jaringan yang bersifat private dan terenkripsi untuk menghubungkan user dengan alamat IP Server tujuan sehingga aliran data pada jaringan tersebut dapat terlindungi dari gangguan pihak ketiga seperti hacker. VPN memiliki 3 fungsi utama yaitu (Kurniadi, 2015): 1. Remote Access Remote Access merupakan kemampuan VPN untuk terhubung pada sebuah resource dari satu tempat ke tempat yang lain. VPN dapat terhubung sebuah resource melalui Internet Service Protocol (ISP) dari berbagai negara yang memungkinkan user terhubung situs yang tidak dapat diakses melalui ISP lokal. ISP adalah sebuah penyedia layanan internet yang digunakan untuk menyediakan akses jaringan internet untuk user. 2. Security VPN memiliki keamanan untuk melakukan otentikasi terhadap sumbersumber pengirim data yang akan diterimanya. VPN berguna untuk menganalisis sumber transaksi data yang mencegah masuknya data – data yang mencurigakan seperti malware dan program jahat lainnya. 3. Saving Cost Jalur transmisi data yang dilakukan VPN melalui jaringan internet. VPN menjamin keamanan melakukan transmisi data menggunakan jaringan internet tanpa perlu membangun jaringan privat sendiri.



5



6



Fungsi–fungsi VPN tersebut digunakan oleh sebuah perusahaan untuk mengirimkan data dari satu cabang kantor ke cabang kantor lainnya agar data yang dikirim terhindar dari pembajakan pihak luar dan menjamin keutuhan data hingga sampai ke tujuan. Selain perusahaan, masyarakat dapat menggunakan VPN gratis maupun berbayar melalui aplikasi VPN berbasis desktop maupun aplikasi VPN berekstensi yang digunakan oleh beberapa browser seperti Chrome, Opera, Mozilla, dan lain - lain. Beberapa dampak buruk penggunaan VPN yaitu mudahnya mengakses situs pornografi tanpa melalui pemblokiran. VPN menyebabkan user dapat mengakses situs pornografi melalui server pihak ketiga tanpa diketahui aturan ISP asal. ISP di beberapa negara memiliki hak untuk memblokir akses situs yang tidak diinginkan. Namun, VPN memberikan pilihan jalur ISP dari negara yang diinginkan. Cara kerja VPN yaitu melakukan enkripsi pada jaringan yang menyebabkan ISP tidak mengetahui permintaan (request) user oleh ISP. Gambar 2.1 dan Gambar 2.2 menggambarkan perbedaan akses situs pornografi tanpa VPN dan menggunakan VPN. Pada kasus ini, user berada di Indonesia menggunakan ISP Indonesia.



Gambar 2.1. Akses Situs Pornografi Tanpa Koneksi VPN



Gambar 2.2. Akses Situs Pornografi Menggunakan Koneksi VPN



7



Pada Gambar 2.1, user mengakses situs pornografi tanpa menggunakan VPN. Akses jaringan dimulai dari perangkat user menuju ISP Indonesia menggunakan jaringan yang tidak terenkripsi dan melakukan permintaan (request) menuju ke alamat server situs pornografi yang dituju. Akibatnya, ISP akan memblokir akses tersebut berdasarkan ketentuan dari ISP yang digunakan. Pemblokiran akses oleh ISP ini disebabkan karena tim KOMINFO telah menerapkan aturan pemblokiran situs pada setiap ISP di Indonesia. Pada Gambar 2. 2, user mengakses situs pornografi menggunakan koneksi VPN. Akses jaringan dimulai dari perangkat user menuju ISP Indonesia menggunakan jaringan yang terenkripsi VPN dan melakukan request menuju ke alamat server VPN yang dituju. Akibatnya, ISP akan meneruskan akses jaringan menuju server VPN di negara lain. Server VPN tersebut akan mengirimkan request kepada ISP yang digunakan oleh server VPN tersebut untuk mengakses alamat server pornografi yang dituju. 2.2.



Screenshot Screenshot adalah sebuah fungsi untuk menangkap tampilan layar



komputer dan mengonversi hasil tangkapan ke dalam file gambar. Pada penerapannya, user menggunakan fungsi screenshot untuk menampilkan kesalahan yang terjadi pada lembar kerja, melaporkan perkembangan hasil pekerjaan, dan mengambil isi konten dari suatu situs web. Fungsi screenshot dapat digunakan pada sistem operasi Windows dengan cara menggunakan tombol print screen atau menggunakan aplikasi pihak ketiga seperti Snipping Tools.



8



Gambar 2.3. Hasil Screenshot pada Web Browser 2.3.



Optical Character Recognition Optical Character Recognition atau (OCR) adalah cabang dari Ilmu



Komputer yang melibatkan sistem pembacaan teks dari kertas maupun gambar ke dalam bentuk yang dapat dimanipulasi oleh komputer (contohnya, format kode ASCII). Teknologi OCR memungkinkan untuk menerjemahkan atau mendapatkan isi teks yang terdapat pada artikel maupun kertas yang memiliki karakter yang dikenali oleh komputer. Contoh perangkat lunak OCR atau dikenal sebagai OCR engine yaitu Tesseract, GOCR, ABBY FineReader, dan HOCR. Alur proses pada OCR dibagi menjadi beberapa tahap (Isheawy dan Hasan, 2015): 1. Preprocessing Pada



tahap



ini



dilakukan



perbaikan



kualitas



pada



gambar



tanpa



menghilangkan beberapa informasi di dalamnya. Tujuannya agar karakter yang terdapat di dalam gambar mudah dikenali dan meningkatkan keakuratan dalam pengenalan karakter. Tahap preprocessing terdiri dari beberapa sub proses seperti Binarization/Thresholding, Noise Reduction, Skew Correction, Morphological Operations, dan Thinning/Skeletonisation (Tabel 2.1). Tabel 2.1 Deskripsi Sub Proses Tahap Preprocessing Proses Binarization / Thresholding Noise Reduction



Deskripsi Memisahkan objek foreground dan background dengan mengubah gambar menjadi hitam putih. Mengurangi noise untuk meningkatkan kualitas gambar.



9



Skew Correction Morphological Operations Thinning/ Skeletonization



Perbaikan pada tingkat kemiringan gambar atau rotation. Menambahkan atau menghapus piksel pada karakter yang memiliki lubang atau kelebihan piksel. Proses menipiskan ukuran lebar sebuah teks.



2. Segmentation Tahap ini dibagi menjadi 2 macam yaitu tahap document segmentation dan text segmentation. Pada tahap document segmentation dilakukan proses klasifikasi gambar menjadi bagian–bagian yang homogen. Proses klasifikasi yang terdapat pada document segmentation membagi informasi–informasi yang terdapat pada gambar seperti gambar, teks, dan tabel. Sedangkan pada tahap text segmentation, teks pada gambar dipisahkan berdasarkan antar baris, kemudian berdasarkan kata, dan kemudian berdasarkan karakter sehingga masing–masing objek pada teks menjadi terisolasi. 3. Normalization Tahap segmentation menghasilkan matriks m * n dari gambar yang diproses. Kemudian pada tahap normalization matriks tersebut akan dilakukan normalisasi dengan cara mengecilkan ukuran matriks dan menghilangkan beberapa informasi yang tidak dibutuhkan tanpa menghilangkan informasi penting (Isheawy dan Hasan, 2015). 4. Feature Extraction Tahap ini digunakan untuk mengidentifikasi fitur-fitur pada karakter seperti komponen garis dan sudut. Tujuan tahap ini yaitu memudahkan untuk membedakan antar karakter sehingga memudahkan dalam proses klasifikasi. Proses ini akan membedakan apakah karakter tersebut adalah angka, simbol, atau huruf. 5. Classification Pada tahap ini dilakukan proses klasifikasi model dari setiap karakter secara spesifik. Tahap klasifikasi ini akan mencocokan model karakter yang di dapat dengan model karakter pada dataset. 6. Postprocessing



10



Pada tahap ini dilakukan koreksi ejaan bahasa pada hasil karakter yang telah dihasilkan oleh OCR dan memberikan opsi untuk memperbaiki ejaan karakter hasil OCR dengan daftar kamus bahasa yang tersedia. 2.3.1. Tesseract OCR Tesseract OCR adalah sebuah OCR engine yang bersifat open source. Tesseract OCR dapat diimplementasikan di berbagai platform seperti web, Android, IOS, dan desktop. Tesseract OCR mendukung lebih dari 100 bahasa manusia dari berbagai negara. Gambar 2.4 menampilkan arsitektur pada Tesseract OCR.



Gambar 2.4. Arsitektur Tesseract OCR (Sumber : Ch, Manha, dan Kashyap, 2015) 1. Adaptive Thresholding Adaptive Thresholding pada Tesseract OCR adalah tahap konversi gambar menjadi format binary image. Binary image akan menghasilkan gambar berwarna hitam dan putih. Tahap ini merupakan bagian dari proses Binarization.



11



(a) Sebelum Adaptive Thresholding



(b) Setelah Adaptive Thresholding



Gambar 2.5. Adaptive Thresholding 2. Connected Component Analysis Connected Component Analysis merupakan tahap ekstraksi teks pada dokumen atau gambar. Tahap ini bertujuan untuk mendapatkan komponen yang berisi teks dan memisahkan komponen teks dengan komponen lainnya yang terdapat pada dokumen atau gambar. Hasil output pada tahap ini akan menghasilkan format Binary Large Object (BLOB) yang menyimpan banyak data dari teks yang dikenali. 3. Find Text Lines and Words Tahap ini akan memisahkan beberapa kata dan baris pada isi teks. Baris pada teks akan dipecah menjadi beberapa kata dengan menganalisis jarak spasi pada karakter. 4. Recognize Word Pass 1 Tahap ini akan mengenali bentuk karakter pada kata dengan model data yang terdapat pada Tesseract OCR. Karakter yang berhasil dikenali pada tahap ini akan menjadi training set dan masuk pada tahap Adaptive Classifier. Tahap Adaptive Classifier akan mengenali beberapa kata pada isi teks di bagian paling bawah dokumen atau gambar.



12



5. Recognize Word Pass 2 Tahap ini bertujuan untuk meningkatkan akurasi hasil pada proses pembacaan karakter. Beberapa karakter yang tidak dapat dikenali atau tidak dikenali secara sempurna akan diproses pada tahap ini untuk dikenali secara ulang. 2.4.



Pornografi Pornografi menurut Undang–Undang RI Nomor 44 Tahun 2008 adalah



gambar, sketsa, ilustrasi, foto, tulisan, suara, bunyi, gambar bergerak, animasi, kartun, percakapan, gerak tubuh, atau bentuk pesan lainnya melalui berbagai bentuk media komunikasi dan/atau pertunjukan di muka umum, yang memuat kecabulan atau eksploitasi seksual yang melanggar norma kesusilaan dalam masyarakat. (Kementerian Hukum dan Hak Azasi Manusia, 2008). Pornografi memuat konten yang bermuatan seksual yang dapat membangkitkan nafsu birahi seperti adegan aktivitas seksual, alat seksual, dan aktivitas penyimpangan seksual. Penyebaran muatan pornografi saat ini dilakukan melalui berbagai media, seperti buku, musik, cerita, dan internet. Muatan pornografi dapat memberikan dampak negatif karena dapat menyebabkan kecanduan. Hal ini disebabkan efek pornografi yang merusak bagian otak yang bernama prefontal cortex (PFC) yang berfungsi sebagai pusat pengendalian diri (Muller, 2018). Pornografi akan merangsang zat dopamine secara berlebihan pada pusat limbik sehingga memberikan efek kepuasan berlebihan sehingga otak tidak diberikan kesempatan untuk berpikir pada hal–hal lainnya selain pornografi (Muller, 2018). Efek kecanduan ini mirip seperti kecanduan kokain, alcohol, dan nikotin (Kimball dan Salber, 2020). Dampak lainnya yang diakibatkan oleh pornografi yaitu dapat meningkatkan keinginan untuk melakukan penyimpangan seksual dan pelecehan seksual (Anggraini dan Maulidya, 2020). Sebuah situs dapat diketahui isi kontennya berdasarkan kata kuncinya. User dapat mengakses situs yang bermuatan pornografi jika user mengakses kata kunci yang mengandung pornografi pada mesin pencari dengan domain luar negeri (contoh: google.co.uk) dan mengakses alamat domain atau IP address situs



13



web pada address bar dengan bantuan Virtual Private Network (VPN). Beberapa contoh kata kunci yang dapat mewakili isi konten pornografi adalah ‘Sex, ‘Porn’, ‘Bokep’, ‘Memek’, ‘Toket’, ‘Meki’, ‘Jav’. Beberapa contoh situs web yang memiliki



konten



pornografi



adalah



www.xnxx.com,



www.xvideos.com,



www.pornhub.com, www.javhihi.com. 2.5.



Python Python merupakan bahasa pemrograman tingkat tinggi yang bersifat open



source, artinya user memiliki kebebasan untuk melakukan modifikasi pada bahasa Python untuk berbagai keperluan. Bahasa pemrograman Python dapat membuat aplikasi web, desktop, mobile programming, image processing, IOT, dan lain – lain sehingga bahasa ini bersifat general purpose. Keunggulan dari bahasa ini adalah sifat Imperative Programming, Functional Programming dan Object Oriented Programming (OOP) (Grover, 2019). 1. Imperative Programming Paradigma ini memungkinkan user untuk mendeskripsikan logika secara terurut untuk mencapai suatu tujuan. Sebagai contoh, program untuk menjumlahkan bilangan di dalam suatu array bernama “angka” dengan menggunakan paradigma imperative programming: angka = [10, 20, 30, 40] total = 0 for angka in angka: total += angka print(total)



Untuk menjumlahkan bilangan pada array bernama “angka“, user harus mendeklarasikan terlebih dahulu isi anggota pada array “angka“ dan mendeklarasikan variabel “total“ untuk menampung hasil penjumlahan. Kemudian user harus membuat perulangan untuk menjumlahkan tiap anggota array “angka“. Pada langkah terakhir, user harus membuat fungsi untuk mencetak isi variabel “total“ agar dapat ditampilkan pada layar. 2. Functional Programming



14



Paradigma ini memungkinkan user memanggil sebuah fungsi dari modul Python atau fungsi yang dibangun user untuk mencapai suatu tujuan. Sebagai contoh, program untuk menjumlahkan bilangan di dalam suatu array bernama “ angka ” dengan menggunakan paradigma functional programming: angka = [10, 20, 30, 40] print(sum(angka))



Pada paradigma ini, user tidak perlu menjabarkan langkah–langkah penyelesaian secara terurut untuk menjumlahkan anggota pada array “angka“. User cukup memanggil fungsi print yang diberi parameter pemanggilan fungsi “sum“ yang memiliki parameter variabel array “angka“ untuk mencetak hasil ahkir yang diproses oleh fungsi asli dari modul Python. 3. Object Oriented Programming Paradigma ini membawa konsep class dan object nyata ke dalam logika pemrograman. Class merupakan sebuah blueprint atau kerangka dari sebuah object yang memuat atribute dan behavior. Object merupakan hasil instansiasi dari class yang nantinya dapat memanggil isi dari class tersebut seperti attribute dan behavior. Sebagai contoh, program untuk mengurangkan bilangan di dalam suatu array bernama “angka” dengan menggunakan paradigma OOP: class kalkulator : angka2 = [1,2,3,4] def kurang(self, arr): total = 0 for angka in arr: total -= angka return total kalk = kalkulator() angka = [10, 20, 30, 40] print(kalk.kurang(angka)) print(kalk.kurang(kalk.angka2))



Pada penggalan program di atas, variabel “kalk” merupakan variabel object dari class bernama “kalkulator”. Pada kelas yang bernama “kalkulator“ terdapat variabel attribute yang ditunjukan oleh variabel “angka2“ dan behavior yang ditujukkan pada fungsi bernama “kurang“. Paradigma OOP



15



memudahkan user dalam membangun aplikasi yang cukup besar karena konsep OOP memudahkan untuk mengelompokan masalah–masalah besar pada aplikasi yang ingin dibangun. 2.5.1. Indentasi Indentasi adalah sebuah penulisan dengan bentuk tulisan yang menjorok ke arah kanan. Penulisan program pada Python harus memperhatikan indentasi sebagai pembeda antara isi sub program dengan sub program lainnya. Setiap sub program dapat berisi kumpulan statement program yang berisi instruksi – instruksi tertentu. Identasi akan membedakan antara statement program yang berada di dalam kelas dengan statement yang berada di luar kelas. Identasi pada Python dapat digunakan dengan cara menekan tombol tab atau menekan tombol spasi. Contoh penggunaan identasi pada Python adalah sebagai berikut. Class A :



Def __init__ (self) :



2.5.2. Operator Operator adalah simbol atau tanda yang digunakan untuk menghasilkan sebuah hasil dari kedua operand (data) atau lebih. Operator diletakan diantara 2 operand sehingga operator digunakan sebagai penghubung operand. Operator dapat digunakan untuk menghubungkan beberapa teks yang terpisah. Penjelasan operator pada Python akan dijabarkan sebagai berikut: 1. Operator Aritmatika Operator aritmatika digunakan untuk mengoperasikan operasi matematika seperti penjumlahan, pengurangan, perkalian, dan pembagian. Operator aritmatika diterapkan pada operand yang dapat menghasilkan perhitungan matematis (Gambar 2.6).



16



Gambar 2.6. Operator Aritmatika pada Python (Sumber: Shovic dan Simpson, 2019) 2. Operator Perbandingan Operator perbandingan digunakan untuk membandingkan nilai operand yang menghasilkan nilai ahkir berupa True atau False. Operator ini digunakan pada struktur kontrol seperti percabangan dan perulangan (Gambar 2.7). 3. Operator Boolean Operator boolean digunakan untuk membandingkan nilai True atau False yang akan menghasilkan nilai ahkir berupa True atau False. Operator boolean digunakan untuk membandingkan banyak nilai True atau False yang dihasilkan dari operasi perbandingan sehingga akan tercipta sebuah keputusan pada struktur kontrol (Gambar 2.8).



17



Gambar 2.7. Operator Perbandingan pada Python (Sumber: Shovic dan Simpson, 2019)



Gambar 2.8. Operator Boolean pada Python (Sumber: Shovic dan Simpson, 2019) 2.5.3. Struktur Kontrol Struktur kontrol merupakan kumpulan blok program yang digunakan sebagai pengambilan keputusan dasar pada komputasi pada aplikasi. Strukur kontrol menentukan alur aplikasi ketika aplikasi sedang dijalankan. Python memiliki 2 macam struktur kontrol dasar yaitu percabangan dan perulangan. 1. Percabangan digunakan untuk menentukan alur program berdasarkan hasil kondisi yang diberikan pada percabangan tersebut. Hasil kondisi dapat memiliki nilai True atau False. Percabangan pada Python memiliki sintaks dasar seperti berikut: If < kondisi > :



Elif < kondisi > :



Else :



18



2. Perulangan Perulangan digunakan untuk mengeksekusi perintah pada kode program secara berulang – ulang sesuai dengan kondisi yang telah ditentukan. Perulangan dapat menghemat waktu dalam pembuatan aplikasi karena user tidak perlu membuat perintah aplikasi secara berulang – ulang. Perulangan Python terdiri dari 2 macam yaitu perulangan For dan perulangan While. a. Perulangan For Perulangan ini digunakan untuk mengulang blok program atau statement program sebanyak batas jumlah perulangan yang telah ditentukan sebelumnya. Perulangan ini dapat digunakan ketika



user ingin



memasukkan atau menjabarkan nilai array secara terurut. Perulangan For Percabangan pada Python memiliki sintaks dasar seperti dibawah ini. For < variabel_iterasi > in range (< banyak_perulangan >) :



b. Perulangan While Perulangan ini digunakan untuk mengulang blok program atau statement program selama kondisi yang ditentukan bernilai benar atau True. Perulangan ini dapat digunakan ketika user ingin menggunakan infinite loop atau perulangan tanpa batas. Perulangan While Percabangan pada Python memiliki sintaks dasar seperti dibawah ini. While < kondisi > : < statement_program >



2.5.4. List, Tuple, dan Dictionary List, Tuple, dan Dictionary merupakan tipe data yang digunakan untuk menyimpan lebih dari 1 nilai pada entitas yang sama. List dan Dictionary memiliki sifat mutable, artinya nilainya dapat dimodifikasi oleh user. Dictionary memiliki sifat immutable, artinya nilainya tidak dapat dimodifikasi oleh user. 1. Bentuk umum List pada Python adalah sebagai berikut : < Variabel_List > = [< nilai ke 0 >, < nilai ke 1 >,…., < nilai ke n >]



19



2. Bentuk umum Tuple pada Python adalah sebagai berikut : < Variabel_Tuple > = (< nilai ke 0 >, < nilai ke 1 >,…., < nilai ke n >)



3. Bentuk umum Dictionary pada Python adalah sebagai berikut : < Variabel_Dictionary > = {< kata_kunci > : < nilai ke 0 >, < kata_kunci > : < nilai ke 1 >,…., {< kata_kunci > : < nilai ke n >}



2.5.5. Function dan Method Function (fungsi) dan method pada Python digunakan untuk memisahkan blok perintah yang terdapat pada aplikasi sehingga membuat struktur kode menjadi lebih rapih. Function dapat didefinisikan di dalam kelas maupun di luar kelas. Function di dalam kelas akan berubah istilahnya menjadi method. Method di dalam kelas disebut sebagai behavior objek pada konsep pemrograman berbasis objek. Perbedaan dari function dan method terletak pada namanya saja. Sifat Function dibagi menjadi 2 jenis yaitu function yang dapat mengembalikan nilai dan tidak dapat mengembalikan nilai. Function yang dapat mengembalikan nilai ditandai dengan adanya perintah return. Sedangkan untuk function yang tidak mengembalikan nilai tidak terdapat kata kunci return. Function dapat diberi variabel parameter yang digunakan untuk mengoper nilai data dari luar function ke dalam function. Method pada kelas wajib mengoper kata kunci self pada parameter nya yang berfungsi sebagai identitas bahwa method tersebut merupakan anggota dari kelas. 1. Bentuk umum Function yang mengembalikan nilai adalah sebagai berikut: Def < nama_function > ( ) : < statement_program > Return nama_variabel



2. Bentuk umum Function yang tidak dapat mengembalikan nilai adalah sebagai berikut: Def < nama_function > ( ) : < statement_program >



20



2.5.6. Library Library merupakan kumpulan modul – modul berisi function dan variabel program yang terpisah. Library digunakan untuk membantu user untuk mengembangkan sebuah aplikasi secara cepat dan mudah. Python memiliki 2 jenis library yaitu standard library dan external library. Standard library merupakan library yang telah disediakan oleh Python tanpa harus mengunduhnya terlebih dahulu. Sedangkan external library merupakan library yang tidak disediakan oleh Python dan harus diunduh terlebih dahulu. 1. Bentuk umum pemanggilan modul library untuk semua modul adalah sebagai berikut: Import < nama_library >



2. Bentuk umum pemanggilan modul pada library adalah sebagai berikut: From < nama_modul > import < nama_kelas >



Atau: Import < nama_folder >.< nama_modul >



3. Bentuk umum pemanggilan library dengan pembungkusan nama identifier untuk pemanggilan modul. Identifier adalah sebuah nama identitas yang dapat didefinisikan oleh user sebagai bentuk pembeda dengan statement program lain. Import < nama_modul > as < nama_identifier >



4. Bentuk umum perintah Command Prompt (CMD) untuk menginstal External library pada Python adalah sebagai berikut. Pip install < nama_library >



2.5.6.1. Pytesseract Pytesseract



merupakan



sebuah



external



library



Python



yang



menyediakan fasilitas Google’s Tesseract OCR Engine pada pengembangan aplikasi menggunakan bahasa Python. Pytesseract mendukung pembacaan file gambar yang didukung oleh image processing library seperti Pillow dan



21



Leptonica. Jenis-jenis format gambar yang dapat dibaca yaitu JPEG, PNG, GIF, BMP, TIFF, dan lain-lain. Gambar 2.9. menggambarkan contoh kode program yang menggunakan Pytesseract untuk mendapatkan teks pada Gambar 2.10. Teks yang merupakan output digambarkan pada Gambar 2.11. 1. Bentuk umum perintah untuk menginstal Pytesseract pada Python adalah sebagai berikut: Pip Install Pytesseract



2. Bentuk umum pemanggilan Pytesseract pada Python adalah sebagai berikut: Import Pytesseract



Gambar 2.9. Contoh Program Menggunakan Pytesseract



Gambar 2.10. Input Hasil Gambar Screenshot Sebuah Situs Web



Gambar 2.11. Output Program 2.5.6.2. Multiple Screen Shots dan Pillow Multiple Screen Shots (MSS) merupakan sebuah external library Python yang menyediakan fasilitas screenshot pada tampilan layar secara berulang – ulang. MSS menyimpan hasil screenshot dengan tipe data PNG. MSS dapat digunakan pada aplikasi games dan aplikasi lain yang membutuhkan fitur



22



screenshot yang cepat dan teroptimisasi. MSS dapat terintegrasi dengan external library lainnya seperti PIL yang bertugas untuk menangkap piksel gambar pada layar tanpa harus menyimpan file gambarnya terlebih dahulu. Pillow (PIL) merupakan sebuah library bahasa Python yang menyediakan fasilitas image processing yaitu sebuah kegiatan memanipulasi gambar. PIL mendukung pemrosesan data gambar berupa format JPEG, PNG, BMP, GIF, PPM, dan TIFF. 1. Bentuk umum perintah untuk menginstal MSS pada Python adalah: Pip install mss



2. Bentuk umum pemanggilan library MSS pada Python adalah: Import mss



3. Contoh penggalan program penggunaan library MSS dan library PIL: From PIL import Image Import mss With mss.mss () as sct : for num, monitor in enumerate(sct.monitors[1:], 1) : sct_img = sct.grab(monitor) img = Image.frombytes("RGB", sct_img.size, sct_img.bgra, "raw", "BGR X")             text = test.image_to_string (img).lower ()



2.5.6.3. Tkinter Tkinter merupakan sebuah standard library Python yang digunakan untuk membangun sebuah aplikasi berbasis Graphical User Interface (GUI) berbasis desktop. Tkinter mendukung berbagai macam platform seperti Windows, macOS, dan Linux. Elemen – elemen visual pada Tkinter ditampilkan berdasarkan dari tampilan platform dari sistem operasi yang digunakan. Tkinter memiliki modul yang bernama ttk yang berisi sekumpulan komponen–komponen widget untuk membangun aplikasi berbasis GUI. Modul ini berisi 19 komponen widget yang terdiri dari: 1. Button: Komponen yang memberikan aksi pada aplikasi. 2. Checkbutton: Komponen yang memberikan opsi data lebih dari satu kepada user. User diperbolehkan memilih opsi data lebih dari satu pada aplikasi.



23



3. Entry: Komponen yang menerima masukkan user pada aplikasi. 4. Frame: Komponen yang memisahkan sekumpulan widget agar menjadi lebih terorganisasi. 5. Label: Komponen yang menampilkan suatu informasi pada aplikasi. 6. LabelFrame: Komponen yang berisi frame yang memiliki label. 7. Menubutton: Komponen button yang memiliki drop-down menu. 8. PanedWindow: Komponen window yang dapat penampung banyak panel dan dapat diatur dengan cara melakukan drag secara vertikal dan horizontal. 9. Radiobutton: Komponen yang memberikan opsi data lebih dari satu. 10. Scale: Komponen yang mengizinkan user mengatur sebuah nilai pada aplikasi. 11. Scrollbar: Komponen yang memiliki kemampuan untuk menampilkan tampilan bagian bawah halaman. 12. Spinbox: Komponen yang mengatur besaran nilai dengan melakukan klik pada button kecil atas dan bawah di sebelah kanan. 13. Combobox: Komponen yang memberikan opsi data lebih dari satu kepada user. Komponen ini menampilkan opsi data dengan tampilan menu dropdown. 14. Notebook: Komponen yang menampung beberapa panel yang dibungkus sebuah tombol untuk mengaksesnya. 15. Progressbar: Komponen yang digunakan untuk menampilkan perkembangan proses yang dilakukan pada aplikasi. 16. Separator: Komponen yang digunakan untuk memisahkan beberapa komponen dari komponen lainnya. 17. Sizegrip: Komponen yang digunakan untuk mengatur ukuran top - level window pada aplikasi. 18. TreeView: Komponen yang menampilkan data secara hirarki. 19. Canvas: Komponen yang digunakan untuk menampilkan gambar. Bentuk umum pemanggilan library Tkinter adalah: from tkinter import *



Bentuk umum pembuatan window menggunakan library Tkinter adalah:



24



from tkinter import * variabel_tk = Tk () variabel_tk.mainloop ()



2.5.6.4. Pyinstaller Pyinstaller adalah sebuah external library Python yang digunakan untuk melakukan konversi dari modul Python atau Python file (.py atau .pyw) menjadi executable file. Executable file tidak perlu diterjemahkan melalui interpreter atau compiler ketika dijalankan. Sedangkan Python file harus melakukan terjemahan melalui interpreter dari Python terlebih dahulu. 1. Bentuk umum perintah pada Command Prompt untuk menginstal Pyinstaller adalah: Pip install Pyinstaller



2. Bentuk umum perintah pada Command Prompt untuk mengubah modul Python menjadi executable file adalah: Pyinstaller



2.5.6.5. Pyrebase4 Pyrebase4 merupakan sebuah external library Python yang digunakan untuk menghubungkan aplikasi dengan layanan Firebase. Pyrebase mendukung semua fasilitas pada Firebase seperti authentication, realtime database, dan cloud storage. 1. Perintah untuk menginstal Pyrebase4 pada Command Prompt adalah: Pip Install Pyrebase4



2. Perintah untuk memanggil Pyrebase4 pada aplikasi adalah: Import Pyrebase



3. Contoh program untuk menghubungkan aplikasi dengan layanan Firebase menggunakan Pyrebase4.



25



Import Pyrebase = { "apiKey": "AIzaSyB-Hk41XUd8KT8WqUMkpvEih91rVBekMc0", "authDomain": "bkd2020-89e7d.firebaseapp.com", "databaseURL": "https://bkd2020-89e7d.firebaseio.com", "projectId": "bkd2020-89e7d", "storageBucket": "bkd2020-89e7d.appspot.com", "messagingSenderId": "42323350809", "appId": "1:42323350809:web:aacffc1dbf513100ede188", "measurementId": "G-BCNTHQB382" } = pyrebase.initialize_app ()



4. Bentuk



umum



pemanggilan



fasilitas



Authentication



pada



Firebase



menggunakan Pyrebase4 adalah: = firebase.auth ()



5. Bentuk umum pemanggilan fasilitas Realtime Database pada Firebase menggunakan Pyrebase4 adalah: = firebase.database ()



6. Bentuk umum pemanggilan fasilitas Cloud Storage pada Firebase menggunakan Pyrebase4 adalah: = firebase.storage ()



2.5.6.6. Sqlite3 Sqlite3 merupakan sebuah standard library Python yang digunakan untuk menghubungkan aplikasi dengan layanan Sqlite. Sqlite3 mendukung perintah Sqlite seperti Data Manipulation Language (DML) dan Data Definition Language (DDL). Sqlite memiliki dari 2 function penting yang wajib dipanggil yaitu connect dan cursor. Connect merupakan function yang digunakan untuk mengkoneksikan file basis data yang telah dibuat menggunakan Sqlite3. Sedangkan cursor merupakan function yang digunakan untuk memanggil perintah DML dan DDL pada Sqlite3. 1. Contoh kode program pemanggilan connect dan cursor pada library sqlite3:



26



Import sqlite3 = sqlite3.connect ('app.db') = .cursor()



2. Contoh kode program pemanggilan perintah DML dan DDL: Import sqlite3 = sqlite3.connect ('app.db') = .cursor () .execute('''CREATE TABLE stocks (date text, trans text, symbol text, qty real, price real)''') .execute("INSERT INTO stocks VALUES ('2006-0105','BUY','RHAT',100,35.14)") conn.commit() conn.close()



2.5.6.7. Pyautogui Pyautogui merupakan sebuah external library Python yang digunakan untuk menyediakan fasilitas kontrol otomatis berupa perintah keyboard atau mouse pada aplikasi desktop. Pyautogui dapat digunakan untuk membuat aplikasi desktop yang dapat berinteraksi dengan aplikasi desktop lain. Pyautogui mendukung sistem operasi Windows, macOS, dan Linux. Beberapa fitur yang ditawarkan oleh Pyautogui yaitu menggerakan pointer mouse, melakukan klik, mengambil Screenshot, dan mengetikan input pada keyboard secara otomatis. 1. Perintah untuk menginstal Pyautogui pada Command Prompt: Pip Install Pyautogui



2. Perintah untuk memanggil library Pyautogui pada aplikasi: Import Pyautogui



3. Contoh program sederhana untuk mengaktifkan perintah tutup aplikasi setiap aplikasi desktop lain ingin dibuka. Import Pyautogui While True : pyautogui.FAILSAFE = False pyautogui.hotkey(alt,'f4') pyautogui.keyUp('alt') pyautogui.keyUp('f4')



27



2.5.7. Kelas Kelas (class) merupakan sebuah blueprint / rancangan sebuah dari sebuah objek pada konsep pemrograman berbasis objek (OOP). Kelas terdiri dari komponen penyusun pembentuk objek seperti attribute dan behavior. Attribute dan Behavior pada suatu kelas dapat diakses oleh kelas lain dengan membuat instansiasi objek kelas yang ingin diakses. Python mengizinkan user membuat kelas lebih dari satu pada satu skrip program Python dan memanggilnya pada modul Python lain menggunakan perintah import dan from. Sistem kelas ini akan memudahkan user dalam membagi masalah program menjadi lebih sederhana. 1. Bentuk umum pembuatan kelas: Class < nama_kelas> :



2. Bentuk umum instansiasi objek dari kelas: Class < nama_kelas> :



< nama_objek > = < nama_kelas > ()



2.5.8. Konstruktor Konstruktor adalah sebuah method yang dijalankan ketika sebuah objek dari suatu kelas diinstansiasi. Kegunaan dari konstruktor adalah menginisialisasi attribute pada kelas ketika objek terbentuk. Konstruktor ditandai dengan penggunaan kata kunci init dan memilki parameter self. Setiap kelas hanya memiliki 1 konstruktor saja dan konstruktor tidak memiliki identifier sendiri. Bentuk pemanggilan method konstruktor menggunakan identifier dari nama kelas itu sendiri. 1. Bentuk umum pembuatan method konstuktor adalah sebagai berikut. Class < nama_kelas> : Def __init__ (self) :



2. Contoh program yang menggunakan method konstruktor adalah sebagai berikut.



28



Class Tes : Def __init__ (self) : self.nama = ‘Dimas’ print (self.nama) obj = Tes ()



Output dari program ini : Dimas



2.5.9. Inheritance Inheritance merupakan sebuah sub konsep yang terdapat pada konsep pemrograman berbasis objek yang mengizinkan kelas turunannya menerima properti (attribute dan behavior) dari kelas yang menurunkannya. Konsep inheritance ini terdapat 2 macam kedudukan kelas yaitu parent class dan child class. Parent class adalah kelas yang mewarisi propertinya kepada child class, sedangkan child class merupakan sebuah kelas yang menerima pewarisan properti dari parent class. Penjelasan inheritance dapat dijelaskan pada gambar dibawah ini.



Gambar 2.12. Konsep Inheritance pada Class Diagram Pada gambar 2.12, terdapat kelas “ Mamalia “ yang terhubung pada 2 kelas dibawahnya yaitu kelas “ Kuda “ dan “ Paus “. Kelas “ Mamalia “ disebut sebagai parent class karena kelas tersebut menurunkan propertinya pada kelas “



29



Kuda “ dan “ Paus “. Sedangkan kelas “ Kuda “ dan “ Paus “ disebut sebagai child class menerima sifat properti dari kelas “ Mamalia “. Konsep inheritance pada gambar 2.12. menggambarkan bahwa hewan mamalia memiliki sifat yang dapat diturunkan pada Kuda dan Paus karena kedua hewan tersebut termasuk hewan vertebrata (bertulang belakang), memilki paru – paru, umur, berat, dan jenis makan. Method atau behavior yang diturunkan antara lain bernafas, melahirkan, dan makan. Konsep inheritance akan memudahkan user dalam membuat aplikasi karena ketika user membuat kelas “ Kuda “ atau “ Paus “, user tidak perlu menginisialisasi properti dasar dari hewan mamalia secara keseluruhan. Contoh penerapan inheritance pada program Python dengan konsep class diagram seperti pada gambar adalah sebagai berikut : Class Mamalia : Def __init__ (self) : self.Vertebrata = True self.Paru_paru = True self.Umur = 0 self.Berat = 0 self.Jenis_makan = “” Def Bernafas (self) :



Def Melahirkan (self) :



Def Makan (self) :



Class Kuda (Mamalia) : Def __init__ (self) : self.Umur = 3 self.Berat = 49.9 self.kaki = 4 self.Kec_lari = 45 Def Berlari (self) :



30



Class Paus (Mamalia) : Def __init__ (self) : self.Umur = 24 self.Berat = 1000 self.sirip = True self.Kec_berenang = 60 Def Berenang (self) :



2.6.



Sqlite Sqlite adalah sebuah library dari bahasa C yang menyediakan fasilitas



penyimpanan basis data ringan tanpa membutuhkan proses server yang terpisah dan mengizinkan pengaksesan basis data menggunakan bahasa query SQL bersifat non standar. Sqlite memilki fasilitas dalam pengelolaan basis data seperti Data Manipulation Language (DML) dan Data Definition Language (DDL). Sqlite bersifat open source artinya user dapat menggunakannya secara gratis dan dapat dimodifikasi sendiri sesuai keinginan. Basis data yang disimpan oleh Sqlite bersifat offline dan disimpan melalui perangkat penyimpanan non volatile seperti Hard Drive. Beberapa aplikasi pengelola visual database Sqlite antara lain DB Browser, Sqlitestudio, Sqlite Maestro, Datapro, Sqlpro. Sqlite menerapkan model data berbasis relasional. Model data relasional adalah model basis data yang dibangun berdasarkan tabel yang terdiri dari baris dan kolom. Baris pada tabel mewakili isi record yang mengelompokan data secara horizontal sedangkan kolom mewakili isi field yang mengelompokan data secara vertikal. Record pada tabel terdiri dari sekumpulan field dan beberapa record yang tergabung akan membentuk sebuah tabel. 2.7.



Firebase Authentication Firebase Authentication merupakan sebuah layanan Google yang



menyediakan fungsionalitas dalam proses autentikasi user pada kegiatan sign in. Fungsional autentikasi yang terdapat pada Firebase meliputi verifikasi email, email reset, password reset, Simple Mail Transfer Protocol (SMTP), dan



31



verifikasi Short Message Service (SMS). Firebase Authentication memiliki fitur kustomisasi template pesan verifikasi yang akan dikirimkan kepada pengguna aplikasi. Beberapa metode sign in dan penyedia layanan yang didukung Firebase Authentication antara lain: Email / Password; Phone; Google; Game Center; Facebook; Twitter; GitHub; Yahoo; Microsoft; Apple; Anonymous. 2.8.



Thread Sebuah thread merupakan kumpulan rangkaian kode yang dieksekusi CPU



berdasarkan penjadwalan oleh CPU. Pada setiap program yang dibuat oleh user memiliki setidaknya 1 thread untuk dijalankan. Perancangan sebuah thread dapat didefinisikan secara otomatis melalui compiler/interpreter maupun oleh user sendiri. User dapat merancang beberapa thread agar dapat dijalankan secara bersamaan yang disebut juga sebagai multithreading. Multithreading bertujuan untuk membuat sebuah program yang dapat melakukan pekerjaan di latar belakang ketika program sedang melakukan pekerjaan lainnya. Contoh program yang menerapkan multithreading adalah program stopwatch. 2.9.



Microsoft Visual Studio Code Microsoft Visual Studio Code merupakan sebuah aplikasi code editor



ringan dan kuat yang dikembangkan oleh perusahaan Microsoft. Microsoft Visual Studio Code bersifat open source dan berjalan pada desktop platform yang mendukung sistem operasi Windows, macOS, dan Linux. Microsoft Visual Studio Code mendukung sintaks dari berbagai bahasa pemrograman yang dapat ditambahkan melalui ekstensi yang disediakan. Beberapa fitur Microsoft Visual Studio Code yang memudahkan user: 1. IntelliSense Fitur ini memberikan pilihan sintaks atau daftar member program secara otomatis berupa tampilan drop-down menu. Fitur ini juga memberikan info fungsi penggunaan sintaks yang ingin digunakan.



32



Gambar 2.13. Fitur IntelliSense pada Microsoft Visual Studio Code 2. Outline Fitur ini menampilkan komponen – komponen program yang digunakan pada proses pembuatan program seperti kelas dan member kelas (attribute dan method). Fitur ini memudahkan untuk mencari statement program yang ingin diubah tanpa perlu melakukan pencarian secara manual.



Gambar 2.14. Tampilan Outline pada Microsoft Visual Studio Code 3. Explorer Fitur ini menampilkan isi file dan folder projek program yang sedang dikerjakan. User tidak perlu membuka Windows Explorer untuk membuka modul program lain.



33



Gambar 2.15. Tampilan Explorer pada Microsoft Visual Studio Code 4. Terminal Microsoft Visual Studio Code memberikan pilihan terminal yang terinstal pada desktop dan dapat dijalankan tanpa perlu membuka terminal melalui luar aplikasi Microsoft Visual Studio Code.



Gambar 2.16. Tampilan Terminal pada Microsoft Visual Studio Code 5. Split Fitur ini digunakan untuk menampilkan lembar kerja aktif lebih dari satu. Fitur ini berguna ketika user ingin bekerja lebih dari satu file secara bersamaan.



34



Gambar 2.17. Tampilan Split pada Microsoft Visual Studio Code 2.10



Figma Figma merupakan sebuah aplikasi freeware berbasis browser yang



digunakan untuk membuat rancangan antar muka aplikasi. Figma menyediakan installer untuk platform Windows dan MacOS. User yang ingin bekerja menggunakan Figma harus memiliki akun Figma atau melakukan Sign In melalui akun Google. Figma bekerja dan menyimpan lembar kerja secara online dan offline. Beberapa fitur unggulan yang dimiliki oleh Figma yaitu memungkinkan 2 user atau lebih bekerja secara bersamaan sehingga mempercepat proses pengerjaan projek. Selain itu, Figma menyediakan fitur simulasi untuk berinteraksi terhadap objek–objek pada desain yang telah selesai dibuat. Fitur ini dapat memberikan gambaran ketika desain telah di terapkan pada aplikasi yang sedang berjalan. Beberapa fitur lain yang terdapat pada Figma: 1. Layer Fitur ini digunakan untuk memisahkan dan menggabungkan gambar berdasarkan konsep layering. Layering adalah konsep penggabungan gambar yang ditumpuk menjadi beberapa lapis.



35



Gambar 2.18. Tampilan Pengaturan Layer pada Figma 2. Design Fitur ini digunakan untuk memanipulasi gambar yang sedang dipilih oleh user. Beberapa fitur tambahan lainnya yaitu mengekspor atau meyimpan gambar ke dalam format gambar seperti PNG, JPG, SVG, dan PDF.



Gambar 2.19. Tampilan Pengaturan Design pada Figma 3. Prototype Fitur ini untuk merangkai interaksi dari objek–objek pada prototype dan menampilkannya dalam bentuk preview dengan bentuk layar pada perangkat yang tersedia.



36



Gambar 2.20. Tampilan Pengaturan Prototype pada Figma 4. Code Fitur ini memungkinkan user merancang prototype menggunakan bahasa pemrograman seperti CSS, Android, dan IOS.



Gambar 2.21. Tampilan Pengaturan Code pada Figma 2.11.



Algoritma Algoritma susunan yang logis dan sistematis untuk memecahkan suatu



masalah atau untuk mencapai tujuan tertentu. Instruksi-instruksi yang terdapat pada program dan aplikasi disusun menggunakan algoritma agar instruksi yang disusun mampu menghasilkan output yang diinginkan. Algoritma memberikan



37



gambaran mengenai masalah–masalah yang terjadi pada aplikasi sebelum aplikasi dibuat langsung. Beberapa ciri – ciri dari algoritma: 1. Input, Input adalah sesuatu yang ingin dipecahkan masalahnya. Algoritma dapat memiliki nol atau lebih jumlah input. 2. Output, Output merupakan hasil ahkir dari hasil pemrosesan algoritma. Algoritma dapat memiliki nol atau lebih jumlah output. 3. Instruksi jelas dan tidak ambigu, Instruksi pada algoritma harus jelas dan tidak memiliki makna ganda pada setiap instruksinya. Contoh kata yang bersifat ambigu yaitu “tampilkan“. Kata “tampilkan“ dapat memiliki makna yang bermacam–macam sehingga kata ini harus diperjelas menjadi “tampilkan x“. 4. Terbatas, Algoritma harus berhenti ketika telah menghasilkan suatu output. Algoritma tidak boleh berahkir dengan perulangan tanpa batas. 5. Efektif, Algoritma harus dirancang secara sederhana agar dapat dijalankan sesuai dalam waktu singkat dan masuk akal. 6. Dapat



diimplementasikan,



Algoritma



yang



dirancang



harus



dapat



diimplementasikan dalam berbagai bentuk bahasa dan memiliki output yang sama. Bentuk penyajian algoritma ditentukan berdasarkan kebutuhan dalam menyajikan algoritma kepada siapa sehingga orang yang tidak paham dalam bidang komputer dapat memahaminya. Secara garis besar algoritma pada pembuatan aplikasi disajikan dalam bentuk gambar dan tulisan. Bentuk penyajian algoritma berupa gambar yaitu dengan menggunakan diagram alir (flowchart). Sedangkan, bentuk penyajian berupa tulisan menggunakan pseudocode. 1. Flowchart Flowchart merupakan sebuah diagram yang memiliki aliran 1 atau 2 arah yang



berlaku



secara



sekuensial



dan



bekesinambungan.



Flowchart



menggambarkan alur algoritma yang dimulai dari atas ke bawah atau dimulai dari kiri ke kanan untuk mengahkiri. Beberapa simbol flowchart yang wajib diketahui:



38



a. Simbol Titik Terminal, digunakan untuk memulai (start) dan mengakhiri (stop) suatu proses pada algoritma.



Gambar 2.22. Simbol Titik Terminal b. Simbol Arus, digunakan untuk menghubungkan simbol dengan simbol lainnya. Simbol ini memberikan arah jalannya algoritma.



Gambar 2.23. Simbol Arus c. Simbol Proses, digunakan untuk menunjukan proses yang dilakukan pada komputer. Simbol ini dapat digunakan untuk mendeklarasikan suatu variabel ke dalam program.



Gambar 2.24. Simbol Proses d. Simbol Keputusan, digunakan untuk memilih salah satu proses berdasarkan kondisi yang ditentukan.



Gambar 2.25. Simbol Keputusan e. Simbol Proses Terdefinisi, digunakan untuk menunjukan proses pada bagian prosedur.



Gambar 2.26. Simbol Proses Terdefinisi f. Konektor (On - Page), digunakan untuk menyederhanakan hubungan antar simbol yang jaraknya berjauhan atau rumit dalam satu halaman. Gambar 2.27. Simbol Konektor (On - Page)



39



g. Konektor (Off – Page), digunakan untuk menyederhanakan hubungan antar simbol yang jaraknya berjauhan atau rumit dalam halaman yang berbeda.



Gambar 2.28. Simbol Konektor (Off - Page) 2. Pseudocode Pseudocode merupakan sebuah bentuk penyajian algoritma yang disajikan dalam bentuk kode–kode tertentu. Pseudocode menyajikan algoritma menggunakan struktur seperti bahasa pemrograman. Pseudocode berfokus pada pembuatan logika pemrograman tanpa harus mengikuti aturan bahasa pemrograman secara umum.



Gambar 2.29. Contoh Penyajian Algoritma Menggunakan Pseudocode (Sumber: Pradhan dan Bhende, 2019) Algoritma memiliki tiga struktur dasar yaitu algoritma sekuensial, algoritma perulangan, dan algoritma percabangan. Algoritma sekuensial adalah sebuah algoritma yang tersusun secara berurutan yang terdiri dari beberapa



40



instruksi. Algoritma sekuensial mengerjakan untuk satu perintah tanpa perulangan kemudian ke perintah selanjutnya hingga perintah terahkir. Algoritma perulangan adalah sebuah algoritma yang digunakan untuk mengulang perintah sebelumnya hingga sesuai dengan kondisi tertentu. Sedangkan algoritma percabangan merupakan sebuah algoritma yang terdiri dari beberapa keputusan sesuai dengan kondisi yang telah ditentukan.



Gambar 2.30. Algoritma Sekuensial



Gambar 2.31. Algoritma Percabangan



Pada Gambar 2.30, terdapat contoh flowchart yang menjelaskan algoritma program menghitung sebuah luas persegi. Terdapat Input berupa variabel “S“ yang digunakan untuk mendefinisikan panjang dari sisi persegi. Output yang dihasilkan adalah berupa tampilan hasil luas persegi yaitu nilai dari variabel “L”. Algoritma tersebut mengerjakan satu kali instruksi tanpa mengalami perulangan sehingga disebut sebagai algoritma sekuensial. Pada Gambar 2.31, terdapat contoh flowchart yang menjelaskan algoritma program melakukan verifikasi umur terhadap pembuatan SIM. Algoritma tersebut memiliki input berupa variabel “Umur“ yang digunakan untuk memberikan keputusan berdasarkan nilai dari variabel tersebut. Nilai “Umur“ yang kurang dari sama dengan 17 maka program akan menghasilkan output berupa pesan bahwa umur yang dimasukkan belum cukup. Output akan berubah



41



menjadi “cetak SIM“ jika variabel yang dimasukkan bernilai 17 atau lebih. Algoritma tersebut memiliki instruksi yang bercabang yang bergantung dari nilai variabel “Umur“ sehingga disebut sebagai algoritma percabangan.



Gambar 2.32. Algoritma Perulangan Pada Gambar 2.32, terdapat contoh flowchart yang menjelaskan algoritma program menghitung angka berdasarkan banyak pangkat yang didefinisikan. Algoritma tersebut memiliki input “Angka“, “Pangkat“, “Total“, dan “i“. Jumlah perulangan yang terdapat pada program bergantung pada banyaknya nilai pada variabel “i yang nilainya akan bergantung dengan banyaknya nilai pada variabel “Pangkat“. Setiap melakukan perulangan, program akan melakukan pertambahan 1 nilai pada variabel “i“. Perulangan akan berlanjut jika nilai “i“ kurang dari nilai “Pangkat“ dan perulangan akan berhenti jika nilai “i“ telah melebihi dari nilai



42



“Pangkat“. Algoritma tersebut memiliki alur yang memungkinkan untuk melakukan instruksi yang sama sehingga disebut sebagai algoritma perulangan.



2.12.



Unified Modelling Language Unified Modelling Language (UML) merupakan sebuah model grafik yang



memvisualisasikan sebuah sistem pengembangan perangkat lunak berbasis objek. UML digunakan untuk mendokumentasikan cara kerja sistem maupun kelas-kelas dalam perancangan aplikasi berbasis objek. UML memberikan kemudahan dalam melakukan maintenance karena spesifikasi dan kebutuhan dari sebuah aplikasi di dokumentasikan ke dalam UML. Penulis menggunakan Use Case Diagram untuk mendokumentasikan interaksi antara user dengan sistem pada aplikasi. Use Case Diagram adalah diagram proses yang merepresentasikan hal-hal yang dapat dilakukan oleh aktor dalam menyelesaikan sebuah pekerjaan (Manalu, 2015). Diagram ini menjabarkan peran–peran yang terjadi antara user dan sistem selama aplikasi digunakan. Use Case Diagram mempunyai beberapa komponen dengan fungsi–fungsi: 1. Use Case, merupakan komponen yang menjabarkan mengenai tingkah laku (behavior) yang terjadi antara aktor dan sistem. Penamaan Use Case diberikan menggunakan kata kerja.



Gambar 2.33. Simbol Use Case 2. Aktor, merupakan komponen berupa orang atau sistem lain yang berhubungan dengan Use Case dalam suatu sistem. Aktor diberi nama tepat di bawah simbol.



Gambar 2.34. Simbol Aktor



43



3. Asosiasi, merupakan simbol yang digunakan untuk menghubungkan komunikasi antara Use Case dengan Aktor.



Gambar 2.35. Simbol Asosiasi 4. Ekstensi, merupakan simbol yang digunakan untuk menambahkan relasi Use Case dengan Use Case lain. Arah panah pada simbol ekstensi mengarah pada Use Case yang ingin ditambahkan.



Gambar 2.36. Simbol Ekstensi 5. Include, merupakan simbol yang digunakan untuk menghubungkan Use Case yang membutuhkan Use Case lain untuk dijalankan. Arah panah simbol include mengarah pada Use Case yang dibutuhkan.



Gambar 2.37. Simbol Include 6. Generalisasi, merupakan sebuah simbol yang menghubungkan Use Case spesialisasi (khusus) dengan Use Case generalisasi (umum). Arah panah generalisasi menunjuk kepada Use Case generalisasinya (umum).



Gambar 2.38. Simbol Generalisasi 2.13.



Struktur Navigasi Struktur navigasi adalah struktur yang menggambarkan alur tampilan dari



sebuah aplikasi. Struktur navigasi digunakan untuk membuat sebuah aplikasi yang memiliki lebih dari satu tampilan. Penggunaan struktur navigasi disesuaikan dengan bentuk aplikasi yang akan dibuat. Struktur navigasi terdiri dari 4 macam: 1. Struktur Navigasi Linier



44



Struktur navigasi linier menggambarkan alur tampilan aplikasi berdasarkan satu rangkaian cerita yang menampilkan satu tampilan secara berurutan.



Gambar 2.39. Struktur Navigasi Linier



2. Struktur Navigasi Non-Linier Struktur



navigasi



non–linier



adalah



sebuah



struktur



navigasi



yang



menggambarkan alur tampilan aplikasi yang tidak berurutan dan mempunyai jalur yang bermacam–macam dari satu tampilan ke tampilan lainnya. Setiap tampilan pada struktur navigasi non – linier mempunyai kedudukan yang sama.



Gambar 2.40. Struktur Navigasi Non - Linier 3. Struktur Navigasi Hirarki Struktur navigasi hirarki atau disebut juga struktur bercabang adalah sebuah struktur navigasi yang membagi tampilan berdasarkan Master Page dan Slave Page. Master Page disebut juga sebagai halaman utama dan Slave Page disebut juga sebagai halaman pendukung. Struktur navigasi hirarki membentuk struktur pohon.



Gambar 2.41. Struktur Navigasi Hirarki 4. Struktur Navigasi Campuran



45



Struktur navigasi campuran adalah struktur navigasi yang menerapkan gabungan struktur navigasi linier, non–linier, dan hirarki. Struktur navigasi ini disebut juga sebagai struktur navigasi bebas. Struktur navigasi ini memungkinkan user membuat aplikasi menjadi lebih bebas berinteraksi antar tampilan.



Gambar 2.42. Struktur Navigasi Campuran 2.14.



Metode Black Box Metode Black Box adalah sebuah metode pengujian yang berfokus pada



pengujian fungsionalitas aplikasi tanpa harus mengetahui kode programnya. Metode Black Box hanya mengevaluasi input dan output dari suatu aplikasi ketika sedang dijalankan. Metode Black Box berfungsi untuk mengetahui output ketika diberikan berbagai input pada aplikasi tanpa harus mengetahui kode programnya. Pengujian yang dilakukan menggunakan metode Black Box ini meliputi pemeriksaan bugs / error, kesesuaian alur kerja aplikasi, dan pengujian fungsi – fungsi pada aplikasi.



Gambar 2.43. Contoh Tabel Uji Coba Metode Black Box (Sumber: Ningrum, dkk., 2019)



46



Berdasarkan pada Gambar 2.43, user menguji sebuah tampilan login pada aplikasi dengan memberikan beberapa input dengan harapan menghasilkan bentuk output yang berbeda–beda. Input yang valid diharapkan akan menampilkan pesan “berhasil login“ dan masuk ke dalam form data sekaligus menutup form login. Sedangkan



input yang tidak valid diharapkan akan menampilkan pesan



“username atau password salah“ dan menolak akses login untuk masuk ke dalam form data. Kolom Id menunjukan nomor identitas dari pengujian yang dilakukan. 2.15.



System Development Life Cycle System Development Life Cycle (SDLC) adalah kumpulan beberapa variasi



langkah–langkah pengembangan sistematis, perancangan, dan pemeliharaan (maintenance) dari projek aplikasi untuk memastikan persyaratan user terpenuhi dengan penggunaan sumber daya yang sedikit (Barjtya, Sharma, dan Rani, 2017). SDLC membantu para developer untuk mengembangkan sistem aplikasi yang sesuai dengan keinginan user. SDLC berisi siklus tahapan bagaimana cara mengembangkan, mendesain, dan memelihara projek aplikasi. Pemilihan SDLC umumnya disesuaikan dari kebutuhan projek yang ingin dibangun. Tahapan pada SDLC: 1. Analisis Kebutuhan Tujuan dari tahap ini yaitu mendapatkan informasi mengenai kebutuhan apa saja yang harus dibangun untuk membangun sebuah projek aplikasi. Tahap ini juga bertujuan untuk mengetahui cara kerja sebuah sistem apabila semua persyaratan user terpenuhi. 2. Perancangan Tujuan dari tahap ini yaitu merancang sebuah projek aplikasi sesuai dengan kebutuhan yang telah dianalisis pada tahap analisis kebutuhan. Tahap ini meliputi perancangan alur program, perancangan algoritma dan perancangan antarmuka. 3. Implementasi Pada tahap ini developer mulai mengerjakan projek aplikasinya sesuai dengan rancangan perancangan yang telah dibuat.



47



4. Pengujian Tahap ini menguji kesesuaian dari projek aplikasi yang telah dibuat apakah hasil kerja aplikasi sesuai dengan perencanaan atau tidak. Tahap ini menguji proses cara kerja aplikasi, kesesuaian tampilan, dan kesesuaian proses input ouput. 5. Pemeliharaan Tahap ini mendeskripsikan proses pembaharuan sistem pada aplikasi yang telah dibangun. Proses ini akan menjadi awalan untuk fase pengembangan berikutnya. SDLC memilik beberapa macam model pengembangan: 1. Model Waterfall Model waterfall adalah model tradisional dari SDLC dimana proses dikerjakan diselesaikan terlebih dahulu sebelum menuju ke proses selanjutnya. Pada proses ini tidak ada pilihan lain untuk menuju ke proses sebelumnya setelah memasuki ke proses selanjutnya dan hasil (Barjtya, Sharma, dan Rani, 2017). Kelebihan dari model ini yaitu mudah diterapkan dan mencegah terjadinya error karena proses akan diverifikasi terlebih dahulu sebelum melanjutkan ke proses selanjutnya.



Gambar 2.44. Model Waterfall (Sumber: Kramer, 2018)



48



2. V – Shaped Model ini merupakan bentuk perkembangan dari model waterfall dimana model ini menambahkan proses pengujian secara bertahap pada aplikasi. Pada model ini tidak mengizinkan melanjutkan proses selanjutnya apabila proses sebelumnya belum selesai.



Gambar 2.45. Model V-Shaped (Barjtya, Sharma, dan Rani, 2017) 3. Iterative Model ini memfokuskan pengembangan secara bertahap dimulai dari pengembangan projek sederhana kemudian ditambahkan beberapa fungsional secara berulang di setiap siklusnya. Model ini tidak mengharuskan developer untuk menambahkan seluruh fungsional ke dalam aplikasi secara lansgung.



Gambar 2.46. Model Iterative



49



(Miraz dan Ali, 2020)



3. PERANCANGAN DAN IMPLEMENTASI



2.1.



Analisis Kebutuhan Remaja dan anak–anak menggunakan internet dan desktop sebagai



pendukung kegiatan pembelajaran dan hiburan, terutama saat pandemi COVID 19. Hal ini menyebabkan anak–anak dan remaja menjadi rentan terhadap paparan konten pornografi di internet. Konten pornografi di internet dapat ditemukan melalui situs pornografi maupun sosial media. Pemerintah Indonesia saat ini sudah melakukan pemblokiran beberapa situs pornografi dan membatasi isi penelusuran situs pencarian Google yang memiliki kata kunci berbau pornografi. Namun, beberapa situs pornografi lainnya masih dapat diakses menggunakan VPN maupun tanpa VPN. Hal ini didukung dengan penyebaran konten pornografi melalui sosial media seperti Facebook dan Twitter yang sengaja menyebarkan alamat situs pornografi. Selain itu, konten berbau seksual lainnya dapat ditemukan pada situs hiburan seperti Youtube.



Gambar 3.1. Konten Pornografi pada Sosial Media Twitter



50



51



Terdapat beberapa cara user untuk mengakses situs mengandung pornografi. User dapat mengaksesnya melalui kata kunci (Tabel 3.1) yang ditulis melalui sebuah mesin pencari. Mesin pencari ini dapat ditemukan di situs mesin pencari seperti Google dan sosial media. Kata kunci yang dimasukkan akan mempengaruhi isi konten yang akan ditampilkan pada situs. Selain itu, user dapat menulis alamat situs pornografi secara langsung melalui address bar yang ditemukan pada aplikasi browser.



Gambar 3.2. Konten Pornografi pada Sosial Media Facebook



Gambar 3.3. Konten Pornografi pada Sosial Media Youtube



Tabel 3.1 Daftar Kata Kunci Mengandung Arti Pornografi No 1 2 3



Kata Kunci Porn Sex Bokep



Arti Penelusuran Menampilkan konten pornografi secara umum Menampilkan konten pornografi secara umum Menampilkan konten pornografi berbahasa Indonesia



52



4 5 6



Bugil Jav / Japanese Adult Video Meki / Memek / Toket



Menampilkan konten pornografi berbahasa Indonesia Menampilkan konten pornografi asal Jepang Merujuk pada alat kelamin wanita



Aplikasi Bad Keyword Detector adalah aplikasi berbasis desktop yang digunakan untuk memblokir situs yang mengandung unsur pornografi dengan cara mendeteksi kata kunci yang memiliki unsur pornografi pada sebuah situs. Aplikasi ini menangkap isi situs web menggunakan teknologi screenshot dan diterjemahkan ke dalam sebuah teks menggunakan teknologi OCR. Teks yang dihasilkan akan dibandingkan dengan kamus kata kunci yang terdapat pada aplikasi. Isi teks yang memiliki kata kunci yang sesuai dengan kamus akan teridentifikasi sebagai situs yang memiliki unsur pornografi. Aplikasi akan secara otomatis menutup situs yang teridentifikasi memiliki unsur pornografi tersebut. Aplikasi ini dilengkapi fitur stealth mode yaitu sebuah fitur yang digunakan untuk menyembunyikan program dari taskbar ketika program sedang berjalan. Fitur tersebut bertujuan agar aplikasi ini tidak dapat ditemukan oleh anak atau remaja yang sedang diawasinya. Hal ini mengurangi resiko terjadi penutupan atau penghapusan terhadap aplikasi. Orang tua atau pengawas dapat memodifikasi kata kunci yang ingin ditambahkan maupun dihapus pada kamus kata kunci sehingga pengawasan menjadi lebih fleksibel. Pada tahap analisis kebutuhan dilakukan analisis kebutuhan fungsional dan analisis kebutuhan non fungsional. Analisis kebutuhan fungsional adalah tahap analisis yang digunakan untuk menentukan fitur yang dibutuhkan pada aplikasi. Analisis kebutuhan non fungsional adalah tahap analisis yang digunakan untuk menentukan kebutuhan yang harus dipenuhi dalam pembuatan aplikasi. 1. Analisis Kebutuhan Fungsional Tahap ini menentukan library yang akan digunakan dalam pembangunan aplikasi.



Aplikasi



Bad



Keywords



Detector



membutuhkan



beberapa



fungsionalitas: a. Fungsi untuk membangun GUI pada aplikasi. Dalam hal ini dibutuhkan sebuah library pada Python yaitu Tkinter.



53



b. Fungsi autentikasi login dan register. Dalam hal ini dibutuhkan sebuah layanan Firebase untuk melakukan fungsi autentikasi. Library pada Python yang dibutuhkan untuk menghubungkan aplikasi dengan Firebase yaitu Pyrebase. sebuah library pada Python yaitu Tkinter. c. Fungsi untuk menangkap isi tampilan website menggunakan teknologi screenshot. Library pada Python yang dibutuhkan adalah MSS dan PIL untuk menyimpan hasil output MSS sementara tanpa harus menyimpan di memori penyimpanan. d. Layanan basis data (database) yang digunakan untuk menyimpan kamus kata kunci. Layanan basis data yang digunakan yaitu SQLite. Library pada Python yang digunakan untuk menghubungkan aplikasi dengan SQLite yaitu Sqlite3. e. Fungsi OCR yang digunakan untuk mengubah hasil screenshot menjadi format teks. Perangkat lunak OCR yang digunakan yaitu Tesseract OCR dan Library pada Python yang digunakan untuk menghubungkan Tesseract OCR dengan aplikasi yaitu Pytesseract. f. Fungsi untuk mentutup laman web browser secara otomatis. Library pada Python yang digunakan yaitu Pyautogui. g. Fungsi yang digunakan untuk membuat shortcut tombol pada aplikasi. Library pada Python yang digunakan yaitu keyboard. 2. Analisis Kebutuhan Non Fungsional Perangkat lunak yang digunakan untuk merancang sebuah aplikasi: a. Sistem operasi Windows 10 Pro 64 bit. b. Aplikasi menulis kode program menggunakan Micrososoft Visual Studio Code. c. Aplikasi merancang prototype tampilan GUI menggunakan Figma. d. Python Interpreter. e. Aplikasi database editor menggunakan DB Browser yang mendukung SQLite database. f. Web Browser untuk mengakses Firebase Console menggunakan Google Chrome dan mengakses internet.



54



Perangkat keras yang digunakan untuk merancang sebuah aplikasi yaitu PC dengan spesifikasi: a. Prosesor AMD Ryzen 5 2500U 2.0 GHz. b. RAM 8 GB (2 Channel). c. VGA AMD Radeon Vega 8. d. Memori SSD 256 GB. 3.2.



Perancangan Tahap perancangan merupakan tahap merancang blueprint sebuah aplikasi



sebelum dibangun. Tahap ini dibagi menjadi 6 bagian, yaitu tahap perancangan arsitektur program, perancangan interaksi antar pengguna, perancangan algoritma, perancangan struktur navigasi, perancangan basis data SQLite, dan perancangan antar muka aplikasi. 3.2.1. Perancangan Arsitektur Program Tahap perancangan diawali dengan melakukan perancangan arsitekur program agar mengetahui proses request dan respond dari aplikasi sehingga memudahkan untuk melakukan tahap perancangan lainnya. Aplikasi “Bad Keywords Detector“ terhubung dan bekerja sama dengan layanan Firebase, database lokal Sqlite, dan perangkat lunak Tesseract OCR. Proses request dan respond pada layanan Firebase dilakukan dengan bantuan koneksi internet. Sedangkan proses request dan respond pada Sqlite dan Tesseract OCR tanpa menggunakan koneksi internet. Layanan Firebase digunakan dalam melakukan autentikasi user seperti login, register dan mengganti password. Ketika user melakukan input berupa email dan password pada proses login, aplikasi akan melakukan request dan mencocokan input user dengan informasi user yang terdaftar pada layanan Firebase. Jika terjadi ketidakcocokan, maka Firebase akan mengirimkan respond berupa pesan error pada aplikasi dan user tidak dapat menyelesaikan proses autentikasi. Pada proses register, aplikasi akan meminta untuk membuat informasi



55



user pada layanan Firebase. Jika proses register berhasil, Firebase akan melakukan respond dengan mengirimkan email baru yang berisi alamat link untuk melakukan verifikasi. Pada proses pergantian password, user diminta untuk memasukkan email yang terdaftar pada aplikasi yang kemudian akan dilakukan request pada layanan Firebase. Jika email sesuai, Firebase akan mengirimkan respond berupa pengiriman email yang berisi alamat link untuk melakukan pergantian password baru. Database lokal Sqlite digunakan untuk menampung kamus kata kunci yang lokasinya berada pada satu direktori pada aplikasi. Database ini diperlukan ketika aplikasi bekerja dengan OCR dan melakukan modifikasi terhadap kata kunci. Ketika bekerja dengan OCR, aplikasi akan meminta data kata kunci pada Sqlite untuk ditampung pada variabel program. Variabel tersebut akan diproses untuk dilakukan perbandingan terhadap teks hasil OCR yang didapatkan. Ketika user melakukan request pada aplikasi untuk melakukan pemblokiran akses situs pornografi, proses penangkapan layar (screenshot) akan dilakukan oleh MSS. Hasil output dari MSS akan diproses oleh method pada library PIL hingga menghasilkan format gambar dan ukuran yang diinginkan. Hasil output dari PIL akan dikonversi melalui method pada Pytesseract yang terintegrasi dengan aplikasi Tesseract OCR. Proses penutupan web browser ketika mendeteksi situs pornografi akan dilakukan oleh method pada Pyautogui. Gambar 3.4 mengilustrasikan mengenai arsitektur program pada aplikasi “Bad Keywords Detector“.



56



Gambar 3.4. Arsitektur Program Aplikasi “Bad Keywords Detector“



3.2.2. Perancangan Interaksi Antar Pengguna Pada tahap ini dilakukan perancangan kegiatan yang terjadi saat pemakaian aplikasi menggunakan Use Case Diagram. Pada diagram ini terdapat beberapa aktor yang berinteraksi dengan aplikasi antara lain pengguna, Firebase, SQLite, Tesseract OCR, dan Library pengolah gambar. Pengguna diartikan sebagai pengawas yang menggunakan proteksi dari aplikasi untuk melindungi situs pornografi. Pada aktor library, pengolah gambar di dalamnya terdiri dari library yang bertugas melakukan screenshot dan pengolah hasil screenshot yaitu MSS dan PIL. Pada Gambar 3.5 menjelaskan diagram Use Case pada aplikasi “Bad Keywords Detector“.



57



Gambar 3.5. Use Case Diagram Aplikasi “Bad Keywords Detector“



Aplikasi Bad Keywords Detector ini memiliki 4 case utama, yaitu daftar aplikasi, masuk aplikasi, pilih menu, dan keluar/logout. Beberapa case utama memiliki turunan case lainnya yang dihubungkan menggunakan simbol include dan extend. Case yang terhubung menggunakan simbol include wajib dikerjakan oleh user agar case utama dapat dikerjakan dan terhubung dengan aktor lainnya. Sedangkan case yang terhubung menggunakan simbol extend dapat mengizinkan user untuk memilih case yang ingin dikerjakan tanpa perlu mengerjakan case lainnya. Sebagai contoh, apabila user ingin mendaftarkan diri pada aplikasi maka user wajib mengisi email, password, dan konfirmasi password agar proses register pada aplikasi dapat berjalan. Pada saat memilih menu, user dapat memilih berbagai macam menu yang tersedia tanpa perlu mengerjakan case lainnya. 3.2.3. Perancangan Algoritma Pada tahap ini dilakukan perancangan algoritma program yang bertujuan untuk mengetahui tahap–tahap yang terjadi pada case sehingga akan memudahkan penyusunan blok program pada code editor. Perancangan algoritma dibangun



58



menggunakan



penyajian



diagram



alir



(Flowchart)



untuk



memudahkan



pembacaan. Perancangan algoritma dibagi menjadi 3 bagian: 1. Algoritma Mendaftar Aplikasi (Register) Pada algoritma register aplikasi, dideklarasikan 3 variabel bertipe string, yaitu variabel email_string (menampung data email), pass_string (menampung data password user), dan conf_pass_string (menampung data konfirmasi password) yang akan menampung data dari komponen Entry pada Tkinter. Pada algoritma ini terdapat 6 perintah yang dieksekusi: a. Pemeriksaan isi variabel Perintah ini akan memeriksa isi dari semua variabel yang dimasukkan user. Apabila semua variabel nilai bernilai kosong, maka program tidak dapat melanjutkan ke perintah selanjutnya. b. Pemeriksaan kesesuaian format email Perintah ini memeriksa isi email apakah sesuai dengan format email pada umumnya atau tidak. c. Pemeriksaan nilai conf_pass_string Perintah ini membandingkan apakah nilai variabel conf_pass_string sama dengan nilai variabel email_string. Apabila kedua variabel tersebut mempunyai nilai yang sama, maka program dapat melaksanakan perintah selanjutnya. d. Pemeriksaan kesesuaian format password Perintah ini digunakan untuk memeriksa format password yang dimasukkan. Format password yang sesuai memiliki syarat panjang minimal 6 karakter dan memiliki 1 karakter numerik. e. Pemeriksaan autentikasi email Perintah ini digunakan untuk memeriksa apakah email yang dimasukkan sudah terdaftar pada layanan Firebase atau tidak. Proses register akan gagal apabila email yang dimasukkan telah terdaftar. f. Pyrebase membuat user baru Pyrebase akan membuat akun baru berdasarkan email dan password yang dimasukkan.



59



Gambar 3.6. Flowchart Algoritma Register Algoritma dimulai dengan memasukkan nilai ke dalam variabel yang telah didefinisikan. Alur algoritma ditentukan dari nilai variabel valid yang bertipe boolean. Alur program akan menampilkan Messagebox berisi pesan peringatan apabila variabel valid bernilai salah atau false. 2. Algoritma Masuk Aplikasi (Login) dan Ganti Password Algoritma login aplikasi dan ganti password memiliki algoritma yang hampir sama dengan algoritma register aplikasi. Algoritma login aplikasi memiliki masukkan data berupa email_string dan password_string saja.



60



Gambar 3.7. Flowchart Algoritma Login Algoritma ganti password memiliki masukkan berupa email dari user saja karena pada kasus ini user tidak dapat mengingat password dari email.



61



Gambar 3.8. Flowchart Algoritma Ganti Password 3. Algoritma Pemblokiran Akses Situs Pornografi Algoritma ini dimulai dari inisialisasi 5 variabel yaitu variabel temp, sct_img, img, text, dan en. Setelah dilakukan inisialisasi, program akan melakukan pemeriksaan apakah variabel en bernilai True atau tidak. Sistem pemblokiran pornografi akan aktif apabila en bernilai True. Jika aktif, program akan memberikan input data dari Sqlite ke variabel temp.



62



Gambar 3.9. Flowchart Algoritma Pemblokiran Situs Pornografi Fungsi dari ke lima variabel yang diinisialisasi dijabarkan sebagai berikut: a. Variabel temp bertipe data list yang memiliki sekumpulan data kata kunci yang berasal dari Sqlite. b. Variabel sct_img adalah variabel nontype yang digunakan untuk menampung data tangkapan layar berupa kumpulan piksel. Kumpulan piksel–piksel tersebut belum dilakukan decode menjadi file gambar. c. Variabel img adalah variabel nontype yang digunakan untuk menampung proses decode pada variabel sct_img. Pada proses ini dilakukan penentuan warna gambar menjadi RGB dan menentukan ukuran gambar hingga menghasilkan sebuah file gambar.



63



d. Variabel text merupakan variabel bertipe string yang menampung hasil proses konversi gambar menjadi data teks yang dilakukan oleh method pada Pytesseract. e. Variabel en merupakan variabel bertipe boolean yang menentukan apakah sistem pemblokiran diaktifkan atau tidak. Nilai variabel ini dapat berubah ketika user menekan Button “Aktivasi Proteksi”. Proteksi yang dilakukan aplikasi akan aktif selama nilai en bernilai True dan mengubah tampilan Button menjadi “Matikan Proteksi”. Proteksi yang dilakukan aplikasi akan berhenti apabila nilai en bernilai False dan akan mengubah tampilan Button menjadi “Aktifkan Proteksi”. 3.2.4. Perancangan Struktur Navigasi Aplikasi ini menggunakan struktur navigasi berbentuk campuran. Navigasi dimulai dari halaman Splash Screen yang kemudian dilanjutkan menuju ke halaman Register. Pada halaman Register, user dapat mengakses ke halaman Login apabila user telah memiliki akun. Pada halaman Login, user dapat memilih halaman Ganti Password dan kembali ke halaman Register. Halaman Tentang dapat diakses melalui halaman Login dan Register. Apabila proses login berhasil, user dapat mengakses ke halaman Main. Pada halaman Main, user dapat mengakses menu Modifikasi Kata Kunci, Ganti Password, dan kembali ke menu Login apabila user mengakses tombol Keluar. a. Halaman Splash Screen, tampil pada awal aplikasi yang digunakan untuk memberikan gambaran mengenai aplikasi sekaligus menjadi awalan dari alur aplikasi. b. Halaman Register, digunakan sebagai wadah untuk melakukan pendaftaran (register) pada aplikasi. c. Halaman Login, digunakan untuk melakukan autentikasi data ketika user ingin masuk ke dalam aplikasi (login). d. Halaman Tentang, digunakan untuk menampilkan informasi mengenai tujuan aplikasi dan pembuat aplikasi.



64



e. Halaman Sukses Register, digunakan untuk menampilkan informasi bahwa user berhasil melakukan register dan memberikan info langkah yang harus ditempuh setelah melakukan register. f. Halaman Ganti Password, digunakan untuk melakukan proses menggantikan password lama dengan password baru. Proses yang harus dilalui untuk melakukan pergantian password ini adalah melakukan autentikasi email. g. Halaman Sukses Ganti Password, digunakan untuk menampilkan informasi bahwa user berhasil melakukan atuhentikasi email untuk melakukan pergantian password. h. Halaman Main, tampil apabila user berhasil melakukan login. Halaman ini menampilkan fitur – fitur utama aplikasi yang dapat langsung diakses user. Fitur – fitur tersebut meliputi fitur aktivasi proteksi, modifikasi kamus kata kunci, dan mengaktifkan mode sembunyi. i. Halaman Modifikasi Kata Kunci, digunakan sebagai wadah untuk melakukan modifikasi kata kunci pada kamus kata kunci.



Gambar 3.10. Struktur Navigasi Aplikasi “Bad Keywords Detector”



65



3.2.5. Perancangan Basis Data Sqlite Basis data yang akan dirancang berfungsi untuk menampung kata kunci dengan banyak yang tidak dibatasi. Basis data yang dibuat akan diberi nama blacklist. Kata kunci yang terdaftar akan dimasukkan ke dalam 1 field dengan tipe data string. Field yang dibangun diberi nama keyword dan memiliki primary key yang bertujuan agar kata kunci tidak mengalami duplikasi. File basis data akan disimpan di dalam folder yang sama dengan tempat penyimpanan aplikasi. Pada Gambar 3.11 mengilustrasikan struktur tabel yang digunakan pada tabel keyword. Keyword Kata Kunci ke 0.. Kata Kunci ke 1.. Kata Kunci ke 2.. . . . Kata Kunci ke n..



Gambar 3.11. Struktur Tabel keyword 3.2.6. Perancangan Antar Muka Aplikasi Pada tahap ini dilakukan perancangan storyboard aplikasi menggunakan aplikasi Figma. Storyboard adalah sebuah blueprint yang merepresentasikan gambaran visual dan interaksi user pada aplikasi. Tujuan pembangunan storyboard yaitu mengetahui kerangka desain halaman aplikasi dan interaksi yang terjadi pada antar muka aplikasi. Antar muka yang dirancang adalah: 1.



Halaman Splash Screen Pada halaman ini terdapat judul aplikasi, gambar flat design, dan slogan aplikasi (tagline). Gambar flat design berfungsi untuk menjelaskan gambaran target pemakai untuk aplikasi. Pada bagian bawah flat design terdapat Button Mulai yang digunakan untuk mengeksekusi halaman Register dan menutup halaman Splash Screen. Pada bagian bawah Button terdapat slogan aplikasi yang berfungsi untuk menjelaskan maksud dari aplikasi (Gambar 3.12).



66



Gambar 3.12. Sketsa Halaman Splash Screen 2.



Halaman Register Halaman ini berisi 3 komponen Entry yang berfungsi untuk memasukkan email, password, dan konfirmasi password. Keterangan yang digunakan untuk memberi informasi aturan–aturan yang harus dipatuhi dalam memasukkan data, diletakkan di atas setiap Entry. Pada halaman ini terdapat 3 button, yaitu Button Daftar, Masuk, dan Tentang. Button Daftar digunakan untuk mengonfirmasi proses mendaftar aplikasi. Button Masuk digunakan untuk menutup halaman Daftar dan masuk ke halaman Login. Button Tentang digunakan untuk menutup halaman Daftar dan masuk ke halaman Tentang.



Gambar 3.13. Sketsa Pada Halaman Register



67



3.



Halaman Login Halaman ini berisi 2 komponen Entry yang berfungsi untuk memasukkan email dan password akun yang telah terdaftar. Komponen Button yang terdapat pada halaman ini terdiri dari Button Masuk yang digunakan untuk melakukan konfirmasi login, Button Daftar untuk melakukan navigasi ke halaman Register, dan Button Ganti Password untuk melakukan navigasi ke halaman Tentang.



Gambar 3.14. Sketsa Pada Halaman Login



4.



Halaman Tentang Halaman ini menampilkan informasi mengenai tujuan aplikasi dan pembuat aplikasi. Pada halaman ini terdapat logo Universitas Gunadarma di pojok kanan bawah aplikasi. Pada bagian kiri bawah terdapat Button Kembali yang akan mengembalikan user menuju ke halaman Register atau Login.



68



Gambar 3.15. Sketsa Pada Halaman Tentang 5.



Halaman Sukses Register Halaman ini menampilkan informasi bahwa user harus memeriksa email dan melakukan verifikasi email. Halaman ini memiliki Button Masuk dan flat design. Button Masuk akan mengalihkan user ke halaman Login.



Gambar 3.16. Sketsa Pada Halaman Sukses Register 6.



Halaman Ganti Password Pada halaman ini terdapat Entry yang digunakan untuk memasukkan email user yang terdaftar pada layanan Firebase. Terdapat tombol Ganti yang digunakan untuk mengkonfirmasi proses pergantian password dan tombol Kembali yang digunakan untuk menavigasikan user ke halaman Login.



69



Gambar 3.17. Sketsa Pada Halaman Ganti Password 7.



Halaman Sukses Ganti Password Halaman ini menunjukkan bahwa user telah memasukkan email dengan benar dan terdaftar pada layanan Firebase. User dapat melakukan pemeriksaan pada email dan melakukan pergantian password.



Gambar 3.18. Sketsa Halaman Sukses Ganti Password 8.



Halaman Main Halaman ini berisi 5 Button yang dapat dieksekusi yaitu Aktifkan Proteksi, Modifikasi Kamus Kata Kunci, Aktifkan Mode Sembunyi, dan Ganti Password. Button Aktifkan Proteksi digunakan untuk melakukan eksekusi fitur pendeteksi situs. Apabila fitur tersebut diaktifkan, Label pada Button akan berubah menjadi Matikan Proteksi. User dapat melakukan pergantian kamus kata kunci melalui Button Modifikasi Kamus Kata Kunci yang akan



70



mengalihkan user pada halaman Modifikasi Kata Kunci. Button Aktifkan Mode Sembunyi digunakan untuk mengaktifkan fitur untuk menyembunyikan aplikasi dari taskbar. User dapat melakukan pergantian password melalui Button Ganti Password.



Gambar 3.19. Sketsa Halaman Main 9.



Halaman Modifikasi Kata Kunci Halaman ini berisi 1 buah Entry yang digunakan untuk memasukkan kata kunci baru pada kamus. User dapat menambahkan kata kunci dengan cara memasukkan kata kuncinya pada kata kunci yang telah dimasukkan dan terdaftar akan muncul pada Listbox. Listbox tersebut dapat dilakukan scroll ke atas dan ke bawah untuk melihat kata kunci yang berada dibawahnya. User dapat menghapus kata kunci yang ada di Listbox dengan cara memilih pada salah satu kata kunci yang tertera kemudian mengeksekusi Button Hapus. User dapat menyimpan hasil modifikasi kata kunci tersebut menggunakan Button Simpan. Pada halaman ini terdapat Button Kembali yang digunakan untuk melakukan navigasi pada halaman Main.



71



Gambar 3.20. Sketsa Halaman Modifikasi Kata Kunci 3.3.



Implementasi Tahap ini dibagi menjadi 2 bagian yaitu tahap implementasi rancangan



sistem dan program. Implementasi menjelaskan mengenai proses pembangunan autentikasi layanan Firebase dan SQLite. Implementasi program dilakukan untuk membangun GUI dan fungsional dari aplikasi. 3.3.1. Implementasi Rancangan Sistem Tahap awal pada implementasi rancangan sistem adalah membangun projek bkd2020 pada layanan Firebase. Projek tersebut akan menyimpan layanan autentikasi Firebase dan terhubung pada aplikasi Bad Keywords Detector. Pada aplikasi tersebut, email digunakan untuk melakukan sign in. Penulis memasukkan email contoh yang digunakan sebagai uji coba untuk melakukan login pada aplikasi.



Gambar 3.21. Daftar Akun Terdaftar Pada Firebase



72



Gambar 3.22. Pengaturan Metode Autentikasi Firebase Fitur authentication lainnya yang terdapat pada Firebase yaitu mengirimkan email verifikasi dan pergantian password. Email tersebut akan dikirimkan dari layanan Firebase menuju email yang terdaftar. Penulis akan memodifikasi isi email tersebut melalui fitur yang bernama Templates. Fitur Templates ini dapat digunakan untuk mengubah nama pengirim, akun email pengirim, akun email tujuan, subjek email, link dan isi pesan. Isi email yang dimasukkan pada template email: 1.



Email Verifikasi Email ini berfungsi untuk mengirimkan informasi keberhasilan proses register pada aplikasi dan mengirimkan link tujuan untuk menyelesaikan proses verifikasi agar dapat disetujui untuk melakukan proses login aplikasi. Beberapa atribut dari template email ini: a. Nama Pengirim Nama pengirim dari email ini yaitu badkeyworddetector. b. Akun Email Pengirim Email yang digunakan yaitu [email protected]. c. Akun Email Tujuan Akun email tujuan digunakan ketika user harus membalas email yang masuk. Akun email tujuan akan dikosongkan atau noreply. d. Isi Subjek Email



73



Subjek email menggunakan isi format: Verifikasi Email Akun %APP_NAME% Anda



e. Isi Pesan Email Isi pesan email menggunakan isi format:

Halo %DISPLAY_NAME%,

Klik link ini untuk memverifikasi alamat email Anda.

%LINK%

Jika Anda tidak meminta verifikasi alamat ini, Anda dapat mengabaikan email ini.

Terima Kasih,

Tim %APP_NAME% Anda





f. Link Verifikasi Email Link yang digunakan untuk verifikasi email beralamat https://bkd202089e7d.firebaseapp.com/__/auth/action. 2.



Email Pergantian Password (Reset Password) Email ini berfungsi untuk mengirimkan link tujuan untuk melakukan proses pergantian password. Beberapa atribut dari template email: a. Nama Pengirim Nama pengirim dari email ini yaitu badkeyworddetector. b. Akun Email Pengirim Email yang digunakan yaitu [email protected]. c. Akun Email Tujuan Akun email tujuan akan dikosongkan atau noreply. d. Isi Subjek Email Subjek email menggunakan isi format: Ganti Password Pada Akun %APP_NAME% Anda



e. Isi Pesan Email Isi pesan email menggunakan isi format:



74



Hello,

Silahkan melakukan pergantian password pada akun %APP_NAME% anda yang memiliki email %EMAIL% dengan klik link yang ada dibawah ini.

%LINK%

Jika tidak ingin melakukan pergantian password, anda dapat mengabaikan email ini.

Terima Kasih,

Tim %APP_NAME% Anda





f. Link Untuk Pergantian Password Link yang digunakan untuk melakukan pergantian password yaitu beralamat https://bkd2020-89e7d.firebaseapp.com/__/auth/action.



Gambar 3.23. Template Pada Email Verifikasi



(a) Pengaturan Pengirim, Penerima, dan Subjek Email



75



(b) Template Isi Email Gambar 3.24. Template Email Pergantian Password Tahap implementasi pada sistem aplikasi selanjutnya yaitu membangun database menggunakan aplikasi DB Browser. Database akan diberi nama app.db dan disimpan satu direktori dengan aplikasi Bad Keywords Detector. Pada database tersebut akan memiliki tabel bernama blacklist dan memiliki satu field bernama keyword. Field tersebut mempunyai atribut bertipe data text dan memiliki primary key. Sintaks pembuatan tabel tersebut dijabarkan sebagai:



CREATE TABLE "blacklist" ( "keyword" TEXT, PRIMARY KEY("keyword") );



3.3.2. Implementasi Desain Pada tahap ini dilakukan penerapan atas rancangan storyboard pada aplikasi Figma. Halaman pada aplikasi Bad Keywords Detector menggunakan jenis font bernama Proza Libre dengan warna putih dan background aplikasi menggunakan warna dengan kode heksadesimal bernilai BC302E. Hasil pembangunan potongan–potongan layer desain. Layer desain tersebut akan diexport dan disimpan pada setiap folder dalam satu projek aplikasi. Gambar desain yang telah di-export digunakan sebagai desain Canvas pada aplikasi.



76



Gambar 3.25. Hasil Desain Halaman Register Pada Figma



Gambar 3.26. Desain Tombol (Button)



3.3.3. Implementasi Program Tahap implementasi akan dilakukukan menggunakan aplikasi Microsoft Visual Studio Code. Pada implementasi program terdiri dari 8 tahap yaitu tahap implementasi basis data pada program, implementasi Firebase pada program, implementasi program login, implementasi program register, implementasi program mengganti password, implementasi program halaman utama (main), implementasi program kamus kata kunci, dan implementasi program mode sembunyi. Tahap awal sebelum melakukan implementasi pada code editor adalah mengunduh dan menginstal external library yang diperlukan. Proses instalasi external library diawali dengan membuat sebuah direktori virtual environment yang berfungsi sebagai wadah untuk menampung library baru. Pembuatan direktori dilakukan pada aplikasi command prompt (CMD) dan berjalan dengan mode administrator. Direktori yang akan dibuat akan ditempatkan satu direktori dengan aplikasi Python. Perintah yang digunakan untuk membuat sebuah direktori virtual environment pada Python: virtualenv nama_folder



77



Gambar 3.27. Pembuatan Direktori Virtual Environment Pada CMD Proses instalasi external library akan dilakukan ketika mode virtual environment diaktifkan. Virtual environment diaktifkan dengan menggunakan perintah activate pada CMD. Perintah activate dapat digunakan ketika alamat direktori pada CMD telah merujuk pada direktori Scripts yang berada pada direktori virtual environment. Mode virtual environment yang aktif akan ditandai dengan tulisan nama direktori virtual environment yang telah dibuat. Setelah proses aktivasi selesai, proses instalasi external library dapat dilakukan.



Gambar 3.28. Aktivasi Mode Virtual Environment



Gambar 3.29. Proses Instalasi Pyautogui 3.3.3.1. Implementasi Basis Data Pada Program Tahap ini dilakukan pembuatan program untuk menghubungkan aplikasi dengan database SQLite yang telah dibuat. Program ditulis pada modul yang terpisah dengan program utama untuk memudahkan pelacakan kesalahan ketika proses koneksi database gagal. Tahap awal dilakukan proses import pada library



78



bernama sqlite3. Pada program ini digunakan 2 method yang berasal dari library tersebut yaitu connect() dan cursor(). Connect() adalah method yang digunakan untuk menghubungkan aplikasi dengan database SQLite dan cursor() adalah method yang digunakan untuk memasukkan dan mengeksekusi perintah dasar SQL. Method cursor() juga dapat digunakan untuk memasukkan data dari sqlite ke variabel list pada Python. Method–method tersebut dapat mengembalikan nilai sehingga pemanggilannya dilakukan di dalam variabel yang didefinisikan programmer. Program ini disimpan pada modul Python dengan nama db_connect.



Gambar 3.30. Kode Program Untuk Menghubukan Sqlite 3.3.3.2. Implementasi Firebase Pada Program Tahap ini dilakukan pembuatan program yang digunakan untuk menghubungkan program dengan layanan autentikasi Firebase. Program yang ingin dihubungkan dengan Firebase harus terhubung menggunakan atribut konfigurasi projek Firebase. Konfigurasi tersebut dapat dilihat pada menu Project Setting pada situs Firebase Console.



79



Gambar 3.31. Konfigurasi Projek Firebase Berbentuk Kode JSON Modul



program



untuk



menghubungkan



Firebase



diberi



nama



connect_login yang terpisah dengan modul program utama. Modul ini digunakan untuk menghubungkan program dengan Firebase dan mengelola proses autentikasi seperti melakukan login, register, dan pergantian password. Pada langkah pertama dilakukan pemanggilan library seperti Pyrebase dan Tkinter yang digunakan untuk memanggil fungsi menampilkan pesan error berupa komponen messagebox ketika user gagal melakukan autentikasi. Selanjutnya, konfigurasi projek Firebase ditampung pada variabel bertipe dictionary bernama variabel config. Modul ini memiliki 2 variabel utama yang berperan untuk melakukan autentikasi pada Firebase yaitu variabel firebase dan auth. Variabel firebase digunakan untuk menghubungkan program dengan projek Firebase dengan menggunakan konfigurasi yang telah ditampung pada variabel config. Sedangkan variabel auth digunakan untuk melakukan proses autentikasi program dengan projek Firebase.



80



Gambar 3.32. Kode Program Menghubungkan Autentikasi Firebase Pada modul connect_login terdapat 4 fungsi yang bekerja sama untuk melakukan proses login, register, dan pergantian password. Fungsi-fungsi tersebut adalah: 1.



Fungsi create_user() digunakan dalam proses register karena berisi logika untuk melakukan pembuatan user pada Firebase.



2.



Fungsi send_ver() digunakan untuk mengirimkan email verifikasi pada email user apabila berhasil dilakukan proses register.



3.



Fungsi check_email_ver() digunakan untuk memeriksa status apakah user telah melakukan verifikasi email atau belum.



4.



Fungsi reset_pass() digunakan untuk melakukan proses pergantian password.



Gambar 3.33. Fungsi create_user



81



Gambar 3.34. Fungsi send_ver



Gambar 3.35. Fungsi check_email_ver



Gambar 3.36. Fungsi reset_pass



82



3.3.3.3. Implementasi Pembuatan Class GUI Pembangunan GUI dan alur aplikasi Bad Keywords Detector terdiri atas parent class dan child class. Parent class berfungsi sebagai class dasar pembangun GUI untuk menurunkan sifat dan properti dari pengaturan window yang dibuat pada child class. Child class adalah sebuah sub kelas yang membagi properti halaman satu dengan halaman lainnya. Parent Class menurunkan properti–properti ukuran aplikasi, judul aplikasi, pengaturan



resizeable,



komponen pengolah gambar, dan sifat dasar frame. Setiap child class mendeklarasikan frame tampilan masing–masing berdasarkan sifat turunan dari class GUI. Pengaturan resizeable digunakan untuk mengaktifkan atau menonaktifkan fitur pengaturan ukuran window menggunakan pointer pada mouse. Pada class ini terdapat 2 method yang diturunkan, yaitu center_show () dan change_frame(). Method bernama center_show() berisi nilai koordinat agar memunculkan aplikasi ke tengah layar dan method bernama change_frame() digunakan untuk memindahkan halaman aplikasi satu dengan halaman aplikasi lainnya. Method bernama change_frame() mempunyai variabel parameter untuk memasukkan nama variabel frame yang akan dihancurkan (destroy) dan nama child class yang akan ditampilkan. Setiap perpindahan halaman akan mengeksekusi objek yang berisi nama child class baru dan menghancurkan frame dari child class yang sebelumnya telah dieksekusi. Komponen variabel yang diturunkan dari class GUI kepada child class adalah: 1.



root: merupakan variabel yang berfungsi untuk menampung komponen ke dalam 1 window.



2.



img: merupakan variabel yang berfungsi untuk mengambil gambar pada direktori.



3.



frame_login: merupakan Frame dari halaman Login.



4.



frame_regist: merupakan Frame dari halaman Register.



5.



frame_splash_screen: merupakan Frame dari halaman Splash Screen.



6.



frame_success_reg: merupakan Frame dari halaman Sukses Register.



7.



frame_forget_pass: merupakan Frame dari halaman Ganti Pasword.



83



8.



frame_finisih_reset: merupakan Frame dari halaman Sukses Ganti Password.



9.



frame_main: merupakan Frame dari halaman Main.



10. frame_badkey: merupakan Frame dari halaman Modifikasi Kata Kunci. 11. frame_abou : merupakan Frame dari halaman Tentang.



Gambar 3.37. Class GUI 3.3.3.4. Implementasi Class Halaman Splash Screen Halaman Splash Screen adalah halaman pertama yang muncul ketika aplikasi dijalankan. Atribut dan method pada halaman Splash Screen ditampung pada class bernama splash_screen yang mewarisi sifat dari class GUI. Halaman ini hanya memiliki komponen Canvas yang digunakan sebagai penampil gambar pada desain tampilan, penampil tulisan pada aplikasi dan sebagai komponen Button. Variabel img digunakan untuk mengimpor desain gambar hasil tahap implementasi desain dari direktori tertentu. Setiap komponen Canvas akan memanggil atribut bernama image dengan nilai img untuk menerapkan gambar desain yang dipilih. Komponen Canvas yang memiliki variabel canvas_btn1 digunakan sebagai komponen tombol berlabel “Mulai”. Variabel canvas_btn1



84



akan mengeksekusi method bernama change_frame() melalui method bernama bind() untuk berpindah halaman dari halaman Splash Screen menuju halaman Login. Komponen Canvas yang tidak digunakan untuk mengeksekusi suatu perintah tidak memiliki method bernama bind().



Gambar 3.38. Class Halaman splash_screen



Gambar 3.39. Output dari Class Halaman splash_screen



85



3.3.3.5. Implementasi Class Halaman Login



Gambar 3.40 Class Halaman Login Class Halaman Login (Gambar 3.40) mendeklarasikan turunan dari variabel class GUI seperti variabel frame, Canvas, dan Entry. Class ini memiliki deklarasi variabel login_frame_status yang digunakan sebagai penentu alur navigasi dari Halaman Tentang menuju ke Halaman Login. Variabel textbox_email adalah komponen Entry digunakan untuk menyimpan masukkan email dan variabel textbox_password digunakan untuk menyimpan password. Masukan tersebut digunakan dan diproses pada method bernama to_login() (Gambar 3.41). Method tersebut menentukan apakah masukan user telah benar atau tidak. Masukan akan bernilai salah apabila salah satu variabel Entry bernilai kosong, nilai password tidak benar, dan tidak memenuhi format email yang benar. Apabila nilai masukan bernilai benar maka method tersebut akan mengeksekusi fungsi check_email_ver() pada modul connect_login agar dilakukan proses login pada Firebase. Beberapa cara kerja variabel Canvas dengan fungsi sebagai Button pada Class: 1.



button_log,



memanggil



method



to_login()



“Login_btn.png” pada folder “Login”.



dan



mengimpor



gambar



86



Gambar 3.41 Method to_login Pada Class Halaman Login 2.



button_reg, memanggil method change_frame() dengan parameter variabel frame_login dan class regist untuk menavigasikan ke halaman Register. Variabel ini mengimpor gambar “register .png” pada folder “Register”.



3.



button_reset,memanggil method change_frame() dengan parameter variabel frame_login dan class forget_pass untuk navigasi ke halaman Ganti Password. Variabel ini mengimpor gambar “Reset Password.png” pada folder “Login“.



4.



about_button, memanggil method change_frame() dengan parameter variabel frame_login dan class about untuk menavigasikan ke halaman Tentang, dan mengimpor gambar “Reset Password.png” pada folder “Login“.



Gambar 3.42. Output Pada Class Halaman Login



87



3.3.3.6. Implementasi Class Halaman Register Pada class Halaman Register terdapat 3 variabel yang digunakan untuk menampung masukkan data berupa email, password, dan konfirmasi password. Data tersebut akan diolah pada 4 method yaitu check_data(), check_email(), check_pass(), dan check_long_pass(). Method check_data() akan berjalan ketika user melakukan eksekusi pada komponen Canvas dengan nama variabel button_reg. Setiap method memiliki pesan error yang berbeda-beda.



Gambar 3.43. Class Halaman Register Kegunaan dari method dan variabel pada class Halaman Register adalah: 1.



Variabel email_string: digunakan untuk menampung data email dari user.



2.



Variabel pass_string: digunakan untuk menampung data password dari user.



3.



Variabel conf_pass_string: digunakan untuk menampung data pengulangan password dari user.



4.



Variabel valid: digunakan untuk menampung nilai boolean kebenaran dari data yang dimasukkan user.



88



5.



Method check_data(): digunakan untuk memeriksa Entry memiliki masukan atau tidak. Apabila masukan tidak kosong, program akan mengeksekusi method check_email().



6.



Method check_email(): digunakan untuk memeriksa data masukkan email yang dimasukkan mengikuti format email atau tidak. Apabila mengikuti format email, program akan mengeksekusi method check_long_pass().



Gambar 3.44. Beberapa Method Pada Class Halaman Register 7.



Method check_pass(): digunakan untuk memeriksa variabel pass_string dan conf_pass_string bernilai sama atau tidak. Apabila bernilai sama, program akan mengeksekusi method check_long_pass().



8.



Method check_long_pass(): digunakan untuk memeriksa panjang password yang dimasukkan user. Apabila password benar, program akan mengeksekusi fungsi create_user() pada modul connect_login. Fungsi create_user() akan



89



mengembalikan nilai boolean pada variabel valid. Apabila nilai valid bernilai True, program akan mengeksekusi method change_frame().



Gambar 3.45. Output Pada Class Halaman Register 3.3.3.7. Implementasi Class Halaman Tentang Class ini menampilkan informasi kegunaan aplikasi, cara kerja aplikasi, identitas pembuat, dan nama universitas. Halaman Tentang memiliki komponen Canvas dengan nama variabel button_back yang digunakan untuk mengeksekusi method



change_frame_2().



Method



change_frame_2()



digunakan



untuk



menentukan alur navigasi untuk memberikan pilihan antara halaman Login atau halaman Register. Alur keputusan yang dilakukan terhadap method tersebut bergantung pada nilai boolean variabel login_frame_status. Alur navigasi akan menuju ke Halaman Login apabila nilai variabel tersebut bernilai True dan akan pergi menuju ke Halaman Register apabila nilai variabelnya bernilai False.



90



Gambar 3.46. Class Halaman Tentang



Gambar 3.47. Output Pada Class Halaman Tentang 3.3.3.8. Implementasi Class Halaman Ganti Password Class ini menampung variabel Entry bernama textbox_email yang digunakan untuk memasukkan data email ke dalam sebuah variabel bertipe data string bernama email_string. Data email tersebut akan diproses pada sebuah method yang bernama to_reset_pass(). Method tersebut akan memeriksa kebenaran dari isi variabel email_string. Program akan mengeksekusi fungsi reset_pass() pada modul connect_login apabila nilai pada email_string dianggap benar.



Gambar 3.48. Class Halaman Ganti Password



91



Halaman Ganti Password memiliki hubungan navigasi antara halaman Login dan halaman Main sehingga dibutuhkan method bernama to_back() yang digunakan untuk mengatur perpindahan dari halaman Ganti Password ke halaman Login atau halaman Main. Komponen Canvas dengan variabel button_reset akan mengeksekusi method bernama to_reset_pass() dan komponen Canvas dengan variabel button_back akan mengeksekusi method bernama to_back().



Gambar 3.49. Output Pada Class Halaman Ganti Password 3.3.3.9. Implementasi Class Halaman Sukses Ganti Password Class ini menampung Canvas yang digunakan sebagai label saja dan sebagai Button. Canvas dengan nama variabel canvas1 akan menampilkan pemberitahuan kepada user untuk melakukan pergantian password melalui email. Halaman ini memiliki hubungan navigasi dengan halaman Login dan Register sehingga dibutuhkan method bernama change_frame(). Method tersebut dipanggil melalui variabel button_login dan button_register. Variabel button_login digunakan untuk menavigasikan ke halaman Login dan variabel button_register digunakan untuk menavigasikan ke halaman Register.



92



Gambar 3.50. Class Halaman Sukses Ganti Password



Gambar 3.51. Output Pada Class Halaman Sukses Ganti Password 3.3.3.10. Implementasi Class Halaman Sukses Register Halaman Sukses Register menampilkan pemberitahuan kepada user untuk melakukan verifikasi email sebelum melakukan login dengan menggunakan komponen Canvas dengan variabel label_success dan label_check_your. Halaman ini juga memuat gambar karikatur keluarga yang ditampilkan menggunakan variabel canvas1 dan memuat sebuah Button yang bernama button_login. Button ini menavigasi user ke halaman Login menggunakan method change_frame().



93



Gambar 3.52. Class Halaman Sukses Register



Gambar 3.53. Output Pada Class Halaman Sukses Register 3.3.3.11. Implementasi Class Halaman Main Halaman



Main



berisi



sebuah



Button



yang



digunakan



untuk



mengeksekusi fitur utama pada aplikasi dan terdapat Canvas untuk menampilkan email yang melakukan Login pada aplikasi. Class ini menampung objek dari modul protection dalam bentuk variabel pr. Objek variabel pr memiliki atribut bernama daemon yang digunakan untuk mengaktifkan proses latar belakang yang dilakukan fitur proteksi yang sedang aktif. Pada Class ini terdapat proses penampungan kata kunci yang diawali dengan pendeklarasian variabel a yang akan menampung kata kunci dari database SQLite. Sebelum ditampung, variabel query akan mengeksekusi sebuah perintah select pada tabel blacklist untuk menyeleksi semua kata kunci pada tabel.



94



Kemudian dilakukan eksekusi oleh variabel c dari kelas db_connect. Hasil seleksi data pada tabel blacklist akan ditampung pada variabel result menggunakan method fetchall () berupa data tuples. Hasil data tuples tersebut harus dikonversi menjadi data list agar dapat ditambahkan atau dikurangi isinya sehingga dibutuhkan variabel final_result yang akan menampung semua data tuples dalam bentuk list dengan elemen data berbentuk list. Agar elemen pada list menjadi elemen tunggal, maka dibutuhkan iterasi untuk menampung semua data dari variabel final_result ke variabel a. Pada Class Halaman Main terdapat 7 method penting: 1.



Method to_badkey(): Method ini digunakan untuk melakukan navigasi dari halaman Main ke halaman Modifikasi Kata Kunci. Method ini memiliki fungsi tambahan untuk melakukan iterupsi pada proses aktivasi proteksi apabila ingin memodifikasi kata kunci.



2.



Method tes(): Method ini digunakan untuk mengaktifkan dan menonaktifkan fitur proteksi aplikasi berdasarkan nilai variabel en. Ketika variabel en bernilai True, aplikasi akan mengaktifkan start() dari library Threading yang berisi eksekusi function testloop() pada modul protection. Sedangkan jika variabel en bernilai False, proteksi akan dihentikan.



3.



Method show_tk(): Method ini digunakan untuk menampilkan aplikasi setelah disembunyikan melalui fitur mode sembunyi.



4.



Method hide_tk(): Method ini digunakan untuk menyembunyikan aplikasi melalui fitur mode sembunyi.



5.



Method keyboard_command(): Method ini digunakan untuk menambahkan fungsi pada tombol keyboard. Terdapat 2 fungsi yang diterapkan yaitu fungsi menampilkan aplikasi dengan kombinasi tombol “ctrl“, “alt“, dan “S“ dan menyembunyikan aplikasi dengan kombinasi tombol “ctrl“, “alt“, dan “H“.



6.



Method setup_stealth(): Method ini digunakan untuk mengaktifkan mode sembunyi yang digunakan untuk menyembunyikan aplikasi dari taskbar. Method ini diawali dengan deklarasi MsgBox yang menampilkan messagebox yang berisi pertanyaan untuk mengkonfirmasi apakah user ingin melanjutkan untuk mengaktifkan mode sembunyi atau tidak. Apabila nilai MsgBox



95



bernilai



True,



maka



program



akan



mengeksekusi



method



keyboard_command() dan hide_tk (). 7.



Method logout(): Method ini digunakan apabila user ingin mengganti email lain untuk login melalui halaman Login dan menutup halaman Main.



Gambar 3.54. Class Halaman Main



Gambar 3.55. Output Pada Class Halaman Main



96



3.3.3.12. Implementasi Class Halaman Modifikasi Kata Kunci Halaman Modifikasi Kata Kunci mengijinkan user untuk memasukkan kata



kunci



baru



melalui



komponen



Entry



dengan



variabel



bernama



textbox_badkey yang nilainya akan disimpan berbentuk string pada variabel badkey_string. Class diawali dengan deklarasi variabel duplicate_data_bool yang digunakan untuk memeriksa kata kunci yang memiliki duplikasi dan list_badkey_list yang digunakan untuk menampung kata kunci dalam bentuk list. Kelima method yang ditampung pada class ini: 1.



Method insert_to_list(): digunakan untuk memasukkan data masukan dari komponen Entry ke variabel list_badkey_list. Method ini mengeksekusi method duplicate_data() yang digunakan untuk memeriksa data yang terduplikasi. Apabila duplicate_data_bool bernilai False, maka program diizinkan untuk memasukkan data dari variabel badkey_string ke Listbox yang memiliki variabel list_badkey sehingga data dapat ditampilkan pada Listbox.



2.



Method duplicate_data(): digunakan untuk memeriksa data kata kunci yang terduplikasi antara data pada variabel badkey_string dan data pada Listbox. Apabila ditemukan duplikasi, maka nilai duplicate_data_bool bernilai True.



3.



Method remove_data(): digunakan untuk menghapus data kata kunci pada Listbox.



4.



Method save_data(): digunakan untuk menyimpan data dari Listbox ke tabel blacklist pada basis data SQLite yang digunakan sebagai penampungan kamus kata kunci. Isi method ini diawali dengan memasukkan data pada Listbox ke variabel list_badkey_list. Variabel conn dari modul db_connect memanggil execute () yang berisi perintah untuk menghapus semua isi data pada tabel blacklist. Tabel blacklist akan diisi oleh data baru yang diberikan oleh variabel list_badkey_list dengan menggunakan perulangan. Perintah untuk memasukkan data ke tabel akan dilakukan oleh variabel conn yang memanggil method commit(). Proses selanjutnya adalah mengirimkan data list_badkey_list sebagai parameter pada method save_temp() untuk diproses.



97



5.



Method show_badkey(): digunakan untuk menampilkan kata kunci pada Listbox. Proses diawali dengan mendeklarasikan variabel a bertipe list dan melakukan eksekusi perintah SQL select untuk menyeleksi data pada tabel blacklist yang disimpan pada variabel result menggunakan pemanggilan fetchall () berupa data tuples. Data pada variabel result akan ditampung dari variabel final_result ke variabel a melalui perulangan. Langkah terakhir yaitu melakukan perulangan untuk memasukkan data pada variabel a untuk ditampilkan oleh Listbox menggunakan insert().



Gambar 3.56. Class Halaman Modifikasi Kata Kunci



Gambar 3.57. Output Pada Class Halaman Modifikasi Kata Kunci



98



3.3.3.13. Implementasi Pada Modul protection dan TestGUI2 Pada modul protection terdapat Class bernama protection yang digunakan untuk menjalankan perulangan selama kegiatan proteksi diaktifkan atau dinonaktifkan. Kelas ini akan berjalan di latar belakang selama user melakukan aktivitas lain pada desktop. Class ini terdapat 2 macam method yaitu method run() dan method testloop(). Method run() adalah method yang bertugas untuk menjalankan sebuah method testloop() di latar belakang. Sedangkan method testloop() berisi perulangan tanpa batas yang digunakan untuk mengulang kegiatan proteksi selama fitur proteksi pada aplikasi diaktifkan. Modul testGUI2 adalah modul yang digunakan untuk menjalankan proses untuk melakukan kegiatan proteksi. Modul ini terdiri dari 3 function dan deklarasi variabel temp untuk menampung data dari Listbox pada halaman Modifikasi Kata Kunci. Macam – macam function pada modul ini : 1. Function save_temp(): digunakan untuk menyimpan data list kata kunci ke variabel temp. 2. Function block(): digunakan untuk melakukan penutupan tab pada browser apabila ditemukan kata kunci yang sesuai dengan isi kamus kata kunci. Penutupan tab pada browser tersebut dilakukan menggunakan method pada Pyautogui untuk mengeksekusi fungsi tombol “ctrl” dan “f4” secara otomatis. 3. Function scanning(): digunakan untuk melakukan screenshot secara real time dan melakukan deteksi terhadap isi screenshot tersebut. Pada function ini dideklarasikan sebuah variabel text yang akan menampung isi teks dari sebuah gambar screenshot. Pemanggilan direktori Tesseract OCR dilakukan menggunakan



variabel



tesseract_cmd.



Proses



screenshot



dilakukan



menggunakan pemanggilan method mss() dan hasil kumpulan–kumpulan gambar piksel screenshot akan dimasukkan pada variabel sct_image. Pada variabel img dilakukan membuatan salinan memori gambar pada hasil data variabel sct_image. Hasil dari variabel sct_image akan dikonversi menjadi teks dengan huruf kecil menggunakan function image_to_string() dan



99



lower(). Hasil konversi teks tersebut akan disimpan menggunakan variabel text. Eksekusi block() akan dilakukan apabila nilai text memiliki kata kunci yang terdapat pada variabel temp.



Gambar 3.58. Modul protection



Gambar 3.59. Modul testGUI2



100



3.3.3.14. Implementasi Pada Modul Main dan Function Lainnya Modul ini digunakan untuk menjalankan keseluruhan aplikasi ketika pertama kali dijalankan. Modul Main akan mengeksekusi function initmain() yang terdapat pada modul test_frame. Function initmain() berisi variabel root dan window. Variabel root menampung isi atribut objek kelas Tk dari library Tkinter dan variabel window digunakan untuk membuat objek dari kelas GUI yang mengoper variabel root pada konstruktor kelas tersebut. Variabel window memanggil method bernama start() yang akan menjalankan sebuah aplikasi pada 1 thread. Aplikasi akan diawali dari membuka sebuah halaman Splash Screen yang diakibatkan dari pemanggilan method change_frame() oleh variabel window. Kemudian variabel root akan memanggil method mainloop() yang digunakan agar program tidak mengalami interupsi ketika dijalankan. Function close_window_logout() digunakan ketika user mengeksekusi ikon close pada pojok kanan Window. Function tersebut digunakan untuk memberikan pertanyaan konfirmasi sebelum user melakukan close pada aplikasi menggunakan komponen messagebox dengan variabel MsgBox. Aplikasi akan melakukan close ketika variabel root melakukan pemanggilan method bernama destroy().



Gambar 3.60. Modul Main



101



Gambar 3.61. Function initmain dan close_window_logout 3.4.



Pengujian Pada tahap pengujian aplikasi Bad Keywords Detector dilakukan



menggunakan metode Blackbox. Metode Blackbox berfokus pada pengujian mengenai kesesuaian fungsi aplikasi apakah sesuai dengan yang diharapkan atau tidak. Pengujian dilakukan menggunakan laptop Acer Aspire 5 dengan sistem operasi Windows 10 64 bit. Tahap pengujian dicatat setiap halaman aplikasi ini. 1.



Halaman Splash Screen Halaman Splash Screen berperan memunculkan gambaran singkat pada awal aplikasi. Pengujian pada halaman ini dibagi menjadi 4 aspek penilaian: -



Kesesuaian Navigasi, menguji keberhasilan program dalam menampilkan halaman Splash Screen ketika aplikasi pertama kali dijalankan.



-



Kesesuaian Widget dan Asset, menguji keberhasilan program dalam menampilkan asset gambar dan komponen Tkinter yang sesuai dengan ukuran dan penempatannya. Halaman Splash Screen menampilkan judul aplikasi, tagline aplikasi, dan desain ilustrasi yang ditampilkan menggunakan komponen Tkinter.



-



Kesesuaian Fungsi Button, menguji keberhasilan dalam membuka halaman Register dan menutup halaman Splash Screen yang dieksekusi menggunakan Button bertuliskan “Mulai”.



102



-



Window Behavior, Aspek ini menguji keberhasilan program dalam menampilkan



ukuran



window



berukuran



800x600



piksel



dan



menonaktifkan pengubahan ukuran pada window. Hasil pengujian Window Behavior akan berpengaruh pada hasil Window Behavior pada halaman lainnya. Tabel 3.2 Hasil Pengujian Pada Halaman Splash Screen



2.



Test ID



Kategori Pengujian



A1



Kesesuaian navigasi



A2



Kesesuaian asset dan widget



A3



Kesesuaian fungsi Button



A4



Window Behavior



Hasil yang Diharapkan



Hasil Pengujian



Status



Mampu menampilkan halaman Splash Screen secara otomatis ketika aplikasi pertama kali dijalankan. Mampu menampilkan asset gambar dan komponen widget Tkinter dengan ukuran dan penempatan yang sesuai. Button " Mulai " dapat membuka halaman Register dan menutup halaman Splash Screen. Mampu menampilkan dan menerapkan pengaturan Window yang sesuai.



Halaman Splash Screen terbuka secara otomatis ketika aplikasi pertama kali dijalankan.



Berhasil



Asset gambar dan widget Tkinter yang ditampilkan memiliki ukuran dan penempatan yang sesuai.



Berhasil



Halaman Register terbuka dan halaman Splash Screen tertutup ketika mengeksekusi Button “ Mulai ”. Window menampilkan ukuran 800 x 600 piksel dengan tombol maximize yang disable dan ukuran Window terkunci.



Berhasil



Berhasil



Halaman Register Halaman Register digunakan untuk melakukan pendaftaran oleh user yang datanya akan ditampung pada komponen Entry. Keberhasilan proses register akan direspon oleh layanan Firebase untuk mengirimkan email verifikasi pada email yang didaftarkan. Terdapat beberapa aspek pengujian pada halaman ini yaitu : -



Keberhasilan proses register: Proses register akan berhasil apabila data yang dimasukkan sesuai dengan prosedur dan tidak menggunakan email yang terdaftar.



-



Kesesuaian fungsi Button: Menilai keberhasilan dari fungsi Button yang dieksekusi.



103



-



Kesesuaian asset dan widget: Pengujian ini digunakan untuk mengetahui keberhasilan program dalam menampilkan menampilkan asset gambar dan komponen widget Tkinter dengan ukuran dan penempatan yang sesuai.



-



Kesesuaian format email dari Firebase: Menilai kesesuaian isi informasi dan bahasa yang terdapat pada email verifikasi dari Firebase.



-



Keberhasilan fungsi layanan Firebase: Menilai keberhasilan Firebase dalam mengubah status verifikasi email yang didaftarkan.



Penilaian keberhasilan proses register dilakukan dengan berbagai macam kasus yang terdiri dari : -



Melakukan register dengan mengosongkan semua data



-



Melakukan register dengan mengosongkan salah satu data



-



Melakukan register dengan membedakan data password dengan data konfirmasi password



-



Melakukan register dengan memasukkan email dan password yang tidak terdaftar



-



Melakukan register dengan memasukkan email dan password yang terdaftar.



(a) Email Verifikasi Firebase



104



(b) Pemberitahuan Pada Alamat Situs Verifikasi Firebase. Gambar 3.62. Proses Verifikasi Melalui Email Verifikasi Firebase Tabel 3.3 Hasil Pengujian Pada Halaman Register Test ID



Deskripsi Pengujian



B1



Keberhasilan proses register



B2



Keberhasilan proses register



B3



Keberhasilan proses register



B4



Keberhasilan proses register



Hasil yang Diharapkan



Hasil Pengujian



Status



Mampu melakukan proses register dengan email dan password yang tidak terdaftar dan terverifikasi. Proses register yang berhasil ditandai dengan terkirimnya email verifikasi oleh Firebase ke email yang melakukan register dan dapat melakukan perpindahan navigasi ke halaman Sukses Register. Mampu menolak proses register dari email dan password yang sudah terdaftar dan terverifikasi. Pengiriman email verifikasi dari Firebase ke email pendaftar dan perpindahan navigasi ke halaman Sukses Register tidak terjadi. Aplikasi menampilkan pesan pemberitahuan berupa messagebox. Mampu menolak proses register ketika email, password, dan konfirmasi password tidak terisi ketiganya atau salah satunya. Pengiriman email verifikasi dari Firebase ke email pendaftar dan perpindahan navigasi ke halaman Sukses Register tidak terjadi. Aplikasi menampilkan pesan pemberitahuan berupa messagebox. Mampu menolak proses register ketika isi data password dan isi data konfirmasi password tidak sama. Pengiriman email verifikasi dari Firebase ke email pendaftar dan perpindahan navigasi



Email dan password yang tidak terdaftar dan terverifikasi berhasil melakukan proses register. Email verifikasi dari Firebase terkirim ke email pendaftar dan aplikasi melakukan perpindahan navigasi dari halaman Register ke halaman Sukses Register.



Berhasil



Email dan password yang sudah terdaftar dan terverifikasi ditolak untuk melakukan proses register dan menampilkan pesan pemberitahuan berupa messagebox. Pengiriman email verifikasi dari Firebase ke email pendaftar dan perpindahan navigasi ke halaman Sukses Register tidak terjadi.



Berhasil



Email, password, dan konfirmasi password yang tidak terisi baik ketiganya atau salah satunya ditolak untuk melakukan proses register dan menampilkan pesan pemberitahuan berupa messagebox. Pengiriman email verifikasi dari Firebase ke email pendaftar dan perpindahan navigasi ke halaman Sukses Register tidak terjadi.



Berhasil



Password dan konfirmasi password yang datanya tidak sama ditolak untuk melakukan proses register dan menampilkan pesan pemberitahuan berupa messagebox. Pengiriman email verifikasi dari Firebase ke email



Berhasil



105



3.



B5



Kesesuaian asset dan widget



B6



Kesesuaian fungsi Button



B7



Kesesuaian fungsi Button



B8



Kesesuaian format email dari Firebase



B9



Keberhasilan fungsi layanan Firebase



ke halaman Sukses Register tidak terjadi. Aplikasi menampilkan pesan pemberitahuan berupa messagebox. Mampu menampilkan asset gambar dan komponen widget Tkinter dengan ukuran dan penempatan yang sesuai. Button " Masuk " dapat membuka halaman Login dan menutup halaman Register. Button " Tentang " dapat membuka halaman Tentang dan menutup halaman Register. Mampu menampilkan format email verifikasi yang sesuai. Format email verifikasi yang sesuai memiliki kalimat ajakan untuk melakukan verifikasi, penggunaan bahasa Indonesia dan terdapat alamat situs untuk melakukan verifikasi dari Firebase. Menampilkan informasi keberhasilan proses verifikasi pada situs Firebase setelah mengeksekusi alamat situs verifikasi dari email Firebase.



pendaftar dan perpindahan navigasi ke halaman Sukses Register tidak terjadi. Asset gambar dan widget Tkinter yang ditampilkan memiliki ukuran dan penempatan yang sesuai.



Berhasil



Halaman Login terbuka dan halaman Register tertutup ketika mengeksekusi Button “ Masuk ”. Halaman Tentang terbuka dan halaman Register tertutup ketika mengeksekusi Button “ Tentang ”. Format email verifikasi memiliki kalimat ajakan untuk melakukan verifikasi, menggunakan bahasa Indonesia, dan terdapat alamat situs untuk melakukan verifikasi.



Berhasil



Mampu menampilkan informasi keberhasilan proses verifikasi setelah mengeksekusi alamat situs dari email Firebase.



Berhasil



Berhasil



Berhasil



Halaman Login Halaman Login digunakan user untuk masuk ke konfigurasi utama pada aplikasi menggunakan email dan password yang telah terdaftar pada komponen Entry. Aspek pengujian pada halaman ini dilakukan untuk mengetahui keberhasilan program dalam melakukan proses login dengan berbagai macam contoh kasus yang diterapkan sebagai: -



Melakukan login dengan mengosongkan salah satu data



-



Melakukan login dengan memasukkan email dan password yang tidak terdaftar



-



Memasukkan email dan password yang terdaftar.



106



Tabel 3.4 Hasil Pengujian Pada Halaman Login



4.



Tes t ID



Deskripsi Pengujian



C1



Keberhasilan proses login



C2



Keberhasilan proses login



C3



Keberhasilan proses login



C4



Kesesuaian asset dan widget



C5



Kesesuaian fungsi Button



C6



Kesesuaian fungsi Button



C7



Kesesuaian fungsi Button



Halaman Tentang



Hasil yang Diharapkan Mampu melakukan proses login dengan email dan password yang sudah terdaftar dan terverifikasi. Proses login yang berhasil ditandai dengan perpindahan navigasi ke halaman Main. Mampu menolak proses login dari email dan password yang tidak terdaftar dan terverifikasi. Perpindahan ke halaman Main tidak terjadi dan menampilkan pesan pemberitahuan. Mampu menolak proses login ketika email dan password tidak terisi keduanya atau salah satunya. Perpindahan ke halaman Main tidak terjadi dan menampilkan pesan pemberitahuan. Mampu menampilkan asset gambar dan komponen widget Tkinter dengan ukuran dan penempatan yang sesuai. Button " Ganti Password " dapat membuka halaman Ganti Password dan menutup halaman Login. Button " Daftar " dapat membuka halaman Register dan menutup halaman Login. Button " Tentang " dapat membuka halaman Tentang dan menutup halaman Login.



Hasil Pengujian



Status



Email dan password yang telah terdaftar dan terverifikasi berhasil melakukan login, membuka halaman Main, dan menutup halaman Login.



Berhasil



Email dan password yang tidak terdaftar dan terverifikasi ditolak untuk melakukan proses login. Perpindahan ke halaman Main tidak terjadi dan menampilkan pesan pemberitahuan.



Berhasil



Email dan password yang tidak terisi baik keduanya atau salah satunya ditolak untuk melakukan proses login. Perpindahan ke halaman Main tidak terjadi dan menampilkan pesan pemberitahuan.



Berhasil



Asset gambar dan widget Tkinter yang ditampilkan memiliki ukuran dan penempatan yang sesuai.



Berhasil



Halaman Ganti Password terbuka dan halaman Login tertutup ketika mengeksekusi Button “ Ganti Password ”.



Berhasil



Halaman Register terbuka dan halaman Login tertutup ketika mengeksekusi Button “ Daftar ”. Halaman Tentang terbuka dan halaman Login tertutup ketika mengeksekusi Button “ Tentang ”.



Berhasil



Berhasil



107



Halaman Tentang menampilkan sebuah informasi mengenai kegunaan aplikasi, cara kerja aplikasi, dan informasi pembuat aplikasi. Halaman ini dapat diakses melalui halaman Register atau dari halaman Login. Beberapa aspek yang diuji pada halaman ini yaitu : -



Kesesuaian fungsi Button: Pengujian ini digunakan untuk mengetahui keberhasilan fungsi Button bertuliskan “Kembali” untuk melakukan perpindahan navigasi ke halaman sebelumnya.



-



Kesesuaian asset dan widget: Pengujian ini digunakan untuk mengetahui keberhasilan program dalam menampilkan menampilkan asset gambar dan komponen widget Tkinter dengan ukuran dan penempatan yang sesuai. Tabel 3.5 Hasil Pengujian Pada Halaman Tentang Test ID



5.



Deskripsi Pengujian



D1



Kesesuaian fungsi Button



D2



Kesesuaian fungsi Button



D3



Kesesuaian asset dan widget



Hasil yang Diharapkan Button "Kembali" dapat membuka halaman Login dan menutup halaman Tentang apabila user mengaksesnya dari halaman Login. Button "Tentang" dapat membuka halaman Tentang dan menutup halaman Register. Mampu menampilkan asset gambar dan komponen widget Tkinter dengan ukuran dan penempatan yang sesuai.



Hasil Pengujian



Status



Button "Tentang" dapat membuka halaman Tentang dan menutup halaman Login.



Berhasi l



Halaman Tentang terbuka dan halaman Register tertutup ketika mengeksekusi Button “Tentang”. Asset gambar dan widget Tkinter yang ditampilkan memiliki ukuran dan penempatan yang sesuai.



Berhasi l



Berhasi l



Halaman Sukses Register Halaman Sukses Register akan tampil ketika user berhasil melakukan register pada halaman Register. Halaman ini berisi himbauan kepada user untuk melakukan verifikasi pada email yang baru melakukan register. Beberapa aspek yang diuji pada halaman ini yaitu : -



Kesesuaian fungsi Button: Pengujian ini digunakan untuk mengetahui keberhasilan fungsi Button bertuliskan “Daftar” untuk melakukan perpindahan navigasi ke halaman Login.



108



Kesesuaian asset dan widget: Pengujian ini digunakan untuk mengetahui



-



keberhasilan program dalam menampilkan informasi pada halaman ini yang ditampilkan oleh komponen Tkinter. Tabel 3.6 Hasil Pengujian Pada Halaman Sukses Register



6.



Test ID



Deskripsi Pengujian



E1



Kesesuaian fungsi Button



E2



Kesesuaian asset dan widget



Hasil yang Diharapkan Button "Masuk" dapat membuka halaman Login dan menutup halaman Sukses Register. Mampu menampilkan asset gambar dan komponen widget Tkinter dengan ukuran dan penempatan yang sesuai.



Hasil Pengujian



Status



Button "Masuk" dapat membuka halaman Login dan menutup halaman Sukses Register



Berhasi l



Asset gambar dan widget Tkinter yang ditampilkan memiliki ukuran dan penempatan yang sesuai.



Berhasi l



Halaman Ganti Password Halaman ini memuat komponen Entry yang digunakan untuk memasukkan email yang ingin diubah data password nya dan 2 Button lainnya yaitu Button “Ganti” dan Button “Kembali”. Beberapa aspek yang diuji pada halaman ini yaitu : -



Kesesuaian fungsi Button : Menguji keberhasilan Button “Kembali” dalam menavigasikan ke halaman sebelumnya.



-



Kesesuaian proses pergantian password : Menguji keberhasilan pergantian password yang dilakukan Button “Ganti”.



-



Kesesuaian asset dan widget : Pengujian ini digunakan untuk mengetahui keberhasilan program dalam menampilkan menampilkan asset gambar dan komponen widget Tkinter dengan ukuran dan penempatan yang sesuai.



-



Kesesuaian format email dari Firebase : Pengujian ini digunakan untuk mengetahui kesesuaian format email untuk mengganti password dari Firebase.



-



Keberhasilan fungsi layanan Firebase : Pengujian ini digunakan untuk mengetahui keberhasilan Firebase dalam memberikan menyediakan text input untuk memasukkan password baru.



109



-



Keberhasilan proses login : Pengujian ini digunakan untuk mengetahui keberhasilan proses login menggunakan password baru.



Beberapa contoh kasus yang diberikan pada proses pergantian password adalah sebagai berikut : -



Mengosongkan data email



-



Memasukkan email yang tidak terdaftar dan tidak terverifikasi



-



Memasukkan email yang terdaftar dan terverifikasi. Tabel 3.7 Hasil Pengujian Pada Halaman Ganti Password



Test ID



Deskripsi Pengujian



Hasil yang Diharapkan



F1



Kesesuaian fungsi Button



Button "Kembali" dapat membuka halaman Login dan menutup halaman Ganti Password



F2



Kesesuaian proses pergantian password



Mampu menolak proses pergantian password dari email yang tidak terdaftar dan terverifikasi. Perpindahan ke halaman Sukses Ganti Password dan pengiriman email dari Firebase untuk mengganti password tidak terjadi. Aplikasi dapat menampilkan pesan pemberitahuan berupa messagebox.



F3



Kesesuaian proses pergantian password



Mampu memproses pergantian password dari email yang telah terdaftar dan terverifikasi. Email untuk melakukan pergantian password dari Firebase dapat dikirim ke email user.



F4



Kesesuaian asset dan widget



F5



Kesesuaian format email dari Firebase



F6



Keberhasilan fungsi layanan Firebase



Mampu menampilkan asset gambar dan komponen widget Tkinter dengan ukuran dan penempatan yang sesuai. Mampu menampilkan format email pergantian password dari Firebase yang sesuai. Format email yang sesuai memiliki pemberitahuan cara mengganti password, penggunaan bahasa Indonesia dan terdapat alamat situs Firebase untuk mengganti password. Menampilkan text input untuk memasukkan password baru pada situs Firebase yang diberikan melalui email dari Firebase.



F7



Keberhasilan



Mampu melakukan



Hasil Pengujian



Status



Button "Kembali" dapat membuka halaman Login dan menutup halaman Ganti Password. Proses pergantian password dengan email yang tidak terdaftar dan terverifikasi gagal. Perpindahan ke halaman Sukses Ganti Password tidak terjadi dan menampilkan pesan pemberitahuan berupa messagebox. Email untuk mengganti password dari Firebase tidak terkirim ke email user. Proses pergantian password dengan email yang terdaftar dan terverifikasi berhasil. Email untuk melakukan pergantian password dari Firebase dapat dikirim ke email user. Asset gambar dan widget Tkinter yang ditampilkan memiliki ukuran dan penempatan yang sesuai.



Berhasil



Format email dari Firebase memiliki pemberitahuan cara mengganti password, menggunakan bahasa Indonesia, dan terdapat alamat situs Firebase untuk mengganti password. Text input untuk mengganti password dapat ditampilkan melalui situs Firebase yang diberikan melalui email dari Firebase. Proses login



Berhasil



Berhasil



Berhasil



Berhasil



Berhasil



Berhasil



110



111



(a) Email Mengganti Password Akun



(b) Mengganti Password Melalui Alamat Situs Firebase Gambar 3.63. Proses Mengganti Password Melalui Email Firebase 7.



Halaman Sukses Ganti Password Halaman ini akan memberitahukan kepada user bahwa email telah dikonfirmasi dan memberitahukan user untuk melakukan pergantian password melalui email yang dikirim melalui Firebase. Pengujian dilakukan dengan beberapa aspek: -



Kesesuaian fungsi Button: Halaman ini memiliki 2 Button yang terdiri dari Button “Masuk” dan Button “Daftar”. Pengujian Button “Masuk” dilakukan dengan menilai keberhasilan program dalam melakukan navigasi dari halaman Sukses Ganti Password ke halaman Login. Pengujian Button “Daftar” dilakukan dengan melihat keberhasilan program dalam melakukan navigasi dari halaman Sukses Ganti Password ke halaman Register.



-



Kesesuaian asset dan widget: Pengujian ini dilakukan dengan menilai keberhasilan dalam menampilkan asset gambar dan komponen widget Tkinter dengan ukuran dan penempatan yang sesuai. Tabel 3.8 Hasil Pengujian Pada Halaman Sukses Ganti Password



Test ID



Deskripsi Pengujian



G1



Kesesuaian fungsi Button



G2



Kesesuaian fungsi Button



Hasil yang Diharapkan Button "Masuk" dapat membuka halaman Login dan menutup halaman Sukses Ganti Password. Button "Daftar" dapat membuka halaman Register dan menutup



Hasil Pengujian



Status



Button "Masuk" dapat membuka halaman Login dan menutup halaman Sukses Ganti Password. Button "Daftar" dapat membuka halaman Register dan menutup



Berhasil



Berhasil



112



G3



8.



Kesesuaian asset dan widget



halaman Sukses Ganti Password. Mampu menampilkan asset gambar dan komponen widget Tkinter dengan ukuran dan penempatan yang sesuai.



halaman Sukses Ganti Password. Asset gambar dan widget Tkinter yang ditampilkan memiliki ukuran dan penempatan yang sesuai.



Berhasil



Halaman Main Halaman ini menampilkan Button yang masing – masing memiliki konfigurasi untuk pengaturan kegiatan proteksi, konfigurasi kata kunci pada kamus, pengaturan mode sembunyi, pengaturan mengganti password, dan melakukan logout. Pada bagian bawah aplikasi terdapat informasi mengenai email user yang disesuaikan dengan email yang dimasukkan ketika melakukan login. Pengujian halaman ini dibagi menjadi 2 tabel yaitu tabel yang menguji kesesuaian semua Button dan tabel menguji kesesuaian asset dan widget. Tabel 3.9 Hasil Pengujian Kesesuaian Fungsi Button Halaman Main Test ID



Deskripsi Pengujian



H1



H2



Hasil yang Diharapkan



Hasil Pengujian



Status



Kesesuaian fungsi Button



Button "Aktifkan Proteksi" dapat mengaktifkan fitur pemblokiran pornografi dan dapat menonaktifkan fitur pemblokiran pada Button “Matikan Proteksi”



Berhasil



Kesesuaian fungsi Button



Button "Modifikasi Kamus Kata Kunci" dapat menampilkan pesan konfirmasi untuk membuka halaman Modifikasi Kata Kunci dan menonaktifkan pemblokiran pornografi. Pesan konfirmasi terdiri dari Button "Yes" dan Button "No". Button “Yes” menonaktifkan fitur



Fitur pemblokiran pornografi aktif setelah mengeksekusi Button "Aktifkan Proteksi". Fitur pemblokiran tidak aktif setelah mengeksekusi Button "Matikan Proteksi". Munculnya pesan konfirmasi untuk melanjutkan atau membatalkan proses membuka halaman Modifikasi Kata Kunci, menonaktifkan pemblokiran pornografi, dan menutup halaman



Berhasil



113



pemblokiran pornografi, membuka halaman Modifikasi Kata Kunci, dan menutup halaman Main. Sedangkan Button “No” membatalkan proses tersebut. H3



Kesesuaian fungsi Button



Button "Aktifkan Mode Sembunyi" dapat menampilkan pesan konfirmasi untuk melanjutkan atau membatalkan proses mode sembunyi pada aplikasi. Terdapat Button "Yes" untuk melanjutkan dan Button "No" untuk membatalkan proses. Mode sembunyi yang aktif akan menyembunyikan aplikasi sehingga aplikasi tidak ditemukan pada taskbar.



H4



Kesesuaian fungsi Button



H5



Kesesuaian fungsi Button



Button "Ganti Password " dapat membuka halaman Ganti Password dan menutup halaman Main. Button "Keluar" dapat menampilkan pesan konfirmasi untuk menonaktifkan fitur pemblokiran pornografi dan keluar dari halaman Main. Pesan konfirmasi berisi Button "Yes" dan Button "No". Mengeksekusi Button “Yes” akan menonaktifkan fitur pemblokiran pornografi, menutup halaman Main, dan membuka halaman Login. Sedangkan Button “No” akan membatalkan proses tersebut.



Main. Proses akan dibatalkan apabila mengeksekusi Button "No" dan akan melanjutkan proses apabila mengekseksi Button "Yes". Button "Aktifkan Mode Sembunyi" dapat menampilkan pesan konfirmasi berupa Button "Yes" dan "No". Proses akan dilanjutkan ketika mengeksekusi Button "Yes" dan membatalkan proses ketika mengeksekusi Button "No". Pesan pemberitahuan selanjutnya muncul setelah proses mode sembunyi dikonfirmasi. Aplikasi tidak ditemukan di taskbar ketika mode ini aktif. Halaman Ganti Password terbuka dan menutup halaman Main. Menampilkan pesan konfirmasi untuk menonaktifkan pemblokiran pornografi dan keluar dari halaman Main. Pesan konfirmasi terdiri dari Button “Yes” dan “No”. Aplikasi akan menonaktifkan fitur pemblokiran pornografi, menutup halaman Main, dan membuka halaman Login ketika mengeksekusi Button “Yes”. Aplikasi tidak melanjutkan proses tersebut ketika mengeksekusi



Berhasil



Berhasil



Berhasil



114



Button “No”.



Tabel 3.10 Hasil Pengujian Kesesuaian Asset dan widget Halaman Main Test ID



Deskripsi Pengujian



H6



Kesesuaian asset dan widget



H7



Kesesuaian asset dan widget



H8



Kesesuaian asset dan widget



H9



Kesesuaian asset dan widget



9.



Hasil yang Diharapkan



Hasil Pengujian



Status



Tulisan pada Button "Aktifkan Proteksi" dapat berubah menjadi tulisan "Matikan Proteksi" ketika fitur pemblokiran diaktifkan. Tulisan pada Button "Matikan Proteksi" dapat berubah menjadi tulisan "Aktifkan Proteksi" ketika fitur pemblokiran dinonaktifkan. Mampu menampilkan asset gambar dan komponen widget Tkinter dengan ukuran dan penempatan yang sesuai. Mampu menampilkan email yang berhasil login pada aplikasi.



Tulisan pada Button "Aktifkan Proteksi" berubah menjadi "Matikan Proteksi" ketika fitur pemblokiran diaktifkan.



Berhasil



Tulisan pada Button "Matikan Proteksi" berubah menjadi "Aktifkan Proteksi" ketika fitur pemblokiran dinonaktifkan.



Berhasil



Asset gambar dan widget Tkinter yang ditampilkan memiliki ukuran dan penempatan yang sesuai.



Berhasil



Email pengguna yang sedang login berhasil ditampilkan



Berhasil



Halaman Modifikasi Kata Kunci Halaman ini berisi komponen Entry yang digunakan untuk memasukkan kata kunci dan Listbox yang digunakan sebagai kamus kata kunci yang menampilkan kata kunci. Halaman ini memiliki 3 Button untuk memodifikasi kamus kata kunci pada Listbox yaitu Button “Tambahkan”, Button “Hapus”, dan Button “Simpan”. Button lainnya yaitu Button “Kembali” digunakan untuk melakukan navigasi dari halaman Modifikasi Kata Kunci ke halaman Main. Pengujian pada halaman ini dapat dijelaskan pada Tabel 3.10. Tabel 3.11 Hasil Pengujian Pada Halaman Modifikasi Kata Kunci Test ID I1



Deskripsi Pengujian Kesesuaian asset dan



Hasil yang Diharapkan Mampu menampilkan asset gambar dan



Hasil Pengujian Asset gambar dan widget Tkinter yang ditampilkan



Status Berhasil



115



widget



I2



Kesesuaian fungsi Button



I3



Kesesuaian fungsi Button



I4



Kesesuaian fungsi Button



I5



Kesesuaian asset dan widget



I6



Kesesuaian fungsi Button



komponen widget Tkinter dengan ukuran dan penempatan yang sesuai. Eksekusi Button "Tambahkan" dapat menambahkan data pada Entry ke Listbox. Eksekusi Button "Tambahkan" tidak dapat menambahkan data pada Entry ke Listbox apabila memasukkan kata kunci yang telah tersedia pada Listbox dan menampilkan pesan pemberitahuan. Eksekusi Button "Hapus" dapat menghapus kata kunci yang dipilih pada Listbox dan menampilkan pesan pemberitahuan. Listbox mampu menampilkan seluruh daftar kata kunci yang dimasukkan dan tidak menampilkan kata kunci yang dihapus. Eksekusi Button "Kembali" dapat membuka halaman Main dan menutup halaman Modifikasi Kata Kunci.



memiliki ukuran dan penempatan yang sesuai. Data pada Entry dapat dimasukkan ke Listbox ketika Button dieksekusi.



Berhasil



Proses penambahan kata kunci yang sama ke dalam Listbox ditolak dan menampilkan pesan pemberitahuan ketika mengeksekusi Button “Tambahkan”.



Berhasil



Kata kunci yang terpilih pada Listbox dapat dihapus ketika Button "Hapus" dieksekusi dan menampilkan pesan pemberitahuan.



Berhasil



Listbox menampilkan seluruh daftar kata kunci yang dimasukkan dan tidak menampilkan kata kunci yang dihapus.



Berhasil



Halaman Main terbuka dan halaman Modifikasi Kata Kunci tertutup setelah mengeksekusi Button "Kembali".



Berhasil



(a) Kata Kunci “pornografi” Sebelum Ditambahkan



116



(b) Kata Kunci “pornografi” Sesudah Ditambahkan Gambar 3.64. Proses Penambahan Kata Kunci Pada Kamus Kata Kunci 10. Pengujian Pemblokiran Pornografi Pada Website Berdasarkan Kata Kunci Tujuan Pengujian ini dilakukan untuk mengetahui keberhasilan fitur pemblokiran pornografi aplikasi Bad Keywords Detector dalam menutup situs yang mengandung kata kunci pada kamus kata kunci. Pada kasus percobaan ini aplikasi diberikan beberapa kata kunci yang mengandung pornografi dan berjalan pada latar belakang desktop. Penguji mencoba untuk mencari topik yang berkaitan dengan dengan kata kunci tersebut pada situs tujuan yang terdiri dari 4 situs media sosial dan 1 situs pencarian Google. Hasil pengujian dapat dilihat pada Tabel 3.12.



Gambar 3.65 Kata Kunci Untuk Pengujian Aplikasi



117



11. Percobaan Pemblokiran Situs yang Diblokir Pemerintah Tujuan percobaan ini yaitu menguji pemblokiran situs yang telah diblokir pemerintah tetapi dapat diakses menggunakan jaringan VPN. Pemblokiran akan dilakukan berdasarkan kata kunci dan alamat website. Aplikasi VPN yang digunakan bernama Hostpot Shield yang mempunyai server di berbagai negara dan bersifat gratis. Semua percobaan ini menggunakan 6 sampel kata kunci situs pornografi dan 6 sampel kata kunci yang dapat menemukan topik pornografi secara mudah. Hasil percobaan menggunakan kata kunci tertera pada Tabel 3.12 dan Tabel 3.13. Hasil percobaan berdasarkan situs tertera pada Tabel 3.14. Tabel 3.12 Hasil Pengujian Fitur Pemblokiran Pada Website Kata Kunci



porno



bokep



bugil



lgbt



sex



Situs Tujuan facebook.com twitter.com instagram.com youtube.com facebook.com twitter.com instagram.com youtube.com facebook.com twitter.com instagram.com youtube.com facebook.com twitter.com instagram.com youtube.com facebook.com twitter.com instagram.com youtube.com



Status Pengujian



Berhasil



Berhasil



Berhasil



Berhasil



Berhasil



Tabel 3.13 Hasil Pengujian Berdasarkan Kata Kunci Pada Situs Kata Kunci bugil



Situs Tujuan 128.199.66.55 164.68.111.161 164.68.127.15



Status Pengujian Berhasil



118



nude



jav



porn



toket



bokep



pornhub.com xnxx.com xvideos.com 128.199.66.55 164.68.111.161 164.68.127.15 pornhub.com xnxx.com xvideos.com 128.199.66.55 164.68.111.161 164.68.127.15 pornhub.com xnxx.com xvideos.com 128.199.66.55 164.68.111.161 164.68.127.15 pornhub.com xnxx.com xvideos.com 128.199.66.55 164.68.111.161 164.68.127.15 pornhub.com xnxx.com xvideos.com 128.199.66.55 164.68.111.161 164.68.127.15 pornhub.com xnxx.com xvideos.com



Berhasil



Berhasil



Berhasil



Berhasil



Berhasil



Tabel 3.14 Hasil Pengujian Berdasarkan Alamat Situs Kata Kunci Situs Tujuan facebook.com 164.68.111.161 164.68.127.15



Situs Tujuan facebook.com 164.68.111.161 164.68.127.15



Status Pengujian Berhasil Berhasil Berhasil



4. PENUTUP



4.1.



Kesimpulan Aplikasi Bad Keywords Detector merupakan aplikasi desktop yang



bertujuan untuk memblokir akses situs pornografi menggunakan teknologi Tesseract



OCR



dan



screenshot



yang



dibangun



menggunakan



bahasa



pemrograman Python. Beberapa fitur yang diberikan pada aplikasi ini yaitu mampu memblokir akses situs pornografi yang tidak dapat diblokir oleh pemerintah dan memiliki fitur menyembunyikan aplikasi dari user lain. Aplikasi dibangun menggunakan Firebase sebagai layanan autentikasi user dan SQLite untuk menampung data kata kunci. Pembangunan aplikasi ini dilakukan menggunakan metode SDLC dengan model waterfall yang terdiri dari tahap anailisis kebutuhan, desain, implementasi, dan pengujian. Tahap pengujian yang dilakukan menggunakan metode Black box menghasilkan sebuah kesimpulan bahwa aplikasi berjalan dengan baik dari segi fungsionalitas dan antar muka nya pada laptop Acer Aspire 5 dengan Windows 10 Pro 64 bit. 4.2.



Saran Cukup banyak inovasi yang dapat dikembangkan melalui aplikasi ini.



Beberapa fitur yang dapat dikembangkan pada aplikasi ini yaitu ditambahkannya fitur pemblokiran konten pornografi diluar website seperti pemblokiran video, gambar, dan suara yang tersimpan pada penyimpanan. Fitur keamanan dapat ditingkatkan menggunakan sistem keamanan yang berlapis agar tidak mudah disalahgunakan oleh pihak lain.



119



DAFTAR PUSTAKA Anggraini, Trinita dan Erine Nur Maulidya. 2020. ‘Dampak Paparan Pornografi Pada Anak Usia Dini’. Al Athfaal: Jurnal Ilmiah Pendidikan Anak Usia Dini. 3(1). pp.45–55. Barjtya, Sahil., Ankur Sharma., dan Usha Rani. 2017. ‘A detailed study of Software Development Live Cycle (SDLC) Models’. Bulletin de la Societe de pathologie exitique (1990). 91(1). pp.22097-22100. Ch, Sravan., Shivanku Manha., dan Nirbhay Kashyap. 2015. ‘Optical Character Recognition on Handheld Devices’. International Journal of Computer Applications. 115(22). pp.10–13. Grover, Jigyasa 2019, Perceiving Python Programming Paradigms, Red Hat, dilihat tanggal 12 Juli 2020, Isheawy, Najib A. dan Habibul Hasan. 2015. ‘Optical Character Recognition (OCR) System’. IOSR Journal of Computer Engineering. 17(2). pp.22–26. Kementerian Hukum dan Hak Azasi Manusia. 2008. Undang-Undang Republik Indonesia Nomor 44 Tahun 2008 tentang Pornografi. URL: http://www.dpr.go.id/dokjdih/document/uu/UU_2008_44.pdf [Tanggal Akses 0507-2020]. Kimball, Thomas G. dan Patricia Salber. 2020. Why Pornography is So Powerfully Addictive, The Doctor Weighs In, dilihat tanggal 23 September 2020, . Kramer, Mitch. 2018. ‘Best Practices In Systems Development Lifecycle : An Analyses Based On The Waterfall Model’. Review of Business and Finance Studies IBFR. 9(1). pp.77-84. Kurniadi, David Dwiputra. 2015. ‘The Difference Between Using Proxy Server and VPN’. Sisforma. 2(1). pp.19–22. Manalu, Mamed R. 2015. ‘Implementasi Sistem Informasi Penyewaan Mobil Pada Cv. Btn Padang Bulan Dengan Metode Waterfall’. Jurnal Mantik Penusa. 18(2). pp.34–43.



120



Miraz, Mahdi H. dan Maaruf Ali. 2020. ‘Blockchain Enabled Smart Contract Based Applications: Deficiencies with the Software Development Life Cycle Models’. Baltica. 33(1). pp.101-116. Muller, Kendra J. 2018. ‘Pornography’s Effect on the Brain: A Review of Modifications in the Prefrontal Cortex’. Intuition: The BYU Undergraduate Journal in Psychology. 13(2). pp.1–26. Ningrum, Cahya Fadhila., Dandi Suherman., Sita Aryanti., Handika Angga P., dan Aries Saifudin. 2019. ‘Pengujian Black Box pada Aplikasi Sistem Seleksi Sales Terbaik Menggunakan Teknik Equivalence Partitions’. Jurnal Informatika Universitas Pamulang. 4(4). pp.125-130. Pradhan, Chittaranjan dan Chandrashekhar N. Bhende. 2019. ‘Online load frequency control in wind integrated power systems using modified Jaya optimization’. Engineering Applications of Artificial Intelligence. 77(1). pp.212228. Shovic, John dan Alan Simpson. 2019. Python All-In-One for Dummies. John Wiley & Sons. New Jersey.



121



LAMPIRAN LISTING 1.



Main.py import test_frame as tf from pathlib import Path if __name__ == "__main__": try : tf.initmain() except Exception as e : print(str(e))



2.



Db_connect.py import sqlite3 conn = sqlite3.connect('app.db') c = conn.cursor()



3.



Test_frame.py from tkinter import * from tkinter import ttk,messagebox import tkinter.font as tf from PIL import ImageTk,Image import re import connect_login as cl import db_connect as dc from protection import * from threading import * import testGUI2 as tg import keyboard class GUI (Thread): def __init__(self, root): Thread.__init__(self) self.root = root self.root.geometry("800x600") self.root.title("Bad Keywords Detector") self.root.resizable(0,0) self.img = None self.frame_login = Frame(self.root) self.frame_regist = Frame(self.root) self.frame_splash_screen = Frame(self.root) self.frame_success_reg = Frame(self.root) self.frame_forget_pass = Frame(self.root) self.frame_finisih_reset = Frame(self.root) self.frame_main = Frame(self.root) self.frame_badkey = Frame(self.root) self.frame_about = Frame(self.root) self.center_show(self.root) def center_show (self, root): 122



root.update_idletasks() width = root.winfo_width() height = root.winfo_height() x = (root.winfo_screenwidth() // 2) - (width // 2) y = (root.winfo_screenheight() // 2) - (height // 2) root.geometry('{}x{}+{}+{}'.format(width, height, x, y)) def change_frame(self,frame_to_destroy, class_to_load): frame_to_destroy.destroy() start_show = class_to_load() class login (GUI): def __init__(self): global login_frame_status super(login,self).__init__(root) self.frame_login.pack(fill='both', expand=1) self.frame_login.config(background="#BC302E") login_frame_status = True self.img = ImageTk.PhotoImage (Image.open("Login//Login.png")) self.canvas1 = Canvas(self.frame_login,width=96, height=41, bd=0, highlightthickness=0, bg="#BC302E") self.canvas1.create_image(0,0, image=self.img,anchor=NW) self.canvas1.image = self.img self.canvas1.place(x=352,y=74) self.img = ImageTk.PhotoImage (Image.open("Login//Email.png")) self.canvas2 = Canvas(self.frame_login,width=249, height=27, bd=0, highlightthickness=0, bg="#BC302E") self.canvas2.create_image(0,0, image=self.img,anchor=NW) self.canvas2.image = self.img self.canvas2.place(x=276,y=187) self.email_string = StringVar() self.textbox_email = ttk.Entry(self.frame_login, width=65, textvariable = self.email_string) self.textbox_email.place(x=200,y=226) self.img = ImageTk.PhotoImage (Image.open("Login//Password.png")) self.canvas3 = Canvas(self.frame_login,width=84, height=27, bd=0, highlightthickness=0, bg="#BC302E") self.canvas3.create_image(0,0, image=self.img,anchor=NW) self.canvas3.image = self.img self.canvas3.place(x=353,y=313) self.pass_string = StringVar() self.textbox_pass = ttk.Entry(self.frame_login, width=65, textvariable = self.pass_string,show="*") self.textbox_pass.place(x=200,y=352) self.img = ImageTk.PhotoImage (Image.open("Login//Login_btn.png")) self.button_log = Canvas(self.frame_login,width=145, height=49, bd=0, highlightthickness=0, bg="#BC302E",cursor="hand2") self.button_log.create_image(0,0, image=self.img,anchor=NW) self.button_log.image = self.img self.button_log.bind("", lambda e : self.to_login()) self.button_log.place(x=200,y=412)



123



self.img = ImageTk.PhotoImage (Image.open("Login//Bad Keywords Detector.png")) self.canvas5 = Canvas(self.frame_login,width=207, height=25, bd=0, highlightthickness=0, bg="#BC302E") self.canvas5.create_image(0,0, image=self.img,anchor=NW) self.canvas5.image = self.img self.canvas5.place(x=303,y=572) self.img = ImageTk.PhotoImage (Image.open("Login//register.png")) self.button_reg = Canvas(self.frame_login,width=145, height=49, bd=0, highlightthickness=0, bg="#BC302E",cursor="hand2") self.button_reg.create_image(0,0, image=self.img,anchor=NW) self.button_reg.image = self.img self.button_reg.bind("",lambda e : self.change_frame(self.frame_login,regist)) self.button_reg.place(x=450,y=412) self.img = ImageTk.PhotoImage (Image.open("Login//Reset Password.png")) self.button_reset = Canvas(self.frame_login,width=70, height=40, bd=0, highlightthickness=0, bg="#BC302E",cursor="hand2") self.button_reset.create_image(0,0, image=self.img,anchor=NW) self.button_reset.image = self.img self.button_reset.bind("", lambda e : self.change_frame(self.frame_login,forget_pass)) self.button_reset.place(x=610,y=346) self.img = ImageTk.PhotoImage (Image.open("Login//About_Button.png")) self.about_button = Canvas(self.frame_login,width=146, height=49, bd=0, highlightthickness=0, bg="#BC302E", cursor="hand2") self.about_button.create_image(0,0, image=self.img,anchor=NW) self.about_button.image = self.img self.about_button.bind("", lambda e : self.change_frame(self.frame_login,about)) self.about_button.place(x=645,y=540) def to_login(self): if (self.pass_string.get()=="" or self.email_string.get()==""): if (self.email_string.get()==""): messagebox.showwarning("Perhatian","Email kosong") elif (self.pass_string.get()==""): messagebox.showwarning("Perhatian","Password kosong") else : valid_email = re.match(r"(^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.] +$)",self.email_string.get()) if valid_email : cl.check_email_ver(self.email_string.get(),self.pass_string.get()) if (cl.valid_continue==True): self.change_frame(self.frame_login,main_panel) else : messagebox.showwarning("Perhatian","Email tidak benar") class reset_finish(GUI): def __init__(self): super(reset_finish,self).__init__(root)



124



self.frame_finisih_reset.pack(fill='both', expand=1) self.frame_finisih_reset.config(background="#BC302E") self.img = ImageTk.PhotoImage (Image.open("Reset Finish//Check Email to Change Your Password.png")) self.canvas1 = Canvas(self.frame_finisih_reset,width=597, height=41, bd=0, highlightthickness=0, bg="#BC302E") self.canvas1.create_image(0,0, image=self.img,anchor=NW) self.canvas1.image = self.img self.canvas1.place(x=102,y=127) self.img = ImageTk.PhotoImage (Image.open("Reset Finish//login.png")) self.button_login = Canvas(self.frame_finisih_reset,width=145, height=49, bd=0, highlightthickness=0, bg="#BC302E",cursor="hand2") self.button_login.create_image(0,0, image=self.img,anchor=NW) self.button_login.image = self.img self.button_login.bind("", lambda e : self.change_frame(self.frame_finisih_reset,login)) self.button_login.place(x=331,y=234) self.img = ImageTk.PhotoImage (Image.open("Reset Finish//register.png")) self.button_register = Canvas(self.frame_finisih_reset,width=145, height=49, bd=0, highlightthickness=0, bg="#BC302E",cursor="hand2") self.button_register.create_image(0,0, image=self.img,anchor=NW) self.button_register.image = self.img self.button_register.bind("", lambda e : self.change_frame(self.frame_finisih_reset,regist)) self.button_register.place(x=331,y=312) class forget_pass (GUI): def __init__(self): super(forget_pass,self).__init__(root) self.frame_forget_pass.pack(fill='both', expand=1) self.frame_forget_pass.config(background="#BC302E") self.img = ImageTk.PhotoImage (Image.open("Reset//Reset Password.png")) self.canvas1 = Canvas(self.frame_forget_pass,width=249, height=41, bd=0, highlightthickness=0, bg="#BC302E") self.canvas1.create_image(0,0, image=self.img,anchor=NW) self.canvas1.image = self.img self.canvas1.place(x=277,y=73) self.img = ImageTk.PhotoImage (Image.open("Reset//Input Email Here.png")) self.canvas2 = Canvas(self.frame_forget_pass,width=161, height=27, bd=0, highlightthickness=0, bg="#BC302E") self.canvas2.create_image(0,0, image=self.img,anchor=NW) self.canvas2.image = self.img self.canvas2.place(x=319,y=180) self.email_string = StringVar() self.textbox_email = ttk.Entry(self.frame_forget_pass, width=65, textvariable = self.email_string) self.textbox_email.place(x=200,y=230) self.img = ImageTk.PhotoImage (Image.open("Reset//reset.png"))



125



self.button_reset = Canvas(self.frame_forget_pass,width=145, height=49, bd=0, highlightthickness=0, bg="#BC302E",cursor="hand2") self.button_reset.create_image(0,0, image=self.img,anchor=NW) self.button_reset.image = self.img self.button_reset.bind("", lambda e : self.to_reset_pass()) self.button_reset.place(x=331,y=308) self.img = ImageTk.PhotoImage (Image.open("Reset//back.png")) self.button_back = Canvas(self.frame_forget_pass,width=145, height=49, bd=0, highlightthickness=0, bg="#BC302E",cursor="hand2") self.button_back.create_image(0,0, image=self.img,anchor=NW) self.button_back.image = self.img self.button_back.bind("", lambda e : self.to_back()) self.button_back.place(x=331,y=382) def to_reset_pass (self): if (self.email_string.get()==""): messagebox.showwarning("Perhatian","Email kosong") else : valid_email = re.match(r"(^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.] +$)",self.email_string.get()) if valid_email : cl.reset_pass(self.email_string.get()) if (cl.valid_continue==False): pass elif (cl.valid_continue==True) : self.change_frame(self.frame_forget_pass,reset_finish) else : messagebox.showwarning("Perhatian","Email tidak benar") def to_back (self): global login_frame_status if login_frame_status == True : self.change_frame(self.frame_forget_pass,login) else: self.change_frame(self.frame_forget_pass,main_panel) class regist (GUI): def __init__(self): global login_frame_status login_frame_status = False super(regist,self).__init__(root) self.frame_regist.pack(fill='both', expand=1) self.frame_regist.config(background="#BC302E") self.email_string = "" self.pass_string = "" self.conf_pass_string = "" self.valid = False self.img = ImageTk.PhotoImage (Image.open("Regist//Register Now !.png")) self.label1 = Canvas(self.frame_regist,width=250, height=41, bd=0, highlightthickness=0, bg="#BC302E") self.label1.create_image(0,0, image=self.img,anchor=NW) self.label1.image = self.img self.label1.place(x=47,y=74)



126



self.img = ImageTk.PhotoImage (Image.open("Regist//label2.png")) self.label2 = Canvas(self.frame_regist,width=342, height=27, bd=0, highlightthickness=0, bg="#BC302E") self.label2.create_image(0,0, image=self.img,anchor=NW) self.label2.image = self.img self.label2.place(x=47,y=130) self.img = ImageTk.PhotoImage (Image.open("Regist//Username.png")) self.label_email = Canvas(self.frame_regist,width=276, height=27, bd=0, highlightthickness=0, bg="#BC302E") self.label_email.create_image(0,0, image=self.img,anchor=NW) self.label_email.image = self.img self.label_email.place(x=47,y=188) self.email_string = StringVar() self.textbox_email = ttk.Entry(self.frame_regist, width=61, textvariable = self.email_string) self.textbox_email.place(x=47,y=230) self.img = ImageTk.PhotoImage (Image.open("Regist//passw.png")) self.label_pass = Canvas(self.frame_regist,width=374, height=27, bd=0, highlightthickness=0, bg="#BC302E") self.label_pass.create_image(0,0, image=self.img,anchor=NW) self.label_pass.image = self.img self.label_pass.place(x=47,y=273) self.pass_string = StringVar() self.textbox_pass = ttk.Entry(self.frame_regist, width=61, textvariable = self.pass_string,show="*") self.textbox_pass.place(x=47,y=315) self.img = ImageTk.PhotoImage (Image.open("Regist//conf.png")) self.label_conf = Canvas(self.frame_regist,width=204, height=27, bd=0, highlightthickness=0, bg="#BC302E") self.label_conf.create_image(0,0, image=self.img,anchor=NW) self.label_conf.image = self.img self.label_conf.place(x=47,y=358) self.conf_pass_string = StringVar() self.textbox_passw_conf = ttk.Entry(self.frame_regist, width=61, textvariable = self.conf_pass_string,show="*") self.textbox_passw_conf.place(x=47,y=400) self.img = ImageTk.PhotoImage (Image.open("Regist//register_button.png")) self.button_reg = Canvas(self.frame_regist,width=145, height=49, bd=0, highlightthickness=0, bg="#BC302E",cursor="hand2") self.button_reg.create_image(0,0, image=self.img,anchor=NW) self.button_reg.image = self.img self.button_reg.bind("", lambda e : self.check_data()) self.button_reg.place(x=47,y=465) self.img = ImageTk.PhotoImage (Image.open("Regist//login.png")) self.button_login = Canvas(self.frame_regist,width=145, height=49, bd=0, highlightthickness=0, bg="#BC302E",cursor="hand2") self.button_login.create_image(0,0, image=self.img,anchor=NW) self.button_login.image = self.img self.button_login.bind("", lambda e : self.change_frame(self.frame_regist,login))



127



self.button_login.place(x=205,y=465) self.img = ImageTk.PhotoImage (Image.open("Regist//flat_fam.png")) self.flat_fam = Canvas(self.frame_regist,width=300, height=284, bd=0, highlightthickness=0, bg="#BC302E") self.flat_fam.create_image(0,0, image=self.img,anchor=NW) self.flat_fam.image = self.img self.flat_fam.place(x=440,y=144) self.img = ImageTk.PhotoImage (Image.open("Regist//about_button.png")) self.about_button = Canvas(self.frame_regist,width=146, height=49, bd=0, highlightthickness=0, bg="#BC302E", cursor="hand2") self.about_button.create_image(0,0, image=self.img,anchor=NW) self.about_button.image = self.img self.about_button.bind("", lambda e : self.change_frame(self.frame_regist,about)) self.about_button.place(x=645,y=530) def check_data (self): self.valid = False if (self.email_string.get() == "" or self.pass_string.get() == "" or self.conf_pass_string.get() == ""): if (self.email_string.get() == ""): messagebox.showwarning("Perhatian", "Email kosong") elif (self.pass_string.get() == ""): messagebox.showwarning("Perhatian", "Password kosong") elif (self.conf_pass_string.get() == ""): messagebox.showwarning("Perhatian", "Konfirmasi password kosong") else: self.check_email() def check_email (self): valid_email = re.match(r"(^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+ $)",self.email_string.get()) if valid_email: self.check_pass() else: messagebox.showwarning("Perhatian", "Email salah") def check_pass (self): if (self.pass_string.get() == self.conf_pass_string.get()): self.check_long_pass() elif (self.pass_string.get() != self.conf_pass_string.get()): messagebox.showwarning("Perhatian", "Password tidak benar") def check_long_pass (self): valid_long_pass = re.match(r"^(?=.*\d).{6,}$",self.pass_string.get()) if valid_long_pass: self.valid = True else: messagebox.showwarning("Perhatian", "Panjang minimal password 6 karakter dan memiliki 1 karakter numerik") if (self.valid == True): self.valid = cl.create_user(self.email_string.get(),self.pass_string.get()) if (self.valid == True): self.change_frame(self.frame_regist,success_regist)



128



class splash_screen (GUI): def __init__(self): super(splash_screen,self).__init__(root) self.frame_splash_screen.pack(fill='both', expand=1) self.frame_splash_screen.config(background="#BC302E") self.img = ImageTk.PhotoImage (Image.open("Splash Screen//Bad Keywords Detector.png")) self.canvas2 = Canvas(self.frame_splash_screen,width=344, height=31,bd=0, highlightthickness=0,bg="#BC302E") self.canvas2.create_image(0,0, image=self.img,anchor=NW) self.canvas2.image = self.img self.canvas2.place(x=47,y=100) self.img = ImageTk.PhotoImage (Image.open("Splash Screen//flatdesignfam.png")) self.canvas3 = Canvas(self.frame_splash_screen,width=400, height=246,bd=0, highlightthickness=0,bg="#BC302E") self.canvas3.create_image(0,0, image=self.img,anchor=NW) self.canvas3.image = self.img self.canvas3.place(x=191,y=194) self.img = ImageTk.PhotoImage (Image.open("Splash Screen//Save Our Family From Bad Contents !.png")) self.canvas4 = Canvas(self.frame_splash_screen,width=480, height=27,bd=0, highlightthickness=0,bg="#BC302E") self.canvas4.create_image(0,0, image=self.img,anchor=NW) self.canvas4.image = self.img self.canvas4.place(x=163,y=538) self.img = ImageTk.PhotoImage (Image.open("Splash Screen//start.png")) self.canvas_btn1 = Canvas(self.frame_splash_screen,width=146, height=49,bd=0, highlightthickness=0,bg="#BC302E",cursor="hand2") self.canvas_btn1.create_image(0,0, image=self.img,anchor=NW) self.canvas_btn1.image = self.img self.canvas_btn1.bind("", lambda e : self.change_frame(self.frame_splash_screen,regist)) self.canvas_btn1.place(x=321,y=471) class success_regist (GUI): def __init__(self): super(success_regist,self).__init__(root) self.frame_success_reg.pack(fill='both', expand=1) self.frame_success_reg.config(background="#BC302E") self.img = ImageTk.PhotoImage (Image.open("Success//Success !.png")) self.label_success = Canvas(self.frame_success_reg,width=129, height=41,bd=0, highlightthickness=0,bg="#BC302E") self.label_success.create_image(0,0, image=self.img,anchor=NW) self.label_success.image = self.img self.label_success.place(x=335,y=35) self.img = ImageTk.PhotoImage (Image.open("Success//Cek your email to verify.png")) self.label_check_your = Canvas(self.frame_success_reg,width=464, height=27,bd=0, highlightthickness=0,bg="#BC302E") self.label_check_your.create_image(0,0, image=self.img,anchor=NW)



129



self.label_check_your.image = self.img self.label_check_your.place(x=168,y=88) self.img = ImageTk.PhotoImage (Image.open("Success//kar.png")) self.canvas1 = Canvas(self.frame_success_reg,width=256, height=300,bd=0, highlightthickness=0,bg="#BC302E") self.canvas1.create_image(0,0, image=self.img,anchor=NW) self.canvas1.image = self.img self.canvas1.place(x=273,y=150) self.img = ImageTk.PhotoImage (Image.open("Success//login.png")) self.button_login = Canvas(self.frame_success_reg,width=145, height=49, bd=0, highlightthickness=0, bg="#BC302E",cursor="hand2") self.button_login.create_image(0,0, image=self.img,anchor=NW) self.button_login.image = self.img self.button_login.bind("", lambda e : self.change_frame(self.frame_success_reg,login)) self.button_login.place(x=331,y=485) class main_panel (GUI): pr = proctection() pr.daemon = True #first_time = True def __init__(self): super(main_panel,self).__init__(root) self.frame_main.pack(fill='both', expand=1) self.frame_main.config(background="#BC302E") global login_frame_status login_frame_status = False self.a = [] self.query = "SELECT * FROM blacklist" dc.c.execute(self.query) self.result = dc.c.fetchall() self.final_result = [list(i) for i in self.result] for value in self.final_result: self.a += value tg.save_temp(self.a) self.img = None if self.pr.en == False: self.img = ImageTk.PhotoImage (Image.open("Main//enable.png")) else : self.img = ImageTk.PhotoImage (Image.open("Main//disable.png")) self.button_enable = Canvas(self.frame_main,width=312, height=102, bd=0, highlightthickness=0, bg="#BC302E",cursor="hand2") self.button_enable.create_image(0,0, image=self.img,anchor=NW) self.button_enable.image = self.img self.button_enable.bind("", lambda e : self.tes()) self.button_enable.place(x=251,y=105) self.img = ImageTk.PhotoImage (Image.open("Main//setupbad.png")) self.button_setup = Canvas(self.frame_main,width=312, height=49, bd=0, highlightthickness=0, bg="#BC302E",cursor="hand2") self.button_setup.create_image(0,0, image=self.img,anchor=NW) self.button_setup.image = self.img



130



self.button_setup.bind("", lambda e : self.to_badkey()) self.button_setup.place(x=249,y=222) self.img = ImageTk.PhotoImage (Image.open("Main//reset.png")) self.button_reset = Canvas(self.frame_main,width=312, height=49, bd=0, highlightthickness=0, bg="#BC302E",cursor="hand2") self.button_reset.create_image(0,0, image=self.img,anchor=NW) self.button_reset.image = self.img self.button_reset.bind("", lambda e : self.change_frame(self.frame_main,forget_pass)) self.button_reset.place(x=249,y=364) self.img = ImageTk.PhotoImage (Image.open("Main//stealth.png")) self.button_stealth = Canvas(self.frame_main,width=312, height=49, bd=0, highlightthickness=0, bg="#BC302E",cursor="hand2") self.button_stealth.create_image(0,0, image=self.img,anchor=NW) self.button_stealth.image = self.img self.button_stealth.bind("", lambda e : self.setup_stealth()) self.button_stealth.place(x=249,y=293) self.img = ImageTk.PhotoImage (Image.open("Main//email.png")) self.canvas3 = Canvas(self.frame_main,width=66, height=26,bd=0, highlightthickness=0,bg="#BC302E") self.canvas3.create_image(0,0, image=self.img,anchor=NW) self.canvas3.image = self.img self.canvas3.place(x=248,y=543) self.img = ImageTk.PhotoImage (Image.open("Main//logout.png")) self.button_logout = Canvas(self.frame_main,width=95, height=49, bd=0, highlightthickness=0, bg="#BC302E",cursor="hand2") self.button_logout.create_image(0,0, image=self.img,anchor=NW) self.button_logout.image = self.img self.button_logout.bind("", lambda e : self.logout()) self.button_logout.place(x=700,y=15) Label(self.frame_main,text=cl.email_user_text,font=('Proza Libre',18), bd=0, highlightthickness=0, bg="#BC302E",fg="#FFFFFF").place(x=317,y=538) def to_badkey (self): if self.pr.en == True : MsgBox = messagebox.askquestion ('Perhatian','Apakah anda ingin mengganti kamus ? Proteksi akan dinonaktifkan',icon = 'warning') if MsgBox == 'yes': self.pr.en = False self.change_frame(self.frame_main,bad_keywords) else: self.change_frame(self.frame_main,bad_keywords) def tes (self): if self.pr.en == True : self.pr.en = False self.img = ImageTk.PhotoImage (Image.open("Main//enable.png")) self.button_enable.create_image(0,0, image=self.img,anchor=NW) self.button_enable.image = self.img else : self.pr.en = True self.img = ImageTk.PhotoImage (Image.open("Main//disable.png"))



131



self.button_enable.create_image(0,0, image=self.img,anchor=NW) self.button_enable.image = self.img try: self.pr.start() except: pass def show_tk (self): self.root.update() self.root.deiconify() def hide_tk (self): self.root.update() self.root.withdraw() self.change_frame(self.frame_main,login) def keyboard_command (self): keyboard.add_hotkey('ctrl+alt+s', self.show_tk) keyboard.add_hotkey('ctrl+alt+h', self.hide_tk) def setup_stealth (self): MsgBox = messagebox.askquestion ('Perhatian','Mode ini akan menyembunyikan tampilan aktif dari aplikasi ini untuk menghindari penutupan aplikasi dari pihak lain, aktifkan mode ?',icon = 'warning') if MsgBox == 'yes': messagebox.showwarning ("Perhatian", "Aplikasi ini akan bersembunyi, apabila ingin mengaktifkan aplikasi ini tekan tombol ctrl+alt+s") self.keyboard_command() self.hide_tk() def logout (self): MsgBox = messagebox.askquestion ('Perhatian','Apakah ingin keluar ? Proteksi akan dinonaktifkan',icon = 'warning') if MsgBox == 'yes': self.pr.en = False self.change_frame(self.frame_main,login) class bad_keywords (GUI): def __init__(self): super(bad_keywords,self).__init__(root) self.frame_badkey.pack(fill='both', expand=1) self.frame_badkey.config(background="#BC302E") self.duplicate_data_bool = None self.list_badkey_list = [] self.img = ImageTk.PhotoImage (Image.open("Bad Key//Bad Keywords.png")) self.canvas1 = Canvas(self.frame_badkey,width=263, height=41, bd=0, highlightthickness=0, bg="#BC302E") self.canvas1.create_image(0,0, image=self.img,anchor=NW) self.canvas1.image = self.img self.canvas1.place(x=269,y=31) self.img = ImageTk.PhotoImage (Image.open("Bad Key//You can add the url website to block it.png")) self.canvas3 = Canvas(self.frame_badkey,width=441, height=27, bd=0, highlightthickness=0, bg="#BC302E") self.canvas3.create_image(0,0, image=self.img,anchor=NW) self.canvas3.image = self.img



132



self.canvas3.place(x=147,y=116) self.img = ImageTk.PhotoImage (Image.open("Bad Key//add.png")) self.btn_add = Canvas(self.frame_badkey,width=145, height=49, bd=0, highlightthickness=0, bg="#BC302E",cursor="hand2") self.btn_add.create_image(0,0, image=self.img,anchor=NW) self.btn_add.image = self.img self.btn_add.bind("", lambda e : self.insert_to_list(self.badkey_string.get())) self.btn_add.place(x=617,y=163) self.img = ImageTk.PhotoImage (Image.open("Bad Key//remove.png")) self.btn_remove = Canvas(self.frame_badkey,width=145, height=49, bd=0, highlightthickness=0, bg="#BC302E",cursor="hand2") self.btn_remove.create_image(0,0, image=self.img,anchor=NW) self.btn_remove.image = self.img self.btn_remove.bind("", lambda e : self.remove_data()) self.btn_remove.place(x=617,y=231) self.img = ImageTk.PhotoImage (Image.open("Bad Key//save.png")) self.btn_save = Canvas(self.frame_badkey,width=145, height=49, bd=0, highlightthickness=0, bg="#BC302E",cursor="hand2") self.btn_save.create_image(0,0, image=self.img,anchor=NW) self.btn_save.image = self.img self.btn_save.bind("", lambda e : self.save_data()) self.btn_save.place(x=617,y=308 self.img = ImageTk.PhotoImage (Image.open("Bad Key//back.png")) self.btn_back = Canvas(self.frame_badkey,width=145, height=49, bd=0, highlightthickness=0, bg="#BC302E",cursor="hand2") self.btn_back.create_image(0,0, image=self.img,anchor=NW) self.btn_back.image = self.img self.btn_back.bind("", lambda e : self.change_frame(self.frame_badkey,main_panel)) self.btn_back.place(x=298,y=507) self.badkey_string = StringVar() self.textbox_badkey = ttk.Entry(self.frame_badkey, width=75,textvariable = self.badkey_string) self.textbox_badkey.place(x=147,y=175) self.list_badkey = Listbox(self.frame_badkey,width=75) self.list_badkey.place(x=147,y=231) self.show_badkey( def insert_to_list (self,badkey): self.duplicate_data_bool = False self.duplicate_data() if (self.duplicate_data_bool==False): self.list_badkey.insert(END,badkey) def duplicate_data (self): for data_in_list in self.list_badkey.get(0,END): if (data_in_list == self.badkey_string.get()): messagebox.showwarning("Perhatian","Kata kunci ini telah dimasukkan") self.duplicate_data_bool = True def remove_data (self): self.list_badkey.delete(ANCHOR)



133



messagebox.showwarning ("Perhatian","Kata kunci berhasil dihapus") def save_data (self): self.list_badkey_list = self.list_badkey.get(0,END) dc.conn.execute("delete from blacklist") for value in self.list_badkey_list: dc.conn.execute("insert into blacklist values ('" + value + "')") dc.conn.commit() tg.save_temp(self.list_badkey_list) messagebox.showwarning ("Perhatian","Kata kunci berhasil dimasukkan") def show_badkey (self): a = [] query = "SELECT * FROM blacklist" dc.c.execute(query) result = dc.c.fetchall() final_result = [list(i) for i in result] for value in final_result: a += value for val in a: self.list_badkey.insert(END,val) class about (GUI): def __init__ (self): super(about,self).__init__(root) self.frame_about.pack(fill='both', expand=1) self.frame_about.config(background="#BC302E") self.img = ImageTk.PhotoImage (Image.open("About//Back_Button.png")) self.back_button = Canvas(self.frame_about,width=146, height=49, bd=0, highlightthickness=0, bg="#BC302E",cursor="hand2") self.back_button.create_image(0,0, image=self.img,anchor=NW) self.back_button.image = self.img self.back_button.bind("", lambda e : self.change_frame_2()) self.back_button.place(x=14,y=539) self.img = ImageTk.PhotoImage (Image.open("About//gunadarma_logo.png")) self.gunadarma_logo = Canvas(self.frame_about,width=153, height=158, bd=0, highlightthickness=0, bg="#BC302E") self.gunadarma_logo.create_image(0,0, image=self.img,anchor=NW) self.gunadarma_logo.image = self.img self.gunadarma_logo.place(x=619,y=434) self.img = ImageTk.PhotoImage (Image.open("About//about_text.png")) self.about_text = Canvas(self.frame_about,width=764, height=86, bd=0, highlightthickness=0, bg="#BC302E") self.about_text.create_image(0,0, image=self.img,anchor=NW) self.about_text.image = self.img self.about_text.place(x=40,y=105) self.img = ImageTk.PhotoImage (Image.open("About//Created_by.png")) self.Created_by = Canvas(self.frame_about,width=300, height=150, bd=0, highlightthickness=0, bg="#BC302E") self.Created_by.create_image(0,0, image=self.img,anchor=NW) self.Created_by.image = self.img self.Created_by.place(x=249,y=231) self.img = ImageTk.PhotoImage (Image.open("About//gunadarma_text.png"))



134



self.gunadarma_text = Canvas(self.frame_about,width=340, height=123, bd=0, highlightthickness=0, bg="#BC302E") self.gunadarma_text.create_image(0,0, image=self.img,anchor=NW) self.gunadarma_text.image = self.img self.gunadarma_text.place(x=238,y=436) self.img = ImageTk.PhotoImage (Image.open("About//Bad Keywords Detector.png")) self.title = Canvas(self.frame_about,width=344, height=41, bd=0, highlightthickness=0, bg="#BC302E") self.title.create_image(0,0, image=self.img,anchor=NW) self.title.image = self.img self.title.place(x=228,y=40) def change_frame_2 (self): global login_frame_status if login_frame_status == True : self.change_frame(self.frame_about,login) else: self.change_frame(self.frame_about,regist) print(login_frame_status) root = None window = None login_frame_status = False def initmain (): global root,window root = Tk() root.protocol('WM_DELETE_WINDOW', close_window_logout) window = GUI(root) window.start() window.change_frame(window.frame_login,splash_screen) root.mainloop() def close_window_logout (): MsgBox = messagebox.askquestion ('Perhatian','Keluar aplikasi ? Proteksi akan dinonaktifkan',icon = 'warning') if MsgBox == 'yes': root.destroy() if __name__ == "__main__": initmain()



4.



Connect_login.py import pyrebase from tkinter import messagebox config = { "apiKey": "AIzaSyB-Hk41XUd8KT8WqUMkpvEih91rVBekMc0", "authDomain": "bkd2020-89e7d.firebaseapp.com", "databaseURL": "https://bkd2020-89e7d.firebaseio.com", "projectId": "bkd2020-89e7d", "storageBucket": "bkd2020-89e7d.appspot.com", "messagingSenderId": "42323350809", "appId": "1:42323350809:web:aacffc1dbf513100ede188",



135



"measurementId": "G-BCNTHQB382" } firebase = pyrebase.initialize_app(config) auth = firebase.auth() user = None user_login = None username_text = None email_user_text = None valid_continue = None import requests.exceptions import json key_user = None login_status = None def create_user (email,password): global user, valid_continue valid_continue = True try: user = auth.create_user_with_email_and_password(email,password) except requests.exceptions.HTTPError : messagebox.showwarning("Perhatian", "Email tidak terdaftar") valid_continue = False except : messagebox.showwarning("Perhatian", "Tidak ada koneksi internet") valid_continue = False if valid_continue == True : send_ver(email,password) return valid_continue def send_ver(email,password): global user_login user_login = auth.sign_in_with_email_and_password(email,password) auth.send_email_verification(user_login['idToken']) def check_email_ver (email,password): global user_login, key_user, email_user_text, valid_continue valid_continue = True try : user_login = auth.sign_in_with_email_and_password(email,password) except requests.exceptions.HTTPError : messagebox.showwarning("Perhatian", "Email tidak terdaftar atau password salah") valid_continue = False except : messagebox.showwarning("Perhatian", "Tidak ada koneksi internet") valid_continue = False finally : if (valid_continue==True) : get_user_info_str = json.dumps(auth.get_account_info (user_login['idToken'])) get_user_info_dict = json.loads(get_user_info_str) if(get_user_info_dict['users'][0]['emailVerified']==False):



136



MsgBox = messagebox.askquestion("Perhatian", "Periksa email anda untuk melakukan verifikasi. Apakah email verifikasi belum tersedia ?") if MsgBox == 'yes' : send_ver(email, password) messagebox.showwarning("Perhatian","Cek kembali email anda untuk melakukan verifikasi email") valid_continue = False else: key_user = get_user_info_dict['users'][0]['localId'] email_user_text = get_user_info_dict['users'][0]['email'] def reset_pass (email): global valid_continue valid_continue = True try : auth.send_password_reset_email(email) except requests.exceptions.HTTPError : messagebox.showwarning("Perhatian", "Email tidak terdaftar") valid_continue = False except : messagebox.showwarning("Perhatian", "Tidak ada koneksi internet") valid_continue = False



5.



Protection.py from threading import * import time import mss import pytesseract as test import pyautogui from PIL import Image, ImageEnhance import testGUI2 as tg class proctection (Thread): en = False a=0 def run(self): self.testloop() def testloop (self): while True: if self.en == False : print("") else: tg.scanning()



6.



testGUI2.py from tkinter import * import pytesseract as test from PIL import Image, ImageEnhance import time import pyautogui import os



137



import mss from pathlib import Path temp = [] def save_temp(list_blacklist): global temp temp = list_blacklist def block (): pyautogui.FAILSAFE = False pyautogui.hotkey('ctrl','f4') pyautogui.keyUp('ctrl') pyautogui.keyUp('f4') def scanning(): global temp text = "" test.pytesseract.tesseract_cmd = str(Path().absolute())+'\\TesseractOCR\\tesseract.exe' with mss.mss() as sct: for num, monitor in enumerate(sct.monitors[1:], 1): sct_img = sct.grab(monitor) img = Image.frombytes("RGB", sct_img.size, sct_img.bgra, "raw", "BGRX") text = test.image_to_string (img).lower() for value in temp: if value in text: block()



138



LAMPIRAN OUTPUT



Halaman Splash Screen



Halaman Login



Halaman Register



Halaman Tentang



Halaman Sukses Register



Halaman Ganti Password



138



Halaman Sukses Ganti Password



Halaman Main



Halaman Modifikasi Kata Kunci



139