Perancangan Website Smp Negeri 3 Lubuk Pakam

BAB 2

LANDASAN TEORI

2.1 Pengertian Komputer

Istilah Komputer (Computer) diambil dari bahasa Latin Computare yang berarti
menghitung (Compute). Jadi komputer adalah suatu alat hitung khusus yang
mempunyai karakteristik (sifat) tertentu. Adapun sifat tertentu dari komputer adalah
kemampuannya untuk menyimpan dan memproses data dalam jumlah besar, dapat
menambahkan, memperbaiki, dan mengambil data yang telah diproses tersebut serta
mengirimnya menyeberangi benua melalui saluran telepon dan satelit komunikasi
kemudian dapat menghitung, membandingkan, mensimulasi dan memonitor proses
dalam industri dari jarak jauh bahkan dapat berbicara ke luar negeri melalui telepon
dengan bantuan internet dengan pulsa lokal serta melakukan operasi-operasi lainnya.

Hal di atas dikerjakan secara benar, teliti dan dengan kecepatan tinggi. Tujuan
komputer adalah untuk mengolah (memproses) data secara cepat dan efisien sehingga
dihasilkan informasi yang tepat.

Universitas Sumatera Utara


2.2 Sistem Komputer

Proses pengolahan data agar dapat dilakukan komputer, maka haruslah berbentuk
sistem komputer. Tujuuan pokok sistem komputer adalah mengolah data untuk
menghasilkan informasi. Tujuan pokok tersebut dapat terlaksana jika ada elemenelemen pendukungnya.
Elemen-elemen dari sistem pendukung komputer adalah sebagai berikut:
1. Perangkat keras (Hardware)
Hardware merupakan peralatan fisik dari sebuah komputer. Umumnya terdiri
dari tiga jenis perangkat yaitu; perangkat masukan (input device), perangkat
keluaran (output device), serta pengolahan (processor).
2. Perangkat Lunak (Software)
Software merupakan program yang berisi perintah-perintah untuk melakukan
pengolahan data.
3. Tenaga Pelaksana (Brainware)
Brainware merupakan user (manusia) yang terlibat langsung di dalam
pengoperasian komputer dan yang akan melaksanakan semua kegiatankegiatan yang berhubungan dengan hardware dan software. User (manusia)
yang terlibat langsung dalam sistem komputer dikategorikan dalam berbagai
tingkatan, yaitu:


Universitas Sumatera Utara

a. Operator
Operator adalah user (manusia) yang bekerja mengoperasikan komputer
untuk memasukkan data atau menjalankan program yang sudah ada.
b. Programmer
Programmer adalah user (manusia) yang bertugas membuat program atau
software berdasarkan ketentuan yang sudah ada, meliputi:
1. Menganalisis dan membuat program.
2. Membuat flowchart atau algoritma.
3. Memeriksa dan memperbaiki kesalahan program.
c. Sistem Analis
Sistem analis adalah user (manusia) yang bertugas mempelajari,
menganalisis serta merancang sistem program untuk menyelesaikan suatu
masalah.

2.3 Pengertian Informasi dan Sistem Informasi
2.3.1 Pengertian Informasi
Informasi dapat didefinisikan sebagai hasil dari pengolahan data dalam suatu bentuk
yang lebih berguna dan lebih berarti bagi penerimanya yang menggambarkan suatu

kejadian (even) yang nyata (fakta) yang digunakan untuk pengambilan keputusan.

Universitas Sumatera Utara

2.3.2 Pengertian Sistem Informasi

Sistem informasi juga merupakan sistem yang berisi jaringan SPD (Sistem
Pengolahan Data) yang dilengkapi dengan kanal-kanal komunikasi yang digunakan
dalam sistem organisasi data. Elemen proses dari sistem informasi adalah:
mengumpulkan data, mengolah data, dan menyebar informasi. Di dalam sistem
informasi, manusia berinteraksi dengan manusia, manusia dengan komputer, dan
komputer dengan komputer. Dalam sistem informasi data, informasi, atau
pengetahuan mengalir dibawa oleh dokumen atau media komunikasi elektronik,
seperti telepon atau jaringan komputer.

2.4 Data dan Database Management

2.4.1 Data

Data berasal dari kata datum yang berarti fakta yang mengandung arti, yang

dihubungkaan dengan kenyataan, simbol-simbol, gambar-gambar, kata-kata, hurufhuruf atau simbol-simbol yang menunjukkan ide objek, kondisi atau situasi yang lain.
Manfaat data adalah sebagai suatu representasi yang dapat diingat, direkam, dan
diolah menjadi informasi.

Universitas Sumatera Utara

2.4.2 Database Management System (DBMS)

Basis data (database) merupakan kumpulan dari data yang saling berhubungan satu
dengan yang lainnya, tersimpan di perangkat keras komputer dan digunakan perangkat
lunak untuk memanipulasinya. Database merupakan salah satu komponen yang
penting dalam sistem informasi, karena merupakan basis dalam menyediakan
informasi bagi para pemakai. Penerapan database dalam sistem informasi disebut
dengan database system. Sistem basis data (database system) adalah suatu sistem
informasi yang mengintegrasikan kumpulan dari daya yang saling berhubungan satu
dengan yang lainnya dan membuatnya tersedia untuk beberapa aplikasi yang
bermacam-macam di dalam suatu organisasi. Pendekatan database berbeda dengan
pendekatan tradisional. Adapun tujuan dari pengolahan data yang dilakukan adalah
untuk menghasilkan suatu keluaran yang nantinya dipergunakan, yaitu sebagai dasar
untuk pengambilan keputusan informasi.


2.5 Syarat-Syarat Merancang Sistem Informasi Berbasis Web

Adapun syarat-syarat agar terbentuknya sebuah website adalah:
1. Tersedianya Web Server
Baik web statis ataupun dinamis, jika ingin bisa online di internet, maka syarat

Universitas Sumatera Utara

pertama haruslah memiliki server, baik berupa hardware maupun software.
Untuk hardware yaitu seperangkat komputer yang selalu terhubung online
dengan internet. Untuk software, selain operating system, harus disediakan
juga software untuk web server itu sendiri. Untuk saat ini web server yang
menjadi favorit adalah Aphace.
2. Tersedianya Software Pemrograman Web Berbasis Server
Jika ingin membuat web, berarti harus tersedia sebuah bahasa pemrograman
web selain HTML, baik itu client side maupun server side. Untuk yang client
side, memiliki kekurangan yaitu instruksi program bisaa terlihat oleh pengguna
internet. Sedangkan server side lebih aman karrena instruksi programnya tidak
terlihat oleh user, yang terlihat adalah seperti HTML biasa. Contoh bahasa

pemrograman web yang favorit adalah PHP.
3. Tersedianya Database
Database merupakan software yang digunakan untuk menyimpan dan
memanajemen data. Jika memiliki data yang sedikit, mungkin masih bisa
memakai file biasa sebagai media penyimpanannya. Tapi jika datanya sudah
sangat banyak, tanpa database akan sangat rumit. Database dapat menyimpan
berjuta-juta data dan dapat diakses dengan sangat cepat. Contoh database yang
bisa dipakai untuk membuat web adalah Oracle, MySQL, dan masih banyak
lagi yang lain. Database yang akan digunakan penulis adalah MySQL.

Universitas Sumatera Utara

2.6 Internet

Internet adalah metode untuk menghubungkan berbagai komputer ke dalam satu
jaringan komputer global, melalui protokok yang disebut Transmission Control
Protocol/ Internet Protokol (TCP/ IP). Protokol adalah suatu petunjuk yang
menunjukkan pekerjaan yang akan pengguna lakukan dengan internet, apakah akan
mengakses situs web melakukan transfer file, mengirim email, dan sebagainya.


2.7 Web Server

Web server adalah perangkat lunak server yang berfungsi menerima permintaan HTTP
atau HTTS dari client yang dikenal dengan nama web browser dan akan mengirim
kembali hasilnya dalam bentuk halaman-halaman web yang umumnya berbentuk
dokumen HTML. Salah satu web server yang banyak dipakai adalah Aphace. Aphace
merupakan web server antara flatform yang dapat berjalan dibeberapa platform seperti
Linux dan Windows.

Universitas Sumatera Utara

2.8 HyperText Markup Language (HTML)

2.8.1 Pendahuluan HTML

HTML atau singkatan dari HyperText Markup Language adalah script dimana kita
bias menampilkan informasi dan daya kreasi kita lewat internet. HTML sendiri adalah
suatudokumentasi teks biasa yang mudah dimengerti dibanding bahasa pemrograman
lainnya dan karena bentuknya itu HTML dapat dibaca oleh berbagai platform seperti
Windows, Linux, dan Macintosh.


2.8.2 Bagian-Bagian HTML

HTML terdiri dari beberapa bagian yang fungsinya sebagai penanda suatu kelompok
perintah tertentu, misalnya kelompok perintah form yuang ditandai dengan kode
, judul dengan , dan sebagainya. Untuk lebih lanjut mengenai bagianbagian HTML perhatikan skema di bawah ini:






Universitas Sumatera Utara

… isi dari halaman web …



Keterangan:
1. Dokumen HTML selalui diawali dengan tanda tag pembuka dan diakhiri

dengan tag penutup .
2. Pada elemen , dapat disisipkan kode-kode untuk menuliskan keterangan
dokumen HTML atau disisipkan script-script pemrograman web seperti JavaScript,
VBScript, dan CSS untuik menambah daya tarik pada situs yang kita buat.
3. Elemen … berisi tag-tag unutk isi atau layout tampilan pada situs,
seperti: …, …, …. Tag adalah kodekode yang digunakan untuk men-setting dokumen HTML. Secara garis
besar bentuk umum tag sebagai berikut: TEKS
Namun ada juga tag yang tidak perlu ada tag penutupnya seperti , , ,
dan lain sebagainya.

Universitas Sumatera Utara

2.9 Pengenalan Personal Home Page (PHP)

2.9.1 Sejarah PHP

PHP adalah script yang berjalan pada server side yang ditambahkan pada HTML.
Script ini akan membuat suatu aplikasi yang dapat diintegrasikan kedalam HTML
sehingga suatu halaman HTML tidak lagi bersifat statis, namun menjadi bersifat
dinamis. Sifat server side membuat pengerjaan script tersebut dikerjakan di server

sedangkan yang dikirimkan kepada browser adalah hasil proses dari script tersebut
yang sudah berbentuk HTML.

PHP dibuat pada tahun 1994 oleh Rasmus Lerdof. Tetapi dikembangkan oleh
oranglain dan setelah memulai tiga kali karya penulisan, akhirnya PHP menjadi
bahasa pemrograman web. PHP adalah sebuah produk yang berbentuk open source,
sehingga source code-code dari PHP dapat digunakan, diganti, diedit tanpa harus
dikenakan biaya.

2.9.2 Kelebihan dan Kelemahan PHP
Kelebihan PHP sebagai bahasa server side adalah:
1. Bahasa pemrograman PHP adalah sebuah bahasa script yang tidak melakukan
sebuah kompilasi dalam penggunaannya.

Universitas Sumatera Utara

2. Web server yang mendukung PHP dapat ditemukan dimana-mana dari mulai
IIS sampai dengan Aphace, dengan konfigurasi yang relative mudah.
3. Dapat digunakan diberbagai mesin (Linux, Unix, Windows) dan dapat
dijalankan secara runtime melalui console serta juga dapat menjalankan

perintah-perintah sistem.
Adapun kelemahan PHP adalah:
1. Tidak ideal untuk pengembangan skala besar.
2. Tidak bisa memisahkan antara tampilan dengan logik dengan baik (walaupun
pengguna template dapat memperbaikinya).
3. PHP memiliki kelemahan security tertentu apabila programmer tidak jeli
dalam melakukan pemrograman dan kurang memperhatikan isu dan
konfigurasi PHP.

2.9.3 Penggabungan Script PHP dan HTML

Bahasa pemrograman PHP dapat digabungkan dengan HTML dengan terlebih dahulu
memberikan tanda tag buka dilanjutkan tanda tanya (). Ada dua tipe penggabungan antara PHP
dan HTML yaitu:

Universitas Sumatera Utara

1. Embedded Script
Embedded script adalah cara penulisan tag PHP disela-sela tag HTML.
Dengan cara ini, penulisan tag PHP digunakan untuk mengapit bagian-bagian
tertentu dalam dokumen yang memerlukan script PHP untuk proses di dalam
server.
Contoh penulisan Embedded script dapat dilihat di bawah ini:


Testing






2. Non Embedden Script
Non Embedded Script adalah cara penulisan tag PHP dibagian paling awal dan
paling akhir dokumen. Dengan cara ini, penulisan tag PHP digunakan untuk
mengawali danmengakhiri keseluruhan bagian dalam sebuah dokumen. Non
Embedded Script menempatkan script HTML sebagai bagian dari script PHP.

Universitas Sumatera Utara

Contoh penulisan Non Embedded Script dapat dilihat di bawah ini:


2.10 MySQL
MySQL adalah sebuah aplikasi Relational Database Managemen Server (RDBMS).
Dengan menggunakan MySQL server, maka data dapat diakses oleh banyak pemakai
secara bersamaan. MySQL menggunakan bahasa SQL (Structure Query Language)
yaitu bahasa pemrograman standar yang digunakan untuk mengakses server database.
Tiap database memiliki table-tabel, tiap tabel memiliki field-field. Umumnya
informasi tersimpan dalam tabel-tabel yang secara logis merupakan struktur-struktur
dimensi terdiri atas baris dan kolom. Field-field tersebut dapat berupa data seperti int,
real, char, date, time, dan lainnya.

Universitas Sumatera Utara

Keunggulan MySQL, di antaranya:
1. Bekerja pada berbagai platform (tersedia berbagai versi untuk berbagai sistem
operasi).
2. Pengaksesan database dapat dilakukan dengan mudah.
3. Memiliki jenis kolom yang cukup banyak sehingga memudahkan konfigurasi
sistem database.
4. Mendukung record yang memiliki kolom dengan panjang tetap atau panjang
bervariasi.
5. MySQL dan PHP saling terintegrasi, maksudnya adalah pembuatan database
dengan menggunakan sintak PHP dapat dibuat. Sedangkan input yang
dimasukkan melalui aplikasi web yang menggunakan script server side seperti
PHP dapat langsung dimasukkan ke database MySQL yang ada di server dan
tentunya web tersebut berada di sebuah web server.
Pemakaian dasar MySQL adalah sebagai berikut:
1. Mendefinisikan Tabel
CREATE TABLE NAME_TABLE (DEFINISI_TABLE);
Contoh: CREATE TABLE SISWA (NAMA VACHAR(20), ALAMAT
VACHAR(100), PASSWORD VACHAR(10) );
2. Menyimpan Data
INSERT

INTO

NAME_TABLE

(DAFTAR_FIELD)

VALUES

Universitas Sumatera Utara

(DAFTAR_NILAI);
Contoh: INSERT INTO SISWA (NAMA, ALAMAT, PASSWORD) VALUES
(‘Desy’,’Jl. Setia Budi No. 7’,’1234’);
3. Mengambil Data
SELECT DAFTAR_FIELD FROM NAMA_TABLE KONDISI;
Contoh: SELECT NAMA FROM SISWA;
4. Mengubah Data
UPDATE

NAMA_TABLE

SET

DATA_FIELD_LAMA

WHERE

DATA_FIELD_BARU;
Contoh: UPDATE SISWA SET nama = ‘Desy’ WHERE nama = ‘Lestari’;
5. Menghapus Data
DELETE FROM NAMA_TABLE KONDISI;
Contoh: DELETE FROM SISWA WHERE NAMA=’Desy’;

2.11 Data Flow Diagram (DFD)
Data Flow Diagram (DFD) merupakan diagram yang menggunakan notasi-notasi
untuk menggambar arus dari data ke sistem. DFD sering digunakan untuk
menggambarkan suatu sistem yang telah ada atau sistem baru yang akan
dikembangkan secara logika tanpa mempertimbangkan lingkungan fisik dimana data
tersebut mengalir.

Universitas Sumatera Utara

Keuntungan menggunakan DFD adalah memudahkan pemakaian yang kurang
menguasai bidang computer untuk mengerti sistem yang sedang dikerjakan.

2.12 Diagram Alir (Flowchart)

Flowchart adalah gambar yang menampilkan struktur dan isi halaman per halaman.
Bagan aliran (flowchart) ini menjelaskan secara rinci langkah-langkah dari proses
program. Flowchart dibuat dengan menggunakan simbol-simbol tertentu yang
menyatakan tiap langkah program.

2.13 Cascading Style Sheet (CSS)

Cascading Style Sheet (CSS) adalah sebagai pelengkap pada HTML. CSS digunakan
untuk menetapkan aturan tampilan/ style yang akan digunakan pada sebuah website.
CSS dapat mengubah besar kecilnya text, mengganti warna background pada sebuah
halaman, atau dapat pula mengubah warna border pada tabel, serta masih banyak lagi
hal yang dapat dilakukan oleh CSS. Singkatnya, CSS digunakan untuk mengatur
susunan tampilan pada halaman HTML.

Universitas Sumatera Utara

2.14 Macromedia Dreamweaver 8
Macromedia Dreamweaver adalah sebuah editor HTML professional untuk mendesain
secara visual dan mengelola situs web maupun halaman web. Saat ini Dreamweaver
merupakan software utama yang digunakan oleh web desainer maupun web
programmer dalam membangun suatu situs web. Dreamweaver memberikan
kemudahan bagi penggunanya dalam menentukan ruang kerja yang diinginkan. Tipe
ruang kerja ditentukan berdasarkan kebutuhan maupun kebiasaan pemakainya. Ruang
kerja, fasilitas, dan kemampuan Dremweaver mampu meningkatkan produktivitas dan
efektifitas dalam desain maupun dalam membangun sebuah situs web.

2.14.1 Memulai Dreamweaver 8

Seperti halnya dengan program-program lain, untuk menjalankan Macromedia
Dreamweaver 8, mulailah dengan memilih tombol Start pada taskbar, kemudian pilih
All Program pada tampilan Start Menu Program, pilih folder Macromedia dan klik
Macromedia Dreamweaver 8. Pada saat pertama kali menggunakan Dreamweaver
setelah peng-install-an, kita akan mendapatkan tampilan kotak dialog yang
menanyakan pilihan layout ruang kerja yang ingin kita gunakan, sebaiknya kita
gunakan ruang kerja designer.

Universitas Sumatera Utara

2.14.2 Area Kerja Pada Dreamweaver 8

Komponen yang terdapat pada ruang kerja Dreamweaver 8 adalah:
1. Document Window berfungsi untuk menampilkan dokumen dimana kita
sekarang bekerja.
2. Menu Utama berisi semua perintah yang dapat digunakan untuk bekerja pada
Dreamweaver.
3. Insert Bar terdiri dari tombol-tombol untuk menyisipkan berbagai macam
objek seperti hyperlink, image, table, dan lain-lain.
4. Document Toolbar berisi tombol-tombol dan menu pop up dari dokumen yang
sedang kita gunakan.
5. Panel Groups adalah sekumpulan panel window yang saling berkaitan satu
sama lain, yang dikelompokkan di bawah satu judul untuk membantu bekerja
dengan Dreamweaver.
6. Tag Selector adalah tag-tag HTML yang terpilih sesuai dengan objek yang ada
di area kerja.
7. Properti Inspector digunakan untuk melihat dan mengubah berbagai properti
dari tiap objek terpilih yang ada di area kerja. Setiap objek memiliki properti
yang berbeda-beda.

Universitas Sumatera Utara

2.14.3 Menu Bar Area Kerja

Di dalam area kerja Dreamweaver 8 terdapat beberapa menu utama yang sangat
sederhana dan mudah untuk dipahami. Pada Menu Bar Area Kerja Dreamweaver 8
terdiri dari beberapa komponen yang dapat kita gunakan, yaitu:
1. Menu File
Menu file terdiri dari perintah untuk membuat dokumen baru, membuk
dokumen yang telah disimpan, dan lain-lain.
2. Menu Edit
Menu edit terdiri dari perintah untuk men-copy, memindahkan, serta
perintah untuk pemilihan seperti Select All, dan lain-lain.
3. Menu View
Berisi perintah untuk menampilkan beberapa macam tampilan jendela dari
area kerja Dreamweaver 8. Seperti jendela Code dan View, serta untuk
menampilkan dan menyembunyikan beberapa elemen halaman dan toolbar.
4. Menu Insert
Berisikan alternatif baris insert untuk menyisipkan objek di dalam dokumen.
5. Menu Modify
Berfungsi untuk melakukan perubahan properti pada item atau halaman
terpilih. Dengan menggunakan menu ini, kita dapat meng-edit atribut tag,

Universitas Sumatera Utara

mengganti tabel dan elemen tabel, dan bermacam bentuk aksi untuk item
library dan template.
6. Menu Text
Berfungsi untuk mempermudah dalam melakukan format teks.
7. Menu Commands
Berisi akses ke beberapa perintah, format kode yang sesuai dengan format
pilihan kita, membuat photo album, dan melakukan peng-edit-an gambar
dengan menggunakan Macromedia Fireworks.
8. Menu Site
Berisi item untuk mengelola situs seperti mendefenisikan situs baru,
menghapus situs, menduplikasikan situs yang telah didefenisi.
9. Menu Window
Menyediakan akses ke seluruh panel, inspector, dan jendela di dalam
Dreamweaver.
10. Menu Help
Menyediakan fasilitas mambantu kita dalam menggunakan Dreamweaver.

Universitas Sumatera Utara