Berikuti ini merupakan contoh project sederhana yang kami rancang untuk tugas besar mata kuliah mikroprosesor. Project arduino uno dengan rangkaian fritzing - Light Alarm.
Light alarm merupakan yang rangkaian yang bekerja dengan sensor buzzer/resistor foto, saat LEDs merah berkedip terus dan ketika lampu dimatikan, maka alarm akan berbunyi di ikuti dengan nyala LEDs hijau + merah di belakangnya. Project ini terinspirasi dari Light Activated Alarm by HailStorm.
Project ini memiliki tingkat kesulitan yang rendah, jadi bagi kalian yang masih pemula dapat menerapkannya dengan mudah. Untuk perangkat - perangkat yang dibutuhkan dalam merancang rangkaian ini adalah sebagai berikut :
- 1 Arduino Uno
- 1 Prototype Shield (boleh ada boleh tidak)
- 12 Kabel
- 1 Breadboard
- 1 Buzzer 12mm
- 2 Red LEDs 3mm
- 1 Green LEDs 3mm
- 1 Photo Resistor
- 3 10k Ohm Resistor
- 1 1k Ohm Resistor
Jika semua alat sudah ada maka selanjutnya kalian rangkai menjadi rangkaian seperti gambar dibawah ini :
Untuk project lengkapnya berisi (coding + rangkaian pada software Fritzing) dapat kalian download disini
Sekian, semoga bermanfaat dan semoga tugasnya terbantu.
Contoh Project Arduino Uno Sederhana + Rangkaian Fritzing (Light Alarm)
Posted by RZDev: Belajar Programming! on Tuesday, January 16, 2018
Perkembangan smartphone jaman sekarang sangat pesat, seperti yang kita ketahui sendiri smartphone menjadi kebutuhan primer sekarang ini. Hampir setiap orang dari semua kalangan memiliki smartphone di tangan mereka. Baik smartphone high-end hingga low-end. Berbagai macam smartphone sudah di rilis dengan fitur - fitur andalan mereka, jika kita melihat di masa lalu kalian pasti akan kenal dengan smartphone BlackBerry. BlackBerry merupakan cikal - bakal ponsel pintar yang kalian gunakan sekarang ini, pada masanya hanya BlackBerry-lah yang mempunyai fitur "PUSH Mail".
Push Mail, merupakan fitur yang berfungsi untuk mengeluarkan notifikasi secara otomatis jika ada email yang masuk. Dahulu kebanyakan orang harus mencek secara manual email yang masuk namun tidak dengan BlackBerry. Hal tersebut membuat ponsel pintar BlackBerry menjadi booming hingga ditambahkan fitur "Instant Message BBM". BBM membuat blackberry semakin laku keras di pasar global, hal tersebut membuat mungkin membuat blackberry hanya berfokus pada marketing namun mereka tidak menyadari munculnya para pesaing yang akan menggeser mereka seperti IPhone dan Android dari Google. Selengkapnya akan dibahas pada slide dibawah ini :
Semoga bermanfaat dan semoga tugasnya terbantu
Presentasi Tentang Operasi Sistem BlackBerry
Posted by RZDev: Belajar Programming! on Monday, January 15, 2018
Selamat malam, sekarang kita akan belajar bagaimana cara membuat form di HTML 5, form kali ini hanya form dasar atau form yang sangat sederhana. Kalian dapat kembangkan lagi syntaxnya agar menjadi form yang lebih kompleks.
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Form HTML 5</title>
</head>
<body>
<h1> Example Form</h1>
<p>Please fill out this form to help us improve our site.</p>
<form method = "post" action = "http://www.rezkycpp.com">
<input type = "hidden" name = "recipient" value = "www.rezkycpp.com">
<input type = "hidden" name = "subject" value = "FeedBack Form">
<input type = "hidden" name = "redirect" value = "index.html">
<p><label>Name:
<input name = "name" type = "text" size = "25" maxlength = "30">
</label></p>
<p>
<input type = "submit" value = "Submit">
<input type = "reset" value = "Clear">
</p>
</form>
</body>
</html>
<html>
<head>
<meta charset = "utf-8">
<title>Form HTML 5</title>
</head>
<body>
<h1> Example Form</h1>
<p>Please fill out this form to help us improve our site.</p>
<form method = "post" action = "http://www.rezkycpp.com">
<input type = "hidden" name = "recipient" value = "www.rezkycpp.com">
<input type = "hidden" name = "subject" value = "FeedBack Form">
<input type = "hidden" name = "redirect" value = "index.html">
<p><label>Name:
<input name = "name" type = "text" size = "25" maxlength = "30">
</label></p>
<p>
<input type = "submit" value = "Submit">
<input type = "reset" value = "Clear">
</p>
</form>
</body>
</html>
Nah itu tadi script untuk "cara membuat form sederhana di HTML 5", semoga dapat membantu tugasnya, sukses selalu!
Berikut beberapa input type yang sering digunakan di HTML 5
Berikut syntaxnya, semoga bermanfaat dan lancar buat tugasnya
<!DOCTYPE html>
<!-- Fig. 3.1: newForminputtypes.html -->
<!-- Di ketik oleh rezkycpp -->
<html>
<head>
<meta charset="UTF-8">
<title>Latihan web desain</title>
</head>
<body>
<h1> New HTML5 Input types Demo</h1>
<p>This form demonstrates the new HTML5 input types and the placeholder, required and autofocus attributes
</p>
<form method="post" action="http://www.deitel.com">
<p>
<label>Color:
<input type = "color" autofocus />
(Hexadecimal code such as #ffffff)
</label>
</p>
<p>
<label>Date:
<input type ="date" />
(yyyy-mm-dd)
</label>
</p>
<p>
<label>Datetime-local:
<input type = "datetime-local"/>
(yyyy-mm-ddThh:mm+ff:gg, such as 2012-01-27T03:15)
</label>
</p>
<p>
<label>Email:
<input type ="email" placeholder ="nama@domain.com" required />
(nama@domain.com)
</label>
</p>
<p>
<label>Month:
<input type ="month" /> (yyyy-mm)
</label>
</p>
<p>
<label>Number:
<input type = "number"
sin ="0"
max ="7"
step="1"
value="4"/>
</label> (enter a number between 0 and 7)
</p>
<p>
<label>Range: 0
<input type = "range"
min = "0"
max = "20"
value = "10"/> 20
</label>
</p>
<p>
<label>Search:
<input type = "search" placeholder = "search query"/>
</label> (enter your search query here.
</p>
<p>
<label>Tel:
<input type = "tel" placeholder = "(###) ###-####" pattern = "\(\d{3}\)+\d{3}-\d{4}" required />
(###) ###-####
</label>
</p>
<p>
<label>Time:
<input type = "time" /> (hh:mm:ss.ff)
</label>
</p>
<p>
<label>URL:
<input type = "url" placeholder = "http://www.domainname.com" />
(http://www.domainname.com)
</label>
</p>
<p>
<label>Week:
<input type = "week" />
(yyyy-Wnn, such as 2012-W01)
</label>
</p>
<p>
<input type="submit" value="Submit" />
<input type="reset" value="Clear" />
</p>
</form>
</body>
</html>
<!-- Fig. 3.1: newForminputtypes.html -->
<!-- Di ketik oleh rezkycpp -->
<html>
<head>
<meta charset="UTF-8">
<title>Latihan web desain</title>
</head>
<body>
<h1> New HTML5 Input types Demo</h1>
<p>This form demonstrates the new HTML5 input types and the placeholder, required and autofocus attributes
</p>
<form method="post" action="http://www.deitel.com">
<p>
<label>Color:
<input type = "color" autofocus />
(Hexadecimal code such as #ffffff)
</label>
</p>
<p>
<label>Date:
<input type ="date" />
(yyyy-mm-dd)
</label>
</p>
<p>
<label>Datetime-local:
<input type = "datetime-local"/>
(yyyy-mm-ddThh:mm+ff:gg, such as 2012-01-27T03:15)
</label>
</p>
<p>
<label>Email:
<input type ="email" placeholder ="nama@domain.com" required />
(nama@domain.com)
</label>
</p>
<p>
<label>Month:
<input type ="month" /> (yyyy-mm)
</label>
</p>
<p>
<label>Number:
<input type = "number"
sin ="0"
max ="7"
step="1"
value="4"/>
</label> (enter a number between 0 and 7)
</p>
<p>
<label>Range: 0
<input type = "range"
min = "0"
max = "20"
value = "10"/> 20
</label>
</p>
<p>
<label>Search:
<input type = "search" placeholder = "search query"/>
</label> (enter your search query here.
</p>
<p>
<label>Tel:
<input type = "tel" placeholder = "(###) ###-####" pattern = "\(\d{3}\)+\d{3}-\d{4}" required />
(###) ###-####
</label>
</p>
<p>
<label>Time:
<input type = "time" /> (hh:mm:ss.ff)
</label>
</p>
<p>
<label>URL:
<input type = "url" placeholder = "http://www.domainname.com" />
(http://www.domainname.com)
</label>
</p>
<p>
<label>Week:
<input type = "week" />
(yyyy-Wnn, such as 2012-W01)
</label>
</p>
<p>
<input type="submit" value="Submit" />
<input type="reset" value="Clear" />
</p>
</form>
</body>
</html>
Berikut Beberapa Input Type yang ada di HTML 5
Posted by RZDev: Belajar Programming! on Saturday, January 13, 2018
Well, sekarang kita akan membahas struktur dasar dari HTML 5, HTML 5 sendiri merupakan perkembangan dari HTML, di HTML 5 kita dapat menambahkan fitur - fitur seperti SVG, canvas & grafik sedangkan di HTML terdahulu kita hanya dapat menambahkan fitur seperti itu melalui flash, vml, silver-light.
Struktur khas dari HTML 5 adalah <!DOCTYPE html>. Jadi sangat mudah untuk mengidentifikasi website yang menggunakan HTML 5 atau tidak.
Berikut script javascript untuk perulangan faktorial, recursion javascript. Semoga dapat membantu
<!DOCTYPE html>
<html>
<head>
<title>Factorial calculation with a recursive function</title>
<style type="text/css">
p {margin: 0;}
</style>
<script type="text/javascript">
var output= "";
var input = parseInt(window.prompt("Please input the number"));
document.writeln("<h1> Factorials of 0 to " + input + " </h1>");
function calculateFactorials (){
for (var i=0; i <= input; i++){
output += "" + i + "! = " + factorial(i) + "<br>";
document.getElementById("hasil").innerHTML=output;
}
}
function factorial (angka){
if(angka == 0) {
return 1;
} else {
return angka * factorial(angka - 1);
}
}
window.addEventListener("load", calculateFactorials, false);
</script>
</head>
<body>
<div id="results"><p id="hasil"></div>
</body>
</html>
<html>
<head>
<title>Factorial calculation with a recursive function</title>
<style type="text/css">
p {margin: 0;}
</style>
<script type="text/javascript">
var output= "";
var input = parseInt(window.prompt("Please input the number"));
document.writeln("<h1> Factorials of 0 to " + input + " </h1>");
function calculateFactorials (){
for (var i=0; i <= input; i++){
output += "" + i + "! = " + factorial(i) + "<br>";
document.getElementById("hasil").innerHTML=output;
}
}
function factorial (angka){
if(angka == 0) {
return 1;
} else {
return angka * factorial(angka - 1);
}
}
window.addEventListener("load", calculateFactorials, false);
</script>
</head>
<body>
<div id="results"><p id="hasil"></div>
</body>
</html>
Berikut script javascriptnya, semoga dapat membantu, jika ada yang kurang paham bisa tanyakan langsung ke saya atau kotak komentar dibawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Random Number Generator</title>
<style type="text/css">
ul { margin: 10px; }
li {display: inline; margin-right: 10px; }
</style>
<script type="text/javascript">
//variables used to interact with the img elements
var die1image;
var die2image;
//register button listener and get the img elements
function start(){
var button = document.getElementById("rollButton");
button.addEventListener("click", rollDice);
die1image = document.getElementById("die1");
die2image = document.getElementById("die2");
}
//roll the dice
function rollDice (){
var gambar1 = getNum();
var gambar2 = getNum();
setImage(die1image,gambar1);
setImage(die2image,gambar2);
var total = parseInt(gambar1) + parseInt(gambar2);
if (total<5){
document.getElementById("total").innerHTML = "Total : " + total + ", maaf anda kalah.";
//window.alert("Total : " + total + ", maaf anda kalah.");
}else{
document.getElementById("total").innerHTML = "Total : " + total + ", selamat anda menang.";
}
}
function getNum(){
return Math.floor(1 + Math.random() * 6 );
}
//set image source
function setImage(dieImg,nomer){
//var dieValue = Math.floor(1 + Math.random() * 6 );
dieImg.setAttribute ("src", "image/" + nomer + ".jpg");
dieImg.setAttribute ("alt", "die image with " + nomer + " spots");
}
window.addEventListener("load", start, false);
</script>
</head>
<body>
<form>
<input type="button" id="rollButton" value="Roll Dice">
</form>
<ul>
<li>
<img id="die1" src="image/1.png" alt="blank png" width="50px" height="50px">
<img id="die2" src="image/1.png" alt="blank png" width="50px" height="50px">
</li>
</ul>
<p id="total">Total : 0, tekan tombol untuk memulai</p>
</body>
</html>
<html>
<head>
<title>Random Number Generator</title>
<style type="text/css">
ul { margin: 10px; }
li {display: inline; margin-right: 10px; }
</style>
<script type="text/javascript">
//variables used to interact with the img elements
var die1image;
var die2image;
//register button listener and get the img elements
function start(){
var button = document.getElementById("rollButton");
button.addEventListener("click", rollDice);
die1image = document.getElementById("die1");
die2image = document.getElementById("die2");
}
//roll the dice
function rollDice (){
var gambar1 = getNum();
var gambar2 = getNum();
setImage(die1image,gambar1);
setImage(die2image,gambar2);
var total = parseInt(gambar1) + parseInt(gambar2);
if (total<5){
document.getElementById("total").innerHTML = "Total : " + total + ", maaf anda kalah.";
//window.alert("Total : " + total + ", maaf anda kalah.");
}else{
document.getElementById("total").innerHTML = "Total : " + total + ", selamat anda menang.";
}
}
function getNum(){
return Math.floor(1 + Math.random() * 6 );
}
//set image source
function setImage(dieImg,nomer){
//var dieValue = Math.floor(1 + Math.random() * 6 );
dieImg.setAttribute ("src", "image/" + nomer + ".jpg");
dieImg.setAttribute ("alt", "die image with " + nomer + " spots");
}
window.addEventListener("load", start, false);
</script>
</head>
<body>
<form>
<input type="button" id="rollButton" value="Roll Dice">
</form>
<ul>
<li>
<img id="die1" src="image/1.png" alt="blank png" width="50px" height="50px">
<img id="die2" src="image/1.png" alt="blank png" width="50px" height="50px">
</li>
</ul>
<p id="total">Total : 0, tekan tombol untuk memulai</p>
</body>
</html>
Google Web Designer merupakan software yang hampir mirip dengan adobe dreamweaver, tapi GWD lebih ringan dan tentunya gratis.
Bagi teman - teman yang sudah download dan mencoba run softwarenya mungkin ada beberapa yang kena freeze black atau white screen pas startupnya. Saya sudah baca - baca di forum dan ketemu caranya memperbaikinya.
1. Klik kanan pada Google Web Designer, Properties
2. Centang Compability Mode ganti Windows 7
3. Centang juga Override high DPI scalling behavior. Application
Semoga bermanfaat !
Posts
