Bahas Tecno: Koding

Showing posts with label Koding. Show all posts

Friday, August 10, 2018

Studi Kasus | HTML5 & JavaScript | Membuat Bangun Datar

HTML5 Bangun Datar

Hadirnya HTML5 merupakan hal yang sangat menarik bagi para Web Developer. Hal ini sangat membantu para web developer dalam menangani berbagai kasus dalam proyek mereka. Kali ini saya akan memberikan tutorial bagaimana membuat berbagai Bangun Datar menggunakan HTML5 yang tentu saja dibarengi dengan JavaScript.

Buat kode HTML seperti biasa, kemudian masukkan tag canvas didalam tag body, berikan ID juga agar bisa dipanggil nantinya

Beri style di CSS agar canvasnya terlihat

Kita akan membuat bangun datarnya pada JavaScript, berikut kode lengkap serta penjelasannya

Script HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5</title>
<style>
#canvas{
border: 1px solid;
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.width = canvas.scrollWidth;
canvas.height = canvas.scrollHeight;

//persegiPanjang
ctx.fillStyle = "#FF006EFF"; //untuk setting warna
ctx.fillRect(20,20,400,200); // (posisi x,posisiy,lebar,tinggi)

//persegi
ctx.fillStyle = "#007F7FFF";
ctx.fillRect(460,20,200,200);

//segitiga
ctx.beginPath(); //untuk memulai titik
ctx.moveTo(680,220); // (posisi x,posisi y)
ctx.lineTo(880,220); //lanjut ke titik (posisi x,posisi y)
ctx.lineTo(780,20);
ctx.closePath(); //titik awal otomatis menyambung ke titik akhir
ctx.fillStyle = "#FF7F7FFF"; //setting warna
ctx.fill(); //mendeklarasikan warna

//---jika kalian ingin bordernya---
// ctx.strokeStyle = "red";
// ctx.stroke();
//--------------------------------------

//jajargenjang
ctx.beginPath();
ctx.moveTo(900,220);
ctx.lineTo(1200,220);
ctx.lineTo(1250,20);
ctx.lineTo(950,20);
ctx.closePath();
ctx.fillStyle = "#7F3300FF";
ctx.fill();

//lingkaran
ctx.beginPath();
ctx.fillStyle = "#0026FFFF";
ctx.arc(90,330,80,0,Math.PI*2); //(posisi x,posisi y,diameter,,bentuk lingkaran)
ctx.fill();
// 1/2 lingkaran
ctx.beginPath();
ctx.arc(290,330,80,0,Math.PI);
ctx.fill();

//layang-layang
ctx.beginPath();
ctx.moveTo(460,320);
ctx.lineTo(560,250);
ctx.lineTo(660,320);
ctx.lineTo(560,450);
ctx.closePath();
ctx.fillStyle = "#00FF21FF";
ctx.fill();

//belahKetupat
ctx.beginPath();
ctx.moveTo(700,350);
ctx.lineTo(780,250);
ctx.lineTo(860,350);
ctx.lineTo(780,450);
ctx.closePath();
ctx.fillStyle = "#21007FFF";
ctx.fill();

//trapesium
ctx.beginPath();
ctx.moveTo(900,450);
ctx.lineTo(1200,450);
ctx.lineTo(1130,250);
ctx.lineTo(970,250);
ctx.closePath();
ctx.fillStyle = "#FFE97FFF";
ctx.fill();
</script>
</body>
</html>

* untuk script yang berwarna kuning komentar

Untuk Study Kasus lainnya bisa di cek disini

Baca selengkapnya

Saturday, August 4, 2018

Kalkulator Sederhana dengan JavaScript (Versi 1)

Unknown 4:37 AM Komentar

Kalkulator JS

Berikut langkahnya.....

1. Buat Folder Kalkulator
2. Buat File

index.html
style.css
js.js

3. Isikan Script HTML ini pada file index.html (*penjelasan di bawah Script)

Script HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Kalkulator JS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main">
<h2>Kalkulator JS</h2>
<form name="formAngka">
<input type="text" name="isiText" autocomplete="off">
</form>
<table>
<tr>
<td><input type="button" value="C" onclick="hapusAll()"></td>
<td colspan="2"><input type="button" value="Bcksp" onclick="bcksp()"></td>
<td><input type="button" value="+" onclick="ins('+')"></td>
</tr>
<tr>
<td><input type="button" value="1" onclick="ins(1)"></td>
<td><input type="button" value="2" onclick="ins(2)"></td>
<td><input type="button" value="3" onclick="ins(3)"></td>
<td><input type="button" value="-" onclick="ins('-')"></td>
</tr>
<tr>
<td><input type="button" value="4" onclick="ins(4)"></td>
<td><input type="button" value="5" onclick="ins(5)"></td>
<td><input type="button" value="6" onclick="ins(6)"></td>
<td><input type="button" value="*" onclick="ins('*')"></td>
</tr>
<tr>
<td><input type="button" value="7" onclick="ins(7)"></td>
<td><input type="button" value="8" onclick="ins(8)"></td>
<td><input type="button" value="9" onclick="ins(9)"></td>
<td><input type="button" value="/" onclick="ins('/')"></td>
</tr>
<tr>
<td><input type="button" value="." onclick="ins('.')"></td>
<td><input type="button" value="0" onclick="ins(0)"></td>
<td colspan="2"><input type="button" value="=" onclick="samaDengan()"></td>
</tr>
</table>
</div>
<script src="js.js"></script>
</body>
</html>

* untuk script yang berwarna biru merupakan fungsi yang akan dipanggil pada file javascript nantinya
* untuk script yang berwarna kuning merupakan penghubung / link untuk menyambungkan ke file javascript dan css nya

4. Isikan Script CSS ini pada file style.css

Script CSS

* {

margin: 0;

padding: 0;

}

.main {

background-color: #00FF90FF;

position: absolute;

padding: 10px;

top: 50%;

left: 50%;

transform: translate(-50%,-50%);

border-radius: 5px;

box-shadow: 5px 4px 5px #A5A5A5FF;

}

h2 {

text-align: center;

font-family: sans-serif;

}

table {

width: 100%;

}

form input {

font-size: 22px;

margin: 5px;

padding: 5px;

height: 66px;

text-align: right;

}

table td input {

width : 100%;

background-color : #FF6A00EE;

padding : 5px;

font-size : 22px;

cursor : pointer;

border : 2px solid #000;

}

table td input:hover {

border : 2px solid #DAA67BFF;

}

5. Isikan Script JavaScript ini pada file js.js

Script JavaScript

var tampil = document.formAngka.isiText;

function ins(num) {

tampil.value += num;

}

function samaDengan() {

tampil.value = eval(tampil.value);

}

function bcksp() {

tampil.value = tampil.value.substr(0,tampil.value.length-1);

}

function hapusAll() {

tampil.value = "";

}

Oke, mudah bukan....
Next Post saya akan post tentang tutorial yang sama, tetapi akan berbeda penulisannya (semuannya ada didalam 1 file).
Selamat mencoba....

Baca selengkapnya

Tuesday, July 31, 2018

Koding Tutorial

Cara membuat kalkulator dengan PHP

Unknown 6:02 AM Komentar

Ini intro, hhh😁

Yo kali ini saya akan memberitahu kalian bagaimana cara membuat kalkulator dengan PHP. Kode ini merupakan gabungan dari HTML, CSS dan PHP. Tentunya kalian juga harus mengaktifkan dulu localhost nya.
Langsung saja berikut adalah baris kodenya...

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Kalkulator Sederhana</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Kalkulator</title>

<style>
.bg{
margin: 40px auto;
width: 400px;
padding: 10px;
background-color: #F4A34DFF;
text-align: center;
box-shadow: 5px 4px 5px #A5A5A5FF;
}
h2{
color: #fff;
}
form,#submit{

}
form,input,select,.hasil{
font-size: 18px;
width: 100%;
margin-bottom: 10px;
padding: 5px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#submit{
border:2px solid #0093FFFF;
border-radius: 10px;
color: white;
background-color: #0093FFFF;
cursor: pointer;
}
#submit:hover{
border:2px solid #0093FFFF;
color: #0093FFFF;
background-color: white;
}
</style>
</head>
<body>
<?php
if (isset($_POST['submit'])) {
$angka1 = $_POST['angka1'];
$angka2 = $_POST['angka2'];
$operator = $_POST['operator'];
switch ($operator) {
case 'tambah':
$hasil = $angka1 + $angka2;
break;
case 'kurang':
$hasil = $angka1 - $angka2;
break;
case 'kali':
$hasil = $angka1 * $angka2;
break;
case 'bagi':
$hasil = $angka1 / $angka2;
break;
}
}
?>
<div class="bg">
<h2>Kalkulator</h2>
<form action="kalkulator.php" method="post">
<input type="text" autocomplete="off" name="angka1" placeholder="Angaka Pertama">
<input type="text" autocomplete="off" name="angka2" placeholder="Angaka Kedua">
<select name="operator" id="operator">
<option value="">Pilih Operator</option>
<option value="tambah">+ (Tambah)</option>
<option value="kurang">- (Kurang)</option>
<option value="kali">* (Kali)</option>
<option value="bagi">/ (Bagi)</option>
</select>
<input type="submit" id="submit" name="submit" value="Hasil">
<div class="hasil">
hasilnya adalah
<?php
if (isset($_POST['submit']))
echo $hasil;
?>
</div>
</form>
</div>

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

.
Nah.. nanti akan seperti ini jadinya.....

kalkulator php

Sekedar saran, bagi yang masih belajar koding saya sarankan jangan langsung copy paste, tapi tulis ulang kode yang diatas. Karena akan lebih nempel di otak kalau kita menulisnya sendiri.
Selain menggunakan PHP, kalian juga bisa membuat kalkulator sederhana dengan JavaScript
Thankss.....

Baca selengkapnya