Minggu, 19 Desember 2010

ZODIAK dan SHIO


CODE
Gambar di atas merupakan contoh aplikasi Zodiak dan Shio sederhana menggunakan javascript + html
Berikut ini code dari aplikasi diatas :

<html>
 <head>
  <title>ZODIAK</title>
  <script language="javascript">
   function signs() {
   var start = 1901, birthyear = document.
   zodiac.year.value, date=document.zodiac.date.value,
   month=document.zodiac.month.selectedIndex;

   with (document.zodiac.sign){

   if (month == 1 && date >=20 || month == 2 && date <=18) {value = "Aquarius";}
   if (month == 1 && date > 31) {value = "tanggal tidak valid";}
   if (month == 2 && date >=19 || month == 3 && date <=20) {value = "Pisces";}
   if (month == 2 && date > 29) {value = "tanggal tidak valid";}
   if (month == 3 && date >=21 || month == 4 && date <=19) {value = "Aries";}
   if (month == 3 && date > 31) {value = "tanggal tidak valid";}
   if (month == 4 && date >=20 || month == 5 && date <=20) {value = "Taurus";}
   if (month == 4 && date > 30) {value = "tanggal tidak valid";}
   if (month == 5 && date >=21 || month == 6 && date <=21) {value = "Gemini";}
   if (month == 5 && date > 31) {value = "tanggal tidak valid";}
   if (month == 6 && date >=22 || month == 7 && date <=22) {value = "Cancer";}
   if (month == 6 && date > 30) {value = "tanggal tidak valid";}
   if (month == 7 && date >=23 || month == 8 && date <=22) {value = "Leo";}
   if (month == 7 && date > 31) {value = "tanggal tidak valid";}
   if (month == 8 && date >=23 || month == 9 && date <=22) {value = "Virgo";}
   if (month == 8 && date > 31) {value = "tanggal tidak valid";}
   if (month == 9 && date >=23 || month == 10 && date <=22) {value = "Libra";}
   if (month == 9 && date > 30) {value = "tanggal tidak valid";}
   if (month == 10 && date >=23 || month == 11 && date <=21) {value = "Scorpio";}
   if (month == 10 && date > 31) {value = "tanggal tidak valid";}
   if (month == 11 && date >=22 || month == 12 && date <=21) {value = "Sagittarius";}
   if (month == 11 && date > 30) {value = "tanggal tidak valid";}
   if (month == 12 && date >=22 || month == 1 && date <=19) {value = "Capricorn";}
   if (month == 12 && date > 31) {value = "tanggal tidak valid";}
   }

   x = (start - birthyear) % 12
   with (document.zodiac.csign){

   if (x == 1 || x == -11) {value = "Tikus";}
   if (x == 0) {value = "Kerbau";}
   if (x == 11 || x == -1) {value = "Macan";}
   if (x == 10 || x == -2) {value = "Kelinci";}
   if (x == 9 || x == -3) {value = "Naga";}
   if (x == 8 || x == -4) {value = "Ular";}
   if (x == 7 || x == -5) {value = "Kuda";}
   if (x == 6 || x == -6) {value = "Kambing";}
   if (x == 5 || x == -7) {value = "Monyet";}
   if (x == 4 || x == -8) {value = "Ayam";}
   if (x == 3 || x == -9) {value = "Anjing";}
   if (x == 2 || x == -10) {value = "Babi";}
   }
   }
   </script>
   </head>
   <body>
    <form name="zodiac">
     <table bgcolor="#FF3300" border="2" bordercolor="#FFFFFF" rules="none" cellspacing="0" cellpadding="15px">
<caption><font face="Calibri" size="+2"><b>Zodiak dan Shio</b></font></caption>
       <tr>
        <td><b>Year</b></td>
        <td><div align="left">
        <input type="text" name="year" value="Birth Year" onClick=value="" size="20"></div>
        </td>
       </tr>
       <tr>
<td><b>Month</b></td>
        <td><div align="left">
        <select name="month">
        <option value="x">Select Birth Month</option>
        <option value="1">January</option>
        <option value="2">February</option>
        <option value="3">Maret</option>
<option value="4">April</option>
        <option value="5">May</option>
        <option value="6">June</option>
        <option value="7">July</option>
        <option value="8">August</option>
        <option value="9">September</option>
<option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option></select>
        </div></td>
       </tr>
       <tr>
        <td><b>Day</b></td>
<td><div align="left"><input type="text" name="date" value="Day"  onClick=value="" size="20"></div></td>
       </tr>
       <tr>
        <td><b>Zodiak</b></td>
        <td><div align="left"><input type="text" name="sign" size="20" value="" align="right"></div></td>
       </tr>
       <tr>
        <td><b>Shio</b></td>
<td><div align="left"><input type="text" name="csign" size="20"></div></td>
       </tr>
       <tr>
        <td align="center" colspan="2">
        <input type="button" value="View !" onClick="signs()"><input type="reset" value="Again !">
        </td>
       </tr>
    </table>
   </form>
</body>
 </html>

PASARAN HARI JAWA


CODE
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>WETON</title>
    <style>
        #font{
            font-family:Calibri;
        }
        P{background-color:#FF6600;
        }
        body{
            background-color:#FFFF33;
        }
    </style>
    <script type="text/javascript">
        function HitungHari(TanggalMasukan) {
        hari_a=TanggalMasukan.getDay();

        if (hari_a==0) hari="Minggu";
        else if (hari_a==1) hari="Senin";
        else if (hari_a==2) hari="Selasa";
        else if (hari_a==3) hari="Rabu";
        else if (hari_a==4) hari="Kamis";
        else if (hari_a==5) hari="Jumat";
        else if (hari_a==6) hari="Sabtu";

        return(hari);
        }
        function HitungPasaran(TanggalMasukan) {
        inisial=new Date(70,0,2);
        hasil_bagi=((TanggalMasukan.getTime()-inisial.getTime())+86400000)/432000000;
        sisa=Math.round((hasil_bagi-Math.floor(hasil_bagi))*10)/2;

        if (sisa==0) pasaran="Wage";
        else if (sisa==1) pasaran="Kliwon";
        else if (sisa==2) pasaran="Legi";
        else if (sisa==3) pasaran="Pahing";
        else if (sisa==4) pasaran="Pon";

        return(pasaran);
        }
        function Ramalkan(form) {
        if ((!form.TanggalKamu.value)|(!form.TahunKamu.value))
        {
        alert("Data kurang! Input tidak bisa diproses!")
        }
        else {
        TanggalMasukanKamu=new Date(form.TahunKamu.value, (form.BulanKamu.selectedIndex), form.TanggalKamu.value);
        hariKamu=HitungHari(TanggalMasukanKamu);
        pasaranKamu=HitungPasaran(TanggalMasukanKamu);
        document.write("<P>Hari kelahiran (Weton) kamu adalah <B> "+hariKamu + " " + pasaranKamu+"</B></P>");

        }
        }
        
        </script>
    </head>
    <body>
        <form method='post' name='my_form' >
            <table border="2" bordercolor="#990066" cellpadding="5px" align="center">
                <tr>
                    <td>
                        <table id="font">
                            <caption><font size="+2">PASARAN HARI JAWA</font></caption>
                            <tr>
                                <td>&nbsp;</td>
                            </tr>
                            <tr>
                                <td>Entry Your Date Birth</td>
                                <td>:</td>
                                <td><input type="text" name="TanggalKamu" size="2" /></td>
                            </tr>
                            <tr>
                                <td>Entry Your Month Birth</td>
                                <td>:</td>
                                <td><select name="BulanKamu"><OPTION selected value=1>January
                                    <OPTION value=2>February
                                    <OPTION value=3>Maret
                                    <OPTION value=4>April
                                    <OPTION value=5>May
                                    <OPTION value=6>June
                                    <OPTION value=7>July
                                    <OPTION value=8>August
                                    <OPTION value=9>September
                                    <OPTION value=10>October
                                    <OPTION value=11>November
                                    <OPTION value=12>December</OPTION></select>
                                </td>
                            </tr>
                            <tr>
                                <td>Entry Your Year Birth</td>
                                <td>:</td>
                                <td><input type="text" name="TahunKamu" size="4" /></td>
                            </tr>
                            <tr>
                                <td>&nbsp;</td>
                            </tr>
                            <tr>
                                <td colspan="2" align="center">
                                <INPUT maxLength=256 onclick=Ramalkan(this.form) type=button value=" View ! " /></td>
                                <td align="center"><input type="reset" value="Again !"></td>
                            </tr>
                            </table>
                    </td>
                </tr>
                
            </table>
        </form>
    </body>
</html>

LAY OUT SEDERHANA 6










Lay Out Sederhana menggunakan HTML dan CSS

CODE

<html>
<head>
<title>DIV 3</title>
<style>
#tabel{
width:100%;
height:88%;
}
#header{
width:100%;
height:20%;
background:#CC00CC;
}
#nav2{
width:15%;
height:87%;
background:#FF0033;
float:right;

}
#nav1{
width:15%;
height:87%;
background:#FF0033;
float:left;
}
#conten{
width:100%;
height:85%;
background:#CC0066;
margin:-20px 0;
}
#footer{
margin:-20px 0;
width:100%;
height:10%;
background:#CC00CC;
float:left;
}
#a{
float:left;
width:70%;
}
</style>
</head>
<body>
<div id="tabel">
<div id="header">
<h2 align="center">HEADER</h2>
</div>
<div id="nav1">
<h2 align="center">NAVIGASI1</h2>
</div>
<div id="a">
<div id="conten">
<h2 align="center">CONTAINT</h2>
</div>
<div id="footer">
<h2 align="center">FOOTER</h2>
</div>
</div>
<div id="nav2">
<h2 align="center">NAVIGASI2</h2>
</div>
</div>
</body>
</html>

LAY OUT SEDERHANA 5











Lay Out Sederhana menggunakan HTML dan CSS
CODE

<html>
<head>
<title>DIV 2</title>
<style>
#tabel{
width:100%;
height:88%;
}
#header{
width:100%;
height:25%;
background:#CC00CC;
}
#nav{
width:15%;
height:84%;
background:#FF0033;
float:right;
}
#conten{
width:108%;
height:78%;
background:#CC0066;
float:left;
}
#footer{
margin:-20px 0;
width:108%;
height:10%;
background:#CC00CC;
float:left;
}
#a{
float:left;
width:80%;
}
</style>
</head>
<body>
<div id="tabel">
<div id="header">
<h2 align="center">HEADER</h2>
</div>
<div id="a">
<div id="conten">
<h2 align="center">CONTAINT</h2>
</div>
<div id="footer">
<h2 align="center">FOOTER</h2>
</div>
</div>
<div id="nav">
<h2 align="center">NAVIGASI</h2>
</div>
</div>
</body>
</html>


LAY OUT SEDERHANA 4












Lay Out Sederhana Menggunakan HTML dan CSS
CODE
<html>
<head>
<title>DIV 1</title>
<style>
#tabel{
width:100%;
height:88%;
}
#header{
width:100%;
height:25%;
background:#CC00CC;
}
#nav{
width:20%;
height:75%;
background:#9933FF;
float:left;
}
#conten{
width:80%;
height:75%;
background:#FF33AE;
float:right;
}
#footer{
margin:-20px 0;
width:100%;
height:10%;
background:#CC00CC;
}
</style>
</head>
<body>
<div id="tabel">
<div id="header">
<h2 align="center">HEADER</h2>
</div>
<div id="nav">
<h2 align="center">NAVIGASI</h2>
</div>
<div id="conten">
<h2 align="center">CONTAINT</h2>
</div>
<br style="clear:both"/>
<div id="footer">
<h2 align="center">FOOTER</h2>
</div>
</div>
</body>
</html>