TUTORIAL PHP OOP DAN MVC - DESAIN TEMPLATE APLIKASI BUKU KITA

Mengenal HTML, CSS, JavaScript, PHP, dan MySQL ?

• HTML yang merupakan singkatan dari Hypertext Markup Language merupakan kumpulan script yang bisa kita gunakan untuk membuat halaman web. Dari HTML ini, kita bisa menampilkan data baik berupa teks maupun gambar di situs web yang kita buat. 
• PHP atau singkatan dari Hypertext Preprocessor, adalah script yang biasanya disisipkan di file HTML atau bisa juga berdiri sendiri. PHP biasanya dipake untuk situs yang bersifat dinamis.
• CSS, singkatan dari Cascading Style Sheet, merupakan sekumpulan kode yang bisa kita pakai untuk menetapkan beberapa aturan yang bisa diterapkan di file HTML maupun PHP. Jadi dengan begitu, tampilan / interface yang kita buat bisa jadi lebih teratur dengan menggunakan CSS. Dengan CSS, kita bisa mengatur beberapa hal di situs web yang kita buat, antara lain mengatur warna, ukuran, serta ketebalan font, kemudian kita juga bisa mengubah border tabel yang kita buat di situs web, dan masih banyak lagi.
• JavaScript adalah bahasa script populer yang bisa digunakan untuk membuat beberapa komponen pendukung situs web yang kita buat. Misalnya kita bisa membuat berbagai macam efek baik pada gambar maupun pada teks
• MySQL merupakan database engine atau server database yang mendukung Bahasa database pencarian SQL. MySQL adalah sebuah perangkat lunak sistem manajemen basis data SQL atau DBMS yang multithread, multi-user. MySQL AB membuat MySQL tersedia sebagai perangkat lunak gratis dibawah lisensi GNU General Public License (GPL), tetapi mereka juga menjual dibawah lisensi komersial untuk kasus-kasus dimana penggunaannya tidak cocok dengan penggunaan GPL.

Gambaran Alur Html, Css, PHP, dan Js

Gambaran Alur PHP dan Mysql

Pengenalan OOP 

OOP (Object Oriented Programming) atau yang dalam bahasa Indonesia berarti Pemrograman Berbasis Objek (PBO) adalah konsep dimana Property / Variable dan juga Method/ Fungsi di bungkus dalam sebuah Class, yang kemudian akan di terapkan pada Objek–objek yang di deklarasikan.

Pengenalan MVC

MVC atau (Model View Controller) adalah sebuah konsep pemrograman atau desain pattern yang dirancang untuk mempermudah programmer dalam pembuatan sebuah proyek dengan memisahkan antara model, view dan controller agar susunan direktori atau folder lebih teratur dan terorganisasi guna mempermudah tahap pengembangan selanjutnya.

Alur Mvc

Praktek Buat Database

Dalam membuat sistem, kita pasti memerlukan sebuah database & tabel yang akan menampung data – data kita. Nah untuk membuatnya kita harus mempunyai rancangan database nya dulu. Misalnya kita akan membuat sebuah web yang menampung data BUKU. Ada 2 cara yang bisa dipraktekkan, yaitu menggunakan command prompt dan langsung menggunakan di phpmyadmin. phpMyAdmin adalah sebuah alat yang dapat menangani administrasi dari MySQL dengan melalui web atau langsung ada interfacenya. phpMyAdmin disebut juga pembantu diberbagai operasi pada MySQL. phpMyAdmin mendukung MySQL dalam berbagai operasi, seperti mengolah basis data, indeks, user, permissions dan lain sebagainya tanpa harus mengetikkan query MySQL.

BACA JUGA : PART 1 TUTORIAL WEBSITE

Buka Xampp, start Apache & MySQL sampai bertuliskan menjadi stop

 Buka browser kalian, tuliskan localhost/phpMyAdmin, kemudian buat Database :

• Buat database dengan nama oop_buku
• Buat tabel buku, kategori dan User

Rancangan tabel seperti pada gambar berikut :

Sehingga akan terjadi relasi sebagai berikut

Praktek Membuat Tampilan Web 

Gunakan template adminLTE, Kemudian ikuti langkah-langkah berikut :

• Menampilkan Extension file

Untuk yang extension file nya tidak terlihat, silahkan klik logo windows dikeyboard lalu ketikkan folder options, nah pilih tab View, pada bagian Hide Extensions for known file types hilangkan tanda centang, lalu Apply. Jadi tipe file misal index.html akan terlihat

• Menyesuaikan tampilan halaman utama

Jadi nantinya kita akan membuat beberapa tampilan, diantaranya :

1. Index utama
2. Index buku
3. Tambah buku
4. Edit buku
5. Index kategori
6. Tambah kategori
7. Edit kategori 
8. About me
9. Login
10. Register 

File template yang telah ada silahkan ikuti cara berikut :

• Extract Folder Zip ke htdocs
• Buat folder baru didalam htdocs dengan nama app_buku 
• Masuk ke dalam folder adminlte, lalu ke folder pages > examples, blank.html di copy dan paste di folder app_buku 
• Lalu kembali ke folder adminlte, copy folder dist & plugins , paste difolder app_buku

• Buka file blank.html menggunakan IDE atau editor, pada praktek ini digunakan Sublime Text
• Pada bagian head, Menyesuaikan link css & plugins dengan menghilangkan ../../ sesuaikan link href nya & title menjadi seperti :

<!DOCTYPE html>

<html>

<head>

 <meta charset="utf-8">

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

 <title>AdminLTE 3 | Blank Page</title>

 <!-- Tell the browser to be responsive to screen width -->

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

 <!-- Font Awesome -->

 <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">

 <!-- Ionicons -->

 <link rel="stylesheet"

href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

 <!-- overlayScrollbars -->

 <link rel="stylesheet" href="dist/css/adminlte.min.css">

 <!-- Google Font: Source Sans Pro -->

 <link

href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,

700" rel="stylesheet">

</head>

• Bagian navbar sebagian dihapus, dan buat seperti ini :

             <!-- Navbar -->

 <nav class="main-header navbar navbar-expand navbar-white navbar-light">

 <ul class="navbar-nav">

 <li class="nav-item">

 <a class="nav-link" data-widget="pushmenu" href="#"><i class="fas

fa-bars"></i></a>

 </li>

 </ul>

 <!-- Right navbar links -->

 <ul class="navbar-nav ml-auto">

 <li class="nav-item d-none d-sm-inline-block">

 <a href="#" class="nav-link">Logout</a>

 </li>

 </ul>

 </nav>

 <!-- /.navbar -->

•  pada bagian sidebar atau <aside> ubah menjadi: 

<!-- Main Sidebar Container -->

<aside class="main-sidebar sidebar-dark-primary elevation-4">

 <!-- Brand Logo -->

 <a href="#" class="brand-link">

 <span class="brand-text font-weight-light">Buku Kita</span>

 </a>

 <!-- Sidebar -->

 <div class="sidebar">

 <!-- Sidebar user (optional) -->

 <div class="user-panel mt-3 pb-3 mb-3 d-flex">

 <div class="info">

 <a href="#" class="d-block">@herziwp</a>

 </div>

 </div>

 <!-- Sidebar Menu -->

 <nav class="mt-2">

 <ul class="nav nav-pills nav-sidebar flex-column" datawidget="treeview" role="menu" data-accordion="false">

 <!-- Add icons to the links using the .nav-icon class with fontawesome or any other icon font library -->

 <li class="nav-item"><a href="index.php" class="nav-link">

 <i class="nav-icon fas fa-tachometer-alt"></i>

 <p>Dashboard</p>

 </a>

 </li>

 <li class="nav-item"><a href="index.php" class="nav-link">

 <i class="nav-icon fas fa-copy"></i>

 <p>Kategori</p>

 </a>

 </li>

 <li class="nav-item"><a href="index.php" class="nav-link">

 <i class="nav-icon fas fa-book"></i>

 <p>Buku</p>

 </a>

 </li>

 <li class="nav-item"><a href="index.php" class="nav-link">

 <i class="nav-icon fas fa-user"></i>

 <p>About Me</p>

 </a>

 </li>

</ul>

</nav>

<!-- /.sidebar-menu -->

</div>

<!-- /.sidebar -->

</aside>

• Bagian section content-header :

            <section class="content-header">

 <div class="container-fluid">

 <div class="row mb-2">

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

 <h1>Halaman Utama</h1>

 </div>

 </div>

 </div><!-- /.container-fluid -->

 </section>

•  Pada bagian <section class="content"> :

<section class="content">

 <!-- Default box -->

 <div class="card">

 <div class="card-header">

 <h3 class="card-title">Title</h3>

 </div>

 <div class="card-body">Start creating your amazing application!

 </div>

 <!-- /.card-body -->

 <div class="card-footer">Footer</div>

 <!-- /.card-footer-->

 </div>

 <!-- /.card -->

</section>

• Bagian <footer> : 

<footer class="main-footer">

 <b>Bukita 2021</b> PTI-OOP

</footer>

• Bagian javascript paling bawah sebelum tutup body : 

            <!-- jQuery -->

<script src="plugins/jquery/jquery.min.js"></script>

<!-- Bootstrap 4 -->

<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>

<!-- AdminLTE App -->

<script src="dist/js/adminlte.min.js"></script>

<!-- AdminLTE for demo purposes -->

<script src="dist/js/demo.js"></script>

• Full Code dari blank.html:

<!DOCTYPE html>

<html>

<head>

 <meta charset="utf-8">

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

 <title>AdminLTE 3 | Blank Page</title>

 <!-- Tell the browser to be responsive to screen width -->

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

 <!-- Font Awesome -->

 <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">

 <!-- Ionicons -->

 <link rel="stylesheet"

href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

 <!-- overlayScrollbars -->

 <link rel="stylesheet" href="dist/css/adminlte.min.css">

 <!-- Google Font: Source Sans Pro -->

 <link

href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,

700" rel="stylesheet">

</head>

<body class="hold-transition sidebar-mini">

<!-- Site wrapper -->

<div class="wrapper">

 <!-- Navbar -->

 <nav class="main-header navbar navbar-expand navbar-white navbar-light">

 <ul class="navbar-nav">

 <li class="nav-item">

 <a class="nav-link" data-widget="pushmenu" href="#"><i class="fas

fa-bars"></i></a>

 </li>

 </ul>

 <!-- Right navbar links -->

 <ul class="navbar-nav ml-auto">

 <li class="nav-item d-none d-sm-inline-block">

 <a href="#" class="nav-link">Logout</a>

 </li>

 </ul>

 </nav>

 <!-- /.navbar -->

<!-- Main Sidebar Container -->

<aside class="main-sidebar sidebar-dark-primary elevation-4">

 <!-- Brand Logo -->

 <a href="#" class="brand-link">

 <span class="brand-text font-weight-light">Buku Kita</span>

 </a>

 <!-- Sidebar -->

 <div class="sidebar">

 <!-- Sidebar user (optional) -->

 <div class="user-panel mt-3 pb-3 mb-3 d-flex">

 <div class="info">

 <a href="#" class="d-block">@herziwp</a>

 </div>

 </div>

 <!-- Sidebar Menu -->

 <nav class="mt-2">

 <ul class="nav nav-pills nav-sidebar flex-column" datawidget="treeview" role="menu" data-accordion="false">

 <!-- Add icons to the links using the .nav-icon class with fontawesome or any other icon font library -->

 <li class="nav-item"><a href="index.php" class="nav-link">

 <i class="nav-icon fas fa-tachometer-alt"></i>

 <p>Dashboard</p>

 </a>

 </li>

 <li class="nav-item"><a href="index.php" class="nav-link">

 <i class="nav-icon fas fa-copy"></i>

 <p>Kategori</p>

 </a>

 </li>

 <li class="nav-item"><a href="index.php" class="nav-link">

 <i class="nav-icon fas fa-book"></i>

 <p>Buku</p>

 </a>

 </li>

 <li class="nav-item"><a href="index.php" class="nav-link">

 <i class="nav-icon fas fa-user"></i>

 <p>About Me</p>

 </a>

 </li>

</ul>

</nav>

<!-- /.sidebar-menu -->

</div>

<!-- /.sidebar -->

</aside>

<!-- Content Wrapper. Contains page content -->

<div class="content-wrapper">

 <!-- Content Header (Page header) -->

 <section class="content-header">

 <div class="container-fluid">

 <div class="row mb-2">

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

 <h1>Halaman Utama</h1>

 </div>

 </div>

 </div><!-- /.container-fluid -->

 </section>

<!-- Main content -->

<section class="content">

 <!-- Default box -->

 <div class="card">

 <div class="card-header">

 <h3 class="card-title">Title</h3>

 </div>

 <div class="card-body">Start creating your amazing application!

 </div>

 <!-- /.card-body -->

 <div class="card-footer">Footer</div>

 <!-- /.card-footer-->

 </div>

 <!-- /.card -->

</section>

<!-- /.content -->

</div>

<!-- /.content-wrapper -->

<footer class="main-footer">

 <b>Bukita 2021</b> PTI-OOP

</footer>

<!-- Control Sidebar -->

<aside class="control-sidebar control-sidebar-dark">

 <!-- Control sidebar content goes here -->

</aside>

<!-- /.control-sidebar -->

</div>

<!-- ./wrapper -->

<!-- jQuery -->

<script src="plugins/jquery/jquery.min.js"></script>

<!-- Bootstrap 4 -->

<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>

<!-- AdminLTE App -->

<script src="dist/js/adminlte.min.js"></script>

<!-- AdminLTE for demo purposes -->

<script src="dist/js/demo.js"></script>

</body>

</html>

• Buka Browser dan jalankan file blank.html, pastikan xampp sudah nyala. Ketikkan: http://localhost/app_buku/blank.html, Tampilan Halaman index : 

Sampai disini, telah berhasil dibuatkan tampilan template untuk aplikasi menggunakan HTML, CSS dan JavaScript.