Senin, 06 Desember 2010

TIK BAB 6

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 
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 %> 

TIK BAB 5

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 MicrosoftFrontPage 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 pekerjaanWebMastering, 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-64 MB. 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, MicrosoftFrontpage, Coffeecape, HoTMetaL, dan Macromedia Dreamweaver 4.
· Beberapa software utilities untuk menangani pekerjaan computer graphic design danartwork, 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.
· 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. 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.


B. Membuat Layout Homepage Yang Diinginkan

Layout atau frame merupakan bentuk format navigasi dari homepage yang akan ditampilkan. Beberapa layout halaman homepage tersedia di Microsoft FrontPage XP. Penggunaan layout tergantung jenis navigasi dan informasi yang akan ditampilkan dalam homepage.
Langkah-langkah untuk melihat dan memilih jenis layout yaitu sebagai berikut ;
1. Pilih tombol start-all programs-microsoft frontpage
2. Pilih menu file-new-page or web
3. Pilih page templates pada bagian new from templates
4. Akan ditampilkan kotak dialog page templates yang terdiri atas General,Frames Pages dan Style Sheets
5. Pilih jenis frame lalu tekan tombol OK
C. Menerapkan Hyperlink
Hyperlink digunakan sebagai alat navigasi halaman pada homepage. Cukup dengan menggunakan hyperlink kita dapat menuju ke informasi yang akan kita akses pada page yang lain
Langkah-langkah membuat hyperlink menggunakan Microsoft FrontPage XP sebagai berikut ;
1. Aktifkan aplikasi Microsoft FrontPage XP,buat tulisan ‘Link ke halaman lain’ pada dokumen baru
2. Blok tulisan tadi lalu tekan tombol Ctrl+K sehingga ditampilkan kotak dialog Insert Hyperlink.
3. Kotak text to display menampilkan teks yang dijadikan link,kolom link digunakan untuk memilih link tujuan. Kotak Look In digunakan untuk memilih lokasi tujuan Link. Setelah selesai tekan tombol OK
Langkah-langkah membuat hyperlink dengan tag HTML yaitu sebagai berikut ;
1. Aktifkan Microsoft FrontPage XP,buat tulisan ‘Link ke halaman lain’ pada dokumen baru
2. Letakkan kursor di depan kata ‘Link’ dan di belakang tag pada sintaks HTML
3. Letakkan kursor di belakang kata ‘lain’ dan di depan tag ketikkan tag
4. Klik tab Normal di bagian bawah dokumen untuk melihat hasil akhir
D. Menerapkan Cascading Style Sheet
Fungsi utama dari CSS adalah untuk melakukan pengaturan beberapa format yaitu:
1. Bentuk huruf 5. Warna Background
2. Ukuran huruf 6. Warna hyperlink
3. Format huruf 7. Format textbox
4. Warna huruf
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. Pilih tab style sheets
5. Pilih jenis style sheet yang diinginkan kemudian tekan tombol ok.

E. Mendaftarkan Alamat Domain ke Provider Web Hosting

Setelah mempunyai homepage, langkah selanjutnya adalah mempublikasikan nya di Internet. Tapi sebelumnya anda harus memiliki alamat domain. Daftarkan domain anda secara resmi ke ISP penyedia layanan web hosting. Untuk mendaftarkan nama domain anda, caranya adalah :
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 dimilikioleh 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 antar bank atau menggunakan kartu kredit
f. Jangan lupa cek sekalilagi 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 :
a. Buka situs www.geocities.yahoo.com , klik tombol sign up pada kotak geocities FREE web hosting
b. Masukkan yahoo ID dan password yang anda dapat dari keanggotaan e-mail di situs Yahoo. Kemudian klik sign in.
c. Pada tampilan berikutnya, anda harus memasukkan infomasi yang akan diminta oleh geocities. Untuk conth ini, pilih Computer and Internet. Kemudian klik next.
d. Selesai proses pendaftaran web hosting ditandai dengan munculnya kotak konfirmasi. Hal ini berarti anda telah siap meng-upload file-file webnya.

F. CARA UPLOAD HALAMAN WEB

Web hosting adalah adalah suatu web server yang terhubung ke internet sehingga pengguna internet dapat menyimpan data atau dokumen lain untuk dapat diakses oleh pengunjung internet

a. Upload melalui Ms Front Page
1. Aktifkan folder homepage pribadi anda. Pada saat publikasi ke internet maka semua file yang berkaitan dengan file homepage harus di upload
2. Klik file-publish web. Setelah muncul kotak dialog publish destination, masukkan nama alamat web hosting, dengan cara browse atau dapat langsung anda ketik
3. Apabila anda memilih browse, pilih nama alamatnya, misalnya MSN. Klik open
4. Klik OK maka anda akan terhubung ke web MSN dan tinggal mengikuti instruksi yang ada di web hosting tersebut.
b. Upload dengan web browser
1. Kilik build your website now !
2. Setelah muncul tampilan berikut, klik file manager
3. Pada tampilan selanjutnya, klik browse.
4. Masukkan file anda
5. Pada fasilitas browse file terlihat hanya ada lima file yang bisa di upload. Apabila anda ingin mengupload lebih dari lima file klik display. Pilih jumlah display file yang akan di upload, kemudian klik upload file
6. Akan muncul konfirmai bahwa proses upload berhasil
c. Perbaikan dan Revisi Data Isi Homepage
Cara melakukan perbaikan/perubahan adalah dengan melakukan perubahan data secara offline atau tidak tersambung ke internet. Kemudian melakukan proses upload ke web server untuk mengganti file yang sudah ada dengan yang sudah mengalami perubahan.