April 2015 ~ Ncuq !!

Assalamu'alaikum.. wr.. wb..

Pada kesempatan kali ini, saya akan membahas mengenai materi perkuliahan pertemuan kelima di tanggal 16 Maret 2015 Mata Kuliah Web 2.0 Technology. Pada pertemuan ini, kami membahas mengenai “CSS (Cascading Style Sheet)" .

CSS merupakan salah satu kode pemrograman yang bertujuan untuk menghias dan mengatur gaya tampilan/layout halaman web supaya lebih elegan dan menarik. CSS digunakan oleh web programmer dan juga blogger untuk menentukan warna, tata letak font, dan semua aspek lain dari presentasi dokumen di situs mereka. Saat ini, hampir tidak ada situs web yang dibangun tanpa kode css.

PENGENALAN DASAR

Cascading Style Sheet terdiri dari Selektor, deklarasi, Properti dan Nilai. Seperti pada HTML, PHP dan bahasa pemrograman lainnya, CSS juga memiliki aturan yang menulis itu sendiri.

Contoh penulisan kode css :

Body {background-color: white;}

‘Body’ adalah Selektor, ‘{ }’ adalah deklarasi, ‘background-color’ adalah properti dan ‘white’ adalah nilai. Maksud dari kode diatas adalah mengatur warna latar belakang (background color) dari tag ‘Body’ sebuah halaman web.

Untuk mempermudah dalam penulisan kode css tersebut, yuk langsung praktek penggunaan css tersebut !!

Kode CSS terpisah

Contoh 1

(File Html) :

<html>

<head>

<title>Latihan</title>

</head>

<body>

<div class = "box"> I feel like i'm floating </div>

I feel like i'm floating I feel like i'm floating I feel like i'm floating

I feel like i'm floating I feel like i'm floating I feel like i'm floating </section>

I feel like i'm floating I feel like i'm floating I feel like i'm floating

I feel like i'm floating I feel like i'm floating I feel like i'm floating </section>

I feel like i'm floating I feel like i'm floating I feel like i'm floating

</section>

</body>

</html>

(File CSS) :

.box{

float : left;

width : 200px;

height : 100px;

margin : 1cm;

}

.afterbox {

clear : left;

border: 2px solid

}

nav{

float : left;

width : 350px;

}

section{

margin-left : 100px;

}

Output :

Contoh 2

(File Html) :

<!DOCTYPE html>

<html>

<head>

<title>Latihan CSS</title>

</head>

<body>

<table>

<tbody>

<tr>

<th>Header Kolom 1</th>

<th>Header Kolom 2</th>

<th>Header Kolom 3</th>

<th>Header Kolom 4</th>

</tr>

<tr>

<td>Baris 1 - Kolom 1</td>

<td>Baris 1 - Kolom 2</td>

<td>Baris 1 - Kolom 3</td>

<td>Baris 1 - Kolom 4</td>

</tr>

<tr>

<td>Baris 2 - Kolom 1</td>

<td>Baris 2 - Kolom 2</td>

<td>Baris 2 - Kolom 3</td>

<td>Baris 2 - Kolom 4</td>

</tr>

<tr>

<td>Baris 3 - Kolom 1</td>

<td>Baris 3 - Kolom 2</td>

<td>Baris 3 - Kolom 3</td>

<td>Baris 3 - Kolom 4</td>

</tr>

<tr>

<td>Baris 4 - Kolom 1</td>

<td>Baris 4 - Kolom 2</td>

<td>Baris 4 - Kolom 3</td>

<td>Baris 4 - Kolom 4</td>

</tr>

<tr>

<td>Baris 5 - Kolom 1</td>

<td>Baris 5 - Kolom 2</td>

<td>Baris 5 - Kolom 3</td>

<td>Baris 5 - Kolom 4</td>

</tr>

<tr>

<td>Baris 6 - Kolom 1</td>

<td>Baris 6 - Kolom 2</td>

<td>Baris 6 - Kolom 3</td>

<td>Baris 6 - Kolom 4</td>

</tr>

</tbody>

</table>

</body>

</html>

(File CSS) :

tbody{

color: black;

}

th{

color : blue;

padding: 5px 10px;

border: 2px solid #EEF7FB;

background: white;

text-shadow: 1px 1px 0 #1F627F;

box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 100px rgba(0, 0, 0, 0.15) inset;

}

td {

padding: 5px 10px;

border: 2px solid #EEF7FB;

-webkit-transition: all 0.7s ease-in-out 0s;

-moz-transition: all 0.7s ease-in-out 0s;

-o-transition: all 0.7s ease-in-out 0s;

transition: all 0.7s ease-in-out 0s;

}

tr{

background: white;

}

table tr:nth-child(2n+0):hover {

background: blue;

}

table td:hover, table td:nth-child(2n+0):hover {

background: blue;

}

table{

padding: 5px 10px;

width: 550px;

border-collapse: collapse;

box-shadow: 5px 3px 5px #000;

background: #ECBE04;

margin: 0 auto;

-webkit-transition: all 0.7s ease-in-out 0s;

-moz-transition: all 0.7s ease-in-out 0s;

-o-transition: all 0.7s ease-in-out 0s;

transition: all 0.7s ease-in-out 0s;

}

Output :

Saya rasa cukup sekian pembahasan saya mengenai CSS secara sederhana.. semoga bisa bermanfaat dan nantikan pembahasan saya di kesempatan lainnya..

Wassalamu'alaikum.. wr.. wb..

Referensi : http://www.syakirurohman.net/2013/08/mengenal-apa-itu-css-dan-bagaimana-menggunakannya.html [040415 - 17:46]

Assalamu'alaikum.. wr.. wb..

Pada kesempatan kali ini, saya akan membahas mengenai materi perkuliahan pertemuan keempat di tanggal 09 Maret 2015 Mata Kuliah Web 2.0 Technology. Pada pertemuan ini, kami membahas mengenai “jQuery”.

jQuery adalah sebuah library Javascript yang sangat ringkas dan sederhana untuk memanipulasi komponen di dokumen HTML, menangani event, animasi, efek dan memproses interaksi ajax. jQuery dirancang sedemikian rupa supaya membuat program menggunakan Javascript menjadi relatif sangat mudah. Sesuai slogan nya, write less, do more. Menulis kode lebih sedikit, tetapi melakukan pekerjaan lebih banyak.

jQuery ukuran nya cukup kecil, sehingga tidak memperlambat proses loading halaman web yang kita buat. jQuery juga kompatibel dengan CSS3 dan yang tak kalah penting adalah jQuery bisa berjalan di semua browser – cross browser.

jQuery diluncurkan pada Januari 2006 oleh John Resig. jQuery adalah library Javascript yang paling populer saat ini. Karena kecanggihan nya, jQuery dipakai oleh perusahaan besar seperti Google. Dell, CBS, digg, Netflix, Bank of America, Mozilla, Drupal, dsb.

jQuery adalah library Javascript yang gratis dan open source. Tanpa library seperti jQuery, menerapkan Javascript mungkin akan lebih sulit, terutama untuk pemula yang baru belajar Javascript. Plugin tambahan seperti JQuery UI (user interface) semakin memudahkan kita mengembangkan website yang cantik dan interaktif. Selain itu tersedia plugin-plugin lain yang makin memperkaya kemampuan jQuery.

Nah, untuk mempermudah setelah penjelasan diatas, mari kita simak beberapa syntax sederhana mengenai jQuery tersebut :

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

$("#Hitung").click(function(){

if(($('#absn').val()!=="")

&& ($('#tgs').val()!=="")

&& ($('#aktf').val()!=="")

&& ($('#uts').val()!=="")

&& ($('#uas').val()!==""))

{

var absn = (20/100)*$('#absn').val();

var tgs = (15/100)*$('#tgs').val();

var aktf = (10/100)*$('#aktf').val();

var uts = (25/100)*$('#uts').val();

var uas = (30/100)*$('#uas').val();

var nilai = parseFloat(absn+tgs+aktf+uts+uas).toFixed(2);

var angka;

if((nilai >= 85) && (nilai <= 100))

angka = "A";

else if((nilai >= 75) && (nilai <= 84))

angka = "B";

else if((nilai >= 65) && (nilai <= 74))

angka = "C";

else if((nilai >= 55) && (nilai <= 64))

angka = "D";

else

angka = "E";

alert("Nilai Akhir = "+nilai+" & Huruf Akhir = "+angka);

}else{

alert("Data yang kosong harus diisi dahulu !!");

}

});

</script>

</head>

<body>

<tbody>

<tr>

<td colspan = "3" align="center"><b>FORM NILAI</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td><b>ABSEN</td>

</tr>

<tr>

<td><b>TUGAS</td>

</tr>

<tr>

<td><b>KEAKTIFAN</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Output :

Kemampuan memahami jQuery cukup penting untuk anda yang berprofesi di bidang pengembangan website atau anda yang sedang berencana membuat website yang cantik dan interaktif.

Saya rasa cukup sekian pembahasan saya mengenai jQuery secara sederhana.. semoga bisa bermanfaat dan nantikan pembahasan saya di kesempatan lainnya..

Wassalamu'alaikum.. wr.. wb..

Referensi : http://www.bukuharian.com/apa-itu-jquery.html [040415 - 17:26]

Ncuq !!

Rachmah's Site..

Sabtu, 04 April 2015

CSS (Cascading Style Sheet)

jQuery

Followers

Materi Kuliah

Blog Archive

Just :

Aegyo :