Like Us On Facebook

11 Mei 2014

MDP
0 comment

Dasar Java script



Sekilas tentang JavaScript

Javascript adalah bahasa skrip yang ditempelkan pada kode HTML dan diproses di sisi klien.
Dengan adanya bahasa ini, kemampuan dokumen HTML menjadi semakin luas. Sebagai
contoh, dengan menggunakan JavaScript dimungkinkan untuk memvalidasi masukanmasukan
pada formulir sebelum formulir dikirimkan ke server.

Javascript bukanlah bahasa Java dan merupakan dua bahasa yang berbeda. Javascript
diinterpretasikan oleh klien (kodenya bisa dilihat pada sisi klien), sedangkan kode Java
dikompilasi oleh pemrogram dan hasil kompilasinyalah yang dijalankan oleh klien.

Struktur JavaScript

<SCRIPT LANGUAGE = ”JavaScript”><!- -Penulisan kode javascript// - - ></SCRIPT>

Pemakaian alert sebagai property window

Script :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Membuat pesan peringatan dengan Javascript</title></head> <body><script language="javascript"><!--window.alert("Ini pesan Untuk Anda");//--></script></body></html>
Screenshot :



Pemakaian metode dalam objek

Script :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Membuat pesan peringatan dengan javascript 2</title></head> <body>Percobaan memakai Javascript :<br /><script language="javascript"><!--document.write("Selamat mencoba javascript<br>");document.write("Semoga sukses");//--></script></body></html>

Screenshot :


Pemakaian prompt

Script :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Pemakaian Promt</title></head> <body><script language="javascript"><!--var nama=prompt("Siapa nama Anda?","Masukkan nama Anda")document.write("Hai "+nama);//--></script></body></html>
Screenshot :



Pembuatan fungsi dan cara pemanggilannya

Script :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title></head><script language="javascript">function pesan(){alert("Memanggil javascript lewat onload")}</script><body onload=pesan()></body></html>

Screenshot :

Read More

24 April 2014

MDP
0 comment

Pemrograman Web : Selector


Pada pertemuan matakuliah pemrograman web kali ini sedang membahas tentang dasar-dasar CSS (Cascading Style Sheet) yaitu berbagai jenis selektor yang sering digunakan di CSS. 

Sebelum membahas lebih jauh tentang selektor CSS, berikut saya berikan beberapa poin penting tentang CSS yang perlu diketahui :
-     
  •        Menurut Wikipedia, CSS adalah aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.
  •       CSS bukan merupakan bahasa pemrograman.
  •       CSS dikembangkan oleh World Wide Web Consortium (W3C).

-          
    Jenis-jenis Selektor CSS :

Selektor tag atau selektor elemen
Selektor Pseudo-kelas
Selektor Kelas
Selektor ID
Selektor Keturunan
Selektor ortu-anak
Selektor bersebelahan
Selektor Atribut
Selektor Pseudo-elemen
Selektor universal
Penggabungan Selektor

Pada pertemuan kali ini kita hanya akan membahas 3 selektor, yakni selektor ID, tag dan kelas.

    1. Selektor ID
Ciri-cirinya :
  •       Selektor ID diawali dengan tanda #

#atas {
background:#FF0000;color:#FFFFFF;font-size:50px;text-align:center;
}

    2. Selektor Tag
Ciri-cirinya :
  •       Nama selektor berupa nama Tag

h1 {
color:#000000;
}
    
    3. Selektor Kelas
  •          Diawali dengan tanda titik
  •           Bisa diterapkan hanya pada elemen tertentu
  •           Sebuah elemen bisa mempunyai lebih dari satu kelas
  •           Di dalam atribut class, nama-nama kelas dipisahkan oleh spasi

.isi {
font-family:'Verdana';font-size:30px;color:#0000FF
}
ul {
color:#000000;font-size:20px;
}

Setelah memahami pengertian masing-masing selektor diatas, selanjutnya kita akan menggabungkan ketiga selektor diatas menjadi satu file CSS.

#atas {
background:#FF0000;color:#FFFFFF;font-size:50px;text-align:center;
}
h1{
color:#000000;
}
.isi {
font-family:'Verdana';font-size:30px;color:#0000FF
}
ul {
color:#000000;font-size:20px;
}

Lalu simpan dengan nama css1.css

Langkah selanjutnya, kita akan memasukkan file CSS diatas ke dalam file HTML baru.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Latihan-CSS-2</title>
<link rel="stylesheet" href="css1.css" type="text/css" />
</head> 
<body background="Tulips.jpg">
<div id="atas">
Toko Online Pascal
</div>
<h1> Deskripsi :</h1>
<div class="isi"> 
Toko Online menyediakan berbagai macam barang-barang baru maupun bekas dengan harga yang terjangkau.</div> 
<h1> Menyediakan :</h1>
<ul type="disc">           
<li>Laptop           
<li>TV           
<li>Kulkas           
<li>dll.
</ul>
</body>
</html>
Tulisan yang diblok merah adalah script untuk memasukkan file CSS ke dalam file HTML

Read More

3 April 2014

MDP
0 comment

Css Dasar.html


CSS CSS merupakan singkatan dari Cascading Style Sheet. Menurut wikipedia, CSS adalah aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman. Css saat ini di kembangkan oleh World Wide Web Consortium atau yang biasa lebih dikenal dengan istilah W3C. Css bukan menggantikan kode html, tetapi hanya di fungsikan sebagai penopang atau pendukung dari file html yang berperan dalam penataan kerangka dan layout web.

1. Aturan Penulisan CSS
Prinsip dasar penggunaan CSS di dalam dokumen HTML adalah untuk menyediakan style yang digunakan untuk mengatur bagian-bagian HTML. Contoh, suatu style dapat di pakai untuk mengatur jenis, ukuran, dan bahkan warna suatu teks. Style mengandung dua bagian yaitu selektor dan deklarasi properti. Selektor untuk menyatakan bagian dalam HTML yang akan diatur melalui style. Sedangkan properti untuk menyatakan sifat dalam tag HTML yang diatur melalui style.








2. Css Bersifat Case Sensitive

Maksud case sensitive disini membedakan huruf kapital dan huruf kecil. Hal ini penting diketahui karena kalau kita ingin menulis nama kelas atau nama ID dalam style. Contoh : Maka nim akan
dibedakan dengan Nim ataupun NIM.




Untuk memberikan nama dalam CSS misalnya untuk nama kelas atau nama ID agar mudah dipahami gunakan penamaan yang mengandung makna dan mudah dipahami oleh orang.Contoh :
o   nama seperti warnaMerah lebih baik dari pada wmr.
o   warnaMerah bisa juga ditulis menjadi warna-merah atau warna_merah.
o   Tanda minus (-) ataupun garis bawah ( _ ) boleh dipakai untuk nama.
o   Namun yang perlu di ingat, warnaMerah, warna-merah, warna_merah adalah tiga nama yang berbeda.
o   Penulisan nama boleh menggunakan angka, tetapi spasi atau tanda-tanda lain tidak boleh digunakan untuk nama.

3. Komentar
Komentar adalah suatu bagian dalam kode yang diperlakukan bukan sebagai kode, melainkan berfungsi sebagai keterangan bagi pembaca kode. Pada dokumen HTML, komentar diawali dengan <!-- dan diakhiri dengan -->. Adapun pada CSS, komentar ditulis dengan awalan /* dan diakhiri */.





4. Cara Menggunakan CSS
Untuk menggunakan CSS, ada 3 cara yang bisa kita gunakan yaitu Embedded Style Sheet, Inline Style Sheet, dan Linked Style Sheet.

4.1 Embedded Style Sheet
Embedded Style Sheet adalah cara penulisan kode dimana penulisan CSS dilakukan pada tag HTML, yaitu pada tag <style> ... </style> dan sebelum tag <body>. Pada tag tersebut akan disisipkan kode CSS yang akan digunakan oleh tag HTML. Sintaks penulisannya :














Contoh programnya seperti ini

Read More

27 Maret 2014

MDP
0 comment

Curriculum vitae.HTML


Disini saya akan membuat sebuah CV saya yang begitu sederhana menggunakan HTML. Untuk mengikuti tutorial ini, anda sebelumnya harus sudah memiliki Text Editor dan Browser. Text Editor yang saya gunakan adalah Notepad dan browsernya adalah Google Chrome. Anda dapat menggunakan Text Editor dan Browser manapun.

 Berikut ini langkah-langkahnya :
1. Buka Text Editor yang anda gunakan lalu copy script dibawah ini ke Text Editor 

<head><title>Untitled Document</title><style type="text/css">h1 { font-size: 24px; color: #06F;}h2 { font-size: 24px; color: #FFF;}h1,h2,h3,h4,h5,h6 { font-weight: bold;}h3 { font-size: 24px; color: #FFF;}</style></head>
<body bgcolor="#99CCFF"><blockquote>  <blockquote>    <blockquote>      <h1>Curriculum Vitae</h1>          </blockquote>  </blockquote></blockquote><p><strong>Data Diri</strong></p><table width="484" border="0">  <tr>    <td width="120">Nama Lengkap</td>    <td width="8">:</td>    <td width="225">Mifta Dwi Prasetyo</td>    <td width="103" rowspan="5"><img src="../../../PICTURE/yunet/FILE2077.JPG" width="98" height="113" /></td>  </tr>  <tr>    <td>Tempat, Tgl Lahir</td>    <td>:</td>    <td>Sukoharjo, 14 Mei 1995</td>  </tr>  <tr>    <td>Jenis Kelamin</td>    <td>:</td>    <td>Laki-Laki</td>  </tr>  <tr>    <td>Kewarganegaraan</td>    <td>:</td>    <td>Indonesia</td>  </tr>  <tr>    <td height="23">Agama</td>    <td>:</td>    <td>Islam</td>  </tr>  <tr>    <td height="23">Status</td>    <td>:</td>    <td>Belum Menikah</td>    <td width="103">&nbsp;</td>  </tr>  <tr>    <td height="23">Identitas</td>    <td>:</td>    <td>191918 2882 9182</td>    <td width="103">&nbsp;</td>  </tr>  <tr>    <td>Alamat</td>    <td>:</td>    <td>Jl.pemuda No.43, Sukoharjo</td>    <td>&nbsp;</td>  </tr>  <tr>    <td>No.Kontak</td>    <td>:</td>    <td>085879129xxx</td>    <td>&nbsp;</td>  </tr>  <tr>    <td>Email</td>    <td>:</td>    <td>miftadwi35@xxxx</td>    <td>&nbsp;</td>  </tr></table><p><strong>Riwayat Pendidikan</strong></p><table width="480" border="0">  <tr>    <td colspan="4">A. Pendidikan Formal</td>  </tr>  <tr>    <td width="134" align="center">2001-2007</td>    <td width="13">:</td>    <td width="214">SDN Kenep 02</td>    <td width="101">&nbsp;</td>  </tr>  <tr>    <td width="134" align="center">2007-2010</td>    <td>:</td>    <td>SMP Negeri 01 Sukoharjo</td>    <td>&nbsp;</td>  </tr>  <tr>    <td width="134" align="center">2010-2013</td>    <td>:</td>    <td>SMA Negeri 01 Sukoharjo</td>    <td>&nbsp;</td>  </tr>  <tr>    <td>&nbsp;</td>    <td>&nbsp;</td>    <td>&nbsp;</td>    <td>&nbsp;</td>  </tr>  <tr>    <td colspan="4">B. Pendidikan Informal</td>  </tr>  <tr>    <td>&nbsp;</td>    <td>&nbsp;</td>    <td>&nbsp;</td>    <td>&nbsp;</td>  </tr>  <tr>    <td>&nbsp;</td>    <td>&nbsp;</td>    <td>&nbsp;</td>    <td>&nbsp;</td>  </tr></table><p><strong>Riwayat Pekerjaan</strong></p><table width="479" border="0">  <tr>    <td width="135" align="center">2013</td>    <td width="14">:</td>    <td width="214">SPB Grand mall</td>    <td width="98">&nbsp;</td>  </tr>  <tr>    <td>&nbsp;</td>    <td>&nbsp;</td>    <td>&nbsp;</td>    <td>&nbsp;</td>  </tr></table><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p></body>
</html>



2.  copy semua script yang ada di atas maka akan tampil seperti ini

Read More

25 Maret 2014

MDP
0 comment

Form html

Belajar HTML ( Tag Form ) aplikatif implementasinya yaitu Membuat Form pada HTML. Form HTML merupakan tag yang paling penting adalam pemrograman HTML khususnya dalam pembuatan aplikasi berbasis web. Form menyediakan property masukan yang terdiri dari berbagai jenis, berupa textbox, check box, radio button, dan button.

 Form digunakan untuk mengumpulkan data dari pengunjung suatu website. Mulai dari form untuk login, form kontak, form untuk pendaftaran user, form advertiser, form sitemap, bahkan untuk mengirimkan data antar halaman web.

 Properti Masukan Pada Elemen Form
Text box <input type=”text”>
    Digunakan untuk memasukkan input berupa text.
    size = ukuran dari textbox dalam karakter, default 20
    maxsize = maksimal banyaknya karakter yang dapat diterima
    name = nama dari variabel yang dikirim ke suatu aplikasi
    value = akan menampilkan isinya sebagai nilai default
Password <input type=”password”>
    Digunakan untuk memasukkan password.
    size = ukuran dari textbox dalam karakter, default 20
    maxsize = maksimal banyaknya karakter yang dapat diterima
    name = nama dari variabel yang dikirim ke suatu aplikasi
Hidden <input type=”hidden”>
    Digunakan untuk mengirim data ke suatu aplikasi yang tidak diinginkan untuk dilihat oleh browser.
    name = nama dari variabel yang dikirim ke suatu aplikasi
    value = nilai dari variabel
Check box <input type=”checkbox”>
    Check box digunakan untuk dapat memilih lebih dari satu pilihan.
    name = nama dari variabel yang dikirim ke suatu aplikasi
    value = nilai dari variabel
    checked (checkbox yang ditandai)
Radio button <input type=”radio”>
    Radio button digunakan untuk dapat memilih hanya salah satu pilihan.
    name = nama dari variabel yang dikirim ke suatu aplikasi
    value = nilai dari variabel
    checked (radio button yang ditandai)
Push button <input type=”button”>
    Elemen ini biasanya digunakan untuk JavaScript, VBScript, atau script lain untuk
    menghasilkan suatu aksi.
    name = nama dari variabel yang dikirim ke suatu aplikasi
    value = label teks di atas tombol
Submit <input type=”submit”>
    Setiap elemen form membutuhkan tombol submit untuk mengirimkan nama variabel dan nilainya ke
    suatu aplikasi yang ditentukan dalam atribut ACTION dalam elemen FORM.
    name = nama dari variabel yang dikirim ke suatu aplikasi
    value = label teks di atas tombol
Image submit button <input type=”image” src=”URL”>
    Digunakan untuk menggantikan tombol standar submit dengan image.
    name = nama dari variabel yang dikirim ke suatu aplikasi
Reset <input type=”reset”>
    Digunakan untuk mereset (menghapus) semua masukan dalam form dengan cepat.
    value = label teks di atas tombol.
Text area <textarea> . . . </textarea>
    Elemen untuk memasukkan teks secara leluasa seperti pada notepad.
    name = nama dari variabel yang dikirim ke suatu aplikasi
    rows = panjang baris dalam karakter
    cols = tinggi (jumlah baris)
Select <select> . . . </select>
    Daftar isi dalam properti select menggunakan tag <option>
    name = nama dari variabel yang dikirim ke suatu aplikasi
    size = jumlah pilihan yang dapat terlihat

 Berikut ini contoh form

<html><head><title bgcolor="#FFFFCC">Latihan-9: Membuat Form</title></head><body><form action=# method=get><p><table width="510" border="0">  <tr>    <td width="98">Nama</td>    <td width="8">: </td>    <td width="382"><input type=text name=nama></td>  </tr>  <tr>    <td>Alamat </td>    <td>:</td>    <td><textarea name=alamat cols=25 rows=4></textarea></td>  </tr>  <tr>    <td>Jenis kelamin</td>    <td>:</td>    <td><input type=radio name=gender value=Pria>      Laki-laki        <input type=radio name=gender value=Wanita>      Perempuan </td>  </tr>  <tr>    <td>Tgl. Lahir</td>    <td>: </td>    <td><select name=tgl>      <option value=1>01        <option value=2>02          <option value=3>03          <option value=31>31          </select>-<select name=bln>  <option value=1>01  <option value=2>02  <option value=3>03  <option value=12>12</select>-<select name=thn>  <option value=1901>1901  <option value=1902>1902  <option value=1903>1903  <option value=2000>2000</select></td>  </tr>  <tr>    <td>Pekerjaan </td>    <td>: </td>    <td><select name=pekerjaan>      <option value=Pelajar>Pelajar/Mahasiswa        <option value="Pegawai Negeri">Pegawai negeri          <option value=Karyawan>Karyawan          <option value=Wiraswasta>Wiraswasta      </select></td>  </tr>  <tr>    <td>Hobby </td>    <td>&nbsp;</td>    <td><input type=checkbox name=hobby value=Membaca>      Baca buku        <input type=checkbox name=hobby value=Kesenian>        Kesenian        <input type=checkbox name=hobby value=Olahraga>        Olah raga        <input type=checkbox name=hobby value=Belanja>        Shopping
entar : </td>  </tr>  <tr>    <td>&nbsp;</td>    <td>&nbsp;</td>    <td><textarea name=komentar cols=25 rows=4></textarea></td>  </tr>  <tr>    <td>&nbsp;</td>    <td>&nbsp;</td>    <td><input type=submit value=Kirim data>      <input type=reset value=Ulangi></td>  </tr></table>

<p><p><p><p><p><p>:<p></form>
</body>
</html>

Read More