Tutorial Website Lengkap: Oktober 2011

Fungsi php Vprintf

PHP (array.php)

<html>
<head>
</head>
<body>
<?php
$buah = array (2, "Rambutan", 3, "Pisang", 1, "Apel", 4, "Durian");
vprintf("Anda mempunyai %d %s,%d %s, %d %s dan %d %s.",$buah);
?>
</body>
</html>

Hasil :
Anda mempunyai 2 Rambutan,3 Pisang, 1 Apel dan 4 Durian.

Alert Javascript

HTML( alert.html )

<html>
<head>
<script type="text/javascript">
function show_confirm()
{
var r=confirm("Tekan Tombol!");
if (r==true)
{
alert("Anda menekan Ok!");
}
else
{
alert("Anda menekan No!");
}
}
</script>
</head>
<body>

<input type="button" onclick="show_confirm()" value="Show a confirm box" />

</body>
</html>

Great animation direction with css

HTML(css.html)

<html><head>
<style type="text/css">
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s infinite;
animation-direction:alternate;
/* Firefox */
-moz-animation:myfirst 5s infinite;
-moz-animation-direction:alternate;
/* Safari and Chrome */
-webkit-animation:myfirst 5s infinite;
-webkit-animation-direction:alternate;
}

@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

@-moz-keyframes myfirst /* Firefox */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<table style="position:relative; ">
<tr>
<td>
<div></div></td>
</tr>
</table>
</body></html>

Note: This example does not work in Internet Explorer and Opera.

Download

Sumber : w3school

Z-index Css

Z-Index merupakan penempatan layer pada css, contoh:

HTML (index.html)

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<style>
.layer1{position:relative;
z-index:1;
top:0;
left:0;
background:#ff0000;
width:100px;
height:100px;
}
.layer2{
position:absolute;
z-index:0;
top:50px;
left:50px;
background:#eeeeee;
width:100px;
height:100px;

}
</style>
<body>
<div class="layer1"></div>
<div class="layer2"></div>
</body>
</html>

Demo :

Trik Css,change image on hover

HTML (css.html)

<html>
<head>
<title>Trik Css</title>
</head>
<style>
.panel{
background:url(images/1.png) top right no-repeat;
display:block;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: initial;
background-position: 0% 100%;
}
#thumb{
opacity:0;

-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;

}
#thumb:hover{
opacity:1;

-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;

}
</style>
<body>
<table><tr><td>
<a href="#">
<span class="panel"><img src="images/2.png" alt="" id="thumb" ></span></a>
</td></tr></table>
</body>
</html>

Demo/example :

Note : Doesn`t work in ie.

Mengganti text font di hover dengan css

HTML (hover.html)

<html>
<head>
<title>Mengganti font</title>
<style type="text/css">
a.textchange span.text1 {
display:inline;
font-family:arial;
}
a.textchange:hover span.text1 {
display:none;
}
a.textchange span.text2 {
display:none;
}
a.textchange:hover span.text2 {
display:inline;
font-family:"times new roman";
}
</style>
</head>
<body>
<a href="#" class="textchange" style="text-decoration:none; color:#555555;"><span class="text1">text pertama dengan font arial dan warna abu - abu</span>
<span class="text2" style="text-decoration:none; color:#ff0000; ">text saat hover dengan font times new roman dan warna merah</span></a>
</body>
</html>

Contoh :

text pertama dengan font arial dan warna abu - abu text saat hover dengan font times new roman dan warna merah

Mendapatkan informasi dari indeks dengan array keys

PHP (array.php)

<html>

<head>

<title>Array trick</title>

</head>

<body>

<?php

$jadwal = array ('pagi' => 'mie', 'siang' => 'bakso', 'sore' => 'mie', 'malam' => 'sate');

$a=array_keys($jadwal, 'mie');

for($i=0;$i<count($a);$i++){

echo "$a[$i]<br>";

}

</body>

</html>

Css Smooth Transition

HTML (Css.html)

<html>
<head>
<title>Transition CSS</title>

<style>
#hello {
opacity: 0.3;
-moz-transition-property: opacity;
-moz-transition-duration: 2s;
-moz-transition-delay: 1s;
-webkit-transition-property: opacity;
-webkit-transition-duration: 2s;
-webkit-transition-delay: 1s;
-o-transition-property: opacity;
-o-transition-duration: 2s;
-o-transition-delay: 1s;
transition-property: opacity;
transition-duration: 2s;
transition-delay: 1s;
}

#hello:hover {
opacity: 1;
}
</style>

</head>
<body>
<p id="hello">Hello, CSS lover!</p>
</body>
</html>

Fungsi Implode

PHP (array.php)

<html><head><title>Belajar Array</title></head>
<body>
<?php
$bidang_studi = array ("Teknik Informatika",
"Sistem Informasi",
"Teknik Komputer",
"Manajemen Informatika",
"Komputer Akuntansi");

$hasil=implode(" - ",$bidang_studi);
echo "hasil = $hasil";
?>
</body>
</html>

Kombinasi explode dengan foreach

PHP (array.php)

<html><head><title>Belajar Array</title></head>

<body>

<?php

$kalimat="bakso,mie,tahu campur,tempe,tahu,kacang";

$pecah=explode(",",$kalimat);

echo '<form name="explode">';

foreach($pecah as $key => $pecah2){

echo "<input type='checkbox' value=$key>$pecah2<br>";

}

echo '</form>';

</body>

</html>

Full Background 100%

CSS (Css.css)

* { margin: 0; padding: 0; }

html {
background: url(images/1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

#page-wrap { width: 400px;
margin: 50px auto;
padding: 20px;
background: white;
-moz-box-shadow: 0 0 20px black;
-webkit-box-shadow: 0 0 20px black;
box-shadow: 0 0 20px black;
}

p {
font: 15px/2 Georgia, Serif; margin: 0 0 30px 0;
text-indent: 40px;
}

HTML (full.html)

<html>
<head>
<title>Full Background 100%</title>

</head>

<body>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta imperdiet diam at convallis. Praesent gravida, nibh vel eleifend auctor, mauris erat consectetur erat, eget vehicula mauris nulla viverra urna. Suspendisse ultrices felis interdum ante venenatis facilisis. Aenean molestie sagittis vestibulum. Integer pellentesque dolor ac urna sagittis fringilla. Duis rhoncus, est in adipiscing adipiscing, quam justo vulputate quam, nec pharetra est purus a nibh. Sed fermentum sem ut diam venenatis fringilla in ut augue. Nam placerat volutpat enim sit amet tincidunt. Suspendisse pulvinar augue in libero blandit sed scelerisque nulla tempus. Integer viverra tincidunt ornare. Duis et faucibus augue. Nulla elementum porta nibh, in fermentum arcu aliquam nec. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam quam ligula, fermentum sit amet viverra sit amet, cursus id nibh. Ut pharetra, quam nec vestibulum venenatis, lorem lorem interdum ipsum, sit amet aliquam elit tellus id lorem.

</div>

</body>

</html>

Download FullBackground.rar

Mengganti Data string menggunakan strtr()

PHP (array.php)

<html>
<head><title>Belajar Array</title>
</head>
<body>

<?php
$data=array("AD" => "adalah",
"SB" => "sebuah",
"PB" => "pembayaran");

$kalimat="Uang AD SB alat PB";
$hasil=strtr($kalimat, $data);

echo "Kalimat utama : $kalimat <br>";
echo "Setelah strtr : $hasil";
?>
</body>
</html>

Mengganti Data Array dengan str_replace

PHP (array.php)

<html>
<head><title>Belajar Array</title>
</head>
<body>

<?php
$sebelum="Orang suka MENEMBAKI cucunya sendiri";
$sesudah=str_replace("MENEMBAKI","MEMELUK", $sebelum);

echo "Sebelum : $sebelum <br>";

echo "Sesudah : $sesudah";
?></body>
</html>

Memecah Array Dengan Explode

PHP (explode.php)

<html>
<head><title>Belajar Array</title>
</head>
<body>

<?php

$aktifitas="renang,bermain bola,mancing,berburu,belajar,menembak";

$pecah=explode(",",$aktifitas);

echo "Data yang sudah di pecah : <br>";

print_r($pecah);

echo "<br><br><br>Data array yang diatur dengan for :<br><br>";

for ($i=0;$i<count($pecah);$i++){

echo "$pecah[$i]";

echo "<br>";

}

</body>
</html>

Memecah Array Dengan Str_split

PHP (strsplit.php)

<?php
$arraye=str_split("pecahan");
$f=count($arraye);
for ($i=0;$i<$f; $i++){
echo "$i. $arraye[$i]";
echo "<br>";
}
?>

Tutorial Dasar DOM

HTML (Dom.html)

Document Object Model (DOM) adalah object model standar untuk HTML dan XML yang bersifat platform independent. Sebuah web browser tidak harus menggunakan DOM untuk menampilkan dokumen HTML. Namun DOM diperlukan oleh JavaScript yang akan mengubah tampilan sebuah website secara dinamis. Dengan kata lain, DOM adalah cara JavaScript melihat suatu halaman HTML.

<html>
<head><title>Belajar DOM</title>
</head>
<body>
Ini text html biasa<br>
<table id="dom"><tr><td>one</td>
<td>two</td>
<td>three</td></tr>
<tr><td>four</td>
<td>five</td>
<td>six</td></tr></table>
<br><br><br>
Ini text yang dihasilkan Dom :<br>
<script type="text/javascript">
x=document.getElementById("dom").getElementsByTagName("td");
for (i=0;i<x.length;i++){
document.write(x[i].innerHTML);
document.write("<br>");
}
</script>
</body>
</html>

Menampilkan Semua data array dengan foreach

PHP(array.php)

<html><head><title>Belajar Array</title></head>
<body>
<?php
$bidang_studi = array ("Teknik Informatika",
"Sistem Informasi",
"Teknik Komputer",
"Manajemen Informatika",
"Komputer Akuntansi");

foreach ($bidang_studi as $jurusan){
echo "$jurusan<br>";
}
?>
</body>
</html>

Menampilkan Array dengan fungsi Looping for

PHP(array.php)

<html><head><title>Belajar Array</title></head>
<body>
<?php
$bidang_studi = array ("Teknik Informatika",
"Sistem Informasi",
"Teknik Komputer",
"Manajemen Informatika",
"Komputer Akuntansi");

for ($i=0; $i < count($bidang_studi); $i++){
echo "$bidang_studi[$i] <br>";
}
?>
</body>
</html>

Menampilkan Array dengan fungsi Looping While

PHP(array.php)

<html><head><title>Belajar Array</title></head>
<body>
<?php
$bidang_studi = array ("Teknik Informatika",
"Sistem Informasi",
"Teknik Komputer",
"Manajemen Informatika",
"Komputer Akuntansi");

$i=0;
while ($i < count ($bidang_studi)){
echo "$bidang_studi[$i]<br>";
$i++;
}
?>
</body>
</html>

Menampilkan array dengan print_r

PHP(array.php)

Konsep Dasar Array dalam PHP

PHP(array.php)

<html><head><title>Belajar Array</title></head>
<body>
<?php
$jur_ti="Teknologi Informatika";
echo "1. Maka tampil seperti ini : $jur_ti<br>";

$bidang_studi = array ("Teknik Informatika",
"Sistem Informasi",
"Teknik Komputer",
"Manajemen Informatika",
"Komputer Akuntansi");
echo "2.Dulu Jurusan saya : $jur_ti , Tapi sekarang ".$bidang_studi['2']."";
echo "<br><br><br>No 1 adalah Bukan Array, tapi No 2 ialah array";
?>
</body></html>

CSS transform

HTML (Transform.html)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
.asli{
width:100px;
height:75px;
background-color:blue;
border:1px solid black;
}
.transform
{
width:100px;
height:75px;
background-color:blue;
border:1px solid black;
transform:rotateY(130deg);
-webkit-transform:rotateY(130deg)
}

</style>
</head>
<body>

Bentuk Asli
<div class="asli">Halo. Ini Bentuk Asli</div>
Hasil Transform
<div class="transform">Halo. Dan ini Hasil Transform</div>

</body>
</html>

PHP Fungsi

Contoh fungsi yang sederhana :

PHP (fungsi.php)

<html>
<body>

<?php
function tulisnama()
{
echo "Muhammad Nurhalim";
}

echo "Nama Saya adalah";
tulisnama();
?>

</body>
</html>

Menambahkan Parameter pada fungsi tulisnama :

PHP (fungsi.php)

<html>
<body>

<?php
function tulisnama($nama)
{
echo $nama . " bin soleh.<br />";
}

echo "Nama saya adalah ";
tulisnama("halim");
echo "Nama Kakak saya adalah ";
tulisnama("wulan");
?>

</body>
</html>

Menggunakan fungsi untuk operasi matematika seperti penambahan atau perkalian :

PHP(fungsi.php)

Session PHP

Session merupakan script yang berfungsi menyimpan data sementara dari website.
Contoh Pengguna an Session :

1. Memulai session

PHP (start.php)

<?php session_start(); ?>

<html>
<body>

</body>
</html>

2. Menyimpan session

PHP (storing.php)

<?php
session_start();
// store session data
$_SESSION['views']=1;
?>

<html>
<body>

<?php
//retrieve session data
echo "Pageviews=". $_SESSION['views'];
?>

</body>
</html>

3. Melihat session

PHP (view.php)

<?php
session_start();

if(isset($_SESSION['views']))
$_SESSION['views']=$_SESSION['views']+1;
else
$_SESSION['views']=1;
echo "Views=". $_SESSION['views'];
?>

4. Menghapus session

PHP (destroy.php)

<?php
session_destroy();
?>

Review

www.Oelhoem93.blogspot.com

Ini adalah review blog of Oelhoem93.blogspot.com anda akan mendapatkan banyak informasi tentang desain grafis, fotografi, web desain dan lain lain. Good desain.

Menampilkan status twitter di website kita

1. Silakan Anda cek id twitter anda di http://www.idfromuser.com

2. XML document :
Contoh ID : 218392201
Ketikkan Pada Url anda : http://twitter.com/statuses/user_timeline/218392201.rss
Maka Akan Tampil seperti berikut :

<item>
<title>...</title>
<description>...</description>
<pubDate>...</pubDate>
<guid>...</guid>
<link>...</link>
<twitter:source>...</twitter:source>
<twitter:place/>
</item>

3. Membaca data XML dengan php :

<?php $idTwitter ='218392201';
$xml = simplexml_load_file("http://twitter.com/statuses/user_timeline/".$idTwitter.".rss");
foreach($xml->channel->item as $data)
{
echo "<p>";
echo $data->pubDate."<br>";
echo $data->title;
echo "</p>";
}
?>

4. Membaca status akhir :

<?php
$idTwitter = '218392201';
$showStatus = 5;
$xml = simplexml_load_file("http://twitter.com/statuses/user_timeline/".$idTwitter.".rss");
$counter = 1;
foreach($xml->channel->item as $data)
{
echo "<p>";
echo $data->pubDate."<br>";
echo $data->title;
echo "</p>";
if ($counter == $showStatus) break;
else $counter++;
}
?>

Awesome Slideshow Javascript

Download Jquery plugin in here

HTML (slideshow.html)

<html>
<head><title>Javascript Slide Show</title>

<script type="text/javascript">

function slideSwitch() {
var $active = $('#slideshow IMG.active');

if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

// use this to pull the images in the order they appear in the markup
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');

// uncomment the 3 lines below to pull the images in random order

// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );

$active.addClass('last-active');

$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}

$(function() {
setInterval( "slideSwitch()", 3000 );
});

</script>
<script type="text/javascript" href="jquery.min"></script> \\download Jquery min in this blog
<style>#slideshow {
position:relative;
height:393px;
}

#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
width: 153px;
}

#slideshow IMG.active {
z-index:10;
opacity:1.0;
}

#slideshow IMG.last-active {
z-index:9;
}
</style>

<body>

<div id="slideshow">
<img src="1.jpg" alt="Slideshow Image 1" width="153" height="393" class="active" />
<img src="2.jpg" alt="Slideshow Image 2" width="153" height="393" />
<img src="3.jpg" alt="Slideshow Image 3" width="153" height="393" />
</div>

</body>
</html>

Download all files in here

Contoh Lain ada di sini

Contoh Penggunakan If, Else If, dan Else.

Menentukan Penampil Gambar

HTML (Form.html)

Jenis Roti : <select name="jenis">

</select><br>

Jumlah Roti : <select name="jumlah">

</select><br>

Pilih Warna : <select name="warna">

</select><br>

</form>

PHP (form.php)

<?php

if (($jenis == "tart") and ($jumlah == "3") and ($warna == "red")){

echo "<img src='3red.jpg' width='100'>";

}

else if (($jenis == 'tart') and ($jumlah == '6') and ($warna == 'red')){

echo "<img src='6red.jpg' width='100'>";

}

else if (($jenis == 'tart') and ($jumlah == '9') and ($warna == 'red')){

echo "<img src='9red.jpg' width='100'>";

}

else if (($jenis == 'tart') and ($jumlah == '3') and ($warna == 'blue')){

echo "<img src='3blue.jpg' width='100'>";

}

else if (($jenis == 'tart') and ($jumlah == '6') and ($warna == 'blue')){

echo "<img src='6blue.jpg' width='100'>";

}

else if (($jenis == 'tart') and ($jumlah == '9') and ($warna == 'blue')){

echo "<img src='9blue.jpg' width='100'>";

}

else if (($jenis == 'cup') and ($jumlah == '3') and ($warna == 'red')){

echo "<img src='3redcup.jpg' width='100'>";

}

else if (($jenis == 'cup') and ($jumlah == '6') and ($warna == 'red')){

echo "<img src='6redcup.jpg' width='100'>";

}

else if (($jenis == 'cup') and ($jumlah == '9') and ($warna == 'red')){

echo "<img src='9redcup.jpg' width='100'>";

}

else if (($jenis == 'cup') and ($jumlah == '3') and ($warna == 'blue')){

echo "<img src='3bluecup.jpg' width='100'>";

}

else if (($jenis == 'cup') and ($jumlah == '6') and ($warna == 'blue')){

echo "<img src='6bluecup.jpg' width='100'>";

}

else if (($jenis == 'cup') and ($jumlah == '9') and ($warna == 'blue')){

echo "<img src='9bluecup.jpg' width='100'>";

}

Download Semua File