Home PHP Belajar PHP - Membuat Website Jejaring Sosial Part 3

Jumat, 15 Januari 2016

Belajar PHP - Membuat Website Jejaring Sosial Part 3


Pada artikel part sebelumnya ( Baca : Belajar PHP - Membuat Website Jejaring Sosial part 2) kita sudah membuat file dengan nama koneksi.php, daftar.php, dan login.php. Di artikel ini kita akan membahas lebih lanjut tentang Membuat Website Jejaring Sosial Part 3, berikut penjabaran tentang point-point yang akan kita bahas.
  • Membuat Halaman Profile
  • Membuat Edit Profile
  • Membuat Halaman Ganti Sandi
  • Membuat Halaman Keluar
  • Membuat styles.css
Dari 4 point diatas pastinya dapat kawan tebak script phpnya karena scriptnya hampir sama dengan script sebelum-sebelumnya. Baiklah, tanpa basa-basi lagi mari kita bahas 4 point diatas.

Membuat Halaman Profile

Halaman ini digunakan untuk melihat profile teman kita yang sudah mendaftarkan dirinya pada cms media sosial ini. Halaman ini juga yang dituju saat kita mengklik nama teman kita yang berada distatus "media sosial" ini. Dihalaman ini juga nanti kita akan membuat sebuah tombol jika pemiliki profile itu melihat profilenya maka tombol edit akan keluar jika bukan pemilik profilenya maka tombol edit profile tersebut akan hilang
perasaanku dengannya.
Buatlah sebuah file dengan nama profile.php, dan salin kode berikut ini kedalam file tersebut.
Kode profile.php
<?php
session_start();
include 'koneksi.php';
if (!$_SESSION['no']) {
  header('location: login.php');
}
$data = mysql_fetch_array(mysql_query("SELECT * FROM `tb_user` WHERE `no_user`='" . $_SESSION['no'] . "'"));
if (!$_GET) {
  $profile = mysql_fetch_array(mysql_query("SELECT * FROM `tb_user` WHERE `no_user`='" . $_SESSION['no'] . "'"));
} else {
  $profile = mysql_fetch_array(mysql_query("SELECT * FROM `tb_user` WHERE `no_user`='" . $_GET['id'] . "'"));
}
?>
<!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">
  <title>Profile <?php echo $data['nama']; ?> - Pemula Belajar</title>
  <link rel="stylesheet" type="text/css" href="styles.css"/>
</head><!-- script by pemulabelajar.com-->
<body>
  <div class="header">
    Mediasosialku.com
  </div>
  <div class="navigasi">
    <li><a href="index.php">Home</a></li>
    <li><a href="profile.php?id=<?php echo $_SESSION['no']; ?>">Profile</a></li>
    <li><a href="keluar.php">Keluar</a></li>
  </div>
  <div class="sidebar">
    <p>Profile Saya</p>
    <img src="profile.png" width="60px" height="60px" style="float: left; margin-right: 10px;" />
    <p><?php
    echo '<a href="profile.php?id=' . $_SESSION['no'] . '">' . $data['nama'] . '</a>';
    ?></p>
    <p><?php
    $tentang = mysql_fetch_array(mysql_query("SELECT `tentang` FROM `tb_user` WHERE `no_user`='" . $_SESSION['no'] . "'"));
    echo $tentang['tentang'];
    ?></p>
  </div>
  <div class="content"><!-- script by pemulabelajar.com-->
  <p>Profile <?php if ((@$_GET['id']==$_SESSION['no']) or (!@$_GET['id'])) { echo '| <a href="edit_profile.php">Edit Profile</a>' ; }?></p>
  <hr />
  <img src="profile.png" width="80px" height="80px" style="float: left; margin: 20px" />
  <p><b>Nama Lengkap</b> : <?php echo $profile['nama'] ?></p>
  <p><b>Alamat Lengkap</b> : <?php echo $profile['alamat'] ?></p>
  <p><b>Tentang</b> : <?php echo $profile['tentang'] ?></p>
  </div>
</body>
</html>

Simpan dan jalankan script diatas dan lihat profile teman lainnya apakah saat melihat profile terdapat error atau tidak. Jika tidak ada maka kita dapat melanjutkan point berikutnya dari artikel ini.

Membuat Edit Profile

Tentu saja halaman edit profile ini diperlukan dikarenakan saat mendaftar kita ada kesalahan input pada Nama Kita, Alamat Kita, ataupun Deskripsi kita. Maka pada halaman edit_profile.php inilah kita memperbaiki kesalahan kita saat mendaftar pada website ini. Langsung saja kita praktekkan langkah edit profile ini.
Buatlah sebuah file dengan nama edit_profile.php, dan salin kode berikut ini kedalam file tersebut.
Kode edit_profile.php
<?php
session_start();
include 'koneksi.php';
if (!$_SESSION['no']) {
  header('location: login.php');
}
$no = $_SESSION['no'];
$data = mysql_fetch_array(mysql_query("SELECT * FROM `tb_user` WHERE `no_user`='" . $_SESSION['no'] . "'"));
if (isset($_POST['ubah'])) {
  if (($_POST['nama']=='') or ($_POST['email']=='') or ($_POST['alamat']=='') or ($_POST['tentang']=='')) {
    echo '<script>alert(\'Pastikan data diri tidak ada yang kosong!\');history.go(-1);</script>';
  } else {
    $nama = $_POST['nama'];
    $email = $_POST['email'];
    $alamat = $_POST['alamat'];
    $tentang = $_POST['tentang'];
    $update = mysql_query("UPDATE `tb_user` SET `nama`='$nama',`email`='$email',`alamat`='$alamat',`tentang`='$tentang' WHERE `no_user`='" .$_SESSION['no']. "'");
    echo '<script>alert(\'Profile berhasil diubah!\');history.go(-1);</script>';
  }
}
?>
<!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">
  <title>Edit Profile - Pemula Belajar</title>
  <link rel="stylesheet" type="text/css" href="styles.css"/>
</head><!-- script by pemulabelajar.com-->
<body>
  <div class="header">
    Mediasosialku.com
  </div>
  <div class="navigasi">
    <li><a href="index.php">Home</a></li>
    <li><a href="profile.php?id=<?php echo $_SESSION['no']; ?>">Profile</a></li>
    <li><a href="keluar.php">Keluar</a></li>
  </div>
  <div class="sidebar">
    <p>Profile Saya</p>
    <img src="profile.png" width="60px" height="60px" style="float: left; margin-right: 10px;" />
    <p><?php
    echo '<a href="profile.php?id=' . $_SESSION['no'] . '">' . $data['nama'] . '</a>';
    ?></p>
    <p><?php
    $tentang = mysql_fetch_array(mysql_query("SELECT `tentang` FROM `tb_user` WHERE `no_user`='" . $_SESSION['no'] . "'"));
    echo $tentang['tentang'];
    ?></p>
  </div>
  <div class="content"><!-- script by pemulabelajar.com-->
  <p>Edit Profile | <a href="edit_sandi.php">Ganti Sandi ?</a></p>
  <hr />
    <form method="post">
    <?php
      $data = mysql_fetch_assoc(mysql_query("SELECT * FROM `tb_user` WHERE `no_user`='$no'"));
        echo '<p>Nama Lengkap :</p>';
        echo '<input type="text" name="nama" placeholder="Nama Lengkap" value="' .$data['nama']. '" />';
        echo '<p>Email :</p>';
        echo '<input type="email" name="email" placeholder="Email" value="' .$data['email']. '" />';
        echo '<p>Alamat :</p>';
        echo '<textarea name="alamat" placeholder="Alamat Lengkap">' .$data['alamat']. '</textarea>';
        echo '<p>Tentang Saya :</p>';
        echo '<textarea name="tentang" placeholder="Tentang Saya">' .$data['tentang']. '</textarea>';
      ?>
      <p><button type="submit" name="ubah">Ubah</button> <a href="profile.php?id=<?php echo $_SESSION['no']?>">Batal</a></p>
    </form>
  </div>
</body>
</html>

Simpan dan jalankan script diatas dan coba edit profile kawan apakah berhasil atau masih ada kesalahan pada saat edit.

Membuat Halaman Kata Sandi

Jika pada point sebelumnya kita sudah membuat sebuah halaman untuk seorang user (pengguna) melakukan pengubahan data pada website ini. Sekarang kita coba membuat halaman agar pengguna dapat mengganti kata sandinya. Pada halaman ini nanti kita akan membuat beberapa inputan yang harus diinputkan oleh pengguna. Inputan tersebut ialah sandi lama, sandi baru, dan Konfirmasi sandi baru. Ketiga inputan tersebut akan melakukan fungsinya sebagaimana namanya. Kita langsung saja mempraktekkannya ya kawan.

Buatlah sebuah file dengan nama edit_sandi.php, dan salin kode berikut kedalam file edit_sandi.php.
Kode edit_sandi.php
<?php
session_start();
include 'koneksi.php';
if (!$_SESSION['no']) {
  header('location: login.php');
}
$no = $_SESSION['no'];
$data = mysql_fetch_array(mysql_query("SELECT * FROM `tb_user` WHERE `no_user`='" . $_SESSION['no'] . "'"));
if (isset($_POST['ubah'])) {
  if (($_POST['oldpass']=='') or ($_POST['newpass']=='') or ($_POST['connewpass']=='')) {
    echo '<script>alert(\'Pastikan sandi tidak ada yang kosong!\');history.go(-1);</script>';
  } else {
    $oldpass = md5($_POST['oldpass']);
    $newpass = md5($_POST['newpass']);
    $connewpass = md5($_POST['connewpass']);
    if ($data['sandi'] == $oldpass) {
      if ($newpass == $connewpass) {
        mysql_query("UPDATE `tb_user` SET `sandi`='$newpass' WHERE `no_user`='$no'");
        session_destroy();
        echo '<script>alert(\'Kata sandi berhasil diubah. Silahkan login kembali!\');history.go(-1);</script>';
      } else {
        echo '<script>alert(\'Kata sandi baru tidak cocok!\');history.go(-1);</script>';
      }
    } else {
      echo '<script>alert(\'Kata sandi salah!\');history.go(-1);</script>';
    }
  }
}
?>
<!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">
  <title>Edit Sandi - Pemula Belajar</title>
  <link rel="stylesheet" type="text/css" href="styles.css"/>
</head><!-- script by pemulabelajar.com-->
<body>
  <div class="header">
    Mediasosialku.com
  </div>
  <div class="navigasi">
    <li><a href="index.php">Home</a></li>
    <li><a href="profile.php?id=<?php echo $_SESSION['no']; ?>">Profile</a></li>
    <li><a href="keluar.php">Keluar</a></li>
  </div>
  <div class="sidebar">
    <p>Profile Saya</p>
    <img src="profile.png" width="60px" height="60px" style="float: left; margin-right: 10px;" />
    <p><?php
    echo '<a href="profile.php?id=' . $_SESSION['no'] . '">' . $data['nama'] . '</a>';
    ?></p>
    <p><?php
    $tentang = mysql_fetch_array(mysql_query("SELECT `tentang` FROM `tb_user` WHERE `no_user`='" . $_SESSION['no'] . "'"));
    echo $tentang['tentang'];
    ?></p>
  </div>
  <div class="content"><!-- script by pemulabelajar.com-->
  <p>Ganti Sandi | <a href="edit_profile.php">Edit Profile ?</a></p>
  <hr />
    <form method="post">
    <?php
      $data = mysql_fetch_assoc(mysql_query("SELECT * FROM `tb_user` WHERE `no_user`='$no'"));
        echo '<p>Sandi Lama :</p>';
        echo '<input type="password" name="oldpass" placeholder="Sandi Lama" />';
        echo '<p>Sandi Baru :</p>';
        echo '<input type="password" name="newpass" placeholder="Sandi Baru" />';
        echo '<p>Ulangi Sandi Baru :</p>';
        echo '<input type="password" name="connewpass" placeholder="Ulangi Sandi Baru" />';
      ?>
      <p><button type="submit" name="ubah">Ubah Sandi</button> <a href="profile.php?id=<?php echo $_SESSION['no']?>">Batal</a></p>
    </form>
  </div>
</body>
</html>

Pada script diatas juga kita harus mengenkripsi sebuah string (sandi) kedalam md5. Untuk membuat enkripsi password kawan bisa membaca pada artikel Membuat enkripsi pada Password di PHP. Selanjutnya kita hanya membuat file dengan fungsi menghapus semua session yang sudah kita punya, lihat point selanjutnya.

Membuat Halaman Keluar

Pada halaman keluar ini kita hanya membuat fungsi session_destroy(); yang mana fungsi tersebut akan menghapus semua session yang sudah kita buat saat login. Dihalaman ini nanti kita akan menghilangkan data SESSION dan akana meneruskan ke halaman login.php.
Buatlah sebuah file dengan nama keluar.php, dan salin kode berikut
kode keluar.php
<?php
session_start();
session_destroy();
    header('location:login.php');
?>

Membuat styles.css

Fungsi dari styles.css adalah agar memperindah website jejaring sosil kita ini. Buatlah file dengan nama styles.css, dan salin semua kode dibawah ini.
kode styles.css
body {
    margin: 0 auto;
}
.header {
    padding: 15px;
    background-color: #2980b9;
    color: #fff;
    height: 80px;
    font-size: 44px;
}
.navigasi {
    background-color: #333; /*Pasti sudah taukan ?*/
    height: 50px; /*Pasti sudah taukan ?*/
}
.navigasi li {
    list-style: none;
}
.navigasi li {
    float: left; /*memposisikan dari sebelah kiri*/
    background-color: #999;
    padding: 15px; /*Dari posisi samping kiri kanan atas bawah tarik kedalam sebanyak 15 pixel*/
    margin-left: 5px; /*Jarak dari sebelah kiri dari luar sebanyak 15pixel*/
}
.navigasi li:hover {
    float: left; /*memposisikan dari sebelah kiri*/
    background-color: #ddd; /*Pasti sudah taukan ?*/
    padding: 15px; /*Dari posisi samping kiri kanan atas bawah tarik kedalam sebanyak 15 pixel*/
}
.navigasi li a {
    color: #333; /*Pasti sudah taukan ?*/
    font-weight: bold; /*Membuat font tebal*/
}
.sidebar {
    width: 20%; /* agan bisa mengganti dengan pixel atau % persen :) */
    float: left;
    padding: 15px;
    background-color: #ddd;
}

.content {
    width: 75%;
    float: right;
    background-color: #fff;
    padding: 15px;
}
.title-form-daftar {
    background-color: #ddd;
    margin: 0 -15px;
    padding: 15px;
}
@media (max-width: 1200px){
    .sidebar {
        clear: both;
        width: 97.3%; /* kawan bisa mengganti dengan pixel atau % persen :) */
        float: none;
        padding: 15px;
        background-color: #ddd;
    }
    .content {
        clear: both;
        width: 97.3%;
        float: none;
        background-color: #fff;
        padding: 15px;
    }
    .title-form-daftar {
        background-color: #ddd;
        margin: 0 15px;
        padding: 15px;
    }
}

Simpan kode tersebut dan jalankan apakah semua tampilan akan berubah saat kawan membuat file dengan nama styles.css.
Selesai sudah tugas kita membuat jejaring sosial dengan PHP, kawan dapat mengembangkan sistem ini dengan sesuka hati kawan, script untuk membuat fungsi yang lain mungkin sedikit banyaknya akan sama seperti yang kita buat. Jika, kawan ingin melihat tutorial php lengkap lainnya bisa dengan mengklik category php pada sidebar disamping kanan.

Screenshoot

Belajar PHP - Membuat Website Jejaring Sosial Part 3
Login website

Belajar PHP - Membuat Website Jejaring Sosial Part 3
Beranda website

Belajar PHP - Membuat Website Jejaring Sosial Part 3
Lihat profile teman

Belajar PHP - Membuat Website Jejaring Sosial Part 3
Lihat Profile Sendiri

Belajar PHP - Membuat Website Jejaring Sosial Part 3
Edit Profile

Belajar PHP - Membuat Website Jejaring Sosial Part 3
Edit kata sandi

Belajar PHP - Membuat Website Jejaring Sosial Part 3
Pendaftaran

Demo

Untuk demo dari website ini kawan bisa mengklik tautan ini. Demo Mediasosialku

Semoga artikel Tutorial PHP tentang Belajar PHP - Membuat Website Jejaring Sosial ini dapat bermanfaat bagi kawan yang sedang belajar PHP. Jika pada artikel ini kawan kebingungan dalam melakukan langkah-langkah yang disampaikan penulis, kawan dapat bertanya pada kolom komentar atau menghubungi saya melalui menu contact diatas. Salam dan Terima Kasih.

Related

Langganan: Posting Komentar (Atom)