menu

Website sederhana untuk pemula menggunakan PHP - Membuat custom framework


Sebelum mulai menerapkan tutorial ini, saya asumsikan kamu sudah belajar posting saya sebelumnya dan sudah menerapkannya. karena struktur sistem pada posting tersebut akan kita edit sedikit dan akan kita jadikan base tamplate/framework website kita.

Oke langsung saja berikut tutorialnya,

Pertama kita edit dulu templatenya yang kemaren karena sudah tidak layak pakai, hehe..

Template yang baru ini akan saya samakan sedikit dengan framework Laravel on PHP dan Ruby on Rails. Untuk Ruby on Rails belum pernah saya berikan tutorialnya karena masih banyak story tentang PHP dan Laravel yang harus saya selesaikan terlebih dahulu, jadi tunggu saja tutorial Ruby on Railsnya,.,.,

File style.css pada path webcoboy/styles ubah menjadi seperti ini
body {
  text-align: center;
  margin: 0px 0px 0px 0px;
}
/*-------------------default-------------------*/
.button_def {
  cursor: pointer;
  padding: 5px;
}

.button_def:hover{
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
}

input[type=submit]{
  cursor: pointer;
  padding: 5px;
}

input[type=submit]:hover{
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
}

.button2 {
  height: 40px;
  width: 240px;
  border-style: solid;
  font-size: 17px;
  display: inline-block;
    vertical-align: middle;
  border-radius: 25px;
  cursor: pointer;
}

/*-------------------header---------------------*/
.main_image {
  width: 100%;
  height: 40px;
  background-image: url(../images/main_image.jpg);
  background-size: cover;
  text-align: center;
}

.header_content {
  line-height: 40px;
  width: 90%;
  display: inline-block;
  text-align: left;
}

li {
  list-style: none;
  cursor: pointer;
}

li a{
  padding: 11px;
  color: white;
  text-decoration: none;
}

li a:hover{
  padding: 11px;
  background-color: white;
  color: black;
}

/*------------------isi--------------------*/
.content{
  width: 100%;
  text-align: center;
}

.fill{
  padding: 10px 10px;
  border-radius: 5px;
  margin-top: 20px;
  margin-bottom: 20px;
  display: inline-block;
  width: 80%;
  border: 1px solid grey;
  text-align: left;
  height: 521px;
}

/*--------------------footer---------------------*/
.footer{
  width: 100%;
  text-align: center;
  background-color: #888888;
}
.content_footer{
  padding: 10px;
  width: 90%;
  display: inline-block;
  text-align: left;
  height: 30px;
}

Ubah nama folder content menjadi view dan buat folder baru bernama master,
kemudian pindahkan file header.php kedalam folder master.
Selanjutnya buat file footer.php pada folder master dan buat file crud.php pada folder view sehingga akan tamapak seperti ini.


Isi file footer.php dengan code berikut
<div class="footer">
 <div class="content_footer">
  Copyright: codedoct.com
 </div>
</div>

Ganti isi file header.php dengan code berikut
<div class="main_image">
 <div class="header_content">
  <li><a href="#">Home</a></li>
 </div>
</div>

Isi file crud.php dengan code berikut
<?php include_once "view/master/header.php" ?>
<div class="content">
  <div class="fill">
   
  </div>
</div>
<?php include_once "view/master/footer.php" ?>

Ubah isi file index.php menjadi seperti ini
<?php include_once "_header.php" ?>
<?php include_once "view/crud.php" ?>
<?php include_once "_footer.php" ?>

Selanjutnya tambahkan folder model pada project kita (webcoboy), sehingga struktur folder website akan tampak seperti ini.


Setelah semua selesai dilakukan sekarang coba buka browser dan buka project website kita, sehingga akan tampak seperti ini.


===DONE!===