A PHP Error was encountered

Severity: 8192

Message: array_key_exists(): Using array_key_exists() on objects is deprecated. Use isset() or property_exists() instead

Filename: helpers/template_helper.php

Line Number: 1042

Backtrace:

File: /home/u8613374/public_html/dasar/dev/application/helpers/template_helper.php
Line: 1042
Function: _error_handler

File: /home/u8613374/public_html/dasar/templates/frontend/belajar/header.php
Line: 100
Function: head

File: /home/u8613374/public_html/dasar/dev/application/libraries/Site.php
Line: 69
Function: view

File: /home/u8613374/public_html/dasar/dev/application/helpers/template_helper.php
Line: 13
Function: view

File: /home/u8613374/public_html/dasar/templates/frontend/belajar/artikel.php
Line: 1
Function: get_template

File: /home/u8613374/public_html/dasar/dev/application/libraries/Site.php
Line: 69
Function: view

File: /home/u8613374/public_html/dasar/dev/application/controllers/Artikel.php
Line: 37
Function: view

File: /home/u8613374/public_html/dasar/index.php
Line: 335
Function: require_once

A PHP Error was encountered

Severity: 8192

Message: array_key_exists(): Using array_key_exists() on objects is deprecated. Use isset() or property_exists() instead

Filename: helpers/template_helper.php

Line Number: 1049

Backtrace:

File: /home/u8613374/public_html/dasar/dev/application/helpers/template_helper.php
Line: 1049
Function: _error_handler

File: /home/u8613374/public_html/dasar/templates/frontend/belajar/header.php
Line: 100
Function: head

File: /home/u8613374/public_html/dasar/dev/application/libraries/Site.php
Line: 69
Function: view

File: /home/u8613374/public_html/dasar/dev/application/helpers/template_helper.php
Line: 13
Function: view

File: /home/u8613374/public_html/dasar/templates/frontend/belajar/artikel.php
Line: 1
Function: get_template

File: /home/u8613374/public_html/dasar/dev/application/libraries/Site.php
Line: 69
Function: view

File: /home/u8613374/public_html/dasar/dev/application/controllers/Artikel.php
Line: 37
Function: view

File: /home/u8613374/public_html/dasar/index.php
Line: 335
Function: require_once

Rabu, 19-Januari-2022

A PHP Error was encountered

Severity: Warning

Message: ini_set(): A session is active. You cannot change the session module's ini settings at this time

Filename: Session/Session.php

Line Number: 282

Backtrace:

File: /home/u8613374/public_html/dasar/dev/application/core/MY_Controller.php
Line: 12
Function: library

File: /home/u8613374/public_html/dasar/dev/application/core/frontend_controller.php
Line: 7
Function: __construct

File: /home/u8613374/public_html/dasar/dev/application/controllers/Artikel.php
Line: 7
Function: __construct

File: /home/u8613374/public_html/dasar/index.php
Line: 335
Function: require_once

A PHP Error was encountered

Severity: Warning

Message: session_set_cookie_params(): Cannot change session cookie parameters when session is active

Filename: Session/Session.php

Line Number: 294

Backtrace:

File: /home/u8613374/public_html/dasar/dev/application/core/MY_Controller.php
Line: 12
Function: library

File: /home/u8613374/public_html/dasar/dev/application/core/frontend_controller.php
Line: 7
Function: __construct

File: /home/u8613374/public_html/dasar/dev/application/controllers/Artikel.php
Line: 7
Function: __construct

File: /home/u8613374/public_html/dasar/index.php
Line: 335
Function: require_once

A PHP Error was encountered

Severity: Warning

Message: ini_set(): A session is active. You cannot change the session module's ini settings at this time

Filename: Session/Session.php

Line Number: 304

Backtrace:

File: /home/u8613374/public_html/dasar/dev/application/core/MY_Controller.php
Line: 12
Function: library

File: /home/u8613374/public_html/dasar/dev/application/core/frontend_controller.php
Line: 7
Function: __construct

File: /home/u8613374/public_html/dasar/dev/application/controllers/Artikel.php
Line: 7
Function: __construct

File: /home/u8613374/public_html/dasar/index.php
Line: 335
Function: require_once

A PHP Error was encountered

Severity: Warning

Message: ini_set(): A session is active. You cannot change the session module's ini settings at this time

Filename: Session/Session.php

Line Number: 375

Backtrace:

File: /home/u8613374/public_html/dasar/dev/application/core/MY_Controller.php
Line: 12
Function: library

File: /home/u8613374/public_html/dasar/dev/application/core/frontend_controller.php
Line: 7
Function: __construct

File: /home/u8613374/public_html/dasar/dev/application/controllers/Artikel.php
Line: 7
Function: __construct

File: /home/u8613374/public_html/dasar/index.php
Line: 335
Function: require_once

A PHP Error was encountered

Severity: Warning

Message: session_set_save_handler(): Cannot change save handler when session is active

Filename: Session/Session.php

Line Number: 110

Backtrace:

File: /home/u8613374/public_html/dasar/dev/application/core/MY_Controller.php
Line: 12
Function: library

File: /home/u8613374/public_html/dasar/dev/application/core/frontend_controller.php
Line: 7
Function: __construct

File: /home/u8613374/public_html/dasar/dev/application/controllers/Artikel.php
Line: 7
Function: __construct

File: /home/u8613374/public_html/dasar/index.php
Line: 335
Function: require_once


Selector CSS

0 BYAdmin

Pada bagian sebelumnya kita telah belajar mengenai prioritas dalam CSS yang mana telah kita singgung-singgung perihal pemanggilan selector baik yang spesifik maupun tidak. Nah disini kita akan belajar lebih dalam apa itu Selector dalam CSS.

Selector itu sebetulnya pola pemanggilan CSS untuk nantinya diberikan style-nya kepada elemen apa. Nah adapun selector CSS yang sering digunakan dalam dunia web design ada 5 macam, diantaranya Universal Selector, Element Type Selector, Class Selector, ID Selector, Attribute Selector. Ada banyak macam selector tapi paling tidak 5 ini sudah cukup membantu Anda dalam pekerjaan sehari-hari menggunakan CSS.

Universal CSS

CSS hanya memiliki satu universal Selector, yakni di tandai dengan tanda * . Selector ini berfungsi untuk memberikan style kepada semua tag/elemen yang ada dalam halaman HTML tersebut. Contoh teknis sederhananya adalah sebagai berikut :


<html>
    <head>
    <title>Judul Halaman</title>
    <style type="text/css">
        *{            
            color: red;
            text-decoration: underline;
        }         
    </style>
    </head>
    <body>
    	<h1>Heading berwarna merah  memiliki garis bawah</h1>
        <p>Paragraf ini teks nya berwarna merah dan memiliki garis bawah</p>
        <a href="">Link juga warna merah</ha>
    </body>
</html>

Kurang lebih hasilnya akan seperti ini :

See the Pen Universal Selector by Ilmuwebsite (@ilmuwebsite) on CodePen.

 

Element Type Selector / Tag Selector

Element Type atau Tag Selector merupakan selector yang menggunakan element atau tag untuk diberi stylenya. Jadi penggunaannya adalah mendefinisikan atau memanggil element type / tag selectornya lalu diberikan property nya dan style nya.

Contoh penggunaan dari element type selector atau tag selector adalah seperti ini :


<html>
    <head>
    <title>Judul Halaman</title>
    <style type="text/css">
        h1{
        	color: green;
        }   

        p{
        	color: blue;
        	font-weight: bold;
        }      
    </style>
    </head>
    <body>
        <h1>Heading berwarna hijau </h1>
        <p>Paragraf ini teks nya berwarna biru dan cetak tebal</p>
    </body>
</html>

Kurang lebih hasilnya nanti akan menjadi seperti ini :

See the Pen Element Type Selector by Ilmuwebsite (@ilmuwebsite) on CodePen.

 

Jadi yang harus dilakukan di bagian CSS nya adalah memanggil elemen type / tag nya yakni h1 dan p setelah itu di beri style. Mudah ya untuk element type / tag selector ini.

Class Selector

Class Selector dalam web design termasuk selector yang paling populer digunakan selain dari ID Selector yang mana baru dibagian selanjutnya kita bahas. Class selector ini secara teknis memberikan style kepada element yang memiliki atribut class yang isi dari class nya itu sesuai dengan yang dipanggil oleh class selector. Sederhananya untuk bisa menggunakan Class selector suatu element betul-betul harus memiliki atribut class yang sesuai dipanggil oleh class selector. Contohnya adalah seperti ini

	<html>
	    <head>
	    <title>Judul Halaman</title>
	    <style type="text/css">
	         .judul{
                color: green;
	         }

	         .sub_judul{
                color: greenlight;
	         }

	         .artikel{
                color: blue;
	         }
	    </style>
	    </head>
	    <body>
	        <h1 class="judul">Ini adalah judul artikelnya</h1>
	        <h2 class="sub_judul">Ini adalah sub judul</h2>
	        <p class="artikel">ini untuk paragraf dari artikelnya</p>
	    </body>
	</html>

Kurang lebih seperti ini hasilnya :

See the Pen Class Selector by Ilmuwebsite (@ilmuwebsite) on CodePen.

 

Untuk memanggil class selector harus menggunakan tanda . (titik) ya. Oke?

ID Selector

Selain Class Selector, ID Selector juga merupakan selector yang paling banyak digunakan dalam dunia web design. Cara menggunakan ID selector kurang lebih sama dengan class, cuma bedanya jika class itu menggunakan . (titik) , sedangkan ID selector ini menggunakan pagar #.

Untuk contohnya kurang lebih seperti ini :


<html>
    <head>
    <title>Judul Halaman</title>
    <style type="text/css">
         #judul{
            color: green;
         }
 
         #sub_judul{
            color: greenlight;
         }
 
         #artikel{
            color: blue;
         }
    </style>
    </head>
    <body>
        <h1 id="judul">Ini adalah judul artikelnya</h1>
        <h2 id="sub_judul">Ini adalah sub judul</h2>
        <p id="artikel">ini untuk paragraf dari artikelnya</p>
    </body>
</html>

Hasilnya :

See the Pen ID Selector by Ilmuwebsite (@ilmuwebsite) on CodePen.

 

Kurang lebih sama dengan selector hanya tanda pemanggilannya saja.

Attribute Selector

Yang terakhir dibagian selector ini ada Atribut selector. Kita akan memberikan style berdasarkan atribut dari elemen, misalnya kita akan memberikan elemen yang ada atribut name nya.

Contohnya kurang lebih seperti ini :


<html>
    <head>
    <title>Judul Halaman</title>
    <style type="text/css">
         [type]{
            background: yellow;
         }

         [type="password"]{
            border: 2px solid blue;
         }
    </style>
    </head>
    <body>
        <h1>Formulir Pendaftaran Member</h1>
        <p>silahkan isi form dibawah dengan benar</p>

        <label for="username">Username</label><input type="text" name="username" id="username" /><br />
        <label for="password">Password</label><input type="password" name="password" id="password" /><br />
        <input type="submit" value="Daftar Sekarang!" />
    </body>
</html>

Perhatikan di bagian Style CSS nya, untuk memanggil inputan dengan atribut type nya adalah text , kita mendefinisikannya seperti ini

         [type]{
             background: yellow;
         }    

Menggunakan tanda [ di akhiri dengan ]. Apabila spesifik memiliki nilai seperti password, akan menjadi seperti ini :

         [type="password"]{
            border: 2px solid blue;
         }

Kurang lebih hasilnya seperti ini :

See the Pen djwJYN by Ilmuwebsite (@ilmuwebsite) on CodePen.

 

Dalam web design Atribut Selector bisa di katakan tidak terlalu sering digunakan. Anda bisa menggunakan selector dari 2-4.

Selain dari ke 5 selector, CSS masih memiliki selector lagi yang bisa dibilang lebih canggih lagi, karena sudah mengacu kepada event, misalkan ketika kondisi mouse over, atau mouse click dan lain lain sebagainya. Namanya adalah pseudo selector. Untuk pseudo selector kita akan bahas nanti dibagian lainnya. Masih dalam pembahasan CSS.