phone: +62852 5254 2414
e-mail: simonmurdani@gmail.com

Pemrograman Web - TEKNOLOGI APLIKASI WEB (BAB 1) (kelas XI)



BAB 1 : TEKNOLOGI APLIKASI WEB

A. KOMPETENSI DASAR
3.1 Memahami konsep teknologi aplikasi web
4.1 Mempresentasikan pelbagai teknologi pengembangan aplikasi web

B. MATERI PEMBELAJARAN

Dunia IT berkembang sangat pesat. Banyak bidang yang terbagi dari IT, ada Hardware, Jaringan, Software. Untuk software juga terbagi lagi mulai dari aplikasi software sampai aplikasi web. Dari dunia IT ini maka lahirlah profesi-profesi baru, salah satunya adalah profesi di bidang web. Orang-orang yang membangun website biasa dikenal dengan web master. Adapun web master tersebut terdiri dari :

1. Web Designer: yaitu orang yang bertugas membuat desain halaman web. Ada beberapa hal yang harus diperhatikan di dalam membuat desain web, antara lain:
a. Resolusi monitor
b. Tampilan menarik dan sesuai dengan tujuan
c. Mengikuti trend
d. Pewarnaan yang tidak mengganggu konten web
e. Ditujukan untuk kepuasan pengunjung
f. Tipografi yang baik dan infomatif
Untuk software yang biasa digunakan adalah Firework, Photoshop dan lain-lain.

2. Web Programmer: yaitu orang yang membuat program web. Web Berhubungan dengan bahasa pemrograman dan database. Contoh program yang digunakan adalah HTML, PHP, ASP, Applet, JavaScript, VBScript dsb. Tugas Web programmer adalah:
a. membuat coding yang kemudian di kompile oleh browser.
b. membuat sistem berjalan baik dan stabil
c. merancang, membuat dan mengelola database
d. menggabungkan antara desain dan program berjalan menjadi satu
Untuk software yang biasa digunakan adalah Dreamweaver dan lain-lain.

3. Web animator: yaitu orang yang bertugas membuat animasi yang dapat menarik perhatian dan dinikmati pengunjung web. Ada hal-hal yang perlu di perhatikan dalam membuat animasi di web, antara lain:
a. Animasi hendaknya memperhatikan rancangan rancangan website yang dibuat
b. Animasi tidak merusak atau memperburuk desain website yang sudah ada
Software yang biasa digunakan untuk membuat animasi pada web adalah: Flash, Swish, Switch 3D dll.

4. Web administrator: yaitu orang bertanggungjawab atas sebuah web yang telah dibuat.
Tugas web administrator antara lain :
a. Mengatur dan menkonfigurasi server dan merawatnya dengan baik
b. Memelihara server agar dapat diakses selama 24 jam
c. Menjaga keutuhan data dalam server
d. Mengatur account dan password yang digunakan dalam sistem
e. Mengatur konfigurasi keamanan server

KONSEP WORLD WIDE WEB (WWW)

Internet adalah jaringan yang terhubung. Saat ini semua kantor memiliki internet, karena sebagian pekerjaan sekarang berhubungan dengan internet. Dengan internet kita. mendapatkan banyak informasi, dapat juga saling mengirim pesan (email), chatting, berkirim file (File Transfer Protocol) dan masih banyak lagi keuntungan dari internet. Internet lebih merupakan perangkat keras (Hardware), sedangkan web adalah perangkat lunak (Software). Internet menggunakan TCP/IP sebagai protokol operasionalnya, sedangkan web menggunakan HTTP (Hyper Text Transfer Protocol).

Hypertext Transfer Protocol (HTTP) adalah sebuah protokol jaringan lapisan aplikasi yang digunakan untuk sistem informasi terdistribusi, kolaboratif, dan menggunakan hipermedia (baik file text maupun image) pada protokol komunikasi TCP/IP. Penggunaannya banyak pada pengambilan sumber daya yang saling terhubung dengan tautan, yang disebut dengan dokumen hiperteks, yang kemudian membentuk World Wide Web pada tahun 1991 oleh fisikawan Inggris, Tim Berners-Lee. HTTP juga dapat disebut sebagai sebuah protokol meminta/menjawab antara klien dan server. Semula Berners-Lee ingin menyusun arsip-arsip risetnya, lalu beliau mengembangkan suatu sistem untuk keperluan pribadinya, yang berupa program peranti lunak yang diberi nama Enquire. Dengan Enquire, Berners-Lee berhasil menciptakan jaringan yang menghubungkan berbagai arsip sehingga memudahkan dalam melakukan pencarian informasi yang dibutuhkan. Inilah yang menjadi dasar perkembangan WWW.

World Wide Web secara luas lebih dikenal dengan istilah Web atau biasa disingkat www. Web pertama kali dikenalkan pada tahun 1992. WWW merupakan kumpulan web server dari seluruh dunia yang mempunyai kegunaan untuk menyediakan data dan informasi untuk dapat digunakan bersama. WWW adalah sekelompok dokumen multimedia yang saling bertautan dengan menggunakan tautan hiperteks. Dengan mengklik hyperlink, maka para pengguna bisa berpindah dari satu dokumen ke dokumen lainnya.

URL singkatan dari Uniform Resource Locator adalah rangkaian karakter menurut suatu format standar tertentu, yang digunakan untuk menunjukkan alamat suatu sumber seperti dokumen dan gambar di Internet. Secara umum perlu memasukkan tiga informasi untuk menuju ke alamat tertentu, yaitu: Protokol, Alamat Server, Path File.

WEB BROWSER

Web browser merupakan tempat dimana website di eksekusi. Web browser adalah suatu program atau software yang digunakan untuk menjelajah internet atau untuk mencari informasi yang dibutuhkan dari suatu web yang tersimpan dalam komputer. Dulu, web browser belum dapat menampilkan gambar, namun sekarang sudah dapat menampilkan gambar dan teks, bahkan dapat juga memutar file multimedia seperti video dan suara. Web browser juga dapat mengirim dan menerima email, mengelola HTML sebagai input dan menjadikan web sebagai tampilan yang informatif. Contoh web browser:

1. Mozilla Firefox
dibuat oleh Mozilla Corporation. Firefox adalah salah satu web browser open source yang dibangun dengan Gecko Layout Engine. Firefox juga didukung sejumlah Add-ons yang dapat diinstall terpisah sehingga memungkinkan pengguna melakukan sesuai dengan kegunaan Add-ons tersebut.

2. Internet Explore
web browser dari Microsoft Corporation, biasa disingkat dengan IE. Sejak tahun 1995 IE menjadi default software pada saat melakukan instalasi Sistem Operasi Microsoft Windows.

3. Safari
dibuat oleh Apple Corp., yaitu perusahaan yang memproduksi Macintosh, iPhone, iPod. Safari dibangun dengan browser engine WebKit, yang juga merupakan browser pertama yang lulus test Acid3/

4. Flock
web browser yang dibangun dengan code mozilla firefox. Flock dikhususkan untuk menyediakan social networking dan Web 2.0. Flock didesain untuk memudahkan kegiatan online pengguna internet mengatur beberapa social networking, web mail, news feed dan blog yang dimiliki. Dengan Flock, pengguna internet dapat dengan mudah menjelajah, berbagi dan menikmati konten dan menjalin hubungan pertemanan pada situs pertemanan yng diinginkan.

5. Opera
opera dikembangkan oleh Opera Software company. Opera merupakan web browser sekaligus Internet Suite. Opera mempunyai Opera Widgets, yaitu aplikasi web kecil yang dijalankan bersamaan dengan Opera yang mempunyai kegunaan tertentu, seperti pada Add-ons Firefox.

6. K-Meleon
salah satu browser gratis dan open source yang dirilis di bawah Lisensi GNU General Public dan berjalan di platform Microsoft Windows (Win32) operating systems. Sama halnya dengan Mozilla Firefox, browser ini dibangun di atas Gecko layout engine.

7. Camino
web browser yang open source yang fokus untuk memberikan experience terbaik pada pengguna Mac OS X. Camino mengkombinasikan visual sederhana dan elegan yang menjaddi filosofi Macintosh dengan Gecko layout engine yang powerful.

8. Konqueror
web browser, file manager dll yang menyediakan file viewer yang dapat mengexplore file-file di komputer maupun secara remote ke komputer lain. Protokol yang didukung Konqueror adalah :
a. FTP dan SFTP/SSH browser
b. SAMBA (Microsoft file-sharing) browser
c. HTTP browser
d. IMAP mail client
e. ISO (cd image) viewer

KONSEP WEB SERVER

Web server adalah perangkat lunak (sofware) dalam server yang berfungsi untuk menerima permintaan berupa halaman web melalui protokol HTTP dan atau HTTPS dari client (dalam hal ini browser) kemudian mengirimkan kembali hasil permintaan tersebut ke dalam bentuk halaman-halaman web yang berbentuk dokumen HTML. Dengan kata lain, web server melupakan pelayan (pemberi layanan) bagi web client (browser) seperti Mozilla Firefox, Opera, Internet Explore, Chrome, Safari dll supaya browser dapat menampilkan halaman yang diminta.

Fungsi Web Server adalah untuk melakukan atau mentransfer berkas permintaan pengguna melalui protokol komunikasi yang telah ditentukan. Halaman web terdiri dari berkas teks, video, suara, gambar dll.

Aplikasi web server terdiri dari dua jenis, yaitu web server gratis dan web server berbayar, yang mana dari setiap web server memiliki kelebihan dan kekurangan masing- masing. Beberapa contoh jenis web server adalah :

1. Apache
Apache merupakan web server paling banyak digunakan di internet, karena mempunyai program pendukung yang cukup banyak sehingga memberikan layanan yang lengkap bagi penggunanya. Apache pertama kali didesain untuk sistem operasi UNIX. Proses instal dan pengaturan konfigurasi nya pun mudah.

2. Web Server Litespeed
Server ini memiliki kemampuan meningkatkan performa PHP samapi 50%, bahkan mampu melebihi performa server apache hingga 6 kali lebih cepat, mampu melakukan pembatasan terhadap validasi HTTP request.

3. Web Server Nginx
Web Server Nginx mampu memberikan konten yang statis pada penggunaan daya yang lebih efisien dari system. Server ini juga dikenal asynchronous – event. Beberapa fitur yang bisa digunakan pada server ini antara lain : Server-side includes, Custom logging, URL rewiriting, Ability to handle more than 10000 simultaneous connections, Handling of static files, index files, and auto-indexing, MP4 streaming, using the MP4 streaming module, FastCGI support with caching, Load balancing, SSL support, Fault tolerance dsb nya.

4. Web Server Microsoft IIS
IIS adalah kependekan dari Internet Information Service. Banyak fitur yang dapat digunakan pada server ini, antara lain : File Transfer Protocol (FTP), pengelola web, NNTP dan Ghoper. System operasi yang mendukung adalah Windows NT, 7, Windows Server 2003, Windows 2000 dan Windows XP. Server ini lebih stabil untuk kerja PHP. Memiliki system diagnotistik yang bisa digunakan untuk melakukan pengecekan kesalahan. Sangat kompatibel pada Windows karena IIS dirilis oleh Microsoft.

CARA KERJA WEB SERVER


Tugas web server adalah untuk menerima permintaan dari client dan mengirimkan kembali berkas yang diminta oleh client tersebut. Perangkat lunak web server tersimpan di dalam komputer server, yang didalam komputer server tersebut data-data website disimpan dengan aman dan rapi. Komputer server harus terhubung dengan internet untuk dapat diakses oleh client.

Pada saat browser meminta data web kepada server, maka instruksi permintaan data oleh browser tersebut di bungkus di dalam TCP yang merupakan protokol transport dan dikirim ke alamat protokol berikutnya yaitu HTTP dan atau HTPPS. Data yang diminta dari browser ke web server disebut HTTP request, lalu akan dicarikan oleh web server di dalam komputer server. Jika ditemukan, data tersebut akan dibungkus oleh web server dalam TCP dan dikirim kembali ke browser untuk ditampilkan. Data yang dikirimkan dari server ke browser disebut HTTP response. Bila data yang diminta oleh browser tidak ditemukan oleh web server, maka web server akan menolak permintaan dan browser akan menampilkan notifikasi Page Not Found atau Error 404.

Berikut adalah salah satu instalasi Xampp yang sudah merupakan salah satu paket aplikasi yang terdiri dari web server (Apache) dan web database (MySql):

1. Install Xampp, ikuti langkah-langkah dibawah ini:
Pilih drive tempat penginstalan Xampp dengan menekan tombol Browse pada Destination Folder → klik Install → klik Yess → tunggu sampai proses Install selesai
Setelah selesai akan muncul jendela Command Prompt klik Enter sampai muncul tampilan seperti dibawah ini :
Pilih no 1 untuk menjalankan XAMPP Control Panel
Klik tombol Start pada Apache dan MySql untuk menjalankan Webserver dan Database nya
2. Klik tombol Shell sehingga akan muncul tampilan Command Prompt → buka mysql> dengan cara ketikkan mysql mysql -u root-p→ enter
-u adalah user yaitu root
-p adalah password, jika tidak ada kata kuncinya maka cukup dengan ketikkan mysql
-u root

EDITOR TEKS

Text editor merupakan software yang digunakan oleh seorang programmer untuk menulis kode program. Fungsi text editor biasanya hanya untuk menuliskan kode program tanpa disertai compiler yang terintegrasi. Berikut ini beberapa contoh text editor baik yang gratis maupun berbayar :

1. Notepad
Notepad merupakan text editor bawaan dari sistem operasi Windows. Jika kita menginstal windows, text editor ini selalu otomatis juga terinstal. Untuk programmer pemula, text editor ini direkomendasikan, karena bentuknya yang simpel dan mudah digunakan.

2. Notepad++
Text editor ini hampir sama dengan notepad bawaan Windows, tetapi memiliki fitur yang lebih banyak dibandingkan dengan Notepad. Notepad++ memiliki syntax highlighting, syntax folding, user defined syntax highkighting and folding, perl commpatible reguler expression search/replace, customizable GUI, document map, auto completion, multi-language, environment supported, bookmark, macro recording and playback, launch with different argument, multi editing, column- mode editing, line number.

Selain itu notepad ++ dapat berjalan disebagian besar POXIX compatible OS termasuk linux, FreeBSD, MacOS-X, OpenBSD dan Solaris.

3. Sublime
Sublime memiliki banyak fitur yang mempermudah pengguna dan eye cathing (tampilan menarik), Sublime Text merupakan aplikasi berbayar namun kita dapat menggunakan versi demonya, walaupun demo tapi tidak ada batasan dalam penggunaannya. Sublime Text tersedia untuk sistem operasi Windows, Linux dan Mac.

4. TextPad
TextPad didesain untuk performa yang lebih tinggi, dapat digunakan untuk mengedit file besar hingga batas 32 bit virtual memory. Dapat digunakan untuk mengedit file lebih dari satu secara bersamaan dan ada spell checker dengan kosakata kamus dari 10 bahasa.

5. Bluefish
Saat ini Bluefish menjadi text editor yang populer dan terbaik untuk membangun web. Bluefish mendukung bahasa HTML, XHTML, CSS, XML, PHP, C, JavaScript, Java, ColdFusion, JSP, Python, Ruby dan Shell. Bluefish dirilis dengan lisensi GNU, GPL dan pengembangan proyek sehingga dapat berjalan di sebagian besar POSIX compatible Operating System termasuk Linux, FreeBSD, MacOS-X, OpenBSD dan Solaris. Itulah 5 Text Editor yang dapat digunakan untuk membangun website. Sebenarnya masih banyak text editor yang lainnya.

C. TUGAS MANDIRI

Jawablah pertanyaan-pertanyaan di bawah ini dengan benar!
1. Sebutkan profesi yang termasuk web master dan jelaskan!
2. Jelaskan konsep world wide web!
3. Jelaskan fungsi web browser!
4. Apa fungsi dari web server?
5. Sebutkan dan jelaskan 3 macam editor text yang biasa digunakan untuk membangun website!

D. TUGAS KELOMPOK (5 SOAL URAIAN)

Buatlah kelompok dengan jumlah anggota 2 siswa setiap kelompoknya, dan bacalah petunjuk lalu kerjakan soal-soal di bawah ini dengan cermat dan teliti.

Petunjuk:
1. Carilah informasi dari sumber lain lalu lakukanlah diskusi dengan kelompoknya untuk menjawab pertanyaan-pertanyaan di bawah ini!
2. Buatlah laporan dari pertanyaan-pertanyaan yang telah dijawab kelompok Anda!
3. Presentasikan hasil diskusi kelompok Anda kepada kelompok lain!

Soal:
1. Sebutkan dan jelaskan 4 editor text yang digunakan untuk membangun website selain yang telah disebutkan pada uraian materi di atas!
2. Jelaskan konsep kerja web server!
3. Sebutkan dan jelaskan 3 jenis web server selain yang telah disebutkan pada materi di atas!
4. Apa sajakah yang menjadi tool pengembang web?
5. Jelaskan sejarah internet!

E. UJI KOMPETENSI

Berilah tanda silang (X) pada pilihan jawaban yang benar!
1. Kumpulan halaman yang menampilkan informasi data teks, gambar, suara, video atau gabungan semuanya disebut ....
A. Html
B. Web
C. HTTP
D. WWW
E. Browser

2. Yang membuat www bernama ....
A. French, c.s
B. Fletcher
C. John Markoff
D. Berners-Lee
E. John Smith

3. Teknologi web generasi pertama yang merupakan revolusi baru di dunia internet karena telah mengubah cara kerja dunia industri dan media merupakan pengertian dari ....
A. Web 1.0
B. Web 2.0
C. Web 3.0
D. Web 4.0
E. Web 0.0

4. Istilah Web 2.0 pertama kali di perkenalkan oleh ....
A. John Markoff
B. French c.s
C. John Smith
D. Reilly Media
E. Berners-Lee

5. Profesi dalam pengembangan web, kecuali...
A. Web Developer
B. Web Programer
C. Web Designer
D. Web Administrator
E. Web Browser

6. www dapat di gunakan gratis pada tanggal.....
A. 20 april 1993
B. 27 april 1993
C. 20 april 1993
D. 25 april 1995
E. 30 april 1993

7. Yang dimaksud dengan halaman Web adalah
A. Halaman elektronik yang dibuka dengan email
B. Halaman online bisa di download
C. Halaman digital yang dibuka dengan web browser
D. Halaman digital yang berisi berbagai jenis data dan gambar. 
E. Digital online yang terhubung dengan internet

8. Web dibuat pada tahun...
A. 1993
B. 1999
C. 1945
D. 1898
E. 1991

9. Orang-orang yang membangun website biasa dikenal dengan...
A. Web editor
B. Web master
C. Web browser
D. Web server
E. Web database

10. Orang yang bertugas membuat desain halaman web adalah...
A. Web desainer
B. Web master
C. Web administrasi
D. Web programmer
E. Web animator

11. Orang yang membuat program web adalah...
A. Web desainer
B. Web master
C. Web administrasi
D. Web programmer
E. Web animator

12. Software yang biasa oleh web animator adalah...
A. Dreamweaver
B. Notepad++
C. Photoshop
D. Mozilla
E. Flash

13. Salah satu tugas dari web administrator adalah...
A. Memelihara server agar dapat diakses selama 24 jam
B. Membuat desain halaman web
C. Membuat program web
D. Membuat animasi pada web
E. Menulis coding

14. Yang bukan termasuk web browser adalah...
A. Internet explore
B. Firefox
C. Firework
D. Flock
E. Safari

15. Perusahaan yang menyediakan layanan penyimpanan web disebut ....
A. Web Crawler
B. Web Hosting
C. Web Company
D. Internet Service Provider
E. Web Spider

16. Singkatan yang tepat dari URL (dlm internet) adalah....
A. Uniform Resource Locator
B. Unit Resource Lost
C. Undelete Run Left
D. Universal Run Locator
E. Universal Related Located

17. Sistem penamaan server dari komputer disebut juga...
A. HTML
B. Webpage
C. DNS
D. FTP
E. URL

18. Domain .uk merupakan domain negara
A. Amerika
B. Singapura
C. Ukraina
D. Inggris
E. Malaysia

19. Domain name merupakan domain untuk layanan...
A. Hiburan dan rekreasi
B. Nama dan alamat
C. Penerbangan
D. Pendidikan
E. Pelayanan informasi

20. Kepanjangan WWW adalah...
A. World Wide Web
B. Wide World Web
C. Web Wide World
D. World Web Wide
E. Web World Wide

MENJODOHKAN BENAR-SALAH

JAWABLAH PERTANYAAN DIBAWAH INI DENGAN MEMILIH B JIKA PERTANYAAN MEMILIKI JAWABAN BENAR ATAU S JIKA PERTANYAAN MEMILIKI JAWABAN SALAH!

1. Internet explore merupakan web browser bawaan Windows ( Benar / Salah )
2. Apache pertama kali didesain untuk sistem operasi Windows ( Benar / Salah )
3. HTML, PHP, ASP merupakan program yang biasa digunakan oleh web programmer dalam membangun website ( Benar / Salah )
4. Sublime Text tersedia untuk sistem operasi Windows, Linux dan Mac ( Benar / Salah )
5. Orang yang membuat coding disebut web administrator ( Benar / Salah )
6. Program Flash biasa digunakan oleh web animator untuk membuat animasi ( Benar / Salah )
7. Fungsi Web Server adalah untuk melakukan atau mentransfer berkas permintaan pengguna melalui protokol komunikasi yang telah ditentukan ( Benar / Salah )
8. Apache adalah salah satu software yang digunakan oleh seorang programmer untuk menulis kode program ( Benar / Salah )
9. Notepad merupakan text editor bawaan dari sistem operasi Windows ( Benar / Salah )
10. Flock adalah web browser yang dibangun dengan code mozilla firefox ( Benar / Salah )

0 komentar: