Tutorial Lengkap : Cara Membuat Website Dengan PHP Dari Awal Part 2

Nilai Anda Untuk Artikel Ini
Sending
User Rating 5 (36 votes)

Artikel ini merupakan kelanjutan dari Cara membuat website dengan php dari awal Part 1 dan sekarang saya akan menjelaskan cara bikin website dengan php dari awal part 2 di tutorial ini. Semoga dengan artikel ini sahabat seobigbang bisa memahami dan bisa langsung action untuk melakukan pembuatan website berbasiskan php.

Pada part 2 ini saya akan menjelaskan beberapa langkah lagi, kurang lebih sekitar 6 langkah. Saya tidak akan membahasakan tutorial 1 sebagai langkah pertama nya, namun akan langsung saya membahasakannya sebagai tutorial 5.

Membuat Website dengan PHP Dari Awal Part 2

Cara Membuat Website Dengan PHP dari Awal Part 2 Cover

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

Cara Membuat Website Dengan PHP dari Awal 22

<?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-in dan log-out

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

home.php

Cara Membuat Website Dengan PHP dari Awal 23

<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

Cara Membuat Website Dengan PHP dari Awal 24

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 logout tersebut, maka pengguna tidak akan dapat mengakses home.php. Sintaks atau kode nya adalah sebagai berikut :

logout.php

Cara Membuat Website Dengan PHP dari Awal 25

<?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 :

Cara Membuat Website Dengan PHP dari Awal 26



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

Cara Membuat Website Dengan PHP dari Awal 27

<?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“.



Cara Membuat Website Dengan PHP dari Awal 28

Selanjutnya, seharusnya akan muncul hasil seperti di bawah ini :

Cara Membuat Website Dengan PHP dari Awal 29

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

Cara Membuat Website Dengan PHP dari Awal 30

<?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

Cara Membuat Website Dengan PHP dari Awal 31

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

Cara Membuat Website Dengan PHP dari Awal 32a

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

Cara Membuat Website Dengan PHP dari Awal 33

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”.

Cara Membuat Website Dengan PHP dari Awal 33a

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 memodifikasi home.php dan menambahkan beberapa kode baru ke 2 kolom yang ada :

home.php

Cara Membuat Website Dengan PHP dari Awal 34

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 :

Cara Membuat Website Dengan PHP dari Awal 35

Langkah selanjutnya adalah uji coba file edit.php :

edit.php

Baris 1-42



Cara Membuat Website Dengan PHP dari Awal 36

Baris ke 42-76

Cara Membuat Website Dengan PHP dari Awal 37

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 :

Cara Membuat Website Dengan PHP dari Awal 38

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 :

Cara Membuat Website Dengan PHP dari Awal 39

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

Cara Membuat Website Dengan PHP dari Awal 40

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

edit.php tahap 2

Cara Membuat Website Dengan PHP dari Awal 41



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

Cara Membuat Website Dengan PHP dari Awal 42

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

Cara Membuat Website Dengan PHP dari Awal 43

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 membuat website 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

Cara Membuat Website Dengan PHP dari Awal 44

<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

Cara Membuat Website Dengan PHP dari Awal 45

<?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 :

Cara Membuat Website Dengan PHP dari Awal 46

End-result :

Cara Membuat Website Dengan PHP dari Awal 47

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

Cara Membuat Website Dengan PHP dari Awal 48

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

Cara Membuat Website Dengan PHP dari Awal 49

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

Cara Membuat Website Dengan PHP dari Awal 50

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



index.php

Cara Membuat Website Dengan PHP dari Awal 51

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-end sebuah 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 :

Cara Membuat Website Dengan PHP dari Awal 52

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.

Jika anda ingin melihat Part 1 dari tutorial ini, anda bisa KLIK DI SINI

Baca Juga :  Blogger VS Wordpress : Siapa yang Terbaik ?