Tutorial programming: PHP-Chapter1

Showing posts with label PHP-Chapter1. Show all posts

Website sederhana untuk pemula menggunakan PHP - CRUD (read)

Artikel kali ini akan membahas tentang membuat sebuah sistem read database pada php non framework.

Pada posting sebelumnya sudah saya posting sebuah artikel tentang sistem CRUD dengan menggunakan framework laravel, lihat disini.

Oke, sebelum masuk ketutorialnya saya asumsikan kamu sudah mengikuti posting sebelumnya karena pada artikel ini dan selanjutnya saya akan menggunakan custom framework.

Jika belum silahkan kamu terapkan dulu artikel tersebut.

Langsung saja kita mulai tutorialnya,

Pertama-tama edit file crud.php pada path webcoboy/view/crud.php menjadi seperti ini.

<?php include_once "view/master/header.php" ?>
<div class="content">
  <div class="fill">
   <?php include_once "model/read.php" ?>
  </div>
</div>
<?php include_once "view/master/footer.php" ?>

Selanjutnya buat file read.php pada path webcoboy/model/read.php

Isi read.php dengan code berikut.

<table border="1px";>
 <tr>
  <th>No</th>
  <th>Name</th>
  <th>Email</th>
  <th>Address</th>
  <th>Created At</th>
  <th>Updated At</th>
 </tr>
<?php
 $sql="SELECT * FROM crud";
 $hsl=mysql_query($sql,$db);
 $no=0;
 while(list($name,$email,$address,$created_at,$updated_at,$id)=mysql_fetch_array($hsl)){
  $no++;
  ?>
    <tr>
     <td><?=$no?></td>
     <td><?=$name?></td>
     <td><?=$email?></td>
     <td><?=$address?></td>
     <td><?=$created_at?></td>
     <td><?=$updated_at?></td>
    </tr>
     <?php
 }
?>
</table>
<br>
<button class="button_def" >Create</button>

Sehingga hasilya akan menjadi seperti ini.

===DONE!===

Agar sebuah website dapat terhubung dengan database maka kita harus membuat koneksinya terlebih dahulu.

Koneksi database yang akan saya jelaskan pada posting kali ini adalah membuat koneksi database php tanpa menggunakan framework.

Ingin tahu koneksi database php dengan menggunakan framework Laravel? bisa lihat disini.

Koneksi database ini sangatlah penting sebelum kita akan memulai membuat sebuah sistem pada php yang menggunakan database.

Sebelum memulai tutorial ini kamu harus mengikuti tutorial sebelumnya, karena struktur project website yang saya gunakan pada tutorial kali ini menggunakn custom framework dapat dilihat disini.

Oke langsung saja, berikut tutorialnya..

Pertama-tama buat file baru bernama koneksi.php pada folder webcoboy sehingga akan tampak seperti ini.

Jika kamu mau menggunakan user dan password yang sudah ada pada phpmyadmin silahkan tinggal sesuaikan saja parameter dari isi file koneksi.php nya nanti.

Buat database baru dengan cara:
Klik New

Isi nama databasenya

Kemudian klik Create

Untuk melihat user yang sudah ada, klik Users

Jika ingin membuat user baru silahkan klik databasenya kemudian pada menubar klik privileges/hak akses, selanjutnya ikuti panduan berikut, lihat nomor 8.

Isikan code berikut pada koneksi.php.

<?php
  $host="localhost";
  $user="webcoboy";
  $pass="webcoboy";
  $dbname="webcoboy";

  $db=mysql_connect($host,$user,$pass);
  mysql_select_db($dbname,$db);
?>

$user merupakan nama user
$pass merupakan password user
$dbname merupakan nama databasenya

Kemudian ubah sedikit code pada file _header.php menjadi seperti ini.

<?php include_once "koneksi.php" ?>
<!DOCTYPE html>
<html>
  <head>
    <title>Webcoboy</title>
    <link rel="stylesheet" href="styles/style.css">
  </head>
  <body>

Untuk mengetes apakah database sudah terkoneksi atau belum silahkan lanjutkan pada tutorial berikutnya Read(CRUD).

===DONE!===

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!===

Cara melihat variabel yang di submit terbawa atau tidak

buat file php sederhana

<form method="POST">
 <table>
   <tr>
     <td>Nama</td>
     <td>:</td>
     <td><input type="text" name="name" id="name"></td> 
   </tr> 
   <tr>
     <td>Alamat</td>
     <td>:</td>
     <td><textarea name="alamat" id="alamat"></textarea> </td> 
   </tr> 
      <tr>
     <td><input type="submit" name="save" id="save" value="save"> </td> 
   </tr>
 </table>
</form>

akan terlihat seperti ini,,

kemudian tambahkan code

<?php
 echo "<pre>";
 print_r($_POST);
 echo "</pre>";
?>

menjadi seperti ini

<form method="POST">
 <table>
   <tr>
     <td>Nama</td>
     <td>:</td>
     <td><input type="text" name="name" id="name"></td> 
   </tr> 
   <tr>
     <td>Alamat</td>
     <td>:</td>
     <td><textarea name="alamat" id="alamat"></textarea> </td> 
   </tr> 
      <tr>
     <td><input type="submit" name="save" id="save" value="save"> </td> 
   </tr>
 </table>
</form>

<?php
 echo "<pre>";
 print_r($_POST);
 echo "</pre>";
?>

tampilan setelah debug

setelah di save akan muncul array inputan form
dengan ini kita dapat memastikan code form sudah benar atau belum..

===DONE===

1. Letakan file web pada /var/www/html/
2. Edit file hosts
- vim /etc/hosts
- (root) sudo vim /etc/hosts

3. Sehingga tampilannya akan menjadi seperti ini

===DONE!===

Pada artikel kali ini kita akan membuat sebuah header website dengan css dan php sebelumnya kita telah membuat project awal sebuah website. Sebelum melanjutkan ke artikel yang ini sangat dianjurkan membaca artikel sebelumnya tentang Website sederhana untuk pemula menggunakan PHP - membuat project sederhana..

Belajarlah untuk tidak hanya copy-paste karena dengan mengetik langsung sebuah code secara tidak langsung kita telah menulis code tersebut pada alam bawah sadar kita sehingga kita akan lebih mudah mengingatnya. Itulah sebabnya semua code saya tampilkan dalam bentuk gambar, bukan dalam bentuk tulisan yang bisa di copy-paste. hehe,,

Oke saya asumsikan project webcoboy sudah dibuat, berikut langkah selanjutnya:
1. Buat file _header.php pada folder webcoboy yang berisi

<!DOCTYPE html>
<html>
  <head>
    <title>Webcoboy</title>
    <link rel="stylesheet" href="styles/style.css">
  </head>
  <body>

2. Buat file _footer.php pada folder webcoboy yang berisi

</body>
</html>

2. Buat folder styles dan buat file style.css pada folder tersebut yang berisi

body {
  margin: 0px 0px 0px 0px;
}

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

.center_area {
  width: 1024px;
  margin: 0 auto;
  text-align: center;
}

.header_content {
  width: 1024px;
  color: white;
}

.header_content #title1 {
  font-weight: normal;
  font-size: 22px;
}

.header_content #title2 {
  font-weight: bolder;
  font-size: 34px;
}

.header_content #date {
  color: #EDD5D7;
  font-size: 13px;
}

.button_green {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
  width: 324px;
  height: 70px;
  background-color: #6BAD20;
  font-weight: bolder;
  font-size: 17px;
  display: inline-block;
    vertical-align: middle;
  border-radius: 5px;
  cursor: pointer;
}

.button_green:hover{
 background-color:rgba(90, 148, 27, 255);
}

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

3. Buat folder content dan buat file header.php pada folder tersebut yang berisi

<div class="main_image">
  <div style="height:186px"></div>
    <div class="center_area">
      <div class="header_content">
        <div id="title1">Title 1</div>
        <div id="title2">Title 2</div>
        <div id="title2">Title 2</div>
        <div style="height:21px"></div>
        <div id="date">APRIL-MEI 2016</div>
        <div style="height:31px"></div>
        <div class="button_green">
          <div style="height:25px"></div>
          DAFTAR SEKARANG
        </div>
        <div style="height:74px"></div>
        <div id="button2">
          <div style="height:10px"></div>
          LIHAT DETAIL ACARA
        </div>
      </div>
    </div>
</div>

4. Buat folder images dan isikan sebuah gambar pada folder tersebut sebagai
gambar background header dengan nama gambar main_image
5. Terakhir koneksikan seluruh file tersebut pada file index.php dengan
mengetikan

<?php include_once "_header.php" ?>
<?php include_once "content/header.php" ?>
<?php include_once "_footer.php" ?>

6. Sehingga akan terbentuk susunan file sebagai berikut

Semua file .php saya letakkan pada folder yang berbeda-beda dan saya pisah-pisah agar code tidak terlalu panjang pada satu halaman saja, inilah yang disebut dengan refactor. sehingga code tampak lebih rapi..

Setelah semua sudah dibuat selanjutnya mengecek pada browser dengan mengetikkan localhost/webcoboy dan taraaaaaa..

---Selamat Mencoba---

Banyak sekali cara untuk membuat sebuah website dari yang ribet dengan aturan yang diberikan oleh beberapa framework sampai yang sangat simple tapi tidak beraturan atau bisa disebut dengan coding ala "coboy"

cara-cara membuat website yang biasa digunakan:
1. Menggunakan cms seperti Joomla, wordpress dll
2. Menggunakan framwork seperti Laravel
3. Coding ala "Coboy"

bahasa pemrogramman website sendiri bermacam-macam dengan kelebihan dan kekurangan masing-masing yang paling penting adalah "jangan terlalu fanatik dengan bahasa pemrogramman tertentu". Contoh bahasa pemrogramman untuk membuat sebuah website:

1. PHP dengan framework seperti Laravel
2. Ruby dengan Framework seperti Rails

Dalam artikel ini saya akan berbagi ilmu cara membuat sebuah project website menggunakan bahasa pemrogramman PHP tanpa Framework atau Coding ala "Coboy" mengapa tidak menggunakan framework? akan dijelaskan pada artikel selanjutnya.. hehe

Pada artikel sebelumnya sudah dijelaskan cara instalasi PHP pada localhost ubuntu untuk windows lain waktu akan saya share caranya hehe..
berikut linknya: klik

Oke sudah saya asumsikan LAMP sudah terinstall pada ubuntu atau XAMPP sudah terinstall pada windows.

Yang pertama dilakukan adalah mengecek localhost:
1. Pada linux

buat folder dengan nama misal webcoboy pada path /var/www/html/
masuk ke path /var/www/html/ dan buat folder webcoboy atau langsung melalui terminal ubuntu dengan cara mkdir /var/www/html/webcoboy
jika tidak ada folder /var/www/html maka LAMP belum terinstall dengan baik, lakukan instalasi ulang
selanjutnya buat file pada folder webcoboy dengan nama index.php menggunakan vim, gvim, atom, sublime, dll terserah kalian isi file index.php dengan tulisan test(atau terserah kalian)
terakhir test apakah file index.php bisa muncul? dengan cara buka browser (firefox, chromium, chrome , dll) kemudian buka link localhost/webcoboy atau menggunakan ip localhost >> http://127.0.0.1/webcoboy/. maka akan muncul gambar diatas

2. Pada Windows

buat folder dengan nama misal webcoboy pada path xampp/htdocs
jika tidak ada folder xampp/htdocs maka XAMPP belum terinstall dengan baik, lakukan instalasi ulang
selanjutnya buat file pada folder webcoboy dengan nama index.php menggunakan note++, sublime, dll terserah kalian isi file index.php dengan tulisan test(atau terserah kalian)
terakhir test apakah file index.php bisa muncul? dengan cara buka browser (firefox, IE, chrome , dll) kemudian buka link localhost/webcoboy atau menggunakan ip localhost >> http://127.0.0.1/webcoboy/. maka akan muncul gambar diatas

---Selamat Mencoba---

menu

Website sederhana untuk pemula menggunakan PHP - CRUD (read)

Website sederhana untuk pemula menggunakan PHP - Membuat koneksi database

Website sederhana untuk pemula menggunakan PHP - Membuat custom framework

Website sederhana untuk pemula menggunakan PHP - debug POST (submit)

Website sederhana untuk pemula menggunakan PHP - mengganti domain localhost ubuntu

Website sederhana untuk pemula menggunakan PHP - belajar css sederhana (header)

Website sederhana untuk pemula menggunakan PHP - membuat project sederhana

About

Tags

Help