Kamis, 26 September 2013

Sejarah Perkembangan Hardware Komputer


Sejarah Perkembangan hardware komputer
Charles Babbage adalah seorang ahli matematika bangsa inggris. Beliau menciptakan suatu mesin hitung yang disebut difference engine pada tahun 1822. Mesin tersebut dipakai untuk menghitung tabel-tabel matematika.

pada tahun 1833, Charles Babbage mengembangkan lagi difference engine yang dinamakan analytical engine yang dapat melaksanakan kalkulasi apa saja. Sehingga mesin ini dikenal sebagai General Purpose Digital Computer. Beliaupun dianggap sebagai bapak komputer modern karena sumbangan terhadap dunia sangat besar.

pada tahun 1937, Prof Howard Aikem, seorang ahli matematika dari universitas Harvard. Beliau merancang pembuatan sebuah komputer yang mampu melakukan operasi aritmatika dan logika secara otomatis.


Pada tahun 1944, Prof Howard Aikem bekerjasama dengan perusahaan IBM menyelesaikan komputer secara elektronik yang diberi nama”Harvard MARK I, Automatic Sequence Controlle Calculator (ASCC). Dalam perkembangannya komputer dibagi dalam beberapa generasi, sesuai dengan kemampuan (capability), biaya (efficiency), dan penggunaan yan mudah (user frendly).


Sejarah Perkembangan hardware komputer

Generasi 1 : pada tahun 1946-1956, generasi ini mengandalkan ruang tabung hampa(vacuum tube). Komputer ini membutuhkan ruangan yang luas, berkemampuan rendah dan terkenal dengan daya panasnya. Ukuran penyimpanannya hanya sekitar +/- 2000 byte dan untuk menjalankan program dan pencetakan masih dilakukan secara manual.

Sejarah Perkembangan hardware komputer

Generasi 2 : pada tahun 1957-1963. Transistor menggantikan kedudukan vacuum tube dalam menyimpan dan melakukan proses informasi. Transistor bentuknya lebih kecil, tidak begitu panas dan mengkomsusikan sedikit tenaga. Ukuran penyimpanan berkapasistas sebesar 32 kb dengan kecepatan 20.000-30.000 perintah per detik.

Sejarah Perkembangan hardware komputer

Generasi 3 : pada tahun 1964-1975. Itergrated circuit (IC) sudah mulai digunakan pada komputer. Ukuran penyimpanan berkapasitas 2 megabyte dengan kecepatan +/- 5 juta perdetik. Generasi ini pula yang memperkenalkan tekhnologi software yang mudah digunakan.

Sejarah Perkembangan hardware komputer

Generasi 4 : pada tahun 1980-sekarang. Komputer telah menggunakan teknologi”Very Large-Scale Integrated Circuits (VLSIC). Dalam sebuah chip, teknologi ini mampu menampung jutaan circuit. Chip ini dinamakan dengan microprocessor. Ukuran penyimpanan mempunyai kapasitas yang besar dengan kecepatan jutaan perintah perdetik.

Perkembangan Hardware Komputer


Pendahuluan
Ketika kita berbicara tentang perkembangan teknologi komputer maka kita tidak bisa lepas dari elemen-elemen di dalamnya, yaitu: hardware, software, dan brainware.  Ketiga dari elemen ini berkembang secara bersama-sama, saling mengikat, karena bila salah satu dari elemen ini berkembang terlalu pesat dibanding elemen-elemen lainnya maka akan terjadi ketimpangan dari teknologi itu sendiri. Disini saya akan menulis tentang perkembangan salah satu elemen teknologi system komputer itu, yaitu:  hardware.


Definisi
Secara umum hardware adalah semua elemen atau komponen fisik dari teknologi, ini berlaku juga pada semua komponen fisik dari system komputer, seperti CPU, harddrive, Keyboard, dan sebagainya.



Perkembangan Hardware Komputer
Perkembangan hardware komputer semakin cepat dari yang sederhana sampai ke hardware yang paling kompleks. Namun dilihat dari sejarahnya, perkembangan komputer diawali oleh kebutuhan manusia untuk melakukan pemrosesan data secara lebih mudah, walaupun prinsip itu tetap berlaku, namun akhir-akhir ini kelihatannya perkembangan hardware komputer lah yang mampu menciptakan “kebutuhan-kebutuhan” dan peluang baru, sebagai contoh: ketika ditemukan komponen-komponen hardware yang lebih kecil dan ipod muncul maka tercipta kebutuhan baru di dunia musik, hal ini juga mampu merubah kondisi industri musik itu sendiri.
Perkembangan hardware komputer itu sendiri adalah sebuah evolusi dari berbagai alat pengolahan data. Adalah seorang Charles Babbage yang pertama kali mengenalkan komputer yang pertama, namun pada periode ini komputer digunakan hanya untuk operasi matematika, baru setelah tahun 1940 komputer digunakan untuk pengolahan data yang lebih luas. Berikut adalah perkembangan generasi komputer setelah tahun 1940 :
  • Generasi Pertama (tahun 1940-1959). Pada generasi ini komputer menggunakan tabung untuk memproses data dan menyimpan data. Beberapa komputer yang lahir pada generasi ini adalah ENIAC, EDVAC, EDSAC.
  • Generasi Kedua (tahun 1959-1964). Penemuan transistor pada tahun 1948 adalah salah satu faktor yang membuat generasi komputer ini lahir. Komputer pada generasi ini jauh lebih kecil karena menggunakan transistor untuk menggantikan tabung vakum yang ukurannya lebih besar. Pada periode ini pula, bahasa pemrograman sudah mulai dikenal untuk menggantikan bahasa mesin pada generasi sebelumnya sehingga menyebabkan ada beberapa profesi baru yang bermunculan seperti programmer, analyst dan ahli sistem komputer.
  • Generasi Ketiga (1964-awal80an). Generasi ini dipengaruhi oleh penemuan IC dan chip untuk mengatasi kekurangan transistor yang cepat panas. Komputer generasi ini pun membuat komputer menjadi lebih kecil karena komponen yang banyak dapat dipadatkan dalam satu chip. Generasi ini pula ditemukan system operasi..
  • Generasi keempat(awal80an-??).  Generasi ini adalah pengembangan dari mikroprosesor untuk membuat komputer lebih bisa melakukan tugas-tugas yang lebih kompleks. Personal Komputer dikenal pada generasi ini.
  • Generasi kelima. Generasi ini memungkinkan komputer masadepan untuk lebih dapat berinteraksi dengan manusia.
Secara garis besar, hardware pada PC itu dibagi menjadi 5 bagian utama, yaitu CPU, memory utama, piranti input, piranti output, dan media penyimpanan.


Bagan Hardware Komputer
bagan komputer

CPU
CPU atau prosessor ini merupakan komponen pemrosesan logika dan aritmatika serta mengendalikan komputer. Kecepatan pemrosesan ditentukan oleh kecepatan clock dari control unitnya. Perhitungannya dalam satuan hertz, semakin besar nilainya semakin cepat clocknya. Contoh Intel Core i7 2.93 Ghz  artinya kecepatan clock dari control unitnya adalah 2.93 Ghz.
Memory
Memory berfungsi menyimpan data dan instruksi yang sedang dijalankan. Ada 2 jenis memory, yang pertama adalah RAM dan yang kedua adalah ROM. ROM ini menyimpan data dan instruksi yang disediakan oleh vendor komputer dan hanya bisa dibaca. Satuan dari kinerja RAM adalah bit atau byte, semakin besar nilainya semakin besar kapasitasnya. Contoh RAM 4 GB artinya RAM mempunyai kapasitasnya sebesar 4 Gigabyte.
Output  dan Input Devices
Ouput dan input devices ini berfungsi untuk menjembatani antara komputer dengan lingkungan luarnya. Input Devices adalah alat yang digunakan untuk memasukkan data, bisa berupa keyboard, scanner, mouse, barcode, dll. Sedangkan untuk Output devices adalah alat yang digunakan untuk mengeluarkan hasil dari pemrosesan data, bisa berupa monitor, printer, speaker dll.
Media Penyimpanan
Media ini berfungsi untuk menyimpan data secara permanen yang nantinya bisa dibaca kembali, bisa berupa harddisk, flashdisk, CD, DVD dan yang sudah mulai ditinggalkan adalah disket. Satuan kapasitasnya adalah bit atau byte, semakin besar nilainya semakin besar kapasitasnya. Contoh Harddisk 160GB artinya kapasitas penyimpanan harddisk tersebut adalah 160 Gigabyte.
Selain 5 komponen diatas, sebenarnya ada beberapa komponen tambahan yang berfungsi untuk menambah performansi dari komputer itu sendiri, seperti LANcard, Wifi untuk perangkat networking dengan satuan bitpersecond (bps), videocard untuk menghasilkan output gambar ke monitor dengan satuan byte.
Contoh pembacaan spesifikasi komputer Dell Studio XPS 8100 adalah Core i7-870 2.93 GHz, 4GB DDR3, 640GB HDD SATA, DVD±RW, GbE NIC, VGA NVIDIA GeForce GT220 1GB artinya komputer tersebut didukung oleh prosesor Intel core i7-870 dengan clock 2.93 Ghz dan kapasitas media penyimpanan harddisk sebesar 640GB, RAM sebesar 4 GB, dan videocard  sebesar 1GB.


Penutup
Dari perkembangan hardware tersebut dapat disimpulkan bahwa hardware komputer bergerak ke arah yang lebih kecil, mobile, kapasitas penyimpanan besar, handal dalam pemrosesan data, serta output dan input devices yang memungkinkan manusia dapat berinteraksi dengan mudah dengan komputer.




Sejarah Perkembangan Hardware



 

Sejarah Perkembangan Hardware 
          Kemajuan teknologi yang dibuat manusia telah mengubah bentuk dan fungsi komputer tersebut dalam beberapa generasi.
Ada beberapa generasi yang kita kenal yaitu sebagai berikut:
1. Generasi Pertama (1946-1959)
Komputer generasi pertama dibuat masih sangat sederhana dan belum kompleks penggunaannya, sehingga komputer generasi pertama belum dapat memproses masalah-masalah yang besar. Komputer dalam prosesnya serta pembuatnya masih menggunakan komponen yang besar-besar.
·                     -Adapun ciri-ciri komputer generasi pertama, antara lain :
a. Ukuran fisiknya besar.
b. Kecepatan prose lambat.
c. Cepat panas.
d. Membutuhkan listrik yang besar.
e. Menggunakan tabung hampa udara (Vaccum tube).
f. Memorinya menggunakan Magnetic Core Storage.
g. Masih menggunakan bahasa mesin (Machine Language).
h. Menggunakan konsep Stored Program.

-Contoh komputer generasi pertama :
- MARK I, MARK II, IBM 702, IBM 704, IBM 709 (dibuat oleh IBM/International Business Machine).
- UNIVAC II (dibuat oleh Sperry Rand).
- ENIAC (Electronic Numerical Integrator and Calculator), dibuat oleh DR. John W. Mauchly pada tahun 1942. Komputer ini berukuran besar dan berat fisiknya mencapai 30 ton.
- SEC (Simple Electronic Computer), dibuat oleh Electronic Computation Laboratory of Birkbeck College pada tahun 1951.
- Datamatic 1000 (dibuat oleh Honeywell).
- NCR 102A, NCR 102D (dibuat oleh National Cash Register).

2. Generasi Kedua (1959-1965)
Pembuatan komputer generasi kedua ini merupakan pengembangan dari komputer generasi pertama yang dibuat untuk menyempurnakan bentuk dari komponen dan penggunaan listrik yang lebih hemat.
 Komputer generasi kedua mempunyai ciri-ciri sebagai berikut :
a. Komponen telah menggunakan transistor.
b. Ukuran fisiknya lebih kecil.
c. Kecepatan prosesnya lebih cepat.
d. Tidak cepat panas.
e. Membutuhkan listrik lebih sedikit.
f. Memori yang digunakan lebih besar.
g. Telah menggunakan bahasa tingkat tinggi (high level language).
h. Sudah dapat digunakan untuk real time (informasi yang dibutuhkan dapat dihasilkan dengan sekejap) dan time sharing (komputer digunakan bersama-sama dan komputer dapat membagi waktu untuk tiap-tiap pemakai).

Contoh komputer generasi kedua :
- IBM 7070, IBM 7080, IBM 1400, IBM 1600 (dibuat oleh IBM/International Business Machine).
- Honeywell 400, Honeywell 800 (dibuat oleh Honeywell).
- Burroughs 200 (dibuat oleh Burroughs).
- GE 635, GE 645, GE 200 (dibuat oleh General Electric).
- UNIVAC III, UNIVAC SS80, UNIVAC SS90, UNIVAC 1107 (dibuat oleh Sperry Rand).
- NCR 300 (dibuat oleh National Cash Register).

3. Generasi Ketiga (1965-1970)
Komputer generasi ketiga dibuat dengan menggabungkan beberapa komponen dalam satu tempat dan disempurnakan tampilan dari komputer tersebut. Selain itu, komputer generasi ketiga telah dibuat penyimpanan memorinya lebih besar dan diletakkan di luar (eksternal) penggunaan listriknya lebih hemat dibandingkan komputer generasi kedua dan ukuran fisiknya dibuat menjadi lebih kecil, agar dapat menghemat penggunaan ruang.

Komputer generasi ketiga mempunyai ciri-ciri sebagai berikut :
a. Komponen telah menggunakan IC (Integrated Circuit) atau yang disebut "chip" dalam bentuk Hybrid Integrated Circuits atau Solid Logic Technology (SLT), yaitu transistor dan dioda diletakkan secara terpisah dalam satu tempat.
b. Kecepatan prosesnya lebih cepat.
c. Membutuhkan listrik lebih hemat.
d. Memorinya yang digunakan lebih besar, dapat menyimpan sampai ratusan ribu karakter.
e. Telah menggunakan penyimpanan luar yang bersifat random access, yaitu magnetik disk yang berkapasitas besar.
f. Dapat digunakan untuk multi processing dan multi programming.
g. Telah dibuatnya alat input-output dengan menggunakan visual display terminal yang dapat menampilkan grafik, dapat menerima dan mengeluarkan suara, dan telah digunakannya alat pembaca tinta magnetik MICR (Magnetic Ink Character Reader).

Contoh komputer generasi ketiga :
- GE 600, GE 235 (dibuat oleh General Electric).
- Burroughs 5700, Burroughs 6700, Burroughs 7700 (dibuat oleh Burroughs).
- UNIVAC 1108, UNIVAC 9000 (dibuat oleh Sperry Rand).

4. Generasi Keempat (1970-1995)
Komputer generasi keempat merupakan pengembangan dari komputer generasi ketiga. Komputer ini dibuat dengan menggabungkan beberapa IC yang dipadatkan, yang dalam komputer generasi ketiga belum dapat digabungkan.

Komputer generasi keempat mempunyai ciri-ciri sebagai berikut :
a. Telah menggunakan LSI (Large Scale Integration), yaitu penggabungan beribu-ribu IC yang dipadatkan dalam 1 buah chip.
b. LSI dikembangkan menjadi VLSI (Very Large Scale Integration) yang dapat memuat 150.000 transistor yang dipadatkan.
c. Chip yang digunakan telah berbentuk segi empat yang membuat rangkaian-rangkaian terpadu.

Contoh komputer generasi keempat :
- IBM 370 (dibuat oleh IBM/International Business Machine).
- APPLE II (dibuat oleh Apple).

PERKEMBANGAN HARDWARE COMPUTER


PERKEMBANGAN HARDWARE COMPUTER
BAB I
PENDAHULUAN
A.Latar Belakang
Komputer merupakan alat elektronik yang sangat membantu pekerjaan manusia menjadi lebih cepat dan mudah. Dalam kehidupan sehari-hari, komputer digunakan secara meluas dalam segala aspek kehidupan. Anak-anak sekolah telah belajar komputer untuk melakukan tugas di sekolah maupun menambah ilmu dari alat ini. Begitu juga orang dewasa dalam bekerja baik itu mengetik, mengirim surat, mengedit data dan mendapatkan informasi . Oleh karena itu, kita perlu mempelajari perkembangan komputer ini.
Teknologi saat ini berkembang pesat dan kita cenderung mengikuti perkembangannya. Dalam hal mengetik dokumen, dulu kita masih menggunakan mesin ketik manual dan sekarang hampir semua orang menggunakan komputer. Begitu juga dalam hal menyimpan lagu, dulu kita masih menggunakan kaset dan piring hitam, namun sekarang kita menggunakan CD yang bisa didengarkan melalui komputer. Begitu juga bidang – bidang lainnya telah banyak memanfaatkan komputer.
Perkembangan teknologi yang semakin pesat akan membuat kita ketinggalan jika kita tidak mempelajarinya. Untuk itu paper ini membahas perkembangan hardware secara terperinci sehingga kita tidak bingung ketika membeli maupun memanfaatkan komputer.
B.Rumusan Masalah
Berdasarkan latar belakang masalah di atas maka rumusan masalah yang akan dibahas dalam paper ini adalah :
1.Apa saja yang termasuk ke dalam komponen hardware komputer?
2.Bagaimana perkembangan penggunaan komponen hardware komputer?
C.Tujuan
Tujuan dari paper ini yaitu:
  1. Memaparkan pengertian hardware dan kompoonen-komponennya.
  2. Mengetahui perkembangan hardware.
BAB II
PEMBAHASAN
A. Pengertian hardware komputer
Berdasarkan wikipedia, komputer adalah alat yang digunakan untuk mengolah data menurut prosedur yang telah dirumuskan. Pada awalnya komputer hanya digunakan untuk menghitung aritmatika seperti asal kata “compute” yang artinya menghitung. Sejalan perkembangannya, komputer dapat digunakan untuk banyak tugas yang tidak berhubungan dengan matematika.
B. Komponen -komponen komputer
Komponen-komponen komputer yaitu :
  1. Input Device
  2. Output Device
  3. Storage Device
  4. System Unit
  5. Communication Device
Input Device merupakan komponen hardware yang mengizinkan pengguna untuk memasukkan data atau instruksi ke dalam komputer. Contoh input device yaitu keyboard, pointing device, mouse, voice input, input gambar dan input video.
Output Device merupakan peralatan yang memproses data dan menghasilkan teks, grafik, audio, video. Contoh output device yaitu printer, monitor, speaker, headphone dan proyektor.
Storage Device merupakan materi fisik tempat komputer menyimpan data, instruksi dan informasi. Contoh storage device yaitu RAM, Harddisk, DVD, smart card, USB disk dll.
System unit merupakan kotak yang berisi komponen elektronik dari komputer yang digunakan untuk memproses data. Bagian-bagian system unit yaitu motherboard , processor, memory dll.
Communication Device merupakan hardware yang mampu mentransmisi data, instruksi dan informasi antar alat pengirim dan penerima. Contohnya yaitu modem, wireless dll.
C.Perkembangan hardware komputer
C.1.Perkembangan komponen input device komputer
Peralatan input device yaitu
  1. Keyboard : merupakan peralatan input yang berisi tombol yang user tekan untuk memasukkan data ke dalam komputer.
  2. Pointing device :
a. Mouse : sebuah peralatan pointing yang ukurannya sebesar telapak tangan.
b.Trackball : peralatan pointing tetap dengan bola pada permukaannya.
c. pointing stick : peralatan pointing yang sensitif terhadap tekanan yang letaknya ada pada tombol-tombol keyboard.
d. Touchpad : peralatan pointing yang bentuknya kotak,kecil dan datar yang sensitif terhadap tekanan dan gerakkan. Biasanya touchpad ada pada notebook.
e. Joystick: peralatan pointing yang berbentuk tuas yang dioperasikan berdasarkan arah gerakan yang diinginkan.
f.Lightin pen : peralatan input yang dapat mendeteksi keberadaan cahaya dan digunakan pada layar khusus.
g.Stylus pen : peralatan input yang berbentuk bolpen yang menggunakan tekanan untuk memilih objek pada layar.
  1. Voice input : proses untuk memasukkan data dengan cara berbicara melalui alat input khusus untuk suara.
a. Tape
b. CD/DVD Player
c.Radio
d. Midi
e. Microphone
  1. Input gambar
a. Digital camera : peralatan yang mengizinkan pengguna untuk mengambil dan menyimpan gambar dalam bentuk digital
b. Optical Character recognition : teknologi yang melibatkan pembacaan hasil tertulis , hasil print atau karakter yang tertulis dari sebuah komputer dari dokumen biasa dan mengubahnya ke bentuk yang dapat diproses. Contohnya pada dokumen tagihan.
c. Optical Mark recognition : teknologi yang membaca tanda hasil buatan tangan seperti lingkaran kecil atau kotak untuk tes, survey atau kuesioner.
d. Scanner : alat input dengan cahaya yang membaca grafik dan teks kemudian merubah hasilnya ke dalam bentuk yang dapat diproses komputer.
e. Barcode Reader : peralatan optik yang menggunakan laser untuk membaca barcode
f. MICR reader : alat yang dapat membaca teks tertulis dengan tinta magnetis biasanya pada cek.
  1. Input Video: proses untuk mengambil gambar bergerak secara penuh ke dalam komputer dan disimpan ke dalam harddisk/ DVD.
a. PC Video Camera : kamera digital yang memampukan sebuah rumah atau bisnis kecil untuk mengambil video dan gambar tetap serta dapat digunakan untuk video telephone call.
b. Video telephone call : sarana berkomunikasi melalui internet dengan bentuk video.
c. Video conference : pertemuaan antara dua orang secara terpisah geografis dengan jaringan internet dalam bentuk audio dan video.
  1. Inovasi Teknologi Input
a. Point of Sales terminal : sistem retail yang memampukan komputer untuk mengelola operasi pembayaran customer (data pembelian, proses kartu kredit/debit, pengupdatean inventory) untuk barang dan layanan.
b. Automated teller machine : mesin perbankan yang menghubungkan sebuah komputer melalui jaringan yang memampukan pengguna untuk melakukan self-service.
c. Smart Display : Monitor dekstop tipis yang terpisah dari komputer yang berfungsi sebagai sebuah portable wireless touch screen yang dapat mengakses komputer dari jauh.
d. Biometric input : teknologi autentikasi identitas seseorang dengan memverifikasi karakteristik seseorang.
e. Input untuk orang tunanetra: orang cacat dapat mengoperasikan komputer dengan menyentuh keyboard Braille input.
C.2.Perkembangan komponen output device komputer
Peralatan output device dapat berupa hard copy device, soft copy device dan drive device. Hard copy device yaitu alat yang digunakan untuk mencetak tulisan dan image pada media kertas atau film. Soft copy device yaitu alat yang digunakan untuk menampilkan tulisan atau image dalam bentuk elektronik seperti pada layar komputer. Drive device yaitu alat yang digunakan untuk merekam simbol dalam bentuk yang hanya dapat dibaca oleh mesin media.
Macam-macam peralatan output device yaitu:
  1. Printer : merupakan hard copy device sebagai alat untuk mencetak gambar maupun tulisan pada media kertas. Printer berkembang berdasarkan kecepatan, kwalitas, model dan sistem percetakan yang berbeda- beda.
a. Line Printer
Line Printer merupakan printer yang mempunyai kemampuan untuk mencetak satu baris (line) dalam satu saat. Kecepatannya sangat tinggi namun kwalitasnya masih kurang dibandingkan dengan mesin ketik.
b. Printer Dot Matrix
Printer Dot Matrix merupakan printer yang menghasilkan cetakan berupa titik-titik yang saling berhubungan. Kwalitasnya masih rendah dan suaranya cenderung keras. Kelebihannya printer ini awet dan harganya lebih murah karena masih menggunakan pita tinta.
c. Inkjet Printer
Inkjet Printer merupakan printer yang menggunakan tinta untuk mencetak sehingga kwalitas hasil cetakkannya bagus. Kecepatannya tergantung pada merek inkjet printer yang digunakan. Hasil cetakkan lebih lama kering dibandingkan dengan laser printer.
d. Laser Printer
Laser Printer merupakan printer yang dapat menghasilkan cetakan dengan sangat cepat dan kwalitas cetakkan mirip sekali dengan aslinya. Proses pencetakkannya dilakukan dengan memfokuskan gambar dengan titik pertitik yang dilakukan oleh semi konduktor laser.
e. Plotter
Plotter merupakan printer yang dirancang khusus untuk mencetak grafik. Printer ini menggunakan pena-pena tinta dan ukurannya besar sehingga dapat mencetak gambar ukuran besar dengan jelas.
f. Inkjet Plotters
Inkjet Plotter merupakan plotter yang menggunakan semprotan tinta yang akan menempel pada kertas yang tergulung pada sebuah drum. Inkjet Plotter dapat menghasilkan berbagai kombinasi warna gambar secara cepat, tenang dan tepat.
g. Printer Digital
Printer Digital merupakan printer yang mencetak foto secara cepat dan pengoperasiannya juga sederhana.
  1. Monitor : merupakan soft copy device berupa signal elektronik gambar yang tampil di layar monitor. Perkembangan monitor berdasarkan ukuran dan tingkat resolusi yang berbeda-beda.
a. CRT (Cathode Ray Tube)
Monitor ini cepat merespon warna dengan sudut penglihatan yang sangat bagus. Bentuknya seperti tabung dengan layar cembung dan boros energi listrik.
b. LCD (Liquid Crystal Display)
Monitor ini berbentuk flat, ramping, ringan dan tipis serta resolusi rendah sehingga hemat energi listrik. Respon warnanya lebih lambat dan pancaran cahaya lambat dan tidak melelahkan mata dibandingkan dengan CRT.
c. PDP (Panel Layar Plasma)
PDP merupakan display panel datar. Biasanya digunakan sebagai monitor TV yang besar. PDP menampilkan flatscreen ringan dengan harga yang lebih mahal.
  1. Speaker : output device yang mengeluarkan informasi melalui suara. Perkembangan speaker berdasarkan rentang frekuensi pada pendengaran manusia.
a. Tweeter
merupakan speaker berukuran kecil 0,5 inci – 4 inci. Frekuensinya tinggi pada rentang 3500 Hz – 20 Khz seperti suara vokal, cymbal drum dan dentingan alat musik lainnya.
b. Midrange
speaker ini berukuran 3-4 inci dengan frekuensi 350-4500 Hz. Midrange biasanya disertakan dengan 1 set sistem 3 way car audio untuk menyempurnakan high frekuensi sehingga vokal terdengar lebih fokus dan jelas.
c.Midbass
speaker ini didominasi pada suara rendah , ukuran 5-7 inci dan f rekuensi 80-350 Hz.
d. Woofer
Speaker ini menghantarkan suara bass dengan frekuensi 100 Hz ke bawah dan ukurannya 8-10 inci.
  1. Headphone : fungsinya sama seperti speaker yaitu mengeluarkan suara namun kapasitasnya lebih kecil yang dipasangkan pada kedua telinga.
  1. Inovasi Teknologi Output
a. Mesin Fax : peralatan yang mentransmisi dan menerima dokumen melalui jalur telepon.
b.Peralatan Multi Fungsi : peralatan tunggal yang terlihat seperti mesin fotokopi tetapi menyediakan fungsi sebagai sebuah printer, scanner, mesin fotocopy dan mesin fax.
c.Proyektor : peralatan yang mengambil gambar dari sebuah layar komputer dan memproyeksikannya ke layar yang lebih besar sehingga penonton dapat melihat secara jelas.
d. Force Feedback : teknologi yang mengirimkan suatu perlawanan ke peralatan output sebagai respon dari user . Contoh : efek getar pada joystick pada saat sebuah mobil menabrak dinding pada sebuah game.
C.3.Perkembangan komponen storage device komputer
a. Primer
Memory/RAM : menyimpan data yang akan diartikan dan dieksekusi dengan processor
b. Sekunder
Harddisk : menyimpan sistem operasi , sofware operasi, data user dan informasi .
CD/DVD : menyimpan sofware, back up, film maupun musik yang terdiri dari disk portable berbentuk lingkaran dan datar terbuat dari metal , plastik atau lacquer.
Mobile Storage : menyimpan digital atau file untuk dipindahkan.
Floppy Disk : menyimpan file kecil untuk dipindahkan
ZIP Disk : media magnetik portable yang dapat menyimpan dari 100 – 750 MB data.
Smart Card : media penyimpan yang mirip dengan kartu ATM dan dapat menyimpan data pada sebuah mikroprocessor tipis yang ditanamkan pada sebuah kartu.
USB Disk : alat penyimpan storage yang dapat digunakan cara memasukkannya ke port USB pada sebuah komputer.
C.4.Perkembangan komponen system unit komputer
Motherboard : main circuit board dari sistim unit terdiri dari processor slot, memory slot dan expansion slot
Processor / CPU : komponen yang berfungsi untuk mengartikan dan melakukan instruksi dasar operasi sebuah komputer.
C.4.Perkembangan communication device komputer
Peralatan communication device yaitu :
1. Modem : alat yang mengubah signal agar dapat melakukan transmisi data/informasi melalui jaringan telepon.
a. Dial-up Modem : modem yang digunakan untuk berhubungan dengan jaringan dial-up (jaringan telepon analog).
b. Cable modem : modem digital yang mengirim dan menerima data digital pada jaringan televisi kabel .
c. ISDN/DSL modem : modem yang digunakan untuk berhubungan dengan ISDN/DSL (jaringan telepon digital).
d. Network card : adapter card/ compact flash card yang memampukan komputer untuk mengakses ke sebuah jaringan.
2. Wireless access point : peralatan komunikasi yang mengizinkan komputer dan peralatan untuk mentransfer data secara nirkabel diantara peralatan / komputer itu sendiri atau ke jaringan kabel
BAB III
PENUTUP
A.Kesimpulan
Hardware komputer memiliki komponen-komponen yaitu Input Device, output device, storage device, system unit dan communication device. Masing-masing komponen memiliki alat-alat yang selalu berkembang.
Peralatan Input device yaitu keyboard, pointing device, voice input,
input gambar dan input video serta terdapat juga inovasi teknologi input yang memiliki kegunaan khusus.Peralatan Output device yaitu printer, monitor, speaker, headphone dan inovasi output yang mengalami perkembangan multi fungsi. Peralatan storage device yaitu memory, harddisk dll. Peralatan sistem unit yaitu motherboard, CPU dll. Peralatan communication device yaitu modem dan wireless.
B.Saran
Perkembangan hardware semakin canggih dengan bentuk dan ukuran serta kemampuan yang berbeda-beda. Dengan mengetahui perkembangan hardware, kita dapat memanfaatkan hardware tersebut sesuai kebutuhan.

Selasa, 24 September 2013

cara membuat program CSS dan contohnya


Pada toturial kali ini saya akan berbagi tentang cara membuat css sederhana. Yang anda perlukan dalam membuat css ini diantaranya adalah :
  1. Notepad
  2. Browser seperti firefox atau chrome
Langkah-langkahnya yaitu :
  1. Jalankan notepad
  2. Ketikkan text kode html berikut :
    <html>
        <head>
        <title>Membuat css sederhana</title>
        <style type="text/css">
        body {
            background-color:#33CC00;
            color:#0000CC;
        }
        h1 {
            color:#000066;
        }
        p {
            border:1px solid #ccc;
            background-color:#FF0000;
            padding:5px;
        }
        </style>
        </head>
        <body>
        <h1>Selamat datang di Website saya</h1>
        <p>Saya sedang belajar membuat css sederhana</p>
        <p>Ternyata membuat membuat css sederhana itu sangat mudah</p>
        </body>
        </html>
     
  3. Kemudian kita simpan. Untuk menyimpan harus dengan jenis html, sehingga kita gunakan fasilitas menu save as yang ada di notepad.
    1. Klik menu save as
    2. Pilih folder tempat menyimpan, misal di desktop
    3. kemudian ketikkan nama file secara lengkap : latihan1.html
    4. Kemudian pilih Save as type : all files
    5. Lalu tekan Save
  4. Sekarang buka desktop dan cari file yang sudah kita buat tadi, lalu klik 2x
Jika anda lihat contoh script diatas, yang dinamakan css adalah pada group <style type="text/css">.....</style>. Fungsinya adalah mengatur tampilan output yang ada pada bagian <body>...</body>.

Contoh CSS

body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}

Ada tiga cara untuk memasukkan sebuah style sheet:
  1. Eksternal style sheet
  2. Internal style sheet
  3. Inline style

Eksternal style sheet

Style sheet eksternal sangat ideal bila gaya yang diterapkan pada banyak halaman. Dengan style sheet eksternal, Anda dapat mengubah tampilan seluruh situs Web dengan mengubah satu file. Setiap halaman harus link ke style sheet menggunakan tag <link>. Tag <link> masuk ke dalam bagian kepala:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

Style sheet eksternal dapat ditulis dalam editor teks apapun. File seharusnya tidak berisi tag html. Style sheet harus disimpan dengan ekstensi css.. Contoh dari sebuah file style sheet adalah sebagai berikut:

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}

Jangan memberi spasi antara nilai properti dan unit (seperti margin-left: 20 px). Benar cara: margin-left: 20px

Internal Style Sheet

Style sheet internal harus digunakan bila dokumen tunggal memiliki gaya yang unik. Anda mendefinisikan gaya internal di bagian kepala halaman HTML, dengan menggunakan tag <style>, seperti ini:

<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

Inline Styles


Gaya inline akan kehilangan banyak keuntungan dari style sheet dengan mencampurkan konten dengan presentasi. Gunakan metode ini hemat!

Untuk menggunakan gaya inline Anda menggunakan atribut style pada tag yang relevan. Atribut style dapat berisi properti CSS. Contoh ini menunjukkan cara mengubah warna dan margin kiri paragraf:

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

Beberapa Style Sheets


Jika beberapa properti telah ditetapkan untuk pemilih yang sama dalam style sheet yang berbeda, nilai-nilai akan diwariskan dari style sheet lebih spesifik.

Sebagai contoh, sebuah style sheet eksternal memiliki sifat ini untuk pemilih h3:

h3
{
color:red;
text-align:left;
font-size:8pt;
}

Dan style sheet internal memiliki sifat ini untuk pemilih h3:

h3
{
text-align:right;
font-size:20pt;
}

Jika halaman dengan internal style sheet juga link ke style sheet eksternal properti untuk h3 akan menjadi:

color:red;
text-align:right;
font-size:20pt;

Warna diwariskan dari style sheet eksternal dan teks-alignment dan font-size diganti dengan style sheet internal.

Gaya Beberapa Will Cascade ke Satu

Gaya dapat ditentukan:
  • di dalam sebuah elemen HTML
  • di dalam bagian kepala halaman HTML
  • dalam file CSS eksternal

Tip: Bahkan beberapa style sheet eksternal dapat dirujuk di dalam dokumen HTML.

Cascading rangka


Apa gaya akan digunakan ketika ada lebih dari satu gaya yang ditentukan untuk elemen HTML?

Secara umum kita dapat mengatakan bahwa semua gaya akan "cascade" ke dalam lembaran baru "virtual" gaya sesuai aturan berikut, di mana nomor empat memiliki prioritas tertinggi:
  1. Browser default
  2. Eksternal style sheet
  3. Internal style sheet (di bagian kepala)
  4. Inline style (di dalam elemen HTML)
Jadi, gaya inline (di dalam elemen HTML) memiliki prioritas tertinggi, yang berarti bahwa itu akan menimpa gaya didefinisikan di dalam tag <head>, atau dalam style sheet eksternal, atau dalam browser (nilai default).

Catatan: Jika link ke style sheet eksternal ditempatkan setelah style sheet internal di <head> HTML, style sheet eksternal akan menimpa style sheet internal

membuat JAVASCRIPT dan contohnya


Membuat Javascript Punya Pribadi



Ngomong-ngomong mengenai  script  milik pribadi tentu membuat script itu lebih khusus, hanya milik Anda. Dan berbicara soal keuntungan Anda, dengan memiliki script yang khusus hanya untuk Anda maka membuat blog Anda lebih optimal. Misalkan Anda menemui toturial seperti ini dari suatu blog:

menggunakan fasilitas bawaan blogger memang simpel dan mudah tetapi update nya lama. Ketika telah ada beberapa komentar baru masuk memerlukan waktu cukup lama untk menampilkannya di widget komentar terbaru tersebut. Nah, sedangkan alternatifnya adalah membuat kotak komentar menggunakan gadget HTML yang Anda isi dengan script berikut ini, update terbukti lebih cepat!

 
 <script style="text/javascript" src="http://bloggerhosting.appspot.com/serve/amen24.googlepages.com/showrecentcomments.js"

</script><script style="text/javascript">var numcomments = 5;var showcommentdate = false;var showposttitle = true;var numchars = 100;var standardstyling = true;</script> <script src="http://www.blog-trik-tip.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

Perhatikan pada bagian yang berwarna merah. Tentu Anda akan sangat sering menemukan tutorial yang memerintahkan Anda untuk memasukkan suatu script ke dalam template Anda seperti penggalan di atas. Sekarang kita perhatikan baris berikut dari penggalan artikel di atas:

"http://bloggerhosting.appspot.com/serve/amen24.googlepages.com/showrecentcomments.js"

diawali dengan kode src yang berarti memanggil. Kode di atas berarti Anda akan memanggil objek yang berada di belakang tanda src=, dalam hal ini javascript. Perhatikan bagian yang berwarna biru diakhiri dengan ekstension .js (javascript). Nah bayangkan dari artikel saya ini saja ada 100 orang yang membaca lalu 50 diantaranya mengikuti tutor tersebut dan memasangnya di blog mereka dalam hal ini pemasangan recent comment widget. Maka pada saat blog mereka dibuka bersama-sama, maka script inipun dipanggil bersama-sama. Belum lagi jika yang akses blog mereka pada waktu bersamaan ada 10 orang. Tnetu akan membuat loading widget semakin berat. Oleh karena itu disinilah manfaatnya Anda selalu hosting javascript hanya untuk Anda.

Pertama :
Copy Lokasi

Jika Anda menemukan tutorial serupa dan menemukan sebuah perintah untuk memasukkan script jangan langsung dengan mudahnya mengaplikasikannya. Tapi host ulang script tersebut khusus untuk Anda. Pertama yang dilakukan adalah copy lokasi script dari tutorial tersebut. Anda harus bisa menemukan lokasinya. Seperti ktia contohkan di atas, selalu di awali dengan http:// dan diakhiri .js untuk javascript.

Kedua :
Buka Alamat Tersebut

Bukalah tab baru pada browser Anda. Masukkan alamat yang telah Anda copy ke Adress Bar dan tekan Enter. Maka akan muncul kode javascript.

Ketiga :
Simpan Ke Komputer Anda

Pada keadaan menampilkan kode javascript, klik File pada menubar browser Anda. Lalu klik Save As dan tentukan lokasi penyimpanan di komputer Anda.

 Keempat :
Lakukan Host Ulang

Untuk host script Anda bisa menggunakan berbagai layanan gratis. Diantaranya Host Javascript di Google Code dan Host File di Google Site.

Kelima :
Masukkan Alamat Script Pribadi Anda

Setelah Anda host ulang javascript, Anda akan mendapatkan alamat script javascript Anda. Masukkan ke srcipt menggantikan script yang ada pada tutorial, misal:

src="alamat anda"
 
CONTOH JAVASCRIPT

<html>
<head>
<title> Tugas 3 java script </title>
</head>

<body bgcolor="blue">
<script language="JavaScript">

function tekan()
{
var nimstr= (document.fform.nim.value);
var namastr= (document.fform.nama.value);
var jkstr= (document.fform.jk.value);
var agamastr= (document.fform.agama.value);
var statusstr= (document.fform.status.value);
var jurusanstr= (document.fform.jurusan.value);
var komentarstr= (document.fform.komentar.value);
document.fform.onim.value=nimstr;
document.fform.onama.value=namastr;
document.fform.ojk.value=jkstr;
document.fform.oagama.value=agamastr;
document.fform.ostatus.value=statusstr;
document.fform.ojurusan.value=jurusanstr;
document.fform.okomentar.value=komentarstr;
}
</script>


cara membuat XML dan contoh nya

 CARA MEMBUAT XML

Ada banyak cara untuk membuat XML Sitemap Blogger, salahsatu yang paling saya sukai adalah dengan menggunakan XML Sitemap Generator, alasannya karena ini yang terbaik yang dianjurkan oleh Google, Bing, Yahoo, Yandex dan Search Engine lainnya. Sitemap adalah termasuk suatu bentuk pelayanan kepada pengunjung blog dan crawler boot mesin pencari untuk melakukan pencarian konten dan perayapan agar blog cepat di indexs di searh engine, semua blogger / webmaster tau bahwa sitemap juga termasuk SEO (Search Engine Optimization) blog yang sangat penting dilakukan. Maka dari itu, saya sarankan juga untuk Anda membuat navigasi blog dgn blogger sitemap generator ini.

Caranya mudah, Anda tinggal kunjungi situs penyedia layanannya di SINI. Kemudian :

  • Anda cukup isi kolom URL dgn alamat blog, untuk lebih detil silahkan centang parameter pilihan / Optional Parameter.
  • Lalu isi kolom verifikasi dan klik Submit. lihat contoh gambar di bawah.
XML Sitemap Generator
  • Kemudian akan muncul hasilnya berbentuk file xml.
  • Langkah berikutnya adalah mengCopy atau langsung klik Download sitemap.xml di bagian atas hasil generat sitemap blog Anda.
File Sitemap
  •  Download dan Save di folder PC,

Download Sitemap

Sitemap Generator
  • Buat halaman baru dengan judul "Sitemap" di blog Anda. Klik tombol HTML di bag atas kolom posting halaman.
Halaman Sitemap
  • Copy file sitemap.xml dengan cara Ctrl + C.
Copy Sitemap
  • Paste file sitemap.xml yg Anda copy tadi dgn Ctrl + V di kotak posting HTML halaman sitemap.
  • Update, sebelum mempublikasikan halaman sitemap, Anda perlu mengubah semua URL akhiran .de dengan .com
HTML Sitemap
  •  Lalu klik tombol Compose, hasilnya seperti contoh di bawah :
XML Sitemap
  •  Silahkan klik Publikasikan, dan buka halaman sitemap blog, lalu Copy alamat URL nya : http://blogseotest.blogspot.com/p/sitemap.html untuk di pasang di Google sitemap, Bing sitemap, Yandex sitemap bag webmaster tools, atau tampilkan di bag halaman blog bagian footer atau menu.
CONTOH XML
 
<?xml version="1.0" encoding="UTF-8"?>

<Resep nama="roti" waktu_persiapan="5 menit" waktu_masak="3 jam">
  <judul>Roti tawar</judul>
  <bahan jumlah="3" satuan="cangkir">Tepung</bahan>
  <bahan jumlah="0,25" satuan="ons">Ragi</bahan>
  <bahan jumlah="1,5" satuan="cangkir">Air hangat</bahan>
  <bahan jumlah="1" satuan="sendok teh">Garam</bahan>
  <Cara_membuat>
   <langkah>Campur semua bahan dan uleni adonan sampai merata.</langkah>
   <langkah>Tutup dengan kain lembap dan biarkan selama satu jam di ruangan yang hangat.</langkah>
   <langkah>Ulangi lagi, letakkan di loyang dan panggang di oven.</langkah>
   <langkah>Keluarkan, hidangkan</langkah>
  </Cara_membuat>
</Resep>

cara membuat PHP dan contohnya

PHP memiliki struktur dasar yaitu :
<?php
//ini blok tempat kode
?>
Baris pertama merupakan awal blok deklarasi php, baris kedua komentar yang menunjukkan tempat dimana kita bisa menuliskan perintah2 php, dan yang terakhir adalah bagian penutup php. Setiap anda membuat php harus diawali dengan pembuka dan penutup seperti diatas. Berikut contoh kode lengkap untuk menuliskan Selamat Malam dengan php.
<?php
   echo "Selamat Malam";
?>
Setelah anda tulis, sekarang kita simpan. Caranya tekan menu file, kemudian pilih save as. Arahkan direktori tempat menyimpan ke dalam xampp/htdocs. Ketikkan nama file dengan lengkap misal belajar1.php lalu tekan simpan. Beberapa hal yang perlu diperhatikan adalah : ketikkan selalu nama file dengan huruf kecil, pastikan diakhiri dengan .php. Contoh sederhana selesai, sekarang bagaimana menjalankanya.
Jalankan browser, bisa mozilla, chroome atau lainya. Kemudian ketikkan pada address bar http://localhost/belajar1.php
Jika yang muncul tulisan Selamat Malam maka anda sudah berhasil membuat file php.

 CONTOH PHP
 
Perhatikan contoh script di bawah ini!
switch1.php
<?PHP
echo "<html><head><title>Contoh Switch 1</title></head><body>";
echo "<a href=$PHP_SELF?op=link1>ini adalah link1</a><br>";
echo "<a href=$PHP_SELF?op=link2>ini adalah link2</a><br>";
echo "<a href=$PHP_SELF?op=link3>ini adalah link3</a><br><br>";
switch ($op)
{
case "link1" :
c.
Do ... While ...
Sintaks:
DO
{
pernyataan1;
pernyataan2;
}
WHILE(kondisi);
Hampir sama dengan WHILE, namun perbedaannya adalah paling tidak sekali
pernyataan1
,
pernyataan2
, dst akan dijalankan.
Hal ini karena pengecekan
kondisi
berada di akhir, beda halnya dengan WHILE sebelumnya. Pada
WHILE sebelumnya, sebelum masuk perulangan dicek dulu apakah kondisinya
TRUE atau FALSE. Sedangkan pada DO ... WHILE, dikerjakan dulu baru
dicek.
Contoh:
Pernyataan WHILE dari script sebelumnya juga dapat dinyatakan sebagai DO
...
WHILE
loop3.php
<?PHP
echo "<html><head><title>Contoh DO... WHILE</title></head><body>"; $j = 1;
do
{
echo "<font face=verdana size=$j>Teks ini berukuran $j</font><br>"; $j++;
}
while($j<=7); echo "</body></html>";
?>
D.
Modulasi
Modularisasi dalam pemrograman umum dilakukan dan sangat diperlukan untuk
mempermudah debugging dan pengembangan program. Modularisasi berarti
melakukan pembuatan program berdasarkan modul-modul. Modul dapat berupa fungsi
maupun prosedur.
Dengan memiliki modul-modul ini diharapkan pemrogram dapat dengan mudah dan
cepat mengembangkan aplikasi-aplikasi yang dibutuhkan. Setiap kali ada modul
tambahan, pemrogram harus mengumpulkannya dalam suatu library menjadi
semacam koleksi. Sehingga saat dibutuhkan pemrogram cukup menggabung-
gabungkannya saja.
1.
Require
Require adalah suatu bentuk fungsi untuk menggabungkan suatu script PHP atau
teks dari file lain dengan script PHP yang memanggilnya. Script atau file yang
digabung tidak harus berisi script program PHP.
Teknik require cocok untuk membuat template yang memudahkan proses
pengembangan aplikasi dengan menggunakan template. Pemrogram dan desainer
web dapat dengan mudah melakukan kerja tim untuk membangun suatu situs web.
Contoh:
Diinginkan tampilan untuk halaman web yang kita bangun mempunyai konsistensi
pada layout, bahwa ada header dan footer, dan pada bagian tengah ada isinya.
Untuk itu kita dapat membagi untuk bagian header dan footer sebagai file tersendiri.
Setiap halaman yang akan ditampilkan dapat memanggil/menggabungkan header
dan footer ini dengan menggunakan require.
Header.php
<html>
<head><title>Demo Require</title>
</head>
<body>
<h1>Judul</h1>
Ini adalah contoh penggunaan require<BR>
Footer.php
<p>&nbsp;</p>
<hr>
<small>Copyright 2003 - By CV. Benang Ruwet</small>
</body>
</html>
isi.php
<?PHP
Require "header.php";
?>
<hr>
Selamat Datang
<p>
Bagian ini merupakan bagian isi I</p>
<a href=isi2.php>Klik di sini</a>
<?PHP
Require "footer.php";
?>
isi2.php
<?PHP
Require "header.php";
?>
<hr>
Selamat Datang
<p>
Bagian ini merupakan bagian isi II</p>
<a href=isi.php>Klik di sini</a>
<?PHP
Require "footer.php";
?>
2.
Include
Sintak : include(“header.php”);
isi3.php
<?PHP include ("header.php"); ?>
<hr>
Selamat Datang
<p>
Bagian ini merupakan bagian isi III</p>
<a href=isi.php>Klik di sini</a>
<?PHP include ("footer.php");
?>
Lalu enter, maka akan muncul ucapan selamat datang di MySQL monitor.
Setelah muncul, kita tinggal menggunakan bahasa MySQL untuk melakukan
pengelolaan database tersebut.
Sedangkan untuk OpenSUSE cara menjalankan nya sebagai berikut :
Klik START > Applications > System > Terminal Konsole;
Maka akan muncul jendela konsole seperti pada gambar;
Pada konsole ketikkan
simawa:~# mysql -uroot
Lalu tekan enter, maka akan muncul ucapan selamat datang di MySQL monitor
seperti gambar diatas.
Setelah muncul, kita tinggal menggunakan bahasa MySQL untuk melakukan
pengelolaan database tersebut.

cara membuat ASP


 

Berikut ini merupakan langkah dalam membuatnya :
1. Buka Website yang Anda inginkan untuk ditambah dengan user control.
2. Klik kanan pada menu konteks Website dan klik “Add New Item …”. Kemudian akan muncul kotak dialog New Item Tambahkan dengan daftar Visual Studio diinstal template. Pilih “Web User Control” seperti yang ditunjukkan pada gambar di bawah.
web 
user control
3. Klik Add. maka akan menambahkan user control ke dalam website Anda. Anda dapat membuka user control dalam Design View dan mulai menambahkan control.
4. User control ASP.NET terlihat sangat mirip dengan Halaman Web ASP.NET, kecuali bahwa itu disimpan dengan ekstensi ascx. Dan memiliki @Control directive daripada @Page directive. Perhatikan bahwa kontrol Pengguna tidak mengandung html,baik di body maupun elemen form. Direktif kontrol terlihat seperti ini:
<% @ Control Language = “VB” AutoEventWireup = “false” CodeFile = “WebUserControl.ascx.vb” Inherits = “WebUserControl”%>
JaringanHosting.com adalah provider ASP.NET dan Windows hosting No #1 di Indonesia sesuai dengan rekomendasi dari pihak Microsoft. Microsoft memberikan rekomendasi ini berdasarkan pada beberapa persyaratan utama, yaitu: WebMatrix, WebDeploy, Visual Studio 2012, ASP.NET 4.5, ASP.NET MVC 4.0, Silverlight 5 and Visual Studio Lightswitch. Untuk keterangan lanjutan, silahkan klik disini!
5. Ketika telah selesai mengatur page user control, mendaftarkan Web user control ini ke halaman web Anda dengan sederhana seperti menyeret dan menjatuhkan kontrol pengguna dari Solution Explorer ke halaman web yang dibutuhkan dalam tampilan design mode. Visual Studio akan secara otomatis mendaftarkan user control di halaman web dengan menambahkan direktif @Register di halaman web Anda seperti ditunjukkan di bawah.
<% @ Register src = “WebUserControl.ascx” Tagname = “WebUserControl” TagPrefix = “uc1″%>
Atribut tagname adalah nama dari user control dan TagPrefix yang digunakan untuk menentukan namespace yang unik untuk kontrol pengguna. Atribut scr digunakan untuk menentukan path ke user control.
6. Visual Studio juga menambahkan user control ke halaman dengan menambahkan baris kode berikut.

Contoh Program ASP

undefined undefined, undefined by Agus Riyadi
<html>
<head>
<title>percobaan dengan ASP</title>
</head>
<body>
<%
Dim kata
kata= “Selamat Datang di Rumahku”
Response.write (mdp)
%>
<BR>
<%
kata = “Cirebon Kota Berintan”
Response.write (ilkom)
%>
</body>
</html>

BAHASA PEMROGRAMAN WEB & CONTOH HTML


BAHASA PEMROGRAMAN WEB
( HTML, PHP, CSS, JavaScript, CMS, XML )


1. PENDAHULUAN
Pastilah kita pernah mengunjungi suatu situs yang sangat berkesan, misalnya dari
sisi layout dan desainnya atau dari sisi interaktifnya, seperti bhinneka.com, amazon.com,
ebay.com, dan lain-lain. Pastilah kita pernah mengisikan sesuatu pada sebuah situs baik
itu sebuah buku tamu, polling, email dan lain-lain. Lalu kita juga dapat melihat pada
halaman tersebut seperti tanggal saat ini, jam, dan jumlah pengunjung yang telah melihat
situs tersebut.
Sebelum kita mempelajari bahasa – bahasa pemrograman dalam web lebih lanjut,
ada baiknya kita mengerti dahulu cara kerja Internet dalam hal ini konsep client server
dan peer to peer. Kita tidak usah membicarakan bagaimana data berjalan dan sampai
ketujuan dengan melewati berbagai perangkat-perangkat jaringan computer karena tidak
akan habis dibahas dalam satu bab.
Konsep client server adalah koneksi dan komunikasi yang dilakukan dua
computer dimana satu sisi bertindak sebagai klien dan sisi lain sebagai server, server
hanya melayani permintaan klien dan klien mengirimkan atau meminta suatu proses
pada server. Sedangkan peer to peer adalah konsep teknologi dimana antara kedua sisi
tersebut menjadi kabur, satu sisi computer tersebut bisa berupa client dengan meminta
suatu layanan ke server dan sisi lain computer tersebut bisa berupa server dengan
menerima proses permintaan dari client.
Web dibuat dengan suatu bahasa pengkodean HTML, agar dapat interaktif maka
seorang web development membuat suatu pemrograman agar dapat interaksi antara
pengunjung dan situs tersebut, ada banyak bahasa yang dapat digunakan seperti ASP,
PHP, Javascript, Css, XML, CMS dan lain-lain. Contohnya pada saat kita masuk ke situs
tertentu, terdapat hit counter, jam, dan bukutamu, dan halaman polling. Lalu pertanyaan
dasar gimana kita membuat ini, apakah bisa diwujudkan dengan hanya menggunakan
ga_pra_27@yahoo.co.id 1
HTML, atau butuh suatu script lain untuk mewujudkannya. Jawabannya dengan kode
HTML ini bisa diwujudkan dengan sangat sederhana dan terbatas kemampuannya.
2. KONSEP DASAR PEMROGRAMAN WEB
World Wide Web ("WWW", atau singkatnya"Web") adalah suatu ruang
informasi dimana sumber-sumber daya yang berguna di identifikasi oleh pengenal
global yang disebut Uniform Resource Identifier (URI). WWW sering dianggap sama
dengan Internet secara keseluruhan, walaupun sebenarnya ia hanyalah bagian dari
padanya.
Hiperteks dilihat dengan sebuah program bernama browser web yang mengambil
informasi (disebut"dokumen" atau“halaman web") dari server web dan
menampilkannya, biasanya disebuah monitor. Kita lalu dapat mengikuti pranala
disetiap halaman untuk pindah kedokumen lain atau bahkan mengirim informasi
kembali kepada server untuk berinteraksi dengannya. Ini disebut "surfing" atau"
berselancar" dalam bahasa Indonesia. Halaman web biasanya diatur dalam koleksi
material yang berkaitan yang disebut “situsweb".
3. BAHASA PEMROGRAMAN WEB
3.1.HTML ( HyperText Markup Language )
HTML adalah sebuah bahasa markup yang digunakan untuk membuat sebuah
halaman web dan menampilkan berbagai informasi didalam sebuah browser Internet.
Bermula dari sebuah bahasa yang sebelumnya banyak digunakan didunia penerbitan
dan percetakan yang disebut dengan SGML, HTML adalah sebuah standar yang
digunakan secara luas untuk menampilkan halaman web dan HTML kini merupakan
standar Internet yang saat ini dikendalikan oleh World Wide Web Consortium
(W3C).
Versi terakhir dari HTML adalah HTML 4.01, meskipun saat ini telah
berkembang XHTML yang merupakan pengembangan dari HTML. HTML berupa
kode-kode tag yang menginstruksikan browser untuk menghasilkan tampilan sesuai
ga_pra_27@yahoo.co.id 2
dengan yang diinginkan. Sebuah file yang merupakan file HTML dapat dibuka
dengan menggunakan browser web seperti Mozilla Firefox atau Microsoft Internet
Explorer. HTML juga dapat dikenali oleh aplikasi pembuka email ataupun dari PDA
dan program lain yang memiliki kemampuan browser.
3.1.1.Struktur HTML
Secara umum dokumaen web dibagi menjadi dua section (bagian), yaitu
section head dan section body. Sehingga setiap dokumen HTML harus mempunyai
pola dasar lengkap.
Contoh umum HTML :
<html>
<head>
<title>Tugas1</title>
</head>
<body> Tugas1 Bahasa Pemrograman
</body>
</html>
Maka hasilnya akan terlihat seperti berikut :
Keterangan :
html
merupakan tag dasar yang mendefinisikan bahwa dokumen ini adalah
dokumen HTML
ga_pra_27@yahoo.co.id 3
head
merupakan tag berikutnya setelah <html> untuk menuliskan keterangan
tentang dokumen web yang akan ditampilkan
title
merupakan tag didalam head untuk memberikan judul pada caption browser
web serta topik atau judul dari dokumen web yang akan ditampilkan dalam
browser.
body
merupakan section utama dari web. Pada section ini semua isi dokumen yang
akan ditampilkan didalam browser harus dituliskan.
3.1.2.Perintah Dasar HTML
<h1> sampai <h6> : untuk mengubah ukuran teks
<hr> membuat garis horisontal
<i> membuat teks miring
<b> membuat teks tebal
<u> membuat teks begaris bawah
<center> menengahkan teks
<br> memasukan fungsi enter atau ganti baris kebawah
<p> untuk memisahkan paragraf
<font> dan <face> untuk mengubah jenis dan ukuran font
<ul> membuat daftar list
<li> mendefinisikan list dalam tag
<ol> membuat daftar list
ga_pra_27@yahoo.co.id 4
Contoh sederhana dari perintah-perintah dasar HTML :
<html>
<head><title>Contoh sederhana HTML</title>
</head>
<body>
<h1 align=”center”>
<font face=”Times New Roman”>Tugas 1 Bahasa Pemrograman</h1>
</font>
<p><b>Bahasa Pemrograman Berbasis Web</p></b>
<h2>Disusun Oleh :</h2>
<ol>
<li>Galih Pranowo / 06071132</li>
<li>Evi Padmawati / 06071127</li>
</ol>
<h2>Tema yang diambil :</h2>
<ul>
<li>Pemrograman Web</li>
<li>HTML, PHP, JavaScript, Css, dll</li>
</ul>
<p>Tugas 1 adalah sebagai tugas kelompok dari mata kuliah Bahasa
Pemrograman</p>
</body>
</html>
Hasilnya akan terlihat seperti :
ga_pra_27@yahoo.co.id 5
3.2.PHP ( PHP: Hypertext Preprocessor )
PHP adalah sebuah script yang bersifat Server Side yang artinya semua proses
akan dikerjakan disisi server dan hanya hasilnya saja yang akan dikirim ke browser.
PHP pertama kali dibuat oleh Rasmus Lerdorf untuk mengetahui siapa saja yang
telah mengunjungi situsnya.
Penulisan script PHP harus selalu didahului dengan tanda ( <? ) dan diakhiri
dengan tanda ( ?> ). Apabila tanda tersebut tidak ada maka script yang ditulis
dianggap hanya sebagai HTML biasa.
Identifier dalam PHP terdiri dari fungsi, variabel, dan classes. Identifier
memiliki aturan penulisan sebagai berikut :
· Harus dimulai dengan huruf atau under_score (_)
· Tidak boleh menggunakan tanda baca
· Identifier adalah case sensitive, kecuali fungsi-fungsi yang telah disediakan
oleh PHP
ga_pra_27@yahoo.co.id 6
· Variabel diawali dengan tanda dolar ( $ )
· Nama fungsi yang dibuat tidak boleh sama dengan nama fungsi yang telah
tersedia dalam bahasa PHP
3.2.1.Tipe Data PHP
PHP mengenal tiga maca tipe data, yaitu integer, floating point, dan string.
Floating point lebih dikenal dengan double dan selalu dalam bentuk desimal.
Penulisan string diawali dengan tanda petik ganda ( “ ) atau dengan petik tunggal (‘).
Contoh-contoh penulisan tipe data :
Tipe Data Contoh
Integer $jumlah=10;
$nilai=-5;
Double $skor=90.00;
$bunga=12.50;
String $institut=”akprind”;
$jurusan=”ilmu komputer”;
3.2.2.Variabel
Dalam setiap bahasa pemrograman, pasti akan ditemui konsep variable.
Variable adalah sebuah tempat untuk menyimpan data yang nilainya dapat berubahubah.
Tidak seperti bahasa-bahasa pemrograman lain yang mengharuskan kita untuk
mendeklarasikan variable terlebih dahulu, veriabel dalam PHP tidak harus
dideklarasikan sebelum variable tersebut digunakan. Umtuk memberikan nilai
variable digunakan tanda sama dengan (=).
Variable tempat menyimpan data di dalam PHP diawali dengan karakter $
diikuti dengan huruf karakter pertama setelah $, kemudia kombinasi karakter dengan
angka. Tidak boleh ada spasi dan tanda baca dalam penamaannya, kecuali karakter _
(garis bawah, under score).
Contoh nama variable :
$nama_user
$password
ga_pra_27@yahoo.co.id 7
$kota
3.2.3.Konstanta
Konstanta adalah variable yang nilainya tetap. Konstanta hanya diberi nilai
pada awal program dan nilainya tidak pernah berubah selama program berjalan. PHP
telah mendefinisikan beberapa konstanta, misalnya : PHP_VERSION yaitu
konstanta yang telah memberikan informasi tentang versi PHP yang digunakan.
Selain konstanta yang telah disediakan PHP kita dapat membuat konstanta sendiri
dengan standar penulisannya adalah :
Define (“nama konstanta”,”nilai konstanta”);
3.2.4.Operator
Operator adalah symbol yang digunakan untuk memanipulasi data. Operator
dikelompkan dalam empat fungsi yaitu :
a. Operator aritmatika : Operator ini merupakan operator yang berhubungan
dengan fungsi matematika.
b. Operator logika : Operator ini akan membandingkan TRUE, FALSE.
Seperti bahasa C, PHP mendefinisikan FALSE dengan 0 dan TRUE
dengan 1.
c. Operator bitwise : Operator ini digunakan unutk memanipulasi bit-bit dari
nilai data.
d. Operator lain.
3.2.5. Menampilkan Data
Untuk menampilkan data ke dalam standart output dapat menggunakan
perintah print atau echo. Sintaksnya adalah sebagai berikut :
print(data); atau print data;
echo(data; atau echo data;
Data disini bias data steing, numeric ataupun sebuah object. Jika data tersebut adalah
data string maka harus diapit oleh tanda petik (‘) atau double petik (“).
ga_pra_27@yahoo.co.id 8
Contoh umum dari bahasa PHP adalah sebgai berikut :
<html>
<head><title>Tugas 1</title>
</head>
<body>
<?php
print ”Tugas 1 Bahasa Pemrograman”;
?>
<br>
<?php
$a = 10;
print “Isi dari variabel \$a=$a”;
?>
</body>
</html>
3.3. CSS ( Cascading Style Sheets )
Cascading Style Sheets(CSS) adalah suatu teknologi yang digunakan untuk
memperindah halaman website (situs), dengan CSS kita dapat dengan mudah
mengubah keseluruhan warna dan tampilan yang ada disitus kita sekaligus
memformat ulang situs kita.
CSS ini telah distandarkan oleh World Wide Web Consortium (W3C) untuk
digunakan diweb browser.
3.3.1. KeuntunganCSS
ga_pra_27@yahoo.co.id 9
- Dapat di-update dengan cepat dan mudah, karena kita cukup mendefinisikan
sebuah style-sheet global yang berisi aturan-aturan CSS tersebut untuk
diterapakan pada seluruh dokumen-dokumen HTML pada halaman situs kita.
- User yang berbeda dapat mempunyai style-sheet yang berbeda pula.
- Ukuran dan kompleksitas document code dapat diperkecil.
Sebuah style sheet terdiri dari beberapa aturan ( rules ). Masing-masing aturan
terdiri dari satu atau lebih selektor (selector) dan sebuah blok deklarasi ( declaration
block ). Sebuah blok deklarasi terdiri dari beberapa deklarasi yang dipisahkan oleh
titik koma (;). Masing-masing deklarasi terdiri dari property, titik dua (:) dan nilai
(value).
Contoh:
<STYLE TYPE=“text/css”>
I, U { color:red }
B { color:green; text-decoration:underline; font-family:Arial }
</STYLE>
3.3.2. Font Properties
Font Family
Syntax:
font-family: [[<family-name> | <generic-family>],]* [<family-name> | <genericfamily>]
Possible Values:
<family-name>
· Any font family name may be used
<generic-family>
· serif(e.g., Times)
· sans-serif(e.g., Arialor Helvetica)
· cursive(e.g., Zapf-Chancery)
· monospace(e.g., Courier)
ga_pra_27@yahoo.co.id 10
Font Style
Syntax: font-style: <value>
Possible Values: normal | italic| oblique
Font Variant
Syntax: font-variant: <value>
Possible Values: normal | small-caps
Font Weight
Syntax: font-weight: <value>
Possible Values: normal | bold| bolder| lighter | 100 | 200 | 300 | 400 | 500 | 600| 700|
800| 900
Font Size
Syntax:
font-size: <absolute-size> | <relative-size> | <length> | <percentage>
Possible Values:
· <absolute-size>
· xx-small | x-small | small | medium | large | x-large | xx-large
· <relative-size>
· larger | smaller
· <length>
· <percentage>(in relation to parent element)
Font
Syntax:
font: <value>
Possible Values: [ <font-style>|| <font-variant>|| <font-weight>]? <font-size>[/<lineheight>]?
<font-family>
ga_pra_27@yahoo.co.id 11
Contoh:
P { font: italic bold 12pt/14pt Times, serif }
3.3.3. Color & Background Properties
Color
Syntax: color: <color>
Nilai (value) dari color adalah sebuah keyword atau sebuah kode RGB. 16
keyword diambil dari palette Windows VGA : aqua, black, blue, fuchsia, gray,
green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.
Ada empat cara dalam menuliskan warna menggunakan kode RGB:
· #rrggbb(e.g., #00cc00)
· #rgb(e.g., #0c0)
· rgb(x,x,x) dimana x adalah integer antara 0 dan 255 (e.g., rgb(0,204,0))
· rgb(y%,y%,y%) dimana y adalah nomor antara 0.0 dan 100.0 (e.g.,
rgb(0%,80%,0%))
Semua contoh diatas digunakan untuk menuliskan warna yang sama.
Untuk menghindari konflik dengan style sheets pengguna, properti background dan
color sebaiknya ditulis bersamaan.
Background Color
Syntax: background-color: <value>
Possible Values: <color>| transparent
Background
Syntax: background: <value>
Possible Values: <background-color>|| <background-image>|| <backgroundrepeat>||
<background-attachment>|| <background-position>
3.3.4. Text Properties
ga_pra_27@yahoo.co.id 12
Text Alignment
Syntax: text-align: <value>
Possible Values: left | right | center| justify
3.3.5. Box Properties
Bottom Border Width
Syntax: border-bottom-width: <value>
Possible Values: thin | medium | thick | <length>
Width
Syntax: width: <value>
Possible Values: <length>| <percentage>| auto
Height
Syntax: height: <value>
Possible Values: <length>| auto
Border Style
Syntax: border-style: <value>
Possible Values: [ none | dotted | dashed | solid | double | groove | ridge | inset |
outset]{1,4}
3.3.6. Classification Properties
Display
Syntax: display: <value>
Possible Values: block | inline | list-item | none
Properti Display digunakan untuk mendefinisikan sebuah elemen dengan salah satu
dari nilai berikut ini :
· block (a line break before and after the element)
· inline (no line break before andafter the element)
· list-item (same as block except a list-item marker is added)
ga_pra_27@yahoo.co.id 13
· none (no display)
Whitespace
Syntax: white-space: <value>
Possible Values: normal | pre | nowrap
Properti white-space property will determine how spaces within the element are
treated. This property takes one of three values :
· normal(collapses multiple spaces into one)
· pre(does not collapse multiple spaces)
· nowrap(does not allow line wrapping without a <BR>tag)
3.4. JavaScript
JavaScript adalah bahasa scripting yang paling populer di internet dan
bekerja pada banyak browser seperti Internet Explorer, Mozilla, Firefox, Netscape,
Opera. JavaScript digunakan pada Web pages untuk meningkatkan design, validate
forms, detect browsers, create cookies, GUI dsb. Menggunakan sintaks C++/Java.
Apa itu JavaScript ?
· JavaScript dirancang untuk menambah interaktif HTML pages.
· JavaScript adalah bahasa scripting ( bahasa scripting adalah sebuah light
weight programming language).
· JavaScript terdiri dari baris-baris code executable computer.
· JavaScript biasanya embedded secara langsung pada HTML pages.
· JavaScript adalah interpreted language ( artinya bahwa scripts dijalankan
tanpa dikompile terlebih dahulu ).
· Setiap orang dapat menggunakan JavaScript tanpa harus membeli license.
3.4.1. Keunggulan JavaScript
ga_pra_27@yahoo.co.id 14
· JavaScript dapat bereaksi terhadap events
JavaScript dapat di-set untuk menjalankan saat terjadi sesuatu, seperti sebuah
page telah selesai dipanggil atau saat seorang user meng-klik pada HTML
element.
· JavaScript dapat membaca dan menulis HTML elements
JavaScript dapat membaca dan mengubah isi dari HTML element.
· JavaScript dapat digunakan untuk mem-validasi data
JavaScript dapat digunakan untuk mem-validasi form data sebelum disubmitted
keserver, hal ini akan mengamankan server dar ipemrosesan extra.
· JavaScript dapat digunakan untuk mendeteksi browser pengunjung
JavaScript dapat digunakan untuk mendeteksi browser pengunjung dan
memanggil page lain yang secara specifik didesain untuk browser tersebut.
· JavaScript dapat digunakan untuk membuat cookies
JavaScript dapat digunakan untuk menyimpan dan memanggil informasi di
komputer pengunjung.
3.4.2. Sintaks JavaScript
Program JavaScript dituliskan pada file HTML (.html atau.htm)
menggunakan tag <SCRIPT>. Output dari program JavaScript ditampilkan secara
langsung seolah-olah dimasukkan dalam HTML.
Contoh script sederhana dari javasript adalah sebagai berikut :
<HTML>
<HEAD>
<SCRIPT language=“javascript”>
<!--
// Build HTML here
<!--akhirscript -->
</SCRIPT>
</HEAD>
ga_pra_27@yahoo.co.id 15
</HTML>
Contoh program JavaScript :
<html>
<!–-COMP519 js01.html 7.09.2005 -->
<head>
<title>JavaScript Page</title>
</head>
<body>
<script type="text/javascript">
// silly code to demonstrate output
document.write(“<FONT COLOR=‘GREEN'>
Hello world!</FONT>");
document.write("<p>How are <br/>" +
"<i>you</i>?</p>");
</script>
<p>Here is some static text as well.
</p>
</body>
</html>
· document.write menampilkan teks dalam page.
· Teks yang ditampilkan dapat termasuk HTML tags
· tags diterjemahkan oleh browser saat teks ditampilkan
· Seperti pada C++/Java, statement diakhiri dengan ;
· Komentar pada Java Script sama dengan C++/Java
· // awal satu baris komentar
· /*…*/ akhir dari beberapa baris komentar
3.4.3. Tipe Data dan Variabel JavaScript
ga_pra_27@yahoo.co.id 16
JavaScript hanya mempunyai tiga tipe data primitive
String : "foo" 'howdy do' "I said 'hi'." ""
Number: 12 3.14159 1.5E6
Boolean : true false
Inisialisasi seperti pada C++/Java
message = "howdy";
pi = 3.14159;
Nama variable terdiri dari letters, digits, dan underscores : diawali dengan letter.
Nama variables adalah case-sensitive
<html>
<!–-COMP519 js02.html 07.09.2005 -->
<head>
<title>Data Types and Variables</title>
</head>
<body>
<script type="text/javascript">
varx, y;
x= 1024;
y=x;x = "foobar";
document.write("<p>x = " + y + "</p>");
document.write("<p>x = " + x + "</p>");
</script>
</body>
</html>
Mungkin dalam pembahasan JavaScript ini tidak selengkap mungkin, karena
masih banyak sekali pembelajaran untuk mendalami JavaScript untuk kita pelajari
sendiri.
ga_pra_27@yahoo.co.id 17
3.5. CMS ( Content Manajement System )
CMS adalah software yang digunakan untuk membuat, mengubah dan
mempublikasikan content kedalam sebuah website. Fasilitas yang umumnya terdapat
dalam CMS sangat banyak, terutama yang berkaitan dengan publikasi isi website,
pengaturan halaman, pengubahan isi, pencarian dan lain-lain. Sebuah CMS, dapat
berbentuk program yang sederhana, atau dapat juga merupakan suatu program
kompleks yang terdiri dari berbagai modul-modul sesuai dengan fasilitas yang
terdapat didalamnya.
Karena para pengelola atau pemilik website yang tidak mahir dalam
menggunakan kode HTML dapat melakukan pembuatan, pengubahan dan publikasi
content terhadap website-nya sendiri. CMS menyediakan framework manajemen
proses yang dibutuhkan dalam pengembangan website yang menghendaki
pengelolaan yang sering / dalam frekuensi yang tinggi.
3.5.1. Content dan Design
3.5.2. CMS Basic
ga_pra_27@yahoo.co.id 18
Content Provider
Design Template
CMS
3.5.3. CMS Web
3.5.4. Keuntungan CMS
ga_pra_27@yahoo.co.id 19
· Konsistensi design website dapat dijaga.
· Tidak diperlukan keahlian khusus untuk pengelolaan website.
· Content yang dikehendaki dapat dipublikasikan tanpa pengeditan oleh orang
lain.
· Menghemat biaya untuk mempekerjakan web specialist.
· Notifikasi otomatis kepada pemilik website jika ada content yang sudah
kadaluarsa.
· Memungkinkan kerjasama yang baik antar pengelola suatu website.
· Mengurangi kompleksitas dalam pengelolaan informasi ke website.
3.5.5. Kolaborasi Di CMS
1. Department/Division Project Manager
· Bertanggung jawab terhadap website, pemimpin projek, kontak personal
terhadap projek, membuat jadwal pengerjaan dll
2. Content Specialist
· Membuat/mengedit content, reporter, interviewer, dll.
3. Technical Lead/Web Developer
· CMS Administrator
· Database Administrator
· Web Developer / Designer
4. Server/CMS Administrator
· Bertanggungjawabdalaminstall dankonfigurasiCMS (termasukmodule),
patch/update, membuataccount penggunaCMS danhak-hak-nya,
memantauperformance server danCMS.
5. Database Administrator
· Mengeloladanmembuataccount penggunadatabase, backup data,
memantauperformaceserver.
6. Web Developer / Designer
ga_pra_27@yahoo.co.id 20
· Mengelolascripting program CMS, menambahmodule, membuatdesign
template baru.
3.6. XML ( Extensible Markup Language )
Extensible Markup Language (XML) adalah meta-language yang
menerangkan tentang isi dari suatu document (self describing data).
Java = Portable Program
XML = Portable Data
XML tidak menerangkan tag-set atau gramar dari XML itu sendiri. Menggunakan
DTD ( Document Type Definition ) untuk menerangkan data. XML bukan pengganti
HTML.
Mengapa tidak menggunakan HTML, karena HTML tidak memberikan
“informasi” tentang isi dari sebuah halaman page, tampilan tidak bisa diparsing, dan
tidak bisa digunakan kembali. Terbatas hanya untuk melakukan format tampilan
pada web browser.
3.6.1. Aplikasi XML
· Konfigurasi File :
- Arsitektur J2EE
· Media untuk pertukaran data
· B2B transaksi
- Electronics Bussines Order (ebXML)
- Financial Exchange (IFX)
- Messaging Exchange (SOAP)
3.6.2. Element XML
Menggunakan building block yang sama seperti HTML : Element, Attribute dan
Value. Sebuah element mengandung tag pembuka dan tag penutup:
Contoh : <animal>Lion</animal>
<animal class=“mammals”>Lion</animal>,
ga_pra_27@yahoo.co.id 21
Maka : animal adalah element, class adalah attribute dan mammals adalah nilai dari
attribute.
3.6.3. Aturan XML
Dokumen XML harus “well-formed” yang artinya harus memenuhi aturan-aturan
sebagai berikut :
- Harus mempunyai sebuah root element yang berisikan element-element
lainnya.
- Semua elemen harus diakhiri dengan tag penutup, Contoh:
<picturefile=“test.jpg”/>
<name>Lion</name>
- Element tidak boleh overlaping
- XML bersifatcase sensitive
- Untuk nilai harus berada dalam kutip satu (‘) atau kutip dua (“)
- Simbol-simbol special harus dideklarasikan pada DTD
Pendeklarasian file sebagai sebuah file XML :
<?xml version=“1.0”?>
Penulisan komentarpada file xml :
<!--Iniadalahkomentar-->
3.6.4. DTD
DTD berfungsi untuk menjelaskan spesifikasi dan aturan terhadap elementelement
dan atrributes yang harus dimiliki oleh sebuah xml dokument. Kumpulan
dari aturan-aturan tersebut disebut dengan SCHEMA.
SCHEMA tidak wajib dimiliki, tetapi diperlukan untuk memastikan
konsistensi dokumen. Mendefinisikan element pada DTD :
- <!ELEMENT animal (lion)>: element animal hanya boleh memiliki satu
elemenlion.
- <!ELEMENT picture EMPTY>: element picture tidak mempunyai elemen lain.
ga_pra_27@yahoo.co.id 22
- <!ELEMENT animal ANY>: element animal dapat berisikan element lainnya.
Mendefinisikan element yang berisikan text
<!ELEMENT name(#PCDATA)>
Mendefinisikan element yang mempunyai beberapa element
<!ELEMENT animal(name, weight)>
Berdasarkan aturan diatas maka element harus mempunyai element nama dan
weight:
<animal>
<name>lion</name>
<weight>350 pounds</weight>
</animal>
Mendefinisikan element dengan beberapa pilihan element
<!ELEMENT animal ((name, weight) | (picture)>
Berdasarkan aturan diatas maka element animal harus mempunyai elemen name dan
weight atau hanya punya element picture.
Pendefinisian Unit pada element :
<!ELEMENT animal (name+, weight?, picture, subspecies*)
Artinya:
- name harus tampil setidaknya satu kali
- weight dapat tampil sekali atau tidak tampil sama sekali
- picture hanya harus tampil sekali
- subspecies dapat tampil beberapa kali pun atau tidak tampil sama sekali
3.6.5. Attribute
Terkadang penggunaan attribute dapat lebih berarti daripada memecah
element menjadi sub-sub element. Kedua element ini berarti sama :
–<population animal=“lion”>80</population>
–<population><animal>lion</animal><quantity>80</quantity></population>
Attribute harus dideklarasikan juga pada DTD untuk dapat dipergunakan
ga_pra_27@yahoo.co.id 23
–<!ELEMENT population (#PCDATA)>
<!ATTLIST population year CDATA #IMPLIED>
· Mendefinisikan Attribute wajib (Required Attribute) :
<!ELEMENT population (#PCDATA)>
<!ATTLIST population year (2000 | 2001) #REQUIRED>
Berarti: element populasi harus mempunyai attribute year yang bernilai 2000 atau
2001
<population year=“2000”>80</population>
· Mendefinisikan Attribute default (Default Attribute) :
<!ELEMENT population (#PCDATA)>
<!ATTLIST population year CDATA “2000”>
· Mendefinisikan Attribute default (Default Attribute) :
<!ELEMENT population (#PCDATA)>
<!ATTLIST population year CDATA #FIXED “2000”>
Invalid : <population year=“2001”>80</population>
Valid : <population year=“2000”>80</population>
Valid : <population>80</population>
· Mendefinisikan Unique Attribute :
<!ELEMENT animal (name)>
<!ATTLIST animal code ID #REQUIRED>
ga_pra_27@yahoo.co.id 24
4. KESIMPULAN
Web dibuat dengan suatu bahasa pengkodean HTML, agar dapat interaktif maka
seorang web development membuat suatu pemrograman agar dapat interaksi antara
pengunjung dan situs tersebut, ada banyak bahasa yang dapat digunakan seperti ASP,
PHP, Javascript, Css, XML, CMS dan lain-lain. Contohnya pada saat kita masuk ke situs
tertentu, terdapat hit counter, jam, dan bukutamu, dan halaman polling. Lalu pertanyaan
dasar gimana kita membuat ini, apakah bisa diwujudkan dengan hanya menggunakan
HTML, atau butuh suatu script lain untuk mewujudkannya. Jawabannya dengan kode
HTML ini bisa diwujudkan dengan sangat sederhana dan terbatas kemampuannya.
ga_pra_27@yahoo.co.id 25
DAFTAR PUSTAKA
Yahya Kurniawan. “Aplikasi Web DataBase dengan ASP”.
www.microsoft.com/net
www.ilmukomputer.com
elista.akprind.ac.id/staff/catur