LOADING . . .

Membuat Website Professional dengan PHP MySql - PART #5

by Aditya Subawa, Mar. 27 2020

Selamat sore, kembali bersama saya Aditya Subawa. Pada posting kali ini saya akan melanjutkan apa yang sudah kita kerjakan di posting series Membuat Website Professional dengan PHP & MySql ini, silahkan lihat dahulu posting-posting terkait dengan tutorial kali ini:

Membuat Website Professional dengan PHP & MySql - PART #1 : Pengertian Dasar & Tools
Membuat Website Professional dengan PHP & MySql - PART #2 : Setup Database, Table & Hirarki Folder
Membuat Website Professional dengan PHP & MySql - PART #3 : Membuat Login Admin & Dashboard
Membuat Website Professional dengan PHP & MySql - PART #4 : Customized Login Admin & Dashboard

Saya asumsikan anda sudah mendownload/menyamakan tampilan dashboard (link download anda bisa dapatkan di Part 4). Step selanjutnya adalah membuat halaman profile.php yang berfungsi untuk user/admin yang sedang login untuk mengubah emailnya.

#1 Membuat Form Profile Admin

Hidupkan XAMPP anda.
Masuk ke dalam folder htdocs lalu folder hospital kemudian buka folder admin dan kemudian buka file topbar.php di text editor anda.

Cari dan perhatikan baris kode berikut ini:


                  
                  Profile

Pastikan link sudah menuju ke file profile.php (di baris kode href="profile.php")
Jadi, Anda harus membuat file PHP baru dan beri nama profile.php, simpan didalam folder admin.

Copy kode berikut di profile.php

<?php 

include "../config/koneksi.php";

session_start();
if($_SESSION['status'] !="login"){
header("location:../");
}
?>
<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">
<head>
    <title>Suba Hospital | Profile</title>
    <!-- Custom fonts for this template-->
  <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">

  <!-- Custom styles for this template-->
  <link href="css/sb-admin-2.min.css" rel="stylesheet">
  
  <!-- Custom styles for this page -->
  <link href="vendor/datatables/dataTables.bootstrap4.min.css" rel="stylesheet">
</head>
<body id="page-top">

<!-- Page Wrapper -->

<?php include "sidebar.php"; ?>

<?php include "topbar.php";?>

Profile User

<?php if(isset($_GET['pesan'])){ echo ' '.$_GET['pesan'].''; } ?> <?php $sql = mysqli_query($koneksi,"select * from user WHERE username='".$_SESSION['username']."'"); $row = mysqli_fetch_array($sql); ?>
<form class="user" action="profile-ubah.php" method="post">

Username <input type="text" name="username" class="form-control" id="exampleInputJudul" value="<?php echo $row['username'];?>" readonly>

Email <input type="email" name="email" class="form-control" id="exampleInputEmail" value="<?php echo $row['email'];?>">

<input type="hidden" name="id" value="<?php echo $row['id'];?>"> Ubah Password<button style="width:200px; float:right;" class="btn btn-primary btn-block">Update</button>

</form>

<?php include "footer.php";?>


    <!-- End Page Wrapper -->
   <!-- Bootstrap core JavaScript-->
  [removed][removed]
  [removed][removed]

  <!-- Core plugin JavaScript-->
  [removed][removed]

  <!-- Custom scripts for all pages-->
  [removed][removed]

  <!-- Page level plugins -->
  [removed][removed]
  [removed][removed]

  <!-- Page level custom scripts -->
  [removed][removed]
</body>
</html>

Lihat bagaimana hasil nya di browser
Bagaimana text input bisa mendapatkan value? perhatikan baris kode php berikut
```
<?php 

$sql = mysqli_query($koneksi,"select * from user WHERE username='".$_SESSION['username']."'");

$row = mysqli_fetch_array($sql);
?>
```
Cukup mudah dimengerti, hanya tinggal menjalankan perintah query dengan memanfaatkan perintah "WHERE" dan menampilkannya pada text-input dengan kode PHP <?php echo $row['username'];?>
Selanjutnya adalah membuat file pemproses dari form tersebut, buat file php dengan nama profile-ubah.php dan simpan didalam folder admin.

Copy kode berikut

<?php

session_start();


include '../config/koneksi.php';

$id = $_POST['id'];

$email = $_POST['email'];


$cek = mysqli_query($koneksi, "select * from user where id='$id'");
$row = mysqli_fetch_array($cek);
if($row['email']==$email){
 header("location:profile.php?pesan=Alamat email sudah terdaftar");
}else{
 
 $exe = mysqli_query($koneksi, "update user set email='$email' where id='$id'"); 
 if($exe){
  header("location:profile.php?pesan=Berhasil, user sudah diupdate");
 }else{
  header("location:profile.php?pesan=Gagal, coba lagi"); 
 }
}

Jadi jika dilihat baris kode diatas, saya tidak ingin field username diubah dan jika email sudah ada sebelumnya, profile tidak bisa diubah.
Ok, silahkan coba berfungsi atau tidak, untuk button ubah password, akan saya bahas di posting berikutnya, karena saya ingin fitur ubah password ada validasi strong/weak dan mencocokkan 2 buah text-input password.

#2 Membuat Gambar Profile Avatar dengan Gravatar

Selanjutnya adalah membuat icon disebelah kanan username pada topbar, saya akan memanfaatkan layanan dari gravatar. Apa itu gravatar? Gravatar merupakan singkatan dari Globally Recognized Avatar yang bisa anda pakai hanya dengan menggunakan email. Layanan ini sama saja dengan avatar biasa, tapi Gravatar di-host di single server dan kemudian bisa digunakan di berbagai website selama anda menggunakan alamat email yang kamu gunakan untuk mendaftarkan Gravatar-anda. OK, jadi hanya butuh email yang sama. Untuk menggunakan gravatar, anda harus membuat akun terlebih dahulu pada situs gravatar.com

Masuk ke dalam folder htdocs lalu folder hospital kemudian buka folder admin dan kemudian buka file topbar.php di text editor anda.
Cari kode ini, dan akan dimodifikasi sedikit.

Oke, sebelumnya kita harus mengecek apakah user/admin mempunyai email atau tidak dan menentukan avatar default jika tidak mempunyai akun di gravatar.com. Caranya dengan menambahkan kode berikut

<?php 
$sql = mysqli_query($koneksi, "select * from user where username='".$_SESSION['username']."'");
$row = mysqli_fetch_array($sql); 
$default = "https://source.unsplash.com/QAB-WJcbgJk/60x60";
$grav_url = "https://www.gravatar.com/avatar/" . md5( strtolower( trim( $row['email'] ) ) ) . "?d=" . urlencode( $default ) . "&s=60"; 
?>