Inspiration Zone

Thursday, March 10, 2011

Membuat Sign Up Form Sederhana dengan PHP (UTS)

Posted by Riesh_16 on 5:24 AM

Sebagai pemula pembuat web, tentunya kita harus mulai belajar dari dasar. Disini saya mencoba untuk sharing bagaimana cara membuat form sign up sederhana. Banyak orang menganggap belajar WEB itu ribet, pusing, sulit and semuanyaaaaa.... Tapi juga ada yang bilang "kalau mau belajar, WEB itu mudah kok!".... Nah, untuk itu bejalarnya juga harus dari dasar. Dibawah ini ada semacam script php yang bisa menjadikan reference dalam membuat suatu web. Silahkan menikmatiiiii... ^o^
Berikut ini adalah script untuk php :
<!DOCTYPE html>
<html lang ="en">

<head>
<title>Sign Up Form</title>
</head>

<body bgcolor="feb6e5"/>
<font face = "Broadway" size= "8" align="center">::Sign Up Form::</font>
<br>
<br>
<br>
<?php
if($_GET){
$nama = $_GET['nama'];
$email = $_GET['email'];
$alamat = $_GET['alamat'];
$kota = $_GET['kota'];
$kode = $_GET['kode'];
$error = array();
if(empty($nama)){
$error['nama'] = 'Nama tidak boleh kosong';
}
if(empty($email)){
$error['email'] = 'Email tidak boleh kosong';
}
if(empty($alamat)){
$error['alamat'] = 'Alamat tidak boleh kosong';
}
if(empty($kota)){
$error['kota'] = 'Kota tidak boleh kosong';
}
if(empty($kode)){
$error['kode'] = 'Kode pos tidak boleh kosong';
}
if(empty($error)){
}
}
?>
<form action="" method="GET">
Nama :
<br><input type="text" name="nama" value ="<?php echo isset($_GET['nama']) ? $_GET['nama'] : '';?>"/> <br />
<div style="color:red"><?php echo isset($error['nama']) ? $error['nama'] : '';?></div>
<br>
Email :
<br><input type="text" name="email" value = "<?php echo isset($_GET['email']) ? $_GET['email'] : '';?>"/> <br />
<div style="color:red"><?php echo isset($error['email']) ? $error['email'] : '';?></div>
<br>
Alamat :
<br><input type="text" name="alamat" value = "<?php echo isset($_GET['alamat']) ? $_GET['alamat'] : '';?>"/> <br />
<div style="color:red"><?php echo isset($error['alamat']) ? $error['alamat'] : '';?></div>
<br>
Kota :
<br><input type="text" name="kota" value = "<?php echo isset($_GET['kota']) ? $_GET['kota'] : '';?>"/> <br />
<div style="color:red"><?php echo isset($error['kota']) ? $error['kota'] : '';?></div>
<br>
Kode pos :
<br><input type="text" name="kode" value = "<?php echo isset($_GET['kode']) ? $_GET['kode'] : '';?>"/> <br />
<div style="color:red"><?php echo isset($error['kode']) ? $error['kode'] : '';?></div>
<br>
<input type="submit" value="Sign Up"/>
</form>
</body>
</html>

Setelah diklik "Sign Up", maka tampilan di bawah ini menampilkan data yang semua form diisi, sehingga tidak menimbulkan pemberitahuan error.

Setelah diklik "Sign Up", maka tampilan di bawah ini menampilkan pemberitahuan error, bahwa semua form harus diisi.

Kata-Kata Inspirasi Menjadi Pilihan Hidup

Posted by Riesh_16 on 10:08 PM

==============================
Aku melewati apa yang telah terjadi
di belakangku dan berjalan mengarahkan
diri kepada apa yang ada di hadapanku.
==============================
===============================
Kesenangan bukan untuk dihabiskan sesaat,
namun untuk dinikmati dalam perjalanan
panjang. Inilah yang membuat hidup selalu
lebih bermakna.
===============================
===============================
Memang mudah memberikan penghakiman
kepada orang lain, semudah kita tidak mau
mempelajari orang itu.
===============================
===============================
Membangun hubungan yang kuat layaknya
menanam tanaman dengan segala upaya
dan perhatianyang nyata.
===============================
===============================
Kritik itu akan membangun jika dan hanya
jika dilakukan pada saat yang tepat.
===============================
===============================
Tuhan menciptakan manusia dengan dua
telinga dan satu mulut, mungkin agar kita
lebih banyak mendengarkan. Namun tidak
semata-mata demikian, telinga juga
dilengkapi "penyaring" agar kita mampu
memasukkan hal positif ke otak kita
===============================

Semoga kata-kata ini menjadikan pandangan hidup dan dapat membantu segala masalah yang rumit dalam kehidupan ini. Namun, sebanyak-banyaknya cobaan dalam hidup tidak mungkin jika tidak ada penyelesaian. Hanya saja penyelesaian suatu masalah tidak selalu seperti membalik telapak tangan. Jangan pernah menyerah! Hidup tak hanya sampai disini....

- GOOD LUCK -

* Tobe Continue in the next section ^o^

Membuat Aplikasi Form Pemesanan Berbasis JavaScript

Posted by Riesh_16 on 6:47 AM

Terkait pengembangan JavaScript, aplikasi ini dapat mempermudah dalam perhitungan harga harga suatu makanan, dikalikan dengan jumlah tiap-tiap menu yang telah dipesan.

Script html adalah sebagai berikut :

<!DOCTYPE html>
<html lang="en">
<head>
<body background="Wallpaper_01.jpg"/>
<font color = "#ea75c5"><h2>--Form Pemesanan Berbasis Java Script--</h2>
<form name="pemesanan" action="#">
<table border = "1px">
<font color = "#ee36a2">
<tr>
<th width="20px">No</th>
<th width="200px">Makanan/Minuman</th>
<th width="100px">Harga</th>
<th width="100px">Pesan</th>
</tr>

<tr>
<td>1</td>
<td>Bakso Istimewa</td>
<td>@<input type="text" name="bakso" value="12000" size="6" readonly></td>
<td><input type="text" name="hargaBakso" value="0" onchange="hitungPesan()">
</td>
</tr>

<tr>
<td>2</td>
<td>Soto Spesial</td>
<td>@<input type="text" name="soto" value="10000" size="6" readonly></td>
<td><input type="text" name="hargaSoto" value="0" onchange="hitungPesan()">
</td>
</tr>

<tr>
<td>3</td>
<td>Mie Ayam Super</td>
<td>@<input type="text" name="mie" value="15000" size="6" readonly></td>
<td><input type="text" name="hargaMie" value="0" onchange="hitungPesan()">
</td>
</tr>

<tr>
<td>4</td>
<td>Es Degan</td>
<td>@<input type="text" name="degan" value="5000" size="6" readonly></td>
<td><input type="text" name="hargaDegan" value="0" onchange="hitungPesan()">
</td>
</tr>

<tr>
<td>5</td>
<td>Es Campur</td>
<td>@<input type="text" name="campur" value="7000" size="6" readonly></td>
<td><input type="text" name="hargaCampur" value="0" onchange="hitungPesan()">
</td>
</tr>

<tr>
<td colspan="3" align="right">Jumlah Total</td>
<td><input type="text" name="Total" readonly="true">
</td>
</tr>

<tr>
<td colspan="3" align="right">Diskon</td>
<td><input type="text" name="Diskon" readonly="true">
</td>
</tr>

<tr>
<td colspan="3" align="right">Jumlah Dibayar</td>
<td><input type="text" name="Bayar" readonly="true" align="right">
</td>
</tr>
</table>
<br><input type="button" value="BATAL" onMouseUp="resetForm()">
</form>
<script language="JavaScript" type="text/javascript">
<!--
function hitungPesan(){
var nota = document.pemesanan;
var jumlahBakso = 12000 * parseInt(nota.hargaBakso.value);
var jumlahSoto = 10000 * parseInt(nota.hargaSoto.value);
var jumlahMie = 15000 * parseInt(nota.hargaMie.value);
var jumlahDegan = 5000 * parseInt(nota.hargaDegan.value);
var jumlahCampur = 7000 * parseInt(nota.hargaCampur.value);
var jumlahTotal = jumlahBakso + jumlahSoto + jumlahMie + jumlahDegan + jumlahCampur;
if (jumlahTotal > 50000)
{
nota.Total.value = jumlahTotal;
nota.Diskon.value = 10000;
nota.Bayar.value = jumlahTotal - 10000;
}
else{
nota.Total.value = jumlahTotal;
nota.Diskon.value = 0;
nota.Bayar.value = jumlahTotal;
}
}
function resetForm(){
document.pemesanan.reset();
}
//->
</script>
<br>
<br><font align="center" face="Broadway" size="3" >&reg Suastika Yulia Riska-109533414510 </font>
<br><font align="center" face="Brush Script MT" size = "5">-The Learning University of Malang-</font>
</body>
</html>

Sehingga menampilkan form sebagai berikut :

Jika mengklik Button CANCEL akan muncul tampilan sebagai berikut :

Semoga Bermanfaat dan dapat membantu dalam mengembangkan aplikasi web berbasis Java Script... ^o^

Aplikasi Kalkulator Sederhana Menggunakan JAVA SCRIPT

Posted by Riesh_16 on 7:36 AM

Pada aplikasi berikut ini hanya menampilkan 4 buah operasi, yaitu penjumlahan, pengurangan, perkalian dan pembagian. Dengan menggunakan Java Script, maka dibutuhkan fungsi-fungsi yang dibuat pada Java Script.

Berikut ini source code dari hitung.js :

function hitung(){
var komponen = document.mat;
var input1 = parseInt(komponen.input1.value);
var input2 = parseInt(komponen.input2.value);
var op = komponen.op.value;
var hasil;

if(op == "add"){
hasil = input1 + input2;
}
else if(op == "sub"){
hasil = input1 - input2;
}
else if(op == "mpy"){
hasil = input1 * input2;
}
else{
hasil = input1 / input2;
}

komponen.hasil.value = hasil;
}

Berikut ini source code dari hitung.html :

<!DOCTYPE html>
<html lang="en">
<head>
<title>Matematika</title>
<script language="JavaScript" type="text/javascript" src="hitung.js"></script>
</head>
<body bgcolor="pink">
<center>
<h3>-- Operasi Matematika --</h3>
<form name="mat" action="#">
<input type="text" size="5" name="input1">
<select name="op">
<option value="add">+</option>
<option value="sub">-</option>
<option value="mpy">*</option>
<option value="div">:</option>
</select>
<input type="text" size="5" name="input2">
<input type="button" value="=" onclick="hitung()"/>
<input type="text" size="10" name="hasil" readonly>
</form>
</center>
</body>
</html>

Tampilan dari aplikasi tersebut adalah :

Membuat Design Website memanfaatkan HTML 5

Posted by Riesh_16 on 6:42 AM

Dari pengembangan studi kasus yang telah saya posting sebelumnya, design ini adalah pengaplikasian dari pemanfaatan elemen-elemen HTML5. Sebelum membuat HTML, seperti biasa, harus membuat CSS terlebih dahulu....

Berikut ini sintak dari praktikum.css

body{
margin : 10px auto;
width : 900px;
}

header, logo, te, nav, search, box, section, pict, article, event, footer{
display : block;
}

header{
height: 90px;
width: auto;
background-image : url(images/Fotolia_6525764_XS.jpg);
}

logo{
float : left;
margin-left : 30px;
height : 90px;
width : 90px;
background-image : url(images/fotolia_9806713_new.jpg);
}

te{
padding: 30px;
font-family : Times New Roman, hanacaraka;
font-weight: bold;
font-size : 32px;
color : white;
}

nav{
width: 900px;
height: 40px;
background-color : #f36899;
color : #459dff;
font-family: Times New Roman;
}

search{
float : left;
margin-top: 2px;
margin-left : 20px;
width : 50px;
height: 20px;
}

box{
margin-top: 2px;
float: left;
width: 150px;
height: 21px;
border: 1px solid black;
}

ul {
margin:0;
padding:0;
list-style: none;
}

ul li {
position: relative;
float: right;
width:90px;
}

li ul {
position: absolute;
top: 3px;
display: none;
}

ul li a {
display: block;
text-decoration:none;
line-height:8px;
float: right;
color:black;
padding:7px;
background: #faa1cf;
margin:0.5px 0.5px;
font-weight:bold;
font-size : 15px;
width : 70px
}

menu{
margin-top: 3px;
margin-left: 255px;
float: left;
width: 200px;
height: 30px;
text-align : right ;
padding : 3px;
}

section{
width : 900px;
height : 450px;
background-color : #f36899;
}

pict{
float: left;
width: 300px;
height: 450px;
background-image : url(images/hello-kitty-533342.jpg);
}

article{
margin-left: 300px;
width: 580px;
height: 325px;
background-color : #c02c78;
padding : 5px;
}

event{
font-family : Times New Roman ;
font-size : 14px;
font-weight: bold;
color : #459dff;
margin-left: 300px;
width: 590px;
height: 125px;
background-color : #f36899;
}

footer{
clear : both;
height : 30px;
background-image : url(images/Fotolia_6525764_XS.jpg);
text-align : center;
font-weight: bold;
font-family: times new roman;
color: white;
font-size: 12px;
}

Dan berikut ini sintak dari praktikum.html

<!Doctype HTML>
<html lang="en">

<HEAD>
<TITLE>Desain Layout Halaman Web</TITLE>
<link rel="stylesheet" href="praktikum.css" type="text/css" />
</HEAD>

<BODY>

<HEADER>
<LOGO></LOGO>
<TE><Font color = "#e98ebd" align = "center" face= "Snap ITC"> - SEMANGAT UNTUK HIDUP -</font></TE>
</HEADER>
<NAV>
<div align="center" size = "1">
<ul id="nav">
<li><a href="" title = "Downloads" >Downloads</a></li>
<li><a href="" title = "Tips" >Tips</a></li>
<li><a href="" title = "Tutorials" >Tutorials</a></li>
<li><a href="" title = "Media" >Media</a></li>
<li><a href="" title = "Home" >Home</a></li>
</ul>
<SEARCH><font color = "#c02c78">Search</font></SEARCH><BOX>
<INPUT type="text" size="20" />
</BOX>
</NAV>

<SECTION>
<PICT></PICT>
<ARTICLE>
3 hal dalam hidup yang tak pernah kembali :
<br>1. Waktu
<br>2. Perkataan
<br>3. Kesempatan
<br>Kita tak bisa memutar kembali waktu, tapi kita bisa menciptakan kenangan dengan waktu yang masih kita punya dan memanfaatkan waktu yang ada, walau sebentar, untuk menciptakan kenangan yang berarti.
<br>Kita tak bisa menarik ucapan kasar yang keluar dari mulut kita atau statement yang telah membuat harga diri kita lebih penting dari pada menariknya kembali dan mengucapkan maaf.
<br>Kita tak bisa menghapus caci maki yang telah kita katakan hingga membuat orang lain marah, terluka atau menangis.Tapi kita bisa membuat apa yang selanjutnya keluar dari mulut kita menjadi lebih banyak pujian dibanding caci maki, lebih banyak syukur dan terima kasih dari pada keluhan atau komplain, dan lebih banyak nasihat positif dari pada sulutan amarah^^
<br>Kita tak bisa mendapatkan kembali kesempatan yang sudah kita lewatkan. Tapi kita bisa menciptakan peluang untuk membuat kesempatan-kesempatan lain datang dalam hidup kita dengan lebih memperhatikannya.
</ARTICLE>
<EVENT><BR>
<B> &nbsp <font color = "#7b1e3f">CATEGORIE yang bisa diakses :</B>
<br> <a href= "http://facebook.com/" title = "facebook"> Masuk ke Link Facebook </a>
<br> <a href= "http://blogger.com" title = "blog"> Membuat Link Blogger </a>
<br> <a href= "http://um.ac.id" title = "um"> Masuk ke Link UM </a>
<br> <a href= "http://www.filehippo.com" title = "Software"> Download FREE Software </a>

</EVENT>
</SECTION>
<FOOTER>
Home | News & Media | Tutorial | Tips & Tricks | Download
<br><font align = "center">&reg Suastika Yulia Riska-109533414510 </font>
</FOOTER>
</BODY>
</HTML>

Tampilan dari design tersebut adalah :

Semoga bermanfaat untuk Anda, sehingga Anda dapat mengaplikasikan konsep ini sebagai referensi dalam pembuatan WEB Anda...
Terima kasih atas kunjungannya ^.^

Membuat Layout Halaman Website memanfaatkan HTML 5

Posted by Riesh_16 on 3:44 AM

SINTAK untuk pembuatan LAYOUT yang memanfaatkan elemen pada HTML 5

Sintak studi kasus.css

#header {
height : 80px;
border : 1px solid green;
}

#nav{
height : 30px;
border : 1px solid blue;
}

#section{
height : 340px;
border : 1px solid red;
padding : 15px;
}

#sidebar{
float : left;
margin-right : 20px;
width : 800px;
height : 330px;
border : 1px dashed red;
}

#content{
float : left;
width : 329px;
height : 330px;
border : 1px dashed green;
}

#footer{
clear : both;
height : 30px;
border : 1px solid green;
}

Sintak untuk studi kasus.html adalah :

<!DOCTYPE HTML>
<html lang='en'>

<head>
<title>Desain Layout Sederhana</title>
<link rel="stylesheet" href ="studi kasus.css" type="text/css"/>

</head>

<body>

<div id="header">
Header
</div>

<div id="nav">
Nav
</div>

<div id="section">

<div id="sidebar">
Sidebar
</div>

<div id="content">
Content
</div>
Section

</div>

<div id="footer">
Footer
</div>
</div>
</div>
</body>
</html>

Tampilan Layout berdasar sintak di atas adalah :

Border Dengan Menggunakan CSS

Posted by Riesh_16 on 12:13 AM

Tampilan web :

Studi kasus.css

.lingkaran{
width : 200px;
height : 200px;
-moz-border-radius : 100px;
-webkit-border-radius : 100px;
border : 2px solid #000000;
background-color : #c0c0c0;
}

#dalam-lingkaran{
text-align : center;
position : relative;
border : none;
width : 100px;
heigth : 100px
}

.daun{
padding : 10px;
border : 5px solid #008000;
width : 500px;
height : 50px;
border-bottom-left-radius : 50px;
border-top-right-radius : 50px;
}

.bayangan{
padding : 10px;
border : 2px solid #000000;
-moz-box-shadow : 5px 5px 8px rgba(255,0,255,1);
-webkit-box-shadow : -5px -5px 3px rgba (255,0,0,0.5);
width : 500px;
height : 30px;
}

Studi kasus.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>Studi Kasus CSS</title>
<link href="studi kasus.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="lingkaran" align="center">
<p id="dalam-lingkaran"> Paragraf ini tetap berada di dalam lingkaran </p>
</div>
<br>
<div class="daun"> Border Menyerupai Daun </div>
<br>
<div class="bayangan">Efek Bayangan pada border persegi panjang</div>
</body>
</html>

Semoga Bermanfaat ^o^!!

-- Suastika Yulia Riska_109533414510_s1 PTI09 --