css margin

Margin dalam CSS(Cascading Style Sheets) merupakan property css yang digunakan untuk membuat jarak/spasi pada semua sisi dari border terluar suatu element, sisi yang dimaksud disini yaitu sisi atas(margin-top), sisi kanan(margin-right), sisi bawah(margin-bottom) dan sisi kiri (margin-left), dengan kata lain margin adalah property yang digunakan untuk memberikan jarak antara border suatu element dengan dengan element lain.

Daftar Isi

• Property Margin Side
• Contoh Coding Margin
• Shorthand Margin
• Contoh Coding Shorthand Margin
• Shorthand Margin 3 Value
• Contoh Coding Shorthand Margin 3 Value
• Shorthand Margin 2 Value
• Contoh Coding Shorthand Margin 2 Value
• Shorthand Margin 1 Value
• Margin Collapse
• Contoh Coding Margin Collapse
• Link Urutan Belajar CSS

Property Margin Side

Seperti disebutkan sebelumnya, untuk pembuatan margin per sisi dapat menggunakan property margin dengan empat sisi dari suatu element, yaitu: margin-top, margin-right, margin-bottom dan margin-left, sedangkan untuk value/nilainya adalah : 

• auto: menentukan margin berdasarkan perhitungan browser
• ukuran panjang dari margin dalam satuan : pt, px
• persen (%) : menentukan margin berdasarkan persentase
• inherit : menentukan margin sesuai dengan nilai dari margin elemen induknya (parent element

Nilai margin juga diperbolehkan diisi dengan nilai minus (negative).

Contoh Coding Margin

Jika coding tersebut dijalankan browser maka akan menghasilkan tampilan seperti ini:

 

Shorthand Margin

Untuk menyingkat penulisan margin ke dalam 1 baris code, penulisan margin ke empat sisi tersebut bisa disingkat menjadi 1 bari code dengan urutannya adalah margin-top, margin-right, margin-bottom, kemudian margin-left, atau bisa dikatakan penulisan urutan margin tersebut searah dengan putran jarum jam yang diawali dari margin atas, kemudian kanan, bawah dan terakhir adalah margin kiri.
Contoh penulisan shorthand margin

margin : 100px 50px 100px 50px;

akan menghasilkan margin-top ; 100px, margin-right: 50px, margin-bottom : 100px dan margin-left : 50px;

Contoh Coding Shorthand Margin

Jika coding tersebut dijalankan browser maka akan menghasilkan tampilan seperti ini:

Shorthand Margin 3 Value

misalnya shorthand margin ditulis hanya dengan 3 value contohnya seperti ini:
margin : 100px 200px 300px;
akan menghasilnya margin-top 100px, margin-right dan margin-left adalah 200px dan terakhir margin-bottom adalah 300px.

Contoh Coding Shorthand Margin 3 Value

Jika coding di atas dijalankan pada browser maka akan menghasilkan tampilan seperti ini :

Shorthand Margin 2 Value

misalnya shorthand margin ditulis hanya dengan 2 value contohnya seperti ini:
margin : 100px 200px;
akan menghasilnya margin-top 100px dan margin-bottom = 100px, sedangkan margin-left dan margin-right adalah 200px;

Contoh Coding Shorthand Margin 2 Value

Jika coding di atas dijalankan pada browser maka akan menghasilkan tampilan seperti ini :

Shorthand Margin 1 Value

sedangkan jika shorthand margin hanya mempunya 1 value saja, akan menghasilkan semua sisi margin yang sama  di semua sisinya (margin-top, margin-right, margin-bottom dan margin-left), misalnya :
margin 50px;
akan menghasilkan :
margin-top : 50px; margin-right:50px; margin-bottom:50px dan margin-left:50px.

Margin Collapse

Margin/jarak 2 elemen dapat menyusut/menciut/collapse, margin collapse hanya berlaku pada margin top dan margin bottom, semisal element pertama yang berada di bagian atas, mempunya margin bottom 100px sedangkan element kedua yang berada di bawahnya mempunya margin top sebesar 100px, maka margin yang berlaku untuk kedua element tersebut adalah margin yang paling besar nilainya di antara margin top dan margin bottom tersebut, sehinnga jarak yang berlaku antara kedua element tersebut adalah 100px, bukan penjumlahan antara keduanya, beda halnya dengan margin left dan margin right, dalam hal ini tidak ada margin collapse antara kedua margin left dan right.

Contoh Coding Margin Collapse

jika coding di atas dijalankan pada browser maka akan menampilkan halaman seperti gambar di bawah ini :

Link Urutan Belajar CSS

Berikut adalah link urutan belajar CSS :

1. CSS Color
2. CSS Background
3. CSS Border 
4. CSS Margin

Demikian dokumentasi belajar css bagian margin, semoga bermanfaat untuk semua, sampai jumpa pada dokumentasi belajar css topik yang lainnya.

upgrade moodle

Upgrade Versi Moodle

Instalasi awal moodle menggunakan aplikasi bawaan cpanel yaitu Softaculous, kemudian untuk proses upgrade versi moodle penulis melakukan ugrade versi melalui cpanel pada aplikasi Softaculous, ketika proses upgrade pastikan checklist Backup diklik untuk jaga-jaga jika proses upgrade mengalami kegagalan. Silakan klik pada versi terbaru yang ditampilkan apda laman Softaculous dan tunggu beberapa menit, tunggu sampai ada notifikasi dari Softaculous bahwa proses upgrage selesai dilakukan.

Setelah muncul notifikasi proses upgrade berhasil, ada pesan dari softaculous pada halaman yang sama untuk melakukan penghapusan folder install pada home directory instalasi moodle, silakan hapus folder tersebut melewati File Manager yang ada di cpanel. Kemudian akses moodle seperti biasa, dan akan muncul warning seperti gambar di bawah ini:

Silakan klik continue untuk melanjutkan, jika settingan database dan library php yang ada di cpanel ada yang kurang sesuai dengan requirement moodle ini maka akan muncul error atau warning seperti ini :

Perbaiki dulu error dan warning tersebut seperti pada tulisan di bawah ini untuk menghilangkan error dan warning tersebut.

Error Setting Database

Wrong $CFG->dbtype: you need to change it in your config.php file, from 'mysql' to 'mariadb'.

Update file config.php pada installation folder moodle baris $CFG->dbtype = 'mysqli' menjadi $CFG->dbtype = 'mariadb'

Warning php_setting

PHP opcode caching improves performance and lowers memory requirements, OPcache extension is recommended and fully supported.

buka cpanel kemudian cari modul PHP dengan mengetikkan PHP pada text pencarian, kemudian klik menu/icon PHP, dan dari opcache dan klik untuk meng-enable/mengkatifkan extension OPcache.

Warning Unicode Mysql

The current setup of MySQL or MariaDB is using 'utf8'. This character set does not support four byte characters which include some emoji. Trying to use these characters will result in an error when updating a record, and any information being sent to the database will be lost. Please consider changing your settings to 'utf8mb4'. See the documentation for full details.

Warning yang lain terkait character set pada database mariadb/mysql yg di set utf8, dengan alasan character set tersebut tidak mendukung untuk 4 byte character yang digunakan untuk emoji, sehingga character set database perlu diubah menjadi utf8mb4, cara merubahnya adalah dengan menjalankan perintah alter database.
Perintah untuk merubah character set dapat dilakukan melalui query browser yang terkoneksi dengan database moodle/ menggunakan phpmyadmin pada cpanel, perintah untuk merubah character set adalah

alter table nama_database_moodel character set = 'utf8mb4';

Setelah semua error dan warning diperbaiki, silakan klik tombol continue, pada halaman daftar error dan warning tersebut

Setelah menekan tombol continue akan muncul halaman informasi seperti ini :

silakan cek sampai halaman bawah sampai muncul tombol "Update Moodle database now" seperti tampilan di bawah ini:

tunggu beberapa saat sampai muncul tampilan seperti gambar di bawah ini:

Setelah tombol continue diklik, maka akan muncul halaman untuk menyimpanan data setting moodle, silakan klik tombol "Save changes", seperti pada tampilan ini

Sampai disini upgrade moodle sudah berhasil, untuk memastikan versi dari moodle, silakan cek pada menu Site Administrasion > Notification

CSS Border

 Boder Width

Property border-width digunakan untuk menentukan tebalnya boder pada suatu element html, valuenya ada 4 sisi, yaitu border-width untuk top, right, bottom dan left, tetapi jika valuenya cuma ada 1, maka nilai border-width untuk ke empat sisi tersebut adalah sama.
Contoh code :
border-width 2px;
border-width 2px 4px 2px 4px;

Border Style

digunakan untuk memberikan style pada tampilan border, property yang digunakan adalah border-style diikuti oleh opsi value : dotted, double, groove, solid.
Contoh code:
border-style:solid;

Border Color

digunakan untuk memberikan warna terhadap border yang digunakan, dengan property border-color dan valuenya adalah warna yang telah dipelajari sebelumnya css color
Contoh code:
border-color: green;

Border Side

Jika suatu kondisi kita menginginkan tampilan sisi border yang berbeda dengan sisi lainnya, kita gunakan border side dengan property border-top-style, border-right-style, border-bottom-style dan border-left-style, dengan opsi value yang sama dengan opsi border style.

Border Rounded

Border dengan sudut yang melengkung dapat dibuat dengan property border-radius, valuenya diisi dengan besarnya rounded yang diinginkan dapat menggunakan satuan px atau satuan yg lainnya, contoh codenya adalah:
border-radius: 20px;

Border Shorthand

Seperti property css background, border yang mempunyai shorthand, border juga mempunya shorthand dengan urutan sebagai berikut:

• border-width
• border-style
• border color

Contoh coding untuk semua property di atas dapat dilihat pada contoh file html dan css di bawah ini:

Jika file html tersebut dijalankan di browser, maka tampilannya akan seperti gambar di bawah ini :

Demikian dokumentasi belajar css untuk property border.