Dokumentasi Fitur Kostum Halaman Login dan Pendaftaran

Hai teman teman pengguna aplikasi bukaOlshop, kali ini admin akan membahas tentang fitur baru di aplikasi bukaOlshop yaitu kostum halaman login dan pendaftaran menggunakan HTML. Sebelum menggunakan fitur ini, berikut hal-hal yang harus Anda ketahui:

Demi menjaga keamanan email dan password member, Kostum halaman ini tidak bisa menjalankan kode javascript.
Pastikan anda hanya membuat dan memasukkan kode HTML dan CSS saja.
APK memiliki build 54 keatas.
Anda harus menggunakan paket BISNIS.

Tata Cara Pembuatan kode HTML untuk Login

Untuk melakukan login dengan HTML, caranya cukup mudah. Anda hanya perlu membuat sebuah form input dengan method “GET”, dan action mengarah ke /akun/start_login/. Berikut detail struktur form yang harus digunakan:

FORM
- method = GET
- action = https://link olshop/akun/start_login/

contoh : https://olshopgue.bukaolshop.site/akun/start_login/

INPUT
- name : email (type : email required)
- name : password (type : password required)
1 buah tombol submit form

Untuk lebih jelasnya mengenai penggunaan struktur diatas, silahkan lihat contoh kode HTML berikut:

<html>
  <body>
    <form method="get" action="https://olshopgue.bukaolshop.site/akun/start_login/">
   		<input type="email" name="email" placeholder="Email Anda" required>
    	  <br><br>
		<input type="password" name="password" placeholder="Password Anda" required>
	      <br><br>
		<button type="submit"> Login </button>
	</form>
  </body>
</html>

Pada contoh kode diatas, terdapat form dengan tujuan https://olshopgue.bukaolshop.site/ akun/start_login/ dengan method GET.

Isi dari form tersebut terdapat dua input dengan tipe email untuk isian Email, dan tipe password yang digunakan untuk mengisi password. Kami menyarankan agar anda memasang atribut required pada kedua input teks ini agar memastikan kedua kolom tersebut wajib diisi sebelum submit form dilakukan.
Dibagian terakhir terdapat sebuah tombol dengan type submit, yang mana jika ditekan maka otomatis akan melakukan perintah submit form.
Aplikasi olshop akan mendapatkan email dan password member yang disubmit oleh form dan melakukan login secara native seperti biasa.

Tata Cara Pembuatan kode HTML untuk Pendaftaran Member

Untuk membuat kode HTML halaman pendaftaran member, caranya sama dengan pembuatan halaman login diatas, namun dengan parameter yang berbeda. Berikut ini struktur form yang harus digunakan:

FORM
- method = GET
- action = https://link olshop/akun/start_daftar/

contoh : https://olshopgue.bukaolshop.site/akun/start_daftar/

INPUT
- name : email (type : email required)
- name : password (type : password required)
- name : nama_lengkap (type : text required)
- name : nomor_hp (type : tel required)
- name : referral (type : text)
1 buah tombol submit form

Untuk lebih jelasnya mengenai penggunaan struktur diatas, silahkan lihat contoh kode HTML halaman pendaftaran berikut:

<html>
  <body>
    <form method="get" action="https://olshopgue.bukaolshop.site/akun/start_daftar/">
   		<input type="email" name="email" placeholder="Email Anda" required>
    	  <br><br>
		<input type="password" name="password" placeholder="Password Anda" required>
	      <br><br>
		<input type="text" name="nama_lengkap" placeholder="Nama Lengkap Anda" required>
	      <br><br>
		<input type="tel" name="nomor_hp" placeholder="Nomor Hp Anda" required>
	      <br><br>
		<input type="text" name="referral" placeholder="Kode Referral (opsional)">
	      <br><br>
		<button type="submit"> Daftar </button>
	</form>
  </body>
</html>

Pada contoh kode diatas, terdapat form dengan tujuan https://olshopgue.bukaolshop.site/ akun/start_daftar/ dengan method GET.

Isi dari form tersebut terdapat lima input, yang mana bagian email, password, nama_lengkap dan nomor_hp terdapat atribut required yang membuat bagian ini wajib di isi, sedangkan bagian referral tidak memiliki atribut required, karena bersifat opsional. Anda juga bisa menambahkan atribut lainnya yang didukung oleh tag input html (info lengkapnya tersedia disini).

Beralih dari Halaman Login ke Daftar dan Sebaliknya

Dalam membuat sebuah halaman login yang baik, anda perlu menambahkan tombol yang mengarah kehalaman pendaftaran. Dan pada halaman pendaftaran, anda juga perlu menambahkan tombol kehalaman login agar membuat nyaman member olshop Anda.

Untuk mengalihkan kehalaman pendaftaran, caranya sangat mudah. Anda cukup membuat sebuah link dengan tujuan halaman pendaftaran website olshop Anda. Berikut contohnya:

Link kehalaman pendaftaran :
- https://link olshop/akun/daftar/

Contoh : https://olshopgue.bukaolshop.site/akun/daftar/

Link kehalaman login :
- https://link olshop/akun/login/

Contoh : https://olshopgue.bukaolshop.site/akun/login/

Setelah link diatas dimasukkan ke tag <a>, maka hasilnya akan seperti dibawah:

<!-- Contoh link kehalaman pendaftaran-->
<a href="https://olshopgue.bukaolshop.site/akun/daftar/">Daftar di aplikasi</a>

<!-- Contoh link kehalaman login-->
<a href="https://olshopgue.bukaolshop.site/akun/login/">Login ke aplikasi</a>

Note : pastikan anda memasukkan link diluar tag <form></form>

Melakukan Login dengan Google

bukaOlshop memiliki fitur login dengan google, yang mana memungkinkan member melakukan pendaftaran pada APK olshop Anda secara cepat melalui akun google yang mereka miliki.

Jika anda mengaktifkan dan menggunakan fitur ini pada aplikasi olshop Anda, maka anda juga bisa membuat tombol login dengan google pada kostum halaman login. Caranya juga sangat mudah dengan hanya membuat link biasa. Berikut contohnya:

Link melakukan login dengan google
- https://link olshop/akun/login_dengan_google/

Contoh : https://olshopgue.bukaolshop.site/akun/login_dengan_google/

Setelah link diatas dimasukkan ke tag <a>, maka hasilnya akan seperti dibawah:

<a href="https://olshopgue.bukaolshop.site/akun/login_dengan_google/">Login dengan Google</a>

Note : pastikan anda memasukkan link diluar tag <form></form>

Membuka dialog Lupa Password

Untuk membuka dialog lupa password, anda bisa melakukannya dengan membuat link dengan format sebagai berikut:

Link menampilkan dialog lupa password
- https://link olshop/akun/lupa_password/

Contoh : https://olshopgue.bukaolshop.site/akun/lupa_password/

Contoh Kode Lengkap

Berikut ini contoh kode HTML yang bisa langsung anda terapkan di apk olshop anda.

Ganti “olshopgue.bukaolshop.site” dengan link website olshop anda.

Contoh halaman Login

<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>
  <center><h1 style="color:#5f80b0">Selamat Datang</h1></center>
  <br>
  <h3>Silahkan Login</h3>
  <form method="get" action="https://olshopgue.bukaolshop.site/akun/start_login/">
    <label for="email">Email</label>
    <br>
    <input id="email" type="email" name="email" placeholder="Email Anda" required class="form input-text">
    <br><br>
    <label for="password">Password</label>
    <br>
    <input id="password" type="password" name="password" placeholder="Password Anda" required class="form input-text">
    <br><br>
    <center>
      <button type="submit" class="myButton"> Login </button>
    </center>
  </form>

  <br>

  <p>Belum punya akun?</p>
  <a href="https://olshopgue.bukaolshop.site/akun/daftar/"><button class="myButtonDaftar"> Daftar di Aplikasi</button></a>

  <!-- Kode tombol login dengan google-->

  <p>Atau</p>

	<a href="https://olshopgue.bukaolshop.site/akun/login_dengan_google/">
		<img src="https://storage3.bukaolshop.com/other_image/loginimg.png" alt="" class="img">
	</a>
  <!-- Hapus kode diatas jika anda tidak mengaktifkan opsi login dengan google -->

  <!-- Kode tombol login dengan google-->
	
<br><br>
<a href="https://olshopgue.bukaolshop.site/akun/lupa_password/">Lupa Password</a>
	
</body>
<style media="screen">
.form{
  width: 100%;
}
body{
  padding-left: 40pt;
  padding-right: 40pt;
  padding-top: 20pt;
  font-family: arial;
}
.myButton {
  box-shadow: 0px 0px 0px 2px #9fb4f2;
  background:linear-gradient(to bottom, #7892c2 5%, #476e9e 100%);
  background-color:#7892c2;
  border-radius:10px;
  border:1px solid #4e6096;
  display:inline-block;
  cursor:pointer;
  color:#ffffff;
  font-family:Arial;
  font-size:19px;
  padding:12px 37px;
  text-decoration:none;
  text-shadow:0px 1px 0px #283966;
}
.myButton:hover {
  background:linear-gradient(to bottom, #476e9e 5%, #7892c2 100%);
  background-color:#476e9e;
}
.myButton:active {
  position:relative;
  top:1px;
}
.myButtonDaftar {
	background-color:#44c767;
	border-radius:28px;
	border:1px solid #18ab29;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	padding:6px 31px;
	text-decoration:none;
	text-shadow:0px 1px 0px #2f6627;
}
.myButtonDaftar:hover {
	background-color:#5cbf2a;
}
.myButtonDaftar:active {
	position:relative;
	top:1px;
}
.input-text {
  border-radius: 10px;
      padding: 8px;
      border-color: #5f80b0;
      font-size: 14pt;
}
.img{
  width: 200px;
}
p{
  line-height: 5px;
}
</style>
</html>

Contoh halaman Daftar

<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>
  <center><h1 style="color:#5f80b0">Selamat Datang</h1></center>
  <br>
  <h3>Silahkan Daftar</h2>
  <form method="get" action="https://olshopgue.bukaolshop.site/akun/start_daftar/">
    <label for="email">Email</label>
    <br>
    <input id="email" type="email" name="email" placeholder="Email Anda" required class="form input-text">
    <br><br>
    <label for="password">Password</label>
    <br>
    <input id="password" type="password" name="password" placeholder="Password Anda" required class="form input-text">
    <br><br>
    <label for="nama_lengkap">Nama Lengkap</label>
    <br>
    <input id="nama_lengkap" type="text" name="nama_lengkap" placeholder="Nama Lengkap Anda" required class="form input-text">
    <br><br>
    <label for="nomor_hp">Nomor Telepon / WA</label>
    <br>
    <input id="nomor_hp" type="tel" name="nomor_hp" placeholder="Nomor telepon Anda" required class="form input-text">
    <br><br>
    <label for="referral">Kode Referral</label>
    <br>
    <input id="referral" type="tel" name="referral" placeholder="Kode referral (jika ada)" class="form input-text">
    <br><br>
    <center>
      <button type="submit" class="myButton"> Daftar di Aplikasi </button>
    </center>
  </form>
  <br>
  <p>Sudah punya akun?</p>
  <a href="https://olshopgue.bukaolshop.site/akun/login/"><button class="myButtonDaftar"> Login </button></a>
  <br>






</body>
<style media="screen">
.form{
  width: 100%;
}
body{
  padding-left: 40pt;
  padding-right: 40pt;
  padding-top: 20pt;
  font-family: arial;
}
.myButton {
  box-shadow: 0px 0px 0px 2px #9fb4f2;
  background:linear-gradient(to bottom, #7892c2 5%, #476e9e 100%);
  background-color:#7892c2;
  border-radius:10px;
  border:1px solid #4e6096;
  display:inline-block;
  cursor:pointer;
  color:#ffffff;
  font-family:Arial;
  font-size:19px;
  padding:12px 37px;
  text-decoration:none;
  text-shadow:0px 1px 0px #283966;
}
.myButton:hover {
  background:linear-gradient(to bottom, #476e9e 5%, #7892c2 100%);
  background-color:#476e9e;
}
.myButton:active {
  position:relative;
  top:1px;
}
.myButtonDaftar {
	background-color:#44c767;
	border-radius:28px;
	border:1px solid #18ab29;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	padding:6px 31px;
	text-decoration:none;
	text-shadow:0px 1px 0px #2f6627;
}
.myButtonDaftar:hover {
	background-color:#5cbf2a;
}
.myButtonDaftar:active {
	position:relative;
	top:1px;
}
.input-text {
  border-radius: 10px;
      padding: 8px;
      border-color: #5f80b0;
      font-size: 14pt;
}
.img{
  width: 200px;
}
p{
  line-height: 5px;
}
</style>
</html>

Demikian dokumentasi mengenai fitur kostum halaman login dan pendaftaran, semoga bermanfaat. Terimakasih.