Advertise Here

HTML Tutorials

JavaScript Tutorials

PHP OOP

JAVA Tutorials

Mobile Development

Pembelajaran 8 : Membuat Method Get / Set di PHP OOP

    March 17, 2019   No comments

Pada pembahasan kali ini kita akan akan membahas tentang bagaimana cara membuat metode atau fungsi SET() dan GET() didalam sebuah class pada PHP pemrograman berorientasi object.

Pada pembelajaran mengenai PHP OOP sebelumnya kita sudah pernah membahas cara Membuat Constructor di PHP OOP pada konsep pemrograman PHP.

Dalam pembuatan project PHP yang sesungguhnya, pemberian nilai pada property dalam sebuah Class dilakukan setelah membuat object tersebut, namun dalam pembelajaran sebelumnya kita langsung memberi nilai pada property yang kita buat seperti :


class belajarphp {

    // property

    public $x = 10;

    public $y = 20;

  }


Dari contoh diatas bisa dilihat nilai dari property $x langsung diberi nilai 10, dan variable $y dengan nilai 20.

Pada pembahasan ini, nilai property $x dan $y akan kita isi ketika dibutuhkan/memanggil class belajarphp tersebut menggunakan metode Get dan Set.

Metode Get dan Set sebenarnya sama saja dengan metode/fungsi biasa yang sudah kita pelajari sebelumnya, Namun dalam konsep pemrograman berorientasi object kita mengenal istilah metode get dan set. Berikut ini contoh penerapan metode GET dan SET pada php OOP.



<?php

  // nama class

  class belajarphp {

    // property

    public $x;

    // metode set nilai x

    public function setNilaiX($nilai){

      $this->x =$nilai;

    }

    // metode get nilai x

    public function getNilaiX(){

      return $this->x;

    }

  }

  // buat object baru

  $jumlah = new belajarphp;

  // isi nilai $x

  $jumlah->setNilaiX(10);

  // tampilkan nilai $x

  echo "Nilai variable $x = ". $jumlah->getNilaiX();

 ?>


Jika tidak ada error, maka akan menghasilkan "Nilai variable $x = 10".

Penjelasannya, ketika kita membuat object baru dari class belajarphp, kita harus memberi nilai baru terhadap variable/property $x, dan gunakan function getNilaiX() jika ingin menampilkan nilai baru variable $x.

Sebagai tambahan, kita juga bisa membuat objek baru dari class yang sama dengan nilai yang berbeda tentunya. Misalnya kita punya nialai dari $x adalah 10, maka saya akan membuat objek baru dengan nama $jumlahbaru dari $x dengan nilai 20, lihat contoh berikut :


<?php

  // nama class

  class belajarphp {

    // property

    public $x;

    // metode set nilai x

    public function setNilaiX($nilai){

      $this->x =$nilai;

    }

    // metode get nilai x

    public function getNilaiX(){

      return $this->x;

    }

  }

  // buat object baru

  $jumlah = new belajarphp;

  $jumlahBaru = new belajarphp;

  // isi nilai $x

  $jumlah->setNilaiX(10);

  $jumlahBaru->setNilaiX(20);

  // tampilkan nilai $x

  echo "Nilai variable $x = ". $jumlah->getNilaiX();

  echo "<br>";

  echo "Nilai Baru variable $x = ". $jumlahBaru->getNilaiX();

 ?>


Jika tidak terjadi error maka akan menghasilkan


Nilai variable $x = 10

Nilai Baru variable $x = 20


Kalian juga bisa membuat variasi-variasi dengan fungsi yang berbeda-beda. Sekian dulu untuk pembahasan kali ini,jangan lupa dipelajari dan di praktekkan agar lebih menguasai materinya. Jangan lupa komentar dan shere artikel ini agar lebih bermanfaat. Silahkan follow sosial media portal coding dan silahkan berlangganan melalui email secara gratis agar kamu tidak ketinggalan update tutorialnya. Terima kasih.

Upload File dengan Progress Bar (Bootstrap 3 - Responsive)

    March 04, 2019   No comments



Hai, kembali lagi bersama Portal Coding.

Pada pembahasan kali ini kita akan membahas mengenai cara Upload file dengan Progress Bar menggunakan Bootstrap 3 dan juga javascript. Maksudnya disini adalah saat kita mengupload sebuah file, nanti progress bar akan berjalan sesuai berapa persen system sedang mengupload file tadi.

Baik langsung saja ke pembahasannya ya. Pertama kita buat terlebih dahulu file dengan nama index.php dan juga upload.php serta buatlah sebuah folder kosong dengan nama upload. Kemudian simpan dalam 1 folder.

Buka file index.php tadi dan masukkan script berikut didalamnya. Pada file index.php ini adalah untuk tampilan nya.


<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Progress Bar</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

</head>

<body>

 <div class="container" style="margin-top:10px;">

  <div class="row">

            <div class="col-xs-12">

                <form method="POST">

                    <div class="form-group">

                        <label for="InputFile">File input</label>

                        <input type="file" id="InputFile" name="file">

                    </div>

                    <div class="form-group">

                        <input type="submit" class="btn btn-primary" value="Upload">

                    </div>                

                </form>

            </div>

  </div>

        <div class="row">

            <div class="col-xs-6">

                <div class="progress">

                    <div id="progressBar" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%">

                        <span class="sr-only">0% Complete</span>

                    </div>

                </div>              

            </div>

        </div>

 </div>  



    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>  



    <script>

        $(document).ready(function() {

            $('form').on('submit', function(event){

                event.preventDefault();

                var formData = new FormData($('form')[0]);

              

                $.ajax({

                    xhr : function() {

                        var xhr = new window.XMLHttpRequest();

                        xhr.upload.addEventListener('progress', function(e){

                            var percent = Math.round((e.loaded / e.total) * 100);

                            $('#progressBar').attr('aria-valuenow', percent).css('width', percent + '%').text(percent + '%');

                        });

                        return xhr;

                    },

                  

                    type : 'POST',

                    url : 'upload.php',

                    data : formData,

                    processData : false,

                    contentType : false,

                    success : function(response){

                        $('form')[0].reset();

                    },

                    error : function(response){

                        console.log(response);

                    }

                });

            });

        });

    </script>      

</body>

</html>


Kemudian simpan. Selanjutnya buka file upload.php, lalu masukkan script dibawah ini kedalamnya. Fungsi dari file ini adalah untuk konfigurasi upload file ke folder upload.


<?php

    if (!empty($_FILES["file"])) {

        $file = $_FILES["file"];

        $ext = pathinfo($_FILES["file"]["name"], PATHINFO_EXTENSION);

        $parts = pathinfo($file['name']);

        $name = $parts["filename"]. "." . $parts["extension"];

        move_uploaded_file($file["tmp_name"], 'upload/' . $name);

    }

?>


Setelah semua nya telah kalian masukkan, jangan lupa disave dan dijalankan. Berikut ini agalah hasil dari script diatas.




Kalian bisa mendownload file dari coding diatas. Download disini.

Sekian dulu untuk pembahasan kali ini,jangan lupa dipelajari dan di praktekkan agar lebih menguasai materinya. Jangan lupa komentar dan shere artikel ini agar lebih bermanfaat, terima kasih.

Membuat Program Kasir Sederhana Menggunakan PHP OOP

    February 07, 2019   No comments




PHP OOP - Pada postingan kali ini kita akan membahas mengenai Membuat Program Kasir Sederhana Menggunakan PHP OOP.

Pada Postingan sebelum-sebelumnya kita telah membahas mengenai berbagai macam tentang OOP di PHP. Seperti mendifinisikan Class, membuat Function/Method, Mengakses Properties, Instantisasi Object atau Pemanggilan Class, menjalanakan Method, membuat Modularitas Class, membuat Konstruktor, dan lain-lain.



Baiklan langsung saja kita masuk kepembahasan. Disini kita akan membuat sebuah program kasir sederhana menggunakan pemrograman PHP berbasis OOP. Disini kita belum menggunakan database karena kita belum membahas materi sampai ke database menggunakan OOP.

Pertama buatlah terlebih dahulu sebuah file php dengan nama function.php dan index.php. Selanjutnya buka file function.php tadi, disana kita akan membuat coding untuk class dan method-methodnya.

Silahkan masukkan coding berikut ke dalam file function.php.

<?php

class Produk {
public $pc;
public $laptop;
public $jmlLaptop;
public $jmlPc;
public $hargaLaptop;
public $hargaPc;
public $totalSeluruh;
public $totalHargaPC;
public $totalHargaLaptop;
 function __construct() {
  $this->hargaPc = 5000000;
  $this->hargaLaptop = 7000000;
 }
}
// Copyright &copy; 2019. Erji Ridho Lubis(www.portalcoding.com)
class Jumlah extends Produk {
 public function getJumlah($jmlLaptop,$jmlPc){
  $this->jmlLaptop = $jmlLaptop;
  $this->jmlPC = $jmlPc;
 }

 public function setHarga() {
  $this->totalHargaPC = $this->hargaPc * $this->jmlPC;
  $this->totalHargaLaptop = $this->hargaLaptop * $this->jmlLaptop;
  $this->totalSeluruh = $this->totalHargaPC + $this->totalHargaLaptop;

 }

 public function Finaltotal() {
  echo "=================&& Struk Total Pembelian $$=================";
  echo "<br>";
  echo "Harga 1 PC = Rp. ".$this->hargaPc.",-";
  echo "<br>";
  echo "Jumlah PC yang di beli = ".$this->jmlPC." Set";
  echo "<br>";
  echo "Total Harga PC = Rp. ".$this->totalHargaPC.",-";
  echo "<br>";
  echo "<br>";
  echo "Harga 1 Laptop = Rp. ".$this->hargaLaptop.",-";
  echo "<br>";
  echo "Jumlah Laptop yang di beli = ".$this->jmlLaptop." Set";
  echo "<br>";
  echo "Total Harga Laptop = Rp. ".$this->totalHargaLaptop.",-";
  echo "<br><br>";
  echo "Total Keseluruhan = Rp. ".$this->totalSeluruh.",-";
  echo "<br>";
  echo "========================================================";
  echo "<br>";
  echo "<br>";
  echo "Copyright &copy; 2019. Erji Ridho Lubis";
 }
}

 ?>

Pada coding diatas kita membuat 2 buat Class. Selanjutnya  silahkan buka file index.php tadi. Di file ini kita gunakan untuk tampilan atau form untuk input nilai barangnya. Dan di file ini juga kita memangil Class Class yang kita gunakan tadi untuk menjalankan method nya.






<?php
include 'function.php';
$jumlah = new Jumlah();
?>
<!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>Kasir Indomaret</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
 <nav class="navbar-inverse" role="navigation" >
   <div class="container-fluid">
     <div class="navbar-header">
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
         <span class="sr-only"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
       <a class="navbar-brand" href="http://www.portalcoding.com"><i class="fa fa-shopping-cart"></i> IndomaretKu</a>
     </div>

     <!-- Collect the nav links, forms, and other content for toggling -->
     <div class="collapse navbar-collapse" id="navbar">
       <ul class="nav navbar-nav">
         <li class="active"><a href="index.php"><i class="fa fa-home"></i> Beranda</a></li>
         <li><a href="#" data-toggle="modal" data-target="#buy"><i class="fa fa-shopping-cart"></i> Buy</a></li>
       </ul>

       <ul class="nav navbar-nav navbar-right">
         <li><a href="#"></a></li>

       </ul>
     </div><!-- /.navbar-collapse -->
   </div><!-- /.container-fluid -->
 </nav>
 <div class="container" style="margin-top:50px;">
   <div class=" panel-success">
     <div class="panel-body bg-primary">
    <div class="container">
      <h1><i class="fa fa-shopping-cart"></i> Selamat datang di Indomaret</h1>
     <h2> Selamat berbelanja :)</h2>
    </div>
     </div>
   </div>

  <div class="panel panel-default">
    <div class="panel-body">
      <div class="container">
     <div class="col-md-10">
       <h4>Klik disini untuk pembelian.</h4>
     </div>
     <div class="col-md-3 ">
        <button type="button" class="btn btn-success" name="button" data-toggle="modal" data-target="#buy"><i class="fa fa-shopping-cart"></i> Beli</button>
     </div>

      </div>
    </div>
  </div>
    <!-- Copyright &copy; 2019. Erji Ridho Lubis(www.portalcoding.com) -->
  <div class="panel panel-default">
    <div class="panel-body">
      <div class="container">
     <?php
      if (isset($_POST['check'])) {
       $jmlLaptop = $_POST['laptop'];
       $jmlPc = $_POST['komputer'];
              if ($jmlLaptop == null) {
                $jumlah->getJumlah(0,$jmlPc);
              } elseif ($jmlPc == null) {
                $jumlah->getJumlah($jmlLaptop,0);
              } else {
                $jumlah->getJumlah($jmlLaptop,$jmlPc);
              }
       $jumlah->setHarga();
       $jumlah->Finaltotal();
      }
      ?>
      </div>
    </div>
  </div>

 </div>

 <br>
 <br>

 <!-- [Modal Form] -->
 <div class="modal fade" id="buy" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header bg-danger" style="border-radius: 5px 5px 0px 0px;">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
         <h4 class="modal-title" id="">Form pembelian</h4>
       </div>
       <div class="modal-body">
       <form class="form-group" action="" method="post">
        <div class="input-group">
          <span class="input-group-addon"><i class="fa fa-desktop"></i></span>
          <input type="number" class="form-control" name="komputer" id="komputer" placeholder="Masukkan Jumlah PC Yang Dibeli *" readOnly>
        </div>
       <br>
       <div class="input-group">
          <span class="input-group-addon"><i class="fa fa-laptop"></i></span>
          <input type="number" class="form-control" name="laptop" id="laptop" placeholder="Masukkan Jumlah Laptop Yang Dibeli *" readOnly>
        </div>


       </div>
       <div class="modal-footer">
     <button type="button" id="btnlaptop" onclick="OnlyLaptop()" class="btn btn-success" style="float:left;">Hanya Laptop</button>
         <button type="button" id="btnkomputer" onclick="OnlyKomputer()" class="btn btn-success" style="float:left;"> Hanya PC</button>
         <button type="button" onclick="Keduanya()" class="btn btn-success" style="float:left;"> Laptop & PC</button>
     <button type="button" onclick="exit()" class="btn btn-default" data-dismiss="modal"><i class="fa fa-close"></i> Close</button>
         <button type="submit" class="btn btn-primary" name="check"><i class="fa fa-check"></i> Cek Total</button>
     </form>
       </div>
     </div>
   </div>
 </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </body>
</html>
<script type="text/javascript">
function OnlyLaptop() {
 document.getElementById("laptop").readOnly = false;
 document.getElementById("komputer").readOnly = true;

 document.getElementById("btnkomputer").disabled = false;
 document.getElementById("btnlaptop").disabled = true;
}
function OnlyKomputer() {
 document.getElementById("laptop").readOnly = true;
 document.getElementById("komputer").readOnly = false;

 document.getElementById("btnkomputer").disabled = true;
 document.getElementById("btnlaptop").disabled = false;
}
function Keduanya() {
 document.getElementById("laptop").readOnly = false;
 document.getElementById("komputer").readOnly = false;

 document.getElementById("btnkomputer").disabled = false;
 document.getElementById("btnlaptop").disabled = false;
}
function exit() {
 document.getElementById("laptop").readOnly = true;
 document.getElementById("komputer").readOnly = true;
}
</script>

Setelah Semuanya kalian masukkan jangan lupa di save dan dijalankan.
Berikut ini adalah tampilan dari coding diatas.







Kalian bisa mendownload file dari coding diatas. Download disini.

Sekian dulu untuk pembahasan kali ini,jangan lupa dipelajari dan di praktekkan agar lebih menguasai materinya. Jangan lupa komentar dan shere artikel ini agar lebih bermanfaat, terima kasih.

Create Login Template Using HTML and CSS MATERIALIZE

    January 27, 2019   No comments




Hi Guys.
Welcome back to my blog.

In this post, we will discuss how to make the login template using HMTL and CSS materialize. You already know what CSS is happening?

Yup, the CSS framework is similar to Bootstrap. But it is more manifest in supporting Android. This doesn't only work for CSS. But it can also be used for skin design activities on Android applications.



Return to discussion. Here we will create a login page using html and CSS. What must be prepared is.

  1. Laptop / PC.
  2. Materialize Css (Please download on the official website).
  3. Good intentions.

After everything is prepared. Please make a file named index.html
Then enter the index.html file and the Css Materialize Source Code that was downloaded in one folder.

Then enter the script like below in the index.html file

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Belajar materialize</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!--Import materialize.css--> <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/> </head> <body bgcolor="#f1f2f6"> <body>   <main>     <center>       <h3 class="blue-text lighten-5">Masuk</h3> <h5 class="grey-text lighten-5">Lanjutkan ke <span class="blue-text">G</span><span class="red-text">m</span><span class="yellow-text">a</span><span class="green-text">i</span><span class="red-text">l</span></h5>       <div class="container">         <div class="z-depth-1 grey lighten-4 row" style="display: inline-block; padding: 32px 48px 0px 48px; border: 1px solid #EEE;">           <form class="col s12" method="post">             <div class='row'>               <div class='col s12'> <img src="img/iconUser.png" alt="logo" style="height:100px;width:100px;"> </div>             </div> <div class="row">         <div class="input-field col s12">           <i class="material-icons prefix">account_circle</i>           <input type="text" id="username" class="autocomplete">           <label for="username">enter your username</label>         </div>       </div> <div class="row">         <div class="input-field col s12">           <i class="material-icons prefix">lock</i>           <input type="password" id="password" class="validate">           <label for="password">Enter Your Password</label>         </div>       </div>             <center>               <div class='row'>                 <button type='submit' name='btn_login' class='col s10 offset-s1 waves-effect waves-light btn  blue '>Login</button>               </div>             </center>           </form>         </div>       </div>       <a href="#!">Buat Akun</a>     </center>   </main> <!--Import materialize.js--> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="js/materialize.min.js"></script> </body> </html>

After that, don't forget to save. Then create an img folder and prepare an image for the logo to display on the login page.

After all steps are taken. The following is the appearance of the coding above.



So for the tutorial this time, please practice and develop it. thank you.




FansPage

Recent Comments

Copyright © 2018 Portal Coding.