FAcebook Like

header ads

Belajar CRUD dengan Metode OOP Part 2

Taofik Krisdiyanto 3/27/2018


Salam coding para siswacoding.........Kembali lagi bersama gurucoding di kelascoding.blogspot.co.id. Pada pertemuan kali ini gurucoding akan melanjutkan pembahasan materi artikel yang kemarin yaitu mengenai Belajar CRUD dengan metode OOP. Kalau kemarin gurucoding telah membahas mengenai index dan juga koneksi database dan lain lain untuk saat ini guru coding akan membahas lanjutan dari pembahasan kemarin juga.

Jadi yang harus di ingat oleh siswa coding adalah bahwa fungsi dari file koneksi.php adalah digunakan untuk menyambungkan dari program php dengan database yang berada di server apache xampp kemudian index.php digunakan sebagai file utama yang digunakan sebagai acuan pemanggilan file folder di htdoc, untuk penamaan sebenarnya menggunakan nama apaupun boleh , nama file adalah sesuai dengan apa yang kita inginkan, asalkan nanti jangan sampai lupa atau salah dalam pemanggilan file di file php tidak sampai salah.

Oke kemudian yang berikutnya di Belajar CRUD dengan metode OOP adalah gurucoding akan mengajarkan membuat file php untuk input. Oke lanjut saja..yang pertama siswacoding lakukan adalah membuat file php dengan memberi nama input.php
Di dalam file tersebut ketikkan script utama untuk membuat halaman webnya terlebih dahulu adalah berikut
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="Kelas Coding" />
<title>OOP Input Data</title>
    <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>
<div class="container">
<div class="col s12">
<nav>
    <div class="nav-wrapper green darken-1">
      <a href="index.php" class="brand-logo" style="margin-left: 10px;"> CRUD OOP</a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
      </ul>
    </div>
  </nav>
</div>
<br />
<div class="row">
<div class="col s6">

     </div>
</div>  
<footer class="page-footer green darken-1">
          <div class="footer-copyright">
            <div class="container">
           Kelas Coding | Copyright © 2017 
            <a class="grey-text text-lighten-4 right" href="http://kelas-coding.blogspot.co.id/">Tutorial lain >> </a>
            </div>
          </div>
        </footer>
        </div>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>

Kemudian di antara script
sisipkan script berikut ini.


<h5><b> <i class="material-icons">airplay</i></b> Input Data Siswa Kelas Coding</h5><br />
      <form action="proses.php?aksi=tambah" method="post">
        <div class="input-field">
          <i class="material-icons prefix">account_circle</i>
          <input id="icon_prefix" type="text" name="nama" id="nama" class="validate">
          <label for="icon_prefix">Nama</label>
        </div>
        <div class="input-field">
          <i class="material-icons prefix">room</i>
          <input id="icon_telephone" type="text" name="alamat" id="alamat"  class="validate">
          <label for="icon_telephone">Alamat</label>
        </div>
        <div class="input-field">
          <i class="material-icons prefix">stars</i>
          <input id="icon_telephone" type="text" name="usia" id="usia"  class="validate">
          <label for="icon_telephone">Umur</label>
        </div>
        <div class="input-field">
          <i class="material-icons prefix">message</i>
          <input id="icon_telephone" type="email" name="email" id="email"  class="validate">
          <label for="icon_telephone">Email</label>
        </div>
        <div class="  input-field">
        <i class="material-icons prefix">message</i>
          <input class="btn waves-effect waves-light" type="submit" value="Simpan">
        </div>
      
    </form>

Oke jadi itu adalah script yang untuk form yang akan kita buat yang perlu diperhatikan adalah dalam membuat script form siswacoding jangan sampai terlewat atau lupa akan name, id, maupun type karena hal tersebut sangat penting digunakan dalam pengambilan data.
Jadi jika di ambil utuh untuk script input.php adalah berikut ini
input.php
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="Kelas Coding" />
<title>OOP Input Data</title>
    <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>
<div class="container">
<div class="col s12">
<nav>
    <div class="nav-wrapper green darken-1">
      <a href="index.php" class="brand-logo" style="margin-left: 10px;"> CRUD OOP</a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
      </ul>
    </div>
  </nav>
</div>
<br />
<div class="row">
<div class="col s6">
<h5><b> <i class="material-icons">airplay</i></b> Input Data Siswa Kelas Coding</h5><br />
      <form action="proses.php?aksi=tambah" method="post">
        <div class="input-field">
          <i class="material-icons prefix">account_circle</i>
          <input id="icon_prefix" type="text" name="nama" id="nama" class="validate">
          <label for="icon_prefix">Nama</label>
        </div>
        <div class="input-field">
          <i class="material-icons prefix">room</i>
          <input id="icon_telephone" type="text" name="alamat" id="alamat"  class="validate">
          <label for="icon_telephone">Alamat</label>
        </div>
        <div class="input-field">
          <i class="material-icons prefix">stars</i>
          <input id="icon_telephone" type="text" name="usia" id="usia"  class="validate">
          <label for="icon_telephone">Umur</label>
        </div>
        <div class="input-field">
          <i class="material-icons prefix">message</i>
          <input id="icon_telephone" type="email" name="email" id="email"  class="validate">
          <label for="icon_telephone">Email</label>
        </div>
        <div class="  input-field">
        <i class="material-icons prefix">message</i>
          <input class="btn waves-effect waves-light" type="submit" value="Simpan">
        </div>
      
    </form>
    </div>
</div>  
<footer class="page-footer green darken-1">
          <div class="footer-copyright">
            <div class="container">
           Kelas Coding | Copyright © 2017 
            <a class="grey-text text-lighten-4 right" href="http://kelas-coding.blogspot.co.id/">Tutorial lain >> </a>
            </div>
          </div>
        </footer>
        </div>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>

Sampai disini form input data belum dapat digunakan, karena siswacoding belum membuat script proses , untuk script proses akan gurucoding di artikel berikutnya. Jadi sering sering buka blog ini supaya selalu tahu jika gurucoding telah upload artikel.
Mungkin cukup itu saja yang dapat gurucoding bagikan kepada siswacoding mengenai pembelajaran web programming kali ini...untuk selanjutnya silahkan menunggu update materi berikutnya.

Tags
Reactions

Posting Komentar

0 Komentar