Sistem Informasi Berbasis Web Di Panti Asuhan Umar Bin Khattab.

SISTEM INFORMASI BERBASIS WEB

DI PANTI ASUHAN UMAR BIN KHATTAB MUHAMMADIYAH

CABANG LUBUK PAKAM

TUGAS AKHIR

WAY YANTONO SAING

072406052

PROGRAM STUDI D3 ILMU KOMPUTER

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS SUMATERA UTARA

MEDAN

2010

PERSETUJUAN

Judul : SISTEM INFORMASI BERBASIS WEB DI PANTI ASUHAN UMAR BIN KHATTAB

Kategori : TUGAS AKHIR

Nama : WAY YANTONO SAING

Nomor Induk Mahasiswa : 072406052

Programstudi : DIPLOMA III ILMU KOMPUTER Departeman : MATEMATIKA

Fakultas : MATEMATIKA DAN ILMU PENGETAHUAN ALAM (FMIPA) UNIVERSITAS SUMATERA UTARA

Diluluskan di

Medan , Mei 2010

Departemen Matematika FMIPA USU Pembimbing

Dr. Saib Suwilo,M.Sc Drs. Pangeran Sianipar, Ms NIP. 196401091988031004 NIP. 194702081974031001

PERNYATAAN

SISTEM INFORMASI BERBASIS WEB

DI PANTI ASUHAN UMAR BIN KHATTAB MUHAMMADIYAH CABANG LUBUK PAKAM

TUGAS AKHIR

Saya mengakui bahwa Tugas Akhir ini adalah hasil kerja saya sendiri, kecuali beberapa kutipan dan ringkasan yang masing-masing disebutkan sumbernya.

Medan, Mei 2010

Way Yantono Saing 072406052

PENGHARGAAN

Puji dan syukur penulis ucapkan kepada Allah SWT. Karena atas rahmat dan hidayah-Nya, tugas akhir ini dapat diselesaikan dengan baik. Sholawat dan salam senantiasa disampaikan kepada Nabi Muhammad SAW.

Ucapan terima kasih saya sampaikan kepada Bapak Drs. Pangeran Sianipar, Ms. selaku dosen pembimbing yang banyak memberi panduan dan penuh kepercayaan kepada saya unutk menyempurnakan Tugas Akhir ini. Panduan ringkas dan padat serta professional telah diberikan kepada saya agar penulis dapat menyelesaikan tugas ini. Ucapan terima kasih juga diberikan kepada Bapak Dr. Saib Suwilo, MSc, Selaku ketua pelaksana Program D3 Ilmu Komputer FMIPA USU, Bapak Dr. Eddy Marlianto, MSc, selaku Dekan FMIPA USU, semua dosen pada Departemen Matematika FMIPA USU, pegawai di FMIPA USU, rekan-rekan kuliah dan pengurus, pengasuh panti asuhan umar bin khattab, yang telah mengizinkan saya untuk riset di panti asuhan tersebut, teman-teman yang akan selalu saya sayangi dan rindukan yang selalu memberikan dukungan dan semangat kepada saya mulai dari awal sampai akhir dalam pembuatan Tugas Akhir ini. Akhirnya tidak terlupakan kepada Bapak tercinta yang telah menghadap keharibaan Allah SWT. Do’a kami akan selalu menyertaimu, meskipun perjuangan saya tidak dapat ibunda saksikan secara langsung kupersembahkan sepenuh hati Tugas Akhir ini untukmu ibunda tercinta, perjuanganmu luar biasa untuk membesarkan dan menyekolahkan kami. Semoga Allah SWT. Akan membalasnya.

ABSTRAK

Kajian ini bertujuan untuk membangun suatu sistem informasi berbasis web dari suatu panti asuhan yang berada di Lubuk Pakam. Sistem ini dikembangkan menggunakan bahasa pemrograman Macromedia Dreamweaver 8, Apache, PHP, MySQL, Adobe Photoshop CS, dan Browser Mozilla Firefox. Sistem ini bekerja memasukkan dan menyimpan data serta menampilkan info dari panti asuhan tersebut. Sehingga masyarakat luas akan lebih mudah mengetahui informasi yang akan disajikan oleh pihak panti asuhan.

DAFTAR ISI

Halaman

Persetujuan ii

Pernyataan iii

Penghargaan iv

Abstrak v

Daftar Isi vi

Daftar Tabel ix

Daftar Gambar x

BAB I PENDAHULUAN 1

1.1 Latar Belakang 1

1.2 perumusan Masalah 2

1.3 Pembatasan Masalah 3

1.4 Maksud dan Tujuan 3

1.5 Metode Penelitian 4

1.6 Sistematika Penulisan 6

BAB 2 TINJAUAN TEORITIS 8

2.1 Data dan Informasi 8

2.1.1 Pengertian data 8

2.1.2 Pengertian informasi 9

2.2 Sistem dan Sistem Informasi 10

2.2.1 Pengertian sistem 10

2.2.2 Pengertian sistem informasi 12

2.3 Pengertian Komputer 13

2.3.1 Komponen-komponen computer 16

2.4.1 Diagram alir (Flowchart) 21

2.5 Pengertian Singkat Internet 23

2.6 Pengenalan Web 27

2.5.1 Metodologi Pembangunan Situs web 27

2.5.2 Proses Perancangan situs Web 29

2.7 HTML (Hyper Text Markup Language) 30

2.8 PHP 36

2.8.1 Sejarah PHP 36

2.8.2 Kelebihan-Kelebihan PHP 37

2.8.3 Sintaks PHP 39

2.8.4 Koneksi PHP dengan MySQL 40

2.8.5 Hubungan PHP dengan HTML 44

2.8.6 Upload Database MySql 46

2.9 MySQL 46

2.10 Macromedia Dreamwever 50

2.10.1 Workspace dreamweaver 51

2.10.2 HTML dan dreamweaver 55

BAB 3 DESKRIPSI PANTI ASUHAN 57

3.1 Latar Belakang Berdirinya Panti Asuhan 57 3.2 Visi Panti Asuhan Umar Bin Khattab 58 3.3 Misi Panti Asuhan Umar Bin Khattab 58

3.4 Program-program Panti Asuhan 58

3.4.1 Sistem pembinaan 59

3.4.2 Struktur organisasi 60

BAB 4 PERANCANGAN SISTEM 61

4.2 Mendesain Layout/Templete 64

4.3 Mempersiapkan Database server 64

4.4 Membangun Halaman Situs Web 67

4.5 Perancangan Data Flow Diagram (DFD) 70

4.5.1 Flowchart Menu Utama 71

4.6 Design Website 72

4.6.1 Design halaman beranda 72

4.6.2 Design halaman lokasi 73

4.6.3 Design halaman galeri 73

4.6.4 Design halaman kebutuhan 74

4.6.5 Design halaman donatur 74

4.6.6 Design halaman data anak asuh 75 4.6.7 Design halaman ucapan terimakasih 75

4.6.8 Administrator website 78

4.6.9 Pengunjung website 77

BAB 5 IMPLEMENTASI SISTEM 79

5.1 Pengertian Implementasi Sistem 79

5.2 Tujuan Implementasi Sistem 79

5.3 Spesifikasi Sistem 80

5.4 Instalasi Apache, PHP, MySQL 80

5.5 Pengujian Browser 84

5.6 Melakukan Upload dan Database 85

BAB 6 KESIMPULAN DAN SARAN 87

6.1 Kesimpulan 87

6.2 Saran 88

DAFTAR PUSTAKA 89

DAFTAR GAMBAR

Halaman

Gambar 2.1 Workspace dreamweaver 51

Gambar 2.2 Property inspector untuk text 53

Gambar 2.3 Property inspector untuk image 54

Gambar 2.4 Files Panel 54

Gambar 2.5 View Selector 54

Gambar 3.1 Struktur Organisasi 60

Gambar 4.1 Struktur Website 63

Gambar 4.2 Tampilan Dreamweaver 69

Gambar 4.3 Diagram Konteks Website 70

Gambar 4.4 Flowchart Menu Utama 71

Gambar 4.5 Tampilan Halaman Beranda 72

Gambar 4.6 Tampilan Halaman Lokasi 73

Gambar 4.7 Tampilan Halaman Galeri 73

Gambar 4.8 Tampilan Halaman Kenutuhan 74

Gambar 4.9 Tampilan Halaman Donatur 74

Gambar 4.10 Tampilan Halaman Data Anak Asuh 75 Gambar 4.11 Tampilan Halaman Ucapan Terimakasih 75

Gambar 4.12 Tampilan Halaman Administrator 76

DAFTAR TABEL

Halaman

Tabel 2.1 Simbol-simbol Data Flow Diagram 20

Tabel 2.1 Simbol-simbol Flowchart 21

Tabel 2.1 Simbol-simbol Flowchart 21

Tabel 4.1 Admin 65

Tabel 4.2 Ucapan Terimakasih 65

Tabel 4.3 Susunan Pengurus 66

ABSTRAK

Kajian ini bertujuan untuk membangun suatu sistem informasi berbasis web dari suatu panti asuhan yang berada di Lubuk Pakam. Sistem ini dikembangkan menggunakan bahasa pemrograman Macromedia Dreamweaver 8, Apache, PHP, MySQL, Adobe Photoshop CS, dan Browser Mozilla Firefox. Sistem ini bekerja memasukkan dan menyimpan data serta menampilkan info dari panti asuhan tersebut. Sehingga masyarakat luas akan lebih mudah mengetahui informasi yang akan disajikan oleh pihak panti asuhan.

BAB 1

PENDAHULUAN

1.1 Latar Belakang

Perkembangan teknologi informasi yang sangat cepat, mulai dari Internet, jaringan nirkabel (wireless) memberikan manfaat yang luar biasa kepada masyarakat umumnya dan dunia pendidikan khususnya. Hal ini berkaitan dengan pekerjaan-pekerjaan, yang biasanya selalu dilakukan secara manual oleh manusia, akan semakin cepat dan efisien apabila dilakukan dengan sistem komputerisasi. Bahkan dengan kecanggihan teknologi komputer yang semakin berkembang dengan pesat dapat memudahkan pengguna tersebut untuk meningkatkan efisiensi kerja karena pekerjaan yang dilakukan dengan komputer dapat menghemat baik dari segi waktu, ruang, tenaga, biaya dan lain-lain.

Selain itu, hasil komputer juga cukup akurat karena tingkat ketelitiannya yang tinggi sehingga membuat komputer memegang peranan penting dalam kehidupan manusia. Pada saat pertama kali ditemukan, komputer hanya digunakan sebagai alat bantu untuk mempercepat proses hitung-menghitung (Janner Simarmata,2007).

Namun, dengan meningkatnya kebutuhan serta pengetahuan manusia, maka komputer mengalami perkembangan, sehingga fungsinya tidak lagi sebagai alat penghitung saja, akan tetapi komputer juga dapat dimanfaatkan untuk penyimpanan data, menggambar suatu grafik atau gambar, pengeditan dan lain sebagainya.

Sistem informasi berbasis web sangat dibutuhkan suatu yayasan panti asuhan untuk membantu mempromosikan dan menambah donator dari dunia maya. Pada saat sekarang ini dunia maya sangat diminati masyarakat, mulai dari dunia bisnis, instansi pemerintahan hingga dunia pendidikan. Untuk itu penulis mencoba membuat perancangan suatu sistem informasi berbasis web untuk membantu panti asuhan tersebut.

Berdasarkan uraian diatas penulis tertarik untuk menyusun Tugas Akhir dengan Judul ”Sistem Informasi Berbasis Web di Panti Asuhan Umar Bin

Khattab Muhammadiyah Cabang Lubuk Pakam ”.

1.2 Perumusan Masalah

Pembuatan sebuah aplikasi yang baik pada Sistem Informasi berbasis web merupakan suatu kebutuhan yang sangat dibutuhkan oleh suatu yayasan panti asuhan untuk membantu mempromosikan dan memberi informasi kepada masyarakat mengenai kebutuhan ataupun keadaan panti asuhan tersebut.

Menyadari hal tersebut, maka permasalahan yang dihadapi adalah bagaimana menciptakan suatu sistem informasi yang up to date tanpa membutuhkan biaya yang besar dan waktu yang lama, maka dengan menggunakan bantuan komputer untuk membuat sistem informasi berbasis web di Panti Asuhan Umar Bin Khattab Muhammadiyah Cabang Lubuk Pakam.

1.3 Pembatasan Masalah

Dalam melakukan perancangan sistem informasi ini penulis hanya membatasi masalah tentang bagaimana cara mempromosikan dan menambah perhatian masyarakat kepada anak yatim-piatu, fakir miskin dan anak terlantar. Sesuai dengan UUD 1945 pasal 31 ayat 2 yang menyatakan ”Pakir miskin dan anak terlantar dipelihara oleh negara”.

Aplikasi web ini dibangun dibawah sistem informasi Windows XP dengan menggunakan web server Apache, PHP dan MySQL serta dibantu dengan Macromedia Dreamweaver 8 dan Adobe Photoshop CS sebagai editor perancangan dan pembangunan web.

1.4 Maksud dan Tujuan

Maksud penulis merancang web tersebut yaitu membuat suatu sistem informasi yang berfungsi untuk mempromosikan Panti Asuhan tersebut dengan cara yang lebih up to date. Adapun tujuannya yaitu memberikan suatu alternatif kepada pihak yayasan agar dapat mempromosikan dan membantu untuk menambah donatur melalui dunia maya dalam bentuk sistem informasi berbasi web. Dengan adanya sistem informasi tersebut maka akan lebih memotivasi masyarakat untuk lebih memperhatikan anak yatim-piatu, fakir miskin dan anak terlantar. Agar bersedia membatu dengan cara menjadi donatur atau sekedar berinfak untuk tercapainya generasi bangsa yang lebih baik.

1.5 Metode Penelitian

Dalam menyusun tugas akhir ini, penulis melakukan penerapan metode penelitian dalam memperoleh data yang dibutuhkan sehingga penyusunan tugas akhir ini dapat terselesaikan dengan baik. Adapun metode penelitian yang penulis lakukan adalah sebagai berikut:

1. Studi pustaka

Studi pustaka dilakukan dengan cara mempelajari teori-teori literatur dan buku-buku yang berhubungan dengan objek kerja praktik sebagai dasar dalam penelitian ini.

Studi lapangan dilakukan dengan cara meneliti yayasan secara langsung. Hal ini dilakukan untuk mendapatkan data-data dan keterangan-keterangan yang berhubungan dengan masalah yang sedang diteliti.

Studi Lapangan ini meliputi :

a. interview (wawancara)

Yaitu pengumpulan data dengan cara mengadakan wawancara secara langsung kepada kepala Panti Asuhan Umar bin khattab Muhammadiyah cabang Lubuk Pakam.

b. observasi (pengamatan)

Yaitu teknik pengumpulan data secara langsung dilapangan sehingga memperoleh data yang lebih akurat dan keterangan yang cukup jelas.

3. Merancang database

Dalam membuat database tersebut penulis menggunakan MySQL sebagai tempat penyimpanan data yang fleksibel dan dinamis.

4. Merancang desain web

Pada tahap ini penulis mulai mendesain halaman dengan menggunakan software Macromedia Dreamweaver 8 dan Adobe Photoshop CS.

5. Merancang program

Pada tahap ini penulis membuat listing program dari setiap halaman-halaman web.

Pada tahap ini penulis menguji program yang telah dirancang sebelumnya agar dapat mengetahui kesalahan-kesalahan dalam program dan memperbaiki kembali program tersebut, sehingga pada tahap selanjutnya program dapat berjalan dengan sempurna.

1.6 Sistematika Penulisan

Untuk mempermudah penulisan tugas akhir ini , penulis membuat suatu sistematika penulisan yang terdiri dari:

BAB 1 PENDAHULUAN

Pada bab ini diuraikan secara ringkas pembahasan mengenai latar belakang, identifikasi masalah, batasan masalah, maksud dan tujuan, metode penelitian dan sistematika penulisan.

BAB 2 TINJAUAN TORITIS

Pada bab ini penulis menjelaskan teori-teori singkat tentang hal-hal yang berhubungan dengan judul dan bahasa pemrograman yang digunakan penulis.

BAB 3 DESKRIPSI YAYASAN

Bab ini menguraikan tentang profil, sejarah, program kerja asuhan serta visi dan misi panti asuhan umar bin khattab.

BAB 4 PERANCANGAN SISTEM

Pada bab ini penulis membahas tentang gambaran umum pembuatan halaman-halaman web,persiapan database dan algorima web.

BAB 5 IMPLEMENTASI SISTEM

Bab ini berisikan pengertian implementasi sistem, tujuan implementasi sistem, spesifikasi sistem dan instalasi Apache, PHP dan MySQL.

BAB 6 KESIMPULAN DAN SARAN

Bab ini berisikan kesimpulan dan saran dari hasilpenelitian yang bias diproleh.

BAB 2

TINJAUAN TEORITIS

2.1 Data dan Informasi

Data dan informasi merupakan dua hal yang saling berkaitan dan tidak dapat dipisahkan antara yang satu dan lainya.

2.1.1 Pengertian data

Kata data berasal dari bahasa Yunani datum yang berarti fakta, dan di dalam kamus bahasa Inggris ditulis dengan data. Data yang digunakan dalam bahasa Indonesia berasal dari bahasa Inggris tersebut, tetapi harus diingat, data dalam bahasa Inggris sudah bersifat majemuk, karena tidak ada kata datas dalam bahasa Inggris. Sehingga tidaklah tepat bila kita menuliskan kata data yang dimajemukkan, seperti data-data, kumpulan data, dan sejenisnya.

Menurut pandangan bisnis, terdapat pengertian data bisnis sebagai berikut:”Business data is an organizations description oh things (resource) and

events (transaction) that it faces”. Jadi, data dalam hal ini disebut sebagai data bisnis, merupakan deskripsi organisasi tentang sesuatu dan kejadian yang terjadi.

Dari pengertian diatas, dapat diambil kesimpulan bahwa data merupakan bahan baku dari informasi, yang didefenisikan sebagai kelompok teratur symbol-simbol yang mewakili kuantitas, tindakan, benda dan sebagainya. Data terbentuk dari karakter, dapat berupa alphabet angka maupun simbol-simbol khusus.

Data merupakan raw material untuk suatu informasi. Perbedaan informasi dan data sangat relatif tergantung pada nilai gunanya bagi manajemen yang memerlukan. Suatu informasi bagi level manajemen tertentu bisa menjadi data bagi manajemen level di atasnya, atau sebaliknya.

2.1.2 Pengertian informasi

Informasi dapat didefenisikan sebagai hasil dari pengolahan data dalam suatu bentuk yang lebih berguna dan lebih berarti bagi penerimanya yang menggambarkan suatu kejadian-kejadian yang nyata yang digunakan untuk pengambilan keputusan.

Menurut Robert A. Leitch ; sistem informasi adalah suatu sistem di dalam suatu organisasi yang mempertemukan kebutuhan pengolahan transaksi harian,

mendukung operasi, bersifat manajerial dan kegiatan strategi dari suatu organisasi dan menyediakan pihak luar tertentu dengan laporan-laporan yang diperlukan.

2.2 sistem dan Sistem Informasi

2.2.1 Pengertian system

Sistem : kumpulan dari elemen-elemen yang berinteraksi untuk mencapai suatu tujuan tertentu. Sistem juga dapat diartikan sebagai “cara”, seperti sistem pengamatan,sistem penglihatan, sistem pengajaran dan lain sebagainya. Sistem juga dapat diartikan sebagai “susunan” seperti sistem syaraf yang berarti susunan syaraf, sitem jaringan yang berarti susunan jaringan dan lain sebagainya. Jadi sistem adalah suatu kesatuan yang utuh yang terdiri dari beberapa bagian yang saling berhubungan dan berinteraksi untuk mencapai suatu tujuan.

Menurut Jerry Fith Gerald ; sistem adalah suatu jaringan kerja dari prosedur-prosedur yang saling berhubungan, berkumpul bersama-sama untuk melakukan suatu kegiatan atau menyelesaikan suatu sasaran tertentu.

Karakteristik Sistem :

a. Memiliki komponen ;

Suatu sistem terdiri dari sejumlah komponen yang saling berinteraksi, bekerja sama membentuk satu kesatuan. Komponen-komponen sistem dapat berupa suatu subsistem atau bagian-bagian dari sistem. Setiap sistem tidak perduli

betapapun kecilnya, selalu mengandung komponen-komponen atau subsistem-subsistem. Setiap subsistem mempunyai sifat-sifat dari sistem untuk menjalankan suatu fungsi tertentu dan mempengaruhi proses sistem secara keseluruhan. Suatu sistem dapat mempunyai suatu sistem yang lebih besar yang disebut supra sistem, misalnya suatu perusahaan dapat disebut dengan suatu sistem dan industri yang merupakan sistem yang lebih besar dapat disebut dengan supra sistem. Kalau dipandang industri sebagai suatu sistem, maka perusahaan dapat disebut sebagai subsistem. Demikian juga bila perusahaan dipandang sebagai suatu sistem, maka sistem akuntansi adalah subsistemnya.

b. Batas sistem (boundary) ;

Batas sistem merupakan daerah yang membatasi antara suatu sistem dengan sistem yang lainnya atau dengan lingkungan luarnya. Batas sistem ini memungkinkan suatu system dipandang sebagai suatu kesatuan. Batas suatu sistem menunjukkan ruang lingkup (scope) dari sistem tersebut.

c. Lingkungan luar sistem (environment) ;

Adalah apapun di luar batas dari sistem yang mempengaruhi operasi sistem. d. Penghubung sistem (interface) ;

Merupakan media penghubung antara satu subsistem dengan subsistem yang lainnya.

e. Masukan sistem (input) ;

Merupakan energi yang dimasukkan ke dalam sistem. Masukan dapat berupa masukan perawatan (maintenance input) dan masukan sinyal (signal input). Maintenance input adalah energi yang dimasukkan supaya sistem tersebut dapat beroperasi. Signal input adalah energi yang diproses untuk didapatkan

keluaran. Sebagai contoh didalam system komputer, program adalah maintanance input yang digunakan untuk mengoperasikan komputernya dan data adalah signal input untuk diolah menjadi informasi.

f. Keluaran sistem (Output) ;

Merupakan hasil dari energi yang diolah oleh sistem. g. Pengolah sistem (Process) ;

Merupakan bagian yang memproses masukan untuk menjadi keluaran yang diinginkan.

h. Sasaran sistem ;

Kalau sistem tidak mempunyai sasaran, maka operasi sistem tidak akan ada gunanya.

2.2.2 Pengertian sistem informasi

Sistem informasi adalah suatu cara tertentu untuk menediakan informasi yang dibutuhkan oleh organisasi untuk beroperasi dengan cara yang sukses dan untuk organisasi bisnis dengan cara yang menguntungkan. Pada dasarnya sistem informasi merupakan suatu sistem yang dibuat oleh manusia yang terdiri dari komponen-komponen dalam organisasi ntuk mencapai tujuan yaitu menyajikan informasi.

Sistem informasi didalam organisasi yang mempertemukan kebutuhan pengolahan transaksi , mendukung operasi, bersipat manajerial dan kegiatan strategi dari suatu organisasi dan menyediakan pihak luar tertentu dengan laporan yang

diperlukan. Sistem informasi menerima masukan data dan instruksi, mengolah data tersebut sesuai dengan instruksi dan mengeluarkan hasilnya.

Kualitas Informasi ; tergantung dari 3 hal, yaitu informasi harus :

a. Akurat, berarti informasi harus bebas dari kesalahan-kesalahan dan tidak bias atau menyesatkan. Akurat juga berarti informasi harus jelas mencerminkan masudnya.

b. Tetap pada waktunya, berarti informasi yang datang pada penerima tidak boleh terlambat.

c. Relevan, berarti informasi tersebut menpunyai manfaat untuk pemakainya. Relevansi informasi untuk tiap-tiap orang satu dengan yang lainnya berbeda.

Nilai Informasi ditentukan dari dua hal, yaitu manfaat dan biaya mendapatkannya. Suatu informasi dikatakan bernilai bila manfaatnya lebih efektif dibandingkan dengan biaya mendapatkannya. Pengukuran nilai informasi biasanya dihubungkan dengan analisis cost effectiveness atau cost benefit.

2.3 Pengertian Komputer

Kata komputer berasal dari bahasa latin yaitu Computare yang artinya menghitung. Dalam bahasa Inggris disebut to compute. Secara definisi komputer diterjemahkan sebagai sekumpulan alat elektronik yang saling bekerja sama, dapat menerima data (input), mengolah data (proses) dan memberikan informasi (output) serta terkoordinasi dibawah kontrol program yang tersimpan di memorinya.

Cara kerja komputer dapat digambarkan sebagai berikut:

1. Input Device, adalah perangkat-perangkat keras komputer yang berfungsi untuk memasukkan data ke dalam memori komputer, seperti keyboard, mouse, joystick dan lain-lain.

2. Prosesor, adalah perangkat utama komputer yang mengelola seluruh aktifitas komputer itu sendiri. Prosesor terdiri dari dua bagian utama, yaitu ;

a. Control Unit (CU), merupakan komponen utama prosesor yang mengontrol semua perangkat yang terpasang pada komputer, mulai dari input device sampai output device.

b. Arithmetic Logic Unit (ALU), merupakan bagian dari prosesor yang khusus mengolah data aritmatika (menambah, mengurang dll) serta data logika (perbandingan).

3. Memori adalah media penyimpan data pada komputer.

Memori terbagi atas dua macam, yaitu ;

a. Read Only Memory (ROM), yaitu memori yang hanya bisa dibaca saja, tidak dapat dirubah dan dihapus dan sudah diisi oleh pabrik pembuat komputer. Isi ROM diperlukan pada saat komputer dihidupkan. Perintah yang ada pada ROM sebagian akan dipindahkan ke RAM. Perintah yang ada di ROM antara lain adalah perintah untuk membaca sistem operasi dari disk, perintah untuk mencek semua peralatan yang ada di unit sistem dan perintah untuk menampilkan pesan di layar. Isi ROM tidak akan hilang

meskipun tidak ada aliran listrik. Tapi pada saat sekarang ini ROM telah mengalami perkembangan dan banyak macamnya, diantaranya :

1. PROM (Programable ROM), yaitu ROM yang bisa kita program kembali dengan catatan hanya boleh satu kali perubahan setelah itu tidak dapat lagi diprogram.

2. RPROM (Re-Programable ROM), merupakan perkembangan dari versi PROM dimana kita dapat melakukan perubahan berulangkali sesuai dengan yang diinginkan.

3. EPROM (Erasable Program ROM), merupakan ROM yangdapat kita hapus dan program kembali, tapi cara penghapusannya dengan menggunakan sinar ultraviolet.

4. EEPROM (Electrically Erasable Program ROM), perkembangan mutakhir dari ROM dimana kita dapat mengubahdan menghapus program ROM dengan menggunakan teknikelektrik. EEPROM ini merupakan jenis yang paling banyak digunakan saat ini.

5. Random Access Memori (RAM), dari namanya kita dapat artikan bahwa RAM adalah memori yang dapat diakses secara random. RAM berfungsi untuk menyimpan program yang kita olah untuk sementara waktu (power on) jika komputer kita matikan, maka seluruh data yang tersimpan dalam RAM akan hilang. Tujuan dari RAM ini adalah mempercepat pemroses data pada komputer. Agar data yang kita buat tidak dapat hilang pada saat komputer dimatikan, maka diperlukan media penyimpanan eksternal, seperti Disket, Harddisk, flash drive, PCMCIA card dan lain-lain.

4. Output Device, adalah perangkat komputer yang berguna untuk menghasilkan keluaran, apakah itu ke kertas (hardcopy), ke layar monitor (softcopy) atau keluaran berupa suara. Contohnya printer, speaker, plotter, monitor dan banyak yang lainnya. Dari penjelasan diatas dapat kita simpulkan bahwa prinsip kerja komputer tersebut diawali memasukkan data dari perangkat input, lalu data tersebut diolah sedemikian rupa oleh CPU sesuai yang kita inginkan dan data yang telah diolah tadi disimpan dalam memori komputer atau disk. Data yang disimpan dapat kita lihat hasilnya melalui perangkat keluaran.

2.3.1 Komponen-komponen komputer

Komputer terdiri dari tiga komponen utama yang tidak dapat dipisahkan, yaitu ;

1. Hardware (perangkat keras), merupakan peralatan fisik dari komputer yang dapat kita lihat dan rasakan. Hardware ini terdiri dari ;

a. Input/Output Device (I/O Device) terdiri dari perangkat masukan dan keluaran, seperti keyboard dan printer.

b. Storage Device (perangkat penyimpanan) merupakan media untuk menyimpan data seperti disket, harddisk, CD-I, flash drive dll.

c. Monitor /Screen Monitor merupakan sarana untuk menampilkan apa yang kita ketikkan pada papan keyboard setelah diolah oleh prosesor. Monitor disebut juga dengan Visual Display Unit (VDU).

d. Casing Unit adalah tempat dari semua peralatan komputer, baik itu motherboard, card, peripheral lain dan Central Procesing Unit (CPU).Casing unit ini disebut juga dengan System Unit.

e. Central Procesing Unit (CPU) adalah salah satu bagian komputer yang paling penting, karena jenis prosesor menentukan pula jenis komputer. Baik tidaknya suatu komputer, jenis komputer, harga komputer, ditentukan terutama oleh jenis prosesornya.Semakin canggih prosesor komputer, maka kemampuannya akan semakin baik dan biasanya harganya akan semakin mahal.

2. Software (perangkat lunak), merupakan program-program komputer yang berguna untuk menjalankan suatu pekerjaan sesuai dengan yang dikehendaki. Program tersebut ditulis dengan bahasa khusus yang dimengerti oleh komputer. Software terdiri dari beberapa jenis, yaitu ;

a. Sistem Operasi, seperti DOS, Unix, Linux, Novell, OS/2, Windows, Adalah software yang berfungsi untuk mengaktifkan seluruh perangkat yang terpasang pada komputer sehingga masing-masingnya dapat saling berkomunikasi. Tanpa ada sistem operasi maka komputer tak dapat difungsikan sama sekali. b. Program Utility, seperti Norton Utility, Scandisk, PC Tools, dll.Program utility

berfungsi untuk membantu atau mengisikekurangan/kelemahan dari system operasi, misalnya PC Tools dapat melakukan perintah format sebagaimana DOS, tapi PC Tools mampu memberikan keterang dan animasi yang bagus dalam proses pemformatan. File yang telah dihapus oleh DOS tidak dapat dikembalikan lagi tapi dengan program bantu hal ini dapat dilakukan.

c. Program Aplikasi, seperti GL, MYOB, Payroll dll. Merupakan program yang khusus melakukan suatu pekerjaan tertentu, seperti program gaji pada suatu

perusahaan. Maka program ini hanya digunakan oleh bagian keuangan saja tidak dapat digunakan oleh departemen yang lain. Biasanya program aplikasi ini dibuat oleh seorang programmer komputer sesuai dengan permintaan / kebutuhan seseorang / lembaga/ perusahaan guna keperluan interennya.

d. Program Paket, seperti Microsofr office, Adobe fotoshop, macromedia studio, open office dll Adalah program yang disusun sedemikian rupa sehingga dapat digunakan oleh banyak orang dengan berbagai kepentingan. Seperti MS-office, dapat digunakan oleh departemen keuangan untuk membuat nota, atau bagian administrasi untuk membuat surat penawaran dan lain sebagainya.

e. Bahasa Pemrograman, PHP, ASP, dBase, Visual Basic, dll.Merupakan software yang khusus digunakan untuk membuat program komputer, apakah itu sistem operasi, program paket dll. Bahasa pemrograman ini biasanya dibagi atas 3 tingkatan, yaitu ;

1. Low Level Language, bahasa pemrograman generasi pertama,bahasa pemrograman jenis ini sangat sulit dimengerti karena instruksinya menggunakan bahasa mesin. Biasanya yang mengerti hanyalah pembuatnya saja.

2. Midle Level Language, merupakan bahasa pemrograman tingkat menengah dimana penggunaan instruksi sudah mendekati bahasa sehari-hari, walaupun begitu masih sulit untuk di mengerti karena banyak menggunakan singkatansingakatan seperti STO artinya simpan (singkatan dari STORE) dan MOV artinya pindah (singkatan dari MOVE).Yang tergolong kedalam bahasa ini adalah Assembler, ForTran (Formula Translator).

3. High Level Language, merupakan bahasa tingkat tinggi yang mempunyai cirri mudah dimengerti, karena menggunakan bahasa sehari-hari, seperti BASIC, dBase, Visual Basic, VB.Net dll.

3. Brainware (User),

User adalah personel-personel yang terlibat langsung dalam pemakaian komputer,seperti Sistem analis, programmer, operator, user, dll. Pada organisasi yang cukup besar, masalah komputerisasi biasanya ditangani oleh bagian khusus yang dikenal dengan bagian EDP (Electronic Data Processing), atau sering disebut dengan EDP Departemen, yang dikepalai oleh seorang Manager EDP.

2.4 Pengertian Data Flow Diagram (DFD)

Data flow diagram adalah suatu gambaran grafis dari suatu sistem yang dapat menggambarkan arus data di dalam sistem dengan struktur, jelas dan menggunakan sejumlah bentuk-bentuk simbol untuk menggambarkan bagaimana data mengalir melalui suatu proses yang saling berkaitan.

Data Flow Diagram (DFD) terdiri dari 4 (empat) simbol, yaitu :

No

Demarco And Yourdan Symbols

Keterangan

Gane And Sarson Symbols

1 Eksternal Entity (Kesatuan

Luar) merupakan kesatuan

dilingkungan luar sistem yang dapat berupa orang, organisasi atau sistem lainnya yang akan memberikan input atau menerima output.

2 Proses adalah kegiatan atau

kerja yang dilakukan oleh orang, mesin atau computer dari hasil suatu arus data yang masuk kedalam proses untuk dihasilkan arus data yang akan

keluar dari proses………...

3 Arus data (Data Flow) diberi

simbol panah. Arus data ini mengalir diantara proses, yang dapat dilakukan dari atas ke bawah, dari bawah ke atas, dari kiri kekanan dan dari kanan kekiri.

4 Storage (simpanan data)

merupakan tempat penyimpanan dari data yang

dapat berupa file atau database di sistem komput er.

Diagram alir program (program flow chart) adalah suatu diagram yang menggambarkan arus logika dari data yang akan diproses dalam suatu program dari awal sampai akhir. Diagram alir terdiri dari simbol-simbol yang mewakili fungsi-fungsi langkah program dan garis alir (flow line) menunjukkan urutan dari simbol-simbol yang akan dikerjakan.

Tabel 2.2 Simbol-simbol Flowchart

No Simbol Fungsi

1 Simbol titik terminal digunakan untuk

menunjukkan awal dan akhir dari suatu proses.

2 Simbol proses digunakan untuk mewakili suatu proses atau untuk pengolahan aritmatika dan pemindahan data

3 Simbol input-output digunakan untuk mewakili data imput/output dan menunjukkan hasil dari suatu proses.

4 Simbol keputusan (Decision) digunakan untuk suatu penyeleksian (perbandingan logika) kondisi di dalam program.

No. Simbol Fungsi

5 Simbol persiapan (Predefined) digunakan untuk pemberian nilai awal suatu variable atau counter.

6 Simbol penghubung (Connector) digunakan untuk menunjukkan hubungan arus proses yang terputus masih dalam halaman yang sama.

7 Simbol Off-page connector digunakan untuk

menunjukkan hubungan arus proses yang terputus masih dalam halaman yang berbeda

8 Simbol proses terdefenisi digunakan untuk

menunjukkan suatu operasi yang rinciannya ditunjukkan di tempat lain.

9 Simbol display digunakan untuk output yang

ditunjukkan/ditampilkan di monitor.

10 Simbol dokumen yang digunakan untuk

menunjukkan suatu dokumen input dan output baik untuk proses manual, mekanik atau komputer.

11 Simbol garis alir (Flow line) yang digunakan untuk menunjukkan arus dari suatu proses.

12 Simbol storage yang digunakan untuk menyimpan data.

Internet berasal dari kata Interconnection Networking yang mempunyai arti hubungan komputer dengan berbagai tipe yang membentuk sistem jaringan yang mencakup seluruh dunia (jaringan computer global) dengan melalui jalur telekomunikasi seperti telepon, radio, link, satelit dan sebagainya.

ARPAnet (US Defense Advance Reserch Projects Agency) atau departemen pertahanan Amerika pada tahun 1969 membuat jaringan computer yang tersebar untuk menghindarkan terjadinya informasi terpusat, yang apabila perang dapat mudah dihancurkan.

Setelah angkatan Amerika dunia pendidkan pun merasa sangat perlumempelajari dan mengembangkan jaringan computer. Salah satunya adalah Universitas of California at LosAngeles (UCLA). Akhirnya pada tahun 1970 internet banyak digunakan di universitas-universitas di Amerika dan berkembang pesat sampai saat ini. Agar para pengguna computer dengan merek dan tipe berlainan dapat saling berhubungan, maka para ahli membuat sebuah protokol yang sama untuk dipakai di internet. Namanya TCP/IP.

Dalam mengatur integrasi dan komunikasi jaringan komputer ini digunakan protokol yaitu TCP/IP.TCP (Tranmission Control Protocol) bertugas memastikan bahwa semua hubungan bekerja dengan benar, sedangkan IP (Internet Protocol) yang mentansmisikan data dari satu komputer ke komputer lain. TCP/IP secara umum

berfungsi memilih rute terbaik transmisi data, memilih rute alternative jika suatu rute tidak dapat digunakan, mengatur dan mengirimkan paket-paket pengiriman data.

Protokol digunakan untuk menentukan jenis layanan yang akan kita gunakan pada internet, seperti mengakses situs web, mentansfer file ke web server, mencari informasi dan sebagainya.

1. HTTP

HTTP adalah protokol yang digunakan untuk berkomunikasi antara browser dan web server melalui jaringan internet

2. GHOPER

Ghoper merupakan protocol yang sudah lama dan pada saat ini sudah mulai ditinggalkan karena penggunaannya yang tidak sesederhana HTTP. Ghoper digunakan untuk mencari informasi pada web server

3. FTP (File Transfer Protokol)

FTP sering digunakan untuk mentransfer file dari web server melalui jaringan internet, transfer file dapat mengirim file ke web server (upload) atau untuk mengambil data dari web server (download)

4. MAILTO

Protokol MAILTO digunakan untuk mengirim email melalui jaringan komputer. Bentuk format pada protocol ini adalah: host

TCP/IP adalah jenis protocol yang memungkinkan komputer berkomunikasi dengan komputer lain melalui suatu jaringan yang sering disebut dengan internet

Ada banyak fasilitas yang dapat kita manfaatkan dengan menggunakan :

1. Web, adalah fasilitas hypertext untuk menampilkan data berupa teks, gambar, bunyi, animasi dan data multimedia lainnya, yang diantara data tersebut saling berhubungan satu sama lain. Untuk lebih mudah kita menggunakan web browser seperti Internet Explorer Netscafe.

2. E-mail (Elektronik Mail), dengan fasilitas ini kita dapat mengirim dan meenerima surt elektronik (email) dari komputer lain yang terhubung dengan internet dan dapat menyertakan file sebagai lampiran (attactment).

3. Newsgroup, fasilitas inidigunakan untuk mendistribusikan artikel, berita, tanggapan, surat, penawaran ataupun file ke pemakai internet lain yang tergabung dalam kelompok diskusi untuk topic tertentu. Dengan fasilitas ini juga kita dapat melakukan seminar atau konfrensi dngan cara elektronik tanpa terikat ruang, waktu dan tempat

4. FTP, fasilitas ini digunakan untun menghubungkan ke server komputer tertentu dan bila perlu menyalin (download) file yang butuhkan dari server tersebut dan menyimpannya di computer sendiri.

5. Chatting, adalah pembicaraan yang dilakukan kepada orang lain dengan menuliskan kata-kata dan menggunakan komputer yang terhubung ke internet secarabersamaan. Ada banyak program chatting saat ini, diantaranya Yahoo Instant Message (YIM), MSN, IRC dan sebagainya.

Ada beberapa istilah umum yang sering digunakan dan harus diketahui, antara lain:

1. Www (world wide web), merupakan kumpulan web server dari seluruh dunia yang berfungsi menyediakan data dan informasi untuk digunakan bersama. Kita dapat mengumpamakan www sebagai perpustaan besar yang menyediakan berbagai informasi yang diperlukan.

2. Website (situs web), merupakan tempat penyimpanan data dan informasi dengan baerdasarkan topic tertentu. Situs web ini dapat diumpamakan sebagai buku besar yang berisi topik tertentu.

3. Web page (halaman web), merupakan sebuah halaman khusus buku dari situs web tertentu. Diumpamakan halaman web ini sebuah halaman khusus buku dari situs web tertentu.

4. Home page, merupakan sampul halaman yang berisi daftar isi atau menu dari sebuah situs web.

5. URL (Uniform Resource Locator), merupakan konsep nama file standar yang diperluas dengan jaringannya. Nama file ini tidak hanya menunjukkan direktori dan nama filenya, tetapi juga nama mesinnya dalam jaringan. URL dapat disediakan dengan berbagai metoda, bias jadi bukan sekedar file karena URL dapat menunjukkan query-query, dokumen yang disimpan dalam database.

6. Browser, merupakan program aplikasi yang digunakan untuk memudahkan kita dalam melakukan navigasiberbagai data dan informasi pada www.

2.6 Pengenalan Web

2.6.1 Metodologi pembangunan situs web

Situs web merupakan kumpulan halaman web yang berhubungan dan saaling terkait. Elemen dari metodologi pembangunan situs web:

1. Informasi audience

Pengetahuan tentang target audience web sama baiknya dengan pengguna yang actual yang menggunakan informasi, informasi yang diperlukan adalah latar belakang pengguna, minat dan semua perincian yang membantu untuk mempertajam informasi.

2. Proposal

Proposal ini berisi tentang informasi yang jelas tentang alasan dan ruang lingkup dari pembangunan web. Proposal ini harus bersifat dinamik yang artinya memiliki tujuan yang lebih spesifik. Proposal juga harus dikemukakan secara singkat dan jelas yang dapat berperan sebagai petunjuk untuk memperoses pembangunan web dan pengembangannya.

Setelah membuat proposal, dalam mendefinisikan tujuan yang harus disampaikan oleh situs web, sebuah pernyataan yang objektif yang berdasarkan pada proposal digunakan pada paragraph pendahuluan.

4. Informasi Domain

Kumpulan pengetahuan dan informasi tentang subjek dominan yang ada di coper web adalah informasi yang disediakan untuk audience web dan informasi yang dibutuhkan oleh perancang web.

5. Spesifikasi Web

Spesifikasi web adalah gambaran secara rinci dari batasan dan elemen yang akan ditampilkan sebaik batasan-batasan pada tampilan.

6. Tampilan Web

Tampilan web adalah informasi yang akan dikirimkan kepada user. Tampilan tersebut adalah hasil dari rancangan dan proses implementasi pembangunan web. Dalam proses ini, pilihan yang kreatif yang dibuat diantara rancangan dan teknik tampilan untuk mendapatkan spesifikasi web, pertimbangan untuk efisiensi, estetika dan pengenalan web.

Dalam membuat perancangan website, ada beberapa langkah yang perlu kita perhatikan, diantaranya sebagai berikut:

1. Perencanaan

Perencanaan adalah proses memilih dari banyak cara bersaing untuk berkomunikasi sehingga seluruh tujuan web dapat dicapai. Tujuan ini adalah termasuk antisipasi dan memutuskan target untuk audience, tujuan dan sasaran dari informasi.

2. Analisis

Analisis adalah proses mengumpulkan dan membandingkan informasi tentang web dan pengoperasiannya dengan tujuan untuk memperbaiki kualitas web secara keseluruhan.

3. Perancangan

Perencanaan adalah sebuah proses yang dilakukan oleh perancangweb diaktualisasikan. Proses ini menyangkut tujuan web tersebut, audience, objek dan informasi domain.

4. Implementasi

Proses dibangunnya web menggunakan Hyper Text Markup Language (HTML), sehingga proses implementasi mungkin lebih mirip dengan pengembangan software sebab menggunakan sintaks yang spesifik tentang pengkodean struktur web dalam sebuah bahasa formasi dalam file komputer.

Proses pengendalian semua masalah promosi web. Termasuk didalamnya bagaimana web dikenal eksis oleh komunitas online melewati publisitas, baik bisnis atau hubungan informasi lain dengan web yang lain. Promosi menyangkut strategi pemasaran tertentu atau mebuat model bisnis.

6. Inovasi

Proses pengembangan dan perbaikan secara terus menerus. Termasuk mengikuti perkembangan teknologi untuk inovasi-inovasi yang mungkin cocok untuk pengembangan web, sama baiknya dengan kreativitas atau cara yang unik untuk memperbaiki elemen-elemen web, atau mengikat audience dengan keberhasilan web. Inovasi juga menyangkut mencari improvisasi yang bias digunakan secara terus menerus, kualitas web dan harapan pengguna.

2.7 HTML (Hyper Text Markup Language)

Dokumen HTML adalah file teks murni yang dapat dibuat dengan editor teks sembarangan. Dokumen ini dikenal dengan web page. Dokumen HTML merupakan dokumen yang disajikan dalam browser web server. HTML menampilkan informasi dalam bentuk hypertext dan juga mendukung sekumpulan perintah yang digunakan untuk mengatur tampilannya dan informasi tersebut.

Sesuai dengan namanya , bahasa ini menggunakan tanda untuk menendai perintah-perintahnya. Saat ini, banyyak sekali aplikasi yang dapat digunakan untuk

membuat web page secara mudah, seperti Microsft FrontPage, Adobe Golive, Macromedia Dreamweaver, Notepade dan lain sebagainya.

Dokumen HTML disusun oleh elemen-elemen. Elemen merupakan komponen dasar pembentuk dokumen HTML, untuk menandai berbagai elemen dalam dokumen HTML digunakan tag. Tag HTML terdiri dari sebuah kurung sudut kiri (<, tanda lebih kecil), sebuah nama tag dan sebuah sebuah kurung sudut kanan(>, tanda lebih besar dari) tag umumnya berpasangan (misalnya <HI> dengan </HI>), tag yang menjadi pasangan diawali dengan karakter garis miring. Namun ada juga tag yang tidak mengharuskan tagnya ditulis secara berpasangan, seperti <p>, <br>, <hr>, <Li>.

Penulisan penamaan tag bebas, dapat mengunakan hurup besar, kecil ataupun campuran (tidak case sensitive). Tetapi sebagai antisipasi pada standar penulisan tag direkomendasikan untuk menuliskan tag dengan menggunakan huruf kecil.

Secara umum dokumen HTML dibagi menjadi dua section (bagian). Yaitu section head dan section body. Sehingga setiap dokumen HTML harus mempunyai pola dasar seperti berikut:

<html>

<head>

<title>_</title>

</head>

<body>

</body>

</html>

struktur diatas diapit oleh tag <html> dan </html> yang menandai awal dan akhir dari sebuah dokumen yang digunakan untuk menyisipkan informasi mengenai dokumen, misalnya versi, revisi dan sebagainya. Sedangkan bagian yang diapit tag <title> dan </ttitle> menunjukkan judul dari halaman web anda. Bagian kedua yang diapit oleh <body> dan diapit</body> berisi dokumen atau informasi yang hendak disajikan.

Contoh dokumen HTML sebagai berikut:

<html>

<head>

<title> contoh HTML </title>

</head>

<body>

File ini merupakan contih file HTML

</body>

</html>

Ada banyak tag perintah pada HTML, diantaranya sebagai berikut:

a. Headings

Headings digunakan untuk menampilkan nama bab atau bagian tertentu yang dianggap sebagai topic utama. Ada terdapat 6 level heading mulai dari tag

<H1> sampai dengan <H6>. Untuk mengatur posisi heading, kita dapat menggunakan atribut ALIGN pada tag heading. Nilai atribut align bias diisi dengan salah satu nilai right, left, center dan justify.

b. Line break

Line break (BR) adalah tag yang berfungsi untuk membuat baris baru pada dokumen HTML. Tag <BR> ini membuat baris baru tanpa member baris kosong.

c. Horizontal rule

Horizontal rule <HR> adalah tang tunggal yang berfungsi untuk membuat garis horizontal. Tag <HR> akan membuat garis horizontal sepanjang baris kosong.

d. Daftar list

Untuk membuat daftar list, HTML menyediakan empat macam list:

1. Unordored list, biasanya ditandai dengan pemakaian bullet untuk menandai suatu item, menggunekan tag <UL> dan </UL>

2. Ordered list adalah daftar yang tiap bagiannya disertai penomoran menggunakan tag <OL> dan </OL>

3. Defenition list, adalah daftar yang mempunyai keterangan item tertentu, menggunakan tag <DL> dan </DL>

4. Daftar menu, untuk membuat daftar menu bias menggunakan pasangan tag <MENU> dan </MENU>

e. Membuat paragraph

Tag <P> umumnya untuk menandai suatu paragrap baru dengan Formatting style tertentu. Sama halnya dengan tag heading, tag <P> juga memiliki atribut untuk mengatur alignment atau pengatur posisi yaitu right, left, center dan justify.

f. Mengatur huruf

Untuk mengatur huruf pada HTML kita dapat menggunakan tag <FONT> dan penutup </FONT>. Tagini mempunyai beberapa atribut untuk mengatur formatting style berupa ukuran font (font size), jenis font (face=string), warna font (color=#RRGGBB)

g. Menghubungkan ke halaman lain

Untuk menghubungkan halaman web ke halaman lainnya, HTML menyediakan tag <A> dan pemakaian tag ini yang diikuti dengan atribut HREF akan memungkinkan halaman web terhubung dengan halaman lain.

h. Tabel

Tabel adalah sarana untuk menempatkan informasi agar mudah dibaca dan dipahami. Tag <TABEL> memiliki banyak atribut, diantaranya adalah border. Border digunakan untuk mengatur ketebalan garis pembatas antar sel-sel dalam table. Atribut lain yang penting adalah:

1. Width, atribut ini menyatakan lebar table.

3. Cellpading, atribut ini menyatakan jarak antara isi sel dengan pembatas dari sel tersebut.

i. Form

Form digunakan untuk membuat formulir dihalaman web. Form pada halaman web didefenisikan dengan pasangan tag <FORM> dan </FORM>. Tag ini memiliki dua atribut penting, yaitu atribut METHOD untuk menentukan bagaimana form diberlakukan dan atribut ACTION yang sering diisikan URL tempat pemrosesan form selanjutnya.

<FORM [METHOD=’’[POST][GET]’’ ACTION=’’URL]’’>

…...

</FORM>

1. Input box, adalah inputan pada form yang memungkinkan user memasukkan string dalam satu baris

2. Radio button, type ini mengharuskan kita memilih satu antara dua atau lebih.

3. Checked box, input type ini memungkinkan kita untuk memilih satu atau lebih pilihan atau tidak sama sekali.

4. Button, disini dapat menggunakan dua macam tombol pada form HTML, yaitu submite dan reset.

2.8 PHP

2.8.1 Sejarah PHP

PHP adalah singkatan PHP Hypertext Preprocessor yang digunakan sebagai bahasa script server-side dalam pengembangan web yang disisipkan pada dokumen HTML.PHP diciptakan pertama kali oleh Rasmus Lerdorf pada tahun 1994. Awalnya, PHP digunakan untuk mencatat jumlah serta untuk mengetahui siapa saja pengunjung pada homepage-nya. Rasmus adalah salah satu pendukung open source. Oleh karena itu, ia mengeluarkan Personal Home Page Tools versi 1.0 secara gratis kemudian menambahkan kemampuan PHP 1.0 dan meluncurkan PHP 2.0.

Pada tahun 1996, PHP telah banyak digunakan dalam website didunia. Pada tahun 1998, PHP 3.0 diluncurkan. Penyempurnaan terus dilakukan sehingga pada tahun 2000 dikeluarkan PHP 4.0. Tidak terhenti sampai disitu, kemampuan PHP terus ditambah, kini telah hadir PHP 5.0 yang dirilis pada tahun 2004. PHP versi 5.0 hadir untuk menangani kelemahan-kelemahan yang terdapat pada versi sebelumnya.

2.8.2 Kelebihan-Kelebihan PHP

Ketika e-commerce semakin berkembang, situs-situs yang statispun semakin ditinggalkan, karena dianggap sudah tidak memenuhi keinginan pasar, padahal situs tersebut harus tetap dinamis. Pada saat ini bahasa PERL dan CGI sudah jauh

ketinggalan jaman sehingga sebagian besar designer web banyak beralih ke bahasa server-side scripting yang lebih dinamis seperti PHP.

Seluruh aplikasi berbasis web dapat dibuat dengan PHP. Namun kekuatan yang paling utama PHP adalah pada konektivitasnya dengan system database di dalam web. Sistem database yang dapat didukung oleh PHP adalah :

1. Oracle

2. MySQL

3. Sybase

4. PostgreSQL

5. dan lainnya

PHP dapat berjalan di berbagai system operasi seperti windows 98/NT, UNIX/LINUX, solaris maupun macintosh.

PHP merupakan software yang open source yang dapat anda download secara gratis dari situs resminya yaitu http://www.php.net, ataupun dari situs-situs yang menyediakan software tersebut seperti d

Software ini juga dapat berjalan pada web server seperti PWS (Personal Web Server), Apache, IIS, AOLServer, fhttpd, phttpd dan sebagainya. PHP juga merupakan bahasa pemograman yang dapat kita kembangkan sendiri seperti untuk menambah fungsi-fungsi baru.

Keunggulan lainnya dari PHP adalah bahwa PHP juga mendukung komunikasi dengan layanan seperti protocol IMAP, SNMP, NNTP, POP3 dan bahkan HTTP. PHP dapat diinstal sebagai bagian atau modul dari apache web server atau sebagai CGI script yang mandiri. Banyak keuntungan yang dapat diperoleh jika menggunakan PHP sebagai modul dari apache, di antaranya adalah :

1. Tingkat keamanan yang cukup tinggi

2. Waktu eksekusi yang lebih cepat dibandingkan dengan bahasa pemograman web lainnya yang berorientasi pada server-side scripting.

3. Akses ke system database yang lebih fleksibel. seperti MySQL.

Dalam modul ini kita akan mempelajari PHP sebagai server-side scripting yang menggunakan apache sebagai webserver. Versi PHP yang kita gunakan adalah PHP4 untuk Windows.

2.8.3 Sintaks PHP

Sintaks program / script PHP ditulis dalam apitan tanda khusus PHP. Ada empat macam pasangan tag PHP yang dapat digunakan untuk menandai bloc script PHP:

1. <?php…?>

2. <script language=”PHP”>…</script>

3. <?...?>

4. <%...%>

Script yang dibuat oleh PHP disimpan dengan nama file dan diikuti dengan ekstensi *.php, misalnya contoh.php. Bila script PHP diakses dari komputer local maka file PHP disimpan di folder htdoc di web server. Sama halnya dengan penamaan HTML, Pemberian nama pada PHP juga bersipat case sensitive. Script PHP dapat disisipkan dibagian manapun pada scipt HTML dan sebaliknya.

Berikut ini adalah contoh script php:

<html>

<head>

<title> PHP sintaks</title>

</head>

<?php

Print’ ini teks dengan PHP’;

?>

<?body>

2.8.4 Koneksi PHP dengan MySQL

PHP yang digabungkan dengan database akan lebih berkekuatan jika digabungka dengan database yang reliable, gratis dan mudah diinstal. Terdapat dua jenis database yang memenuhi, yaitu MySQL dan PosgreSQL. Kedua jenis database ini dipergunakan karena kinerja yang bagus dan untuk mengaksesnya. PHP mmpunyai fungsi khusus. PHP meempunyai fungsi khusus untuk mengakses SQL ada sekitar 48 fungsi yang didukung PHP dalam mengakses MySQL dalam membuat aplikasinya. Adapun diantaranya sebagai berikut:

1. Mysql_connect()

Fungsi mysql_connect() digunakan untuk membuat/membuka koneksi ke server MySQL. Sintaksnya:

Mysql_connect(“hostname”,”username”,”password”)

2. Mysql_peonect()

Fungsi mysql_peonect() digunakan untuk membuat/membuka koneksi ke server secara persenten. Sintaksnya:

Mysql_peonect()(“hostname”,”username”,”password”)

Fungsi mysql_close() digunakan untuk menutup koneksi ke server MySQL. Sintaksnya:

Mysql_close([link_identifier])

Keterangan: link_identifier merupakan pengenal yang dihasilkan dari suatu fungsi mysql_connect.

4. Mysql_select_db()

Fungsi mysql_select_db() untuk memilih database yang akan digunakan. Sintaksnya:

Mysql_select_db(database_name[link_identifier])

5. Mysql_query()

Perintah untuk melakukan transaksi dalam SQL disebut perintah SQL, sedangkan sebutan untuk mengirimkan perintah SQL disebut query. Query memberi perintah kepada database untuk melakukan apa yang dikehendaki. Sintaksnya:

Mysql_query(query[link_identifier])

6. Mysql_fetch_array()

Fungsi mysql_fetch_array() digunakan untuk mengambil record dari database dan measukkannya ke dalam array assosiatif, array numerik atau keduanya. Sintaksnya:

Mysql_fetch_array(result[int result_type])

Fungsi mysql_fetch_row() digunakan untuk mengambil record dari database dan memasukkannya kedalam array numerik. Kebalikan dari mysql_fetch_assoc() yang hanya menghasilkan array assosiatif. Sintaksnya:

Mysql_fetch_row(resource result)

8. Mysql_fetch_field()

Fungsi mysql_fetch_field() digunakan untuk memperoleh informasi suatu kolom dan berupa suatu objek dengan property objek seperti:

a. Nama-nama kolom

b. Tabel-nama table pemilik kolom

c. Max_length-panjang maksimal kolom

d. Primary_key-bernilai 1 kolom merupakan primary key

e. Dll

Sintaksnya:

Mysql_fetch_field(resource result[int field_offset])

9. Mysql_num_fields()

Fungsi mysql_num_fields() digunakan untuk memperoleh informasi jumlah kolom dari suatu query. Sintaksnya:

Mysql_num_field(resource result)

Fungsi mysql_num_row digunakan untuk memperoleh informasi jumlah record/baris data dari suatu query. Sintaksnya:

Mysql_num_row(resource result)

11.Mysql_create_db()

Fungsi mysql_create_db() digunakan untuk membuat databse dari script PHP sekalipun dapat juga dilakukan dengan CREATE DATBASE pada querynya.

Sintaksnya:

Mysql_create_db(string database_name[resource link identifier])

12.Mysql_list_dbs()

Fungsi mysql_list_dbs digunakan untuk memperoleh daftar database. Sintaksnya:

Mysql_list_dbs([link resource_identifier])

13.Mysql_drop_db()

Fungsi mysql_drop_db digunakan untuk mengahapus database MySQL yang berfungsi sama dengan DROP DATABASE dalam suatu query nya. Sintaksnya:

Mysql_drop_db(string database_name[resource link_identifier])

14.Mysql_list_tables()

Fungsi mysql_list_tables digunakan untuk memperoleh daftar nama tabel dari suatu database MySQL. Sintaksnya:

Mysql_list_tables(string database[resource link_identifier])

2.8.5 Hubungan PHP dengan HTML

Halaman web biasanya disusun dari kode-kode html yang disimpan dalam sebuah file berekstensi .html. File html ini dikirimkan oleh server (atau file) ke browser, kemudian browser menerjemahkan kode-kode tersebut sehingga menghasilkan suatu tampilan yang indah. Lain halnya dengan program php, program ini harus diterjemahkan oleh web-server sehingga menghasilkan kode html yang dikirim ke browser agar dapat ditampilkan. Program ini dapat berdiri sendiri ataupun disisipkan di antara kode html sehingga dapat langsung ditampilkan bersama dengan kode-kode html tersebut. Program php dapat ditambahkan dengan mengapit program tersebut di antara tanda <? dan ?>. Tanda-tanda tersebut biasanya disebut tanda untuk escaping (kabur) dari kode html. File html yang telah dibubuhi program php harus diganti ekstensi-nya menjadi .php3 atau .php.

PHP merupakan bahasa pemograman web yang bersifat server-side HTML=embedded scripting, di mana script-nya menyatu dengan HTML dan berada

si server. Artinya adalah sintaks dan perintah-perintah yang kita berikan akan sepenuhnya dijalankan di server tetapi disertakan HTML biasa. PHP dikenal sebgai bahasa scripting yang menyatu dengan tag HTML, dieksekusi di server dan digunakan untuk membuat halaman web yang dinamis seperti ASP (Active Server Pages) dan JSP (Java Server Pages).

PHP pertama kali dibuat oleh Rasmus Lerdroft, seorang programmer C. Semula PHP digunakannya untuk menghitung jumlah pengunjung di dalam webnya. Kemudian ia mengeluarkan Personal Home Page Tools versi 1.0 secara gratis. Versi ini pertama kali keluar pada tahun 1995. Isinya adalah sekumpulan script PERL yang dibuatnya untuk membuat halaman webnya menjadi dinamis. Kemudian pada tahun 1996 ia mengeluarkan PHP versi 2.0 yang kemampuannya telah dapat mengakses database dan dapat terintegrasi dengan HTML.

Pada tahun 1998 tepatnya pada tanggal 6 Juni 1998 keluarlah PHP versi 3.0 yang dikeluarkan oleh Rasmus sendiri bersama kelompok pengembang softwarenya.. Versi terbaru, yaitu PHP 4.0 keluar pada tanggal 22 Mei 2000 merupakan versi yang lebih lengkap lagi dibandingkan dengan versi sebelumnya. Perubahan yang paling mendasar pada PHP 4.0 adalah terintegrasinya Zend Engine yang dibuat oleh Zend Suraski dan Andi Gutmans yang merupakan penyempurnaan dari PHP scripting engine. Yang lainnya adalah build in HTTP session, tidak lagi menggunakan library tambahan seperti pada PHP. Tujuan dari bahasa scripting ini adalah untuk membuat aplikasi-aplikasi yang dijalankan di atas teknologi web. Dalam hal ini, aplikasi pada umumnya akan memberikan hasil pada web browser, tetapi prosesnya secara keseluruhan dijalankan web server.

2.8.6 Upload Database MySql

Akan lebih mudah bila tempat hosting anda telah menyediakan aplikasi PhpMyadmin untuk mengatur database mysql, biasanya anda akan diminta login dengan user dan password yang telah diberikan.

Sebelumnya apabila anda ingin langsung mengatur database anda secara online bisa saja dengan menggunakan PhpMyadmin tersebut seperti membuat tabel, menghapus table, input data dll. Tapi apabila anda telah memiliki file SQL, maka anda bisa langsung import file tersebut ke dalam MySql server dengan menggunakan menu import sebagai mana yang telah dijelaskan pada bab instalasi phpnuke diatas.

Apabila database dan file web anda telah berada di server, anda bisa mencoba memanggil website anda dari browser. Pastikan untuk setting koneksi ke MySql server, user, password dan database anda sesuai dengan yang telah diberikan.

2.9 MySQL

MySQL adalah sebuah perangkat lunak sistem manajemen basis data(database management system) atau DBMS yang multithread, multiuser, dengan sekilas 6 juta instalasi diseluruh dunia. MySQL AB membuat MySQL tersedia sebagai perangkat lunak gratis dibawah lisensi GNU GPL(General Public Lisensi), tetapi mereka juga menjual dibawah lisensi komersil untuk kasus-kasus dimana penggunanya tidak cocok dengan penggunaan GPU.

Tidak semua dengan proyek-proyeknya Apache, dimana perangkat lunak dikembangkan oleh komunitas umum dan hak cipta oleh kode sumber yang dimiliki oleh penciptanya masing-masing. MySQL dimiliki dan disponsori oleh perusahaan komersil Swedia MySQL AB, dimana pemegang hak cipta hamper oleh semua kode

sumbernya. Kedua orang Swedia dan satu orang Finlandia yang mendirikan MySQL AB adalah David Axmark, Allan Larsson dan Michael “Monty”Widenius.

MySQL adalah Relation Database Management System (RDBMS) yang didistribusikan secara gratis dibawah lisensi GPU. Dimana setiap orang bebas untuk menggunakan MySQL, namun tidak boleh dijadikan produk turunan yang bersipat close source atau komersil. MySQL sebenarnya merupakan produk keturunan salah satu konsep utama dalam database sejak lama, yaitu SQL (Structured Query Language).

SQL adalah sebuah konsep pengoperasian database, terutama untuk pemilihan atau seleksi dan pemasukan data yang memungkinkan data dapat dikerjakan dengan mudah dan secara otomatis. Keandalan suatu system database (DBMS) dapat diketahui dari cara kerja optimizer nya dalam melakukan suatu perintah-perintah SQL, yang dibuat oleh user maupun program-program aplikasinya. Sebagai database server, MySQL dapat dikatakan lebih dari database server lainnya dalam query data. Hal ini terbukti dalam query yang dilakukan single user, kecepatan query MySQL bias sepuluh kali lebih cepat disbanding interbase. Selain itu, MySQL juga memiliki beberapa keistimewaan, antara lain:

1. Possibility

MySQL dapat bekerja stabil pada berbagai sistem operasi seperti Windows, Linux, Mac Os X Server, Free DSB, Solaris, Amiga dan masih banyak lagi

MySQL didstribusikan secara gratis dibawah lisensi GPU sehingga dapat digunakan secara cuma-cuma.

3. Multiuser

Dapat digunakan oleh beberapa user dalam waktu yang bersamaan tanpa ada masalah atau konflik.

4. Perfomance Tuning

MySQL mempunyai kecepatan yang menakjubkan saat menangani query sederhana, dengan kata lain dapat memproses lebih banyak query persatuan waktu.

5. Colomn Types

MySQL memiliki tipe kolom yang sangat kompleks seperti signed/unsigned, integer, float, double, char, text, date, timestamp dan lain-lain.

6. Commond dan Function

MySQL mamiliki operator dan fungsi secara penuh yang mendukung perintah select dan where dalam query

7. Security

MySQL memiliki beberapa lapisan sekuritas seperti level subnetmask, nama user, izin akses user dengan system perizinan yang detail menggunakan password yang terenkripsi.

MySQL mampu menengani database dalam skala besar, dalam jumlah record lebih dari 50 juta dan 60 ributabel serta 5 miliar baris. Selain itu batas indeks yang dapat ditampung mencapai 32 indeks di setiap tabelnya.

9. Conectivity

MySQL dapat melakukan koneksi dengan client menggunakan protocol TCP/IP, UNIX atau Named Pipes(NP).

10. Location

MySQL dapat mendeteksi pesan kesalahan dari client dengan menggunakan lebih dari dua puluh bahasa. Meskipun demikian, bahasa Indonesia belum termasuk didalamnya.

11. Client dan Tools

MySQL dilengkapi dengan berbagai tool yang dapat digunakan untuk administrasi database dan setiap tool nya dilengkapi petunjuk online

12. Interface

MySQL memiliki interface (antar muka) terhadap beberapa program aplikasi dan bahasa pemrograman dengan menggunakan API (Application Programing Interface).

13.Structure Table

MySQL memilki struktur tabel yang lebih fleksibel dalam menangani ALTER TABEL, dibandingkan database lainnya seperti PostgreSQL dan ORACLE.

2.10 Macromedia Dreamweaver

Dreamweaver merupakan tool/alat untuk memanagement web site dan juga sebagai alat yang mudah sekali untuk membuat halaman web. Banyak sekali profesional web developer yang menggunakan Dreamweaver ini untuk membangun dan mengelola suatu web site dengan hasil yang sangat memuaskan. Untuk perkuliahan ini, Dreamweaver digunakan sebagai tool untuk membuat design web dengan HTML dan melakukan coding scripting PHP untuk membuat web yang dinamis. Dalam pengerjaannya. Dreamweaver memberi tiga pilihan yaitu:

1. Design View

Pada tampilan desain dan view biasanya digunakan para desainer untuk merancang sketsa halaman web dan memudahkan kita untuk menuangkan ide tentang layout halaman web yang akan dibuat nantinya.

2. Code View

Tampilan ini biasanyadigunakan perancang tingkat lanjutan yang sudah memahami bahasa HTML. Perancang dapat mengetikkan script-script HTML pada layar yang sudah terbiasa.

3. Split View

4. Tampilan ini berfungsi untuk mengontrol tag HTML dan desain jika ada terjadi kesalahan.

2.10.1 Workspace dreamweaver

Gambar 2.1 Workspace Dreamweaver

Pada gambar 2.9.1 di atas adalah tampilan workspace (area kerja) jika kita memulai develop Web dengan menggunakan Dreamweaver. Bagian-bagian workspace tersebut sebagai berikut :

Insert bar berisi tombol-tombol untuk memasukkan berbagai type “object”, seperti

image, table, dan layer, ke dalam document Dreamweaver. Setiap object merupakan bagian dari code HTML yang memungkinkan Anda untuk melakukan berbagai macam setting atribut object yang Anda masukkan tersebut. Sebagai contoh, Anda bisa memasukkan table HTML dengan cara click tombol Table yang ada di Inser bar. Jika Anda suka cara lain, Anda

pun bisa memasukkan object HTML dengan melalui menu Insert yang ada diatas Insert bar.

Document toolbar berisi tombol-tombol dan menu pop-up yang menyediakan view

Document window (ada 2 view document window, yaitu: Design View dan Code View), berbagai view untuk option, dan beberapa perintah operasional seperti preview kedalam browser (misal browser IE – Internet Explorer).

Document window untuk menampilkan document sekarang ini yang sedang Anda

buat atau sedang Anda kembangkan (editing).

Panel groups merupakan sekumpulan panel group yang secara bersama-sama dalam

satu heading. Untuk melihat lebih detail lagi panel ini (expand), lakukan click tanda panah expander yang ada di kiri group nama panel tersebut. Untuk mejadikan undock panel group ini, lakukan drag tanda gripper yang ada di tepi kiri dari judul group bar ini.

Tag selector memperlihatkan ke Anda relevansi tag HTML sesuai yang Anda pilih

(selected) di Document window. Anda dapat memilih bagian-bagian document lain dengan cara cukup melakukan click di nama tag dalam Tag selector.

Property inspector memperlihatkan ke Anda view dan fasilitas untuk mengubah

berbagai macam property object / text yang sesuai Anda pilih. Setiap type object memiliki property yang berbeda-beda. Property inspector biasanya ditampilkan dibawah design area. Property inspector ini juga dapat dilihat dengan cara melakukan click langsung (short-cut) tombol-tombol yang ada di panel Dreamweaver. Property inspector ini bisa juga muncul saat ada perubahan object yang terpilih di design area. Jika Anda merasa tidak memerlukan property inspector ini, dalam arti Anda tidak ingin terlihat di window Dreamweaver, maka Anda cukup memilih dari menu ‘Window’ di screen Dreamweaver bagian atas dan kemudian pilih uncheck submenu Property yang ada di menu tersebut (atau dengan sort-cut Ctrl+F3).

Saat ada bagian text yang terpilih (selected) di Document window, maka secara otomatis panel akan menampilkan fasilitas untuk setting yang dapat digunakan oleh text terpilih tesebut (seperti yang ditunjukkan gambar dibawah ini), dimana berisi fasilitas : font, text size, color, atribut text seperti bold dan italic, text alignment, dan lain-lain. Selain itu panel juga bisa menampilkan informasi asosiasi hyperlink dalam bagian text yang terpilih tersebut.

Gambar 2.2 Property inspector untuk text

Property inspector untuk image ditunjukkan seperti gambar dibawah ini. Dengan toolbar ini, Anda bisa melakukan setting lebar dan tinggi (width – height) dari suatu image, merubah asosiasi lokasi hyperlink saat image tersebut di-click, dan alignment image terhadap keseluruhan window page saat ditampilkan di browser.

Gambar 2.4 Files panel

Files panel yang terlihat di sebelah kanan ini, memberikan fasilitas bagi Anda agar mampu memanage file-file hasil develop web Anda beserta informasi folder-foldernya, dimana bisa merupakan bagian dalam satu PC di Dreamweaver (localdisk) ataupun merupakan remote server. Files panel juga menyediakan kemampuan untuk mengakses semua file di localdisk, seperti layaknya Window Explorer.

Gambar 2.5 View selector

View selector seperti yang terlihat diatas ini memberikan fasilitas bagi Anda agar Anda bisa mengubah setting view. Ada 3 pilihan dalam view selector ini, yaitu : Code view menampilkan code HTML sebenarnya yang sesuai dengan document page tersebut. Pilihan ini sangat bagus bagi web developer yang lebih familiar dengan coding dengan HTML. Design view memungkinkan Anda untuk create document web page tanpa harus tahu bagaimana code HTML-nya. Sedangkan Code and Design view memungkinkan Anda untuk view code HTML dan view design secara bersamasama dan secara simultan sesuai yang Anda ketik dan yang Anda pilih. Pilihan ini sangat cocok untuk belajar bahasa HTML dengan melihat apa yang Anda lakukan di Design

view dan melihat langsung bagaimana code HTML-nya untuk object yang Anda buat atau Anda ubah tersebut.

2.10.2 HTML dan dreamweaver

Semua document HTML minimal memiliki struktur 4 tag. Tag pertama : <html>, yang gunanya untuk memberitahukan ke browser bahwa yang dibaca oleh browser tersebut merupakan document HTML. Tag kedua, <head> , dimana gunanya untuk memberitahu kepada browser letak header document page tersebut. Header page sebagai tempat untuk informasi document page tersebut, seperti title dari document, jika dilihat memakai browser IE, maka akan muncul di title bar dari window browser IE. Sedangkan tag <title> terletak didalam title document page. Selanjutnya tag yang keempat, <body> , terletak didalam tag HTML sebagai badan (body) dan document. Sebagian besar tag HTML memerlukan open tag dan close tag dalam format <tagname> </tagname>.

<html>

<head>

<title>Belajar HTML</title> </head>

<body>

Body document: Anda bisa memasukkan text, hyperlink dan image.

</body> </html>

BAB 3

DESKRIPSI PANTI ASUHAN

3.1 Latar Belakang Berdirinya Panti Asuhan

Panti asuhan Umar Bin Khattab muhammadiyah cabang lubuk pakam didirikan atas mekanisme pembangunan di lingkungan muhammadiyah didasarkan daftar isian proyek dari pusat ke tingkat I (SUMUT) dari sejak 1992 s.d. 2000 direncanakan membangun 1000 Masjid dan sarana dakwah amal sosial.

Di Sumatera utara telah berdiri 44 bangunan termasuk 4 unit panti ssuahan dan salah satunya adalah panti asuhan Umar Bin Khattab muhammadiyah Lubuk pakam. Pembangunan panti asuhan tersebut mengacu pada kemampuan Pengurus Daerah Muhammadiyah (PDM) Deli serdang.

Pembangunan panti asuhan dimulai 18 November 1994. Biaya dari pusat Rp. 50 Juta, swadaya Rp. 75 juta, dilengkapi Listrik, dan air bersih. Dana operasional sebulan Rp. 5

juta lebih. panti asuhan Umar Bin Khattab diresmikan oleh Bupati Deli Serdang, H. Abdul Hafid pada hari sabtu, 18 September 1999.

3.2 Visi Panti Asuhan Umar Bin Khattab

Panti asuhan Umar Bin Khattab mempunyai visi: menjadi panti asuhan yang islami berkualitas dan memberi arah perubahan kepada anak asuh.

3.3 Misi Panti Asuhan Umar Bin Khattab

Misi panti asuhan Umar Bin Khattab yaitu:

1. Memajukan ilmu pengetahuan, umum dan seni berdasarkan nilai-nilai keislaman dalam rangka membangun masyarakat Indonesia sebagai masyarakat utama.

2. Memberi pendidikan berdasarkan nilai-nilai keislaman untuk mencegah dari perbuatan keji dan munkar yang berdasarkan kepada Al-qur’an dan Hadist.

3.4 Program-program Panti Asuhan

1. Program sosial

Menampung dan menyantuni anak yatim, piatu dan dhu’afa. 2. Program pendidikan

Menyekolahkan anak asuh dari TK, SD, SMP sampai ke jenjang SMA. 3.

Mengaji setiap sore di MDA Aisyiyah dan memberikan pembinaan keagamaan kepada anak asuh agar menjadi anak yang bertaqwa kepada Allah SWT, serta mempunyai akhlaq yang mulia.

Program dakwah

4.

5. Membina keterampilan sesuai bakat dan minat anak asuh,

Program pemerintah

Pada saat ini panti asuhan Umar Bin Khattab menampung dan menyantuni 35 orang anak asuh mukim dan 10 orang non mukim, mereka terdiri dari anak yatim piatu dan dhu’afa. Sejak beroperasinya panti asuhan Umar Bin Khattab cabang muhammadiyah Lubuk pakam masih banyak kekurangan, sehingga para pengurus berusaha untuk mengoptimalkan kinerjanya sehingga bisa meningkatkan pelayanan yang lebih baik terhadap anak asuh.

3.4.1 Sistem pembinaan

a. Pembinaan umum (Pagi)

Seluruh anak asuh besekolah di perguruan muhammadiyah Lubuk pakam dari TK, SD, SMP, dan SMA.

Sore hari belajar di MDA Muhammadiyah Lubuk Pakam

c. Belajar membaca Al-Qur'an

Seluruh anak asuh setiap malam belajar membaca Al-Qur'an selesai sholat Maghrib. Dan menghapal di pagi hari selesai sholat shubuh.

d. Kesehatan

Panti Asuhan bekerjasama dengan PT. ASKES (Persero) Cabang utama Medan.

3.4.2 Struktur organisasi

Gambar: 3.1 Struktur Organisasi

Kepala MUKHLIS

Wakil Kepala ZULKIFLI ZUHRI Bendahara

H. ST. RAZALI

Tata Usaha Drs. SYAIFUL AZWAR

Wakil Tata Usaha MUHAMMAD RIDWAN SORI

Staf Tata Usaha WAY YANTONO

SAING Staf Keuangan

ALI ARMI ALI UMAR C

Urusan Logistik H. WIRMON ABDAS IRWAN, SE

Urusan Umum IRFAN

BGD. SYARIFUDDIN K.

Urusan Asuhan AMIR ALAMSYAH NST.

ZULKIFLI ST

Pengasuh WIRZAL, S.Ag

Ibu Asuh SRI AYUMI

BAB 4

PERANCANGAN SISTEM

4.1 Perencanaan dan Perancangan

Menurut John Burch dan Gary Grudnitski, perancangan system dapat didefenisikan sebagai penggambaran, perencanaan dan pembuatan sketsa atau pengaturan dari beberapa elemen yang terpisah ke dalam satu kesatuan yang utuh dan berfungsi.

Menurut George M. Scott, perancangan desain menentukan bagaimana suatu system akan menyelesaikan apa yang mesti diselesaikan. Tahap ini menyangkut mengkonfigurasi komponen-komponen perangkat lunak dan perangkat keras dari suatu sistem sehingga sehingga setelah instalasi dari sistem akan benar-benar memuaskan rancang bangun yang telah ditetapkan pada akhir tahap analisis sistem.

Sebelum membangun sebuah web terlebih dahulu harus ada perencanaan yang bagus, hal ini dimaksudkan agar pembuatan web tersebut jelas sesuai dengan tujuan yang akan disampaikan.

Ada beberapa hal yang berkaitan dalam membangun sebuah web, yaitu:

a. Situs apa yang ingin dibuat?

b. Siapa saja pengunjung yang diharapkan berkunjung ke situs tersebut? c. Apa saja aktivitas yang dapat mereka lakukan dalam situs?

d. Apa target yang ingin dicapai dari pembuatan situs tersebut?

Dengan menjawab pertanyaan-pertanyaan di atas, akan semakin memperjelas dan mempermudah dalam membangun situs karena dari situlah nantinya akan terbentuk kata kunci untuk membuat dan mengembangkan situs lebih lanjut.

Berkenaan dengan situs yang akan dibangun, maka jawaban untuk pertanyaan di atas sebagai berikut:

a. Situs yang akan dibuat adalah situs panti asuhan, dalam hal ini adalah panti asuhan Umar Bin Khattab, yang menyediakan informasi-informasi mengenai panti asuhan tersebut.

b. Pengunjungnya adalah masyarakat, anak asuh dan alumni panti asuhan.

c. Aktivitas yang akan dijumpai dalam situs tersebut adalah pengunjung dapat mengetahui informasi mengenai sejarah, keadaan, dan jumlah anak asuh. d. Target yang akan dicapai dari situs tersebut adalah pengunjung mendapatkan

informasi tentang keadaan panti asuhan tersebut.

Kemudian langkah selanjutnya adalah membuat outline atau garis besar dari situs tersebut. Salah satu cara yang dapat digunakan adalah dengan membuat aliran informasi atau flowchart (bagan alir) situs tersebut. Flowchart merupakan gambaran

yang menampilkan struktur, hirarki isi halaman per halaman, biasanya terbentuk pohon yang bercabang-cabang.

Dengan adanya flowchart, akan sangat membantu untuk memvisualisasikan isi dari setiap halaman dan link atau navigasi antara halaman-halaman tersebut. Disamping itu juga dapat mempermudah dalam mengatur kode dan file HTML nya, terutama link untuk navigasi penjelajahan keseluruh halaman web. Secara sederhana flowchart dalam membangun situs ini dapat dilihat pada gambar dibawah ini:

Gambar 4.1 Struktur Website

Pada gambar 4.1. Strukturnya masih sangat sederhana karena disetiap cabang menu masih terdapat cabang-cabang yang bergantung pada banyaknya halaman yang dibuat.

Pada kasus pembuatan siklus dalam skala besar , seperti situs berita atau portal yang memuat sampai ribuan berita atau artikel. Maka tidak mungkin lagi untuk

Beranda Lokasi Galeri Kebutuhan donatur

Sejarah

Identitas

Struktur organisasi

Data Anak Asuh _{Ucapan Terimakasih}

Admin Edit ucapan terimakasih

Index

Edit Data Pengurus Edit Data Anak Asuh

membuat situs secara statis karena flowchartnya akan mempunyai cabang-cabang yang sangat banyak. Dengan demikian, PHP membangun situs menjadi dinamis, dimana pada suatu halaman akan dipakai oleh ribuan artikel yang ditampilkan sesuai dengan permintaan user.

4.2 Mendesain Layout/Templete

Salah satu faktor agar situs diminati para pengunjung adalah desain layout dibentuk oleh gambar-gambar dan teks-teks yag menarik. Adapaun langkah-langkah umum yang penulis lakukan dalam mendesain layout adalah sebagai berikut:

a. Membuat layout yang menggambarkan panti asuhan yang akan dipublikasikan dengan menarik.

b. Memadukan warna yang sesuai dengan banner web sehingga tidak terjadi tabrakan warna atau menimbulkan warna yang mencolok.

c. Memperindah tampilan web dengan photoshop dan macromedia.

d. Menambahkan aneka gambar menarik pada beberapa halaman web, seperti pada saat mengklik menu galeri.

4.3 Mempersiapkan Database Server

Pada tahap ini dipersiapkan tempat untuk menampung data server, data tersebut nantinya akan diproses oleh program yang kita buat pada tahap pemrograman, baik

penambahan, penghapusan, pengubahan dan penampilan isi database ke halaman web. Database terdiri atas tabel-tabel yang dibuat dengan menggunakan program MySQL.

Adapun database yang dibuat oleh penulis adalah database panti asuhan Umar Bin Khattab dengan tabel sebagai berikut:

Tabel 4.1 Tabel Admin

Field Jenis

Id Int (4)

Userid Varchar (40) Password Varchar (40)

Tabel 4.2 Tabel Ucapan Terimakasih

Id Int (4)

Nama Varchar (60) Alamat Vachar (60)

Tabel 4.3 Tabel Susun Pengurus

Id Int (4)

Kepala Vachar (60) Wakil Kepala Vachar (60) Bendahara Vachar (60) Tata Usaha Vachar (60) Wakil Tata Usaha Vachar (60) Staf Tata Usaha Vachar (60) Urusan Logistik Vachar (60) Urusan Asuhan Vachar (60) Urusan Umum Vachar (60) Staf Keungan Vachar (60) Pengasuh Vachar (60) Ibu Asuh Vachar (60)

Tabel 4.4 Tabel Data_Anak Asuh

Field Jenis

Id Int (4)

Nomor Induk Varchar (20)

Sambungan Tabel 4.4

Field Jenis

Tanggal Lahir Date

Jenis Kelamin Varchar (20)

Asal Daerah Varchar (60)

Status Varchar (20)

Tahun Masuk Varchar (10)

Tahun Keluar Varchar (10)

Pendidikan Awal Varchar (20)

Pendidikan Akhir Varchar (20)

Penyaluran Varchar (100)

Keteranagan Varchar (100)

4.4 Membangun Halaman Situs

a. Halaman Administrator, merupakan halaman-halaman yang hanya bisa dibuka oleh admin saja, dimana admin mempunyai tugas untuk menambah, mengubah, menghapus seluruh data yang ada.

b. Halaman Beranda, merupakan halaman yang menjelaskan sejarah berdirinya panti asuhan dan program-program kerja yang dilaksanakan oleh panti asuhan.

c. Halaman Lokasi, adalah halaman yang berisi tentang lokasi dan alamat lengkap.panti asuhan,

d. Halaman Galeri, adalah halaman yang berisikan photo-photo anak asuh dan para penyumbang dan simpatisan

e. Halaman Kebutuhan, adalah halaman yang memberikan penjelasan mengenai kebutuhan panti asuhan.

f. Halaman Donatur, adalah halaman yang berisikan mengenai cara-cara menjadi seorang donator panti asuhan.

g. Halaman Ucapan terimakasih, adalah halaman yang berisikan ucapan terima kasih kepada para donatur yang telah member sumbangan ataupun bantuan.

h. Halaman Data Anak Asuh, adalah halaman yang berisikan mengenai data alumni, anak asuh dari awal berdirinya panti asuhan.

Tahap-tahap yang dilakukan dalam membangun halaman situs adalah sebagai berikut:

1. Membuka software Macromedia Dreamweaver 8 sebagai software pengatur letak layout dan penulisan-penulisan skrip-skrip PHP dalam membangun

halaman tampilan yang dapat dilihat seperti gambar berikut:

Gambar 4.2 Tampilan Dreamweaver

2. Mengatur letak layout dengan memanfaatkan tool dan perintah yang terdapat pada Macromedia Dreamweaver yaitu dengan meletakkan link-link grafik, animasi dan modul lainnya ditempat yang telah disediakan.

3. Menulis dan meletakkan skrip-skrip PHP dan HTML yang diperlukan pada tempat yang sesuai yang dikerjakan pada jendela code, split atau design pada Macromedia Dreamweaver.

d. Rename file php.ini-dist menjadi php.ini. e. Masuk ke dalam file php.ini

f. Ubahlah register _global menjadi on dan hilangkan tanda ; pada extention=php_mysql.dll

g. Jangan buka C:\PHP\ext cari file php_mysql.dll copy dan paste ke C:\PHP, ini adalah file extention mysql agar terkonfigurasi dengan PHP dan Apache.

h. Oke, sekarang restart Apache untuk menguji apakah PHP sudah berjalan sebagai module. Bila tidak ada pesan error apapun, berarti PHP sudah diinstall dengan benar sebagai modul Apache. Coba cek lagi Apache Service Monitor, di Apache/2.0.48 (Win32)PHP/5.x.x

3. Instalasi MySQL 5

Cara instalasi MySQL 5 adalah:

a. Jalankan file mysql-essential-5.0.15-win32.msi, ikuti terus langkah yang ada (next).

b. Isikan username dan password untuk root user (user dengan akses tertinggi) sesuka hati anda.

4. Pemeriksaaan terakhir

a. Buat file C:\Program Files\Apache Group\apache2\htdocs\phpinfo.php. atau di dokumen Root yang telah kita buat tadi. Isikan dengan:

<?php

Phpinfo(); ?>

b. Buka browser, akses

Cara instalasi phpMyAdmin adalah dengan user dan passwordnya akan langsung diakses dari database MySQL; deserver. Sesuaikan user dan password MySQL yang telah terinstall. Jalankan phpMyadmin dari browser:

5.5Pengujian Browser

Setelah menginstall apache2triad, maka aplikasi web telah dapat diujikan dikomput er lokal.

Adapun caranya sebagai berikut:

a. Letakkan file-file yang mebangun web tadi kedalam suatu folder kemudian diletakkan di dalam folder htdocs.

b. Buka browser internet explorer

c. Pada kotak URL, ketikkan

d. Enter pada keyboard maka akan terlihat tampilan sebagai berikut:

5.6Melakukan Upload dan database

Upload adalah proses mentransfer file-file situs yang telah dibuat ke suatu server di internet, dengan tujuan agar situs tersebut dapat diakses oleh semua orang di seluruh dunia yang terhubung internet.

Tempat melakukan file-file situs internet namanya server hosting atau web hosting. Ada dua jenis web hosting, yaitu gratis dan web hosting yang berbayar. Maksudnya ada yang merelakan server hostingnya digunakan oleh siapapun secara gratis, dengan ketentuan server host akan memasang iklan / banner di situs pelanggan dana nama alamat dari situspun harus menyertakan nama situs server host, misalnya, sedangkan bila membeli domain dan hosting, nama alamat situs (URL) dapat diberikan sesuai dengan keinginan dan tanpa dibumbui dengan iklan serta dilengkapi dengan fasilitas lainnya yang memudahkan dalam melakukan manajemen situs.

BAB 6

KESIMPULAN DAN SARAN

6.1 Kesimpulan

Berdasarkan pemaparan dan keterangan dari bab-bab sebelumnya penulis dapat mengambil beberapa kesimpulan sebagai berikut :

1. Dalam pembuatan website ini ada beberapa tahapan yang dilakukan penulis yaitu tahap perencanaan, tahap perancangan diagram alir (flowchart), merancang dan mempersiapkan database server, dan tahap implementasi sistem.

2. Website ini dibuat dengan menggunakan bahasa pemograman PHP sebagai bahasa

pemogramannya, MySQL sebaga database servernya dan apache sebagai server. 3. Pembuatan website ini dilakukan pada intranet atau komputer lokal tanpa

terkoneksi ke internet. Koneksi internet dibutuhkan pada saat menghosting website dan pengaksesan situs setelah di hosting.

Adapun beberapa saran penulis pada pembuatan website ini adalah :

1. Perlu dilakukan pembaharuan atau update berkala oleh administrator pada website ini guna memberikan informasi yang terbaru.

2. Untuk menarik minat pengunjung, perlu dibuat rancangan layout atau template dengan gambar dan animasi yang menarik.

3. Dalam pembuatan situs, perlu dirancang dengan teliti agar dalam melakukan pembaharuan data tidak terjadi kesalahan.

4. Perlu dilakukan penggandaan (backup) database secara teratur ke dalam media penyimpanan lainnya untuk mencegah hal-hal yang tidak diinginkan seperti data hilang atau rusak

5. Dengan adanya website ini semoga dapat memotivasi masyarakat untuk lebih memperhatikan keadaan panti asuhan Umar bin Khattab Muhammadiyah Lubuk pakam dalam meningkatkan kualitas panti asuhan agar memperoleh sumber daya anak asuh yang berilmu pengetahuannya khususnya dalam bidang agama dan Teknologi Informasi.

DAFTAR PUSTAKA

Basuki, Achmad dan Nana Ramadijanti. 2006. Grafika Komputer. Yogyakarta: Andi.

Laudon, Kenneth C.; Laudon, Jane P. 2007. Sistem Informasi Manajemen. Jakarta: Salemba Empat.

Lenawati, Mei. 2006. Macromedia Dreameaver 8 dengan PHP. Yogyakarta Madcoms dan Penerbit Andi. 2004. Membuat Aplikasi Database Karyawan Online

Berbasis WEB dengan PHP dan MySQL. Yokyakarta: Andi.

Pressman, Roger S. 1997. Rekayasa Perangkat Lunak.Yokyakarta: Andi.

Sutrabi, Tata.2003. Sistem Informasi Manajemen. Yogyakarta:Andi.

Syafii, M. 2005. Membangun Aplikasi Berbasis PHP dan MySQL. Yogyakarta: Andi Wahana, Komputer. 2006. Membuat Website Interaktif dengan Macromedia

Dreamweaver 8. Yogyakarta: Andi.

Diakses tanggal 10 Maret 2010.