Sri Wahyuningsih

MAKALAH PRODUKTIF

Makalah Disusun untuk memenuhi tugas Kelompok Produktif

Oleh Anggota Kelompok yang terdiri dari :

1. Nurfitriyani

2. Indah Permatasari

3. Septiayu prabarani

4. Sri Wahyuningsih

SMK SARADAN

Jl.Raya Tonjong No.18 Tajurhalang Bogor

2013

KATA PENGANTAR

Alhamdulilah kami panjatkan puji dan syukur kepada Tuhan Yang Maha Esa, oleh karena rahmat-Nya penyusun dapat menyelesaikan makalah Kelompok Produktif. Selain sebagai tugas, makalah yang kami buat ini bertujuan memberi informasi kepada para pembaca.
Banyak sekali hambatan dalam penyusunan makalah ini, oleh karena itu ,selesainya makalah ini bukan semata karena kemampuan kami, banyak pihak yang mendukung dan membantu. Dalam kesempatan ini, kami mengucapkan terima kasih banyak kepada pihak-pihak yang telah membantu.
Kami menyadari bahwa dalam penyusunan makalah ini terdapat banyak kesalahan. Oleh sebab itu, kritik dan saran yang membangun sangat kami butuhkan agar kedepannya kami mampu lebih baik lagi.

Bogor, 04 Maret 2013

Penyusun

DAFTAR ISI

Bab I Pendahuluan

A. Latar Belakang

B. Tujuan

Bab II Isi

A. pengertian web dinamis, php, html, mysql, phpmyadmin, jsp, html editor, web server, sql, web browser.

B. Karakteristik java script

C. Langkah – langkah membuat website sederhana

Bab III Penutup

A. Kesimpulan

B. Saran

Daftar Pustaka

BAB I

PENDAHULUAN

A. Latar Belakang

Latar belakang pembuatan makalah ini adalah adanya tugas yang diberikan oleh Guru Produktif. Makalah ini di buat sebagai salah satu untuk pengambilan Nilai Produktif.

Tema Ekonomi di pilih karena menurut penulis masih banyak masalah yang perlu di soroti dalam hal ini. Masalah kemiskinan, dampaknya serta upaya pemerintah untuk mengentaskan kemiskinan yang dari tahun ke tahun tak kunjung memberikan hasil yang menggembirakan membuat semakin menariknya masalah ini untuk di bahas. Selain itu makalah ini di buat sebagai pembelajaran bagi para pembaca terutama bagi penulis. Maka dengan alasan-alasan tersebutlah makalah ini di buat.

B. Tujuan

Makalah ini diangkat dengan asumsi bahwa nyatanya di jaman globalisasi seperti sekarang ini, kemiskinan di Indonesia masih saja merajalela dan seperti tak kunjung usai, karena pembangunan ekonomi di Indonesia tidak berjalan lancar.

BAB II

ISI

A. Pengertian Web dinamis

Web dinamis adalah sebuah web yang isinya dapat dirubah sewaktu-waktu dengan mudah tanpa harus melakukan perubahan code-code seperti yang harus dilakukan pada web statis. Content yang terdapat pada web dinamis pun tersimpan disebuah database, sehingga bagi kita orang-orang yang buta akan coding pun dapat merubah isi content tersebut tanpa harus menguasai bahasa pemrograman web yang biasa disebut dengan coding.
Web dinamis digunakan oleh perusahaan yang sewaktu-waktu produknya dapat berubah dan bertambah dengan cepat, sering mengadakan pameran, sering mengadakan program promo / sale, ataupun perlu dengan segera menginformasikan perkembangan perusahaan dan berita-berita terkini maka sebuah web yang dirancang dengan teliti serta menggunakan Content Management Systems merupakan jawaban yang tepat bagi website dinamis.
Dengan adanya CMS perubahan / penambahan informasi dalam web tidak lagi perlu di sentralisasi ke bagian tertentu (EDP misalnya), tanggung jawab update website dapat didelegasikan dengan mudah kepada departemen-departemen terkait, misalnya untuk mengupdate informasi berita terkini atau event dapat diserahkan ke bagian Customer Service, update produk dan harga dapat didelegasikan kepada bagian penjualan dan seterusnya.
Intinya hampir dari seluruh bagian / isi website dapat dikelola, dikelompokkan, ditambah dan dirubah sewaktu-waktu dengan mudah dan personil yang ditraining juga tidak perlu memiliki pengetahuan komputer khusus untuk dapat menggunakannya.

Pengertian PHP
PHP adalah singkatan dari "PHP: Hypertext Preprocessor", yang merupakan
sebuah bahasa scripting yang terpasang pada HTML. Sebagian besar sintaks mirip
dengan bahasa C, Java dan Perl, ditambah beberapa fungsi PHP yang spesifik.
Tujuan utama penggunaan bahasa ini adalah untuk memungkinkan perancang web
menulis halaman web dinamik dengan cepat.

Hubungan PHP dengan HTML
Halaman web biasanya disusun dari kode-kode html yang disimpan dalam
sebuah file berekstensi .html. File html ini dikirimkan oleh server (atau file) ke
browser, kemudian browser menerjemahkan kode-kode tersebut sehingga
menghasilkan suatu tampilan yang indah. Lain halnya dengan program php, program ini harus diterjemahkan oleh web-server sehingga menghasilkan kode html yang dikirim ke browser agar dapat ditampilkan. Program ini dapat berdiri sendiri ataupun disisipkan di antara kode-kode html sehingga dapat langsung ditampilkan bersama dengan kode-kode html tersebut. Program php dapat ditambahkan dengan mengapit program tersebut di antara tanda . Tanda-tanda tersebut biasanya disebut tanda untuk escaping (kabur) dari kode html. File html yang telah dibubuhi program php harus diganti ekstensi-nya menjadi .php3 atau .php. PHP merupakan bahasa pemograman web yang bersifat server-side
HTML=embedded scripting, di mana script-nya menyatu dengan HTML dan berada di server. Artinya adalah sintaks dan perintah-perintah yang kita berikan akan sepenuhnya dijalankan di server tetapi disertakan HTML biasa. PHP dikenal sebagai bahasa scripting yang menyatu dengan tag HTML, dieksekusi di server dan digunakan untuk membuat halaman web yang dinamis.

Kelebihan PHP
Ketika e-commerce semakin berkembang, situs-situs yang statispun semakin
ditinggalkan, karena dianggap sudah tidak memenuhi keinginan pasar, padahal situs tersebut harus tetap dinamis. Pada saat ini bahasa PERL dan CGI sudah jauh
ketinggalan jaman sehingga sebagian besar designer web banyak beralih ke bahasa
server-side scripting yang lebih dinamis seperti PHP.
Seluruh aplikasi berbasis web dapat dibuat dengan PHP. Namun kekuatan
yang paling utama PHP adalah pada konektivitasnya dengan system database di
dalam web. Sistem database yang dapat didukung oleh PHP adalah :
1. Oracle
2. MySQL
3. Sybase
4. PostgreSQL
5. dan lainnya.

SINTAK DASAR PHP

Cara penulisan PHP
Pertama
echo ("tulisankita\n");
?>
Kedua
php echo("tulisankita\n");
?>
Ketiga
<%
echo ("kalau yang ini mirip dengan ASP");
%>

Seperti pada bahasa pemrograman lain Anda pun bisa meletakkan baris komentar pada program Anda. Pada PHP caranya adalah dengan meletakkan komentar tersebut di sebelah kanan tanda // jika komentar satu baris dan di antara /* dan */ jika komentarnya lebih dari satu baris.

/* kalau yang ini adalah komentar
lebih dari satu baris */
echo ("memang mudah");
?>

Pengenalan PHP

PHP (Hypertext Preprocessor), merupakan bahasa pemrograman web bersifat serverside, artinya bahasa berbentuk script yang disimpan dan dijalankan di komputer server (WebServer) sedang hasilnya yang dikirimkan ke komputer client (WebBrowser) dalam bentuk script HTML (Hypertext Mark up Language). Karakteristik script PHP dapat diuraikan sebagai berikut :

- file PHP disimpan dengan extensi filenya yaitu : *.php3, *.php4, *.php
- Script PHP biasanya diawali dengan tag ‘<?’ atau ‘<?php’ dan ditutup dengan tag
‘?>’
- File PHP dapat menginduk atau disisipkan pada bahasa script lainnya atau dapat
berdiri sendiri. Contoh skrip PHP yang disisipkan pada HTML :
<html>
<head>
<title>Contoh</title>
</head>
<body>
<?php
echo "Hai, Aku adalah skrip PHP!";
?>
</body>
</html>

Sedang bentuk skrip PHP yang berdiri sendiri :
<?php
echo "Hai, Aku adalah skrip PHP!";
?>
NB : echo(), berfungsi untuk menampilkan output.

Hypertext Markup Language (HTML) adalah bahasa yang digunakan untuk menulis halaman web. HTML merupakan pengembangan dari standar pemformatan dokumen teks yaitu Standard Generalized Markup Language (SGML). HTML sebenarnya adalah dokumen ASCII atau teks biasa, yang dirancang untuk tidak tergantung pada suatu sistem operasi tertentu.

HTML dibuat oleh Tim Berners-Lee ketika masih bekerja untuk CERN dan dipopulerkan pertama kali oleh browser Mosaic. Selama awal tahun 1990 HTML mengalami perkembangan yang sangat pesat.

Setiap pengembangan HTML pasti akan menambahkan kemampuan dan fasilitas yang lebih baik dari versi sebelumnya.

Namun perkembangan resmi dikeluarkan pada bulan November 1995 oleh IETF (Internet Engineering Task Force). HTML 2.0 ini merupakan penyempurnaan dari HTML+(1993). HTML 3.0 (1995) memberikan kemampuan lebih daripada versi sebelumnya.

Sebuah usaha dari World Wide Web Consortium’s (W3C) HTML Working Group pada tahun 1996 menghasilkan HTML 3.2. HTML versi ini secara resmi diterbitkan pada bulan Januari 1997. HTML versi terbaru adalah HTML 4.01 yang dikeluarkan secara resmi oleh W3C pada tanggal 24 April 1998. HTML merupakan perbaikan dari HTML 4.0 yang lebih dulu diterbitkan. (18 Desember 1997).

MySQL adalah sebuah perangkat lunak sistem manajemen basis data SQL (bahasa Inggris: database management system) atau DBMS yang multithread, multi-user, dengan sekitar 6 juta instalasi di seluruh dunia.

MySQL AB membuat MySQL tersedia sebagai perangkat lunak gratis dibawah lisensi GNU General Public License (GPL), tetapi mereka juga menjual dibawah lisensi komersial untuk kasus-kasus dimana penggunaannya tidak cocok dengan penggunaan GPL.

Tidak sama dengan proyek-proyek seperti Apache, dimana perangkat lunak dikembangkan oleh komunitas umum, dan hak cipta untuk kode sumber dimiliki oleh penulisnya masing-masing.

MySQL dimiliki dan disponsori oleh sebuah perusahaan komersial Swedia MySQL AB, dimana memegang hak cipta hampir atas semua kode sumbernya. Kedua orang Swedia dan satu orang Finlandia yang mendirikan MySQL AB adalah: David Axmark, Allan Larsson, dan Michael “Monty” Widenius.

Phpmyadmin adalah perangkat lunak bebas yang ditulis dalam bahasa pemrograman PHP yang digunakan untuk menangani administrasi MySQL melalui Jejaring Jagat Jembar (World Wide Web).

PhpMyAdmin mendukung berbagai operasi MySQL, diantaranya (mengelola basis data, tabel-tabel, bidang (fields), relasi (relations), indeks, pengguna (users), perijinan (permissions), dan lain-lain).

Pengembangan phpMyAdmin dimulai pada tahun 1998 oleh Tobias Ratschiller seorang konsultan IT. Ratschiller mengerjakan sebuah program bernama MySQL-Webadmin dengan bebas, yang merupakan produk dari Petrus Kuppelwieser, yang telah berhenti mengembangkannnya pada saat itu. Ratschiller menulis kode baru untuk phpmyadmin, dan ditingkatkan pada konsep dari proyek Kuppelwiesser. Ratschiller meninggalkan proyek phpMyAdmin pada tahun 2001.

Sekarang, Sebuah tim dari delapan pengembang yang dipimpin oleh Oliver Muller meneruskan pengembangan phpMyAdmin di SourceForge.net

Beberapa pengembang diantaranya ialah :

Marc Delisle
Michal Čihař
Sebastian Mendel
Herman van Rink.

Java Server Page (JSP) adalah suatu bahasa pemrograman web yang berjalan di platform java, serta merupakan bagian teknologi java 2 Enterprise Edition (J2EE).

JSP sangat sesuai dan tangguh untuk menangani presentasi di web dengan dukungan Application Programming Interface (API) yang lengkap dan portabilitas serta memberikan sarana untuk

membuat suatu aplikasi yang memisahkan antara business logic (sistem), presentasi dan data (Rickyanto, 2002).

JSP diciptakan untuk menyederhanakan layer presentasi yang bersifat dinamis dengan cara memisahkan isi yang bersifat statis dengan isi yang bersifat dinamis pada suatu halaman.

JSP dirancang sebagai layer presentasi dari suatu aplikasi web, dimana JSP menambahkan program java pada halaman web yang bersifat statis (Setyabudi, 2002).

Halaman JSP juga mengandung unsur-unsur yang memungkinkan server untuk memasukkan content dinamis di halaman.

Unsur JSP dapat digunakan untuk berbagai tujuan, misalnya mengambil informasi dari database. JSP menetapkan sejumlah elemen standar yang berguna untuk aplikasi web, seperti mengakses komponen JavaBean (Bergsten, 2002).

Html editor adalah aplikasi yang digunakan untuk membuat halaman web. Meskipun tag html sebuah web dapat ditulis menggunakan editor apapun, html editor khusus menyediakan kenyamanan dan fungsionalitas yang baik. Sebagai contoh, beberapa html editor bekerja tidak hanya dengan html, tapi juga dengan teknologi yang berhubungan seperti CSS, XML dan Javascript.

Pada beberapa kasus mereka juga mengatur komunikasi dengan web server melalui FTP dan Webdav, serta manajemen versi seperti CVS atau Subversion.

Web server merupakan software yang memberikan layanan data yang berfungsi menerima permintaan HTTP atau HTTPS dari klien yang dikenal dengan browser web dan mengirimkan kembali hasilnya dalam bentuk halaman – halaman web yang umumnya berbentuk dokumen HTML.

Macam – macam Web Server diantanya:

Apache Web Server – The HTTP Web Server
Apache Tomcat
Microsoft windows Server 2003 Internet Information Services (IIS)
Lighttpd
Sun Java System Web Server
Xitami Web Server
Zeus Web Server

Namun web yang terkenal dan yang sering digunakan adalah Apache dan Microsoft Internet Information Service (IIS).

Pengertian SQL(Structured Query Language) adalah sebuah bahasa yang dipergunakan untuk mengakses data dalam basis data relasional. Bahasa ini secara de facto merupakan bahasa standar yang digunakan dalam manajemen basis data relasional.

Saat ini hampir semua server basis data yang ada mendukung bahasa ini untuk melakukan manajemen datanya. Mengetahui perintah perintah dasar sql merupakan modal awal untuk pengembangan database.

Create Database
Pertama yang kita lakukan untuk belajar tentang SQL server yaitu membentuk pertama kali database yang akan kita gunakan untuk tempat belajar.
Create Table
Insert Table
Perintah Select
Perintah Select merupakan perintah untuk menampilkan data baik secara keseluruhan maupun dengan kondisi tertentu.
Perintah Where
Setelah menggunakan perintah Select untuk menampilkan data secara keseluruhan dan untuk menampilkan data dengan kondisi tertentu digunakan perintah Select dan ditambahkan perintah where diikuti dengan kondisi yang ingin ditampilkan.

Web Browser adalah Dikenal juga dengan istilah browser, atau peselancar, atau internet browser. Adalah suatu program komputer yang menyediakan fasilitas untuk membaca halaman web di suatu komputer.

Dua program web browser yang cukup populer saat ini adalah Microsoft Internet Explorer dan Netscape Navigator.

Program browser pertama adalah Mosaic, yang merupakan suatu text browser, yang sekarang web browser telah berkembang ke dalam bentuk multimedia.

Kegunaan

Adapun kegunaan HTML, PHP, phpmyadmin, Mysql, Web browser adalah :

• Memodifikasi format teks

Penggunaan HTML memungkinkan kita untuk memodifikasi tampilan atau format dokumen yang akan kita transmisikan melalui media Internet. Beberapa hal yang dapat dilakukan dalam menentukan format dokumen ini adalah :

Kita dapat menampilkan suatu kelompok kata dalam beberapa ukuran yang dapat digunakan untuk judul, heading dan sebagainya.
Kita dapat menampilkan teks dalam bentuk cetakan tebal
Kita dapat menampilkan sekelompok kata dalam bentuk miring
Kita dapat menampilkan naskah dalam bentuk huruf yang mirip dengan hasil ketikan mesin ketik
Kita dapat mengubah-ubah ukuran font untuk suatu karakter tertentu.

• Menampilkan daftar sesuatu dalam bentuk point-point (item)

Dengan HTML kita dapat menampilkan daftar atau deretan informasi dalam bentuk point-point sehingga lebih mudah dibaca dan dipahami

• Membuat link

Konsep hypertext pada HTML memungkinkan kita untuk membuat link pada suatu kelompok kata atau frase untuk menuju ke bagian manapun dalam World Wide Web. Ada tiga macam link yang dapat kita gunakan :

Link menuju bagian lain dari page
Link menuju page lain dalam satu web site
Link menuju resource atau web site yang berbeda

• Menyisipkan citra

Dengan menyisipkan citra maka tampilan page kita akan lebih menarik, interaktif dan informatif untuk mendukung data-data lainnya dalam bentuk teks.

• Menampilkan informasi dalam bentuk tabel

Penampilan informasi dalam bentuk tabel ini akan mempermudah pembaca untuk memahami informasi yang kita tawarkan.

Penggunaan tabel ini juga dapat dilakukan untuk menambah nilai estetika dari page yang akan kita rancang.

Kegunaan php untuk membuat tampilan web menjadi lebih dinamis, dengan php kita bisa menampilkan atau menjalankan beberapa file dalam 1 file dengan cara di include atau require, bingung kan… dan php itu sendiri sudah bisa beriteraksi dengan beberapa database walaupun dengan kelengkapan yang berbeda, yaitu seperti :

DBM,
FilePro (Personic, Inc),
Informix,
Ingres,
InterBase,
Microsoft Access,
MSSQL,
MySQL,
Oracle
PostgrSQL,
Sybase.

MySQL sangat populer dalam aplikasi web seperti MediaWiki (perangkat lunak yang dipakai Wikipedia dan proyek-proyek sejenis) dan PHP-Nuke dan berfungsi sebagai komponen basis data dalam LAMP.

Popularitas sebagai aplikasi web dikarenakan kedekatannya dengan popularitas PHP, sehingga seringkali disebut sebagai Dynamic Duo.

Phpmyadmin di gunakan untuk menangani administrasi MySQL melalui Jejaring Jagat Jembar (World Wide Web).

phpMyAdmin mendukung berbagai operasi MySQL, diantaranya (mengelola basis data, tabel-tabel, bidang (fields), relasi (relations), indeks, pengguna (users), perijinan (permissions), dan lain-lain).

Web browser digunakan untuk memperoleh informasi dengan format hypertext. Web browser akan mengirimkan request ke web server, dan menampilkan hasilnya ke pengguna.

Selain itu web browser juga dapat mengirimkan form ke web server untuk diproses. Contoh dari web browser adalah NCSA Mosaic, Netscape Navigator, MacWeb, IE, Opera, Conqueror, dll.

Web server adalah berfungsi sebagai pengendali dari sebuah web yang didirakan tu,, dan apabila server atau komputer yng dipakai sbg server mati maka kita tidak bisa masuk.

Oleh sebab itu bila kita mengunjungi web yang mempunyai server sendiri kalau terjadi error jangan berburuk sangka dengan software yang anda pakai atau koneksi anda.

B. KARAKTERISTIK JavaScript

Javascript diperkenalkan pertama kali oleh Netscape pada tahun 1995. Pada awalnya bahasa ini dinamakan “LiveScript” yang berfungsi sebagai bahasa sederhana untuk browser Netscape Navigator 2. Pada masa itu bahasa ini banyak di kritik karena kurang aman, pengembangannya yang terkesan buru buru dan tidak ada pesan kesalahan yang di tampilkan setiap kali kita membuat kesalahan pada saat menyusun suatu program. Kemudian sejalan dengan sedang giatnya kerjasama antara Netscape dan Sun (pengembang bahasa pemrograman “Java” ) pada masa itu, maka Netscape memberikan nama “JavaScript” kepada bahasa tersebut pada tanggal 4 desember 1995. Pada saat yang bersamaan Microsoft sendiri mencoba untuk mengadaptasikan teknologi ini yang mereka sebut sebagai “Jscript” di browser Internet Explorer 3.

Javascript adalah bahasa yang berbentuk kumpulan skrip yang pada fungsinya berjalan pada suatu dokumen HTML, sepanjang sejarah internet bahasa ini adalah bahasa skrip pertama untuk web. Bahasa ini adalah bahasa pemrograman untuk memberikan kemampuan tambahan terhadap bahasa HTML dengan mengijinkan pengeksekusian perintah perintah di sisi user, yang artinya di sisi browser bukan di sisi server web.

Javascript bergantung kepada browser(navigator) yang memanggil halaman web yang berisi skrip skrip dari Javascript dan tentu saja terselip di dalam dokumen HTML. Javascript juga tidak memerlukan kompilator atau penterjemah khusus untuk menjalankannya (pada kenyataannya kompilator Javascript sendiri sudah termasuk di dalam browser tersebut). Lain halnya dengan bahasa “Java” (dengan mana JavaScript selalu di banding bandingkan) yang memerlukan kompilator khusus untuk menterjemahkannya di sisi user/klien.

Skrip dari JavaScript terletak di dalam dokumen HTML. Kode tersebut tidak akan terlihat dari dalam jendela navigator anda, karena diantara tag (kalau anda mengerti HTML pasti tahu dengan istilah ini) tertentu yang memerintahkan navigator untuk memperlakukan bahwa skrip tersebut adalah skrip dari JavaScript.

Satu hal yang harus diperhatikan bahwa JavaScript adalah bersifat “CASE SENSITIVE”, artinya huruf besar dan kecil sangat berpengaruh. Contoh dari skrip yang menunjukkan bahwa skrip tersebut adalah skrip dari JavaScript adalah sebagai berikut :

<--Contoh deklarasi 1-->

 <SCRIPT LANGUAGE="JavaScript">

 Tempat meletakkan skrip

 </SCRIPT>

<--Contoh deklarasi 2-->

 <script language="JavaScript">

 Tempat meletakkan skrip

 </script>

Terlihat perbedaan antara contoh 1 dan contoh 2, yaitu pada penulisan “<SCRIPT LANGUAGE….>” dan “</SCRIPT>”. Kita menulisnya sejenis, huruf besar semua atau huruf kecil semua. Secara umum pemberlakuan aturan penulisna skrip ini diterima semua browser.

MENULIS KOMENTAR DALAM SKRIP.

Seperti dalam banyak bahasa pemrograman lainnya, sangat dianjurkan untuk menambahkan komentar komentar di dalam skrip atau kode program yang kita bikin. kegunaannya antara lain adalah :

• Mengingatkan kita akan bagian bagian khusus di dalam skrip tersebut, jika kita ingin merubah sesuatu di dalamnya.

• Membuat orang yang tidak mengerti skrip kita, menjadi mengerti dengan petunjuk petunjuk yang kita buat melalui komentar komentar.

Untuk menulis komentar di JavaScript, kita bisa menggunakan cara yang sama dengan aturan yang ada di bahasa C/C++ ataupun Java.

• Untuk menulis komentar  dalam satu baris kita gunakan karakter dobel slash.

 // semua karakter di belakang // tidak akan di eksekusi

• Untuk menulis komentar yang terdiri dari beberapa baris kita gunakan karakter /* dan */

         /* Semua baris antara 2 tanda tersebut

tidak akan di eksekusi oleh

      kompilator */

PERINTAH MENCETAK.

Pada contoh berikut ini adalah contoh skrip JavaScript didalam suatu dokumen HTML, disini kita akan membuat satu program untuk menampilkan kalimat dalam halaman, sementara contoh yang kedua adalah menampilkan satu kotak dialog pada saat kita membuka dokumen HTML.

Contoh deklarasi mencetak teks ke halaman web:

<HTML>

<HEAD>

<TITLE>Contoh Program Javascript</TITLE>

</HEAD>

<BODY>

<SCRIPT LANGUAGE="JavaScript">

document.write ("Mencetak teks");

</SCRIPT>

</BODY>

</HTML>

Hasil:

Contoh deklarasi mencetak teks dengan alert:

<HTML>

<HEAD>

<TITLE>Contoh Program Javascript</TITLE>

</HEAD>

<BODY>

<SCRIPT language="Javascript">

<!--

alert("Mencetak teks dengan alert..");

// -->

</SCRIPT>

</BODY>

</HTML>

Hasil:

Cara berikutnya adalah cara lain untuk menuliskan kode program JavaScript dalam suatu file teks dan kemudian file teks yang berisi kode JavaScript di panggil dari dalam dokumen HTML (khusus Netscape mulai versi 3 keatas). Kode yang kita sisipkan kedalam dokumen HTML adalah sebagai berikut :

   <SCRIPT LANGUAGE="Javascript" SRC="url/file.js"> </SCRIPT>

dimana url/file.js adalah adalah lokasi dan nama file yang berisi kode JavaScript, jika perintah tambahan SRC tidak disertakan maka tag Script akan mencari kode yang terletak di dalam tag Script.

• Melalui event tertentu

Event adalah sebutan dari satu action yang dilakukan oleh user, contohnya seperti klik tombol mouse. Kodenya dapat di tulis sebagai berikut :

<tag eventHandler="kode Javascript yang akan dimasukkan">

dimana eventHandler adalah nama dari event tersebut.

TANDA PENGHUBUNG.

Tanda penghubung dalam JavaScript adalah (+). Tanda ini digunakan untuk menghubungkan variable dan string, atau variabel dan variabel.

Contoh:

Nama=”STMIK”

Document.write(“nama kampus:”+Nama) \\Hasil: ‘nama kampus:STMIK’.

PERINTAH INPUT.

Perintah dalam JavaScript dapat menggunakan perintah prompt.

Deklarasi prompt adalah sebagai berikut:

Variable=prompt(“keterangan”,””)

Contoh deklarasi:

<HTML>

<HEAD>

<TITLE>Contoh Program Javascript</TITLE>

</HEAD>

<BODY>

kata=prompt("contoh kalimat","")

document.write("kata yang tadi diinputkan adalah:"+kata)

</SCRIPT>

</BODY>

</HTML>

Hasil:

METODE CONFIRM.

Confirm adalah metode dalam javascript yang menampilkan jendela konfirmasi. Jika dilihat fungsinya, confirm bisa dikategorikan sebagai input yang memuat nilai boolean yaitu : TRUE dan FLASE.

Contoh deklarasi:

Jika memilih Ok berarti bernilai TRUE, jika Cancel berarti bernilai FALSE.

WINDOW.LOCATION

Window.location adalah interface yang berfungsi untuk melakukan redirect ke halaman lain. Misalnya dalah sebuah halaman-A diisi script window.location yang menuju ke halaman-B maka ketika membuka halaman-A akan langsung membuka halaman-B.

Perintah window.location adalah sebagai berikut:

Window.location=”alamat_file”

Contoh :

<html>

<head>

</head>

<body>

window.location="lat33.htm"

</script>

</body>

</html>

Hasil:

( yang terbuka adalah file lat33.htm )

Latihan.

Buatlah deklarasi yang menampilkan hasil sebagai berikut:

C. Langkah-langkah Membuat Website Sederhana

Berikut ini adalah langkah-langkah untuk membuat website sederhana

1. Membuka Program Noteped

Klik Start > All Program > Accessories > Notepad untuk membuka program Notepad.

2. Tampilan Program Notepad

Tampilan program Notepad seperti gambar di bawah ini. Di Notepad ini nanti kita akan mengetik tag HTML untuk membuat sebuah halaman web.

3. Membuat Bagian Kepala dan Badan Website

Sebuah halaman web terdiri dari dua bagian, yaitu bagian kepala dan badan. Bagian kepala memberi nama website kita, sedangkan bagian badan berisi halaman inti sebuah web. Bagian kepala dan bagian badan ini nantinya akan membentuk sebuah kesatuan halaman website yang akan kita buat. Tuliskan tag tag berikut dalam Notepad untuk membuat bagian kepala dan badan web.

<html>

<head>

<title>

Website Saya

</title>

</head>

<body>

Selamat datang di website saya

</body>

</html>

adalah beberapa contoh tag yang dipakai untuk membangun sebuah halaman website. Pada contoh di atas terlihat bahwa setiap tag mempunyai pasangan yang ditambahi dengan tanda slash (/). Perlu diingat bahwa tidak semua tag mempunyai pasangan seperti contoh di atas, dan tag-tag yang tidak mempunyai pasangan akan kita bahas di nomer selanjutnya. Kalimat atau kata yang kita tuliskan di antara tag <title> </title> merupakan judul atau deskripsi dari website kita. Sedangkan kalimat di antara <body> </body> merupakan isi dari website kita. Kalau sudah anda ketik klik File > Save / Save As , dan simpan dengan nama file index.html. File ini akan mempunyai icon Internet Explorer atau icon web browser lain yang anda gunakan dalam komputeranda. Klik icon ini untuk melihat tampilan halaman web yang telah anda buat.

Terlihat bahwa di bagian atas halam website terdapat kata kata yang anda tuliskan di antara tag <title> </title>, sedangkan dalam badan website terdapat tulisan yang anda tuliskan di antara tag <body> </body>.

4. Menambah Warna Background website

Warna background website anda dapat anda ubah dengan menambahkan vkata “bgcolor = warna” setelah tag body. Misalnya anda ingin memberi warna hitam website anda maka anda tinggal tambahkan kode berikut :

Bila sudah anda tambahkan ke ketikan anda dalam Notepad kemudian disave, dan selanjutnya tekan tombol refresh dalam web browser anda. Tampilan website anda akan berubah menjadi seperti di bawah ini. Bila anda ingin mengubahnya menjadi warna lainnya anda tinggal ubah warna yang diketik setelah bgcolor, misalnya : red, green, blue, atau warna lainnya.

5. Menjadikan Gambar Sebagi Background Website

Anda bisa juga menjadikan sebuah gambar sebagai background website anda dengan menambahkan kode : “background = file gambar” setelah tag body. Misalnya anda ingin menjadikan file gambar pemandangan.jpg sebagai background halaman website anda maka anda tinggal tambahkan kode berikut :

Save dan klik refresh. Tampilan website anda akan seperti gambar di bawah ini.

Perlu diingat bahwa menggunakan gambar sebagai background halaman website anda akan memperlambat loading halaman website anda, terutama bila ukuran file gambar ini terlalu besar. Karena itu usahakan sebisa mungkin agar background website anda tidak menggunakan file gambar

6. Merubah Tulisan dalam Website

Seperti halnya background website, tulisan dalam website pun bisa juga diubah ubah warnanya. Selain itu jenis dan ukuran tulisan bisa juga kita ubah ubah. Untuk itu kita perlu menyisipkan tag <font> </font> dalam tag <body> </body>. Untuk mengubah warna tulisan kita tambahkan kode “color” setelah font, untuk mengubah jenis tulisan kita tambahkan kode “face”, dan untuk mengubah ukuran tulisan kita tambahkan kode “size”. Khusus untuk size kita bisa mengubah ubah ukurannya dari -7 sampai +7, bila nilainya semakin besar maka semakin besar pula huruf yang akan ditampilkan dalam halaman web. Kita bisa mengubah satu, dua, atau tiga pengaruh tag tag di atas secara bersamaan dengan dipisahkan spasi. Misal kode yang kita tuliskan dalam Notepad :

<html>

<head>

<title>

Website Saya

</title>

</head>

Selamat datang di website saya

</font>

</body>

</html>

Kode di atas berarti memberi pengaruh tulisan warna putih berjenis Verdana dan berukuran +3. Save dan refresh browser untuk melihat pengaruhnya. Anda bia juga menambahkan efek tulisan bergerak dengan menyisipkan tag <marquee> </marquee> sebelum kode <font> </font>

Untuk mengatur posisi tulisan bisa kita sisipkan tag <posisi> </posisi> di antara tulisan yang kita tuliskan. Posisi kita isi dengan “left”, “center”, atau “right”. Misalkan kita ingin membuat posisi tulisan ke tengah, maka kita ketikkan:

<center> Selamat datang di website saya </center>

7. Menyisipkan Gambar atau Foto Dalam Website

Anda bisa menyisipkan foto atau gambar anda dalam website anda dengan mengetikkan tag <img src = file foto anda>. Misalkan file yang ingin anda masukkan bernama bajaj.jpg, maka tag yang perlu anda tuliskan adalah :

Untuk memberi jarak antara tulisan anda sebelumnya dengan foto ini maka perlu anda tambahkan tag <br>.

<font color = white face = verdana size = +3 align = center> Selamat datang di website saya <br> <img src = bajaj.jpg> </font>

Tampilan website anda akan seperti ini. Ukuran gambar bisa anda atur dengan menambahkan kode “height = ukuran”, dan/atau “width = ukuran”. Misalkan anda ingin gambar anda mempunyai tinggi 100 pixel maka anda tinggal tambahkan “height = 100” setelah kode nama file gambar yang anda sisipkan.

8. Menambahkan Menu dalam Website

Selanjutnya tinggal anda tambahkan menu-menu dalam website anda. Menu standar yang ada dalam web sederhana biasanya adalah profil, galeri foto, dan link. Untuk itu kita perlu menambah halaman baru yang mempunyai nama file profil.html, galeri.html, dan link.html. Untuk membuat halaman halaman ini anda bisa mengulangi langkah langkah yang telah dijelaskan sebelumnya. Untuk menghubungkan halaman utama website dengan halaman halaman tambahan ini kita perlu ketikkan tag <a href = profil.html> dan ditutup dengan </a> bila kita ingin menghubungkan dengan halaman profil, demikian pula untuk halaman web lainnya. Kode berikut akan menampilkan hubungan antar halaman website yang berjejer.

<a href = profil.html> Profil </a> <a href = galeri.html> Galeri </a> <a href = link.html> Link </a>

Klik Save dan refresh sehingga ditampilkan halaman website seperti berikut. Bila link yang anda buat benar maka kursor mouse akan berubah menjadi tangan bila anda dekatkan ke link yang anda buat.

9. Link untuk Halaman profil, galeri

Untuk halaman profil, galeri, dan link bisa anda tambahkan sesuka anda seperti langkah langkah sebelumnya. Khusus untuk halaman link, anda bisa mengisinya dengan link ke Friendster, Yahoomail, Google, dan sebagainya. Link yang telah dijelaskan di atas bila kita klik maka halaman baru akan dibuka dalam satu jendela browser yang sama. Bila kita ingin tetap menikmati halaman website kita sedangkan kita juga ingin membuka Friendster misalnya, maka kita perlu menambahkan tag “target = “_blank” setelah alamat Friendster. Misal :

<a href = http://www.friendster.com target = “_blank”> Friendster </a>

Bila anda ingin Friendster ini dibuka di halaman web yang sama maka anda

tinggal hilangkan saja “target = “_blank” nya.

10. Link ke Halaman Profil Berupa Gambar

Bila anda ingin link ke halaman profil anda berupa gambar profil.jpg misalnya, maka anda perlu menyisipkan file gambar di dalam tag <a href = profil.html> </a>. Sehingga dapat kita tuliskan sebagai berikut :

Bila benar maka kursor mouse akan berubah menjadi tangan bila didekatkan ke gambar profil.jpg. Demikian pula bila link ke Friendster atau Yahoomail juga dalam bentuk gambar, maka anda tinggal menambahkan tag <img src = gambar> di antara tag <a href = link > </a>.

BAB III

PENUTUP

A. Kesimpulan

Perkembangan jumlah website semakin memberikan peluang kerja bagi para programmer web. Namun demikian banyak hal yang perlu disiapkan oleh seorang programmer web agar web yang dibangun dapat memenuhi standar. Banyak celah yang akan muncul, sehingga pemrogram web harus lebih cermat.

Website adalah kumpulan halaman yang menampilkan informasi data teks, data gambar diam atau gerak, data animasi, suara, video, atau gabungan dari semuanya, baik yang bersifat statis atau dinamis yang membentuk satu rangkaian bangunan yang saling terkait dimana masing-masing dihubungkan dengan jaringan-jaringan halaman (hyperlink) yang diidentifikasi oleh pengenal global yang disebut Uniform Resource Identifier (URI). Sedangkan Hyper Text Markup Language (HTML) adalah bahasa markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah browser Internet yang berbasiskan standar World Wide Web Consortium (W3C).

HTML berisi perintah-perintah yang telah terstruktur berupa tag-tag penyusun dan terdiri dari dua bagian yaitu Header dan Body. Struktur HTML diapit oleh tag awal <HTML> dan tag akhir </HTML>.

B. Saran

1. Untuk membuat program HTML sebaiknya mengenal struktur dasarnya, dan juga memperhatikan tampilannya supaya menarik.

2. Bahasa HTML ini masih jauh lebih mudah dari bahasa PHP. Karena itu, sering seringlah berlatih dan jangan cepat merasa puas bila anda sudah mempunyai website pribadi. Selamat berkarya!

DAFTAR PUSTAKA

http://www.balinter.net/news_108_Pengertian_Website.html

http://www.box.net/shared/j1nnyn4fse

http://www.informatika.org/~rinaldi/…/MakalahIF5054-2007-A-003.pdf

http://www.maswahyu.com/…/Pembuatan%20Website%20Sederhana%20Menggunakan%20HTML&#8230

http://www.njouba.com/makalah-pemrograman-web

http://www.web.htmldhinata.com/bahasa-pemrograman-web-design-bagian-1.html.