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:
<a class="dropdown-item" href="profile.php"> <i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i> Profile </a> - 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 // menghubungkan dengan koneksi include "../config/koneksi.php"; // mengaktifkan session 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 --> <div id="wrapper"> <?php include "sidebar.php"; ?> <!-- Content Wrapper --> <div id="content-wrapper" class="d-flex flex-column"> <!-- Main Content --> <div id="content"> <?php include "topbar.php";?> <!-- Begin Page Content --> <div class="container-fluid"> <!-- DataTales Example --> <div class="card shadow mb-4"> <div class="card-header py-3"> <h6 class="m-0 font-weight-bold text-primary">Profile User</h6> </div> <div class="card-body"> <div class="table-responsive"> <!-- pesan --> <?php if(isset($_GET['pesan'])){ echo '<i class="fas fa-info-circle"></i> '.$_GET['pesan'].''; } ?> <?php // jalankan query $sql = mysqli_query($koneksi,"select * from user WHERE username='".$_SESSION['username']."'"); //menampilkan data $row = mysqli_fetch_array($sql); ?> <br/> <form class="user" action="profile-ubah.php" method="post"> <div class="form-group"> <label>Username</label> <input type="text" name="username" class="form-control" id="exampleInputJudul" value="<?php echo $row['username'];?>" readonly> </div> <div class="form-group"> <label>Email</label> <input type="email" name="email" class="form-control" id="exampleInputEmail" value="<?php echo $row['email'];?>"> </div> <div class="form-group"> <input type="hidden" name="id" value="<?php echo $row['id'];?>"> <a href="#" style="width:200px; float:right;margin-left:20px;" class="btn btn-warning btn-icon-split"><span class="icon text-white-50"><i class="fas fa-edit"></i></span><span class="text">Ubah Password</span></a><button style="width:200px; float:right;" class="btn btn-primary btn-block">Update</button> </div> </form> </div> </div> </div> </div> <!-- End Page Content --> </div> <!-- End Content Wrapper --> <?php include "footer.php";?> </div> <!-- End Main Content --> </div> <!-- End Page Wrapper --> <!-- Bootstrap core JavaScript--> <script src="vendor/jquery/jquery.min.js"></script> <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script> <!-- Core plugin JavaScript--> <script src="vendor/jquery-easing/jquery.easing.min.js"></script> <!-- Custom scripts for all pages--> <script src="js/sb-admin-2.min.js"></script> <!-- Page level plugins --> <script src="vendor/datatables/jquery.dataTables.min.js"></script> <script src="vendor/datatables/dataTables.bootstrap4.min.js"></script> <!-- Page level custom scripts --> <script src="js/demo/datatables-demo.js"></script> </body> </html> - Lihat bagaimana hasil nya di browser
- Bagaimana text input bisa mendapatkan value? perhatikan baris kode php berikut
Cukup mudah dimengerti, hanya tinggal menjalankan perintah query dengan memanfaatkan perintah "WHERE" dan menampilkannya pada text-input dengan kode PHP <?php echo $row['username'];?><?php // jalankan query $sql = mysqli_query($koneksi,"select * from user WHERE username='".$_SESSION['username']."'"); //menampilkan data $row = mysqli_fetch_array($sql); ?> - 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 // mengaktifkan session php session_start(); // menghubungkan dengan koneksi include '../config/koneksi.php'; $id = $_POST['id']; //$username = $_GET['username']; // Username tidak bisa diubah $email = $_POST['email']; // cek apakah email sudah terdaftar $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{ // update data yang ada di table user $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.
<img class="img-profile rounded-circle" src="https://source.unsplash.com/QAB-WJcbgJk/60x60"> - 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"; ?> - Dan akhirnya, ubah kode di poin 2 dengan baris kode berikut
<img class="img-profile rounded-circle" src="<?php echo $grav_url;?>"> - Dan akhirnya, wajah tampan saya muncul. lol
