Showing posts with label Web. Show all posts

Monday, May 3, 2021

Segala Sesuatu tentang Bootstrap 4 yang Perlu Front-end Developer Tahu

Bootstrap 4 adalah versi terbaru dari kerangka kerja front-end yang sangat populer, Bootstrap. Sebagai versi terbaru salam sebuah framework, Bootstrap 4 menawarkan berbagai kemudahan untuk pembuat desain. Apalagi mengingat perlu berulang kali menulis CSS, Bootsrap ini bisa membantu memudahkan.

Mungkin Anda pernah mendengar tentang Bulma atau Materialize yang membuat penulisan prototipe yang sama cepat dengan Bootstrap 4. Namun keunggulan dari Bootstrap adalah, Anda bisa memilih sendiri modul yang akan digunakan.

Ada berbagai situs web terkenal yang menjadikan Bootstrap sebagai kerangka. Sebut saja twitter yang memiliki tampilan sederhana tapi modern sehingga semakin hari semakin diminati. Begitu juga tema pada Joomla, Wordpress, dan CMS yang menggunakan Bootstrap.

Bagi developer anyar, desain web yang responsif adalah hal sulit untuk digunakan walau memang bagi yang berpengalaman, ini bisa dengan mudah dikerjakan. Bootsrap hadir memudahkan pekerjaan para developer baru ini. Apalagi Bootstrap 4 dibangun di atas Flexbox yang membuatnya jadi lebih cerdas.

Perbedaan Bootstrap 3 dengan Bootstrap 4:

Terus melakukan pembaharuan, ternyata perbedaan Bootstrap terbaru dengan versi lama cukup signifikan. Mulai dari perubahan font, warna, dan lain sebagainya. Untuk lebih jelasnya, berikut ini ulasan lengkapnya:

Menggunakan font default, Bootstrap 3 menggunakan ukuran 14px yang kemudian diperbaharui menjadi 16px. Dengan perubahan ini, Anda yang menggunakan Bootstrap harus segera menyesuaikan ukuran pixelnya.
Tidak lagi menggunakan font jenis Helvetica Neue, Helvetica, Sans-Serif, dan Arial. Yang terbaru menggunkan jenis font Sans-Serif, Arial, dan Helvetica Neue.
Pada Bootstrap 3, setiap class grid membutuhkan ‘col-‘ pada bagian depan. Namun untuk versi Bootrstap 4 tidak lagi membutuhkannya. Selain itu versi terbaru menambahkan satu sistem grid menjadi col-md, col-lg, col-sm, col-xl, dan col-*.
Ada perubahan besar yang paea Bootstrap tidak menggunakan header, kini ada pada versi terbaru ini. Selain itu, header tabel juga bisa diberi warna jadi terang (.thead-light) atau nuansa gelap (.thead-dark).

Kelebihan dari Bootstrap 4:

Bootstrap yang lama menggunakan cara border-box ke content-box. Untuk sebagian developer, ini memang menjengkelkan karena lebih sulit dipahami dan memakan waktu yang lama. Namun dengan kerangka terbaru, yaitu border-box, ini lebih mudah digunakan.
Reset CSS selama ini sudah berkembang pesat. Dalam versi Bootstrap disebut dengan Reboot. Penggunaan Reboot berbeda karena didasarkan dengan normalisasi. Ini supaya menghindari margin-top, menggunakan banyak rem unit, dan native font rendering yang lebih optimal.

Cara instal Bootstrap 4:

Tahukah Anda bahwa Bootstrap 4 bisa diunduh secara online dan juga offline? Selain itu juga bisa menggunakan bower, npm, dan composer. Namun yang perlu Anda ingat jika instal project Bootstrap 4 tergantung dengan development yang digunakan.

Ambil contoh jika Anda ingin mengembangkan website menggunakan NodeJs, maka yang paling tepat adalah instao menggunakan bower dan npm. Nah, berikut ini langkah menambahkan Bootstrap 4 dalam pekerjaan Anda:

Pastikan Anda sudah membuat direktori terbaru dan mengunduh Bootrstap dari website resminya. Setelah sudah selesai diunduh, Anda akan mendapatkan versi zip yang di dalamnya terdiri dari banyak folder. Nah, file inilah yang nantinya perlu Anda ekstrak ke dalam folder project supaya bisa digunakan.
Pastikan semua folder zip sudah diekstrak sehingga nantinya akan mendapat susunan direktori yang lengkap.
Buka teks editor dan buat file index.html dan diisikan beberapa kode. Jangan lupa, gunakan juga file Bootstrap dan library yang lainnya.
Dengan begitu, Bootstrap sudah bisa digunakan untuk mengembangkan website.

Cara instal secara online:

Sebelum Anda menginstal Bootstrap 4 secara online, Anda perlu tahu bahwa dengan cara ini mempengaruhi kecepatan website. Jika tidak masalah, Anda bisa menggunakan CDN jika berminat instal secara online.

Buka perintah:

Dan nantinya file Bootstrap 4 akan tersalin dalam website untuk bisa digunakan oleh class dan fungsi yang lainnya.

Langkah-langkah menggunakan Bootstrap:

Yang terbaik dari menggunakan Bootstrap adalah waktu menjadi lebih singkat dan tidak perlu kesulitan mengetik banyak kode program. Selain itu, Anda hanya perlu menggunakan class-class yang terletak dalam file Bootstrap.

Apabila Anda ingin menggabungkan class dengan class lainnya, hanya perlu menambahkan class tabel yang dikombinasikan oleh class lainnya. Anda tidak perlu khawatir karena sudah tersedia beberapa class yang dipersiapkan untuk membuat tabel. Berikut selengkapnya:

‘.table’ untuk menjelaskan atau membuat tabel yang biasa. Hasilnya hanya akan berupa lapisan kecil dan pembatas secara mendatar. Kodenya adalah <table class=”table”>.
‘.table-bordered’ adalah class yang digunakan untuk memasukkan border dalam table. Untuk mencobanya, Anda bisa membuat kode <table class=”table table-bordered”>.
‘.table-stripped’ adalah class yang akan membuat table jadi warna yang berbeda di setiap baris. Kode untuk yang satu ini adalah <table class=”table table-sripped”>.
‘.table-hover’ adalah class yang memanfaatkan hover pada table. Namun efek ini baru terlihat saat mouse diletakkan pada class. Kode untuk yang satu ini adalah <table class=”table table-hover”>.

Mengatur tampilan gambar dengan Bootstrap:

Dengan framework ini, Anda jadi bisa membuat gambar yang responsif atau thumbnail. Class yang digunakan pada Bootstrap 4 adalah ‘.img-circle’, ‘.img-responsive’, ‘.img-rounded’, ‘.img-thumbnail’. Dengan adanya gambar, website Anda akan jauh lebih menarik.

‘.img-circle’ adalah class yang digunakan untuk menambahkan gambar yang berbentuk lingkaran.
‘.img-responsive’ adalah class yang memungkinkan untuk membuat gambar jadi bisa dibuka dalam berbagai jenis resolusi layar.
‘.img-rounder’ adalah class yang digunakan untuk membuat efek melingkar atau melengkung pada gambar.
‘.img-thumbnail’ adalah class yang digunakan untuk menambahkan gambar thumbnail melalui Bootstrap.

Cara membuat tombol dengan Bootstrap

Karena tombol adalah komponen penting dalam sebuah website, maka Bootstrap juga menyediakan class untuk menambah tombol yang berfungsi sekaligus menarik. Ada berbagai variasi tombol yang bisa dipilih, tapi awalnya Anda hanya perlu menggunakan class ‘btn’.
Berikut adalah variasi class tombol yang ada pada Bootstrap:

’.btn-default’ adalah class yang menjadikan tombol default berwarna abu-abu.
‘.btn-sucsess’ adalah class yang dibuat untuk pemberitahuan setelah selesai memasukkan atau memproses suatu program.
‘.btn-primary’ adalah class yang digunakan untuk menjadikan tombol berwarna biru. Umumnya terjadi pada tombol untuk login
‘.btn-warning’ adalah class yang digunakan untuk membuat tombol yang memperingati jika terjadi sesuatu. Umumnya, tombol berwarna kuning.
‘.btn-info’ adalah class yang membuat tombol jadi warna biru muda
‘.btn-danger’ adalah class yang membuat tombol jadi terlihat warna merah.
‘.btn’ adalah class yang digunakan untuk membuat tombol secara standar dengan warna abu-abu kehitaman.

Selain bisa digunakan untuk membuat tombol dan menambah gambar, Bootstrap 4 juga bisa diandalkan untuk membuat class panel, class peringatan, dan lain sebagainya. Karena banyaknya class yang ada, tidak heran jika Bootstrap 4 banyak diminati dan ditunggu.

Menampilkan Data dari Database Kedalam DataTables di Codeigniter

DataTables merupakan sebuah library javascript yang mempermudah kita dalam menampilkan data kedalam bentuk table. Penggunaannya yang sangat simple dan memiliki banyak fitur membuat datatables banyak digunakan.

Pada postingan kali ini kita akan mencoba menampilkan data dari database kedalam table menggunakan DataTables dan framework Codeigniter 3. Langsung saja ikuti langkah-langkah di bawah.

1. Buat struktur database yang akan ditampilkan.

2. Hubungkan Codeigniter dengan database yang akan ditampilkan, caranya masuk ke application -> config -> database.php lalu masukkan atur sesuai database kalian contohnya seperti dibawah.


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

$active_group = 'default';
$query_builder = TRUE;

$db['default'] = array(
	'dsn'	=> '',
	'hostname' => 'localhost',
	'username' => 'root',
	'password' => '',
	'database' => 'cmsku',
	'dbdriver' => 'mysqli',
	'dbprefix' => '',
	'pconnect' => FALSE,
	'db_debug' => (ENVIRONMENT !== 'production'),
	'cache_on' => FALSE,
	'cachedir' => '',
	'char_set' => 'utf8',
	'dbcollat' => 'utf8_general_ci',
	'swap_pre' => '',
	'encrypt' => FALSE,
	'compress' => FALSE,
	'stricton' => FALSE,
	'failover' => array(),
	'save_queries' => TRUE
);

3. Buat view dengan nama coba.php kemudian isi dengan kode di bawah :


<!DOCTYPE html>
<html>
<head>
	<title>Coba Data Tables</title>
	<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.6/css/jquery.dataTables.css">

	<!--Import jQuery before export.js-->
	<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>


	<!--Data Table-->
	<script type="text/javascript"  src=" https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
</head>
<body>
<table id="tabelku" class="display" style="width:100%">
        <thead>
            <tr>
                <th>No</th>
                <th>Judul</th>
                <th>Isi</th>
                <th>Status</th>
                <th>Aksi</th>
            </tr>
        </thead>
        <tbody>
           
            
        </tbody>
    </table>

<script type="text/javascript">
	$(document).ready(function(){ 
       let RefTable = {
        init() {
                 RefTable.table=$('#tabelku').DataTable({

                 bSort              : true,
                 destroy            : true, 
                 iDisplayLength     : 10,
                 processing         : true, 
                 serverSide         : true, 
                 order              : [], 
                 ajax               : {
                     "url"  : "<?php echo base_url()?>Coba/load",
                     "type" : "POST",
                 },
                 
              });

            $("body").on("click", "[data-action]", function(e) {
                e.preventDefault();

                let action = $(this).data("action");
                if (action === "edit") {
                    //aksi edit disini
                }
            });
         }
         
     }
        RefTable.init(); 

    }); 

</script>





</body>
</html>

4. Buat Model dengan nama DataModel.php lalu isi dengan kode dibawah


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

class DataModel extends CI_Model {

	var $table = 'postingan a';//nama tabel

	var $column_order = array(null,'a.tanggal',null); //order berdasarkan

	var $column_search = array('a.judul_postingan, a.tanggal', 'a.isi'); //cari berdasarkan

	var $select_column = array('a.*');  //select all
	var $order = array('a.tanggal' => 'desc'); // default order 


	public function __construct()
	{
		parent::__construct();
		$this->load->database(); 
	}		

	private function _get_datatables_query()
	{
		$this->db->select($this->select_column);  
		$this->db->from($this->table);
		$i = 0;
	
		foreach ($this->column_search as $item) // loop column 
		{
			if($_POST['search']['value']) // if datatable send POST for search
			{
				
				if($i===0) // first loop
				{
					$this->db->group_start(); // open bracket. query Where with OR clause better with bracket. because maybe can combine with other WHERE with AND.
					$this->db->like($item, $_POST['search']['value']);
				}
				else
				{
					$this->db->or_like($item, $_POST['search']['value']);
				}

				if(count($this->column_search) - 1 == $i) //last loop
					$this->db->group_end(); //close bracket
			}
			$i++;
		}
		
		if(isset($_POST['order'])) // here order processing
		{
			$this->db->order_by($this->column_order[$_POST['order']['0']['column']], $_POST['order']['0']['dir']);
		} 
		else if(isset($this->order))
		{
			$order = $this->order;
			$this->db->order_by(key($order), $order[key($order)]);
		}
	}
	
	function get_datatables()
	{
		
		$this->_get_datatables_query();
		if($_POST['length'] != -1)
		$this->db->limit($_POST['length'], $_POST['start']);
		$query = $this->db->get();
		return $query->result();
	}

	function count_filtered()
	{
		$this->_get_datatables_query();
		$query = $this->db->get();
		return $query->num_rows();
	}

	public function count_all()
	{
		$this->db->from($this->table);
		return $this->db->count_all_results();
	}
}

Silahkan sesuaikan baris berikut sesuai dengan database kalian.


var $table = 'postingan a';//nama tabel

var $column_order = array(null,'a.tanggal',null); //order berdasarkan

var $column_search = array('a.judul_postingan, a.tanggal', 'a.isi'); //cari berdasarkan

var $select_column = array('a.*');  //select all
var $order = array('a.tanggal' => 'desc'); // default order

5. Buat Controller dengan nama Coba.php lalu isi dengan kode dibawah


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

class Coba extends CI_Controller {

	public function __construct()
	{
	    parent::__construct();
	    $this->load->model('DataModel');  
	    
	}

	public function index()
	{
		$this->load->view('coba');
	}

	public function load()
	{
		
		$data = array();
		
		$tampil = $this->DataModel->get_datatables();
		
		$no = $_POST['start'];

		foreach ($tampil as $key => $r) {
			$no++;
			$row = array();
			$row[] = $no;
			$row[] = $r->judul_postingan;
			$row[] = $r->isi;
			$row[] = $r->status;
			$row[] = '<a href="javascript:; type="button" class="btn btn-xs yellow btn-outline btn-edit tooltips " title="Edit" data-action="edit" data-id="'.$r->id_postingan.'"><i class="fa fa-edit"></i> Edit</a>
			';
			$data[] = $row;
		}		

		$output = array(
			"draw" => $_POST['draw'],
			"recordsTotal" => $this->DataModel->count_all(),
			"recordsFiltered" => $this->DataModel->count_filtered(),
			"data" => $data,
		);

		echo json_encode($output);
	}
}

6. Hasil running akan tampak seperti gambar dibawah ini :

Cara Mengatasi require-dev.mikey179/vfsStream is invalid, it should not contain uppercase characters. Please use mikey179/vfsstream instead

Apakah anda sedang mengalami masalah ketika menginstall library menggunakan Composer dimana muncul tampilan error "require-dev.mikey179/vfsStream is invalid, it should not contain uppercase characters. Please use mikey179/vfsstream instead". Tenang bukan hanya anda yang pernah mengalami masalah demikian.

Singkat cerita waktu itu saya hendak menginstall library google apiclient, sebelum menginstall library saya mengupgrade composer dari versi 1 ke versi 2.0. Permasalahan kemudian muncul ketika saya mulai menjalankan perintah composer require google/apiclient:"^2.0", yang muncul adalah tulisan require-dev.mikey179/vfsStream is invalid, it should not contain uppercase characters. Please use mikey179/vfsstream instead.

Setelah mencari di google akhirnya ketemu juga solusinya. Caranya dengan membuka file composer.json yang ada di folder root website.

Ubah baris "mikey179/vfsStream": "1.1.*", hingga semua menjadi huruf kecil "mikey179/vfsstream": "1.1.*", kemudian save. Kemudian coba untuk menginstall ulang library yang hendak dipasang dan lihat hasilnya.

Mana yang Lebih Baik Ubuntu atau CentOS Sebagai Server ?

Linux merupakan salah satu dari 3 sistem operasi yang paling banyak digunakan diseluruh dunia. Berbeda dengan Windows dan macOS, linux hadir dalam berbagai distro. Hal ini dikarenakan linux yang bersifat open source sehingga, siapapun dapat membuat distronya sendiri.

Kali ini yang dibahas hanya dua distro linux yang paling banyak digunakan sebagai OS server. Bagi yang belum tahu, OS server merupakan sistem operasi yang dirancang khusus untuk menjalankan perangkat lunak pada sebuah server. Entah itu server yang dibangun sendiri ataupun server yang disewa dari pihak ketiga tentunya harus memiliki OS server.

Bagi pengguna hosting VPS tentunya sudah tidak asing dengan OS server sebab mereka dapat memilih beberapa OS yang disediakan oleh penyedia hosting berbeda dengan shared hosting yang harus mengikut dengan OS bawahan server. Baca juga Jenis-jenis Hosting Serta Perbedaannya.

Dari beberapa OS server yang ditawarkan ada 2 server OS yang paling banyak dipilih yaitu Ubuntu dan CentOS, nah dari sini muncul pertanyaan lalu mana yang lebih baik dari kedua OS tersebut ?

Pengertian CentOS dan Ubuntu

CentOS (Community Enterprise Operating System) merupakan salah satu distro linux yang dikode dari source code Red Hat Enterprise (RHEL) dan dikembangkan dalam sebuah komunitas yang disebut CentOS Project. CentOS direkomendasikan sebagai OS default pada VPS.

Ubuntu merupakan sebuah sistem operasi dan distro linux berbasis Debian yang bersifat gratis dan open source. Sistem operasi ini menjadi populer di seluruh dunia dikarenakan kemudahan dalam penggunaan serta penginstalannya.

Keunggulan CentOS

CentOS kompatibel dengan Red Hat, dimana Red Hat merupakan perusahaan besar dan terkenal dalam dunia perangkat lunak sumber terbuka.
Driver RHEL dapat dipakai oleh CentOS
Dukungan komersial dari vendor-vendor partner
Merupakan OS Freeware yang handal dalam skala Enterpise.

Kekurangan CentOS

Kurangnya dokumentasi secara khusus
Ketergantungan pada Red Hat, sehingga CentOS selalu keluar setelah Red Hat
Pembaruan lebih lambat dibandingkan Ubuntu

Keunggulan Ubuntu

Terdapat kurang lebih 47.000 paket perangkat lunak bawahan yang dapat diinstall dengan alat manajemen paket (apt).
Ubuntu dapat diinstall pada windows 10 tanpa menggunakan mesin virtual
Terdapat banyak paket yang berhubungan dengan AI
Terdapat banyak software yag tersedia untuk Ubuntu namun tidak untuk CentOS salah satu contohnya adalah OpenStack
Selain bisa dijadikan OS server, Ubuntu juga handal dijadikan OS Desktop.

Kekurangan Ubuntu

Tidak mendukung cPanel namun dapat mencari solusi lain sepert VestaCP

Kesimpulan

Dari beberapa kelebihan serta kekurangan dari Ubuntu dan CentOS diatas dapat disimpulkan bahwa Ubuntu memiliki keunggulan yang lebih baik dari CentOS mulai dari ketersediaan banyak software seperti OpenStack, sampai pada ketersediaan paket AI yang mana perkembangan AI belakangan ini semakin pesat.

Namun terlepas dari kesimpulan di atas, baik tidaknya suatu OS kembali lagi kepada penggunanya, lebih nyaman menggunakan Ubuntu atau CentOS.

Mengenal Sejarah JavaScript

Para programer berbasis web tentunya sangat ingin mengetehui lebih dalam tentang JavaScript. Hal ini tidak lepas dari fitur yang disediakan oleh JavaScript yang memudahkan dalam mengontrol, memanipulasi sebuah website. Selain itu bahasa pemrograman ini juga digunakan di hampir 90% web diseluruh dunia.

Sejarah Bahasa Pemrograman JavaScript

JavaScript merupakan salah satu bahasa pemrograman berbasis website yang dikembangkan oleh Netscape, sebuah perusahaan telekomunikasi yang juga mengembangkan browser Netscape Navigator. JavaScript sendiri mulai dibuat pada tahun 1995 yang mana ditangani oleh programer Netscape bernama Brendan Eich.

Pada awal kemunculannya bahasa pemrograman ini bernama LiveScript. Nama ini kemudian dirubah menjadi JavaScript dikarenakan pada saat itu Java yang dirilis oleh Sun Microsystem (sekarang Oracle)sedang menjadi sorotan. Bisa dikatakan bahwa tujuan penamaan JavaScript tidak lain untuk menarik perhatian para programan pada waktu itu, jadi JavaScript tidak ada kaitannya dengan Java.

JavaScript kemudian mengalami banyak lika-liku sebelum akhirnya kuat seperti sekarang. Dimulai ketika pada tahun 1996 dimana Microsoft merilis Internet Explorer 3.0. Ketika itu Microsoft ingin menggunakan JavaScript akan tetapi Netscape tidak memberikan izin. Hal ini berujung pada Microsoft yang mengembangkan bahasa script sendiri yang diberi nama JScript.

Pada tahun 1997 kemudian Organisasi Standardisasi International ECMA memecahkan masalah ketidakcocokan antara JavaScript dengan JScript hasilnya adalah ECMAScript. Ditahun yang sama persaingan antara Netscape Navigater dan Internet Explorer terus berlanjut dimana persaingan ini kemudian dikatakan sebagai "Perang Browser Pertama".

Faktor penentu kemenangan Internet Explorer adalah ketika Windows 98 dirilis kepublik, dimana Internet Explorer di pasang sebagai standar pada sistem operasi ini. Hal ini berdampak pada jumlah pengguna dan pangsa pasar yang meningkat.

Setelah kalah pada perang browser pertama, JavaScript kian terpuruk dikarenakan banyaknya keluhan dari komunitas engineering mengenai keamanan JavaScript. Masalah ini berujung pada banyaknya pengguna yang memilih mematikan fungsi JavaScript itu sendiri.

Belum sampai disitu saja, munculnya Flash yang menyelipkan Action Script berdasarkan ECMA. Hal ini membuat orang beranggapan Saya tidak membutuhkan JavaScript lagi.

JavaScript akhirnya menemui titik balik pada tahun 2005 ketika Google Maps diperkenalkan, yang mengadopsi teknologi JavaScript "A-Jax". Google membuka jalan bagi JavaScript untuk dihidupkan kembali. Ditandai dengan munculnya berbagai pustaka lain seperti "jQuery" atau "prototype.js". Lahirnya jQuery membuat penulisan yang awalnya panjang, menjadi lebih ringkas.

JavaScript semakin kuat dengan munculnya Node js pada tahun 2008. Bahasa pemrograman JavaScript yang awalnya hanya bisa berjalan sebagai Front End kini juga bisa di sisi server atau Back End.

Paling terbaru di era ini muncul pesaing baru dengan nama TypeScript, yang memiliki keunggulan type-safe (fitur yang memberitahu kesalahan saat mengonversi JavaScript ), dan mampu bekerja di browser manapun. Kelebihan ini membuat TypeScript banyak di gunakan programer dalam menulis program. Namun pada akhirnya node.js dan TypeScript akhirnya berjalan sebagai JavaScript.

Baca Juga :

Pengertian Node Js Beserta Kelebihannya
Belajar Fungsi Dasar Java Script
Contoh Program Menggunakan Javascript Sederhana
Cara Membuat Slide Dengan JavaScript Biasa Tanpa Jquery

Cara Merubah Integer Menjadi Angka Romawi di PHP

Angka romawi kerap kali digunakan pada saat membuat website. Angka romawi ini bisa di tuliskan secara manual, hanya saja yang menjadi masalah ketika yang ditampilkan nantinya menggunakan perulangan atau memiliki banyak data yang mana datanya hanya berupa tipe data integer. Untuk mengakali hal ini bisa dilakukan dengan membuat function yang dapat merubah tipe data integer menjadi angka romawi.

Berikut fungsi untuk Merubah Integer Menjadi Angka Romawi di PHP.


function figureRomawi($angka)
    {
     $angka = intval($angka);
     $result = '';
     
     $array = array('M' => 1000,
     'CM' => 900,
     'D' => 500,
     'CD' => 400,
     'C' => 100,
     'XC' => 90,
     'L' => 50,
     'XL' => 40,
     'X' => 10,
     'IX' => 9,
     'V' => 5,
     'IV' => 4,
     'I' => 1);
     
     foreach($arrat as $roman => $value){
      $matches = intval($angka/$value);
     
      $result .= str_repeat($roman,$matches);
     
      $angka = $angka % $value;
     }

     return $result;
    }

Contoh penggunaannya seperti berikut :


<?php
function angkaRomawi($angka)
{
	 $angka = intval($angka);
	 $result = '';
	 
	 $array = array('M' => 1000,
	 'CM' => 900,
	 'D' => 500,
	 'CD' => 400,
	 'C' => 100,
	 'XC' => 90,
	 'L' => 50,
	 'XL' => 40,
	 'X' => 10,
	 'IX' => 9,
	 'V' => 5,
	 'IV' => 4,
	 'I' => 1);
	 
	 foreach($array as $roman => $value){
	  $matches = intval($angka/$value);
	 
	  $result .= str_repeat($roman,$matches);
	 
	  $angka = $angka % $value;
	 }
	 
	 return $result;
}

$no = 0;
for ($i=0; $i < 100; $i++) { 
	$no++;
	echo "angka romawi dari $no = ".angkaRomawi($no)."<br>";
}
?>

Hasil dari kode contoh di atas akan tampak seperti pada gambar di bawah :

RUBY ON RAILS #2 PASSING DATA DARI CONTROLLER KE VIEW

Passing data dari controller ke view merupakan sebuah proses pengiriman data dari controller sehingga data nantinya bisa ditampilkan pada halaman web. Passing data ini akan banyak dipergunakan ketika membuat sebuah website. Terutama dalam urusan menampilkan data dari database. Namun pada postingan ini data yang akan dicontohkan masi berupa data statis dalam bentuk array.

Sebelumnya pastikan untuk membuat controller dan view terlebih dahulu. Untuk cara pembuatan controller silahkan buka postingan sebelumnya Ruby On Rails #1 Membuat Controller dan View.

Langsung saja berikut cara untuk melakukan passing data dari controller ke view Ruby On Rails.

1. Definisikan data pada Controller

Buka controller app -> controllers -> nama controller, kemudian definisikan data yang akan di kirim ke view. Misalnya data yang akan dikirim berupa string, maka tulis kodenya seperti dibawah:


class WelcomeController< ApplicationController
  def index
    @title = 'Ini adalah blog codingrakitan.blogspot.com'
  end
end

2. Tampilkan data pada View

Selanjutnya buka view html yang terhubung dengan controller. Kemudian tambahkan kode seperti berikut :


<h1>Welcome</h1>
<p><%= @title %></p>

Hasil tampilan dari kode tersebut akan tampak seperti gambar dibawah.

Jadi untuk menampilkan data yang telah dikirim dari Controller digunakan <%= @title %> dimana "@title" merupakan nama data yang telah didefinisikan pada controller. Nama data ini bisa di atur sesuai keinginan, dan mengandung tipe data seperti int, string, array dan lain-lain.

Memasang Lebih dari Satu Versi PHP pada XAMPP

Bahasa pemrograman php terus berkembang hingga sekarang, versi paling terbaru saat ini adalah versi 7.4.13 (saat tulisan ini dibuat). Terdapat plus dan minus dengan munculnya versi-versi terbaru dari sebuah bahasa pemrograman. Salah satu yang menjadi minus atau masalah kebanyakan programer adalah integrasi antara versi sebelumnya dengan versi terbaru.

Terkadang bila aplikasi yang dibuat sebelumnnya menggunakan versi lama kemudian dijalankan pada versi terbaru memrlukan pengaturan tertentu. Bahkan bisa samapai aplikasi tidak bisa dijalankan. Apalagi ketika aplikasi dibangun menggunakan sebuah framework yang berbeda versi.

Untuk mengatasi hal ini bisa diakali dengan memasang versi php atau istilahnya multiple php yang di inginkan pada komputer. Seperti kita ketahui ketika menginstall XAMPP versi terbaru, versi bawahan php yang terpasang juga yang terbaru. Pada postingan kali ini akan diajarkan bagaimana cara memasang php versi 5.4 pada XAMPP versi terbaru dimana versi bawahannya adalah php versi 7.3.

1. Download versi php 5.4

Karena yang dipasang adalah 5.4 maka terlebih dahulu download file php v 5.4 dengan format zip disini. Pilih file dengan nama php-5.4.17-Win32-VC9-x86.zip.

2. Buat folder baru pada xampp

Buat sebuah folder baru pada xampp dengan nama php54

3. Extract file hasil download

Extract file hasil download pada langkah pertama kedalam folder yang telah dibuat pada langkah kedua.

4. Atur file php.ini

Setelah extract selesai masuk kedalam folder php54 tadi kemudian cari file php.ini. Jika tidak ada silahkan copy file php.ini-development kemudian paste dan ganti namanya menjadi php.ini.

Lanjut buka file php.ini menggunakan notepad++ kemudian cari code ; extension_dir = "ext". Hilangkan tanda ; diawal sehingga baris ini bisa aktif. Nantinya akan tampak seperti gambar dibawah, lalu save.

5. Atur httpd.conf pada xampp

Buka xampp kemudian klik config pada bagian apache -> httpd.conf.

Copy dan tambahkan code berikut pada baris paling bawah di http.conf


        ScriptAlias /php54 "E:/xampp/php54"
	<Directory "E:/xampp/php54">
	    AllowOverride None
	    Options None
	    Require all denied
	    <Files "php-cgi.exe">
	        Require all granted
	   </Files>
	</Directory>

Jangan lupa untuk menyesuaikan folder "E:/xampp/php54" sesuai dengan directory xampp pada komputer.

6. Atur httpd-xampp.conf pada xampp

Masih pada aplikasi xampp silahkan klik pada bagian apache -> config -> httpd-xampp.conf.

Kemudian copy dan paste kode berikut pada baris paling bawah.


        Listen 8054
	<VirtualHost *:8054>
	    UnsetEnv PHPRC
	    <FilesMatch "\.php$">
	        php_flag engine off
	        SetHandler application/x-httpd-php54
	        Action application/x-httpd-php54 "/php54/php-cgi.exe"
	    </FilesMatch>
	</VirtualHost>

Pengaturan diatas merupakan pengaturan untuk menentukan di port mana versi PHP ini akan dijalankan. Port yang digunakan untuk menjalakan php v5.4 yang telah terpasang adalah "8054" (port ini dapat diatur sesuai keinginan pengguna).

7. Jalankan XAMPP

Jalankan xampp seperti biasa dengan start apache dan mysql. Selanjutnya buka browser dan masuk ke link http://localhost/dashboard/phpinfo.php maka informasi versi php bawahan akan muncul seperti pada gambar.

Untuk menggunakan versi php versi 5.4 yang telah dipasang tambahkan port pada link, sehingga menjadi http://localhost:8054/dashboard/phpinfo.php

Jadi ketika hendak menjalankan aplikasi dengan php bawahan masuk dengan link localhost/nama_web lalu kitaka hendak menggunakan versi 5.4 yang telah dipasang masuk dengan link localhost:8054/nama_web.

Membuat dan Menjalankan Project Baru ReactJS

Sebelumnya kita telah belajar mengenai bagaimana cara menginstall ReactJS pada postingan Cara Install ReactJs dengan Mudah. Kali ini kita akan mulai membuat project baru menggunakan ReactJS. Berikut langkah-langkah yang perlu anda lakukan.

Buka CMD dan arahkan ke directory tempat anda ingin membuat project reactjs. Misalnya jika anda ingin menyimpan pada directory "D:/belajar_react/" anda bisa mengeetikkan perintah pada cmd cd D:/belajar_react/ kemudian tekan enter.
Selanjutnya ketikkan perintah create-react-app project_baru, perintah ini untuk membuat project baru dengan nama "project_baru". Nantinya pada directory D:/belajar_react/ tadi akan muncul folder baru dengan nama "project_baru"
Melakukan penginstalan library/komponen yang dibutuhkan, caranya arahkan cmd ke folder "project_baru" kemudian ketikkan perintah npm install (pastikan terhubung dengan internet).
Menjalankan project dengan melakukan perintah npm start terlebih dahulu anda haru masuk kedalam folder project anda yaitu "project_baru" agar bisa dijalankan.
Buka browser dan arahkan ke localhost:port, port disesuaikan dengan port yang muncul ketika anda menjalankan npm start. Port default biasanya adalah 3000 sehingga kita tulisakan localhost:3000.

Tampilan pertama ReactJs akan tampak seperti berikut.

Sekarang kita sudah bisa bereksperimen dengan ReactJs.

Jenis-jenis Hosting Serta Perbedaannya

Pada postingan sebelumnya tentang Mengenal Apa itu Hosting dan Penyedia Hosting kita telah mengetahui apa itu hosting.

Sekarang yang perlu kita tahu adalah jenis-jenis hosting serta perbedaannya satu sama lain.

Hosting ini terbagi menjadi beberapa jenis yaitu shared hosting, VPS (Virtual Private Server) hosting, Cloud Hosting, Dedicated Server Hosting.

Apa pentingnya mengetahui jenis-jesnis hosting ?

Dengan mengetahui jenis-jenis hosting dan perbedaannya developer web akan tahu jenis hosting mana yang sesuai dengan kebutuhan websitenya. Contolah anda membangun website menggunakan Django kemudian anda membeli shared hosting yang belum tentu mendukung website Django. Tentu anda akan mengalami kerugian.

Contoh lain anda memiliki website sederhana hanya memerlukan bandwith dan tafict yang kecil. Dengan membeli VPS atau bahkan Dedicated Server Hosting tentunya akan boros biaya, yang mana notabenenya shared Hosting lebih murah dan sudah sesuai untuk website anda.

1. Shared Hosting

Shared hosting merupakan jenis hosting yang paling banyak digunakan, dan biasanya digunakan para pemula dalam dunia hosting.

Seperti namanya yang berarti berbagi hosting, dimana pengguna hosting akan berbagi hosting dengan pengguna lain. Hal ini membuat kecepatan hosting satu dengan yang lain saling bergantung.

Sebagai gambaran apabila salah satu website di akses oleh banyak orang maka kecepatan website lain akan menurun. Oleh karena itu shared hosting tidak direkomendasikan untuk website dengan trafik tinggi.

Ketika anda membeli shared hosting yang anda beli hanya berupa kapasitas penyimpanan. Dimana penyedia layanan juga biasanya sudah memasangkan Cpanel yang membantu anda mengatur hosting. Kebanyakan shared hosting hanya tersedia untuk website yang dibangun menggunakan PHP.

Jenis hosting ini memiliki biaya yang lebih murah di bandingkan jenis hosting lainnya. Untuk konfigurasi juga tidak terlalu sulit.

2. VPS (Virtual Private Server) Hosting

VPS atau Virtual Private Server adalah jenis hosting dimana pengguna dapat memilih kapasitas memory, jenis penyimpanan (harddisk atau ssd), kapasitas hardisk/SSD, serta Jenis Sistem Operasi yang akan digunakan sebagai web server.

Sistem operasi disini tidak mencakup semua sistem operasi, hanya beberapa sistem operasi yang disediakan oleh penyedia layanan. Biasanya seperti Debian, Ubuntu, CentOS, Fedora, serta Suse.

Meskipun sistem VPS juga membuat anda harus berbagi server dengan pengguna lain akan tetapi kecepatan website anda tidak akan dipengaruhi oleh pengguna lain. Karena pengguna mendapatkan alokasi memory dan ruang masing-masing. Hal ini membuat VPS sangat cocok untuk website dengan trafik tinggi.

Kelebihan lain dari VPS hosting anda akan mendapatkan akses root ke hosting anda sehingga anda bebas menginstall atau menguninstall aplikasi.

Jika anda adalah developer website non PHP contohnya Node Js, Ruby on Rails, atau bahkan Django. Anda mungkin bertanya-tanya bagaimana cara mengonlinekan website tersebut.

VPS hosting adalah salah satu jawabannya, dengan VPS anda bisa menginstall aplikasi apapun kedalam server selama sistem operasi mendukung aplikasi tersebut. Contohnya anda bisa menginstall Node Js, Python, Ruby dan lain sebagainya.

3. Cloud Hosting

Cloud Hosting merupakan jenis hosting yang cocok untuk website dengan trafict tinggi seperti toko online atau portal berita. Jenis hosting ini akan menyebar website yang kamu upload ke beberapa server sehingga apabila server satu mengalami error atau masalah, website masih dapat diakses menggunakan server lain.

Dengan kata lain Cloud Hosting menggabungkan beberapa server yang berjalan layaknya satu server dengan maksud untuk menjaga performa. Hosting ini menggunakan teknologi yang bernama "cluster" yaitu teknologi untuk menggabungkan beberapa resource server secara terpusat.

Keuntungan lainnya, cloud hosting tidak dibagi dengan pengguna lain karena sudah dedicated. Sehingga banyak tidaknya trafict website anda tidak akan menjadi masalah bagi penyedia layanan hosting.

4. Dedicated Server Hosting

Terakhir dalam daftar ini ada Dedicated Server Hosting. Jenis hosting yang satu ini hampir sama dengan VPS bedanya jika VPS anda masih bisa satu server dengan pengguna lain, dengan Dedicated Server Hosting anda bisa menyewa satu server sekaligus. Bisa dikatakan Dedicated Server Hosting ini adalah layanan Server premium, dan biasanya ditujukan untuk perusahaan besar.

Dengan menggunakan Dedicated Server Hosting pengguna bisa lebih fokus dengan konten bisnisnya dibandingkan me-manage server hosting itu sendiri. Hal ini karena manage server virtualnya sudah dilakukan oleh provider atau penyedia hosting.

Itulah beberapa jenis hosting dan pengertiannya. Semoga membantu dalam menentukan hosting yang untuk website anda.

7 Software Web Server yang Paling Sering Digunakan Programer

Software Web server merupakan sebuah aplikasi perangkat lunak yang berfungsi untuk menerima dan merespon permintaan atau request dari web browser. Contohnya user mengakses url website di browser yaitu "http://localhost/home" maka web server bertugas menerjemahkan url ini dan memberikan respon sesuai dengan yang di akses entah itu brupa menampilkan halaman web atau sebagainya.

Pada era sekarang terdapat berbagai macam aplikasi web server yang bisa digunakan. Namun dari banyaknya itu ada beberapa software yang paling sering digunakan. Berikut beberapa Software Web Server yang Sering Digunakan Programer.

1. XAMPP

XAMPP merupakan gabungan dari beberapa aplikasi yang dijadikan satu dan dapat dijalankan secara lengkap. X = Cross Platform, A = Apache, M = Mysql/MariaDB, P = Php, P = Perl. Aplikasi ini menjadi web server yang paling sering di gunakan di Indonesia terutama bagi pemula dalam dunia web. Aplikasi ini berada di bawah lisensi publik umum atau GNU yang artinya aplikasi ini bersifat gratis dan terbuka untuk public.

2. Apache HTTP Web Server

Apache HTTP Web Server merupakan salah satu web server yang paling populer saat ini. Apache diluncurkan pertama kali pada tahun 1995 dan dikelola oleh Apache Software Foundation. Apache HTTP Web Server bersifat open source yang artinya gratis digunakan oleh public. Selain itu software ini memiliki kemudahan konfigurasi dan tidak sulit bagi pemula.

3. Nginx

Nginx merupakan Web Server baru yang mulai diperkenalkan pada bulan Oktober 2004. Meskipun tergolong baru Nginx nyatanya mampu menarik perhatian para developer yang menjadikannya salah satu aplikasi Web Server paling populer. Salah satu keunggulan Nginx dibandingkan aplikasi serupa lainnya adalah kemampuannya dalam menangani jumlah koneksi yang banyak. Nginx sangat cocok digunakan untuk website yang membutuhkan trafik yang tinggi.

4. LAMP

LAMP merupakan singkatan dari Linux, Apache, Mysql, PHP/Perl/Python. LAMP adalah paket perangkat lunak bebas yang digunakan untuk menjalankan aplikasi secara lengkap. Oleh karena aplikasi ini terdapat Apache jadi LAMP juga bisa digunakan sebagai software Web Server. Sesuai dengan namanya LAMP ini dikhususkan untuk sistem operasi Linux.

5. WAMP

Berbeda dengan LAMP yang dikhususkan untuk Linux, WAMP dikhususkan untuk sistem operasi Windows. WAMP merupakan singkatan dari Windows, Apache, MySQL, PHP. Sama halnya seperti LAMP, WAMP ditujukan untuk menjalankan aplikasi secara lengkap.

6. AMPPS

AMPPS merupakan singkatan dari Apache, Mysql, MongoDB, PHP, Perl, Python dan Softaculous auto-installer. Aplikasi web server ini dibuat oleh Softaculous Ltd dan dapat di install pada sistem operasi Windows, Linux, dan MacOS.

7. IIS

IIS atau Internet Information Server merupakan web server yang digunakan oleh sistem operasi Windows. Software ini memiliki kegunaan utama sebagai pendukung protokol TCP/IP yang berjalan dalam lapisan aplikasi (aplication layer). Layanan yang diberikan seperti FTP, FTPS, SMTP, NNTP, dan HTTP/HTTPS.

Cara Membuat Menu Auto Fixed Ketika di Scroll | WEB

Auto Fixed disini biasanya banyak di terapkan pada web-website yang ingin memiliki tampilan atau design web yang lebih menarik. Jadi simpelnya ketika kita melakukan scroll ke bawah menu yang tadinya posisinya tetap akan berubah menjadi fixed di atas atau di bagian tertentu yang sudah di tentukan.

Untuk membuat tampilan website anda seperti ini sangatlah mudah anda bisa memanfaatkan fitur javascript. Sebagai contoh disini kita akan membuatnya dengan tampilan html sederhana seperti berikut :

Ketika anda melakukan aksi scroll maka tampilan akan menjadi seperti berikut :

Kode cara Membuat Menu Auto Fixed Ketika di Scroll


<!DOCTYPE html>
<html>
<head>
	<title>Coding Rakitan</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<style type="text/css">
		body{
			height: 2000px;margin: 0px;padding: 0px;
		}.bl{
			height: 200px;
		}
		.menu{
			height: 50px;
			background: #001b6a;
			width: 100%;
		}.fx{
			top: 0px;
			position: fixed;
		}.d-flex{
			display: flex;
			height: 100%;
		}.menu a{
			margin-right: 20px;
			margin-bottom: auto;
			margin-top: auto;
			color: white;
			font-family: sans-serif;
		}.m-auto{
			margin: auto;
		}h1{
			font-size: 83px;
			font-family: sans-serif;
		}
	</style>
</head>
<body >
<div class="bl">
	<div class="d-flex">
		<h1 class="m-auto">Coding Rakitan</h1>
	</div>
</div>
<div class="menu" id="menu">
	<div class="d-flex">
		<a>Menu 1</a>
		<a>Menu 2</a>
		<a>Menu 3</a>
		<a>Menu 4</a>
	</div>
</div>
<br>
<div class="d-flex">
	
	<img class="m-auto" style="margin-top: 0px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhKb401NNIMCTN4hLJY6sYbJ9doTZPWRvMrwj-KEsU6xJ1FurpHhGqjfj48_K3-VQehloD6MGwOd-7z-e4DuJlz-ijqigIQpIBqQdFzEVZJn0dKk81dyLR7tYSL2xvsi9US_iRtB-w7Ir1/s2518/Screenshot_2020-09-13+CODING+RAKITAN+INSPIRASI+CODING+TERUPDATE+android+studio+laravel+php.png" style="width: 700px;">
</div>
</body>
<script type="text/javascript">
	$(function(){

	  var menu = $('#menu');
	  pos = menu.offset();

	  $(window).scroll(function(){
	   if($(this).scrollTop() > pos.top+menu.height()){
		    menu.addClass('fx');
	   } else if($(this).scrollTop() <= pos.top ){
	    	menu.removeClass('fx');
	   }
	  });

});
</script>
</html>

Kode yang perlu anda perhatikan ada pada :


<script type="text/javascript">
	$(function(){

	  var menu = $('#menu');
	  pos = menu.offset();

	  $(window).scroll(function(){
	   if($(this).scrollTop() > pos.top+menu.height()){
		    menu.addClass('fx');
	   } else if($(this).scrollTop() <= pos.top ){
	    	menu.removeClass('fx');
	   }
	  });

});
</script>

Dimana pada kode javascript di atas menginstruksikan ketika terjadi scroll kebawah dan nilai over dari scroll ini lebih besar dari over menu maka tambahkan class fx pada menu, yang mana menu fx ini akan membuat position menjadi fixed dan berada di atas atau top 0px. Sedangkan bila kebalikannya bila terjadi scroll ke atas dan nilainya lebih kecil atau sama dengan menu over maka hapus kembali class fx yang membuat menu kembali seperti semula.

7 Framework atau Library CSS yang Bisa Kamu Coba

Para Developer Website khusunya yang bekerja khusus sebagai Front-end seringkali terkendala di masalah CSS, bukan karena pembuatannya melainkan produktivitas. Terkadang pembuatan Aplikasi Web menjadi ribet bila harus membangun CSS dari awal setiap ada project.

Hal ini bisa saja di atasi dengan membuat CSS sendiri, akan tetapi hal ini memerlukan waktu lagi. Belum lagi jika CSS yang dibuat terlalu banyak kadang kita lupa apa nama kelasnya.

Untuk meminimalisir atau mempermudah, developer dapat menggunakan Framework atau Library yang telah ada. Library ini biasanya sudah menyediakan documentasi sehingga, hanya tinggal mencari nama kelas yang ingin digunakan.

Daftar isi

1. Bootstrap
2. Semantic UI
3. Foundation
4. Materialize
5. Skeleton
6. Bulma
7. Metro UI

1. Bootstrap

Bootstrap merupakan library paling banyak digunakan saat ini. Hal ini tidak lepas dari bootstrap yang memiliki banyak documentasi dan komunitas. Banyak website yang telah menggunakan library ini dalam pembuatannya.

Tidak hanya menyediakan Library CSS, bootstrap juga menyediakan Library JS seperti bootstrap Validator yang dapat digunakan untuk memvalidasi sebuah form sebelum akhirnya data disimpan ke database.

Hingga postingan ini dirilis Boostrap telah sampai pada versi 4.5. Selain itu versi sebelumnya seperti v3.x, v2.x, dan v1.x masih bisa digunakan.

Untuk menggunakan boostrap silahkan kunjungi website resminya https://getbootstrap.com/.

2. Semantic UI

Semantic UI hadir dengan tampilan yang elegan, serta tentunya responsif. Selain itu framework ini mengusung konsep HTML yang ringkas dan ramah manusia.

Beberapa situs mengatakan bahwa Semantic memiliki struktur class yang bagus dan mudah dipelajari bagi pemula. Semantic UI disebut-sebut sebagai pesaing terberat dari Bootstrap. Jika anda sudah terbiasa dengan boostrap akan sangat mudah menggunakan Semantic sebab keduanya memiliki konsep yang hampir sama.

Untuk menggunakan Semantic UI silahkan kunjungi website resminya https://semantic-ui.com/.

3. Foundation

Sesuai dengan slogannya "responsive design gets a whole lot faster", Foundation membuat desain responsif menjadi lebih cepat.

Framework yang dikembangka oleh ZURB ini bersifat Open Source atau garatis. Hingga postingan ini di rilis Foundation telah sampai pada versi 6.

Beberapa website yang menggunaka Foundation seperti www.polar.com, projection.pixar.com, www.amazon.jobs, home.barclays serta masih banyak lagi.

Untuk menggunakan Foundation silahkan kunjungi website resminya https://get.foundation/.

4. Materialize

Materialize merupakan framework CSS yang dirancang oleh Google. Tujuan google membuat framework ini adalah mengembangkan sistem desain yang memungkinkan pengalaman pengguna terpadu di dalam semua produk mereka pada platform apa pun.

Untuk mengetahui lebih jauh tentang Materialize silahkan kunjungi website resminya https://materializecss.com/.

5. Skeleton

Skeleton cocok untuk membangun website skala kecil yang tidak memerlukan semua utilitas kerangka kerja yang lebih besar. Skaleton menggunakan penamaan grid yang mudah dimengerti oleh orang awam. Grid ini terbagi menjadi 11 mulai dari "one" sampai "eleven". Contoh untuk membuat grid dengan panjang "2/11" dituliskan :


<div class="two columns">
	//body
</div>

Untuk mengetahui lebih jauh tentang Skeleton silahkan kunjungi website resminya getskeleton.com.

6. Bulma

Bulma adalah framework CSS bersifat open source sehingga bebas digunakan developer manapun. Framework ini telah digunakan lebih dari 200.000 developer (sesuai yang tertulis di halaman resminya).

Berbeda dengan framework CSS lainnya yang biasanya menyertakan JavaScript, bulma hanya berupa CSS.

Ingin mempelajari Bulma lebih jauh kunjungi https://bulma.io/

7. Metro UI

Metro UI atau sekarang lebih dikenal dengan Metro 4 merupakan framework CSS yang dibuat di Ukraina. Framework ini tidak memerlukan pengetahuan Javascript untuk menggunakannya.

Metro UI dapat diakses atau di download dari NPM, Nuget, GitHub, dan Gitlab

Untuk mempelajari lebih jauh tentang Metro UI dapat diakses melalui https://metroui.org.ua/

Cara Penginstalan dan Konfigurasi MongoDB - Coding Rakitan

MongoDB merupakan salah satu jenis database NoSQL yang menyimpan datanya dalam bentuk json. MongoDB hadir dengan menyediakan skema database yang tidak kaku, artinya pengguna dapat dengan mudah menambahkan field dan isinya tanpa mendeklarasikan field terlebih dahulu.

Contohnya dalam MySQL untuk dapat menyimpan data terlebih dahulu harus membuat Tabel, kemudian mendeklarasikan isi field dalam tabel tersebut seperti nama field, panjang karakter, jenis karakter, sedangkan pada MongoDB hanya tinggal membuat nama databse lalu membuat tabel atau dalam hal ini disebut Collection. Setelah membuat Collection anda tinggal mengisinya dengan data yang di inginkan.

Karena bentuk penyimpanannya berupa JSON anda bebas menentukan nama dan isi data yang satu dengan yang lainnya. Contoh data yang akan disimpan dalam collection "user" seperti berikut.

 
[{
"nama" : "User 1",
"id" : 2,
"kota" : "Makassar"

},
{
 "nama": "User 2",
 "id": 3,
 "foto": null,
 "alamat":[{
  "kecamata": null,
  "kabupaten": null,
  "kota" : null
 }]
}
]

Pada contoh di atas bisa dilihat, meskipun berada dalam collection yang sama, akan tetapi field user1 dan user2 sedikit berbeda. Inilah yang menjadi salah satu keuntungan menggunakan MongoDB, yaitu bebas mendeklarasikan data tanpa harus mengikuti data yang sudah ada.

Untuk menggunakan MongoDB terlebih dahulu download aplikasi MongoDB di https://www.mongodb.com/. Klik tombol "Try Free" pada pojok kanan atas halaman web. Setelah itu akan muncul halaman baru silahkan klik "server seperti gambar di bawah" lalu pilih versio, OS, Package, sesuai kebutuhan anda, dan terakhir klik download.

Instal MongoDB

Setelah file berhasil di download silahkan klik dua kali pada file MongoDB tadi, trus lakukan penginstalan seperti pada umumnya.

Konfigurasi Path Database

Agar dapat menyimpan data, lakukan konfigurasi tempat penyimpanan database terlebih dahulu. Caranya, buat folder baru di "C:\data\db" atau silahkan buat sesuai keinginan anda.

Masuk ke folder bin MongoDB anda "C:\Program File\MongoDB\Server\4.0\bin" (Sesuaikan dengan folder MongoDB anda) kemudian pada address path silahkan ketikkan cmd sehingga nantinya cmd akan terbuka dengan direktori seperti gambar di bawah.

Selanjutnya pada layar cmd ketikkan perintah mongod.exe --dbpath "C:\data\db" lalu tekan enter dan tunggu hingga proses selesai. Folder "C:\data\db" adalah folder yang sudah dibuat sebelumnya. Setelah proses selesai, masih dalam tampilan cmd silahkan ketikkan perintah "mongo.exe". Jika muncul tampilan seperti gambar di bawah, tandanya MongoDB siap digunakan.

Cara Membuat Project Baru Django - Coding Rakitan

Sebelumnya dalam postingan Mengenal Apa itu Django dan Cara Penginstalannya kita telah menginstall django. Pertanyaan yang muncul selanjutnya adalah bagaimana cara memulai membuat project dengan django.

Caranya sangat mudah anda tinggal membuka CMD atau Command Promt lalu arahkan ke folder mana anda ingin membuat project baru. Setelah itu ketikkan perintah dibawah pada cmd.

 
django-admin startproject nama_web

Nama_web bisa anda ganti sesuai keinginan anda. Jika proses pembuatan selesai maka di folder yang tadinya anda arahkan untuk membuat project baru akan muncul direktori dengan struktur seperti berikut.

gambar

Pada contoh struktur di atas saya membuat project baru dengan nama belajar sehingga muncul folder baru dengan nama belajar. Berikut adalah penjelasannya.

Belajar - merupakan folder root atau utama yang menampung semua kebutuhan project web yang dibuat.
manage.py - file ini merupakan server yang akan mengolah project web yang dibuat. Agar server web dapat berjalan file inilah yang pertama kali di eksekusi ke CMD.
belajar/__init__.py - file ini merupakan file kosong yang menandai bahwa direktori ini adalah sebuah paket (python package).
belajar/settings.py - Seperti namanya file ini berisi konfigurasi project seperti database, auth, hingga language code.
belajar/url.py - file ini adalah tempat untuk mendeklarasikan url fungsinya sama dengan web.php pada routes laravel.
belajar/wsgi.py

Setelah project baru selesai dibuat maka pelajaran selanjutnya yang perlu diketahui adalah cara menjalankan project yang telah dibuat. Caranya sangat mudah anda tinggal menjalankan file manage.py dengan mengetikkan perintah python manage.py runserver dan tekan enter. Selanjutnya buka browser anda dan masukkan url "localhost:8000" dan tampilan pertama akan muncul seperti berikut.

Python merupakan salah satu bahasa pemrograman yang populer di kalangan para programer. Tidak hanya dapat digunakan untuk membangun aplikasi desktop, Python juga dapat digunakan untuk membangun aplikasi berbasis web. Salah satu framework website yang menggunakan bahasa python adalah Django.

Django adalah sebuah framework full-stack yaitu istilah yang berarti django meliputi sisi front-end dan juga back-end. Susunan tahapan yang harus anda lalui untuk dapat menggunakan framework django : Install python -> Install PIP -> Install Django.

Install Python

Agar dapat membangun web dengan framework django terlebih dahulu anda harus menginstall python. Anda dapat mendownload di halaman resminya disini. Setelah anda berhasil menginstall python, silahkan lakukan pengecekan untuk memastikan phyton sudah siap digunakan. Caranya buka Command Promt atau CMD lalu ketik "python --version", jika berhasil akan muncul informasi versi python seperti gambar dibawah.

Install PIP

Lanjut ke tahap penginstalan PIP yaitu sebuah pengolah package untuk python. PIP ini sama fungsinya seperti Composer untuk php atau NPM pada Node js. Pengolah package ini nantinya diperlukan untuk mendownload Django. Cara penginstalan PIP cukup mudah, silahkan download file get-pip.py, setelah itu buka cmd dan arahkan ke folder file get-pip.py berada. Selanjutnya ketik perintah "python get-pip.py" di cmd dan tunggu hingga proses instalasi selesai. Untuk dokumentasi lengkap penginstalan PIP dapat anda lihat disini.

Install Django

Tahap terakhir adalah menginstall Django cara sangat mudah anda tinggal buka CMD lalu ketik "pip install django" lalu tunggu hingga proses selesai. Untuk memastikan django telah terpasang, ketikkan perintah "django-admin --version" di CMD, jika muncul versi django seperti gambar di bawah maka selamat django anda siap digunakan.

Sekarang anda bisa memulai untuk membuat project dengan django. Untuk cara pembuatan project baru menggunakan django anda bisa melihatnya di Postingan : Cara Membuat Project Baru Django.

Apa itu Data GET dan POST dalam Dunia WEB

Didalam dunia pemrograman WEB dikenal dua jenis data yang dapat dikirim dari client ke server. Kedua data tersebut adalah GET dan POST.

Perbedaan keduanya cukup mencolok. Jika data GET dikirim dengan mendeklarasikannya kedalam URL seperti "http://codingrakitan.blogspot.com/?data=GET" sedangkan untuk data POST dapat dikirim dengan menggunakan TAG "<form action="url_aksi" method="POST"><input name="data_post" type="input" /></form> " dalam html.

Pengiriman data menggunakan POST inilah yang seringkali di jumpai pada halaman Login. Sedangkan data komunikasi GET biasanya digunakan untuk berpindah alamat.

Untuk mengambil data ini pada bagian server, juga berbeda-beda tergantung bahasa server yang digunakan. Pada PHP instruksi yang digunakan seperti berikut.

POST

 
  $data = $_POST['data_post'];

GET

 
  $data = $_GET['data'];

Sedangkan pada server menggunakan Node js dengan Express seperti berikut.
POST

 
  app.post('url', function (req, res){
   var data = req.body.data_post;
  })

GET

 
  app.get('url', function (req, res){
   var data = req.query.data;
  })

Mengenal Apa itu Front End Development, Back End Development, dan Full Stack Development

Bekerja di dunia pemrograman memang sangat menjanjikan. Tidak hanya karena banyaknya perusahaan yang membutuhkan jasa programer, akan tetapi seorang programer juga bisa membangun startup sendiri.

Sebagai seorang pemula dalam dunia pemrograman ada baiknya anda mengetahui 3 jenis pembagian berdasarkan spesialisnya.

Apa saja itu ?

Tiga spesialis yang dimaksud tersebut adalah Front End Development, Back End Development, dan Full Stack Development. Anda bisa memilih spesialis mana yang ingin digeluti.

Front End Development

Front End Development merupakan sebutan bagi mereka yang spesialisnya membangun aplikasi bagian depan atau tampilan yang nantinya akan di lihat oleh User. Bagian ini sangat sensitif dikarenakan user sekarang ini kebanyakan menilai aplikasi dari tampilannya saja.

Semakin cantik tampilan depan maka semakin banyak pula pelanggan yang akan memakai aplikasi anda. Apalagi jika aplikasi yang dibuat ditujukan untuk konsumen yang tidak mengerti pemrograman.

Seorang Front End Development juga harus menguasai bahasa pemrograman. Contohnya dalam dunia pemrograman web, Front End Development harus bisa mengusai html (bahasa untuk membuat kerangka), css (untuk membuat tema tampilan), serta Javascript (untuk membuat tampilan makin hidup).

Back End Development

Back End Development adalah sebutan untuk mereka yang spesialis pada bagian belakang aplikasi. Bagian ini mungkin tidak bisa di nampakkan seperti Front End Development namun menjadi bagian utama untuk menjalankan aplikasi.

Contohnya sederhananya adalah ketika anda melakukan proses login kedalam halaman website, kita tidak akan melihat proses apa yang terjadi hingga kita bisa sampai pada halaman Profile. Di bagian belakang tersebut ada kode dari Back End Development yang menentukan apakah akun kita terdaftar atau tidak, serta mengambil data-data yang akan di tampilkan pada halaman profile.

Seorang Back End Development dalam pemrograman berbasis web harus mampu menguasai bahasa yang berjalan di sisi server contohnya PHP (Hypertext Preprocessor), Javascript. Selain itu mereka haru bisa menguasai database seperti MySQL, MariaDB, MongoDB, dll.

Perusahaan-perusahaan sekarang ini juga menuntut para Back End Development untuk mampu menguasai Framework, hal ini sudah menjadi standar di banyak perusahaan. Salah satu alasannya dikarenakan perkembangan Framework yang terus-menerus, serta unggul dalam segi keamanan.

Full Stack Development

Full Stack Development, dari namanya mungkin kita sudah tahu artinya. Full Stack Development merupakan istilah untuk meraka yang membangun aplikasi dari bagian depan (Front End Development) ataupun bagian belakang (Back End Development).

Jadi Full Stack Development ini bisa di katakan sebagai gabungan dari Front End Development dan Back End Development. Salah satu keuntungan menjadi Full Stack Development adalah anda dapat memabangun aplikasi sendiri tanpa bantuan tim meskipun ini tentunya akan lebih berat untuk sebagian orang.

7 Framework PHP Terbaik dan Terpopuler versi Coding Rakitan

PHP merupakan singkatan dari Personal Home Page yaitu salah satu bahasa pemrograman berbasis web. Sebagai bahasa pemrograman web PHP menjadi primadona dikarenakan banyaknya framework yang menggunakan bahasa ini. Berikut beberapa framework PHP terkenal yang banyak digunakan.

Laravel

Laravel merupkan framework PHP yang selalu up-to-date dengan versi PHP. Laravel mengusung konsep MVC (Model, View, Controller) dalam penggunaanya. Laravel dirancang dengan tujuan meningkatkan kualitas aplikasi dengan murangi biaya pengembangan awal.

Untuk mengetahui lebih lanjut tentang laravel silahkan kunjungi Mengenal Apa Itu Laravel dan Cara Penginstalannya.

Codeigniter

Codeigniter merupakan salah satu framework PHP yang mengusung konsep MVC sama halnya seperti laravel. CI atau Codeigniter pertama kali dirilis pada tanggal 28 Februari 2006.

Untuk mengetahui lebih lanjut tentang Codeigniter silahkan kunjungi postingan Mengenal Apa itu Codeigniter (CI) beserta Sejarahnya

Symfony

Symfony dirilis pada tahun 2005 oleh Fabien Potencier. Dalam hal kualitas, tidak perlu dipertanyakan lagi sebab Symfony disusun berdasarkan standar PSR (PHP standard recommendation). Ketersediaan integrasi dari vendor library yang lain, menjadi salah satu keunggulan framework ini.

Symfony memiliki banyak dokumentasi yang ditulis dengan cermat, mencakup semua fituy Symfony. Untuk mendownload sekaligus melihat dokumentasi dari symfony silahkan kunjungi langsung halaman resminya disini.

CakePHP

CakePHP merupakan framework PHP bersifat open source yang dikembangkan oleh Cake Software Foundation. Tujuan utama dari CakePHP adalah menyediakan framework yang memungkinkan pengguna bekerja secara terstruktur dan cepat tanpa kehilangan fleksibilitas.

Dukungan dari tim pengembang serta komunitas yang aktif menjadi nilai tambah bagi CakePHP dalam mengait pengguna. Untuk mengetahui manfaat lain dari CakePHP silahkan kunjungi langsung disini.

Yii

Yii merupakan framework PHP yang dikembangkan oleh Yii Software LLC. Yii lahir dengan mengadopsi konsep MVC dalam struktur pemrogramannya.

Framework ini dirancang sebagai krangka kerja php berbasis komponen dengan performa tinggi untuk pembuatan aplikasi web berskala besar.

Diawal pengembangannya sejak 1 Januari 2008 oleh Qiang Xue (programer asal Tiongkok), framework Yii menggunakan bahasa kerangka kerja PRADO. Yii versi 1.0 akhirnya secara resmi di rilis pada 3 Desember 2008 setelah mengalami koreksi dan penyempurnaan.

The Zend Framework

Zend Framework merupakan framework php yang dikembangkan oleh Zend Technologies yaitu sebuah perusahaan perangkat lunak asal Amerika Serikat. Seperti halnya framework PHP kebanyakan, Zend juga mengadopsi konsep Model View Controller.

Framework ini juga bisa menggunakan Composer dalam penginstalan packagenya.

Hal yang membuat framework ini menjadi unik, dikarenakan Zend Framework menyediakan sertifikat resmi bagi yang ingin menjadi professional Zend Framework.

Zend Framework diluncurkan pertama kali pada 3 Maret 2006, untuk versi stabil 3.0.0 pada 28 Juni 2016. Framework ini ditulis dalam bahasa PHP 7 dan mendukung lintas platform.

FuelPHP

Salah satu framework PHP yang memiliki pengguna cukup banyak adalah FuelPHP. Framework ini termasuk sederhana dan fleksibel serta memiliki dukungan komunitas developer yang baik.

Pengguna FuelPHP akan disuguhi dengan kinerja framework ini yang minimalis, cepat, dan ringan serta clean syntax. Selain itu FuelPHP juga mendukung Composer, yang akan memudahkan programer dalam instalasi dependency FuelPHP pada project yang di kerjakan.

Pengguna Laravel atau Codeigniter tidak akan sulit beredaptasi dengan Framework ini dikarenakan FuelPHP juga mengusung konsep MVC.

Mengenal dan Menginstall XAMPP

XAMPP merupakan aplikasi atau perangkat lunak yang berfungsi sebagai server yang berdiri sendiri (localhost). Aplikasi ini bersifat open source yang dapat di install di berbagai platform seperti Windows, Linux, serta Mac OS.

Nama XAMPP adalah singkatan dari X (sistem operasi), Apache, MySQL, PHP dan Pearl. Seperti namanya XAMPP memang terdiri dari beberapa aplikasi yang disatukan. Aplikasi ini akan sangat membantu pengembang web dalam membangung sebuah aplikasi Web.

Kegunaan XAMPP

Ada beberapa kegunaan XAMPP yang perlu diketahui oleh pemula. Berikut kegunaan XAMPP tersebut.

Sebagai server
Penghubung ke Database
Membantu perancangan aplikasi web secara offline

Cara Instalasi XAMPP

Untuk menginstall XAMPP tidaklah sulit anda hanya perlu mengunduh file masternya disini.

Eksekusi hasil file yang telah di download.
Pada jendela baru klik Next

Centang semua aplikasi yang ada pada jendela selanjutnya lalu klik Next.

Jendela selanjutnya adalah untuk mengatur letak file instalasi XAMPP diletakkan, nantinya folder htdocs tempat anda meletakkan project web juga diletakkan disini. Jadi pastikan folder ini sudah sesuai dengan yang anda inginkan. Secara default folder instalasinya berada di C:\xampp

Silahkan klik Next untuk jendela-jendela yang muncul selanjutnya. Hingga proses instalasi dimulai seperti pada gambar dibawah.

Terakhir klik finish

Memulai Membuat Project dengan XAMPP
Project pertama ini kita mulai dengan membuat sebuah web sederhana yaitu hello world. Tutorial ini saya tujukan untuk pemula dalam dunia pemrograman web khususnya pemula dalam menggunakan XAMPP. Ikuti langkah-langkah di bawah ini.

Buka aplikasi XAMPP.
Klik tombol start pada Apache dan Mysql hingga warnanya menjadi hijau serta tombol statrt menjadi tombol stop seperti gambar dibawah.

Sekarang buka folder htdocs di lokasi penginstalan tadi. Saya sendiri lokasinya ada di C:\xampp\htdocs. Silahkan buat folder baru di dalam folder tersebut dengan nama "belajar" seperti gambar dibawah. Folder dengan lingkaran merah adalah folder yang baru saya buat sedangkan yang lainnya adalah project web yang pernah dibuat sebelumnya.

Buat sebuah file dengan nama index.html. Anda bisa menggunakan editor seperti sublime text, notepad++, atau sejenisnya.

<!DOCTYPE html>
<html>
<head>
<title>Belajar XAMPP</title>
</head>
<body>
<h1>Hello World !!</h1>
</body>
</html>

Buka browser internet anda seperti Mozilla atau Chrome. Ketikkan di alamt urlnya dengan localhost/belajar

Selamat belajar membuat aplikasi-aplikasi selanjutnya.