Ncuq !!

Sabtu, 04 April 2015

CSS (Cascading Style Sheet)

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]

jQuery

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]

JS (Javascript)

Assalamu'alaikum.. wr.. wb..

Pada kesempatan kali ini, saya akan membahas mengenai materi perkuliahan pertemuan ketiga di tanggal 23 Februari 2015 Mata Kuliah Web 2.0 Technology. Pada pertemuan ini, kami membahas mengenai “Pengenalan Javascript” dan “Control pada Javascript”..

Sebelum masuk ke topik pembahasan, saya ingin memaparkan sedikit alasan saya kenapa saya membahas materi perkuliahan pertemuan ketiga tanpa adanya pembahasan mengenai materi perkuliahan pertemuan kedua di pembahasan sebelumnya. Pada saat perkuliahan pertemuan kedua di tanggal 16 Februari 2015 saya tidak masuk dikarenakan saya izin menghadiri kakak saya yang akan melaksanakan wisuda di Kediri. Maka dari itu, saya tidak membahas mengenai materi perkuliahan di pertemuan kedua tersebut. (abaikan jika tidak masuk topik) :D

Nah, daripada banyak basa-basi.. yuk langsung aja kita masuk ke topik pembahasan menganai apa sih Javascript itu ?

JavaScript adalah bahasa pemograman web yang bersifat Client Side Programming Language. Client Side Programming Language adalah tipe bahasa pemograman yang pemrosesannya dilakukan oleh client. Aplikasi client yang dimaksud merujuk kepada web browser seperti Google Chrome dan Mozilla Firefox.

Jenis bahasa pemograman Client Side berbeda dengan bahasa pemograman Server Side seperti PHP, dimana untuk server side seluruh kode program dijalankan di sisi server. Untuk menjalankan JavaScript, kita hanya membutuhkan aplikasi text editor, dan web browser. JavaScript memiliki fitur : high-level programming language, client-side, loosely tiped, dan berorientasi objek.

Itulah ulasan singkat mengenai Javascript.. selanjutnya, yuk kita lihat beberapa syntax sederhana mengenai Javascript yang diberi oleh dosen saya :D

Menambahkan Kode Javascript pada HTML

<html>

<head>

<title>A First Program in JavaScript</title>

document.writeln ("<h1>Welcome to JavaScript Programming!");

</script>

</head>
<body>
</body>

</html>

Output :

Menambahkan Kode Javascript pada HTML

<html>

<head>

<title>Printing a Line with Multiple Statements </title>

<!--

document.writeln("<h1 style = 'color: magenta'>");

document.writeln("Welcome to JavaScript " + "Programming!</h1>");

//-->

</script>

</head>
<body>
</body>

</html>

Output :

Menampilkan Alert Dialog

<html>

<head>

<title>Printing Multiple Lines in a Dialog Box </title>

<!--

window.alert("Welcome to\nJavaScript\nProgramming!");

//-->

</script>

</head>

<body><p> Click Refresh (or Reload) to run this script again.</p>

</body>

</html>

Output :

Menampilkan Prompt Box

<html>

<head>

<title>Using Prompt and Alert Boxes </title>

<!--

var name;

name= window.prompt("Please enter your name");

document.writeln("<h1>Hello " +name+ ", welcome to JavaScript programming!</h1>");

//-->

</script>

</head>

</html>

Output :

Penambahan Sederhana

<html>

<head>

<title>An Additiom program</title>

<!--

var firstnumber;

var secondnumber;

var number1;

var number2;

var sum;

firstnumber = window.prompt("Enter first integer");

secondnumber = window.prompt("Enter second integer");

number1 = parseInt (firstnumber);

number2 = parseInt (secondnumber);

sum = number1 + number2 ;

document.writeln("<h1> The sum is " +sum+ "</h1>");

//-->

</script>

</head>

</html>

Output :

Pengunaan Operator

<html>

<head>

<title>Using Relational Operators</title>

<!--

var name;

var now = new Date();

var hour = now.getHours();

name = window.prompt("Please enter your name");

if (hour < 12)

document.write("<h1>Good Morning, ");

if (hour >= 12)

{

hour = hour-12;

if(hour < 6)

document.write("<h1>Good Afternoon, ");

if(hour >= 6)

document.write("<h1>Good Evening, ");

} // end if

document.writeln(name +

", welcome to JavaScript programming!</h1>");

//-->

</script>

</head>

</html>

Output :

Pengulangan Sederhana

<html>

<head>

<title>Class Average Program</title>

<!--

var total;

var gradecounter;

var grade;

var gradevalue;

var average;

total = 0;

gradecounter = 1;

while(gradecounter <=10)

{

grade = window.prompt("Enter integer grade:","0");

gradevalue = parseInt(grade);

total = total + gradevalue;

gradecounter = gradecounter +1;

}

average = total/10;

document.writeln("<h1>Class Average is " +average+ "</h1>");

//-->

</script>

</head>

</html>

Output :

inputan : 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10

Pengulangan Sederhana Bagian 2

<html>

<head>

<title>Class Average Program : Sentinel-controlled Repetition</title>

<!--

var total;

var gradecounter;

var grade;

var gradevalue;

var average;

total = 0;

gradecounter = 0;

grade = window.prompt("Enter integer grade, -1 to quit:","0");

gradevalue = parseInt(grade);

while(gradevalue !=-1)

{

total = total + gradevalue;

gradecounter = gradecounter +1;

grade = window.prompt("Enter integer grade, -1 to quit:","0");

gradevalue = parseInt(grade);

}

if(gradecounter != 0)

{

average = total/gradecounter;

document.writeln("<h1>Class Average is " +average+ "</h1>");

} else

document.writeln("<p>No grades were entered </p>");

//-->

</script>

</head>

</html>

Output :

inputan : 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, -1

Pengulangan Bersarang

<html>

<head>

<title>Class Average Program : Sentinel-controlled Repetition</title>

<!--

var passes=0;

var failures=0;

var student=1;

var result;

while(student <=10)

{

result = window.prompt("Enter result (1=pass, 2=fail)","0");

if(result=="1")

passes = passes +1;

else

failures = failures +1;

student = student +1;

}

document.writeln("<h1>Examination Results </h1>");

document.writeln("<p>Passed :" +passes+ "; Failed:" +failures+"</p>");

//-->

</script>

</head>

</html>

Output :

inputan : 1, 1, 1, 1, 1, 2, 2, 2, 2, 2

Increment dan Decrement

<html>

<head>

<title>Preincrementing and Postincrementing </title>

<!--

var c;

c = 5;

document.writeln("<h3> Postincrementing</h3>");

document.writeln("<p>" + c);

document.writeln(" " + c++);

document.writeln(" " + c+ "</p>");

c = 5;

document.writeln("<h3> Preincrementing</h3>");

document.writeln("<p>" +c);

document.writeln(" " + ++c);

document.writeln(" " + c + "</p>");

//-->

</script>

</head>

</html>

Output :

Nah, setelah kami mengenal beberapa syntax sederhana tersebut.. kami diberi latihan oleh Dosen Pengampu mata kuliah tersebut..

Berikut sedikit hasil latihan sederhana yang saya buat..

<html>

<head>

<title>Simple Quis</title>

<!--

var pertama;

var kedua ;

var ketiga ;

var ans = 0;

pertama = window.prompt("Ada berapa lantai politeknik tedc bandung ?");

if(pertama == "4")

{

window.alert("Jawaban Anda BENAR !");

ans = ans +1;

} else

window.alert("Jawaban Anda SALAH !");

kedua = window.prompt("Ada berapa lab untuk jurusan informatka di politeknik tedc bandung ?");

if(kedua == "4")

{

window.alert("Jawaban Anda BENAR !");

ans = ans + 1;

} else

window.alert("Jawaban Anda SALAH !");

ketiga = window.prompt("Ada berapa jurusan di politeknik tedc bandung ?");

if(ketiga == "10")

{

window.alert("Jawaban Anda BENAR !");

ans = ans + 1;

} else

window.alert("Jawaban Anda SALAH !");

document.writeln("<h1> Anda menjawab " +ans+ " dari 3 pertanyaan</h1>");

//-->

</script>

</head>

</html>

Output :

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

Wassalamu'alaikum.. wr.. wb..

Referensi : http://www.duniailkom.com/tutorial-belajar-javascript-pengertian-dan-fungsi-javascript-dalam-pemograman-web/ [Kamis – 17.25]

Ncuq !!

Rachmah's Site..

Sabtu, 04 April 2015

CSS (Cascading Style Sheet)

jQuery

Kamis, 26 Februari 2015

JS (Javascript)

Followers

Materi Kuliah

Blog Archive

Just :

Aegyo :