Bab 6 TIK Kelas XI

BAB 6

Membuat Homepage interaktif

A. Memprogram Web

1. Persiapan Software

Software yang dibutuhkan seperti sisitem operasi, Internet Information Services ( IIS), Microsoft Acces, Microsoft FrontPage, Microsoft Internet Explorer, dan Komponen Open DataBase Connectivity (ODBC).

a. Sistem Operasi

Dalm pembahasan ini, kita akan menggunakan Windows XP Professional sebagai system operasi, karena kita sudah terbiasa dengan tampilan dan berbagai komponennya.

b. Komponen Internet Information Services pada Windows XP

v Langkah-langkah untuk menginstal komponen ISS dalam komputernu, yaitu:

1. Masukan CD installer Windows XP Profesional ke dalam CD-ROM pada komputermu

2. Aktifkan Control Panel dalam melalui tombol start ~ Control Panel . Pilih Add or Remove Programs.

3. Pada jendela Add or Remove Programs, pilih Add/Remove Windows Components

4. Selanjutnya, akan ditampilkan kotak dialog Windows Components Wizard pertama. Pilih Internet Information Service (IIS). Pilih semua komponen yang tersedia, kemudian tekan OK. Selanjutnya, tekan tombol Next

5. Proses instalisasi akan dilakukan secara otomatis.

6. Tekan tombol Finish setelah proses instalisasi selesai dilakukan

7. System akan menampilkan kotak dialog untuk melakukan proses Restart komputermu

8. Untuk melihat apakah komponen IIS telah ter-instal dalam komputermu, aktifkan Control Panel kemudian pilih Performance and Maintenance ~ Administrative Tools

9. Selanjutnya, akan ditampilkan jendela Internet Information Service dengan berbagai komponen di dalamnya

C. Microsoft FrontPage

Digunakan untuk merancang homepage, di mana kita juga telah menggunakan software ini untuk mengembangkan homepage sederhana pada pembahasan sebelumnya.

D. Microsoft Access

Digunakan untuk membuat database sebagai penyimpan data yang akan kita masukkan ke dalam database.

E. Microsoft Internet Explorer

Digunakan untuk melakukan pengujian dan pengaksesan homepage interaktif yang telah di buat.

F. Komponen Open DataBase Connectivity (ODBC)

Digunakan untuk melakukan koneksi dari program komputer ke database. Komponen ini biasanya sudah tersedia dalam Windows XP.

2. Persiapan Direktori Kerja

v Langkah-langkah yang harus dilakukan, yaitu:

1. Aktifkan Windows Explore

2. Buat satu direktori dalam drive C dengan nama SMUKU-INT

3. Buat subdirektori image, css, dan database dalam directori SMUKU-INT

3. Persiapan Skenario User Interface

Tabel skenario user interface

No	Form	Fungsi	Field yang harus ada
1	Input data siswa	Untuk memasukan data siswa dari homepage ke data base	Nomor induk, Nama, Tanggal lahir, Kelas, Jurusan, dan Tahun Masuk.
2	Output data siswa	Untuk menampilkan data siswa yang terdapat dalam database ke dalam homepage	Nomor induk, Nama, Tanggal lahir, Kelas, Jurusan, dan Tahun Masuk

4. Persiapan Komponen IIS

v Cara pengaksesan IIS, yaitu :

1. Pilih tombol start-Control Panel

2.Pilih Administrative Tools pada jendela Control Panel lalu pilih Internet Information Services

3. Klik nama komputer lalu pilih Web Sites dan klik Default Web Site

Ø Terdapat 2 cara menampilkan informasi homepage melalui IIS :

a. Menggunakan port (hanya dapat digunakan pada IIS dalam Windows NT, Windows

2000, Windows 2003

b. Menggunakan direktori virtual

a. Pengaksesan menggunakan port

1. Klik kanan Web Sites, klik New Web Sites, pilih port

2. Gunakan port sembarang antara 2000-65500

3. Jangan menggunakan port 80

4. Pengaksesan dengan menggunakan port 8080

-Stand alone computer-http://localhost:8080/namafile.htm

-Intranet-http;//namakomputer:8080/namafile.htm

-Internet-http://www.namadomain.com:8080/naamfile.htm

b. Pengaksesan menggunakan direktori virtual

1. Klik kanan Default Web Site, pilih New –Virtual Directory

2. Akan ditampilkan Virtual Directory Creation Wizard pertama. Tekan Next

3. Pada Virtual Directory Creation Wizard kedua untuk mengisi alias direktori,

ketikkan SMUKU-INT. Lalu tekan Next

4. Akan ditampilkan wizard untuk memasukkan direktori yang akan digunakan. Tekan

tombol Browse untuk masukkan C:\SMUKU-INT lalu tekan Next

5. Pada wizard yang menampilkan access permission, tekan Next

6. Tekan tombol Finish

7. Pada jendela Internet Information Services terlihat bahwa direktori virtual sudah berhasil dibuat

8. Pengaksesan dengan menggunakan direktori virtual SMUKU-INT:

-Komputer local-http://localhost/SMUKU-INT/datasiswa.htm

-Intranet-http://namakomputer/SMUKU-INT/datasiswa.htm

-Internet-http://www.namadomain.com/SMUKU-INT/datasiswa.htm

5. Pemilihan Bahasa Pemrograman

Microsoft Active Server Pages (ASP) merupakan bahasa pemrograman yang secara otomatis disediakan oleh Microsoft jika kita menggunakan IIS dengan Windows, seperti Windows Server 2003, Windows XP, Windows NT, dan Windows 2000. ASP merupakan suatu skrip yang ditambahkan pada halaman HTML untuk membuat web menjadi lebih menarik, dinamis, dan interaktif. Server side berarti proses pengerjaan skrip berlangsung di server bukan di browser atau client.Karena bersifat server side, maka untuk dapat dijalankan pada sebuah PC biasa yang berbasis Windows, PC tersebut perlu disimulasikan menjadi sebuah web server dengan menginstal Microsoft Personal Web Server (PWS) atau Microsoft Internet Information Services (IIS). Bahasa skrip standar yang digunakan ASP adalah Microsoft VBScript dan Microsoft Jscript. Jika tidak dinyatakan sendiri maka

secara default skrip yang digunakan adalah Microsoft VBScript. Kamu dapat mengubah default tersebut dengan menambahkan perintah <%LANGUAGE=bahasa skrip%>

ü Alasan utama penggunaan bahasa pemrograman ASP:

a. Tersedia secara gratis

b. Struktur bahasanya mudah dipelajari

c. Mampu berkomunikasi dengan bahasa pemrograman lain

d. Mempunyai respons request data dengan cepat

e. Untuk menggunakannya kita hanya tinggal meletakkan kode pemrograman pada halaman homepage yang akan kita program

Sebuah file ASP merupakan file text only yang di dalamnya berisi teks, tag HTML, dan skrip ASP. File ASP sebenarnya file HTML biasa yang ke dalamnya ditambahkan skrip ASP. Jika file HTML mempunyai eksistensi .htm atau .html maka jika sudah diberi skrip ASP tinggal diubah menjadi .asp. Untuk membedakan antara teks, tag HTML, dan skrip ASP digunakan suatu tanda disebut delimiter(suatu karakter atau kumpulan karakter yang mengawali dan mengakhiri suatu tag atau skrip) <%dan%>

a. Deklarasi Variabel

VBScript mempunyai beberapa pernyataan yang digunakan untuk pendeklarasian variable yaitu dim private, dan public. Perbedaannya pada ruang lingkup yang digunakan. Jika menggunakan dim atau private maka variabelnya bersifat local, bila public variabelnya bersifat global.

b. Blok Kode ASP

ASP selalu diawali dengan blok <%dan dakhiri%>. Dalam kedua blok tersebut sintaks atau kode ASP dituliskan

c. Statement input

Sintaks 1- Request.Form()

Sintaks 2- Request.queryString(url>)

Request.Form untuk mengambil nilai dari elemen-elemen form HTML, sedangkan Request.QueryString digunakan untuk mengambil nilai variabel HTTP query string ditandai dengan karakter tanda Tanya (?) dan biasanya terletak di belakang penulisan alamat URL

d. Statement Output

Digunakan untuk mengatur output yang akan dikirimkan ke browser. Metode yang digunakan metode write dan redirect.

e. Statement Logika

Sintaks logika untuk ASP sama dengan sintaks logika bahasa pemrograman Visual Basic.

f. Statement Looping

Sintaks looping untuk ASP juga sama dengan sintaks looping atau perulangan pada bahasa pemrograman Visual Basic.

g. Operasi Pengaksesan Data

Sintaks pengaksesan data juga sama dengan Visual Basic

h. Cara Kerja ASP

Misalnya kita mengakses halaman ASP dari sebuah website http://www.namadomain.com/indeks.asp. halaman tersebut akan diload ke browser internet explorer dalam bentik HTML setelah terlebih dahulu web server menerjemahkan atau mengcompile semua kode yang terdapat dalam blok <%%> pada file indeks.asp. Semua kode ASP yang terdapat dalam file akan hilang dan diganti dengan value yang dikembalikan dari database.

B. Memprogram DataBase Web Interaktif

1. Pembuatan Database

1. Aktifkan Microsoft Access. Buat database data siswa dan simpan dalam C:\SMUKU-INT\

2. Buat satu table dengan nama datasiswa dengan struktur isi table

2. Pembuatan Data Source Name (DSN)

1. Tekan tombol start-Control Panel-Performance and Maintenance AdministrativeTools- Data Source

2. Akan ditampilkan kotak dialog ODBC Data Source Administrator, pilih tab System DSN

3. Klik tombol Add, pilih Microsoft Access Driver kemudian tekan Finish

4. Pada kotak dialog ODBC Microsoft Access Setup isi kotak data Source Name dengan data siswa dan kotak description dengan data siswa, tekan tombol Select untuk memasukkan database selanjutnya tekan OK

3. Pemrograman

Dilakukan setelah kita menyelesaikan pembuatan DSN. Untuk pemrograman ini

akan ditampilkan halaman HTML dan halaman modifikasi menjadi ASP.

1. Programming halaman pertama yaitu pembuatan halaman datasiswa.htm

2. Lakukan modifikasi terhadap halaman datasiswa.htm dengan memasukkan kod

ASP pada bagian awal halaman sebelum tag

3.Simpan file dengan nama datasiswa.asp

4. Programming halaman kedua yaitu pembuatan halaman lihatdatasiswa.htm.

buka kembali halaman lihatdatasiswa.htm pada Microsoft FrontPage

5. Selanjutnya akan dilakukan modifikasi terhadap halaman lihatdatasiswa.htm

dengan memasukkan kode ASP

6. Simpan file dengan nama lihatdatasiswa.asp

4. Pengujian (Testing)

Testing ini akan memberitahukan kepada kita apabila terdapat kesalahan dalam coding yang kita lakukan. Ditampilkan dalam browser yang kita akses. Jika tidak terdapat kesalahan maka kita dapat mengetahui bahwa data tersebut sudah tersimpan dalam database.

Bab 5 TIK Kelas XI

Bab 5

Membuat Homepage Sederhana

A. Menentukan Perangkat Lunak untuk Membuat Homepage

v Hal yang harus diperhatikan dalam membuat homepage:

1. Tujuan dibuatnya homepage

2. Orang yang menjadi target untuk melihat homepage kita

3. Informasi yang akan ditampilkan dalam homepage

4. Hasilnya mewakili satu halaman homepage dan dapat ditambah dengan hyperlink

5. Buat kerangka homepage yang akan kita buat

3 kriteria tools atau alat bantu dalam pengembangan homepage:

1. Editor HTML

Digunakan untuk mendesain homepage diantaranya menggabungkan gambar, suara dan animasi dalam suatu halaman homepage. Contoh produknya Microsoft FrontPage XP

2. Editor Graphics

Digunakan untuk megedit gambar yang akan ditampilkan pada homepage. Kita dapat memodifikasi warna, memotong gambar, memperbesar atau memperkecil gambar, menggabungkan beberapa gambar, memberi efek pada gambar sehingga siap ditampilkan pada homepage. Contohnya CorelDRAW dan Adobe Photoshop.

3. Editor Multimedia Animasi dan Suara

Digunakan untuk membuat animasi gambar dan suara. Macromedia Flash adalah editor animasi yang paling populer. Kita dapat merubah animasi yang rumit sehingga dapat dikerjakan dengan baik

B. Membuat Layout Homepage yang Diinginkan

Layout atau frame adalah bentuk format navigasi dari homepage yang akan ditampilkan.

Untuk melihat dan memilih jenis layout tersedia dalam Microsoft FrontPage XP, dapat kita lakukan pada saat akan membuat halaman atau website baru. Langkah-langkah untuk melakukannya, yaitu :

1. Pilih tombol start. All Programs. Microsof FrontPage XP. Selanjutnya, akan ditampilkan dokumen baru pada Microsoft FrontPage

2. Pilih menu File. New. Page or Web

3. Pilih Page Templates pada bagian New from template dari taskpane New Page or Web

4. Selanjutnya, akan ditampilkan kotak dialog Page Templates yang terdiri atas tiga tab, yaitu General, Frames Pages, dan Style Sheets

5. Pilih jenis frame yang kamu inginkan, kemudian klik tombol OK.

Ø Jenis-jenis frame pada MIcrosoft FrontPage XP

1. Banners and Contents

2. Contents

3. Footers

4. Footnotes

5. Header

6. Header, Footer and Contents

7. Horizontal Split

8. Nested Hierarchy

9. Top Down Hierarchy

10. Vertical Split

C. Menerapkan Hyperlink

Hyperlink digunakan sebagai alat navigasi halaman pada homepage. Lagkah-langkah mermbuat hyperlink menggunakan Microsoft FrontPage XP, yaitu :

1. Aktifkan aplikasi Microsoft FrontPage XP.

2. Buat tulisan “Link ke halaman lain: pada dokumen baru yang ditampilkan pertama kali.

3. Blok tulisan “Link ke halaman lain” dengan cara men-drag tombol kiri mouse

4. Tekan tombol CTRL+K pada keyboard sehingga akan ditampilkan kotak dialog Insert Hyperlink

5. Setelah file disimpan dan dijalankan, ketika kita klik “Link ke halaman lain” maka akan membuka halaman tujuan link tersebut

v Langkah-langkah untuk membuat hyperlink dengan tag HTML, antara lain :

1. Aktifkan aplikasi Microsoft FrontPage XP.

2. Buat tulisan “Link ke halan lain” pada dokumen baru yang ditampilkan pertama kali.

3. Klik tab HTML di bagian bawah dokumen.

4. Selanjutnya, akan tampil sintaks HTML.

5. Letakkan kursor di depan kata “Link” dan di belakang tag pada sintaks HTML yang ditampilkan.

6. Letakkan kursor di belakang kata “lain” dan di depan tag Ketikkan tag .

7. Klik tab normal di bagian bawah dokumen untuk melihat hasil akhir.

Link istilah singkat untuk hyperlink, merupakan serangkaian teks atau gambar yang terhubung dengan file atau halaman lain dalam satu atau beberapa dokumen.

D. Menerapkan Cascading Style Sheet

Tag merupakan elemen dalam HTML yang merupakan perintah kepada web browser untuk menampilkan elemen teks, gambar, atau link. Tag dimulai dengan karakter <>. Dalam tanda < > tertulis perintah kepada web browser. Satu perintah terdiri atas dua tag, yaitu tag pembuka < > dan tag penutup . Contoh :

Hello World!

.

Ø Fungsi utama dari CSS adalah untuk melakukan pengaturan beberapa format, yaitu :

- Bentuk huruf,

- Ukuran huruf,

- Format huruf,

- Warna huruf,

- Warna background,

- Warna hyperlink,

- Format textbox.

Style Sheet merupakan file atau format yang menentukan layout dari sebuah dokumen. Style sheet biasanya disebut juga template.

CSS (Cascading Style Sheets) merupakan sebuah file yang berisi sekumpulan perintah untuk memformat bagaimana sebuah halaman web ditampilkan oleh web browser. Dengan kata lain, CSS merupakan rujukan format tampilkan halaman web. CSS dapat ditulis sendiri dalam satu file yang terpisah dari HTML atau ditulis langsung pada bagian head HTML. Karena sifatnya cascade (seperti air terjun), satu perintah CSS berlaku untuk semua bagian dalam dokumen HTML.

Ø Jenis-jenis CSS pada Microsoft FrontPage:

1. Normal Style Sheet

2. Arcs

3. Bars

4. Blocks

5. Blueprint

6. Capsules

7. Downtown

8. Expedition

9. Highway

10. Neon

11. Poetic

12. Street

13. Sweet

Head merupakan elemen HTML yang berisi informasi umum mengenai dokumen atau disebut juga meta-information. Meta berarti “informasi tentang”. Metadata adalah informasi tentang data, sedangkan meta-information berarti informasi tentang informasi. Web browser tidak menampilkan informasi yang terdapat dalam head kepada pengguna.

Tittle merupakan bagian dari head HTML yang berisi teks, digunakan untuk mendefinisikan judul sebuah halaman web yang akan ditampilkan pada tittle bar web browser.

E. Membuat Aplikasi dalam Sistem yang Terintegrasi

1. Membuat Aplikasi Terintegrasi dengan Microsoft FrontPage

Untuk membuat sebuah situs atau homepage, diperlukan sebuah scenario yang sederhana. Fungsi dari scenario tersebut, yaitu untuk memandu kita dalam menentukan apa saja yang dapet dilakukan oleh suatu halaman atau website. Setelah scenario terbentuk, kita juga perlu memikirkan tools atau alat bantu yang akan digunakan untuk mengembangkan homepage tersebut.

2. Menentukan Directory Lokasi Kerja

v Langkah-langkah yang dilakukan untuk mempermudah pencarian file hasil kerja pada saat diperlukan, sebagai berikut :

1. Buat directory pada drive C:\

2. Dalam directory C:\, buat directory / folder Image yang akan digunakan untuk menyimpan gambar-gambar yang akan digunakan untuk menyimpan CSS

3. Pada Windows Explorer akan terlihat struktur file

3. Membuat Halaman pada Homepage

a. Membuat halaman 1

b. Membuat halaman 2

c. Membuat halaman 3

d. Membuat halaman 4

4. Mengaplikasikan Casading Style Sheet

1. Copy file yang telah dibuat sebelumnya ke dalam directory C:\...\CSS
2. Masukan diantara tag <meta> dan
3. Simpan halaman tersebut
4. Melalui Windows Explorer, kamu dapat melihat tampilan akhir dengan cara kli dua kali file “…..htm”, pastikan semua link ke halaman lain seperti jadwal pelajaran, data siswa, dan link bermanfaat berfungsi dengan benar
5. Hasilnya dapat terlihat

F. Membuat Grafis Sesuai dengan Homepage yang Diinginkan

Menggunakan editor Adobe Photoshop 7.0 :

1. Aktifkan Adobe Photoshop 7.0 dengan cara klik tombol start ~ All Programs ~ Adobe Photoshop 7.0
2. Pilih menu File ~ New
3. Selanjutnya, akan ditampilkan kotak dialog new
4. Setelah dilakukan pengaturan, aka nada ditampilan lembaran baru
5. Selanjutnya, pilih Rectangle Tool pada toolbox. Sebelumnya, pilih warna di bagian Set foreground
6. Berikan efek texturizer. Filter ~ Texture ~ Texturizer
7. Ganti warna lagi dengan cara mengklik tool Set foreground
8. Klik Horizontal Type Tool pada toolbox
9. Langkah terkhir yaitu menyimpan gambar dengan nama logosmu dengan format GIF dalam subfolder Image dalam folder C:\.... kemudian tekan tombol Save

G. Mendaftarkan Alamat Domain ke Provider Web Hosting

Langkah-langkah yang digunakan untuk mendaftarkan alamat domain ke provider hosting, yaitu :

1. Aktifkan Internet Explorer. Ketik http://www.register.com pada kotak URL pada web browser.

2. Cari kotak pencarian domain. Lalu ketik nama domain yang akan kita cari.

3. Jika berhasil maka hasilnya akan terbuka

4. Ketik nama domain pada kotak TRY A NEW SEARCH, kemudian tekan tombol search.

ü World Wide Web Consortium (W3C) mengembangkan teknologi (spesifikasi, petunjuk – guide line, software dan tool) yang dapat dioperasikan pada platform mana pun, membawa web mencapai potensi yang utuh sebagai suatu forum informasi, commerce, komunikasi dan perjanjian bersama (collective understanding). W3C dibentuk pada Oktober 1994, dengan anggota lebih dari 400 organisasi.. W3C saat ini merupakan badan resmi yang membuat standar web. W3C meletakkan gabungan spesifikasi dalam standar web. Berikut ini merupakan hasil dari W3C.

- Standar web yang paling mendasar adalah HTML, CSS dan XML.

- Standar HTML yang terakhir adalah XHTML 1.0

ü Wesite copier merupakan aplikasi yang digunakan untuk meng-copy sebuah website dari internet ke dalam harddisk.

ü Website file sharing merupakan website yang menyediakan fasilitas untuk menampung file dari seseorang untuk disebarluaskan dengan cara menyediakan link untuk men-donwload file tersebut kepada orang lain.

ü HTTP (Hyper Text Protocol) merupakan protocol yang digunakan pada World Wide Web (WWW).

H. Melakukan Upload

Upload merupakan proses meng-copy file computer lokal ke komputer remote. Biasanya menggunakan jalur (protokol) HTTP, FTP, dan protokol lainnya. Upload merupakan kebalikan dari download.

v Langkah-langkah melakukan upoad:

1. daftarkan homepage dengan cara tekan tombol Sign Up Now klik link Sign Up dibawah kotak Log In

2. lengkapi form untuk anggota baru

3. setelah selesai klik link build up your website now.

4. Pada geocities control panel pilih menu manage kemudian klik link file mnager.

5. Klik link open file manager.

6. Tekan tombol upload files.

7. Tekan link file manager

8. Tekan tombol create subdirectory

9. Tekan Save

I. Memperbaiki dan Merevisi Data yang Sudah Ada

· Aktifkan Yahoo! Geocities

· Aktifkan geocities control panel, klik link file manager

· Upload file

· Klik link view my site