LOADING . . .

Membuat Website Professional dengan PHP MySql - PART #5



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:

  1. Membuat Website Professional dengan PHP & MySql - PART #1 : Pengertian Dasar & Tools
  2. Membuat Website Professional dengan PHP & MySql - PART #2 : Setup Database, Table & Hirarki Folder
  3. Membuat Website Professional dengan PHP & MySql - PART #3 : Membuat Login Admin & Dashboard
  4. 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. 

Baca Juga: Bangkitnya Semangat UKM Indonesia

#1 Membuat Form Profile Admin

  1. Hidupkan XAMPP anda.
  2. Masuk ke dalam folder htdocs lalu folder hospital kemudian buka folder admin dan kemudian buka file topbar.php di text editor anda.
  3. Cari dan perhatikan baris kode berikut ini: 
    
                      
                      Profile
                    
  4. Pastikan link sudah menuju ke file profile.php (di baris kode href="profile.php") 
  5. Jadi, Anda harus membuat file PHP baru dan beri nama profile.php, simpan didalam folder admin.
  6. 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"; ?> <!-- Content Wrapper -->
    <!-- Main Content -->
    <?php include "topbar.php";?> <!-- Begin Page Content -->
    <!-- DataTales Example -->
    Profile User
    <!-- pesan --> <?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">
    <input type="text" name="username" class="form-control" id="exampleInputJudul" value="<?php echo $row['username'];?>" readonly>
    <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>
    <!-- End Page Content -->
    <!-- End Content Wrapper --> <?php include "footer.php";?>
    <!-- End Main Content -->
    
        <!-- 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>​
  7. Lihat bagaimana hasil nya di browser 
  8. 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'];?>
  9. Selanjutnya adalah membuat file pemproses dari form tersebut, buat file php dengan nama profile-ubah.php dan simpan didalam folder admin.
  10. 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"); 
     }
    }​
  11. Jadi jika dilihat baris kode diatas, saya tidak ingin field username diubah dan jika email sudah ada sebelumnya, profile tidak bisa diubah. 
  12. 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

Baca Juga: Bangkitnya Semangat UKM Indonesia

  1. Masuk ke dalam folder htdocs lalu folder hospital kemudian buka folder admin dan kemudian buka file topbar.php di text editor anda.
  2. Cari kode ini, dan akan dimodifikasi sedikit. 
  3. 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"; 
    ?>​
  4. Dan akhirnya, ubah kode di poin 2 dengan baris kode berikut 
  5. Dan akhirnya, wajah tampan saya muncul. lol