A. Memprogram Web
1. Persiapan Software
Untuk membuat homepage interaktif cukup dengan menggunakan beberapa software yang sudah kita kenal antara lain ;
a. Sistem Operasi
Kita akan menggunakan Windows XP Professional sebagai sistem operasi. Keluarga windows lainnya yang dapat digunakan untuk menjalankan Internet Information Service (IIS) adalah Windows NT,Windows 2000 dan Windows 2003
b. Komponen Internet Information Service (IIS) pada Windows XP
Internet Information Service
Funsgsi IIS adalah sebagai web server. Dengan menggunakan IIS kita tidak perlu melakukan konfigurasi secara manual.
Langkah-langkah untuk menginstal komponen IIS yaitu sebagai berikut :
1. Masukkan CD Installer windows XP Professional, aktifkan control panel dan pilih Add or Remove Programs
2. Pilih IIS. Kamu dapat melihat komponen-komponen IIS melalu tombol details. Pilih semua komponen lalu OK. Tekan tombol Next
3. Untuk mencari lokasi bebeapa file yang terdapat dalam CD kita dapat menekan tombol browse lalu OK
4. Lakukan restart pada komputermu. Untuk memastikan komponen IiS sudah terinstal,aktifkan control panel kemudian pilih performance and Maintenance-administrative tools lalu terlihat komponennya
c. Microsoft FrontPage
Digunakan untuk merancang homepage
d. Microsoft Access
Digunakan untuk membuat database sebagai penyimpanan data yang akan dimasukkan ke dalam database.
e. Microsoft Internet Explorer
Digunakan untuk melakukan pengujian dan pengaksesan homepage interaktif yang telah dibuat.
f. Komponen ODBC
Digunakan untuk melakukan koneksi dari program komputer ke database. ODBC merupakan suatu spesifikasi untuk database API. API merupakan standar yang didukung oleh berbagai vendor.
2. Persiapan Direktori Kerja
1. Aktifkan Windows Explorer,buat satu direktori dalam drive C dengan nama SMUKU-INT
2. Buat subdirektori image,css,dan database dalam direktori SMUKU-INT
3. Persiapan Skenario User Interface
Skenario form harus dibuat untuk memberikan gambaran apa yang akan dikerjakan. Terdapat dua form yang fungsinya sebagai form untuk memasukkan dan menampilkan data siswa dari database. Persiapan lebih lanjut mengenai desain form yaitu dengan cara langsung mendesain bentuk database dan formnya. Tipe data digunakan untuk mempresentasikan penyimpanan data dalam database. Beberapa tipe data yang disediakan oleh Microsoft Access yaitu sebagai berikut ;
1. Teks, mempresentasikan data yang berbentuk gabungan huruf,angka dll
2. Number, mempresentasikan data yang berbentuk angka
3. Date, mempresentasikan data yang berbentuk tanggal
4. Memo, mempresentasikan data yang berbentuk teks dan jumlahnya sangat banyak
5. Currency, mempresentasikan data yang memiliki format currency
6. autoNumber, mempresentasikan data yang akan ditangani oleh sistem berupa angka
7. OLE Object, mempresentasikan data yang berupa gabungan dari objek-objek yang dibuat oleh microsoft
8. Hyperlink, mempresentasikan data yang berupa link ke website
Sekarang kita mulai mendesain form yang pertama menggunakan Microsoft FrontPage
1. Aktifkan Microsoft FrontPage. Pilih tab HTML
2. Buat form dengan memilih menu insert-form-form sehingga ditampilkan pasangan tag form yaitu
3. Tuliskan DATA SISWA sebagai judulnya,beri style bold, ubah ukuran font menjadi 16
4. Buat tabel dibagian bawah judul yang terdiri atas 2 kolom dan 6 baris
5. Ubah tampilan editor menjadi tampilan normal. Pada kolom 1 baris 1 ketikkan teks Nomor Induk. Letakkan kursor pada kolom 2 baris 1 lalu pilih textbox. Klik dua kali textbox tersebut dan tuliskan txtNomorInduk pada kotak Name
6. Pada kolom 1 baris 2 ketikkan teks Nama Siswa. Palam kolom 2 baris 2 pilih textbox dan isi kotak Name denagn txtNama
7. Pada kolom 1 baris 3, ketikkan teks Tanggal Lahir. Pada kolom 2 baris 3 pilih textbox dan isi kotak Name dengan txtTanggalLahir
8. Pada kolom 1 baris 4 ketikkan teks Kelas. Pada kolom 2 baris 4 pilih dropdown listbox dan beri nama cboKelas dan isikan nila pilihan 1,2,dan 3 melalui tombol Add
9. Pada kolom 1 baris 5 ketikkan teks Jurusan. Pada kolom 2 baris 5 buat dropdown listbox,beri nama cboJurusan dan isikan nilainya dengan IPA dan IPS
10. Pada kolom 1 baris 6 ketikkan teks Tahun Masuk. Letakkan kursor pada kolom 2 baris 6 buat textbox. Beri nama txtTahunMasuk pada kotak Name
11. Letakkan kursor dibawah tabel. Buat sebuah tombol melali menu insert-form-Push Button
12. Klik dua kali tombol Button. Ubah label menjadi Simpan, beri nama cmdSimpan dan tandai pilihan Submit
13. Klik dua kali tombol Submit ubah labelnya menjadi Lihat beri nama cmdLihat dan tandai pilihan normal pd bagian Button Type
14. Hapus tombol ketiga dari form. Ubah tab form menjadi pada tampilan HTML
15. Simpan file dalam direktori C:\SMUKU-INT. Beri nama file datasiswa.htm
Sekarang kita akan mendesain form ke 2 untuk menampilkan data dari database melalui langkah langkah ;
1. Pada microsoft FrontPage pilih File-New-Page Or Web
2. Pilih page template. Pilih Normal Page pada tab General
3. Tuliskan DAFTAR SISWA sbg judulnya,beri style bold,ubah ukuran menjadi 16
4. Di bawah tulisan DAFTAR SISWA, buat tabel yang terdiri atas 7 kolom dan 2 baris
5. Pilih tampilan normal. Pada kolom 1 baris 1 ketikkan Nomor dan pada kolom 1 baris 2 ketikkan nilaiNomor
6. Pada kolom 2 baris 1 ketikkan Nomor Induk dan pada kolom 2 baris 2 ketikkan nilaiNomorInduk
7. Pada kolom 3 baris 1 ketikkan Nama dan pada kolom 3 baris 2 ketikkan nilaiNama
8. Pada kolom 4 barius 1 ketikkan Tanggal Lahir dan pada kolom 4 baris 2 ketikkan nilaiTanggalLahir
9. Pada kolom 5 baris 1 ketikkan Kelas dan pada kolom 5 baris 2 ketikkan nilaiKelas
10. Pada kolom 6 baris 1 ketikkan Jurusan dan pada kolom 6 baris 2 ketikkan nilaiJurusan
11. Pada kolom 7 baris 1 ketikkan Tahun Masuk dan pada kolom 7 baris 2 ketikkan nilaiTahunMasuk
12. Buat 1 tombol beri nama Kembali dan label cmdKembali
13. Simpan file dengan nama lihatdatasiswa.htm dalam direktori C:\SMUKU-INT
4. Persiapan Komponen IIS
Untuk menjadikan sebuah komputer sebagai web server, dala komputer harus terinstall IIS. Cara pengaksesan IISA sebagai berikut ;
1. Pilih tombol start-control panel
2. Pilih Administrative Tools pada jendela Control Panel kemudian pilih Internet Information Services
3. Klik nama komputer kemudian pilih Web Sites dan klik Default web Site
Terdapat dua cara menampilkan informasi homepage melalui IIS yaitu;
a. Pengaksesan menggunakan port
1. Klik kanan web sites klik New Website pilih port
2. Gunakan port sembarang antara 2000-65500. Jangan menggunakan port 80.
3. Pengaksesan dengan menggunakan port 8080 yaitu sebagai berikut;
- http://localhost:8080/namafile.htmàStand alone computer
- http://NamaKomputer:8080/namafile.htmàIntranet
- http://www.namadomain.com:8080/namafile.htmàInternet
b. Pengaksesan menggunakan direktori virtual
1. Virtual Directory. Tekan tombol next untuk menjalankan ke wizard berikutnyaàKlik kanan Defaul Web Site pilih New
2. Ketikkan SMUKU-INT untuk mengisi alias direktori lalu Next
3. Tekan tombol browse atau masukkan C:\SMUKU-INT lalu Next sampai finish
4. Pengaksesan dengan menggunakan direktori virtual SMUKU-INT yaitu;
- http://localhost/SMUKU-INT/datasiswa.htmàKomputer lokal
- http://namakomputer/SMUKU-INT/datasiswa.htmàIntranet
- http://www.namadomain.com/SMUKU-INT/datasiswa.htmàInternet
5. Pemilihan Bahasa Pemograman
ASP merupakan bahasa pemograman yang secara otomatis disediakan oleh microsoft jika kita menggunakan IIS. ASP merupakan suatu skrip yang bersifat server side yang ditambahkan pada halaman HTML untuk membuat sebuah web menjadi lebih menarik,dinamis dan interaktif. Server side berarti bahwa proses pengerjaan skrip berlangsung di server bukan di browser. Bahasa skrip standar yang digunakan oleh ASP adalah Microsoft VBScript dan Microsoft Jscript.
Alasan utama penggunaan bahasa pemrograman ASP yaitu sebagai berikut ;
1. Sudah tersedia secara gratis jika kita menggunakan IIS pada sistem operasi Windows.
2. Struktur bahasanya sangat mudah untuk dipelajari karena ASP mengadopsi sintaks dari bahasa pemrograman Visual Basic
3. Mampu berkomunikasi dengan objek komponen (COM/DCOM) yang dibuat dengan berbagai bahasa pemrograman yang lain
4. Mempunyai respons request data dengan cepat
5. Untuk menggunakannya, kita hanya tinggal meletakkan kode pemrograman pada halaman homepage yang akan kita program
Sebuah file ASP merupakan file text only yang didalamnya berisi teks, tag HTML, dan skrip ASP. Skrip ASP dapat diletakkan dimana saja. Untuk membedakan antara teks, tag HTML dan skrip ASP maka digunakan suatu tanda yang disebut delimiter. Delimiter adalah suatu kumpulan karakter yang mengawali dan mengakhiri suatu tag atau skrip. Untuk skrip ASP, delimiter yang digunakan adalah kumpulan karakter <% dan %>
Kirimkan Ini lewat Email BlogThis! Berbagi ke Twitter Berbagi ke Facebook Berbagi ke Google Buzz
Bab 5: Membuat Homepage Sederhana
A.Menentukan Perangkat Lunak untuk Membuat Homepage
Beberapa hal yang harus diperhatikan dalam membuat homepage :
1. Tujuan dibuatnya homepage
2. Siapa yang menjadi target untuk melihat homepage yang kita buat
3. Klasifikasikan informasi yang akan ditampilkan dalam homepage
4. Hasil klasifikasi tersebut akan mewakili satu halaman homepage, sedangkan hasil klasifikasi yang lain akan ditampilkan sebagai hyperlink
5. Buat sebuah skenario setiap hasil klasifikasi tersebut agar infprmasi yang ditampilkan benar-benar jelas
Terdapat tiga kriteria tools yang dapat digunakan untuk membantu pengembangan homepage :
1. Editor HTML
2. Graphics
3. Multimedia animasi dan suara
EDITOR HTML
Editor HTML digunakan untuk mendesain homepage dan komponen-komponennya.
Editor HTML juga digunakan untuk menggabungkan suara,gambar,dan animasi yang telah dibuat di dalam suatu halaman homepage.
Editor HTML yang bersifat graphical user interface akan mengurangi waktu kita dalam proses penulisan sintaks.
Microsoft Fint Page Xp merupakan produk Microsoft sebagai editor HTML.
Bagian-Bagian Microsoft font page :
1. Toolbar : melakukan pengaturan format data atau homepage yang
akan di desain
2. Toolbox views : perorganisasian file kerja dalam sebuah homepage
EDITOR GRAPHICS
Editor grafis digunakan untuk mengedit gambar yang akan ditampilkan pada homepage.
Corel Draw
Beberapa Editor Graphics yang sering digunakan :
1. CorelDRAW
2. Adobe Photoshop
EDITOR MULTIMEDIA ANIMASI DAN SUARA
Editor multimedia digunakan untuk membuat animasi gambar dan suara.
Macromedia Flash merupakan editor animasi yang paling populer.
Macromedia Flash tidak hanya digunakan untuk membuat animasi gambar dan suara tetapi juga untuk membuat suatu homepage multimedia.
B. Membuat Layout Homepage yang Diinginkan
Layout atau frame merupakan bentuk format navigasi dari homepage yang akan ditampilkan.
Langkah-langkah untuk melihat dan memilih jenis layout yang tersedia dalam Microsoft Font Page XP, sebagai berikut :
1) Pilih tombol start - All Program- Microsoft Font Page
2) Pilih menu file- New - Page or Web
3) Pilih page templates pada bagian bawah new form 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. Pilih tab Frames Pages yang menampilkan berbagai jenis template yang disediakan oleh Mirosoft Font Page XP.
5) Pilih jenis frame yang diinginkan kemudian tekan tombol OK.
Jenis-jenis frame :
1)Banners and Contents
Membuat frame banner di atas, frame isi di bagian bawah kiri, dan frame utama di bagian bawah kanan. Hyperlink pada frame banner akan mengubah frame isi.
2)Contents
Frame di sebelah kiri merupakan link yang akan mengubah frame utama di sebelah kanan.
3)Footers
Frame utama di atas, frame bawah adalah footer. Hyperlink di footer akan mengubah tampilan di frame utama.
4)Footnotes
Sama dengan Footers, tetapi hyperlink di frame utama akan menubah tampilan footnotes.
5)Header
Membuat frame header navigasi dan sebuah frame utama di bawahnya.
6)Header, Footer, and Contents
Membuat frame header dan footer untuk navigasi.
7)Horizontal Split
Frame atas dan bawah yang independent atau tidak, saling berhubungan.
8)Nested Hierarchy
Hyperlink di sebelah kiri akan mengubah frame sebelah kanan atas. Hyperlink di kanan atas akan mengubah isi frame utama.
9)Top-Down Hierarchy
Frame paling atas akan mengubah frame di bawahnya. Frame kedua akann mengubah frame ketiga.
10) Vertical Split
Frame kanan dan kiri yang independent atau tidak saling terhubung.
C. Menerapkan Hyperlink
Hyperlink digunakan sebagai alat navigasi halaman pada homepage.
Langkah-langkah membuat hyperlink menggunakan Microsoft Font Page XP :
1.Aktifkan aplikasi Microsoft Font Page XP
2.Buat tulisan “Link ke halaman lain” pada dokumen baruyang ditampilkan pertama kali
3.Blok tulisan “Link ke halaman lain”
4.Tekan tombol Ctrl+K sehingga akan ditampilkan kotak dialog Insert Hyperlink.
5.Akan terlihat hasil
6.Setelah file disimpan kita klik “Link ke halaman lain” maka akan membuka halaman tjuan link tersebut
D. Menerapkan Cascading Style Sheet
Fungsi utama dari 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
Normal Style sheet :
CSS kosong
Ancs :
-teks menggunakan jenis huruf Verdana berwarna coklat
-Headers menggunakan jenis huruf Times New Roman berwarna coklat
-Background berwarna light oliveBars
-teks menggunakan jenis huruf Arial
-hyperlink berwarna merah
-Background berwarna light olive
Blocks :
-Teks dan Headers menggunakan jenis huruf Bookman Oldstyle
-hyperlink berwarna merah
-Background berwarna light silver
Blueprint :
-Teks dan Headers menggunakan jenis huruf Century Gothic
-hyperlink berwarna purple
-Background berwarna bright yellow
Capsules :
-Teks dan Headers menggunakan jenis huruf Arial
-hyperlink berwarna red orange
-Background berwarna light green
Downtown :
-teks menggunakan jenis huruf Gramond berwarna kuning
-Headers menggunakan jenis huruf Verdana
-Hyperlink berwarna orange
-Background berwarna royal blue
Expediton :
-Teks dan Headers menggunakan jenis huruf book antiqua
-Background berwarna peach
Highway :
- Teks menggunakan jenis huruf Verdana berwarna putih
- Headers menggunakan jenis huruf Verdana
- Hyperlink berwarna orange
- Background berwarna black
Neon :
- Teks menggunakan jenis huruf Verdana berwarna hijau
- Hyperlink berwarna chartreuse
- Background berwarna black
Poetic :
-Teks menggunakan jenis huruf book antiqua berwarna purple
- Headers menggunakan jenis huruf book antiqua
- Background berwarna white
Street :
-teks menggunakan jenis huruf Verdana berwarna navy
- Headers menggunakan jenis huruf Comic Sains MS
-Background berwarna light cyan
E.Membuat Aplikasi dalam Sistem yang Terintregasi
Untuk membuat sebuah situs atau homepage dibutuhkan skenario sederhana. Fungsi dari skenario untuk memandu dalam menentukan apa saja yan dapat dilakukan oleh suatu halaman atau website.
homepage register.com
F. Mendaftarkan Alamat Domain ke Provider Web Hosting
Langkah-langkah untuk mendaftarkan alamat domain ke provider web hosting :
1. Aktifkan internet explorer ketik http://www.register.com pada kotak url.
2. Cari kotakpencarian domain lalu ketik misalkan sekolah.com tekan tombol Go
3. Hasilnya akan terlihat bahwa domain sekolah.com sudah ada dan yang tersedia yaitu sekolah.tv dan sekolah.cc
4. Cari domain yang lain yaitu sekolahsmuku.com ketikkan pada TRY A NEW SEARCH kemudian tekan tombol search.
5. Hasil pencarian domain sekolahsmuku.com menunjukkan bahwa nama domain tersebut masih
tersedia.
G. Melakukan Upload
Daftarkan nama sekolah SMUKU sebagai user. Untuk pengguna baru akan ditampilkan halaman untuk melakukan registrasi lakukan proses registrasi secara lengkap.
Selanjutnya akan ditampilkan halaman Geocities ControlPanel. Pilih menu Manage kemudian klik link File Manager. Pada Halaman File Manager,klik link open file manager
Pada halaman berikutnya akan ditampilkan fasilitas untuk melakukan upload file. Tekan tombol upload files yang terdapat di sebelah kanan atas. Selajutnya masukkan file-file HTML yang sudah dibuat sebelumnya. Setelah memasukkan file yang dibutuhkan tekan tombol Upload Files.
Lalu akan ditampilkan pesan bahwa proses upload file telah berhasil dilakukan
Tekan link file manager yang terdapat di bagian bawah halaman
Untuk memasukkan folder gambar yang sudah dibuat kita buat sub directory dengan tekan tombol New di bawah Subdirectories beri nama Image kemudian tekan tombol Create Subdirectory.
Selanjtnya buat subdirectory untuk menyimpan CSS file dengan cara yang sama
Edit file index.htm yang sudah disediakan Geocities kemudian tekan tombol Edit
Lakukan proses pengeditan melalui editor HTML yang tersedia. Tekan tombol Save untuk menyimpan hasil pengeditan.
Untuk memasukkan file gambar k dalam subdirectory Image dan CSS,klik dua kali subdiectory CSS kemudian lakukan upload file SMUKU.css melalui tombol upload files
Klik link View My Site untuk menampilkan tampilan homepage yang telah di upload.
Langkah-langkahnya :
1. Aktifkan Yahoo!GeoCities lakukan log in
2. Aktifkan GeoCities Control Panel. Pilih menu Manage kemudian klik file manager. Klik link open file manager.
3. Upload file dengan cara menekan tombol browse
4. Ubah gambar yang terdapat di setiap halaman dengan gambar yang baru di upload dengan cara pengeditan index.htm
5. Ubah linknya. Selanjutnya tekan tombol save untuk menyimpan hasil pengeditan halaman
6. Untuk menampilkan halaman yang sudah diubah gambarnya klik link View My Site
No comments:
Post a Comment