Senin, 12 Mei 2014



MATERI PERKULIAHAN HTML DAN JAVASCRIPT
 
BASIC penulisan javascript
<html>
<body>
<script type="text/javascript">
...
</script>
</body>
</html>
Contoh:
<html>
<body>
<script type="text/javascript">
 document.write("Belajar Javascript")
</script>
</body>
</html>

Jenis penulisan javascript
1.        Head section
Format penulisan:
<html>
<head>
<script type="text/javascript">
....
</script>
</head>

Contoh:
<html>
<head>
<script type="text/javascript">
function message()
{
alert("This alert box was called with the onload event")
}
</script>
</head>
<body onload="message()">
</body>
</html>

2.        Body section
Format penulisan:
<html>
<head>
</head>
<body>
<script type="text/javascript">
document.write("Tulisan ini akan tampil pada saat loding ")
</script>
</body>
</html>

3.        External script
Contoh:
<html>
<head>
<script src="xxx.js"></script>
</head>
<body>
</body>
</html>

Penggunaan Variabel pada Javascript
Format penulisan variabel:
Var namavar = “value”
     atau
 Namavar = “value”

Contoh:
<html>
<body>
<script type="text/javascript">
var name = "Hege"
document.write(name)
document.write("<h1>"+name+"</h1>")
</script>
<p>Contoh pendeklarasian variabel dan penggunaannya</p>
<p>nilai variabel akan langsung tampil</p>
</body>
</html>







JavaScript Popup Boxes

 Di dalam bahasa JavaScript kita dapat membuat kotak pesan popup. Kotak pesan dalam javascript mempunyai 3 type yaitu:
1.       Alert box
2.       Alert box with line breaks
3.       Confirm box
4.       Prompt box

 

Alert Box

Alert box di gunakan untuk memberikan informasi pesan kepada user dan bila user yakin dengan pilihannya. Alert box ini mempunyai satu tombol “OK” untuk melanjutkan proses.

Syntax:
alert("sometext")
Contoh:
<html>
<head>
<script type="text/javascript">
function disp_alert()
{
alert("I am an alert box!!")
}
</script>
</head>
<body>
  <input type="button" onclick="disp_alert()" value="Display alert box" />
</body>
</html>

 

 

Alert Box and line breaks

<html>
<head>
<script type="text/javascript">
function disp_alert()
{
alert("Hello again! This is how we" + '\n' + "add line breaks to an alert box!")
}
</script>
</head>
<body>
<input type="button" onclick="disp_alert()" value="Display alert box" />

</body>
</html>

Confirm Box

 Confirm box biasanya di gunakan jika kita ingin memberikan penyataan kepada user untuk memberikan pilihan jawaban apakah akan terus di lanjutkan atau di batalkan. Kotak confirm box memberikan dua tombol pilihan kepada user berupa tombol “OK” dan tombol “Cancel”. Jika pilihan tombol “OK” maka  halaman web akan diproses jika pilihan tombol “Cancel” maka halaman tidak akan diproses.
Syntax:
confirm("sometext")

Contoh:
<html>
<head>
<script type="text/javascript">
function disp_confirm()
  {
  var r=confirm("Press a button")
  if (r==true)
    {
    document.write("You pressed OK!")
    }
  else
    {
    document.write("You pressed Cancel!")
    }
  }
</script>
</head>
<body>

<input type="button" onclick="disp_confirm()" value="Display a confirm box" />

</body>
</html>

Prompt Box

 Prompt box biasanya di gunakan untuk memberikan pesan kepada user agar user memberikan inputan sebelum halaman web itu diproses. Ketika prompt box muncul, dan user diminta untuk mengklik tombol awal yang kemudian akan muncul box yang harus di input oleh user sesuai dengan pertanyaan yang di ajukan.
 Setelah di input kemudian user mengklik tombol "OK" atau "Cancel". Untuk melanjutkan proses pilih tombol “OK” dan browser akan menampilkan hasil. Jika tombol “Cancel” kotak box akan kembali  kosong untuk mengulang.

Syntax:
prompt("sometext","defaultvalue")
Contoh:
<html>
<head>
<script type="text/javascript">
function disp_prompt()
  {
  var name=prompt("Please enter your name","Harry Potter")
  if (name!=null && name!="")
    {
    document.write("Hello " + name + "! How are you today?")
    }
  }
</script>
</head>
<body>
<input type="button" onclick="disp_prompt()" value="Display a prompt box" />
</body>
</html>


Fungsi pada JavaScript

Fungsi merupakan blok kode yang akan di jalankan pada saat nama function itu jalankan oleh event tertentu atau pada saat function itu di panggil. Fungsi ini juga dapat di jalankan oleh browser pada saat loading sebuah halaman web.
 Function juga bisa di panggil di halaman web mana saja dengan cara kita membuat file external berupa file .JS (extention file javascrip). Yang berisi syntak javascript. File itu kita panggil pada halaman web yang yang mau sisipkan javacscript.
Function dapat di definisikan di bagian <head> dan bagian <body> dari halaman web. Jika kita menginginkan script itu di panggil pada saat halaman web di load maka kita tempatkan script itu di bagian <head>

Contoh:


<html>
<head>
<script type="text/javascript">
function displaymessage()
{
alert("Hello World!")
}
</script>
</head>
<body>
<form>
<input type="button" value="Click me!" onclick="displaymessage()" >
</form>
</body>
</html>

Output dari scrip di atas adalah akan muncul tombol yang harus di clik bila ingin menampilkan pesan nya.

Bagaimana cara mendefinisikan sebuah Fungsi

Sintak untuk membuat fungsi adalah:
function namafungsi (var1,var2,...,varX)
{
kode teks
}
Keterangan:
·          var1, var2, adalah variable atau nilai suatu fungsi.
·          Nilai fungsi harus di awali dan di akhiri dengan tanda kurung kurawal. { }
·          Bila variable, parameter atau nilai tidak ada maka tanda kurung harus tetap di gunakan.()
·          Di sarankan untuk tidak menggunakan huruf capital pada javascript lebih baik gunakan huruf kecil semua. Untuk nama fungsi, nama variable, parameter dan lainya di sarankan untuk menggunakan huruf kecil semua.

Contoh:
 
function prod(a,b)
{
x=a*b
return x
}

 

 

Jenis Fungsi:

Bahasa Javascript mempunyai beberapa type penulisan function. Di antaranya adalah:

1.    Function Basic
How to call a function.
2.    Function with arguments
How to pass a variable to a function, and use the variable in the function.
3.    Function with arguments 2
How to pass variables to a function, and use these variables in the function.
4.    Function that returns a value
How to let the function return a value.
5.    A function with arguments, that returns a value
How to let the function find the product of two arguments and return the result.
Contoh Fungsi:
<html>
<head>
<script type="text/javascript">
function myfunction()
{
alert("HELLO")
}
</script>
</head>
<body>
<form>
<input type="button" onclick="myfunction()"  value="Call function">
</form>
<p>Tekan tombol untuk memanggil Function.</p>
</body>
</html>

Contoh 1: Fungsi dengan argumen:
<html>
<head>
<script type="text/javascript">
function myfunction(txt)
{
alert(txt)
}
</script>
</head>
<body>
<form>
<input type="button" onclick="myfunction('Hello')" value="Call function">
</form>
<p>Tekan tombol untuk memanggil function nya</p>
</body>
</html>
Output:
Contoh 2: Fungsi dengan argumen
<html>
<head>
<script type="text/javascript">
function myfunction(txt)
{
alert(txt)
}
</script>
</head>
<body>
<form>
<input type="button"  onclick="myfunction('Good Morning!')" value="In the Morning">
<input type="button" onclick="myfunction('Good Evening!')" value="In the Evening">
</form>
<p>Pilih Tombol untuk memanggil Function nya.</p>
</body>
</html>
Output:
Contoh fungsi dengan nilai kembalian
<html>
<head>
<script type="text/javascript">
function myFunction()
{
return ("Hello, have a nice day!")
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(myFunction())
</script>
<p>The script in the body section calls a function.</p>
<p>The function returns a text.</p>
</body>
</html>
Contoh fungis dengan nilai kembalian
<html>
<head>
<script type="text/javascript">
function product(a,b)
{
return a*b
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(product(4,3))
</script>
<p>Script dalam bagian body memanggil fungsi dengan 2 parameter (4 and 3).</p>
<p>fungsi akan memanggil kembali sesuai nilai parameter.</p>
</body>
</html>










Mengenal Adobe Dreamweaver cs4

Adobe Dreamweaver cs4 merupakan salah satu progam aplikasi yang digunakan untuk membuat dan membangu sebuah Website, Baik secara grafis maupun dengan menuliskan kode sumber secara langsung

Adobe Dreamweaver cs4 memudahkan pengembang Website untuk mengelola halaman halaman Website dan aset aset yang ada dalam Website itu sendiri. bail gambar (image), animasi flash, video, suara dan lain sebagainya. Selain itu Adobe Dreamweaver cs4 juga menyediakan fasilitas untuk melakukan Pemrograman Scripting seperti, ASP (Active Server Page), JSP (Java Server Page), PHP (PHP Hypertext Preprocessor), Java Scripts, Cold Fusion, CSS (Cascading Style Sheet), XML (Extensible Markup Languange), Dan Lain Sebagainya.

Sebelum melangkah lebih jauh dalam pembuatan Website dengan Adobe Dreamweaver cs4, Ada baiknya kita mengenal terlebih dahulu area kerja Adobe Dreamweaver cs4




START PAGE

Start Page adalah kotak dialog yang di tampilkan pertama kali bersamaan dengan jendela utama aplikasi Adobe Dreamweaver CS4 saat di jalankan.fungsi dari Star Page ini adalah menampilkan menu pilihan yang ada di Adobe Dreamweaver CS4,dimana user berhak memilih menu mana yang akan di pakai atau di jalankan.

Open a Recent Document

Menu ini menampilkan daftar nama dokumen yang pernah di buka dengan Adobe Dreamweaver CS4. anda dapat membuka dokumen tersebut dengan cara memilih nama dokumen yang ada. selain itu,anda juga dapat membuka dokumen yang belum pernah di buka dengan Adobe Dreamweaver CS4 dengan cara memilih menu OPEN.

Create New

Menu ini di gunakan untuk membuat dokumen web baru.Anda dapat membuat dokumen dengan beberapa tipe yang di sediakan oleh Adobe Dreamweaver CS4, Antara lain :


HTML
Hypertext Markup Languange (HTML) adalah sebuah bahasa dasar yang di gunakan untuk merancang halaman web statis.

Coldfusion
Coldfusion adalah bahasa scripting yang di gunakan untuk pemrogaman web server.Coldfusion digunakan pada Adobe Coldfusion, BlueDragon dan lainnya.

PHP
PHP Hypertext preprocessor (PHP) merupakan bahasa pemrogaman scripting web server-side. dengan pemrogaman server-side,sebuah website akan lebih dinamis.PHP biasanya terpasang pada file HTML yang di simpan dengan ektensi *.php.



> Top Features (video)

Merupakan menu pilihan link yang berupa rekaman video penggunaan fasilitas yang di sediakan Dreamweaver secara online. menu link rekaman video yang di sediakan, antara lain: Related Files, Live View, Code navigator, Dataset Wizard, Web Widgets, JavaScript Support, Dsb

Help Online

Merupakan menu pilihan untuk menampilkan bantuan tentang cara penggunaan, fitur fitur terbaru Adobe Dreamweaver CS4 dan lainnya secara online.

Don't Show Again

Kotak dialog start page akan selalu di tampilkan bersamaan dengan jendela utama Adobe DreamweaverCS4 saat aplikasi ini di jalankan. Agar kotak dialog star page tidak di tampilkan lagi, centang checkBox > Don't Show Again



Area Kerja Adobe DreamweaverCS4

adalah lingkungan yang di gunakan untuk merancang halaman web anda. Pada area kerja ini terdapat jendela utama, yaitu jendela dokumen (Document Window) yang berfungsi untuk mendesain halaman, baik dengan cara penulisan kode maupun secara visual. selain itu, juga terdapat menubar, Toolbar, dan panel panel yang membantu desain halaman web dengan mudah. Berikut penjelasan beberapa Area kerja Adobe Dreamweaver CS4 beserta kegunaannya

> Menubar

Menubar adalah sebuah grup menu yang terdapat pada bagian atas aplikasi yang tersusun dari deretan text/label. Setiap menu terdiri dari submenu-submenu sesuai kategori menu masing-masing. menu menu pada Menubar ini jarang di gunakan. Biasanya fasilita pada Menubar telah diwakili dalam sebuah panel yang di miliki Adobe Dreamweaver CS4, misalnya menu insert pada menubar telah diwakili dengan panel insert pada panel group

> Workspace Switcher

Workspace Switcher adalah sebuah fasilitas yang berfungsi untuk mengubah mode tampilan area kerja sesuai kebutuhan perancang web. Workspace Switcher ini berada sejajar dengan Menubar sebelah kanan Secara default, mode tampilan area kerja Adobe Dreamweaver CS4 adalah mode Desaigner. Adobe Dreamweaver CS4 memiliki mode area kerja yang banyak, diantaranya mode Coder yang hanya menampilkan kode pembuatan halaman dan Classic.

> Document Title

Document Title adalah nama dokumen yang dibuka pada workspace Adobe Dreamweaver. Anda dapat menutup sebuah dokumen melalui Document Title. pada Document Title ini juga ditampilkan Path/Direktori di mana dokumen itu di simpan

> Document Toolbar

Toolbar adalah kumpulan tombol yang berfungsi memudahkan oengembang untuk mengunakan fasilitas yang disediakan Dreamweaver. Pada toolbar ini, terdapat tombol-tombol untuk mengubah mode jendela dokumen yang ditampilkan dan beberapa tombol lain.

Code
Tombol Code ini berfungsi mengubah jendela dokumen menjadi mode code. yaitu jendela dokumen yang menampilkan kode html dokumen/halaman web yang aktif. Selain itu, anda dapat mengubah jendela dokumen menjadi mode Code melalui Menubar View > Code.

Split
Tombol ini berfungsi mengubah mode jendela dokumen menjadi Split, yaitu jendela dokumen akan
menampilkan kode dokumen dan tampilan desain (grafis/visual) dokumen. Document Window akan menjadi dua bagian atas dan bawah. Bagian atas menampilkan source code, dan bagian bawah menampilkan visual/grafis dari halaman web.
DesignTombol ini berfungsi mengubah mode dokumen window menjadi mode design, yaitu Document
Window hanya akan menampilkan desain web secara visual/grafis dari halaman web.

Live Vew
Tombol ini berfungsi menampilkan desain web sebagaimana browser pada jendela dokumen mode design. Tombol ini akan menyebabkan jendela dokumen mode desain tidak dapat di edit, namun
anda tetap dapat mengubah kode html-nya.

Live Code
Tombol n akan aktif jika mode Live View dipilih, Tombol ini akan membuat kode HTML pada
jendela dokumen mode Code tidak dapat di edit. hal ini ditandai dengan perubahan warna background pada jendela dokumen.

Text Field Title
Text Field Title berfungsi untuk menambahkan judul halaman web. Title ini akan ditampilkan pada titlebar browser.

File Management
Menampilkan menu pop-up untuk mengorganisasi file-file yang dibutuhkan oleh dokumen web.

Preview/Debug in Browser
Tool ini digunakan untuk menampilkan halaman web yang aktif pada browser.

Refresh Design
Tool ini digunakan untuk me-refresh desain dokumen setelah ada perubahan kode dokumen. Hal ini akan membuat desain visual dokumen berubah sesuai perubahan pada kode HTML dokumen.
Tool Refresh dibutuhkan karena perubahan kode HTML dokumen tidak secara langsung otomatis mengubah desain dokumen.

View Option
Tool ini berupa menu pop-up yang digunakan untuk mengatur jendela dokumen, baaik tampilan kode maupun tampilan desain. Melalui menu ini, anda dapat menampilkan nomor baris kode, menampilkan isi/content dari tag head, membuat jendela desain mempunyai ukuran/rulers , berbentuk grid , Dsb

Visual Aids
Visual Aids digunakan untuk tampilan desain yang berbeda dalam mendesain halaman web.

Validate Markup
Validate Markup digunakan untuk melakukan koreksi dokumen yang aktif atau tag yang terpilih.

Check Browser compability
Tool ini digunakan untuk mengecek apakah aturan CSS yang anda gunakan kompatible dengan browser yang berbeda.


> Document window

Document Window adalah area yang digunakan untuk membuka, mengedit, menampilkan desain dokumen dan atau kode dokumen web yang aktif. jendela dokumen ini mempunyai tool-tool yang digunakan untuk menampilkan informasi pada halaman, seperti Related File And Code Navigator, Tag Selector, dan fasilitas lain, seperti Zooming, Hand Tool, Selected Tool, dan informasi lainnya.


> Panel group

Panel Group merupakan kumpulan panel berupa tab-tab pilihan yang mempunyai fungsi berbeda-beda. Panel adalah sebuah jendela untuk memudahkan pembuatan desain web dengan menampilkan informasi pendukung pada jendela informasi sehingga anda dapat mengedit dan memanfaatkan data yang ada pada area tersebut. Terdapat banyak sekali panel, diantaranya panel insert yang berfungsi untuk menambahkan komponen komponen web ke dalam desain halaman anda kemudian panel files yang berfungsi menampilkan file-file yang telah anda buat, baik file gambar, html, dan folder yang terdapat pada site yang anda definisikan. untuk menampilkan panel yang lain anda dapat menggunakan menu Windows.


> Tag Selector

Tag Selector berfungsi menampilkan tag yang di seleksi pada area desain. Anda dapay menyeleksi bagian desain dengan memilih tag yang sesuai. sebagai contoh, untuk menyeleksi semua elemen halaman, klik tag <body>


> Panel Properties

Panel Properties berfungsi menampilkan properti dari elemen halaman web yang terpilih, melalui panel ini anda dapat mengubah properti elemen tersebut, baik dengan penambahan properti CSS maupun properti dari tag HTML.


Perangkat Tambahan

Selain Adobe DreamweaverCS4, anda juga membutuhkan sebuah browser yang berfungsi menampilkan hasil desain halaman web. sementara itu, untuk membuat website yang dinamis anda membutuhkan sebuah database (misalnya MySql), sebuah server web (misalnya Apache) dan sebuah phpAdmin untuk melakukan pengolahan database dengan php. Berikut penjelasannya...

Catatan:
"Perangkat tambahan Server Web diperlukan bila anda membuat sebuah halaman website yang dinamis (Dinamic Web), tapi bila anda hanya ingin membuat halaman web statis / sederhana, maka anda tidak memerlukan aplikasi Server Web"


> Server Web

Server Web dibutuhkan untuk melakukan pemrograman yang membutuhkan teknologi server-side seperti PHP, ColdFusion, ASP, dan JSP. oleh karena itu, server web merupakan perangkat yang penting untuk melakukan uji coba pemrograman server-side yang anda buat. dengan demikian anda tidak perlu melakukan upload data ke sebuah hosting hanya untuk mengetahui hasil pemrograman untuk sisi server. Pemrograman server-side biasanya digunakan untuk mangakses database yang terdapat pada server hosting, sehingga pengembang dengan mudah mengelola content website dengan mudah tanpa mengubah halaman halaman web.
Salah satu teknologi aplikasi server web yang lengkap yang dapat anda gunakan adalah aplikasi AppServ yang merupakan kumpulan aplikasi pendukung pembangun website. pada paket AppServ versi 2.5.8 terdapat aplikasi aplikasi berikut:

> Server web Apache versi 2.2.4

> Bahasa scrip PHP versi 5.3.1

> phpMyAdmin Database Manager versi 2.9.2

> Database MySQL versi 5.0.27

Anda bisa mendapatkan aplikasi AppServ secara gratis disini www.AppServNetwork.com


> Browser

Browser adalah aplikasi yang digunakan untuk menampilkan file-file website, baik html, php, mht, dan lain sebagainya. anda tidak akan dapat menampilkan hasil dari desain anda apabila anda tidak mempunyai browser anda dapat menggunakan browser Internet explorer (IE) yang merupakan bawaan windows. Mozila Firefox, Opera, Safari, Chrome, dan lain lain



http://2.bp.blogspot.com/-1B5g9grBRdQ/UszdBYufutI/AAAAAAAAKVI/C3225gCXlzE/s1600/gambargerak2.gif

Senin, 05 Mei 2014

ANALIS ALGORITMA


ANALIS ALGORITMA
Alamat. www.nusanipa.net 
1.       PENGANTAR ALGORITMA

SOAL:
ADA SEORANG PETANI BARU PULANG DARI LADANG,PULANG DARI KEBUN HARUS MELEWATI SUNGAI.PETANI MEMBAWA DUA EKOPR BIN ATANG SINGA DAN  KAMBING TUMBUH-TUMBUHAN YANG DIBAWAH  BUNGA.DISUNGAI ADA PERAHU DAN MUATANYA TERBATAS SOLUSINYA SEPERTI APA.
LOGIKA:               KAMBING,SINGA------KEMBALI DENGAN KAMBING----TINGGALKAN KAMBING,BAWA RUMPUT KEMUDIAN YANG TERAKHIR KAMBING
ANI,ANA,NINA,NANO. BAPAKNYA NANO

2.       DEFENISI ALGORITMA
Pertama kali disebut algorims: proses berhitung dengan angka arab.
Orang yang melakukan disebut algorits.
Dua istilah dipecahkan menjadi dua oleh albujafar muhamad alquarism. Dia juga mencetuskan tentang aljabar linear. Dalam bahasa inggrisnya algorithma:
A.      Urutan langkah-langkah logis penyelesaian yang disusun secara logis
a.       Urutan langkah logis ,berarti algoritma  harus dapat ditentukan bernilai benar atau salah
B.      Alur pemikiran dalam menyelesaikan suatu pekerjaan yang dituangkan secara tertulis
a.       Alur pikiran yaitu;algoritma seseoran gdapat berbeda

3.       KRITERIA PEMILIHAN ALGORITMA
·         Algoritma haruslah benar
·         Mengetahui  hasil yang dicapai
·         Efektifitas dan efisiensi algoritma
·         Jumlah langkahnya berhingga
·         Terstruktur

4.       PENULISAN ALGORITMA
·         Menggunakan bahasa natural
Kelemahanya  masih sering membingungkan (ambigu) sulit dipahami
·         Mengunakan flowchart
Baik karena alur algoritma dapat dilihat secara visual,tetapi repot pembuatanya jika algoritma panjang
·         Menggunakan pseudokode
Sudah dekat dengan bahasa pemrograman tetapi sulit dimengerti oleh orang yang belum tahu pemrograman.
5.       MENGUKUR ALGORITMA
1.       Realibility; algoritma harus benar2 berakurasi tinggi dan benar
2.       Cost rendah; algoritama secepat mungkin di proses
3.       Sifatnya general; bisa menyelesaikan banyak kasus, atau satu kasus saja
4.       Expandable; algoritma bisa dikembangkan
5.       Mudah di mengerti;siapaapun yang melihat dapat mengerti tentang algoritma
6.       Portability; bisa diterapkan dalam berbagai platform
7.       Precise; tepat, betul,teliti/algoritma ditulis secara saksama tidak ada keraguan serta eksplisit (transparansi)
8.       Jumlah langkah atau intruksi yang berhingga
9.       Efektif;
10.   Terminate; intruksi dari algoritma yang harus ada kriteria berhenti
11.   Output yang dihasilkan harus tepat.

6.       STRUKTUR DASAR ALGORITMA
·      Sequence/runtunan; digunakan untuk program yang dinyatakan secara urut
·      Selection/pemilihan;digunakan untuk program yang pernyataanya dipilih;if,else,then
·      Interation/pengulang;digunakan pada program yang pernyataan yang berulang-ulang/loop;for do.do while
Blogger Indonesia
Kang roni
KLIK DISINI