Kamis, 18 Oktober 2012

PHP Membuat Kalender

Berikut adalah code PHP untuk membuat Kalender


<?php
// deklarasi jumlah hari dalam 1 bulan
$num_days["January"]=31;
$num_days["February"]=($leap==1 ? 29 : 28);
$num_days["March"]=31;
$num_days["April"]=30;
$num_days["May"]=31;
$num_days["June"]=30;
$num_days["July"]=31;
$num_days["August"]=31;
$num_days["September"]=30;
$num_days["October"]=31;
$num_days["November"]=30;
$num_days["December"]=31;
// deklarasi nama hari
$days = Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat");
$today_num=$tnc=date("j");
$today_day=date("D");
$tdc=array_search(date("D"),$days);
while ($tnc > 1){
$tdc--;
if ($tdc < 0){$tdc=6;}
$tnc--;
}
$counter_day=$days[$tdc];
$counter_day_num=1;
$total_days=$num_days[date("F")];
$on=0;
$date_display_title="<b>".date("F")."</b>(<i><font size=1 color='black'>".date("Y")."</font></i>)";
echo "<table border=0 cellpadding=3 cellspacing=1>
<tr><td colspan=7>{$date_display_title}</td></tr>
<tr>
<td><b>S</b></td>
<td><b>M</b></td>
<td><b>T</b></td>
<td><b>W</b></td>
<td><b>T</b></td>
<td><b>F</b></td>
<td><b>S</b></td>
</tr>
<tr>";
while ($counter_day_num <= $total_days){
if ($on > 6) {$on=0; echo "</tr><tr>";
}
if ($counter_day !=$days[$on]){
echo "<td>$nbsp</td>";$on++;continue;
}
if (isset($dull)){
echo "<td style='background:#990099;'>";
echo "<font style='color:grey'>
{$counter_day_num}</font></td>";
}
else{
echo "<td style='background:#00FF66;'
align=center>".$counter_day_num."</td>";
if($counter_day_num==date("j")){$dull=true;}
}
$counter_day_num++;
$next_day=array_search($counter_day,$days)+1;
$counter_day=$days[($next_day > 6 ? 0 :$next_day)];
$on++;
}
echo "</tr>
</table>";
?>


berikut hasilnya jika file di jalankan

Rabu, 10 Oktober 2012

Dimana JavaScript Diletakkan

Dimana JavaScript diletakkan

JavaScript dapat diletakkan di <body> dan di bagian <head> pada halaman HTML.

JavaScript di <body>

Contoh di bawah memanipulasi isi dari elemen <p> ketika halaman di load:

<!DOCTYPE html>
<html>
<body>
<h1>Halaman Web Saya yang Pertama</h1>
<p id="demo">Paragraf Pertama Saya.</p>
<script>
document.getElementById("demo").innerHTML="JavaScript Pertama Saya";
</script>
</body>
</html>

JavaScript ditempatkan di bagian bawah halaman untuk memastikan itu dijalankan setelah elemen <p> dibuat.

JavaScript Fungsi dan Event

Pernyataan JavaScript dalam contoh di atas, dijalankan ketika halaman di load.

Kadang-kadang kita ingin mengeksekusi JavaScript ketika sebuah event (peristiwa) terjadi, seperti ketika pengguna mengklik tombol. Kemudian kita dapat menulis script dalam fungsi, dan memanggil fungsi ketika peristiwa itu terjadi.

Anda akan belajar lebih banyak tentang fungsi dan event JavaScript di bab berikutnya.

Sebuah Fungsi JavaScript  di <head>

Contoh di bawah memanggil fungsi di bagian <head> ketika sebuah tombol diklik:

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="Fungsi JavaScript Pertama Saya";
}
</script>
</head>
<body>
<h1>Halaman Web Saya</h1>
<p id="demo">Paragraf</p>
<button type="button" onclick="myFunction()">Coba</button>
</body>
</html>

Sebuah Fungsi JavaScript di <body>

Contoh ini juga memanggil fungsi ketika sebuah tombol diklik, tetapi fungsi ini di dalam <body>:

<!DOCTYPE html>
<html>
<body>
<h1>Halaman Web Saya</h1>
<p id="demo">Paragraf</p>
<button type="button" onclick="myFunction()">Coba</button>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="Fungsi JavaScript Pertama Saya";
}
</script>
</body>
</html>

Skrip di <head> dan <body>

Anda dapat menempatkan skrip dalam jumlah yang tidak terbatas dalam dokumen Anda, dan Anda dapat memiliki skrip baik di <body> dan di bagian <head> pada waktu yang sama.

Ini adalah praktek umum untuk menempatkan fungsi di bagian <head>, atau di bagian bawah halaman. Dengan cara ini mereka semua di satu tempat dan tidak mengganggu konten halaman.
Menggunakan JavaScript Eksternal

Script juga dapat ditempatkan dalam file eksternal. File eksternal sering berisi kode yang akan digunakan oleh beberapa halaman web yang berbeda.

File JavaScript Eksternal memiliki ekstensi file. Js.

Untuk menggunakan skrip eksternal, gunakan atribut "src" dari tag <script>.

<!DOCTYPE html>
<html>
<body>
<h1>Halaman Web Saya</h1>
<p id="demo">Paragraf</p>
<button type="button" onclick="myFunction()">Coba</button>
<p><strong>Catatan:</strong> Memanggil script eksternal "SkripSaya.js".</p>
<script type="text/javascript" src="SkripSaya.js"></script>
</body>
</html>

function myFunction()
{
document.getElementById("demo").innerHTML="Fungsi JavaScript Pertama Saya";
}

Anda dapat menempatkan script di <head> atau <body> yang Anda inginkan. Script akan berlaku di mana Anda menempatkan tag <script> dalam dokumen.
Skrip eksternal tidak memakai tag <script>.
Artikel Sebelumnya .....
Artikel Selanjutnya .....

Cara Menggunakan JavaScript

Cara Menggunakan JavaScript

JavaScript dikelilingi oleh tag <script> dan tag </ script>.

JavaScript biasanya digunakan untuk memanipulasi elemen HTML.

Tag <script>

Untuk menyisipkan JavaScript ke dalam halaman HTML, gunakan tag <script>.

<script> dan </ script> memberitahukan di mana JavaScript dimulai dan berakhir.

Antara <script> dan </ script> adalah isi JavaScript:

<script>
alert("JavaScript Saya");
</script>

Anda tidak perlu memahami kode di atas. Tetapi faktanya, bahwa browser akan menafsirkan dan mengeksekusi kode JavaScript antara tag <script> dan tag </ script>.
Dalam beberapa contoh di tulis type = "text / javascript" dalam tag <script>. Hal ini tidak diperlukan dalam HTML5. JavaScript adalah scripting bahasa default di semua browser modern dan HTML5.
Memanipulasi Elemen HTML

Untuk mengakses sebuah elemen HTML dari JavaScript, Anda dapat menggunakan document.getElementById (id) method.

Gunakan "id" atribut untuk mengidentifikasi elemen HTML:

<!DOCTYPE html>
<html>
<body>
<h1>Halaman Web Saya yang Pertama</h1>
<p id="demo">Paragraf Pertama Saya.</p>
<script>
document.getElementById("demo").innerHTML="JavaScript Pertama Saya";
</script>
</body>
</html>

Ketika JavaScript dieksekusi oleh browser web. Dalam kasus ini, browser akan mengakses elemen HTML dengan id "demo" =, dan mengganti isinya (innerHTML) dengan "JavaScript Pertama Saya".

Menulis ke Output Dokumen

Contoh di bawah ini menulis elemen <p> langsung ke output dokumen HTML:

<!DOCTYPE html>
<html>
<body>

<h1>Halaman Web Pertama Saya</h1>

<script>
document.write("<p>JavaScript Pertama Saya</p>");
</script>

</body>
</html>

Peringatan

Menggunakan document.write () hanya untuk menulis langsung ke output dokumen.

Jika Anda menjalankan document.write setelah dokumen selesai diloading, maka halaman HTML keseluruh akan ditimpa:

<!DOCTYPE html>
<html>
<body>

<h1>Halaman Web Pertama Saya</h1>

<p>Paragraf Pertama Saya</p>

<button onclick="myFunction()">Coba Klick</button>

<script>
function myFunction()
{
document.write("Ups! Dokumen menghilang!");
}
</script>

Artikel Sebelumnya .....
Artikel Selanjutnya .....

Senin, 08 Oktober 2012

Menyisipkan CSS

Menyisipkan CSS

Ketika browser membaca sebuah style sheet, maka akan memformat dokumen sesuai untuk itu.

Tiga Cara Sisipkan CSS


Ada tiga cara untuk memasukkan sebuah style sheet:

     Eksternal style sheet
     Internal style sheet
     inline style

Eksternal Style Sheet
Sebuah style sheet eksternal sangat ideal bila diterapkan pada banyak halaman. Dengan style sheet eksternal, Anda dapat mengubah tampilan seluruh situs Web dengan mengubah satu file. Setiap halaman harus dilink ke style sheet menggunakan tag <link>. Tag <link> diletakkan pada bagian head:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

Sebuah style sheet eksternal dapat ditulis dengan editor teks apapun. File tidak boleh mengandung tag html. Style sheet Anda harus disimpan dengan ekstensi css.
Contoh dari sebuah file style sheet adalah sebagai berikut:

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}

Jangan menambahkan spasi antara nilai properti (seperti margin-left: 20 px). Cara yang benar adalah: margin-left: 20px

Internal Style Sheet

Sebuah style sheet internal digunakan bila dokumen tunggal memiliki style yang unik. Anda mendefinisikan internal style di bagian head pada halaman HTML, dengan menggunakan tag style, seperti ini:

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
Inline Styles

Untuk menggunakan style inline Anda menggunakan atribut style dalam tag yang relevan. Atribut style dapat berisi properti CSS. Contoh ini menunjukkan bagaimana untuk mengubah warna dan margin kiri paragraf:

<p style="color:sienna;margin-left:20px">Ini adalah paragraph.</p>

Artikel Sebelumnya .....
Artikel Selanjutnya .....

Jumat, 05 Oktober 2012

CSS 3 Id dan Class

CSS Id dan Class

Selectors id dan class

Selain menetapkan selector dari elemen HTML, CSS memungkinkan Anda untuk membuat selector buatan  Anda sendiri yang disebut "id" dan "class".

Id Selector

Selector id digunakan untuk membuat satu elemen yang unik.
Selector id menggunakan atribut id dari elemen HTML, dan didefinisikan dengan "#".

pengaturan style dibawah ini akan diterapkan ke elemen dengan id = "para1":

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#para1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="para1">Hallo Dunia !</p>
<p>paragraph ini tidak di kenai efek style</p>
</body>
</html>
Jangan memulai nama ID dengan nomor! Ini tidak akan bekerja di Mozilla / Firefox.

Selector Class

Selector class digunakan untuk membuat style untuk sekelompok elemen. Berbeda dengan selector id, selector class yang paling sering digunakan pada beberapa elemen.

Hal ini memungkinkan Anda untuk membuat style tertentu untuk banyak elemen HTML dengan kelas yang sama.
Selector class menggunakan atribut class HTML, dan didefinisikan dengan "."
Pada contoh di bawah ini, semua elemen HTML dengan class = "center" akan di ketengahkan:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">heading di ketengahkan</h1>
<p class="center">paragraph di ketengahkan</p>
</body>
</html>
Anda juga dapat menentukan hanya elemen HTML tertentu yang di kenakan efek class.
Pada contoh di bawah ini, semua elemen p dengan class = "center" akan menjadi di ketengahkan:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">heading ini tidak dikenai efek</h1>
<p class="center">paragraph ini akan di ketengahkan</p>
</body>
</html>

Jangan memulai nama kelas dengan nomor! Ini hanya didukung di Internet Explorer.
Artikel Sebelumnya .....
Artikel Selanjutnya .....