Embedded Style Sheet (Internal)

Pemrograman Web Dinamis





Febri Tri Cahyo S.
Muharrom Ali A.
Dara Ninggar P.
Ramadhan Rizqi S.
Ardyansyah Muchsin J.
PHP
Framework
CMS
CSS
Tutup
Framework
• Framework atau bahasa indonesianya kerangka
kerja adalah sebuah software untuk
memudahkan para programmer membuat
aplikasi atau web yang isinya adalah berbagai
fungsi, plugin, dan konsep sehingga membentuk
suatu sistem tertentu.
• Dengan menggunakan framework, sebuah
aplikasi akan tersusun dan terstruktur dengan rapi.
CSS
Framework


CMS
PHP Framework
• Jika dikaitkan dengan PHP maka dapat diartikan
sebagai suatu kerangka kerja yang telah terpola dan
memudahkan pengembang web dalam pembuatan
web yang menggunakan script PHP.
• Mempermudah yang dimaksud misalnya, Dalam
membuat sebuah aplikasi web kita sering menulis script
PHP secara keseluruhan (konvensional) dan itu pun kita
ulang pada halaman yang lain.
CSS
Framework


CMS
PHP Framework
Bukankah itu begitu tidak efesien disamping berat ketika
diload ?
• Dengan PHP Framework semua bisa teratasi.
• Semuanya sudah diatur menjadi pola-pola tertentu yang
disebut dengan class.
• Pola/class inilah yang meringankan kita dalam penulisan
script dan load halaman web.
CSS
Framework


CMS
PHP Framework menggunakan metode pengembangan
berbasis MVC. MVC terdiri dari tiga bagian yaitu;
• Model
Model mewakili struktur data. Biasanya model berisi
fungsi-fungsi yang membantu kita dalam pengelolaan
database seperti memasukkan data ke database,
update data dan lain-lain.
• View
View adalah bagian yang mengatur tampilan ke user.
Bisa di katakan berupa halaman web.
CSS
Framework


CMS
PHP Framework menggunakan metode pengembangan
berbasis MVC. MVC terdiri dari tiga bagian yaitu;
• Controller
Controller merupakan bagian yang menjembatani
model dan view. Controller berisi script-script php yang
berfungsi untuk memproses suatu data dan
mengirimkannya ke halaman web.
CSS
Framework


CMS
Kelebihan Framework
• Ringan dan cepat
Framework hanya melakukan pemanggilan
pustaka/kelas yang dibutuhkan sehingga
meminimalkan resource yang diperlukan sehingga
ketika kita me-load sebuah halaman akan menjadi
ringan dan cepat.
• Mayortitas mendukung berbagai jenis database.
CSS
Framework


CMS
Kelebihan Framework
• Menggunakan metode MVC.
Seperti yang telah dijelaskan sebelumnya, dengan
metode MVC akan mempermudah kita dalam
memahami alur pemrograman karena untuk bagian
tampilan, logika dan query database telah dipecah
sedemikian rupa.
CSS
Framework


CMS
MVC
MVC merupakan suatu metode untuk memisahkan bagianbagian dari suatu web aplikasi. MVC adalah kependekan
dari Model View Controller.
CSS
Framework


CMS
Contoh Framework
CodeIgniter
CakePHP
Symfony
Zend
Akelos
CMS
CSS
Framework


•
•
•
•
•
CMS ( Content Management System )
CMS merupakan sebuah aplikasi web atau software web
yang tujuannya untuk memudahkan dalam pengelolaan
(upload,edit,menambahkan,dll) konten dalam sebuah
website/blog/aplikasi web tanpa harus dibekali
pengetahuan tentang hal-hal yang bersifat teknis tanpa
harus memiliki pengetahuan tentang bahasa
pemrograman web.
CSS
Framework


CMS
CMS dapat digunakan untuk membuat berbagai jenis
website seperti :
Website perusahaan, bisnis, organisasi atau komunitas.
Portal
Galeri foto
Aplikasi E-Commerce / Toko Online
Mengelola website pribadi / blog.
Dan lain-lain.
CMS
CSS
Framework


•
•
•
•
•
•
Keuntungan menggunakan CMS
•Konsistensi design website dapat dijaga
•Content yang dikehendaki dapat dipublikasikan tanpa pengeditan
oleh orang lain
•Menghemat biaya untuk mempekerjakan web specialist
•Notifikasi otomatis kepada pemilik website jika ada content yang
sudah kadaluarsa
•Memungkinkan kerjasama yang baik antar pengelola suatu website.
•Mengurangi kompleksitas dalam pengelolaan informasi ke website.
CSS
Framework


CMS
Fasilitas Dasar CMS
Content Authoring, Editing and Management
Workflow, Collaboration, and Security
Publishing
Standards Support
Technical specifications
CMS
CSS
Framework


•
•
•
•
•
Contoh CMS
Wordpress
Joomla
Durpal
Aura
PrestaShop
Opencart
Moodle
CMS
CSS
Framework


•
•
•
•
•
•
•
Pengertian Cascading Style Sheet
CSS (Cascading Style Sheet) adalah salah satu bahasa
desain web (style sheet language) yang mengontrol format
tampilan sebuah halaman web yang ditulis dengan
menggunakan penanda(markup laguage).
Biasanya CSS digunakan untuk mendesain sebuah
halaman HTML dan XHTML, tetapi sekarang CSS bisa
diaplikasikan untuk segala dokumenXML, termasuk SVG
dan XUL bahkan ANDROID.
CSS
Framework


CMS
CSS dibuat untuk memisahkan konten utamadengan
tampilan dokumen yang meliputi layout, warna dan font.
• CSS juga memungkinkan sebuah halaman untuk
ditampilkan dalam berbagai style dengan menggunakan
metode pembawaan yang berbeda pula, seperti onscreen, in-print, by voice, dan lain-lain.
•
CSS
Framework


CMS
Tujuan Cascading Style Sheet
Tujuan utama CSS diciptakan untuk membedakan konten
dari dokumen dan dari tampilan dokumen, dengan itu,
pembuatan ataupun pemrograman ulang web akan
lebih mudah dilakukan.
CMS
CSS
Framework


•
Fungsi Cascading Style Sheet
fungsi utama css adalah merancang, merubah,
mendisain, membentuk halaman wesite(blog juga
website). dan isi dari halaman website adalah tag-tag
html, logikanya css itu dapat merubah tag-tag html(yang
sederhana) sehingga menjadi lebih fungsional dan
menarik.
CMS
CSS
Framework


•
Inline Style Sheet
CSS didefinisikan langsung pada tag HTML yang
bersangkutan. Cara penulisannya cukup dengan
menambahkan atribut style="..." dalam tag HTML
tersebut.
Style hanya akan berlaku pada tag yang
bersangkutan, dan tidak akan memengaruhi tag
HTML yang lain.
CSS
Framework


CMS
Contoh Inline Style Sheet
CSS
Framework


CMS
Embedded Style Sheet (Internal)
CSS didefinisikan terlebih dahulu dalam tag <style>
... </style> di atas tag <body>. Pada pendefinisian
ini disebutkan atribut-atribut CSS yang akan
digunakan untuk tag-tag HTML, yang selanjutnya
dapat digunakan oleh tag HTML yang
bersangkutan.
CMS
CSS
Framework


•
Contoh Embedded Style Sheet (Internal)
<head>
<title>Internal CSS</title>
<style type="text/css">
h1 {color:blue; text-align: center;}
p {color:white; background: black; padding: 10px 10px;}
</style>
</head>
<h1>Ini Contoh Internal CSS</h1><br />
<p>Hallo! ini adalah bagian contoh penggunaan internal CSS yang
bisa anda buat sendiri dirumah!. Semoga bermanfaat ya!</p>
CSS
Framework


CMS
Embedded Style Sheet (Eksternal)
CSS didefinisikan terlebih dalam sebuah file (*.css). Pada
pendefinisian ini disebutkan atribut-atribut CSS yang akan
digunakan untuk tag-tag HTML, yang selanjutnya nama
file di panggil dengan syntax html pada file HTML.
CMS
CSS
Framework


•
Contoh Embedded Style Sheet (Eksternal)
CSS
Framework


CMS
Struktur CSS
Bagian pertama sebelum tanda '{}' dinamakan
selector, sedangkan yang diapit oleh '{}' disebut
declaration yang terdiri dari dua unsur, yaitu
property dan value.Selector dalam pernyataan di
atas adalah h1, sedangkan color adalah property,
dan blue adalah value.
CSS
Framework


CMS
Struktur CSS
Perintah CSS terdiri atas 2 komponen, yakni Selector &
Declaration.
• Selector berfungsi untuk memberi tahu browser bahwa
pada elemen mana rule CSS diterapkan.
• Selector dapat berupa elemen HTML, selector class atau
selector id.
• Declaration merupakan aturan CSS yang diterapkan,
terdiri atas property dan value.
•
CSS
Framework


CMS