FacebookTwitterYoutubeGoogle+
Diberdayakan oleh Blogger.

Senin, 07 Juli 2014

Tagged under: ,

Membuat Sistem Vote Sederhana dengan PHP

Sistem Vote
Disini kita bahas cara Membuat System Vote dengan PHP. Disini saya akan menggunakan sistem vote dengan Trik Web Count / Penghitung jumlah pengunjung, Jika digambarkan seperti dibawah :

Web -> Submit -> Kunjungi Halaman Tertentu -> Alihkan kehalaman sukses.

Pada saat sampai Kunjungi Halaman Tertentu kita gunakan sistem Web count, dimana jika kita mengunjungi halaman tertentu akan tercatat sebagai pengunjung baru yang ditulis di sebuah file .txt yang telah disiapkan.

Pada halaman sukses kita tinggal menampilkan file .txt tempat menyimpan jumlah pengunjung.

Kurang lebih kode untuk Kunjungi Halaman Tertentu seperti ini :

<?php
    $file = "jokowi.txt";
    if(!($buka=fopen($file,"r"))) die ("file gak bisa di buka");
    $jumlah = (int)fread($buka,"20");
    fclose($buka);
    $jumlah++;
    $buka=fopen($file,"w");
    fwrite($buka,$jumlah);
    fclose($buka);
?>
<?php
    header('Location: sukses.php');
    exit();
?>

Dengan penjelasan :
  1. Baris 2 : jokowi.txt adalah tempat kita menyimpan hasil dari web count tadi
  2. Baris 3 : Membuka file
  3. Baris 5 : Menutup file
  4. Baris 8 : Menulis di file .txt ( Contoh diatas menggunakan jokowi.txt )
  5. Baris 12 : Tempat halaman akan dialihkan
Sedangkan isi halaman sukses kurang lebih seperti ini :

<h2>Terimakasih sudah Vote!</h2>
<h4>Perolehan Jokowi : <?php include("jokowi.txt"); ?></h4>

Pada data diatas terlihat jokowi.txt, itu adalah File kita menyimpan data web count tadi, dengan fungsi diatas kita menampilkan Hasilnya kedalam website.

Untuk latihan silahkan bisa di Download file penuhnya :

Download

Tagged under: ,

Membuat Game Sederhana dengan PHP

Power of PHP

Game ini hanyalah game Senang senang biasa... Tidak ada yang spesial tapi membuat gembira hati pembuatnya :3

Contoh : http://dfc-code.hol.es/php/

Penjelasan :
  • Kalian bisa mengganti Tulisan tulisan di game pada file hasil.php

Download
Tagged under:

Fungsi Lanjutan di PHP

Fungsi Lanjutan
Setelah di artikel saya sebelumnya tentang Membuat Fungsi di PHP sekarang saya mau menambahkan / melanjutkan Fungsi pada PHP ini. Yah.... Siapa tau bermanfaat xD

Kali ini saya membuat contoh pembayaran urang xD
Maaf yah... barangkali ada yang banyak utang, Gak maksud menghina loh... :p

Oke... langsung kita buat contoh saja :

<?php
$suku_bunga = .25;
$pinjaman = "5000000";
function HutangAnda($pinjaman, $suku_bunga) {
$pembayaran_bulanan = ($pinjaman*$suku_bunga);
echo "Anda sebaiknya mencicil Rp. $pembayaran_bulanan tiap bulan!";
}
HutangAnda($pinjaman, $suku_bunga);
?>

Dengan Penjelasan :
baris 1: mulai php;
baris 2: mengeset variabel $suku_bunga menjadi 25%;
baris 3: membuat fungsi HutangAnda yang memiliki argumen $pinjaman dan $suku_bunga;
baris 4: membuat variabel $pembayaran_bulanan, yang nilainya adalah hasil perkalian antara jumlah pinjaman dan suku bunga;
baris 5: menampilkan ke layar sebuah kalimat yang menggunakan nilai dari variabel $pembayaran bulanan;
baris 7: kerjakan fungsi HutangAnda, yang (karena fungsi sudah didefinisikan sebelumnya) hanya menampilkan kalimat Anda lebih baik membayar [25% dari jumlah pinjaman yang dimasukkan pada halaman form] tiap bulan!, Tapi karena untuk membuat form disini ribet, jadi saya tulis ajadeh uang Pinjamannya :p
Tagged under:

Membuat Fungsi di PHP

Fungsi di PHP
Kekuatan sebenarnya dari PHP berasal dari fungsinya.
Dalam PHP, ada lebih dari 700 built-in fungsi.

Fungsi PHP

Dalam bab ini kami akan menunjukkan Anda bagaimana untuk membuat fungsi sendiri.
Untuk menjaga script dari yang dijalankan ketika beban halaman, Anda dapat memasukkannya ke dalam fungsi.
Suatu fungsi akan dieksekusi oleh panggilan ke fungsi.
Anda dapat memanggil fungsi dari manapun di halaman.

Membuat Fungsi PHP

Suatu fungsi akan dieksekusi oleh panggilan ke fungsi.

Syntax :

function namaFungsi ()
{
kode yang akan dieksekusi ;
}

Fungsi PHP pedoman:
  •      Berikan fungsi nama yang mencerminkan apa fungsi tidak
  •      Nama fungsi dapat mulai dengan huruf atau underscore (bukan angka)
Contoh
Sebuah fungsi sederhana yang menulis nama saya ketika itu disebut:

<html>
<body>

<?php
function namaOrang()
{
echo “Daffa Aditya”;
}

echo “Nama saya adalah “;
namaOrang();
?>

</body>
</html>

Hasilnya :

Nama saya adalah Daffa Aditya

Fungsi PHP – Menambahkan parameter

Untuk menambahkan fungsionalitas lebih ke fungsi, kita dapat menambahkan parameter. Sebuah parameter adalah seperti variabel.
Parameter yang ditentukan setelah nama fungsi, di dalam kurung.

Contoh 1
Contoh berikut akan menulis nama pertama yang berbeda, tapi nama terakhir yang sama:

<html>
<body>

<?php
function namaOrang($nama)
{
echo $nama . " Tempoles.<br />";
}

echo "Nama saya adalah ";
namaOrang("Squidward");
echo "Nama adik perempuan saya adalah ";
namaOrang("Andika");
echo "Nama paman saya adalah ";
namaOrang("Salvian");
?>

</body>
</html>

Hasilnya :

Nama saya adalah Squidward Tempoles.
Nama adik perempuan saya adalah Andika Tempoles.
Nama paman saya adalah Salvian Tempoles.

Contoh 2
Fungsi berikut memiliki dua parameter:

<html>
<body>

<?php
function namaOrang($nama,$terakhir)
{
echo $nama . " Jaegger " . $terakhir . "<br />";
}

echo "Nama saya adalah ";
namaOrang("Smity Weber","Manjensen");
echo "Nama adik perempuan saya adalah ";
namaOrang("Naruto","Mansueb");
echo "Nama paman saya adalah ";
namaOrang("Rias","Marzuki");
?>

</body>
</html>

Hasilnya...

Nama saya adalah Smity Weber Jaegger Manjensen
Nama adik perempuan saya adalah Naruto Jaegger Mansueb
Nama paman saya adalah Rias Jaegger Marzuki

Minggu, 06 Juli 2014

Tagged under: ,

Operator Perbandingan dan Logika Pada PHP

Operator PHP Perbandingan
Kita sudah melihat bagaimana penggunaan tanda “=” saat kita mengisi variabel dalam skrip yang sudah kita tulis (misalnya $blog=”hexaschool”). Tanda sama dengan tersebut disebut dengan “assignment operator” dan merupakan operator paling sederhana yang sudah kita miliki: $a = b berarti “variabel a diisi dengan nilai b (untuk saat ini)”.

Tetapi anda dapat memperoleh lebih banyak dari PHP dengan apa yang disebut dengan “comparison operator” (operator perbandingan) , “logical operator” (operator logika) dan “arithmetic operator” (operator aritmatika). Berikut adalah operator-operator tersebut diambil dari PHP.net

Operator Perbandingan

Operator ini membuat anda bisa melakukan pembandingan apakah beberapa elemen sama, identik, kurang dari atau lebih besar dari yang lain.

Contoh
Name
Result
$a == $b
Sama dengan
BENAR jika $ a sama dengan $b.
$a === $b
Identik
BENAR jika $a sama dengan $b, dan keduanya memiliki tipe yang sama.
$a != $b
Tidak sama dengan
BENAR jika $a tidak sama dengan $b.
$a <> $b
Tidak sama dengan
BENAR jika $a tidak sama dengan $b.
$a !== $b
Tidak identik
BENAR jika $a tidak sama dengan $b, atau tidak memiliki tipe yang sama.
$a < $b
Kurang dari
BENAR jika $a kurang dari $b.
$a > $b
Lebih besar dari
BENAR jika $a lebih besar dari $b.
$a <= $b
Kurang dari atau sama dengan
BENAR jika $a kurang dari atau sama dengan $b.
$a >= $b
Lebih besar dari atau sama dengan
BENAR jika $a lebih besar dari atau sama dengan $b.

Operator Logika

Di sini anda dapat membandingkan elemen-elemen menggunakan pembandingan logika and dan or.

Contoh
Nama
Hasil
$a and $b
And
BENAR jika baik $a dan $b keduanya BENAR.
$a or $b
Or
BENAR jika salah satu dari $a atau $b BENAR.
$a xor $b
Xor
BENAR jika salah satu dari $a atau $b BENAR, tetapi tidak keduanya.
! $a
Not
BENAR jika $a tidak BENAR.
$a && $b
And
BENAR jika baik $a dan $b keduanya BENAR.
$a || $b
Or
BENAR jika salah satu dari $a atau $b BENAR.

Operator Aritmatika

Persis seperti namanya, operator ini melakukan matematika dasar (artinya, kalau anda menginginkan operasi matematika lainnya misalnya integral atau differensial ya harus bikin sendiri, lagian siapa yang mau pake ya?)

Contoh
Nama
Hasil
$a + $b
Penjumlahan
Jumlah $a dan $b.
$a – $b
Pengurangan
Selisih $a dan $b.
$a * $b
Perkalian
Perkalian $a dan $b.
$a / $b
Pembagian
Pembagian $a dan $b.
$a % $b
Modulus
Sisa $a dibagi $b.
Tagged under:

If, Else, dan Elseif pada PHP

If Elseif dan Else pada PHP
Pernyataan bersyarat digunakan untuk melakukan tindakan yang berbeda berdasarkan pada kondisi yang berbeda.
  • if statement – Digunakan untuk mengeksekusi beberapa kode hanya jika kondisi tertentu adalah benar.
  • if…else statement -Digunakan untuk mengeksekusi beberapa kode jika kondisi benar dan kode lain jika kondisi salah.
  • if…else if….else statement – Digunakan untuk memilih salah satu dari banyak blok kode yang akan dieksekusi.
  • switch statement – menggunakan pernyataan ini untuk memilih salah satu dari banyak blok kode yang akan dieksekusi

Statement IF

Gunakan jika pernyataan untuk mengeksekusi beberapa kode hanya jika kondisi tertentu adalah benar.

Syntax :

if (kondisi) kode yang akan dieksekusi jika kondisi benar;

Contoh :
  1. Pertama kita akan buat variabel $mobil dengan BMW ( Baris 2 )
  2. Kemudian kita akan mengatur Jika mobil adalah BMW, maka tampilkan "Mobil saya juga BMW xD"
<?php
$mobil = "BMW";

if ($mobil == "BMW")
echo ("Mobil saya juga BMW xD");

?>

Maka jika kita menuliskan BMW pada input yang menyertakan action dengan file berisikan kode diatas akan muncul tulisan :

Mobil saya juga BMW xD

Kondisi ini hanya bisa jalan jika kondisi benar saja.

Statement If … Else

Gunakan if …. else untuk mengeksekusi beberapa kode jika kondisi benar dan kode lain jika kondisi adalah salah.

Syntax :

if (kondisi)
Kode yang akan dieksekusi jika kondisi benar;
else
Kode yang akan dieksekusi jika kondisi salah;

Contoh :
berikut akan menampilkan “Warna kesukaan kita sama loh! xD” jika kondisi benar, jika tidak maka akan menampilkan “Yah... Kesukaan kita beda :p”:

<html>
<body>

<?php
$warna="Merah";
if ($warna==”Merah”)
echo “Warna kesukaan kita sama loh! xD”;
else
echo “Yah... Kesukaan kita beda :p”;
?>

</body>
</html>

Statement If…Elseif…Else

Gunakan If.. Elseif…Else untuk memilih salah satu dari beberapa blok kode yang akan dieksekusi.

Syntax :

if (kondisi)
Kode yang akan dieksekusi jika kondisi benar;
elseif (kondisi)
Kode yang akan dieksekusi jika kondisi benar;
else
Kode yang akan dieksekusi jika kondisi salah;

Contoh :
  1. Saya akan menuliskan "Andika" jika kondisi yang ditentukan adalah "A"
  2. Saya akan menuliskan "Bajul" jika kondisi yang ditentukan adalah "B"
  3. Dan saya akan menuliskan "Duff" jika kondisi yang dituliskan bukan "A" dan bukan "B"
  4. Saya telah membuat sebuah file form sebelum-nya dengan "huruf" sebagai variabel-nya
<html>
<body>

<?php
$friend=$_POST['huruf'];
if ($friend=="A")
echo “Andika”;
elseif ($friend=="B")
echo “Bajul”;
else
echo "Duff";
?>

</body>
</html>
Tagged under:

Fungsi $_GET pada PHP

Method Get
Dalam PHP, variabel $ _GET standar digunakan untuk mengumpulkan nilai dalam sebuah form dengan metode = "get".

Variabel $ _GET

Variabel $ _GET standar digunakan untuk mengumpulkan nilai dalam sebuah form dengan metode="get"
Informasi dikirim dari sebuah form dengan metode GET terlihat untuk semua orang (ini akan ditampilkan di address bar browser) dan memiliki batasan pada jumlah informasi untuk mengirim.

Contoh :

<form action="hexa.php" method="get">
Nama : <input type="text" name="nama" />
Tinggi : <input type="text" name="tinggi" />
<input type="submit" value="Submit!" />
</form> 

Ketika pengguna mengklik tombol "Submit!", URL yang dikirim ke server bisa terlihat di Address Bar seperti ini:

http://contoh.com/hexa.php?nama=Tukiem&tinggi=156

Dalam "hexa.php" dapat menggunakan variabel $ _GET untuk mengumpulkan data formulir (nama-nama kolom formulir secara otomatis akan menjadi kunci dalam array $ _GET):

Contoh : 

Selamat datang <?php echo $_GET["nama"]; ?>.
Tinggi badanmu <?php echo $_GET["age"]; ?>cm !

Kapan menggunakan metode = "GET"?

Bila menggunakan metode = "mendapatkan" dalam bentuk HTML, semua nama variabel dan nilai-nilai yang ditampilkan dalam URL.

Catatan: Metode ini tidak boleh digunakan bila mengirim password atau informasi sensitif lainnya!
Namun, karena variabel ditampilkan di URL, adalah mungkin untuk penunjuk halaman. Hal ini dapat berguna dalam beberapa kasus.

Catatan: Metode dapatkan adalah tidak cocok untuk nilai-nilai variabel yang sangat besar. Ini tidak boleh digunakan dengan nilai melebihi 2000 karakter.

Contoh website buatan saya dengan menerapkan method="get"
Silahkan Kesini

Oke... sekian dahulu... Wassalamu'alaikum WR.WB. 
Tagged under:

Fungsi $_POST pada PHP

Method Post
Dalam PHP, variabel $ _POST standar digunakan untuk mengumpulkan nilai dalam sebuah form dengan metode="post".

Variabel $ _POST

Variabel $ _POST standar digunakan untuk mengumpulkan nilai dari bentuk dikirim dengan metode = “post”.
Informasi yang dikirim dari formulir dengan metode POST tidak terlihat oleh orang lain dan tidak memiliki batasan pada jumlah informasi untuk mengirim.

Contoh :

<form action="hexa.php" method="post">
Nama Depan : <input type="text" name="fname" />
Nama Belakang : <input type="text" name="lname" />
<input type="submit" value="Submit!" />
</form> 

Saat mengklik Tombol Submit! maka akan terlihat di address bar :

http://contoh.com/hexa.php

Dalam "hexa.php" dapat menggunakan variabel $ _POST untuk mengumpulkan data formulir (nama-nama kolom formulir secara otomatis akan menjadi kunci dalam array $ _POST):

Contoh :

Selamat datang <?php echo $_POST["fname"]; ?> <?php echo $_POST["lname"]; ?>!

Kapan menggunakan metode = "post"?

Informasi yang dikirim dari formulir dengan metode POST tidak terlihat oleh orang lain dan tidak memiliki batasan pada jumlah informasi untuk mengirim.
Namun, karena variabel tidak ditampilkan di URL, adalah tidak mungkin untuk penunjuk halaman.
Method ini biasanya digunakan untuk halaman Login suatu website.
Tagged under:

Form pada PHP

Form Pada PHP
Form pada PHP ini adalah singkatan dari Formulir. Biasanya digunakan untuk membuat pendaftaran online dan lain lain.
Jika ingin membuat Form ( Formulir ) pada PHP kita membutuhkan 2 file PHP.

  1. File PHP yang akan ditampilkan di Website.
  2. 2. File PHP untuk memproses data yang kita isi di formulir yang kita buat.

Form dalam PHP dituliskan :

<form action="file.php" method="method">Isi</form>

Dengan penjelasan :

  1. action : adalah file kedua yang berguna untuk memproses data - data
  2. method : Methode yang digunakan dalam form ( Post / Get ) nanti akan saya jelaskan di artikel selanjutnya

Sebagai contoh kita buat dulu Form simple seperti :

<html>
<head>
<title>Form Baru xD</title>
</head>

<body>
<form action="hasil.php" method="post">

Nama saya adalah:
<br> <input type="text" name="namakamu">

<p> Nama orang yang saya sukai:
<br> <input type="text" name="namadia">
<p>

<input type="submit" name="submit" value="Cocokkan!">
</form>

</body>
</html>

Penjelasan :
Baris 7 : Menunjukan action dengan nama file hasil.php yang akan memproses data formulir diatas dengan methode post.

Baris 10 : name=”namakamu” artinya adalah bahwa apapun yang kita ketikkan ke dalam text box kita tadi akan mengisi sebuah variabel yang bernama “namakamu”. Inilah yang menghubungkan antara form dan variabel – setiap field dalam sebuah form dapat digunakan untuk mengisi variabel untuk kemudian kita gunakan sesuka kita.

Baris 13 : di baris ini, kita memiliki sebuah teks input yang akan kita gunakan untuk mengisi variabel lain yang kita beri nama “namadia” yang merupakan nama orang yang kita sukai.

Jika Tombol submit kita Klik (yang bertuliskan Cocokkan! itu). Berikut ini kira-kira isi file hasil.php :

<html>
<head>
<title>Sabar Gan!</title>
</head><body bgcolor="#FFFFFF" text="#000000">
<p>Kayaknya <?php echo $namakamu; ?>
<p>gak bakalan bisa jadian sama
<b> <?php echo $namadia; ?> deh!?! </b>
<p>Mungkin muka anda kurang tamvan :v
</body>
</html> 

Gimana? Sekarang udah ngerti kan bagaimana caranya form kita mengirimkan sebuah variabel dari form kita itu ke sebuah file PHP?

Perhatikan bahwa pada file hasil.php kita sebuah variabel dipanggil dengan menambahkan tanda $ ($namakamu) di depan variabel yang kita definisikan pada file HTML form_saya.html sebelumnya (namakamu).
Tagged under:

Array Pada PHP

PHP Array

Apa itu Array?

Variabel adalah tempat penyimpanan memegang nomor atau teks. Masalahnya adalah, variabel akan terus hanya satu nilai.Array adalah variabel khusus, yang dapat menyimpan beberapa nilai dalam satu variabel tunggal.

Jika Anda memiliki daftar item (daftar warna burung, misalnya), menyimpan warna burung di variabel tunggal bisa terlihat seperti ini:

$burung1="Item";
$burung2="Coklat";
$burung3="Merah";

Namun, bagaimana jika Anda ingin loop melalui warna burung dan menemukan satu tertentu? Dan bagaimana jika kau tidak 3 warna, tapi 300?

Solusi terbaik di sini adalah dengan menggunakan array!

Sebuah array dapat memegang semua nilai variabel Anda di bawah satu nama. Dan Anda dapat mengakses nilai dengan mengacu pada nama array.

Setiap elemen dalam array memiliki indeks sendiri sehingga dapat dengan mudah diakses.

Dalam PHP, ada tiga jenis array:
  • Numeric array – Sebuah array dengan indeks numerik
  • Asosiatif array – Sebuah array dimana setiap key ID adalah terkait dengan nilai
  • Multidimensional array – Sebuah array yang berisi satu atau lebih array

Numeric Array

Sebuah numeric array menyimpan setiap elemen array dengan indeks numerik.Ada dua metode untuk membuat array numerik.

1. Pada contoh berikut ini indeks akan otomatis diberi (index dimulai dari 0):

$burung=array("Item","Coklat","Merah","Hijau");

Pada contoh berikut ini kami menetapkan indeks secara manual:

$burung[0]="Item";
$burung[1]="Coklat";
$burung[2]="Merah";
$burung[3]="Hijau";

Untuk menampilkan data atau project PHP yang kita buat maka kita membutuh kan echo.
Simulasi-nya seperti berikut :

<?php

$burung[0]="Item";
$burung[1]="Coklat";
$burung[2]="Merah";
$burung[3]="Hiijau";
echo $burung[0] . ” dan ” . $burung[1] . ” adalah warna burung milikku xD”;
?>

Kode diatas akan menghasilkan :

Item dan Coklat adalah warna burung milikku xD

Asosiatif Array

Array asosiatif, setiap tombol ID adalah terkait dengan nilai.Ketika menyimpan data tentang nilai bernama spesifik, numerik array tidak selalu cara terbaik untuk melakukannya.Dengan array asosiatif kita dapat menggunakan nilai sebagai kunci dan memberikan nilai kepada mereka.

Contoh 1:
Dalam contoh ini kita menggunakan array untuk menetapkan tinggi ke orang yang berbeda:

$tinggi = array("Pakijo"=>164, "Tukinem"=>154, "Warsono"=>175);

Contoh 2:
Contoh ini adalah sama seperti contoh 1, tetapi menunjukkan cara yang berbeda untuk menciptakan array:


$tinggi['Pakijo'] = "164";
$tinggi['Tukinem'] = "154";
$tinggi['Warsono'] = "175";

Untuk menampilkan data atau project PHP yang kita buat maka kita membutuh kan echo.
Simulasi-nya seperti berikut :

<?php
$tinggi['Pakijo'] = "164";
$tinggi['Tukinem'] = "154";
$tinggi['Warsono'] = "175";

echo “Tinggi Pakijo adalah ” . $tinggi['Pakijo'] . ”cm.”;
?>

Simulasi diatas akan menghasilkan :

Tinggi Pakijo adalah 164cm.

Multidimensional Array

Dalam array multidimensi, setiap elemen dalam array utama juga dapat sebuah array. Dan setiap elemen dalam array sub-dapat sebuah array, dan sebagainya.

Contoh 1 :
Dalam contoh ini kita membuat array multidimensi, dengan otomatis diberi ID kunci:



$temen = array
(
"Andika"=>array
(
"Bajul",
"Irgi",
"Dean"
),
"Sandi"=>array
(
"Salvian"
),
"Albing"=>array
(
"Yonatan",
"Aji",
"Asep"
)
);

Array di atas akan terlihat seperti ini jika ditulis ke output:

Array
(
[Andika] => Array
(
[0] => Bajul
[1] => Irgi
[2] => Dean
)
[Sandi] => Array
(
[0] => Salvian
)
[Albing] => Array
(
[0] => Yonatan
[1] => Aji
[2] => Asep
)
)

Contoh 2 :
Mari kita mencoba menampilkan nilai tunggal dari array di atas:

echo "Apakah " . $temen['Andika'][0] . " adalah teman Andika?";

Kode di atas akan menampilkan :

Apakah Bajul adalah teman Andika? 

Oke... sampai disini dahulu... Semoga kalian mengerti apa itu Array dalam PHP ^_^
Wassalamu'alaikum WR.WB.
Tagged under: ,

Variabel Pada PHP

PHP Variabel
Pernah gak sih kalian belajar Matematika? sebagai anak yang berpendidikan dan terpelajar seperti kalian pasti pernah mempelajarinya, nah... Dalam matematika juga terdapat Variabel kan? Ternyata... di PHP juga ada yang namanya Variabel loh...

variabel ini akan digunakan untuk menampung satu atau beberapa nilai (bagi yang udah jago, skip aja nih paragraf). Dengan kata lain, variabel ini adalah tempat yang digunakan oleh PHP untuk menyimpan informasi dan meneruskannya ke berbagai tempat.

Variabel ini bisa diteruskan ke dokumen lain, fungsi dan sebagainya.

Untuk memberikan gambaran lebih jelas, saya coba gunakan pendekatan yang mudah-mudahan lebih baik. Anda tentu masih bisa mengingat persamaan sederhana ini  “ x+3=7”.
Dalam persamaan tersebut, x adalah variabel, dan dengan sangat mudah, Anda  bisa mengetahui bahwa isi variabel x adalah nilai 4.

Persis sama…variabel dalam PHP kira-kira berfungsi seperti itu, menampung sebuah nilai, dengan sedikit penambahan kemampuan yaitu variabel dalam PHP dapat kita gunakan lagi dalam file atau fungsi lain. Jangan khawatir, anda akan merasa lebih jelas setelah mempelajari contoh yang akan saya sampaikan di bawah nanti.

Alasan mengapa variabel begitu penting dalam PHP adalah karena pada saat Anda membuat halaman web dinamis (halaman yang dapat merespon input dari user) maka anda akan bergantung pada data yang dikirimkan antara halaman web. Pada saat itulah Anda harus menggunakan variabel. Variabel merupakan mekanisme utama dalam pengiriman data seperti ini.

Yang kalian dapat lakukan dengan Variabel :
  • Menyimpan nilai dengan memberi nilai pada mereka. Kadang disebut juga dengan istilah inisialisasi variabel;
  • Mengubah nilai dalam variabel, tentu saja jika sudah di isi sebelumnya;
  • Mengakses variabel (artinya anda bisa membaca nilai dari variabel itu dan melakukan hal yang diperlukan terhadap mereka)

Baiklah, setelah anda mengetahui tentang apa saja yang bisa anda lakukan dengan variabel, mari kita pelajari lebih dalam dengan menggunakan contoh.

Pertama, anda perlu mengetahui bahwa variabel dalam PHP dimulai dengan tanda dolar (“$”). Dalam kode di bawah ini , kita akan mengisi variabel, menggunakannya, kemudian mengupdate isinya untuk kemudian digunakan lagi. Nilai yang ada dalam variabel dapat diubah kapanpun kita mau.
Mari kita perhatikan script pendek berikut ini. Jangan khawatir, Saya akan coba jelaskan secara detil apa yang terjadi pada masing-masing baris.

<?php
$isi_variabel = "Ini isi awal variabel!";
echo ("Menampilkan isi variabel awal : $isi_variabel");
echo ("<p>");
$isi_variabel = "Ini isi Variabel setelah diupdate!";
echo ("Isi variabel setelah diupdate : $isi_variabel");
?>

Hasil dari kode tersebut adalah sebagai berikut:

Menampilkan isi variabel awal : Ini isi awal variabel!
Isi variabel setelah diupdate : Ini isi Variabel setelah diupdate!

Penjelasan kode tersebut adalah sebagai berikut.
Pada baris kedua, saya memutuskan untuk membuat variabel yang bernama “isi_variabel”. Ingat, semua variabel dimulai dengan tanda dolar, sehingga variabel saya tadi ditulis menjadi “$isi_variabel”. Berikut ini adalah penjelasan rinci mengenai apa yang dikerjakan masing-masing baris.

Baris 1 memberitahu browser bahwa : “Kode PHP mulai di sini”.

Baris 2 buat variabel $isi_variabel sekaligus mengisinya dengan nilai awal berupa kalimat “Ini isi awal variabel!”.

Baris 3 tampilkan kalimat pengantar untuk variabel $isi_variabel dan sekaligus menampilkan nilai dari $isi_variabel

Baris 4 membuat tag <p> dalam HTML untuk membuat paragraf baru.

Baris 5 Mengupdate isi variabel $isi_variabel dan mengisinya dengan kalimat “Ini isi Variabel setelah diupdate!”.

Baris 6 tampilkan kalimat pengantara kedua dan nilai untuk isi variabel $isi_variabel yang baru.

Baris 7 ngasih tahu si Browser bahwa kode PHP sudah berakhir.

Dalam variabel di PHP ini tidak menerima tanda kutip double
Contoh :

echo (" "Ini contoh" ");

Tapi bagaimana jika ingin memasukkan tanda kutip kedalam project PHP kita? Kita hanya tinggal menambahkan tanda "\" sebelum tanda kutip yang kita inginkan.
Contoh :

echo (" \"Saya bersama tanda kutip :p\" ");

Oke saya kira segitu dulu... Sampai jumpa kembali...
Tagged under:

PHP While Loops

PHP While Loops
Loop mengeksekusi blok kode jumlah tertentu kali, atau saat kondisi tertentu adalah benar.

PHP Loops

Seringkali ketika Anda menulis kode, Anda ingin blok kode yang sama untuk menjalankan lagi dan lagi dalam satu baris. Alih-alih menambahkan baris hampir sama beberapa script kita dapat menggunakan loop untuk melakukan tugas seperti ini.
Dalam PHP, kita memiliki pernyataan perulangan berikut:
  • While – loop melalui blok kode sementara kondisi yang ditentukan benar
  • Do … while – loop melalui blok kode satu kali, kemudian mengulangi loop selama kondisi yang ditentukan benar
  • For – loop melalui blok kode jumlah tertentu kali
  • Foreach – loop melalui blok kode untuk setiap elemen dalam array

While Loop

Loop sementara mengeksekusi sebuah blok kode sementara kondisi benar.

Syntax :

while (Kondisi)
{
  Kode yang akan dieksekusi;
}

Contoh :
Contoh di bawah ini mendefinisikan sebuah loop yang dimulai dengan hex = 1. Loop akan terus berjalan selama sebagai hex adalah kurang dari, atau sama dengan 5.
saya akan meningkat 1 setiap kali loop berjalan:

<html>
<body>

<?php
$hex=1;
while($hex<=5)
{
echo “The number is ” . $hex . “<br />”;
$i++;
}
?>

</body> 
</html>

Hasilnya...

The number is 1
The number is 2
The number is 3
The number is 4
The number is 5

Statement While do

Statement While do  akan selalu mengeksekusi blok kode satu kali, maka ia akan memeriksa kondisi, dan ulangi loop sementara kondisi benar.

Syntax :

do
{
  kode yang akan dieksekusi;
}
while (kondisi);

Contoh :

Contoh di bawah ini mendefinisikan sebuah loop yang dimulai dengan hex = 1.
Hal ini kemudian akan kenaikan hex dengan 1, dan menulis beberapa output.
Maka kondisi tersebut akan diperiksa, dan loop akan terus berjalan selama sebagai hex adalah kurang dari, atau sama dengan 5:

<html>
<body>

<?php
$hex=1;
do
{
$hex++;
echo “The number is ” . $hex . “<br />”;
}
while ($hex<=5);
?>

</body>
</html>

Hasilnya...

The number is 2
The number is 3
The number is 4
The number is 5
The number is 6

Oke... sekian dahulu... semoga paham, jika ada yang tidak paham silahkan ditanyakan...
Wassalamu'alaikum WR.WB.
Tagged under: ,

Penulisan Kode PHP

Penulisan Kode PHP
Masih ingat saat belajar PHP sebelumnya kan? Kalau kode-kode PHP anda akan disisipkan di antara kode-kode HTML. Sebagai akibatnya, PHP dan HTML akan sama-sama kita tulis dalam bentuk teks biasa. Kode PHP anda (misalnya dalam contoh di bawah ini  adalah sebuah halaman yang menampilkan kata-kata “Belajar bersama di Hexa School xD”) akan berada di sela-sela kode-kode dalam sebuah file HTML yang berekstensi .php, bukan .htm atau .html seperti biasanya.

Contoh halaman dari penjelasan tersebut adalah sebagai berikut. Perhatikan contoh aturan penulisan kode PHP ini :

<html>
<head>
<title> Contoh Halaman PHP </title>
</head>
<body>
<font color="blue">PHP kode saya akan membuat halaman ini menampilkan:</font>
<p>
<?php
echo("Belajar bersama di Hexa School xD");
?>
</p>
</body>
</html>

Tapi jika contoh diatas disimpan dengan ekstensi file HTML maka yang terjadi adalah Kode yang di tuliskan dalam tag <?php tidak akan muncul

Simulasi :



Dan jika file diatas disimpan dengan ekstensi .php maka tulisan yang tampak akan seperti dibawah ini :

PHP kode saya akan membuat halaman ini menampilkan:
Belajar bersama di Hexa School xD

Kurang lebih seperti itu...

Komentar PHP

Dalam menulis kode PHP untuk tutorial ataupun untuk Belajar pasti kurang jelas jika tidak diberi penjelasan sebelumnya. Nah... di PHP ini kita bisa memberikan komentar dalam kode/project PHP yang kita buat dengan menyisipkan komentar kedalam /* dan */ atau //
Sebagai contoh :


<?php
//Ini tidak akan
//Ditampilkan kedalam
//Kode PHP yang kita buat
echo ("Belajar bersama di Hexa School xD");
/* Tulisan ini juga tidak dihiraukan
sampai muncul kode
penutup komentar --> */
?>

Sudah faham bukan? Terimakasih dan Sampai jumpa :*

Sabtu, 05 Juli 2014

Tagged under:

Instalasi PHP

Instalasi PHP

Apa yang Anda Butuhkan?

Jika server Anda mendukung PHP Anda tidak perlu melakukan apapun.
Hanya membuat beberapa. Php file dalam direktori web Anda, dan server akan menguraikannya untuk Anda. Karena gratis, kebanyakan web host menawarkan dukungan PHP.
Namun, jika server Anda tidak mendukung PHP, Anda harus menginstal PHP.
Berikut adalah link ke tutorial baik dari PHP.net tentang cara menginstal PHP5 : http://www.php.net/manual/en/install.php

Ambil PHP

PHP untuk mendownload gratis di sini : http://www.php.net/downloads.php

Ambil Database MySQL

MySQL untuk men-download gratis di sini : http://www.mysql.com/downloads/

Ambil Apache Server

Apache untuk men-download gratis di sini : http://httpd.apache.org/download.cgi
Tagged under:

PHP For Loops

PHP For Loops
Loop mengeksekusi blok kode jumlah tertentu kali, atau saat kondisi tertentu adalah benar.

For loop

Untuk loop digunakan ketika Anda tahu sebelumnya berapa kali harus menjalankan script.

Syntax 

for ( init; condition; increment )
{
code to be executed;
}

Penjelasan
init : Sebagian besar digunakan untuk mengatur counter (tapi bisa setiap kode yang akan dieksekusi sekali di awal loop)
Kondisi : Dievaluasi untuk setiap iterasi loop. Jika mengevaluasi TRUE, loop terus. Jika mengevaluasi ke FALSE, loop berakhir.
kenaikan : Sebagian besar digunakan untuk kenaikan counter (tapi bisa setiap kode akan dieksekusi pada akhir loop)

Contoh
Contoh di bawah ini mendefinisikan sebuah loop yang dimulai dengan hex = 1. Loop akan terus berjalan selama sebagai hex adalah kurang dari, atau sama dengan 5. saya akan meningkat 1 setiap kali loop berjalan:

<html>
<body>

<?php
for ($hex=1; $i<=5; $i++)
{
echo “The number is ” . $hex . “<br />”;
}
?>

</body>
</html> 

Akan menghasilkan :

The number is 1
The number is 2
The number is 3
The number is 4
The number is 5

Foreach Loop

Loop foreach digunakan untuk loop melalui array.

Syntax

foreach ($ array as $ value )
{
kode yang akan dieksekusi;
}

Untuk setiap iterasi loop, nilai elemen array saat ini ditugaskan untuk $ nilai (dan array pointer akan bergerak satu persatu) – sehingga pada iterasi loop berikutnya, anda akan melihat nilai array berikutnya.
contoh

Contoh berikut menunjukkan sebuah loop yang akan mencetak nilai dari array yang diberikan:

<html>
<body>

<?php
$hex=array(“satu”,”dua”,”tiga”);
foreach ($hex as $value)
{
echo $value . “<br />”;
}
?>

</body>
</html>

Akan menghasilkan

satu
dua
tiga


Oke Sampai disini dahulu, semoga bisa difahami Wassalamu'alaikum WR.WB.
Tagged under:

Box Shadow pada CSS

CSS Box Shadow
Box shadow berfungsi untuk memberikan bayangan pada element atau box yang kita buat melalui CSS.

Box Shadow Inset

div {
  -webkit-box-shadow:10px 10px 7px #222; /* Safari & Chrome */
  -moz-box-shadow:10px 10px 7px #222;    /* Firefox */
  box-shadow:10px 10px 7px #222;         /* W3C */
} 

Box Shadow Outset

div {
  -webkit-box-shadow:inset 10px 10px 7px #222; /* Safari & Chrome */
  -moz-box-shadow:inset 10px 10px 7px #222;    /* Firefox */
  box-shadow:inset 10px 10px 7px #222;         /* W3C */
}
 
10px yang pertama adalah ukuran offset sumbu X, 10px yang ke dua adalah offset sumbu Y, 7px adalah tingkat blur, #222 adalah warna bayangan. Kamu juga bisa menuliskan nilai offset negatif untuk membuat bayangan menuju ke arah sebaliknya. Cara penerapannya bisa diletakkan secara top down ataupun inline.

Contoh :

Tagged under:

Pemanggilan CSS

Pemanggilan CSS
Pada saat kita membuat element dengan CSS tentu kita harus memanggilnya agar bisa ditempilkan di web berbasis HTML.
Untuk memanggil CSS ini kita menggunakan tag <div class="">
Contoh saya akan membuat element di CSS dengan nama contoh

<style type="text/css">
.contoh {
background:none;
}
</style>

Menurut contoh diatas kita dapat memanggil CSS contoh dengan tag :
<div class="contoh">Isi div</div>

Dengan kata lain class="" yang kita gunakan dalam <div> adalah nama element yang kita buat dalam CSS.

Oke sekian dari saya, jika ada yang kurang faham silahkan ditanyakan saja :D
Tagged under:

Float pada CSS

CSS Float
Float pada CSS adalah penempatan element yang kita buat dengan CSS. Dengan float ini kita memungkinkan untuk Membuat element berdampingan.

Property CSS memiliki 4 Value, yaitu :

right    : Element kita akan berada dibagian kanan
left      : Element kita akan berada dibagian kiri
inherit : Float ini akan mengikuti Float element yang berada diatas-nya
none    : Ini digunakan untuk menonaktifkan Float pada CSS

Penulisan : float:value;

Contoh :

Tagged under:

Border pada CSS

CSS Border
Kali ini kita menginjak pada CSS Border. Apasih itu Border? Border dalam CSS adalah garis tepi yang membatasi element yang kita buat dalam CSS.

Pada property border dalam CSS terdapat Value sebagai berikut:

dashed : Border dengan garis putus putus
dotted  : Border dengan titik titik
double : Membuat border 2x ( Double border )
groove : Border yang dalam-nya seperti Bevel ( masuk kedalam )
inset     : Border berada di dalam
outset  : Border berada di luar
ridge    : Border berada diantara luar dan dalam
solid     : Border seperti biasa

Penulisan : border:value (lebar border) (warna border);
Contoh     : border:dashed 2px #000000;

Property border juga dapat diterapkan pada satu sisi saja, property-nya :

border-top:value;
border-bottom:value;
border-left:value;
border-right:value; 

Berikut adalah contoh penerapannya :

Tagged under:

Position pada CSS

CSS Position
CSS Position berguna untuk menempatkan element yang kita buat dalam CSS. Contoh saja kamu ingin meletakan sebuah widget dipojok kanan atas, maka yang digunakan adalah Property ini

Dalam Property Position pada CSS terdapat 5 Positioning, yaitu :

Position Static

Elemen HTML diposisikan statis dengan default. Unsur diposisikan statis selalu diposisikan sesuai dengan aliran normal halaman.

Elemen diposisikan statis tidak terpengaruh oleh bagian atas, bawah, kiri, dan sifat yang tepat.


Penulisan : position:static;

Position Fixed

Position Fixed akan membuat element melayang mengikuti scroll keatas ataupun kebawah, tempat-nya tidak akan berubah dan berpindah.

Contoh :




Itu berarti element akan melayang jika di scroll dengan jarak 30px dari atas dan 5px dari kanan.

Penulisan : position:fixed;

Position Relative

Position relative ini bisa kita ubah ubah penempatannya sesuka hati kita dengan property 
top:value; 
right:value; 
bottom:value; 
left:value; 

Penggunaan Property adalah jarak dari elemen yang berada diatas-nya

Contoh : 


Position Absolute

Jika position Relative adalah jarak antara element diatasnya, kalau position absolute adalah jarak antara CSS yang kita buat dengan Layar/monitor kita

Contoh :




Oke... Sekian dulu tutorial kali ini... Semoga bisa difahami, jika kurang faham bisa ditanyakan di kolom komentar ^_^
Wassalamu'alikum WR.WB.

Jumat, 04 Juli 2014

Tagged under:

Font dan Teks pada CSS

Font dan Text pada CSS
Tentu penggunaan font dan text pada CSS berbeda dengan HTML. Jika HTML hanya menggunakan <font>
CSS harus menggunakan Property dan Value terlebih dahulu. Cara ini lebih efektif untuk Validasi CSS3 karena jika kalian langsung menulis <font> tanpa menggunakan CSS dapat mengurangi Valid-nya CSS3 blog atau website kita.

Ada beberapa property dalam Font pada CSS seperti :
font-family, font-size, font-weight, dan lain lain.

Pada Text dalam CSS juga terdapat beberapa Property seperti :
text-align, text-decoration, text-transform, text-shadow.

Dan pada pembelajaran kali ini kita akan sikat habis semuanya :D

Font Family

Pada pembelajaran kali ini saya akan membuat contoh CSS text

<style type="text/css">
.text {
background:none;
font-family:"Oswald";
color:#FF0000;
} 
</style>

Maka akan menghasilkan seperti dibawah ini

Ini contoh

Mari kita coba ubah jenis font-nya, apakah hasil-nya akan berbeda?
Saya akan gunakan text1 untuk contoh kedua

<style type="text/css">
.text1 {
background:none;
font-family:"courier new";
color:#FF0000;
} 
</style>

Maka akan menghasilkan seperti dibawah ini

Contoh 1

Berdasarkan hasil yang didapat font-family berfungsi untuk menentukan Jenis Font yang kita pakai dalam CSS yang kita buat

Font Size

Sekarang saya menggunakan contoh font-size-1

<style type="text/css">
.font-size-1 {
background:none;
font-family:"courier new";
font-size:14px; 
color:#FF0000;
} 
</style>

Maka akan menghasilkan seperti dibawah ini

Font Size 1

Sekarang kita buat baru dengan Size yang berbeda
saya menggunakan contoh font-size-2

<style type="text/css">
.font-size-2 {
background:none;
font-family:"courier new";
font-size:18px;
color:#FF0000;
} 
</style>

Maka akan menghasilkan seperti dibawah ini


Font Size 2

Berdasarkan hasil dari percobaan diatas maka disimpulkan bahwa font-size beguna untuk mengatur ukuran font dalam CSS yang kita buat.

Untuk font-weight mungkin tidak perlu saya jelaskan karena sam saja dengan blod, cukup tambahkan <b> diawal dan </b> diakhir element.

Text Align

Sekarang kite kite pake contoh CSS align

<style type="text/css">
.align {
background:none;
width:100%; 
font-family:"courier new";
font-size:14px; 
color:#FF000;
text-align:center;
} 
</style>

Maka akan menghasilkan seperti dibawah ini


Iam in Center :p

Kita coba perapihan barisan yang lain seperti, Left, dan right. Caranya cukup ganti text-align:center; ( Yang berwarna merah ) menjadi left atau right.
Kita buat contoh CSS right dengan font berada di kanan

<style type="text/css">
.right {
background:none;
width:100%; 
font-family:"courier new";
font-size:14px; 
color:#FF000;
text-align:right;
}
</style>

Maka akan menghasilkan seperti dibawah ini


I am in right side xD

Setelah kita buat percobaan ternyata property text-align berguna untuk mengatur perataan teks pada CSS yang kita buat.

Text Decoration

untuk menguji coba property ini saya pake contoh decor

<style type="text/css">
.decor {
background:none;
width:100%;
font-family:"courier new";
font-size:14px;
color:#FF000;
text-align:left;
text-decoration:underline;
}
</style>

Maka akan menghasilkan seperti dibawah ini


Iam with Underline >.<

Bisa kita lihat dari contoh diatas bahwa Text Decoration untuk memberi Dekorasi terhadap teks yang kita buat di CSS
Berikut beberapa value dari text-decoration:
blink : Untuk memberi efek bling bling
line-through: Untuk memberi efek coretan
overline: Untuk memberi efek Garis Atas
underline: Untuk memberi efek Garis Bawah

Penulisan : text-decoration:value;

Text Transform

Agar bisa membuktikan apa gunanya property ini, saya gunakan contoh CSS transform

<style type="text/css">
.transform {
background:none;
width:100%; 
font-family:"courier new";
font-size:14px;
color:#FF000;
text-align:left;
text-decoration:none;
text-transform:uppercase;
}
</style>

Maka akan menghasilkan seperti dibawah ini


I'am is uppercase! xP

Bisa kita lihat bahwa fungsi dari text-transform adalah untuk merubah text kita menjadi besar atau kecil semua. untuk mengubahnya silahkan kalian ganti value "uppercase" dengan value dibawah
Berikut beberapa value dari text-transform:
uppercase :  untuk membuat font Besar semua
lowercase : untuk membuat font Kecil semua
capitalize : untuk membuat huruf kapital otomatis

penulisan : text-tranform:value;

Text Shadow

untuk menguji-nya kita buat CSS shadow

<style type="text/css">
.shadow {
background:none;
width:100%; 
font-family:"courier new";
font-size:14px; 
color:#FF000;
text-align:left;
text-decoration:none;
text-transform:uppercase;
text-shadow:    0px 1px #577079,
   0px 2px #577079,
   0px 3px #577079,
   0px 4px #577079,
   0px 5px #577079,
   0px 6px #577079,
   0px 7px #577079,
   0px 7px 10px #333;
}
</style>

Maka akan menghasilkan seperti dibawah ini


I am cool with shadow >.<

Dengan kata lain bahwa text-shadow berguna untuk membuat efek bayangan pada teks. Untuk mengkreasikan bayangnmu berikut adalah pengaturan Value pada text-shadow

text-shadow: (text shadow ke kiri atau ke kanan dalam px) (text shadow keatas atau kebawah dalam px) (Tingkat blur shadow dalam px) (Warna shadow)


Seomga kalian paham dengan semua ini >.<
Jika ada yang ingin ditanyakan silahkan tanyakan saja >.<
Tagged under:

Margin dan Padding Pada CSS

Kali ini saya akan membahas CSS untuk margin dan padding.
Margin adalah jarak luar CSS yang kita buat sedangkan padding adalah jarak dalam CSS yang kita buat.
Untuk lebih jelasnya bisa lihat simulasi dibawah.
Sudah paham tentang Margin dan Padding kan?
sekarang kita lanjut kedalam penulisan dan Value dari margin dan padding pada CSS.

Dalam contoh kali ini saya akan membuat CSS tombol

<style type="text/css">
.tombol {
background:#1abc9c;
width:150px;
height:auto;
border:2px #16a085 solid;
padding:7px;
margin:5px;
text-align:center; 
float:left;
} 
</style>

Pada simulasi diatas saya menuliskan jarak dalam ( Padding ) adalah 7px dan jarak luar ( Margin ) adalah 5px. Maka akan menghasilkan Tombol seperti ini :


Contoh
Contoh 1




Penempatan Margin pada gambar diatas adalah Jarak antara Contoh dan Contoh 1 dan
Penempatan Padding pada gambar diatas adalah jarak antar Tulisan dan border.

Penempatan margin dan padding juga bisa pada 1 sisi saja, Property-nya :

margin-top:value;
margin-right:value;
margin-bottom:value;
margin-left:value; 

padding-top:value;
padding-right:value;
padding-bottom:value;
padding-left:value; 

Penempatan margin dan padding juga bisa berbeda setiap sisinya, Property-nya :

margin:5px 3px 5px 3px;
padding:5px 3px 5px 3px; 

Dengan ketentuan posisi : atas, kanan, bawah, kiri

Sudah paham bukan? Kalau belum paham silahkan ditanyakan.
Wassalamu'alaikum WR.WB.
Tagged under:

Property Dasar Pada CSS

Property CSS
CSS Property dasar adalah CSS tingkat lanjut dari CSS Dasar. Property pada CSS adalah isi dalam CSS yang kita buat, Contoh :

<style type="text/css">
.hexa{
background:#000000; 
} 
</style>

Property dari CSS diatas adalah kode yang terdapat diantara tanda "{" dan "}" yaitu background:#000000;

Berikut adalah beberapa Property CSS Dasar :

background:value;
background:url("Link");
width:value;
height:value;
color:value; 

Penjelasan :
Value untuk background : bisa berisi kode warna ( contoh : #000 ), bisa berisi url ( seperti contoh nomer 2)

Value untuk width : Bisa berisi persen ( % ) atau px, em, pt.

Value untuk height : Bisa berisi persen ( % ) atau px, em, pt.

Convert px, pt, em, dan percent

Color : Ini berisi warna font yang diterapkan pada CSS yang kita buat
Value Color : Berisi kode warna ( contoh : #FFFFFF )
Tagged under: ,

CSS Dasar

CSS Dasar
 Pada kali ini saya akan mengajarkan CSS Dasar, Bagi yang belum kenalan sama CSS silahkan kenalan Disini, Ada pepatah berkata "Tak kenal maka tak sayang" jadi yang belom kenal yo kenalan dulu :p

CSS atau Cascading Stylesheet diawali dengan <style type="text/css"> agar bisa masuk di HTML, dan ditutup dengan </style>

Ada banyak kode" CSS yang perlu dihafal diluar kepala agar mudah saat kita sedang coding.

Berikut contoh beberapa CSS dasar :

Body CSS

CSS pada body berguna untuk memodifikasi tampilan <body> pada HTML
Kode CSS dasar-nya sebagai berikut :

<style type="text/css">
body {
background:#FFFFFF;
}
</style>

dengan CSS diatas saya men-setting Background pada <body> adalah warna Putih ( #FFFFFF )

Link CSS

CSS pada link berguna untuk memodifikasi tampilan link yang kita tulis di Blog/website. Yang kita edit adalah tag a ( <a href=""></a> )
Kode CSS dasar-nya sebagai berikut :

<style type="text/css">
a:link {
color:#000000;
text-decoration:none;
} 
a:visited {
color:#FF0000;
text-decoration:none;
}
a:hover {
color:#0000FF;
text-decoration:none;
}
</style> 

dengan CSS diatas saya men-setting Link dengan warna hitam ( #000000 ), Link Visited dengan warna merah ( #FF0000 ), Link Hover dengan warna Biru ( #0000FF )

CSS diatas akan menghasilkan : Seperti Ini
Tagged under:

Pengunaan Body pada HTML

Tag body
Didalam tag ini kita dapat menampilkan apa yang kita inginkan dengan Tag-tag lainnya, Ini-lah daftar Tag yang bisa dimasukkan dalam tag <body>

Tag
Penulisan
pre
<pre>Code</pre>
a
<a href=”Link”>Hello</a>
img
<img src=”Link” />
h1
<h1>Hello</h1>
h2
<h2>Waw</h2>
h3
<h3>Hay!</h3>
h4
<h4>Hello!</h4>
div
<div>Give me Code!</div>
iframe
<iframe src=”Link” height=”0px” width=”0px”></iframe>
object
<object data=”Link”></object>
p
<p>This is Paragraph</p>
b
<b>This is Blod!</b>
i
<i>This is Italic!<i>
u
<u>This is Underline</u>
striketrough
<strike>This is Striketrough</strike>
center
<center>I’m center!</center>
ul
<ul>Hello</ul>
li
<li>Aw</li>

Dan masih banyak lainya...
Code dalam HTML banyak jumlah-nya jadi kalo ane tulis semua sampe lebaran kucing baru selese bacanya dah :v

Contoh penulisan :

<b>I am Bold!</b>
<i>I am italic!</i>
<u>I am underline!</u>

Kode diatas akan menghasilkan :
 
I am Bold!
I am italic
 I am underline!

Penutup tag <body> adalah </body>
Semoga tutorial ini bisa difahami dan bermanfaat ^_^
Tagged under:

Penggunaan Head pada HTML

Tag head
Dalam Tag <head> ini kita memegang fungsi yang penting karena Tag <head> ini mencakup CSS yang nantinya akan ditampilkan di halaman website/blog kita.
Pada dasarnya Tag <head> hanya berisikan

<head>
...Isi kode ( HTML dan CSS ) ...
</head>

Namun untuk mendapatkan hal yang lebih Optimal dan tentunya untuk menambah SEO Blog atau Website kita. Berikut adalah Tambahan yang diperlukan untuk:

 Website :


<head>
<meta charset="utf-8" />
<meta description="Deskripsi blog" />
<meta keywords="Keywords blog" />
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<meta name="geo.country" content="ID"/>
<meta name="robots" content="INDEX, FOLLOW"/>
<meta name="rating" content="general"/>
<link href="https://plus.google.com/116311034225885620660/posts" rel="publisher"/>
<link href="https://plus.google.com/116311034225885620660/about" rel="author"/>
<link href="https://www.facebook.com/profile.php?id=100002050774659" rel="copyright"/>
<title>JUDUL WEBSITE/BLOG</title>
<style type="text/css/"> 
...Kode CSS...
</style> 
</head>
Jika ingin menambah font dari Google sebagai Stylesheet/Font default Blog/Website anda bisa ditambahkan diatas tag <title> ( Ini optional, tapi untuk memudahkan taruh diatas tag <title> )

Contoh Link :
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,700%7CRopa+Sans%7COswald' rel='stylesheet' type='text/css'/>


Jadi kode-nya menjadi :

<head>
<meta charset="utf-8" />
<meta description="Deskripsi blog" />
<meta keywords="Keywords blog" />
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<meta name="geo.country" content="ID"/>
<meta name="robots" content="INDEX, FOLLOW"/>
<meta name="rating" content="general"/>
<link href="https://plus.google.com/116311034225885620660/posts" rel="publisher"/>
<link href="https://plus.google.com/116311034225885620660/about" rel="author"/>
<link href="https://www.facebook.com/profile.php?id=100002050774659" rel="copyright"/>
<link 
href='http://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,700%7CRopa+Sans%7COswald'
 rel='stylesheet' type='text/css'/> 
<title>JUDUL WEBSITE/BLOG</title>
<style type="text/css/">
...Kode CSS...
</style> 
</head>

Dengan Penjelasan :
meta description : Berisi deskripsi blog atau website anda
meta keywords : Berisi keywords blog atau website anda
rel="publisher", rel="author", rel="copyright" : Berisi link Socmed admin

 Blog :

 <head>
<meta charset='utf-8'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'/>
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900,300italic%7CArvo:400,700,400italic,700italic' rel='stylesheet' type='text/css'/>
<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
    <title><data:blog.pageTitle/></title>
<b:else/>
    <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
        <title>404 Page Not Found - <data:blog.title/></title>
    <b:else/>
        <title><data:blog.pageName/> - <data:blog.title/></title>
    </b:if>
</b:if>
<link href='/favicon.ico' rel='icon' type='image/x-icon'/>
<link href='http://gplus.to/daffaditya11' rel='author'/>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:else/>
<meta expr:content='data:blog.pageName + &quot; - &quot; + data:blog.title' name='description'/>
</b:if>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='Deskripsi' name='description'/>
<meta content='keywords' name='keywords'/>
</b:if>
<!-- Facebook Open Graph -->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <meta content='100002050774659' property='fb:admins'/>
      <meta content='100002050774659' property='fb:profile_id'/>      
    <b:if cond='data:blog.url'>
      <meta expr:content='data:blog.url' property='og:url'/>
    </b:if>
      <meta expr:content='data:blog.title' property='og:site_name'/>
    <b:if cond='data:blog.pageName'>
      <meta expr:content='data:blog.pageName' property='og:title'/>
    </b:if>
      <meta content='website' property='og:type'/>
    <b:if cond='data:blog.postImageThumbnailUrl'>
      <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
    <b:else/>
      <meta content='http://2.bp.blogspot.com/-erTXCq61ULM/TmHYAQBZ0GI/AAAAAAAACCs/6cBX54Dn6Gs/s120-c/default.png' property='og:image'/>
    </b:if>
    </b:if>
</head>

Script diatas bisa diedit sesuka hati anda ^_^
Script diatas saya menggunakan Oswald sebagai Font Default-nya

Semoga bisa dipahami, Wassalamu'alaikum WR.WB.

notifikasi
close