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

 

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.

 

Sails.js atau Sails merupakan salah satu framework Node Js yang di tujukan untuk membantu dalam membuat sebuah website. Sails hadir dengan mengusung konsep framework MVC atau Model View Controller.

Beberapa kelebihan menggunakan Sails.js seperti, kemampuan untuk menggenerate RESTful API secara otomatis, mendukung web socket secara default sehingga cocok untuk pembuatan website realtime. Selain itu Sails.js juga mudah dikombinasikan dengan angular, vue, ataupun react.

Keunggulan Sails.js

Framework tentunya dibuat dengan tujuan memudahkan penggunanya. Selain itu salah satu hal yang akan dipertimbangkan pembuat adalah perbedaan atau keunggulan framework tersebut dibandingkan framework lainnya.

Berikut beberapa keunggulan dari sails.js :

• Kemampuan untuk menggenerate RESTful API secara otomatis.
• Sangat cocok untuk pembuatan aplikasi Realtime sebab Sails secara default sudah mendukung web socket.
• Mudah di kombinasikan dengan react, angular, ataupun vue.
• Disupport oleh framework besar seperti express dan socket.io

Instalasi Sails

Sebelum melakukan instalasi pastikan anda sudah memasang Node Js. Jika belum silahkan pasang terlebih dahulu dengan mengikuti tutorial Cara Menginstall Node JS di Windows. Bila sudah silahkan lanjut penginstalan sails.

Buka cmd kemudian ketikkan perintah npm install sails -g, perintah ini untuk menginstall sails secara global sehingga nanti dapat digunakan di directory mana saja.

Untuk mengecek apakah sails sudah terpasang, ketikkan perintah sails -v jika muncul kode versi berarti sails berhasil dipasang dan siap digunakan.

Membuat Project Baru dengan Sails

Kemudian yang harus dipelajari pertama kali adalah bagaimana cara membuat project baru menggunakan sails. Sebagai contoh disini kita akan membuat project baru dengan nama hello_world.

Pertama-tama buka cmd dan arahkan ke folder atau directory anda akan membuat project baru. Jika sudah silahkan ketikkan perintah sails new hello_world. Nama project berada di paling belakang yaitu hello_world.

Setelah menekan enter akan muncul pilihan untuk memilih template, terdapat dua yaitu web app atau empty. Anda bisa memilih empty yang artinya kosong, sedangkan Web app jika anda ingin mendapatkan template dengan auth, login, dan recovery password (sudah terdapat fitur login).

Untuk tutorial ini silahkan pilih Web App dengan menekan angka 1 pada keyboard kemudian enter. Tunggu proses pembuatan selesai.  

Didalam folder project anda akan muncul struktur baru seperti pada gambar.



Untuk menjalankan project arahkan cmd untu masuk kedalam folder baru tersebut. Setelah itu ketikkan perintah sails lift, akan muncul tampilan seperti berikut.

Bagian penting yang perlu anda ketahui adalah pada PORT karena akan digunakan untuk mengakses web di browsr.

Silahkan buka browser anda bisa Chrome atau Mozilla, lalu ketikkan pada kotak url localhost:1337. Port 1337 sesuaikan dengan port yang muncul di CMD. Jika berhasil anda akan mendapati tampilan pertama sails seperti dibawah.

Tampilan pertama template Web App dengan empty berbeda, dapat anda lihat ketika menjalankan project di browser.

Tampilan Web App

 

Tampilan Empty

 

 

Express.js atau express merupakan framework Node js paling populer di dunia. Banyak perusahaan yang menggunakan Node Js akan menggunakan Express sebagai frameworknya. Ini tidak lepas dari banyaknya komunitas, serta dokumentasi tentang Express js yang memudahkan dalam membangun web. Selain itu express dirilis secara open source dibawah lisensi MIT yang berarti kodenya terbuka untuk umum.

Sebagai sebuah framework atau kerangka kerja express menawarkan fitur seperti routing, rendering view, serta mendukung middleware. Mungkin ada yang tidak tahu apa itu middleware ?.

Middleware merupakan istilah dalam dunia IT untuk perangkat lunak yang berperan sebagai penengah antara sebuah aplikasi dengan aplikasi lain. Salah satu kegunaan middleware adalah menyaring request yang masuk sebelum akhirnya di berikan kepada controller.

Framework express ini dapat di Install menggunakan NPM (Node Package Manager). Untuk cara penginstalannya sebagai berikut :

Menginstall Express.js

Untuk menginstall atau menggunakan express pada project web yang dibuat, bisa dilakukan dengan menginstall module terlebih dahulu dengan cara mengetikkan perintah npm install express --save pada CMD.

Kemudian terapkan express.js pada project, contohnya seperti kode di bawah :

 

 

Node Js sebagai platform perangkat lunak dalam pembuatan website memiliki banyak Framework yang dapat digunakan para programer. Tidak bisa dipungkiri penggunaan framework sangat bermanfaat dalam pembuatan aplikasi. Beberapa keuntungan menggunakan framework seperti.

• Pembuatan website atau aplikasi menjadi lebih cepat ini dikarenakan framework sudah menyediakan kebutuhan contohnya seperti koneksi ke database, programer tinggal memanggil kelas atau modul yang telah di sediakan framework.
• Pengkodean menjadi lebih sederhana.
• Memiliki banyak pengguna atau komunitas.
• Lintas Platform.
• Produktivitas yang lebih tinggi.

Sifat node js yang open source menjadi salah satu pendorong muncul berbagai macam framework. Diantara banyaknya framework node js tersebut ada beberapa yang mungkin tidak asing lagi. Berikut 7 Framework Node Js yang Palig Populer

1. Express.js

Express.js adalah framework Node.js yang sederhana namun merupakan framework tercepat. Fungsi utamanya untuk mengelola server dan rute komunikasi. Sebagai salah satu framework paling populer di dunia, express di dukung dengan komunitas serta dokumentasi yang melimpah, sehingga untuk mempelajarinya tidaklah sulit.

Untuk Mengetahui lebih jauh tentang express js ini silahkan baca postingan Mengenal Apa itu Express JS Hingga Cara Penginstalan.

2. AdonisJs

AdonisJs merupakan salah satu Framework node js yang dibuat oleh Harminder Virk, seorang programer asal India.

Bagi pengguna Laravel mungkin tidak akan susah untuk menyesuaikan diri dengan framework yang satu ini, sebab struktur dasarnya mirip. Ketika membuat project baru dengan AdonisJs ini anda akan melihat struktur atau directory baru seperti controller, middleware, hingga Models.

3. Hapi.js

Hapi.js banyak digunakan untuk membangun web service atau RESTful API (Aplication Programing Interfaces). Salah satu keuntungan menggunakan Hapi.js adalah ketersedian authentikasi atau (auth) secara built in. Untuk menginstall Hapi.js bisa dilakukan dengan menjalankan perintah npm install hapi --save.

4. Kraken.js

Kraken.js merupakan framework node js yang dibangun oleh PayPal Engineering dengan tujuan mendukung salah satu backend service mereka. Framework ini dibangun di atas Express.js dengan penambahan fitur seperti environment-aware, konfigurasi dinamis, kemampuan menggunakan advanced middleware, keamanan, serta app lifecycle event.

5. Sails.js

Sails.js dibangun layaknya framework populer saat ini yaitu dengan menerapkan kondep MVC. Beberapa kelebihan menggunakan Sails.js seperti, kemampuan untuk menggenerate RESTful API secara otomatis, mendukung web socket secara default sehingga cocok untuk pembuatan website realtime. Selain itu Sails.js juga mudah dikombinasikan dengan angular, vue, ataupun react. 

Baca : Mengenal Apa itu Sails.js dan Cara Penginstallan

6. Koa.js

Koa.js merupakan framework web Node Js yang dikembangkan oleh pembuat Express.js. Koa.js hadir dengan memanfaatkan generator sehingga memungkinkan anda untuk membuang callback yang biasa kita jumpai pada pembuatan web Node Js.

7. Meteor.js

Meteor.js merupakan framework Node Js terakhir dalam daftar ini. Framework ini pertama kali dikembangkan pada akhir tahun 2011. Sebelumnya bernama Skybreak kemudian diganti menjadi Meteor pada bulan Januari 2012. Meteor.js berlisensi MIT yang artinya framework ini bersifat open source.

 

Sebelumnya kita telah belajar bagaimana cara membuat project baru dengan Node Js pada postingan kali ini kita akan melanjutkan dengan membuat CRUD database MySql.

Untuk kamu yang belum tahu apa itu CRUD ?
Jadi CRUD merupakan singkatan dari Create Read Update and Delete, ini merupakan aksi yang bisa dilakukan pada database.

Sebelumnya pastikan komputer anda telah terpasang XAMPP atau sejenisnya yang dapat memberikan anda akses ke MySql. Jika sudah punya silahkan jalankan MySql.
 

 

Membuat Database

Buka http://localhost/phpmyadmin/ di browser anda, kemudian buat database baru dengan nama coba_app. Kemudian buat tabel dengan nama akun dengan field seperti berikut :
 

 

Keterangan :

• id_akun    INT (255) PRIMARY_KEY AUTO_INCREMENT
• username VARCHAR (255)
• password VARCHAR (255)
• nama_lengkap VARCHAR (255)

Membuat Koneksi ke Database

Setelah memiliki database yang siap untuk dihubungkan, langkah selanjutnya adalah membuat koneksi ke database tersebut. Caranya sebagai berikut.

1. Saat membuat project baru kita sudah memiliki 3 file di folder utama atau root yaitu index.js, package-lock.json, dan package.json.

Edit file index.js ini dengan kode seperti di bawah:

var http = require('http');
var express = require('express');
var bodyParser = require('body-parser');
var app = express();
var port = 8080;

// koneksi ke database
var mysql = require('mysql');
var db = mysql.createConnection({
    host: "localhost",
    user: "root",
    password: "",
    database:"coba_app"
});
db.connect(function(err) {
    if (err) throw err;
    console.log("Connected!");
});

Pastikan anda mengisi nama host, user, password, dan database sesuai dengan database anda. Disini saya menghubbungkan project dengan database bernama coba_app.

3. Menginstall beberapa module yang dibutuhkan seperti express, mysql, ejs, dan body-parser.

• mysql ketikkan perintah npm i mysql
• express ketikkan perintah npm i express
• ejs ketikkan perintah npm i ejs
• body-parser ketikkan perintah npm i body-parser

4. Mengecek apakah aplikasi sudah terhubung atau belum, caranya dengan menjalankan project tersebut. Buka cmd kemudian ketikkan perintah node index.js. Bila muncul keterangan "Connected!" seperti pada gambar berarti aplikasi sudah terhubung dengan database.
 

 

Beberapa Error yang Bisa Anda Temui

Jika anda melewatkan beberapa detail anda bisa saja mendapatkan keterangan error seperti pada gambar di bawah ini. Tapi tenang saya akan berikan cara penyelesaiannya.

MySql belum dijalankan

Bila muncul error seperti pada gambar di bawah ini berarti MySql anda belum jalan. Solusinya dengan membuka aplikasi XAMPP dan klik start pada MySql.
 

 

Database Tidak ditemukan

Jika nama database tidak ditemukan maka akan muncul error seperti pada gambar di bawah. Solusinya dengan membuat database baru dengan nama database yang ingin anda hubungkan dengan project.
 

 

Membuat Template

Template atau tampilan ini akan tampil pada saat aplikasi web di jalankan. Beberapa tampilan yang perlu dibuat adalah read.html, insert.html, update.html. Untuk memulainya silahkan buat folder baru dengan nama public didalam public buat 2 folder baru dengan nama asset dan view. Berikut struktur lengkapnya :
 

 

Edit beberapa file menjadi kode seperti dibawah :

read.html

<!DOCTYPE html>
<html>
<head>
	<title>Read Database</title>
	<link rel="stylesheet" type="text/css" href="../asset/css/css.css">
</head>
<body>
<div class="konten d-flex">
	<div class="card m-auto w-40">
		<div class="p-2">
			<h1 class="m-0">Daftar Akun</h1>
		</div>
		<div class="p-2">
			<table class="tg" style="width: 100%;">
				<thead>
					<tr>
						<td>No.</td>
						<td>Nama</td>
						<td>Username</td>
						<td>Aksi</td>
					</tr>
				</thead>
				<tbody>
					<%
					no = 0;
					for(var i=0;i<data.length;i++){
					no++;
					%>
					<tr>
						<td><%=no%></td>
						<td><%=data[i].nama_lengkap%></td>
						<td><%=data[i].username%></td>
						<td>
							<div class="w-100 d-flex">
								<button class="m-auto btn btn-success"><a href="/update?i=<%=data[i].id_akun%>">Edit</a></button>
								<button onclick="hapus('<%=data[i].id_akun%>');" class="m-auto btn btn-danger" >Hapus</button>
			
							</div>
					</td>
					</tr>
					<%}%>
				</tbody>
			</table>
		</div>
		<div class="p-2">
			<button class="btn btn-primary"><a href="/insert">Tambah Akun</a></button>
		</div>
	</div>
</div>
<script type="text/javascript">
	function hapus(i) {
		if (confirm("Hapus akun ini ?")) {
			window.location.href ="/hapus_akun?i="+i;
		}
	}

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

insert.html

<!DOCTYPE html>
<html>
<head>
	<title>Insert Database</title>
	<link rel="stylesheet" type="text/css" href="../asset/css/css.css">
</head>
<body>
<form action="/tambah_akun" method="post">
	<div class="konten d-flex">
		<div class="card m-auto w-40">
			<div class="p-2">
				<h1 class="m-0">Tambah Akun</h1>
			</div>
			<div class="p-2">
				<div class="form-group w-90">
					<label>Nama Lengkap</label>
					<input type="text" name="nama_lengkap" class="form-control">
				</div>
				<div class="form-group w-90">
					<label>Username</label>
					<input type="text" name="username" class="form-control">
				</div>
				<div class="form-group w-90">
					<label>Password</label>
					<input type="password" name="password" class="form-control">
				</div>
			</div>
			<div class="p-2">
				<button class="btn btn-primary"><a href="/insert">Simpan</a></button>
			</div>
		</div>
	</div>	
</form>
</body>
</html>

update.html

<!DOCTYPE html>
<html>
<head>
	<title>Update Database</title>
	<link rel="stylesheet" type="text/css" href="../asset/css/css.css">
</head>
<body>
<form action="/update?i=<%=data.id_akun%>" method="post">
	<div class="konten d-flex">
		<div class="card m-auto w-40">
			<div class="p-2">
				<h1 class="m-0">Edit Akun</h1>
			</div>
			<div class="p-2">
				<div class="form-group w-90">
					<label>Nama Lengkap</label>
					<input value="<%=data.nama_lengkap%>" type="text" name="nama_lengkap" class="form-control">
				</div>
				<div class="form-group w-90">
					<label>Username</label>
					<input value="<%=data.username%>" type="text" name="username" class="form-control">
				</div>
				<div class="form-group w-90">
					<label>Password</label>
					<input value="<%=data.password%>" type="password" name="password" class="form-control">
				</div>
			</div>
			<div class="p-2">
				<button class="btn btn-primary">Update</button>
			</div>
		</div>
	</div>	
</form>
</body>
</html>

css.css

body{
	margin: 0px;
	padding: 0px;
	font-family: 'calibri';
}
.konten{
	width: 100%;
	height: 100%;
	position: absolute;
	background: #00abff;
}.d-flex{
	display: flex;
}.m-auto{
	margin: auto;
}.card{
	min-height: 200px;
	background: white;
	border-radius: 4px;
	box-shadow:1px 1px 3px black;
}.w-10{
	width: 10%;
}.w-20{
	width: 20%;
}.w-30{
	width: 30%;
}.w-40{
	width: 40%;
}.w-50{
	width: 50%;
}.w-60{
	width: 60%;
}.w-70{
	width: 70%;
}.w-80{
	width: 80%;
}.w-90{
	width: 90%;
}.w-100{
	width: 100%;
}.p-2{
	padding: 20px;
}.m-0{
	margin: 0px;
} .tg  {
	border-collapse:collapse;
	border-spacing:0;
	border-color:#aabcfe;
	margin:0px auto;
} .tg td{
	font-family:Arial, sans-serif;
	font-size:14px;
	padding:10px 5px;
	border-style:solid;
	border-width:1px;
	overflow:hidden;
	word-break:normal;
	border-color:#aabcfe;
	color:#669;
	background-color:#e8edff;
} .tg th{
	font-family:Arial, sans-serif;
	font-size:14px;
	font-weight:normal;
	padding:10px 5px;
	border-style:solid;
	border-width:1px;
	overflow:hidden;
	word-break:normal;
	border-color:#aabcfe;
	color:#039;
	background-color:#b9c9fe;
}.btn{
	display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid
    transparent;
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;

}.btn-primary {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}.form-group {
    margin-bottom: 1rem;
}label {
    display: inline-block;
    margin-bottom: .5rem;
}.form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: 
#495057;
background-color:
#fff;
background-clip: padding-box;
border: 1px solid
    #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}.btn-danger {
    color: #fff; 
background-color: #dc3545;
border-color:    #dc3545;
}.btn-success {
    color: #fff;
background-color: #28a745;
border-color:     #28a745;
}

Terakhir edit kembali index.js seperti berikut :

index.js

var http = require('http');
var express = require('express');
var bodyParser = require('body-parser');
var app = express();
var port = 8080;

// koneksi ke database
var mysql = require('mysql');
var db = mysql.createConnection({
    host: "localhost",
    user: "root",
    password: "",
    database:"coba_app"
});
db.connect(function(err) {
    if (err) throw err;
    console.log("Connected!");
});


app.use(bodyParser.json());
var server =  app.listen(port, () => {
  console.info('listening on %d', port);
});	
app.use(bodyParser.urlencoded({
  extended: true
}));
app.engine('html', require('ejs').renderFile);
app.use(express.static('public'));

app.get('/', function (req, res) {
	let s = "SELECT * FROM akun";
	let query = db.query(s, (err, results)=>{
		var data = {
			data:results
		}
		res.render(__dirname+"/public/view/read.html", data);	
	});
	
});
app.get('/insert', function (req, res) {
	res.render(__dirname+"/public/view/insert.html");
});
app.get('/update', function (req, res) {
	let s = "SELECT * FROM akun WHERE id_akun='"+req.query.i+"'";
	let query = db.query(s, (err, results)=>{
		var data = {
			data:results[0]
		}
		res.render(__dirname+"/public/view/update.html", data);
	});
	
});

// insert data 
app.post("/tambah_akun", function (req, res) {
    let data = {nama_lengkap: req.body.nama_lengkap, username: req.body.username, password:req.body.password};
    let sql = "INSERT INTO akun SET ?";  
    let query = db.query(sql, data,(err, results) => {
       if (err) {
       		res.send({result:"error"});
       }else{
       		res.redirect("/");
       }
    });
});
//delete data
app.get("/hapus_akun", function (req, res) {
	 let sql = "DELETE FROM akun WHERE id_akun='"+req.query.i+"'";  
    let query = db.query(sql, (err, results) => {
       if (err) {
       		res.send({result:"error"});
       }else{
       		res.redirect("/");
       }
    });
});
//update data
app.post("/update", function (req, res) {
	let data = {nama_lengkap: req.body.nama_lengkap, username: req.body.username, password:req.body.password};
    let sql = "UPDATE akun SET ? WHERE id_akun='"+req.query.i+"'";  
    let query = db.query(sql, data,(err, results) => {
       if (err) {
       		console.log("error");
       		res.send({result:"error"});
       }else{
       		console.log("success");
       		res.redirect("/");
       }
    });	
})

Select Data Database MySql

Berikut kode untuk mengambil data dalam database mysql

app.get('/', function (req, res) {
	let s = "SELECT * FROM akun";
	let query = db.query(s, (err, results)=>{
		var data = {
			data:results
		}
		res.render(__dirname+"/public/view/read.html", data);	
	});
	
});

Insert Database MySql

Berikut kode untuk menginput data kedalam database mysql

app.post("/tambah_akun", function (req, res) {
    let data = {nama_lengkap: req.body.nama_lengkap, username: req.body.username, password:req.body.password};
    let sql = "INSERT INTO akun SET ?";  
    let query = db.query(sql, data,(err, results) => {
       if (err) {
       		res.send({result:"error"});
       }else{
       		res.redirect("/");
       }
    });
});

Delete Data Database MySql

Berikut kode untuk menghapus data di dalam database mysql

app.get("/hapus_akun", function (req, res) {
	 let sql = "DELETE FROM akun WHERE id_akun='"+req.query.i+"'";  
    let query = db.query(sql, (err, results) => {
       if (err) {
       		res.send({result:"error"});
       }else{
       		res.redirect("/");
       }
    });
});

Update Data Database MySql

Berikut kode untuk mengubah data di dalam database mysql

app.post("/update", function (req, res) {
	let data = {nama_lengkap: req.body.nama_lengkap, username: req.body.username, password:req.body.password};
    let sql = "UPDATE akun SET ? WHERE id_akun='"+req.query.i+"'";  
    let query = db.query(sql, data,(err, results) => {
       if (err) {
       		console.log("error");
       		res.send({result:"error"});
       }else{
       		console.log("success");
       		res.redirect("/");
       }
    });	
})

 

Bosan menggunakan PHP sebagai bahasa server web anda ?

Ingin mencoba hal baru atau ingin beralih menggunakan JavaScript. Node Js bisa menjadi penganti Web server anda.

Sebelum itu mari mengetahui apa itu Node Js dengan membaca Pengertia Node Js Beserta Kelebihannya.

Setelah mengetahui apa itu Node Js, hal yang harus dipelajari selanjutnya adalah bagaimana cara membuat project baru dengan node js. Untuk mengetahui hal tersebut disini kita akan membuat project baru Node Js yang akan menampilkan kata Hello world pada HTML.

Membuat Project Baru Node Js

Sebelumnya pastikan komputer anda sudah terinstal Node Js dan dapat digunakan. Untuk menginstall Node Js baca postingan sebelumnya mengenai Cara Menginstall Node JS di Windows. Jika sudah, mulailah mengikuti langkah-langkah dibawah.

1. Buat folder baru dengan nama "app_nodejs" (terserah anda mau meletakkannya di directory mana).
 

 

2. Buka CMD dan arahkan ke directory "app_nodejs".
 

 

3. Ketikkan perintah npm init. Kemudian isi beberapa informasi sesuai keinginan anda. Disini saya membuat semuanya secara default, kecuali bagian author saya menuliskan coding rakitan. Untuk beralih ke bagian selanjutnya tekan tombol enter.
 

 

4. Masih pada layar CMD ketikkan perintah npm install. 

 

5. Akan muncul beberapa file baru di folder root "app_nodejs" yaitu "package.json" dan "package-lock.json". Dalam file package.json akan tampak data json seperti berkut:

{
  "name": "app_nodejs",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "coding rakitan",
  "license": "ISC"
}

Bagian yang perlu diperhatikan ada pada "main":"index.js", berarti file main adalah file index.js. Sehingga anda perlu membuat file baru dengan nama index.js di folder root anda sehingga nantinya akan terdapat 3 file yaitu "package.json", "package-lock.json", dan "index.js". 

 

6. Edit file index.js dengan kode seperti dibawah.

var http = require('http');

var port = 8080;
http.createServer(function (req, res) {
	console.log("Aplikasi berjalan pada port : "+port);
  res.writeHead(200, {'Content-Type': 'text/html'});
  res.end('Hello World!');
}).listen(port);

7. Kembali ke layar CMD dan ketikkan perintah npm install.
 

 

8. Masih di layar CMD ketikkan perintah node index.js. Maka akan muncul tampilan seperti pada gambar dibawah.
 

Silahkan buka browser, dan ketikkan di kolom url localhost: ditambah port yaitu 8080 sehingga menjadi localhost:8080. 

 

Jika muncul tulisan Hello world seperti di atas, ini menandakan project web anda berhasil dibuat.

Sedikit penjelasan mengenai port. Port ini dapat anda ganti sesuai keinginan anda akan tetapi ada baiknya menggunakan 8080 karena web hosting node js biasanya akan meminta mengarahkan ke port ini, seperti di Hosting Rumahweb.

cara membuat guard atau proteksi url template vue - Pada kesempatan kali ini, saya akan membagikan tutorial pemrograman web. Yaitu framework front end vue js.

Seperti yang kita ketahui, di vue js terdapat sebuah file yang mengatur route dari seluruh template. Di route ini, kita bisa menambahkan url, nama, title, guard, dan lain sebagainya. Nah, kali ini kita akan fokus ke guard dalam route di vue js.

Vue Router

Apa itu Guard di Route Vue?
Guard adalah sebuah kode middleware yang dijalankan sebelum pengunjung web/user mengakses route tertentu. Hal ini berguna untuk memproteksi tampilan client. Jadi, sebelum user masuk ke template yang diatur oleh route, maka aksesnya akan ditahan sembari program mengecek status dari user tersebut. Jika sesuai dengan keinginan, maka akses route bisa dilanjutkan. Jika tidak sesuai, maka program lain akan dijalankan.

Middleware Melindungi Ini Aplikasi

Berikut ini cara menggunakan middleware guard pada route di vue js. Saya akan menampilkan kode program se-sederhana mungkin. Dalam tutorial ini, kita hanya bermain di satu file saja. Yaitu file route. (src/router.js).

Baca Juga: Membuat Route Bercabang Di Vue Js

Before Enter
Kunci dari penyisipan middleware di route adalah sebuah key bernama beforeEnter. Key ini terletak didalam objek route yang berada di dalam array routes[]. beforeEnter adalah key yang berisi sebuah function. Berikut ini contohnya.

./src/router.js

routes: [
    {
      path: '/',
      beforeEnter: function (to,from,next) {
        if (/* kondisi = true */) {
          next() // Silahkan masuk ke route ini
        }
        else{
          next({name:'home'}) // Dilempar ke route dengan name: home
        }
      },
      meta: { title: 'My App' },
      name: 'myApp',
      component: () => import('./views/MyApp.vue')
    }
]

Sekarang, mari kita bedah value function dari beforeEnter

function (to,from,next) {
  if (/* kondisi = true */) {
    next() // Silahkan masuk ke route ini
  }
  else{
    next({name:'home'}) // Dilempar ke route dengan name: home
  }
}

Function ini memiliki 3 argumen. Yaitu to, from, dan next.

to.
Argumen ini menampilkan informasi route yang akan diakses/dimasuki oleh user (route 'myApp').

from.
Argumen ini menampilkan route asal user sebelum memasuki route 'myApp'.

next.
Sebenarnya argumen ini adalah callback. Yang mana argumen ini akan berubah menjadi function next(). Jika function next() dijalankan, artinya user diizinkan masuk ke route.

Oke, sekian tutorial mengenai implementasi middleware guard di route vue js. Semoga artikel ini bermanfaat! Terima kasih!

cara menambah kode tracking google analytics di react js - Pada kesempatan kali ini, saya akan share tutorial untuk menambah kode track google analytics dengan mudah untuk frontend yang menggunakan react.

Baca Juga: Panduan Lengkap Memulai React Native di Windows

Di dalam react js, sebenarnya kita tidak perlu import ataupun menyisipkan script yang diberi oleh google analytics untuk melacak aktivitas user di situs. Karena sudah ada sebuah package yang mempermudah pengkoneksian tersebut. Package tersebut bernama react-ga

Berikut ini cara installnya

#Terminal

$ npm i react-ga

#Script

import ReactGA from 'react-ga';
ReactGA.initialize('ID TRACKING');
ReactGA.pageview(window.location.pathname + window.location.search);

Ganti ID TRACKING dengan id yang didapat ketika membuat property di google analytics. Kurang lebih bentuk idnya seperti ini: UA-000000-01

Semoga artikel kali ini bermanfaat! Terima kasih!

cara menjalankan function setelah template ter-render di vue js - Dalam pembuatan frontend web terkhusus menggunakan vue js, ada kalanya kode/function yang kita buat memerlukan hasil render template terlebih dahulu. Dalam kondisi ini, kita bisa memanfaatkan method bawaan dari Vue Js yang bernama NetTick.

NetTick adalah method vue js yang memungkinkan kode dijalankan setelah template di-render dari bentuk vue, ke html. Berbeda dengan mounted, dimana kode akan dijalankan setelah template vue dipasang (mounted), namun belum di-render.

Baca Juga: Membuat Route Di Vue JS Secara Terstruktur

Cara penggunaannya cukup mudah. Berikut ini adalah kodenya:

<script>
  mounted(){
    this.$nextTick(function () {
      $('.drag').draggable();
    })
  }
</script>

Kode didalam function tersebut akan dijalankan belakangan alias setelah template di-render.

Oke, sekian penjelasan singkat kali ini, semoga bermanfaat! Terima kasih!

cara try catch express js - Pada kesempatan kali ini, saya akan sharing mengenai cara handle error di express node js secara global. Sebelumnya, saya akan menjelaskan terlebih dahulu tentang apa itu handle error di express js dan mengapa harus dilakukan secara global?

Middleware Express Js Handling Error

Express Js Tidak Mempunyai Program Handle Error Bawaan
Mungkin kalian juga pernah mengalami. Jika kita membuat sebuah program menggunakan express js dan ada masalah dalam program, maka express akan menampilkan error di console dan server otomatis dimatikan. Hal ini dikarenakan program hanya menampilkan error lewat console sehingga proses running server di console menjadi terganggu sementara client (pengakses web) sedang menunggu response diberikan oleh server yang mana sedang error, sehingga proses di client hanya menampilkan loading terus menerus. Otomatis, running server server akan terhenti.

Oleh karena itu, untuk menghindari hal tersebut, diperlukan handling error. Jika kita menerapkan model try catch di tiap route, mungkin kurang lebih kodenya menjadi begini.

app.get('/',(req,res)=>{
  try {
   function_asal(); // function tidak terdefinisi (akan error) 
  } catch (e) {
  res.status(500).json({
      status: false,
      name: err.name,
      message: err.message
    });
  }
});

Tetapi masalahnya kita harus membuat kode try catch secara terus menerus di setiap routes. Hal itu sangat membuat capek untuk melakukan sesuatu secara berulang ulang dan kode menjadi tidak clean. Nah, disinilah kita harus menerapkan handle error di express js secara global.

Handle secara global artinya program handle error kita berlaku untuk seluruh routes yang ada. Jadi kita hanya perlu menambah kode handle error sekali lalu membuat program routes seperti biasa.

Caranya adalah dengan menambah kode ajaib ini dibagian akhir routes.

app.use((err, req, res, next) => {
 res.status(500).json({
   status: false,
   name: err.name,
   message: err.message
 });
});

Contoh script secara keseluruhan adalah seperti ini.

app.get('/',(req,res)=>{
    function_asal(); // function tidak terdefinisi (akan error)
});
app.get('/home',(req,res)=>{
    res.send('Selamat datang'); // function terdefinisi (tidak error)
});

app.use((err, req, res, next) => {
 res.status(500).json({
   status: false,
   name: err.name,
   message: err.message
 });
});

Jika kita mengakses url dengan function yang tidak terdefinisi, maka program akan error. Tetapi karena kita sudah menambah kode handling errornya dibagian paling bawah, error tidak akan mematikan running server.

cara menjalankan babel node di package forever - Babel adalah package node js yang dapat mengkonversi kode dari javascript biasa, ke ecmascript. Forever adalah package node js yang digunakan untuk tetap menjalankan node js secara terus menerus walaupun terminal sudah ditutup.

Jadi, dengan kita menjalankan perintah babel di forever node js, kita dapat menjalankan node js sambil mengkonversinya ke ecmascript secara terus menerus walaupun terminal sudah ditutup.

Berikut ini adalah perintahnya.

forever start -c "node -r babel-register" NAMA_FILE

contoh:

forever start -c "node -r babel-register" ./src/index.js

oke, itulah perintah untuk menjalankan babel di forever node js. Semoga bermanfaat! Terima kasih!

cara terbaru membuat webview react native - baru baru ini, react native memisahkan package webview. Jika dulu kita bisa memanggil fungsi WebView pada react native, sekarang alias di versi baru, kita harus menginstall webview secara terpisah.

Bagaimana cara terbaru dan terefektif untuk membuat webview di react native?

1. Pastikan react native dan emulator sudah terinstall di komputermu

Baca Juga: Panduan Lengkap Memulai React Native

2. Install React Native Webview
Ini adalah bagian yang paling penting. React native memisahkan fitur webview disini. Jadi, kita harus menginstallnya terlebih dahulu. Pada terminal direktori aplikasi react native, jalankan perintah berikut.

$ npm i react-native-webview

3. Masukan kode berikut ini untuk memulai webview

import React, {Component} from 'react';
import {WebView} from 'react-native-webview';

class MyWeb extends Component {
  render() {
    return (
      <WebView
    source={{uri: 'https://teziger.blogspot.com'}}
    javaScriptEnabled={true}
    domStorageEnabled={true} />
    );
  }
}

export default MyWeb

cara menjalankan node js di shared hosting - ada kalanya seseorang ingin menjalankan server node js di shared hosting yang sama sekali tidak ada fitur node js nya. Bisakah server tersebut dibuat untuk menjalankan node js?

BISA!
Kita bisa menjalankan aplikasi node js di server hosting. Yang penting di hosting tersebut terdapat akses SSH. Silahkan cek apakah paket shared hostingmu tersedia fitur SSH atau nggak :)

Baca Juga: Pengenalan dan Implementasi JWT di Node JS

Saya akan mencoba melakukan 5 hal berikut ini kepada server hosting saya:

1. Membuat sub domain (karena domain utama saya sudah terpakai)
2. Menginstall node js via NVM lewat ssh
3. Membuat project node js sederhana
4. Upload project node js ke folder sub domain
5. Menjalankan node js di sub domain tersebut sebagai server pengganti server hosting

Oke, mari kita mulai untuk menjalankan node di shared hosting.

1. Masuk ke halaman sub domain hosting/cpanel untuk membuat sub domain beserta folder baru untuk sub domain tersebut


2. Buka SSH hosting


3. Install NVM dengan memasukan perintah berikut di SSH

$ curl -sL https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh -o install_nvm.sh
$ bash install_nvm.sh
$ export NVM_DIR="$HOME/.nvm"
$ [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
$ nvm install 13.5.0

node js dan npm telah berhasil diinstall

4. Buat sebuah file node js sederhana lalu upload di subdomain yang telah dibuat tadi.


5. Buat file dengan nama .htaccess yang berisi:

Options +FollowSymLinks -Indexes
IndexIgnore *
DirectoryIndex
<IfModule mod_rewrite.c>
RewriteEngine on
# Simple URL redirect:
RewriteRule ^(.*)$ http://127.0.0.1:PORT/$1 [P]
</IfModule>

ganti PORT sesuai dengan di port berapa kamu menjalankan node jsnya.


6. Install "forever" package di npm. Package ini memungkinkan kita untuk menjalankan perintah node terus menerus walaupun ssh sudah ditutup. Install dengan memasukan perintah berikut di SSH

npm install -g forever

7. Jalankan file node js dengan menjalankan perintah berikut di ssh

$ cd (file sub domain)
$ forever start index.js

Dan taraa... Situs telah berjalan.


Untuk lebih jelasnya, berikut ini video tutorial mengenai cara run node di hosting:

apa bedanya dependencies dengan devDependencies? - Jika kita menggunakan teknologi node js, tentunya kita akan mengenal sebuah file bernama Package.json. File tersebut berisi evironment atau package apa saja yang digunakan di aplikasi web yang di-develop.


File package.json ini berfungsi untuk membantu server dalam mengetahui informasi aplikasi, dan menginstall paket apa yang digunakan secara otomatis. Informasi packagenya sendiri tersimpan dalam dependencies.

Baca Juga: Pengenalan Dan Implementasi JWT di Node JS

Namun terkadang kita menemukan key bernama dependencies dan devDependencies di package.json. Apa bedanya?

Perbedaannya cukup sederhana. Dependencies adalah kelompok package yang akan terinstall saat kita mendeploy aplikasi ke server. Biasanya, package akan masuk ke key dependencies jika dalam penginstallannya menggunakan perintah berikut ini.

npm i NamaPackage atau npm i NamaPackage --save

Secara umum, devDependencies adalah sebuah dependencies yang hanya digunakan untuk kebutuhan development yang tidak perlu ada ketika dideploy. Salah satu contohnya adalah nodemon, babel-cli, plop, dan lain lain. Package yang masuk ke devDependencies biasanya diinstall dengan perintah berikut ini.

npm i NamaPackage --save-dev

cara install react native beserta bahannya -  React native adalah program untuk membuat aplikasi mobile yang ditulis dalam bahasa javascript. React native mendukung 2 sistem operasi yaitu ios dan android hanya dengan sekali program. Hasil dari aplikasi yang dibuat dengan react native adalah aplikasi mobile yang benar-benar native (bukan web view).

Baca Juga: Cara Terima Semua Lisensi SDK Android di Windows/Linux

Artikel kali ini akan menjelaskan secara singkat dan lengkap tentang apa saja yang dibutuhkan untuk memulai react native sebagai persiapan awal dan cara installnya.

A. Perlengkapan Yang Harus Diinstall
1. Android Studio. Download Disini
2. Java Development Kit (JDK). Download Disini
3. Node Js. Download Disini
4. Genymotion Android Emulator + Virtual Box. Download Disini
5. Python2. Download Disini

Pastikan seluruh perlengkapan sudah terinstall dengan sempurna.

B. Setting Environment Variable
1. Klik start, lalu cari environment variables

Buka System Environment Variables

2. Klik Environment Variables

Buka Environment Variables Windows

3. Pada User Variable, klik New, lalu tambahkan seperti yang ada di kotak merah

Tambah User Variables

*Keterangan: Untuk value ANDROID_HOME dan JAVA_HOME, silahkan sesuaikan dengan lokasi folder SDK (bersama Android Stuido) dan JDK di komputer mu. Jika kamu menginstall Android Studio dan JDK secara default, kamu bisa memasukan value berikut ini.

ANDROID_HOME:

C:\Users\USERNAME_KOMPUTER_MU\AppData\Local\Android

JAVA_HOME:

C:\Program Files\Java\jdkVERSI_JDK_MU

C. Install React Native
1. Buka CMD sebagai admin

Buka CMD Sebagai Administrator

2. Masukan perintah:

npm i -g react-native

Install React Native

3. Tutup CMD

D. Menjalankan Android Emulator
1. Buka aplikasi Genymotion (aplikasi android emulator yang cukup ringan).

2. Pilih device android/ios mana yang ingin dijadikan emulator. Lalu klik ikon titik 3 vertikal, lalu Install

Install Device Android

3. Setelah device diinstall, scroll ke paling atas. Kamu akan menemukan My Installed Device. Start device yang sudah diinstall tadi.

Start Device Emulator

4. Emulator akan terbuka. Biarkan emulator tetap terbuka

Emulator Berhasil Berjalan

E. Membuat Projek React Native
1. Buat folder untuk install aplikasi react native, lalu buka cmd dan arahkan ke folder tersebut.

Buka CMD di Directory Khusus React Native

2. Masukan perintah berikut

react-native init reactnative1

Init React Native

3. Akan muncul folder bernama reactnative1 yang sudah berisi program react native

Folder Yang Berisi Program React Native

4. Change Directory cmd ke folder reactnative1. Masukan perintah berikut.

cd reactnative1

5. Karena tadi saya install device Samsung Galaxy S9 di Genymotion (Android), maka untuk menjalankan react native di emulator, masukan perintah berikut ini.

react-native run android

Jika kamu menginstall device lain dengan OS ios di emulator, masukan perintah.

react-native run-ios

Run React Native

6. Buka emulator Genymotion

Emulator Berhasil Berjalan

G. Coba-coba edit React Native
1. Buka folder reactnative1 di text editor

2. Buka App.js, lalu coba-coba edit deh..

Edit React Native

Oke, itulah tutorial singkat tentang cara install react native di windows dan bahan apa saja yang diperlukan. Semoga bermanfaat! Terima kasih!