The robot 'Drawbot' can drive and draw at the same time!
You can give the drawbot the following instructions: square, triangle, forward, turn.
The instructions work as follows:
You can also give a sequence of
commands to drawbot:
For instance: square, forward, triangle
The image below shows what will happen.
Which sequence of instructions causes
this to happen?
Answer :
triangle, turn, forward, square
Visualisation : https://scratch.mit.edu/projects/180821613/
Wednesday, October 18, 2017
Thursday, March 23, 2017
Tugas Pemrograman Web 3
Form Mahasiswa
Source Code :
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script type="text/javascript">
function myFunction(){
var conf = window.alert("Berhasil Login");
}
</script>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
font-family: calibri;
}
.navbar{
background-color: #9c27b0;
padding: 20px;
color: white;
}
.head{
color: grey;
}
.head_al{
padding-top: 50px;
}
.table{
margin-top: 20px;
}
input{
padding-left: 10px;
border: none;
border-bottom: 2px solid grey;
height: 20px;
width: 250px;
font-size: 15px;
}
td{
padding: 5px;
padding-right: 15px;
}
button{
margin: 40px;
padding: 10px;
background-color: #9c27b0;
border: none;
border-radius: 8px;
color: white;
font-size: 15px;
font-weight: bold;
}
button:hover{
background-color: purple;
}
.footer{
background-color: #9c27b0;
height: 300px;
}
img{
margin-top: 20px;
height: 100px;
border: 2px solid #9c27b0;
border-radius: 100px;
}
</style>
<body>
<div class="navbar">
<h3>TUGAS 3 Pemrograman Web</h3>
</div>
<div align="center" class="head_al">
<h2 class="head">REGISTRASI MAHSISWA</h2>
<img src="http://www.unklab.ac.id/sites/default/files/default_images/default_profile_picture.png">
<table class="table">
<tr>
<td>Nama</td>
<td>
<input type="text" name="" list="nama">
<datalist id="nama">
</datalist>
<script>
var nama = ["Romi Yehezkiel","Dwiyan Satria","Rochman Soleh","Adiwinoto","Rizal S","Yusuf Dimas"];
var options = '';
for(var i=0; i<nama.length; i++){
options += '<option value="'+nama[i]+'">';
}
document.getElementById('nama').innerHTML = options;
console.log(options);
</script>
</td>
</tr>
<tr>
<td>NRP</td>
<td>
<input type="text" name="" list="NRP">
<datalist id="NRP">
</datalist>
<script>
var nrp = ["5114100054","51154100140","5114100075","511710035","5112100001","5111100169"];
var options = '';
for(var i=0; i<nrp.length; i++){
options += '<option value="'+nrp[i]+'">';
}
document.getElementById('NRP').innerHTML = options;
console.log(options);
</script>
</td>
</tr>
<tr>
<td>Mata Kuliah</td>
<td>
<input type="text" name="" list="matkullist">
<datalist id="matkullist">
</datalist>
<script>
var matkul = ["Otomata","Pemrograman Web","Kecerdasan Buatan","Perancangan Analisis Algoritma II","Jaringan Komputer","Manajemen Basis Data", "Probabilitas dan Statistika", "Dasar Pemrograman", "Rekayasa Perangkat Lunak"];
var options = '';
for(var i=0; i<matkul.length; i++){
options += '<option value="'+matkul[i]+'">';
}
document.getElementById('matkullist').innerHTML = options;
console.log(options);
</script>
</td>
</tr>
<tr>
<td>Dosen</td>
<td>
<input type="text" name="" list="dosen">
<datalist id="dosen">
</datalist>
<script>
var dosen = ["Ir. Muchammad Husni, M.Kom.","Prof.Ir. Supeno Djanali, M.Sc.,Ph.D","Baskoro Adi Pratomo, S.Kom, M.Kom","Ir. Siti Rochimah, MT.,Ph.D"," Fajar Baskoro, S.Kom.,MT.","Nurul Fajrin Ariyani, S.Kom.,M.Sc.","Sarwosri, S.Kom.,M.T.","Imam Kuswardayan, S.Kom.,MT.", "Ridho Rahman Hariadi, S.Kom.,M.Sc.", "Victor Hariadi, S.Si.,M.Kom.", "Rully Sulaiman, S.Kom.,M.Kom."];
var options = '';
for(var i=0; i<dosen.length; i++){
options += '<option value="'+dosen[i]+'">';
}
document.getElementById('dosen').innerHTML = options;
console.log(options);
</script>
</td>
</tr>
</table>
</div>
<div align="center">
<button type="button" onclick="myFunction()">DAFTAR</button>
</div>
<div class="footer">
</div>
</body>
</html>
TAMPILAN FORM :
Saat berhasil Login :
Source Code :
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script type="text/javascript">
function myFunction(){
var conf = window.alert("Berhasil Login");
}
</script>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
font-family: calibri;
}
.navbar{
background-color: #9c27b0;
padding: 20px;
color: white;
}
.head{
color: grey;
}
.head_al{
padding-top: 50px;
}
.table{
margin-top: 20px;
}
input{
padding-left: 10px;
border: none;
border-bottom: 2px solid grey;
height: 20px;
width: 250px;
font-size: 15px;
}
td{
padding: 5px;
padding-right: 15px;
}
button{
margin: 40px;
padding: 10px;
background-color: #9c27b0;
border: none;
border-radius: 8px;
color: white;
font-size: 15px;
font-weight: bold;
}
button:hover{
background-color: purple;
}
.footer{
background-color: #9c27b0;
height: 300px;
}
img{
margin-top: 20px;
height: 100px;
border: 2px solid #9c27b0;
border-radius: 100px;
}
</style>
<body>
<div class="navbar">
<h3>TUGAS 3 Pemrograman Web</h3>
</div>
<div align="center" class="head_al">
<h2 class="head">REGISTRASI MAHSISWA</h2>
<img src="http://www.unklab.ac.id/sites/default/files/default_images/default_profile_picture.png">
<table class="table">
<tr>
<td>Nama</td>
<td>
<input type="text" name="" list="nama">
<datalist id="nama">
</datalist>
<script>
var nama = ["Romi Yehezkiel","Dwiyan Satria","Rochman Soleh","Adiwinoto","Rizal S","Yusuf Dimas"];
var options = '';
for(var i=0; i<nama.length; i++){
options += '<option value="'+nama[i]+'">';
}
document.getElementById('nama').innerHTML = options;
console.log(options);
</script>
</td>
</tr>
<tr>
<td>NRP</td>
<td>
<input type="text" name="" list="NRP">
<datalist id="NRP">
</datalist>
<script>
var nrp = ["5114100054","51154100140","5114100075","511710035","5112100001","5111100169"];
var options = '';
for(var i=0; i<nrp.length; i++){
options += '<option value="'+nrp[i]+'">';
}
document.getElementById('NRP').innerHTML = options;
console.log(options);
</script>
</td>
</tr>
<tr>
<td>Mata Kuliah</td>
<td>
<input type="text" name="" list="matkullist">
<datalist id="matkullist">
</datalist>
<script>
var matkul = ["Otomata","Pemrograman Web","Kecerdasan Buatan","Perancangan Analisis Algoritma II","Jaringan Komputer","Manajemen Basis Data", "Probabilitas dan Statistika", "Dasar Pemrograman", "Rekayasa Perangkat Lunak"];
var options = '';
for(var i=0; i<matkul.length; i++){
options += '<option value="'+matkul[i]+'">';
}
document.getElementById('matkullist').innerHTML = options;
console.log(options);
</script>
</td>
</tr>
<tr>
<td>Dosen</td>
<td>
<input type="text" name="" list="dosen">
<datalist id="dosen">
</datalist>
<script>
var dosen = ["Ir. Muchammad Husni, M.Kom.","Prof.Ir. Supeno Djanali, M.Sc.,Ph.D","Baskoro Adi Pratomo, S.Kom, M.Kom","Ir. Siti Rochimah, MT.,Ph.D"," Fajar Baskoro, S.Kom.,MT.","Nurul Fajrin Ariyani, S.Kom.,M.Sc.","Sarwosri, S.Kom.,M.T.","Imam Kuswardayan, S.Kom.,MT.", "Ridho Rahman Hariadi, S.Kom.,M.Sc.", "Victor Hariadi, S.Si.,M.Kom.", "Rully Sulaiman, S.Kom.,M.Kom."];
var options = '';
for(var i=0; i<dosen.length; i++){
options += '<option value="'+dosen[i]+'">';
}
document.getElementById('dosen').innerHTML = options;
console.log(options);
</script>
</td>
</tr>
</table>
</div>
<div align="center">
<button type="button" onclick="myFunction()">DAFTAR</button>
</div>
<div class="footer">
</div>
</body>
</html>
TAMPILAN FORM :
Saat berhasil Login :
Simple Form HTML
Source Code HTML :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>website KAI</title>
<body class="bodystyles">
<ul>
<li><a class="active" href="#home">Pemesanan Tiket Kereta Api Online</a></li>
<li><a href="#news">Daftar Harga Kelas KA</a></li>
<li><a href="#contact">Daftar Jadwal KA</a></li>
<li><a href="#about">Daftar Pesanan Tiket</a></li>
</ul>
<div class="header">
<img src="kaai.png" alt="LogoKAI" />
<h1>Selamat Datang !!!</h1>
</div>
<br><br>
<hr>
<div>
<table class="tablestyles" >
<form name ="input" action="html_form_action.asp" method="get">
<tr><td> Nama Kereta:</td><td><input type="text" name="name" align="center" id="name" required></td></tr>
<tr><td> Tanggal Berangkat:</td><td><input type="date" name="departdate" align="center" required></td></tr>
<tr><td> Tanggal Tiba:</td><td><input type="date" name="arrivedate" align="center" required></td></tr>
<tr><td> Jam Berangkat:</td><td><input type="time" name="departtime" align="center" required></td></tr>
<tr><td> Jam Tiba:</td><td><input type="time" name="arrivetime" align="center" required></td></tr>
<tr><td> Dari:</td> <td><input type="text" name="from" align="center" required></td></tr>
<tr><td> Ke:</td><td><input type="text" name="to" align="center" required></td></tr>
<tr><td> Kelas:</td><td><select name="Kelas" form="kelasform">
<option value="Eksekutif">Eksekutif</option>
<option value="Bisnis">Bisnis</option>
</select></td></tr>
<tr>
<td><button type="button" style="background-color: #008CBA; border-radius: 4px; color: white; width: 80px; height: 40px">Simpan</button></td>
<td><button type="button" style="background-color: #f44336; border-radius: 4px; color: white;width: 80px; height: 40px;">Batal</button></td><br>
</tr>
</table>
</div>
<div class="tablestyles1">
<table>
<tr>
<th>No</th>
<th>Nama Kereta</th>
<th>Jadwal Berangkat</th>
<th>Jadwal Tiba</th>
<th>Dari</th>
<th>Ke</th>
<th>Harga(Kelas)</th>
</tr>
<tr>
<td align="center">1</td>
<td align="center">Argo Parahyangan</td>
<td align="center">2014-04-22 - 06:00</td>
<td align="center">2014-04-22 - 08:45</td>
<td align="center">Gambir, Jakarta Pusat</td>
<td align="center">Bandung, Bandung</td>
<td align="center">Bisnis - 90.000</td>
<td class="input1"><button type="button" style="background-color: #008CBA; border-radius: 4px; color: white; width: 80px; height: 40px">Edit</button> <button type="button" style="background-color: #f44336; border-radius: 4px; color: white; width: 80px; height: 40px">Hapus</button></td>
</tr>
<tr>
<td align="center">2</td>
<td align="center">Argo Parahyangan</td>
<td align="center">2014-04-23 - 13:01</td>
<td align="center">2014-04-23 - 15:00</td>
<td align="center">Gambir, Jakarta Pusat</td>
<td align="center">Surabaya</td>
<td align="center">Eksekutif - 100.000</td>
<td class="input2"><button type="button" style="background-color: #008CBA; border-radius: 4px; color: white; width: 80px; height: 40px">Edit</button> <button type="button" style="background-color: #f44336; border-radius: 4px; color: white; width: 80px; height: 40px">Hapus</button></td>
</tr>
</table>
</div>
</body>
</head>
</html>
Tampilan :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>website KAI</title>
<body class="bodystyles">
<ul>
<li><a class="active" href="#home">Pemesanan Tiket Kereta Api Online</a></li>
<li><a href="#news">Daftar Harga Kelas KA</a></li>
<li><a href="#contact">Daftar Jadwal KA</a></li>
<li><a href="#about">Daftar Pesanan Tiket</a></li>
</ul>
<div class="header">
<img src="kaai.png" alt="LogoKAI" />
<h1>Selamat Datang !!!</h1>
</div>
<br><br>
<hr>
<div>
<table class="tablestyles" >
<form name ="input" action="html_form_action.asp" method="get">
<tr><td> Nama Kereta:</td><td><input type="text" name="name" align="center" id="name" required></td></tr>
<tr><td> Tanggal Berangkat:</td><td><input type="date" name="departdate" align="center" required></td></tr>
<tr><td> Tanggal Tiba:</td><td><input type="date" name="arrivedate" align="center" required></td></tr>
<tr><td> Jam Berangkat:</td><td><input type="time" name="departtime" align="center" required></td></tr>
<tr><td> Jam Tiba:</td><td><input type="time" name="arrivetime" align="center" required></td></tr>
<tr><td> Dari:</td> <td><input type="text" name="from" align="center" required></td></tr>
<tr><td> Ke:</td><td><input type="text" name="to" align="center" required></td></tr>
<tr><td> Kelas:</td><td><select name="Kelas" form="kelasform">
<option value="Eksekutif">Eksekutif</option>
<option value="Bisnis">Bisnis</option>
</select></td></tr>
<tr>
<td><button type="button" style="background-color: #008CBA; border-radius: 4px; color: white; width: 80px; height: 40px">Simpan</button></td>
<td><button type="button" style="background-color: #f44336; border-radius: 4px; color: white;width: 80px; height: 40px;">Batal</button></td><br>
</tr>
</table>
</div>
<div class="tablestyles1">
<table>
<tr>
<th>No</th>
<th>Nama Kereta</th>
<th>Jadwal Berangkat</th>
<th>Jadwal Tiba</th>
<th>Dari</th>
<th>Ke</th>
<th>Harga(Kelas)</th>
</tr>
<tr>
<td align="center">1</td>
<td align="center">Argo Parahyangan</td>
<td align="center">2014-04-22 - 06:00</td>
<td align="center">2014-04-22 - 08:45</td>
<td align="center">Gambir, Jakarta Pusat</td>
<td align="center">Bandung, Bandung</td>
<td align="center">Bisnis - 90.000</td>
<td class="input1"><button type="button" style="background-color: #008CBA; border-radius: 4px; color: white; width: 80px; height: 40px">Edit</button> <button type="button" style="background-color: #f44336; border-radius: 4px; color: white; width: 80px; height: 40px">Hapus</button></td>
</tr>
<tr>
<td align="center">2</td>
<td align="center">Argo Parahyangan</td>
<td align="center">2014-04-23 - 13:01</td>
<td align="center">2014-04-23 - 15:00</td>
<td align="center">Gambir, Jakarta Pusat</td>
<td align="center">Surabaya</td>
<td align="center">Eksekutif - 100.000</td>
<td class="input2"><button type="button" style="background-color: #008CBA; border-radius: 4px; color: white; width: 80px; height: 40px">Edit</button> <button type="button" style="background-color: #f44336; border-radius: 4px; color: white; width: 80px; height: 40px">Hapus</button></td>
</tr>
</table>
</div>
</body>
</head>
</html>
Tampilan :
Thursday, February 23, 2017
Membuat Profil Sederhana Dengan HTML Text Editor
Source Code :
<!DOCTYPE html>
<html>
<head>
<style>
div.container {
width: 100%;
border: 1px solid gray;
}
header, footer {
padding: 1em;
color: white;
background-color: black;
clear: left;
text-align: center;
}
nav {
float: left;
max-width: 160px;
margin: 0;
padding: 1em;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul a {
text-decoration: none;
}
article {
margin-left: 170px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Profil Mahasiswa</h1>
</header>
<nav>
<img src="FotoProfil.jpg" alt="HTML5 Icon" style="width:150px;height:200px;">
</nav>
<article>
<h1>Profil</h1>
<p>Nama : Romi Yehezkiel Purba</p>
<p>Panggilan : Romi</p>
<p>Jenis Kelamin : Laki Laki
<p>NRP : 5114100054</p>
<p>TTL : Medan, 2 April 1997</p>
<p>Agama : Kristen Protestan</p>
<p>Hobi : Baca, gaming</p>
</article>
<footer></footer>
</div>
</body>
</html>
<html>
<head>
<style>
div.container {
width: 100%;
border: 1px solid gray;
}
header, footer {
padding: 1em;
color: white;
background-color: black;
clear: left;
text-align: center;
}
nav {
float: left;
max-width: 160px;
margin: 0;
padding: 1em;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul a {
text-decoration: none;
}
article {
margin-left: 170px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Profil Mahasiswa</h1>
</header>
<nav>
<img src="FotoProfil.jpg" alt="HTML5 Icon" style="width:150px;height:200px;">
</nav>
<article>
<h1>Profil</h1>
<p>Nama : Romi Yehezkiel Purba</p>
<p>Panggilan : Romi</p>
<p>Jenis Kelamin : Laki Laki
<p>NRP : 5114100054</p>
<p>TTL : Medan, 2 April 1997</p>
<p>Agama : Kristen Protestan</p>
<p>Hobi : Baca, gaming</p>
</article>
<footer></footer>
</div>
</body>
</html>
Visual :
Subscribe to:
Posts (Atom)