57 Pengertian Fungsi Penerapan Json Pada PHP►► URL : http://wwdq.blogspot.com/2013/09/pengertian-fungsi-penerapan-json-pada.html.

Ok setelah kemarin post ngga jelas saya (kesini) , saya akan menjelaskan tentang json pada php mengenai pengertian json itu sendiri, apa saja yang ada di json, fungsinya json untuk apa, dan cara penggunaan json pada php. Sebelumnya kenapa sih saya mengambil topik ini? itu karena saya sempat jadi developer twitter client yang bermain API dengan twitter :v hahaha Twitter API (sekarang API 1.1) memberikan format datanya berbentuk json, karena json bisa diberbagai bahasa, tp pada post ini saya hanya menerapkan atau mencontohkan json pada syntax php, ok langsung saja.

Apasih Json itu?
JSON (dilafalkan "Jason"), singkatan dari JavaScript Object Notation (notasi objek JavaScript), adalah suatu format ringkas pertukaran data komputer. Formatnya berbasis teks dan terbaca-manusia serta digunakan untuk merepresentasikan struktur data sederhana dan larik asosiatif (disebut objek).

Format JSON sering digunakan untuk mentransmisikan data terstruktur melalui suatu koneksi jaringan pada suatu proses yang disebut serialisasi. Aplikasi utamanya adalah pada pemrograman aplikasi web AJAX dengan berperan sebagai alternatif terhadap penggunaan tradisional format XML.

Walaupun JSON didasarkan pada subset bahasa pemrograman JavaScript (secara spesifik, edisi ketiga standar ECMA-262, Desember 1999) dan umumnya digunakan dengan bahasa tersebut, JSON dianggap sebagai format data yang tak tergantung pada suatu bahasa. Kode untuk pengolahan dan pembuatan data JSON telah tersedia untuk banyak jenis bahasa pemrograman. Situs json.org menyediakan daftar komprehensif pengikatan JSON yang tersedia, disusun menurut bahasa.
[Sumber : Wikipedia Id]

Json Pada PHP?
Funsi json pada php ada 2 yaitu
1. json_encode : untuk merubah array ke bentuk json.
2. json_decode : sebaliknya dari bentuk json ke array

untuk contoh kita buat terlebih dahulu datanya yang berbentuk array lalu gunakan funsi json_encode :

 $array = array(
    "nama" => "Rizal",
    "jenis_kelamin" => "Pria",
    "blog" => "http://wwdq.blogspot.com",
    "facebook" => "fb.com/riloaw.us",
    "twitter" => "twitter.com/riloaw"
    );
 echo json_encode($array);

Hasilnya :

{"nama":"Rizal","jenis_kelamin":"Pria","blog":"http:\/\/wwdq.blogspot.com","facebook":"fb.com\/riloaw.us","twitter":"twitter.com\/riloaw"}

 atau sebaliknya dari bentuk json seperti ini dijadikan bentuk array dengan menggunakan json_decode:

 $array = array(
    "nama" => "Rizal",
    "jenis_kelamin" => "Pria",
    "blog" => "http://wwdq.blogspot.com",
    "facebook" => "fb.com/riloaw.us",
    "twitter" => "twitter.com/riloaw"
    );
 $encode = json_encode($array);
 //tampilkan hasil encode
 echo "ini hasil json_encode 
";
 echo $encode;
 echo "

";
 
 $decode = json_decode($encode, true);

 echo "ini contoh yang sudah di decode menjadi array 
" . $decode['nama'];
 
 

ini baru json yang sederhana bisa dibilang sih baru json 2 dimensi  (CMIIW) belum yang array didalam array, yang memakai foreach untuk dijadikan array kembali, mungkin akan saya bahas dipost berikutnya. Dan nanti juga saya akan bahas json yang dipakai Twitter API 1.1 dengan bantuan Twitter Oauth Abraham. Ok terimakasih atas waktunya membaca post ini, sampai berjumpa dipost selanjutnya.

sumber gambar : http://www.claindsilva.com/

Bila Kurang Jelas, silakan bertanya dibawah ini .

→ read more. . . ►► Pengertian Fungsi Penerapan Json Pada PHP.

20 CSS3 - Tutorial CSS3 Transition►► URL : http://wwdq.blogspot.com/2012/08/css3-tutorial-css3-transition.html.

Oke setelah kurang lebih 1 tahun saya memposting pengenalan tentang CSS3, sekarang wwdq akan memberikan tutorial mengenai CSS3 yaitu CSS3 Transition.
CSS3 Transition ini berfungsi memberikan efek perubahan bertahap dari satu style ke style lainnya tanpa menggunakan flash. Mungkin sudah banyak yang tau yah tentang CSS3 ini, tetapi tak ada salahnya bila WWDQ memberikan penjelasan kembali :)
 

Browser yang support?
Untuk CSS3 Transition hanya beberapa browser pada saat ini yang mendukung.

Tutorial CSS3 Transition
Untuk efek transisi atau perpindahan style dari style yang satu ke lainnya, anda harus menentukan 2 hal, yaitu :

1. Tentukan properti CSS yang ingin diberi efek transisi
2. Tentukan durasi efek transisi tersebut

oke langsung ke contoh:
 Contoh ke 1 

Tutorial CSS3

World Web Design Q

Source code:

<style>

/* style pada saat normal memiliki lebar 300px */
.css3 {
transition: width 2s;
-moz-transition: width 2s;
-o-transition: width 2s;
-webkit-transition: width 2s;
background: #ef9e10;
height: 100px;
text-align: center;
width: 300px;
}

/* pada saat mouse ada di elemen, lebarnya menjadi 100% */
.css3:hover {
width:100%;
}
</style>


<div align="center" class="css3">
Tutorial CSS3</div> 

Keterangan

Firefox : -moz-transition: width 2s;
Opera : -o-transition: width 2s;
Chrome / Safari : -webkit-transition: width 2s;

Disini kita membuat efek transisi perubahan lebar dengan durasi efek 2 detik

Kita juga bisa memberikan beberapa properti CSS dalam 1 elemen, misalkan kita mau mengubah style width, height, background, dan lain-lain.

 Contoh ke 2 

Tutorial CSS3

World Web Design Q

Source Code:

<style type="text/css">
/* style pada saat normal memiliki
lebar 300px, tinggi 100px, background warna biru */
.css3_2 {
width: 300px;
height: 100px;
background: #8eceff;
text-align: center;
transition: width 2s, height 2s, background 2s; 
-moz-transition: width 2s, height 2s, background 2s; 
-o-transition: width 2s, height 2s, background 2s;
-webkit-transition: width 2s, height 2s, background 2s;  
}

/* pada saat mouse ada di elemen
lebar 100%, tinggi 130px, background warna orange */
.css3_2:hover {
width:100%;
height:130px;
background:#ef9e10;
}
</style>


<div align="center" class="css3_2">
<span style="font-size: large;"><b>Tutorial CSS3</b></span></div>

Setiap properti CSS , durasi efeknya bisa berbeda, sesuaikan saja dengan kebutuhan.

Sekian tutorial mengenai CSS3 Transition, semoga bisa membantu anda, Terimakasih.

Referensi : http://w3schools.com
Bila Kurang Jelas, silakan bertanya dibawah ini .

→ read more. . . ►► CSS3 - Tutorial CSS3 Transition.

8 PHP - Pengenalan Array Pada PHP►► URL : http://wwdq.blogspot.com/2011/09/php-pengenalan-array-pada-php.html.

Pada arikel World Web Design kali ini akan membahas tentang array di PHP. sebelumnya apasih array tersebut?
    Array adalah sekumpulan variabel yang mempunyai nama sama tetapi dibedakan oleh indeks. Array berguna misalnya dalam suatu pemrograman yang memerlukan beberapa variabel yang akan menampung data dengan tipe data yang sama dan akan mendapat perlakuan yang serupa. Untuk memudahkan kita agar tidak pusing-pusing memikirkan nama variabel yang berbeda-beda, lebih baik menggunakan satu nama variabel tetapi masing-masing dibedakan dengan indeks.

Indeks dapat berupa angka atau string. Jika indeks array berbentuk angka, maka array akan disebut indexed array (vector), sedangkan jika indeksnya berupa string, maka array akan disebut associative array.

Penulisan sebuah array adalah sebagai berikut :

$nama_array[nomor_indeks] atau $nama_array["string_indeks"]

Apakah anda sudah mempunyai bayangan tentang penulisan array? kalau belum, lihat keterangan berikut :

        Nama_array adalah nama variabel yang digunakan sebagai array.
        Nomor_indeks adalah nomor indeks untuk vector array. Nomor indeks dimulai dari nol.
        String_indeks adalah string yang digunakan sebagai indeks untuk associative array.

Untuk mendeklarasikan sebuah array dapat digunakan deklarasi eksplisit, artinya langsung memberi nilai pada sebuah array, contoh:

$nama_array[1] = 500
$nama_array["str"] = 1000

Cara pengeluaran nilai dari variabel dalam fungsi echo berbeda dari yang biasanya. yaitu dengan cara menggunakan kurung kurawal. Ayo kita lihat perbedaannya dalam penulisan syntax :
Penulisan dengan variabel biasa :

<?php echo "Nilai dari variabel adalah $var"; ?>

Menggunakan array penulisannya adalah sebagai berikut:

<?php echo "Nilai dari variabel array adalah {$nama_array[1]}"; ?>

Pemakaian tanda kurung kurawal ini baru dikenal pada PHP 4, sedangkan pada PHP 3, untuk melakukan hal seperti di atas dapat digunakan metoda penggabungan string sebagai berikut:

"Nilai variabel array adalah" . $nama_array[1];

Nah sekarang sudah mengerti bukan? agar lebih mengerti, disini akan memberikan contoh yang lebih jelas.
Array Berindeks Numerik

$nama_array[$key] = value;

dimana seperti yang diatas keterangannya sudah dijelaskan,  $key = 0,1,2,3,..,9
 contoh :

$siswa[0] = "Rizal";
$siswa[1] = "Pandu";
$siswa[2] = "Tama";
$siswa[3] = "Desta";

Berikut ini adalah contoh untuk menampilkan nilai yang disimpan dalam ruang elemen dari suatu array berindeks numerik.

<?php
$siswa[0] = "Rizal";
$siswa[1] = "Pandu";
$siswa[2] = "Tama";
$siswa[3] = "Desta";
echo "Berikut ini adalah 2 orang siswa Multimedia Nesta, yaitu "
. $siswa[0] . " & " . $siswa[1];
echo "<br>2 orang siswa Multimedia Nesta yang lain adalah "
. $siswa[2] . " & " . $siswa[3];
?>

Array Assosiatif

Untuk array assosiatif, sintaksnya sama dengan array berindeks numerik namun perbedaannya adalah pada $key. Pada array assosiatif, $key dapat berupa suatu string. Berikut ini adalah contohnya.

$uang["Rizal"] = 5000;
$uang["Pandu"] = 8000;
$uang["Tama"] = 6000;
$uang["Desta"] = 2000;

Berikut ini adalah contoh kode untuk menampilkan nilai dari array assosiatif :

<?php
$uang["Rizal"] = 5000;
$uang["Pandu"] = 8000;
$uang["Tama"] = 6000;
$uang["Desta"] = 2000;
echo "Rizal mempunyai uang - $" . $uang["Rizal"] . "<br>";
echo "Pandu mempunyai uang - $" . $uang["Pandu"] . "<br>";
echo "Tama mempunyai uang - $" . $uang["Tama"] . "<br>";
echo "Desta mempunyai uang - $" . $uang["Desta"];
?>

        Bagaimana? sudah puas bukan penjelasan pada artikel kali ini

Thanks to

   Referensi

1. blog.rosihanari.net
2. hendrik-perdana.web.id

Bila Kurang Jelas, silakan bertanya dibawah ini .

→ read more. . . ►► PHP - Pengenalan Array Pada PHP.

3 Pengertian Dan Penggunaan File .htaccess►► URL : http://wwdq.blogspot.com/2011/09/pengertian-dan-penggunaan-file-htaccess.html.

Update pertama di Bulan September 2011, Sesuai dengan judul post diatas, artikel kali ini akan membahas tentang Penggunaan File .htaccess. Sebelumnya kita harus tahu terlebih dahulu, 

apa itu htaccess? 

File .htaccess adalah file konfigurasi yang disediakan oleh web server Apache, yang biasanya digunakan untuk mengubah settingan default dari Apache. Kita ketahui bahwa sebagian besar hosting web di internet menggunakan Apache sebagai servernya sehingga bagi para pengelola web / webmaster sedikit banyak harus belajar tentang .htaccess agar kita bisa mengubah settingan default dari server.

File .htaccess merupakan file teks ASCII sederhana yang biasanya diletakkan dalam root direktori. File ini diharuskan dalam format ASCII dan bukan binary dan untuk file permission (atribut file) pada server hosting harus di set 644 (rw-r-r). Hal tersebut dimaksudkan agar server dapat mengakses file .htaccess, tapi mencegah user untuk mengakses file .htaccess dari browser mereka. File .htaccess yang diletakkan dalam root direktori dapat digunakan untuk mengubah konfigurasi dari subdirektori-subdirektori yang ada didalamnya, sehingga dalam satu website biasanya kita cukup untuk mempunyai 1 file .htaccess saja yang diletakkan dalam root direktori.

Kode perintah dalam file .htaccess harus ditempatkan dalam satu baris, jadi apabila kita membuat file .htaccess dengan menggunakan text editor seperti notepad maka kita harus mendisable fungsi word wrap (memotong baris) terlebih dahulu.

Setelah tahu apa itu file .htaccess, selanjutnya...

Kegunaan File .Htaccess

sebagai :

Customize Error Message

artinya kita dapat mengubah halaman error pada server, dengan mendefinisikan sesuai dengan keinginan kita sendiri.

ErrorDocument 500 /error.html

Override SSI Settings

Secara default, hanya halaman web yang mempunyai extensi .shtml yang bisa menjalankan server-side termasuk SSI di server. Dengan menggunakan .htaccess kita dapat mengubah setting default tersebut agar SSI bisa bekerja dengan format HTML.

Untuk mengubah settingan tersebut, kita dapat menambahkan kode berikut di file .htaccess

AddType text/html .html
AddHandler server-parsed .html

Jika kita menginginkan halaman yang berekstensi .html dan .htm untuk dapat menjalankan SSI, maka file .htaccess dapat ditambahkan kode berikut :

AddType text/html .html
AddHandler server-parsed .html
AddHandler server-parsed .htm

Change Default Home Page

artinya bahwa file .htaccess dapat digunakan untuk mengubah nama default halaman depan web. Agar user bisa mengakses website kita hanya dengan nama domain saja (http://www.nama_web.com) tanpa harus menulis nama file secara jelas (http:www.nama_web.com/file.html), kita harus mempunyai file index di root direktori. Nama file yang bisa diterima antara lain index.html, index.htm, index.cgi, index.php dll. Pastikan bahwa file tsb bernama index.*

Ada tingkatan dalam pemberian nama tersebut. Jika kita punya index.cgi & index.html di root direktori maka server akan menampilkan index.cgi karena .cgi memiliki tingkatan yang lebih tinggi daripada .html

Dengan .htaccess, kita bisa mendefinisikan file index tambahan atau bisa juga mengubah urutan tingkatannya. Untuk mendefinisikan halamandepan.html sebagai halaman index, kita dapat menambahkan kode berikut ke file .htaccess

DirectoryIndex halamandepan.html

Hal ini akan membuat server mencari file bernama halamandepan.html. Jika server menemukannya maka server akan menampilkannya. Tapi bila tidak, maka server akan menampilkan error 404 Missing Page

Untuk mengubah urutan tingkatan, kita dapat memasukkan perintah DirectoryIndex dengan nama-nama file dalam satu baris. Urutan penulisan file tersebut menentukan urutan tingkatan, contohnya:

 DirectoryIndex halamandepan.html index.cgi index.php index.html

Enable Directory Browsing

Untuk alasan keamanan, server Apache biasanya telah menghilangkan default setting yang memungkinkan directory indexing. Opsi inilah yang memungkinkan isi dari direktori untuk ditampilkan di browser jika direktori tersebut tidak mempunyai halaman index.

Contohnya, jika kita memasukkan sebuah UR yang tidak mempunyai halaman index seperti misalnya http://websitemu.com/images/, maka browser akan menampilkan daftar images di dalam direktori tersebut.

Block Users from Accessing Your Web Site

Jika kita menginginkan mem-blok access untuk beberapa user, dimana kita mengetahui IP / domainname yang digunakannya, kita dapat menambahkan kode berikut :

order deny,allow
deny from 123.456.789.000
deny from 456.78.90.
deny from .wwdq.com
allow from all

Pada contoh di atas, user dg IP 123.456.789.000 akan diblok. Semua user antara 456.78.90.000 sampai 456.78.90.999 akan diblok. Dan semua user yang berasal dari WWDQ.com akan diblok. Jika mereka mencoba mengakses website kita, maka akan tampil error 403 Forbidden (”You do not have permission to access this site”).

Redirect Visitors to a New Page or Directory

Misalkan kita membuat ulang seluruh website kita, me-rename halaman & direktori. Maka pengunjung halaman lama akan mendapat error 404 File Not Found. Masalah tersebut dapat diatasi dengan melakukan redirect dari halaman lama ke halaman yang baru. Contohnya bila halaman lama kita adalah oldpage.html dan halaman baru adalah newpage.html maka perintahnya adalah:

Redirect permanent /oldpage.html http://www.mydomain.com/newpage.html

Jika kita me-rename (mengganti nama) direktori, maka perintahnya adalah:

Redirect permanent /olddirectory http://www.mydomain.com/newdirectory/

Perhatikan bahwa nama direktori yang lama ditulis dengan relative path, sementara yang baru ditulis dengan URL absolut.

Prevent Hot Linking and Bandwidth Leeching

Untuk mencegah orang lain me-link secara langsung ke direktori image anda dari website mereka, biasanya ada orang mengambil gambar dari website kita, tapi tetap menggunakan link diserver host kita, ini tentu akan merugikan bagi kita karena dapat mengurangi bandwith di hosting kita, untuk mengatasi hal ini kita dapat menambahkan kode berikut:

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)?namadomain.com/.*$ [NC]
RewriteRule \.(gif|jpg)$ - [F]

Perintah tersebut akan membuat direktori image hanya bisa diakses bila user sedang mengakses www.namadomain.com

Jika kita merasa jengkel, kita bisa membuat sebuah image alternatif bila direktori image di-link oleh orang lain. Contohnya kita membuat image alternatif dengan nama nogambar.gif yang bertuliskan: “Gambar dr web lain … kunjungi http://namadomain.com untuk melihat gambar sebenarnya.” Maka kita dapat menambahkan kode berikut:

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)?mydomain.com/.*$ [NC]
RewriteRule \.(gif|jpg)$ http://www.mydomain.com/dontsteal.gif [R,L]

Prevent viewing of .htaccess or other files

Untuk mencegah user mengakses file .htaccess, ketikkan perintah:

order allow,deny
deny from all

Bila anda ingin lebih mudah mendapatkan syntax .htaccess, silakan ke situs htaccess generator

Setelah anda melihat penjelasan dan kegunaan file .htaccess apakah sudah mengerti? nah gunakan sesuai kebutuhan anda. Terimakasih ^_^

Link referensi artikel : http://nanksaurus.com/../htaccess...html

→ read more. . . ►► Pengertian Dan Penggunaan File .htaccess.

1 Pemograman PHP : Mengecek Bilangan Prima►► URL : http://wwdq.blogspot.com/2011/08/pemograman-php-mengecek-bilangan-prima.html.

Sebulan Tak update, jadi canggung untuk memulai postingan baru. WWDQ kali ini ingin memberi ilmu tentang pemograman PHP sederhana, yaitu tentang Program pengecekan bilangan prima atau bukan. Kembali kepelajaran SD ^_^, menurut Wikipedia : bilangan prima adalah bilangan asli yang lebih besar dari 1, yang faktor pembaginya adalah 1 dan bilangan itu sendiri. 2 dan 3 adalah bilangan prima. 4 bukan bilangan prima karena 4 bisa dibagi 2. Sepuluh bilangan prima yang pertama adalah 2, 3, 5, 7, 11, 13, 17, 19, 23 dan 29. Sudah ingat kembali apa itu bilangan prima? nah sekarang masuk ke dalam teori .

Suatu bilangan bulat positif N dikatakan "tidak prima" jika terdapat bilangan bulat antara bilangan-bilangan 1 s/d N yang menjadi faktor selain 1 dan N. Yang dimaksud faktor di sini adalah pembagi habis. Atau dengan kata lain, N dikatakan tidak prima jika terdapat bilangan bulat antara 2 s/d N-1 yang membagi habis N.

#1. langkah pertama, kita asumsikan terlebih dahulu bilangan N ini adalah PRIMA.

#2. Langkah kedua, kita cek untuk setiap bilangan mulai dari 2 sampai dengan N-1 apakah bilangan-bilangan tersebut ada yang membagi habis N. Jika ada, maka status N sekarang berubah menjadi TIDAK PRIMA. Sebagai contoh misalkan N nya kita ambil 9. Kita asumsikan 9 ini adalah PRIMA. Selanjutnya kita cek mulai bilangan 2 s/d 8 apakah ada yang membagi habis 9. Kita mulai dari 2 terlebih dahulu. OK… 2 tidak membagi habis 9, maka status N tetap PRIMA. Next… kita cek untuk 3. Nah… kita tahu bahwa 3 membagi habis 9, maka status N berubah menjadi TIDAK PRIMA. Sebenarnya Anda bisa langsung mem-break proses pengecekan untuk bilangan 4, 5, …, 8 karena kita sudah menemukan satu faktor yang bukan 1 dan N. Namun… kalau Anda teruskan pun juga tidak masalah.

Langsung pada Pemogramannya :
Buat dulu file formnya untuk memasukan bilangan yang akan dicek.
form.htm :

<form id="form1" name="form1" method="get" action="prima.php">
Masukan Bilangan Anda :
<label>
<input type="text" name="bil" id="bil" />
</label>
<label>
<input type="submit" name="button" id="button" value="Cek..." />
</label>
</form>

Lalu buat file Pemogramannya
prima.php

<title>Cek Bilangan Prima</title>
<?php
$bilangan = $_GET['bil'];
$n = $bilangan;
$status = "PRIMA";
for ($i = 2; $i <= $n-1; $i++)
{
if ($n % $i == 0)
{
$status = "TIDAK PRIMA";
break;
}
}
echo "Bilangan ".$n." adalah : ".$status;
echo "<br/> <a href='form.php'>Cek Lagi</a>";
?>

Selesai deh... tinggal dicek kebenarannya ^_^

Yang mau Download scriptnya : 





Referensi (hasil copas) dari : http://blog.rosihanari.net/...prima

Bila Kurang Jelas, silakan bertanya dibawah ini .

→ read more. . . ►► Pemograman PHP : Mengecek Bilangan Prima.

11 Fungsi Echo Pada PHP►► URL : http://wwdq.blogspot.com/2011/07/fungsi-echo-pada-php.html.

Yang sering bergelut di dunia pemograman khususnya pemograman PHP pastinya sering kali menemui fungsi-fungsi PHP yang sering digunakan, Salah satu fungsi yang paling mendasar dari PHP adalah fungsi echo(). Fungsi echo() digunakan untuk menampilkan string yang nantinya akan diterjemahkan oleh browser, entah string tersebut berupa teks ataupun tag HTML.




 Sintaks dari fungsi echo() adalah sebagai berikut:

echo(string);
echo string
echo "$string";

Berikut contoh script sederhana yang memakai fungsi echo() :

<html>
<head>
<title>Contoh Fungsi echo()</title>
</head>

<body>
    <?php
       echo "Halo Dunia PHP";
   ?>
</body>
</html>

Maka hasil yang dikeluarkan browser adalah

Halo Dunia PHP

Dan kalau dilihat source code nya yang muncul hanya :

<html>
<head>
<title>Contoh Fungsi echo()</title>
</head>

<body>
Halo Dunia PHP</body>
</html>

Penggunaan fungsi echo() ini terkait erat dengan penggunaan variabel dengan tipe data string. Strings merupakan tipe data berupa karakter. Semua karakter dapat dimasukkan ke dalam tipe strings, termasuk angka, huruf, maupun karakter-karakter khusus seperti +, -, %, $, &, dan lain-lain. Sedangkan sebuah variabel ditandai dengan tanda $ di depannya. Jadi $var1 adalah sebuah variabel dengan nama “var1”.
Untuk memasukkan string ke dalam sebuah variabel, harus digunakan karakter-karakter sebagai berikut: tanda kutip ganda ("), tanda kutip tunggal ('), atau tanda lebih kecil yang dituliskan sebanyak tiga kali (<<<).

Perbedaan penggunaan dari ketiga karakter tersebut adalah sebagai berikut:
Jika digunakan tanda kutip ganda ("), maka variabel yang terletak di dalam string tersebut akan dinyatakan sebagai nilainya, bukan nama variabelnya. Contoh:
#Menggunakan kutip ganda (")

<?php

$var1 = "World Web Design Q";
echo "Aku Belajar PHP di $var1";

?>

Hasil yang dikeluarkan oleh browser :

Aku Belajar PHP di World Web Design Q

ket :  $var1 = hanya variabel, bisa diganti dengan apa saja, exp : $contoh 

Untuk menyatakan karakter-karakter tertentu di dalam sebuah string, seperti misalnya tanda kutip ganda ("), tanda ampersand (&), tanda dollar ($), dan lain-lain digunakan karakter backslash (\). Karakter seperti ini disebut dengan Escaped Character. Di bawah ini akan diberikan beberapa contoh escaped character:

Escaped character	Arti
\n	Ganti Baris
\r	Carriage return
\t	Tab
\$	$
\"	"
\\	\
\&	&

Berikut Contoh penggunaan Escaped Character :

<?php echo "Anda Sedang Berada Di, \"World Web Design Q\""; ?>

Hasil Pada Browser :

Anda Sedang Berada Di "World Web Design Q"

...........................................................................
Jika digunakan tanda kutip tunggal, maka semua string akan nampak seperti apa adanya yang tertulis di dalam tanda kutip tunggal tersebut. Variabel akan tetap dinyatakan sebagai nama variabelnya, dan escaped character yang dikenal hanyalah \\ dan \’. Contoh:
#Menggunakan Kutip Tunggal (')

<?php

$var1 = "World Web Design Q";
echo 'Aku Belajar PHP di $var1';

?>

Maka hasil yang dikeluarkan browser sebagai berikut :

Aku Belajar PHP di $var1

..............................................................................
Yang terakhir adalah tanda lebih kecil yang dituliskan sebanyak tiga kali (<<<). Tanda ini disebut dengan here doc syntax. Here doc syntax sangat berguna untuk menuliskan string yang panjang, karena dapat dipisahkan dalam beberapa baris tapi hasil yang ditampilkan tetap dalam satu baris. Variabel akan dinyatakan sebagai isinya. Penggunaan here doc syntax diikuti dengan semacam penanda yang dituliskan pada awal dan akhir string. Contoh:
#Menggunakan 3 Tanda Lebih Kecil (<<<)

<?php

  $var1 = "PHP";
  $var2 = "Fungsi";
  $var3 = "Echo";
 echo <<<A
  Hari ini kita belajar $var1
  Yaitu tentang $var2 $var3
A;

?>

Hasil pada browser :

Hari ini kita belajar PHP Yaitu tentang Fungsi Echo

 Keterangan :  Huruf A digunakan hanya sebagai semacam penanda (tidak terlihat di hasil), yang dipakai pada awal string dan akhir string. penanda ini bisa anda ganti sesuai selera ^_^. #bila tidak menggunakan huruf penanda, maka syntax akan error.


Semoga Membantu ^_^

referansi : Thanks to HendrikPerdana.web.id

→ read more. . . ►► Fungsi Echo Pada PHP.

9 Mengubah Tampilan Blockquote sesuka hati.►► URL : http://wwdq.blogspot.com/2011/06/mengubah-tampilan-blockquote-sesuka.html.

Beberapa hari sempat tidak ngeblog dikarenakan mencari ilmu lain, kalau cuma main blog, kapan pinternya dan pada hari ini saya putuskan untuk kembali mengurus blog saya yang hina ini . yap langsung saja pada update kali ini, WwdQ akan membahas cara mengubah-ubah tampilan blockquote. Ada yang belum tahu apa itu Block quote?, kata google translate sih blok kutipan. Dari pada penasaran atau bingung, langsung saja liat contoh blockquote yang ada di template sini dan praktekan

Contoh Quote Yang Ada Di Template Ini

Sekarang ayo prakteknya
Langkah Pertama :

• Login Ke akun blogger anda
• Sesampainya di Dasbor sekarang pergi ke Rancangan
• Sudah? Setelah itu Menuju Edit HTML
• Bila anda kurang yakin dengan keberhasilan pada praktek kali ini, silakan backup terlebih dulu template anda
• Cari (CTRL+F) yaitu .post blockquote {
• Mungkin beberapa template berbeda...

 Setelah ketemu Ubah kode CSS nya menjadi

.post blockquote {
  border-bottom:1px solid #b2b2b2;
  border-top:1px solid #000000;
  border-right:1px solid #b2b2b2;
  border-left:1px solid #000000;
  padding: 16px 14px 14px 14px;
  margin:1em 20px;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVAZRaOGfix7SpQX_jm5Uqf8FhAZopmtaMjfdP3i_CpS0oXEAY42lRJM0TntOyCBvP9lMeBsyW0RFrzpa8h8Ss2-DEdHXNmy44fbXuLnIUqo443blkAQEVqP5hBP0J9F_evsfE1wRPodA/s1600/quote.png) no-repeat left top #e1e4f2;
  }

Atau menurut kreasi anda sendiri....

Bila anda belum mengerti kode CSS, seperti border, padding, atau margin, anda bisa belajar terlebih dahulu disini : http://wwdq.blogspot.com/...margin-css.html

→ read more. . . ►► Mengubah Tampilan Blockquote sesuka hati..

4 Membuat Navigasi Blog Ala Om Google Punya►► URL : http://wwdq.blogspot.com/2011/06/membuat-navigasi-blog-ala-om-google.html.

Setelah Admin beristirahat ngeblog dikarenakan semesteran (maklum adminnya masih sekolah), nah sekarang mau update lagi tentang tutorial blog yaitu membuat navigasi seperti om google punya. ada yang tidak tahu navigasi itu apa? itu loh yang menunjukan halaman, ada next, previous, lebih jelasnya liat gambar navigasi yang dipunya om google

Diblog pun bisa seperti ini, yang ingin coba silakan simak cara mudah berikut ini :

1. Login ke akun Blogger. 
2. Rancangan, --> Edit HTML. 
3. Cari kode ]]></b:skin>, kemudian taruh kode berikut ini Tepat di atasnya:

#nav a,#nav a:visited,.blk a{color:#000}
#nav a{display:block}
#nav .b a,#nav .b a:visited{color:#20c}
#nav .i{color:#a90a08;font-weight:bold}
.csb,.ss{background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/pagenavi/nav_logo7.png) no-repeat 0 0;height:26px;display:block}
.ss{background-position:0 -88px;position:absolute;left:0;top:0}
.cps{height:18px;overflow:hidden;width:114px}
.mbi{width:13px;height:13px;background-position:-91px -74px;margin-right:3px}
#nav td{padding:0;text-align:center}

     4. Sesudah mengikuti langkah diatas, silakan cari kode berikut </body>.
     5. Ketemu? kalau begitu copy kode kedua, lalu paste diatas kode </body>

<script type='text/javascript'>

var home_page_url = location.href;


var pageCount=10;
var displayPageNum=6;
var upPageWord ='Previous';
var downPageWord ='Next';


function showpageCount(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';



htmlMap[htmlMap.length]='/';
postNum++;

for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) {


var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);
var title = post.title.$t;
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&amp;max-results='+pageCount;

}

var banyaknomer = htmlMap.length;
if (json.feed.entry.length % pageCount == 0){
var banyaknomer = htmlMap.length -1 ;
postNum=postNum-1;
};


for(var p =0;p&lt; banyaknomer;p++){
if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
if(fFlag ==0 &amp;&amp; p == thisNum-2){
if(thisNum==2){
upPageHtml = '&lt;a href=&quot;/&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: 0pt 0pt; margin-left: auto; width: 44px;&quot;&gt;&lt;/span&gt;&lt;div style=&quot;margin-right: 8px;&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/td&gt;';
}else{
upPageHtml = '&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: 0pt 0pt; margin-left: auto; width: 44px;&quot;&gt;&lt;/span&gt;&lt;div style=&quot;margin-right: 8px;&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/td&gt;';
}

fFlag++;
}

if(p==(thisNum-1)){
if(p==0){
html += '&lt;span class=&quot;csb&quot; style=&quot;background-position: -26px 0pt; width: 18px;&quot;&gt;&lt;/span&gt;&lt;/td&gt;&lt;td class=&quot;cur&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -44px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+thisNum+'&lt;/td&gt;';
}else{
html += '&lt;td class=&quot;cur&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -44px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+thisNum+'&lt;/td&gt;';
}
}else{
if(p==0){
html += '&lt;td&gt;&lt;a href=&quot;/&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -60px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;1&lt;/a&gt;&lt;/td&gt;';

}else{
html += '&lt;td&gt;&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -60px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+ (p+1) +'&lt;/a&gt;&lt;/td&gt;';
}
}

if(eFlag ==0 &amp;&amp; p == thisNum){
downPageHtml = '&lt;td class=&quot;b&quot;&gt; &lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -76px 0pt; margin-right: 34px; width: 66px;&quot;&gt;&lt;/span&gt;'+ downPageWord +'&lt;/a&gt;&lt;/td&gt;';
eFlag++;
}
}
}

if(thisNum&gt;1){
html = ''+upPageHtml+' '+html +' ';
}
html2 = '&lt;table id=&quot;nav&quot; style=&quot;margin: auto auto 1.4em; border-collapse: collapse;text-align: center; direction: ltr;&quot; align=&quot;center&quot;&gt;&lt;tbody&gt;&lt;tr valign=&quot;top&quot;&gt;&lt;td class=&quot;b&quot;&gt;Page ('+(postNum-1)+') &lt;/td&gt;&lt;td class=&quot;b&quot;&gt;';
html3 = '&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;';
html = html2+html;

if(thisNum&lt;(postNum-1)){
html += downPageHtml;
}else{
html += '&lt;td class=&quot;b&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -76px 0pt; width: 42px;&quot;&gt;&lt;/span&gt;&lt;/td&gt;';
}



if(postNum==1) postNum++;
html += html3+ '&lt;/div&gt;';


var pageArea = document.getElementsByName(&quot;pageArea&quot;);
var blogPager = document.getElementById(&quot;blog-pager&quot;);

if(postNum &lt;= 2){
html ='';
}

for(var p =0;p&lt; pageArea.length;p++){
pageArea[p].innerHTML = html;
}


if(pageArea&amp;&amp;pageArea.length&gt;0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}


}


function showpageCount2(json) {

var thisUrl = home_page_url;
var htmlMap = new Array();
var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.length) : &quot;&quot;;
thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ? thisLable.substr(0,thisLable.indexOf(&quot;?&quot;)) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';



var labelHtml = '&lt;a href=&quot;/search/label/'+thisLable+'?&amp;max-results='+pageCount+'&quot;&gt;';
var thisUrl = home_page_url;

htmlMap[htmlMap.length]=labelHtml;
postNum++;

for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) {
var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);


var title = post.title.$t;

if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&amp;max-results='+pageCount;

itemCount++;
}

var banyaknomer = htmlMap.length;
if (json.feed.entry.length % pageCount == 0){
var banyaknomer = htmlMap.length -1 ;
postNum=postNum-1;
};

for(var p =0;p&lt; banyaknomer;p++){
if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
if(fFlag ==0 &amp;&amp; p == thisNum-2){



if(thisNum==2){
upPageHtml = labelHtml +'&lt;span class=&quot;csb ch&quot; style=&quot;background-position: 0pt 0pt; margin-left: auto; width: 44px;&quot;&gt;&lt;/span&gt;&lt;div style=&quot;margin-right: 8px;&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/td&gt;';
}else{
upPageHtml = '&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: 0pt 0pt; margin-left: auto; width: 44px;&quot;&gt;&lt;/span&gt;&lt;div style=&quot;margin-right: 8px;&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/td&gt;';
}

fFlag++;
}





if(p==(thisNum-1)){
if(p==0){
html += '&lt;span class=&quot;csb&quot; style=&quot;background-position: -26px 0pt; width: 18px;&quot;&gt;&lt;/span&gt;&lt;/td&gt;&lt;td class=&quot;cur&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -44px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+thisNum+'&lt;/td&gt;';
}else{
html += '&lt;td class=&quot;cur&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -44px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+thisNum+'&lt;/td&gt;';
}
}else{
if(p==0){
html = '&lt;td&gt;'+labelHtml+'&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -60px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;1&lt;/a&gt;&lt;/td&gt;';
}else{
html += '&lt;td&gt;&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -60px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+ (p+1) +'&lt;/a&gt;&lt;/td&gt;';
}
}


if(eFlag ==0 &amp;&amp; p == thisNum){
downPageHtml = '&lt;td class=&quot;b&quot;&gt; &lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -76px 0pt; margin-right: 34px; width: 66px;&quot;&gt;&lt;/span&gt;'+ downPageWord +'&lt;/a&gt;&lt;/td&gt;';
eFlag++;
}
}
}




if(thisNum&gt;1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}

html2 = '&lt;table id=&quot;nav&quot; style=&quot;margin: auto auto 1.4em; border-collapse: collapse;text-align: center; direction: ltr;&quot; align=&quot;center&quot;&gt;&lt;tbody&gt;&lt;tr valign=&quot;top&quot;&gt;&lt;td class=&quot;b&quot;&gt;Page ('+(postNum-1)+') &lt;/td&gt;&lt;td class=&quot;b&quot;&gt;';
html3 = '&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;';
html = html2+html;

if(thisNum&lt;(postNum-1)){
html += downPageHtml;
}else{
html += '&lt;td class=&quot;b&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -76px 0pt; width: 42px;&quot;&gt;&lt;/span&gt;&lt;/td&gt;';
}

if(postNum==1) postNum++;
html += html3+ '&lt;/div&gt;';

var pageArea = document.getElementsByName(&quot;pageArea&quot;);
var blogPager = document.getElementById(&quot;blog-pager&quot;);

if(postNum &lt;= 2){
html ='';
}

for(var p =0;p&lt; pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&amp;&amp;pageArea.length&gt;0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}


}


</script>

<script type='text/javascript'>

var thisUrl = home_page_url;
if (thisUrl.indexOf(&quot;/search/label/&quot;)!=-1){
if (thisUrl.indexOf(&quot;?updated-max&quot;)!=-1){
var lblname1 = thisUrl.substring(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.indexOf(&quot;?updated-max&quot;));
}else{
var lblname1 = thisUrl.substring(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.indexOf(&quot;?&amp;max&quot;));
}
}

var home_page = &quot;/&quot;;
if (thisUrl.indexOf(&quot;?q=&quot;)==-1 &amp;&amp; thisUrl.indexOf(&quot;.html&quot;)==-1){
if (thisUrl.indexOf(&quot;/search/label/&quot;)==-1){
document.write('&lt;script src=&quot;'+home_page+'feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot; &gt;&lt;\/script&gt;')
}else{document.write('&lt;script src=&quot;'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&amp;callback=showpageCount2&amp;max-results=99999&quot; &gt;&lt;\/script&gt;')
}
}
</script>

    6. Langkah terakhir bisa anda pratinjau dahulu atau langsung disimpan templatenya.

untuk contohnya silakan liat halaman utama blog ini (kalau belum diganti)

sumber : http://daw..navigasi..

Bila Kurang Jelas, silakan bertanya dibawah ini .

→ read more. . . ►► Membuat Navigasi Blog Ala Om Google Punya.

4 Tutorial Dan Pengenalan CSS3►► URL : http://wwdq.blogspot.com/2011/05/tutorial-dan-pengenalan-css3.html.

Cascading Style Sheet (CSS) adalah salah satu bahasa perograman website untuk mengatur beberapa komponen yang ada dalam sebuah web sehingga akan lebih terstruktur dan seragam.
Sama dengan styles dalam software atau aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas file. Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan HTML atau XHTML.

Bagi anda yang mungkin belum mengetahui CSS, CSS digunakan dalam pembuatan layout yang tableless, artinya pembuatan layout tidak lagi menggunakan metode table, karena dampak dari penggunaan table yang paling terasa adalah beratnya layout yang dihasilkan karena begitu banyak kode-kode dari hasil penggunaan table. Tableless pun menjadi standarisasi bagi seorang SEO-er, karena sifatnya yang search engine friendly. Tidak hanya dalam pembuatan layout, CSS3 pun efektif digunakan dalam pembuatan style-style yang mempercantik sebuah website.

CSS3 merupakan pengembangan dari CSS ini yang bisa membuat sebuah web menjadi lebih menarik. Dalam CSS3 ini meliputi hal-hal seperti berikut ini:

Drop Shadow
Menggunakan drop shadow pada css 3, cukup tambahkan baris

-moz-box-shadow: #585858 3px 3px 4px;

moz ini digunakan untuk browser firefox

-webkit-box-shadow: #585858 3px 3px 4px;

webkit digunakan untuk browser chrome serta safari 

Contoh DropShadow

Gradient

background: -moz-linear-gradient(-45deg, #000000,#ffffff );

penggunaan moz-linear-gradien dengan 45derajat mulai dari hitam sampai putih, hasilnya adalah seperti ini :

Contoh


Tutorial lainnya tentang CSS3 Akan segera menyusul :)

Bila Kurang Jelas, silakan bertanya dibawah ini .

→ read more. . . ►► Tutorial Dan Pengenalan CSS3.

17 Pengenalan CSS Lebih Dalam (versi lengkap)►► URL : http://wwdq.blogspot.com/2011/05/pengenalan-css-lebih-dalam-versi.html.

Cascading Style Sheet atau yang disingkat CSS memungkinkan anda untuk mendesain tampilan dokumen (Php dan HTML) dengan memisahkan isi dari dokumen HTML dengan kode untuk menampilkannya (CSS).
Didalam dunia desain web, layout atau mengatur letak web, format huruf, dan lain nya yang ada dalam sebuah web menjadi bagian yang amat penting bahkan bisa jadi yang paling lama dibanding dengan bagain desain web lainnya. Karena jika kita membua layout yang salah, maka web kita juga akan salah diterjemahkan oleh browser. Hal itu juga bisa disebabkan karena setiap browser memilliki dukungan bahasa(CSS) yang berbeda dan tentunya default dari browsernya sendiri yang berbeda-beda. Browser yang paling rewel soal layout css adalah IE karena kurang dukungannya terhadap CSS.

Jika kita memiliki banyak file HTML, kita hanya perlu satu file CSS, sehingga ketika kita mengganti jenis huruf pada file CSS maka semua file HTML yang berhubungan pada file CSS tersebut akan berubah. CSS distandarisasi oleh W3C (World Wide Web Consortium). CSS dapat dipasang pada dikumen HTML yang telah jadi.

Dalam melayout sebuah web ada dua metode yang sering dipakai untuk membuat sebuah layout halaman web yaitu:

1. Metode Table
2. Metode Div

Manfaat dari CSS:

1. Kode HTML menjadi lebih sederhana dan lebih mudah diatur,
2. Ukuran file menjadi lebih kecil, sehingga load file lebih cepat,
3. Mudah untuk merubah tampilan, hanya dengan merubah file CSS saja,
4. Dapat berkolaborasi dengan JavaScript.
5. Digunakan dalam hampir semua web browser.

Pada umunya ada empat bagian yang sering ada dalam layout sebuah web yaitu:

Header –> berisi tema web/ judul
Menu –> menu link web
Content –> isi dari web
Footer –> identitas/ copyright

Atribut ID

Ada dua cara penempatan elemen dalam web dengan CSS yaitu:

1. Position (Posisi)

Mengunakan properti position terdapat 4 cara:

• Static –> posisi normal (default).
  
• Relative –> posisi elemen tergantung dari elemen yang lain.
  
• Absolute –> posisi elemen berpatokan pada jendela browser.
  
• Fixed –> posisi elemen tetap walaupun digeser.
  

2. Float (Nempel)

Menggunakan properti float atau clear:

• Float:left –> elemen akan menempel pada sebelah kiri elemen induk.
  
• Float:right –> elemen akan menempel pada sebelah kanan elemen induk.
  
• Clear:left –> elemen akan menempel pada sebelah kiri dan berada di bawah.
  
• Clear:right –> elemen akan menempel pada sebelah kanan dan berada dibawah
  
• Clear:both –> elemen akan berada pada posisi bawah elemen diatasnya.
  

Gambar dibawah ini adalah dasar-dasar dari pengaturan / format posisi dengan css:

Margin –> jarak/batas elemen dengan elemen lain
Border –> border/gari tepi elemen
Padding–> jarak elemen dengan isi elemen (elemen anak)
Berikut gambar dibawah adalah format standar untuk membuat tampilan dengan CSS:

Sintaks-sintaks CSS untuk layout diantaranya:

1. background: Untuk mengeset background. Ada beberapa sintak untuk background, yaitu:

   a. background-color: yaitu warna background.
   b. background-image:url('URLGAMBAR.jpg'); yaitu URL gambar yang dijadikan background.
   c. background-repeat: bernilai "repeat", "repeat-x", "repeat-y", dan "no-repeat". Maksudnya adalah pengulangan gambar. "repeat" artinya gambar akan diulang, memenuhi layar. "repeat-x" artinya gambar akan diulang sepanjang horizontal, "repeat-y" gambar akan diulang secara vertikal, sedangkan "no-repeat" artinya gambar hanya ditampilkan 1x, tidak akan diulang.
   d. background-position: nilainya "nilaihorizontal nilaivertikal". Maksudnya adalah posisi latarbelakang dari layer (bagian div/span/element yang diberi latar). Misal: body{background-position:10px 30px} maka latar belakang dari bagian body akan diberi jarak 10 piksel antara batas pinggir kiri body dan 30piksel dari batas pinggir atas body. Anda juga bisa mengisinya dengan "top" "middle" "bottom" untuk nilaihorizontal, dan "left" "center" "right" untuk nilaivertikal (pilih salah satu).
   e. background-attachment: Nilainya "fixed" dan "scroll". "fixed" artinya tampilan gambar latar belakang akan tetap sepanjang anda meng-scroll mouse anda.Sedangkan "scroll" kebalikannya.

2. width: Nilainya berupa nilai dalam piksel atau "auto". Untuk menentukan lebar elemen.
3. height: Idem dengan width bedanya height untuk menentukan tinggi elemen.
4. margin: Batas antara suatu element dengan elemen diluarnya. Nilainya bisa berupa auto atau nilai dalam piksel. Sintaksnya begini: margin:marginatas marginkanan marginbawah marginkiri. Atau jika nilai semua margin sama langsung saja margin: nilaimargin.
5. padding: Batas antara suatu batas (border) element dengan unsur element didalam element tersebut. Sintaksnya begini: padding:paddingatas paddingkanan paddingbawah paddingkiri. Atau jika nilai semua margin sama langsung saja padding: nilaimargin.
6. border: ada 3 unsur untuk border yaitu:

   a. border-width: lebar dari border
   b. border-color: warna dari border
   c. border-style: gaya dari border, nilainya "solid" (biasa) "double" (dobel/dua garis) "groove" (groove) "inset" (menjorok kedalam) "outset" (menjorok keluar) "dotted" (bertitik-titik) "dashed" (bergaris-garis)

7. position: posisi, nilainya "fixed" (tetap, akan melayang terus selama anda menscroll halaman, belum didukung IE ), "static" (diam, posisi default), "relative" (tergantung objek disekitarnya), "absolute" (dihitung dari pojok kiri atas layar, hampir sama seperti fixed, tetapi tidak akan ikut melayang ketika kita men-scroll mouse) . Setelah menentukan jenis posisi, kita harus menentukan:

a. pilih (top: atau bottom: jika pilih top artinya dihitung dari atas, sedangkan bottom sebaliknya)
b. pilih (left: atau right:. jika pilih left nilai akan dihitung dari kiri, sedangkan right sebaliknya.

8. z-index: z-index adalah posisi suatu elemen dari dasar dokumen, jika tidak diset maka defaultnya 0. Misalnya ada 3 buah buku ditumpuk, maka buku terbawah mempunyai z-index 0, buku ke2 daribawah:1, dan buku teratas:2.
9. visibility: nilainya hanya 2, yaitu "visible" dan "hidden". Visible artinya kelihatan, kalo hidden ya artinya tersembunyi!
10. display: nilainya "none" "inline" "block". Jika none maka tidak akan ditampilkan, inline ditampilkan dalam sebaris (biasanya untuk navigasi menu horizontal) dan block akan ditampilkan secara perbaris. Untuk display "none" dan visibility "hidden" perbedaannya adalah, untuk display "none" elemen didalamnya tidak akan ditampilkan, sedangkan visibility "hidden" akan tetap ada ruang untuk elemen tersebut, namun elemennya disembunyikan.

Ada 3 cara untuk memasang CSS pada dokumen HTML yaitu:

1. External Style Sheet (file CSS berbeda dari file HTML),
2. Internal Style Sheet (Kode CSS dipasang di dalam tag head HTML)
3. Inline Style Sheet (Kode CSS langsung dipasang di tag HTML, tidak direkomendasikan).

Saya sarankan anda menggunakan cara External Style Sheet karena lebih mudah dalam mengelolanya. Disini saya akan menerangkan dasar-dasar CSS. Langsung saja kita coba kode berikut ini:

Internal CSS

Metode penulisan kode CSS langsung dalam file HTML. contoh: 

<html>
<head>
<style type = "text/css">
.header {
width:900px;
height:50px;
border: 1px solid #640404;
}
.headerLeft {
width:400px;
background-color:#CCCCCC;
height:50px;
float:left;
text-align:center;
}
.headerRight {
width:450px;
background-color:#999999;
height:50px;
float:right;
text-align:center;
}
</style>
</head>
<body>

</body>
</html>

Eksternal CSS

file CSS terpisah dengan HTML. Buat file dengan ekstention .css. contoh:

<html>
<head>
<link rel="stylesheet" type="text/css" href="public.css"/>
</head>
<body>
</body>
</html>

Inline CSS

Penulisan kode CSS dalam tag HTML. contoh:

<html>
<head>
</head>
<div style="background-color:#999999; text-align:center;">Inline CSS</div>
</body>
</html>

Jika kita menggunakan teknik external CSS, maka kita perlu membuat file css, misal buat file dan simpan dengan nama style.css

Didalam HTML kita perlu memanggil file CSS dengan menggunakan tag <link> yang diletakkan diantara tag <head>. Pada contoh CSS selanjutnya kita menggunakan teknik external CSS, jadi gunakan saja file style.css dan coba.html anda hanya perlu mengubah isinya. Untuk file HTML anda gunakan coba.html dan ubah isinya pada bagian <body> saja bagian yang didalam <head> tidak usah diapa-apakan.

Untuk memanggil CSS dalam tag HTML kita perlu menggunakan atribut class untuk memanggil CSS selector (dalam contoh diatas selectornya title dan thank). Dengan demikian apabila semua halaman anda memanggil class title, dan jika anda ingin mengganti font untuk semua halaman anda cukup mengubah selector CSSnya saja. Bagaimana anda sudah paham kegunaan CSS.

CSS memiliki ratusan properties dan values, tentu saja saya tidak akan menerangkan semuanya, saya hanya akan menerangkan yang penting-penting saja.

Tidak semua browser dapat menampilkan jenis huruf yang kita spesifikasikan didalam CSS. Untuk itu kita perlu mendeklarasikan lebih dari satu jenis huruf agar browser mengenal jenis huruf yang digunakan. Anda dapat menggunakan property font-family, yang mirip dengan tag <font>.

Sebagai contoh anda ingin menampilkan dari keluarga huruf Serif dan hurufnya Times yaitu Times New Roman. Anda dapat menuliskannya dari yang paling spesifik sampai yang umum, sehingga jika browser tidak mengenal fontnya, maka browser akan otomatis melihat font yang umum. Untuk lebih jelasnya lihat kode berikut:

<h1 style="font-family: 'Times New Roman', Times, serif">Serif font</h1>

Link

Salah satu hal yang menarik dalam CSS anda dapat mengubah warna pada setiap link, menghilangkan garis bawah pada link sehingga jika anda bosan dengan link yang berwarna biru tua terang dengan garis bawah anda dapat mengubahnya.

berikut kodenya

a.link1:link {
font-weight: bold;
font-size: 12px;
color: #C87C28;
font-family: Times New Roman;
text-decoration: none;
}
a.link1:visited {
font-weight: bold;
font-size: 12px;
color: #CC6600;
font-family: Times New Roman;
text-decoration: none;
}
a.link1:hover {
font-weight: bold;
font-size: 12px;
color: #C87C28;
font-family: Times New Roman;
text-decoration: underline
}
a.link1:active {
font-weight: bold;
font-size: 12px;
color: #C87C28;
font-family: Times New Roman;
text-decoration: none;
}
a.link2:link {
font-weight: bold;
font-size: 12px;
color: #663300;
font-family: Arial, Helvetica, sans-serif;
text-decoration: underline;
}
a.link2:visited {
font-weight: bold;
font-size: 12px;
color: #800000;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}
a.link2:hover {
font-weight: bold;
font-size: 12px;
color: #ff6600;
font-family: Arial, Helvetica, sans-serif;
text-decoration: underline overline;
}
a.link2:active {
font-weight: bold;
font-size: 12px;
color: #ff6600;
font-family: Arial, Helvetica, sans-serif;
text-decoration: underline;
}

Sumber : http://www.cmsplaza.com/

Bila Kurang Jelas, silakan bertanya dibawah ini .

→ read more. . . ►► Pengenalan CSS Lebih Dalam (versi lengkap).

6 Pembuatan Layout Web Sederhana Menggunakan CSS dan Fungsi Div►► URL : http://wwdq.blogspot.com/2011/05/pembuatan-layout-web-sederhana.html.

Sudah lama tidak update dikarenakan sibuk tetapi kali ini menyempatkan diri untuk posting tentang CSS, disini mau kasih tau cara membuat layout web sederhana menggunakan CSS dan fungsi div. Sederhana sekali pembuatan layout menggunakan CSS, dalam sebuah tampilan web dasarnya mempunyai bagian-bagian seperti header, menu, sidebar, content, dan footer.

contoh yang dapat dihasilkan dari css

Pembuatan desain seperti diatas lebih mudah dibuat dengan menggunakan CSS, dibawah ini merupakan code CSS dan Code HTMLnya untuk membuat desain web seperti diatas ;

nama file cssnya.css

#wrapper {
margin: auto;
width: 756px;
border: 1px solid Blue;
}
#header {
height: 70px;
border: 1px solid green;
}
#inner {
float: left;
margin: 5px 0;
border: 1px solid black;
}
#sidebar {
float: left;
margin-right: 20px;
width: 180px;
height: 330px;
border: 1px solid red;
}
#inner2 {
float: left;
width: 550px;
height: 330px;
border: 1px solid green;
}
#menu{
height: 70px;
border: 1px solid red;
}
#content {
float: left;
margin-right: 20px;
width: 320px;
height: 250px;
border: 1px solid red;
}
#right {
float: right;
width: 205px;
height: 200px;
border: 1px solid green;
}
#footer {
clear: both;
height: 50px;
border: 1px solid green;
}

file htmlnya, simpan dengan nama index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Belajar CSS bersama WWDQ</title>
<link rel="stylesheet" href="cssnya.css" type="text/css" />
</head>

<body>
<div id="wrapper">
<div id="header">
Header</div>
<div id="inner">
<div id="sidebar">
Sidebar
</div>
<div id="inner2">
<div id="menu">
Menu
</div>
<div id="content">
Content
</div>
<div id="right">
Right
</div>
</div>
</div>
<div id="footer">
Footer
</div>
</div>

</body>
</html>

<link rel="stylesheet" href="cssnya.css" type="text/css" /> <--yang berwarna merah itu file cssnya, anda harus menaruh file .cssnya dengan file .html dalam 1 direktori/folder, atau boleh pisah tetapi pada kode html harus ditulis nama direktorinya. Contoh :
<link rel="stylesheet" href="../namafolder/cssnya.css" type="text/css" />

      Ingat ini hanya pembagian lahan wrapper untuk header, menu, sidebar, content, dan footer, jadi masih polos. disini lah anda berkreasi memperbaiki tampilan menjadi semenarik mungkin menggunakan CSS

Semoga Bermanfaat

Bila Kurang Jelas, silakan bertanya dibawah ini .

→ read more. . . ►► Pembuatan Layout Web Sederhana Menggunakan CSS dan Fungsi Div.

42 Fungsi Session Pada PHP Dan Cara Pembuatannya►► URL : http://wwdq.blogspot.com/2011/05/fungsi-session-pada-php-dan-cara.html.

PHP mempunyai session (catatan aktivitas) yang digunakan untuk menjaga / memelihara informasi akses dari seorang pengakses / pemakai aplikasi web. Session memungkinkan pelacakan akses pemakai, pangaturan pemakaian aplikasi oleh pemakai dan meningkatkan layanan situs web. Setiap pengunjung akan diberi sebuah id yang unik, yang disebut dengan id session (session_id). ID ini dapat disimpan dalam suatu cookie pada sisi user atau disertakan dalam URL. Session koneksi antara klien dan server akan hilang atau putus apabila browser ditutup. Apabila browser dijalankan kembali dan koneksi ke server dilakukan maka dianggap sebagai koneksi baru.
Session digunakan untuk menyimpan suatu informasi antar proses request, baik request dalam bentuk POST atau GET.
Salah satu contoh yang menggambarkan penggunaan session adalah proses login. Dalam hal ini user akan memasukkan usernamenya melalui form login. Setelah login berhasil, user tersebut dihadapkan pada link menu navigasi yang menuju ke beberapa halaman web. Apabila kita ingin username tersebut akan selalu tampil atau tercatat di halaman-halaman web tersebut, maka username tadi haruslah disimpan dalam session.

Fungsi-fungsi session :

1. session_start(), untuk memulai session.

    session_start — Menginisialisasi data dari session.

  session_start() membuat sebuah session atau melanjutkan session sebelumnya berdasarkan pada pengidentifikasi session via GET atau POST atau cookie.

2. session_destroy()

    session_destroy — Menghancurkan semua data yang terdaftar dari sebuah session

  session_destroy() menghancurkan semua data yang berhubungan dengan session saat ini. Hal ini tidak merubah variabel global yang berhubungan dengan session tersebut, Hal ini juga tidak merubah cookie dari session. Untuk menggunakan lagi variabel sssion tersebut, session_start() haruslah dipanggil.

3. session_id(), untuk mengambil atau menentukan identitas sebuah session.

   session_id — Mengambil atau mengatur session id saat ini.

     session_id() digunakan untuk mengambil atau mengatur session id saat ini.

SID yang konstan dapat juga digunakan untuk mengambil nama dari SID saat ini dan session_id dalam bentuk string cocok untk ditambahkan kedalam URL.

4. session_register(), untuk mendaftarkan variabel ke sebuah session.

    session_is_registered — Mengetahui apakah sebuah variabel telah terdaftar atau belum dalam sebuah session.

        Fungsi ini tidak diperkenankan oleh PHP 5.3.0 dan dihapus pada PHP 6.0.0. 

 Contoh Pemograman PHP menggunakan Session


Langkah Pertama membuat file setup.php untuk membuat database:

setup.php

<html>

<head>

<title>Setup Database</title>

</head>





<body>

<?php

$cn = @mysql_connect("localhost", "root", "") or die ("Gagal konek ke MySQL.");

mysql_query("drop database if exists db_user", $cn) or die ("Gagal menghapus database.");

mysql_query("create database db_user", $cn) or die ("Gagal membuat database.");

mysql_select_db("db_user", $cn) or die ("Gagal membuka database.");

mysql_query("create table tb_user (

login_username varchar(32) not null,

login_password char (32),

login_rights   varchar (32),

primary key(login_username)

)", $cn) or die("Gagal membuat table.");

mysql_query("insert into tb_user values('admin', md5('admin'), '[A] [U]')", $cn);

mysql_query("insert into tb_user values('user', md5('user'), '[U]'", $cn);

mysql_close($cn);

?>

<p>Sukses meng-setup database!<br/>

username: <b>admin</b> dan Password: <b>admin</b>

username: <b>user</b> dan Password: <b>user</b>

</p>

<p>Silakan menuju <a href="index.php">index.php</a></p>

</body>

</html>

Kedua Membuat File Halaman Utama :
index.php

<html>

<head>

<title>Homepage</title>

</head>



<body>

<P>

<a href="index.php">Home</a> |

<a href="login.php">Login</a> |

<a href="member.php">Member</a> |

<a href="logout.php">Logout</a>

</P>

<p>Selamat datang. Di sini semua orang bisa mengakses.</p>

</body>

</html>

Ketiga membuat file yang hanya dapat diakses untuk member saja :
member.php

<?php

session_start();



$username = "";

$password = "";

if (isset($_SESSION['username']) && isset($_SESSION['password'])) {

$un = $_SESSION['username'];

$pw = md5($_SESSION['password']);

$cn = @mysql_connect("localhost", "root", "") or die ("Gagal konek ke MySQL.");

mysql_select_db("db_user") or die ("Gagal memilih database.");

$query = "select * from tb_user where

login_username ='$un' and login_password = '$pw'";

$hasil = mysql_query($query) or die ("Gagal melakukan query.");

if ($hasil !=false) {

if (mysql_num_rows($hasil) ==1) {

$username = $_SESSION['username'];

$password = $_SESSION['password'];

};

};

};

?>

<html>

<head>

<title>Members Only</title>

</head>



<body>

<p>

<a href="index.php">Home</a> |

<a href="member.php">login</a> |

<a href="member.php">member</a> |

<a href="logout.php">logout</a>

</p>

<?php

if (empty($username) || empty($password)) {

echo "<p>Maaf, hanya members yang boleh mengakses halaman ini.</p>";

}

else {

?>

<p>

Selamat datang <b><?php echo $username; ?></b>

</p>

<?php

};

?>

</body>

</html>

Keempat membuat form login
login.php

<?php

session_start();



$username = "";

$password = "";

if (isset($_POST['username']) && isset($_POST['password'])) {

$un = $_POST['username'];

$pw = md5($_POST['password']);

$cn = @mysql_connect("localhost", "root", "") or die ("Gagal konek ke mysql.");

mysql_select_db("db_user") or die ("Gagal memilih database.");

$query = "select * from tb_user where

login_username = '$un' and login_password = '$pw'";

$hasil = mysql_query($query) or die ("Gagal melakukan query.");

if ($hasil !=false) {

if (mysql_num_rows($hasil) ==1) {

$username = $_POST['username'];

$password = $_POST['Password'];

$_SESSION['username'] = $_POST['username'];

$_SESSION['password'] = $_POST['password'];

};

};

};

?>

<html>

<head>

<title>Login</title>

</head>



<body>

<p>

<a href="index.php">Home</a> |

<a href="login.php">Login</a> |

<a href="member.php">Member</a> |

<a href="logout.php">Logout</a> 

</p>

<p>

<?php

if (empty($username)) {

if (isset($_POST['username']) || isset($_POST['password'])) {

echo "<p>Username dan pasaword yang anda ketik adalah salah!</p>";

};

?>

<form name="login_form" method="post" action="login.php">

username: <input name="username" size="32" maxleght="32"  ><br/>

password: <input name="password" type="password" maxleght="32"  ><br/>

<input type="submit" name="button" value="submit" >

</form>

<?php

}

else {

?>

<p>Anda telah berhasil melakukan login.</p>

<?php

};

?>

</p>

</body>

</html>

Kelima atau yang terakhir membuat file logout
logout.php

<?php

session_start();



unset($_SESSION['username']);

unset($_SESSION['password']);

?>



<html>

<head>

<title>logout</title>

</head>



<body>

<p>

<a href="index.php">Home</a> |

<a href="login.php">Login</a> |

<a href="memeber.php">Member</a> |

<a href="logout.php">Logout</a> 

</p>

<p>

okee...Anda sudah logout.

</p>

</body>

</html>

Semoga postingan ini bermanfaat, Selamat Mencoba

Source code : mawan.or.id

Bila Kurang Jelas, silakan bertanya dibawah ini .

→ read more. . . ►► Fungsi Session Pada PHP Dan Cara Pembuatannya.