Pertemuan 05, 16 Maret 2015: CSS & CSS 3

Cascading Style Sheet  (CSS) merupakan kumpulan perintah yang dibentuk dari berbagai sumber yang disusun menurut urutan tertentu sehingga mampu mengatasi konfik style. CSS yaitu salah satu bahasa pemrograman web yang mengatur komponen dalam suatu web supaya web lebih terstruktur dan lebih seragam.

CSS seperti halnya styles pada aplikasi  pengolahan kata Microsoft Word yang bisa mengatur beberapa style, misalnya subbab, heading, bodytext, footer, images, dan style lainnya untuk dapat dipakai bersama-sama dalam beberapa file. CSS biasanya digunakan untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.

CSS mampu mengatur warna body teks, ukuran gambar, ukuran border, warna mouse over, warna tabel, warna hyperlink, margin kiri/kanan/atas/bawah, spasi antar paragraf, spasi antar teks, dan parameter lainnya. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

Kegunaan CSS, antara lain :

 * Mempersingkat penulisan tag HTML : Anda tidak perlu lagi mendefinisikan setiap tag dengan property dan nilai yang sama.

* Mempercepat proses rendering atau pembacaan HTML karena tidak terdapat pengulangan tulisan.

* Mudah dan cepat dalam me-maintenance : dikarenakan file CSS dibuat secar terpisah , maka Anda tidak perlu merombak semua elemen atau property dalam HTML, cukup mengedit file CSS-nya saja.

Perbedaan CSS dan CSS3

CSS3 memberikan fitur-fitur yang lebih dibandingkan dengan CSS versi sebelumnya.tapi CSS3 juga tidak meninggalkan fitur lama dari CSS sebelumnya

Dibawah ini fitur tambahan yang ada di CSS3

Borders

border-color

border-image

border-radius

box-shadow

Backgrounds

background-origin dan background-clip

background-size

multiple backgrounds

Color

HSL colors

HSLA colors

opacity

RGBA colors

Text Effects

text-shadow

text-overflow

word-wrap

User-interface

box-sizing

resize

outline

nav-top, nav-right, nav-bottom, nav-left

Selectors

attribute selectors

Basic box model

overflow-x, overflow-y

Generated Content

content

Other modules

media queries

multi-column layout

Web fonts

speech

sumber : http://my-wordtechnology.blogspot.com/2013/04/perbedaan-css-dan-css3-lengkap-berserta.html

Pertemuan 04, 09 Maret 2015: jQuery

JQuery adalah library Javascript yang dibuat untuk memudahkan pembuatan website dengan HTML yang berjalan di sisi Client. JQuery diluncurkan pada tanggal 26 Januari 2006 di Barcamp NYC oleh John Resig dan berlisensi ganda di bawah MIT dan GPL.

Sekarang JQuery dikembangkan oleh team developer yang dipimpin oleh Dave Metvin. Dipakai oleh lebih dari 55% dari 10.000 website yang paling sering dikunjungi. JQuery menjadi Library Javascript yang paling popular Sekarang.

Script JQuery  dibuat untuk memudahkan pengaturan document seperti menyeleksi object dengan element DOM dan membuat aplikasi dengan AJAX.  Jquery juga menyediakan layanan atau support  para developers untuk membuat plug-ins di dalam bahasa Javascript tentunya. Sehingga  memungkinkan para developer website membuat website lebih interaktif dengan animasi, efek – efek, tema dan widget. Dengan menggunakan JQuery kita bisa meluapkan kreatifitas untuk membuat website dinamis atau website aplikasi menjadi modern.

Microsoft dan Nokia telah mengumumkan akan mengemas JQuery di platform mereka. Microsoft awalnya mengadopsinya dalam Visual Studio  untuk digunakan dalam ASP.NET AJAX dan ASP.NET MVC Framework, sedangkan Nokia akan mengintegrasikannya dalam kerangka Web Run-Time mereka.

Beberapa Fitur yang ada di JQuery :

Dalam Pemakaian menggunakan seleksi element DOM, sehingga website lebih dinamis  dan interaktif.

JQuery bisa memanipulasi Class pada CSS dan Support CSS 3

Event

AJAX

Efek-efek dan animasi

Ekstensi dan Plug-ins

Kompatibilitas dengan hampir semua Browser modern

Keperluan lain seperti : User Agent, Feature detection dan lainnya

JQuery hanyalah 1 file yang berisi kode dalam Javascript tetapi bisa berisi banyak fitur seperti di atas. Sehingga cara menggunakaanya sangat mudah.

Contoh script menggunakan JQuery, salah satunya membuat nilai hitung absen, tugas, keaktifan, UTS, UAS Mahasiswa:

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function(){
    $("#HitungNilai").click(function(){
    var absen                    = (20/100)*$('#absen').val();      //20%
    var tugas                     = (15/100)*$('#tugas').val();      //15%
    var keaktifan               = (10/100)*$('#keaktifan').val();  //10%
    var uts                         = (25/100)*$('#uts').val();          //25%
    var uas                        = (30/100)*$('#uas').val();         //30%
                       
    var nilai_akhir = parseFloat(absen+tugas+keaktifan+uts+uas).toFixed(2);
    var huruf_akhir;
                       
        if((nilai_akhir > 85) && (nilai_akhir < 100))
                     huruf_akhir = "A";
        else if((nilai_akhir > 75) && (nilai_akhir < 85))
                     huruf_akhir = "B";
        else if((nilai_akhir > 65) && (nilai_akhir < 75))
                     huruf_akhir = "C";
        else if((nilai_akhir > 55) && (nilai_akhir < 65))
                     huruf_akhir = "D";
        else
                     huruf_akhir = "E";
                                   
        alert("Nilai Akhir = "+nilai_akhir+" & Huruf Akhir = "+huruf_akhir);
            });
});
</script>
</head>
<body>
<table>
<tr><td>Absen</td><td> : </td><td><input type="text" id="absen"></td></tr>
<tr><td>Tugas</td><td> : </td><td><input type="text" id="tugas"></td></tr>
<tr><td>Keaktifan</td><td> : </td><td><input type="text" id="keaktifan"></td></tr>
<tr><td>UTS</td><td> : </td><td><input type="text" id="uts"></td></tr>
<tr><td>UAS</td><td> : </td><td><input type="text" id="uas"></td></tr>
<tr><td></td><td></td><td align="right"><input type="button" value="Cek Nilai!" id="HitungNilai"></td></tr>
</table>
</body>
</html>

Setelah script semua di salin, untuk menjalankan JQuery jangan lupa menyimpan jquery-1.11.2.min.js dalam satu Folder. untuk mendapatkan jquery-1.11.2.min.js Silahkan di Download di website tetangga. heheheehe

Ketika di jalankan hasilnya seperti berikut:

Sekian Post dari saya. Good Luck..!!!

Pertemuan 03, 23 Feb 2015: Javascript

Javascript adalah bahasa pemrograman yang sangat populer dan powerfull yang digunakan dalam pengembangan aplikasi berbasis web. Javascript termasuk ke dalam bahasa pemrograman client-side, yaitu program berbasis web yang dijalankan pada sisi client / oleh browser. Perlu diketahui, Javascript berbeda dengan Java.

Javascript memiliki banyak fungsi dalam membangun aplikasi berbasis web. Javascript harus dibuat dan disisipkan ke dalam aplikasi web kita jika ingin membuat website yang dinamis.

Beberapa contoh fungsi javascript antara lain:

- Mengubah isi konten, atribut HTML, maupun style (CSS).

- Membuat validasi data.

- Membuat efek.

- Dan masih banyak lagi.

Javascript tidak membutuhkan compiler sehingga dapat ditulis menggunakan text editor biasa, misalnya notepad.

Untuk menuliskan kode Javascript, kita perlu menyisipkannya ke dalam kode html dan ditempatkan di dalam tag <body> atau <head>. Kemudian, dalam membuat kode Javascript harus dimulai dengan tag <script> dan ditutup dengan </script>.

            Kemudian simpan dengan ekstensi *.html, contohnya hello.html, kemudian jalankan di browser.

Hasilnya sebagai berikut:

 Membuat kuis sederhana menggunakan JavaScript:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Quiz Perkalian / Fadli Rahman</title>

<script type="text/javascript">

var i;

var hasil = 0;

for(i=1;i<=3;i++) {

            var nilai1 = Math.floor((Math.random() * 10) + 1);

            var nilai2 = Math.floor((Math.random() * 10) + 1);

            var a = window.prompt("Perkalian\n"+nilai1+" x "+nilai2+"=","");

            if((nilai1*nilai2) == a) {

                        window.alert("Benar!");

                        hasil = hasil+1;

            }

            else

                        window.alert("Salah!");

}

document.writeln("<center><h1><header>Quiz Poltek Pertemuan III</header></h1></center>");

document.writeln("<center><h3>Benar = "+hasil+" Dari 3 Pertanyaan</h3></center>");

</script>

</head>

 <body>

 </body>

</html>

Ketika dijalankan, hasilnya sebagai berikut:

Sekian postingan dari saya. :-)