Langsung ke konten utama

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.
Label:

Komentar

  1. Nurul18 Mei 2016 pukul 04.53

    mas itukan ada get id yang di $profile itu ngambil fungsi darimana ya ?

    BalasHapus
    Balasan
    1. Andi Mariadi18 Mei 2016 pukul 13.05

      Get id yg di $profile fungsinya untuk mengambil user yang akan kita lihat mas... misalnya klik profile tanpa ada id maka $profile akan menampilkan id milik kita, sedangkan jika ada id yg didapat maka akan menampilkan profile id tersebut.

      Hapus
  2. nikotin2mgs27 Juni 2016 pukul 22.18

    mau tanya nign , kalau caranya menyisipkan upload foto ke daftar.php gimana yah?

    BalasHapus
  3. nikotin2mgs27 Juni 2016 pukul 22.19

    mau nanya nih gan , kalau caranya menyisipkan upload foto ke daftar.php gimana yah?

    BalasHapus
    Balasan
    1. Andi Mariadi27 Juni 2016 pukul 22.38

      Jadi ceritanya kalau daftar langsung upload foto ya gan ? Bisa langsung sisipkan seperti biasanya gan, seperti upload foto pada umumnya, tapi buat relasi antar tabel gambar dan usernya :)

      Hapus
  4. nikotin2mgs27 Juni 2016 pukul 23.08

    owwh begitu ya mas, misal saya ingin buat dalam satu tabel, dengan menambahkan photo pada tb_user. terus postnya bersamaan dalam daftar php kira2 sciptnya gimana ya mas. mohon bantaunnya.

    BalasHapus
    Balasan
    1. Andi Mariadi27 Juni 2016 pukul 23.34

      Bisa mas tinggal tambah field di tb user dengan field untuk upload gambar biasanya...
      Dan, saat isset post buat variabel untuk directori fotonya. Lalu tinggal tambah variabel tersebut di Insert into di daftar.php

      Hapus
  5. nikotin2mgs27 Juni 2016 pukul 23.10

    *bantuannya

    BalasHapus
  6. nikotin2mgs27 Juni 2016 pukul 23.40

    terimakasih mas.

    BalasHapus

Posting Komentar

Komentar dan Kritik kawan diperlukan agar dapat membangun pemula belajar kedepannya. Terima Kasih

Postingan populer dari blog ini

Tutorial Lengkap Membuat Short Link Sendiri Dengan PHP Mysql

Hallo kawan, berjumpa lagi nih sama toturial www.pemulabelajar.com. Kali ini kita akan membahas cara membuat short link sendiri . Pernah dong kawan menjumpai namanya short link, contoh sederhananya saja goo.gl . goo.gl akan membuat url site kita menjadi lebih pendek misalnya saja : http://www.pemulabelajar.com bisa menjadi goo.gl/Jiahs . Begitu juga tutorial kita membuat short link kali ini. Karena membuat short link kita sekarang menggunakan PHP Mysql maka kawan disarankan untuk membuat hosting untuk website yang akan dijadikan website short link kita sendiri, kawan bisa menggunakan layanan gratis seperti 000webhosting.com atapun idhostinger.com (recomended) selain gratis, pembuatan databasenya juga termasuk mudah dan juga tutorialnya sangat banyak digoogle kalau ada waktu saya akan membuatkan tutorial membuat hosting gratis untuk kawan. Membuat Short Link Saya anggap saja kawan sudah membuat hosting disalah satu tempat hosting diatas. Maka langkah a...
28 komentar
Baca selengkapnya

Belajar Power Design - Cara Membuat Project Menjadi Gambar

Cara Membuat Project Menjadi Gambar - Artikel ini akan membahas sedikit tentang Power Design dan Bagaimana merubah project power design menjadi sebuah gambar . Masalah ini sering dialami oleh pemula khususnya saya yang bingung bagaimana merubah sebuah project power design menjadi berupa gambar agar mudah dimuat ke sebuah karya tulis. Baca juga : Membuat Teks Rotasi Dengan Photoshop Apa itu Power Design ? Power design adalah sebuah paket program desain tools yang digunakan untuk membuat Visualisasi, dokumentasi dan mendesain suatu sistem perangkat lunak. Paket ini meliputi Process analyst Model (PAM), Data architect tools, Aplication modeler tools, dan Metawork tools. Power Design ini juga sering digunakan menjadi software untuk membuat Diagram Flow Diagram atau DFD . Bagaimana Merubah Project Menjadi Gambar ? Untuk merubah sebuah project pada power design menjadi sebuah gambar cukup mudah. Secara singkatnya kawan cukup memilih semua object yang akan dijadikan sebuah gambar, s...
Posting Komentar
Baca selengkapnya

Belajar Web - Membuat Website Responsive CSS

Sebelum kita meneruskan tutorial selanjutnya yaitu Belajar Membuat Website Responsive baiknya kita pelajari terlebuh dahulu apa aja yang akan kita bahas. Karena yang akan kita bahas selanjutnya adalah responsive web, maka diwajibkan mengerti fungsi script css yang ada di Belajar Desajn Website di html / php toturial sebelumnya. Apa itu float ? Apa itu width ? Apa itu height ? Apa itu clear: both ? Responsive ini memakai @media(max-width) atau @media(min-width) yang memiliki arti lebar maximal style dan lebar minimal yang kita masukkan di dalam @media tersebut. Sebelum memperlajari responsive menu sebaiknya lita pelajari dulu float, clear dan lain-lain. Karena @media tersebut hanya mengganti script css dari css global. Apa itu css global ? Nanti anda penjelasannya masing-masing. Apakah anda sudah ngerti dengan coding css diatas ? Jika belum, ada baiknya anda harus pelajari dulu scriptnya di toturial sebelumnya. Cara memperbaiki jika terjadi error atau kesalahan penulidan pada d...
Posting Komentar
Baca selengkapnya