Cara Membuat Encrypt Kata Sandi Menggunakan Md5 AngularJs

28/01/2019    Shelli Ripati    241     Website

Encrypt proses membuat kata sandi atau password dengan cara mengacak data untuk menyembunyikan nilai atau data yang sebenernya dari beberapa orang yang tidak di perbolehkan melihat data tersebut dan bersifat rahasia. Dan kali ini saya akan bahas pada artikel kali ini tentang Cara Membuat Encrypt Kata Sandi Menggunakan Md5 AngularJs.

Langkah pertama Cara Membuat Encrypt Kata Sandi Menggunakan Md5 AngularJs saya akan membuat struktur html yang berisi input text seperti di bawah ini.

<!doctype html>

<html lang="en">

  <head>

    <!-- Required meta tags -->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

    <title>Cara Membuat Encrypt Kata Sandi Menggunakan Md5 AngularJs</title>

  </head>

               <body ng-app="myApp" ng-controller="myCtrl">

               <div class="container">

                              <div class="row">

                                             <div class="col-12 text-center">

                                                            <img src="http://www.gravatar.com/avatar/{{ katasandi | gravatar }}.jpg?d=identicon">

                                                            <br>

                                                            <input type="text" ng-model="katasandi" placeholder="Kata Sandi" class="form-control mt-2">

                                                            <br> {{ encrypt }}

                                             </div>

                              </div>

               </div>

               </body>

</html>

Setelah itu teman-teman jangan lupa cantumkan 2 link angularjs seperti di bawah ini.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-md5/0.1.10/angular-md5.js"></script>

Dan langkah terakhir kita akan membuat controller untuk membuat encrypt kata sandi dengan menggunakan md5.createHash pada angularjs.

<script>

  var app = angular.module('myApp', [

    'angular-md5', // dapat menggunakan juga 'ngMd5' atau 'gdi2290.md5'

  ]).controller('myCtrl', function($scope, md5) {

    $scope.$watch('katasandi', function(val) {

      $scope.encrypt = 'Encrypt Kata Sandi: ' + md5.createHash($scope.katasandi || '');

    });

  });

</script>

 

Jika teman-teman lihat tampilan awalnya ketika input kosong maka akan seperti gambar di bawah ini.

Dan ketika input sudah kita isi maka akan seperti gambar di bawah ini.

Dimana gambar dan encrypt kata sandi akan selalu berubah sesuai nilai di dalam tag input.

Demikian artikel tentang Cara Membuat Encrypt Kata Sandi Menggunakan Md5 AngularJs. Semoga dapat bermanfaat dan selamat mencoba.

 

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More