Minggu, 24 Oktober 2010

Pemrograman Web dan Internet

Materi Kuliah Pemrograman Web dan Internet
Semester IV
Dosen : Waliadi Gunawan, S.KOM

World Wide Web (www)
World Wide Web yang sering disingkat WWW bukanlah internet, namun sangat berkaitan dengan internet. World Wide Web sendiri bukan sekedar jaringan seperti internet namun di dalamnya terdapat set aplikasi komunikasi dan sistem perangkat lunak yang memiliki karakteristik sebagai berikut:
a)      Terletak pada internet host dan client
b)      Protokol yang digunakan adalah TCP/IP
c)      Mengenal tag-tag HTML
d)     Pengguna dapat mengakses informasi text, gambar, suara
e)      Model alamat URL
f)       Pengguna dapat juga mengakses server dengan protokol HTTP, FTP, Telnet, dsb
g)      Mampu Merelasikan komunikasi data dua arah dari suatu site

Uniform Resource Locator (URL)
URL dapat didefinisikan sebagai sarana untuk menentukan alamat yang akan dipakai untuk mengakses internet, khususnya website. Secara garis besar, URL terdiri dari jenis protokol yang dipakai, nama web server, dan direktori. Keseluruhan URL yang lengkap akan berbentuk seperti :
Protokol : //nama-host/path/nama_file

HTML (Hypertext Markup Language)
HTML adalah suatu format data yang digunakan untuk membuat dokumen Hypertext yang dapat dibaca dari satu platform komputer ke platform komputer lainnya tanpa perluq melakukan suatu perubahan apapun.
HTML tidak hanya mampu menampilkan teks, tetapi juga dapat diberikan format pada teks tersebut, misal kolom tabel, listform, frame, serta dapat digunakan dengan objek suara, video, maupun java.



Hypertext Transfer Protocol (HTTP)
Bimo Sunarfrihantono, ST. (2: 2002) mengungkapkan bahwa “HTTP merupakan protokol yang digunakan untuk mentrasfer data antara web server ke web browser. Protokol ini mentrasfer dokumen-dokumen web yang ditulis atau berformat HTML”.
Web merupakan terobosan baru sebagai teknologi sistem informasi yang menghubungkan data dari banyak sumber dan layanan yang beragam macamnya di Internet. Pengguna hanya mengklikkan tombol mousenya pada link-link hypertext yang ada untuk melompat ke dokumen-dokumen di berbagai lokasi di Internet. Link-linknya sendiri bisa mengacu kepada dokumen web, server FTP (File Transfer Protocol), e-mail ataupun layanan-layanan lain.

Hypertext Processor (PHP)
Definisi Hypertext Processor (PHP) menurut Bimo Sunarfrihantono, ST (2: 2002) adalah “bahasa server-side scripting yang menyatu dengan HTML untuk membuat halaman web yang dinamis”.
PHP bisa berinteraksi dengan hampir semua teknologi web yang sudah ada. Developer bisa menulis sebuah program PHP yang mengeksekusi suatu program CGI di server web lain. Fleksibilitas ini amat bermanfaat bagi pemilik situs-situs web yang besar dan sibuk, karena pemilik masih bisa mempergunakan aplikasi-aplikasi yang sudah terlanjur dibuat di masa lalu dengan CGI, ISAP, atau dengan script seperti Perl, Awk atau Python selama proses migrasi ke aplikasi baru yang dibuat dengan PHP. Ini mempermudah dan memperhalus peralihan antara teknologi lama dan teknologi baru.
PHP menawarkan solusi yang lebih luwes. Dengan PHP, developer tidak perlu lagi berurusan dengan dua buah file terpisah. Browser web mengacu secara langsung ke file yang dituju, yang lalu dibaca oleh server sebagaimana file HTML statis biasa. Bedanya, sebelum dikirim balik ke browser web, server web memeriksa isi file dan menentukan apakah ada kode di dalam file tersebut yang harus dieksekusi. Bila ada, kode-kode tersebut akan dieksekusi. Hasilnya dimasukkan ke dalam dokumen yang sama. Server web bekerja secara langsung terhadap file yang bersangkutan, tidak memanggil script terpisah seperti pada metode CGI. Seluruh kode dieksekusi di server (oleh karena itu disebut server-side script).
PHP membuat proses pengembangan aplikasi menjadi mudah karena kelebihan-kelebihannya, yaitu:
1).    Script (kode program) terintegrasi dengan file HTML, sehingga developer bisa berkonsentrasi langsung pada penampilan dokumen webnya.
2).    Tidak ada proses compiling dan linking.
3).    Berorientasi obyek (object oriented).
4).    Sintaksis pemrogramannya mudah dipelajari, sangat menyerupai C dan Perl.
5).    Integrasi yang sangat luas ke berbagai server database. Menulis web yang terhubung di database menjadi sangat sederhana. Database yang didukung oleh PHP: Oracle, Sybase, mSQL, MYSQL, Solid, ODBC, PostgreSQL, Adabas D, FilePro, Velicis, Informix, dBase, UNIX dbm.
PHP tidak terbatas untuk hanya menghasilkan keluaran HTML. Ia juga bisa digunakan untuk menghasilkan gambar GIF, atau bahkan sumber gambar GIF yang dinamis
Interface Dengan Dreamweaver
Dreamweaver dikenal sebagai perangkat lunak yang mempunyai editor HTML yang paling dinamis. Dengan bantuan editor HTML ini, dapat diciptakan dan dikembangkan halaman web powerful yang berisi animasi, grafik, dan script yang kompleks.
Selain fasilitas han-coding HTML, Dreamweaver juga dilengkapi dengan fitur editor visual yang memungkinkan untuk menciptakan sebuah halaman web tanpa menuliskan sebaris perintah pun. Dapat juga menampilkan semua elemen dan asset serta halaman web hanya dengan drag and drop elemen tersebut dari beberapa menu dan panel yang tersedia.
Dreamweaver memberikan dukungan untuk berinteraksi dengan program Macromedia lain, seperti Flash dan Fireworks sehingga dapat menyisipkan elemen-elemen seperti Flash Object, Mouse Rollover Script, Navigation Bar, dan lain-lain ke dalam website.
 Dreamweaver MX memberikan dukungan terhadap konfigurasi multi user untuk sistem operasi multiuser, seperti Windows XP, Windows 2000, Windows NT, dan Macintosh OS X. Setting dreamweaver dapat disesuaikan dengan keperluan tanpa mengubah setting yang telah dibuat oleh user lain dalam sistem operasi yang sama. API memberikan fasilitas untuk membuat, menghapus, dan mengakses file konfigurasi, serta mengakses dan mengatur atribut dari konfigurasi tersebut.

MySQL
MySQL adalah database server kecil. MySQL mendukung aplikasi kecil dan menengah. MySQL juga mendukung perintah standar SQL dan mendukung banyak platform.
PHP dikombinasikan dengan MySQL adalah program ideal untuk website umumnya, ia bersifat crossplatform (dalam arti dapat digunakan pada sistem Windows ataupun Unix).


Latihan Pertama
Menampilkan teks Pada bagian Body
<html>
<title>
Latihan Pertama
</title>
            <body>
            Halo, Selamat Datang
            </body>
</html>



Latihan Kedua
Menampilkan teks dalam format tebal, miring dan garis bawah
<html>
<title>
Mengubah Huruf
</title>
<body>
Ayo Belajar HTML <P>
            <b>CARA MEMBUAT HURUF TEBAL</b>
            <i>CARA MEBUAT HURUF ITALIC</i> <P>
            <u>CARA MEMBUAT HURUF UNDERLINE</U>
            <?> Tebal/Italic/Uderline</?>
</body>
</html>

Latihan Ketiga
Menampilkan teks Berjalan
<html>
<title>

MEMBUAT TULISAN BERJALAN
</title>
<body>
<b>Tulisan Berjalan</b>
<marquee width="100%" direction="right" scrollamount="10" align="right">TULISAN BERJALAN SEDERHANA
</marquee>

<marquee width="100%" direction="left" scrollamount="10" align="left">TULISAN BERJALAN SEDERHANA
</marquee>
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="3"
direction="down" width="100%" height="100" align="left">
Contoh tulisan Berjalan dari atas ke bawah
</marquee>

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="3"
direction="up" width="100%" height="100" align="left">
Contoh tulisan Berjalan dari bawah ke atas
</marquee>
</body>
</html>

Latihan Empat
Menampilkan teks dalam bentuk paragraf (element P)
<html>
<head>
<title>Latihan 4</title>
</head>
<body>
<p>Paragraf ini pada posisi rata kiri (default)</p>
<p align="center">Paragraf ini pada posisi rata
tengah</p>
<p align="right">Paragraf ini pada posisi rata kanan</p>
<p align="left">Paragraf ini pada posisi rata kiri</p>
</body>
</html>

Tugas
Judul= Text di tengah,  isi = tulisan berada di tengah berhuruf tebal dan italic
Latihan Lima
Menampilkan teks sebagai header (element H):
<html>
<head>
<title>Latihan 5</title>
</head>
<body>
<h1>Ini Heading-1</h1>
<h2>Ini Heading-2</h2>
<h3>Ini Heading-3</h3>
<h4>Ini Heading-4</h4>
<h5>Ini Heading-5</h5>
<h6>Ini Heading-6</h6>
</body>
</html>


Tugas
Tempatkanlah tampilan isi element H3 di kanan dan H5 di tengah

Latihan Enam
Menampilkan teks dalam bentuk apa adanya (element PRE)

<html>
<head>
<title>Latihan 6</title>
</head>
<body>
<pre>
Ini bentuk penulisan preformated text
apapun bentuknya tulisan ini akan ditampilkan
pada web browser
seperti apa adanya, alias yang ditulis
</pre>
</body>


Latihan Tujuh
Menampilkan teks dengan ukuran berbeda
<html>
<head>
<title>Latihan 7</title>
</head>
<body>
<font size='1'>Teks ini mempunyai size=1<br>
<font size="2">Teks ini mempunyai size=2<br>
<font size="3">Teks ini mempunyai size=3<br>
<font size="4">Teks ini mempunyai size=4<br>
<font size="5">Teks ini mempunyai size=5<br>
<font size="6">Teks ini mempunyai size=6<br>
<font size="7">Teks ini mempunyai size=7
</body>
</html>
Latihan Delapan
Menampilkan garis horizontal menggunakan elemen HR
<html>
<head>
<title>Latihan 8</title>
</head>
<body>
<hr align="left" size="6" width="30%">
<hr align="left" size="6" width="30%" noshade>
</body>
</html>


Latihan Enam
Menampilkan teks dalam bentuk apa adanya (element PRE)

<html>
<head>
<title>Latihan 6</title>
</head>
<body>
<pre>
Ini bentuk penulisan preformated text
apapun bentuknya tulisan ini akan ditampilkan
pada web browser
seperti apa adanya, alias yang ditulis
</pre>
</body>
<html>



Latihan Tujuh
Menampilkan teks dengan ukuran berbeda
<html>
<head>
<title>Latihan 7</title>
</head>
<body>
<font size='1'>Teks ini mempunyai size=1<br>
<font size="2">Teks ini mempunyai size=2<br>
<font size="3">Teks ini mempunyai size=3<br>
<font size="4">Teks ini mempunyai size=4<br>
<font size="5">Teks ini mempunyai size=5<br>
<font size="6">Teks ini mempunyai size=6<br>
<font size="7">Teks ini mempunyai size=7
</body>
</html>
Latihan Delapan
Menampilkan garis horizontal menggunakan elemen HR
<html>
<head>
<title>Latihan 8</title>
</head>
<body>
<hr align="left" size="6" width="30%">
<hr align="left" size="6" width="30%" noshade>
</body>
</html>

Latihan Sembilan

Menampilkan teks dengan daftar urut (element OL):
<html>
<head>
<title>Latihan 9</title>
</head>
<body>
Matakuliah TKJ Semester 1:
<ol>
<li>Bahasa Inggris 1</li>
<li>Matematika 1</li>
<li>Jaringan Komputer 1</li>
<li>Konsep Teknologi Informasi</li>
<li>Keterampilan Komputer dan Pengelolaan Informasi</li>
<li>Perangkat Keras Komputer</li>
<li>Sistem Operasi</li>
</ol>
</body>
</html>




Nama file: latihan10.html
<html>
<head>
<title>Latihan 10</title>
</head>
<body>
Matakuliah TKJ Semester 1:
<ol start="1" type="a">
     <li>Bahasa Inggris 1</li>
     <li>Matematika 1</li>
     <li>Jaringan Komputer 1</li>
     <li>Konsep Teknologi Informasi</li>
     <li>Keterampilan Komputer dan Pengelolaan Informasi</li>
     <li>Perangkat Keras Komputer</li>
     <li>Sistem Operasi</li>
</ol>
</body>
</html>
Nama file: latihan11.html
<html>
<head>
<title>Latihan 11</title>
</head>
<body>
<ol start="1" type="I">
<li>Matakuliah TKJ Semester 1:</li>
     <ol start="1" type="i">
        <li>Bahasa Inggris 1</li>
        <li>Matematika 1</li>
        <li>Jaringan Komputer 1</li>
        <li>Konsep Teknologi Informasi</li>
        <li>Keterampilan Komputer dan Pengelolaan Informasi</li>
        <li>Perangkat Keras Komputer</li>
        <li>Sistem Operasi</li>
     </ol>
</ol>
</body>
</html>
 

Merubah warna background menjadi hitam.
               
Nama file: latihan12.html
<html>
<head>
<title>Latihan 12/title>
</head>
<body text="red" bgcolor="black">

       
Belajar bahasa pemrograman web ternyata mudah juga Yach...
</body >
</html>
Tugas tambahan:

Cobalah untuk warna: maroon, black, yellow, white, lime, green, blue, red, olive, navy, purple, teal, gray, silver, fuchsia, aqua.

Merubah background dengan suatu gambar.
Nama file: latihan13.html
<html>
<head>
<title>Latihan13</title>
</head>
<body text="red" bgcolor="aqua" background="fotoku.jpg">
        Belajar bahasa pemrograman web ternyata mudah juga :)
</body>
</html>


Download Materi Ini : DOWNLOAD


0 komentar

Posting Komentar

Cancel Reply