Membuat Website Part 2

Membuat Website dengan PHP Dari Awal Part 2

Tutorial 5 : Membuat Kelengkapan User log-in untuk Autentifikasi

Sekarang kita langsung masuk ke halaman log-in yang sudah pernah dibuat sebelumnya para part 1. Selanjutnya mari kita membuat file baru dan beri nama checklogin.php.

Kenapa checklogin.php ?

Karena jika kita melihat kembali ke login.php, maka diperlukan form yang memiliki tindakan lanjutan yang disebut sebagai “checklogin.php”.

Perintah yang dikeluarkan untuk checklogin ini adalah seperti ini <form action = “checklogin.php” = “POST”>. Tidak hanya pada login.php yang harus memiliki checklogin.php, pada register.php juga sama.

Oke, sekarang langsung masuk ke script/kode untuk membentuk checklogin.php :

checklogin.php

 

<?php
    session_start();
    $username = mysql_real_escape_string($_POST['username']);
    $password = mysql_real_escape_string($_POST['password']);
    $bool = true;

    mysql_connect("localhost", "root", "") or die (mysql_error()); //Connect to server
    mysql_select_db("first_db") or die ("Cannot connect to database"); //Connect to database
    $query = mysql_query("Select * from users WHERE username='$username'"); // Query the users table
    $exists = mysql_num_rows($query); //Checks if username exists
    $table_users = "":
    $table_password = "";
    if($exists > 0) //IF there are no returning rows or no existing username
    {
       while($row = mysql_fetch_assoc($query)) // display all rows from query
       {
          $table_users = $row['username']; // the first username row is passed on to $table_users, and so on until the query is finished
          $table_password = $row['password']; // the first password row is passed on to $table_password, and so on until the query is finished
       }
       if(($username == $table_users) && ($password == $table_password))// checks if there are any matching fields
       {
          if($password == $table_password)
          {
             $_SESSION['user'] = $username; //set the username in a session. This serves as a global variable
             header("location: home.php"); // redirects the user to the authenticated home page
          }
       }
       else
       {
        Print '<script>alert("Incorrect Password!");</script>'; // Prompts the user
        Print '<script>window.location.assign("login.php");</script>'; // redirects to login.php
       }
    }
    else
    {
        Print '<script>alert("Incorrect username!");</script>'; // Prompts the user
        Print '<script>window.location.assign("login.php");</script>'; // redirects to login.php
    }
?>

Berikut penjelasan kode di atas yang wajib anda ketahui (Beberapa dijelaskan sebelumnya sehingga saya tidak jelaskan ulang) :

• session_start() – Mulai sesi. Ini biasanya dilakukan pada halaman yang diautentikasi. Alasannya karena ini diperlukan untuk melengkapi kode $ _SESSION [”].
• mysql_num_rows() – Kode ini memiliki sifat yang dapat mengembalikan sebuah integer. Di mana dengan kode ini mampu menghitung semua baris tergantung pada kueri yang diinginkan.
• $ _SESSION [‘name’] – Berbeda dengan 2 kode yang saya jelaskan di atas. Kode ini memiliki fungsi menyeluruh yang mampu sebagai nama sesi untuk seluruh sesi yang ada. Kode ini mirip seperti kode dengan variabel publik dalam suatu pemrograman yang memiliki orientasi terhadap objek tertentu. Dapat juga disebut object-oriented programming. Selain itu kode ini berguna untuk melakukan validasi mengenai apakah pengguna tersebut sudah diotentikasi atau belum.

Sekarang cobalah untuk menguji kode checklogin yang sudah anda buat, dengan cara masukan nama pengguna dan kata sandi yang salah.

Seharusnya jika salah, maka akan muncul pernyataan yang menyatakan bahwa username ataupun password salah. Kemudian akan dikembalikan ke halaman login yang.

Selanjutnya lakukan pengujian kembali, namun dengan username dan password yang benar. Jika benar, maka akan beralih ke halaman selanjutnya yaitu home.php.

Catatan : pada kasus ini kita belum membuat home.php sehingga halaman yang akan muncul adalah kesalahan 404 atau error 404.

Tutorial 6 :  homepage untuk pengguna, dalam hal ini bagian log-indan log-out

Untuk membuat homepage di website, anda bisa membuat file dengan nama home.php dengan menggunakan sintaks atau kode berikut :

home.php

<html>
    <head>
        <title>My first PHP Website</title>
    </head>
   <?php
   session_start(); //starts the session
   if($_SESSION['user']){ // checks if the user is logged in  
   }
   else{
      header("location: index.php"); // redirects if user is not logged in
   }
   $user = $_SESSION['user']; //assigns user value
   ?>
    <body>
        <h2>Home Page</h2>
        
<hello>! 
 <!--Display's user name-->
        <a href="logout.php">Click here to go logout</a><br/><br/>
        <form action="add.php" method="POST">
           Add more to list: <input type="text" name="details" /> <br/>
           Public post? <input type="checkbox" name="public[]" value="yes" /> <br/>
           <input type="submit" value="Add to list"/>
        </form>
    <h2 align="center">My list</h2>
CREATE TABLE (
    ID,
    Details,
    Edit,
    Delete,
);
</body> </html> 

Sekarang, coba anda refresh browser nya, jika muncul tampilan di bawah ini, maka anda sudah berhasil membuat home.php nya

Sekarang kita sudah memiliki homepage, selanjutnya kita akan membuat sesi logout. Di mana kita akan memberikan nama file tersebut sebagai logout.php.

Sesi tersebut akan kita uji juga disaat pengguna sudah keluar sesi melalui logouttersebut, maka pengguna tidak akan dapat mengakses home.php. Sintaks atau kode nya adalah sebagai berikut :

logout.php

 

<?php
    session_start();
    session_destroy();
    header("location:index.php");
?>

Tutorial 7 : Melakukan Tes Terhadap Page Security

Jika anda sudah memasuki tahap ini, bisa diartikan bahwa anda sudah memahami cara membuat website dengan php dari awal, walaupun ini masih setengah jalan.

Melakukan test terhadap page security sangat diperlukan untuk memastikan bahwa sesi login ataupun logout yang ada bersifat aman.

Coba anda sekarang lakukan refresh pada home.php lalu klik logout. Kemudian klik tombol kembali/back yang terletak pada browser, dan pastikan tampilan nya akan menjadi seperti di bawah ini :

Seperti yang terlihat pada gambar di atas, bahwa setelah logout tidak menuju ke home.php. Sekarang mari kita lakukan tes kedua, cobalah anda secara manual melakukan masukan ke url bar browser dengan nama localhost/WebsiteSatu/home.php.

Seharusnya biarpun anda mengetikan alamat di url bar secara manual dengan harapan mampu menuju ke home.php namun hal tersebut tidak akan bisa. Karena script tersebut telah memberikan mekanisme keamanan sederhana.

Di mana perintah tersebut mengarahkan kembali pengguna yang tidak sah ke halaman publik.

Sekarang, anda bisa mencoba masuk kembali ke home.php.

Tutorial 8 : Memberikan Data Kepada Daftar User yang hanya Memiliki Akses Tertentu

Langkah selanjutnya dari membuat website dengan php dari awal adalah membuat penambahan item ke dalam daftar.

Coba perhatikan form yang ada tertulis perintah <form action = “add.php” method = “POST”>, yang berarti permintaan posting http menuju ke add.php dengan menggunakan sintaks berikut :

add.php

 

<?php
    session_start();
    if($_SESSION['user']){
    }
    else{ 
       header("location:index.php");
    }

    $details = mysql_real_escape_string($_POST['details']);
    $time = strftime("%X"); //time
    $date = strftime("%B %d, %Y"); //date

    Print "$time - $date - $details";
?>

Sintaks ini bukan merupakan sintaks add.php yang resmi, ini merupakan hanya sebuah demonstrasi suatu sintaks tentang waktu dan tanggal dan mendapatkan masukan anda. Tetapi tetap saja hal ini perlu diketahui jika anda ingin membuat website dengan php dari awal.

Sekarang kembali ke nama file home.php yang sudah anda buat dan cobalah anda tambahkan item tertentu lalu klik “Add to list“.

Selanjutnya, seharusnya akan muncul hasil seperti di bawah ini :

Seperti yang terlihat pada gambar di atas, anda sudah memiliki waktu, tanggal, dan input kata “fish”.

Rincian sintaks tersebut memiliki beberapa arti, sebagai berikut :

• strftime() – Waktu yang muncul berdasarkan format yang telah anda tetapkan
• %X – Keterangan waktu pada sistem saat ini.
• %B – Keterangan bulan pada sistem saat ini.
• %d – Keterangan hari pada sistem saat ini.
• %Y – Keterangan tahun pada sistem saat ini.

Sekarang silahkan anda modifikasi file add.php dan coba tambahkan data berikut ke dalam database, bersama dengan data dari kode yang telah saya berikan kotak berwarna merah (lihat gambar di bawah ini) :

add.php

<?php
    session_start();
    if($_SESSION['user']){
    }
    else{ 
       header("location:index.php");
    }

    if($_SERVER['REQUEST_METHOD'] == "POST")
    {
       $details = mysql_real_escape_string($_POST['details']);
       $time = strftime("%X"); //time
       $date = strftime("%B %d, %Y"); //date
       $decision = "no";
   
       mysql_connect("localhost","root","") or die(mysql_error()); //Connect to server
       mysql_select_db("first_db") or die("Cannot connect to database"); //Conect to database
       foreach($_POST['public'] in $each_check) //gets the data from the checkbox
       {
          if($each_check != null){ //checks if checkbox is checked
             $decision = "yes"; // sets the value
          }
       }

       mysql_query("INSERT INTO list(details, date_posted, time_posted, public) VALUES ('$details','$date','$time','$decision')"); //SQL query
       header("location:home.php");
    }
    else
    {
       header("location:home.php");
    }
?>

Sekarang kita akan mencoba untuk mulai masukkan beberapa data dan klik “add to list”.

Dalam kasus saya, saya hanya akan menggunakan kata “fish” lagi.

Sekarang buka phpmyadmin dan lihatlah apakah data telah berhasil ditambahkan. Inilah hasilnya :

localhost/phpmyadmin

Tutorial 9 : Memunculkan Data pada Homepage

Seperti yang terlihat sebelumnya bahwa data berhasil ditambahkan.

Sekarang saya akan mencoba untuk menampilkan suatu data pada homepage.

Kita bisa memodifikasi home.php dan karena itu saya akan tambahkan beberapa kolom untuk menempatkan bagian tanggal :

home.php

 

Sekarang anda bisa kembali fokus ke url browser dan cobalah untuk refresh home.php nya dan lihat apa yang terjadi :

 Berdasarkan gambar, seharusnya data berhasil ditampilkan. Selanjutnya kita coba untuk melakukan edit/merubah dan menghapus informasi yang ada.

Jika anda sadari, kami telah mengedit dan menghapus tautan yang ditampilkan pada kolom sebelumnya.

Di sini saya akan menambahkan data lain ke dalam daftar yang bernama “Tuna” sebagai contoh baru kali ini,untuk memiliki contoh lain dan kali ini.

Tuna ini akan memiliki keterangan “public post” sebagai keterangan “no”. Dibandingkan “Fish” sebelumnya yang “yes”.

Tutorial 10 = Melakukan Edit Data

Pada tahap ini, kita akan mencoba untuk melakukan edit data yang telah ada tersebut. Untuk melakukannya, menggunakan fungsi yang belum kita coba sebelumnya, yaitu “GET”.

Pada metode sebelumnya, kita menggunakan “POST” sebagai permintaan ke http. Namun sekarang, kita akan menggunakan fungsi “GET” untuk melakukan perintah “edit” dan “deleted” catatan yang ada.

Sebelum memulai, ada hal yang harus dilakukan, yaitu memodifikasihome.php dan menambahkan beberapa kode baru ke 2 kolom yang ada :

home.php

Lihatlah pada gambar di atas, saya memberikan parameter URL baru untuk tautan edit dan hapus, yaitu parameter “id”. Kami sudah menandai nya dengan kotak merah agar mudah ditemukan.

Hal ini dapat kita gunakan nanti untuk menangani suatu data tertentu. Karena “id” adalah pengenal unik yang memungkinkan kita untuk memasukan data yang sama sehingga tidak disarankan untuk menggunakan rincian sebagai sarana manipulasi kedepannya.

Selanjutnya kita uji “id” tersebut, pertama jika anda sudah melakukan kode di atas, lalu coba letakkan kursor ke dalam tautan edit dan anda akan melihat nilai “id” di kiri bawah :

Langkah selanjutnya adalah uji coba file edit.php :

edit.php

Baris 1-42

Baris ke 42-76

Alasan mengapa saya menempatkan variabel $id_exists adalah karena jika pengguna memodifikasi parameter URL ke nomor yang tidak ada.

(dalam kasus ini, saya hanya memiliki 2 baris per id), dan dapat menampilkan prompt di mana data tidak tidak ada.

Sekarang coba klik tautan edit ke baris pertama dan seharusnya ditampilkan seperti ini :

Sekarang coba untuk memodifikasi parameter URL dengan menghapus “?Id=1” pada akhir url di atas

Seharusnya url tersebut menjadi seperti ini localhost/WebsiteSatu/edit.php dan hasilnya akan seperti ini :

Sekarang mari kita coba untuk memberikan nilai yang lebih besar dari nomor id sebelumnya yaitu angka 5 dan hasil url nya seperti ini :

localhost/WebsiteSatu/edit.php?id=5

Setelah berhasil mengamankan parameter URL, langkah selanjutnya adalah melakukan modifikasi sintaks edit.php ke database :

edit.php tahap 2

Berikut kode/sintaks yang digunakan pada tanda kotak berwarna merah di atas :

<?php
   if($_SERVER['REQUEST_METHOD'] == "POST")
   {
      mysql_connect("localhost", "root", "") or die (mysql_error()); //Connect to server
      mysql_select_db("first_db") or die ("Cannot connect to database"); //Connect to database
      $details = mysql_real_escape_string($_POST['details']);
      $public = "no";
      $id = $_SESSION['id'];
      $time = strftime("%X"); //time
      $date = strftime("%B %D, %Y"); //date

      foreach($_POST['public'] as $list)
      {
         if($list != null)
         {
            $public = "yes";
         }
      }
      mysql_query("UPDATE list SET details='$details', public='$public', date_edited='$date', time_edited='$time' WHERE id='$id'");
      header("location:home.php");
   }
?>

Sekarang coba refresh dan kembali ke halaman edit lalu coba data yang berbeda.

Saat ini, saya akan menggunakan “Salmon” dan mengubahnya menjadi non-public :

edit.php?id=1

Kemudian klik “update list” dan lalu alihkan ke home.php dan lihatlah hasil dari “updated list”.

Lihatlah kata “salmon” sudah masuk ke dalam daftar baru pada tabel tersebut. Selanjutnya kita dapat memeriksa waktu editing pada waktu dan tanggal pengeditan yang terjadi pada kolom “edit time”.

Pada bagian public post telah ditetapkan sebagai non-public.

Jika hal tersebut sudah dilakukan berarti anda sudah bisa melakukan proses edit dan penambahan item pada kolom tabel tersebut.

Tutorial 11 : Deleting Data

Sekarang kita sudah memasuki tahapan yang cukup penting dari membuatwebsite dengan php dari awal.

Kembali lihat lagi pada bagian menambahkan, menampilkan, dan mengedit yang telah dibahas sebelumnya. Sekarang untuk bagian terakhir, yaitu “Deleting Data” yang ada.

Sebenarnya, bagian ini merupakan bagian yang relatif sama dengan apa yang telah saya lakukan pada proses pengeditan sebelumnya. Namun yang berbeda hanyalah pernyataan SQL.

Hanya saja pada saat itu, kita mempelajari proses dari “update” dan sekarang kita akan mempelajari proses atau fungsi dari kode/sintaks “delete”. Dalam proses “delete data” , saya ingin anda memastikan bahwa anda benar-benar ingin melakukan ini (delete data).

Sehingga akan ada penambahan sedikit javascript di home.php. Untuk melakukan itu, mari kita memodifikasi kode/sintaks yang ada dan menambahkan beberapa int home.php nya.

home.php

<table border="1px" width="100%">
    
       Id
       Details
       Post Time
       Edit Time
       Edit
       Delete
       Public Post
    
    ';
             Print ''. $row['id'] . "";
             Print ''. $row['details'] . "";
             Print ''. $row['date_posted'] . " - " . $row['time_posted'] . "";
             Print ''. $row['date_edited'] . " - " . $row['time_edited'] ."";
             Print '<a href="edit.php?id='.$row['id'].'">edit';
             Print '<a href="#" nclick="myfunction('.$row['id'].')">delete</a>';
             Print ''. $row['public'] . '';
          Print '';
       }
    ?>



<script>
    function myFunction(id)
    {
       var r = confirm("Are you sure you want to delete this record?");
       if(r == true)
       {
          window.location.assign("delete.php?id=" + id);
       }
    }
</script>

Halaman kemudian mengarahkan ke delete.php bersama-sama tertanam dengan nilai id. Sekarang mari kita buat delete.php dan inilah sintaks berikut :

delete.php

<?php
    session_start(); //starts the session
    if($_SESSION['user']){ //checks if user is logged in
    }
    else {
       header("location:index.php"); //redirects if user is not logged in.
    }

    if($_SERVER['REQUEST_METHOD'] == "GET")
    {
       mysql_connect("localhost", "root", "") or die(mysql_error()); //connect to server
       mysql_select_db("first_db") or die("cannot connect to database"); //Connect to database
       $id = $_GET['id'];
       mysql_query("DELETE FROM list WHERE id='$id'");
       header("location:home.php");
    }
?>

Ini merupakan kode atau sintaks sederhana yang bisa digunakan, namun memiliki tujuan untuk merubah atau melakukan request perubahan permintaan menjadi “get”. Setelah ini dilakukan, anda bisa coba untuk melakukan “refresh” home.php dan mulai menghapus record atau catatan pertama. Jika benar, maka seharusnya hasilnya akan menjadi seperti ini :

Prompt :

End-result :

Tutorial 12 : Menampilkan Public Data

Sekarang untuk bagian terakhir dari membuat website dengan php dari awal yaitu menampilkan public data. Kita akan menampilkan data yang telah ditetapkan pada index.php.

Hal ini merupakan halaman untuk pengguna yang tidak terotentikasi. Sebenarnya sangat sederhana, yaitu hanya perlu mengedit index.php dan menambahkan beberapa kode dan tabel php. Berikut ini index.php yang diperbarui :

index.php

Sekarang log-out dan lihat halaman default anda. Seharusnya terlihat seperti ini :

Catatan: Tidak ada data yang tampil karena data tersebut belum ditetapkan atau belum diberikan informasi apapun ke publik

Sekarang mari log-in dan tambahkan lebih banyak data, berikut :

• Salad – public
• Jagung – non-public
• Pasta – public
• Ayam – public
• Spaghetti – non-public

Dengan total 6 data dengan 3 dari setiap pengaturan privasi :

home.php

Sekarang mari logout dan lihat halaman default (index.php). Seharusnya sekarang terlihat seperti ini :

index.php

Nah seperti yang anda lihat, jika saya membuat data untuk ditampilkan di public, maka akan terlihat data tersebut pada index.php.

Ini merupakan akhir dari part 2 untuk anda memahami cara membuat website dengan php dari awal. Sebenarnya pembuatan website dengan php ini lebih kepada back-office dari sebuah tampilan website. Pada umumnya pembuat website terfokus hanya kepada front-end website (tampilan), namun lupa pada back-endsebuah website.

Namun hal tersebut, tidak menutup kemungkinan saya untuk membuat tutorial pembuatan website yang lebih memperhatikan tampilan website.

Seobigbang akan memberikan ringkasan dari hasil langkah-langkah pembuatan website dari php ini.

RINGKASAN

Selalu ingatlah, bahwa beberapa file ini seharusnya anda miliki jika menjalankan tutorial ini :

Terima Kasih sudah mengikuti 12 tutorial sederhana ini, tentang bagaimana cara membuat website dengan php dari awal yang lebih terfokus pada sistem di balik website itu sendiri. Karena jika anda membuat website hanya berfokus pada tampilan saja bisa berbahaya, anda harus memahami setiap detail dari sistem yang digunakan di dalamnya. Jangan lupa jika anda berhasil membuat website untuk selalu melakukan indexing website anda. Kembali ke Part 1