8
LANDASAN TEORI
2.1. Pengertian Katalog
Katalog berasal dari bahasa Indonesia berasal dari kata Catalog dalam bahasa Belanda, serta Catalogue dari bahasa Inggris. Istilah katalog itu sendiri berasal dari frase Yunani Katalogos. Kata bermakna sarana atau menurut, sedangkan logos memiliki berbagai arti seperti kata, susunan, alasan dan nalar. Jadi katalog dari segi kata bermakna sebuah karya dengan isinya disusun menurut cara yang masuk akal.
2.2. Konsep Dasar Web
Menurut Arief (2011:7) menyatakan bahwa “Web adalah salah satu aplikasi yang berisikan dokumen-dokumen multimedia (teks, gambar, suara, animasi, video) didalamnya yang menggunakan protokol HTTP (Hypertext Transfer Protocol) dan untuk mengaksesnya menggunakan perangkat lunak yang disebut browser”.
Beberapa jenis browser yang populer saat ini adalah Internet Explorer
yang diproduksi oleh Microsoft, Mozila Firefox, Opera, dan Safari yang diproduksi oleh Apple.
Pada server-side programming, perintah-perintah program dijalankan di
web server, kemudian hasilnya dikirimkan ke browser dalam bentuk HTML biasa. Sedangkan client-side programming perintah program dijalankan di web browser, sehingga ketika client meminta dokumen yang mengandung script, maka script
tersebut akan di download dari servernya kemudian dijalankan di web browser
bersangkutan.
Program web yang tergolong dalam server-side: CGI/Perl, ASP(Active Server Page), JSP (Java Server Page), PHP. Sedangkan yang tergolong client-side: JavaScript, VbScript, HTML.
2.2.1. Internet
Menurut Hidayatullah dan Jauhari (2017:1) memberi pengertian bahwa, “Internet adalah jaringan global yang menghubungkan komputer-komputer diseluruh dunia. Dengan internet, sebuah komputer bisa mengakses data yang terdapat pada komputer lain di benua yang berbeda”.
Jika menilik sejarahnya, Internet dan jaringan komputer adalah hasil evolusi dari ARPANET, sebuah proyek riset tingkat tinggi yang dimiliki oleh Departemen Pertahanan Amerika Serikat. Secara umum ARPANET diperkenalkan pada bulan Oktober 1972. Pada mulanya ARPANET menghubungkan 4 situs saja yaitu Stanford Research Instituate, Univercity Of California, Santa Barbara dan University of Utah, dimana mereka membentuk satu jaringan terpadu pada tahun 1969.
Pada tahun 1982 istilah internet pertama kali digunakan dan TCP/IP diadopsi sebagai ptotokol universal untuk jaringan tersebut. Pada tahun 1986 diperkenalkan sistem nama domain yang sekarang dikenal dengan DNS (Domain Name Sistem) yang berfungsi untuk menyeragamkan sistem pemberian nama alamat di jaringan komputer.
2.2.2. Intranet
Dilihat dari sudut teknisinya, Intranet didefinisikan sebagai penggunaan teknologi Internet dan WWW (World Wide Web) di dalam sebuah jaringan komputer lokal (LAN). Menurut Sopandi dalam Eka dan Tias (2016:128) mengemukakan bahwa “Local Area Network (LAN) merupakan jaringan yang bersifat internal dan biasanya milik pribadi didalam sebuah perusahaan kecil atau menengah dan biasanya berukuran sampai beberapa kilometer”. LAN seringkali digunakan untuk menghubungkan komputer-komputer pribadi dan workstation
dalam kantor suatu perusahaan atau pabrik-pabrik untuk pemakaian sumber daya bersama (resource, baik hardware maupun software) serta sarana untuk saling bertukar informasi.
Dari definisi mengenai intranet di atas, dapat disimpulkan bahwa
intranet adalah sebuah jaringan komputer yang khusus digunakan dalam sebuah organisasi dengan memaksimalkan penggunaan WWW dalam sebuah jaringan LAN. Intranet sebenarnya adalah sebuah jaringan komputer lokal (LAN) yang diberikan teknologi internet atau World Wide Web. Untuk membangun Intranet, LAN (Local Area Network) harus memiliki sebuah jaringan komputer lokal terlebih dahulu. LAN (Local Area Network) atau jaringan komputer lokal terdiri dari beberapa komputer, dimana saling terhubung di dalam satu lokasi. Semua komputer di dalam LAN dapat saling berhubungan dan mengakses sumber-sumber daya yang ada pada komputer yang lain. Sumber daya (resource) yang dimaksud disini bisa berupa data pada server, data pada komputer lain, printer, periferal lain, dan sebagainya.
2.2.3. Hyper Text Transfer Protocol (HTTP)
Menurut Hidayatullah dan Jauhari (2017:5) menyatakan bahwa ”Hyper Text Transfer Protocol adalah protokol agar client dan server bisa berkomunikasi dengan gaya request-response. HTTP menentukan bagaimana format pesat dan bagaimana cara pengirimannya, serta bagaimana web server dan browser beraksi dan bereaksi terhadap berbagai perintah”.
Contoh: sebuah client (browser) mengirim HTTP request ke server,
kemudian server mengirimkan respon ke pada client, Respon tersebut mengandung status tentang request tersebut dan konten yang di-request.
2.2.4. World Wide Web
Menurut Hidayatullah dan Jauhari (2017:3) ”World Wide Web adalah suatu program yang ditemukan oleh Tim Berners-Lee pada tahun 1991. Awalnya Berners-Lee hanya ingin menemukan cara untuk menyusun arsip-arsip risetnya. Untuk itu beliau mengembangkan suatu sistem untuk keperluan pribadi. Sistem itu adalah program peranti lunak yang diberi nama Enquire. Dengan program itu, Berners-Lee berhasil menciptakan jaringan yang menautkan berbagai arsip, sehingga memudahkan pencarian informasi yang dibutuhkan. Inilah yang kelak menjadi dasar dari sebuah perkembangan pesat yang dikenal dengan WWW.
Pada tahun 1989 Berners-Lee membuat pengajuan untuk proyek pembuatan hiperteks global, kemudian pada bulan Oktober 1990, Waring Wera Wanua sudah dapat dijalankan dalam lingkungan CERN (Pusat peneliti Fisika Partikel Eropa). Pada musim panas tahun 1991, WWW secara resmi digunakan secara luas pada jaringan internet.
2.2.5. Website
Pada dasarnya website adalah kepanjangan dari Word Wide Web (WWW). Informasi WWW ini disimpan pada web server untuk dapat diakses dari jaringan
browser terlebih dahulu, seperti Internet Explorer atau Mozilla Firefox.
Menurut Kustiyahningsih, Devie Rosa Anamisa dalam Fridayanthie dan Tias (2016:128),, “jenis website dapat dikategorikan menjadi dua yaitu web statis
dan web dinamis”. Web Statis adalah web yang menampilkan informasi-informasi yang sifatnya statis (tetap). Disebut statis karena pengguna tidak dapat berinteraksi dengan web tersebut. Sedangkan Web Dinamis adalah web yang menampilkaninformasi serta dapat berinteraksi dengan pengguna. Web dinamis
memungkinkan pengguna untuk berinteraksi menggunakan form sehingga dapat mengolah informasi yang ditampilkan.
Menurut Arief dalam Fridayanthie dan Tias (2016:128) Pengertian “website adalah kumpulan dari halaman web yang sudah dipublikasikan di jaringan internet dan memiliki domain atau URL (Uniform Resource Locator)
yang dapat diakses semua pengguna internet dengan cara mengetikan alamatnya”.
Ada dua jenis aplikasi website, web server dan web browser. Web server adalah program aplikasi yang memiliki fungsi sebagai tempat menyimpan dokumen-dokumen web. Client slide scripting maupun server slide scripting tersimpan dalam direktori web server (document root). Contoh web server seperti xampp.
Sedangkan web browser adalah aplikasi yang mampu menjalankan dokumen-dokumen web dengan cara diterjemahkan. Prosesnya dilakukan oleh komponen yang terdapat didalam aplikasi browser yang biasa disebut Web Engine. Semua dokumen web ditampilkan oleh browser dengan cara
diterjemahkan. Beberapa jenis browser yang populer saat ini diantaranya adalah
Internet Explorer yang diproduksi oleh Microsoft, Mozilla Firefox, Opera, dan
Safari yang diproduksi oleh Apple.
Dari kedua definisi tersebut, dapat disimpulkan website adalah kumpulan halaman berisikan informasi-informasi yang dihubungkan oleh jaringan dan disimpan dalam sebuah web server.
2.2.6. Web Browser
Menurut Sibero dalam Sagita dan Hari (2016:50) mengemukakan bahwa “Web Browser adalah aplikasi perangkat lunak yang digunakan untuk mengambil dan menyajikan sumber informasi web”. Sumber informasi web didentifikasi dengan Uniform Resource Identifier (URI) yang dapat terdiri dari halaman web, video, gambar ataupun konten lainya.
2.2.7. Web Server
Menurut Madcoms (2016:22) “Web Server adalah suatu program komputer yang mempunyai tanggung jawab atau tugas menerima permintaan HTTP (HyperText Transfer Protocol) dari komputer klien, yang dikenal dengan nama web browser, dan melayani mereka dengan menyediakan respon HTTP berupa konten data, biasanya berupa halaman web yang terdiri dari dokumen HTML, dan objek terkait seperti gambar, dan lain-lain”.
Untuk dapat menjalankan PHP yang disertai database MySQL dapat digunakan dua jenis web server yaitu online mode dan offline mode. Pada Online
mode, selain komputer harus mempersiapkan domain dan hosting serta koneksi
terlebih dahulu. Sedangkan pada Offline mode yang anda persiapkan cukup komputer dan beberapa software untuk membuat web server lokal. Pada cara kedua ini komputer PC akan dibuat menjadi web server lokal atau localhost
sehingga anda dapat belajar dan mengelola website secara optimal sebelum benar-benar meng-upload-nya ke web server Internet.
Ada beberapa jenis software untuk membangun web server lokal atau
localhost yang support sistem operasi Windows diantaranya adalah WampServer, Appserv, XAMPP, PHP Triad, atau Vertrigo. Software ini memiliki fungsi dan kemampuan yang sama untuk membangun sebuah Web server lokal pada komputer PC.
2.2.8. HyperText Markup Language (HTML)
Menurut Madcoms (2016:15) menyimpulkan bahwa “Hypertext Markup Languange (HTML) adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi didalam sebuah penjelajah web internet dan formating hypertext sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegrasi”.
HTML menampilkan berbagai informasi di dalam sebuah penjelajah web internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegrasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML. Dengan kode-kode HTML maka dapat memerintahkan web
browser bagaimana untuk menampilkan halaman web yang terdiri dari berbagai macam format file seperti teks, grafik, animasi, link maupun audio-video.
Untuk membuat HTML dapat menggunakan HTML editor, seperti Microsoft FrontPage, Adobe Dreamweaper, Notepad, Notepad++. Selain itu dapat juga dengan cara menuliskan sendiri secara manual satu persatu tag-tag HTML ke dalam dokumen HTML. pastikan setelah menuliskan bahasa dan aturan HTML, kemudian menyimpannnya dalam ekstensi .htm atau .html.
2.2.9. Database (Basis Data)
Menurut Fathansyah (2015:2) “Basis data terdiri atas 2 kata, yaitu Basis dan Data. Basis kurang lebih dapat diartikan sebagai markas atau gudang, tempat bersarang atau berkumpul. Sedangkan Data adalah representasi fakta dunia nyata yang mewakili suatu objek seperti manusia (pegawai, siswa, pembeli, pelanggan), barang, hewan , peristiwa, konsep, keadaan, dan sebagainya, yang diwujudkan dalam bentuk angka, huruf, simbol, teks, gambar, bunyi atau kombinasinya”.
Sebagai satu kesatuan istilah, Basis Data (Database) sendiri dapat didefinisikan dalam sejumlah sudut pandang seperti :
1. Himpunan kelompok data (arsip) yang saling berhubungan yang diorganisasi sedemikian rupa agar kelak dapat dimanfaatkan kembali dengan cepat dan mudah.
2. Kumpulan data yang saling berhubungan yang disimpan secara bersama sedemikian rupa dan tanpa pengulangan (redundansi) yang tidak perlu, untuk memenuhi berbagai kebutuhan.
3. Kumpulan file/tabel/arsip yang saling berhubungan yang di simpan dalam media penyimpanan elektronis. Tabel (Table) sebagai komponen utama pembangunan Basis Data.
Prinsip utama Basis Data adalah pengaturan data atau arsip. Dan tujuan utama Basis Data adalah kemudahan dan kecepatan dalam pengambilan kembali data atau arsip. Perbedaanya hanya terletak pada media penyimpanan yang digunakan. Basis Data bukan hanya sekedar penyimpanan data secara elektronis. Artinya, tidak semua bentuk penyimpanan data secara elektronis bisa disebut basis data. Penyimpanan dokumen berisi data dalam file teks (dengan program pengolah kata), file spread sheet, dan lain-lain, tetapi tidak bisa disebut sebagiai basis data. Hal ini, karena di dalamnya tidak ada pemilahan dan pengelompokan data sesuai jenis data. Yang sangat ditonjolkan dalam Basis Data adalah pengaturan, pemilahan, pengelompokkan, pengorganisasian data yang akan kita simpan sesuai fungsi atau jenisnya. Pemilahan, pengelompokkan, pengorganisasian ini dapat berbentuk sejumlah tabel terpisah atau dalam bentuk pendefinisian kolom-kolom
field data dalam setiap tabel.
2.2.10. MySQL (My Structure Query Language)
1. Pengertian MySQL
Sebuah website yang interaktif dan dinamis, tentunya akan membutuhkan penyimpanan data yang fleksibel dan cepat untuk di akses. Salah satu database
untuk server adalah MySQL, jenis database ini sangat popular dan digunakan pada banyak website di internet sebagai bank data, MySQL menggunakan SQL dan bersifat free (gratis atau tidak perlu membayar untuk menggunakannya).
Selain itu, MySQL dapat berjalan di berbagai platform, antara lain Linux dan Windows.(MADCOMS 2012:282)
PHP telah menyediakan fasilitas untuk koneksi hampir ke semua program
database popular, baik yang bersifat komersil maupun gratis. Secara umum akses ke database harus melalui tiga tahap, yaitu:
1. Koneksi ke database. 2. Query ke database.
3. Pemutusan koneksi dari database.
Fungsi-fungsi PHP yang digunakan untuk koneksi dengan database adalah: 1. Mysql_connect();
2. Mysql_pconnect(); 3. Mysql_select_db();
2. Mengenal tipe data dalam Database
Field adalah bagian dari tabel yang berisikan data-data dari field tersebut. Nilai data dalam field-field tersebut mempunyai tipe sendiri-sendiri. Tipe data numerik dibedakan menjadi dua macam kelompok, tipe data integer dan tipe data floating point. Type data integer untuk menampung data bilangan bulat, sedangkan tipe data floating point untuk menampung data bilangan desimal.
Tipe Data TINYINT Kisaran Nilai (-128) - 127 atau 0 – 255 Kebutuhan Memori Penyimpanan 1 byte
SMALLINT (-32768) – 32767 atau 0 – 65535 2 byte
MEDIUMINT (3888608) – 8388607 atau 0 – 16777215 3 byte
INT (-2147683648) – (21447683647) atau 0 – 4294967295 4 byte
BIGINT (-922337203685775808) – 9223372036854775807 atau 0 – 184467440737099551615 8 byte FLOAT(x) FLOAT 3.402823466E+38) – (-1.1775494351E-38), 0, dan 1.1759431E-38 – 3.4028223466E+38 4 if <=24 cr if 25 <=X 4 byte DOUBLE 1.797691348623157E+308) - (-2.2250738585072014E-308), 0, dan 2.2250738585072014E-308 – 1.7976913486231E+308 8 byte Type Data CHAR Kisaran nilai 1 – 255 karakter VARCHAR 1 – 255 karakter
TINYBLOB, TINYTEXT 1 – 255 karakter
BLOB, TEXT 1 – 6555 karakter
MEDIUMBLOB, MEDIUMTEXT 1 – 1677215 karakter
LONGBLOB, LONGTEXT 1 – 4294967295 karakter
ENUM(‘elemen1’,’elemen2’,...) Maksimum 65535 karakter
SET(‘elemen1’,’elemen2’,...) Maksimum 64 elemen
Tabel II.1
Tipe Data Numerik, Kisaran Nilai dan Memori Penyimpanan
Sumber : Madcoms (2012:288)
a. Tipe Data Char dan Varchar
Tipe data Char() dan Varchar() pada dasarnya adalah sama, yang membedakan dari keduanya adalah jumlah memori untuk menyimpan data. Memori yang dibutuhkan untuk menyimpan data bertipe Char() bersifat statis, besarnya bergantung pada berapa jumlah karakter yang ditetapkan pada saat field tersebut dideklarasikan. Sebaliknya untuk tipe data Varchar() besarnya memori penyimpanan bergantung pada berapa karakter yang dipakai ditambah 1 byte yang berisi data jumlah karakter yang dipakai.
Tabel II.2
Tipe Data String dan Kisaran Nilai
Kisaran Nilai „1000-01-01 00:00‟ to „999-12-31 23:59:59‟ Memori Penyimpanan 3 byte „1000-01-01 to „9999-12-31‟ 8 byte „1970-01-01 00:00:00 – 2037 4 byte „-838:59:59‟ to „838:59:59‟ 3 byte Type Data DATETIME DATE TIMESTAMP TIME 1901 - 2155 1 byte YEAR
b. Tipe Data Tanggal
Untuk tipe tanggal dan waktu (jam) tersedia tipe-tipe data field, dan kebutuhan memori penyimpanan untuk masing-masing tipe data string.
Tabel II.3
Tipe Data String Tanggal dan Waktu, Kisaran Nilai dan Memori
Sumber : Madcoms (2012:290)
2.2.11. PHP (Hypertext Preprocessor)
1. Pengertian PHP
Menurut Madcoms (2012:206) menyatakan bahwa “PHP (hypertext Preprocessor) adalah salah satu bahasa pemrograman yang berjalan dalam sebuah
web server dan berfungsi sebagai pengolah data pada sebuah server”. Untuk
membuat website yang dinamis dan mudah untuk diupdate setiap saat dari
browser, dibutuhkan sebuah program yang mampu mengolah data dari komputer
client atau dari komputer server itu sendiri sehingga mudah dan nyaman untuk disajikan di browser. Salah satu program yang dapat dijalankan di server dan cukup handal adalah PHP. Dengan menggunakan program PHP, sebuah website
2. Tipe Data PHP
Program PHP membagi tipe data menjadi lima jenis data, yaitu: a. Interger
Tipe data ini berisikan data semua bilangan bulat yang besarnya range sama dengan data pada bahasa C, yaitu antara -2,147,483,648 sampai
+2,147,483,647 pada platform 32 bit. Apabila data di luar kisaran tersebut maka PHP akan secara otomatis mengkonversikan data tersebut dari tipe interger menjadi tipe floating point.
b. Floating Point
Tipe data ini berisikan bilangan pecahan atau bilangan desimal. Kisaran data floating adalah antara 1.7E-308 sampai 1.7E+308. Bentuk dari data ini adalah desimal ataupun dalam bentuk pangkat.
c. String
Tipe data string dinyatakan dengan menggunakan simbol tanda kutip tunggal („ ‟) atau menggunakan tanda kutip ganda (“ “). Perbedaan penggunaan antara dua tanda kutip tersebut adalah, jika menggunakan tanda petik tunggal, maka yang akan tercetak nama variabelnya, jika menggunakan petik ganda maka yang tercetak isi dari variabelnya. d. Array
Data array disebut juga data bertingkat, artinya data yang menggandung beberapa data di dalamnya dan di-index berdasarkan data numerik atau
string.
e. Array Multidimensi
Operator $a + Sb Operasi Penjumlahan Keterangan $a ditambah $b $a - $b Pengurangan $a dikurangi $b $a * $b Perkalian $a dikalikan $b $a / $b Pembagian $a dibagi $b
$a % $b Modulus Sisa hasil $a dibagi $b
array, yang dimaksud dengan array multidimensi adalah array yang berada di dalam array.
3. Operator pada PHP a. Operator Aritmatika
Operator yang digunakan untuk operasi matematika, misalnya penambahan, pengurangan, perkalian, dan pembagian.
Tabel II.4 Operator Aritmatika
Sumber : Madcoms (2012:221)
b. Operator Increament / Decrement
Merupakan operator penambah dan pengurang nilai dengan nilai selisih 1 (satu). Apabila operator diletakkan sebelum variabel misalkan: ++$a
atau --$a, maka nilai $a akan ditambah atau dikurangi dengan nilai 1 (satu) sebelum operasi dijalankan, dan apabila operasi diletakkan setelah variabel, misalkan: $a++ atau $a--, maka nilai $a akan ditambah atau dikurangi dengan nilai 1 (satu) setelah operasi dijalankan.
Operator ++$a
Operasi
Penjumlahan
Keterangan Proses
$a ditambah satu, kemudian operasi dijalankan.
$a++ Pengurangan Operasi dijalankan, kemudian ditambah satu. $a --$a Perkalian $a dikurangi satu, kemudian operasi dijalankan.
$a-- Pembagian Operasi dijalankan, kemudian $a
dikurangi satu Operator > Contoh $a > $b Keterangan
True jika $a lebih besar dari $b
< $a < $b True jika $a lebih kecil dari $b >= $a >= $b True jika $a lebih besar atau sama dengan $b <= $a <= $b True jika $a lebih kecil atau sama dengan $b
Nama
Lebih dari Lebih kecil Lebih besar atau
sama dengan Lebih kecil atau
sama dengan
== Sama dengan $a == $b True jika $a sama dengan $b != Tidak sama dengan $a != $b True jika $a tidak sama dengan $b
Tabel II.5
Operator Increment/Decrement
Sumber : Madcoms (2012:223) c. Operator String
Operator string adalah operator yang digunakan untuk menggabungkan teks, baik teks dengan variabel maupun suatu teks dengan teks yang lain. Operator ini dideklarasikan dengan memberikan tanda titik ( . ) di antara operan dalam suatu operasi.
d. Operator Perbandingan
Operasi perbandingan digunakan pada struktur operasi sebagai kontrol program seperti: if dan elseif, dimana dilakukan perbandingan antara dua pilihan nilai.
Tabel II.6
Operator Perbandingan
Sumber : Madcoms (2012:225 e. Operator Logika
Operator logika memiliki fungsi yang hampir sama dengan operator perbandingan, yaitu sebagai pengendali struktur program.
Operator And && Contoh $a and $b $a && $b Keterangan
Menghasilkan nilai True jika $a dan $b
bernilai benar
Or || $a or $b
$a || $b
Menghasilkan nilai True jika salah satu dari
$a atau $b atau keduanya bernilai benar xor $a xor $b Menghasilkan nilai True jika salah satu dari $a atau $b bernilai benar
! !$a Menghasilkan nilai True jika tidak benar $a bernilai Nama And Or Eksklusif or Not Tabel II.7 Operator Logika Sumber : Madcoms (2012:225)
f. Operasi Nilai Variabel dari Form HTML
Dalam pembuatan form ini yang perlu diperhatikan adalah tag <form>
beserta atributnya, seperti: method, action, dan input data yang lainnya.
Action adalah atribut yang menunjukkan isian atau informasi, bahwa data akan dikirimkan ke suatu file proses data yang akan diakses. Atribut method mempunyai dua macan pilihan nilai yaitu POST dan GET. 1) Jika menggunakan pilihan GET, maka semua isian dikirimkan ke
server dalam satu kesatuan URL-nya.
2) Jika menggunakan POST, data isian dikirimkan ke server terpisah dengan teks URL-nya.
Kelemahan dari method GET adalah data yang digunakan sebagai parameter akan tampil pada URL, selain itu method GET tidak dapat mengirim data dalam jumlah yang besar.
Kemudian yang tidak kalah pentingnya adalan name (nama) dari input
data, karena nama dari kontrol data ini akan menjadi variabel yang membawa data isian dari form.
2.2.12. CSS (Cascading Style Sheet)
Menurut Madcoms (2016:46) menyimpulkan bahwa, “ CSS (Cascading Style Sheet) adalah kumpulan kode-kode yang berurutan dan saling berhubungan untuk mengatur format atau tampilan suatu halaman HTML”.
Dengan CSS maka akan memungkinkan anda mendesain (style) tampilan dokumen (PHP dan HTML) dengan memisahkan isi dari dokumen HTML dengan kode untuk menampilkannya (CSS). Di dalam dunia desain web, layout atau mengatur letak web, format huruf, dan lainnya yang ada dalam sebuah web
menjadi bagian yang amat penting bahkan dapat jadi bahan yang paling lama dibanding dengan bagian desain web lainnya. Karena jika membuat layout yang salah, maka web, juga akan salah diterjemahkan oleh browser. Hal itu juga dapat disebabkan karena setiap browser memiliki dukungan bahasa (CSS) yang berbeda tentunya default dari browser itu sendiri yang berbeda-beda. Browser yang paling tidak fleksibel soal layout CSS adalah IE karena kurang dukungan terhadap CSS.
2.2.13. Dreamweaver
Dreamweaver CS5 merupakan software aplikasi yang digunakan sebagai
HTML editor profesional untuk mendesain web secara visual. Aplikasi ini juga yang biasa dikenal dengan istilah WYSIWYG (What You See Is What You Get).
Dreamweaver CS5 adalah software yang luar biasa untuk membuat
website. Dengan menggunakan Dreamweaver CS5, kita dapat membuat hampir dari semua tipe halaman web. Selain itu, proses penggunaannya pun mudah dan cepat, bahkan bisa menghasilkan tampilan halaman web yang canggih. Selain itu,
tool seperti yang ada pada browser yang terdiri dari back, forward, stop, home, address, dan live view option.
Sumber : Madcoms (2010:2)
Gambar II.1 Tampilan Awal Adobe Dreamweaver CS5
1. Mengenal Document Window
Document window adalah halaman utama Dreamweaver CS5 yang digunakan untuk memasukkan teks dan gambar, serta skrip-skrip tertentu. Sebelum memasuki halaman ini, kita harus memilih 2 pilihan sebelum bekerja dengan Dreamweaver CS5. Dua pilihan itu seperti berikut :
a. Open a Recent Item: digunakan untuk bekerja dengan dokumen yang telah ada.
b. Create New: digunakan untuk bekerja dari awal, yakni dengan membuat dokumen baru.
2. Ruang Kerja Dreamweaver CS5
a. Aplication Bar
Berada di bagian paling atas jendela aplikasi Dreamweaver CS5. Baris ini berisi tombol workspace (workspace switcher), CS Live, menu dan aplikasi lainnya.
Sumber : Madcoms (2010:12)
Gambar II.2 TampilanAplication Bar
b. Toolbar Document
Berisi tombol-tombol yang digunakan untuk mengubah tampilan jendela dokumen, sebagai contoh tampilan design atau tampilan code. Juga dapat digunakan untuk melihat hasil sementara halaman web pada jendela browser.
Sumber : Madcoms (2010:12)
Gambar II.3 Tampilan Toolbar Document
c. Document Windows
Bagian ini berupa jendela dokumen yang digunakan untuk meletakkan objek-objek untuk membentuk dan merancang website.
Sumber : Madcoms (2010:13)
Gambar II.4 TampilanDocument Windows d. Panel Groups
Kumpulan panel-panel pelengkap dan berfungsi untuk mengorganisir, mengatur serta pelengkap website yang akan dibuat.
Sumber : Madcoms (2010:15)
Gambar II.5 Tampilan PanelGroups e. Property Inspector
Digunakan untuk melihat dan mengubah berbagai properti objek atau teks pada jendela design. Seperti mengatur jenis font, warna dan ukuran dari teks dan lain sebagainya.
Sumber : Madcoms (2010:16)
f. Toolbar standard
Berisi tombol-tombol yang mewakili perintah pada menu File dan Edit, diantaranya perintah New, Open, Save, Save All, Cut, Copy, Paste, Undo, dan
Redo.
Sumber : Madcoms (2010:17)
Gambar II.7 TampilanToolbar Standard g. Toolbar Coding
Berisi tombol-tombol yang digunakan untuk melakukan operasi kode-kode standar. Toolbar ini hanya tampil pada jendela kode.
3. Fitur dalam Adobe Dreamweaver CS5
a. Intergrasi dengan Adobe BrowserLab yaitu salah satu layanan baru live CS online, yang memberikan solusi yang cepat dan akurat untuk pengujian kompabilitas lintas browser. Dengan browser Lab dapat melihat preview
dari halaman web dan konten lokal dengan menggunakan beberapa tambilan dan perangkat perbandingan
b. Integrasi dengan Business Catalyst
Adobe Business Catalyst adalah aplikasi host yang menggantikan perangkat dekstop tradisional dengan satu platform pusat untuk designer web. Aplikasi ini bekerja bersama-sama dengan dreamweaver, dan memungkinkan untuk membangun sebuah website data-driven dasar sampai menjadi toko online yang kuat. Untuk dapat menggunakan aplikasi
ini, terlebih dahulu membuat account dan melakukan download dan instalasi Business Catalyst Extension dalam komputer. Business Catalyst Extension adalah perangkat gratis yang akan memudahkan untuk mengakses banyak fitur yang disediakan dalam konsol admin dalam area kerja Dreamweaver umumnya.
c. CSS Disable/Enable
Dengan CSS disable/enable, maka memungkinkan untuk menonaktifkan dan mengaktifkan kembali properti CSS (Casading Style Sheets) secara langsung dari panel CSS Styles.
d. Pemeriksaan CSS
Tampilan Inspect memungkinkan anda menampilkan secara visual tampilan properti-properti dalam kotak CSS, termasuk padding, border,
dan margin secara detail tanpa membaca kode atau membutuhkan sebuah utilitas pihak ketiga secara terpisah seperti firebug.
e. CSS Starter Page
Saat membuat halaman baru Dreamweaver, dapat membuat satu halaman yang sudah berisi layout CSS. Dreamweaver memiliki 16 layout CSS yang berbeda yang dapat dipilih. Selain itu, dapat membuat sendiri layout CSS dan menambahkannya ke folder konfigurasi, sehingga layout buatan sendiri tersebut akan tampil sebagai pilihan layout pada kotak dialog New Document.
f. Mendukung integrasi dengan CMS
Dengan menggunakan fitur Dynamically-Related Files, maka memungkinkan menemukan semua file eksternal dan script PHP yang
diperlukan untuk merakit halaman berbasis Content Management System
(CMS), dan menampilkan nama file di toolbar Related Files. Secara
default, Dreamweaver mendukung penemuan file kerangka kerja CMS untuk Wordpress, Drupal dan Joomla.
g. Petunjuk Kode PHP Custom Class
Petunjuk kode PHP custom class menampilkan sintaks yang tepat untuk fungsi –fungsi PHP, objek dan konstanta, sehingga membantu untuk mengetik kode yang lebih akurat.
2.3. Teori Pendukung 2.3.1. Struktur Navigasi
Dalam pembuatan website hal yang perlu diperhatikan sebelum merancang tampilan web adalah pembuatan struktur navigasi.
Menurut Binanto dalam Anwar dan Fahrizal (2017:114) “Struktur Navigasi adalah gabungan dari struktur referensi informasi situs web dan mekanisme link yang mendukung pengunjung untuk melakukan penjelajahan situs”.
Ada 4 struktur dasar yang digunakan yaitu:
1. Linier
Pengguna akan melakukan navigasi secara berurutan, dari frame atau byte
informasi yang satu ke yang lainnya.
Sumber : Binanto (2010:269)
Gambar II.8 Struktur Navigasi Linier
6
2. Hirarki
Struktur dasar ini disebut juga struktur “linier dengan percabangan-percabangan” karena pengguna melakukan navigasi disepanjang cabang pohon struktur yang terbentuk oleh logika isi.
Sumber : Binanto (2010:269)
Gambar II.9 Struktur Navigasi Hirarki
3. Non Linier
Pengguna akan melakukan navigasi dengan jelas melalui isi proyek dengan tidak terikat dengan jalur yang sudah ditentukan sebelumnya.
Sumber : Binanto (2010:269)
4. Komposit
Pengguna akan melakukan navigasi dengan bebas (secara non-linier), tetapi terkadang dibatasi prestasi linier film atau informasi penting dan atau pada data yang paling terorganisasi secara logis pada suatu hirarki.
Sumber : Binanto (2010:270)
Gambar II.11 Struktur Navigasi Komposit
2.3.2. ERD (Entity Relationship Diagram)
ERD (Entity Relationship Diagram) adalah model teknik pendekatan yang menyatakan atau menggambarkan hubungan suatu model. Didalam hubungan ini tersebut dinyatakan yang utama dari ERD adalah menunjukan objek data (Entity)
dan hubungan (Relationship), yang ada pada Entity berikutnya. Menurut Simarmata dalam Fridayanthie dan Tias (2016:132), “Entity Relationship Diagram (ERD) adalah alat pemodelan data utama dan akan mambantu mengorganisasi data dalam suatu proyek ke dalam entitas-entitas dan menentukan hubungan antar entitas”. Proses memungkinkan analis menghasilkan struktur basis data dapat disimpan dan diambil secara efisien.
1. Komponen ERD
Simbol Deskripsi
Entitas merupakan data inti yang akan disimpan: bakal tabel pada basis data; benda
yang memiliki data dan harus disimpan datanya agar dapat diakses oleh aplikasi komputer penamaan entitas biasanya lebih ke kata benda dan belum merupakan nama lebel
Field atau kolom data yang butuh di simpan dalam suatu entitas
Field atau kolom data yang butuh disimpan dalam suatu entitas dan digunkan sebagai kunci akses record yang diinginkan; biasanya
berupa id kunci primer dapat lebih dari satu kolom, asalkan kombinasi dari beberapa kolom tersebut dapat bersifat unik (berbeda
tanpa sama)
Field atau kolom data yang butuh disimpan dalam suatu entitas yang dapat memiliki nilai
lebih dari satu. Nama_entitas Entitas Nama_atribut Atribut Atribut_kunci primer Atribut Kunci Primer
Relasi yang menghubungkan antara entitas biasanya diawali dengan kata kerja Relasi
Atribut Multinilai/ Multivalue
Nama_atribut
Penghubung antara relasi dan entitas di mana diked kardinalitas. mrua ujungnya memiliki multiplicity kemungkinan jumlah pemakaian
Kemungkinan jumlah maksimum keterhubungan antara etitas satu dengan entitas lainnya disebut dengan kardinalitas 1
ke N atau sering disebut One to many menghubungkan entitas A dan entitas B.
Asosiasi
Nama_relasi
N
Tabel II.8
Simbol-simbol Entity Relationship Digram (ERD)
Sumber : Rosa dan Shalahuddin (2015:50) 2. Kardinalitas Relasi
Menurut Hidayatullah dan Jauhari (2017:147) memberi pengertian bahwa, “Derajat keterhubungan antar entitas pada suatu relasi”.
Terdapat empat jenis kardinalitas, diantaranya adalah: a. Satu ke satu (One to One)
Setiap elemen dari Entitas A berhubungan paling banyak dengan elemen pada Entitas B. Demikian juga sebaliknya setiap elemen B berhubungan paling banyak satu elemen pada Entitas A.
Contoh
Sumber : Fathansyah (2015:82)
Gambar II.12 Contoh Kardinalitas Satu ke Satu
b. Satu ke banyak (One to Many)
Setiap elemen dari Entitas A berhubungan dengan maksimal banyak elemen pada Entitas B. Dan sebaliknya setiap elemen dari Entitas B berhubungan dengan paling banyak satu elemen di Entitas A.
Contoh:
Sumber : Fathansyah (2015:83)
Gambar II.13 Contoh Kardinalitas Satu ke Banyak
c. Banyak ke satu (Many to One)
Setiap elemen dari Entitas A berhubungan paling banyak dengan satu elemen pada Entitas B. Dan sebaliknya setiap elemen dari Entitas B behubungan dengan maksimal banyak elemen di entitas A.
d. Banyak ke banyak (Many to Many)
Setiap elemen dari Entitas A berhubungan maksimal banyak elemen pada Entitas B demikian sebaliknya.
nama_dos * mengepalai Jurusan 1 Dosen 1 alamat_dos kode_jur * nama_jur nama_dos * kode_jur * nama_dos * mengajar Kuliah N Dosen 1 alamat_dos kode_kul * nama_kul nama_dos * kode_kul *
Contoh:
Sumber : Fathansyah (2015:84)
Gambar II.14 Contoh Kardinalitas Banyak ke Banyak
3. LRS (Logical Record Structure)
Menurut Simarmata dan paryudi dalam Fridayanthie dan Tias (2016:132), “Logical Record Structured (LRS) adalah representasi dari struktur record-record
pada tabel-tabel yang terbentuk dari hasil relasi antar himpunan entitas”. Menentukan kardinalitas, jumlah tabel, dan Foreign Key (FK).
Berikut adalah cara membentuk skema database atau LRS (Logical Record Strutured) berdasarkan Entity Relationship Diagram :
a. Jika relasinya satu-ke-satu, maka foreign key diletakan pada salah satu dari dua entitas yang ada tau menyatukan kedua entitas tersebut.
b. Jika relasinya satu-ke-banyak, maka foreign key diletakan pada entitas
Many.
c. Jika relasinya banyak-ke-banyak, maka dibuat “file konektor” yang berisi
dua foreign key yang berasal dari kedua entitas. nim * mempelajari Kuliah N Mahasiswa N alamat_mhs kode_kul * nama_kul nim * kode_kul * indeks_nilai sks semester nama_mhs tgl_lahir
Contoh:
Sumber : Jurnal Mulia Rahayu (2015:164)
Gambar II.15 Contoh Logical Record Structure (LRS)
2.3.3. Pengujian Web
Pengertian black box testing adalah pengujian yang dilakukan hanya mengamati hasil eksekusi melalui data uji dan memeriksa fungsional dari perangkat lunak. Jadi dianalogikan seperti kita melihat suatu kotak hitam, kita hanya bisa melihat penampilan luarnya saja, tanpa tahu ada apa dibalik bungkus hitamnya. Sama seperti pengujian black box, mengevaluasi hanya dari tampilan luarnya (interface nya) , fungsionalitasnya tanpa mengetahui apa sesungguhnya yang terjadi dalam proses detailnya (hanya tahu input dan outputnya).
Kesimpulannya:
1. Pada antar muka peramgkat lunak guna memperlihatkan bahwa fungsi-fungsi perangkat lunak dapat beroperasi.
2. Menguji beberapa aspek dasar dengan memperhatikan logika internal. Keunggulan Black Box Testing:
adm_guru kode_guru * nip nama alamat tanggal_lahir agama hp jk email status foto adm_kelas id_kelas kode_kelas kode_guru ** nis nilai_uts id_uts kode_kelas nis pai pkn bin mtk ipa ips sbk penjas prky bjawa 1 1 1 M adm_peserta ujian nomor_peserta nis adm_siswa nis nama jk tempat_lahir tanggal_lahir agama alamat adm_uan id_uan nomor_peserta unbin nsbin nabin unbing nsbing nabing unmtk nsmtk namtk unipa nsipa naipa keterangan 1 1 1 1 1 1
a. Bisa memilih subset test secara efektif dan efisien. b. Dapat menemukan cacat.
c. Memaksimalkan testing investmen. Kelemahan Black Box Testing:
a. Tester tidak pernah yakin apakah perangkat lunak tersebut benar-benar lolos uji.
Jenis Black Box Testing:
1. Graph based testing Equivalence partitioning Bonday value analisis
Comparisontesting Orthogonal array testing. Langkah-langkahnya:
a. Analisa kebutuhan dan spesifikasi. b. Pemilihan input.
c. Pemilihan outputnya. d. Seleksi input.
e. Pengujian. f. Review hasil. g. Evaluasi.
2. Equivalence testing temasuk dalam kategori black box testing yang digunakan untuk mengurangi jumlah test case yang ada saat pengujian. Menguji keseluruhan fungsionalitas yang memiliki syarat tertentu, yang di uji fungsionalitasnya yang dilihat dari input-output.
Cara pengujiannya:
Pengumpulan input test casenya dikurangi agar efisiensi dalam waktu, dan memperolah hasil yang maksimal.
Contoh test case nya:
Misalnya : untuk kasus HRD, input umur misal 099 Mengurangi kasus uji ->boundary
Syaratnya: - Memisahkan domain - Valid/tidak valid
Range Use Case: Membuat use case untuk menguji program dan sebagai acuannya adalah use case. Mendefinisikan transaksi pada proses-proses yang ada pada sistem.
Pendekatan dengan use case: Dibuat oleh develop dan untuk develop. Informasi yang ada pada use case sangat berguna.
Fungsi: Menggambarkan fungsi requirement, untuk proses identifikasi. Menyediakan komponen dasar untuk komponen internal sistem, struktur database
dan keterhubungan. Menyediakan dasar dalam membangun test case. 3. Boundary Value Testing.
Pengurangan kasus uji tapi lebih di kembangkan pengujian batasan di
input. Dinilai pada batasnya yang di test value dari batasan-batasanya Focus boundary.Batasan-batasan yang simple karena banyak cacat perangkat lunak tersembunyi. Kasus uji yang melatih nilai-nilai batas Boundary melengkapi
Equivalence testing focus input-output. Langkah boundary:
a. Identifikasi kelas b. Identifikasi batasan
c. Buat test case batasan dengan memilih titik pada batasan (batas atas dan batas bawah).
Contoh:
Tabel II.9
Contoh Black Box Testing No. Skenario
Pengujian
Test case Hasil yang
diharapkan Hasil Pengujian Kesimpul an 1 Tidak mengisi semua data nilai ujian dengan lengkap kemudian klik tombol simpan Nomor ujian:(kosong) Nilai UN: (kosong) Nilai NS:(kosong) Nilai NA:(kosong) Keterangan:(kosong) Sistem akan menolak menyimpan data nilai ujian dan menampilkan “(Nama Data) Tidak boleh kosong”. Sesuai Harapan Valid
2 Salah satu data nilai ujian tidak dimasukan kemudian klik tombol simpan Nomor ujian:(1234) Nilai UN: (90,90,90,90) Nilai NS:(80,80,80,80) Nilai NA:(70,70,70,70) Keterangan:(kosong) Sistem akan menolak menyimpan data nilai ujian dan menampilkan “Nilai Tidak Boleh Kosong” Sesuai Harapan Valid 3 Mengisi semua data nilai ujian dengan lengkap kemudian klik tombol simpan Nomor ujian:(1234) Nilai UN: (90,90,90,90) Nilai NS:(80,80,80,80) Nilai NA:(70,70,70,70) Keterangan:(LULUS) Sistem akan menyimpan data nilai ujian dan menampilkan “Data Nilai Ujian Telah Disimpan”
Sesuai harapan
Valid
