tutorialswb

TutorialsWB hadir sebagai wadah bagi teman-teman yang ingin "Belajar PHP Dasar". Sehingga kami yakin bahwa TutorialsWB akan menjadi Pusat "Belajar Bahasa Pemrograman PHP" Disamping PHP website ini menyediakan berbagai tips dan trik Blogger. Kami menerima Pemasangan iklan banner atau artikel.

Hubungi Saya

Membuat form login menggunakan Firebase



Kembali lagi dengan kami bagaimana kabar kalian, kali ini kami akan share bagaimana membuat form login menggunakan firebase.

Sebarnya kami baru saja membaca artikel yang berkaitan dengan firebase ini dan kami harus mencobanya untuk anda.

1. Yang pertama kalian harus membuka firebase dan membuat project



2. Tekan button Add Project


3. Masukkan nama project anda, jangan lupa centang (i accept) kemudian tekan button create project


4. Kemudian klik button yang saya beri kotak dibawah dan copy kodenya.
 

5. Berikutnya kita buat form loginnya dlu, Buat file dengan nama index.html kemudian masukkan source code dibawah ini.

 <html>
<head>
  <title>Firebase Login</title>
  <link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700" rel="stylesheet">
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <div id="login_div" class="main-div">
    <h3>Firebase Web login Example</h3>
    <input type="email" placeholder="Email..." id="email_field" />
    <input type="password" placeholder="Password..." id="password_field" />

    <button onclick="login()">Login to Account</button>
  </div>

  <div id="user_div" class="loggedin-div">
    <h3>Welcome User</h3>
    <p id="user_para">Welcome to Firebase web login Example. You're currently logged in.</p>
    <button onclick="logout()">Logout</button>
  </div>


<!-- MASUKKAN KODE YANG TELAH ANDA COPY DI NOMOR 4 -->
<script src="https://www.gstatic.com/firebasejs/5.8.0/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyBtIePIu2Y3PVzNAd--0a2hF54nuMkpHIE",
    authDomain: "fir-6eee2.firebaseapp.com",
    databaseURL: "https://fir-6eee2.firebaseio.com",
    projectId: "fir-6eee2",
    storageBucket: "fir-6eee2.appspot.com",
    messagingSenderId: "367318541583"
  };
  firebase.initializeApp(config);
</script>
  <script src="index.js"></script>

</body>
</html>
 

6. Buat file dengan nama index.css file ini membuat interface akan lebih bagus.
 body {
  background: #fff;
  padding: 0px;
  margin: 0px;
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
}

input, button {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
}

.main-div, .loggedin-div {
  width: 20%;
  margin: 0px auto;
  margin-top: 150px;
  padding: 20px;
  display: none;
}

.main-div input {
  display: block;
  border: 1px solid #ccc;
  border-radius: 5px;
  background: #fff;
  padding: 15px;
  outline: none;
  width: 100%;
  margin-bottom: 20px;
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
}

.main-div input:focus {
  border: 1px solid #777;
}

.main-div button, .loggedin-div button {
  background: #5d8ffc;
  color: #fff;
  border: 1px solid #5d8ffc;
  border-radius: 5px;
  padding: 15px;
  display: block;
  width: 100%;
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
}

.main-div button:hover, .loggedin-div button:hover {
  background: #fff;
  color: #5d8ffc;
  border: 1px solid #5d8ffc;
  cursor: pointer;
}
 

7. Buat file dengan nama index.js, kemudian masukkan kode dibawah ini.
 firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // User is signed in.

    document.getElementById("user_div").style.display = "block";
    document.getElementById("login_div").style.display = "none";

    var user = firebase.auth().currentUser;

    if(user != null){

      var email_id = user.email;
      document.getElementById("user_para").innerHTML = "Welcome User : " + email_id;

    }

  } else {
    // No user is signed in.

    document.getElementById("user_div").style.display = "none";
    document.getElementById("login_div").style.display = "block";

  }
});

function login(){

  var userEmail = document.getElementById("email_field").value;
  var userPass = document.getElementById("password_field").value;

  firebase.auth().signInWithEmailAndPassword(userEmail, userPass).catch(function(error) {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;

    window.alert("Error : " + errorMessage);

    // ...
  });

}

function logout(){
  firebase.auth().signOut();
}
 

8. Masih didalam form firebase, klik autentification > sign-in method > kemudian enalble email / password


9. Masih didalam form firebase, klik autentification > users > tekan button add user > kemudian masukkan email dan password kalian kemudian klik button add user.


Setelah kalian ikuti proses di atas dilahkan aktifkan xampp kalian dan coba jalankan aplikasinya, untuk email dan password masukkan email dan password yang telah kalian tambahkan pada tutorial nomor 9 di atas.



Sekian share kali ini semoga apa yang kami share bermanfaat bagi anda semua, jangan lupa share ketemna dan orang terdekat anda.



Baca Juga

closed