THOUSANDS OF FREE BLOGGER TEMPLATES

Minggu, 21 November 2010

BAB 6

Membuat Hompage Iinteraktif

A. Memprogram Web

1. Persiapan Software
Untuk membuat homepage interaktif engunakan beberapa software dengan sistem
operasi,

Internet Information Services (IIS), Microsoft Access, Microsoft FrontPage,
Microsoft Internet Explorer, dan komponen Open DataBase Connectivity (ODBC)

a. Sistem Operasi
menggunakan Windows XP Professional. Selain itu dapat menggunakan Windows NT,
Windows 2000, dan Windows 2003

b. Komponen IIS pada Windows XP
Jika belum terdapat IIS pada komputer lakukan penginstalan dengan menggunakan
CD

instaler Windows XP Professional. Fungsi IIS sebagai web server. Web server
terkenal di dunia contohnya Apache dan IIS. Dengan menggunakan IIS kita tidak
perlu melakukan konfigurasi atau pemasangan secara manual.

Langkah-langkah menginstal:

-masukkan CD installer Windows XP Professional ke dalam CD-ROM
-aktifkan Control Panel melalui tombol Start-Control Panel. PIlih Add or
Remove Programs
-pada jendela Add or Remove Programs, pilih Add/Remove Windows Components
-pilih Internet Information Services (IIS) pada kotak dialog Windows
Components Wizard pertama. Pilih semua komponen yang tersedia lalu tekan OK.
Lalu tekan Next
-proses instalasi akan dilakukan. Untuk mencari lokasi file tekan tombol
Browse. Lalu tekan OK
-tekan tombol Finish
-lakukan proses restart pada komputermu
-untuk melihat apakah komponen IIS terinstal aktifkan Control Panel pilih
Performance and Maintenance-Administrative Tools dengan cara klik 2 kali.
Pada jendela Administrative Tools terlihat komponen Internet Services. Klik 2
kali.
-akan ditampilkan jendela Internet Information Services dengan berbagai
komponen

c. Microsoft FrontPage
untuk merancang homepage

d. Microsoft Access
untuk membuat database

e. Microsoft Internet Explorer
untuk melakukan pengujian dan pengaksesan homepage interaktif yang telah
dibuat. Selain Microsoft Internet Explorer dapat juga menggunakan Mozilla
Firefox, Netscape, atau Opera

f. Komponen Open DataBase Connectivity
untuk melakukan koneksi dari program komputer ke database. Komponen ini sudah
tersedia pada Windows XP. Untuk pengaksesan klik tombol start-Control
panel-Administrative Tools-Data Sources (ODBC).

Salah satu keluhan utama pengguna Microsoft adalah penggunaan database yang
membingungkan. Pada awalnya kita hanya dapat menggunakan Open DAtaBAse
Connectivity (ODBC) Application Programming Interface (API) yang tidak mudah
digunakan dalam lingkungan VIsual Basic. ODBC suatu spesifikasi untuk database
API. API adalah standar yang didukung berbagai vendor, termasuk Oracle,
Informix, Sybase, dan Microsoft. Driver untuk database ini disediakan baik
oleh vendor maupun perusahaan pihak ketiga seperti Intersolv

2. Persiapan Direktori Kerja
-aktifkan Widows Explorer
-buat satu direktori dalam drive C dengan nama misalkan SMUKU-INT
-buat subdirektori image, css, dan database dalam direktori tersebut
3. Persiapan Skenario User Interface
Skenario form dibuat untuk memberikan gambaran apa yang akan dikerjakan. Terdapat
2 form dengan fungsi sebagai form untuk memasukkan dan menampilkan data siswa
dari
database.

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

4.Persiapan Komponen IIS
cara pengaksesan IIs
-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 (hanya dapat digunakan pada IIS dalam Windows NT, Windows
2000, Windows 2003
b. menggunakan direktori virtual

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


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)

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 . 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 kod
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.
Pemilihan Bahasa Pemograman.
Microsoft Active Server Pages (ASP) merupakan bahasa pemograman yang secara otomatis disediakan oleh Microsoft jika kita menggunakan IIS.
a. Deklarasi Variabel
b. Blok kode ASP
c. Statement Input
d. Statement output
e. Statement Logika
f. Statement looping
g. Operasi pengakses data
h. Cara kerja ASP

Memprogram Web
1. Persiapan Software
Untuk membuat homepage interaktif engunakan beberapa software dengan sistem
operasi,
Internet Information Services (IIS), Microsoft Access, Microsoft FrontPage,
Microsoft Internet Explorer, dan komponen Open DataBase Connectivity (ODBC)
a. Sistem Operasi
menggunakan Windows XP Professional. Selain itu dapat menggunakan Windows NT,
Windows 2000, dan Windows 2003
b. Komponen IIS pada Windows XP
Jika belum terdapat IIS pada komputer lakukan penginstalan dengan menggunakan
CD
instaler Windows XP Professional. Fungsi IIS sebagai web server. Web server
terkenal di dunia contohnya Apache dan IIS. Dengan menggunakan IIS kita tidak
perlu melakukan konfigurasi atau pemasangan secara manual.
Langkah-langkah menginstal:
-masukkan CD installer Windows XP Professional ke dalam CD-ROM
-aktifkan Control Panel melalui tombol Start-Control Panel. PIlih Add or
Remove Programs
-pada jendela Add or Remove Programs, pilih Add/Remove Windows Components
-pilih Internet Information Services (IIS) pada kotak dialog Windows
Components Wizard pertama. Pilih semua komponen yang tersedia lalu tekan OK.
Lalu tekan Next
-proses instalasi akan dilakukan. Untuk mencari lokasi file tekan tombol
Browse. Lalu tekan OK
-tekan tombol Finish
-lakukan proses restart pada komputermu
-untuk melihat apakah komponen IIS terinstal aktifkan Control Panel pilih
Performance and Maintenance-Administrative Tools dengan cara klik 2 kali.
Pada jendela Administrative Tools terlihat komponen Internet Services. Klik 2
kali.
-akan ditampilkan jendela Internet Information Services dengan berbagai
komponen
c. Microsoft FrontPage
untuk merancang homepage
d. Microsoft Access
untuk membuat database
e. Microsoft Internet Explorer
untuk melakukan pengujian dan pengaksesan homepage interaktif yang telah
dibuat. Selain Microsoft Internet Explorer dapat juga menggunakan Mozilla
Firefox, Netscape, atau Opera
f. Komponen Open DataBase Connectivity
untuk melakukan koneksi dari program komputer ke database. Komponen ini sudah
tersedia pada Windows XP. Untuk pengaksesan klik tombol start-Control
panel-Administrative Tools-Data Sources (ODBC).
Salah satu keluhan utama pengguna Microsoft adalah penggunaan database yang
membingungkan. Pada awalnya kita hanya dapat menggunakan Open DAtaBAse
Connectivity (ODBC) Application Programming Interface (API) yang tidak mudah
digunakan dalam lingkungan VIsual Basic. ODBC suatu spesifikasi untuk database
API. API adalah standar yang didukung berbagai vendor, termasuk Oracle,
Informix, Sybase, dan Microsoft. Driver untuk database ini disediakan baik
oleh vendor maupun perusahaan pihak ketiga seperti Intersolv
2. Persiapan Direktori Kerja
-aktifkan Widows Explorer
-buat satu direktori dalam drive C dengan nama misalkan SMUKU-INT
-buat subdirektori image, css, dan database dalam direktori tersebut
3. Persiapan Skenario User Interface
Skenario form dibuat untuk memberikan gambaran apa yang akan dikerjakan. Terdapat
2 form dengan fungsi sebagai form untuk memasukkan dan menampilkan data siswa
dari
database.
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
4.Persiapan Komponen IIS
cara pengaksesan IIs
-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 (hanya dapat digunakan pada IIS dalam Windows NT, Windows
2000, Windows 2003
b. menggunakan direktori virtual

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

Bab 5 Membuat Homepage Sederhana

A. MENENTUKAN PERANGKAT LUNAK UNTUK MEMBUAT HOMEPAGE
Ada beberapa software yang diperlukan untuk membuat dan mengelola sebuah homepage yang harus sudah ada pada computer WebMaster, Yaitu


Browser, seperti Microsoft Internet Explorer dengan Versi terbaru dan Netscape Communicator dengan versi terbaru (jika ada)
HTML Editor, software yang build-in dengan Microsoft Internet Explorer dan Netscape Communicator. Dapat pula software Microsoft FrontPage dengan versi terbaru, CoffeCup, HoTMetaL, Macromedia Dreamweaver 4, atau lainnya.
software dan Hardware Multimedia (audio & video), dan Software Animator, seperti Macromedia Flash. Software untuk mengelola file PDF dan file-file khusus, seperti software Acrobat Reader dan Acrobat Distiller.
Software untuk menangani beberapa pekerjaan WebMastering, seperti Program FTP (File Transfer Protocol), contohnya Cute FTP dan WS-FTP, yang dapat Anda gunakan untuk mengirim (upload) file-file halaman homepage ke komputer server ISP tempat web site di-host. Software pengaman untuk mencegah penularan virus dan worm melalui jaringan internet.


Sedangkan Hardware yang diperlukan untuk membuat dan mengelola sebuah homepage adalah

  1. Satu unit computer WebMaster dilengkapi dengan modem yang terkoneksi ke server ISP melalui jaringan telepon lokal. Resolusi layar monitor dengan standar internet saat ini, yaitu 800 X 600 dpi atau 1024 X 768 dpi. Video card minimum 32-64 MB. RAM (Random Access Memory) minimum 128 MB, atau 256 MB, atau 512 MB. Cache memory minimum 256 KB, atau 512 KB, atau 1 MB dan kapasitas harddisk minimum 10-20 GB.
  2. Satu unit komputer Graphic Design yang dilengkapi dengan scanner. Resolusi layar monitor cukup tinggi, yaitu 800 X 600 dpi atau 1024 X 768 dpi. Video card minimum 32-64MB. Ram (Random Access Memory) tidak kurang dari 128 MB, dan kapasitas harddisk minimum 20 GB.
Pada komputer graphics design memiliki beberapa software berikut:
  • Graphics/Image Processor, minimal Photoshop dengan versi terbaru dan CorelDraw dengan versi terbaru.
  • HTML Editor, seperti Microsoft Internet Explorer, Netscome Communicator, Microsoft Frontpage, Coffeecape, HoTMetaL, dan Macromedia Dreamweaver 4.
  • Beberapa software utilities untuk menangani pekerjaan computer graphic design dan artwork, yaitu Software dan Hardware Multimedia (audio & video) dan Software Animator, misalnya Macromedia Flash Software untuk mengelola file PDF dan penampil file-file khusus, seperti Acrobat Reader dan Acrobat Distiller.
  • Software Pengaman untuk mencegah penularan virus dan worm melalui jaringan Internet.
Perangkat Lunak yang Digunakan
Perangkat lunak yang dipilih untuk membuat homepage adalah menggunakan Microsoft FrontPage. Microsoft FrontPage ini adalah perangkat lunak bawaan dari Microsoft Office.
Mengapa menggunakan Microsoft FrontPage? Karena perangkat ini mudah dijumpai dan bawaan dari Microsoft FrontPage, juga mempunyai fasilitas lengkap untuk membuat suatu homepage yang baik. Salah satunya adalah adanya wizard. Wizard membantu pemula membuat homepage langkah demi langkah.
Gambar dibawah adalah tampilan lingkungan kerja Ms FrontPage. Ms FrontPage menampilkan menu bar dan toolbar yang persis sama dengan produk office lainnya. Hal ini memudahkan Anda mengisi teks pada halaman Web Anda, tidak seperti memakai kode HTML.
  • Perbedaannya adalah Ms FrontPage terdapat jendela view bar, folder list dan lembar kerja. Jendela view bar merupakan sebuah jendela yang terdiri atas Page, Folder, Reports, Navigations, Hyperlink dan Task. Kegunaan masing-masing View bar yaitu:
    View Page, menampilkan halaman Web yang akan diedit.
    View Folder, digunakan untuk mengatur file dan folder yang berisi file, serta gambar yang akan ditampilkanpada halaman Web agar tidak terjadi kesalahan(error)link.
    View Reports, menampilkan analisis halaman dan mengatur isi (content)Web.
    View Navigation, menampilkan struktur Web yang akan dibangun dengan membuat navigasi dan link.
  • View Hyperlink, digunakan untuk menampilkan jalur hyperlink halaman Web.
    View Task, digunakan sebagai catatan untuk memperbaiki atau merawat halaman Web.

    2. Pengaktifan Ms FrontPage
    Sekarang Anda akan memulai program Ms FrontPage dengan langkah sebagai berikut.
    a. Klik Start-All program-Microsoft FrontPage. Langkah ini mungkin saja berbeda dengan menu tampilan Anda, yang terpenting dapat menampilkan program FrontPage.
    • b. Saat muncul tampilan FrontPage, klik File-new-page or Web. Pada menu task pane, pilih Empty Web. Kemudian, pada jendela Web Site Templates, pilihlah template yang sudah disediakan oleh Ms FrontPage. Selanjutnya pada bagian option aturlah lokasi file Web yang kan ditempatkan.
B. MEMBUAT 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. C.Menerapkan Hyperlink
Hyperlink digunakan sebagai alat navigasi halaman pada homepage.Hyperlink perlu karena terdapat banyak informasi yang tidak dapat dijelaskan dalam satu halaman homepage secara keseluruhan.Dengan menggunakan hyperlink, kita dapat menuju ke informasi yang akan kita akses pada page yang lain.
D.Menerapkan Cascading Style Sheet
Dengan Microsoft FrontPAge XP,kita tidak perlu bingung untuk memberi efek warna dan tampilan pada homepage yg akan kita buat.Sudah tersedia Cascading Style Sheet (CSS) dalam Microsoft FrontPage.
Fungsi CSS adalah untuk 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

B.Membuat Layout Homepage Yang Diinginkan
Layout/frame merupaka bentuk format navigasi dari homepage yang akan ditampilkan.Untuk melihat dan memilih jenis layout yang tersedia dalam Microsoft frontpage xp,ikuti langkah langkah berikut ini :
1.Pilih tombol start ~all programs~Microsoft Frontpage
2.Pilih menu file~new~page or web.
3.Pilih page templates pada bagian new front templates dari taskpane new page or web.
4.Pilih tab frames pages yang menampilkan berbagai jenis templates yang disediakan oleh Microsoft frontpage xp.
5.Pilih jenis frame yang diinginkan kemudian tekan tombol ok.

Beberapa CSS yang telah tersedia dalam Microsoft frontpage xp,dapat diakses dengan cara :
1.Aktifkan Microsoft frontpage xp
2.Pilih menu file~new~page or web
3.Pilih page templates pada bagian new from templates dari taskpane new page or web.
4.Pilihtab style sheets
5.Pilih jenis style sheet yang diinginkan kemudian tekan tombol ok.

Pembuatan Layout Homepage
Sebelum membuat sebuah homepage, pertama buatlah terlebih dahulu layout atau gambaran tata letak teks, gambar dan hyperlink. Dengan Ms FrontPage, Anda tidak perlu bekerja dari awal karena telah tersedia Layout yang disimpan dalam template.
Sekarang Anda sudah disediakan suatu homepage pribadi(personal)yang berisi lima file Web, yaitu about me.htm, favourite.htm, feedback,htm, interest.htm, dan photo.htm. Anda dapat melihat struktur dab hubungan kelima file Web tersebut dengan memilih View Navigation. Untuk mengganti kata-kata yang sudah jadi tersebut, ubahlah dengan meng-klik kotak pada View Navigation sesuai dengan yang Anda butuhkan. Kemudian ganti nama file yang ada di folder list dengan nama yang sesuai, kecuali index.htm.
File untuk homepage Anda adalah index.htm. Jika file tersebut hilang atau terhapus secara tidak sengaja, keempat file lainnya tidak akan dapat saling bertautan (link). Hal ini berlaku untuk semua situs Web yang Anda lihat di Internet. Klik dua kali file index.htm, FrontPage akan menampilkan homepage yang baru Anda buat. Langkah selanjutnya adalah mengubah kata-kata yang sudah jadi dengan kata-kata yang Anda inginkan.
4.Menampilkan Foto pada Homepage
Untuk menampilkan atau menyisipkan foto anda ke homepage pribadi,cara yang dilakukan adalah:
a. Tetap aktifkan index.htm seperti gambar 4.4.Klik Insert-Picture-From File,masukkan nama dokumen foto anda,dapat berupa format JPG atau GIF.Cara lainnya adalah dari tampilan folder list,anda dapat langsung melakukan drag and drop ke tempat foto tersebut.
b. Perkecil foto anda hingga mencapai bentuk ukuran yang sesuai dan proporsional.Misalnya,dipilih foto ukuran 192×144 pixel dengan 72 dpi.
Sebaiknya jangan memakai foto dengan ukuran yang lebih besar dari 72 dpi karena akan memperlambat Web browser untuk menampilkan foto tersebut.

5.Menyimpan File Homepage
Jika File Web telah selesai dibuat,tentu anda ingin menyimpan supaya file tersebut dapat anda panggil dan diedit kembali.Langkahnya adalah sebagai berikut:
a.Tetap aktifkan aboutme.htm.Kemudian,klik File-Save As.
b.Pada kotak Save-As,pilih drive dan direktori file,Pada kotak File Name,ketikkan nama file homepage tersebut

6.Hyperlink
Hyperlink adalah fasilitas yang disediakan oleh FrontPage untuk menghubungkan halaman yang satu dengan halaman yang lainnya.Dengan hyperlink,kita dapat membuka halaman homepage yang lain cukup dengan meng-klik teks halaman yang ingin dituju.Biasanya,ikon hyperlink adalah tangan dalam posisi menunjuk.Untuk melihat hyperlink yang telah dibuat,anda dapat melihatnya di View Hyperlinks.
a. Hyperlink ke Alamat E-mail
Hyperlink ke alamat e-mail dapat dilakukan dengan cara:
1) Tetap aktifkan index.htm
2) Pada tulisan alamt e-mail kita(mis:ijalrizal@yahoo.co.id),klik kanan mouse sehingga muncul menu hyperlink seperti berikut ini.
3) Setelah muncul kotak dialog hyperlink,secara otomatis FrontPage akan menuju ke menu E-mail Address.Pada kotak E-mail Address,perhatikan apakah alamat e-mail sudah benar atau belum.Jika telah selesai,klik OK.
4) Untuk melihat hasil tampilannya,klik tab Preview.Terlihat pada tulisan ijalrizal@yahoo.co.id(alamat e-mail) akan berubah warna dan bergaris bawah.Ketika anda gerakkan mouse pada tulisan tersebut,akan muncul gambar tangan.Hal ini berarti hyperlink telah aktif.
b. Hyperlink ke Situs Web Lain
Langkah-langkah yang digunakan untuk membuat suatu hyperlink adalah sebagai berikut.
1) Tetap aktifkan index.htm.
2) Klik kanan salah satu teks, misalnya www.ilmukomputer.com sehingga muncul menu Hyperlink Properties seperti tampilan berikut.
3) Pada kotak dialog Edit Insert hyperlink, klik Browsed Page, lanjutkan dengan menulis alamat Web atau situs di Internet pada kotak dialog Address. Jika telah selesai, klik OK.
4) Untuk melihat hasil tampilannya, klik tab Preview. Terlihat pada tulisan www.ilmukomputer.com akan berubahwarna dan bergaris bawah. Ketika anda gerakkan mouse pada tulisan tersebut, akan muncul gambar tangan. Hal ini berarti hyperlink telah aktif.
c. Menghapus Hyperlink
untuk menghapus hyperlink, dapat dilakukan dengan langkah sebagai berikut.
1) misalnya,tulisan www.ilmukomputer.com akan dihapus, lakukan seperti akan membuat hyperlink sehingga muncul menu Hyperlink Properties.
2) Pada kotak dialog Edit Hyperlink, klik alamat Web pada kotak Address, klik Remove Link atau apabila anda menggunakan MS FrontPge 2000, klik Delete. Jika telah selesai, klik OK.
3) Perhatian tulisan www.ilmukomputer.com kembali normal (tidak berubah warna dan bergaris). Hal ini berarti bahwa hyperlink pada reks tersebut sudah tidak aktif lagi.
d. Hyperlink dengan Gambar
Hyperlink dengan menggunakan teks mungkin sudah tidak asing lagi. Anda dapat membuat suatu hyperlink dengan menggunakan foto atau gambar untuk mengghubungkan ke halaman Web selanjutnya.
Langkah yang dilakukan adalah sebagai berikut.
1) Klik kanan foto yang akan dijadikan hyperlink, lalu pilih Hyperlink.
2) Pada kotak dialog Insert hyperlink, pilih Existing File or Web Page untuk menuju ke halaman yang sudah ada, misalnya biodata.htm,kemudian klik OK.
3) Adapun hasilnya adalah sebagai berikut. 
Hasil dari hyperlink tersebut adalah terbukanya halaman Web biodata.htm yang akan menggantikan tampilan file index.htm.
7. Sekilas dengan Cascading Style Sheet (CSS)
Cascanding Style Sheet atau CSS adalah suatu kode tambahan HTML untuk menambah kemampuan HTML. Adapun CSS digunakan untuk membentuk style pada setiap baris kode HTML secara serentak tanpa harus diatur setiap baris. Misalnya, untuk mengatur ukuran huruf(font) sebesar 2, setiap baris pada tag font size = ”2”. Hal ini merupakan tindakan yang tidak praktis untuk membuat sebuah kode. Solusinya dalah penggunaan CSS dengan mengidentifikasi sebuah variabel sekali saja. Untuk menggunakan CSS, anda cukup mengetik tag font yang telah didefenisikan tersebut. Lihat contoh berikut.
Hasil dari penggunaan CSS pada kode tersebut dapat dilihat pada gambar berikut.
Terlihat bahwa tulisan dengan menggunakan CSS terbentuk style dari pendefenisian pasangan style tag STYLE dan tag STYLE yanh terdapat atribut TYPE dengan nilai berupa “text/CSS”. Defenisi sebuah style dituliskan dengan bentuk sebagai berikut.
Nama_tag{ property_ke-1: nilai_ke-1 ;…; property_ke-n: nilai_ke-1;}
a.CSS dalam bentuk sebuah file
Kode tambahan CSS pada sebuah halaman Web, dapat diketikkan pada halaman Web itu sendiri dengan menempatkannya di antara kode halaman Web itu sendiri dengan menempatkannya di antara kode tag HEAD dan tag /HEAD. Biasanya ditempatkan setelah pasangan kode tagTITLE dan /TITLE. Juga dapat berupa file dengan ekstensi CSS. Untuk mengakses file,CSS ke sebuah halaman Web, dapat di gunakan kode tag LINK.
Buatlah file CSS dengan sebuah teks editor, misalnya Notepad. Jangan lupa untuk melakukan penyimpanan file dengan cara SAVE AS dan penulisan ekstansi file. CSS ( sama seperti pembuatan kode HTML dengan notepad, namun dengan penulisan ekstansi yang berbeda ). Lihat kode berikut

Sekarang, buatlah file HTML yang akan mengakses file Style_css. Lihat juga kode berikut.
Perhatikan kode tag LINK yang di sertai atribut REL dan HREF. Hal ini untuk mengakses filestyle_css. Css agar dapat digunakan oleh filecss2.htm. Pada atribut REL, jangan lupa untuk menyebut isi berupa “STYLESHEET” dan TYPE dengan isi “text/css”. Dengan cara ini pula, file htm dapat mengakses file css tersebut. Jika Anda ingat bahasa pemprograman paskal, file CSS diserupakan dengan sebuah file yang berisi Procedur atau Function.
Adapun hasil kode program setelah dibuka oleh browser adalah sebagai berikut.
Banyak sekali kegunaan style CSS yang tidak dapat diungkapkan di sini. Anda dapat mempelajari buku yang lebih banyak membahas pemprograman Web. Lalu bagaimana dengan Ms FrontPage? Apakah memiliki fasilitas CSS? Ya, namun penggunaannya lebih langsung dan Anda cukup memilih Style apa yang akan digunakan karena sudah ada di menu Style Ms FrontPage.
8. Penggunaan Style CSS di Ms FrontPage
Berikut ini akan diterangkan cara menggunakan style CSS di Ms FrontPAge untuk mengubah huruf (font) di bagian body, yaitu sebagai berikut :
a. Klik Format-Style, lalu akan muncul tampilan kotak dialog Style.
b. Pilih Style Body, Kemudian klik Modify untuk memodifikasi style tersebut.
c. Klik Format, kemudian pilih Font. Kemudian muncul kotak dialog Font. Pilih jenis huruf, ukuran warna, dan efek. Kemudian klik OK tiga kali.
d. Tampilan bagian Body homepage Anda akan berubah. Untuk tidak menerapkan style tersebut, klik Undo. Coba style yang lain sampai Anda menemukan Style yang diinginkan.
Kesimpilannya, dengan bantuan Ms. FrontPage anda tidak direpotkandengan pengetikan kode-kode tag yang cukup banyak. Anda cukup menvari fasilitas-fasilitas yang sudah ada untuk digunakan. Ternyata, membuat homepage itu mudah bukan?
B. Pengenalan Domain dan Publikasi Homepage
Domain Name System adalah salah satu jenis system yang melayani permintaan pemetaan alamat IP keFQDN (Fully Qualified Domain Name ) dan dari FQDN ke IP Address.Setiap computer mempunyai satu nomor (IP Address) yang unik yang diakses oleh protocol dalam pencarian suatu kompoter.Untuk mempermudah pengaksesan nomor ndiberikan sebuah domain.
Nama domain lebih mudah untuk diingat oleh manusia daripada alamat IP dengan deretan angka.Contohnya,sebuah computer memiliki alamat IP 167.205.22.114 dan memliki FQDN “nic.itb.ac.id”.Lahirnya Konsep IP Versiun 6 (yang memiliki enam segmen untuk setiap computer) penomoran alamat IP menjadi semakin panjang bdan lebih sulit diingat.DNS juga menyediakan layanan mail routing, informasi mengenai perangkat keras(hardware), system operasi yang dijalankan dan aplikasi jaringan yang ditangani oleh host tersebut.
1. Level (tingkat) pada Domain
a. Top Level Domain
Domain tingkat atas (top level domain) terbagi atas tiga jenis yaitu domain generic (generic domain) ,domain Negara (country domain) dan domain arpa.
b. Second Level Domain
Contoh penamaan second level domain di domain generic untuk umum adalah liakk.com, catcha.com dan astaga.com .Adapun untuk second level domain setiap Negara ,biasanya diserahkan pada kebijakan pengelola domain di Negara masing-masing.Untuk di Indonesia,contohnya adalah sebagi berikut :
Penyedia Web hosting di Indonesia
Domain Nama Domain Untuk
CO.ID www.nama.co.id Perusahaan
OR.ID www.nama.or.id Organisasi
AC.ID www.nama.ac.id Akademi/universitas
GO.ID www.nama.go.id Departemen pemerintah
NET.ID www.nama.net.id ISP
SCH.ID www.nama.sch.id Sekolah-sekolah
WEB.ID www.nama.web.id Bebas
c. Third Level Domain
Penamaan pada third level domain diserahkan pada pengelola jaringan masing-masing ,misalnya indosat.net.id, melsi.net.id, dan computer.co.id.
2. Langkah Publikasi Homepage
Untuk menjadi begian dari internet,homepage anda hrus nmemiliki alamat domain.Daftarkan domain anda secara resmi ke ISP penyedia layanan Web hosting dengan secara garatis pada penyedia jasa layanan domain di internet.
Sebelum mendaftarkan nama domain, Anda harus memastikan apakah nama domain yang anda gunakan sudah dipaki orang lain atau belum.Anda dapat mengecek nama domain pada Web site ,misalnya www.register.com, dan www.indosite.com. Untuk mendaftarkan nama domain anda,secari umum lakukan lamgkah sebagi berikut :
a. Buka situs penyedia jasa domain, misalnya www.indosite.com.
b. Sebelum Anda mendaftar, cek lebih dahulu apakah nama domain anda sudah terdaftar oleh orang lain atau belum.
c. Jika nama domain anda tidak dimiliki oleh orang lain, akan muncul tampilan berikut.
d. Proses selanjutnya adalah mengisi form yang berisi data – data yang berhubungan dengan nama domain anda
e. Selanjutnya, akan ditampilkan cara pembayaran yang akan dilakukan, apakah transfer antabank atau menggunakan kartu kredit.
f. Jangan lupa sek sekali lagi dalam pengisian data – data anda untuk menghindari kesalahan yang tidak diinginkan, kemudian konfirmasi.
g. Apabila ada domain yang harus menyertakan persyaratan, misalnya domain id, jangan lupa mengirimkan persyaratan tersebut.
Untuk mendaftarkan domain ke penyedia jasa Web Hosting secara gratis di internet, cara yang dilakukan adalah sebagai berikut :
a. Buka situs www.geocities.yahoo.com , klik tombol Sign Up pada kotak Geocities Web Hosting.
b. Masukkan Yahoo ID dan Password yang anda dapat dari keanggotaan email di situs yahoo. Kemudian klik Sign In.
c. Pada tampilan berikutnya, anda harus memasukkan informasi yang akan diminta oleh Geocities. Untuk contoh ini, pilih Computer and Internet. Kemudian, klik Next.
d. Selesainya proses pendaftaran Web Hosting ditandai dengan munculnya kotak konfirmasi berikut. Hal ini berarti anda telah siap meng-upload file – file Web¬-nya.
C. MENERAPKAN HYPERLINK

Hyperlink digunakan sebagai alat navigasi halaman pada homepage.Hyperlink perlu karena terdapat banyak informasi yang tidak dapat dijelaskan dalam satu halaman homepage secara keseluruhan.Dengan menggunakan hyperlink, kita dapat menuju ke informasi yang akan kita akses pada page yang lain.

C. Menerapkan Hyperlink
Hyperlink digunakan sebagai alat navigasi halaman pada homepage. Lnagkah-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.
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.
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!

langkah-langkah membuat hyperlink dengan menggunakan Microsoft frontpageXP
1. aktifkan aplikasi Microsoft frontpageXP
2. buat tulisan “Link ke halaman lain” pada dokumen baru yang ditampilkan
3. blok tulisan “Link ke halaman lain” dengan cara men-drag tombol kiri mouse
4. tekan tombol ctrl-K pada keyboard sehingga akan muncul kotak dialog insert hy[perlink
5. setelah file disimpan dan dijalankan, ketika kita klik “Link ke halaman lain” maka akan membuka halaman tujuan link tersebuat
langkah-langkah membuat hyprlink dengan tag HTML
1. aktifkan aplikasi Microsoft frontpageXP
2. buat tulisan “Link ke halaman lain” pada dokumen baru yang ditampilkan
3. klik tab HTML di bagian bawah dokumen
4. selanjutnya akan tampil sintaks HTML
5. letakkan kursor di depan kata “Link “ dan di belakang tagpada sinteks HTML
6. letakkan kursor di belakang kata “Link “ dan di belakang tag
pada sinteks HTML
7. klik tab normal di bagian bawah

E. MEMBUAT APLIKASI DALAM SISTEM YANG TERINTEGRASI 

1. 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.
2. 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.
3. 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



Tulisan dibawah ini semoga bermanfaat bagi lembaga perguruan tinggi yg ingin menerapkan sistem informasi. Langkah yg sebaiknya ditempuh adalah :
  • Salah seorang dosen mengusulkan penerapan sistem IT kepada rektor atau ketua yayasan
  • Ketua Yayasan atau Rektor memanggil semua unsur penting di kampus tsb, misalnya dekan2, tata usaha,dll
  • Dibentuk suatu tim yg bertugas menyusun grand design yg terdiri dari dosen yg berkompeten dan beberapa orang konsultan IT dari luar kampus. Tim tsb harus resmi dan mendapatkan SK dari Rektor.
  • Tim mulai kerja
Pekerjaan Tim secara garis besar adalah :
  • Menentukan permasalahan di kampus dan menentukan solusinya, dan dari situ bisa ditentukan modul apa aja yang akan diterapkan, pada kasus kampus ini modul yg dibutuhkan adalah :
    • Modul Keuangan
    • Modul Akademik
    • Modul Kepegawaian
    • Modul Aset

  • Tim membandingkan beberapa ISV (Independen Software Provider),
  • Tim juga membandingkan metode pengadaan software yaitu
    • Software dibuat sendiri dari Nol (tentunya waktu besar dan biaya besar / software bisa sesuai dengan keinginan).
    • Software beli paket jadi dari ISV (biaya murah tapi belum tentu cocok)
    • Software beli paket jadi tapi bisa di costumize (biaya lebih mahal / waktu relatif cepat).

membuat aplikasi terintegrasi dengan Microsoft word. Dalam membuat homepage dibutuhkan skenerio yang sederhana.ffungsi dari skenario ini untuk memandu kita dalam menentuksn sps saja yang dapat dilakukan oleh suatu halaman atau website
menentukan directory lokasi kerja
1. buat directory SMUKU pada drive C:/
2. dalam directory C:/SMUKU, buat directory/folder image yang akan digunakan
3. pada windows explorer akan terlibat struktur file
membuat halaman pada homepage
1. aktifkan Microsoft frontpage XP
2. pilih menu fle-new-page or web
3. pilih page templates pada bagian new page or web
4. selanjutnya akan tampil kotak dialog page template
5. pilih one-column body with contect on left kemudian klik tombol OK
6. maka akan tampil templateyang tadi kita pilih
7. pada frame page sebelah kiri hapus SECTION 2sampai 4
8. pada page frame utama yang diperoleh, hapus semua tulisan dibawah “fish photo caption”
9. gantitulisan “your heading goes here” dengan judul yang kalian inginkan
10. ganti section 1 dengan judul tadi , pada title 1,2 dan 3 berilah nama yang kalian inginkan
11. hapus tulisan “fish photo caption” kemudian tekan tombol enter
12. pilih meu table-insert-table.dan masukkan berapa kolom dan barins yang diinginkan
13. ketik data pada table yang telah disisipkan
14. simpan data kalian dengan menulis nama file dan save