Bab 5

Membuat Homepage Sederhana

A.MENENTUKAN PERANGKAT LUNAK UNTUK MEMBUAT HOMEPAGE

Membuat homepage harus mengetahui beberapa hal yang harus diperhatikan yaitu sebagai berikut :

1.Tujuan dibuatnya homepage, apa sebenarnya yang menjadi tujuan utama dari pembuatan homepage harus jelas.

2.Siapa yang menjadi target untuk melihat homepage yang kita buat.

3. Klasifikasikan informasi yang akan ditampilkan dalam homepage.

4.Hasil klasifikasi informasi yang akan mewakili satu halaman homepage.

5.Buat sebuah scenario dari setiap hasil klasifikasi tersebt agar informasi yang akan ditampilkan benar-bena jelas atau tidak mangambang.

Terdapat juga criteria tools atau alat Bantu yang dapat digunakan untuk t, all program, Microsoft FrontPage.
membantu pengenbngn homepage, yaitu editor HTML, graphics, da multimedia animasi dan suara.

1.Editor HTML

Editor HTML digunakan untuk mendesain homepage dan komponen-
Komponennya. Selain itu seditorHTML juga digunakan untuk menggabungkan gambar, suara dan animasi yang telah dibuat dalam suatu halaman homepage. Editor HTML yang bersifat graphical user interface, akan mengurangi waktu kita dalam proses penulisan sintaks.

2.Editor Graphics
Editor grafis dgunakan untuk mengedit gambar yang akan ditampilkan pada homepage. Kita dapat memodifikasi warna, memotong gabar, memperbesar atau memperkecil gambar. Terdapat beberapa editor grafik yang sering digunakan dan popular yaitu CorelDRAW dan Adobe Photoshop.

3.Editor Multimedia Animasi dan Suara.

Editor multimedia digunakan untuk membuat animasi gambar dan suara. Terdapat suatu editor animasi yang paling popular yaitu, Macromedia Flash tidak hanya digunakan untuk membuat animasi gambar dan suara, tetapi juga untuk membuat suatu homepage multimedia.

B.MENENTUKAN LAYOUT HOMEPAGE YANG DIINGINKAN

Layout atau frame merupakan bentuk format navigasi dari homepage yang akan ditampilkan. Terdapat beberapa layout halaman homepage yang dapat kita gunakan dan tersedia pada Microsoft FrontPage XP.Kita tidak perlu membuat layout yg rumit yg akan membuat pengaksesan homepage lamban.

Layout atau frame merupakan bentuk format navigasi dari homepage yang akan ditampilkan.
Untuk melihat dan memilih jenis layout yang tersedia dalam Microsoft FrontPage XP, dapat dilakukan pada saat akan membuat halaman atau website baru. Langkah-langkah untuk melakukannya , yaitu sebagai berikut.
1. Pilih tombol start, all program, Microsoft FrontPage.
2. Pilih menu file, new, page or web.
3. Pilih Page Templates pada bagian New From template dari takspane New Page or web.
4. Pilih tab Frames Pages
5. Pilih jenis frame yang kamu inginkan lalu kli OK.


C.MENERAPKAN HYPERLINK


Hyperlink digunakan sebagai alat navigasi halaman pada homepge. Terdapat banyak informasi yang tidak dapat dijelaskan dalam satu halaman homepage secara keseluruhan. Cukup dengan menggunakan hyperlink, kita dapat menuju ke informasi yang akan kita akses pada page yang lain.

Langkah-langkah membuat hyperlink menggunakan Microsoft FrontPage, yaitu sebagai berikut.

1. Aktifkan aplikasi Microsoft FrontPage XP,

2. Buat tulisan “link ke halaman lain”

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

4. Tekan tombol pada Ctrl + K pada keyboard sehinnga akan ditampilkan kotak dialog Insert Hyperlink.

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

D.MENERAPKAN CASCADING STYLE SHEET

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

1. bentuk huruf
2. ukuran huruf
3. format huruf
4. warna huruf
5. warna background
6. warna hyperlink
7. format textbox

Beberapa CSS yang telah terseda dalam Micosoft FrontPage XP, dapat diakses dengan menggunakan langkah-langkah di bawah ini.

1. Aktifkan Microsoft FrontPage XP,

2. Pilih menu file, new, page or web

3. Pilih page Templates pada bagian New From template

4. Pilih tab Style Sheets

5. Pilih jenis Style sheet yang kamu inginkan lalu klik OK


Membuat CSS yang selanjutnya akan kita aplikasikan pada salah satu page HTML.

1. Aktifkan Microsoft FrontPage XP,

2. Pilih menu File, New, Page or Web

3. Pili page Templates pada bagian New From remplate

4. Pilih tab Style Sheet

5. Pilih jenis Arcs kemudian tekan tombol OK

6. Pilih File, Save

7. Ketikkan SMUKU padakotak dialog File name kotak dialog Save As kemudian tekan tombol Save.


E.MEMBUAT APLIKASI DALAM SISTEM YANG TERINTEGRASI

* Untuk membuat sebuah situs Hompage, diperlukan sebuah scenario yang sederhana. Fungsi dari scenario tersebut yaitu untuk memandu kita dalam menentiukan apa saja yang dapat dilakukan oleh suatu halaman atau website. Jika mengambang.


*Menentukan Directory Lokasi kerja.
Directory tempat kitamenyimpan file-file hasil kerja juga harus dipersiapkan dengan baik dan terorganosir. Pada satu directory , sebaiknya tidaak terdapat beberapa pekerjaan yang berbeda fungsi.


*Membuat halaman pada Homepage
Homepage yang akan kita buat terdiri dari 4 halaman. Setiap halaman memperlihatkan tampilan yang berbeda sesuai dengan fungsinya msing-masing.


1. Membuat halaman 1
2. Membuat halaman 2
3. Membuat halaman 3
4. Membuat halaman 4

F.MEMBUAT GRAFIS SESUAI DENGAN HOMEPAGE YANG DIINGINKAN
1. Aktifkan Adobe Photoshop
2. klik New
3. Maka muncul lembar baru
4. Pilih Rectangle Tool untuk memblok dan pilih warna di bagian Set foreground color
5. Beri efek texturizer ,pilih sesuai keinginan
6. Ganti warna dengan biru tua dengan Set foreground color
7. Buat tulisannya,dan edit sesuai keinginan
8. Simpan gambar dengan format GIF
G.MENDAFTARKAN ALAMAT DOMAIN KE PROVIDER WEB HOSTING

Untuk mempublikasikan homepage yg dibuat melalui internet,kita perlu mempunyai alamat di internet yg disebut domain.Untuk mendapatkannya kita harus membeli domain tsb.Nama domain sangat spesifik dan unik.Untuk dapat nama yg sama kita harus punya ekstension domain yang berbeda.

Langkah-langkah mendaftarkan alamat domain ke provider web hosting

1.Masuk ke situs web penjual web domain yang memiliki servis dan support yang baik seperti www.idwebhost.com, www.singcat.com, www.indohoster.com, dsb.

2.Daftar user baru pengguna situs tersebut.

3.Cari kotak isian yang berfungsi untuk mancari status domain apakah masih bisa didaftarkan atau sudah didaftarkan orang lain. Isi dengan domain yang anda ingin tahu ketersediaannya. Contoh masukkan abc.com, jika masih available berarti anda bisa mendaftarkan domain tersebut, namun jika tidak bisa maka anda bisa mencoba mencari alternatif domain lain atau membeli domain akhiran lain.

4.Daftarkan domain yang tersedia / available tersebut dengan mengisi berbagai form isian untuk data konfigurasi, alamat, dan lain-lain.

5.Lakukan pembayaran sesuai prosedur yang dapat dilayani oleh masing-masing penjual domain. Contohnya adalah seperti melakukan transfer rekening-rekening bank.

6.Konfirmasi pembayaran bahwa anda telah melakukan perbayaran atas domain yang anda daftarkan tadi melalui form isian, yahoo instant messenger, email, sms, dan lain sebagainya sesuai ketentuan penjual domainnya.

7.Jika semua lancar dan berjalan mulus, maka anda sudah dapat menggunakan domain anda dalam beberapa saat. Biasanya akan ada kiriman email yang mengkonfirmasi domain anda sudah bisa digunakan.

8.Setting name server domain tersebut agas merujuk ke server webhosting anda. name server berbentuk alamat situs dengan awalan subdomain ns1, ns2, dan sebagainya. Urutan dns name server berpengaruh karena ketika ns1 down, maka kita dialihkan ke ns2.

9.Selanjutnya anda harus memiliki account web hosting untuk dapat segera membuat situs. Dari account webhosting inilah anda mendapatkan domain name server atau dns. Setting tambah domain addon atau parked dengan domain baru anda pada control panel yang ada. Kemudian anda sudah bisa mulai membuat situs anda.

10.Jangan lupa memperpanjang masa aktif domain anda setiap 11 bulan sekali agar tidak terlewat. Agar orang tidak mengambil alih domain tersebut.

H.MELAKUKAN UPLOAD

Kita akan mempelajari cara upload dokumen yang tlh kita buat di komputer dengan internet.Hal ini membutuhkan tempat untuk menyimpan dan menampilkan data di internet.

Mempelajari cara melakukan upload dokumen yang telah kita buat dalam computer kita ke internet. Hal ini diburuhkan temoat untuk menyimpan dan menampilkan data di internet. Untuk lebih mudah memahami cara melakukan upload dan perbaikan data homepage., kita guakan fasilitas gratisdari yahoo dengan alamat http://www.yahoo.com

I.MEMPERBAIKI DAN MEREVISI DATA YANG SUDAH ADA

Web yang telah di publikasikan si internet perlu untuk di perbaiki dan di revisi secara berkala untuk menjaga sajian informasi yang aktual dan terpercaya .

Bab 6

MEMBUAT HOMEPAGE INTERAKTIF

A . MEMPROGRAM WEB

1.Persiapan Software
Untuk membuat homepage interaktif membutuhkan software yang dengan sistem operasi, seperti :

- Internet Information Services ( IIS)

- Microsoft Acces

- Microsoft FrontPage

- Microsoft Internet Explorer

- Open DataBase Connectivity (ODBC).

a. Sistem Operasi
Dalam pembahasan ini, kita akan menggunakan Windows XP Professional sebagai system operasi, karena kita sudah terbiasa dengan tampilan dan berbagai komponennya. Selain itu dapat menggunakan Windows NT, Windows 2000, dan Windows 2003.

b. Komponen Internet Information Services (ISS) pada Windows XP
Fungsi IIS sebagai web server. Web serverterkenal di dunia contohnya Apache dan IIS. Langkah-langkah untuk menginstal komponen ISS dalam komputernu, yaitu:
1.Masukkan CD MS Windows XP kedalam CD-ROM Pengguna.

2.Secara otomatis, sistem mengaktifkan autorun yang tersimpan dalam CD tersebut. Bila autorun gagal dijalankan, maka beralihlah ke CD tersebut dan pilihlah Setup.exe

3.Ambilah pilihan Install Add-On Components.
Kemudian, Pengguna akan diantar ke jendela Windows Components Wizards seperti dibawah ini.

4.Klik-lah check box Internet Information Services (IIS) sehingga check box itu tercentang (dalam keadaan terpilih).

5.Klik-lah tombol Details sesudahnya,

6.Pastikan Pengguna mengambil pilihan yang penting, seperti World Wide Web Servers, Frontpage 2000 Server Extensions (bila bekerja dengan MS Frontpage 2000 dan webbot), Personal Web Manager, File Transfer Protokol (FTP) Server, SMTP Servise, Internet Information Servise snap-in, dan lainnya terkadang, supaya bekerja dengan baik, Pengguna perlu memilih semua pilihan yang ada di atas dengan cara mengklik semua check box tersebut.

7. Klik-lah tombol OK untuk keluar.

8. Klik-lah Next untuk melanjutkan ke proses installasi.

Setelah IIS berhasil Pengguna susupkan ke dalam sistem MS Windows XP maka server tersebut berada dalam keadaan siap dan aktif. Pengguna sudah boleh menggunakannya mulai saat itu.

c. Microsoft FrontPage
Digunakan untuk merancang homepage, di mana kita juga telah menggunakan software ini untuk mengembangkan homepage sederhana.

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. Untuk pengaksesan klik tombol start-Control panel-Administrative Tools-Data Sources (ODBC).

2. Persiapan Direktori Kerja

Langkah-langkah yang harus dilakukan, yaitu:
1. Aktifkan Windows Explore

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

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

3. Persiapan Skenario User Interface

1. Form: Input data siswa
Fungsi : Untuk memasukan data siswa dari homepage ke data base
Field yang harus ada: Nomor induk, Nama, Tanggal lahir, Kelas, Jurusan, dan Tahun Masuk.

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

4. Persiapan komponen IIS

Cara pengaksesan IIS, yaitu :
- pilih tombol start-Control Panel
- pilih Administrative Tools pada jendela Control Panel lalu pilih Internet
   Information Services
- klik nama komputer lalu pilih Web Sites dan klik Default Web Site

Terdapat 2 cara menampilkan informasi homepage melalui IIS
a. menggunakan port

b. menggunakan direktori virtual

Tipe data untuk merepresentasikan penyimpanan data dalam database yang disediakan Microsoft Access:
a. Text, merepresentasikan data yang berbentuk gabungan huruf, angka, dan karakter khusus.
b. Number, merepresentasikan data yang berbentuk angka
c. Date, merepresentasikan data yang berbentuk tanggal
d. Memo, merepresentasikan data yang berbentuk teks, dan jumlahnya sangat banyak
e. Currency, merepresentasikan data yang mempunyai format currency atau mata uang
f. Auto Number, merepresentasikan data yang akan ditangani oleh sistem berupa angka
g. OLE object, merepresentasikan data yang berupa gabungan dari objek-objek yang dibuat Microsoft
h. Hyperlink, merepresentasikan data yang berupa link atau hubungan ke website atau tempat lain

Ikon toolbar Form Microsoft FrontPage
- Form, membuat form dalam satu halaman
- TextBox, merepresentasikan input berupa teks, numerik, atau date
- Scrolling TextBox, merepresentasikan input berupa teks yang panjang
- Check Box, merepresentasikan pilihan ya atau tidak
- Radio Button, merepresentasikan pilihan ya auat tidak
- Combo Box, merepresentasikan data yang berupa pilihan terbatas
- Push Button, merepresentasikan sebuah tindakan yang akan dilakukan jika tombol
  ditekan
- Picture, merepresentasikan sebuah gambar dalam homepage
- Label, merepresentasikan tulisan

a. langkah pengaksesan port

- klik kanan Web Sites, klik New Web Sites, pilih port
- gunakan port sembarang antara 2000-65500
- jangan menggunakan port 80
- 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

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
a.aktifkan Microsoft Access. Buat database data siswa dan simpan dalam C:\SMUKU-INT\
b.buat satu table dengan nama datasiswa dengan struktur isi table

2.Pembuatan Data Source Name (DSN)
a.tekan tombol start-Control Panel-Performance and Maintenance AdministrativeTools-Data Source
b.akan ditampilkan kotak dialog ODBC Data Source Administrator, pilih tab System DSN
c.klik tombol Add, pilih Microsoft Access Driver kemudian tekan Finish
d.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. 

a.Programming halaman pertama yaitu pembuatan halaman datasiswa.htm
b.Lakukan modifikasi terhadap halaman datasiswa.htm dengan memasukkan kode ASP pada bagian awal halaman sebelum tag
c.Simpan file dengan nama datasiswa.asp
d.Programming halaman kedua yaitu pembuatan halaman lihatdatasiswa.htm. buka kembali halaman lihatdatasiswa.htm pada Microsoft FrontPage
e.Selanjutnya akan dilakukan modifikasi terhadap halaman lihatdatasiswa.htm dengan memasukkan kode ASP
f.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.