PEMODELAN PERANGKAT
LUNAK
NAMA : PRIO
SETIADI
NO : 22
KELAS : XI
RPL 1
EMAIL : priosetiadi999@gmail.com
BLOG : priosetiadi999.blogspot.com
SMK MUHAMMADIYAH 04
BOYOLALI
TAHUN PELAJARAN 2015/2016
Cascading Style Sheets
|
Cascading
Style Sheets
|
|
|
Ekstensi berkas
|
.css
|
|
text/css
|
|
|
Dikembangkan oleh
|
|
|
Jenis format
|
|
Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan
beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.
CSS bukan merupakan bahasa pemograman.
Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat
mengatur beberapa style, misalnya heading, subbab, bodytext,
footer, images, dan style lainnya untuk dapat digunakan
bersama-sama dalam beberapa berkas (file).[1] Pada umumnya CSS
dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.[1]
CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar
teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.[1] CSS adalah bahasa
style sheet yang digunakan
untuk mengatur tampilan dokumen.[2] Dengan adanya CSS
memungkinkan kita untuk menampilkan halaman yang sama dengan format yang
berbeda.[2]
Sejarah CSS
Nama CSS didapat dari fakta bahwa
setiap deklarasi style yang berbeda dapat diletakkan secara berurutan,
yang kemudian membentuk hubungan ayah-anak (parent-child) pada setiap style.[3]
CSS sendiri merupakan sebuah teknologi
internet yang
direkomendasikan oleh World Wide Web
Consortium atau W3C pada tahun
1996.[2]
Setelah CSS distandarisasikan, Internet Explorer
dan Netscape melepas browser terbaru mereka yang
telah sesuai atau paling tidak hampir mendekati dengan standar CSS.[3]
Versi
Untuk saat ini terdapat tiga versi CSS,
yaitu CSS1, CSS2, dan CSS3.
CSS1 dikembangkan berpusat pada pemformatan dokumen HTML, CSS2 dikembangkan
untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di
printer, sedangkan CSS3 adalah versi terbaru dari CSS yang mampu melakukan
banyak hal dalam desain website. CSS2 mendukung penentuan posisi konten,
downloadable, huruf font, tampilan pada tabel /table layout dan media tipe
untuk printer. Kehadiran versi CSS yang kedua diharapkan lebih baik dari versi
pertama dan kedua.
CSS3 juga dapat melakukan
animasi pada halaman website, diantaranya animasi warna hingga animasi 3D.
Dengan CSS3 desainer lebih dimudahkan dalam hal kompatibilitas websitenya pada
smartphone dengan dukungan fitur baru yakni media query. Selain itu, banyak
fitur baru pada CSS3 seperti: multiple background, border-radius, drop-shadow,
border-image, CSS Math, dan CSS Object Model.[4]
Penulisan
h1 {
color: #0789de;
}
Bagian pertama sebelum tanda '{}'
dinamakan selector, sedangkan yang diapit oleh '{}' disebut declaration
yang terdiri dari dua unsur, yaitu property dan value.[5]Selector
dalam pernyataan di atas adalah h1, sedangkan color adalah property,
dan #0789de adalah value.[5]
Selain itu ada tiga metode penulisan
CSS atribut, yaitu :[6]
Inline
Style Sheet
CSS didefinisikan langsung pada tag
HTML yang bersangkutan. Cara penulisannya cukup dengan menambahkan atribut style="..."
dalam tag HTML tersebut.[6]
Style hanya akan berlaku pada tag yang bersangkutan, dan tidak akan memengaruhi
tag HTML yang lain.[6]
<html>
<head>
<title>Contoh Bentuk Inline </title>
</head>
<body bgcolor="#FFFFFF">
<p id="cth1">
Ini adalah contoh tag P tanpadiformat menggunakan CSS </p>
<p id="cth2" style="font-size:20pt">
Tag P ini diformat dengan besar font 20 point </p>
<p id="cth3" style="font-size:14pt;
color:red">
Tag P ini diformat dengan besar font 14 point, dan menggunakan
warna merah </p>
</body>
</html>
Embedded
Style Sheet
CSS didefinisikan terlebih dahulu dalam
tag <style> ... </style> di atas tag <body>.[6]
Pada pendefinisian ini disebutkan atribut-atribut CSS yang akan digunakan untuk
tag-tag HTML, yang selanjutnya dapat digunakan oleh tag HTML yang bersangkutan.[6]
Contoh penggunaan CSS dengan metode Embedded
Style Sheet :[6]
<html>
<head>
<title>Contoh Bentuk Embedded</title>
</head>
<style>
body {background:#0000FF; color:#FFFF00; margin-left:0.5in}
h1 {font-size:18pt; color:#FF0000}
p {font-size:12pt; font-family:arial; text-indent:0.5in}
</style>
<body>
<h1 id="cth1">Judul ini berukuran 18 dengan
warna merah!</h1>
<p id="cth2">Tag p ini di format dengan besar
font 12 point dengan tipe font Arial dan mempunyai identasi 0.5 inch </p>
<p id="cth3">Yang perlu diperhatikan juga bahwa
body disini telah diformat dengan margin kiri 0.5 inch dan warna background
biru</p>
</body>
</html>
Sifat CSS
Ada dua sifat CSS yaitu internal dan
eksternal.[7]
Jika internal yang dipilih, maka skrip itu dimasukkan
secara langsung ke halaman website yang akan didesain.[7]
Kalau halaman web yang lain akan didesain dengan model yang sama, maka skrip
CSS itu harus dimasukkan lagi ke dalam halaman web yang lain itu.[7]
Sifat yang kedua adalah eksternal di
mana skrip CSS dipisahkan dan diletakkan dalam berkas khusus.[7]
Nanti, cukup gunakan semacam tautan menuju berkas CSS itu jika halaman web yang
didesain akan dibuat seperti model yang ada di skrip tersebut.[7]
Fakta Menggunakan CSS
Fakta Menggunakan CSS
diantaranya : [8]
- Telah didukung oleh kebanyakan browser versi terbaru, tetapi tidak didukung oleh browser-browser lama.
- Lebih fleksibel dalam penempatan posisi layout. Dalam layouting CSS, kita mengenal Z-Index untuk menempatkan objek dalam posisi yang sama.
- Menjaga HTML dalam penggunaan tag yang minimal, hal ini berpengaruh terhadap ukuran berkas dan kecepatan pengunduhan.
- Dapat menampilkan konten utama terlebih dahulu, sementara gambar dapat ditampilkan sesudahnya.
- Penerjemahan CSS setiap browser berbeda, tata letak akan berubah jika dilihat di berbagai browser
- CSS adalah layouting "Masa Depan" dengan penggabungan bersama XHTML.
Contoh
Berkas CSS
<html>
<head>
<style type="text/css">
body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
</style>
</head>
<body>
<h1>CSS example!</h1>
<p>This is a paragraph.</p>
</body>
</html>
Definisi jQuery
jQuery adalah library JavaScript multiplatform yang dirancang untuk memudahkan penyusunan client-side script pada file HTML.Digunakan oleh 60 persen dari 10000 situs web paling banyak dikunjungi di dunia, jQuery adalah library JavaScript yang paling populer saat ini. jQuery merupakan sebuah perangkat lunak bebas sumber terbuka yang berada di bawah lisensi MIT.
Sintaks jQuery dirancang sedemikian rupa untuk memudahkan pengembang website dalam menavigasi dokumen, menyeleksi elemen-elemen DOM, menerapkan animasi, mengaplikasikan events, serta membangun aplikasi AJAX.
jQuery juga memampukan developer menciptakan berbagai plugin berbasis library JavaScript. Dengan plugin-plugin tersebut, pengembang situs web mampu menyusun sejumlah abstraksi untuk interaksi dan animasi sederhana, juga beberapa efek yang cukup kompleks dan berbagai widget yang dapat dikonfigurasikan.
Karakter library JavaScript yang modular mendukung pengembangan laman web dinamis dengan berbagai fitur dan aplikasi berbasis web (web app).
Fitur-fitur inti jQuery – meliputi penyeleksian, traversal, dan manipulasi elemen-elemen DOM – dimampukan oleh sebuah selector engine (dinamai Sizzle mulai versi 1.3), telah mewujudkan suatu gaya pemrograman baru yang memadukan antara algoritma dan struktur data DOM. Gaya ini telah mempengaruhi arsitektur dari framework JavaScript lainnya seperti YUI v3 dan Dojo, dan di kemudian menstimulasi pengembangan Selectors API standar.
Microsoft dan Nokia membundel jQuery pada platform mereka. Microsoft memasukkannya dalam Visual Studio untuk digunakan dalam framework ASP.NET AJAX dan ASP.NET MVC, sedangkan Nokia mengintegrasikannya dalam platform pengembangan widget Web Run-Time. jQuery juga mulai dipakai pada MediaWiki sejak versi 1.16.
Situs resmi jQuery beralamat di jquery.com. Pengembangannya dikelola oleh jQuery Foundation yang berada di jquery.org. Library ini bisa diunduh di laman jquery.com/download, atau diterapkan melalui sejumlah CDN termasuk Google jQuery CDN.
Membedah jQuery
jQuery, pada intinya, adalah sebuah library yang berfungsi untuk memanipulasi DOM. DOM merupakan representasi struktural dari seluruh elemen pada sebuah laman web.Keberadaan jQuery menjadikan kerja pencarian, penyeleksian, dan manipulasi elemen-elemen DOM menjadi simpel dan mudah. Sebagai contoh, jQuery bisa dipergunakan untuk menemukan sebuah elemen dalam dokumen yang memiliki properti tertentu (misalnya: elemen dengan tag `h1`), kemudian mengubah satu atau beberapa atributnya (misalnya: warna, visibilitas), atau menjadikan elemen tersebut responsif terhadap suatu event (misalnya: klik mouse).
Selain penyeleksian dan manipulasi DOM dasar, jQuery menyajikan sebuah paradigma baru pada penanganan event oleh JavaScript. Penugasan event dan pendefinisian fungsi event callback dapat dilakukan dengan satu langkah dalam satu lokasi di dalam kode.
jQuery juga dikembangkan untuk mendayagunakan berbagai fungsionalitas JavaScript yang paling sering dipakai (misalnya: fade in atau fade out ketika menentukan visibilitas elemen, juga bermacam animasi yang dimunculkan dengan memanipulasi properti-properti CSS).
Keuntungan dari pemanfaatan jQuery antara lain:
- Memisahkan JavaScript dan HTML → Tanpa menggunakan atribut-atribut HTML untuk memanggil fungsi Javascript dalam penanganan event, jQuery bisa dipergunakan untuk menangani event dengan script JS saja.
- Singkat dan Jelas → jQuery mengutamakan penulisan kode yang singkat dan jelas melalui berbagi fitur seperti fungsi-fungsi yang dapat dirangkaikan (chain-able) dan nama-nama fungsi yang pendek.
- Mengatasi masalah kompatibilitas antar-browser → JavaScript engine pada berbagai browser memiliki perbedaan satu sama lain, sehingga script yang berjalan pada suatu browser bisa gagal pada browser lainnya. jQuery mengatasi segala inkonsistensi antar-browser tersebut dan menyajikan antarmuka yang konsisten bekerja pada semua browser.
- Ekstensibel → jQuery menjadikan pengembangan framework sangat simpel. Berbagai event, elemen, dan metode baru dapat dengan mudah ditambahkan dan digunakan ulang sebagai plugin.
Fitur-fitur jQuery
jQuery memiliki fitur-fitur sebagai berikut:- Penyeleksian elemen-elemen DOM menggunakan selector engine Sizzle. Sizzle merupakan perangkat lunak multiplatform sumber terbuka yang berawal sebagai proyek sampingan jQuery.
- Manipulasi DOM berdasarkan selektor CSS yang memanfaatkan nama-nama dan atribut elemen, misalnya id dan class, sebagai kriteria seleksi simpul-simpul DOM.
- Events
- Efek dan animasi
- AJAX
- Obyek-obyek deferred and promose untuk mengontrol pemrosesan asinkron
- Penguraian JSON
- Ekstensibilitas melalui plugin
- Sejumlah utilitas, misalnya: informasi agen pengguna (user agent), deteksi fitur perangkat
- Metode-metode kompatibilitas yang tersedia secara bawaan pada browser-browser modern, namun membutuhkan pencadangan pada browser yang lebih tua, misalnya `inArray()` dan `each`
- Dukungan multi-browser
Browser yang Didukung jQuery
Baik versi 1.x maupun 2.x dari jQuery, keduanya mendukung “current-1 versions” (artinya versi stable terkini dari sebuah browser dan satu versi yang mendahuluinya) untuk Firefox, Google Chrome, Safari, dan Opera.Versi 1.x juga mendukung IE 6 atau diatasnya. Sedangkan versi 2.x tidak lagi mendukung Internet Explorer 6 sampai 8 (yang mewakili kurang dari 28% dari seluruh browser yang digunakan) dan hanya mendukung IE 9 dan selanjutnya.
Penggunaan jQuery
Menautkan library
Library jQuery adalah sebuah file JavaScript yang memuat seluruh fungsi-fungsi umum DOM, event, efek, dan Ajax. File ini bisa ditautkan dalam sebuah laman web ke salinan pada server lokal atau pada salinan yang disajikan melalui server publik (CDN) antara lain:Untuk menautkan file jQuery pada server lokal, gunakan kode berikut:
<script src="jquery.js"></script>
Untuk menggunakan CDN, sisipkan kode berikut:<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
Gaya Penggunaan
jQuery memiliki dua gaya penggunaan:- Via fungsi $ → adalah factory method untuk obyek jQuery. Fungsi-fungsi semacam ini, kerap disebut sebagai commands (perintah), dapat dirangkaikan (chainable) sebab masing-masing menyajikan obyek.
- Via fungsi $.-prefiks → fungsi-fungsi utilitas yang tidak dijalankan secara langsung pada obyek.
Sebagai contoh, $(“div.namaclass”) akan menghasilkan obyek dengan tipe “div” dan class “namaclass”. Simpul ini dapat dimanipulasi dengan menyambungkan satu atau beberapa fungsi jQuery di belakangnya.
Mode No-Conflict
jQuery juga memuat mode .noConflict() yang melepaskan kontrol dari $. Fitur ini sangat berguna jika jQuery digunakan bersama dengan library lainnya yang juga memakai penanda $.Pada mode no-conflict, kita bisa menggunakan jQuery sebagai pengganti dari $ tanpa kehilangan fungsionalitasnya.
Asalamuallaikum, lama
gak buka blog ni sob. Kali ini saya akan berbagi ilmu tentang bagaimana cara
menjalankan PHP di hp android sobat. Pasti kalian penasaran apakah PHP bisa
dijalankan di android atau tidak, karena selama ini PHP di kenal sebagai bahasa
pemrograman web yang hanya di jalankan di PC. Namun setelah saya cari-cari di
berbagai penjuru akirnya saya mendapatkan software yang dapat menjalankan PHP
di android. Jangan heran android dapat menjalankan PHP sama halnya dengan PC,
dikarenakan sistem operasi android merupakan keturunan dari GNU linux yang
terkenal sebagai sistem operasi open source. Walaupun sistem kerjanya tak
seluas PC setidaknya bisa membantu kita dalam proses belajar PHP. Ok mari kita
langsung ke TKP, hal-hal yang kita butuhkan adalah server (MySQL & PhP
MyAdmin), Text Editor, dan tentunya hp android hehehe.
1. Server
Bagian inilah yang sangat penting, karena server berguna untuk mengeksekusi sintaks-sintaks PHP yang telah kita buat. Banyak server PHP yang bisa dijalankan di android, namun hanya beberapa yang menyediakan satu paket dengan MySQL dan PhP MyAdmin. Sebagai contoh KsWeb Server, AndroPHP, PAW Server dll. Untuk kali ini kita akan memakai KsWeb Server, kelebihan server ini adalah mudah di jalankan dan server ini sudah satu paket dengan MySQL & PhP MyAdmin jadi kita tak perlu repot lagi. KsWeb Server bisa kita unduh secara gratis di Google atau Play Store. Untuk v
ersi gratis server ini memiliki kekurangan yaitu dalam menjalankan PHP harus conect dengan data internet. Tenang kawan kali ini saya sudah siapkan software gratisnya, silahkan download di link berikut KsWeb Server.
Bagian inilah yang sangat penting, karena server berguna untuk mengeksekusi sintaks-sintaks PHP yang telah kita buat. Banyak server PHP yang bisa dijalankan di android, namun hanya beberapa yang menyediakan satu paket dengan MySQL dan PhP MyAdmin. Sebagai contoh KsWeb Server, AndroPHP, PAW Server dll. Untuk kali ini kita akan memakai KsWeb Server, kelebihan server ini adalah mudah di jalankan dan server ini sudah satu paket dengan MySQL & PhP MyAdmin jadi kita tak perlu repot lagi. KsWeb Server bisa kita unduh secara gratis di Google atau Play Store. Untuk v
ersi gratis server ini memiliki kekurangan yaitu dalam menjalankan PHP harus conect dengan data internet. Tenang kawan kali ini saya sudah siapkan software gratisnya, silahkan download di link berikut KsWeb Server.
2. Text Editor
Text Editor berfungsi sebagai media penulisan sintaks PHP sob, banyak pilihan untuk software ini. Ada Jota Text Editor, Android Text Editor, TED, Notes dll. Terserah kalian mau pakai yang mana semuanya free software (gratis) dan bisa di download di Play Store, kalo saya pakai Jota Text Editor yang mudah di jalankan dan tampilannya simpel.
Text Editor berfungsi sebagai media penulisan sintaks PHP sob, banyak pilihan untuk software ini. Ada Jota Text Editor, Android Text Editor, TED, Notes dll. Terserah kalian mau pakai yang mana semuanya free software (gratis) dan bisa di download di Play Store, kalo saya pakai Jota Text Editor yang mudah di jalankan dan tampilannya simpel.
Ok mari kita lakukan penginstallan
software KsWeb Server nya, ikuti langkah-langkah berikut :
Install KsWeb yang
sudah di download dan tunggu sampai selesai, setelah selesa maka akan muncul
apk nya di tampilan menu android agan seperti gambar berikut :
setelah terinstall
buka KsWeb nya,
nah maka akan
muncul tampilan seperti di atas. Santai dulu kawan proses belum selesai,
selanjutnya Klik atau pilih menu MySQL ADMIN di menu bar bawah
muncul tampilan
seperti di atas. Kemudian pilih PHPMYADMIN dan tunggu sampai proses download
selesai, pilih juga menu ADMINER tunggu sampai proses download selesai. Setelah
semua proses download selesai KsWeb Server siap di gunakan gan, seperti berikut
contohnya :
Nih gan tampilannya
kita tinggal buka alamat server (http://localhost:8080/) di web browser kalian.
Ini penampakan yang
bisa kita lihat jika kita buka alamat tersebut
Cara masuk ke
PHPMYADMIN yaitu dengan memilih menu MySQL ADMIN di menu bar bawah
pilih PHPMYADMIN,
setelah itu masukkan username dan password, jika belum di ubah username
"admin" & password di kosongkan saja.
Seperti di atas
tampilan awal PhPMyAdmin nya, setelah memasukkan username & password nya
klik tombol "kirim". Tunggu sampai masuk ke beranda PHP MYADMIN nya
nah tampilan beranda
nya udah muncul, gak jauh beda sama yang di PC kan.
Sekarang mari kita
coba membuat dokumen PHP dan cara memanggil dokumen tersebut.
Pertama kita buka
KsWeb nya
setelah KsWeb terbuka
tekan saja tombol Home android kalian, kemudian kita menuju ke File Manager dan
masuk ke folder "htdocs". folder "htdocs" merupakan folder
default dari KsWeb, jadi semua file PHP harus di simpan di folder tersebut agar
dapat di kenali server dan bisa kita jalankan di web browser.
Setelah masuk di
folder "htdocs" buat lah file dengan extensi .php seperti contoh di
atas (aji.php). Kemudian kita buka file tersebut dengan text editor yang
sebelumnya sudah kalian install
sebagai contoh saya
gunakan Jota Text Editor, silahkan kalian tuliskan beberapa sintaks PHP di
editor tersebut dan pilih menu "save". Seperti contoh berikut :
Setelah sintaks
selesai di tulis dan di save kita buka browser di android kalian, kemudian
ketikkan alamat server nya (http://localhost:8080/), jika kalian ingin
memanggil file PHP yang sudah di simpan tadi kita tinggal menyertakan nama file
tersebut di alamat server tadi dan di letakkan di belakang backslash terakhir
(http://localhost:8080/aji.php).
Seperti contoh di
atas, dan hasilnya seperti di atas. Bagaimana menurut anda mudah kan, silahkan
kalian coba dan pelajari. Ohh iya kawan karena ini postingan pertama ku, saya
minta kritik dan saran kalian tentang kekurangan di postingan dan tampilan Blog
saya ini. Jika di rasa postingan di Blog aku ini bermanfaat silahkan kalian
share ke teman-teman yang lain, berbagi ilmu itu indah. Cukup sekian sampai
bertemu di postingan berikutnya.
~Post by Syeh Aji Ana~
Tidak ada komentar:
Posting Komentar