Cara Memasang CSS kedalam HTML

Assalamu'alaikum Warahmatullahi Wabarakatuh..
     Pada artikel kali ini Skripku Dotkom akan membahas bagaimana cara memasang script CSS ke dalam sebuah dokumen HTML. Untuk memasang CSS kedalam sebuah dokumen HTML terdapat 3 cara. Yaitu: External CSS, Internal CSS, dan Inline CSS. Ketiga cara ini memiliki fungsi dan tujuan yang sama, hanya saja berbeda dalam cara penggunaannya. Sebelum ke pokok pembahasan, ada beberapa hal yang harus diketahui yaitu syntax dasar CSS (akan digunakan di CSS External dan Internal). Syntax dasar-nya adalah:

selektor {properti: nilai;}
  • Selektor: Ini digunakan untuk memilih elemen yang akan kita modifikasi. Bisa berupa tag HTML (div, a, table, h1, dll) atau bisa juga dengan Selektor Id dan Class.
    Baca juga: Mengenal Selector Id dan Class.
  • Properti: Ini digunakan untuk memilih apa yang ingin dimodifikasi dari elemen yang sudah dipilih tadi. Misalkan kita ingin memberikan background pada suatu elemen, maka propertinya diisi dengan background-color.
  • Nilai: Merupakan nilai dari properti tadi. Jenis nilainya pun menyesuaikan dengan properti yang sudah dipilih, misalkan pada properti background-color kita bisa mengisi nilainya dengan menyebutkan langsung nama warnanya (contoh: red, green, black, dll), menggunakan heksadesimal contoh: #2CB5F8, ataupun rgb() contoh: rgb(44,181,248).
Contohnya seperti ini:

table {margin-left: 5px; background-color: #2CB5F8;}
     Penjelasan: Syntax diatas menunjukan bahwa pada elemen table (semua yang menggunakan tag table tanpa terkecuali) akan di-set margin sebelah kirinya selebar 5 piksel dan warna latar belakangnya berwarna #2CB5F8 (heksadesimal). Jika ingin mencari warna menggunakan heksadesimal, anda bisa memanfaatkan tool Color Picker yang disediakan SkripKu dengan meng-klik link ini.
1. External CSS
      External CSS merupakan cara penulisan dimana script CSS terpisah dengan dokumen HTML-nya. Cara ini merupakan cara yang paling sering saya gunakan terutama untuk proyek yang lumayan besar, karena kita tinggal buat satu file berekstensi .css dan menambahkan tag ini di setiap dokumen HTML-nya:

    <link rel="stylesheet" type="text/css" href="nama_file.css">
Untuk script CSS-nya kita bisa simpan di file yang berekstensi .css tadi. Ingat! file ini hanya berisi script CSS dan tidak boleh berisi tag HTML satu-pun.
     Untuk lebih jelasnya kita coba membuat web sederhana menggunakan metode External CSS ini:
1.) Buka Text Editor, kemudian masukan script dibawah:

<html>
<head>
    <title>Belajar CSS - Skripku Dotkom</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p class="judul tengah"><a href="http://www.skripku.com/">Skripku Dotkom</a></p>
<p class="slogan tengah">Your Ngoding Stuff</p>
</body>
</html>
Baca Juga: Mengenal Selector Id dan Class di CSS
2.) Save dokumen diatas dengan nama eksternal.html atau apa aja lah bebas.
3.) Kemudian selanjutnya kita buat file CSS-nya. Karena diatas sudah kita definisikan bahwa style untuk halaman tersebut berada di style.css, maka selanjutnya kita harus buat file bernama style.css, isinya kurang lebih seperti berikut (silahkan modifikasi sesuka hati):

.judul {color: blue; font-size: 50px; font-family: forte;}
.judul a {text-decoration: none;}
.slogan {color: green; font-family: verdana;}
.tengah {text-align: center;}
4.) Save file diatas di folder yang sama dengan file eksternal.html tadi. Jika file eksternal.html tadi dibuka di browser maka akan menampilkan tampilan seperti ini:

2. Internal CSS
     Cara yang kedua adalah Internal CSS, yaiu dengan meletakan script CSS-nya diantara <style>...</style> yang disisipkan diantara tag <head> ataupun tag <body>, tapi saya sarankan untuk menyimpannya diantara tag <head> saja. Dengan cara ini kita hanya bisa mengatur style untuk satu halaman saja, dengan kata lain apabila kita mempunyai 100 halaman web maka kita harus mengaturnya satu per satu sebanayak 100 kali.
Contoh penggunaan-nya seperti ini:

<html>
<head>
    <title>Belajar CSS - Skripku Dotkom</title>
    <style>
    #kotak {width: 200px;height: 200px;background-color: Turquoise;float: left;}
    #lingkaran {width: 200px;height: 200px;border-radius: 50%;background-color: green;float: left;margin-left: 5px;}
    </style>
</head>
<body>
<div id="kotak">Ini kotak, disamping saya ada lingkaran.</div>
<div id="lingkaran"></div>
</div>
</body>
</html>
Maka akan menghasilkan:
3. Inline CSS
     Cara ini digunakan apabila kita hanya ingin memberikan style pada beberapa bagian tertentu di dokumen html kita. Cara ini sangat tidak efisien jika digunakan untuk proyek besar-besaran karena kita harus memberikan style pada tiap bagian di halaman web kita. Untuk menggunakan cara ini, kita bisa menyimpan script css-nya di atribut style="properti1: nilai1;dan-seterusnyaaa". Biar gak bingung yuk lihat contoh dibawah:

<html>
<head>
    <title>Belajar CSS - Skripku Dotkom</title>
</head>
<body>
<p style="font-family:forte;font-size:40px;text-align:center;color:blue;">Skripku Dotkom</p>
<p style="font-family:arial;font-size:20px;text-align:center;">Your Ngoding Stuff</p>
<p style="text-align:center;">www.skripku.com</p>
</body>
</html>
Maka hasilnya adalah:


Sekian tutorial kali ini, semoga bermanfaat,
Jika ada yang ingin ditanyakan jangan sungkan-sungkan untuk bertanya via komentar,
Wassalamu'alaikum Warahmatullahi Wabarakatuh..

Cara Menampilkan Nilai dari Array dengan print_r()

Assalamu'alaikum Warahmatullahi Wabarakatuh..
     Pada pembahasan kali ini kita akan membahas tentang salah satu fungsi yang cukup populer di PHP yaitu fungsi print_r(). Fungsi print_r() ini bisa kita gunakan untuk mengecek nilai dari sebuah array. Contoh sederhananya seperti ini:
<?php
$sekolahku=array("sd"=>"MI Al-Khoeriyyah", "smp"=>"SMPN 3 Cianjur", "smk"=>"SMK Muhammadiyah Cianjur");
// <pre> adalah tag html agar hasilnya lebih rapih
echo "<pre>";
print_r($sekolahku);
echo "</pre>";
?>
Maka akan menghasilkan output:
     Demikian juga untuk Array Multi Dimensi, print_r() akan mencetak nilai dari array tersebut sampai ke akar-akarnya. Contoh:
<?php
$kab_cianjur=array(
    'Kecamatan Cianjur'=>array(
        'Kelurahan Muka'=>array(
            'RW 01'=>array('Kp. Cimenteng', 'Kp. Baru Pawenang', 'Kp. Gayam'),
            'RW 02'=>array('Kp. Margaluyu', 'Kp. Neglasari'),
            ),
        'Kelurahan Bojong Herang'=>array(
            'RW 06'=>array('Kp. I dont know', 'Kp. Apah', 'Kp. Bla bla'),
            'RW 99'=>array('Kp. hehe', 'Kp. wkwkwk', 'Kp. ckckck'),
            ),
        ),
    'Kecamatan Karangtengah'=>array(
        'Desa Sukataris'=>array(
            'RW 124'=>array('Kp. Kopo Wetan', 'Kp. Kopo Kidul', 'Kp. Baros'),
            'RW 1987'=>array('Kp. Situ', 'Kp. Lembur Situ'),
            ),
        'Desa Sindanglaka'=>array(
            'RW 999'=>array('Kp. Padabeunghar', 'Kp. Mega Mendung')
            ),
        )
    );
echo '<pre>';
print_r($kab_cianjur);
echo '</pre>';
?>
Maka akan menghasilkan output:
Array
(
    [Kecamatan Cianjur] => Array
        (
            [Kelurahan Muka] => Array
                (
                    [RW 01] => Array
                        (
                            [0] => Kp. Cimenteng
                            [1] => Kp. Baru Pawenang
                            [2] => Kp. Gayam
                        )

                    [RW 02] => Array
                        (
                            [0] => Kp. Margaluyu
                            [1] => Kp. Neglasari
                        )

                )

            [Kelurahan Bojong Herang] => Array
                (
                    [RW 06] => Array
                        (
                            [0] => Kp. I dont know
                            [1] => Kp. Apah
                            [2] => Kp. Bla bla
                        )

                    [RW 99] => Array
                        (
                            [0] => Kp. hehe
                            [1] => Kp. wkwkwk
                            [2] => Kp. ckckck
                        )

                )

        )

    [Kecamatan Karangtengah] => Array
        (
            [Desa Sukataris] => Array
                (
                    [RW 124] => Array
                        (
                            [0] => Kp. Kopo Wetan
                            [1] => Kp. Kopo Kidul
                            [2] => Kp. Baros
                        )

                    [RW 1987] => Array
                        (
                            [0] => Kp. Situ
                            [1] => Kp. Lembur Situ
                        )

                )

            [Desa Sindanglaka] => Array
                (
                    [RW 999] => Array
                        (
                            [0] => Kp. Padabeunghar
                            [1] => Kp. Mega Mendung
                        )

                )

        )

)
     Oh iya, print_r() ini juga bisa digunakan untuk menyebutkan properti yang ada didalam sebuah objek. Contohnya seperti ini:

<?php
// Pembuatan Class Siswa
class Siswa
{
    public $nama;
    public $jurusan;
    public $alamat;
}
// Instansiasi Class Siswa
$azis=new Siswa();
// Menginput nilai dari semua properti
$azis->nama="Azis Hapidin";
$azis->jurusan="Rekayasa Perangkat Lunak";
$azis->alamat="Jl. Dr. Muwardi (By Pass) Cianjur";
// Menampilkan Properti dari Obyek $azis
echo "<pre>";
print_r($azis);
echo "</pre>";
?>
     Jika dari kawan-kawan ada yang belum tahu apa itu objek di PHP, silahkan searching-searching di google dengan kata kunci "pemrograman berorientasi objek di php". Jika script diatas dijalankan maka akan menghasilkan output:

Siswa Object
(
    [nama] => Azis Hapidin
    [jurusan] => Rekayasa Perangkat Lunak
    [alamat] => Jl. Dr. Muwardi (By Pass) Cianjur
)
Sekian dari saya,
Semoga bermanfaat,
Jika anda merasa artikel ini bermanfaat, please share artikel ini dengan klik tombol share dibawah.
Wassalamu'alaikum Warahmatullahi Wabarakatuh..

Mengenal Array Multi Dimensi di PHP

Assalamu'alaikum Warahmatullahi Wabarakatuh..
     Setelah beberapa waktu yang lalu SkripKu Dotkom pernah membahas Array Satu Dimensi, nah tutorial kali ini kita akan membahas kelanjutannya yaitu "Array Multi Dimensi". Jadi buat kawan-kawan yang tiba-tiba langsung nyasar kesini, dipersilahkan terlebih dahulu untuk membaca Mengenal Array di PHP.
Singkatnya sih array multi dimensi adalah "Array yang berisi Array" dan tidak menutup kemungkinan untuk menjadi "Array didalam Array yang berisi Array (atau bahkan lebih banyak lagi)". Sebelum ke syntax, yuk kita cermati dulu contoh ilustrasi Array Multidimensi berikut:
Index ==> "nama_index1" "nama_index2" "nama_index_seterusnya"
Nilai ==>
Index ==> 0 1 2
Nilai ==> Nilai1 Nilai2 Nilai3
Index ==> 0 1 2
Nilai ==> Nilai1 Nilai2 Nilai3
Array Seterusnya..
     Array Multi Dimensi ini bisa berisi array numerik ataupun array asosiatif (Sudah dibahas di artikel Array Satu Dimensi), atau dicampur juga boleh seperti contoh yang saya sediakan dibawah. Array Multi Dimensi ini nantinya akan sangat sering kita gunakan terutama untuk pengambilan data dari database, hanya saja banyak yang enggak nyadar kalau dirinya sedang menggunakan Array Multi Dimensi (termasuk saya). Untuk pemanggilan nilanya, kita bisa memanggil $nama_variabel['index_nya']['index_nya']. Biar gak bingung yuk lihat contoh dibawah:
Pada contoh dibawah kita akan membuat variabel berisi daftar anak dari Pa Azis dan Pa Hilman.
     Pada contoh diatas, kita membuat variabel $daftar_anak dimana dimensi pertama berisi Array Asosiatif yang index-nya adalah "Azis" dan "Hilman". Nilai dari "Azis" berisi array numerik sehingga index-nya diberikan secara otomatis oleh sistem dimulai dari 0, sedangkan nilai dari "Hilman" berisi Array Asosiatif sehingga untuk index-nya ditentukan secara manual yaitu "sulung", "tengah", dan "bungsu" sehingga untuk menampilkan semua datanya kurang lebih sebagai berikut:
Maka hasilnya adalah sebagai berikut:
     Satu contoh lagi, pada contoh dibawah kita akan mengkonversi matriks berikut kedalam PHP menggunakan Array Multi Dimensi:
     Biar lebih mirip matriks sungguhan di pelajaran Em Te Ka disini semua Array akan menggunakan Array Numerik, kalau yang belum ngerti tentang matriks akan sedikit kebingungan mempelajari ini. Tapi tenang aja, ini hanya soal baris dan kolom yang sebenarnya tidak sulit, hanya saja agak membingungkan hehe. Script-nya kira-kira seperti ini:
     Abaikan saja atribut class="bla bla bla", itu hanya modifikasi saya aja hehe. Fokus aja ke script PHP-nya (tapi kalau keukeuh ingin tahu, anda bisa baca di Mengenal Selector Id dan Class di CSS ~ SkripKu). Pada contoh diatas penggunaan echo $matriks[0][0] berarti kita akan memanggil dan menampilkan nilai dari $matriks pada baris 1 kolom 1, dan echo $matriks[0][1] berarti kita memanggil dan menampilkan nilai dari $matriks baris 1 kolom 2. Jika semua berjalan lancar, maka script diatas akan menghasilkan output seperti ini:
Sampai disini sudah mengerti kan?
Jika ada yang kurang dimengerti atau masih rada bingung jangan ragu untuk bertanya di kolom komentar dibawah ini..
Sepertinya sekian yang dapat saya sampaikan pada artikel kali ini,
Mohon maaf jika banyak kekurangan atau ada kesalahan pengetikan,
Semoga bermanfaat,
Wassalamu'alaikum Warahmatullahi Wabarakatuh..

Mengenal Selector Id dan Class di CSS

Assalamu'alaikum Warahmatullahi Wabarakatuh..
     Pada tutorial kali ini Skripku Dotkom akan membahas tentang dasar CSS yang sangat penting untuk diketahui dan dipelajari yaitu terkait "Id dan Class".
     Pada dasarnya, untuk memberikan efek kepada sebuah objek dengan CSS itu cukup dengan menyebutkan tag HTML nya di selektor CSS. Contohnya seperti ini:

<html>
<head>
    <title>Skripku Dotkom - Belajar CSS</title>
    <style type="text/css">
    div {border: 1px solid black; background-color: Turquoise;width: 150px;height: 150px;}
    p {color: red;}
    </style>
</head>
<body>
    <div><p>Ini adalah sebuah persegi berukuran 150px</p></div>
</body>
</html>

     Namun, masalah yang sering kita hadapi adalah "bagaimana jika kita punya banyak tag yang sama dan ingin memberikan style yang berbeda-beda pada masing-masing tag tersebut?", nah untuk itulah diadakan Id dan Class di CSS. Apa sih perbedaan antara Id dan Class? Simak terus artikel ini yukk..

  • Id Selector
  •      Id Selector digunakan untuk menentukan style bagian unik (baca: nggak ada duanya) di HTML, misalkan bagian header, bagian artikel, bagian sidebar, atau bagian footer. Id Selector hanya bisa digunakan sekali dalam sebuah dokumen HTML, jika lebih dari 1 maka yang akan di proses hanya yang pertama saja. Sebetulnya masih bisa sih, tapi jika memang akan digunakan lebih dari 1 kali lebih baik kita menggunakan Class Selector saja. 
         Untuk menggunakan Id Selector ini, kita bisa menggunakan atribut id="nama_id" pada tag html-nya dan menggunakan #nama_id di CSS nya. Contoh-nya seperti ini:
    
    <html>
    <head>
        <title>Skripku Dotkom - Penggunaan Id Selector</title>
        <style type="text/css">
        #kotak_pertama {border: 1px solid black;border-radius: 5px;height: 100px;width: 100px;background-color: Turquoise;padding: 5px;float: left;}
        #persegi_panjang {border: 1px solid black;border-radius: 5px;height: 100px;width: 300px;background-color: Cyan;padding: 5px;float: left;margin-left: 10px;}
        </style>
    </head>
    <body>
        <div id="kotak_pertama">Ini Persegi berukuran 250px.</div>
        <div id="persegi_panjang">Ini adalah sebuah persegi panjang.</div>
    </body>
    </html>
    
    
    Maka hasilnya adalah:
    Ini Persegi berukuran 250px.
    Ini adalah sebuah persegi panjang.






  • Class Selector
  •      Class Selector ini adalah selector yang paling sering saya gunakan. Berbeda dengan Id Selector tadi, Class Selector ini bisa digunakan untuk mengatur banyak tag atau elemen didalam suatu web dan sebuah tag atau elemen bisa memiliki Class lebih dari 1. Contoh:
    
    <h1 class="warnamerah posisitengah">Nama Saya Azis</h1>
    
    
         Contoh diatas menunjukan bahwa tag tersebut memiliki 2 Class yaitu: Class warnamerah dan Class posisitengah. 
         Untuk menggunakan Class Selector ini caranya hampir sama dengan Id Selector, bedanya kita harus menggunakan atribut class="nama_class" pada tag html-nya dan menggunakan .nama_class di CSS-nya. Contoh implemementasi-nya seperti ini:
    
    <html>
    <head>
        <title>SkripKu Dotkom - Penggunaan Class Selector</title>
        <style type="text/css">
        .merah {color: red;}
        .garisbawah {text-decoration: underline;}
        .dicoret {text-decoration: line-through;}
        </style>
    </head>
    <body>
    <p class="merah">Text ini berwarna merah</p>
    <p class="garisbawah">Text ini bergaris bawah</p>
    <p class="merah garisbawah">Text ini berwarna merah dan bergaris bawah</p>
    <p class="dicoret">Text ini dicoret.</p>
    <p class="merah dicoret">Text ini berwarna merah dan dicoret</p>
    </body>
    </html>
    
    
    Maka hasilnya adalah:
    Text ini berwarna merah
    Text ini bergaris bawah
    Text ini berwarna merah dan bergaris bawah
    Text ini dicoret.
    Text ini berwarna merah dan dicoret

     Selain kedua Selector diatas, sebetulnya masih banyak Selector yang ada di CSS diantaranya: Attribute Selector, Pseudo Selector, dll. Tapi karena kebetulan saya juga belum mempelajarinya lebih dalam, jadi Insya Allah akan dibahas lain kali lagi. Lagian, sepengalaman saya kedua Selector ini lah yang paling umum dan paling sering digunakan.
Sekian dari saya,
Kurang dan lebihnya mohon dimaafkan,
Wassalamu'alaikum Warahmatullahi Wabarakatuh..

HTML

More »

PHP

More »