Author: Ahmad Baihaqi

Membuat CRUD Dengan Framework Codeigniter

Ahmad Baihaqi

Pada kesempatan kali ini, kita akan mencoba membuat CRUD(Create, Read, Update, Delete) menggunakan framework codeigniter. Langsung saja kita mulai dengan langkah pertama ini, dengan membuat database dengan nama tutorial_rumah_coding dan sebuah table dengan nama siswa seperti yang terlihat dibawah ini:

Selanjutnya lakukan pengaturan pada file autoload.php yang terdapat didalam folder application/config/ seperti berikut ini :

Setelah helper dan libraries yang kita butuhkan sudah diload, selanjutnya hubungkan database dengan project kita seperti berikut ini :

Tidak lupa juga untuk mengatur base_url yang terdapat didalam file config.php pada folder application/config/ :

Kemudian buat sebuah controllers dengan nama CrudSiswa.php dengan perintah sebagai berikut ini :

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class CrudSiswa extends CI_Controller {

    public function __construct(){

        parent ::__construct();

        //load model
        $this->load->model('CrudSiswaModel');

    }

    public function index()
    {
        $data = array(

            'title'     => 'Data Siswa',
            'data_siswa' => $this->CrudSiswaModel->get_all(),

        );

        $this->load->view('datasiswa', $data);
    }

    public function tambah()
    {
        $data = array(

            'title'     => 'Tambah Data Siswa'

        );

        $this->load->view('tambahsiswa', $data);
    }

    public function simpan()
    {
        $data = array(

            'id_siswa'       => $this->input->post("id_siswa"),
            'nama'         => $this->input->post("nama"),
            'email'    => $this->input->post("email"),
            'password'         => $this->input->post("password"),
            'telepon'         => $this->input->post("telepon"),
            'pelajaran'         => $this->input->post("pelajaran")


        );

        $this->CrudSiswaModel->simpan($data);

        $this->session->set_flashdata('notif', '<div class="alert alert-success alert-dismissible"> Success! data siswa berhasil disimpan didatabase.
                                                </div>');

        //redirect
        redirect('CrudSiswa/');

    }

    public function edit($id_siswa)
    {
        $id_siswa = $this->uri->segment(3);

        $data = array(

            'title'     => 'Edit Data Siswa',
            'data_siswa' => $this->CrudSiswaModel->edit($id_siswa)

        );

        $this->load->view('editsiswa', $data);
    }

    public function update()
    {
        $id['id_siswa'] = $this->input->post("id_siswa");
        $data = array(

            'id_siswa'           => $this->input->post("id_siswa"),
            'nama'         => $this->input->post("nama"),
            'email'    => $this->input->post("email"),
            'password'         => $this->input->post("password"),
            'telepon'         => $this->input->post("password"),
            'pelajaran'         => $this->input->post("pelajaran"),


        );

        $this->CrudSiswaModel->update($data, $id);

        $this->session->set_flashdata('notif', '<div class="alert alert-success alert-dismissible"> Success! data berhasil diupdate didatabase.
                                                </div>');

        //redirect
        redirect('CrudSiswa');

    }

    public function hapus($id_siswa)
    {
        $this->CrudSiswaModel->hapus($id_siswa);
        //redirect
        redirect('CrudSiswa');

    }

}

Selanjutnya buat sebuah Model dengan nama CrudSiswaModel.php dengan perintah seperti berikut ini :

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class CrudSiswaModel extends CI_model{

    public function get_all()
    {
        $query = $this->db->select("*")
                 ->from('siswa')
                 ->order_by('id_siswa', 'DESC')
                 ->get();
        return $query->result();
    }

    public function simpan($data)
    {

        $query = $this->db->insert("siswa", $data);

        if($query){
            return true;
        }else{
            return false;
        }

    }

    public function edit($id_siswa)
    {

        $query = $this->db->where("id_siswa", $id_siswa)
                ->get("siswa");

        if($query){
            return $query->row();
        }else{
            return false;
        }

    }

    public function update($data, $id_siswa)
    {

        $query = $this->db->update("siswa", $data, $id_siswa);

        if($query){
            return true;
        }else{
            return false;
        }

    }

    public function hapus($id_siswa)
    {

      $this->db->where('id_siswa', $id_siswa);
      $this->db->delete('siswa');

      

    }

}

Langkah Terakhir Adalah membuat halaman/view untuk menampikan data siswa, halaman tambah data siswa dan halaman edit data siswa. Pertama kita membuat halaman data siswa dengan nama file datasiswa.php :

<!DOCTYPE html>
<html>
<head>
    <title><?php echo $title ?></title>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css">
</head>
<body>

    <div class="container" style="margin-top: 80px">
        <?php echo $this->session->flashdata('notif') ?>
        <a href="<?php echo base_url() ?>index.php/CrudSiswa/tambah/" class="btn btn-md btn-success">Tambah Buku</a>
        <hr>
        <!-- table -->
        <div class="table-responsive">
            <table id="table" class="table table-striped table-bordered table-hover">
                <thead>
                  <tr>
                    <th>No.</th>
                    <th>Id Siswa</th>
                    <th>Nama</th>
                    <th>Email</th>
                    <th>Password</th>
                    <th>Telepon</th>
                    <th>Pelajaran</th>
                    <th>Aksi</th>
                  </tr>
                </thead>
                <tbody>

                <?php
                    $no = 1;
                    foreach($data_siswa as $hasil){
                ?>

                  <tr>
                    <td><?php echo $no++ ?></td>
                    <td><?php echo $hasil->id_siswa ?></td>
                    <td><?php echo $hasil->nama ?></td>
                    <td><?php echo $hasil->email ?></td>
                    <td><?php echo $hasil->password ?></td>
                    <td><?php echo $hasil->telepon ?></td>
                    <td><?php echo $hasil->pelajaran ?></td>
                    <td>
                        <a href="<?php echo base_url() ?>index.php/CrudSiswa/edit/<?php echo $hasil->id_siswa ?>" class="btn btn-sm btn-success">Edit</a>
                        <a href="<?php echo base_url() ?>index.php/CrudSiswa/hapus/<?php echo $hasil->id_siswa ?>" class="btn btn-sm btn-danger">Hapus</a>
                    </td>
                  </tr>

                <?php } ?>

                </tbody>
              </table>
        </div>

    </div>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>


</body>
</html>

Hasilnya akan terlihat seperti ini :

Buat lagi halaman tambah data dengan nama file tambahsiswa.php :

<!DOCTYPE html>
<html>
<head>
    <title><?php echo $title ?></title>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css">
</head>
<body>

    <div class="container" style="margin-top: 80px">
        <div class="col-md-12">
            <?php echo form_open('CrudSiswa/simpan') ?>

              <div class="form-group">
                <label for="text">No. Siswa</label>
                <input type="text" name="no_siswa" class="form-control" placeholder="Masukkan No. Siswa">
              </div>

              <div class="form-group">
                <label for="text">Nama</label>
                <input type="text" name="nama" class="form-control" placeholder="Masukkan Nama">
              </div>

              <div class="form-group">
                <label for="text">Email</label>
                <input type="email" name="email" class="form-control" >
              </div>

              <div class="form-group">
                <label for="text">Password</label>
                <input type="password" name="password" class="form-control" >
              </div>

              <div class="form-group">
                <label for="text">Telepon</label>
                <input type="number" name="telepon" class="form-control" >
              </div>

              <div class="form-group">
                <label for="text">Pelajaran</label>
                <input type="text" name="pelajaran" class="form-control" >
              </div>

              <button type="submit" class="btn btn-md btn-success">Simpan</button>
              <button type="reset" class="btn btn-md btn-warning">reset</button>
            <?php echo form_close() ?>
        </div>
    </div>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
</body>
</html>

Hasilnya akan terlihat seperti ini :

Kemudian langkah terakhir, kita membuat halaman edit dengan nama file editsiswa.php :

<!DOCTYPE html>
<html>
<head>
    <title><?php echo $title ?></title>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css">
</head>
<body>

    <div class="container" style="margin-top: 80px">
        <div class="col-md-12">
            <?php echo form_open('CrudSiswa/update') ?>

              <div class="form-group">
                <label for="text">Nama </label>
                <input type="text" name="nama" value="<?php echo $data_siswa->nama ?>" class="form-control" placeholder="Nama Siswa">
                <input type="hidden" value="<?php echo $data_siswa->id_siswa ?>" name="id_siswa">
              </div>

              <div class="form-group">
                <label for="text">Email</label>
                <input type="text" name="nama_buku" value="<?php echo $data_siswa->email ?>" class="form-control" placeholder="Masukkan Email">
              </div>

              <div class="form-group">
                <label for="text">Password</label>
                <input type="password" name="password" value="<?php echo $data_siswa->password ?>" class="form-control" placeholder="Masukkan Password">
              </div>

              <div class="form-group">
                <label for="text">Telepon</label>
                <input type="number" name="telepon" value="<?php echo $data_siswa->telepon ?>" class="form-control" placeholder="Masukkan Telepon">
              </div>

              <div class="form-group">
                <label for="text">Pelajaran</label>
                <input type="text" name="pelajaran" value="<?php echo $data_siswa->pelajaran ?>" class="form-control" placeholder="Masukkan Pelajaran">
              </div>





              <button type="submit" class="btn btn-md btn-success">Update</button>
              <button type="reset" class="btn btn-md btn-warning">reset</button>
            <?php echo form_close() ?>
        </div>
    </div>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
</body>
</html>

Hasilnya akan terlihat seperti berikut ini :

Membuat Restful dengan Codeigniter

Ahmad Baihaqi

Pada kesempatan kali ini, kita coba membuat restful dengan framework Codeigniter. Untuk persiapan yang kita butuhkan dalam tutorial kali ini adalah sebagai berikut :

  1. Install aplikasi Xampp, yang dapat didownload pada halaman ini
  2. Framework Codeigniter
  3. Database tutorial_rumah_coding dengan table siswa yang sebelumnya telah kita gunakan pada tutorial ini
  4. Instal aplikasi postman, yang dapat didownload pada halaman ini
  5. Instal Composer, yang dapat didownload pada halaman ini

Setelah tools yang kita butuhkan berhasil dijalankan, langkah pertama adalah kita perlu menginstall library untuk Codeigniter agar dapat membuat restful api. kita dapat menemukan library ini pada github atau packagist dengan kata kunci “codeigniter rest”. Adapun cara installnya adalah sebagai berikut :

Jika instalasi sukses, maka akan muncul didalam project Codeigniter kita folder bernama ‘codeigniter-restserver’ dimana didalam folder tersebut ada beberapa file yang perlu kita copy kedalam folder tutorialrumahcoding/application/. Adapun file tersebut adalah sebagai berikut :

  1. copy file idap.php dan rest.php yang terdapat pada tutorialrumahcoding/codeigniter-restserver/application/config kedalam folder tutorialrumahcoding/application/ config
  2. copy file db_helper.php yang terdapat pada tutorialrumahcoding/codeigniter-restserver/application/helpers kedalam folder tutorialrumahcoding/application/ helpers
  3. copy file Format.php dan REST_Controller.php yang terdapat pada tutorialrumahcoding/codeigniter-restserver/application/libraries kedalam folder tutorialrumahcoding/application/ libraries

Selanjutnya Kita Coba Membuat Model dengan nama file SiswaModel.php didalam folder tutorialrumahcoding/application/ Models. Berikut baris Perintahnya : 

<?php
class SiswaModel extends CI_Model{
// response jika field ada yang kosong
  public function empty_response(){
    $response['status']=502;
    $response['error']=true;
    $response['message']='Field tidak boleh kosong';
    return $response;
  }
// function untuk insert data ke tabel siswa
  public function add_person($nama,$email,$password,$telepon,$pelajaran){
if(empty($nama) || empty($email) || empty($password) || empty($telepon) || empty($pelajaran)){
      return $this->empty_response();
    }else{
      $data = array(
        "nama"=>$nama,
        "email"=>$email,
        "password"=>$password,
        "telepon"=>$telepon,
        "pelajaran"=>$pelajaran

      );
$insert = $this->db->insert("siswa", $data);
if($insert){
        $response['status']=200;
        $response['error']=false;
        $response['message']='Data siswaditambahkan.';
        return $response;
      }else{
        $response['status']=502;
        $response['error']=true;
        $response['message']='Data siswagagal ditambahkan.';
        return $response;
      }
    }
}
// mengambil semua data siswa
  public function all_person(){
$all = $this->db->get("siswa")->result();
    $response['status']=200;
    $response['error']=false;
    $response['data']=$all;
    return $response;
}
}
?>

Kemudian buat sebuah Controllers dengan nama Siswa.php didalam folder
tutorialrumahcoding/application/ controllers. Berikut baris perintahnya :

<?php
require APPPATH . 'libraries/REST_Controller.php';
class Siswa extends REST_Controller{
// construct
  public function __construct(){
    parent::__construct();
    $this->load->model('SiswaModel');
  }
// method index untuk menampilkan semua Data Siswa menggunakan method get
  public function index_get(){
    $response = $this->SiswaModel->all_person();
    $this->response($response);
  }
// untuk menambah Data Siswa menaggunakan method post
  public function add_post(){
    $response = $this->SiswaModel->add_person(
        $this->post('nama'),
        $this->post('email'),
        $this->post('password'),
        $this->post('telepon'),
        $this->post('pelajaran')
      );
    $this->response($response);
  }

}
?>

Setelah Controllers dan Modelnya kita buat, saatnya kita coba memasukkan data kedalam database dengan method post dan mengambil data dengan method get menggunakan aplikasi postman. Pertama kita coba untuk memasukkan data kedalam database dengan cara berikut :

Saat memasukkan data dengan method POST, maka hasilnya akan terlihat seperti ini :

Kemudian coba mengambil data menggunakan method GET seperti ini :

Maka hasilnya akan terlihat seperti ini :

Membuat Login Form Dengan Codeigniter

Ahmad Baihaqi

Pada tutorial kali ini, kita akan coba membuat login form dengan codeigniter. Berikut ini adalah bahan yang perlu kita persiapkan :

  1. Download framework codeigniter disini
  2. Pastikan anda telah berhasil menjalankan server local seperti Xampp dan database MySQL
  3. Kemudian ekstrak hasil downloadan framework diatas dan beri nama folder tutorialrumahcoding, kemudian letakkan didalam folder xampp/htdocs/
  4. Buat sebuah database dengan nama tutorial_rumah_coding dan buat tabel sebagai berikut :

Setelah persiapan selesai, saatnya kita mulai bermain dengan codeigniter. Langkah pertama, buat sebuah controller dengan nama User.php pada folder application/controllers/. Berikut adalah isi perintah dari controller User.php :

<?php
class User extends CI_Controller{
  public function __construct(){
  parent::__construct();
  $this->load->database();
  $this->load->helper('url');
 }

 public function login(){

   if($this->input->post('login')){
     $email = $this->input->post('email');
     $password = $this->input->post('pass');

     $que=$this->db->query("select * from siswa where email='".$email."' and password='$password'");
     $row = $que->num_rows();
     if($row){
       redirect('User/dashboard');
     }
     else{
       $data['error']="<h3 style='color:red'>Invalid login details</h3>";
     }
   }
   $this->load->view('login',$data);
  }

 function dashboard(){
   $this->load->view('dashboard');
 }
}
?>

Perhatikan pada fungsi __construct diatas, kita melakukan load terhadap library database dan helper url. Pada script diatas terdapat dua view yang akan kita panggil, yaitu view form login dan view dashboard jika berhasil login. Tapi sebelum membuat kedua view diatas, kita perlu menghubungkan project kita dengan database dan melakukan pengaturan base_url() yang terletak dalam file config/config.php sebagai berikut :

Selanjutnya lakukan pengaturan pada file config/database.php agar project codeigniter terhubung dengan database yang telah kita buat sebelumnya. Adapun pengaturannya adalah sebagai berikut :

Untuk nilai password, defaultnya adalah ‘ ‘. Berhubung database saya telah ditambahkan password maka harap sesuaikan password yang diinginkan. Selanjutnya buat tampilan view login.php pada folder application/views/ dengan perintah berikut ini: 

<!DOCTYPE html>
<html>
<head>
<title>Login form</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<style >
  .jumbotron{
    border-bottom-left-radius: 600px;
    border-bottom-right-radius: 600px;
    background-color: pink;

  }

</style>
</head>

<body style="background-color:black">
<div class="container jumbotron"  >
  <div class="row" style="margin-top: 80px">
    <div class="col-md-3">

    </div>
      <div class="col-md-6 ">
        <form method="post">
         <div class="form-group">
           <label for="exampleInputEmail1">Email address</label>
           <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"  name="email">
         </div>
         <div class="form-group">
           <label for="exampleInputPassword1">Password</label>
           <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"  name="pass">
         </div>
         <div class="row">
           <div class="col-md-5">

           </div>
           <div class="col-md-2">
             <input type="submit" class="btn btn-primary"  name="login"  value="Login" ></input>
           </div>
           <div class="col-md-5">

           </div>
         </div>
       </form>
      </div>
      <div class="col-md-3">

      </div>
  </div>

</div>


</body>
</html>

Langkah terakhir adalah membuat view dashboard.php didalam folder application/views/ dengan perintah sebagai berikut:

<!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></title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-12">
            <h1 class="jumbotron text-center">Selamat Datang Admin</h1>
        </div>
      </div>
    </div>

  </body>
</html>

Apabila aplikasi kita jalankan melalui url http://localhost/tutorialrumahcoding/index.php/user/login. pengguna memasukkan password dan email yang sebelumnya telah tersimpan didatabase kita. Apabila inputan pengguna ditemukan dengan data yang ada didatabase kita, maka pengguna akan diarahkan ke view atau halaman dashboard, jika tidak/gagal login maka aplikasi akan menampilkan message error “invalid login details”, karena itu pastikan sebelumnya kita telah memasukkan data kedalam database yang telah dibuat seperti contoh dibawah ini :

Menampilkan Grafik Dengan Bootstrap Dan ChartJS

Ahmad Baihaqi

Pada kesempatan kali ini, kita akan membuat sebuah grafik sederhana menggunakan bootstrap dan ChartJS. Langkah pertama yang akan kita lakukan adalah membuat struktur dasar dari file html dengan menambahkan CDN (Content Delivery Network) dari library css bootstrap dan library chartjs seperti contoh dibawah ini :

<!DOCTYPE html>
<html lang="en">
  <head>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>


  </head>
  <body>

  </body>
<footer>

  </footer>
</html>

Kemudian, tambahkan script berikut ini kedalam tag <boody></body> :

<div class="container-fluid">
    <div class="row">

      <div class="col-md-12" style="background:rgb(192, 192, 102)">
        <canvas id="myChart" width="200" height="100"></canvas>

      </div>

    </div>


  </div>

Pada baris ke-2, terdapat class=”row”  yang merupakan kelas bootstrap untuk membuat sebuah baris. Dimana didalamnya terdapat tag <div> yang memiliki class=”col-md-12″ agar membuat sebuah kolom untuk perangkat medium/ laptop dengan ukuran masksimal (12) berdasarkan aturan grid system bootstrap. Selanjutnya pada baris ke-5 terdapat tag <canvas> yang memiliki atribut id=”myChart” sebagai penanda khusus, agar tag yang bersangkutan dapat dimanipulasi oleh perintah javascript yang akan kita tambahkan sebagai berikut : 

  <script>
  var ctx = document.getElementById("myChart").getContext('2d');
  var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132)',
                'rgba(54, 162, 235)',
                'rgba(255, 206, 86)',
                'rgba(75, 192, 192)',
                'rgba(153, 102, 255)',
                'rgba(255, 159, 64)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
  });
  </script>

Letakkan perintah diatas didalam tag <footer></footer>. Pada script diatas terdapat variable ctx dimana nilainya diambil dari tag <canvas> melalui fungsi getElementById() dan ditambahkan fungsi getContext(“2d”) agar dapat membuat sebuah grafik didalam tag tersebut. Selanjutnya kita membuat object myChart dari class Chart yang telah disediakan oleh library chartjs. Parameter pertama dari class Chart diisi dengan variable ctx dan paramter kedua digunakan untuk memanipulasi tampilan dari grafiknya, baik dari segi warna, bentuk grafik dan juga isi datanya yang bisa kita padukan dengan database. Adapun parameter kedua ditulis dalam pemformatan JSON. Hasilnya akan terlihat seperti Ini :

Membuat Gallery Image Dengan HTML Dan CSS

Ahmad Baihaqi

Pada kesempatan kali ini kita akan membuat gallery Image dengan HTML dan CSS. Langkah Pertama, buat file dengan nama “sampleimage.html” kemudian tambahkan perintah sebagai berikut :

<html>
<head>
<style>

</style>
</head>
<body>

<div class="gallery">
  <a target="_blank" href="d.jpg">
    <img src="d.jpg" alt="Cinque Terre" width="600" height="400">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
  <a target="_blank" href="b.jpg">
    <img src="b.jpg" alt="Forest" width="600" height="400">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
  <a target="_blank" href="c.jpg">
    <img src="c.jpg" alt="Northern Lights" width="600" height="400">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
  <a target="_blank" href="d.jpg">
    <img src="d.jpg" alt="Mountains" width="600" height="400">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

</body>
</html>

Hasilnya akan terlihat seperti ini :

Gambar akan ditampilkan secara vertikal. Hal ini disebabkan karena kita menambahkan tag <div></div>. Dimana tag <div> defaultnya memiliki sifat display block. Artinya tag yang bersifat block akan dicetak didalam baris baru. Oleh karena itu, kita menambahkan atribut class = “galery” yang nantinya akan kita gunakan sebagai selector di CSS agar dapat dimanipulasi tampilannya. Dalam hal ini, kita akan membuat agar gambar yang ditampilkan dapat sejajar dalam satu baru. Tambahkan perintah CSS ini kedalam tag <style></style> yang ada pada file “sampleimage.html” diatas. Adapun perintah CSSnya adalah sebagai Berikut:

div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

Dari perintah diatas, terlihat bahwa agar dapat memaksa gambar di dalam tag <div></div> dapat sejajar dalam satu baris adalah menambahkan properti css, yaitu properti float : left. Dengan menambahkan properti ini, maka tag html yang displaynya bersifat block dapat dipaksa agar dapat bersebelahan dengan tag lainnya. Biasanya properti ini digunakan saat menampilkan tulisan yang sejajar dengan gambar disebelahnya. Hasil akhirnya akan terlihat seperti ini :

Membuat Form Dengan HTML5 Dan CSS3

Ahmad Baihaqi

Pada kesempatan ini, kita akan membuat form sederhana dengan HTML5 dan CSS3. Langkah pertama adalah membuat struktur dasar dari dokumen HTML5. Seperti perintah dibawah ini :

<!DOCTYPE html>
<html >
  <head>
  
  
  </head>
  <body>


  </body>
</html>

Kemudian tambahkan perintah berikut didalam tag <body> </body>

<h3>Latihan Membuat Form dengan HTML Dan CSS</h3>

<div>
  <form action="send.php">
    <label for="fname">Nama Depan</label>
    <input type="text" id="fname" name="firstname" placeholder="Nama Anda..">

    <label for="lname">Nama Belakang</label>
    <input type="text" id="lname" name="lastname" placeholder="Nama Belakang Anda..">

    <label for="country">Provinsi</label>
    <select id="country" name="country">
      <option value="jabar">Jawa Barat</option>
      <option value="jatim">Jawa Timur</option>
      <option value="jateng">Jawa Tengah</option>
    </select>
  
    <input type="submit" value="Kirim">
  </form>
</div>

Perhatikan pada baris keempat, terdapat sebuah tag bernama form, dimana tag tersebut memiliki atribut action dengan value “send.php”. Atribut action digunakan untuk mengirimkan data form ketika form disubmit atau mengirimkan data dari form inputan saat tombol kirim diklik menuju script dengan nama “send.php”. Adapun bahasa pemprgoraman untuk mengolahnya dapat beragam seperti bahasa komputer PHP, ASP, JAVA dan lain lain. Selanjutnya perhatikan pada bagian ini :

<label for="fname">Nama Depan</label>
    <input type="text" id="fname" name="firstname" placeholder="Nama Anda..">

Tag <label></label> digunakan untuk memberikan keterangan berupa teks pada setiap form input dengan memberikan atribut for. Adapun tag <input> digunakan untuk membuat kolom isian yang akan diisi oleh user. Pada tag <input> terdapat atribut type yang berfungsi sebagai penentu jenis inputan user, misal berupa teks, password, email dan seterusnya. Kemudian atribut yang tidak kalah penting adalah atribut name yang berfungsi sebagai penanda khusus form inputan yang nantinya agar dikenali sebagai variable tertentu oleh bahasa pemprograman web server. Untuk menampilkan menu dropdown kita dapat menggunakan tag-tag berikut ini :

  <select id="country" name="country">
      <option value="jabar">Jawa Barat</option>
      <option value="jatim">Jawa Timur</option>
      <option value="jateng">Jawa Tengah</option>
    </select>

Selanjutnya yang tidak kalah penting adalah perintah berikut ini :

<input type="submit" value="Kirim">

Pada bagian inilah form inputan yang telah kita buat akan dikirm menuju perintah “send.php” karena atribut type bernilai “submit”. Saat kita jalankan keseluruhan perintah diatas, hasilnya akan terlihat seperti ini :

Agar tampilan form diatas terlihat lebih baik. tambahkan perintah CSS diantara tag <style></style>, seperti yang terlihat pada script dibawah ini :

<!DOCTYPE html>
<html>
<style>
input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

div {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}
</style>
<body>

<h3>Latihan Membuat Form dengan HTML Dan CSS</h3>

<div>
  <form action="send.php">
    <label for="fname">Nama Depan</label>
    <input type="text" id="fname" name="firstname" placeholder="Nama Anda..">

    <label for="lname">Nama Belakang</label>
    <input type="text" id="lname" name="lastname" placeholder="Nama Belakang Anda..">

    <label for="country">Provinsi</label>
    <select id="country" name="country">
      <option value="jabar">Jawa Barat</option>
      <option value="jatim">Jawa Timur</option>
      <option value="jateng">Jawa Tengah</option>
    </select>

    <input type="submit" value="Kirim">
  </form>
</div>

</body>
</html>

Maka hasilnya Akan terlihat seperti ini :

Belajar Menggunakan HTML5 Canvas

Ahmad Baihaqi

Pada tutorial kali ini, kita akan belajar cara menggunakan HTML canvas. HTML canvas adalah salah satu fitur element baru yang terdapat pada versi HTML5.

Apakah Kegunaan dari Canvas ?

Canvas digunakan sebagai element HTML yang bisa digambar dengan perintah bahasa komputer javascript.

Membuat Canvas

untuk menggunakan Canvas, cukup dengan menambahkan tag <canvas> </canvas> . Sekarang kita buat sebuah struktur dasar dari halaman html dengan nama file belajarcanvas.html kemudian tambahkan tag canvas dengan tambahan atribut id, width, height pada tag canvas. Seperti contoh yang tertera dibawah ini :

<!DOCTYPE html>
<html lang="en">
  <head>

    <title>HTML Canvas</title>


  </head>
  <body>

    <canvas id="myCanvas" width="640" height="480" style="border:1px solid black;">
  </canvas>
  </body>
</html>

Membuat Persegi Pada Canvas

Untuk dapat membuat sebuah garis. Pertama atribut id diatas akan digunakan untuk mendapatkan element html canvas. Dimana nantinya kita manipulasi element canvas tersbut dengan menyimpannya kedalam variable dengan nama “canvas” . Setelah mendapatkan element html dengan nama canvas, selanjutnya kita dapat menyimpan variabel baru dengan nama “ctx” dimana variabel ini diperoleh dari fungsi variable canvas.getContext(“2d”). Selanjutnya kita manipulasi variable “ctx” dengan menggunakan beberapa fungsi yang telah disediakan oleh javascript untuk membuat garis persegi. Adapun fungsi tersebut adalah .strokeRect() dan .fillRect(). Fungsi .strokeRect() dugunakan untuk membuat persegi dengan garis polos saja sedangkan .fillRect() digunakan untuk membuat persegi dengan warna.

<!DOCTYPE html>
<html lang="en">
  <head>

    <title>HTML Canvas</title>


  </head>
  <body>

    <canvas id="myCanvas" width="640" height="480" style="border:1px solid black;">
      <script type="text/javascript">
              var canvas = document.getElementById("myCanvas");
              var ctx = canvas.getContext("2d");

              ctx.strokeRect(100,10,100,100);
              ctx.fillRect(250,10,100,100);

          </script>
  </canvas>
  </body>
</html>

Perintah diatas hasilnya akan terlihat seperti dibawah ini :

Pada kedua fungsi diatas terdapat empat parameter yang berisi variabel (x, y, w, h), dimana variabel pertama adalah mengatur posisi sumbu x, selanjutnya mengatur posisi sumbu y, lebar dan tinggi dari garis yang akan dibuat.