Mengenal Dasar-Dasar JavaScript

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

Struktur dari JavaScript adalah sbb :

<SCRIPT LANGUAGE = ”JavaScript”>

<!- -

Penulisan kode javascript

// - - >

</SCRIPT>

Keterangan :

Kode <!- - // - - > umumnya disertakan dengan tujuan agar sekiranya browser tidak mengenali JavaScript maka browser akan memperlakukannya sebagai komentar sehingga tidak ditampilkan pada jendela browser.

JavaScript sebagai bahasa berorientasi pada obyek

Properti

Properti adalah atribut dari sebuah objek. Contoh, objek mobil punya properti warna mobil.

Penulisan :

Nama_objek.nama_properti = nilai

window.defaultStatus = ”Selamat Belajar Dasar-Dasar JavaScript”;

Metode

Metode adalah suatu kumpulan kode yang digunakan untuk melakukan sesuatu tindakan

terhadap objek.

Penulisan :

Nama_objek.nama_metode(parameter)

document.write (”Hallo Sahabat Sampul Ilmu”)

Letak JavaScript dalam HTML

Skrip Javascript dalam dokumen HTML dapat diletakkan pada :

1. Bagian Head

2. Bagian Body (jarang digunakan).

Contoh Dasar-Dasar JavaScript

Sebelum mencoba belajar JavaScript Terlebih dahulu buatlah halaman HTML di komputer anda, untuk cara pembuatannya clik disini

Pemakaian alert sebagai property window

Copy Code Dibawah ini yang (berwarna biru) dan Paste kedalam Halaman HTML anda Yang Telah dibuat sebelumnya.

<HTML>

<HEAD>

<TITLE>Alert Box</TITLE>

</HEAD>

<BODY>

<SCRIPT LANGUAGE = "JavaScript">

<!--

window.alert("Mari Belajar Bersama Sampul Ilmu");

//-->

</SCRIPT>

</BODY>

</HTML>

Pemakaian metode dalam objek.

Copy Code Dibawah ini yang (berwarna biru) dan Paste kedalam Halaman HTML anda Yang Telah dibuat sebelumnya.

<HTML>

<HEAD>

<TITLE>Skrip JavaScript</TITLE>

</HEAD>

<BODY>

Percobaan memakai JavaScript:<BR>

<SCRIPT LANGUAGE = "JavaScript">

<!--

document.write("Selamat Mencoba JavaScript<BR>");

document.write("Semoga sukses!");

//-->

</SCRIPT>

</BODY>

</HTML>

Pemakaian prompt

Copy Code Dibawah ini yang (berwarna biru) dan Paste kedalam Halaman HTML anda Yang Telah dibuat sebelumnya.

<HTML>

<HEAD>

<TITLE>Pemasukan Data</TITLE>

</HEAD>

<BODY>

<SCRIPT LANGUAGE = "JavaScript">

<!--

var nama = prompt("Siapa nama Anda?","Masukkan nama anda");

document.write("Hai, " + nama);

//-->

</SCRIPT>

</BODY>

</HTML>

Pembuatan fungsi dan cara pemanggilannya

Copy Code Dibawah ini yang (berwarna biru) dan Paste kedalam Halaman HTML anda Yang Telah dibuat sebelumnya.

<HTML>

<HEAD>

<TITLE>Contoh Program Javascript</TITLE>

</HEAD>

<SCRIPT language="Javascript">

function pesan(){

alert ("memanggil javascript lewat body onload")

}

</SCRIPT>

<BODY onload=pesan()>

</BODY>

</HTML>

Semoga Bermanfaat Sebagai Pembelajaran

Sumber : Bengkel Internet Pens-Its

MySQL dengan WampServer Dan Dreamweaver Di PHP

Langkah-langkah dalam pembuatan database pada WampServer

• Buka drive C kemudian buka Wamp pilih folder www buat folder baru dengan nama latihan
• Aktifkan WampServer clik Star All program kemudian pilih WampServer dan clik starWampServer
• Buka Aplikasi Mozilla FireFox kemudian ketikan URL http://localhost/  setelah itu clik phpmyadmin Pada create new database ketik latihan kemudian Click create
• Pada create new table on database latihan klick Name=mahasiswa Number of fields=2
• Kemudian isikan field2 sebagai berikut

• Buka dreamweaver pilih php

• Buat file baru kemudian ketik kode program dibawah ini dan simpan dengan nama koneksi.php

<?php

$server = "localhost";

$username = "root";

$password = "";

$database = "latihan";

mysql_connect($server,$username,$password) or die("koneksi gagal");

mysql_select_db($database)or die("koneksi database gagal");

?>

• Buat file baru kemudian ketik kode program dibawah ini dan simpan dengan nama proses.php

<?php

include "koneksi.php";

$act=$_GET[act];

if ($act=='input'){

mysql_query("INSERT INTO mahasiswa(nim,nama) VALUES('$_POST[nim]','$_POST[nama]')");

include "index.php";

}

?>

• Buat file baru kemudian ketik kode program dibawah ini dan simpan dengan nama index.php

<?php

include "koneksi.php";

$aksi="proses.php";

$act=$_GET[act];

echo "<h2>Data Mahasiswa</h2>

<table>

<form method=POST action='$aksi?act=input'>

<tr><td>NIM/STAMBUK </td> <td> : <input type=text name='nim'></td></tr>

<tr><td>NAMA MAHASISWA </td>     <td> : <input type=text name='nama'></td></tr>

<tr><td colspan=2><input type=submit value=Simpan>

</table></form>";

echo "<table>

<tr><th>no</th><th>nim</th><th>nama</th>"; 

$tampil=mysql_query("SELECT * FROM mahasiswa ORDER BY nim");

$no=1;

while ($r=mysql_fetch_array($tampil)){

echo "<tr><td>$no</td>

<td>$r[nim]</td>

<td>$r[nama]</td>

</td></tr>";

$no++;

}

echo "</table>";

?>

• klick double file Index.php kemudian lihat hasilnya

Semoga Bermanfaat untuk bahan pembelajaran

Cara Membuat Tabel Di HTML

Tabel digunakan untuk menyajikan data dalam betuk baris dan kolom. Adapun Elemen-Elemen yang digunakan untuk membuat Tabel adalah:

Atribut Tabel tag <TD>

Mengatur Border
Border adalah garis yang mengelilingi sebuah tabel.
Contoh:
<html>
<head><title>Sampul Ilmu</title></head>
<body>
<BODY><CENTER>
<P>Menggunakan tag <b>&lt;
TABLE BORDER="1"&gt;</b><P>
<TABLE BORDER="1">
<TR>
<TD>Baris #1 Kolom #1</TD>
<TD>Baris #1 Kolom #2</TD>
</TR>
<TR>
<TD>Baris #2 Kolom #1</TD>
<TD>Baris #2 Kolom #2</TD>
</TR>
</TABLE></body></html>

Menggabungkan  Kolom
Contoh :
<html>
<head><title>Sampul Ilmu</title></head>
<BODY>
<TABLE BORDER="1" CELLPADDING="1" CELLSPACING="1">
<TR>
<TD COLSPAN=2>Kolom A & B</TD>
</TR>
<TR>
<TD>Kolom C</TD>
<TD>Kolom D</TD>
</TR>
</TABLE></BODY>
</html>

Menggabungkan Baris
Contoh
<html>
<head><title>Sampul Ilmu</title></head>
<BODY>
<TABLE BORDER="1" CELLPADDING="1" CELLSPACING="1">
<TR>
<TD ROWSPAN="2">Kolom A & C</TD>  <!-- Menggabung baris -->
<TD>Kolom B</TD>
</TR>
<TR>
<TD>Kolom D</TD>
</TR>
</TABLE>
</BODY>
</html>

Perataan Tabel
Posisi tabel dapat diatur pertaannya dengan menyertakan atribut ALIGN pada tag <TABLE>
Contoh:
<html><body>
<TABLE BORDER ALIGN="center">
<TR>
<TH>ALIGN="center"</TH>
<TD>Kolom #A Tengah</TD>
<TD>Kolom #B Tengah</TD>
</TR>
</TABLE><BR>
<TABLE BORDER ALIGN="right">
<TR>
<TH>ALIGN="right"</TH>
<TD>Kolom #A Kanan</TD>
<TD>Kolom #B Kanan</TD>
</TR>
</TABLE><BR>
<TABLE BORDER ALIGN="left">
<TR>
<TH>ALIGN="Left"</TH>
<TD>Kolom #A Kiri</TD>
<TD>Kolom #B Kiri</TD>
</TR>
</TABLE>
</body></html>

Mengatur Isi Sel
Teks dalam sel dapat diatur (align) dengan: Rata kiri, rata tengah, dan rata kanan
Atribut yang digunakan adalah :
Align={“left” | “center” | “right”} pada tag <TD>
Atau
Align={“left” | “center” | “right” | “justify”} pada tag <P> dalam tag <TD>
Contoh:
<html>
<BODY>
<TABLE BORDER="1" CELLSPACING="1" WIDTH="100%">
<TR bgcolor="silver">
<td>Text Rata Kiri</td>
<td>Text Rata Tengah</td>
<td>Text Rata Kanan</td>
<td>Text Rata Kiri-Kanan</td>
</TR>
</TR>
<TR>
<TD ALIGN="left" bgcolor="yellow">Kata-kata dalam sel ini rata KIRI</TD>
<TD ALIGN="center">Kata-kata dalam sel ini rata TENGAH</TD>
<TD ALIGN="right" bgcolor="green"><font color="yellow">Kata-kata dalam sel ini rata KANAN</TD>
<TD><p Align="Justify">Kata-kata dalam sel ini rata KIRI-KANAN</TD>
</TR>
</TABLE>
</BODY>
</html>

Semoga Bermanfaat

Mengenal Fungsi Image Pada HTML

Kali ini sampul ilmu memberikan sedikit pengetahuan tentang HTML,
Image
Image (gambar) dalam suatu web merupakan daya tarik bagi pengunjung. Umumnya browser menampilkan inline image (gambar disajikan bersamaan dengan teks). Image yang dapat ditampilkan dalam web site adalah jenis GIF, JPG, XBM, dan PNG
Bentuk Umum
<img src=“nama_image” [Atribut]>
Atribut Image

Contoh1:
Cara Membuat Gambar Background Di HTML. Buatlah Folder Latihan DiDrive D setelah itu siapkan terlebih dahulu file image/gambar yang ingin dijadikan background (“disini sampul ilmu menggunakan gambar Sampulilmu.png”) Kemudian Buat Halaman coba.html dengan cara klik Notepad kemudian ketikan kode dibawah ini yang berwarna biru
<HTML>
<BODY BACKGROUND="Sampulilmu.png" >
</BODY>
</HTML>
Hasil :

 

Contoh 2:
<HTML>
<BODY<H2>Sahabat Sampul Ilmu</H2><P>
<IMG SRC=" Sampulilmu.png "><BR>
<IMG SRC=" Sampulilmu.png "><BR>
</BODY>
</HTML>

Hasil:

Catatan :
File image/gambar harus berada satu folder dengan Halaman html yang telah dibuat ( sampulilmu.png dan coba.html berada didalam folder Latihan)

Mengubah Ukuran Image
<HTML>
<BODY>
<IMG SRC="sampulilmu.png"> (ukuran asli)
<IMG SRC="sampulilmu.png" WIDTH="45" HEIGHT="60"> (45x60 pixel)
<IMG SRC="sampulilmu.png" WIDTH="180" HEIGH="240"> (180x240 pixel)
</BODY>
</HTML>

Hasil :

Alternatif Image
<HTML>
<BODY>
<IMG SRC="sampulilmu.png" WITH="120" HEIGHT="150" ALT ="Gambar Sampul Ilmu 1">
<IMG SRC="sampulilmu.png" WIDTH=120 HEIGHT=150 ALT="Gambar Sampul Ilmu 2">
</BODY>
</HTML>

Hasil :

Image Border
Memberi bingkai pada image
Contoh :
<HTML>
<BODY><B>
<IMG SRC="Sampulilmu.png" width=90 height=90>
<IMG SRC="Sampulilmu.png" BORDER="5" width=90 height=90>
<IMG SRC="Sampulilmu.png" BORDER="10" width=90 height=90>
</BODY>
</HTML>

Hasil :

Image Sebagai Link
Image juga dapat dijadikan sebagai Link
Bentuk:
<a href=“Sumber”> <img src=“Nama_Image”></a>
Contoh:
Buat Terlebih dahulu Halaman coba1.html masih didalam folder latihan kemudian buka halaman coba.html ketikan kode dibawah ini
<HTML>
<BODY><B>
<p align="center">
<a href="coba1.html"><img src="Sampulilmu.png"></a>
<a href=" coba1.html"><img src="Sampulilmu.png"></a></p>
</BODY>
</HTML>

Semoga Bermanfaat

Mengenal Fungsi Link Dan List Pada HTML

Kali ini sampul ilmu berbagai pengetahuan tentang Cara Membuat Link Dan List pada HTML, Mudah-mudahan dapat dijadikan sebagai bahan pembelajaran buat sahabat sampul ilmu.
LINK HTML
Dokumen HTML menggunakan hyperlink (anchor) untuk menghubungkan dokumen ke dokumen dalam web. Hyperlink biasa disebut dengan hypertext link
Tag Anchor
HTML menggunakan tag <a> untuk membuat link
Link Relatif
Link dalam page ke page yang lain dalam satu komputer
Contoh 1:
Buatlah Folder di Drive D dengan Nama Coba Kemudian Buka Aplikasi Notepad Kemudian Ketikan  <a href=“Contoh2.html”>Next</a> Setelah selesai simpan dengan nama Contoh1.html, sebelum dijalankan buat terlebih dahulu halaman Contoh2.html sama seperti langkah diatas di drive D pada komputer anda. Untuk meliha hasilnya clik Halaman Contoh1.html
Contoh 2:
Buatlah Folder di Drive D dengan Nama Coba setelah itu buat lagi Folder dengan Nama Contoh didalam Folder Coba Kemudian Buka Aplikasi Notepad Kemudian Ketikan  <a href=“/contoh/contoh2.htm”> Berikut</a> Setelah selesai simpan dengan nama Contoh1.html di dalam folder Coba (ingat bukan didalam folder Contoh), sebelum dijalankan buat terlebih dahulu halaman Contoh2.html sama seperti langkah diatas Didalam Folder Contoh. Untuk melihat hasilnya clik Halaman Contoh1.html pada Folder Coba.

Link Absolut
Membuat link web page ke web site lain di Internet.
Contoh:
<a href=“http://www.Facebook.com”> Facebook</a> Membuat link ke Facebook
<a href=“http://www.yahoo.com”> yahoo</a> Membuat link ke web site yahoo

Link ke Bagian lain dalam Dokumen
Link jenis ini dibuat apabila dokumen html cukup panjang
Contoh:
Ketikan <A HREF="#Sampul Ilmu "> Tentang Sampul Ilmu </A> Pada Halaman kerja anda kemudian ketikan artikel sebanyak 1 halaman lebih setelah itu ketikan <A NAME="Sampul Ilmu "></A> <B><U>Tentang Sampul Ilmu :</U></B> kemudian ketikan kembali artikel pada halaman tersebut.

Link ke Windows Baru
Melakukan link ke page lain dan membukanya pada jendela baru
Contoh:
Ketikan <a href=“contoh1.htm” target=“_blank”>Tab Baru</a> pada halaman Contoh2.html yang telah dibuat sebelumnya.

Link yang tidak Tergarisbawahi
Link dapat ditampilkan teks yang tidak digaris bawahi.
Contoh:
Ketikan <a href=" contoh1.html" target ="_blank" Style="text-decoration:none"> Sampul Ilmu</a> pada halaman Contoh2.html yang telah dibuat sebelumnya.

LIST HTML
Bentuk umum untuk mengguraikan suatu daftar
Bentuk-bentuk list

1. List dengan nomor (ordered list)
2. List (unordered list)
3. List Definisi
4. Ordered List

List dibuat dengan menggunkana angka dan atau abjad
Type list ordered (Bukan Angka)

Type bila tidak disebutkan, maka list berbentuk angka Tag yang digunakan adalah <OL> dan berpasangan dengan yag <LI> untuk Listnya
Bentuk:
<OL [[Type”Tipe_list”]/[START=“angka”]]>
<LI> Teks
…..
<LI> Teks
</OL>

Contoh:
<HTML>
<BODY>
<B>Sahabat Sampul Ilmu</B>
<OL TYPE="I">
<B><LI>Contoh</B>
<OL Type="A" START="D" >
<LI>Sampul :
<OL>
<LI>Tekom             
<LI>Pika          
</OL>
<LI>Ilmu :       
<OL>
<LI>Yahoo             
<LI>Facebook            
</OL>
</OL>
<B><LI>Salam Sampul Ilmu</B>
</OL>
</BODY>
</HTML>

Unordered List
List dibuat dengan menggunkana simbol (bullet)
Type list unordered

Tag yang digunakan adalah <UL> berpasangan dengan tag <LI>Bentuk:
<UL [Type”Tipe_list]>
<LI> Teks
…..
<LI> Teks
</UL>

Contoh
<HTML>
<BODY>
<B> Sahabat Sampul Ilmu </B>
<UL>
<LI><B> Sampul Ilmu : </B>
 <UL>
<LI>Sampul :          
<UL>
<LI><U>Tekom</U>       
<LI><U>Pika</U>   
</UL>
<LI>Ilmu :
<UL>
<LI><U>Yahoo</U>
<LI><U>Facebook</U>
</UL>
</UL>
<LI><B>Salam Sampul Ilmu</B>
</ul>
<hr>
<small><Strong>&copy 'Sampul 2013</Strong></small>
</BODY>
</HTML>

Definition List
Untuk mendefinisikan indentasi biasa dan gantung, Tag yang digunakan

Contoh: 1
<HTML>
<BODY>
<DD><I> Kali ini sampul ilmu berbagai pengetahuan tentang Cara Membuat Link Dan List pada HTML, Mudah-mudahan dapat dijadikan sebagai bahan pembelajaran buat sahabat sampul ilmu.  Dokumen HTML menggunakan hyperlink (anchor) untuk menghubungkan dokumen ke dokumen dalam web. Hyperlink biasa disebut dengan hypertext link </I>
<DD>Salam Sampul Ilmu
</BODY>
</HTML>

 Contoh: 2
<HTML>
<BODY>
<DL>
<DT><I>BAB I</I>  <DD><B>Sampul Ilmu.</B> Kali ini sampul ilmu berbagai pengetahuan tentang Cara Membuat Link Dan List pada HTML, Mudah-mudahan dapat dijadikan sebagai bahan pembelajaran buat sahabat sampul ilmu.  Dokumen HTML menggunakan hyperlink (anchor) untuk menghubungkan dokumen ke dokumen dalam web. Hyperlink biasa disebut dengan hypertext link
<DT><I>BAB II</I>
<DD><B>Sahabat Sampul Ilmu</B> Kali ini sampul ilmu berbagai pengetahuan tentang Cara Membuat Link Dan List pada HTML, Mudah-mudahan dapat dijadikan sebagai bahan pembelajaran buat sahabat sampul ilmu.  Dokumen HTML menggunakan hyperlink (anchor) untuk menghubungkan dokumen ke dokumen dalam web. Hyperlink biasa disebut dengan hypertext link
</DL></BODY>
</HTML>

Semoga Bermanfaat

Belajar Struktur Dasar PHP

Sebelum Belajar PHP

Diasumsikan Anda telah mengenal dengan cukup baik komputer Anda, dan juga bisa mengoperasikannya. Jadi Anda seharusnya sudah mengerti perbedaan file dan direktori, bagaimana menyimpan file atau document, bagaimana meng-copy file, dan seterusnya.
Diasumsikan Anda telah mengerti bagaimana membuka dan menggunakan salah satu atau salah semua dari editor seperti Notepad, EditPlus, Crimson Editor, Dreamweaver, atau yang lainnya. Diasumsikan juga, Anda telah mengerti bagaimana membuat, mengedit, dan menyimpan suatu file dengan editor tersebut.
Diasumsikan bahwa Apache, PHP, dan MySQL di komputer yang Anda pakai sudah berjalan sebagaimana mestinya.
Diasumsikan Anda telah mengerti bagaimana cara menggunakan Web Browser (IE, Mozilla, Opera, dsb)
Diasumsikan Anda telah mengenal dan mengerti dengan cukup baik tentang tag-tag HTML dan juga bagaimana menggunakannya.
Diasumsikan bahwa penglihatan Anda masih normal sehingga bisa membedakan antara :

* Tulisan nama, Nama dan NAMA
* Koma ( , ), titik-koma ( ; ) dan titik-dua ( : )
* Kutip-tunggal (‘) dan kutip-ganda (“)
* Tulisan namamhs, nama_mhs dan nama mhs

Diasumsikan Anda pernah menggunakan www.google.com

Mari Mengenal PHP

Tahukah Anda, PHP itu..... 

* Merupakan singkatan recursive dari PHP : Hypertext Prepocessor
* Pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1994.
* Harus ditulis di antara tag :

<? dan ?>
<?php dan ?>
<script language=”php”> dan </script>
<% dan %>

* Setiap satu statement (perintah) biasanya diakhiri dengan titik-koma (;)

CASE SENSITIVE untuk nama identifier yang dibuat oleh user (berupa variable, konstanta, fungsi dll), namun TIDAK CASE SENSITIVE untuk identifier built-in dari PHP. Jadi :
* $nama ≠ $Nama ≠ $NAMA
* hitungLuas() ≠ HitungLuas()
* echo = ECHO
* while = WHILEMudah dipelajari.

Say Hello to PHP

Ketikkan perintah di bawah ini di editor :
Program 2.1
Nama File : hello.php
Deskripsi : Program sederhana menampilkan sebuah string di layar.

<?php
echo "Hello, Nama saya PHP ";
?>

Simpan dengan nama “hello.php” di document-root komputer Anda.
Buka browser dan ketikkan alamat http://localhost/hello.php
Lihat hasilnya di browser. Akan terlihat tampilan seperti pada gambar Dibawah ini

Variabel
Digunakan untuk menyimpan sebuah value, data atau informasi
Nama variabel diawali dengan tanda $
Panjang tidak terbatas
Setelah tanda $ diawali oleh huruf atau under-scrore (_). Karakter berikutnya bisa terdiri dari huruf, angka, dan karakter tertentu yang diperbolehkan (karakter ASCII dari 127-255).
Bersifat case-sensitive.
Tidak perlu dideklarasikan.
Tidak boleh mengandung spasi.
Contoh :

Benar - $_name - $first_name - $name3 - $name_3

Salah - $3name - $name? - $first+name - $first.name - $first name

Program 2.2
Nama File : variabel.php
Deskripsi : Program mengisi dan menampilkan variabel di layar.

<?php
$nim = "0411500400";
$nama = 'Chotimatul Musyarofah';
echo "NIM : " . $nim . "<br>";
echo "Nama : $nama";
?>

Semoga Tutorial ini Dapat Bermanfaat.......
Referensi :
achmatim.net
achmatim@bl.ac.id