Nulis-Ilmu.com

Tutorial Elektronika dan Komputer

  • Home
  • Elektronika
  • Komputer
  • Javascript

Tutorial CSS Part 1: Apa Itu CSS ?

13 Desember 2014 By Eko Purnomo

apa itu css

CSS adalah singkatan dari Cascading Style Sheet. CSS berfungsi sebagai pengendali komponen pada elemen sebuah website. CSS menentukan tampilan sebuah website melalui nilai-nilai properti style yang disetting pada tiap-tiap elemen dalam website tersebut.

Latar belakang penggunaan CSS

Penggunaan CSS didasari oleh kebutuhan akan tampilan sebuah website. Sebagaimana diketahui bahwa selain isi, tampilan sebuah website merupakan faktor yang tidak kalah pentingnya. Tampilan website yang baik akan membuat pengunjung nyaman dalam membaca dan mengakses isi sebuah website. Hal ini tentu positif bagi perkembangan website tersebut.

Tata letak website yang baik merupakan susunan dari tiap-tiap bagian secara baik dan proporsional. Sebagai contoh saat kita mengatur jarak antar bagian melalui margin dan padding, juga saat mengatur penggunaan font, ukuran font dan warna font.

Cara Membuat CSS

Dalam membuat CSS ada empat hal utama yang perlu diketahui, yaitu:

  1. Selector, adalah bagian atau elemen website yang akan diatur stylenya.
  2. Deklarasi, merupakan pernyataan yang menetapkan style yang berisi Properti dan Nilai.
  3. Properti, adalah parameter tampilan yang akan kita atur.
  4. Nilai, merupakan ukuran yang itetapkan pada parameter properti.

Contoh membuat CSS untuk paragraf :

p {
margin: 10px;
}

Penjelasan contoh diatas :

  1. p merupakan selector untuk elemen paragraf
  2. {…}, merupakan deklarasi, dalam hal ini berisi margin: 10px;
  3. margin, merupakan properti untuk mengatur jarak dengan elemen lain.
  4. 10px, merupakan nilai yang ditetapkan untuk properti margin.

Dalam sebuah deklarasi kita bisa menyetting beberapa properti sekaligus, seperti contoh berikut ini :

p {
margin: 10px;
padding: 5px;
font-size: 10px;
}

Cara Penulisan CSS

Untuk menggunakan CSS ada tiga cara yang bisa dilakukan yaitu dengan cara Inline CSS, Embedded CSS dan External CSS.

1. Inline CSS

Adalah penulisan CSS didalam elemen html secara langsung. Jadi dalam hal ini kita tidak memerlukan penulisan selector karena sudah langsung tertuju pada elemen yang dimaksud. Sebagai gantinya, kita menggunakan tag style=”…” pada elemen tersebut.

Contoh penulisan Inline CSS:

<p style="margin:10px;">

Penjelasan dari kode diatas adalah, kita menetapkan properti margin sebesar 10px untuk elemen paragraf (p). Diantara tanda petik dua (“) kita bisa menyisipkan beberapa deklarasi properti dan nilai sekaligus dengan cara masing-masing deklarasi tetap diakhiri dengan tanda titik koma (;).

2. Embedded CSS

Adalah penulisan CSS secara tersendiri namun berada dalam satu file html. Cara ini membutuhkan selector dalam penulisannya. Beberapa kode CSS ditulis didalam tag <style>…</style>. kita bisa menuliskan beberapa selector beserta deklarasi properti dan nilai didalam tag <style> ini.

Contoh penulisan Embedded CSS dalam sebuah file html:

 <html>  
<head>
<title>Contoh Embedded CSS</title>
</head>

<style>
p {
margin: 10px;
}
h1 {
font-size: 15px;
}
</style>

<body>
<h1>Judul dengan font 15px</h1>
<p>Ini adalah paragraf pertama</p>
<p>Ini adalah paragraf kedua</p>
</body>
</html>

Pada contoh embeddes CSS diatas kita menetapkan font untuk heading h1 sebesar 15px dan margin antar paragraf sebesar 10px.

3. Eksternal CSS

Ini adalah cara paling efektif dan banyak dipakai oleh kebanyakan website saat ini. Dengan eksternal CSS kita menaruh kode-kode CSS didalam sebuah file tersendiri lalu membuat link didalam file html menuju file CSS yang telah dibuat. Cara ini lebih efisien dan mempermudah pekerjaan mendesain dan mengelola sebuah website.

Contoh penulisan Eksternal CSS :
– Pertama kita membuat kode berikut ini pada file .css, lalu menyimpannya misalnya dengan nama style.css

  
p {
margin: 10px;
}
h1 {
font-size: 15px;
}

– Kemudian kita buat file html berikut ini yang menggunakan css dari file style.css lalu disimpan misalnya dengan nama index.php

 <html>  
<head>
<title>Contoh Embedded CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<h1>Judul dengan font 15px</h1>
<p>In adalah paragraf pertama</p>
<p>In adalah paragraf kedua</p>
</body>
</html>

Pada contoh diatas kita menggunakan CSS yang sama daricontoh sebelumnya, hanya saja kali ini kita memisahkan kode-kode css didalam fle tersediri, yang kita beri nama style.css.

Kemudian pada bagian head dari file index.html kita taruh link menuju file css dengan kode <link rel=”stylesheet” type=”text/css” href=”style.css”>. Hasil tampilan dari contoh ini sama dengan contoh sebelumnya,

Keuntungan dari cara ini adalah kita bisa lebih mudah mengelola CSS untuk banyak halaman secara sekaligus. Selain itu proses membuka website untuk halaman kedua dans eterusnya menjadi lebih ringan karena tidak perlu loading ulang css.

Untuk membuat file CSS dapat menggunakan aplikasi teks editor untuk pemrograman web seperti pada pembuatan script HTML dan PHP.

Lihat indeks artikel Tutorial CSS Dasar >>

Referensi :

  • //id.wikipedia.org/wiki/Cascading_Style_Sheets
  • //www.w3schools.com/css/css_intro.asp

Filed Under: CSS

Tutorial PHP OOP Part 27 : Penggunaan Method Sleep dan Wakeup pada Serialisasi Object

12 Desember 2014 By Eko Purnomo

Method __sleep() adalah salah satu magic method yang dijalankan pada saat sebelum proses serialisasi object dengan functin serialize(). Jadi function __sleep() akan dieksekusi lebih dulu dari proses serialisasi object. Function __sleep() harus mengembalikan nilai array dari semua nilai yang harus diserialisasi oleh object.

Sedangkan method __wakeup() adalah salah satu magic method juga namun dijalankan pada saat sebelum proses deserialisasi object dengan function unserialize(). Sama dengan method __sleep(), method __wakeup juga dieksekusi lebih dulu dari proses deserialisasi object.

Contoh penggunaan method __sleep() dan __wakeup() pada proses serialisasi object.

Disini kita akan mengubah script program pada tulisan sebelumnya tentang serialisasi object. Kita akan memodifikasi file classa.inc dan menambahkan method __sleep() dan __wakeup() didalam class A sebagai berikut :

 <?php  
class A {
public $text;

public function tampilkan() {
echo $this->text;
}

public function __construct ($x) {
$this->text = $x;
}

public function __sleep() {
echo "Teks ini adalah hasil perintah method __sleep()</br>";
return array('text');
}

public function __wakeup() {
echo "Teks ini adalah hasil perintah method __wakeup()</br>";
}
}
?>

Dan berikut ini contoh tampilan saat proses serialisasi dengan menjalankan page1.php

Dan ini tampilan saat proses deserialisasi dengan menjalankan page2.php

Referensi :

  • //php.net/manual/en/language.oop5.magic.php

Filed Under: PHP

Tutorial PHP OOP Part 26 : Serialisasi Object

11 Desember 2014 By Eko Purnomo

serialisasi object php oop

Serialisasi object adalah sebuah proses mengubah object menjadi byte stream yang di representasikan dalam sebuah string. Proses serialisasi object digunakan untuk menyimpan suatu object kedalam file atau memori dalam komputer atau untuk keperluan transmisi object. Kebalikan dari proses serialisasi adalah proses deserialisasi.

Untuk melakukan proses serialisasi dalam PHP digunakan fungsi serialize() dan untuk melakukan proses deserialisasi digunakan fungsi unserialize(). Fungsi serialize mengembalikan nilai string yang berisi representasi dari nilai sebuah object yang dapat disimpan dalam PHP. Sedangkan fungsi unserialize() digunakan untuk membuat ulang object dari string yang dibuat oleh fungsi serialize().

Fungsi serialize() hanya menyimpan object beserta nilai dari variabel object saat dijalankan. Fungsi serialize() tidak menyimpan method hanya nama class.

Berikut ini contoh program menggunakan serialize() dan unserialize()

1. Buat sebuah sebuah class dengan nama A berikut ini, lalu simpan dalam file “classa.inc”

 <?php  
class A {
public $text;

public function tampilkan() {
echo $this->text;
}

public function __construct ($x) {
$this->text = $x;
}
}
?>

Pada class A terdapat sebuah properti $text dan sebuah method tampilkan() serta sebuah constructor untuk menentuan nilai properti $text saat instantisasi class kedalam object.

2. Buat sebuah program untuk men-serialisasi object lalu simpan dengan nama page1.php

 <?php  
if (isset($_POST['Enter']))
{
if(!empty($_POST['text']))
{
include("classa.inc");

$a = new A($_POST['text']);
$s = serialize($a);

// menyimpan variabel $s disuatu tempat yang bisa ditemukan oleh page2.php
if(file_put_contents('store', $s))
{
echo "Proses Serialisasi Berhasil, Silahkan buka <a href='page2.php'>Page 2</a> Untuk melihatnya";
}
}
else echo "Teks belum diisi, proses serialisasi dibatalkan!.<br/><a href='page1.php'>Reload page</a>";
}
else
echo '
<h1>Masukkan text untuk menguji proses serialisasi</h1>
<form action="" method="POST">
<input type="text" name="text"><br/>
<input type="submit" name ="Enter" value="Enter">&nbsp;<i>Klik Untuk Serialize Object dari Class A</i>
</form>
';
?>

Pada program diatas kita membuat sebuah form dengan input text untuk memasukkan nilai dan sebuah tombol submit unruk mengeksekusi proses serialisasi object.

Ada tiga tampilan pada program ini, yaitu saat kondisi awal akan tampil form input lalu saat dijalankan form akan disembunyikan dan sebagai gantinya akan tampil pesan bahwa proses serialisasi berhasil. Yang ketiga jika teks kosong pesan akan berubah menjadi peringatan bahwa teks kosong dan proses serialisasi dibatalkan.

JIka proses serialisasi berhasil kita bisa membuka file page2.php melalui link untuk melihat hasil serialisasi melalui proses unserialize.

3. Buat sebuah program untuk men-unserialize lalu simpan dengan nama page2.php

 <?php  
// dibutuhkan untuk proses deserialisasi object
include("classa.inc");

$s = file_get_contents('store');
$a = unserialize($s);

// menampilkan data dengan method tampilkan()
echo "Data yang disimpan pada proses serialisasi dari Page 1 adalah :<br/>";
echo "<h1> ";
echo $a->tampilkan();
echo "</h1><br/>";
echo "<a href='page1.php'>Kembali ke Page 1</a>";

?>

pada program diatas kita mengambil hasil proses serialisasi dari file page1.php dengan fungsi unserialize() lalu menginstantisasi menjadi object dan menampilkan nilainya dengan method tampilkan().

4. Pastikan ketiga file dalam folder yang sama lalu jalankan file page1.php pada browser, kemudian isi dengan teks sembarang lalu klik Enter.

tampilan proses serialisasi

5. Jika benar akan tampil pesan berikut ini :

       Proses Serialisasi Berhasil, Silahkan buka Page 2 Untuk melihatnya

6. klik link Page 2 dan akan tampil hasil serialisasi dan unserialisasi dari teks yang kita masukkan tadi :

tampilan proses unserialisasi

Referensi :

  • //php.net/manual/en/language.oop5.serialization.php
  • //id.wikipedia.org/wiki/Serialisasi

Filed Under: PHP

Tutorial PHP OOP Part 25 : Memahami konsep Polymorphism

9 Desember 2014 By Eko Purnomo

konsep-polymorphism

Polymorphism adalah fitur dari PHP OOP yang berarti pedoman untuk berubah bentuk, sebagaimana asal katanya yaitu poly yang berarti banyak, morph yang berarti bentuk dan isme yang berarti aliran atau pedoman. Barangkali fitur ini mirip dengan perilaku berubah warna kulit pada bunglon. Atau bisa juga mirip dengan perubahan wujud dari robot transformer.

Polymorphism dalam pemrograman PHP berorientasi object

Dalam PHP OOP, fitur ini dipakai untuk menggambarkan perilaku sebuah properti atau method yang bisa berubah-ubah tergantung dari bagaimana dipanggilnya, lalu siapa dan dimana yang memanggilnya. Konsep polymorphism tampak pada penggunaan abstract class dan interface, yaitu bagaimana sebuah kerangka di-implementasikan oleh class-class yang berbeda.

Polymorphism dengan Implementasi Interface

Contoh konsep polymorphism dapat digambarkan melalui sebuah Interface Hewan yang diimplementasi oleh class Burung, kambing dan Ayam. Pada Interface ditaruh beberapa perilaku seperti makan, bergerak dan beranak.

Pada class Burung, bergerak dengan berjalan atau terbang, sedang pada Kambing dan Ayam bergerak dengan berjalan saja. Semikian juga dengan perilaku makan, misalnya Burung makan biji-bijian, Ayam makan bekatul dan kambing makan Rumput.

Dalam hal ini terlihat bahwa method Makan bisa berubah bentuk tergantung dari siapa yang mengimplementasinya. Demikian juga kita bisa menerapkan hal yang sama bagi method-method yang lain yang merupakan perilaku dari masing-masing object hasil instantisasi dari class nama-nama hewan tadi.

Berikut ini contoh polymorphism pada Interface :

 <?php    
Interface Hewan {
public function Makan();
public function Bergerak();
public function Beranak();
}

class Burung Implements Hewan {
public function Makan() {
return "Burung makan biji-bijian<br/>";
}

public function Bergerak() {
return "Burung bergerak dengan berjalan, terbang dan melompat<br/>";
}

public function Beranak() {
return "Burung beranak dengan bertelur<br/>";
}
}

class Kambing Implements Hewan {
public function Makan() {
return "Kambing makan rumput<br/>";
}

public function Bergerak() {
return "Kambing bergerak dengan berjalan dan berlari<br/>";
}

public function Beranak() {
return "Kambing beranak dengan melahirkan<br/>";
}
}

$burung = new Burung;
$kambing = new Kambing;

echo "<b>Perilaku Burung : </b><br/>";
echo $burung->Makan();
echo $burung->Bergerak();
echo $burung->Beranak();

echo "<br/>";
echo "<b>Perilaku Kambing : </b><br/>";
echo $kambing->Makan();
echo $kambing->Bergerak();
echo $kambing->Beranak();
?>

Jika program diatas dijalankan akan tampil :

Perilaku Burung : 
Burung makan biji-bijian
Burung bergerak dengan berjalan, terbang dan melompat
Burung beranak dengan bertelur

Perilaku Kambing :
Kambing makan rumput
Kambing bergerak dengan berjalan dan berlari
Kambing beranak dengan melahirkan

Dengan polymorphisn maka beberapa object yang sama dapat diimplementasikan melalui method yang baku dan terstruktur sehingga mempermudah saat proses pemrograman.

Polymorphism dengan class abstract

Selain melalui interface, konsep polymorphism juga bisa dilihat pada penerapan class abstract. Namun tentunya penerapan polymorphism disini tidak seluas dan sefleksibel ketika menggunakan Interface. Untuk lebih jelas bisa dilihat pada tulisan tentang Interface dan Class Abstrak.

Berikut ini contoh polymorphism pada Hewan tadi jika dibuat dengan class abstrak :

 <?php    
abstract class Hewan {
abstract public function Makan();
abstract public function Bergerak();
abstract public function Beranak();
}

class Burung extends Hewan {
public function Makan() {
return "Burung makan biji-bijian<br/>";
}

public function Bergerak() {
return "Burung bergerak dengan berjalan, terbang dan melompat<br/>";
}

public function Beranak() {
return "Burung beranak dengan bertelur<br/>";
}
}

class Kambing extends Hewan {
public function Makan() {
return "Kambing makan rumput<br/>";
}

public function Bergerak() {
return "Kambing bergerak dengan berjalan dan berlari<br/>";
}

public function Beranak() {
return "Kambing beranak dengan melahirkan<br/>";
}
}

$burung = new Burung;
$kambing = new Kambing;

echo "<b>Perilaku Burung : </b><br/>";
echo $burung->Makan();
echo $burung->Bergerak();
echo $burung->Beranak();

echo "<br/>";
echo "<b>Perilaku Kambing : </b><br/>";
echo $kambing->Makan();
echo $kambing->Bergerak();
echo $kambing->Beranak();
?>

Referensi :

  • //en.wikipedia.org/wiki/Polymorphism_in_object-oriented_programming
  • //jaskokoyn.com/2013/06/11/polymorphism/

Filed Under: PHP

Tutorial PHP OOP Part 24 : Menjalankan Method Chaining

8 Desember 2014 By Eko Purnomo

menggunakan method chainng

Dalam PHP OOP kita bisa menjalankan beberapa method secara berurutan dalam satu perintah. Fitur ini dinamakan Method Chaining atau Rangkaian Method. Dengan fitur ini kita bisa membuat suatu urutan proses menjadi lebih nyata melalui urutan proses yang tertata pada rangkaian method. Selain itu penulisan kode program juga lebih simpel dan jelas.

Kita bisa menjalankan method chaining pada object dengan cara menghubungkan antar method menggunakan tanda “->”. Namun ada syarat yang harus dipenuhi agar sebuah method biosa dipasangkan dalam rangkaian method chaining, yaitu yaita harus meletakkan keyword return $this dibagian paling bawah method, jika tidak akan menghasilkan error.

Perhatikan contoh penggunaan method chaining berikut ini :

 <?php    

class Pekerja
{
protected $tenaga=2000;
public $nama;

public function __construct($x)
{
$this->nama = $x;
echo "Tenaga ".$x." sekarang = ".$this->tenaga."<br/>";
}

public function Bekerja()
{
$this->tenaga -= 250;
echo $this->nama . " sedang bekerja. Tenaga sekarang: " . $this->tenaga . "<br/>";
return $this;
}

public function Istirahat()
{
$this->tenaga += 100;
echo $this->nama . " sedang beristirahat. Tenaga Sekarang: " . $this->tenaga . "<br/>";
return $this;
}
}

$bejo = new Pekerja( 'Bejo' );
$bejo->Bekerja()->Istirahat()->Bekerja(); //method chaining

?>

Jika dijalankan, maka program diats akan menghasilkan :

Tenaga Bejo sekarang = 2000
Bejo sedang bekerja. Tenaga sekarang: 1750
Bejo sedang beristirahat. Tenaga Sekarang: 1850
Bejo sedang bekerja. Tenaga sekarang: 1600

Penjelasan program :

Pada class Pekerja kita mempunyai method Bekerja() dan Istirahat(). Setiap bekerja method Bekerja() akan mengurangi tenaga sebesar 250 dan setiap istirahat, tenaga akan bertambah sebesar 100. Fungsi method chaining ditunjukkan pada perintah :

           $bejo->Bekerja()->Istirahat()->Bekerja(); 

Artinya kita menjalankan method Bekerja() dan method Istirahat() secara berantai dan dijalankan sekaligus pada satu perintah.

Note :
Yang perlu diperhatikan adalah penggunaan perintah return $this pada akhir method Bekerja() dan method Istirahat(). Ini yang memungkinkan sebuah method dipasangkan secara berantai.

Jika perintah return $this kita hilangkan akan muncul error berikut ini :

          Fatal error: Call to a member function Istirahat() on a non-object

Hal ini terjadi karena method Bekerja() tidak mengembalikan object yang bisa menjalankan method berikutnya.

Referensi :

  • //en.wikipedia.org/wiki/Method_chaining#PHP
  • //jaskokoyn.com/2013/06/11/chain-methods/

Filed Under: PHP

Tutorial PHP OOP Part 23 : Apa itu Late Static Binding ?

8 Desember 2014 By Eko Purnomo

late static binding

Pada PHP 5.3.0, PHP mengimplementasikan fitur yang disebut dengan “Late Static Binding”. Fitur ini digunakan untuk mereference sebuah class dalam konteks pewarisan static. Lebih tepatnya, fitur Late Static Binding bekerja dengan menyimpan nama class pada akhir “non-forwarding call”.

Pada dasarnya ini bermula pada kondisi bahwa keyword self tidak mengijinkan aturan pewarisan (inheritance). Self akan diresolve didalam class dimana dia dipakai. Artinya jika kita menggunakan method yang berada pada parent class dan memanggilnya dari child class, self tidak akan mereference child seperti yang kita inginkan.

Agar lebih jelas perhatikan contoh berikut ini :

 <?php  
class A {
public static function who() {
echo __CLASS__;
}
public static function test() {
self::who();
}
}

class B extends A {
public static function who() {
echo __CLASS__;
}
}

B::test();
?>

JIka contoh diatas dijalankan akan menampilkan A bukan B, meskipun yang memanggil adalah class B. Hal ini terjadi karena nilai dari method static who() diikat oleh keyword self, jadi tidak bisa diwariskan kepada class B sebagai class anak.

Untuk mengatasi hal itu kita menggunakan fitur Late static binding dengan keyword static seperti contoh berikut ini :

 <?php  
class A {
public static function who() {
echo __CLASS__;
}
public static function test() {
static::who(); // penggunaan late static binding
}
}

class B extends A {
public static function who() {
echo __CLASS__;
}
}

B::test();
?>

Berbeda dengan contoh sebelumnya, jika program yang ini dijalankan akan menampilkan B berasal dari nama class yang memanggil static who() pada static method test().

Late static binding memperkenalkan cara baru dalam penggunaan keyword static sekaligus mengatasi keterbatasan dari penggunaan sebuah nilai static. Misalnya saat kita menggunakan static, kita harus merepresentasikan nama class dimana static itu pertama kali dibuat. Dengan ini maka nilai static akan terikat (bind) pada runtime class.

Referensi :

  • //php.net/manual/en/language.oop5.late-static-bindings.php

Filed Under: PHP

  • « Previous Page
  • 1
  • …
  • 41
  • 42
  • 43
  • 44
  • 45
  • …
  • 60
  • Next Page »

Kategori

  • Android
  • Blogging
  • CSS
  • Desain
  • Elektronika
  • HTML
  • Internet
  • Javascript
  • Komputer
  • Mikrokontroler
  • PHP
  • Website

Pos-pos Terbaru

  • Rangkaian Adaptor 12 Volt 3 Ampere
  • 10 Aplikasi Transportasi Online Terbaru 2018
  • 3 Cara Screenshot di Laptop Windows
  • Rangkaian Adaptor 12V 35Ampere
  • Komunitas Desainer Kampung Jepara
  • Solder Yang Bagus dan Berkualitas
  • Cara Melewatkan Parameter ke dalam Fungsi pada Bahasa C
  • Parameter Dalam Bahasa C: Formal dan Aktual
  • Prototipe Fungsi dalam Bahasa C
  • Cara Menggunakan Fungsi dalam Bahasa C
  • Home
  • Privacy
  • Disclaimer
  • Kontak

Copyright © 2024 · Nulis-ilmu.com