i

i

SISTEM INFORMASI WEBSITE PROFIL SEKOLAH

DI SMP NEGERI 1 TARUB

DENGAN MENGGUNAKAN PHP DAN MYSQL

KERJA PRAKTEK

Sebagai Salah Satu Syarat Untuk Mengambil Mata Kuliah

Tugas Akhir Program Studi DIII Teknik Komputer

Oleh :

Nama : Rina Yuli Astuti

NIM : 10040328

PROGRAM STUDI DIII TEKNIK KOMPUTER

POLITEKNIK HARAPAN BERSAMA TEGAL

2013

ii

ii

HALAMAN PENGESAHAN

KERJA PRAKTEK (KP)

SISTEM INFORMASI WEBSITE PROFIL SEKOLAH DI SMP NEGE RI 1

TARUB DENGAN MENGGUNAKAN PHP DAN MYSQL

Sebagai Salah Satu Syarat Untuk Mengambil Mata Kuliah

Tugas Akhir Program Studi DIII Teknik Komputer

Oleh :

Nama : Rina Yuli Astuti

NIM : 10040328

Tegal, Februari 2013

Menyetujui : Pembimbing, Mahasiswa,

Rais, S.Pd Rina Yuli Astuti NIPY. 07.011.083 NIM. 10040328

Mengetahui : Ketua Program Studi DIII Teknik Komputer,

Arfan Haqiqi Sulasmoro, S.Kom NIPY. 02.009.054

iii

iii

MOTTO DAN PERSEMBAHAN

Motto :Motto :Motto :Motto :

• Tak ada makhluk di dunia ini yang SEMPURNA tetapi bukan berarti kita

tidak bisa menjadi yang SEMPURNA

• Pendidikan merupakan perlengkapan yang paling baik untuk di hari tua (

Aristoteles )

• Seribu teman sedikit bagiku , tetapi satu musuh sangatlah banyak bagiku.

• Harga kebaikan manusia adalah diukur menurut apa yang telah

dilaksanakan/diperbuatnya ( Ali Bin Abi Thalib ).

• Berfikirlah hari ini dan buatkanlah hari esok

Persembahan :Persembahan :Persembahan :Persembahan :

1. Ayah dan Ibu yang penulis sayangi dan cintai.

2. Adik – adikku dan keluarga yang ku sayangi

3. Amudin Calon Suamiku yang selalu men-support penulis

4. Bapak Direktur Politeknik Harapan Bersama Tegal.

5. Bapak Rais, S.Pd sebagai dosen pembimbing kerja praktek.

6. Dosen-dosen Politeknik Harapan Bersama Tegal.

7. Teman-teman dan sahabat yang ku sayangi.

iv

iv

KATA PENGANTAR

Puji syukur penulis panjatkan kehadirat Allah SWT, yang telah

melimpahkan segala rahmat, hidayah dan inayah-Nya hingga penulis dapat

menyelesaikan Kerja Praktek yang disusun sebagai laporan Kerja Praktek dengan

judul “SISTEM INFORMASI WEBSITE PROFIL SEKOLAH DI SMP NEGERI

1 TARUB DENGAN MENGGUNAKAN PHP DAN MYSQL”.

Kerja Praktek merupakan suatu kewajiban yang harus dilaksanakan untuk

memenuhi sebagian persyaratan dengan mengambil mata kuliah Tugas Akhir pada

program Studi D-3 Komputer Politeknik Harapan Bersama Tegal. Selama

melaksanakan kerja Praktek ini, banyak pihak yang telah memberikan bantuan

dukungan dan bimbingan.

Pada Kesempatan ini tak lupa penulis mengucapkan terima kasih yang

sebesar-besarnya kepada :

1. Bapak Ir. Moch. Chambali, M.Kom selaku Direktur Politeknik Harapan

Bersama Tegal.

2. Bapak Arfan Haqiqi Sulasmoro, S.Kom selaku Ketua Program Studi DIII

Teknik Komputer Politeknik Harapan Bersama Tegal.

3. Bapak Rais , S. Pd selaku dosen pembimbing laporan Kerja Praktek.

4. Bapak Abdul Khalim, S.Pd Ina selaku Bapak Kepala Sekolah SMP NEGERI

1 TARUB.

5. Ayah dan Ibundaku yang telah memberikan do’a dan semangat hingga

selesainya penulisan laporan ini.

v

v

6. Buat calon suamiku Amudin yang selalu mendukung penulis hingga

terselesainya laporan ini.

7. Seluruh rekan-rekan dan semua pihak yang turut membantu terselesainya

laporan ini.

Selanjutnya, sangat berharap atas kritik dan saran demi kesempurnaan

dan kemajuan di masa yang akan datang. Sebagai akhir kata mudah-mudahan

laporan ini dapat bermanfaat, Amin.

Tegal, Februari 2013

vi

vi

DAFTAR ISI

Halaman

HALAMAN JUDUL ....................................................................................... i

HALAMAN PENGESAHAN ......................................................................... ii

HALAMAN MOTO DAN PERSEMBAHAN .............................................. iii

KATA PENGANTAR .................................................................................... iv

DAFTAR ISI ................................................................................................... vi

DAFTAR GAMBAR ...................................................................................... viii

DAFTAR TABEL ........................................................................................... xi

DAFTAR LAMPIRAN ................................................................................... xii

BAB I. PENDAHULUAN ..........................................................................

1.1. Latar Belakang ........................................................................ 1

1.2. Rumusan Masalah .................................................................. 2

1.3. Batasan Masalah ..................................................................... 3

1.4. Tujuan ..................................................................................... 3

1.5. Manfaat ................................................................................... 4

1.6. Metodologi Penelitian............................................................. 5

1.7. Sistematika Penulisan ............................................................. 8

BAB II. GAMBARAN UMUM ....................................................................

2.1. Sejarah Instansi ....................................................................... 10

2.2. Visi dan Misi Instansi ............................................................ 11

2.3. Struktur Organisasi Instansi ................................................... 11

2.4. Uraian Tugas Instansi ............................................................. 12

2.5. Fasilitas Instansi .................................................................... 17

2.6. Kegiatan Ektrakurikuler ......................................................... 18

2.7. Denah Lokasi Instansi ............................................................ 19

vii

vii

BAB III. LANDASAN TEORI ......................................................................

3.1. Sistem Informasi ..................................................................... 20

3.2. Pengertian Website Profil ....................................................... 25

3.3. Software Pendukung Dalam Perancangan Website................ 27

BAB IV. PERANCANGAN DAN IMPLEMENTASI SISTEM ..................

4.1. Analisa Kebutuhan ................................................................. 78

4.2. Perancangan Sistem ............................................................... 80

4.3. Perancangan Database ............................................................ 86

4.4. Desain Tampilan ..................................................................... 88

4.5. Flowchart ................................................................................ 94

4.6. Desain Website dan Layout .................................................... 109

4.7. Proses Upload ......................................................................... 119

BAB V. PENUTUP ......................................................................................

5.1. Kesimpulan ............................................................................. 124

5.2. Saran ....................................................................................... 125

DAFTAR PUSTAKA ..................................................................................... 126

LAMPIRAN ....................................................................................................

viii

DAFTAR GAMBAR

Halaman

Gambar 2.1 Struktur Organisasi ............................................................. 12

Gambar 2.2 Denah Lokasi ..................................................................... 19

Gambar 3.1 Tampilan Area Kerja Macromedia Dreamweaver ............. 30

Gambar 3.2 Tool Common Insert Bar..................................................... 31

Gambar 3.3 Tool Layout Insert Bar ....................................................... 32

Gambar 3.4 Tool Form Insert Bar ........................................................... 33

Gambar 3.5 Tool Text Insert Bar ........................................................... 35

Gambar 3.6 Tool HTML Insert Bar ........................................................ 37

Gambar 3.7 Tool Aplication Insert Bar ................................................. 37

Gambar 3.8 Tool Document Toolbar ..................................................... 38

Gambar 3.9 Struktur Elemen Table Data .............................................. 42

Gambar 3.10 Struktur Dasar HTML ..................................................... 47

Gambar 3.11 Output File Contoh PHP .................................................. 54

Gambar 3.12 Entitas ............................................................................... 64

Gambar 3.13 Proses...................................... .......................................... 64

Gambar 3.14 Flowchart Sistem Pemesanan Barang .............................. 69

Gambar 3.15 Simbol Flowchart Proses ................................................... 72

Gambar 3.16 Contoh Simbol-simbol Diagram Context ......................... 74

Gambar 3.17 Simbol-simbol Dalam ERD ............................................ 75

Gambar 3.18 Contoh Penggunaan Flowchart Download ........................ 76

Gambar 4.1Context Diagram ... .............................................................. 81

viii

ix

Gambar 4.2 Hirarchi Chart ...... .............................................................. 82

Gambar 4.3 DFD level 0 ......... .............................................................. 83

Gambar 4.4 DFD level 1 ........ .............................................................. 84

Gambar 4.5 ERD ..................... .............................................................. 85

Gambar 4.6 Desain Halaman Index ........................................................ 88

Gambar 4.7 Desain Halaman Login Admin ............................................ 89

Gambar 4.8 Desain Halaman Admin ..................................................... 89

Gambar 4.9 Desain Input Data Pegawai ................................................ 90

Gambar 4.10 Desain Form Input List Pegawai ...................................... 91

Gambar 4.11 Desain Form Cari Pegawai ............................................... 91

Gambar 4.12 Desain Form Download ................................................... 92

Gambar 4.13 Desain Form Input Foto ................................................... 92

Gambar 4.14 Desain Form List Berita ................................................... 93

Gambar 4.15 Desain Form List Foto ..................................................... 93

Gambar 4.16 Flowchart Menu Website ................................................. 94

Gambar 4.17 Flowchart Admin ............................................................. 95

Gambar 4.18 Flowchart Pegawai ........................................................... 96

Gambar 4.19 Flowchart Input Pegawai .................................................. 97

Gambar 4.20 Flowchart Daftar Pegawai ................................................ 98

Gambar 4.21 Flowchart Hapus Pegawai ................................................ 99

Gambar 4.22 Flowchart Cari Pegawai ................................................... 100

Gambar 4.23 Flowchart Berita .............................................................. 101

Gambar 4.24 Flowchart Input Berita ..................................................... 102

ix

x

Gambar 4.25 Flowchart List Berita ........................................................ 103

Gambar 4.26 Flowchart Hapus Berita ..................................................... 104

Gambar 4.27 Flowchart Galery Foto ..................................................... 105

Gambar 4.28 Flowchart Input Foto ........................................................ 106

Gambar 4.29 Flowchart List Foto .......................................................... 107

Gambar 4.30 Flowchart Hapus Foto ....................................................... 108

Gambar 4.31 Perancangan Desain Website ........................................... 109

Gambar 4.32 Tampilan Depan Web ....................................................... 110

Gambar 4.33 Tampilan Visi dan Misi ..................................................... 111

Gambar 4.34 Tampilan Sejarah .............................................................. 112

Gambar 4.35 Tampilan Fasilitas ............................................................ 113

Gambar 4.36 Tampilan Input Pegawai .................................................. 114

Gambar 4.37 Tampilan Input Berita ....................................................... 115

Gambar 4.38 Tampilan Input Foto ......................................................... 116

Gambar 4.39 Tampilan Ubah Password.................................................. 117

Gambar 4.40 Tampilan Logout .............................................................. 118

Gambar 4.41 Tampilan 000webhost ....................................................... 119

Gambar 4.42 Tampilan Sign Up ............................................................ 120

Gambar 4.43 Tampilan FTP account ...................................................... 120

Gambar 4.44 Tampilan DNS.... .............................................................. 121

Gambar 4.45 Tampilan Manage Domain ............................................... 122

Gambar 4.46 Tampilan Manage Domain DNS ...................................... 122

Gambar 4.47 Tampilan DNS ... ............................................................. 123

x

xi

DAFTAR TABEL

Halaman

Tabel 3.1 Fungsi Tool Commont Insert Bar ........................................... 31

Tabel 3.2 Fungsi Tool Layout Insert Bar ................................................ 32

Tabel 3.3 Fungsi Tool Form Insert Bar….. ............................................ 34

Tabel 3.4 Fungsi Tool Text Insert Bar…… ........................................... 35

Tabel 3.5 Fungsi Tool HTML Insert Bar ............................................ 37

Tabel 3.6 Tabel Warna Heksadesimal ............................................ 45

Tabel 3.7 Syntac Dasar PHP……………… ........................................... 54

Tabel 3.8 Tipe Data Numerik Pada MySQL .......................................... 56

Tabel 3.9 Tipe Data String di MySQL…… ........................................... 57

Tabel 3.10 Tipe Data Waktu dalam MySQL ......................................... 57

Tabel 3.11 Keterangan Simbol DAD……. ............................................ 59

Tabel 3.12 Simbol-simbol Data Flow Diagram ..................................... 63

Tabel 3.13 Flowchart Dokumen Perpustakaan……………… ............... 70

Tabel 4.1 Spesifikasi Perangkat Keras…… ........................................... 79

Tabel 4.2 Spesifikasi Perangkat Lunak …… .......................................... 79

Tabel 4.3 Identifikasi……………………. ............................................ 80

Tabel 4.4 Tabel Admin…………………… .......................................... 86

Tabel 4.5 Tabel Pegawai…………………. ........................................... 86

Tabel 4.6 Tabel Berita ……………………. ........................................... 87

Tabel 4.7 Tabel Gambar…………………… .......................................... 87

xi

xii

DAFTAR LAMPIRAN

Listing Program …………………….......... ............................................ A-1

Surat Kesediaan Bimbingan…………………… .................................... B-1

xii

1

BAB I

PENDAHULUAN

1.1. Latar Belakang

Kemajuan Teknologi Informasi sekarang ini semakin berkembang

pesat dengan terjadinya kemajuan diberbagai bidang, mulai dari hardware,

software, dan aplikasi-aplikasi pendukungnya sehingga menempatkan

komputer menjadi perangkat yang dapat ditemukan hampir disemua tempat

dan keadaan.

Komputer sekarang sudah masuk kedalam instansi/perusahaan baik

swasta maupun pemerintahan, salah satu contohnya di dunia pendidikan.

Hal ini menandakan bahwa kecanggihan teknologi sudah meluas berbagai

penjuru. Perangkat keras (hardware) komputer tidak akan berfungsi tanpa

adanya perangkat lunak (software). Teknologi yang canggih dari perangkat

keras akan berfungsi bila instruksi-instruksi dari perangkat lunak yang

diberikan. Teknologi informasi yang banyak dibutuhkan sekarang ini yaitu

perangkat lunak yang diharapkan dapat mendukung kinerja bagi suatu

perusahaan/instansi. Perangkat lunak dapat mempercepat kerja kita dalam

mengolah informasi yang kita butuhkan.

Dalam dunia pendidikan Website merupakan salah satu sarana untuk

mempromosikan diri dan menyampaikan informasi kepada masyarakat,

dengan tujuan masyarakat dapat mengenal lebih jauh profil suatu sekolah

dan mendapatkan informasi terbaru dalam dunia pendidikan.

2

SMP Negeri 1 Tarub adalah salah satu sekolah menengah pertama

negeri dengan kualitas standar nasional yang berada di wilayah Kecamatan

Tarub Kabupaten Tegal. Selama ini pihak SMP Negeri 1 Tarub, memiliki

permasalahan dalam mempromosikan profil sekolah kepada masyarakat

luas. SMP Negeri 1 Tarub biasanya berinteraksi dengan pihak luar hanya

dengan menggunakan media cetak seperti pamflet, majalah sekolah, brosur,

papan pengumuman dan majalah dinding. Padahal media cetak yang

digunakan selama ini terdapat banyak kekurangan, salah satunya adalah

jumlahnya yang terbatas, biaya produksi yang mahal, dan informasi yang

dapat disampaikan melalui media cetak sangat terbatas.

Berdasarkan permasalahan yang telah diuraikan diatas, maka dalam

penelitian ini penulis tertarik membuat suatu website sekolah dengan judul

“SISTEM INFORMASI WEBSITE PROFIL SEKOLAH DI SMP NEGERI

1 TARUB DENGAN MENGGUNAKAN PHP DAN MYSQL”. Penulis

berharap semoga dengan adanya website ini dapat menyajikan informasi

tentang SMP Negeri 1 Tarub secara dinamis dan akurat. Dengan website

profil ini diharapkan warga sekolah dan masyarakat luas dapat memperoleh

informasi SMP Negeri 1 Tarub dengan mudah dan cepat.

1.2. Rumusan Masalah

Dari latar belakang yang sudah dipaparkan di atas rumusan

masalahnya adalah :

3

1. Bagaimana penyajian informasi dan fasilitas yang ada di SMP Negeri 1

Tarub Jl. Projosumarto 2 Mindaka Tarub – Tegal.

2. Langkah apa yang dilakukan agar aplikasi web dapat diskses oleh user

dengan cepat dan mudah.

3. Bagaimana informasi aplikasi web dapat di update dengan mudah pada

waktu yang diinginkan.

1.3. Pembatasan Masalah

Agar tidak terjadi dari maksud dan tujuan pembuatan laporan kerja

praktek ini, maka batasan masalahnya adalah :

1. Pembuatan “SISTEM INFORMASI WEBSITE PROFIL SEKOLAH DI

SMP NEGERI 1 TARUB DENGAN MENGGUNAKAN PHP DAN

MYSQL” berisikan galeri, profil, buku tamu, struktur, visi dan misi,

foto guru dan karyawan, dan informasi kegiatan.

2. Bahasa pemograman yang digunakan adalah php, data basenya mysql,

xampp, editor untuk desain tampilan menggunakan adobe dreamweaver

CS 3.

1.4. Tujuan

Tujuan pembuatan produk yang dibuat untuk tempat kerja praktek

adalah sebagai berikut :

1. Menyajikan sarana informasi keadaan dan fasilitas yang ada di SMP

Negeri 1 Tarub.

4

2. Menerapkan program yang telah dibuat untuk diaplikasikan langsung

pada tempat pelaksanaan Kerja Praktek.

3. Untuk merancang suatu aplikasi web yang dinamis yang dimanfaatkan

untuk menyebarkan informasi yang baik, cepat dan akurat.

1.5. Manfaat

Manfaat yang dapat diperoleh dari produk yang akan dibuat untuk

tempat Kerja Praktek adalah sebagai berikut :

1. Bagi Mahasiswa

a. Penerapan Ilmu yang diperoleh saat kuliah.

b. Pembuatan karya ilmiah sebagai bukti turut berperan dalam

pengembangan ilmu pengetahuan khususnya bidang keilmuan IT.

2. Bagi SMP Negeri 1 Tarub

a. Memberikan kemudahan bagi masyarakat umum untuk mengetahui

informasi dan keadaan SMP Negeri 1 Tarub.

b. Membantu mempromosikan dan mengenalkan SMP Negeri 1

Tarub Jl. Projosumarto 2 Mindaka Tarub-Tegal agar para orang

tua mau menyekolahkan anak-anaknya disekolah tersebut.

3. Bagi POLITEKNIK HARAPAN BERSAMA TEGAL

a. Dokumentasi karya ilmiah mahasiswa dalam bentuk Laporan Kerja

Praktek.

b. Referensi karya ilmiah dalam bentuk laporan kerja praktek bagi

mahasiswa lain yang akan mengambil kerja praktek.

5

c. Memberikan gambaran tentang aplikasi sistem informasi website.

1.6. Metode Penelitian

1.6.1. Jenis Data

Metode penelitian merupakan suatu cara untuk

mengumpulkan dan menganalisa data dengan perantara suatu

teknik tertentu untuk memperoleh data yang diperlukan dalam

menyusun laporan kerja praktek ini. Penulis menggunakan

beberapa metode yaitu :

a. Data Primer

Yaitu terdiri dari semua data yang berhubungan dengan

permasalahan yang diteliti yang didapat secara langsung

pengamatan penulis sendiri.

b. Data Sekunder

Meliputi semua data yang berhubungan dengan permasalahan

yang diteliti, yang ditulis atau dikumpulkan oleh penulis

secara tidak langsung dari obyek penelitian, yang dapat berupa

catatan, laporan-laporan tertulis dari masalah serta daftar

pustaka.

1.6.2. Metode Pengumpulan Data

Agar menunjang pencarian fakta dan pengumpulan data guna

pemecahan masalah yang berkaitan dengan kasus ini, maka

diperlukan pemahaman bagaimana sistem tersebut nantinya bisa

6

dijalankan. Dan untuk mengetahui bagaimana sistem berjalan,

diperlukan beberapa metode penelitian untuk memperoleh data

yang akurat dan menghasilkan suatu sistem perangkat lunak yang

lebih baik. Metode-metode tersebut antara lain:

1. Metode Observasi

Merupakan metode yang dilakukan dengan cara mengamati

secara langsung yaitu dengan mengikuti kegiatan sekolah

dalam menyebarkan brosur ke masyarakat. Dengan meneliti

secara langsung penulis memperoleh informasi dari

permasalahan yang terjadi pada SMP NEGERI 1 TARUB,

terutama yang berhubungan dengan media komunikasi dan

media informasi sekolah baik kepada guru, siswa, maupun

masyarakat pada umumnya.

2. Metode Wawancara

Metode ini dengan menggunakan proses tanya jawab secara

langsung dan sistematis dengan mengajukan beberapa

pertanyaan untuk mendapatkan informasi mengenai

bagaimana merancang sebuah web profil yang bersifat

dinamis dan interaktif yang baik berdasarkan tujuan yang telah

ditentukan diatas. Selain itu metode ini juga bertujuan untuk

mendapatkan data yang konkrit dan lengkap dari pihak yang

bersangkutan dalam hal ini yang dimaksud adalah Kepala

7

Sekolah SMP NEGERI 1 TARUB yaitu Abdul Khalim, S.Pd.

Ina. mengenai objek penelitian yang akan diolah.

3. Metode Literatur / Studi Pustaka

Yaitu suatu metode penelitian di mana penulis melakukan

pengumpulan data-data yang diperlukan tentang profil

sekolah, dan bentuk sampel lain guna untuk meneliti

keakuratan laporan Metode Literatur.Metode ini dilakukan

dengan pengambilan dan pengumpulan data, baik yang berasal

dari dokumen sekolah yang bersangkutan maupun dari buku-

buku dari perpustakaan di sekolah maupun di luar sekolah.

1.6.3. Analisa Data

Untuk mengolah data yang diperoleh penulis menggunakan

metode Analisa Data Kualitatif. Metode ini merupakan prosedur

penelitian yang menghasilkan data diskriptif berupa kata tertulis

atau tulisan dari orang-orang dalam kegiatan diamati. Seperti

contohnya adalah dalam pembuatan model-model perancangan

sistem Diagram Arus Data (Data Flow Diagram), Diagram Context

(CD), Data Dictionary (Kamus Data), Flowchart Sistem (Sistem

Prosedur Diagram), HIPO (Hirarchy Plus Input Proses Output),

Desain Database, Desain Input, dan Desain Output.

8

1.7. Waktu dan Tempat Pelaksanaan

Kerja Praktek dilaksanakan selama 2 bulan mulai tanggal 15 Oktober

sampai dengan 1 Desember 2012. Adapun tempat kerja praktek (KP)

dilaksanakan di SMP Negeri 1 Tarub Jl. Projosumarto 2 Mindaka

Kecamatan Tarub Kabupaten Tegal.

1.8. Sistematika Penulisan

Demi kelancaran dalam penyusunan laporan kerja praktek, maka perlu

diaplikasikan sistematika penulisan sebagai berikut :

BAB I PENDAHULUAN

Bab ini akan menguraikan mengenai latar belakang,

rumusan masalah, pembatasan masalah, tujuan, manfaat,

metode penelitian, waktu dan tempat pelaksanaan serta

sistematika penulisan.

BAB II GAMBARAN UMUM

Bab ini membahas mengenai sejarah berdirinya SMP

Negeri 1 Tarub, visi dan misi, struktur organisasi SMP

Negeri 1 Tarub, kegiatan-kegiatan yang ada di SMP

Negeri 1 Tarub.

BAB III LANDASAN TEORI

Bab ini berisi landasan teoritis yang dikutip dari beberapa

referensi yang menjelaskan teori-teori yang ada kaitannya

dengan tema judul kerja praktek ini.

9

BAB IV PERANCANGAN DAN IMPLEMENTASI SISTEM

Bab ini membahas mengenai analisa permasalahan,

analisa kebutuhan sistem, ERD, normalisasi, diagram alir,

desain input/output (layout), implementasi sistem.

BA B V PENUTUP

Bab ini menjelaskan kesimpulan dan saran-saran dari

Penulis.

DAFTAR PUSTAKA

LAMPIRAN

10

BAB II

GAMBARAN UMUM

2.1. Sejarah SMP Negeri 1 Tarub

SMP Negeri 1 Tarub adalah Pengembangan lebih lanjut dari sebuah

sekolah swasta “SMP PEMDA TARUB” yang terletak di Jl. Projosumarto

2 Mindaka Desa Mindaka Kecamatan Tarub Kabupaten Tegal Provinsi Jawa

Tengah yang berdiri pada tahun 1978 dan pada tanggal 30 juli 1980 secara

resmi SMP Pemda Tarub di negerikan menjadi SMP Negeri 1 Tarub oleh

Menteri Pendidikan dan Kebudayaan dengan SK No.0202/0/1980 tanggal

30 juli 1980.

Awal proses belajar mengajar SMP Negeri 1 Tarub pada tahun 1980

dengan kategori sekolah Rintisan SSN dengan luas tanah 5580 m² dan luas

bangunan 3712 m² kepemilikan tanah atas pemerintah.

Pada tahun 2004 SMP Negeri 1 Tarub menjadi sekolah mandiri

dengan Manajemen Berbasis Sekolah (MBS) hingga sekarang dan dipercaya

Pemerintah menjadi sekolah rintisan Penerima Bantuan “SCHOOL

GRANT” program “RETRIEVAL”.

Pada tahun 2007 memperoleh kepercayaan Pemerintah menjadi

“Sekolah Berbasis Menuju Mandiri Setara SSN” dengan SSN

No.201032815032 jenjang Akreditasi A. Tahun demi tahun SMP Negeri 1

Tarub semakin berkembang sejak tahun pelajaran 2003/2004 SMP Negeri 1

Tarub setiap bulan memperoleh bantuan dari Pemerintah Pusat (RKB),

11

Pemerintah Provinsi Jawa Tengah (IN-GUB) rehab berat dan ringan dari

pemerintah Kabupaten Tegal serta perbaikan-perbaikan ringan dari dana

swadaya masyarakat orang tua siswa.

2.2. Visi dan Misi SMP Negeri 1 Tarub

1. Visi

“Unggul dalam prestasi berdasarkan Iman dan Taqwa, berwawasan

Ilmu dan Teknologi”.

2. Misi

a. Melaksanakan pembelajaran dan bimbingan secara efektif,

sehingga dapat meningkatkan kreaktifitas anak didik.

b. Mendorong siswa untuk menguasai pengetahuan dan teknologi,

agar menjadi sumber daya manusia yang berpotensi.

c. Meningkatkan pemahaman, penghayatan dan pengalaman siswa

terhadap ajaran agama, sehingga menjadi manusia yang beriman.

2.3. Struktur Organisasi SMP Negeri 1 Tarub

Struktur Organisasi mempunyai peranan penting dalam perusahaan

atau instansi, karena berfungsi untuk menentukan pembagian kerja yang ada

diperusahaan atau instansi tersebut. Adapun Struktur Organisasi yang

terdapat pada SMP Negeri 1 Tarub adalah sebagai berikut :

12

Gambar 2.1 Struktur Organisasi SMP Negeri 1 Tarub

Kepala Sekolah Komite Sekolah

Wakil Kepala Sekolah

KOORDINATOR URUSAN

Kurikulum

Kesiswaan Humas Sarpras

WALI KELAS

KELAS VII KELAS VIII KELAS IX

GURU DAN TATA USAHA

Siswa

Tata Usaha Bimbingan Konseling Guru Mata Pelajaran

13

2.4. Uraian Tugas

1. Kepala Sekolah

a. Penyusunan program kerja sekolah

b. Mengkoordinasikan semua kegiatan yang ada di SMP Negeri 1

Tarub

c. Pengawasan proses belajar mengajar, pelaksanaan dan penilaian

proses dan hasil belajar serta bimbingan dan konseling (BK).

d. Pembina kesiswaan

e. Pelaksanaan bimbingan dan penilaian bagi guru serta kependidikan

lainnya.

f. Penyelengagaraan administrasi sekolah meliputi administrasi

ketenagaan, keuangan, kesiswaan, perlengkapan, dan kurikulum.

g. Pelaksanaan hubungan sekolah dengan lingkungan dan atau

masyarakat.

h. Melakukan pembinaan pembinaan pengelolaan katatausahaan

sekolah

i. Menginventarisasi permasalahan yang berhubungan dengan KBM

dan pengelolaan administrasi sekolah serta menyajikan alternatif

pemecahannya.

j. Mendistribusikan tugas kepada bawahan sesuai proporsi masing-

masing.

2. Wakil Kepala Sekolah

14

a. Menyusun perencanaan, membuat program kegiatan dan

pelaksanaan program.

b. Pengorganisasian Kegiatan-kegiatan seolah.

c. Pengarahan terhadap semua tenaga/personil.

d. Ketenagaan koordinasi/kerja sama dengan semua koordinator

urusan, guru, wali kelas dan semua staf TU.

e. Mengkoordinasi kegiatan-kegiatan sekolah, misalnya MGMP,

pelaksanaan remidi, ektrakurikuler, keluarga dll.

3. Komite Sekolah

a. Bersama-sama sekolah membuat rumusan dan penetapan tentang

visi dan misi sekolah, standar pelayanan pendidikan di sekolah,

menyusun Rencana Anggaran Penerimaan Belanja Sekolah

(RAPBS), mengembangkan potensi ke arah prestasi unggulan baik

yang bersifat akademis maupun non akademis.

b. Membahas dan turut menetapkan pemberian tambahan

kesejahteraan berupa uang honorarium yang diperoleh dari

masyarakat kepada Kepala Sekolah, Guru dan Tenaga Administrasi

lainnya.

c. Menghimpun dan menggali sumber dana dari masyarakat untuk

meningkatkan kualitas pelayanan.

d. Mengelola kontribusi masyarakat baik yang berupa uang maupun

lainnya untuk dipergunakan bagi kepentingan sekolah.

15

e. Mengidenfikasi sebagai permasalahan dan memecahkannya

bersama pihak sekolah.

4. Kurikulum

a. Membuat dan menyusun jadwal pelajaran

b. Menyusun dan menjabarkan kalender pendidikan

c. Mengatur penyusunan program pelajaran (program semester,

program satuar pelajaran, dan rencana pengajaran, penjabaran dan

penyesuaian kurikulum.

d. Mengatur dan pelaksanaan kegiatan kurikuler dan ektra kurikuler.

e. Mengatur pemanfaatan lingkungan dan sebagai sumber belajar.

f. Mengatur pelaksanaan program perbaikan dan pengayaan.

g. Mengatur pengembangan MGMP dan koordinator mata pelajaran.

h. Mengatur mutasi siswa baik keluar maupun kedalam.

i. Melakukan supervisi administrasi dan akademis.

j. Menyusun laporan.

5. Kesiswaan

a. Mengatur program dan pelaksanaan bimbingan dan konseling.

b. Mengatur dan mengkoordinasikan pelaksanaan 7K.

c. Mengatur dan membina program kegiatan OSIS.

d. Mengatur program masa orientasi siswa (MOS).

e. Menyeleksi calon untuk diusulkan mendapat beasiswa, bantuan

khusus murid (BKM), dan jaringan pengaman sosial (JPS).

6. Humas

16

a. Menyelenggarakan bakti sosial, karya wisata rekreasi tenaga

pendidikan

b. Menyelenggarakan pemeran hasil pendidikan di sekolah pentas

seni kegiatan tengah semester.

c. Menyusun laporan

7. Sarpras

a. Merencanakan kebutuhan sarana prasarana untuk menunjang

proses belajar mengajar.

b. Merencanakan program pengadaan SARANA dan PRASARANA.

c. Mengatur pemanfaatan sarana prasarana.

d. Mengelola perawatan, perbaikan, dan pengisian sarana prasarana.

e. Mengatur pembukuan sarana prasarana.

f. Menyusun laporan.

8. Wali Kelas

a. Pengeloalan kelas.

b. Pengisian daftar kumpulan nilai siswa (leger).

c. Pembuatan catatan khusus tentang siswa.

d. Pencatatan mutasi siswa.

e. Pengisian buku laporan penilaian hasil belajar.

f. Pembagian buku laporan penilaian hasil belajar.

9. Guru Mata Pelajaran

a. Melaksanakan kegiatan pembelajaran.

17

b. Membuat perangkat program pengajaran (Silabus, RPP, Program

Mingguan Guru, LKS, Penilaian).

c. Melaksanakan kegiatan penilaian proses belajar, ulangan harian,

ulangan umum, dan ujian akhir.

d. Mengisi daftar nilai siswa.

e. Mengikuti kegiatan pengembangan dan pemasyarakatan kurikulum.

f. Mengisi dan melihat daftar hadir siswa sebelum memulai pelajaran.

g. Membuat alat pelajaran / peraga, catatan tentang kemajuan hasil

belajar siswa.

h. Menumbuhkan kembangkan sikap menghargai karya seni.

i. Melaksanakan tugas tertentu di sekolah.

j. Mengadakan pengembangan program pengajaran yang menjadi

tanggung jawabnya

k. Membuat catatan tentang kemajuan hasil belajar siswa

l. Mengumpulkan dan menghitung angka kredit untuk kenaikan

pangkatnya

10. Bimbingan Konseling

a. Membuat program layanan bimbingan dan konseling.

b. Penyusunan panduan layanan konseling bagi siswa.

c. Koordinasi dengan wali kelas dalam rangka mengatasi masalah-

masalah yang dihadapi oleh siswa tentang kesulitan belajar.

18

d. Memberikan saran dan pertimbangan kepada siswa dalam

memperoleh gambaran tentang lanjutan pendidikan dan lapangan

pekerjaan yang sesuai.

e. Mengadakan penilaian pelaksanaan bimbingan dan penyuluhan.

f. Memberikan layanan bimbingan kepada siswa agar lebih

berprestasi dalam kegiatan belajar

g. Menyusun statistik hasil penilaian bimbingan dan konseling

h. Menyusun laporan pelaksanaan kegiatan bimbingan dan konseling.

11. Tata Usaha

a. Melayani urusan kepegawaian.

b. Melakukan kegiatan surat menyurat atau kearsipan.

c. Melayani urusan keuangan.

d. Melayani peralatan dan perlengkapan.

e. Perencanaan pengadaan alat-alat media.

f. Menyusun progran kegiatan teknisi media.

g. Iventarisasi dan pengadministrasian alat-alat media.

h. Menyusun laporan pemanfaatan alat-alat media.

i. Mengatur penyimpanan, pemeliharaan dan perbaikan alat-alat

media.

2.5. Fasilitas Penunjang Kegiatan Belajar Mengajar

Untuk meningkatkan Kegiatan Belajar Mengajar, SMP Negeri 1

Tarub telah menyediakan beberapa fasilitas diantaranya :

19

1. Laboratorium IPA sebanyak 1 ruang.

2. Laboratorium Komputer sebanyak 3 ruang.

3. Ruang Kelas sebanyak 27 ruang.

4. Perpustakaan sebanyak 1 ruang.

5. Koperasi Siswa sebanyak 1 ruang.

6. Koperasi Guru 1 ruang.

7. Ruang UKS sebanyak 1 ruang.

8. Ruang PKS sebanyak 1 ruang.

9. Laboratorium Agama (Mushola) sebanyak 1 ruang.

2.6. Kegiatan Ektrakurikuler di SMP Negeri 1 Tarub

Untuk meningkatkan kreaktifitas siswa dalam Kegiatan Belajar

Mengajar SMP Negeri 1 Tarub melaksanakan berbagai kegiatan

ektrakurikuler diantaranya sebagai berikut :

1. Ektrakurikuler PMR

2. Ektrakurikuler Pramuka

3. Ektrakurikuler PKS

4. Ektrakurikuler KIR

5. Ektrakurikuler PSHT

6. Ektrakurikuler Sepak Bola

7. Ektrakurikuler Teater

8. Ektrakurikuler Band

9. Ektrakurikuler BTQ

20

10. Ektrakurikuler Seni Lukis

11. Ektrakurikuler Bola Volly

12. Ektrakurikuler Seni Tari

2.7. Denah Lokasi SMP Negeri 1 Tarub

Gambar 2.2 Denah Lokasi SMP Negeri 1 Tarub

Slaw

i

U

Kebandingan Banjaran

PASAR BALAMOA

Talang

MT

s.Alkam

al

Lapangan Mindaka

SMP N 1 TARUB

POLSEK TARUB

KORAMIL TARUB

Lar

ang

an

21

BAB III

LANDASAN TEORI

3.1. Sistem Informasi

3.1.1 Pengertian Sistem

Suatu sistem dapat didefinisikan sebagai sebuah tatanan

yang terdiri atas sejumlah komponen fungsional yang saling

berhubungan yang secara bersama-sama bertujuan untuk memenuhi

pekerjaan atau proses tertentu. (Fathansyah, Basis Data 1999).

Sedangkan menurut Jery Fitz Gerald (Jogiyanto, Analis

dan Desain Sistem Informasi, 1989), Sistem adalah suatu jaringan

kerja dari prosedur-prosedur yang saling berhubungan, berkumpul

bersama-sama untuk melakukan suatu kegiatan atau menyelesaikan

suatu sasaran tertentu. Suatu sistem dapat terdiri dari sistem-sistem

bagian (subsistem). Subsistem-subsistem saling berinteraksi dan

saling berhubungan membentuk satu kesatuan sehingga tujuan atau

sasaran sistem tersebut dapat tercapai.

3.1.2 Pengertian Informasi

Informasi dapat didefinisikan sebagai hasil dari

pengolahan data ke data dalam suatu bentuk yang lebih berarti bagi

penerimanya yang menggambarkan suatu kejadian-kejadian nyata

22

yang digunakan untuk mengambil keputusan (Jogiyanto,

pengenalan komputer,1989).

Kualitas Informasi bergantung dari tiga hal, yaitu :

1. Akurat

Berarti informasi harus bebas dari kesalahan dan tidak bisa

atau menyesatkan. Atau juga dapat diartikan informasi harus

jelas mencerminkan maksudnya.

2. Tepat Waktu

Berarti informasi yang datang pada penerima tidak boleh

terlambat. Informasi yang sudah usang tidak akan mempunyai

nilai.

3. Relevan

Informasi harus memiliki dan memberikan manfaat bagi

pemiliknya.

3.1.3 Pengertian Sistem Informasi

Menurut Turban et al. (2005:49) yang dimaksud dengan

system informasi adalah proses yang menjalankan fungsi

mengumpulkan, memproses, menyimpan, menganalisis, dan

menyebarkan informasi untuk tujuan tertentu.

3.1.4 Karakteristik Sistem

Suatu sistem mempunyai karakteristik atau sifat-sifat yang

tertentu. Berikut ini merupakan karakteristik sistem :

23

1. Komponen Sistem (components)

Suatu sistem terdiri dari sejumlah komponen yang saling

berinteraksi, yang artinya saling bekerja sama membentuk satu

kesatuan.Komponen-komponen sistem tersebut dapat berupa

suatu bentuk sub sistem. Setiap sub sistem memiliki sifat-sifat

dari sistem yang berjalan suatu sistem tertentu dan

mempengaruhi suatu proses sistem keseluruhan. Suatu sistem

dapat mempunyai sistem yang lebih besar, yang disebut

dengan supra sistem

2. Batas Sistem (boundary)

Batas sistem merupakan daerah yang membatasi antara suatu

sistem dengan sistem yang lainnya atau dengan lingkungan

luarnya yang memungkinkan suatu sistem dipandang sebagai

satu kesatuan yang tidak dapat dipisahkan.

3. Lingkungan Luar Sistem (environments)

Lingkungan luar dari suatu sistem adalah apapun diluar batas

dari sistem yang mempengaruhi operasi sistem.

4. Penghubung Sistem (interface)

Penghubung merupakan media penghubung antara satu

subsistem dengan subsistem yang lainnya. Melalui

penghubung ini memungkinkan sumber-sumber daya dari

subsistem akan menjadi masukan untuk subsistem lainnya

melalui penghubung tersebut.

24

5. Masukan Sistem (input)

Masukan adalah energi yang dimasukkan ke dalam sistem.

Berupa masukan perawatan (maintenance input) dan masukan

sinyal (signal input) sebagai contoh didalam suatu unit sistem

komputer. Program adalah maintenance input yang digunakan

untuk mengoperasikan komputernya dan data signal input

untuk diolah menjadi informasi.

6. Keluaran Sistem (output)

Keluaran adalah hasil dari energi yang diolah dan

diklasifikasikan menjadi keluaran yang berguna. Keluaran

merupakan masukan bagi sub sistem yang lain, seperti sistem

informasi, keluaran yang dihasilkan adalah informasi, yang

mana informasi ini dapat digunakan masukan untuk

pengambilan keputusan atau hal-hal yang menjadi input bagi

sub sistem lainnya.

7. Pengolah Sistem (process)

Suatu sistem dapat mempunyai suatu bagian pengolah atau

sistem itu sendiri sebagai pengolahnya. Pengolah akan

merubah masukan menjadi keluaran.

8. Sasaran Sistem (objectives)

Suatu sistem dikatakan berhasil bila mengenai sasaran atau

tujuannya. Kalau sistem tidak memiliki sasaran, maka operasi

25

sistem tidak ada gunanya. Suatu sistem dikatakan berhasil bila

mengenai saran dan tujuan yang telah direncanakan.

3.1.5 Klasifikasi Sistem

Menurut Jogiyanto (2005c:6) bahwa “sistem dapat

diklasifikasikan dari beberapa sudut pandang”, adapun penjelasan

lebih detail tentang klasifikasi sistem akan dijelaskan sebagai

berikut :

1. Sistem abstrak (abstract system) dan sistem phisik

(physicalsystem).

Sistem abstrak merupakan sistem yang berupa pemikiran atau

ide-ide yang tidak tampak secara fisik. Sedangkan sistem fisik

merupakan sistem yang ada dalam fisik.

2. Sistem alamiah (natural system) dan sistem buatan manusia

(human mode system).

Sistem alamiah adalah sistem yang terjadi melalui proses alam,

tidak dibuat oleh manusia. Sedangkan sistem buatan manusia

adalah sistem yang melibatkan interaksi manusia dengan mesin

yang disebut human machine system.

3. Sistem tertentu (deterministic system) dan sistem tak tentu

(Probabilistic system).

26

Sistem deterministik merupakan sistem yang beroperasi

dengan tingkah laku yang dapat diprediksi. Sedangkan sistem

yang bersifat probalistic merupakan sistem yang kondisi masa

depannya tidak dapat diprediksi, karena mengandung unsur

probalistic.

4. Sistem terbuka (open system) dan sistem tertutup (closed

system).

Sistem terbuka merupakan sistem yang berhubungan dan

dipengaruhi oleh lingkungan luarnya. Sistem ini menerima

masukan dan menghasilkan keluaran untuk sub sistem lainnya.

Sistem tertutup merupakan suatu sistem yang tidak

dihubungkan dengan lingkungannya. Sistem ini bekerja secara

otomatis tanpa ada campur tangan dari pihak luar.

3.2. Pengertian Website Profil

3.2.1 Website

1. Pengertian Website

Menurut Rahmada (2009), website/situs adalah sebuah

kumpulan halaman yang menampilkan informasi data text,

data gambar diam/gerak, data animasi, suara, video, dan/atau

gabungan dari semuanya, baik yang bersifat statis maupun

dinamis yang membentuk satu rangkai bangunan yang saling

terkait dimana masing-masing dihubungkan dengan jaringan-

27

jaringan halaman (hyperlink). Bersifat statis apabila isi

informasi website tetap, jarang berubah dan informasi masih

searah hanya dari pemilik website. Bersifat dinamis apabila isi

informasi website selalu berubah-ubah dan isi informasinya

interaktif, dua arah berasal dari pemilik serta pengguna web.

Website adalah sebuah cara untuk menampilkan diri

dengan menggunakan media internet (Wikipedia,2008).

Website dapat berfungsi sebagai:

a. Membuat pengumuman atau pemberitahuan.

b. Memberikan pelayanan.

c. Menerima masukan dari pengunjung/customer Anda.

d. Membagi dan mendistribusi file dan foto.

e. Berkomunikasi langsung dengan banyak orang yang

berada di belahan dunia manapun.

2. Unsur-unsur penunjang website

1. Desain Website

Program desain website merupakan program yang

digunakan untuk membuat desain website. Misalnya

Macromedia Firework, Adobe Photoshop, Adobe

Dremweaver, Microsoft Frontpage.

2. Nama Domain (Domain name/URL)

Merupakan alamat unik didunia internet yang digunakan

untuk mengidentifikasi sebuah website atau alamat yang

28

digunakan untuk menemukan sebuah website pada dunia

internet.

3. Bahasa Program (Script Program)

Bahasa program yang digunakan untuk menerjemahkan

setiap perintah dalam website yang ada saat diakses.

4. Rumah tempat website (Web Hosting)

Web Hosting merupakan ruangan yang terdapat dalam

hardidisk tempat menyimpan berbagai data, file-file,

gambar, video,e-mail, database dan sebagainya yang akan

ditampilkan dalam website.

5. Publikasi website

Keberadaan website tidak ada gunanya dibuat tanpa

dikunjungi atau dikenal oleh masyarakat atau pengunjung

internet. Karena efektif tidaknya sebuah situs sangat

tergantung dari besarnya pengunjung dan komentar yang

masuk. Untuk mengenalkan situs kepada masyarakat

memerlukan publikasi atau promosi.

3.2.2 Profil

Pengertian Profil adalah gambaran singkat seseorang,

lembaga, organisasi benda ataupun wilayah, Profil yang baik

ditulis dengan singkat namun jelas dan dapat menggambarkan

seseorang atau lembaga secara umum, Profil bisa dibuat tertulis,

baik di kertas atau website ataupun melalui elektronik

29

3.3. Software Pendukung dalam perancangan Website

Dalam membuat sebuah website tidak hanya memerlukan sebuah

konsep saja, tetapi harus tahu software – software apa saja yang diperlukan

untuk membuat sebuah website. Software – software yang diperlukan

antara lain :

3.3.1 Macromedia Dreamweaver CS3

Macromedia Dreamweaver CS3 adalah program aplikasi

web editor terpopuler saat ini. Selain tampilannya yang lebih

menarik kemampuan fitur - fitur yang baru yang akan

memudahkan para pemakainya untuk menciptakan halaman web

dengan mudah dan cepat tanpa menuliskan baris – baris kode

HTML. Salah satu kelebihan Dreamweaver CS3 adalah memiliki

kemampuan yang mendukung pemrograman Script Server Side

seperti Active Server Page (ASP), Java Server Page (JSP),

Coldfusion, ASP.Net, dan PHP. Selain itu, Dreamweaver juga

mendukung pemrograman client side seperti HTML dan Java

Script.

Dalam dunia web, seorang webmaster mutlak tidak akan

lepas dari awal pembuatan desain web. Dasar dari desain web

adalah menggunakan HTML (HyperText Markup Language),

HTML merupakan dokumen HyperText yang bisa dibaca dari suatu

platform komputer lain. Seiring dengan perkembangan jaman

30

perancangan web tidak tertumpu pada HTML saja, tetapi juga pada

perancangan secara visual. Perancangan secara visual sangat

memudahkan pemakai untuk membuat web. Salah satu software

web editor yang di kenal dengan Macromedia Dreamweaver,

software ini merupakan software yang paling inovatif dan lengkap

dibandingkan software web editor lain.

Versi terbaru dari Macromedia Dreamweaver adalah

Macromedia Dreamwever CS3 yang merupakan penyempurnaan

dari versi sebelumnya dan tentu saja semakin mudah dalam

penggunaannya. Fasilitas terbaru dari Macromedia Dreamweaver

CS3 adalah Zoom tool dan Guides, Panel CSS yang baru, code

collapse, coding toolbar dan insert flash. Tidak jauh beda dengan

versi sebelumnya, Macromedia Dreamweaver CS3 mendukung

program client side yang terkenal yaitu Java script dengan

penggunaan yang sangat mudah, Macromedia Dreamweaver CS3

juga mendukung pemrograman script server side, seperti PHP,

ASP, ASP.NET, Cold fusion dan JSP.

3.3.2 Komponen Dan Area Kerja Macromedia Dreamwever CS3

Sebelum membuat dokumen web, sebaiknya mengenal

komponen dan area kerja dari Macromedia Dreamweaver CS3

terlebih dahulu, area kerja yang ada pada Macromedia

Dreamweaver ini adalah Insert Bar, Document Window, Panel

31

Groups, Tag selector, dan Property Inspector. Untuk lebih

jelasnya lihat gambar 3.1 di bawah ini.

Gambar 3.1 Tampilan Area Kerja Macromedia Dreamweaver.

Berikut ini adalah keterangan gambar tentang tujuan dan

fungsi dari masing – masing komponen.

1. Insert Bar

Insert Bar merupakan tool yang digunakan untuk menyisipkan

objek ke dalam dokumen web. Ada beberapa kategori yang

32

digunakan untuk Insert Bar seperti Common, Layout, Form,

Text, HTML, dan Aplication

a. Common Insert Bar

Secara otomatis, tampilan pertama Macromedia

Dreamweaver CS3 akan memunculkan Insert Bar. Pada

kelompok ini terdapat tool yang sering digunakan untuk

mendesain seperti hyperlink, gambar dan lain-lain.

Gambar 3.2 Tool Common Insert Bar.

Berikut adalah keterangan fungsi tool pada Common Insert

Bar.

Tabel 3.1 Fungsi tool Commont Insert Bar.

No Nama Fungsi

1 Hyperlink Untuk menambahkan hyperlink

2 Email Link Untuk memberikan link ke email

3 Named Anchor Untuk memberikan nama link

pada suatu tempat

4 Table Untuk membuat table

5 Images Untuk menyisipkan gambar

6 Media Untuk menyisipkan media,

10

9

8

7

6

5

4

3

2

1

33

seperti flash, flash movie, flash

button, dll.

7 Date Untuk menyisipkan tanggal

8 Comment Untuk memberikan komentar

pada script

9 Templates Untuk membuat templates

10 Tag Chooser Untuk memasukan tag seperti

HTML, PHP, ASP, dll.

b. Layout Insert Bar

Pada kelompok layout terdapat tool yang sangat membantu

dalam pembentukan sebuah halaman dokumen web.

Diantara tool tersebut ada yang berfungsi untuk pembuatan

table, layer, maupun frame.

Gambar 3.3 Tool Layout Insert Bar

Berikut adalah keterangan fungsi tool pada Layout Insert

Bar.

Tabel 3.2 Fungsi tool Layout Insert Bar

No Nama Fungsi

1 Table Untuk membuat table

2 Insert Div Tag Untuk menyisipkan tag div

3 Draw Layer Untuk membuat layer

6 10

11 9

8

7 5

4

3 1

2

34

4 Layout Table Untuk membuat layout

pada halaman website

5 Draw Layout

Cell

Untuk membuat cell ke

dalam layout table

6 Insert Row Above Untuk menyisipkan baris

pada atasnya

7 Insert Row Below Untuk menyisipkan baris

pada bawahnya

8 Insert Column to

the Left

Untuk menyisipkan baris

pada kirinya

9 Insert Column to

the Right

Untuk menyisipkan baris

pada kananya

10 Frames Untuk membuat frame

pada dokumen website

11 Tabular Data Untuk memasukan data

c. Form Insert Bar

Form adalah suatu aplikasi dimana pengguna memberikan

input kepada sistem, sehingga dapat menggunakan tool

pada kelompok form ini untuk membuat aplikasi website

lebih interaktif.

Gambar 3.4 Tool Form Insert Bar.

14 12 10 8 6 4 2

1 3 5 7 9 11 13

35

Berikut adalah keterangan fungsi tool pada Form Insert

Bar.

Tabel 3.3 Fungsi tool Form Inser Bar.

No Nama Fungsi

1 Form Untuk memulai form

2 Text Field Untuk memasukan text

field pada form

3 Hidden Field Untuk memasukan hidden

field pada form

4 Text Area Untuk memasukan textarea

pada form

5 Checkbox Untuk memasukan

checkbox pada form

6 Radio Button Untuk memasukan radio

button pada form

7 Radio Group

Untuk memasukan radio

button secara group pada

form

8 List/Menu Untuk membuat daftar atau

list menu pada form

9 Jump Menu Untuk membuat jump

menu pada form

10 Image Field Untuk membuat pencarian

gambar pada form

11 File Field Untuk membuat pencarian

file pada form

12 Button Untuk membuat tombol

submit dan reset pada form

36

13 Label Untuk membuat label pada

form

14 Fieldset Untuk membuat fieldset

pada form

d. Text Insert Bar

Bagian terpenting dari website adalah teks yang merupakan

inti dari informasi. Format teks, paragraf maupun karakter

teks lain dapat diatur pada Text Insert Bar.

Gambar 3.5 Tool Text Insert Bar.

Berikut keterangan fungsi tool pada Text Insert Bar.

Tabel 3.4 Fungsi tool Text Insert Bar.

No Nama Fungsi

1 Font Tag Editor Untuk memunculkan font

tag editor

2 Bold dan Italic Untuk membuat teks

menjadi tebal dan miring.

3 Strong Untuk membuat teks

menjadi tebal (strong)

4 Emphasis Untuk membuat teks

menjadi miring

16

15

14 12 10 8 6 4 2

1 3 5 7 9 11 13

37

5 Paragraph Untuk mengatur paragraph

6 Block Quote Untuk membuat teks seperti

catatan penting

7 Preformatted Membentuk paragraf seperti

adanya pada script

8 Heading 1,2,3 Untuk membentuk teks

dalam Heading 1,2 atau 3

9 Unordered List Format membuat daftar

dalam bentuk simbol

10 Ordered

Format membuat daftar

dalam bentuk nomor atau

abjad

11 List Item Untuk memasukan daftar

12 Definition List Untuk mendefinisikan

sesuatu

13 Definition Term,

dan Definition

Description

Untuk memasukan definisi

term dan untuk memberikan

penjelasan

14 Abbreviation

Untuk memberi penjelasan

mengenai singkatan pada

teks yang ditunjuk

15 Acronim Untuk memberikan akronim

16 Line Break Karakter yang berfungsi

untuk ganti baris.

e. HTML Insert Bar

Kelompok HTML Insert Bar memuat tool yang

memudahkan dalam memasukan tag HTML, tag tersebut

38

antara lain untuk membuat garis horizontal, head, table,

frame, dan java script.

Gambar 3.6 Tool HTML Insert Bar.

Berikut adalah keterangan dari fungsi tool pada HTML

Insert Bar.

Tabel 3.5 Fungsi tool HTML Insert Bar.

No Nama Fungsi

1 Horizontal Rules Untuk menyisipkan tag

<hr>

2 Head Untuk menyisipkan tag

yang ada pada head

3 Tables Untuk menyisipkan tag

pada pembuatan table

4 Frames Untuk menyisipkan tag

pada pembuatan frames

5 Script Untuk memasukan java

script pada HTML

1 3 5

4 2

39

f. Aplication Insert Bar

Tool Aplication ini digunakan untuk menambahkan server

behaviour pada dokumen website.

Gambar 3.7 Tool Aplication Insert Bar.

2. Document Window

Jendela kerja dokumen terdiri atas layar kerja serta fasilitasnya.

Yang dimaksud dengan fasilitasnya adalah tool untuk mengatur

layar kerja atau sering disebut document toolbar antara lain

coding tool dan zoom & guide tool. Disamping itu tersedia

fasilitas lain yaitu tag selection.

a. Document Toolbar

Dapat mengatur segala yang berhubungan dengan

pengaturan layar kerja dokumen menggunakan Document

toolbar, untuk mengatur layer kerja yang berupa kode atau

desain dapat menggunakan toolbar show code view, show

design view, show code and design view.

Gambar 3.8 Tool Document Toolbar.

Pada tampilan layer code view, hanya kode atau script

dokumen saja yang tampak. Yang dapat mengatur kode

40

tersebut sedemikian rupa menggunakan coding tool yang

terletak secara vertikal pada sebelah kiri layar kerja.

b. Tag Selection

Tag merupakan suatu kode dalam script yang menentukan

format halaman web. Penulisan kode tag HTML diawali

dengan tag pembuka (<…>) dan ditutup dengan tag

penutup (</…>). Tag selection merupakan fasilitas untuk

memudahkan dalam mencari lokasi suatu tag pada halaman

web. Urutan tag selection ini didasarkan atas urutan struktur

penulisan tag. Sebagai contoh bjika akan memilih tag

dalam suatu struktur tabel, maka bisa melihat struktur dari

baris (<tr>) dan kolom (<td>) dari tabel dengan memilih

salah satu tagnya.

3. Panel Groups

Panel pada Macromedia Dreamweaver 8 merupakan suatu

media yang berfungsi sebagai fasilitator. Kumpulan berbagai

panel disebut panel group, terletak pada sebelah kanan layer

kerja, panel – panel tersebut dianataranya :

a. CSS / Design Panel

Merupakan fasilitas untuk mempercantik tampilan dengan

menggunakan style CSS.

Pada kelompok CSS panel terdapat dua bagian yaitu Design

Style dan Layer.

41

b. Application Panel

Merupakan fasilitas untuk membuat dokumen web yang

dinamis, karena penggunaan panel application mengacu

pada server dan database.

c. Tag Inspector

Di dalam tag inspector terdapat dua bagian yaitu Attributes

dan Behaviours. Pada tag attributes terdapat berbagai

atribut suatu tag yang diseleksi, sedangkan tag behaviours

merupakan kumpulan yang mengaplikasikan perintah

menggunakan java script.

d. Files

Merupakan fasilitas untuk memudahkan dalam mengelola

file dokumen web. Pada panel files terdapat tiga tab yaitu

Files, Asset, dan Snippets.

e. History

Penel history akan menampilkan langkah – langkah yang

telah dikerjakan dalam membuat suatu dokumen web.

Untuk mengoprasikan history, klik panah pada samping kiri

ke bagian yang akan diulangi, dengan demikian tidak perlu

khawatir bila terdapat kesalahan dalam melangkah.

4. Property Inspector

Dalam dokumen web pasti terdapat teks, gambar maupun tabel

yang memiliki aturan dalam mengelolanya. Atur pengaturan

42

tersebut dengan menggunakan jendela property inspector,

sangatlah mudah karena tinggal memasukan nilai parameter

yang sudah disediakan. Secara umum property inspector terdiri

dari :

a. Page property inspector.

Property halaman untuk mengelola text, paragraf maupun

style CSS.

b. Table property inspector.

Table property akan muncul apabila ada tabel yang

terseleksi. Table property terdiri dari layout table dan

layout cell.

c. Image property inspector.

Memuat pengaturan properti untuk menyisipkan gambar

pada dokumen web. Dalam menyisipkan gambar pada

dokumen terdapat pengaturan pada image property

inspector.

d. Form property inspector.

Form merupakan aplikasi interaktif dari web yang berguna

untuk memasukan data pemakai. Pada form sendiri

terdapat bagian – bagian form yang memiliki property

inspector sendiri.

43

3.3.3 HTML (HyperText Markup Language)

1. Pengertian HTML

HTML merupakan singkatan dari HyperText Markup

Language. HTML digunakan untuk membangun suatu halaman

web. Sekalipun banyak orang menyebutnya sebagai suatu

bahasa pemrograman, HTML sebenarnya sama sekali bukan

bahasa pemrograman, karena seperti tercermin dari namanya

HTML adalah suatu bahasa mark up. HTML digunakan untuk

melakukan mark up (penandaan) terhadap sebuah dokumen

teks. Tanda tersebut digunakan untuk menentukan format atau

style dari teks yang ditandai.

2. Struktur Dasar HTML

Untuk menandai sebuah file teks merupakan file HTML,

maka ciri yang paling nampak jelas adalah file-nya, yaitu .html.

Namun lebih jauh daripada itu, di dalam file tersebut harus

terkandung struktur sebagai berikut :

Gambar 3.9 Struktur Dasar HTML.

<html>

<head>

...

</head>

<body>

...

</body>

</html>

44

Tag <html> tersebut harus diletakkan pada bagian paling awal

dan tag </html> harus diletakkan pada bagian paling akhir.

Bagian head umumnya berisi informasi mengenai dokumen

tersebut, misalnya judul dokumen, versi HTML yang

digunakan. Sedangkan body berisi layout atau desain halaman

web.

1. Heading, Paragraph dan Break

Tag Heading <hx> digunakan untuk memformat heading

(judul, dan sub-judul) dari suatu halaman web. Heading ini

akan memperbesar ukuran huruf untuk setiap jenis heading.

Ada enam buah heading yang dikenal di HTML, yaitu dari

<h1> sampai <h6>.

Tag paragraph <p> berfungsi layaknya untuk pengaturan

antar paragraph dalam halaman web. Dalam elemen paragraph

terdapat atribut : align = [ left I center I right ] yang berfungsi

sebagai pengatur perataan paragraph, jadi cukup memilih salah

satu dari ketiga pilihan tanpa harus memberi kurung buka dan

tutup, dan default-nya adalah left.

Tag break <br> berfungsi untuk memberikan baris baru

suatu paragraph dalam halaman web. Tag break tidak

memerlukan tag penutup break.

45

Tag horisontal ruler <hr> berfungsi untuk menampilkan

garis horisontal tiga dimensi didalam halaman web. Tag

horisontal ruler juga tidak memerlukan elemen penutup </hr>.

Atribut elemen horisontal ruler :

- Align = [ left lcenter l right ] ( perataanhorisontal,

default center )

- Size = pixel (tebal garis, default 2)

- Width = panjang ( lebar garis, pixel atau persen,

default 100% )

2. Properti Halaman Web

Properti dokumen diatur melalui atribut - atribut yang

terdapat dalam elemen <body>. Sebagai contoh adalah

pengaturan warna latar belakang halaman, warna teks, warna

link dan lain-lain.

Atribut elemen body :

- background = lokasi dan warna file (latar belakang

image dokumen)

- bgcolor = warna (warna latar belakang dokumen,

default putih)

- text = warna (text dokumen, default hitam)

- link = warna (warna link dokumen, default

biru)

46

- vlink = warna (warna visite link dokumen,

default ungu)

- alink = warna (warna active link dokumen,

default merah)

3. Kode Warna

Pengaturan warna di halaman HTML menggunakan mode

kombinasi RGB (Red, Green, Blue) yang mana setiap warna

ditampilkan dalam dua digit nilai heksadesimal (0, 1, 2, 3,

……,F). Setiap bagian dua digit kode menunjukan banyaknya

intensitas dari kombinasi warna merah, hijau, biru. Sebagai

contoh 00 pada dua digit pertama berarti tidak ada warna merah

dalam kombinasi warna dan seterusnya.

Tabel 3.6 Tabel warna heksadesimal

WARNA HEKSADESIMAL

White #FFFFFF

Black #000000

Red #FF0000

Green #00FF00

Blue #0000FF

Magenta #FF00FF

Cyan #00FFFF

Yellow #FFFF00

47

6. Pemformatan Karakter

Karakter pada halaman HTML dapat diformat sesuai desain

yang ditentukan, baik ukuran, jenis, maupun warna, dengan

menggunakan tag <font>.

a. Atribut elemen font

- Size = angka (ukuran huruf, default 3)

- Color = warna (warna huruf, default black)

- Face = jenis huruf, default Times New Roman)

b. Elemen ragam karakter

- <b>teks disini</b> menghasilkan huruf tebal

- <i>teks disini</i> menghasilkan huruf miring

- <u>teks disni</u> menghasilkan huruf bergaris bawah

7. Link

Element link berfungsi sebagai penghubung antara suatu

halaman dengan halaman lain, atau ke URL lain, bahkan dalam

satu halaman untuk berpindah ke sub judul yang lain. Format

tag link adalah <a href = URL_tujuan>hypertext</A>

URL_ tujuan bernilai lokasi dan nama file yang akan dituju,

sedangkan hypertext nilainya akan ditampilkan di browser

sebagai text link atau tombol penghubung.

8. Image

48

Gambar yang ditampilkan dalam halaman HTML dengan

format JPG atau GIF. Untuk menampilkanya menggunakan tag

IMG.

Atribut elemen image

- src = lokasi dan nama gambar

- alt = teks (teks alternatife)

- width = pixel (lebar gambar)

- height = pixel (tinggi gambar)

- align = [top 1 middle1 bottom 1 left right

(peralatangambar)

- border = pixel (tebal garis tepi gambar)

9. Tabel

Tabel merupakan cara untuk menampilkan informasi dalam

bentuk sel yang terdiri atas baris dan kolom. Untuk

menampilkan data dalam bentuk tabel pada HTML, gunakan

tag <table> … </ table >. Elemen tabel berisi properti <tr> …

</tr> untuk menentukan baris (table row) yang didalamnya

terdapat properti <td> …. /td> untuk menampilkan data pada

setiap sel tabel (table data).

Struktur elemen tabel data adalah sebagai berikut :

49

Gambar 3.10 Struktur elemen table data.

a . Atribut Elemen Tabel

- Width = panjang (lebartabel,pixel atau persen)

- Height = panjang (tinggi tabel,pixel atau

persen)

- Border = pixel (tebal garis tepi)

- Cellspacing = pixel (spasi antar sel)

- Cellpadding = pixel (spasi didalam sel)

- Align = [ left l center l right ] (perataan tabel)

b. Atribut Tabel Row

- Align = [ left l center l right ] (perataan sebaris sel

secara horisontal)

- Valign = [ top l middle l bottom ] (perataan

sebaris

<table>

<tr>

<td>data baris 1 kolom 1</td>

<td>data baris 1 kolom 2</td>

</tr>

<tr>

<td>data baris 2 kolom 1</td>

<td>data baris 2 kolom 2</td>

</tr>

<tr>

<td>data baris 3 kolom 1</td>

<td>data baris 3 kolom 2</td>

< / tr>

</table>

50

sel secara vertikal)

- Bgcolor = warna (warna latar belakang baris)

c. Atribut Tabel Data

- Rowspan = angka (baris yang di-span oleh sel)

- Colspan = angka (kolom yang di-span oleh sel)

- Align = [ left l center l right ] (perataan

horisontal)

- Valign = [ top l middle 1 bottom ] ( perataan

vertikal)

- Width = pixel (lebar sel, pixel atau persen)

- Height = pixel (tinggi sel, pixel atau persen)

- Bgcolor = warna (warna latar belakang sel)

10. Form

Form HTML merupakan tag yang paling penting dalam

pemrograman internet khususnya dalam pembuatan aplikasi

berbasis web. Form menyediakan property masukan yang dapat

berupa textbox, radiobutton, dan button.

Untuk mendeklarasikan sebuah form digunakan tag <form> …

</form>. Selain tag, elemen form juga dapat menuliskan

sembarang teks, tag, maupun image.

a. Atribut elemen form :

- Action = lokasi dan nama file (file yang menangani

form)

51

- Method = [ get l post ] (metode HTTP untuk men

submit form)

b. Property Masukan Pada Elemen Form :

1) Text Box <input type=”text”>

Digunakan untuk memasukan input yang berupa teks.

- Size = ukuran dari textbox dalam karakter default

20

- Maxsize = maksimal banyaknya karakter yang dapat

diterima

- Name = nama dari variabel yang dikirim kesuatu

aplikasi

- Value = akan menampilkan isinya sebagai nilai

default

2) Password <input type=”password”>

Digunakan untuk memasukan password.

- Size = ukuran dari textbox dalam

karakter, default 20

- Maxsize = maksimal banyaknya karakter yang

dapat diterima

- Name = nama dari variabel yang dikirim

kesuatu aplikasi

52

3) Hidden <input type=”hidden”>

Digunakan untuk mengirim data kesuatu aplikasi yang

tidak diinginkan untuk dilihat oleh browser.

- Name = nama dari variabel yang

dikirim kesuatu Aplikasi

- Value = nilai dari variabel

4) Check Box <input type=”checkbox”>

Digunakan untuk dapat memilih lebih dari satu pilihan.

- Name = nama dari variabel yang dikirim

kesuatu aplikasi

- Value = nilai dari variabel

- Checked = (checkbox yang sudah ditandai)

5) Radio Button <input type=”radio”>

Digunakan agar dapat memilih hanya salah satu pilihan.

- Name = nama dari variabel yang dikirim

kesuatu aplikasi

- Value = nilai dari variabel

- Checked = (radio button yang sudah ditandai)

6) Push Button <input type=”button”>

Elemen ini biasanya digunakan dengan JavaScript atau

VBScript untuk menghasilkan suatu aksi.

- Name = nama dari variabel yang

dikirim kesuatu Aplikasi

53

- Value = label teks diatas tombol

7) Submit <input type=”submit”>

Setiap elemen form membutuhkan tombol submit untuk

mengirimkan nama dan nilainya kesuatu aplikasi yang

ditentukan dalam atribut ACTION.

- Name = nama dari variabel yang

dikirim kesuatu aplikasi

- Value = label teks diatas tombol

8) Image Submit Button

<inputtype=”image”src=”url”>

Digunakan untuk menggantikan tombol standar submit

dengan image.

- Name = nama dari variabel yang dikirim kesuatu

Aplikasi

- Value = label teks diatas tombol

9) Reset <input type=”reset”>

Digunakan untuk mereset semua masukan dalam form.

- Value = label teks diatas tombol

10) Text Area <textarea> … </textarea>

Elemen untuk memasukan teks secara leluasa seperi

Notepad.

- Name = nama dari variabel

yang dikirim kesuatu aplikasi

54

- Rows = panjang baris dalam karakter

- Cols = tinggi dalam karakter

11) Select < /select> …< /select>

Daftar isi dalam property select menggunakan tag

<option>

- Size = jumlah pilihan yang dapat

terlihat

- Name = nama dari variabel yang

dikirim kesuatu aplikasi

3.3.4 PHP ( Hypertext Preprosesor )

1. Pengertian PHP

Bahasa pemograman PHP merupakan bahasa

pemograman untuk membuat web yang bersifat server-side

scripting. PHP memungkinkan kita untuk membuiat halaman

web yang bersifat dinamis. PHP dapat dijalankan pada

berbagai macam Operating system (OS), misalnya Windows,

Linux dan Mac OS. Selain Apache, PHP juga mendukung

beberapa web server lain, misalnya Microsoft IIS, Caudim,

PWS dan lain-lain. Sistem manajemen database yang sering

digunakan bersama PHP adalah MySQL.

Namun PHP juga mendukung system manajemen Database

Oracle, Microsoft Acces, Interbase, D-Base, PostgreSQL dan

sebagainya.

55

PHP mendukung penuh Object Oriented Programing

(OOP), integrasi XML, mendukung semua ektensi terbaru

MySQL, pengembanagn web services dengan SOAP dan

REST, serta ratusan kemampuan. Sama dengan web server

lainnya PHP juga bersifat open source sehingga setiap orang

dapat menggunakannya dengan gratis.

2. Konsep Dasar PHP

PHP adalah bahasa scripting yang menyatu dengan

HTML dan dijalankan pada server side. Untuk menuliskan dan

memperkenalkan PHP, harus dimulainya dengan tanda <?php,

setelah tanda tersebut dapat dilanjutkan dengan kode program

didalamnya. Untuk mengakhiri kode program yang dibuat,

dapat ditutup dengan tanda ?>. Selain penggunaan tanda

seperti itu, dapat juga digunakan beberapa bentuk lain yaitu

sebagai berikut:

Tabel 3.7 Syntax dasar PHP

Awal Akhir

<? ?>

<?php ?>

<?script language=”php”> </ script>

Script yang dibuat dengan PHP disimpan dengan nama file

berekstensi *.php, misalnya : contoh.php. Bila script PHP

56

diakses melalui komputer lokal maka file berekstensi *.php

disimpan di folder htdocs yaitu folder web server apache-nya.

Script PHP dapat juga dapat disisipkan dibagian manapun

dalam dokumen HTML, begitu pula sebaliknya script HTML

dapat diletakkan diantara Script PHP . Contoh program

sederhana PHP :

<html> <head> <title> Contoh 1.php </title> </head> <body> <?php echo(“Hallo apakabar? Nama saya PHP script”);?> </body> </html>

Hasilnya adalah :

Gambar 3.11 Output File Contoh.Php

3.3.5 MySQL

SQL adalah bahasa standar yang digunakan untuk mengakses

database server. Bahasa ini pada awalnya dikembangkan oleh

IBM, namun telah diadopsi dan digunakan sebagai standar industri.

Dengan menggunakan SQL, proses akses database menjadi lebih

user friendly dibandingkan dengan menggunakan dBASE atau

57

clipper yang masih menggunakan perintah – perintah

pemrograman.

MySQL adalah multiuser database yang menggunakan bahasa

Structured Query Language (SQL). MySQL dalam operasi client-

server melibatkan server daemon MySQL disisi server dan

berbagai macam program serta library yang berjalan disisi client.

MySQL mampu menangani data yang cukup besar. Perusahaan

yang mengembangkan MySQL adalah TcX. Mampu menyimpan

data lebih dari 40 database, 10.000 tabel dan sekitar 7 juta baris,

totalnya kurang lebih 100 gigabyte data.

1) Tipe Data Pada MySQL.

Pada dasarnya ada empat grup tipe data yang didukung MySQL

yaitu :

a. Tipe data numeric

b. Tipe data string

c. Tipe data waktu

d. Tipe data lain

a. Tipe data Numerik.

Tipe data ini hanya dapat menyimpan data angka (numeric)

saja. Dapat disimpan dalam bentuk angka positif maupun

negatif. Tipe data numerik pada MySQL adalah sebagai

berikut :

Tabel 3.8 Tipe data Numerik pada MySQL.

58

Tipe data Jangkauan Signed Jangkauan Unsigned

Memori

TINYINT -128 -127 0 – 255 1 byte SMALLINT -32768 -32767 0 – 65535 2 byte MEDIUMINT -8388608 -8388607 0 – 16777215 3 byte

INT -2147483648-2147483647

0 – 4294967295 4 byte

BIGINT -92233720368 54775808-9223372036854775807

0 -184467440737 09551615

8 byte

FLOAT (M,D) Tergantung nilainya - 4 byte DOUBLE (M,D) Tergantung nilainya - 8 byte

DECIMAL (M,D) Tergantung nilainya - M + 2 byte

Atribut berikut AUTO_INCREMENT, UNSIGNED dan

ZEROFILL hanya ada pada tipe data numerik ini saja.

AUTO_INCREMENT memberikan nilai ke field yang

ditambahi atribut ini, secara otomatis dan nilainya selalu naik

1 angka setelah data sebelumnya. UNSIGNED memberikan

tipe data ini hanya dengan nilai positif saja, karena secara

default tipe data ini jangkauannya sampai negatif. Sedangkan

ZEROFILL berfungsi untuk memberikan imbuhan nilai 0 di

depan nilai sepanjang lebar tipe data.

b. Tipe Data String

Tipe data ini dapat berisi nilai string (alpanumerik/karakter)

dan numeric. Nilai numerik disini tidak dapat untuk operasi

perhitungan sebelum dilakukan konversi.

Tabel 3.9 Tipe Data String di MySQL.

Tipe Data Max Size Memory CHAR (X) 255 byte X byte

59

VARCHAR (X) 255 byte X +1 byte TINYTEXT 255 byte X + 1 byte TINYBLOB 255 byte X + 2 byte TEXT 65535 byte X + 2 byte BLOB 65535 byte X + 2 byte MEDIUMTEXT 1.6 MB X + 3 byte MEDIUMBLOB 1.6 MB X + 3 byte LONGTEXT 4.2 GB X + 4 byte LONGBLOB 4.2 GB X + 4 byte

c. Tipe Data Waktu

Tipe data ini menyimpan informasi waktu, baik tanggal

maupun jam. Walaupun data yang disimpan di sini numerik

tetapi pembacaan terhadap data adalah string. Jadi perlu

dilakukan konversi bila ingin melakukan perhitungan.

Berikut tipe data waktu yang didukung oleh MySQL.

Tabel 3.10 Tipe Data Waktu dalam MySQL.

Tipe Data Format Standar Zero Value

DATE TIME YYYY-MM-DD HH:MM:SS

0000-00-00 00:00:00

DATE YYYY-MM-DD 0000-00-00 TIME HH:MM:SS 00:00:00 YEAR YYYY 0000

TIMESTAMP YYYYMMDDHHMMSS 00000000000000

d. Tipe Data Lain

Ada tiga macam tipe data selain yang telah disebutkan diatas,

yaitu ENUM dan SET. Tipe ENUM merupakan tipe data yang

menyimpan beberapa pilihan data yang akan disimpan tetapi

hanya satu pilihan yang boleh disimpan. Sedangkan SET

60

hampir sama dengan ENUM tetapi bisa memilih lebih dari

satu pilihan.

3.3.6 Diagram Alir Data

Merupakan alat yang digunakan untuk menggambarkan suatu

sistem yang telah ada atau sistem baru yang akan dikembangkan

secara logika tanpa mempertimbangkan lingkungan fisik dimana

data tersebut mengalir ataupun lingkungan fisik dimana data

tersebut akan disimpan.

Tujuan pembuatan Diagram Alir Data adalah :

1. Merancang sebuah algoritma awal suatu program.

2. Untuk dapat menunjukan secara jelas arus pengendalian suatu

algoritma dengan cara melaksanakan suatu rangkaian kegiatan

secara logis dan sistematis.

3. Dapat memberikan gambaran dua dimensi yang berupa simbol

– simbol grafis, dimana masing – masing simbol mempunyai

arti dan fungsinya sendiri.

4. Dengan simbol tersebut dipakai untuk menunjukan berbagai

kegiatan operasi dan jalur pengendalian.

1. Simbol Diagram Alir .

Keterangan dan kegunaan dari simbol-simbol

Diagram Alir Data adalah :

Tabel 3.11 Keterangan Simbol DAD.

Nama Gambar Keterangan

61

Simbol

Terminal

Simbol ini digunakan untuk

mengawali dan mengakhiri suatu

proses atau kegiatan.

Proses

Simbol ini digunakan untuk

melakukan kegiatan proses instruksi

didalam suatu program.

Decision

Digunakan untuk mengambil

keputusan dalam pengujian suatu

kondisi yang sedang diproses.

Flow Line

Digunakan untuk menggambarkan

arus atau jalur proses dari suatu

kegiatan yang menuju pada kegiatan

lain.

Preparation

Digunakan untuk mempersiapkan

nilai awal dari suatu variable yang

akan diproses dan juga untuk

penggunaan proses loop.

Input /

Output

Digunakan untuk menggambarkan

proses input dan proses output

program.

Subroutin

Untuk menggambarkan proses

pemanggilan pada sub program dari

main menu.

Connector

Untuk penghubungan antara suatu

proses dengan proses lainya yang

berbeda posisi pada halaman yang

sama.

Page

connector

Untuk penghubung antara suatu

proses dengan proses lainya yang

berbeda halaman.

62

Printer

Untuk menggambarkan suatu

dokumen atau kegiatan untuk

mencetak.

Console

Menggambarkan kegiatan dalam

menampilkan data atau informasi

dengan media visual display unit

(VDU) atau disebut juga monitor.

Manual

input

Symbol ini digunakan untuk

menggambarkan kegiatan

pemasukan data dengan media

keyboard.

Disk

Untuk menggambarkan kegiatan

dalam membaca atau menulis data

dengan media magnetic disk.

Tape / pita

Menggambarkan kegiatan dalam

membaca atau menulis data dengan

media kertas pita.

Tape drive

Digunakan untuk menggambarkan

kegiatan dalam membaca atau

menulis dengan pita magnetic.

Punched

card

Untuk menggambarkan kegiatan

dalam membaca atau menulis data

dengan media kartu punch.

3.3.7 Normalisasi

Normalisasi merupakan sebuah teknik dalam logikal desain

sebuah basis data/database, teknik pengelompokan atribut dari

suatu relasi sehingga membentuk struktur relasi yang baik (tanpa

63

redundasi). Normalisasi dipakai sebagai metodologi tersendiri

untuk menciptakan struktur tabel dalam basis data. Terkadang

normalisasi itu sendiri dipakai sebagai perangkat terhadap tabel –

tabel yang dihasilkan, dan memberikan panduan yang sangat

membantu bagi pengembang untuk mencegah penciptaan struktur

tabel yang kurang fleksibel atau mengurangi ketidakefisienan.

Aturan – aturan dalam normalisasi dinyatakan dalam istilah

bentuk normal. Bentuk normal pertama hingga ketiga merupakan

bentuk normal yang umum dipakai. Artinya bahwa pada

kebanyakan relasi, bila ketiga bentuk normal tersebut terpenuhi,

maka persoalan ketidakkonsistenan data tidak akan muncul lagi.

Bentuk normalisasi adalah suatu aturan yang dikenakan

pada tabel - tabel dalam basis data dan harus dipenuhi oleh table -

tabel tersebut pada level - level normalisasi. Ada macam - macam

bentuk normalisasi, diantaranya adalah bentuk tidak normal,

bentuk normal pertama, bentuk normal kedua dan bentuk normal

ketiga. Aturan - aturan dalam masing - masing bentuk normalisasi

tersebut adalah sebagai berikut :

a. Bentuk tidak normal

Bentuk ini merupakan kumpulan data yang akan disimpan,

tidak ada keharusan mengikuti suatu format tertentu, dapat saja

data tidak lengkap atau terduplikasi dan data dikumpulkan apa

adanya.

64

b. Bentuk normal pertama

Suatu tabel dikatakan dalam bentuk normal pertama (1NF) bila

setiap kolom bernilai tunggal untuk setiap baris. Ini berarti

bahwa nama kolom yang berulang cukup diwakili oleh sebuah

nama kolom (tidak perlu ada indeks dalam memberi nama

kolom).

c. Bentuk normal kedua

Suatu tabel berada dalam bentuk normal kedua (2NF) jika

tabel berada dalam bentuk normal pertama, semua kolom

bukan kunci primer tergantung sepenuhnya terhadap kunci

primer. Suatu kolom disebut tergantung sepenuhnya terhadap

kunci primer jika nilai pada suatu kolom selalu bernilai

sama untuk suatu nilai kunci primer yang sama.

d. Bentuk normal ketiga

Suatu tabel berada dalam bentuk normal ketiga (3NF)

jika tabel berada dalam bentuk normal kedua, setiap kolom

bukan kunci primer tidak memiliki ketergantungan secara

transitif terhadap kunci primer.

3.3.8 Data Flow Diagram (DFD)

Data Flow Diagram (DFD) adalah alat pembuatan model

yang memungkinkan profesional sistem untuk menggambarkan

sistem sebagai suatu jaringan proses fungsional yang dihubungkan

satu sama lain dengan alur data, baik secara manual maupun

65

komputerisasi. DFD ini sering disebut juga dengan nama Bubble

chart, Bubble diagram, model proses, diagram alur kerja, atau

model fungsi.

DFD ini adalah salah satu alat pembuatan model yang

sering digunakan, khususnya bila fungsi-fungsi sistem merupakan

bagian yang lebih penting dan kompleks dari pada data yang

dimanipulasi oleh sistem. DFD ini merupakan alat perancangan

sistem yang berorientasi pada alur data dengan konsep

dekomposisi dapat digunakan untuk penggambaran analisa maupun

rancangan sistem yang mudah dikomunikasikan oleh profesional

sistem kepada pemakai maupun pembuat program. Adapun simbol-

simbol dari Dari Data Flow Diagram yaitu :

Tabel 3.12 Simbol-Simbol Data Flow Diagram

DeMarco and

Yourdan Symbols

Keterangan Gane and Sarson

Symbols

EXTERNAL ENTITY

PROSES

DATA FLOW

( Arus Data )

DATA STORE

(Simpanan Data )

1. External Entity

66

Kesatuan diluar sistem yang akan memberikan input

atau menerima output dari sistem, dapat berupa orang,

organisasi, sumber informasi lain atau penerima akhir dari

suatu laporan.

Contoh :

Gambar 3.12 Entitas

2. Proses

Merupakan kegiatan atau pekerjaan yang dilakukan oleh

orang atau mesin komputer, dimana aliran data masuk,

ditranformasikan ke aliran data keluar.

Contoh :

Gambar 3.13 Proses

3. Data Flow (Arus Data)

Disimbolkan dengan anak panah, dimana arus data

mengalir diantara proses, simpangan data, kesatuan luar,

kesatuan ruang. Arus data dapat berbentuk sebagai berikut :

a. Formulir atau dokumen yang digunakan perusahaan

b. Laporan tercetak yang dihasilkan sistem

Dosen Mahasiswa

1 Perikasa Jawaban

67

c. Output dilayar komputer

d. Masukan untuk komputer

e. Komunikasi ucapan

f. Surat atau memo

g. Data yang dibaca atau direkam pada file

h. Suatu isian yang dicatat pada buku agenda

i. Transmisi data dari suatu komputer ke komputer lain

4. Data Store (Simpanan Data)

Dapat berupa suatu file atau suatu sistem database dari

suatu komputer, suatu arsip/dokumen, suatu agenda/buku. Ada

beberapa hal yang peerlu diperhatikan dalam penggambaran

simpanan data (data source) :

1. Hanya proses saja yang berhubungan dengan data source,

karena yang menggunakan atau merubah data pada data

source adalah suatu proses.

2. Arus data yang menuju data source dari suatu proses

menunjukan proses update terhadap data yang tersimpan

pada data source.

3. Arus data yang berasal dari data source ke suatu proses

menunjukan bahwa proses tersebut menggunakan data

yang ada pada data source.

4. Untuk suatu proses yang melakukan kedua-duanya, yaitu

menggunakan dan update data source dapat dipilih dengan

68

menggunakan sebuah garis dengan anak panah dua arah

atau menggunakan dua garis anak panah.

3.3.8.1 Langkah-langkah pembuatan DFD

1. Identifikasi semua kesatuan luar yang terlibat dengan

sistem.

2. Identifikasi input dan output yang berhubungan

dengan kesatuan luar

3. Buatlah gambaran dari konteks diagram.

Konteks diagram yaitu diagram tingkat atas,

merupakan diagram dari sebuah sistem yang

menggambarkan aliran-aliran data yang masuk dan keluar

dari sistem dan yang masuk dan keluar dari entitas luar.

Hal Yang harus diperhatikan :

a. Memberikan gambaran tentang seluruh system.

b. Terminal yang memberikan masukan ke sistem

disebut source.

c. Terminal yang menerima keluaran disebut sink.

d. Hanya ada satu proses.

e. Tidak boleh ada data store.

Aturan konteks diagram :

1. Bila terdapat terminator yang mempunyai banyak

masukan dan keluaran, diperbolehkan untuk

digambarkan lebih dari satu kali sehingga mencegah

69

penggambaran yang terlalu sulit dan diberi tanda

khusus berupa asterisk (*) atau tanda kres (#).

2. Bila terminator mewakili individu sebaiknya diwakili

oleh peran yang dimainkan personil tersebut.

3. Karena model ini membedakan sumber dengan

pelaku, dimana pelaku adalah mekanisme, perangkat

atau media fisik yang mentranformasikan data ke/dari

sistem, sehingga pelaku tidak perlu digambarkan.

3.3.8.2 Tingkatan Dalam DFD

Tingkatan pertama disebut dengan Diagram

Konteks (Context Diagram), yang menggambarkan

mengenai sistem secara global. Dalam hal ini ditetapkan

Entitas-entitas eksternal yang terlibat dalam proses, baik

sebagai sumber maupun tujuan.

Tingkatan berikutnya dikatakan sebagai Digram

level nol (Zero Diagram / overview diagram), yakni

memberikan gambaran mengenai proses-proses apa saja

yang akan dilakukan dan melibatkan entitas-entitas

eksternal yang ada serta data store–data store tertentu.

Diagram level 1, merupakan penjabaran rinci dari

setiap proses yang ada pada diagram level nol, secara

khusus. Dimungkin akan muncul proses-proses detilnya.

70

Diagram level 2, merupakan penjabaran rinci dari

setiap proses yang baru muncul pada diagram level 1,

secara khusus. Dalam hal ini juga dimungkinkan akan

muncul proses-proses detilnya.

Tingkatan berikutnya akan kita definisikan sesuai

dengan keadaan dari level sebelumnya, dengan harapan

diagram ini akan memberikan pemahaman secara detil

atau rinci mengenai sistem yang sedang akan dikerjakan.

3.3.9 Flowchart

Flowchart merupakan diagram alur proses cara kerja suatu

sistem dengan menggunakan simbol-simbol yang telah ditentukan

yang bertujuan menjelaskan cara kerja sistem sesuai bagian-

bagiannya masing-masing. Pengertian lain dari Bagan alir

(Flowchart) adalah bagan (chart) yang menunjukan alir (flow)

didalam program atau prosedur sistem secara logika. Bagan alir

digunakan terutama untuk alat bantu komunikasi dan untuk

dokumentasi.

Level bahasa pemrograman :

a. High Level : mudah dimengerti manusia.

b. Midle : Bahasa yang masih dipahami manusia.

c. Low : bahasa sulit dimengerti manusia

Jenis-jenis Flowchart :

a. Bagan alir sistem (system Flowchart)

71

Flowchart Sistem merupakan bagan yang menunjukkan

alur kerja atau yang sedang dikerjakan didalam sistem secara

keseluruhan dan menjelaskan urutan dari prosedur yang ada

didalam sistem. Flowchart Sistem terdiri dari data yang

mengalir dan proses yang mentransformasikan data itu. Data

dan proses dalam Flowchart sistem dapat digambarkan secara

online atau offline.

Gambar 3.14. Flowchart Sistem Pemesanan Barang

b. Bagan alir dokumen (document Flowchart)

Kegunaan utamanya adalah untuk menelusuri alur form

dan laporan sistem dari satu bagian ke bagian lain baik

bagaimana alur form dan laporan diproses, dicatat dan

disimpan.

Tabel 3.13. Flowchart Dokumen Perpustakaan

Anggota Adminstrasi Kepala

Perpustakaan

Pesanan pembelian

Masukan Pembelian

Informasi Pesanan

Tentukan Jumlah Pesanan

Laporan Jumlah Pesanan

Keluarkan Pesanan

72

c. Bagan alir skematik (schematic Flowchart)

Flowchart Skematik mirip dengan Flowchart Sistem

yang menggambarkan suatu sistem atau prosedur. Flowchart

Skematik ini bukan hanya menggunakan simbol-simbol

Flowchart standar, tetapi juga menggunakan gambar-gambar

komputer, peripheral, form-form atau peralatan lain yang

digunakan dalam sistem.

Flowchart Skematik digunakan sebagai alat

komunikasi antara analis sistem dengan seseorang yang tidak

familiar dengan simbol-simbol Flowchart yang konvensional.

Pemakaian gambar sebagai ganti dari simbol-simbol Flowchart

akan menghemat waktu yang dibutuhkan oleh seseorang untuk

Kartu Anggota

Kartu Anggota 1

Validasi Data

Formulir 1

Kartu Anggota

Input data anggota

d

Formulir

Formulir 1

Isi Formulir

Kartu Anggota 1

73

mempelajari simbol abstrak sebelum dapat mengerti

Flowchart.

d. Bagan alir program (program Flowchart)

Flowchart Program dihasilkan dari Flowchart Sistem.

Flowchart Program merupakan keterangan yang lebih rinci

tentang bagaimana setiap langkah program atau prosedur

sesungguhnya dilaksanakan. Flowchart ini menunjukkan setiap

langkah program atau prosedur dalam urutan yang tepat saat

terjadi. Programmer menggunakan Flowchart program untuk

menggambarkan urutan instruksi dari program komputer.

Analis Sistem menggunakan Flowchart program untuk

menggambarkan urutan tugas-tugas pekerjaan dalam suatu

prosedur atau operasi.

e. Bagan alir proses ( process Flowchart)

Flowchart Proses merupakan teknik penggambaran

rekayasa industrial yang memecah dan menganalisis langkah-

langkah selanjutnya dalam suatu prosedur atau sistem.

Flowchart Proses memiliki lima simbol khusus.

74

Gambar 3.15. Simbol Flowchart Proses

3.3.10 Diagram Context

Context Diagram adalah bagian dari Data Flow Diagram

(DF) yang berfungsi memetakan model lingkungan, yang

dipresentasikan dengan lingkaran tunggal yang mewakili

keseluruhan sistem. CD menyoroti sejumlah karakteristik penting

sistem, yaitu :

1. Kelompok pemakai, organisasi atau sistem lain dimana

sistem melakukan

2. Komunikasi (sebagai terminator).

3. Data masuk, yaitu data yang diterima sistem dari lingkungan

dan harus diproses dengan cara tertentu.

= Operasi

= Perpindahan atau transportasi

= Inspeksi = Penundaan

= Penyimpanan atau file

75

4. Data keluar, yaitu data yang dihasilkan sistem dan diberikan

ke dunia luar.

5. Penyimpanan data (storage), yaitu digunakan secara

bersama antara sistem dengan terminator. Data ini dapat

dibuat oleh sistem dan digunakan oleh lingkungan atau

sebaliknya dibuat oleh lingkungan dan digunakan

oleh sistem. Hal ini berarti pembuatan simbol data storage

dalam CD dibenarkan, dengan syarat simbol tersebut

merupakan bagian dari dunia diluar sistem. Batasan, antara

sistem dan lingkungan.

Simbol yang digunakan dalam Context Diagram (CD), antara

lain:

1. Persegi panjang (terminator) Untuk berkomunikasi langsung

dengan sistem melalui aliran data Antara terminator tidak

diperbolehkan komunikasi langsung.

2. Lingkaran Untuk menunjukkan adanya kegiatian proses

dalam sistem.

Langkah yang dapat membantu dalam menggambarkan CD :

1. Identifikasikan seluruh informasi yang dibutuhkan.

2. Identifikasikan seluruh data yang dibutuhkan

3. Identifikasikan seluruh tujuan setiap informasi bagi pengguna

4. Identifikasikan seluruh sumber data yang dibutuhkan.

76

Simbol Arti Contoh

Terminator

Aliran Data/Data

Flow

Atau

Proses/Process

Gambar 3.16. Contoh Simbol-simbol Diagram Context

3.3.11 ERD ( Entity Relationsip Diagram )

Entity Relationship Diagram (ERD) adalah model yang

mendeskripsikan hubungan antara penyimpanan dalam DFD

(Husni Iskandar Pohak dan Kusnasriyanto, 1997).

ERD juga digunakan untuk memodelkan struktur data, karena

hal ini relatif komplek. Dengan ERD dapat menjawab data

pertanyaan data apa yang diperlukan, bagaimana data satu dapat

berhubungan dengan data lainnya. Berikut ini simbol-simbol yang

digunakan dalam ERD :

Mahasiswa

Informasi Mahasiswa Baru

Membuat record Mahasiswa

77

Nama Simbol Gambar

Simbol Entity

Digunakan untuk menggambarkan

objek yang dapat didefinisikan

dalam lingkungan pemakai

Simbol Atribut

Digunakan untuk menggambarkan

elemen-elemen dari suatu entity

yang menggambarkan karakter

entity

Simbol Relasi

Digunakan untuk merelasikan

entity yang dapat berhubungan

satu sama lain.

Simbol Garis

Digunakan untuk menghubungkan

anatara entity atau entity dengan

atribut

Gambar 3.17. Simbol-simbol Dalam ERD

78

Beberapa simbol Flowchart yang sering digunakan

Gambar 3.18 Contoh Simbol Flowchart

Simbol Keterangan

Input / Output

Digunakan untuk mewakili data input / output

Proses

Digunakan untuk mewakili suatu proses

Keputusan

Digunakan untuk penyeleksian suatu kondisi

dalam suatu program

Proses terdefinisi

Menunjukan suatu operasi yang rincian

dilakukan ditempat lain

Persiapan

Digunakan untuk menunjukan nilai awal

suatu variabel

Terminal

Menunjukan awal dan akhir suatu program

Garis Alir

Alur dari suatu proses

Konektor

Penghubung kehalaman yang sama atau

kehalaman yang lain

79

Contoh penggunaan Flowchart download :

Gambar 3.19 Contoh Penggunaan Flowchart download

Ambil File

Cek File di dalam database

Cek Login

Ya

Tidak Ada dalam databse

File

Tidak

Ya

Mulai

Selesai

80

BAB IV

ANALISA DAN PERANCANGAN SISTEM

4.1 Analisa

4.1.1 Analisa Permasalahan

Dengan berkembangnya teknologi sekarang ini, Website

Profil Sekolah menjadi salah satu sarana sekolah dalam

penyampaian suatu informasi sekolah kepada khalayak publik

melalui media internet yang dapat diakses oleh siapapun dan

dimanapun.

Berdasarkan hal tersebut diatas maka dapat diambil suatu

permasalahan yaitu bagaimana merancang dan membangun Website

Profil Sekolah. Selain itu Website Profil ini diharapkan dapat

membantu proses penyampaian informasi di SMP Negeri 1 Tarub.

4.1.2 Analisa Sistem

Sistem merupakan sekumpulan elemen-elemen yang saling

berkaitan dan bertanggung jawab memproses masukan atau input

yang satu dengan yang lain, sehingga mampu melakukan keluaran

atau output berupa informasi yang dapat digunakan dalam

pengambilan keputusan.

Dalam merancang Website Profil ini tentunya membutuhkan

beberapa perangkat yang terdiri dari perangkat keras (hardware) dan

perangkat lunak (software) diantaranya :

81

a. Perangkat keras (hardware)

Pembuatan Website Profil ini memerlukan spesifikasi

perangkat keras sebagai berikut :

Tabel 4.1 Spesifikasi Perangkat Keras

b. Perangkat lunak (software)

Dalam pembuatan sebuah Website Profil akan sangat

diperlukan kehadiran software. Dimana software adalah

perangkat lunak dalam bentuk program sesuai dengan

kebutuhan. Dalam pembuatan sebuah Website Profil, software

yang dubutuhkan adalah sebagai berikut :

Tabel 4.2 Spesifikasi Perangkat Lunak

No Nama Spesifikasi

1. Sisem Operasi Windows 7

2. Macromedia Dreamweaver CS3

3. Xampp 180

No Nama Spesifikasi

1. Processor Pentium IV 1,66 GHz atau diatasnya

2. Memory RAM 2 GB DDR3

3. Harddisk 320 GB

4. CD-ROM None

5. Monitor SVGA 1024 x 600 pixel dengan 32-bit

6. Keyboard Touch Pad

7. Mouse Optik

82

4.2 Perancangan Sistem

Pada perancangan sistem informasi website profil ini, hal yang

paling penting adalah pembuatan alur program. Untuk membantu dalam

merancang sistem informasi website profil, maka digunakan DFD dan

Flowchart.

4.2.1 Identifikasi

Mengidentifikasikan semua entitas yang terlibat ke dalam

sistem dan input/output yang terlibat dengan entitas.

Tabel 4.3. Identifikasi

Entitas Input Output

Admin - Data Pegawai

- Berita

- Foto

- List_Pegawai

- List _Berita

- List _Foto

Pengunjung - Informasi Sekolah

- Galery Foto

4.2.2 Context Diagram

Context Diagram merupakan tingkatan tertinggi dalam

diagram aliran data dan hanya memuat satu proses, menunjukan

sistem secara keseluruhan. Aliran dalam context diagram

memodelkan masukan ke sistem dan keluaran dari sistem seperti

halnya sinyal kontrol yang diterima atau dibuat sistem.

83

Gambar 4.1 Context Diagram

Informasi_Sekolah Berita

0

SI Profil

Sekolah

Admin

Pengunjung

Foto

Data Pegawai

List Pegawai

List Berita

List Foto

Galery_Foto

84

4.2.3 Hirarchy Chart

Gambar 4.2 Hirarchi Chart

0

SI Profil

Sekolah

2

Laporan

2.2

List Berita

2.3

List Foto

2.1

List Pegawai

1

Input data

1.2

Berita

1.3

Foto

1.1

Data pegawai

85

4.2.4 DFD Level 0

Gambar 4.3 DFD Level 0

Pengunjung

1

Input Data

2

Laporan

Admin

List_ Pegawai

List _Foto

List_ Berita

Data Pegawai

Berita

Foto

Tb_Foto

Galery Foto

Informasi_Sekolah

Data_Pegawai

Berita

Foto

Tb_Pegawai

Tb_Berita

List_Berita

List_foto

List_Pegawai

D1

D2

D3

86

4.2.5 DFD Level 1

Gambar 4.4 DFD Level 1

1.1

Data Pegawai

Admin

Input Pegawai 2.1

List Pegawai

1.2

Berita

2.2

List Berita

1.3

Foto

2.3

List Foto

D2

Input Pegawai D1 Tb.Pegawai

List_Pegawai

Foto

Berita

Tb.Berita

Berita

Pengunjung

Galeri Foto

D3 Tb.Foto Foto

List_Foto

List_Foto

List_Berita

List_Pegawai

Informasi Sekolah

87

4.2.6 ERD

Gambar 4.5 ERD

Nip

Nama

No Hp

Golongan

Jabatan

Alamat

TTL

Pegawai

Nip

Nama

No Hp

Golongan

Jabatan

Alamat

TTL

File

Id_foto Keterangan

Pegawai

Informasi

Berita

Judul

Nama Pegawai

Alamat Pegawai

File

Keterangan

Berita

Isi

Id_Berita Judul

Nip

Nama

No Hp

Golongan

Jabatan

Alamat

TTL

88

4.3 Perancangan Database

Dalam pembuatan suatu sistem yang baik diperlukan perancangan

database yang baik. Database sebagai tempat penyimpanan data merupakan

salah satu aspek penting yang akan menentukan mutu kerja data program.

Pada Sistem Informasi Website Profil ini menggunakan database

MySQL. Sistem Informasi Website Profil menggunakan struktur database :

a. Admin

Tabel 4.4 Tabel Admin

Nama Field Tipe Data Ukuran Status

User Name Varchar 20 Primary key

Nama Varchar 20

b. Pegawai

Tabel 4.5 Tabel Pegawai

Nama Field Tipe Data Ukuran Status

Id_Pegawai Int 4 Primary key

Nip varchar 12

Nama_Pegawai varchar 50

Tempat_Lahir varchar 20

Tanggal_Lahir Int 4

Bulan_Lahir varchar 10

Tahun_Lahir Int 4

Alamat Text

89

Status Varchar 15

Golongan Varchar 15

Jabatan Varchar 2

No_Hp varchar 15

c. Berita

Tabel 4.6 Tabel Berita

Nama Field Tipe Data Ukuran Status

Id_berita Int 10 Primary key

Kategori varchar 20

Judul varchar 30

Isi Text

d. Gambar

Tabel 4.7 Tabel Gambar

Nama Field Tipe Data Ukuran Status

Id Int 91 Primary key

File_content Blob

File_name Varchar 256

File_type Varchar 256

File_size Int Int

90

4.4 Desain Tampilan

Pada bagian desain tampilan meliputi pembuatan Format tampilan

(layout) yang digunakan. Untuk Website Profil sekolah ini mempunyai

beberapa buah halaman web, diantaranya yaitu halaman Index, halaman

Login Admin, halaman Admin. Selain itu juga desain tampilan Form,

diantaranya Form input data mahasiswa/dosen, Form Login, Form

Download/Upload materi, Form input/latihan kuis, Form Upload/Download

tugas, Form input soal/ujian online dan Form nilai.

4.4.1. Desain Halaman Index

Pada halaman ini yaitu halaman yang berisi header, menu,

content (isi), Foto

Gambar 4.6 Desain Halaman Index

4.4.2. Desaian Login Admin

Pada halaman ini berisi Login, Username, Password, dan

Cancel.

MENU

HEADER

CONTENT

FOOTER

LOGIN

HEADER

MENU

ISI

FOTO

91

Gambar 4.7 Desain Halaman Login Admin

4.4.3. Desain Halaman Admin

Pada halaman ini berisi header, menu, content (isi), kalender,

jam dan Foto.

Gambar 4.8 Desain Halaman Admin

MENU

HEADER

CONTENT

FOOTER

USER NAME :

PASSWORD :

LOGIN

LOGIN

MENU

HEADER

JAM

FOTO

KALENDER

ISI

92

4.4.4. Form Input Data

a. Input data Pegawai

Pada Form ini berisi NIP, nama,Tempat Tanggal Lahir,

alamat, status, jabatan , golongan, No. Hp serta button simpan

dan cancel.

Gambar 4.9 Desain Input Data Pegawai

b. Input List Pegawai

Pada Form ini berisi id_pegawai, NIP, nama

lengkap,alamat, status, jabatan, action,edit, hapus dan detail.

NIP

NAMA

TTL

ALAMAT

STATUS

JABATAN

GOLONGAN

NO HP

CANCEL SIMPAN

√

√

:

:

:

:

:

:

:

:

NIP

NAMA

TTL

ALAMAT

STATUS

JABATAN

GOLONGAN

NO HP

CANCEL SIMPAN

√

√ √ √

:

:

:

:

:

:

:

:

√

√

93

Gambar 4.10 Desain Form Input List Pegawai

c. Cari Pegawai

Pada Form ini berisi Nip, simpan dan cancel

Gambar 4.11 Desain Form Cari Pegawai

Edit

Masukan NIP :

Simpan Cancel

Id_Pegawai NIP Action Jabatan Status Alamat Nama Lengkap

Hapus Detail Edit

Id_Pegawai NIP Action Jabatan Status Alamat Nama Lengkap

Hapus Detail Edit

94

4.4.5. Form Input Berita

Pada Form ini berisi judul berita, kategori,simpan dan cancel .

Gambar 4.12 Desain Form Input Berita

4.4.6. Form Input Foto

Pada Form ini berisi judul foto, keterangan, upload

foto,telusuri, simpan dan cancel.

Gambar 4.13 Desain Form Input Foto

JUDUL BERITA :

KATEGORI :

SIMPAN CANCEL

TELUSURI

JUDUL FOTO

CANCEL SIMPAN

KETERANGAN

UPLOAD FOTO

95

a. Form List Berita

Pada Form ini berisi id_berita, judul, kategori, isi, action,

edit, dan hapus.

Gambar 4.14 Desain List Berita

b. Form List Foto

Pada Form ini berisi id_foto, keteragan, nama file, action,

edit dan hapus..

Gambar 4.15 Desain List Foto

ID_BERITA JUDUL ACTIAON ISI KATEGORI

Edit Hapus

ID_FOTO ACTIAON NAMA FILE KETERANGAN

Edit Hapus

96

4.5 Flowchart

Flowchart merupakan bagan yang menunjukan alir didalam

program atau prosedur sistem secara logika. Dengan Flowchart ini,

maka program dapat dibuat dan dikembangkan. Berikut Flowchart

dari Sistem Informasi Website Profil ini :

a. Flowchart Menu Website

Gambar 4.16 Flowchart Menu Website

Menu = 0

Menu

Menu

End

Berita Profil Beranda Galeri Denah kurikuler Hubungi kami

Star

97

b. Flowchart Admin

Gambar 4.17 Flowchart Admin

$User =” ” $Pasword= “ ”

start

$user,$password

User=admin Password=ad

min

End

Home Akun Galery Foto Berita Pegawai

T

Y

98

c. Flowchart Pegawai

Gambar 4.18 Flowchart Pegawai

Pegawai=o

start

Pegawai

Cari Pegawai

End

Pegawai

Daftar Pegawai Input Pegawai

Pegawai=o

start

Pegawai

Pegawai

Y

T

99

d. Flowchart Input Pegawai

\

Gambar 4.19 Flowchart input Pegawai

$nip=” “ $status=” “ $nama=” “ $jabatan=” “ $TTL=” “ $gol=” " $Alamat=” “ $no

start

$nip,$nama,$TTL,$Alamat,$status,$jabatan,$gol,$no hp

simpan

Data diri telah tersimpan

Tambah Pegawai

Edit Hapus

$nip=” “ $status=” “ $nama=” “ $jabatan=” “ $TTL=” “ $gol=” " $Alamat=” “ $no

start

$nip,$nama,$TTL,$Alamat,$status,$jabatan,$gol,$no hp

simpan

Data diri telah tersimpan

Tambah Pegawai

Edit Hapus

$nip=” “ $status=” “ $nama=” “ $jabatan=” “ $TTL=” “ $gol=” " $Alamat=” “ $no

start

$nip,$nama,$TTL,$Alamat,$status,$jabatan,$gol,$no hp

simpan

Data diri telah tersimpan

Tambah Pegawai

Edit Hapus

End

Tidak

Ya

$nip=” “ $status=” “ $nama=” “ $jabatan=” “ $TTL=” “ $gol=” " $Alamat=” “ $no

start

$nip,$nama,$TTL,$Alamat,$status,$jabatan,$gol,$no hp

simpan

Data diri telah tersimpan

Tambah Pegawai

Edit Hapus

100

e. Flowchart Daftar Pegawai

Gambar 4.20 Flowchart Daftar Pegawai

start

$id=” “ $nip=” “ $nama lgkp=” “ $alamat=” “ $status=” “ $jabatan=” “

Pilih action

Edit

Hapus

ya

Tidak

start

$id=” “ $nip=” “ $nama lgkp=” “ $alamat=” “ $status=” “ $jabatan=” “

Pilih action

Tidak

ya

start

$id=” “ $nip=” “ $nama lgkp=” “ $alamat=” “ $status=” “ $jabatan=” “

Pilih action

Tidak

Edit

Hapus

ya

start

$id=” “ $nip=” “ $nama lgkp=” “ $alamat=” “ $status=” “ $jabatan=” “

Pilih action

Tidak

End

Edit

Hapus

ya

start

$id=” “ $nip=” “ $nama lgkp=” “ $alamat=” “ $status=” “ $jabatan=” “

Pilih action

Tidak

$id,$nip,$nama lgkp,$alamat,$status,$jabatan

101

f. Flowchart Hapus Pegawai

Gambar 4.21 Flowchart Hapus Pegawai

End

Delet=Ø

Start

Delete

Delete= Pegawai

Y

Delete

T

102

g. Flowchart Cari Pegawai

Gambar 4.22 Flowchart Cari Pegawai

start

Select*from pegawai where$NIP=NIP

End

$nip=” “ $status=” “ $nama=” “ $jabatan=” “ $TTL=” “ $gol=” " $Alamat=” “ $no

NIP=Ø

nip= status= nama= jabatan= TTL= gol= Alamat= hp=

103

h. Flowchart Berita

Gambar 4.23 Flowchart Berita

Berita=o

Berita

End

Berita

start

List Berita Input Berita

T

Y

104

i. Flowchart Input Berita

a. b.

Gambar 4.24 input Berita

$Judul Berita=” “ $Kategori berita=” “

$judul berita,$kategori

End

simpan

Berita telah tersimpan

Tambah Berita

Edit Hapus

Tidak

Ya

Star

105

j. Flowchart List Berita

Gambar 4.25 Flowchart list Berita

End

Edit

Hapus

ya

start

$id berita=” “ $judul =” “ $kategori=” “ $isi=” “

Pilih action

Tidak

$id berita,$judul,$kategori,$isi

106

k. lowchart Hapus Berita

Gambar 4.26 Flowchart Hapus Berita

Delete

Delete

End

Id=Ø

Start

Delete=Berita

Y T

107

l. Flowchart Galery Foto

Gambar 4.27 Flowchart Galery Foto

Galeri Foto=O

Galery Foto

End

Galery Foto

start

List Foto Input Foto

T

Y

108

m. Flowchart Input Foto

Gambar 4.28 Flowchart Input Foto

End

$judul=” “ $Keterangan=” “ $File=” “

start

$judul,$keterangan,$file

simpan

Berhasil di simpan

Y

T

109

n. Flowchart List Foto

Gambar 4.29 Flowchart List Foto

End

Lihat

Hapus

ya

start

$nomor=Ø $file name =” “ $file type=” “ $file size= Ø

Pilih Aksi

Tidak

Edit

$nomor, $file name,$file type,$file size

110

o. Flowchart Hapus Foto

Gambar 4.30 Flowchart Hapus Foto

Delete

End

Id=Ø

Start

Delete

Delete=Foto

T

Y

111

4.6 Desain Website Dan Layout Pada SMP N 1 Tarub

Gambaran umum website pada Sistem Informasi Website Profil

Sekolah terdiri dari beberapa menu tampilan diantaranya, beranda, profil

sekolah, berita,gallery foto, ektrakulikuler, denah lokasi, dan hubungi kami.

Adapun secara umum desain website pada Sistem Informasi SMP Negeri 1

Tarub adalah sebagai berikut :

Gambar 4.31 Perancangan Desain website SMP N 1 Tarub

Beranda Profil Sekolah Berita Galery foto Ekstrakulikuler

Footer

Denah Sekolah Hubungi Kami

112

4.4.1 Tampilan Halaman Depan

Gambar 4.32 Tampilan depan web

Tampilan ini menawarkan kepada siswa – siswi SMP N 1

Tarub maupun kepada masyarakat pada umumnya untuk melihat

berita terbaru. Selain itu siswa-siswi maupun Masyarakat bisa

melihat foto – foto profil SMP N 1 Tarub yang ada di halaman itu.

Di halaman depan ini berisi tentang macam – macam berita kegiatan.

.

113

4.4.2 Tampilan Visi dan Misi

Gambar 4.33 Tampilan depan web

Tampilan ini berisi tentang Visi dan Misi SMP N 1Tarub

114

4.4.3 Tampilan Sejarah SMP N 1 Tarub

Gambar 4.34 Tampilan depan web

Tampilan ini berisi tentang Sejarah SMP N 1 Tarub

115

4.4.4 Tampilan Fasilitas SMP N 1 Tarub

Gambar 4.35 Tampilan depan web

Tampilan ini berisi tentang Fasilitas-fasilitas yang ada di

SMP N 1 Tarub

116

4.4.5 Tampilan Input Pegawai

Gambar 4.36 Tampilan depan web

Tampilan ini berisi untuk menginput data pegawai SMP N

1 Tarub

117

4.4.6 Tampilan Input Berita

Gambar 4.12 Tampilan depan web

Gambar 4.37 Tampilan Input Berita

Tampilan ini berisi untuk menginput berita yang ada di

SMP N 1 Tarub

118

4.4.7 Tampilan Input Foto

Gambar 4.38 Tampilan Input Foto

Tampilan ini berisi mengupload foto-foto kegiatan yang

ada di SMP N 1 Tarub

119

4.4.8 Tampilan Ubah Password

Gambar 4.39 Tampilan Ubah Password

Tampilan ini berisi untuk mengubah password

120

4.4.9 Tampilan Logout

Gambar 4.40 Tampilan logout

Tampilan ini berisi untuk logout dari program ini

121

4.7 Proses Upload

Hosting adalah syarat mutlak bagi orang mau membuat website

ataupun tidak. Bisa membuat website biasa, ataupun untuk blog wordpress

dengan self-hosting. Cara yang pertama adalah klik daftar maka akan

terbuka website 000webhost.com seperti gambar dibawah ini. yang

selanjutnya sign up untuk mendaftar.

Gambar 4.41 Tampilan 000webhost

Selanjutnya mengisi form nama domain (No.2) dengan nama domain yang

sudah kita buat sebelumnya yaitu di .co.cc, lalu isi data diri kamu. Isikan.

juga kode angka yang disediakan di form yang ada dibawahnya dan jangan

lupa centang tanda kotak (No.3). Kemudian klik create account (No.4).

122

Gambar 4.42 Tampilan Sign Up

Jika Sudah berhasil, akan terlihat gambar seperti dibawah ini.

Gambar 4.43 Tampilan FTP account

Hal yang perlu di ingat dan dicatat adalah username dan password untuk

FTP acount. Itu akan kita butuhkan untuk masuk ke control panel yang

nantinya Akan terbuka halaman ini.

123

Gambar 4.44 Tampilan DNS

Perhatikan info DNS yang dilingkari merah, karena DNS itulah yang nanti

dibutuhkan untuk pointing atau menghubungkan dari domain ke host.

Sekarang hosting gratis pribadi telah selesai. Langkah selanjutnya adalah

menghubungkan antara domain yang kita punya, dengan webhosting yang

digunakan.

4.5.1 Menghubungkan Domain dengan Webhosting

Langkah-langkah ini menggabungkan pointing antara domain

dengan webhosting, supaya ketika domain kita dipanggil dari web

browser akan otomatis membuka file-file yang kita taruh di

webhosting kita.

124

1. Buka acount domain kita. Dalam hal ini yaitu co.cc atau domain

yang sebelumnya telah kita buat.

2. Klik setup atau terusan dari langkah terakhir dalam cara

membuat domain gratis.

3. Klik manage DNS seperti yang terlihat dalam gambar dibawah

ini (No.1).

Gambar 4.45 Tampilan Manage Domain

4. Isi name server (No. 2) dengan Domain Name System (DNS)

yang telah kita dapatkan sebelumnya di cara daftar webhosting.

Gambar 4.46 Tampilan Manage DNS

125

5. Klik setup (No. 3).

6. Klik OK.

7. Akan terlihat bahwa domain kamu telah menggunakan DNS yang

kamu isi.

Gambar 4.47 Tampilan DNS

8. Selesai, pointing domain ke server ini bisa memakan waktu

paling lama 48 jam. Sekarang website kita sudah jadi dan tinggal

kita isi. Bisa dengan bahasa HTML yang layaknya sebuah situs

atau lebih mudahnya menggunakan blog WordPress dan

mengenai instalasi WordPress.

126

BAB V

PENUTUP

Dari penulisan laporan kerja praktek ini, dapat diambil beberapa

kesimpulan dan saran sehubungan dengan pembuatan website profil sekolah

menggunakan Adobe Dreamweaver Cs 3 yang telah dibahas pada bab-bab

sebelumnya.

5.1. Kesimpulan

Kesimpulan yang dapat diambil dari penulisan laporan kerja praktek

ini adalah sebagai berikut :

a. Penggunaan Adobe Dreamweaver CS 3 merupakan program penyunting

halaman web keluaran Adobe Systems yang dulu dikenal sebagai

Macromedia Dreamweaver keluaran Macromedia. Program ini banyak

digunakan oleh pengembang web karena fitur-fiturnya yang menarik dan

kemudahan penggunaannya.

b. Adobe Dreamweaver CS3 menawarkan pilihan bekerja di intuitif visual

layout interface atau lingkungan coding efisien. Integrasi cerdas dengan

Adobe Photoshop CS3, Adobe Illustrator CS3, Adobe Fireworks CS3,

Adobe Flash CS3 Professional, dan perangkat lunak Adobe CS3

Kontribusi menjamin efisien alur kerja di alat favorit Anda.

c. Pembuatan website merupakan sarana untuk memberikan informasi

suatu instansi, dalam hal ini instansi SMP N 1 Tarub. Sehingga dapat

memperoleh informasi bagi masyarakat umun dan sekitarnya.

127

d. Dengan visualisasi yang menarik website yang dikemas sebagai aplikasi

online semakin menciptakan rasa ketertarikan bagi yang melihatnya

5.2. Saran

Saran yang dapat diberikan dengan selesainya laporan kerja praktek

ini adalah sebagai berikut :

a. Penyusun menyadari bahwa dalam perancangan website ini memiliki

tampilan yang kurang menarik, untuk itu harus diatur kembali komposisi

warna, tata letak dan pemilihan gambar header-nya.

b. Diharapkan agar selalu meng-update website secara berkala agar

informasi dalam website ini, dapat menghasilkan informasi-informasi

yang up to date.

c. Diharapkan untuk mempuyai backup file dimana bagian untuk mencegah

apabila terjadi permasalahan/trouble dalam rancangan website.

d. Adanya perawatan baik terhadap hardware maupun software yang

terencana dan rutin.

e. Penyempurnaan kembali rancangan website yang sudah ada, agar

menjadi website yang lebih baik lagi.

f. Bagi umum, aplikasi website ini masih belum sempurna sebaiknya

ditingkatkan lagi dalam penyusunan kode-kode, listing atau scripting.

g. Bagi para webmaster diharapkan website ini dapat menjadi acuan atau

tolak ukur dalam pembuatan website agar lebih bagus dan lebih kreatif

lagi.

128

DAFTAR PUSTAKA

Jogiyanto HM,1999 Analisis dan Desain Sistem Informasi , Penerbit Andi

Yogyakarta, Yogyakarta

http://www.soft-games-movies.com/2011/06/adobe-dreamweaver-cs3-v90-

portable.html

Heni A., 2010 Pemograman Web Database dengan PHP dan MySQL. Skripta,

Yogyakarta

Jogiyanto, 2009. Konsep dan Desain Sistem, Andi Offset, Yogyakarta

http://dotcomcell.com/kumpulan-artikel/2010/11/adobe-dreamweaver-editor-

web.html

129

LISTING PROGRAM

Source Code pada Form Utama <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi tional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona l.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>SMP Negeri 1 Tarub</title> <link rel="shortcut icon" href="admine_web/counter/ icon.jpg" /> <link href="css/index.css" rel="stylesheet" type="t ext/css" /> <style type="text/css"> <!-- body { margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px; background-color: #4AC5FF; } --> </style><body> <div id="body"> <div id="header"></div> <div id="menu"> <?php include "include/menu.php" ?> </div> <div id="isi"><br /> <table width="95%"align="center"> <tr> <td width="77%" valign="top">Selamat Datang di Website SMP N Tarub</td> </tr> </table> </div> <div id="footer"></div> </div> </body> </html>

130

Source Code pada Form Admin #body { width:850px; height:90%; margin-left:auto; margin-right:auto; border-right: 1px solid #ccc; border-left: 1px solid #ccc; background-color:#33BDFF; } #header { width:auto; height:225px; background-image:url(../images/header.jpg); border-right: 1px solid #ccc; border-left: 1px solid #ccc; } #menu { position: relative; margin: 0; padding: 0; background-color:#CCC; clear: both; } #menu ul { font-family: Verdana, Arial, Helvetica, sans-serif ; font-size: 12px; margin: 0; padding: 0; border: 0; height: 33px; } #menu ul li { list-style-type: none; position: relative; float: left; } #menu ul li a{ display: block; float: left; height: 22px; width: auto; padding-top: 10px; padding-right: 10px; padding-left: 10px; font-weight: bold; color: #000; text-decoration: none;

131

padding-bottom: 0px; border-right: 1px solid #000; border-left: 1px solid #ccc; } #menu ul li a:hover { color: #000; background-color: #ccc; } #menu ul li ul { display: none; } #menu ul li:hover ul { display: block; position: absolute; left: 0px; top: 32px; z-index: 1; } #menu ul li:hover ul li a { display: block; left: 0px; color: #000; background-color: #ccc; width: 170px; height: 14px; filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7; border: 1px solid #000; padding: 7px; font-family: Verdana, Arial, Helvetica, sans-serif ; font-size: 12px; } #menu ul li:hover ul li a:hover { left: 0px; color: #000; border: 1px solid #000; background-color: #ccc; filter: alpha(opacity=70); -moz-opacity: 0.9; -khtml-opacity: 0.9; opacity: 0.9; } #isi { width:auto; height:auto; background-color:#6FFF93; } #footer { width:auto;

132

height:50px; background-image:url(../images/Footer%20Tarub.png) ;

Source Code pada Menu Admin <?php //initialize the session if (!isset($_SESSION)) { session_start(); } // ** Logout the current user. ** $logoutAction = $_SERVER['PHP_SELF']."?doLogout=tru e"; if ((isset($_SERVER['QUERY_STRING'])) && ($_SERVER[ 'QUERY_STRING'] != "")){ $logoutAction .="&". htmlentities($_SERVER['QUERY _STRING']); } if ((isset($_GET['doLogout'])) &&($_GET['doLogout'] =="true")){ //to fully log out a visitor we need to clear the session varialbles $_SESSION['MM_Username'] = NULL; $_SESSION['MM_UserGroup'] = NULL; $_SESSION['PrevUrl'] = NULL; unset($_SESSION['MM_Username']); unset($_SESSION['MM_UserGroup']); unset($_SESSION['PrevUrl']); $logoutGoTo = "login.php"; if ($logoutGoTo) { header("Location: $logoutGoTo"); exit; } } ?> <?php if (!isset($_SESSION)) { session_start(); } $MM_authorizedUsers = ""; $MM_donotCheckaccess = "true"; // *** Restrict Access To Page: Grant or deny acces s to this page function isAuthorized($strUsers, $strGroups, $UserN ame, $UserGroup) { // For security, start by assuming the visitor is NOT authorized. $isValid = False; // When a visitor has logged into this site, the Session variable MM_Username set equal to their username. // Therefore, we know that a user is NOT logged i n if that Session variable is blank. if (!empty($UserName)) {

133

// Besides being logged in, you may restrict ac cess to only certain users based on an ID established when they login. // Parse the strings into arrays. $arrUsers = Explode(",", $strUsers); $arrGroups = Explode(",", $strGroups); if (in_array($UserName, $arrUsers)) { $isValid = true; } // Or, you may restrict access to only certain users based on their username. if (in_array($UserGroup, $arrGroups)) { $isValid = true; } if (($strUsers == "") && true) { $isValid = true; } } return $isValid; } $MM_restrictGoTo = "login.php"; if (!((isset($_SESSION['MM_Username'])) && (isAuthorized("",$MM_authorizedUsers, $_SESSION['MM _Username'], $_SESSION['MM_UserGroup'])))) { $MM_qsChar = "?"; $MM_referrer = $_SERVER['PHP_SELF']; if (strpos($MM_restrictGoTo, "?")) $MM_qsChar = " &"; if (isset($QUERY_STRING) && strlen($QUERY_STRING) > 0) $MM_referrer .= "?" . $QUERY_STRING; $MM_restrictGoTo = $MM_restrictGoTo. $MM_qsChar . "accesscheck=" . urlencode($MM_referrer); header("Location: ". $MM_restrictGoTo); exit; } ?> <ul> <li><a href="../admine_web">HOME</a></li> <li><a href="../admine_web">PEGAWAI</a> <ul> <li><a href="index1.php?a=input_pegawai"> INPUT PEG AWAI</a></li> <li><a href="index1.php?a=list_pegawai"> DAFTAR PEG AWAI</a></li> <li><a href="index1.php?a=cari_pegawai"> CARI PEGAW AI</a></li> </ul> </li> <li><a href="../admine_web">BERITA</a> <ul> <li><a href="index1.php?a=input_berita"> INPUT BERITA</a></li> <li><a href="index1.php?a=list_berita">LIST BER ITA</a></li> </ul> </li> <li><a href="../admine_web">GALERY FOTO</a> <ul> <li><a href="index1.php?a=input_foto"> INPUT FO TO</a></li> <li><a href="index1.php?a=list_foto">LIST FOTO </a></li>

134

</ul> <li><a href="<?php echo $logoutAction ?>">LOGOU T</a></li> </ul> </ul>

Source Code pada Menu User <ul> <li><a href="">BERANDA</a></li> <li><a href="">PROFIL SEKOLAH</a> <ul> <li><a href="index1.php?link=visi_misi">V ISI DAN MISI</a></li> <li><a href="index1.php?link=sejarah_seko lah">SEJARAH SEKOLAH</a></li> <li><a href="index1.php?link=kepala_sekol ah">KEPALA SEKOLAH</a></li> <li><a href="library/struktur_organisasi. php" target="_blank">STRUKTUR ORGANISASI</a></li> <li><a href="index1.php?link=guru_staff"> GURU DAN STAFF</a></li> <li><a href="index1.php?link=fasilitas_sekolah">FASILITAS SEKOLAH</a></li> </ul> </li> <li><a href="">BERITA</a> <ul> <li><a href="index1.php?link=berita_sekol ah">BERITA SEKOLAH</a></li> <li><a href="index1.php?link=pengumuman_sekolah">PENGUMUMA N SEKOLAH</a></li> </ul> </li> <li><a href="">GALERI FOTO</a> <ul> <li><a href="index1.php?link=foto_sekolah ">FOTO SEKOLAH</a></li> </ul> </li> <li><a href="">EXTRAKURIKULER</a> <ul> <li><a href="index1.php?link=osis">OSIS</ a></li> <li><a href="index1.php?link=pramuka">PRA MUKA</a></li> <li><a href="index1.php?link=pmr">PMR</a> </li> </ul> </li> <li><a href="index1.php?link=hubungi_kami">HU BUNGI KAMI</a> </ul>