Cara Membuat Form login Html Tanpa Database

Halo sobat setia syarif soden, ketemu lagi nih di blog adityadees. Pada kesempatan kali ini mimin mau share Cara membuat Form Login HTML tanpa MYSQL.

Untuk program ini sebenaranya sederhana, namu saya menambahkan beberapa animasi yaitu pada form login nya yang memiliki animasi bounce down saat baru dibuka.

Serta pada background program ini saya menambahkan animasi gradient animasi, yaitu animasi warna berjalan.

Oke langsung saja kita ke tutorialnya

Cara Membuat Form Login Html Tanpa Database Mysql

Sebelumnya kalian bisa membuat file seperti ini

Cara Membuat Form Login Html Tanpa Database

Index.php

Pada file index.php ini kita akan membuat desain form untuk pengecekan session login. Yang mana jika session login pengguna masih tersimpan maka tampilan yang akan ditampilkan browser adalah tampilan berhasil login, jika session pengguna sudah kadaluarsa maka form akan di redirect ke login.php untuk melakukan login.

Style.css

Pada file style.css ini kita buat desain layout / desain tata letak form login nya. Untuk form login ini saya memberikan beberapa efek yaitu background animasi warna berjalan dan animasi bounce down.

Login.php

Pada file login.php ini kita akan membuat proses validasi atau pemeriksaan username dan password yang dimasukan saat login. Jika username dan password yang dimasukan benar, maka user yang telah berhasil login akan dicatat pada session login

Logout.php

Pada file logout.php ini kita isi dengan source code session destroy untuk menghapus seesion pada halaman login.

Proses_Login.php

pada file Proses_Login.php ini program akan melakukan pengecekan username dan password yang dimasukan user pada saat melakukan login, jika username dan password benar maka user berhasil login.

Oke sekian dulu tutorial mebuat Form Login HTML tanpa Database MYSQL. Silahkan tinggalkan komentar jika aada yang kurang jelas dam semoga bermanfaat untuk kita semua

Cara Menampilkan Data dari Database MYSQL ke HTML

Cara menampilkan data dari database ke tabel HTML bukan hanya menggunakan bahasa pemrograman HTML saja, tapi dikombinasikan juga dengan bahasa pemrograman PHP. Artikel kali ini akan membahas bagaimana cara mudah untuk menampilkan data dari database. Langsung saja, simak langkah-langkahnya di bawah ini.

Cara Menampilkan Data dari Database ke HTML

Sebelum Kalian membuat file-file yang dapat menampilkan data dari database, pastikan Kalian sudah memiliki database yang akan ditampilkan datanya. Berikut ini contoh database yang bisa Kalian ikuti:

1. Membuat Script Koneksi.PHP

Hal pertama yang harus Kalian lakukan adalah sediakan 3 file kosong. File-file tersebut digunakan untuk membuat file koneksi.php, file css, dan file untuk menampilkan data. Pertama-tama kita akan membuat file koneksi.php terlebih dahulu.

File ini yang berfungsi untuk menghubungkan Kalian dengan database dan dapat mengambil data dari database. Sebenarnya nama filenya tidak harus koneksi.php yang terpenting file yang Kalian buat disimpan dalam bentuk format .php karena jika kalian menyimpan script ini dalam format .html, maka proses tidak akan berjalan.

Berikut ini contoh script koneksi.php yang bisa Kalian gunakan.

Jika Kalian sudah menggunakan PHP 7 keatas, maka tidak disarankan untuk 

menggunakan fungsi mysql_xxx karena sudah tidak berlaku, melainkan silakan gunakan mysqli_xxx atau PHP PDO untuk koneksi, query data, dan menampilkan data.

Script yang perlu Kalian ubah dari contoh scrip di atas adalah:

$servername = "localhost"; -> Adalah server local kita 

$Username = "root"; -> Adalah username untuk mengakses database di localhost secara default

$Password = "";  -> Silakan Kalian ubah jika Kalian menggunakan nama user dan password custom untuk mengakses database.

$Database = "test";-> Adalah nama database yang akan kita gunakan

2. Membuat Script Menampilkan Data

Berikutnya adalah membuat query yang berfungsi untuk menampilkan data dari database Kalian. Disini sebagai contoh saya membuat nama filenya data.php. Silakan sesuaikan dengan keinginan Kalian, yang penting file tersebut tersimpan dalam format .php karena akan ada query php di dalam file tersebut. Langsung saja simak contoh script nya di bawah ini.

Simak penjelasannya di bawah ini:

Terdapat script PHP di tengah-tengah tabel. Script tersebut yang berfungsi untuk menampilkan data dari database Kalian.

include('koneksi.php'); -> Untuk memanggil file koneksi.php yang sudah Kalian buat di awal tadi.

$no = 1; -> Deklarasi awal bahwa nomor akan dimulai dari angka 1.

mysqli_fetch_array -> Untuk mengambil data MySQL yang akan menghasilkan associative array dan indexed array.

<td>’.$no.'</td> -> Untuk mencetak output ke tabel.

$no++; -> Operator increment yang digunakan untuk membuat nomor urut.

3. Membuat Script CSS

Setelah file koneksi.php dan data.php sudah selesai, langkah selanjutnya Kalian bisa menambahkan CSS untuk membuat tampilan menjadi semakin lebih menarik. Berikut ini contoh script CSS yang bisa Kalian gunakan.

Script CSS bisa Kalian modifikasi sesuai dengan keinginan dan kebutuhan Kalian. Jadi, jangan terlalu terpaku dengan contoh script di atas. Berikut ini contoh tampilan dari script-script di atas.

Cara Menampilkan Data dari Database MYSQL ke HTML

Sekian artikel kali ini yang membahas tentang bagaimana cara menampilkan data dari database ke HTML dengan mudah. Semoga artikel ini dapat membantu dan bermanfaat untuk kalian. Terimakasih

Cara membuat Login dengan HTML PHP dan MYSQL dilengkapi keamanan MD5

Halo sobat setia syarif soden, ketemu lagi nih di blog adityadees. Pada kesempatan kali ini mimin mau share Cara membuat Login dengan HTML PHP dan MYSQL dilengkapi keamanan MD5.

Tapi sebelumnya kalian perlu tahu dulu apa itu md5?

Mengutip dari Wikipedia, MD5 adalah singkatan dari “Message –Drest Algorithm 5”. Dan merupakan sebuah algoritma fungsi hash dari sistem kriptografi yang digunakan dengan hash value 128-bit.

Cara membuat Login dengan HTML PHP dan MYSQL dilengkapi keamanan MD5

Index.php

Pada file index.php ini kita akan membuat desain form untuk login. Yang mana nantinya user akan memasukkan username dan passwordnya disini.

Style.css

Pada file style.css ini kita buat desain layout / desain tata letak form login nya. Untuk form login ini saya memberikan beberapa efek yaitu background animasi warna berjalan dan animasi bounce down.

Login.php

Pada file login.php ini kita akan membuat proses validasi atau pemeriksaan username dan password yang dimasukan saat login. Jika username dan password yang dimasukan benar, maka user yang telah berhasil login akan dicatat pada session login

Config.php

Pada file config.php ini kita akan membuat penghubung antara form login dan database yang telah kita buat. 

Logout.php

Pada file logout.php ini kita isi dengan source code session destroy untuk menghapus seesion pada halaman login.

Register.php

pada file register ini kita buat form untuk registrasi data baru

Selanjutnya kita buat database dengan nama test dan tabel dengan nama user, untuk strukturnya seperti ini:

database:

Perlu dicatat! jika kalian ingin menggunakan enkripsi MD5 pada database mysql kalian wajib membuat tabel password dengan panjang karakter 255

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:

1. 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.
2. 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:

1. 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.
2. Pastikan semua folder zip sudah diekstrak sehingga nantinya akan mendapat susunan direktori yang lengkap.
3. Buka teks editor dan buat file index.html dan diisikan beberapa kode. Jangan lupa, gunakan juga file Bootstrap dan library yang lainnya.
4. 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: 

<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js”></script>

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.

Form Booking Hotel HTML

Oke sahabat setia syarif soden, ketemu lagi nih di blog Syarif Soden. Pada kesempatan kali ini kita akan belajar membuat program Form Booking Hotel dengan HTML tanpa database, jadi program ini di khususkan bagi pemula yang baru kenal dengan HTML.

Transaksi dalam sebuah website adalah suatu kegiatan yang dilakukan oleh user yang dapat menimbulkan perubahan pada suatu data. Sebuah transaksi berfungsi untuk merekam segala perubahan data dan mencegah data dari kehilangan ataupun kerusakan, setelah transaksi selesai dilakukan, maka data tersebut biasanya disimpan disuatu database, tetapi di tutorial ini saya tidak menggunakan databse karen didalam program ini tidak ada tombol input.

Alat Yang Dibutuhkan Untuk Membuat Form Booking Hotel HTML

Berikut adalah alat / software yang harus dipersiapkan untuk membuat form booking hotel dengan HTML ini. 

Web Browser = (Mozila, Chrome, atau lainnya).

Text Editor = (Sublime, Notepad++, atau lainnya). 

Inputan Program Form Booking Hotel HTML

Program Form Booking Hotel ini bertemakan pemesanan sewa Hotel dan program tersebut memiliki beberapa inputan yaitu diantaranya.

Lokasi (input type Text)

Tanggal check in (date picker)

Tanggal check out (date picker)

Jumlah ruangan/Room (input type number)

Ruangan Untuk Dewasa/Adults (input type number)

Ruangan Untuk Anak-Anak/Kids (input type number)

silahkan kalian buka aplikasi teks editor kalian, Disini saya menggunakan teks editor Notepad++.setelah kalian membuka aplikasi teks editor selanjutnya buat file baru lalu masukkan kode dibawah ini.

Source Code Form Booking Hotel HTML

Simpan source code tersebut dengan nama file hote.html atau beri nama bebas yang penting akhiri dengan ekstensi atau format .html (ingat folder tempat menyimpan file hasil kodingan tadi ya sob).

Untuk mengetesnya kalian bisa cari file hasil kodingan tadi lalu klik kanan pada file itu dan klik open as, selanjutnya pilih google chrome.

Demo Form Booking Hotel HTML

jika kalian ingin merubah gambar pada backgroun silahkan ganti link background-image pada kode css  dengan link foto kalian.

Oke, mungkin itu dulu yang bisa sya bagikan malam ini. Dan mulai dari sekarang, mungkin saya bakal sering berbagi sedikit ilmu tentang HTML, kalo ada pertanyaan, saran, dan masukan bisa tulis via komentar di bawah ini.

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.

<?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
);

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

  <?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();
	}
}

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 

<?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);
	}
}

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.
 

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

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

Sejarah Bahasa Pemrograman JavaScript

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;
    }

<?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>";
}
?>

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

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

2. Tampilkan data pada View

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

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. 

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

4. Atur file php.ini

5. Atur httpd.conf pada xampp

        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>

6. Atur httpd-xampp.conf pada xampp

        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>

7. Jalankan XAMPP

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.

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.

1. Shared Hosting

2. VPS (Virtual Private Server) Hosting

3. Cloud Hosting

4. Dedicated Server Hosting

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.

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 :
 

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/AVvXsEgk3nb96wyoODwOXzBE6xQGPdw9zoADthIuOeVoWIaxNlwkQOSV-vtZwBkpxJDWSHdnBtNuivJBdT1iq4o4BOpPAlPwHuPcf6IfKo6DVIz4PxKcqeO68ogxdWitn5TlrQVxUawYD12pUaNB/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>

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

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.

1. Bootstrap

2. Semantic UI

3. Foundation

4. Materialize

5. Skeleton

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

6. Bulma

7. Metro UI

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

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

 

Instal MongoDB

Konfigurasi Path Database

 
django-admin startproject nama_web
 

• 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