Pastikan anda telah membaca atikel sebelumnya tentang bagaimana memulai menggunakan Tensorflow.js. tutorial kali ini merupakan lanjutan dari tutorial sebelumnya yang mana seperti kita ketahui bersama kehebatan Tensorflow.js yang dapat memudahkan para developer web untuk melakukan proses pengenalan wajah dan sebagainya. Pada kesempatan kali ini kita akan mesharing cara melakukan proses pencocokan wajah atau (face recognition) dengan menggunakan face-api.js yang berjalan diatas Tensorflow.js core. Perbedaan mendasar tutorial kali ini dengan turorial sebelumnya adalah, kalau tutorial sebelumnya kita telah dapat memanfaatkan face-api.js untuk mengenali wajah. Maka kali ini kita akan membandingkan wajah, yang berarti terdapat dua model yang harus disediakan.
Saya telah menyiapkan contoh model dan contoh gambar yang akan di tes. Semua kelengkapan dapat di download di sini Langsung saja seperti yang sudah dijelaskan dalam tutorial sebelumnya pastikan webserver dan peralatan yang telah dibutuhkan telah terinstal ke dalam computer Anda. Jika semua peralatan telah tersedia semua maka tinggal ikuti langkah-langkah di bawah ini.
Buat folder baru dengan nama face-matching di folder httdoc Anda
Extract file yang ditelah didownload ke dalam folder yang kita buat
Buat file index.html
Tambahkan tag standar html dan pastikan tag heder mempunyai tampilan seperti di bawah ini.
Tambahakan input file pada body yang akan kita gunakan untuk mengupload data
Buatlah file script.js dalam folder yang sama dengan file index.html menyesuaikan dengan sintak yang ada dalam line 9.
Isikan deklarasi variable untuk menghadle event file upload click
Tambahkan sintak pemanggilan terhadap library tensorflow face-api.js
Tambahkan fungsi start yang akan dijalankan otomatis ketika semua model tensorflow selesai di-load
Tambahkan fungsi untuk membaca model sample data yang telah disiapkanKetika start dijalankan tambahkan dulu sebuah tag <div> sebagai container
Panggil fungsi loadLabeledImages() sebagai inisialisasi sumber image model atau bisa dibilang database wajah kita.
Buat event listener untuk file upload. Sehingga proses pencocokan akan dijalankan ketika file berhasil di upload
Tambahkan sintaks untuk mencocokan data sisipkan sitak di bawah ini setelah line 21
Jalankan program
Selamat Mencoba!
Untuk source code tutorial ini dapat diunduh di sini.
Menyenangkan rasanya ketika membuat sebuah aplikasi berbasis Machine Learning bukan suatu hal yang mustahil lagi bagi web developer. Berkat TensorFlow.js yang merupakan salah satu framework open source berbasis pada TensorFlow, kini belajar machine learning menjadi sesuatu yang sangat mudah. Bahkan bisa dibilang hanya membutuhkan beberapa baris code saja. Terdapat face-api.js yang bekerja di atas tensorflow.js yang telah mengimplementasikan Algoritma CNNs (Convolutional Neural Networks), untuk memecahkan permsalahan seperti Pendeteksian wajah, pengenalan wajah, Face Lanmark dan sebagainya. Ok supaya tidak Panjang lebar mari kita langsung persiapkan segala sesuatunya.
Pastikan telah terinstall xampp, atau package webserver favorit kita di laptop yang akan digunakan
Buat folder baru dengan nama face-detection di htdoc
Pada bagian body tambahkan element video dan canvas.
Buat file script.js di folder dist sehingga kurang lebih tampilan isi file akan menjadi seperti gambar di bawah.
Dalam file script.js tambahkan deklarasi sebuah variable yang mengarah ke elemen video dan canvas
Panggil seluruh model yang dibutuhkan dengan menggunakan perintah promise. Pada kesempatan kali ini kita akan menggunakan pendeteksian wajah,kondisi mood, dan pendeteksian landamark pada wajah.
Tambahkan perintah untuk memulai penggunaan webcam dengan menambahkan fungsi startWbcam.
Sampai langkah ini maka ketika kita jalankan di browser makan akan keluar popup permintaan izin untuk menggunakan webcam atau camera. Pastikan tekan tombol Allow untuk memberikan izin kepada browser untuk menggunakan webcam/ camera. Jika proses berjalan lancar maka seharusnya webcam sudah menampilkan gambar dan berfungsi dengan baik. Jika terjadi kesalahan atau gambar tidak muncul berarti terdapat kesalahan ketik pada kode program. Untuk melihat kode program yang error bisa dilakukan inspect element pada browser.
Tambahkan fungsi listener yang akan otomatis dijalankan ketika webcam/ camera telah berhasil diakses yang otomatis akan menjalankan function renderVideo()
Tambahkan sintax untuk mulai melakukan pengenalan wajah. Dalam fungsi renderVideo(). Akan dilakukan perulangan secara terus menerus, supaya proses pendeteksian wajah akan selalu dilakukan selama camera berjalan.
Jika berjalan lancar maka setiap ada orang yang lewat didepan kamera akan terdeteksi wajahnya.
Aplikasi yang berkualitas dimulai dari source code atau kode sumber yang berkualitas pula. Bila kode sumber yang dihasilkan oleh pemrogram (programmer) masih terdapat kesalahan atau bug, tidak mengikuti standar pemrograman yang baik atau masih menyisakan berbagai lubang keamanan, maka akan memberikan dampak yang negatif bagi jalannya aplikasi pada saat digunakan. Para peretas (hacker) akan mampu melakukan eksploitasi terhadap berbagai kerentanan yang terdapat di aplikasi tersebut sehingga dapat menyebabkan kerugian yang besar bagi perusahaan atau organisasi.
Untuk meminimalisir kerentanan yang bisa terdapat dalam aplikasi, maka perlu dilakukan pengujian atau audit terhadap aplikasi tersebut. Ada 2 (dua) pendekatan dalam melakukan pengujian atau audit terhadap aplikasi, yaitu Static Application Security Testing (SAST) dan Dynamic Application Security Testing (DAST).
SAST, juga dikenal sebagai white box testing, dapat menemukan berbagai kerentanan dan lubang keamanan dalam kode sumber aplikasi secara lebih awal dalam siklus hidup pengembangan aplikasi. Ini juga memastikan kesesuaian dengan pedoman dan standar pemrograman tanpa perlu melakukan eksekusi aplikasinya. SAST hanya murni melakukan analisis terhadap kode sumber untuk menemukan berbagai bug, ketidaksesuaian pemrograman dengan standar serta lubang keamanan yang masih terdapat dalam aplikasi.
DAST, juga dikenal sebagai black box testing, dapat menemukan berbagai kerentanan dan kelemahan keamanan dalam aplikasi yang sedang berjalan. DAST menggunakan teknik injeksi kesalahan pada aplikasi, seperti melakukan input data berbahaya ke aplikasi, untuk mengidentifikasi kerentanan keamanan umum seperti injeksi SQL (SQL injection) dan skrip lintas situs (cross-site scripting). DAST juga dapat menunjukkan masalah runtime yang tidak dapat diidentifikasi dengan SAST, misalnya masalah otentikasi dan konfigurasi server serta kerentanan yang hanya terlihat ketika pengguna melakukan login dan memasukkan data.
Salah satu alat bantu atau tool SAST yang dapat digunakan oleh seorang auditor saat melakukan pemeriksaan terhadap kode sumber dengan bahasa pemrograman Java adalah FindBugs. FindBugs merupakan suatu aplikasi gratis berbasis Open Source berlisensi LGPL atau Lesser GNU Public License yang menggunakan teknik analisis statis terhadap kode sumber Java untuk menemukan berbagai kesalahan pemrograman, lubang keamanan, serta ketidaksesuaian terhadap standar pemrograman yang baik dan benar. Situs web untuk FindBugs ada di http://findbugs.sourceforge.net/
Seorang pemrogram biasanya menggunakan tool IDE (Integrated Development Environment) saat mengembangkan aplikasi. Sebagai contoh untuk pengembangan aplikasi Java, pemrogram dapat menggunakan Eclipse atau NetBeans IDE yang memiliki berbagai fitur sehingga memudahkan dan mempercepat kerja pemrograman. Telah terdapat plugin FindBugs baik untuk Eclipse maupun NetBeans IDE sehingga fitur FindBugs dapat diintegrasikan dengan kedua tool IDE tersebut untuk melakukan teknik SAST terhadap kode sumber Java.
Berikut adalah cara menggunakan FindBugs dengan NetBeans IDE versi 8.2 yang telah terintegrasi. Pertama, pastikan telah membuat atau membuka project Java di NetBeans IDE serta telah membuka file yang berisikan kode sumber Java. Selanjutnya, untuk menjalankan FindBugs yang telah terintegrasi di NetBeans IDE sehingga dapat melakukan audit kode sumber Java tersebut, pilihlah menu Source dan kemudian Inspect seperti berikut:
Pada dialog Inspect yang muncul, pilih FindBugs di bagian combo box Configuration untuk menjalankan FindBugs sebagai berikut:
Bila belum pernah menjalankan FindBugs di NetBeans IDE sebelumnya, maka perlu melakukan instalasi terlebih dahulu. Pastikan sudah terkoneksi ke Internet sebelum klik pada tombol Install karena NetBeans IDE akan secara otomatis melakukan download dan instalasi plugin FindBugs sehingga terintegrasi dengan NetBeans IDE:
Setelah klik tombol Install maka akan muncul dialog untuk instalasi plugin FindBugs. Klik pada tombol Next hingga selesai, dan bila muncul License Agreement maka pilihlah “I accept” sebelum melanjutkan instalasi. Download plugin FindBugs akan dimulai secara otomatis setelah menyetujui License Agreement. Setelah download selesai maka akan muncul dialog konfirmasi untuk instalasi plugin FindBugs. Klik pada tombol Continue untuk melanjutkan instalasi hingga selesai, dan terakhir klik pada tombol Finish untuk mengakhiri instalasi FindBugs di NetBeans IDE. Akhirnya untuk menjalankan FindBugs, klik pada tombol Inspect sehingga muncul daftar temuan (bila ada) dari hasil teknik SAST seperti contoh berikut:
Panel Inspector pada bagian bawah menampilkan daftar temuan berbagai bug, ketidaksesuaian standar pemrograman dan lubang keamanan yang terdapat pada kode sumber. Bila melakukan double-click pada suatu temuan, maka NetBeans IDE akan langsung menunjukkan baris kode sumber yang bermasalah beserta penjelasan tentang masalah tersebut. Sebagai contoh, berikut adalah temuan adanya kerentanan cross-site scripting pada kode sumbernya:
Sayangnya aplikasi FindBugs memang hanya bisa digunakan untuk kode sumber dengan bahasa pemrograman Java saja, namun ada juga berbagai tool SAST lain yang dapat mendukung berbagai bahasa pemrograman. Salah satunya adalah SonarQube yang mampu menerapkan SAST terhadap kode sumber dari 25 lebih bahasa pemrograman seperti PHP, JavaScript, Kotlin, Swift, C#, Python dan ABAP.
Dengan demikian, seorang auditor akan mampu melakukan audit terhadap kode sumber secara cepat dan efektif melalui penggunaan teknik dan aplikasi alat bantu SAST seperti FindBugs dan SonarQube. Harapan auditor adalah bahwa daftar temuan yang didapatkannya tersebut akan dijadikan sebagai masukan bagi pemrogram agar melakukan tindakan korektif untuk memperbaiki serta meningkatkan kualitas dari kode sumber yang dibuat olehnya sehingga aplikasi menjadi lebih aman, handal, dan berkualitas.
Perangkat mobile atau smartphone pada saat sekarang ini sudah menjadi benda wajib yang selalu ada di saku atau tas masing-masing. Jumlah orang yang memiliki smartphone tentunya jauh lebih besar dibandingkan orang yang memiliki laptop atau desktop. Hal inilah yang menyebabkan aplikasi mobile laris dan terpasang pada perangkat masing-masing bagaikan pisang goreng di saat hujan di sore hari. Sebagai hukum sebab akibat yang sudah dirumuskan pepatah zaman dulu yaitu ‘ada gula ada semut’, yang bila diartikan menjadi ada ‘konsumen pisang goreng berarti ada yang jualan pisang goreng’, atau agar lebih pas bila disesuaikan dengan bahasan kita berarti ‘ada mobile user tentunya ada mobile developer’. Kondisi inilah yang menyebabkan semua kalangan mulai dari perusahaan, software house, media, dan bahkan anak magang beramai-ramai menciptakan dan mengembangkan mobile app.
Kekhawatiran muncul dari penjual es krim yang sekali lagi jika disesuaikan dengan bahasan kita berarti ‘web developer’ yang rata-rata secara natural hanya menguasai bahasa markup yaitu HTML & CSS, bahasa pemrograman seperti Javascript & PHP, dan bahasa query yaitu SQL. Padahal, pengembangan mobile apps saat ini dikuasai oleh dua bahasa pemrograman yaitu Java (untuk Android) dan Swift (untuk iOS). Masalah ini ditambah dengan keinginan agar apps dapat hadir dan berjalan di dua platform tersebut. Tentu saja ini semakin membuat kompleksitas pengembangan mobile app semakin meningkat.
Solusi untuk permasalahan ini sebenarnya sudah ada pada tahun 2011 sejak hadirnya Cordova (berganti nama menjadi PhoneGap setelah diakuisisi oleh Adobe) sebagai framework pengembangan hybrid app di mana dengan menggunakan HTML, CSS, dan Javascript kita dapat meng-compile mobile app di dua platform Android dan iOS. Sampai sekarang Cordova/PhoneGap masih dijadikan solusi tercepat untuk membangun aplikasi mobile bagi para developer web.
Tapi jangan senang dulu, Alejandro! Aplikasi hybrid yang dibuat dengan Cordova/PhoneGap ini memiliki performa yang jauh lebih rendah bila dibandingkan mobile app yang dikembangkan secara native. Hal ini membuat para developer menjadi malas-malasan untuk menggunakan Cordova/Phonegap karena resikonya besar yaitu mereka harus mengorbankan user experience. Walaupun begitu dengan berkembangnya teknologi, hadir React Native sebagai solusi dalam pengembangan aplikasi mobile.
Mirip dengan dengan Cordova/PhoneGap, React Native membuat developer dapat mengembangkan aplikasi mobile dengan menggunakan Javascript yang tentu saja telah dikuasai oleh mayoritas web developer dan bila dibandingkan secara performa, React Native jauh mengungguli Cordova/Phonegap walaupun masih berada sedikit di bawah aplikasi native dari masing-masing platform.
Kita cukupkan saja cerita panjang tentang latar belakang native mobile app, hybrid app, dan pisang goreng ini. Pada kesempatan kali ini, kami akan membagikan langkah-langkah dalam membuat native mobile app dengan menggunakan React Native. Tutorial ini akan di bagi menjadi beberapa part. Pada part 1 ini kita akan mempersiapkan environment-nya terlebih dahulu.
Tools of Trade
Dalam tutorial kali ini beberapa tools yang akan kita gunakan adalah:
Setelah semua tools kita dapatkan, langkah selanjutnya adalah men-setup semua peralatan tadi ke dalam perangkat yang kita gunakan. Dalam tutorial ini kita akan menggunakan Windows 10 sebagai sistem operasi dalam environment pengembangan kita.
1. Extract nodejs yang telah didownload, semisal di D:\node-v10.15.0-win-x64 Anda harus mengingat lokasi tersebut, karena nanti akan kita tambahkan lokasi tersebut ke dalam path variable.
2. Install Android Studio beserta SDK Manager-nya. Step ini membutuhkan koneksi internet dan membutuhkan waktu yang cukup panjang. Jangan lupa catat dimana lokasi Android Studio dan SDK Managernya. Kita akan menggunakanya di step selanjutnya karena Android Studio ketika diinstal otomatis akan menginstal versi SDK terakhir maka proses instalasi SDK otomatis telah dilakukan. Yang perlu dilakukan adalah mencatat lokasi SDK manager.
3. Menginstall JDK Jangan lupa catat lokasi JDK terinstall biasanya default lokasi JDK bisa ditemukan di C:\Program Files\Java\jdk1.8.0_162\
4. Menginstall Python Setelah menginstal jangan lupa catat lokasi nya karena nanti kita harus menambahkanya ke dalam system path variable.
5. Menambahkan JAVA_HOME Environment Variable Java home adalah lokasi di mana JDK diinstall. Secara default JDK terinstal di C:\Program Files\Java\jdk1.8.0_162\
6. Menambahkan ANDROID_HOME Environment Variable
7. Menambahkan beberapa lokasi di bawah ini kedalam System Path variable Yang perlu ditambahkan adalah lokasi folder berikut:
Nodejs
Java/bin
Gradle/bin
SDK/platform-tools
SDK/tools
Python
React Native Installation
Setelah ke enam langkah di atas dilakukan dengan benar maka seharusnya saat ini anda telah siap untuk memasang React Native ke komputer Anda. Langkah-langkah untuk memasang React Native dapat dilakukan melalui step-step dibawah ini :
1. Buka command prompt (bisa dilakukan dengan menekan kombinasi keyboard windows + ‘r’ dan ketikkan cmd lalu klik ‘OK’)
2. Ketikkan perintah pada command line:
npm install -g react-native-cli
Tunggu sampai selesai! Proses ini membutuhkan koneksi internet
3. Membuat project baru Sebelum membuat project baru ada baiknya kita membuat folder khusus untuk project kita. Saya sarankan untuk membuat folder dengan nama yang singkat dan tidak terdapat spasi untuk menghindari error. Di bawah ini urutan perintah untuk memulai project baru:
D:
mkdir labReactNative
react-native init AwesomeProject
Tunggu hingga proses selesai!
4. Membuat android virtual device (AVD)
5. Jalankan project yang telah kita buat Untuk menjankan project yang telah kita buat dapat menggunakan perintah dibawah ini:
cd AwesomeProject
react-native run-android
Itu tadi langkah-langkah dalam menginstal dan men-setup environment dalam membuat mobile app dengan menggunakan React Native. Ikuti terus update terbaru dari Inixindo Jogja agar tidak ketinggalan Tutorial React Native part selanjutnya!
Belakangan ini cara pemrograman web berubah cukup signifikan. development menjadi lebih komplex dengan di baginya pengebangan menjadi dua sisi yang berbeda yaitu Front end, dan Back end. tuntutan pengembangan di sisi front end membuat keluar nya teknologi baru dalam pengembangan sebuah aplikasi web yang biasa disebut dengan Single Page Application.
Single Page Aplication merupakan sebuah terobosan baru dalam front end development. single page application mengutamakan pengambilan tampilan dari server secara dinamik, dibandingkan harus mengambil seluruh tampilan dari server.
Ada beberapa framework Front end yang berkembang saat ini diantaranya adalah React, VueJs, Angular. Tutorial kali ini kita akan menggunakan React sebagai framework front end. Alasan utama kenapa memilih react adalah pengguna react lebih besar dibandingkan framework lainya.
gambar diatas merupakan data statistic download dari website npm, menunjukkan bahwa jumlah download react jauh meninggalkan dua rival nya. Klik DIsini
pada tutorial kali ini kita akan mencoba membuat aplikasi spa (Single Page Application) sederhana menggunakan react yang kurang lebih hasil akhir nya nanti adalah seperti gambar di bawah ini :
A. Persiapan
Ada beberapa alat yang harus disiapkan sebelum kita bisa melakukan life codding.
install NPM (Node JS)
untuk menginstal Node JS bisa dilihat langsung ke websitenya nodejs
Install React App
buka command Prompt dan ketikkan perintah di bawah ini
npm install -g create-react-app
Buat Project Baru
untuk membuat project baru, sangat disarankan utuk memilih direktori yang tidak terlalu dalam. dalam kasus ini kita akan membuat project baru di direktory D:. kita akan membuat project spa-inix. ketikkan perintah dibawah ini untuk membuat project baru.
D:
create-react-app spa-inix
cd spa-inix
proses instalasi otomatis akan membuat folder dengan nama project di directory kita mengetikkan perintah. dalam kasus gambar diatas kita membuat project di D: maka otomatis akan dibuatkan folder spa-inix. cek folder D:\spa-inix\ lewat windows explorer. kurang lebih seperti gambar di bawah ini:
Install React Router
pastikan command prompt directory telah di ubah ke directory project D:\spa-inix> dengan mengetikkan perintah cd spa-inix, sebelum menginstall react router. react router merupakan salah satu komponen yang sangat penting, karena react router yang membaca url dan mengarahkan tampilan mana yang akan di load. untuk menginstall react router ketikkan perintah:
npm i react-router-dom --save
sampai disini proses persiapan selesai. kita bisa melihat hasil dari instalasi dengan menjalankan perintah npm start dan kemudian buka browser dengan mengakses http://localhost:3000/maka akan tampil halaman default react.
B. Coding
karena kita akan memulai tutorial ini dari scratch alias kosongan, supaya kita bisa lebih memahami bagai mana cara kerja react js maka sebelum kita memulai terlebih dahulu hapus semua isi file dalam folder public dan src. folder public cuma berisi file index.html dan folder development kita focus ke folder src.
1. Membuat File Index.html di folder public
setelah semua file didalam folder di hapus buat file index.html di folder public yang berisi coding seperti di bawah ini
1
2. Membuat File Index.js di folder src
buat file baru dengan nama index.jsdi folder src. nama file harus sama persis karena file tersebut adalah file yang pertama akan di jalankan. isikan coding di bawah ini.
1
2
3
4
5
6
7
8
import React from"react";
import ReactDOM from"react-dom";
import Main from"./Main";
ReactDOM.render(
,
document.getElementById("root")
);
Inti dari codding disini file index.js memanggil Class Main.js yang merupakan inisialisasi awal aplikasi kita atau yang akan menjadi halaman router dari aplikasi kita. semua hasil routing yang ada akan di tampilkan atau diInjectkan ke element dengan id=’root’.
3. Membuat File Main.js
setelah file index dibuat selanjutnya kita membuat file Main.js sesuai yang telah kita deklarasikan di langkah 2. awal mula buat file Main.js dengan code seperti dibawah ini. kita akan banyak bekerja dengan file ini setelahnya. /src/Main.js
tidak ada yang istimewa dari coding diatas. jika dilihat di browser pun tampilan masih sangat sederhana tanpa styling. tapi dari kode diatas kita dapat belajar beberapa hal diantaranya adalah render() yang digunakan untuk menampikan output dari sebuah class.
4. Menambahkan Content
langkah selanjutnya setelah Main Class ter buat langkah selanjutnya adalah menentukan isi dari content ketika link di klik.
langkah selanjutnya buat file Home.js. untuk sementara kiti isi cotent text sederhana saja /src/Home.js
1
2
3
4
import React,{Component}from"react";
classHomeextendsComponent{
render(){
return(
Selamat Datang
Aplikasi Ini merupakan Contoh sederhana implementasi SPA (Singgle Page Aplication) menggunakan react JS. Langkah Step By Step dapat anda Lihat di website inixindojogja.co.id. inixindojogja adalah lembaga training IT profesional.
inixindojogja.co.id Didirikan sejak 1 Juli 2001 di Yogyakarta, Inixindo Jogja menjawab kebutuhan para pebisnis dan profesional IT akan lembaga pelatihan/training dan konsultan IT yang berkualitas dan kompeten. Kualitas para tutor (instructor) dengan keterampilan mengajar yang tinggi, bersertifikasi internasional, dan berpengalaman mengelola proyek IT yang luas, membuat Inixindo Jogja dipercaya oleh banyak perusahaan terkemuka dan instansi pemerintah, tidak hanya dalam hal peningkatan kemampuan individu maupun SDM TI, namun juga sebagai konsultan yang memberikan solusi lengkap dalam bidang Teknologi Informasi, mulai dari perencanaan, pembangunan, implementasi, dan evaluasi. Inixindo Jogja kini telah dipercaya sebagai konsultan Smart City di beberapa kota di Indonesia.
); } } export default Home;
langkah selanjutnya membuat About.js
1
2
3
4
5
import React,{Component}from"react";
classAboutextendsComponent{
render(){
return(
About Us
Inixindo Jogja mempunyai beberapa layanan utama diantaranya:
Training IT Profesional
Assesment Center
Consultan Smart City
); } } export default About;
selanjutnya buat tampilan untuk Contact dengan membuat file Contact.js
1
2
3
4
import React,{Component}from"react";
classContactextendsComponent{
render(){
return(
Ada Pertanyaan?
Jika ada pertanyaan silahkan kirim email ke wawan@inixindojogja.com dengan subject tanya SPA. atau hubungi marketing inixindojogja di https://inixindojogja.co.id/
); } } export default Contact;
setelah ketiga content telah kita buat langkah selanjutnya yaitu mengkonfigurasi react routing supaya dikenali ketika di klik link Home maka akan menampilkan Home.js, ketika di klik About maka akan di jalankan About.js, dan ketika di klik contact akan di jalankan Contact.js.
5. Menggunakan React Router untuk menghandle Link
sampai dengan langkah 4 ketika di klik link dia belum mengarah sesuai dengan keinginan. untuk mencapai tujuan tersebut kita perlu menggunakan react router.
langsung saja pada Main.js tambahkan script import menjadi seperti di bawah ini
1
2
3
4
5
6
7
8
import{
Route,
NavLink,
HashRouter
}from"react-router-dom";
import Home from"./Home";
import about from"./About";
import Contact from"./Contact";
dalam script diatas kita mendeklarasikan bahwa kita akan menggunakan, fitur Route,
NavLink,
HashRouter yang mana Route digunakan untuk membaca url dan uri NavLink digunakan untuk membuat Anchor atau Link. HashRouter digunakan untuk menentukan content yang akan di routingkan.
cara kerja dari HashRouter adalah dengan menentukan area yang akan di jadikan HashRouter. maka sekali lagi tambahkan HashRouter di Main.js
hingga Main.js Secara Keseluruhan akan menjadi:
1
2
3
4
5
6
7
8
9
10
11
12
import React,{Component}from"react";
import{
Route,
NavLink,
HashRouter
}from"react-router-dom";
import Home from"./Home";
import About from"./About";
import Contact from"./Contact";
classMainextendsComponent{
render(){
return(
INIX Simple SPA (Single Page Application)
Home
About
Contact
1
2
3
4
);
}
}
export defaultMain;
sampai disini maka seharusnya spa kita telah berjalan sesuai cuma tinggal satu langkah lagi yaitu menambahkan CSS sebagai styling supaya tampilan terlihat lebih cantik.
6. Menambahkan CSS
langkah terakhir dalam coding kita adalah menambahkan file index.css di folder src. tulis kan coding di bawah ini pada file index.css kita
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
body{
background-color:#82BDFB;
padding:20px;
margin:0;
}
h1,h2,p,ul,li{
font-family:sans-serif;
}
ul.header li{
display:inline;
list-style-type:none;
margin:0;
}
ul.header{
background-color:#111;
padding:0;
}
ul.header lia{
color:#FFF;
font-weight:bold;
text-decoration:none;
padding:20px;
display:inline-block;
}
.content{
background-color:#FFF;
padding:20px;
}
.content h2{
padding:0;
margin:0;
}
.content li{
margin-bottom:10px;
}
.active{
background-color:#0099FF;
}
/*347114000400801510*/
selanjutnya setelah file di buat langkah terakhir adalah include file index.css tersebut ke Main.js
dengan cara menambahkan kode seperti di bawah ini pada bagian import.
Dalam artikel sebelumnya berjudul Proteksi Kode Oracle PL/SQL dengan Fitur Wrap telah dibahas cara melakukan proteksi terhadap source code atau kode sumber PL/SQL untuk trigger, function, serta stored procedure sehingga tidak bisa terlihat oleh orang lain. Fitur yang digunakan untuk memproteksi source code PL/SQL tersebut adalah fitur wrap untuk melakukan semacam enkripsi terhadap kode sumber PL/SQL sehingga orang lain tidak bisa membaca kode sumber tersebut.
Namun semua proteksi buatan manusia tidak ada yang sempurna, pasti ada kelemahannya. Fitur wrap di Oracle PL/SQL pun juga bisa di-hack sehingga hasil enkripsi terhadap source code PL/SQL masih bisa dikembalikan lagi seperti semula sehingga kode sumber aslinya masih bisa dibaca kembali oleh orang lain. Proses ini disebut sebagai unwrap.
Ada beberapa cara untuk melakukan proses unwrap. Cara yang paling mudah untuk mengembalikan hasil wrap PL/SQL menjadi kode sumber aslinya adalah dengan bantuan tool Oracle SQL Developer dengan tambahan plug-in atau extension untuk melakukan proses unwrap. Oracle SQL Developer versi terbaru adalah versi 4.2 yang bisa diunduh secara gratis dari:
Sebagai contoh, bila kita melihat kembali fungsi HITUNG_PAJAK di Oracle SQL Developer yang sudah di-wrap seperti yang telah dibahas di artikel sebelumnya, hasilnya adalah sebagai berikut:
Perhatikan bahwa source code atau kode sumber PL/SQL asli untuk fungsi HITUNG_PAJAK saat ini tidak bisa dipahami karena telah dienkripsi melalui fitur wrap di Oracle Database.
Untuk bisa memulihkan kode sumber PL/SQL yang telah di-wrap sehingga menjadi kembali seperti semula untuk bisa dipahami dan dipelajari cara kerjanya, perlu melakukan instalasi extension tambahan di Oracle SQL Developer yaitu Unwrapper. Unwrapper merupakan extension atau plug-in tambahan untuk Oracle SQL Developer yang bisa diundah secara gratis dari alamat situs web berikut:
Setelah mengunduh file extension Unwrapper tersebut bernama Unwrapper_for_SQLDev_1.0.0.zip, jangan melakukan ekstraksi terhadap file ZIP tersebut namun tetap biarkan sebagai file ZIP. Jalankan Oracle SQL Developer dan lakukan instalasi terhadap extension Unwrapper tersebut melalui menu “Help” kemudian pilih “Check for Updates” seperti berikut ini:
Setelah muncul wizard untuk “Check for Updates” di SQL Developer, pilih “Install From Local File” dan kemudian klik “Browse” untuk memilih file Unwrapper_for_SQLDev_1.0.0.zip yang barusan diunduh. Hasilnya menjadi seperti berikut ini:
Klik pada tombol “Next” terus hingga proses instalasi extension Unwrapper selesai. Supaya extension Unwrapper tersebut aktif maka harus melakukan restart terhadap aplikasi Oracle SQL Developer, yaitu menutup aplikasi dan kemudian menjalankan kembali aplikasi Oracle SQL Developer.
Setelah melakukan proses restart terhadap aplikasi Oracle SQL Developer, buka kembali fungsi HITUNG_PAJAK di editor Oracle SQL Developer. Source code yang tampil masih dalam bentuk wrap. Untuk melakukan unwrap terhadap kode sumber tersebut, lakukan klik kanan mouse di dalam editor Oracle SQL Developer untuk menampilkan menu sebagai berikut:
Pilih “Unwrap” pada menu tersebut atau bisa juga dengan menekan keyboard shortcut Ctrl+Shift+U untuk menjalankan proses unwrap melalui extension Unwrapper di Oracle SQL Developer. Begitu proses unwrap dijalankan, maka langsung akan terlihat kembali kode sumber aslinya sebagai berikut:
Perhatikan bahwa source code fungsi HITUNG_PAJAK yang sebelumnya telah di-wrap tersebut sudah bisa dipahami kembali untuk dipelajari cara kerjanya. Dengan demikian, proteksi terhadap kode sumber PL/SQL melalui fitur wrap sudah tidak efektif lagi karena bisa di-hack secara mudah dengan bantuan Oracle SQL Developer dan extension Unwrapper yang semuanya gratis.
Chat via Whatsapp