Sistem Informasi D3 Teknik Informatika Fakultas Mipa USU Berbasis Web Menggunakan PHP Dan MYSQL

(1)

MENGGUNAKAN PHP DAN MYSQL

TUGAS AKHIR

GINANDA A PRAYUDHA

112406013

PROGRAM STUDI D3 TEKNIK INFORMATIKA

DEPARTEMEN MATEMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS SUMATERA UTARA

(2)

TUGAS AKHIR

Diajukan untuk melengkapi tugas dan memenuhi syarat memperoleh Ahli Madya

GINANDA A PRAYUDHA

112406013

PROGRAM STUDI D3 TEKNIK INFORMATIKA

DEPARTEMEN MATEMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS SUMATERA UTARA

(3)

PERSETUJUAN

Judul

: SISTEM

INFORMASI

D3

TEKNIK

INFORMATIKA

FAKULTAS

MIPA

USU

BERBASIS WEB MENGGUNAKAN PHP DAN

MYSQL

Kategori

: TUGAS AKHIR

Nama

: GINANDA A PRAYUDHA

Nomor Induk Mahasiswa

: 112406013

Program Studi

: DIPLOMA (D3) TEKNIK INFORMATIKA

Departemen

: MATEMATIKA

Fakultas

: MATEMATIKA DAN ILMU PENGETAHUAN

ALAM (FMIPA) UNIVERSITAS SUMATERA

UTARA

Disetujui di

Medan, Juni 2014

Disetujui oleh:

Program Studi D3 Teknik Informatika

FMIPA USU

Ketua,

Pembimbing,

(4)

PERNYATAAN

SISTEM INFORMASI D3 TEKNIK INFORMATIKA

FAKULTAS MIPA USU BERBASIS WEB

MENGGUNAKAN PHP DAN MYSQL

TUGAS AKHIR

Saya mengakui bahwa tugas akhir ini adalah hasil kerja saya sendiri, kecuali beberapa

kutipan dan ringkasan yang masing-masing disebutkan sumbernya.

Medan, Juni 2014

(5)

PENGHARGAAN

Puji syukur kita panjatkan kehadirat Tuhan Yang Maha Esa yang telah melimpahkan

rahmat dan hidayah-Nya sehingga tugas akhir ini berhasil diselesaikan dengan baik

dalam waktu yang telah ditetapkan. J

udul tugas akhir ini adalah “

Sistem Informasi D3

Teknik Informatika Fakultas MIPA USU Berbasis Web Menggunakan PHP dan

MySQL

”. Tugas akhir ini merupakan syarat untuk

dapat menyelesaikan pendidikan

program studi D-III Teknik Informatika Fakultas Matematika dan Ilmu Pengetahuan

Alam di Universitas Sumatera Utara.

Pada kesempatan ini penulis mengucapkan banyak terima kasih kepada pihak

yang telah banyak membimbing, mengarahkan, membantu, dan memberikan

dukungan semangat dan kasih sayang dalam menyelesaikan tugas akhir ini. Penulis

mengucapkan terima kasih kepada : Bapak Prof. Dr. Saib Suwilo, M.Sc selaku dosen

pembimbing yang telah bersedia memberi arahan, bimbingan dan petunjuk serta

nasehat kepada penulis dalam menyelesaikan tugas akhir ini. Bapak Dr. Sutarman,

M.Sc selaku Dekan Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas

Sumatera Utara. Bapak Prof. Dr. Tulus, M.Si selaku Ketua Departemen Matematika

Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sumatera Utara. Ibu

Dr. Elly Rosmaini, M.Si selaku Ketua Program Studi D-III Teknik Informatika

Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sumatera Utara. Bapak

Syahriol Sitorus, S.Si, M.IT selaku Sekretaris Program Studi D-III Teknik Informatika

Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sumatera Utara.

Seluruh Bapak dan Ibu Dosen yang telah membimbing saya selama menjalani

pendidikan di program studi D-III Teknik Informatika Fakultas Matematika dan Ilmu

Pengetahuan Alam Universitas Sumatera Utara. Terkhusus penulis ucapkan terima

kasih yang sebesar

–

besarnya kepada Ayahanda tercinta Sugito dan Ibunda tersayang

Sri Rahayu, serta adik

–

adik yang telah memberikan doa, dukungan moril dan

materil, motivasi, semangat dan kasih sayang yang tiada henti kepada penulis

sehingga penulis dapat menyelesaikan tugas akhir ini. Indra, Rudi, Yudha, Gusnan,

Hardi, dan Lufhan sebagai rekan penulis selama penyusunan tugas akhir ini.

(6)

Penulis menyadari bahwa tugas akhir ini masih memiliki kekurangan, untuk itu

penulis mengharapkan kritik dan saran yang konstruktif dari semua pihak untuk

perbaikan dan kesempurnaan tugas akhir ini.

Akhirnya penulis berharap semoga tugas akhir ini bermanfaat bagi para

pembaca.

Medan, Juni 2014

(7)

ABSTRAK

Kemajuan teknologi informasi dan komunikasi yang sangat cepat membuat

semua aspek kehidupan harus mengikutinya. Salah satunya adalah dunia usaha,

dengan memanfaatkan teknologi informasi dan komunikasi maka akan meningkatkan

efisiensi di segala bidang. Berdasarkan fakta diatas, pada penulisan tugas akhir ini

penulis membahas tentang bagaimana cara merancang sebuah sistem informasi

dalam sebuah instansi. Disini penulis menganalisa dan merancang struktur sistem

informasi yang akan dibangun dan yang digunakan yaitu bahasa pemrograman serta

integrasi dari keduanya. Sistem ini dikembangkan dengan menggunakan bahasa

pemrograman PHP dan MySQL dan disertai dengan menggunakan database yang

disesuaikan dengan kebutuhan dalam proses perancangan sistem ini. Adapun hal

yang terdapat dalam sistem ini meliputi berbagai informasi seperti informasi

profil prodi, data dosen, data jadwal kuliah, ruangan, daftar mata kuliah, dan data

kelas. Dari hasil penelitian tugas akhir ini, dapat disimpulkan bahwa sistem

informasi berlangsung secara online dan terkomputerisasikan dengan baik.

(8)

DAFTAR ISI

Halaman

Persetujuan

ii

Pernyataan

iii

Penghargaan

iv

Abstrak

vi

Daftar Isi

vii

Daftar Tabel

x

Daftar Gambar

xi

Bab 1.

Pendahuluan

1

1.1. Latar Belakang

1

1.2. Rumusan Masalah

2

1.3. Batasan Masalah

3

1.4. Maksud dan Tujuan

3

1.5. Manfaat

4

1.6. Tinjauan Pustaka

4

1.7. Metodologi Penelitian

6

1.8. Sistematika Penelitian

7

Bab 2.

Landasan Teori

9

2.1. Pengertian Sistem Informasi

9

2.2. Pengertian Portal Akademik

12

2.3. Pengenalan Internet

13

2.3.1. Network

13

2.3.2. Web Server

14

2.3.3. World Wide Web (WWW)

15

2.3.4. Hyper Text Transfer Protocol (HTTP)

15

2.4. Pengenalan HTML

16

2.4.1. Sejarah Asal Mula HTML

16

2.4.2. Struktur Dasar HTML

17

2.4.3. Sintaks Dasar HTML

19

2.5. Pengenalan Personal Home Page (PHP)

21

2.5.1. Sejarah Asal Mula PHP

22

2.5.2. Variabel pada PHP

23

2.5.3. Konsep Dasar Penggunaan PHP

24

2.6. Database MySQL

25

2.6.1. Tipe Dasar Mysql

27

(9)

2.8. Cascading Style Sheet (CSS)

35

2.8.1. Struktur CSS

36

2.8.2. Penulisan CSS

37

2.8.3. Selektor

38

2.8.4. Memformat Dokumen dengan CSS

39

2.9. JavaScript

41

2.9.1. Penulisan JavaScript

42

2.9.2. Variabel

43

2.9.3. Kondisi

44

Bab 3.

Perancangan Sistem

47

3.1. Perancangan Sistem

47

3.2. Data Flow Diagram (DFD)

48

3.3. Perancangan Database

49

3.4. Flowchart

52

3.4.1. Flowchart Menu Utama

54

3.4.2. Flowchart Login Admin

55

3.4.3. Flowchart Menu Utama Admin

56

3.5. Perancangan Algoritma

57

Bab 4.

Implementasi Sistem

62

4.1. Pengertian Implementasi Sistem

62

4.2. Tujuan Implementasi

63

4.3. Komponen Dalam Implementasi Sistem

63

4.3.1. Komponen Perangkat Keras (Hardware)

64

4.3.2. Komponen Perangkat Lunak (Software)

64

4.3.3. Kebutuhan Brainware

65

4.4. Tampilan Halaman Website

65

Bab 5.

Kesimpulan dan Saran

70

5.1. Kesimpulan

70

5.2. Saran

71

(10)

DAFTAR TABEL

Nomor

Judul

Halaman

Tabel

2.1.

Tipe Data MySQL

28

3.1.

Simbol DFD

49

3.2.

Tabel Admin

50

3.3.

Tabel Dosen

50

3.4.

Tabel Jadwal

51

3.5.

Tabel Kelas

51

(11)

DAFTAR GAMBAR

Nomor

Judul

Halaman

Gambar

3.1.

Alur Flowchart Menu Utama

54

3.2.

Alur Flowchart Login Admin

55

3.3.

Alur Flowchart Menu Utama Admin

56

4.1.

Halaman Home

65

4.2.

Halaman Profil

66

4.3.

Halaman Sejarah

66

4.4.

Halaman Visi Misi

67

4.5.

Halaman Fasilitas

67

4.6.

Halaman Roster

68

4.7.

Halaman Daftar Dosen

68

4.8.

Halaman Ruangan

69

(12)

ABSTRAK

Kemajuan teknologi informasi dan komunikasi yang sangat cepat membuat

semua aspek kehidupan harus mengikutinya. Salah satunya adalah dunia usaha,

dengan memanfaatkan teknologi informasi dan komunikasi maka akan meningkatkan

efisiensi di segala bidang. Berdasarkan fakta diatas, pada penulisan tugas akhir ini

penulis membahas tentang bagaimana cara merancang sebuah sistem informasi

dalam sebuah instansi. Disini penulis menganalisa dan merancang struktur sistem

informasi yang akan dibangun dan yang digunakan yaitu bahasa pemrograman serta

integrasi dari keduanya. Sistem ini dikembangkan dengan menggunakan bahasa

pemrograman PHP dan MySQL dan disertai dengan menggunakan database yang

disesuaikan dengan kebutuhan dalam proses perancangan sistem ini. Adapun hal

yang terdapat dalam sistem ini meliputi berbagai informasi seperti informasi

profil prodi, data dosen, data jadwal kuliah, ruangan, daftar mata kuliah, dan data

kelas. Dari hasil penelitian tugas akhir ini, dapat disimpulkan bahwa sistem

informasi berlangsung secara online dan terkomputerisasikan dengan baik.

(13)

BAB 1

PENDAHULUAN

1.1.

Latar Belakang

Perkembangan Teknologi Internet yang pesat telah memicu munculnya berbagai

aplikasi baru termasuk di bidang Teknologi Informasi. Website adalah salah satu

revolusi dibidang informasi berbasis teknologi internet. Website diharapkan dapat

dijadikan alternative bagi pengembangan sistem informasi yang lebih efektif dan

efesien dengan biaya yang lebih rendah dimasa mendatang. Hal ini dapat berjalan

lancar apabila ada suatu jaringan internet. Salah satu bidang yang mendapatkan

dampak yang cukup berarti dengan perkembangan teknologi ini adalah bidang

pendidikan, dimana pada dasarnya pendidikan merupakan suatu proses

komunikasi dan informasi dari pendidik kepada peserta didik yang berisi

informasi informasi pendidikan, yang memiliki unsur

‐

unsur pendidik sebagai

sumber informasi, media sebagai sarana penyajian ide, gagasan dan materi

pendidikan serta peserta didik itu sendiri, beberapa bagian unsur ini mendapatkan

sentuhan media teknologi informasi.

(14)

dapat memanfaatkan fasilitas ini sebagai media informasi yang cepat, akurat dan

up to date dalam menyajikan informasi yang diperlukan.

Dengan adanya Website diharapkan dapat membantu mahasiswa pada umumnya

dan universitas pada khususnya untuk melakukan penyebaran informasi dengan

cepat, murah, dan efektif. untuk itu dalam tugas akhir ini penulis mengambil judul

“

SISTEM INFORMASI D3 TEKNIK INFORMATIKA FAKULTAS MIPA USU

BERBASIS WEB MENGGUNAKAN PHP DAN MYSQL

“.

1.2.

Rumusan Masalah

Berdasarkan uraian dari latar belakang permasalahan di atas, maka masalah yang

akan dibahas adalah sebagai berikut :

1.

Pendataan mata kuliah, jadwal kuliah, ruang kuliah, kelas asuh, dan

dosen pembimbing mata kuliah.

2.

Penyampaian informasi seperti profil program studi, sejarah, akreditasi,

tentang fakultas, maupun universitas.

3.

Penyampaian informasi yang kurang tepat karena mahasiswa dan dosen

harus datang langsung ke universitas untuk mendapatkan informasi

yang dibutuhkan.

(15)

1.3.

Batasan Masalah

Untuk menghindari pembahasan diluar permasalahan, berikut ini adalah batasan

permasalahan :

1.

Sistem hanya menangani dan membahas tentang informasi umum

universitas, fakultas, dan program studi D3 Teknik Informatika

khususnya melalui jalur online (internet).

2.

Sistem hanya menangani dan membahas tentang jadwal kuliah D3

Teknik Informatika FMIPA USU secara online.

1.4.

Maksud dan Tujuan

Maksud diadakannya penelitian ini adalah untuk membantu memberikan

informasi yang berkaitan dengan kegiata n akademik. Tujuan dari

penelitian ini adalah sebagai berikut :

1.

Untuk Memenuhi salah satu persyaratan akhir menyelesaikan

pendidikan Diploma III Teknik Informatika di Universitas Sumatera

Utara.

2.

Dengan “Jadwal Mata Kuliah Online” ini dapat menjadi informas

i

untuk semua orang (Mahasiswa dan Dosen), Masyarakat Umum dan

Dinas Institusi yang ingin dibutuhkanya.

(16)

1.5.

Manfaat

1.

Bagi Penulis

Menambah pengetahuan dan pengalaman bagi penulis terutama dalam

pembuatan sistem informasi yang berbasis web, dan mempraktekkan

apa yang telah penulis dapatkan di bangku kuliah.

2.

Bagi Akademik

Sebagai literatur bagi mahasiswa lain yang akan membuat tugas akhir,

yang berhubungan dengan sistem informasi akademik berbasis web.

3.

Bagi Umum

Menjadikan Website ini Sebagai media untuk mencari informasi

tentang akademik yang lengkap dengan spesifikasi yang terperinci.

1.6.

Tinjauan Pustaka

(17)

1.

MySQL adalah sebuah perangkat lunak manajemen basis data SQL

(database management system) atau DBMS yang

multithread,

multi-user, dengan sekitar 6 juta instalasi di seluruh dunia. MySQL AB

membuat MySQL tersedia sebagai perangkat lunak gratis dibawah

lisensi GNU General Public License (GPL), tetapi mereka juga menjual

dibawah lisensi komersial untuk kasus-kasus dimana penggunaannya

tidak cocok dengan penggunaan GPL.

2.

Sublime merupakan program yang banyak digunakan oleh pengembang

web karena fitur

–

fiturnya yang menarik dan kemudahan

penggunaannya.

3.

PHP adalah sebuah program bahasa

script yang tidak melakukan

sebuah kompilasi dalam penggunaanya.

Web Server

yang mendukung

php dapat ditemukan dimana - mana dari mulai IIS sampai dengan

apache, dengan konfigurasi yang relatif mudah. Dalam sisi

pengembangan lebih mudah, karena banyaknya milis - milis dan

developer yang siap membantu dalam pengembangan. Dalam sisi

(18)

1.7.

Metodologi Penelitian

Untuk menyelesaikan penelitian ini, penulis melakukan penerapan metode

penelitian dalam memperoleh data-data yang dibutuhkan sehingga lebih mudah

dalam menyelesaikan penelitian ini dan mendapatkan hasil yang lebih baik.

Metode penelitian yang penulis lakukan adalah :

1.

Penelitian Kepustakaan (Library Research)

Disini penulis menggunakan buku-buku yang berhubungan dengan

masalah dan melakukan

searching literatur di

internet sehingga dapat

membantu penyelesaian masalah.

2.

Penelitian Lapangan (Field Research)

Penelitian dilakukan langsung ke universitas yang bersangkutan yaitu

Kantor Jurusan Program Studi Diploma 3 Teknik Informatika FMIPA

USU dimana penulis melakukan pengumpulan data dengan cara

bertanya langsung kepada pihak yang terkait. Adapun point-point yang

penulis utarakan dalam penelitian lapangan ini adalah :

a.

Penulis mengadakan tanya jawab kepada pihak program studi yang

melibatkan karyawan program studi mengenai masalah yang

sedang diteliti serta mengumpulkan bahan-bahan yang dibutuhkan,

yaitu : penyediaan data dan fakta tentang proogram studi, profil

program studi dan yang telah diterangkan pada bagian batasan

masalah.

b.

Penulis melakukan pengamatan secara langsung terhadap objek

(19)

c.

Penulis melakukan pengambilan data melalui hal-hal atau variabel

yang berupa catatan, transkip, buku-buku serta sumber-sumber lain

yang berkaitan dengan D3 Teknik Informatika khususnya

mengenai jadwal online.

1.8.

Sistematika Penulisan

Sistematika penulisan laporan Tugas Akhir ini adalah sebagai berikut :

BAB 1 : PENDAHULUAN

Penulis menguraikan Latar Belakang, Rumusan Masalah, Batasan

Masalah, Madsud dan Tujuan Penelitian, M a n f a a t P e n e l i t i a n ,

T i n j a u a n P u s t a k a , Metode Penelitian dan Sistematika Penulisan.

BAB 2 : LANDASAN TEORI

Dalam bab ini penulis menguraikan beberapa hal yang berhubungan

dengan aplikasi

web

dinamis yang ingin dibangun penulis yaitu

sejarah singkat internet,

World Wide Web,

HTML (HyperText Markup

Language), pengenalan PHP dan MySQL.

BAB 3 : PERANCANGAN SISTEM

(20)

BAB 4 : IMPLEMENTASI SISTEM

Dalam bab ini penulis menyajikan tentang pengertian implementasi

sistem, tujuan implementasi sistem serta spesifikasi aplikasi.

BAB 5 : KESIMPULAN DAN SARAN

(21)

BAB 2

LANDASAN TEORI

2.1. Pengertian Sistem Informasi

Suatu sistem pada dasarnya adalah sekolompok unsur yang erat hubungannya satu

dengan yang lain, yang berfungsi bersama

–

sama untuk mencapai tujuan tertentu.

Secara sederhana, suatu sistem dapat diartikan sebagai suatu kumpulan atau

himpunan dari unsur, komponen, atau variabel yang terorganisir, saling

berinteraksi, saling tergantung satu sama lain dan terpadu. Dari defenisi ini dapat

dirinci lebih lanjut pengertian sistem secara umum, yaitu :

1.

Setiap sistem terdiri dari unsur

–

unsur.

2.

Unsur

–

unsur tersebut merupakan bagian terpadu sistem yang

bersangkutan.

3.

Unsur sistem tersebut bekerja sama untuk mencapai tujuan sistem.

4.

Suatu sistem merupakan bagian dari sistem lain yang lebih besar.

(22)

Sistem informasi adalah suatu sistem dalam suatu organisasi yang

mempertemukan kebutuhan pengolahan transaksi harian. Sistem informasi

mendukung fungsi operasi organisasi yang bersifat manajerial, dengan kegiatan

strategi dari suatu organisasi untuk dapat menyediakan kepada pihak luar tertentu

dengan informasi yang diperlukan untuk pengambilan keputusan. Sistem

informasi dalam suatu organisasi dapat dikatakan sebagai suatu sistem yang

menyediakan informasi bagi semua tingkatan dalam organisasi tersebut kapan saja

diperlukan. Sistem ini menyimpan, mengambil, mengubah, mengolah dan

mengkomunikasikan informasi yang diterima dengan menggunakan sistem

informasi atau peralatan sistem lainnya.

Sistem informasi terdiri dari komponen

–

komponen yang disebut blok

bangunan (building blok), yang terdiri dari komponen

input, komponen model,

komponen

output, komponen

teknologi, komponen

hardware, komponen

software, komponen basis data, dan komponen kontrol. Semua komponen tersebut

saling berinteraksi satu dengan yang lain membentuk suatu kesatuan untuk

mencapai sasaran.

1.

Komponen input mewakili data yang masuk ke dalam sistem informasi.

Input disini termasuk metode dan media untuk menangkap data yang

akan dimasukkan, yang dapat berupa dokumen

–

dokumen dasar.

(23)

3.

Komponen

output adalah hasil dari sistem informasi atau keluaran

yang merupakan informasi yang berkualitas dan dokumentasi yang

berguna untuk semua pemakai sistem.

4.

Komponen teknologi merupakan

“tool box”

dalam sistem informasi.

Teknologi digunakan untuk menerima

input, menjalankan model,

menyimpan, mengakses data, menghasilkan dan mengirimkan keluaran,

serta membantu pengendalian dari sistem secara keseluruhan.

5.

Komponen

hardware berperan penting sebagai suatu media

penyimpanan vital bagi sistem informasi, yang berfungsi sebagai

tempat untuk menampung database atau lebih mudah dikatakan sebagai

sumber data dan informasi untuk memperlancar dan mempermudah

kerja dari sistem informasi.

6.

Komponen

software berfungsi sebagai tempat untuk mengolah,

menghitung dan memanipulasi data yang diambil dari hardware untuk

menciptakan suatu informasi.

(24)

dimanipulasi menggunakan perangkat lunak paket yang disebut DBMS

(Database Management System).

8.

Komponen kontrol. Banyak hal yang dapat merusak sistem informasi,

seperti bencana alam, api, temperatur, air, debu, kecurangan

–

kecurangan, kegagalan

–

kegagalan sistem itu sendiri, ketidakefisienan,

sabotase dan lain sebagainya. Beberapa pengendalian perlu dirancang

dan diterapkan untuk meyakinkan bahwa hal

–

hal yang dapat merusak

sistem dapat dicegah ataupun bila terlanjur terjadi kesalahan

–

kesalahan dapat langsung cepat diatasi.

2.2. Pengertian Portal Akademik

Portal Akademik adalah suatu sistem yang dibuat oleh manusia yang dapat

membantu mengelola data-data penting didalam suatu , seperti pengelolaan data

dosen dan staf pegawai, data mahasiswa, data fasilitas, data mata mata kuliah serta

menyajikan layanan informasi untuk mendukung perencanaan dan pengambilan

keputusan yang baik.

(25)

Sistem Informasi Akademik dapat melakukan update untuk data mahasiswa.

Beberapa bagian yang bersangkutan dengan modul mata kuliah dapat

diintegrasikan dibawah Sistem Informasi Akademik, modul mata kuliah dapat

berupa bahan mata kuliah ataupun soal-soal ujian maupun ujian tengah semester

yang merupakan proses yang terjadi pada Akademik .

2.3. Pengenalan Internet

Internet

(Interconnected Network) merupakan jaringan komputer yang terdiri

dari jaringan independen yang dihubungkan satu dengan yang lainnya. Secara

etimologis,

internet

berasal dari bahasa Inggris yakni

Inter

berarti antar dan

Net

yang berarti jaringan sehingga dapat diartikan hubungan antar jaringan.

Sampai saat ini

internet

sudah menghubungkan lebih dari 1 juta jaringan

komputer dengan pemakai lebih dari 100 juta orang.

Internet

adalah jaringan

luas di komputer yang lazim disebut dengan

World Wide Web, yang secara

ringkas

internet

adalah sumber informasi dan alat komunikasi serta hiburan.

2.3.1. Network

(26)

lain, dapat memberi berita ke komputer lain walaupun berlainan area.

Networ k

merupakan cara yang sangat berguna untuk mengintegrasikan sistem informasi

dan menyalurkan arus informasi dari satu area ke area lainnya.

2.3.2. Web Server

Web server

adalah

internet server

yang mampu untuk melayani koneksi

perpindahan data dalam protokol

http

web server

dari

internet server

di samping

e-mail. Dikarenakan web server

dirancang untuk menampilkan data, dimulai dari

teks, hypertext, gambar, yang merupakan keunggulan dari web sehingga

web

tidak

hanya dapat diterima di universitas tetapi di seluruh perusahaan komersial

yang dapat menampilkan datanya dalam

internet. Macam

–

macam

web server

antara lain Apache (Open Source), Xitami, IIS, PWS.

Website (situs web) merupakan alamat (URL) yang berfungsi sebagai tempat

penyimpanan data dan informasi dengan berdasarkan topik tertentu.

URL adalah

suatu sarana yang digunakan untuk menentukan lokasi informasi pada suatu

web

server. Situs atau web dapat dikategorikan menjadi 2 yaitu :

1.

Web Sta tic, yaitu

web yang berisi atau menampilkan infomasi

–

informasi yang sifatnya statis (tetap).

2.

Web Dina mic, yaitu

web yang menampilkan informasi serta dapat

(27)

2.3.3. World Wide Web (WWW)

World Wide Web (WWW) adalah jaringan tak terbatas komputer yang

dikategorikan menjadi dua, yaitu

Client

dan

Server

dengan menggunakan

software khusus membentuk sebuah jaringan yang disebut jaringan client

–

server.

Pada prinsipnya

Wor ld Wide Web

bekerja dengan cara menampilkan

file

–

file

HTML yang berasal dari

server web

pada program

client

khusus, yaitu

browser

web. Program

browser web pada

client

mengirimkan permintaan kepada

server

web, yang kemudian akan dikirimkan oleh

server

dalam bentuk HTML.

File

HTML berisi instruksi yang diperlukan untuk membentuk tampilan. Perintah

–

perintah HTML ini kemudian diterjemahkan oleh

browser web

sehingga isi

informasinya dapat ditampilkan secara visual kepada pengguna. ( Tutang, 2001 )

2.3.4. Hyper Text Transfer Protocol (HTTP)

(28)

2.4. Pengenalan HTML

Hypertext Markup Language (HTML)

adalah

script

di mana kita bisa

menampilkan informasi dan daya kreasi kita lewat

internet.

HTML sendiri

adalah suatu dokumen teks biasa yang mudah dimengerti dibanding bahasa

pemrograman lainnya, dan karena bentuknya itu maka HTML dapat dibaca

oleh berbagai

platform seperti Windows, Linux, dan Macintosh. Kata

“

Markup

Language

“

pada

HTML menunjukkan fasilitas yang berupa tanda tertentu

dalam skrip HTML dimana kita bisa mengatur judul, garis, tabel, gambar, dan

lain

–

lain dengan perintah yang telah ditentukan pada elemen HTML

.

Penamaan dokumen

HTML

dapat dilakukan dengan memilih suatu nama,

sembarang nama, kemudian menambahkan sebuah ekstensi

“

.h

tm”

atau

“

.

html”

(tanda kutip tidak perlu dituliskan karena digunakan sebagai penjelas

saja).

HTML sendiri dikeluarkan oleh W3C (World Wide Web Consortium), setiap

terjadi perkembangan

level HTML, harus dievaluasi ketat dan disetujui oleh

W3C. Hingga kini versi terakhir

HTML yang telah disetujui oleh

W3C

H TML4.01.

2.4.1.

Sejarah Asal Mula HTML

(29)

dinamakan

Markup Language.

Namun pihak IBM member nama

Generalized

Markup Language (GML).

Pada tahun 1986, ISO mengeluarkan standarisasi bahasa markup

berdasarkan GML dengan nama

Standard Generalized Markup Language

(SGML). Pada tahun 1989, Caillau Tim bekerja sama dengan Banners Lee Robert,

ketika bekerja di CERN. Mencoba untuk mengembangkan SGML. Dari tangan

merekalah lahir HTML (Hyper Text Markup Language) yang kini digunakan

untuk membuat halaman website. HTML ini pertama kali dipopulerkan oleh

Browser Mosaic.

Sejak tahun 1990, bahasa ini mengalami perkembangan yang cukup pesat.

Apalagi sejak tahun 1996, World Wide Web Consortium (W3C) turut

mengembangkan html dan mengeluarkan versi 3.2. Sejak saat itulah html

digunakan sebagai bahasa standar internet yang kini dikendalikan olehW3C.

2.4.2.

Struktur Dasar HTML

HTML terdiri dari beberapa bagian yang fungsinya sebagai penanda suatu

kelompok perintah tertentu, misalnya kelompok perintah

for m yang ditandai

dengan kode

< form> ,

judul dengan

< title>

dan sebagainya. Untuk

mengetahui lebih lanjut mengenai bagian

–

bagian HTML perhatikan skema di

bawah ini :

< html>

< head>

(30)

< /head>

< body>

isi dar i hala ma n web

< /body>

< /html>

Keterangan:

1.

Dokumen HTML selalu diawali dengan tanda tag pembuka < html>

dan

diakhiri dengan tanda tag penutup < /html>

2.

Pada elemen

head

< head> < /head>

, dapat kita sisipkan kode

–

kode untuk menuliskan keterangan tentang dokumen

HTML. Atau

dapat juga kita sisipkan kode

–

kode pemrograman

web seperti

Ja vaScript,

VBScripts, atau

CSS

untuk menambah daya tarik pada

situs yang kita buat agar lebih menarik dan dinamis.

3.

Elemen

body < body> < /body>

berisi

tag

–

tag untuk isi atau

la yout

tampilan

situs

kita,

seperti

< font> < /font>

,

< table> < /table> ,

< form> < /for m> .

(31)

seperti

< br>

,

< hr>

,

< img>

, dan lain

–

lain.

2.4.3.

Sintaks Dasar HTML

Sintaks dasar meliputi bagian-bagian perintah dasar yang dimiliki oleh html,

diantaranya sebagai berikut :

1.

P (Paragraph), berfungsi untuk mengganti paragraph yang diikuti

dengan baris kosong di awal dan di akhir paragraph. Cara

penggunaannya dapat dilakukan dengan perintah tag <p> dan diakhiri

dengan tag </p>. Jika tidak diberi tanda penutupnya, maka seluruh file

yang berada di bawahnya akan diikuti dengan baris kosong di akhir

paragraph.

2.

BR (Line Break), berfungsi mengganti baris.

Sintaksnya : <br>

3.

H1, H2, H3, H4, H5, H6 (Header), berfungsi untuk membuat header

dengan urutan enam jenis berbeda dengan tercetak tebal.

Sintaksnya :

4.

B (Bold), berfungsi untuk membuat tampilan teks tercetak tebal.

Sintaksnya : <b>……</b>

5.

i (italic), berfungsi untuk memebuat tampilan teks tercetak miring.

Sintaksnya : <i>……</i>

(32)

bawah.

Sintaksnya : <u>……</u>

7.

PRE (Preformated Text), berfungsi untuk menampilkan teks apa adanya.

Sintaksnya :

<PRE>

……

</PRE>

8.

Center, berfungsi untuk menampilkan teks dengan posisi horizontal

tengah.

Sintaksnya :

……

</ center >

9.

BaseFont, berfungsi untuk mengubah dasar ukuran huruf dari web

browser.

Sintaksnya :

10.

Font, berfungsi untuk mengubah jenis, ukuran, warna, dan tampilan

huruf.

Sintaksnya :

……

</ font >

(33)

Sintaksnya : <hr>

12.

OL (Ordered List), berfungsi untuk membuat nomor daftar urut.

Sintkasnya :

……

</ol>

13.

UL (Unordered List), berfungsi untuk membuat daftar tanpa nomor urut

(dalam format bullet).

Sintaksnya :

……

</ul>

14.

LI (List Item), merupakan isi pada daftar.

Sintaksnya :

……

</li>

2.5. Pengenalan Personal Home Page (PHP)

(34)

1.

Bahasa pemrograman

P HP

adalah sebuah bahasa

scr ipt

yang tidak

melakukan sebuah kompilasi dalam penggunaanya.

2.

Web Server

yang mendukung

PHP dapat ditemukan di mana

–

mana

dari mulai

IIS sampai dengan

apache, dengan konfigurasi yang relatif

mudah.

3.

Dalam sisi pengembangan lebih mudah, karena banyaknya

milis

–

milis dan developer yang siap membantu dalam pengembangan.

4.

Dalam sisi pemahamanan,

PHP

adalah bahasa

scr ipting

yang paling

mudah karena referensi yang banyak.

PHP adalah bahasa

open source

yang dapat digunakan diberbagai

mesin (Linux, Unix, Windows) dan dapat dijalankan secara

runtime

melalui

console

serta juga dapat menjalankan perintah

–

perintah sistem. Sistem database

yang didukung oleh PHP adalah Oracle, Sybase dan MySQL.

2.5.1. Sejarah Asal Mula PHP

PHP pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995. Pada waktu itu

PHP bernama

FI (Form Interpreted). Pada saat tersebut

PHP adalah

sekumpulan

script yang digunakan untuk mengolah data form dari web.

Perkembangan selanjutnya adalah Rasmus melepaskan kode sumber

tersebut dan menamakannya

P HP/FI, pada saat tersebut kepanjangan dari

PHP/FI adalah Personal Home Page/Form Interpreter. Dengan pelepasan kode

(35)

Pada November 1997, dirilis

PHP/FI 2.0. Pada rilis ini

interpreter

sudah

diimplementasikan dalam C. Dalam rilis ini disertakan juga modul

–

modul

ekstensi yang meningkatkan kemampuan

PHP/FI secara signifikan. Sebuah

perusahaan bernama Zend, menulis ulang

interpreter PHP menjadi lebih

bersih, lebih baik dan lebih cepat. Kemudian pada Juni 1998 perusahaan tersebut

merilis

interpreter

baru untuk

PHP dan meresmikan nama rilis tersebut menjadi

PHP 3.0.

Pada pertengahan tahun 1999, Zend merilis interpreter PHP

baru dan rilis

tersebut dikenal dengan

PHP 4.0.

PHP 4.0 adalah versi

PHP yang paling

banyak dipakai. Versi ini banyak dipakai sebab versi ini mampu dipakai untuk

membangun aplikasi

web kompleks tetapi tetap memiliki kecepatan proses dan

stabilitas yang tinggi.

Pada Juni 2004, Zend merilis

PHP 5.0. Versi ini adalah versi mutakhir

dari

PHP. Dalam versi ini, inti dari

interpr eter PHP

mengalami perubahan

besar. Dalam versi ini juga dikenalkan model pemrograman berorientasi

objek baru untuk menjawab perkembangan bahas pemrograman ke arah

pemrograman berorientasi objek.

2.5.2. Variabel pada PHP

(36)

variabel yang belum diset), string dan array, object dan resource.

Jika menggunakan bahasa pemrograman C atau Pascal, maka kita harus

mendefinisikan va riabel tiap elemen, namun pada

PHP kita tidak perlu

mendefinisikan terlebih dahulu jenis

va riabel

sebelum menggunakannya.

PHP memiliki kepandaian untuk membedakan jenis

va riabel

secara otomatis

berdasarkan konteks yang sedang berlaku bagi va riabel tersebut.

Setiap

variabel

dalam PHP selalu dimulai dengan tanda dolar ("$") dan

harus dimulai dengan huruf dan dapat diikuti oleh huruf dan angka. Dengan

demikian, $warpspeed, $impuls_speed, $LCAR dan $Dilithium1 adalah contoh

penamaan variabel PHP

yang valid.

Setiap

variabel

dalam

PHP peka terhadap perbedaan huruf kapital dan

non kapital, sehingga $subspace, $SubSpace, dan $SUBSPACE adalah tiga buah

variabel yang berbeda.

2.5.3. Konsep Dasar Penggunaan PHP

Kode PHP diawali dengan tanda lebih kecil (<) dan diakhiri dengan tanda lebih

besar (>). Ada empat cara untuk menuliskan script PHP

yaitu :

1.

< ? Apa kabar.. ?>

2.

< ?php Apa kabar.. ?>

3.

< % Apa kabar.. %>

4.

< SCRIPT LANGUAGE

=”

php

”

> Apa kaba r..< /SCRIPT>

(37)

komentar. Cara penulisan dibedakan menjadi Embeded dan Non Embeded script.

1.

Embeded Script

Contoh dari Embeded script :

< html>

< head>

< title> Coba< /title>

< /head>

< body>

< ?php echo

”

web developer

”

; ?>

< /body>

< /html>

2.

Non Embeded Script

Contoh dari Non Embeded Script :

< ?php echo

”

< html>

”

; echo

”

< head>

”; ec

ho

”

< titl

e>”;

echo

”

we learn a bout php

”

; echo

”

< /title>

”

; echo

”

< /head>

”

;

echo

”

< body>

”;

echo

”

< p> My Project < /p>

”; ec

ho

”<

/body>

”

; echo

”

< /html

>”;

?>

2.6. Database MySQL

MySQL adalah salah satu jenis

database server yang sangat terkenal.

(38)

gratis (tidak perlu membayar untuk menggunakannya) pada berbagai

platform

(kecuali pada Windows, yang bersifat

shareware atau perlu membayar setelah

melakukan evaluasi dan memutuskan untuk digunakan untuk kepeluan produksi).

Perangkat lunak

MySQL sendiri bisa didownload

dari

http://www.mysql.org atau

http://www.mysql.com.

MySQL termasuk jenis

Relation Database Management Sistem (DBMS).

Pada

MySQL, sebuah

database mengandung satu atau sejumlah tabel. Tabel

terdiri atas sejumlah baris dan setiap baris mengandung satu atau beberapa kolom.

Dalam menjalan MySQL diperlukan berbagai perintah untuk membuat suatu

database, berikut ini disebutkan beberapa perintah dasar dalam menggunakan

MySQL. Untuk menjalankan

MySQL pertama kali cukup dengan mengetikkan

mysql

–

u root -p pada Command Prompt. Perintah-perintahnya adalah sebagai

berikut :

1.

Menampilkan database : SHOW DATABASES;

2.

Membuat database baru : CREATE DATABASE na ma _database;

3.

Memilih databa se yang akan digunakan : USE na ma _databa se;

4.

Menampilkan tabel : SHOW TABLES;

5.

Membuat tabel baru :

CREATE

TABLE

na ma _tabel (field

spesifika si_field,...);

6.

Menampilkan struktur tabel :

SHOW COLUMNS FROM nama_tabel;

atau DESCRIBE nama_tabel;

7.

Mengubah

struktur

tabel

:

ALTER

TABLE

na ma _tabel

Jenis_Pengubaha n;

(39)

VALUES (data_kolom1,..)

atau

INSERT INTO tabel SET kolom1 =

data_kolom1,...;

9.

Menampilkan data pada tabel :

SELECT * FROM nama_tabel ;

10.

Mengubah data pada tabel :

UPDATE nama_tabel SET kolom =

penguba ha n_data WHERE kriteria ;

11.

Menghapus data pada tabel :

DELETE FROM nama_tabel WHERE

kr iteria ;

12.

Menghapus tabel : DROP nama_tabel;

13.

Menghapus databa se : DROP na ma_database;

14.

Keluar dari MySQL : QUIT atau EXIT;

2.6.1. Tipe Dasar MySQL

(40)

[image:40.595.114.508.106.307.2]

Tabel 2.1. Tipe data Mysql

2.6.2. Constraint

Constraint adalah batasan atau aturan yang ada pada table. MySQL menyediakan

beberapa tipe constraint berikut :

1.

NOT NULL adalah suatu kolom yang didefinisikan dengan

constraint

NOT NULL tidak boleh berisi nilai

NULL. Kolom yang befungsi

sebagai kunci primer (primary key) otomatis tidak boleh NULL.

2.

UNIQUE adalah mendefinisikan suatu kolom menjadi bersifat unik,

artinya antara satu data dengan data lainnya namanya tidak boleh sama,

misal alamat email.

3.

PRIMARY KEY

adalah Constraint PRIMARY KEY

membentuk key yang

unik untuk suatu table.

4.

FOREIGN KEY constraint didefinisikan pada suatu kolom yang ada

(41)

lain sebagai suatu PRIMARY KEY

, biasa dipakai untuk menghubungkan

antara 2 tabel.

2.6.3. Tipe-Tipe Kolom

Untuk setiap tipe data, sintak yang ditampilkan menggunakan tanda kurung siku

(square brackets) ([ ]) adalah untuk menunjukkan bagian dari sintak yang bersifat

opsional. Sebagai tambahan terhadap tipe MySQL, banyak jenis tipe data MySQL

lainnya yang mendukung spesifikasi dari ukuran.. Kecuali jika tidak

dispesifikasikan, nilai tersebut harus berupa sebuah bilangan integer atau bilangan

bulat antara 1 dan 255.

1.

Numerik

MySQL mendukung semua tipe data standar numerik (bilangan) SQL.

Jenis ini meliputi tipe data bilangan bulat (INTEGER, SMALLINT,

DESIMAL, dan NUMERIC), seperti halnya tipe data bilangan desimal

(FLOAT, REAL, dan

DOUBLE PRECISION).

Keyword INT adalah

suatu sinonim untuk BILANGAN BULAT (INTEGER), dan

keyword

DEC adalah satu sinonim untuk bilangan

DESIMAL. Terhitung sejak

MySQL 5.0.3, tipe data BIT tersedia untuk menyimpan nilai-nilai

kolom bit. (Sebelum 5.0.3, MySQL menginterpretasikan BIT seperti

TINYINT (1 ).).

(42)

bilangan bulat TINYINT, MEDIUMINT, dan BIGINT. Untuk tipe-tipe

bilangan bulat selalu disediakan atribut

auto_increment, signed dan

unsigned.

Signed berarti nilai negatif ikut dalam deklarasi tersebut

sedang unsigned hanya nilai positif. Jika unsigned tidak dideklarasikan

maka nilai default adalah signed.

a.

INT/INTEGER

Deklarasi : INT [(display_size)] [auto_increment] [unsigned] [zerofill].

Penyimpanan: 4 byte.

Nilai yang dapat disimpan adalah integer 0

sampai dengan 4294967295 jika unsigned. 2147483648 sampai dengan

214797647 jika signed.

b.

TINYINT

Deklarasi : TINYINT [(display_size)] [auto_increment] [unsigned]

[zerofill]

Penyimpanan: 1 byteAUTO_INCREMENT, diterapkan pada

kolom-kolom integer.

Digunakan untuk menghasilkan

integer dengan

urutan nilai yang unik. Kolom demikian dalam suatu tabel hanya ada

satu.

c.

MEDIUMINT

Deklarasi : MEDIUMINT [(display_size)] [auto_increment] [unsigned]

[zerofill] Penyimpanan: 3 byte. Nilai yang dapat disimpan adalah

integer 0 sampai dengan 16777215 jika

unsigned. 83888608 sampai

dengan 82888607 jika signed.

d.

BIGINT

(43)

integer 0 sampai dengan 18446744073709551615 jika

unsigned.

–

9223372036854775807 sampai dengan 922337203685477580787 jika

signed.

e.

SMALLINT

Deklarasi : SMALLINT [(display_size)] [auto_increment] [unsigned]

[zerofill] Penyimpanan: 2 byte. Nilai yang dapat disimpan dengan

jangkauan mulai dari 0 sampai dengan 65535 jika unsigned dan 32768

sampai 32767 jika signed.

f.

FLOAT

Deklarasi :

FLOAT [(display_size,digits)] [zerofill]. Penyimpanan: 4

byte.

FLOAT menyimpan bilangan real dan tidak dapat bersifat

unsigned. Nilai presisi tunggal yang dapat disimpan adalah

–

3,402823466E+38

sampai

dengan

–

1,1175494351E38,0

dan

1,1175494351E38 sampai dengan 3,402823466E+38.

g.

DOUBLE

Deklarasi :

DOUBLE [(M,D)] [zerofill]. Penyimpanan: 8 byte.

DOUBLE menyimpan bilangan real dengan presisi ganda. Nilai yang

(44)

h.

DECIMAL

Deklarasi :

DECIMAL [(precision [,scale])] [zerofill]. Penyimpanan:

precision + 2 byte. Menyimpan bilangan

FLOATing

point dimana

ketepatan adalah kritis, seperti untuk nilai mata uang. Tipe DECIMAL

memerlukan Anda untuk menspesifikasikan

precision dan

scale.

Precision adalah jumlah nilai digit yang berarti.

Scale adalah jumlah

digit yang mengikuti tanda desimal. Sebagai contoh, sebuah kolom

BALANCE dideklarasikan sebagai

DECIMAL(9,2) yang akan

menyimpan sejumlah 9 digit berarti, dengan dua digit diantaranya

berada disebelah kanan tanda desimal. Range nilai dari contoh deklarasi

kolom

BALANCE tersebut adalah mulai 9,999,999.99 sampai

9,999,999.99.

2.

String

(45)

a.

BLOB

Deklarasi: BLOB. Bentuk binari dari TEXT.

b.

CHAR

Deklarasi: CHAR(size) [BINARY

]. Ukuran: ditetapkan oleh nilai ukuran

dengan jangkauan sampai dengan 255. Penyimpanan:

size

byte.

Suatu

kolom dengan nilai teks yang panjangnya tetap. Nilai string dengan

jumlah karakter lebih sedikit dari ukuran kolom maka akan diisi dengan

spasi. Spasi yang diisikan tersebut ketika diambil dari

database akan

dihilangkan.

Panduan Pendayagunaan

Open

Source

Software

RDBMSMySQL 19.

c.

LONGBLOB

Deklarasi: LONGBLOB. Bentuk binari dari LONGTEXT

d.

LONGTEXT

Deklarasi: LONGTEXT. Ukuran: 0 samapai 4294967295. Penyimpanan:

panjang nilai + 4

byte.

Menyimpan nilai teks yang besar. Secara teori

batas ukuran dari teks yang dapat disimpan dalam sebuah kolom

LONGTEXT melampaui 4 GB, pada prakteknya kurang. Ini sehubungan

dengan batasan dari protokol komunikasi MySQL, dan jumlah memori

yang tersedia pada komunikasi antara klien dan server.

e.

MEDIUMTEXT

(46)

f.

TEXT

Deklarasi: TEXT. Ukuran: 0 sampai 65535. Penyimpanan: panjang nilai

+ 2 byte. Penyimpanan untuk sebagian besar teks.

g.

TINYBLOB

Deklarasi: TINYBLOB.

20 Panduan Pendayagunaan Open Source

Software: RDBMSMySQL bentuk binari dari TINYTEXT

h.

TINYTEXT

Deklarasi: TINYTEXT. Ukuran: 0 sampai 255. Penyimpanan: panjang

nilai + 1 byte. Menyimpan nilai teks yang pendek

i.

VARCHAR

Deklarasi: VARCHAR(size) [BINARY

]. Ukuran: ditetapkan oleh nilai

ukuran dalam suatu jangkauan sampai 255. Penyimpanan: panjang nilai

+ 1 byte. Menyimpan nilai teks yang panjangnya bervariasi.

3.

Date

(47)

nilai-nilai tanggal dan waktu menjadi bilangan integer ketika digunakan

dalam suatu konteks bilangan integer.

2.7. Sublime Text

Sublime text merupakan teks editor

multiplatform dan

powerfull, karena dengan

ukuran yang kecil, Sublime Text memiliki fitur yang luar biasa dan kinerja yang

sangat sederhana. Fiturnya sangat lengkap (bisa digunakan untuk berbagai bahasa

pemrograman) dan juga kita dapat menambah extension untuk memudahkan

dalam coding. Ada beberapa fitur yang membuat menarik dalam pemakaiannya,

yaitu :

1.

Go Anything adalah fitur yang bisa membuka file dengan tombol Ctrl +

P pada keyboard guna membuka file dengan jumlah banyak.

2.

Multiple Selections adalah fitur yang bisa mengubah banyak baris,

mengubah variable dengan menekan Ctrl + Shift + L dan Ctrl + Shift +

D.

3.

Cross Platform artinya fitur ini bisa digunakan di berbagai OS.

2.8. Cascading Style Sheet (CSS)

CSS merupakan kependekan dari

Ca scading Style Sheet yang berfungsi

(48)

sebenarnya adalah suatu kumpulan atribut untuk fungsi format tampilan dan

dapat digunakan untuk mengontrol tampilan banyak dokumen secara bersama.

Keuntungan menggunakn

CSS yaitu jika kita ingin mengubah format dokumen,

maka tidak perlu mengedit satu persatu.

Penggunaan

CSS ada dua cara yaitu dengan menyisipkan kode

CSS

langsung dalam kode

HTML atau simpan

file tersendiri berekstensi

“

.css

”

.

dengan menyimpan sebagai

file tersendiri akan lebih memudahkan untuk

mengontrol tampilan dalam banyak dokumen secara langsung.

CSS mendapat

dukungan penuh pada browser versi 4 (empat) dan pada versi sebelumnya. Perlu

diketahui bahwa tampilan

CSS dapat berbeda bila ditampilkan pada menu

browser yang berbeda pula.

2.8.1. Struktur CSS

Perintah css terdiri atas 2 komponen, yakni Selector dan Declaration.

1.

Selector berfungsi untuk memberi tahu web browser bahwa pada

elemen mana aturan css akan diterapkan. Selector dapat berupa nama

tag, selector class atau selector id

2.

Declaration merupakan aturan css yang diterapkan yang mana terdiri

(49)

2.8.2. Penulisan CSS

CSS juga memiliki aturan-aturan penulisan yaitu :

1.

Internal Style

Internal style dengan menggunakan tag style dan diletakkan diantara tag

head.

<html>

<head>

<style>

h1 { color : blue; }

</style>

</head>

</html>

Internal style tidak harus selalu diletakkan diantara tag head. Kita selalu

bisa meletakkan diantara tag lain yang ada didalam tag body. Namun

untuk menciptakan kode yang lebih bersih dan terstruktur dengan baik,

css biasa diletakkan diantara tag head.

2.

Inline Style

Inline style dengan menambahkan langsung kode css kedalam tag html

sebagai attribut.

<h1 style=”color:blue;”>Judul Satu</h1>

3.

External Style

(50)

<html>

<head>

</head>

<body>

2.8.3. Selector

Seperti sudah disebutkan sebelumnya, selector dapat berupa nama tag, selector

class atau selector id. Berikut ini adalah contoh penggunaan selector dalam css.

<html>

<head>

<title>Belajar Selector</title>

<style>

h1 {

color: blue;

}

.judul {

color: red;

}

(51)

</style>

</head>

<body>

<h1>Selector Tag</h1>

<h1 class=judul>Selector Class</h1>

<h1 id=satu>Selector Id</h1>

</head>

</html>

2.8.4. Memformat Dokumen dengan CSS

Memformat dokumen dengan css jauh lebih fleksibel dibandingkan dengan

menggunakan tag html saja.

<html>

<head>

<title>Format CSS</title>

body {

background-color:yellow;

}

(52)

b {

font-weight:normal;

}

i {

font-style:normal;

}

u {

text-decoration:none;

}

b, i {

color:green;

}

</style>

</head>

<h1>DOKUMEN HTML</h1>

<b>Pemrograman Web</b>

<br>

<i>Pemrograman Web</i>

<br>

<u>Pemrograman Web</u>

</body>

(53)

2.9. JavaScript

JavaScript mulanya bernama

LiveScript, dikembangkan pertama kali pada tahun

1995 di

Netscape Communication. Pada akhir tahun 1995

Netscape

Communication dan

Sun Microsystem berkolaborasi dan mengganti nama

LiveScript menjadi JavaScript.

JavaScript adalah bahasa

script yang ditempatkan pada kode

HTML dan

diproses pada sisi

client. Dengan adanya bahasa ini maka kemampuan dokumen

HTML menjadi lebih luas. Sebagai contoh, digunakan untuk validasi masukan

formulir sebelum diproses ke tahap selanjutnya. Bisa untuk membuat permainan

interaktif dan juga bisa untuk menambah design web.

Javascript merupakan bahasa scripting yang didisain untuk membuat

halaman web menjadi lebih interaktif. Javascript bekerja secara client-side (disisi

client). Sehingga javascript bergantung pada browser yang digunakan untuk

menampilkan halaman web yang mengandung javascript.

Perlu diperhatikan bahwa Javascript berbeda dengan Java. Keduanya

sangat berbeda baik itu dari sisi bahasa maupun dari konsep dan disainnya.

<html>

<head>

<title>Belajar JavaScript</title>

document.write("<h1>Belajar JavaScript</h1>");

</script>

(54)

<body>

……

</body>

</html>

2.9.1. Penulisan Javascript

Internal script dengan menggunakan tag script dan diletakkan diantara tag head.

<html>

<head>

<title>JavaScript</title>

Pemrograman Web

–

Wirasto S. Karim 28

document.write("<h1>Belajar JavaScript</h1>");

</script>

</head>

</html>

External script tetap dengan menggunakan tag script namun merujuk

keberkas javascript.

<html>

<head><title>JavaScript</title>

(55)

2.9.2. Variabel

Dalam javascript, variabel dideklarasikan dengan statement var dan diakhiri

dengan tanda ; (titik koma). Variabel juga bersifat case-sensitive yang artinya

membedakan huruf kecil dan huruf besar. Sehingga variabel nama berbeda dengan

variabel NAMA.

<html>

<head>

var a = 4;

var b = 10;

var c = a + b;

var d = "<br>Bo gambangi da'a ei";

document.write(c);

document.write(d);

</script>

</head>

<body>

……

(56)

2.9.3. Kondisi

Kondisi digunakan untuk melakukan eksekusi suatu pernyataan secara bersyarat.

kondisi1.html

<html>

<head>

var nama = "wirasto";

if (nama == "wirasto") {

document.write("Benar");

}

</script>

</head>

<body>

……

</body>

</html>

kondisi2.html

<html>

<head>

(57)

var awal = 1;

var akhir = 5;

if (awal < akhir) {

document.write("Nilai awal lebih kecil dari nilai akhir");

} else {

document.write("Nilai awal TIDAK lebih kecil dari nilai

akhir");

}

</script>

</head>

<body>

</body>

</html>

kondisi3.html

<html>

<head>

var awal = 1;

var akhir = 5;

if (awal < akhir) {

(58)

} else {

document.write("Nilai awal TIDAK lebih kecil dari nilai

akhir");

}

</script>

</head>

<body>

……

(59)

BAB 3

PERANCANGAN SISTEM

3.1. Perancangan Sistem

Seiring dengan perkembangan teknologi informasi saat ini, serta untuk meningkatkan

efesiensi kerja dan waktu, maka masih banyak sistem yang ada saat ini yang

masih manual dan harus diganti dengan sistem yang lebih baik lagi. Hal ini

dilakukan dengan cara membangun sistem yang terkomputerisasi atau online. Untuk

memulai membangun suatu program

mengenai perancangan system informasi

akademik, maka penulis terlebih dahulu merencanakan alur kerja berdasarkan

kebutuhan dari user yang akan menggunakan aplikasi basis data ini.

(60)

3.2. Data Flow Diagram (DFD)

Data Flow Diagram

(DFD) merupakan model dari sistem untuk menggambarkan

pembagian sistem ke modul yang lebih kecil. Salah satu keuntungan menggunakan

diagram alir data adalah memudahkan pemakai yang kurang menguasai bidang

komputer untuk mengerti sistem yang akan dikerjakan. Pada tahap analisa,

penanganan notasi simbol lingkaran dan anak panah menggambarkan arus data

dalam perancangan sistem sangat membantu dalam komunikasi dengan

pemakaian sistem menggunakan notasi

–

notasi untuk menggambarkan arus dari

data sistem.

Disamping itu DFD 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. Dengan kata

lain, DFD adalah alat pembuatan model yang memberikan penekanan hanya pada

fungsi sistem.

(61)

[image:61.612.116.526.88.469.2]

Tabel 3.1. Simbol-simbol Data Flow Diagram

No.

Simbol

Fungsi

1.

Eksternal Entity merupakan kesatuan di

luar lingkungan system yang dapat berupa

seseorang, organisasi yang dapat mengirimkan

data atau menerima data dari sistem.

2.

Arus data merupakan tempat mengalirnya

informasi menunjukan arus data berupa sistem.

3.

Proses merupakan pengolahan data atau aliran

data masuk menjadi data aliran keluar.

4.

Penyimpanan

data

merupakan

tempat

penyimpanan data yang ada di dalam sistem.

3.3. Perancangan Database

Database adalah kumpulan dari data yang berhubungan antara yang satu dengan

(62)

beberapa

file, dalam hal ini

file

–

file tersebut dikelompokan secara terstruktur

dalam beberapa tabel sesuai dengan informasi yang terkandung di dalamnya.

Berikut ini rancangan tabel yang penulis gunakan dalam membangun sistem

informasi nilai :

[image:62.612.114.541.264.351.2]

1.

Tabel admin terdiri dari :

Tabel 3.2. Tabel admin

Field Name

Data Type

Size

Description

username*

Varchar

30

Username

password

Varchar

30

Password

2.

Tabel dosen terdiri dari :

Tabel 3.3. Tabel dosen

Field Name

Data Type

Size

Description

id*

Int

3

Id

kode_dosen

Varchar

10

Kode Dosen

(63)

[image:63.612.113.543.140.367.2]

3.

Tabel jadwal terdiri dari :

Tabel 3.4. Tabel jadwal

Field Name

Data Type

Size

Description

id_jadwal*

Int

10

Id

Hari

Varchar

10

Hari

waktu

Varchar

20

Waktu

mata_kuliah

Varchar

50

Mata Kuliah

dosen

Varchar

10

Dosen

ruang

Varchar

10

Ruang

Com

Varchar

10

Komputer

4.

Tabel kelas terdiri dari :

Tabel 3.5. Tabel kelas

Field Name

Data Type

Size

Description

id *

Int

3

Id

kd_kelas

Varchar

10

Kode Kelas

Unit

Varchar

2

Unit

lantai

Varchar

2

Lantai

ruang

Varchar

2

Ruang

[image:63.612.113.541.450.649.2]

(64)

3.4. Flowchart

Flowchart

adalah

sekumpulan simbol

–

simbol

yang

menunjukan atau

[image:64.612.113.534.334.655.2]

menggambarkan rangkaian kegiatan

–

kegitan program dari awal hingga akhir. Jadi

flowchart

juga dapat digunakan untuk menggambarkan urutan langkah

–

langkah

pekerjaan dalam suatu algoritma.

Penjelasan arti dari lambang

–

lambang flowchart

dapat didefinisikan seperti tabel dibawah ini :

Tabel 3.6. Arti lambang

–

lambang Flowchart

No

SIMBOL

KETERANGAN

1

Terminal, untuk memulai atau mengakhiri

suatu program

2

Proses, simbol ini menunjukkan setiap

pengolahan yang dilakukan oleh komputer.

3

Input-Output, untuk memasukkan data atau

menunjukkan hasil keluaran dari suatu proses

4

Decision, suatu kondisi yang menghasilkan

beberapa kemungkinan jawaban atau pilihan.

5

Untuk menyatakan sekumpulan langkah

proses yang ditulis sebagai procedur

6

(65)

7

Off-Line Connector, simbol masuk atau

keluarnya suatu prosedur pada lembaran

kertas lainnya.

8

Arus/Flow

dari

prosedur

yang

dapat

dilakukan dari atas kebawah, kiri kekanan

atau sebaliknya.

9

Document, merupakan simbol dari data yang

berbentuk kertas maupun informasi

10

Database, menyediakan tempat pengolahan

data serta penyimpanan dalam storage.

11

(66)

3.4.1. Flowchart Menu Utama

[image:66.612.120.498.165.662.2]

Flowchart menu utama dapat dilihat pada gambar dibawah ini :

(67)

3.4.2. Flowchart Login Admin

Flowchart login admin dapat dilihat pada gambar dibawah ini :

L_adm

Masukkan Username & password

Login Reset

Validasi Username & Password

Valid

Hapus username & Password

X Y

Y

T

[image:67.612.126.506.164.594.2]

M_adm

(68)

3.4.3. Flowchart Menu Utama Admin

[image:68.612.118.523.169.665.2]

Flowchart menu utama admin dapat dilihat pada gambar dibawah ini :

(69)

3.5. Perancangan Algoritma

Algoritma merupakan suatu cara menganalisa (menjelaskan) urutan dan hubungan

kegiatan

–

kegiatan yang dilakukan untuk memecahkan suatu permasalahan

sehingga tercapai tujuan yang diinginkan.

Algorit ma Beranda

Langkah I

: Pilih menu Beranda.

Langkah II

: Menampilkan halaman utama website.

Algorit ma Direktori Prodi D3 TI

Langkah I

: Pilih menu Direktori Prodi D3 TI.

Langkah II

: Menampilkan halaman Direktori Prodi D3 TI.

Langkah III

: Pilih menu Profil, Sejarah, Visi Misi, Fasilitas, Roster, Daftar

Dosen, dan Ruangan.

(70)

Algorit ma University of Sumatera Utara

Langkah I

: Pilih menu University of Sumatera Utara.

Langkah II

: Menampilkan halaman university of Sumatera Utara.

Algorit ma Contact Us

Langkah I

: Pilih menu Contact Us.

Langkah II

: Menampilkan halaman Contact Us.

Algorit ma USU Map

Langkah I

: Pilih menu USU Map.

Langkah II

: Menampilkan halaman USU map.

Algorit ma People Finder

Langkah I

: Pilih menu People Finder.

(71)

Algorit ma Portal Akademik